Skip to content

feat(console-ui): macOS 风格应用窗口化(拖拽/缩放/多窗口并存) - #9

Open
wuxs wants to merge 1 commit into
mainfrom
worktree-feat-app-windowing
Open

feat(console-ui): macOS 风格应用窗口化(拖拽/缩放/多窗口并存)#9
wuxs wants to merge 1 commit into
mainfrom
worktree-feat-app-windowing

Conversation

@wuxs

@wuxs wuxs commented Jul 26, 2026

Copy link
Copy Markdown
Collaborator

背景

console UI 已是类 macOS 桌面(顶栏 + Desktop + Dock),AppWindow 也有窗口外壳(标题栏 + 交通灯按钮 + minimize genie 动画),但此前窗口还差三层能力:

  1. 应用打开即全屏最大化(本次保留此默认行为)
  2. restore 成浮动窗口后,位置/大小写死,不可拖、不可缩
  3. 同一时间只有 active 窗口可见isVisible = activeId === appId && !minimized),无法多窗口并存层叠

本次升级为完整 macOS 体验:保留默认最大化;restore 成浮动窗口后可拖拽移动、可缩放、多窗口同时可见并层叠、点击任意窗口置顶聚焦。纯前端、会话内状态,不触碰 Go 后端。

改动

console-ui/src/App.jsx(状态层)

  • 新增 geoByApp(浮动窗口像素几何)、zByApp(z-index)、interactingId(拖拽/缩放中)、stageSize(主内容区尺寸 + resize 监听)
  • 新增 defaultGeo / fullscreenGeo / clampGeo / bringToFront / setGeoFor
  • isVisible 改为 !minimized.has(appId) —— 多窗口并存可见
  • launchApp 预分配级联几何 + bringToFrontfocusApp 恢复时 bringToFront
  • 标题栏按钮改为按 id 精确作用(minimizeApp / closeApp),多窗口下不错对象

console-ui/src/components/AppWindow.jsx(窗口本体)

  • 百分比 frame → 纯像素几何(left/top/width/height
  • 标题栏手写 pointer events 拖拽;双击标题栏切最大化
  • 8 向 resize handle(左/上方向同步移动 x/y,触底后位置不变)
  • onPointerDown → 置顶聚焦;active 用于聚焦窗口阴影加深
  • interacting 切 transition(拖拽 duration:0 跟手,maximize/restore 走 spring)
  • 拖拽/缩放期间 portal 到 body 盖全屏透明覆盖层,屏蔽 iframe 吞 pointermove
  • minimize genie 飞回动画、reduced-motion 降级均保留

不变

  • Dock.jsx 不改:最大化时隐藏、浮动时显示
  • motion.js / tokens.js / Go 后端均不动
  • 应用打开默认最大化(maxByApp[id] ?? true 保留)

验证

  • npm run build 通过(463 模块,无报错)
  • npm run dev 正常启动
  • ✅ 未引入新 lint 错误(剩 12 个提示均为 main 既有,与本次无关)

关键设计点

  • 拖拽改 left/top,最小化改 transform x/y —— 两个 CSS 通道,零冲突,无需「transform 回写」的回弹修正
  • z-order 自增计数器(zByApp),起点低于 Dock 的 25

🤖 Generated with Claude Code

- 默认仍最大化;点最大化按钮或双击标题栏 restore 成浮动窗口后,可自由拖拽、四边四角缩放
- 多窗口同时可见并层叠,点击任意窗口置顶聚焦(聚焦窗口阴影更深,便于区分活动窗口)
- z-order 用自增计数器;窗口几何走纯像素 state(left/top),与 minimize 的 transform x/y 分属不同 CSS 通道,互不干扰
- 拖拽/缩放期间盖全屏透明覆盖层(portal 到 body),屏蔽 iframe 吞掉 pointermove,浏览器类应用拖拽不卡
- 标题栏按钮精确作用于自身窗口(minimizeApp / closeApp by id),多窗口可见下不错对象
- Dock 行为不变:最大化时隐藏、浮动时显示
- minimize genie 飞回动画、reduced-motion 降级均保留

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant