鸿蒙原生应用 ArkTS 严格模式实战虚线上传卡与类型胶囊 —— 科研文件管理页设计App 24「科研项目管理」文件 TabFunc2Tab是科研文件管理页——4 模块布局Header 5 分类 Chip全部/论文/数据集/报告/代码 虚线边框上传卡 6 文件列表emoji 名称 大小/日期 类型胶囊。本篇基于24-research-mgmt/entry/src/main/ets/pages/Func2Tab.ets约 118 行逐段拆解附 4 张实机截图。一、整体结构Header Chip 上传卡 文件列表Func2Tab 是文件管理的 4 模块布局——4 模块覆盖分类上传列表完整文件管理build() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.ChipRow() this.UploadCard() this.SectionTitle(项目文件) this.FileList() } .width(100%) .padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }4 块结构Header— 文件管理标题ChipRow— 5 分类胶囊全部/论文/数据集/报告/代码UploadCard— 虚线边框上传卡SectionTitle(项目文件) FileList— 6 文件列表文件管理的标准 4 模块——分类 → 上传 → 列表——用户操作流程清晰。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、HeaderHeader 是文件管理单行与系列同款height(safeTop 56) 靠底对齐Builder Header() { Row() { Text(文件管理) .fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text) } .width(100%).height(this.safeTop 56) .padding({ top: this.safeTop, left: D.pad, right: D.pad }) .backgroundColor(C.card) .alignItems(VerticalAlign.Bottom) }文件管理是功能名不是项目——Tab 内页面的功能名——Header 标题 用户当前所在的功能。三、ChipRow5 分类胶囊ChipRow 是 5 分类的横滑胶囊与系列其他 Chip 同款Builder ChipRow() { Scroll() { Row({ space: 10 }) { ForEach(this.cats, (cat: string, idx: number) { Text(cat) .fontSize(13) .fontColor(this.activeCat idx ? #FFFFFF : C.textSub) .padding({ left: 14, right: 14, top: 7, bottom: 7 }) .backgroundColor(this.activeCat idx ? C.primary : C.card) .borderRadius(16) .onClick(() { this.activeCat idx; }) }, (cat: string) cat) } } .scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off).width(100%) }5 分类[全部, 论文, 数据集, 报告, 代码]——科研项目的 4 类文件 全部——全部 4 业务分类是 5 个分类的标准设计。State activeCat: number 0默认选中全部——onClick切选中态——假筛选demo 未联动过滤。4 个业务分类的科研文件分类标准论文.docx/.pdf——研究成果数据集.csv/.xlsx——研究素材报告.pdf——阶段性产出代码.zip/.py——实验工具文件分类 科研流程产物——真实项目的4 大文件类型映射4 大研究阶段。四、UploadCard虚线边框上传卡UploadCard 是**上传文件引导卡**——用虚线边框主色强调上传功能的标准视觉Builder UploadCard() { Row({ space: 10 }) { Text().fontSize(24) Text(上传文件).fontSize(14).fontColor(C.text).layoutWeight(1) Text(论文/数据/报告/代码).fontSize(11).fontColor(C.textDim) } .width(100%).padding(14) .backgroundColor(C.card).borderRadius(D.rMd) .border({ width: 1, color: C.primary, style: BorderStyle.Dashed }) .onClick(() { promptAction.showToast({ message: 上传文件 }); }) }3 元素 上传 emoji24sp上传文件14sp——layoutWeight(1)占主要空间支持的文件类型11sp 灰—— 论文/数据/报告/代码 ——提示用户能上传什么border({ width: 1, color: C.primary, style: BorderStyle.Dashed })——1vp 虚线 靛蓝边框——虚线边框是上传占位符的视觉约定任何上传卡都用虚线——虚线 待填充。真实项目的上传卡进阶拖拽上传把文件拖到卡上 → 自动上传点击上传点击卡 → 弹文件选择器粘贴上传CmdV 粘贴文件 → 自动上传多文件上传选择多个文件 → 批量上传App 24 的点击弹 Toast是占位实现——真实项目应集成ohos.file.picker文件选择器。五、SectionTitle FileList6 文件列表本页核心SectionTitle 是项目文件标题无右侧新建——上传入口已经在 UploadCard 单独提供。FileList 是 6 文件列表Builder FileList() { Column({ space: 10 }) { ForEach(this.files, (f: FileItem) { Row({ space: 12 }) { Text(f.emoji).fontSize(24) Column({ space: 3 }) { Text(f.name).fontSize(14).fontColor(C.text).maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) Text(f.size · f.date).fontSize(11).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text(f.type).fontSize(11).fontColor(C.primary) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .backgroundColor(C.primarySoft).borderRadius(4) } .width(100%).padding(12).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) .onClick(() { promptAction.showToast({ message: f.name }); }) }, (f: FileItem) f.id.toString()) }.width(100%) }5.1 6 个文件的数据private files: FileItem[] [ { id: 1, emoji: , name: 论文初稿_v3.docx, type: 论文, size: 2.4MB, date: 今天 }, { id: 2, emoji: , name: 实验数据集_v2.csv, type: 数据集, size: 15.6MB, date: 昨天 }, { id: 3, emoji: , name: 实验报告_阶段2.pdf, type: 报告, size: 3.1MB, date: 8月10日 }, { id: 4, emoji: , name: 模型训练代码.zip, type: 代码, size: 8.2MB, date: 8月8日 }, { id: 5, emoji: , name: 参考文献.pdf, type: 论文, size: 1.8MB, date: 8月5日 }, { id: 6, emoji: , name: 评估结果.xlsx, type: 数据集, size: 420KB, date: 8月3日 } ];6 文件覆盖 4 类型文件类型大小日期 论文初稿_v3.docx论文2.4MB今天 实验数据集_v2.csv数据集15.6MB最大昨天 实验报告_阶段2.pdf报告3.1MB8月10日 模型训练代码.zip代码8.2MB8月8日 参考文献.pdf论文1.8MB8月5日 评估结果.xlsx数据集420KB最小8月3日4 文件类型分布论文 2 个 / 数据集 2 个 / 报告 1 个 / 代码 1 个——论文数据集是科研项目最常见的 2 类文件。文件命名规范论文初稿_v3.docx含版本号 _v3/ 实验数据集_v2.csv含版本号 _v2——版本号 _v1/_v2/_v3是科研文件的标准命名Office 365/Google Docs 也用版本管理——版本管理是科研文件的标配。阶段2是报告命名规范——阶段1/2/3 报告是项目阶段的里程碑——阶段化产出是科研项目的流程。6 文件按日期倒序今天 → 昨天 → 8月10日 → 8月8日 → 8月5日 → 8月3日——最新文件在最上是文件列表的标准对比 App 22 记录按状态分组、App 23 文件按状态分组——App 24 按时间倒序。5.2 文件卡 4 元素每行 4 信息emoji 类型图标24sp——///按文件扩展名分类文件名14sp 深色maxLines(1)截断大小 日期11sp 灰——2.4MB · 今天类型标签11sp 靛蓝 浅靛底emoji 按文件类型——.docx→ /.csv→ /.pdf→ /.zip→ ——emoji 替代文件扩展名图标——demo 简化真实项目应用文件类型图标——**emoji 识别度足够**对一般用户友好。大小 日期用·分隔——两个次要信息紧凑展示一行 2 信息。类型标签靛蓝字 浅靛底 4vp 圆角——文件类型是科研文件的核心元数据——4 种类型 4 种业务论文/数据集/报告/代码。六、State 与文件管理数据Func2Tab 有1 个 StateactiveCat分类 0-4——1 个 State 驱动 Chip 视觉同系列其他 Chip。files: FileItem[]是private普通数组不上 State。假筛选——点击 Chip 只切activeCat不联动过滤——demo 简化真实项目应加filteredFiles()按type cats[activeCat]过滤。真实项目的文件上传后自动刷新State files: FileItem[] [...]; async uploadFile(file: FileItem) { // 上传到服务器 await uploadAPI(file); // 整体替换触发渲染 this.files [file, ...this.files]; }上传后整体替换数组——State 数组 整体替换 ArkUI 响应式数组的标准写法。七、虚线边框上传卡 vs 实线 按钮上传App 24 的 UploadCard 是**虚线边框 整卡可点击**——对比其他上传设计设计适用场景优势虚线边框整卡App 24工具型 App 轻量上传视觉突出、整卡可点实线 上传按钮复杂上传多文件/进度功能明确、按钮集中拖拽上传桌面端高效 浮动 按钮移动端高频随时上传虚线边框整卡是工具型 App的最佳轻量上传设计——虚线 待填充 整卡可点 简化且功能完整。真实科研文件管理的4 类上传场景论文初稿.docx实验数据.csv/.xlsx报告.pdf代码.zip/.py/.ipynb上传时按类型自动分类是进阶功能——上传 .docx 自动归论文、上传 .csv 自动归数据集——类型识别减少用户操作。八、文件大小与日期的科研文件特征App 24 的 6 文件大小420KB ~ 15.6MB——科研文件大小范围类型典型大小原因论文 (.docx/.pdf)1-5MB纯文字少量图报告 (.pdf)2-10MB文字图表代码 (.zip)1-50MB大量文件压缩数据集 (.csv/.xlsx)100KB-100MB行数决定评估结果.xlsx 420KB——比数据集小很多评估结果是聚合后的摘要数据——数据集 15.6MB是原始数据——大小反映数据规模。日期命名 版本号是科研文件的核心元数据——v1/v2/v3显示迭代历史、8月10日显示时间线——真实项目的文件版本管理应支持查看历史版本/回滚。九、文件管理与项目管理的数据流**项目首页→ 任务项目详情→ 文件文件管理**是科研管理的 3 大模块模块包含关系项目4 个项目卡片顶层组织任务5 任务每个项目 5 任务左右项目的执行项文件32 个文件按项目分任务/项目的产物项目 → 任务 → 文件的层级项目首页 ├─ 任务项目详情 └─ 文件文件管理真实项目应文件按项目分组——App 24 当前 6 文件硬编码不与 4 项目关联——真实项目文件列表应按项目过滤项目 A 的 6 个文件——文件归属于项目是真实的数据关系。十、文件管理的科研 4 类型 vs 办公 5 类型App 24 的文件分类论文/数据集/报告/代码是科研项目的 4 类——对比办公文档的 5 类科研 4 类App 24办公 5 类论文.docx/.pdf文档.docx数据集.csv/.xlsx表格.xlsx报告.pdf演示.pptx代码.zip/.py图片.png/.jpgPDF.pdf科研文件分类和办公文件分类的差异办公按文件格式分docx/xlsx/pptx/png/pdf科研按文件用途分论文/数据集/报告/代码用途 vs 格式是分类哲学的差异——科研关心这文件是做什么的论文/数据集、办公关心这文件是什么格式Word/Excel——业务导向 vs 工具导向。真实项目应按业务分类为主、格式分类为辅——用途分类 用户视角用户知道这是什么类型的文件、格式分类 系统视角系统按 MIME 类型分——App 24 的用途分类是用户友好设计。十一、版本管理与 Git LFSApp 24 的文件名带版本号_v3 / _v2——真实项目应支持版本管理系统文件版本管理的 3 个阶段本地版本App 24 当前——文件名加 _v1/_v2/_v3 后缀工具版本Git——commit hash 标识每个版本git v3.2.1平台版本Git LFS——大文件版本管理专门处理 100MB 文件科研文件的大文件挑战数据集常常 100MB不能直接用 Git代码常常多文件.zip 压缩论文版本多v1-v10 不断迭代Git LFSGit Large File Storage是科研/媒体项目的标准——大型文件不进 Git 主仓库、进 LFS 单独存储。App 24 简化为文件名 _v3——真实项目应集成版本历史/回滚——文件版本管理是科研项目的刚需。十二、虚线边框上传 vs 拖拽上传App 24 的虚线边框整卡可点是最简上传——对比其他上传设计设计适用优势虚线边框整卡App 24工具型轻量视觉突出拖拽上传桌面端高效浮动 按钮移动端高频随时上传 模态弹出大文件集中操作虚线整卡是移动端的轻量方案——移动端屏幕小、拖拽不便点击卡 选文件是最自然交互。真实科研项目应支持 3 种上传方式本地文件点击 →ohos.file.picker选择拍照上传 按钮 → 相机 API实验记录场景云盘同步☁️ 按钮 → OneDrive/Google Drive协作场景3 种上传 3 种使用场景——App 24 只支持 1 种是 demo 简化——真实项目应按用户需求扩展。十三、文件大小与科研数据规模App 24 的 6 文件大小420KB ~ 15.6MB——科研数据规模分级文件大小类型例子 1MB文字/小数据评估结果 420KB1-10MB普通文件论文初稿 2.4MB / 报告 3.1MB10-100MB大数据实验数据集 15.6MB100MB-1GB大数据集图像数据集/视频 1GB超大数据基因测序/卫星图像科研数据从 KB 到 TB跨越 9 个数量级——文件管理系统的扩展性小文件 1MB本地存储即可中文件 100MB云存储OSS/S3大文件 1TBHDFS/对象存储超大文件 1TB分布式存储科研数据规模是文件管理系统的核心挑战——App 24 的 6 文件 20MB只是最简场景——真实科研项目应支持 GB 文件的分片上传/断点续传/秒传。大文件上传的 3 个工程问题超时——上传 1GB 文件需要断点续传进度——用户需要看到上传进度条重试——网络中断需要自动重试App 24 的点击上传是 demo 简化——真实项目应集成分片上传 SDK 进度条 UI 重试机制。十四、总结App 24 文件管理页解析完毕。4 模块Header/Chip/UploadCard/FileList 6 文件 4 类型分类 虚线边框上传卡是核心组件。虚线边框整卡可点是工具型 App 的上传设计标准。论文数据集报告代码4 类文件是科研文件的标准分类。版本号命名 v1/v2/v3是科研文件的核心元数据。项目 → 任务 → 文件三层数据流是科研管理的完整层级。虚线 待填充是上传卡视觉约定。**科研 vs 办公分类哲学、Git LFS 大文件版本、大文件上传的 3 工程问题**是文件管理的进阶设计。