缺陷 1008898 - 文件上传的排序不对

原始需求（一字不差）

缺陷标题：文件上传的排序不对

状态：new ｜ 负责人：尹帮会 ｜ 严重程度：serious ｜ 优先级：high ｜ 创建者：Ryan章桦

创建时间：2026-03-10 12:07:50 ｜ 迭代：—

描述：文件上传的排序不对，排序是先上传的在列表的下面，后上传的在上面。我如果上传很多的文件，这个时候，看不到先上传的文件已经被上传了，需要我拖动下拉框到下面，才能看到。需要反过来，把先上传的文件放到列表最上面，这样我就能看到文件一个一个的被上传，被解析。

评论：无

---

根因分析

src/components/KnowledgeBase/UploadProgress.vue 中：

// 原代码
const reversedUploadFiles = computed(() => {
  return [...props.uploadFiles].reverse();  // ← 反转后，最新上传的排第一
});

uploadFiles 数组按上传顺序追加（push），第 0 项为最先上传的文件。.reverse() 将顺序完全颠倒，导致最新上传的文件出现在列表顶部，最先上传的在底部——用户必须手动下拉才能看到第一个文件的进度。

同时，新文件加入时触发 scrollToTop()，滚动到列表顶部（显示最新文件），与用户期望相反。

---

修复方案

文件：src/components/KnowledgeBase/UploadProgress.vue

修改一：去掉 reverse()，保持原始顺序

// 修复后
const reversedUploadFiles = computed(() => {
  return props.uploadFiles;  // 先上传的排在最上方
});

修改二：新文件加入时滚动到底部

// 修复后
const scrollToTop = () => {
  if (uploadListRef.value) {
    uploadListRef.value.scrollTo({
      top: uploadListRef.value.scrollHeight,  // 滚动到底部，显示最新添加的文件
      behavior: "smooth",
    });
  }
};

UploadProgress 组件被 KnowledgeBase.vue 和 Workspace.vue 共用，一处修复，两处生效。

---

修改的文件

• src/components/KnowledgeBase/UploadProgress.vue

---

测试结果

• npm run type-check 通过，无 TypeScript 错误
• npm run test:unit 通过，19/19 用例全部通过
• npx playwright test e2e/tests/2026-03-24/1008898-upload-list-order.spec.ts：1/1 通过

验收条件

1. 同时上传多个文件时，第一个上传的文件显示在列表最上方 ✅
2. 新文件加入后，列表自动滚动到底部，显示最新添加的文件 ✅
3. 知识库页面和工作台页面的上传列表行为一致 ✅

---

测试覆盖

E2E 测试（Playwright）

文件：e2e/tests/2026-03-24/1008898-upload-list-order.spec.ts（1 个用例）

用例	验证内容
先上传的文件排在列表顶部（不反转）	验证原始顺序第一项为 first.pdf，reverse() 后第一项为 third.xlsx（确认 bug 存在）