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