UI Guidelines - ShaoClean/Alune GitHub Wiki

Alune UI 规范

Alune 的桌面应用、Web 工作区与官网统一采用从弹窗系统设计稿扩展的「月光」UI 风格。本页定义全局视觉基础、组件状态与页面规则；弹窗是其中一个专项，具体结构、风险确认与反馈中心继续在 UI-Dialogs 维护。

  • 最近更新：2026-10-01。
  • 状态：全局规范已扩充；实际界面尚未全部统一，见实现差异。本次仅更新文档与入口。
  • 继承基线：直接来自弹窗 HTML／CSS 的参数与行为。
  • 全局规范扩展：将弹窗语言推广到应用和官网的新增要求，供后续设计与开发遵循，不代表已经实现。
  • 官网适配：共享品牌、字体和材质；允许展示页面使用不同背景、排版尺度与入场节奏，具体边界在本页列出。

目录

设计原则

继承基线 → 全局规范扩展。 界面应安静、清楚、可预期。视觉统一包括颜色、材质、排版、状态和操作节奏，不仅是把按钮改成蓝色。

  1. 内容优先。 路径、分支、改动、结果和操作后果先于装饰。工作区持续阅读区域保持平稳，光晕只用于模态背景、官网首屏等需要建立层次的位置。
  2. 深度来自结构。 用背景层、1px 描边、同心圆角和低不透明度蓝黑阴影区分表面。双层外壳用于独立浮层与重要展示容器；表格行、文件树节点和每个小控件不重复套壳。
  3. 月光色具有语义。 靛青渐变用于品牌、高光与有限装饰；操作、成功、警告和危险用各自语义色。渐变不得影响正文、Diff 或状态辨认。
  4. 一处定义，处处一致。 新组件先复用令牌与已有组件，覆盖特例时记录用途。应用继续使用现有 Ant Design 与封装；官网使用自身组件映射同一视觉语义，不要求引入应用组件库。
  5. 键盘与指针同等完整。 悬停才出现的操作也必须能通过焦点或菜单找到；焦点始终可见，状态不能只靠颜色表达。
  6. 风险决定打断强度。 按真实后果选择直接执行、轻量确认或模态确认；判定与例外以弹窗专项及关联业务设计为准。按钮写出操作和后果，例如“创建并切换”“删除 3 个文件”。

颜色与主题

应用基础令牌

继承基线。 下表来自设计稿 dialog.css，其基础颜色沿用应用月光主题。按语义引用变量，不在页面散落替代色值。浅色和深色是一对设计，不通过简单反色生成。

语义／变量 浅色 深色 用途
页面背景 --content #f5f7fb #151e30 工作区底色
内容面 --surface #ffffff #202c43 常驻面板
弱内容面 --surface-muted #f5f7fb #151e30 分组或辅助区域
悬停面 --surface-hover #eaf0fc #253654 列表与轻量交互
代码底色 --code #fbfcfe #192438 代码内容容器
正文 --text #1b2943 #e8effc 标题与主要信息
次级文字 --text-muted #526076 #b7c8ec 说明与元数据
分隔线 --line #d8e0ee #3b4a65 结构分隔
强边界 --line-strong #77859c #7c8fab 需要辨认的边界
主操作 --blue #415ab0 #afc6ff 链接、焦点与主操作
主操作悬停 --primary-hover #354b98 #c5d5ff 无渐变的主操作状态
主按钮文字 --primary-on #ffffff #151e30 实心或渐变主按钮上文字
主色柔和背景 --blue-soft #eaf0fc #253654 选中与信息背景
导航底色 --sidebar-bg #e9eff9 #101a2d 应用导航
导航选中 --sidebar-active #dce5f7 #253654 当前导航项

品牌色 --moon-indigo: #6e86e8 与 --moon-cyan: #8fe3ee 在深浅主题保持一致。它们适合光晕、边缘高光及品牌渐变；正文链接与主要操作使用 --blue，不直接用浅青色代替可读文字色。

状态、Diff 与表单

