Skip to content

UI/UX: 全局系统性优化——设计 Token 地基 + 去冗余 + 英文统一 + Webview/Tree 加固 - #43

Merged
ThreeFish-AI merged 5 commits into
feature/1.x.xfrom
ThreeFish-AI/ui-ux-systemic-improvement
Jun 30, 2026
Merged

UI/UX: 全局系统性优化——设计 Token 地基 + 去冗余 + 英文统一 + Webview/Tree 加固#43
ThreeFish-AI merged 5 commits into
feature/1.x.xfrom
ThreeFish-AI/ui-ux-systemic-improvement

Conversation

@ThreeFish-AI

@ThreeFish-AI ThreeFish-AI commented Jun 30, 2026

Copy link
Copy Markdown
Owner

背景

三方独立审计（Webview / TreeView / 命令-菜单-配置）发现 Hyper Git 存在一组全局性、系统性的体验熵增，违背「简约 / 美观 / 直接 / 去冗余 / 直观」。本 PR 以 VS Code 原生设计语言为基线（复用 `--vscode-*` 主题 token + codicons，深/浅主题自适应），分 4 阶段系统化整改，并统一英文 UI 文案。

关键决策

  • UI 文案统一英文（命令标题 / Tooltip / Webview chrome / viewsWelcome / 配置 / html lang）；README、CHANGELOG、docs、commit、PR 保持中文。
  • 设计 Token 单一事实源：活动/本地/当前分支高亮全局统一 `charts.blue`，与 Log 本地分支 chip 同语义。
  • 全程不改变既有功能行为（少数必要的交互语义调整已显式标注）。

Phase 0 · 设计 Token 地基 + 语义色（纯视觉，零行为变更）

  • 新增 `shared-styles.ts`（spacing/radius token + `.hg-btn/.hg-input/.hg-row` + 统一 hover/active/focus-visible/disabled/reduced-motion）；4 个 Webview 注入，消除 Commit 按钮「无 hover」「`:last-child` 脆弱选择器」「无 focus ring」。
  • Log DAG 泳道色 → 启动期读 `--vscode-charts-*`（缺失撞色回落 `DEFAULT_LANE_PALETTE`）；引用 chip 配色校正（local=charts-blue / remote=descriptionForeground / tag=charts-yellow）。

Phase 1 · package.json 去冗余 + 英文

  • 标题栏瘦身至 ≤5 项（同步类操作下沉 `1_sync` 溢出）；新增 `Filter Log…` 聚合命令（QuickPick 分发 6 个过滤器）。
  • 危险操作归入 `9_dangerous` 分组（右键菜单自动分隔）；隐藏依赖光标上下文的命令；为 ~20 个高频/危险命令补 codicon。
  • 配置润色（enumDescriptions、去内部里程碑措辞）；94 命令标题/配置/viewsWelcome 统一英文。

Phase 2 · Webview 功能/UX 加固 + 英文 chrome

  • Commit：文件空态、提交 spinner、Ctrl/Cmd+Enter 提交、全选、Advanced 折叠降噪、aria-live。
  • Log：错误态 + Retry（协议增量 `log/error`+`log/retry`）、详情关闭按钮、双击改「打开提交」（菜单保留右键+Enter）、Checkpoints tooltip、富空态、`aria-pressed`、`role=tree`。
  • Merge：冲突导航栏（Prev/Next + N/M）、逐冲突 Resolved/Unresolved 徽标、顺序编号、剩余计数、ARIA、长行横向滚动。
  • Rebase：执行前确认对话框、操作摘要、`⠿` 盲文柄 → SVG grip、Cancel、drop 删除线、select 加宽。

