Files

T

Simon facc04aa65 chore: docs 结构整改 + compose 双目录对齐（合并重建提交）

本提交为 .git 对象库损坏后的重建提交，内容等价于原先三个本地提交
（5e2fd4c2 / 57a53c98 / 5d7e1873）的累积结果，未做任何额外改动。

一、docs 结构整改（整改 #14）
根因：重构时新结构为 untracked 文件，执行 git stash（未带 -u）未纳入，
随后 git reset 拉回 HEAD 旧 tracked 树，导致旧树复活、新旧两棵目录
树并存于 docs/，共 791 文件、双分类体系冲突。

修复动作：
- b2 同名异主题文件改名迁移保全 9 个
- C 类 39 个孤立文件按主题正确归类
- A/B1 类 222 个重复文件删除（新结构已有内容副本）
- 9 个旧独有空目录删除
- 270 处内部引用按 verified 映射改写
- 整改记录 #14 登记于 04-运维文档/部署运维

结果：docs 791 → 569 文件，顶层仅规范 8 类 + 治理文件，单树恢复。
残留：约 20 处指向从未存在文件的陈旧死链，归入独立文档卫生任务。

二、compose 双目录对齐（消除踩坑 A）
- docker-compose.yml：nginx 前端挂载全部由根目录 frontend-*/dist
  改为 src/frontend-*/dist（h5 / agent / admin / terminal）
- docker-compose.dev.yml：dev 服务 build context 与卷同步改 src/
- 效果：本地 docker compose up 不再把根目录 stale dist 挂回，
  与线上一致，分叉隐患消除（已 docker compose config 校验通过）

防复发铁律：
- 重构须提交；仓库修复须 git stash -u 或先 commit
- 新结构须 git add 并提交，避免再次 untracked 复活
- H5 改动只动 src/frontend-h5/，禁改根目录遗留 frontend-*/

2026-08-07 22:31:32 +08:00

5.7 KiB

Raw Blame History

PRD - 管理后台表格可读性优化

需求编号: REQ-通用-003 版本: v1.0 状态: 草稿作者: 宋献日期: 2026-07-27 关联文档: 无 优先级: P2-Medium

1. 需求描述

1.1 背景

管理后台「角色管理 → 用户角色分配」表格的 "员工账号 / 姓名 / 分配者 / 分配时间" 四列内容存在严重的可读性问题，影响运营人员日常工作。

经排查，根因为 Roles.vue:940-943 强制把表格行背景设为浅色 #fafafa，但文字色仍继承深色主题变量 var(--text-primary) = #f1f5f9（接近白色），形成 白底白字 的视觉灾难，对比度几乎为 0。

1.2 目标

修复用户角色分配表的颜色冲突，恢复文字可读性
为长文本列添加 show-overflow-tooltip，避免内容被截断
关键标识列（员工账号、姓名）固定左侧，横向滚动时不会丢失上下文
提供简单搜索框，方便运营人员快速定位某个员工/分配者的记录
形成可复用的"管理后台表格可读性"规范，避免类似问题在其他页面复发

1.3 范围

改动项	涉及文件	范围
修复颜色冲突	`src/frontend-admin/src/views/Roles.vue`	仅 `.user-roles-table` 选择器
添加 tooltip + fixed 列	`src/frontend-admin/src/views/Roles.vue`	表格 8 列全部调整
添加搜索过滤	`src/frontend-admin/src/views/Roles.vue`	`filteredUserRoles` computed
复用性规范	`src/frontend-admin/src/styles/global.css`	注释（无功能改动）

不在范围：

不改动后端 API
不改动其他表格（如"自动映射规则"表——目前问题不严重）
不重做整个表格组件（如换成 vxe-table）

2. 用户故事

2.1 运营人员

优先级	用户故事
P0	作为运营人员，我希望表格文字清晰可读，能直接看到员工账号、姓名、分配者、分配时间
P1	作为运营人员，我希望长员工姓名/分配者被截断时，鼠标悬停能看到完整内容
P1	作为运营人员，我希望横向滚动表格时，左侧的"员工账号/姓名"列不消失
P2	作为运营人员，我希望能搜索员工姓名/账号，快速过滤出我关心的记录

2.2 前端开发

优先级	用户故事
P1	作为前端开发，我希望这套样式修复能复用，避免后续其他表格再犯同样错误

3. 功能需求

3.1 样式修复（核心）

当前代码（Roles.vue:940-943）：

.user-roles-table :deep(.el-table__body td) {
  background-color: #fafafa;          /* 浅灰白背景 */
  color: var(--text-primary);          /* #f1f5f9 白色文字 = 白底白字 */
}

目标代码：

.user-roles-table :deep(.el-table__body td) {
  background-color: var(--bg-secondary);  /* #1e293b 与全站深色主题一致 */
  color: var(--text-primary);             /* #f1f5f9 浅色文字，深底浅字对比清晰 */
}
.user-roles-table :deep(.el-table__row--striped td) {
  background-color: var(--bg-tertiary);   /* 斑马纹 #334155 */
}
.user-roles-table :deep(.el-table__body tr:hover > td) {
  background-color: rgba(59, 130, 246, 0.15) !important;
}

3.2 列属性优化

列名	当前	调整后
员工账号	`min-width="120"`	`min-width="120" fixed="left" show-overflow-tooltip`
姓名	`min-width="100"`	`min-width="100" fixed="left" show-overflow-tooltip`
角色	`min-width="100"`	`min-width="100"`
来源	`min-width="100"`	`min-width="100" show-overflow-tooltip`
分配者	`min-width="100"`	`min-width="120" show-overflow-tooltip`
分配时间	`min-width="160"`	`min-width="160" show-overflow-tooltip`
过期时间	`min-width="160"`	`min-width="160" show-overflow-tooltip`
操作	`width="100" fixed="right"`	保持不变

3.3 搜索框

在表格上方添加简易搜索输入框，按 employee_id / employee_name / assigned_by 任一字段做模糊匹配（大小写不敏感）。

实现：复用 filteredUserRoles computed，新增 searchKeyword ref + watcher/计算属性。

4. 验收标准

4.1 功能验收

编号	验收项	通过标准
AC-1	文字可读	「员工账号/姓名/分配者/分配时间」四列文字清晰可见（对比度 ≥ 4.5:1，WCAG AA）
AC-2	溢出提示	长员工姓名被截断时，鼠标悬停显示完整内容
AC-3	固定列	横向滚动表格时，"员工账号/姓名"两列保持可见
AC-4	搜索	输入员工姓名/账号关键词，列表实时过滤
AC-5	主题一致	表格样式与全站深色科技风一致，无突兀色块
AC-6	斑马纹	偶数行/奇数行有可辨识的背景区分

4.2 回归验收

编号	验收项	通过标准
AC-7	现有功能	分配角色 / 撤销角色 / 搜索员工对话框全部正常使用
AC-8	其他表格	「自动映射规则」表样式不受影响
AC-9	其他页面	角色概览卡片网格样式不受影响
AC-10	移动端响应式	视口宽度 < 1280px 时表格仍可用

5. 关联信息

关联缺陷: BUG-通用-001
关联代码文件: src/frontend-admin/src/views/Roles.vue
关联样式文件: src/frontend-admin/src/styles/global.css
关联测试: 手动验收（详见 BUG-通用-001 验证清单）

6. 变更记录

日期	版本	变更内容	变更人
2026-07-27	v1.0	创建 PRD，记录表格可读性问题与修复方案	宋献 / Duckula

5.7 KiB Raw Blame History Unescape Escape