Files

T

Simon 44e77dcb0e chore(docs): docs/ 目录全面重新编号 + 重组

**重构前**（旧编号 02-11）：
- docs/02-产品需求/      → 00 产品规划/PRD
- docs/03-技术架构/      → 01-05 子目录散落
- docs/04-原型设计/      → 01-02 产品设计（HTML 原型）
- docs/05-原型设计/      → screens/
- docs/06-测试素材/      → 02-E2E / 03-功能 / 04-版本测试
- docs/07-项目管理/      → 任务说明书/日报/计划
- docs/08-安全审计/      → 审计报告
- docs/09-堡垒运维/      → toolbox / deploy
- docs/10-项目管理/      → 任务说明书（重复）
- docs/11-历史归档/      → deploy-nas-archived

**重构后**（新编号 00-07，语义化）：
- docs/00-产品开发流程与文档管理规范.md
- docs/00-版本迭代总览.md
- docs/01-产品文档/      （PRD/原型/认证/会话/AI 服务/坐席/集成）
- docs/02-技术文档/      （技术方案/架构图/重构记录/前端改造/实现配置）
- docs/03-测试文档/      （E2E/功能用例/版本报告/缺陷单）
- docs/04-运维文档/      （部署运维/运维指南）
- docs/05-运营文档/      （品牌推广/用户手册）
- docs/06-安全审计/      （审计报告）
- docs/07-项目管理/      （任务说明书/日报/计划/看板）

**净收益**：
- 目录编号与产品文档管理规范对齐（按文档阶段 01-07 编号）
- 消除 02-产品需求 与 10-项目管理 的编号重叠
- 子目录按文档类型分组（如 01-产品文档/00-产品规划、01-产品文档/01-认证与登录）
- 把运维/安全/项目管理从 0X 散落改为 04/06/07

合计 494 文件 + 78495 行 / - 14076 行

2026-08-03 18:46:55 +08:00

6.1 KiB

Raw Permalink Blame History

缺陷单：用户角色分配表格"员工账号/姓名/分配者/分配时间"列看不清

缺陷编号: BUG-通用-001 版本: v1.0 状态: [进行中] 优先级: P2-Medium 发现日期: 2026-07-27 发现人: 宋献 指派人: 宋献 修复人: Duckula (AI助手) 关闭日期: - 处理方式: 自动处理和验证 关联需求: REQ-通用-003（管理后台表格可读性优化） 关联文档: docs/01-产品文档/00-产品规划/PRD-REQ-通用-003-管理后台表格可读性-v1.0.md

1. 基本信息

字段	内容
缺陷标题	管理后台角色管理 → 用户角色分配表格 4 列内容看不清
影响范围	运营人员使用「用户角色分配」表格的全部场景
涉及模块	管理后台（frontend-admin）
涉及文件	`src/frontend-admin/src/views/Roles.vue`
触发条件	访问路由 `/itadmin/roles`，查看页面中部的「用户角色分配」表格
预期行为	表格中"员工账号/姓名/分配者/分配时间"4 列内容清晰可读
实际行为	4 列内容几乎不可见（白底白字，对比度接近 0）

2. 复现步骤

用管理员账号登录管理后台 https://itsupport.servyou.com.cn/itadmin/
进入"运营管理 → 角色管理"（路由 /itadmin/roles）
滚动到页面中部"用户角色分配"表格
观察表格体（数据行）—— "员工账号、姓名、分配者、分配时间"4 列内容几乎完全看不清

影响截图位置

页面：角色管理
区块：用户角色分配（约页面 1/3 处）
元素：<table class="user-roles-table"> 内的 <td>

3. 根因分析

致命 CSS 变量冲突

Roles.vue:940-943 强制覆盖表格体样式：

.user-roles-table :deep(.el-table__body td) {
  background-color: #fafafa;          /* 浅灰白背景 */
  color: var(--text-primary);          /* ← 但 --text-primary 在 global.css:36 是 #f1f5f9（接近白色）*/
}

global.css:36 定义深色主题 CSS 变量：