Phase 3 · Tree 打磨 + Markdown Tooltip + 命令层英文清扫

  • 新增 `tree-tooltip.ts`（`mdTooltip` MarkdownString + `relativeDate` 相对时间）。
  • Changes（活动 changelist folder-opened + Deleted tooltip 删除线消费 strikeThrough 位）、Branches（计数徽标 + charts.blue/charts.yellow + 去 SHA/★）、Stash（相对时间 + 只读 `stashView` diff）、Worktree（🔒/⚠ emoji → codicon + charts.blue + root-folder-opened）、Shelf（可折叠暴露文件 + library 图标 + createTreeView）。
  • 命令层全面英文清扫（~160 处），保留全部中文代码注释；同步修正单测断言。

附带修复（对抗性复核发现）

  • `fix(Merge)`：`<script>` 内 JSON 注入此前用 `escapeHtml` 产出 `"`，raw-text 不解码致 `JSON.parse` 失败、3-way Merge Editor 实际不可用；改 JS-string 转义修复（Phase 2 冲突导航依赖 HUNKS 渲染）。

验证

  • `pnpm run compile`（check-types + lint + esbuild）✓；`pnpm run test:unit` 301/301 ✓（含新增 shared-styles 5 用例）。
  • 2 名 code-reviewer 对抗性复核（webview 层 + tree/manifest/command 层）：除上述 merge 修复外无新增 correctness bug。
  • 行为回归红线：所有既有命令仍可达（移除项经 `…` 溢出或命令面板）；Log 双击改开 diff 后右键/Enter 仍开菜单；Merge/Rebase 既有保存/执行路径不变（仅前置确认）。

注：Commit 提交快捷键由 Webview 内 Ctrl/Cmd+Enter 承载（commit 状态位于 webview，无宿主命令可绑定），未引入全局键绑定以免冲突。

@ThreeFish-AI
style(Webview): 建立共享设计 Token 地基并统一 4 个自绘 Webview 的按钮与语义色;
ebd4985 
- 新增 src/adapter/webview/shared-styles.ts 作为单一事实源：spacing/radius token + .hg-btn/.hg-btn--secondary/.hg-btn--sm/.hg-input/.hg-row，统一 hover/active/focus-visible/disabled/reduced-motion 交互态
- Commit/Log/Merge/Rebase 四个 Webview 注入 getBaseStyles()，按钮迁移至 .hg-btn（消除 Commit 的 :last-child 脆弱选择器、补齐缺失的 hover 与 focus ring）
- Log DAG 泳道色改为启动期读取 --vscode-charts-* 主题令牌（缺失或撞色回落 DEFAULT_LANE_PALETTE），深/浅主题自适应
- Log 引用 chip 配色校正：localBranch=charts-blue / remoteBranch=descriptionForeground / tag=charts-yellow（修正原先误用 stageModified/conflicting/modified token 的语义错配）
- 移除无意义 opacity 衰减，改用 --vscode-descriptionForeground 表达弱化文本
- 新增 shared-styles 单元测试（5 用例），全量 301 用例通过