语义／变量 浅色 深色 用途
成功／新增 --green #0f6d56 #b0e5cc 搭配成功文字与标记
成功背景 --green-soft #e9f7ef #153328 状态容器
成功描边 --green-line #a5cdbb #47765e 状态边界
警告 --orange #995413 #ffd096 需要注意但不等于失败
警告背景 --orange-soft #fff3e3 #3b2d20 状态容器
警告描边 --orange-line #dbc29f #85633d 状态边界
危险／删除 --red #ad3b49 #ffb7c0 错误及破坏性动作
危险背景 --red-soft #fcecef #431d27 状态容器
危险描边 --red-line #e1b7bf #8e5460 状态边界
信息 --cyan #146c89 #8fe3ee 中性提示
信息背景 --cyan-soft #e6f4f7 #16313b 提示容器
信息描边 --cyan-line #a6d2dc #3d6e7b 提示边界
图谱辅助 --purple #7046a0 #d4baff 分支分类，非危险语义
Diff 新增背景 --diff-add #e9f7ef #153328 与 + 标记配合
Diff 删除背景 --diff-remove #fcecef #431d27 与 - 标记配合
Diff 元信息 --diff-meta #eaf0fc #253654 块头和定位信息
字段背景 --field-bg #fbfcfe rgb(9 15 29 / 42%) 输入与选择控件
字段边界 --field-ring #d3dcec rgb(175 198 255 / 17%) 默认边界，按场景复核对比度
字段悬停边界 --field-ring-hover #aebbd4 rgb(175 198 255 / 30%) 悬停反馈
焦点柔和色 --focus-soft rgb(65 90 176 / 18%) rgb(175 198 255 / 22%) 辅助光环，不代替实线焦点环

全局规范扩展。 成功／新增、警告、危险／删除分别采用绿、橙、红的“前景 + 柔和背景 + 描边”组合；信息用青色。Diff 新增与删除必须同时保留 +／- 标记。分支图可使用紫色及其他图谱颜色，但不能将其解释为错误。输入框的焦点使用主操作色和焦点环，错误使用红色边界及字段说明，不通过改变全部表单背景表达错误。

表面与按钮材质

继承基线。 以下是弹窗材质参数；推广到同类浮层时复用，常驻面板使用基础 --surface，不套用模态遮罩。

