Administrator / JiabaoRenhe · Files

Go to a project
1008937-文档解析状态排成两排-1轮迭代.md 2.7 KB

缺陷 1008937 - 文档解析状态排成两排，很丑，如红色框图

原始需求（一字不差）

缺陷标题：文档解析状态排成两排，很丑，如红色框图

状态：接受/处理 ｜ 负责人：— ｜ 严重程度：一般 ｜ 优先级：— ｜ 创建者：Ryan章桦

创建时间：2026-03-20 00:42 ｜ 迭代：0.6.28.0（当前迭代）

原始描述：

文档解析状态排成两排，很丑，如红色框图

图片理解

说明：TAPD 为 SPA，图片链接无法通过 API 直接获取。根据缺陷标题和代码分析定位问题。

推断画面：知识库文件列表中，"文档解析状态"列的列标题文字（"文档解析状态" + 问号图标）因列宽不足，换行显示为两行，外观丑陋。

根因分析

FileList.vue 的文档解析状态列配置：

  • 列宽：width="140"
  • 表格 cell 内边距约 12px×2=24px，实际内容区宽度约 116px
  • 列标题内容："文档解析状态"（7个汉字×14px≈98px）+ 4px gap + 问号图标（14px）≈ 116px

刚好与可用宽度持平，在字体渲染略有偏差或内边距略大时超出，导致问号图标换行到第二行。

.status-header 使用 display: inline-flex 但未设置 white-space: nowrap，在 el-table 的 .cell 容器（white-space: normal）中会允许折行。

修复方案

  1. 给 .status-header 和 .status-cell 都加 white-space: nowrap，防止内容折行
  2. 列宽从 140 调大至 160，提供足够的安全余量

修改的文件

  • src/components/KnowledgeBase/FileList.vue

测试结果

  • npm run type-check 通过，无 TypeScript 错误
  • npm run test:unit 通过，19/19 用例全部通过
  • npm run test:e2e --grep 1008937：2 个用例跳过（E2E 测试未配置登录态，知识库页需登录才可见表格内容，与现有 E2E 测试处理方式一致）

验收条件

  1. 文档解析状态列标题（"文档解析状态" + 问号图标）在同一行内显示，不换行 ✅
  2. 列宽从 140 调大至 160px，有足够安全余量 ✅
  3. 状态标签与重试图标在同一行内显示，不换行 ✅

测试覆盖

单元测试（Vitest）

CSS 布局修复，无新增单元测试，已有 19 个用例全部通过。

E2E 测试（Playwright）

文件：e2e/tests/1008937-knowledge-status-column.spec.ts（2 个用例）

用例 验证内容
文档解析状态列标题应在单行内显示 .status-header computed white-space: nowrap，高度 ≤ 50px
文档解析状态单元格内容应在单行内显示 .status-cell computed white-space: nowrap，高度 ≤ 50px