🤖 Generated with [Claude Code](https://github.com/claude), [CodeX](https://openai.com), [Gemini](https://github.com/apps/gemini-code-assist)
Co-Authored-By: Aurelius Huang<threefish.ai@gmail.com>
@ThreeFish-AI
refactor(Commands): package.json 去冗余 + 统一英文文案 + 危险操作分隔;
8314f41 
- 标题栏瘦身至 ≤5 项：Changes/Branches/Log 的同步类操作（fetch/pushDialog/updateProject/createPatch/applyPatch 等）下沉到 1_sync 溢出组；Log 移除 6 个独立过滤器图标
- 新增 hyperGit.logFilter「Filter Log…」聚合命令（QuickPick 分发到既有 6 个过滤器，复用 handler 零重复），6 个原过滤器收敛到命令面板仅 Log 聚焦时可达
- 危险操作归入 9_dangerous 分组（discardChanges/branchDelete/deleteRemoteBranch/tagDelete/stashDrop/deleteShelf/worktreeRemove），右键菜单自动生成分隔线
- 命令面板卫生：隐藏依赖光标上下文的 stageHunkAtCursor
- 为 ~20 个高频/危险命令补齐 codicon 图标（branchCheckout/delete/discard/merge/rebase/rename/ignore/stashApply/stashPop/stashDrop/undoLastCommit/dropCommit/cleanupBranches/startRebase/showConsole/rewordCommit/ci.signIn/logClearFilter/tagDelete/stashClear 等）；消歧 showReflog 由 $(history) 改为 $(clock)
- 配置润色：ci.provider 补 enumDescriptions；ai.enabled 去内部里程碑「M5」措辞
- 94 命令标题、配置 markdownDescription、viewsWelcome 统一英文；新增 Branches/Shelf 的空态 welcome；displayName 统一为 Hyper Git

🤖 Generated with [Claude Code](https://github.com/claude), [CodeX](https://openai.com), [Gemini](https://github.com/apps/gemini-code-assist)
Co-Authored-By: Aurelius Huang<threefish.ai@gmail.com>
@ThreeFish-AI
feat(Webview): 4 个自绘 Webview 功能/UX 加固 + 统一英文 chrome;
304545e 
- Commit：文件列表空态、提交中 spinner、Ctrl/Cmd+Enter 提交、全选/全不选、Amend/Sign-off/Skip-hooks 折进 Advanced 折叠区降噪、toast/validation aria-live
- Log：新增错误态 + Retry（协议增量 log/error + log/retry，失败改 webview 内呈现替代模态弹窗）、详情面板关闭按钮、双击改为「打开提交」（选中+展开详情，不再触发菜单，菜单保留在右键+Enter）、Checkpoints scope 加 tooltip、富空态、scope 切换 aria-pressed、viewport role=tree
- Merge：冲突导航栏（Prev/Next + N/M 计数）、逐冲突 Resolved/Unresolved 徽标（前端检测残留标记）、冲突顺序编号、Save 旁剩余未解决计数、ARIA、只读列长代码行横向滚动
- Rebase：执行前确认对话框（HTML 覆盖层，改写历史防误操作）、操作摘要栏（pick/reword/squash/drop 计数）、盲文 ⠿ 拖拽柄改为 SVG grip、hash 中性色、密集 hint 改图例、新增 Cancel、drop 行删除线 + squash/fixup 视觉分组、select 加宽
- 4 个 Webview 的 chrome 文案统一英文（html lang=en）；Merge/Rebase 宿主消息（showInformationMessage/showWarningMessage/QuickPick）一并英文化

🤖 Generated with [Claude Code](https://github.com/claude), [CodeX](https://openai.com), [Gemini](https://github.com/apps/gemini-code-assist)
Co-Authored-By: Aurelius Huang<threefish.ai@gmail.com>
@ThreeFish-AI
refactor(Tree): TreeView 打磨 + Markdown Tooltip + 命令层全面英文清扫;
39c2c75 
- 新增 src/adapter/tree/tree-tooltip.ts（mdTooltip MarkdownString 构造器 + relativeDate 相对时间），统一 5 棵树 Tooltip
- Changes：活动 changelist 用 folder-opened 区分；文件 Tooltip 转 Markdown（英文）；消费 status-decoration 的 strikeThrough 位（Deleted→tooltip ~~删除线~~）；更新 JSDoc 诚实说明 TreeItem 稳定 API 无 opacity/strikethrough 字段
- Branches：分组头显示 (N) 计数徽标；活动分支高亮 charts.blue（与 Log 本地分支 chip 全局一致）、收藏分支 charts.yellow；移除行内原始 SHA 与 ★ 字符；Tooltip 转 Markdown（英文）
- Stash：描述改相对时间（git stash list --date=relative）、截断加 …、Tooltip 转 Markdown（英文）；新增只读 stashView 命令（单击查看 stash diff，比 apply 安全）
- Worktree：🔒/⚠ emoji 改为 codicon（locked→lock 图标、Prunable 文字）；当前 worktree 高亮 charts.blue；main 图标 home→root-folder-opened；Tooltip 转 Markdown（英文）
- Shelf：节点可折叠暴露包含文件（ShelfFileNode）；inbox→library 图标；描述改相对时间；升级为 createTreeView 获 badge 能力
- 命令层全面英文清扫（~160 处 showXxx/QuickPick/InputBox/模态按钮 + 抛出错误），保留全部中文代码注释；同步修正 commit-service 单测断言为新英文文案
- 提交快捷键由 Commit Webview 内 Ctrl/Cmd+Enter 承载（Phase 2），不引入全局键绑定以免冲突（commit 状态位于 webview，无宿主命令可绑定）

🤖 Generated with [Claude Code](https://github.com/claude), [CodeX](https://openai.com), [Gemini](https://github.com/apps/gemini-code-assist)
Co-Authored-By: Aurelius Huang<threefish.ai@gmail.com>
@ThreeFish-AI
fix(Merge): 修复 <script> 内 JSON 注入转义错误（escapeHtml 致 JSON.parse 失败）;
3bd813f 
- 预存隐患：renderHtml 此前用 escapeHtml(JSON.stringify(hunks)) 注入 <script>，产出 &quot;；
  而 <script> 为 raw-text，HTML 实体不被解码，导致 JSON.parse 在浏览器侧抛 SyntaxError，
  冲突 hunks 从不渲染、Save 无法收集结果——3-way Merge Editor 实际不可用。
- 修复：改用 JS-string 上下文转义（\\ 与 \" 转义 + < → \\u003c 防 </script> 破出），JSON.parse 正确 round-trip。
- 本次 UI 系统性优化的对抗性复核（code-reviewer）发现；Phase 2 新增的冲突导航/徽标依赖 HUNKS 渲染，故一并修复。
- 已用 node 实证 round-trip（含 <、&、引号、</script> 防护）。

🤖 Generated with [Claude Code](https://github.com/claude), [CodeX](https://openai.com), [Gemini](https://github.com/apps/gemini-code-assist)
Co-Authored-By: Aurelius Huang<threefish.ai@gmail.com>
@ThreeFish-AI
ThreeFish-AI merged commit 60a08f4 into feature/1.x.x Jun 30, 2026
5 checks passed
@ThreeFish-AI
ThreeFish-AI deleted the ThreeFish-AI/ui-ux-systemic-improvement branch June 30, 2026 16:05
This was referenced Jul 2, 2026
Merged
Merged
ThreeFish-AI added a commit that referenced this pull request Jul 4, 2026
@ThreeFish-AI
chore(Release): 发布 v0.0.9 正式版，合并 rc.1/rc.2 并回填 0.0.6→0.0.9 全量发布物料; (#50)
4573065 
- package.json：版本号 0.0.9-rc.2 → 0.0.9
- CHANGELOG.md：将 [0.0.9-rc.2] / [0.0.9-rc.1] 两段合并为单个综合条目 [0.0.9]，
  并回填自上一正式版 0.0.6 以来从未记录的变更（#40-#45 的 CI 状态/远程分支删除/
  清理已删远程分支/UI-UX 全局系统化 #43/Log All 修复 #45，及 #49 Emerald 图标）；
  底部引用链接同步更新（移除 rc 链接，新增 [0.0.9]）
- docs/releases/v0.0.9.md：新建正式版发布说明，以 rc.1 结构为蓝本扩写为面向公开用户的
  全量叙述，移除 Release Candidate 措辞，规模实证更新为 6 视图 / 97 命令 / 6 配置 / 324 单测
- docs/releases/{v0.0.9-rc.1,v0.0.9-rc.2}.md：删除 rc 发布说明（已发布 pre-release 正文已固化，删源无影响）
- docs/releases/README.md、docs/.agents/knowledge-map.md：索引与知识地图收敛至 v0.0.9 单行

🤖 Generated with [Claude Code](https://github.com/claude), [CodeX](https://openai.com), [Gemini](https://github.com/apps/gemini-code-assist)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@ThreeFish-AI