feat(console-ui): macOS 风格应用窗口化(拖拽/缩放/多窗口并存) - #9
Open
wuxs wants to merge 1 commit into
Open
Conversation
- 默认仍最大化;点最大化按钮或双击标题栏 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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
背景
console UI 已是类 macOS 桌面(顶栏 + Desktop + Dock),
AppWindow也有窗口外壳(标题栏 + 交通灯按钮 + minimize genie 动画),但此前窗口还差三层能力:isVisible = activeId === appId && !minimized),无法多窗口并存层叠本次升级为完整 macOS 体验:保留默认最大化;restore 成浮动窗口后可拖拽移动、可缩放、多窗口同时可见并层叠、点击任意窗口置顶聚焦。纯前端、会话内状态,不触碰 Go 后端。
改动
console-ui/src/App.jsx(状态层)geoByApp(浮动窗口像素几何)、zByApp(z-index)、interactingId(拖拽/缩放中)、stageSize(主内容区尺寸 + resize 监听)defaultGeo/fullscreenGeo/clampGeo/bringToFront/setGeoForisVisible改为!minimized.has(appId)—— 多窗口并存可见launchApp预分配级联几何 +bringToFront;focusApp恢复时bringToFrontminimizeApp/closeApp),多窗口下不错对象console-ui/src/components/AppWindow.jsx(窗口本体)left/top/width/height)onPointerDown→ 置顶聚焦;active用于聚焦窗口阴影加深interacting切 transition(拖拽 duration:0 跟手,maximize/restore 走 spring)不变
Dock.jsx不改:最大化时隐藏、浮动时显示motion.js/tokens.js/ Go 后端均不动maxByApp[id] ?? true保留)验证
npm run build通过(463 模块,无报错)npm run dev正常启动关键设计点
left/top,最小化改 transformx/y—— 两个 CSS 通道,零冲突,无需「transform 回写」的回弹修正zByApp),起点低于 Dock 的 25🤖 Generated with Claude Code