Issue 146 - ShaoClean/Alune GitHub Wiki

Issue #146:按 UI Guidelines 统一 Alune 月光主题

背景与范围

原有月光基础配色已符合规范,但工作区仍使用 Inter / DM Mono,且依赖外部 Google Fonts。已完成的弹窗与工作区按钮、字段和浮层皮肤不一致。

本次将全局 UI 统一到现有月光字体与材质。页面结构、控件高度、面板尺寸、布局密度、业务交互、文案、持久化与代码阅读设置保持原有行为;官网、全量尺寸改版及新增功能不在范围内。

方案与取舍

  1. 将弹窗已有的字体、字段、按钮、标签、浮层及模态材质令牌原样归并到 theme.css,弹窗继续通过原变量名引用;保留专项尺寸、焦点管理、确认等级与动效。
  2. 全局使用已打包的 Geist / Geist Mono 与中文回退。移除 Google Fonts 请求。代码内容继续引用独立的 --code-font-family、代码字号与高亮设置。
  3. Ant Design 读取同一主题的主操作、青色信息与绿橙红状态组合。按钮、字段、卡片和标签按语义映射圆角;普通控件维持当前高度与内边距。
  4. 按钮复用深浅渐变、轻危险背景、禁用与按下反馈;工作区原生推送按钮共享主操作材质,保留分体按钮几何。
  5. 常驻阅读面减弱装饰渐变与阴影;移除 Diff 挂载淡入。选中仍由柔和背景与原有标记表达,保留增删标记与独立颜色。

本次没有修改路由、事件处理、数据请求、组件结构或后端,也没有新增依赖。规范中的全局字号、控件高度与间距迁移明确留在本次范围之外。

验收标准

  • 全局 UI 与弹窗共享 Geist 字体,不请求 Google Fonts;代码用户字体保持独立。
  • 深浅主题的常驻面、按钮、字段、标签、选择器和菜单共享月光语义与材质。
  • 主操作、危险、禁用、hover、键盘焦点与表单错误状态保留。
  • 仓库、连接、工作区、设置与弹窗代表场景完成实际渲染检查。
  • 系统主题、减少动态效果及已有前端/桌面回归通过;主要面板几何前后一致。

验证记录

环境:macOS 15.5 arm64;Chromium(ego-browser)隔离 fixture;Electron 桌面测试使用临时数据目录。截图仅包含 fixture.invalid、示例用户名与演示仓库。

检查 结果
npm run build -w web 通过;原有大 chunk 构建提示仍存在
npm test -w web 208 / 208 通过,包含深浅主题文字、语义色与焦点对比度校验
npm run desktop:build 通过,5 个构建任务成功
npm run desktop:test 45 / 45 单元测试通过;完整 write / restore 烟雾测试通过
GitHub CI PR #147 的 22 项检查全部通过(提交规范、各包单元测试、macOS / Windows / Linux 本地 Git 与网络代理自动回归);不等同于跨平台原生视觉验收
桌面回归 弹窗焦点/风险确认/减少动态效果、窄设置页、Diff/历史、本地 Git、主题及代码外观重启持久化通过
深浅与系统主题 手动切换及模拟系统 light / dark 后 UI 正确切换
减少动态效果 模拟系统 reduce 后根节点 reducedMotion=true
代码字体隔离 将用户代码字体改为 Menlo,代码内容变为 Menlo,UI 仍为 Geist;之后还原示例字体
表单错误 SSH 连接端口 70000 显示“端口范围为 1–65535”,深色错误边界为 rgb(255, 183, 192);没有保存或建立连接
键盘焦点 原生 Tab / Shift+Tab 聚焦代码字体输入,浅色实线为 2px rgb(65, 90, 176),字段边界同主色
主按钮与浮层 深浅主按钮默认/hover 渐变、深色文字、选择浮层阴影已检查
字体网络依赖 本地页面资源记录无 Google Fonts 请求
1440 / 1024 / 768 / 560 / 390 / 320 CSS px 仓库、工作区、设置三条路由共 36 次前后测量,主要面板尺寸一致,整页横向溢出均为 0;测量记录

前后截图在相同 1440 × 1000 CSS px 下采集。工作区截图保留默认未选择 Diff 文件状态;实际 Diff 的单栏、并排及编辑状态由桌面烟雾测试验证。

前后截图

场景 改前 改后
仓库 · 浅色 改前仓库浅色 改后仓库浅色
仓库 · 深色 改前仓库深色 改后仓库深色
工作区 · 浅色 改前工作区浅色 改后工作区浅色
工作区 · 深色 改前工作区深色 改后工作区深色
设置 · 浅色 改前设置浅色 改后设置浅色
设置 · 深色 改前设置深色 改后设置深色

补充:连接 · 弹窗错误 · 选择浮层 · 键盘焦点 · 320px 设置。

风险、未验证项与回退

Windows / Linux 原生 UI、真实浏览器 200% 缩放未现场验收;不将 CI 自动测试视为这些视觉场景通过。文字宽度变化可能影响未覆盖内容的截断。应用原有代码主题/Diff 差异问题仍由独立 Issue 跟踪,本次不扩展其行为。

可回退主仓库实现提交恢复原皮肤;无数据迁移。Wiki 为独立历史,回退代码时需同步核对本页状态。