UI 规范 / 弹窗系统

本页是 Alune 全局 UI 规范的弹窗专项。应用与官网的通用配色、排版、尺寸、组件状态和页面规则见 UI 规范；本页继续维护弹窗结构、风险确认、浮层与反馈中心的专用规则及原始设计附件。

• 状态：已接入产品（Issue #139，PR https://github.com/ShaoClean/Alune/pull/144 待审阅）；与设计稿的差异见 Issue-139
• 最近更新：2026-10-01
• 来源：Issue #118：页面反馈改为弹窗与通知浮层
• 关联 Issue：https://github.com/ShaoClean/Alune/issues/118
• 现有反馈迁移 PR：https://github.com/ShaoClean/Alune/pull/123（不包含本重设计提案）

本页从 Issue #118 的「弹窗系统 UI 设计稿」独立整理，作为弹窗、气泡确认、浮层菜单和反馈中心的 UI 规范，已在 Issue #139 接入产品；现有反馈迁移的实现方案与验收记录仍见 Issue #118。

下载独立交互设计稿（HTML，约 0.4 MB）。保存后用浏览器打开，无需安装依赖或启动服务。联网时加载 Geist 字体，离线时回退到系统字体。

也可以在地址后加参数直接打开某个主题，例如 ui-design.html?theme=dark：

参数	取值
theme	light / dark；省略时沿用上次在设计稿中的选择，否则跟随系统
motion	full / reduced；省略时跟随系统的减弱动效设置

设计稿共 12 节：原则、令牌、结构、分级、表单、危险确认、信息、轻量确认与浮层、反馈、动效、窄窗口适配、落地。共 40 个界面：29 个模态框、7 个气泡确认、4 个浮层菜单，以及反馈中心。

每个画板标注对应的源文件与行号（如 DiscardChangesDialog.tsx:99），可切换状态（如“核验中 / 可放弃 / 无改动 / 部分失败”），并用“结构 / 设计变更 / 无障碍”等标签说明与现有实现的差异。数据均为虚构，按钮不执行真实操作。

1. 按可逆性分三级。 L0 可撤销，直接执行，蓝色主按钮，↵ 提交；L1 有代价，需要二次确认，柔和红按钮；L2 不可撤销，实心红按钮，默认聚焦“取消”并停用 ↵，需勾选“我了解……”后才能执行。强制推送还需输入分支名。
2. 按钮写后果，不写“确定”。 标题提出问题，说明讲清代价，按钮直接给出答案，如“丢弃改动”“删除分支”“创建并切换”。
3. 危险确认用对账单代替长段说明。 放弃更改列出已跟踪、未跟踪、已暂存的数量，以及“将放弃 / 将保留”两栏；强制推送并列“远程将丢失”和“将推送”的提交；删除 worktree 前先检查未提交改动。
4. 气泡确认只用于单个对象、且后果能说清的操作。 涉及多个对象或不可撤销时升级为 L2 弹窗。打开时先预检，例如分支是否已合并、工作区是否干净、连接被哪些仓库引用。浮层不加遮罩、不锁滚动。
5. 反馈中心一次只显示一个错误弹窗。 其余排队，页脚显示“1 / 3”；提示收进右下角托盘，展开为收件箱，不锁定页面。
6. 窗口 ≤ 560px 时改为底部面板。 按钮纵向排列、高 44px，并留出底部安全区。
7. 动效只动 transform 和 opacity。 入场 360ms 弹性曲线，退出 160ms；减弱动效时只保留淡入淡出。backdrop-filter 只用于固定遮罩。
8. 沿用月光配色 #6e86e8 → #8fe3ee。 弹窗统一为外层托盘加内层面板的双层外壳，同时提供深浅两套主题。

以下键名已按仓库中 antd 6.3.7 的类型定义核对：

• 不引入新组件库。ConfigProvider 的 modal（classNames、mask.blur、closeIcon）以及 popconfirm、popover、dropdown 的 classNames 统一外观，调用方基本不用改。
• ConfigProvider.modal 不支持 modalRender，因此新增 AluneModal 包装 Modal，用 modalRender 加上双层外壳和 data-level / data-tone。确认调用改用 useAluneConfirm 包装 modal.confirm，L2 传入 focusable: { autoFocusButton: null }。
• 反馈中心继续使用原生 <dialog> 和 popover="manual"，套用同一套类名和 ::backdrop。
• 建议分五步迁移：令牌（含本地打包 Geist 字体）→ 外壳（替换 19 处 Modal 与确认调用）→ 分级 → 轻量层 → 反馈与窄窗口适配。最后用 Playwright 覆盖 Esc、焦点恢复和减弱动效。

以下截图于 2026-09-30 从设计稿截取：窗口宽 1440px，截图时隐藏了悬浮导航和背景颗粒纹理。

封面（浅色 / 深色）：

风险分级：

危险确认（L2，浅色 / 深色）与强制推送：

表单与气泡确认：

浮层菜单：

反馈中心（错误详情、托盘浅色 / 深色）：

动效与窄窗口：

附件	用途	字节数	SHA-256
ui-design.html	独立设计稿，已内联下面三个 CSS/JS 文件，可直接打开	413,217	97f51ecebcfceb42cb950cff1a326568827a592ddee2b4542fffeaec3ea34a33
index.html	设计稿源码入口，引用 assets/ 下的三个文件	275,049	f786e258674be5b1d2b91d9786bb99a3aacd8b6fc7b6bec56c3cc013db69f462
board.css	画板的布局与展示样式	53,580	deba82687174a1979f1809fca64786a0ce3c4b00d27b74fc3e4cb5c20615b35e
board.js	画板的交互脚本	29,115	4fa8fedb77796093b9ba334de909b6cd1a9547c4566c0d9bcccadcedd1a22957
dialog.css	月光弹窗的令牌与组件样式	55,554	55adcbd75541f35e6e56f1286666ca1e7e8affd2fe2cb52a42062617c358fc56

需要恢复源码时，把 index.html 放回主仓库的 docs/design/dialogs/，把三个 CSS/JS 文件放回 docs/design/dialogs/assets/，然后用浏览器打开 index.html；可按上表校验内容。上一版归档只有三个 CSS/JS 文件、没有 HTML 入口，保留在 Wiki 提交 0321293 中。

• UI 规范索引
• Issue #118：现有反馈迁移方案与验收
• 月光主题与交互动效
• Alune 品牌说明

附件继续保留在 assets/issue-118/dialog-design/，以保持已有下载与图片链接有效。