附件中心、上传完成的文件清单、文档管理后台——需要逐项看完成 / 处理中 / 失败状态并做管理的文件集合。
界面与交互 · 内容与数据展示
文件列表File
把已选或已传的文件逐项展示成清单：每行带类型图标、名称、大小、时间和当前状态，失败写明原因并可重试或移除。
把一批附件从待处理送到完成
文件列表的核心是：每个文件是一个独立物件，状态长在行上。在下面附件中心加入模拟文件、点「开始处理」，看每一行怎么从待处理走到完成或失败——遮住底部说明，行本身仍讲得清状态。
你在给项目资料附件中心整理文件。点下面的模拟文件加入清单，再点「开始处理」， 看每一行从 待处理 走到 处理中（进度） 再到 完成 或 失败。 类型用图标区分，状态长在行上——遮住底部说明，行本身仍讲得清。
- 完成
- 失败
- 待处理
原因：清单里有 1 个文件待处理，等待开始。另有 1 个失败，可重试。下一步：点「开始处理」处理所有待处理文件；或继续加入文件、打开「模拟失败」看失败路径。对照：待处理、处理中、完成、失败四种状态可以同时存在于一屏。
面板里刚走过的几件事
把上面反复出现的规律命名一下。
- 类型图标分得清：PDF / DOC / IMG / ZIP 用各自图标和色标，不看文件名也能认出是哪一类。
- 每行同屏可扫：图标 + 名称 + 大小 + 时间 + 状态挤在同一行，不强制点开看详情。
- 状态长在行上：待处理、处理中（墨色进度）、完成（勾）、失败（原因）四种态，行的边框和状态标签同步变。
- 失败写原因 + 可重试：失败行写明「网络中断」等具体原因，给单行「重试」和「重试全部失败」。
- 处理中禁用主按钮：进度在走时主 CTA 禁用，防止重复提交。
什么时候用它
看到「要逐项看一堆文件各自状态」这条信号时用；只是摆几个静态链接时不必套文件列表。
只展示静态文件下载链接（用普通列表即可）、单个文件预览（用图片或预览组件）、结构化数据的多维对比（用表格）。
怎么用对，避开三个坑
从添加文件到看见状态的最短路径，并保留可恢复的状态。
- 每行结构：类型图标 + 名称（超长截断、可看全）+ 元信息（大小 / 时间）+ 状态标签 + 操作（重试 / 移除）。
- 状态用文字 + 图标 + 边框共同表达，不只靠颜色；完成打勾、失败带原因文字。
- 处理或上传中显示行内进度，并禁用主提交按钮；失败给具体原因和「重试」，失败多时给「重试全部失败」。
- 长清单可加筛选 / 排序，但不要因此把状态反馈藏进二级页；状态始终与文件同行可见。
正反例：同一批项目附件
目标都是「把 5 个附件处理好」。差异在用户能不能看见每个文件的状态、原因和重试。
5 个附件逐行显示 PDF / DOC / IMG 图标、大小、时间；处理中行有进度，完成行打勾， 失败行写「网络错误」并可重试。主操作「开始处理」放在底部。
差异：哪个文件卡住了、为什么、怎么办，都长在行上。5 个附件只剩一个总转圈，看不出哪个走到哪、哪个失败；失败只弹「出错」， 用户不知道是哪个文件、是太大还是网络断，也无法重试，只能反复点「重新提交」。
差异：只删逐文件状态、原因和重试，附件中心就从可控变成黑盒。快速自测
附件列表里 5 个文件有 1 个处理失败。列表最该让你看到什么？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。