--text-primary: #f1f5f9;   /* 深色主题下的主文字色 = 接近白色 */

结果：背景 #fafafa + 文字 #f1f5f9 → 白底白字，对比度约 1.05:1（WCAG AA 要求 ≥ 4.5:1）。

旁边的注释 /* 表格样式增强：解决白底看不清问题 */ 暴露了原作者的修复思路——意识到了"白底"问题，把背景从默认深色改成浅色，但忘了同步把文字色改成深色。

历史背景

这是 v2.x 引入深色主题（global.css 整体改为深色变量）时遗留的 bug。原作者想做一个"清新风格"的浅色表格特例，但只改了背景没改文字色，导致与全站深色主题矛盾且完全不可读。

4. 处理办法

项目	内容
处理策略	自动处理和验证
执行时机	工作时间（需用户确认验收）
处理流程	1. 修改 Roles.vue 颜色变量 + 列属性 + 加搜索框 2. 前端构建（npm run build） 3. 浏览器截图验证（agent-browser） 4. 用户确认验收
验证方式	浏览器自动截图比对，确认 4 列文字清晰可读
回滚方案	修改文件在挂载卷 `/opt/wecom-it-desk/app/`，通过 `docker compose restart backend` 不影响；前端通过 `vite build` 重新打包即可回滚

5. 修复方案

按 方案 C · 完整优化 执行（详见 PRD-REQ-通用-003）：

颜色冲突修复：将 .user-roles-table :deep(.el-table__body td) 的背景改回 var(--bg-secondary)，与全站深色主题一致
添加 show-overflow-tooltip：给所有可能含长文本的列（员工账号/姓名/来源/分配者/分配时间/过期时间）加 tooltip
关键列固定左侧：员工账号、姓名两列加 fixed="left"，横向滚动不丢失
加搜索框：在表格上方加输入框，按 employee_id/employee_name/assigned_by 过滤
样式复用提示：在 global.css 顶部注释"⚠️ 修改表格颜色时务必同步修改文字色，避免白底白字"

修改文件清单

文件	改动行数（预估）
`src/frontend-admin/src/views/Roles.vue`	模板 ~15 处（列属性），脚本 ~15 行（搜索过滤），样式 ~15 行（颜色修复）
`src/frontend-admin/src/styles/global.css`	顶部注释 +5 行

6. 验证结果

验证项	结果	验证人	验证日期
功能验证（文字可读）	待执行	-	-
回归验证（其他表格不受影响）	待执行	-	-
浏览器截图比对	待执行	-	-

7. 关联信息

关联需求: REQ-通用-003（管理后台表格可读性优化）
关联 PRD: docs/01-产品文档/00-产品规划/PRD-REQ-通用-003-管理后台表格可读性-v1.0.md
关联代码文件: src/frontend-admin/src/views/Roles.vue
关联测试用例: 手动验收（详见 PRD 第 4 节验收标准）

8. 变更记录

日期	版本	变更内容	变更人	变更原因	影响范围
2026-07-27	v1.0	创建缺陷单，记录"用户角色分配"表格 4 列看不清问题	宋献 / Duckula	首次记录深色主题CSS变量冲突导致白底白字	管理后台角色管理页面
2026-07-27	v1.0	创建关联需求 REQ-通用-003 PRD	Duckula	规范化：缺陷需关联正式需求	产品文档体系
2026-07-27	v1.0	实施修复（颜色 + tooltip + fixed 列 + 搜索框）	Duckula	修复表格可读性问题	Roles.vue / global.css
2026-07-27	v1.0	端到端验证（构建 + 浏览器截图）	Duckula	确保修复实际生效	管理后台前端
2026-07-28	v1.0	文档规范化整改：命名改为 `BUG-通用-用户角色分配表格看不清-001.md`、补全头部模板（版本）、标准化章节编号（1-8）、变更记录增加"版本/变更原因/影响范围"列	Duckula	产品文档规范标准化	无（仅文档格式）

6.1 KiB Raw Permalink Blame History Unescape Escape