Simon
facc04aa65
本提交为 .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-*/
137 lines
6.1 KiB
Markdown
137 lines
6.1 KiB
Markdown
# 缺陷单：用户角色分配表格"员工账号/姓名/分配者/分配时间"列看不清
|
||
|
||
> **缺陷编号**: 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. 复现步骤
|
||
|
||
1. 用管理员账号登录管理后台 `https://itsupport.servyou.com.cn/itadmin/`
|
||
2. 进入"运营管理 → 角色管理"（路由 `/itadmin/roles`）
|
||
3. 滚动到页面中部"用户角色分配"表格
|
||
4. 观察表格体（数据行）—— "员工账号、姓名、分配者、分配时间"4 列内容几乎完全看不清
|
||
|
||
### 影响截图位置
|
||
|
||
- 页面：角色管理
|
||
- 区块：用户角色分配（约页面 1/3 处）
|
||
- 元素：`<table class="user-roles-table">` 内的 `<td>`
|
||
|
||
---
|
||
|
||
## 3. 根因分析
|
||
|
||
### 致命 CSS 变量冲突
|
||
|
||
`Roles.vue:940-943` 强制覆盖表格体样式：
|
||
|
||
```css
|
||
.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 变量：
|
||
|
||
```css
|
||
--text-primary: #f1f5f9; /* 深色主题下的主文字色 = 接近白色 */
|
||
```
|
||
|
||
**结果**：背景 `#fafafa` + 文字 `#f1f5f9` → **白底白字，对比度约 1.05:1**（WCAG AA 要求 ≥ 4.5:1）。
|
||
|
||
旁边的注释 `/* 表格样式增强：解决白底看不清问题 */` 暴露了原作者的修复思路——意识到了"白底"问题，把背景从默认深色改成浅色，但**忘了同步把文字色改成深色**。
|
||
|
||
### 历史背景
|
||
|
||
这是 v2.x 引入深色主题（global.css 整体改为深色变量）时遗留的 bug。原作者想做一个"清新风格"的浅色表格特例，但只改了背景没改文字色，导致与全站深色主题矛盾且完全不可读。
|
||
|
||
---
|
||
|
||
## 4. 处理办法
|
||
|
||
| 项目 | 内容 |
|
||
|------|------|
|
||
| 处理策略 | 自动处理和验证 |
|
||
| 执行时机 | 工作时间（需用户确认验收） |
|
||
| 处理流程 | 1. 修改 Roles.vue 颜色变量 + 列属性 + 加搜索框<br>2. 前端构建（npm run build）<br>3. 浏览器截图验证（agent-browser）<br>4. 用户确认验收 |
|
||
| 验证方式 | 浏览器自动截图比对，确认 4 列文字清晰可读 |
|
||
| 回滚方案 | 修改文件在挂载卷 `/opt/wecom-it-desk/app/`，通过 `docker compose restart backend` 不影响；前端通过 `vite build` 重新打包即可回滚 |
|
||
|
||
---
|
||
|
||
## 5. 修复方案
|
||
|
||
按 **方案 C · 完整优化** 执行（详见 PRD-REQ-通用-003）：
|
||
|
||
1. **颜色冲突修复**：将 `.user-roles-table :deep(.el-table__body td)` 的背景改回 `var(--bg-secondary)`，与全站深色主题一致
|
||
2. **添加 `show-overflow-tooltip`**：给所有可能含长文本的列（员工账号/姓名/来源/分配者/分配时间/过期时间）加 tooltip
|
||
3. **关键列固定左侧**：员工账号、姓名两列加 `fixed="left"`，横向滚动不丢失
|
||
4. **加搜索框**：在表格上方加输入框，按 `employee_id/employee_name/assigned_by` 过滤
|
||
5. **样式复用提示**：在 `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 | 产品文档规范标准化 | 无（仅文档格式） |
|
||
|
||
---
|