语义／变量 浅色 深色 用途
外托盘 --dlg-shell-bg rgb(255 255 255 / 58%) rgb(175 198 255 / 6%) 承载描边与阴影
外壳边界 --dlg-shell-ring rgb(35 52 102 / 9%) rgb(175 198 255 / 14%) 装饰边界
内核 --dlg-core-bg #ffffff linear-gradient(180deg, #223049 0%, #1c273d 100%) 实心可读内容面
底栏 --dlg-foot-bg #f7f9fd rgb(10 16 30 / 34%) 分离操作区
内嵌卡片 --card-core #ffffff rgb(9 15 29 / 32%) 表单内分组
标签背景 --chip-bg rgb(65 90 176 / 6%) rgb(175 198 255 / 8%) 弱强调
标签边界 --chip-ring rgb(65 90 176 / 13%) rgb(175 198 255 / 15%) 辅助分隔
悬停覆盖 --hover-veil rgb(65 90 176 / 7%) rgb(175 198 255 / 8%) 控件状态层
  • 主按钮背景：浅色 linear-gradient(180deg, #4d67c1 0%, #415ab0 100%)，深色 linear-gradient(180deg, #c6d6ff 0%, #a9c1ff 100%)；文字分别用 --primary-on。
  • 主按钮悬停：浅色 #4560b8 → #354b98，深色 #d6e2ff → #bdd0ff，方向与默认一致。
  • 强危险按钮：浅色 #bd4a58 → #ad3b49 配白字，深色 #ffc8cf → #ffb0ba 配 #3b1019；轻危险按钮使用 --red、--red-soft、--red-line。确认等级及键盘规则引用专项。
  • 细线 --hair：浅色 rgb(35 52 102 / 10%)，深色 rgb(175 198 255 / 10%)；强细线 --hair-strong 对应为 17%。仅作分隔或装饰；需要独立辨认的控件边界必须另行检查对比度。
  • 遮罩 --dlg-scrim：浅色 rgb(22 32 62 / 28%)，深色 rgb(4 8 20 / 52%)。backdrop-filter 只用于固定层，禁止在滚动列表中逐项使用模糊滤镜。

官网配色映射

官网适配，沿用现有官网基线。 官网与应用共享品牌色及主操作色，展示背景允许更强的明暗空间感；不能将官网背景反向覆盖工作区令牌。

官网语义／变量 浅色 深色 应用对应语义
背景 --bg #edf1f9 #0a1120 --content
内容面 --surface #fbfcff #0f1829 内容表面
正文 --ink #111c36 #eef3ff --text
次级文字 --muted #56648a #a5b5d8 --text-muted
主操作 --accent #415ab0 #afc6ff --blue
主按钮文字 --accent-on #ffffff #151e30 --primary-on

全局规范扩展。 默认跟随系统并允许手动选浅／深色；手动选择在当前产品中保存，存储不可用时仍可使用。应用主题切换不重置当前任务、草稿和布局。官网无 JS 时至少按系统主题可读；官网和应用不要求跨端同步主题偏好。

字体与排版

继承基线 → 全局规范扩展。 界面使用 Geist（本地字体包中的名称为 Geist Variable），中文依次回退到 PingFang SC、Hiragino Sans GB、Microsoft YaHei、系统无衬线字体；代码标识使用 Geist Mono／Geist Mono Variable，再回退到 SF Mono、Menlo、系统等宽字体。产品字体自托管或随应用打包，不依赖外部字体网络请求。

用途 字号／字重／行高 来源与使用方式
弹窗标题 17px／600／1.38，字距 −0.012em 继承 CSS；单一问题或动作
说明正文 13.5px／400／1.65 继承画板排版样例；用于段落说明
表单标签 12.5px／500／1.5 字号字重继承画板，行高为全局扩展
上下文眉标 11px／500／20px 继承 CSS；仅用于辅助上下文，不承载唯一的风险说明
路径／分支／哈希 12.5px／400／1.5，等宽 继承字号字重，行高为全局扩展
应用列表与工具栏 13px／400，选中或操作标签 500／1.5 全局扩展；从弹窗控件密度推广
应用页面／区块标题 20px／600／1.4；区块 15px／600／1.5 全局扩展；页面只设一个一级标题
辅助说明 12px／400／1.55 全局扩展；不可用低对比度替代字号层级
官网正文／导语 15px／400／1.75；导语 16px／400／1.75 官网适配；窄屏导语 15px
官网区块标题 clamp(30px, 3.5vw, 46px)／550／1.25 官网适配；大标题仅用于展示页

画板排版样例与组件 CSS 并非完全相同：当前弹窗说明为 13px／1.62、字段标签为 12px／500，见实现差异。上述推广目标不表示本次已调整这些样式。

全局规范扩展。 不把官网大字与大留白放入文件树、Diff 和设置表单。长路径可截断显示，但必须能查看及复制完整内容；危险确认中的对象与后果应换行，不隐藏关键差异。提交哈希、数量等对齐时采用等宽数字。代码阅读保留用户配置的代码字体、字号与高亮主题；应用 UI 主题与代码主题分别管理，Diff 保持独立增删语义。

尺寸、间距与层次

圆角与控件

项目 基准 来源／边界
外壳／内核／内边距 22px／16px／6px 继承；内圆角 = 外圆角 − 内边距
卡片／字段／标签 12px／10px／7px 继承；不同语义使用不同圆角
胶囊按钮／眉标 999px 继承；不将全部容器改成胶囊
普通按钮 高 36px，水平内边距 16px，内容间距 8px 继承；主要表单与弹窗操作
紧凑按钮 高 30px，水平内边距 12px 继承；推广到密集工具栏，不用于触摸主操作
图标按钮 30 × 30px，图标 16–18px 全局扩展，参考弹窗关闭按钮与线性图标
输入／选择控件 最小高 38px；文本域最小高 76px 输入尺寸继承；选择控件统一高度为扩展
触摸操作区 最小 44 × 44px 从窄窗口弹窗按钮推广；视觉图标可小于命中区域

全局规范扩展。 间距使用 4、8、12、16、20、24、32px：图标与文字通常 8px，同组控件 8–12px，字段组 16px，面板内边距 20px，独立区块 24–32px。6px 专用于同心外壳，不能为凑统一刻度改成 4px 或 8px。示例：设置区块内边距 20px，标签与输入间隔 8px，相邻字段间隔 16px。

表面与阴影

继承层次 → 全局规范扩展。 基础背景 → 常驻面板 → 锚定浮层 → 模态遮罩与弹窗。阴影表达所属层级，选中状态用语义背景和标记，不靠增大阴影。

层次 用法 阴影规则
内嵌字段／列表 输入框、Diff、文件树 描边或微弱内阴影；不投浮层阴影
常驻面板／卡片 设置、仓库卡片、工作区分区 1px 分隔为主；浅色 0 1px 2px rgb(16 24 40 / 7%)，深色 0 1px 2px rgb(0 0 0 / 24%)，来自现行主题
轻量浮层 菜单、选择器、气泡 复用 --pop-shadow，无遮罩、不锁页面滚动
模态外壳 需要阻断的确认和表单 复用 --dlg-shadow，遮罩与光晕只属于此层

--pop-shadow 继承值：浅色 0 1px 2px rgb(30 45 95 / 6%), 0 14px 34px -12px rgb(30 45 95 / 24%)；深色 0 1px 2px rgb(2 6 18 / 40%), 0 18px 44px -16px rgb(2 6 18 / 72%)。

--dlg-shadow 继承值：浅色 0 1px 2px rgb(30 45 95 / 5%), 0 14px 32px -14px rgb(30 45 95 / 20%), 0 52px 100px -36px rgb(45 66 140 / 34%)；深色 0 1px 2px rgb(2 6 18 / 40%), 0 22px 48px -18px rgb(2 6 18 / 72%), 0 64px 120px -40px rgb(46 66 150 / 42%)。

同心外壳用于弹窗、浮层与官网重点截图容器。工作区相邻分区用共享分隔线，仓库卡片用一层内容面；仅在需要突出独立容器时增加外托盘。光晕、顶部高光与阴影不得降低文字对比度或遮挡焦点环。

通用组件与状态

全局规范扩展，视觉参数继承上文。 下面的状态规则适用于应用与官网；展示型组件不凭空增加可点击行为。只读内容不设置指针样式，所有按钮仍需提供可访问名称。

组件 默认与悬停 按下／选中／聚焦 禁用／加载／错误
按钮 同一操作组一个主按钮；次操作描边、低优先操作文字型；悬停使用对应 hover 表面 按下缩放 0.98，不改变布局；切换按钮标注 pressed；聚焦显示外环 禁用去除交互反馈并说明必要原因；加载保留宽度、显示“正在保存…”且防止重复提交；失败在相关区域解释并允许重试
图标按钮 中性前景，无常驻高光；悬停显示柔和底色和 Tooltip 按下遵循按钮；选中用主色底和状态属性；键盘聚焦同样显示说明 不可用时不能仅隐藏图标；加载保留位置；错误不只把图标变红
输入／文本域／选择 10px 圆角、字段背景和描边；悬停增强边界 聚焦主色边界及焦点环；输入光标与文字选择正常；下拉选中项有勾选或文字标记 禁用与只读分别表达；异步选项加载不清空已选值；错误关联具体字段并保留输入
Checkbox／Radio／Switch 中性边界，标签可操作；悬停增强边界 勾选、圆点或开关位置与主色共同表达状态；按空格操作并显示焦点 禁用说明依赖条件；保存中防止重复切换；失败说明实际是否保存，按结果恢复值
标签／状态徽标 语义色柔和背景、简短文字；静态标签无 hover 仅可交互标签提供按下与焦点；选中筛选项增加勾选和 pressed 状态 静态状态无需“禁用”；未知、加载、失败分别用明确文字，不伪装成功
分段切换／Tabs 共享底座、单个选中面；悬停不覆盖选中标识 选中有色面和文字／边线；按键遵循 tabs 或 radio 的实际语义；焦点与选中独立 禁用项说明原因；加载保留当前内容或明确进度；失败允许重试，不错误切换到空白
卡片／列表行 中性内容面与分隔；可操作项悬停柔和提亮 选中用背景和边线／勾选；按下不让整行跳动；可操作项具有键盘入口 不可用动作仍可说明原因；局部加载保留稳定布局；单项错误局部呈现，批量操作报告部分成功
导航／工具栏 活动项有稳定标记；同类动作靠近，危险动作分组 hover 与当前页面区分；聚焦不改变当前页；图标操作遵循按钮规则 加载或断连显示作用范围；禁用相关动作，保留返回与诊断入口；失败不清空导航上下文

非切换按钮不存在持续“选中”状态；静态卡片不存在“按下”状态。应用中命令菜单、浮层、确认框的键盘和关闭规则引用弹窗专项，不通过通用表格覆盖其业务限制。

应用页面与官网

应用页面

全局规范扩展。 应用以桌面密集任务为主，沿用既有业务分区和可调面板，不因统一风格改变功能或信息架构。

页面 层级与密度 具体规则与示例
工作区 仓库上下文 → 仓库视图 → 列表／Diff → 操作区 仓库标签、分支与同步状态清楚可见；工具栏按对象分组；相邻分区用分隔线，不嵌套大卡片；只在提交区突出“提交”等当前主操作
仓库与连接列表 页面标题／新增 → 筛选与视图切换 → 条目 卡片和列表共享状态与操作文案；名称高于路径、连接来源和更新时间；单行模式目标最小高 36px，多行 56px，可随内容增长；批量选择与打开仓库分开
设置 分类导航 → 区块标题／说明 → 字段／保存反馈 每组只解决一个主题；字段遵循 16px 间距；说明与错误贴近字段；区分立即生效与需保存的设置，禁止用户无法判断生效时机
历史 筛选／分支 → 提交图与列表 → 详情／Diff 选中提交稳定高亮；哈希和数量等宽；图谱颜色与成功／危险语义分离；详情加载保留选中上下文
Diff 文件上下文 → 变更内容 → 范围操作 单栏／并排保持相同增删语义；保留行号、标记和代码密度；超长代码可局部横向滚动；禁止在代码行上叠加光晕或阅读入场动画
文件阅读 文件树 → 文件头／类型 → 阅读内容 文件图标可保留既有文件类型系统；界面外围遵循本规范，代码字体与高亮尊重用户设置；空文件、二进制、超限与读取失败有独立说明

官网

官网适配。 官网负责介绍与下载，视觉基础与应用一致，展示密度独立：

  • 正文容器最大 1280px；桌面两侧通常各 48px；≤1023px 各 24px，≤639px 各 16px。区块上下间距桌面 100px、≤1023px 为 72px、≤639px 为 54px，沿用现行官网基线。
  • 采用上文官网排版；首屏标题桌面 clamp(36px, 3.7vw, 54px)，≤1023px clamp(38px, 6vw, 60px)，≤639px clamp(30px, 7.8vw, 46px)。避免为了齐行手动拆散中文词语。
  • 主要下载 CTA 最小高 48px，辅助链接保持清晰层级。截图容器可使用同心外壳；示意装饰不能冒充真实产品截图或已发布能力。
  • 重点容器可使用靛青光晕和有限渐变；页面正文与截图上的文字必须清晰。品牌插图和产品截图记录来源、版本与替代文字。
  • 动效用于首屏和区块首次展示，参数见动效；无 JS、动画 API 不可用或减少动态效果时，内容和下载入口立即可用。

交互、文案与反馈

继承基线 → 全局规范扩展。 一次操作应交代对象、行为和结果。用户可见产品名称统一为 Alune。

情形 规则 示例
操作文案 动词 + 对象，必要时数量／后果；标题与按钮一致 “创建并切换”“移除仓库登记”；区分移除登记和删除磁盘目录
表单 标签持久可见，placeholder 仅示例；错误与字段关联；提交后聚焦首个无效项 “分支名已存在，请使用其他名称”，保留原输入
空状态 区分尚无数据、无筛选结果、无权限和加载失败；提供匹配的下一步 “没有匹配的分支”配“清除筛选”，不显示“新建仓库”
加载 就地呈现；已知进度显示真实数值，未知进度不伪造百分比 “正在读取远端分支…”；禁止重复提交
成功 默认轻量反馈；操作结果已明显可见时不重复弹窗 保存状态或通知；确有撤销能力才展示“撤销”
失败／部分失败 说明影响对象、已完成与未完成部分；诊断信息可复制；重试范围明确 “5 个文件中 2 个放弃失败”，保留失败列表
刷新失败 保留上次成功数据并标明未更新，提供重试 “刷新失败，显示上次结果”；不能把旧结果当作最新成功

高风险操作的分级、预检、勾选或输入确认、Enter 行为和默认焦点，直接遵循 UI-Dialogs。不要从“红色按钮”反推风险等级，也不要将设计样例视为现有业务已具备的检查能力。反馈中心沿用错误排队与非阻断托盘规则；同一失败不同时触发多个重复提示。进行中操作是否可取消，必须由真实业务能力决定，关闭界面不等于取消后台任务。

动效

应用与弹窗

继承基线。 优先只动画 transform 与 opacity，布局尺寸、模糊与大面积阴影不逐帧变化；主题色可即时切换。下列变量名取自设计稿，应用中已有名称不要求本次重命名。

动作 时长 曲线与使用范围
悬停 --t-hover 140ms cubic-bezier(0.2, 0, 0, 1)；覆盖层淡入
按下 --t-press 90ms 同上；按钮缩放 0.98
遮罩 --t-scrim 240ms 淡入；不等待结束才接受操作
模态入场 --t-enter 360ms cubic-bezier(0.32, 0.72, 0, 1)，spring
模态退出 --t-exit 160ms cubic-bezier(0.4, 0, 1, 1)，exit
浮层 --t-pop 200ms cubic-bezier(0.16, 1, 0.3, 1)，glide
内容错峰 --t-stagger 40ms 仅首次进入的头／正文／底栏；不能用于逐行加载文件列表
≤560px 底部面板 入场 460ms／退出 220ms 专项 CSS 的窄窗口例外，不作为所有页面的默认时长
减少动态效果 120ms 或即时 弹窗仅淡入淡出、无位移和错峰；常驻任务区域可即时变化

全局规范扩展。 常驻界面只为状态反馈提供短过渡，不重复播放光晕和分段入场；文件阅读、滚动、拖动分隔线和频繁切换选择不施加弹性动画。加载动效不得成为理解进度的唯一方式。

官网动效

官网适配。 保留现行展示节奏：首屏文案 850ms、错峰 90ms，截图 1100ms、背景光晕 1400ms；区块首次显现默认 700ms、位移 24px，曲线 cubic-bezier(0.16, 1, 0.3, 1)。这些较长时长仅用于展示内容，不能用于应用操作反馈。

全局规范扩展。 官网按钮 hover／press 收敛到通用 140／90ms 与按下 0.98；展示卡片可保留不超过 350ms 的轻微位移。当前官网按钮 260ms、缩放 0.97 且过渡阴影，属于待统一差异。系统启用减少动态效果时立即停止 CSS 与脚本动效、取消平滑滚动，不隐藏未播放内容；键盘进入动画元素时结束位移，保证操作稳定。

无障碍与窄窗口

全局规范扩展。 以下为验收要求，不表示现有界面已经通过全量无障碍审核。

  • 普通文字对比度至少 4.5:1，大字至少 3:1；必要的控件边界、图标和状态标识至少 3:1。大字按 WCAG 判定：常规字重至少 24 CSS px，粗体至少约 18.67 CSS px。透明背景须按实际合成背景测量，装饰细线不能代替唯一控件边界。
  • 应用焦点环基准为 2px 主色实线、2px 外偏移；官网保留现行 3px／5px。不得因裁切、遮罩或粘性底栏遮住焦点。禁用态可弱化，但不能使必要解释不可读。
  • 按钮、输入、菜单使用正确语义与可访问名称；纯装饰图标对辅助技术隐藏。状态变化使用合适的 live region，避免每次刷新重复播报。Tooltip 不承担唯一的错误说明或字段标签。
  • 模态限制焦点在内部，关闭后恢复触发点或合理后继；Esc 和 Enter 的风险例外按专项执行。非模态浮层不锁定整页；键盘可打开、选择、退出。选中与焦点必须可区分。
  • 以 1440、1024、768、560、390、320 CSS px 检查布局，并覆盖 200% 缩放。页面主要内容可重排；代码、Diff、表格确需横向滚动时限定在内容容器内，保留标题和主要操作可达。
  • 弹窗在 ≤560px 按专项变为底部面板，按钮纵排且高 44px，预留 env(safe-area-inset-bottom)。这个断点不意味着整个应用都要变成抽屉。
  • 应用在宽度不足时优先折叠次要导航和辅助面板、允许工具栏换行或溢出菜单；保留仓库上下文、当前内容与主操作。触摸目标至少 44 × 44px；不能只依赖 hover 暴露功能。
  • 官网按内容重排为单列，截图等比例缩放；导航收起后保留键盘入口。关闭动画或字体加载失败仍可阅读与下载。

弹窗专项

专项 范围 状态与入口
弹窗系统 模态、表单、风险分级、危险确认、气泡确认、浮层菜单、反馈中心及窄窗口 已有产品接入；具体实现、验收与设计稿差异见 Issue #139，业务来源见 Issue #118

下载独立交互设计稿（HTML）。支持深浅主题、状态切换和减少动态效果，共 12 节、40 个界面及反馈中心；演示按钮不执行真实操作。此附件仍是弹窗专项画板，不代表已经生成了全应用原型。

原 UI-Dialogs 地址、截图与 assets/issue-118/dialog-design/ 附件路径保持有效。全局视觉基础在本页维护；弹窗结构、业务风险和焦点细节只在专项维护，变更时同步相关引用。

规范目标与当前实现差异

主题替换实现更新：Issue #146 / PR #147 已统一全局字体、共享材质令牌与控件皮肤并完成本机验收。仅替换主题，保留既有布局和控件尺寸；下表仍记录原基线，不能视为全量尺寸迁移已经完成。

以下为 2026-10-01 的源码核对，主仓库基线为 c6cf2a7。这里只说明源码现状，不替代发布或跨平台验收记录。

项目 规范目标 当前实现 后续处理
应用字体 全局 Geist + 中文回退；代码设置独立 App.tsx 全局仍是 Inter／系统字体；弹窗已局部使用 Geist 在后续 UI 改造统一，检查中文与密集列表换行
字号样例与弹窗 说明 13.5px、标签 12.5px；遵循本页排版层级 画板样例为上述字号；产品弹窗说明 13px／1.62，标签 12px／500 明确排版目标与当前 CSS 的差异，不称完全复刻
应用尺寸 字段 10px、卡片 12px、普通按钮高 36px、字段最小高 38px 主题控件圆角 7px、面板 8px；Ant Design 按钮高 32px，输入／选择高 34px，卡片 10px 后续逐组件迁移，保留紧凑密度场景
弹窗材质 22／16／6 同心外壳、深浅配套令牌 dialogs.css 已实现；业务与设计稿差异见 Issue #139 复用封装，新增业务按专项评审
应用颜色 月光基础与语义状态 theme.css 已有主色及语义色；弹窗提供额外字段／外壳材质 扩展组件时映射同一语义，仍须逐场景测对比度
应用动效 通用 hover 140ms、press 90ms；浮层按专项 全局 hover 100ms、selection 160ms、panel 220ms；弹窗有独立 140／90／360／160ms 及减少动态效果规则 后续统一通用反馈，保留各类场景边界
官网字体／圆角／颜色 共享字体、品牌与同心材质，展示背景适配 已用 Geist／Geist Mono、22／16／6 外壳；背景与正文采用官网令牌 属于允许的官网适配，不强行改成工作区背景
官网动效 保留展示入场；控件反馈统一；只动位移和透明度 已有 700–1400ms 展示动画与减少动态效果；按钮 260ms、0.97 按下缩放及阴影过渡 控件反馈待收敛；展示时长不推广到应用

本次没有修改上述实现，没有新增 UI 功能或改变风险判定。今后迁移应在对应 Issue／PR 提供实际截图、验证版本和未验收项；不能仅因更新本页就把差异标为完成。

来源、维护与验收

可追溯基线

资料 修订／校验 用途
弹窗规范原修订 Wiki 714198a；接入状态记录更新于 510c6e3 原始规则、40 个界面目录与附件清单
独立 HTML 413,217 字节；SHA-256 97f51ecebcfceb42cb950cff1a326568827a592ddee2b4542fffeaec3ea34a33 汇总画板与交互演示，供人工查看
dialog.css Wiki 3269eb2；SHA-256 55adcbd75541f35e6e56f1286666ca1e7e8affd2fe2cb52a42062617c358fc56 组件颜色、尺寸、材质与动效参数
board.css Wiki 3269eb2；SHA-256 deba82687174a1979f1809fca64786a0ce3c4b00d27b74fc3e4cb5c20615b35e 画板布局与展示装饰，不作为工作区布局规范
index.html 与 board.js Wiki 3269eb2；完整大小与校验见 专项附件表 排版样例、状态样例与交互展示；引用素材路径保持不变
应用配置、应用主题 与 弹窗实现 主仓库 c6cf2a7 核对当前实现，不覆盖新增全局规范目标
官网令牌、排版、动效 主仓库 c6cf2a7 官网适配参数与当前差异

画板用于解释设计，里面的封面大字、背景颗粒、悬浮章节导航和展示网格不自动成为产品规则。参数存在差异时，本页明确标注“画板样例”“组件 CSS”或“全局规范扩展”；实现团队不得静默混用。业务约束以专项方案为准，若影响全局视觉须同步记录例外。

维护与验收清单

  • 新增或修改 UI 时先标明应用／官网／弹窗场景，引用本页及适用专项；复用令牌、组件和文案模式，新增例外给出原因。
  • 交付组件默认、hover、pressed、focus、selected、disabled、loading、error 中适用的状态；没有语义的状态标为不适用，不能伪造交互。
  • 验收浅色／深色、键盘、长文本、空数据、失败和部分失败、窄窗口、200% 缩放、减少动态效果；官网补充无 JS 和字体不可用，代码阅读补充用户字体／主题设置。
  • 记录对比度测量与截图所用主题、尺寸、代码版本和日期。设计截图、源码存在、实际验收通过是不同证据，分别标注。
  • 文档改动检查 Markdown 差异、章节锚点、Wiki 双向链接、图片／附件可访问性及附件校验；本次文档更新不以应用测试冒充 UI 验收。
  • 完整规范、原型与验收附件只维护在 Wiki；主仓库仅保留必要入口。发布给出 Wiki 修订号，回退通过独立 Wiki 历史进行，不覆盖他人修订。

本次修订（2026-10-01）：将 UI 索引扩充为应用与官网的全局规范，保留弹窗专项及原附件，补充导航和实现差异；未修改产品 UI。文档验证包含本地链接与章节锚点、远程页面与附件访问、原弹窗链接保留、五个源码／独立 HTML 附件的大小与 SHA-256 校验，以及 git diff --check；未执行应用测试或新增 UI 验收。

相关资料：品牌说明 · 月光主题与交互动效 · 功能与优化设计 · 编写与维护约定。