保存一下

src/core/utils/DraggableResizableWindow.ts

@@ -51,8 +51,6 @@ interface IDraggableResizableOptions {
   target: HTMLElement;
   /** 拖拽句柄 */
   handle?: HTMLElement;
-  /** 拖拽模式 */
-  mode?: 'transform' | 'position';
   /** 拖拽边界或容器元素 */
   boundary?: IBoundaryRect | HTMLElement;
   /** 移动步进（网格吸附） */
@@ -104,12 +102,12 @@ interface IBoundaryRect {
 
 /**
  * 拖拽 + 调整尺寸 + 最大最小化 通用类
+ * 统一使用 position: absolute + transform: translate 实现拖拽
  */
 export class DraggableResizableWindow {
   private handle?: HTMLElement;
   private target: HTMLElement;
   private boundary?: HTMLElement | IBoundaryRect;
-  private mode: 'transform' | 'position';
   private snapGrid: number;
   private snapThreshold: number;
   private snapAnimation: boolean;
@@ -120,45 +118,49 @@ export class DraggableResizableWindow {
   private onDragMove?: TDragMoveCallback;
   private onDragEnd?: TDragEndCallback;
 
+  private onResizeMove?: (data: IResizeCallbackData) => void;
+  private onResizeEnd?: (data: IResizeCallbackData) => void;
+
   private isDragging = false;
+  private currentDirection: TResizeDirection | null = null;
+
   private startX = 0;
   private startY = 0;
+  private startWidth = 0;
+  private startHeight = 0;
+  private startTop = 0;
+  private startLeft = 0;
   private offsetX = 0;
   private offsetY = 0;
   private currentX = 0;
   private currentY = 0;
 
+  private pendingDrag = false;
+  private pendingResize = false;
+  private dragDX = 0;
+  private dragDY = 0;
+  private resizeDX = 0;
+  private resizeDY = 0;
+
+  private minWidth: number;
+  private minHeight: number;
+  private maxWidth: number;
+  private maxHeight: number;
+
   private containerRect?: DOMRect;
   private resizeObserver?: ResizeObserver;
   private mutationObserver: MutationObserver;
   private animationFrame?: number;
 
-  private currentDirection: TResizeDirection | null = null;
-  private startWidth = 0;
-  private startHeight = 0;
-  private startTop = 0;
-  private startLeft = 0;
-  private minWidth: number;
-  private minHeight: number;
-  private maxWidth: number;
-  private maxHeight: number;
-  private onResizeMove?: (data: IResizeCallbackData) => void;
-  private onResizeEnd?: (data: IResizeCallbackData) => void;
-
   private state: WindowState = 'default';
-  /** 目标元素默认 bounds */
   private targetDefaultBounds: IElementRect;
-  /** 最大化前保存 bounds */
   private maximizedBounds?: IElementRect;
-  /** 最小化任务栏位置的元素ID */
   private taskbarElementId: string;
 
   constructor(options: IDraggableResizableOptions) {
-    // Drag
     this.handle = options.handle;
     this.target = options.target;
     this.boundary = options.boundary;
-    this.mode = options.mode ?? 'transform';
     this.snapGrid = options.snapGrid ?? 1;
     this.snapThreshold = options.snapThreshold ?? 0;
     this.snapAnimation = options.snapAnimation ?? false;
@@ -169,7 +171,6 @@ export class DraggableResizableWindow {
     this.onDragMove = options.onDragMove;
     this.onDragEnd = options.onDragEnd;
 
-    // Resize
     this.minWidth = options.minWidth ?? 100;
     this.minHeight = options.minHeight ?? 50;
     this.maxWidth = options.maxWidth ?? window.innerWidth;
@@ -177,33 +178,36 @@ export class DraggableResizableWindow {
     this.onResizeMove = options.onResizeMove;
     this.onResizeEnd = options.onResizeEnd;
 
-    this.targetDefaultBounds = { width: this.target.offsetWidth, height: this.target.offsetHeight, top: this.target.offsetTop, left: this.target.offsetLeft };
+    this.targetDefaultBounds = {
+      width: this.target.offsetWidth,
+      height: this.target.offsetHeight,
+      top: this.target.offsetTop,
+      left: this.target.offsetLeft,
+    };
     this.taskbarElementId = options.taskbarElementId;
 
+    this.target.style.position = "absolute";
+    this.target.style.left = `${this.target.offsetLeft}px`;
+    this.target.style.top = `${this.target.offsetTop}px`;
+    this.target.style.transform = "translate(0px, 0px)";
+
     this.init();
   }
 
-  /** 初始化事件 */
   private init() {
     if (this.handle) {
       this.handle.addEventListener('mousedown', this.onMouseDownDrag);
     }
-
     this.target.addEventListener('mousedown', this.onMouseDownResize);
     this.target.addEventListener('mouseleave', this.onMouseLeave);
     document.addEventListener('mousemove', this.onDocumentMouseMoveCursor);
 
-    if (this.boundary instanceof HTMLElement) {
+    if (this.boundary instanceof HTMLElement) this.observeResize(this.boundary);
-      this.observeResize(this.boundary);
-    }
 
-    // 监听目标 DOM 是否被移除，自动销毁
+    this.mutationObserver = new MutationObserver(mutations => {
-    this.mutationObserver = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
-        mutation.removedNodes.forEach((node) => {
+        mutation.removedNodes.forEach(node => {
-          if (node === this.target) {
+          if (node === this.target) this.destroy();
-            this.destroy();
-          }
         });
       }
     });
@@ -212,41 +216,43 @@ export class DraggableResizableWindow {
     }
   }
 
+  /** ---------------- 拖拽 ---------------- */
   private onMouseDownDrag = (e: MouseEvent) => {
-    if (this.getResizeDirection(e)) return; // 避免和 resize 冲突
+    if (this.getResizeDirection(e)) return;
     e.preventDefault();
-    this.startDrag(e);
-  };
 
-  private startDrag(e: MouseEvent) {
     this.isDragging = true;
     this.startX = e.clientX;
     this.startY = e.clientY;
 
-    if (this.mode === 'position') {
+    const style = window.getComputedStyle(this.target);
-      const rect = this.target.getBoundingClientRect();
+    const matrix = new DOMMatrixReadOnly(style.transform);
-      const parentRect = this.target.offsetParent?.getBoundingClientRect() ?? { left: 0, top: 0 };
+    this.offsetX = matrix.m41;
-      this.offsetX = rect.left - parentRect.left;
+    this.offsetY = matrix.m42;
-      this.offsetY = rect.top - parentRect.top;
-    } else {
-      this.offsetX = this.currentX;
-      this.offsetY = this.currentY;
-    }
-
-    document.addEventListener('mousemove', this.onMouseMoveDrag);
-    document.addEventListener('mouseup', this.onMouseUpDrag);
 
     this.onDragStart?.(this.offsetX, this.offsetY);
-  }
 
-  private onMouseMoveDrag = (e: MouseEvent) => {
+    document.addEventListener('mousemove', this.onMouseMoveDragRAF);
+    document.addEventListener('mouseup', this.onMouseUpDrag);
+  };
+
+  private onMouseMoveDragRAF = (e: MouseEvent) => {
+    this.dragDX = e.clientX - this.startX;
+    this.dragDY = e.clientY - this.startY;
+    if (!this.pendingDrag) {
+      this.pendingDrag = true;
+      requestAnimationFrame(() => {
+        this.pendingDrag = false;
+        this.applyDragFrame();
+      });
+    }
+  };
+
+  private applyDragFrame() {
     if (!this.isDragging) return;
 
-    const dx = e.clientX - this.startX;
+    let newX = this.offsetX + this.dragDX;
-    const dy = e.clientY - this.startY;
+    let newY = this.offsetY + this.dragDY;
-
-    let newX = this.offsetX + dx;
-    let newY = this.offsetY + dy;
 
     if (this.snapGrid > 1) {
       newX = Math.round(newX / this.snapGrid) * this.snapGrid;
@@ -255,9 +261,10 @@ export class DraggableResizableWindow {
 
     this.applyPosition(newX, newY, false);
     this.onDragMove?.(newX, newY);
-  };
+  }
 
   private onMouseUpDrag = () => {
+    console.log(111)
     if (!this.isDragging) return;
     this.isDragging = false;
 
@@ -274,27 +281,19 @@ export class DraggableResizableWindow {
       this.updateDefaultBounds(snapped.x, snapped.y);
     }
 
-    document.removeEventListener('mousemove', this.onMouseMoveDrag);
+    document.removeEventListener('mousemove', this.onMouseMoveDragRAF);
     document.removeEventListener('mouseup', this.onMouseUpDrag);
   };
 
   private applyPosition(x: number, y: number, isFinal: boolean) {
     this.currentX = x;
     this.currentY = y;
-
-    if (this.mode === 'position') {
-      this.target.style.left = `${x}px`;
-      this.target.style.top = `${y}px`;
-    } else {
     this.target.style.transform = `translate(${x}px, ${y}px)`;
-    }
-
     if (isFinal) this.applyBoundary();
   }
 
   private animateTo(targetX: number, targetY: number, duration: number, onComplete?: () => void) {
     if (this.animationFrame) cancelAnimationFrame(this.animationFrame);
-
     const startX = this.currentX;
     const startY = this.currentY;
     const deltaX = targetX - startX;
@@ -312,86 +311,57 @@ export class DraggableResizableWindow {
       this.applyPosition(x, y, false);
       this.onDragMove?.(x, y);
 
-      if (progress < 1) {
+      if (progress < 1) this.animationFrame = requestAnimationFrame(step);
-        this.animationFrame = requestAnimationFrame(step);
+      else { this.applyPosition(targetX, targetY, true); this.onDragMove?.(targetX, targetY); onComplete?.(); }
-      } else {
-        this.applyPosition(targetX, targetY, true);
-        this.onDragMove?.(targetX, targetY);
-        onComplete?.();
-      }
     };
-
     this.animationFrame = requestAnimationFrame(step);
   }
 
   private applyBoundary() {
     if (!this.boundary || this.allowOverflow) return;
-
     let { x, y } = { x: this.currentX, y: this.currentY };
 
     if (this.boundary instanceof HTMLElement && this.containerRect) {
       const rect = this.target.getBoundingClientRect();
-      const minX = 0;
+      x = Math.min(Math.max(x, 0), this.containerRect.width - rect.width);
-      const minY = 0;
+      y = Math.min(Math.max(y, 0), this.containerRect.height - rect.height);
-      const maxX = this.containerRect.width - rect.width;
+    } else if (!(this.boundary instanceof HTMLElement) && this.boundary) {
-      const maxY = this.containerRect.height - rect.height;
-
-      x = Math.min(Math.max(x, minX), maxX);
-      y = Math.min(Math.max(y, minY), maxY);
-    } else if (!(this.boundary instanceof HTMLElement)) {
       if (this.boundary.minX !== undefined) x = Math.max(x, this.boundary.minX);
       if (this.boundary.maxX !== undefined) x = Math.min(x, this.boundary.maxX);
       if (this.boundary.minY !== undefined) y = Math.max(y, this.boundary.minY);
       if (this.boundary.maxY !== undefined) y = Math.min(y, this.boundary.maxY);
     }
 
-    this.currentX = x;
+    this.currentX = x; this.currentY = y;
-    this.currentY = y;
     this.applyPosition(x, y, false);
   }
 
   private applySnapping(x: number, y: number) {
-    let { x: snappedX, y: snappedY } = { x, y };
+    let snappedX = x, snappedY = y;
-
-    // 1. 容器吸附
     const containerSnap = this.getSnapPoints();
     if (this.snapThreshold > 0) {
-      for (const sx of containerSnap.x) {
+      for (const sx of containerSnap.x) if (Math.abs(x - sx) <= this.snapThreshold) { snappedX = sx; break; }
-        if (Math.abs(x - sx) <= this.snapThreshold) {
+      for (const sy of containerSnap.y) if (Math.abs(y - sy) <= this.snapThreshold) { snappedY = sy; break; }
-          snappedX = sx;
-          break;
     }
-      }
-      for (const sy of containerSnap.y) {
-        if (Math.abs(y - sy) <= this.snapThreshold) {
-          snappedY = sy;
-          break;
-        }
-      }
-    }
-
-    // 2. 窗口吸附 TODO
-
     return { x: snappedX, y: snappedY };
   }
 
   private getSnapPoints() {
     const snapPoints = { x: [] as number[], y: [] as number[] };
-
     if (this.boundary instanceof HTMLElement && this.containerRect) {
       const rect = this.target.getBoundingClientRect();
       snapPoints.x = [0, this.containerRect.width - rect.width];
       snapPoints.y = [0, this.containerRect.height - rect.height];
-    } else if (!(this.boundary instanceof HTMLElement) && this.boundary) {
+    } else if (this.boundary && !(this.boundary instanceof HTMLElement)) {
       if (this.boundary.minX !== undefined) snapPoints.x.push(this.boundary.minX);
       if (this.boundary.maxX !== undefined) snapPoints.x.push(this.boundary.maxX);
       if (this.boundary.minY !== undefined) snapPoints.y.push(this.boundary.minY);
       if (this.boundary.maxY !== undefined) snapPoints.y.push(this.boundary.maxY);
     }
-
     return snapPoints;
   }
 
+  /** ---------------- 缩放 ---------------- */
   private onMouseDownResize = (e: MouseEvent) => {
     const dir = this.getResizeDirection(e);
     if (!dir) return;
@@ -402,65 +372,54 @@ export class DraggableResizableWindow {
   private startResize(e: MouseEvent, dir: TResizeDirection) {
     this.currentDirection = dir;
     const rect = this.target.getBoundingClientRect();
-    const parentRect = this.target.offsetParent?.getBoundingClientRect() ?? { left: 0, top: 0 };
+    const style = window.getComputedStyle(this.target);
+    const matrix = new DOMMatrixReadOnly(style.transform);
+    this.offsetX = matrix.m41;
+    this.offsetY = matrix.m42;
 
     this.startX = e.clientX;
     this.startY = e.clientY;
     this.startWidth = rect.width;
     this.startHeight = rect.height;
-    this.startTop = rect.top - parentRect.top;
+    this.startLeft = this.offsetX;
-    this.startLeft = rect.left - parentRect.left;
+    this.startTop = this.offsetY;
 
-    document.addEventListener('mousemove', this.onResizeDrag);
+    document.addEventListener('mousemove', this.onResizeDragRAF);
     document.addEventListener('mouseup', this.onResizeEndHandler);
   }
 
-  private onResizeDrag = (e: MouseEvent) => {
+  private onResizeDragRAF = (e: MouseEvent) => {
-    if (!this.currentDirection) return;
+    this.resizeDX = e.clientX - this.startX;
+    this.resizeDY = e.clientY - this.startY;
+    if (!this.pendingResize) {
+      this.pendingResize = true;
+      requestAnimationFrame(() => {
+        this.pendingResize = false;
+        this.applyResizeFrame();
+      });
+    }
+  };
 
-    let deltaX = e.clientX - this.startX;
+  private applyResizeFrame() {
-    let deltaY = e.clientY - this.startY;
+    if (!this.currentDirection) return;
 
     let newWidth = this.startWidth;
     let newHeight = this.startHeight;
-    let newTop = this.startTop;
+    let newX = this.startLeft;
-    let newLeft = this.startLeft;
+    let newY = this.startTop;
+
+    const dx = this.resizeDX;
+    const dy = this.resizeDY;
 
     switch (this.currentDirection) {
-      case 'right':
+      case 'right': newWidth += dx; break;
-        newWidth = this.startWidth + deltaX;
+      case 'bottom': newHeight += dy; break;
-        break;
+      case 'bottom-right': newWidth += dx; newHeight += dy; break;
-      case 'bottom':
+      case 'left': newWidth -= dx; newX += dx; break;
-        newHeight = this.startHeight + deltaY;
+      case 'top': newHeight -= dy; newY += dy; break;
-        break;
+      case 'top-left': newWidth -= dx; newX += dx; newHeight -= dy; newY += dy; break;
-      case 'bottom-right':
+      case 'top-right': newWidth += dx; newHeight -= dy; newY += dy; break;
-        newWidth = this.startWidth + deltaX;
+      case 'bottom-left': newWidth -= dx; newX += dx; newHeight += dy; break;
-        newHeight = this.startHeight + deltaY;
-        break;
-      case 'left':
-        newWidth = this.startWidth - deltaX;
-        newLeft = this.startLeft + deltaX;
-        break;
-      case 'top':
-        newHeight = this.startHeight - deltaY;
-        newTop = this.startTop + deltaY;
-        break;
-      case 'top-left':
-        newWidth = this.startWidth - deltaX;
-        newLeft = this.startLeft + deltaX;
-        newHeight = this.startHeight - deltaY;
-        newTop = this.startTop + deltaY;
-        break;
-      case 'top-right':
-        newWidth = this.startWidth + deltaX;
-        newHeight = this.startHeight - deltaY;
-        newTop = this.startTop + deltaY;
-        break;
-      case 'bottom-left':
-        newWidth = this.startWidth - deltaX;
-        newLeft = this.startLeft + deltaX;
-        newHeight = this.startHeight + deltaY;
-        break;
     }
 
     newWidth = Math.max(this.minWidth, Math.min(this.maxWidth, newWidth));
@@ -468,35 +427,32 @@ export class DraggableResizableWindow {
 
     this.target.style.width = `${newWidth}px`;
     this.target.style.height = `${newHeight}px`;
-    this.target.style.top = `${newTop}px`;
+    this.applyPosition(newX, newY, false);
-    this.target.style.left = `${newLeft}px`;
+
+    this.updateCursor(this.currentDirection);
 
     this.onResizeMove?.({
       width: newWidth,
       height: newHeight,
-      top: newTop,
+      left: newX,
-      left: newLeft,
+      top: newY,
       direction: this.currentDirection,
     });
-  };
-
-  private onResizeEndHandler = () => {
-    if (this.currentDirection) {
-      const rect = this.target.getBoundingClientRect();
-      const parentRect = this.target.offsetParent?.getBoundingClientRect() ?? { left: 0, top: 0 };
-      this.onResizeEnd?.({
-        width: rect.width,
-        height: rect.height,
-        top: rect.top - parentRect.top,
-        left: rect.left - parentRect.left,
-        direction: this.currentDirection,
-      });
-      this.updateDefaultBounds(rect.left - parentRect.left, rect.top - parentRect.top, rect.width, rect.height);
   }
 
+  private onResizeEndHandler = () => {
+    if (!this.currentDirection) return;
+    this.onResizeEnd?.({
+      width: this.target.offsetWidth,
+      height: this.target.offsetHeight,
+      left: this.currentX,
+      top: this.currentY,
+      direction: this.currentDirection,
+    });
+    this.updateDefaultBounds(this.currentX, this.currentY, this.target.offsetWidth, this.target.offsetHeight);
     this.currentDirection = null;
     this.updateCursor(null);
-    document.removeEventListener('mousemove', this.onResizeDrag);
+    document.removeEventListener('mousemove', this.onResizeDragRAF);
     document.removeEventListener('mouseup', this.onResizeEndHandler);
   };
 
@@ -505,7 +461,6 @@ export class DraggableResizableWindow {
     const offset = 8;
     const x = e.clientX;
     const y = e.clientY;
-
     const top = y >= rect.top && y <= rect.top + offset;
     const bottom = y >= rect.bottom - offset && y <= rect.bottom;
     const left = x >= rect.left && x <= rect.left + offset;
@@ -519,24 +474,15 @@ export class DraggableResizableWindow {
     if (bottom) return 'bottom';
     if (left) return 'left';
     if (right) return 'right';
-
     return null;
   }
 
   private updateCursor(direction: TResizeDirection | null) {
-    if (!direction) {
+    if (!direction) { this.target.style.cursor = 'default'; return; }
-      this.target.style.cursor = 'default';
-      return;
-    }
     const cursorMap: Record<TResizeDirection, string> = {
-      top: 'ns-resize',
+      top: 'ns-resize', bottom: 'ns-resize', left: 'ew-resize', right: 'ew-resize',
-      bottom: 'ns-resize',
+      'top-left': 'nwse-resize', 'top-right': 'nesw-resize',
-      left: 'ew-resize',
+      'bottom-left': 'nesw-resize', 'bottom-right': 'nwse-resize'
-      right: 'ew-resize',
-      'top-left': 'nwse-resize',
-      'top-right': 'nesw-resize',
-      'bottom-left': 'nesw-resize',
-      'bottom-right': 'nwse-resize',
     };
     this.target.style.cursor = cursorMap[direction];
   }
@@ -547,223 +493,66 @@ export class DraggableResizableWindow {
     this.updateCursor(dir);
   };
 
-  private onMouseLeave = () => {
+  /** ---------------- 最小化/最大化 ---------------- */
-    if (!this.currentDirection && !this.isDragging) this.updateCursor(null);
-  };
-
-  private observeResize(container: HTMLElement) {
-    if (this.resizeObserver) this.resizeObserver.disconnect();
-    this.resizeObserver = new ResizeObserver(() => {
-      this.containerRect = container.getBoundingClientRect();
-      this.applyBoundary();
-    });
-    this.resizeObserver.observe(container);
-    this.containerRect = container.getBoundingClientRect();
-  }
-
-  /** 销毁实例 */
-  public destroy() {
-    // 拖拽解绑：只在 handle 上解绑
-    if (this.handle) {
-      this.handle.removeEventListener('mousedown', this.onMouseDownDrag);
-    }
-
-    // 调整尺寸解绑
-    this.target.removeEventListener('mousedown', this.onMouseDownResize);
-    this.target.removeEventListener('mouseleave', this.onMouseLeave);
-
-    // 全局事件解绑
-    document.removeEventListener('mousemove', this.onDocumentMouseMoveCursor);
-    document.removeEventListener('mousemove', this.onMouseMoveDrag);
-    document.removeEventListener('mouseup', this.onMouseUpDrag);
-    document.removeEventListener('mousemove', this.onResizeDrag);
-    document.removeEventListener('mouseup', this.onResizeEndHandler);
-
-    // 观察器清理
-    if (this.resizeObserver) this.resizeObserver.disconnect();
-    if (this.mutationObserver) this.mutationObserver.disconnect();
-    if (this.animationFrame) cancelAnimationFrame(this.animationFrame);
-
-    // 所有属性置空，释放内存
-    Object.keys(this).forEach(k => (this as any)[k] = null);
-  }
-
-  public getState() {
-    return this.state;
-  }
-
-  /** 最小化到任务栏 */
   public minimize() {
     if (this.state === 'minimized') return;
     this.state = 'minimized';
-
+    const taskbar = document.getElementById(this.taskbarElementId);
-    // 获取任务栏位置
+    if (!taskbar) return;
-    const taskbarElement = document.querySelector(this.taskbarElementId)
+    const rect = taskbar.getBoundingClientRect();
-    if (!taskbarElement) throw new Error('任务栏元素未找到');
+    this.animateTo(rect.left, rect.top, 200);
-    const rect = taskbarElement.getBoundingClientRect()
+    this.target.style.width = '0px';
-    const targetX = rect.left;
+    this.target.style.height = '0px';
-    const targetY = rect.top;
-    const targetWidth = rect.width;
-    const targetHeight = rect.height;
-
-    const startX = this.currentX;
-    const startY = this.currentY;
-    const startWidth = this.target.offsetWidth;
-    const startHeight = this.target.offsetHeight;
-
-    const deltaX = targetX - startX;
-    const deltaY = targetY - startY;
-    const deltaW = targetWidth - startWidth;
-    const deltaH = targetHeight - startHeight;
-    const duration = 400; // Windows 风格稍慢
-    const startTime = performance.now();
-
-    const step = (now: number) => {
-      const elapsed = now - startTime;
-      const progress = Math.min(elapsed / duration, 1);
-      const ease = 1 - Math.pow(1 - progress, 3); // 缓动
-
-      const x = startX + deltaX * ease;
-      const y = startY + deltaY * ease;
-      const w = startWidth + deltaW * ease;
-      const h = startHeight + deltaH * ease;
-
-      this.target.style.width = `${w}px`;
-      this.target.style.height = `${h}px`;
-      this.applyPosition(x, y, false);
-
-      if (progress < 1) {
-        requestAnimationFrame(step);
-      } else {
-        // 最终值
-        this.target.style.width = `${targetWidth}px`;
-        this.target.style.height = `${targetHeight}px`;
-        this.applyPosition(targetX, targetY, true);
-      }
-    };
-
-    requestAnimationFrame(step);
   }
 
-  /** 最大化窗口（带动画） */
+  public maximize() {
-  public maximize(withAnimation = true) {
     if (this.state === 'maximized') return;
     this.state = 'maximized';
-
+    const bounds = { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight };
-    // 保存原始 bounds
+    this.maximizedBounds = bounds;
-    const rect = this.target.getBoundingClientRect();
+    this.animateTo(bounds.left, bounds.top, 200);
-    this.targetDefaultBounds = { width: rect.width, height: rect.height, top: rect.top, left: rect.left };
+    this.target.style.width = `${bounds.width}px`;
-    const startWidth = rect.width;
+    this.target.style.height = `${bounds.height}px`;
-    const startHeight = rect.height;
-    const startX = this.currentX;
-    const startY = this.currentY;
-
-    const targetWidth = this.containerRect?.width ?? window.innerWidth;
-    const targetHeight = this.containerRect?.height ?? window.innerHeight;
-    const targetX = 0;
-    const targetY = 0;
-
-    if (!withAnimation) {
-      this.target.style.width = `${targetWidth}px`;
-      this.target.style.height = `${targetHeight}px`;
-      this.applyPosition(targetX, targetY, true);
-      return;
   }
 
-    // 动画过渡
+  public restore() {
-    const deltaX = targetX - startX;
-    const deltaY = targetY - startY;
-    const deltaW = targetWidth - startWidth;
-    const deltaH = targetHeight - startHeight;
-    const duration = 300;
-    const startTime = performance.now();
-
-    const step = (now: number) => {
-      const elapsed = now - startTime;
-      const progress = Math.min(elapsed / duration, 1);
-      const ease = 1 - Math.pow(1 - progress, 3);
-
-      const x = startX + deltaX * ease;
-      const y = startY + deltaY * ease;
-      const w = startWidth + deltaW * ease;
-      const h = startHeight + deltaH * ease;
-
-      this.target.style.width = `${w}px`;
-      this.target.style.height = `${h}px`;
-      this.applyPosition(x, y, false);
-
-      if (progress < 1) {
-        requestAnimationFrame(step);
-      } else {
-        this.target.style.width = `${targetWidth}px`;
-        this.target.style.height = `${targetHeight}px`;
-        this.applyPosition(targetX, targetY, true);
-      }
-    };
-
-    requestAnimationFrame(step);
-  }
-
-  /** 恢复窗口（带动画，从最大化或最小化） */
-  public restore(withAnimation = true) {
     if (this.state === 'default') return;
     this.state = 'default';
     const b = this.targetDefaultBounds;
-
+    this.animateTo(b.left, b.top, 200);
-    const startWidth = this.target.offsetWidth || 0;
-    const startHeight = this.target.offsetHeight || 0;
-    const startLeft = this.currentX;
-    const startTop = this.currentY;
-
-    if (!withAnimation) {
     this.target.style.width = `${b.width}px`;
     this.target.style.height = `${b.height}px`;
-      this.applyPosition(b.left, b.top, true);
-      return;
   }
 
-    const deltaX = b.left - startLeft;
+  private updateDefaultBounds(left: number, top: number, width?: number, height?: number) {
-    const deltaY = b.top - startTop;
-    const deltaW = b.width - startWidth;
-    const deltaH = b.height - startHeight;
-    const duration = 300;
-    const startTime = performance.now();
-
-    const step = (now: number) => {
-      const elapsed = now - startTime;
-      const progress = Math.min(elapsed / duration, 1);
-      const ease = 1 - Math.pow(1 - progress, 3);
-
-      const x = startLeft + deltaX * ease;
-      const y = startTop + deltaY * ease;
-      const w = startWidth + deltaW * ease;
-      const h = startHeight + deltaH * ease;
-
-      this.target.style.width = `${w}px`;
-      this.target.style.height = `${h}px`;
-      this.applyPosition(x, y, false);
-
-      if (progress < 1) {
-        requestAnimationFrame(step);
-      } else {
-        this.target.style.width = `${b.width}px`;
-        this.target.style.height = `${b.height}px`;
-        this.applyPosition(b.left, b.top, true);
-      }
-    };
-
-    requestAnimationFrame(step);
-  }
-
-
-  /** 更新默认 bounds */
-  private updateDefaultBounds(x?: number, y?: number, width?: number, height?: number) {
-    const rect = this.target.getBoundingClientRect();
     this.targetDefaultBounds = {
-      left: x ?? rect.left,
+      left, top,
-      top: y ?? rect.top,
+      width: width ?? this.target.offsetWidth,
-      width: width ?? rect.width,
+      height: height ?? this.target.offsetHeight
-      height: height ?? rect.height,
     };
   }
+
+  /** ---------------- Resize Observer ---------------- */
+  private observeResize(element: HTMLElement) {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.containerRect = element.getBoundingClientRect();
+    });
+    this.resizeObserver.observe(element);
+  }
+
+  /** ---------------- 销毁 ---------------- */
+  public destroy() {
+    if (this.handle) this.handle.removeEventListener('mousedown', this.onMouseDownDrag);
+    this.target.removeEventListener('mousedown', this.onMouseDownResize);
+    document.removeEventListener('mousemove', this.onMouseMoveDragRAF);
+    document.removeEventListener('mouseup', this.onMouseUpDrag);
+    document.removeEventListener('mousemove', this.onResizeDragRAF);
+    document.removeEventListener('mouseup', this.onResizeEndHandler);
+    document.removeEventListener('mousemove', this.onDocumentMouseMoveCursor);
+    this.resizeObserver?.disconnect();
+    this.mutationObserver.disconnect();
+    cancelAnimationFrame(this.animationFrame ?? 0);
+  }
+
+  private onMouseLeave = () => { this.updateCursor(null); };
 }

src/core/window/impl/WindowFormImpl.ts

@@ -77,7 +77,7 @@ export default class WindowFormImpl implements IWindowForm {
     const win = new DraggableResizableWindow({
       target: dom,
       handle: div,
-      mode: 'position',
+      snapAnimation: true,
       snapThreshold: 20,
       boundary: document.body,
       taskbarElementId: '#taskbar',