4.9 KiB
4.9 KiB
源数据上传紧凑文件列表设计
日期：2026-07-10
1. 目标
优化数据处理创建页“源数据上传”区域中已选文件的呈现方式。当前每个文件 占用一张独立的大卡片；文件数量增多时，页面会被文件清单拉长，用户也难以 快速定位和删除某一文件。
本次改动将已上传文件改为每页最多 10 条的紧凑列表，并让上传入口随文件状态切换： 空状态使用大尺寸拖拽上传区，已有文件时切换为列表标题右侧的小型继续上传按钮。 这样能保持文件状态和逐项删除能力，让大量文件的查看与操作集中在一个稳定区域内。
2. 方案选择
评估过三种方式：
- 文件名标签流：占用最少，但长文件名、状态与删除操作会拥挤，不适合本页。
- 折叠摘要：页面最短，但需要额外展开才能操作，增加一步操作成本。
- 固定高度紧凑列表：每个文件是一行，状态和删除按钮始终可见；超过可见 行数后在列表内滚动。
采用第三种方案。它保留当前已有的逐项删除能力，同时解决页面高度随文件数 量线性增长的问题。
3. 布局与交互
空状态只显示现有的大尺寸拖拽上传区及格式提示，用于首次添加文件。
存在文件后，隐藏大尺寸拖拽上传区和其格式提示，在原位置显示文件列表：
- 列表顶部左侧显示
已添加 N 个文件，其中N为当前文件数；右侧显示 小型继续上传按钮。 继续上传复用原上传控件的多文件选择、格式限制、非自动上传和文件变更事件， 只改变触发入口的尺寸与位置。- 每页最多显示 10 行；超过 10 个文件时，在列表底部显示分页器，不使用长列表 或内部滚动承载额外文件。
- 新增文件后自动切换到最后一页，确保用户能立刻看到刚添加的文件；删除当前页 的最后一个文件后，自动回退到仍有文件的最后一页。
- 单行高度约 48px，使用细分隔线区分，不再使用外框、左侧绿条和大尺寸图标。
- 每行从左至右依次为：文件类型图标、文件名、大小与条目数、校验状态、删除。
- 文件名占据可伸缩区域；空间不足时省略，保留原始
title以便悬停查看全名。 - 删除按钮沿用红色文字链接，点击后继续使用当前的移除事件；不新增确认弹窗 或批量删除，以免改变既有操作语义。
- 校验状态沿用绿色图标和“校验通过”文案；后续若存在失败状态，可在同一位置 显示错误文案而不改变列表结构。
4. 视觉约束
- 延续页面的靛蓝文件图标、绿色成功状态和红色危险操作色；继续上传按钮使用现有 主色的紧凑次级按钮样式。
- 列表容器使用现有浅灰边框和 8px 圆角，背景保持白色；不新增大卡片层级。
- 仅当文件数超过 10 个时显示分页器；分页器使用紧凑的上一页、页码、下一页布局， 不提供页大小选择或跳页输入，避免增加不必要的操作。
- 在窄屏下，元信息可收缩，文件名仍保持最优先；删除按钮必须始终可见且可点按。
5. 组件边界与数据流
改动只在 TaskSetupStep 内完成：
- 继续使用现有
uploadedFiles属性和remove-file事件。 - 不修改文件上传、格式限制、校验逻辑或父组件中的文件数据模型。
- 新增的文件总数来自
uploadedFiles.length，每行信息继续来自现有文件元数据。
6. 可访问性
- 删除按钮继续使用真实的
el-button，确保键盘可聚焦和激活。 - 文件名省略时通过原生
title暴露完整名称。 - 校验状态同时保留图标和文字，不能只依靠颜色传达结果。
- 滚动列表不截断键盘焦点；聚焦到不可见的删除按钮时，浏览器应能将对应行带入 可见区域。
7. 验收标准
- 尚未添加文件时，只显示大尺寸拖拽上传区与格式提示，不显示文件列表。
- 上传至少 1 个文件后，大尺寸上传区与格式提示不再显示；文件列表标题右侧显示 可继续选择多个文件的小型上传按钮。
- 上传 1 至 10 个文件时，所有文件在紧凑列表中直接可见，每行均可单独删除。
- 上传超过 10 个文件时，列表一次只渲染当前 10 条，分页器可切换其他文件页； 页面高度不随总文件数继续增长。
- 新增文件后自动显示最后一页；删除造成当前页没有文件时，自动回到有效页。
- 每一行均展示文件名、大小、可选条目数、校验状态和删除操作。
- 长文件名不会挤压删除按钮，且悬停时可获取完整名称。
- 处理类型切换、格式限制、首次上传、继续上传和删除事件的现有行为不变。
- 常用桌面宽度和窄屏下均无横向溢出，删除操作保持可访问。