1008945 - 知识库为空的时候的 UI
缺陷信息
- 缺陷 ID：1008945
- 标题：知识库为空的时候的 UI
- 优先级：medium
- 负责人：尹帮会
- 创建者：小润润
问题描述
知识库文件列表为空时，使用的是 Element Plus el-table 默认的空状态（通用文档图标 + "暂无数据"），视觉体验欠佳，不符合产品设计规范。
截图可见：选中一个空目录时，列表区域展示通用占位图，缺乏品牌感。
根因分析
FileList.vue 中的 el-table 没有定制 #empty 插槽，直接使用了 Element Plus 内置的默认空状态 UI。
修复方案
- 将
public/暂无数据.svg移至src/assets/empty-state.svg（规范命名 + 内联加载） - 去掉 SVG 文件中的 XML 声明/DOCTYPE，移除根元素硬编码的
width/height - 在
el-table中添加#empty插槽，用?raw+v-html内联渲染 SVG，消除异步加载闪烁 - 用
:deep(svg)穿透 scoped 样式控制图标尺寸（140px） - 隐藏
.el-table__inner-wrapper::before去掉表格底部边线 - 补充 i18n key：
KnowledgeBase.emptyState（中文"暂无数据"，英文"No Data"）
迭代记录
第 1 轮
修改文件：
-
public/暂无数据.svg→public/empty-state.svg（重命名） -
src/components/KnowledgeBase/FileList.vue：添加#empty插槽 + 样式 -
src/locales/zh-CN.ts：添加emptyState: "暂无数据" -
src/locales/en-US.ts：添加emptyState: "No Data"
结果： 空目录下展示自定义空状态图标和文字，但存在两个问题：图片异步加载导致文字先于图片出现；表格底部有多余边线。
第 2 轮
问题： 先出现"暂无数据"文字再出现图片；表格底部边线未去除。
根因：
-
img src="/empty-state.svg"从 public 目录异步加载，文字先渲染 - 错误地隐藏了
::after，实际底部边线由::before画
修改： SVG 移入 src/assets/，改用 ?raw + v-html 内联；隐藏 ::before
结果： SVG 同步内联无闪烁，但图标与文字仍未对齐。
第 3 轮
问题： 图标和文字未对齐；底部边线依然存在。
根因： v-html 渲染的 div 默认 block，内部 SVG 左对齐
修改： empty-state-img 改为 display: flex; justify-content: center
结果： 图标居中对齐，底部边线消除。
第 4 轮
问题： 图标太大，尝试将 CSS 中 svg { width: 160px } 改为 100px，实际未生效。
根因： scoped 样式中 svg {} 编译为 svg[data-v-xxx]，但 v-html 内容不带 scoped 属性，选择器不匹配
结果： 图标尺寸未变（仍为 SVG 原始尺寸）。
第 5 轮
问题： 尝试用 JS regex 去掉 SVG width/height 属性后，图标完全消失。
根因：
- SVG 文件含 XML 声明（
<?xml?>）和 DOCTYPE，v-html渲染时浏览器解析异常 - 去掉
width/height后 SVG 在 flex 容器内无尺寸参考，塌缩不可见 - 需用
:deep(svg)才能让 scoped 样式穿透v-html内容
修改：
- 直接编辑 SVG 文件：去掉 XML 声明/DOCTYPE，移除根元素
width/height - JS 还原为直接使用
?raw字符串 - CSS 改为
:deep(svg) { width: 100px; height: auto }
结果： 图标正常显示，但 100px 偏小。
第 6 轮
问题： 图标 100px 偏小。
修改： :deep(svg) { width: 140px }
结果： 尺寸合适，空状态 UI 完整展示，验收通过。