fix(frontend): align quick commands theme buttons

Replace remaining hardcoded button and hover colors in QuickCommandsView with existing theme utility classes. This keeps add, empty-state, and item action buttons visually consistent across themes without changing quick command behavior.
2026-03-25 05:42:02 +08:00
parent d8a99e55b8
commit 654295e0c8
8 changed files with 133 additions and 11 deletions
@@ -0,0 +1 @@
+{"status":"completed","completed":5,"failed":0,"pending":0,"total":5,"done":5,"percent":100,"current":"已完成 QuickCommandsView 主题变量对齐与验证，等待归档","updated_at":"2026-03-25 05:39:15"}
@@ -0,0 +1,64 @@
+# 变更提案: quickcommands-theme-alignment
+
+## 元信息
+```yaml
+类型: 缺陷修复
+方案类型: implementation
+优先级: P2
+状态: 已完成
+状态说明: 已完成 QuickCommandsView 主题变量对齐、构建验证和知识库同步，待归档
+创建: 2026-03-25
+```
+
+---
+
+## 1. 需求
+
+### 背景
+快捷指令视图当前整体已接入主题变量体系，但局部交互按钮仍残留写死的颜色类，导致默认主题下的悬停和操作态与其他主题表现不一致，视觉语言不统一。
+
+### 目标
+- 仅修复 `packages/frontend/src/views/QuickCommandsView.vue`。
+- 统一快捷指令视图内残留的硬编码色值，使其回到现有主题变量体系。
+- 不调整快捷指令的数据逻辑、交互结构和其他组件。
+
+### 约束条件
+```yaml
+范围约束: 仅限 QuickCommandsView.vue，禁止扩散到其它视图和组件
+实现约束: 复用现有 bg-background/bg-border/text-foreground/text-text-secondary/bg-primary 等主题变量类
+行为约束: 不改变搜索、分组、编辑、删除、右键菜单和发送命令逻辑
+风险约束: 避免引入新的主题 token 或全局样式依赖
+```
+
+### 验收标准
+- [ ] `QuickCommandsView.vue` 中残留的硬编码 hover/background 色值被替换为主题变量类
+- [ ] 默认主题下快捷指令列表操作按钮、空状态按钮等视觉风格与当前主题体系一致
+- [ ] 其他主题下不出现明显的对比度退化或交互态丢失
+- [ ] 前端最小构建或类型校验可通过
+
+---
+
+## 2. 方案
+
+### 技术方案
+保留 `QuickCommandsView.vue` 的结构和行为，仅替换模板中与主题适配冲突的硬编码类。重点处理列表项操作按钮上的 `hover:bg-black/10` 以及与主题变量命名不一致的按钮 hover 类，统一改为当前项目已有的 `hover:bg-border`、`hover:text-foreground` 或 `hover:bg-primary/10` 体系，保证默认主题与其他主题都走同一套 CSS 变量映射。
+
+### 影响范围
+```yaml
+涉及模块:
+  - frontend: 快捷指令视图模板样式
+预计变更文件: 1
+```
+
+### 风险评估
+| 风险 | 等级 | 应对 |
+|------|------|------|
+| 替换 hover 类后局部按钮层级感变弱 | 低 | 优先复用仓库中同类列表组件已采用的主题类组合 |
+| 默认主题修好但紧凑模式下按钮显隐观感变化 | 低 | 保持原有显隐逻辑，仅改颜色类 |
+| 漏掉同文件里的另一处硬编码样式 | 低 | 通过全文检索确认所有残留硬编码色值 |
+
+### 实施结果
+- `QuickCommandsView.vue` 的顶部添加按钮与空状态按钮统一切换到 `bg-button`、`text-button-text`、`hover:bg-button-hover`。
+- 分组视图和平铺视图中的复制、编辑、删除按钮均移除了 `hover:bg-black/10`，改为 `hover:bg-border`。
+- 前端 `npm run build --workspace @nexus-terminal/frontend` 通过。
+- `vite preview` 可启动并打开登录页，但因本地认证/后端接口返回 500，未能在浏览器中直接进入快捷指令视图做目视验收。
@@ -0,0 +1,51 @@
+# 任务清单: quickcommands-theme-alignment
+
+```yaml
+@feature: quickcommands-theme-alignment
+@created: 2026-03-25
+@status: completed
+@mode: R2
+```
+
+## 进度概览
+
+| 完成 | 失败 | 跳过 | 总数 |
+|------|------|------|------|
+| 5 | 0 | 0 | 5 |
+
+---
+
+## 任务列表
+
+### 1. 方案与范围确认
+
+- [√] 1.1 创建快捷指令主题适配修复方案包并锁定单文件范围 | depends_on: []
+
+### 2. 视图主题适配修复
+
+- [√] 2.1 盘点 `QuickCommandsView.vue` 中残留的硬编码色值与不一致 hover 类 | depends_on: [1.1]
+- [√] 2.2 将残留硬编码色值替换为现有主题变量类，并保持交互逻辑不变 | depends_on: [2.1]
+
+### 3. 验证与同步
+
+- [√] 3.1 运行前端最小验证并记录结果 | depends_on: [2.2]
+- [√] 3.2 更新 `.helloagents` 文档与变更记录 | depends_on: [3.1]
+
+---
+
+## 执行日志
+
+| 时间 | 任务 | 状态 | 备注 |
+|------|------|------|------|
+| 2026-03-25 05:32 | 1.1 | 完成 | 创建 implementation 方案包，范围锁定为 QuickCommandsView 单文件主题适配 |
+| 2026-03-25 05:34 | 2.1 / 2.2 | 完成 | 盘点并替换 QuickCommandsView 中残留的按钮硬编码色值，统一到按钮与边框主题变量体系 |
+| 2026-03-25 05:38 | 3.1 | 完成 | `npm run build --workspace @nexus-terminal/frontend` 通过；`vite preview` 可启动，但受本地认证/后端 500 限制未能进入快捷指令页 |
+| 2026-03-25 05:39 | 3.2 | 完成 | 更新 frontend 模块文档，准备补充 CHANGELOG 与归档索引 |
+
+---
+
+## 执行备注
+
+- 本次修复只处理视图层主题样式，不触碰 store、事件流和数据结构。
+- 默认主题与其他主题不一致的判断基于当前文件残留硬编码色值，而不是后端主题数据异常。
+- 浏览器实际启动验证已执行，但目标视图的目视验收仍依赖可用的登录态和后端接口。
				`@@ -0,0 +1 @@`
				`{"status":"completed","completed":5,"failed":0,"pending":0,"total":5,"done":5,"percent":100,"current":"已完成 QuickCommandsView 主题变量对齐与验证，等待归档","updated_at":"2026-03-25 05:39:15"}`