Repository navigation
UI Guidelines
Alune 的桌面应用、Web 工作区与官网统一采用从弹窗系统设计稿扩展的「月光」UI 风格。本页定义全局视觉基础、组件状态与页面规则；弹窗是其中一个专项，具体结构、风险确认与反馈中心继续在 UI-Dialogs 维护。
- 最近更新：2026-10-01。
- 状态：全局规范已扩充；实际界面尚未全部统一，见实现差异。本次仅更新文档与入口。
- 继承基线：直接来自弹窗 HTML／CSS 的参数与行为。
- 全局规范扩展：将弹窗语言推广到应用和官网的新增要求，供后续设计与开发遵循，不代表已经实现。
- 官网适配：共享品牌、字体和材质；允许展示页面使用不同背景、排版尺度与入场节奏，具体边界在本页列出。
继承基线 → 全局规范扩展。 界面应安静、清楚、可预期。视觉统一包括颜色、材质、排版、状态和操作节奏，不仅是把按钮改成蓝色。
- 内容优先。 路径、分支、改动、结果和操作后果先于装饰。工作区持续阅读区域保持平稳，光晕只用于模态背景、官网首屏等需要建立层次的位置。
- 深度来自结构。 用背景层、1px 描边、同心圆角和低不透明度蓝黑阴影区分表面。双层外壳用于独立浮层与重要展示容器；表格行、文件树节点和每个小控件不重复套壳。
- 月光色具有语义。 靛青渐变用于品牌、高光与有限装饰；操作、成功、警告和危险用各自语义色。渐变不得影响正文、Diff 或状态辨认。
- 一处定义，处处一致。 新组件先复用令牌与已有组件，覆盖特例时记录用途。应用继续使用现有 Ant Design 与封装；官网使用自身组件映射同一视觉语义，不要求引入应用组件库。
- 键盘与指针同等完整。 悬停才出现的操作也必须能通过焦点或菜单找到；焦点始终可见，状态不能只靠颜色表达。
- 风险决定打断强度。 按真实后果选择直接执行、轻量确认或模态确认；判定与例外以弹窗专项及关联业务设计为准。按钮写出操作和后果，例如“创建并切换”“删除 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，不直接用浅青色代替可读文字色。
| 语义／变量 | 浅色 | 深色 | 用途 |
|---|---|---|---|
成功／新增 --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)，≤1023pxclamp(38px, 6vw, 60px)，≤639pxclamp(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 验收。
设计文档首页 · Alune 品牌说明 · 维护约定 · 代码仓库