鸿蒙原生应用 HarmonyOS ArkTS：科研首页的紧凑布局与项目进度卡

App 24「科研项目管理」首页（HomeTab），主题色 #4338CA 靛蓝（indigo），4 个 Tab 分别为首页（📑）、项目（🔬）、文件（📁）、我的（👤）。首页采用紧凑布局——3 栏统计概览（负责项目 4/任务待办 18/文件数 32）+ 科研项目 SectionTitle + 4 张项目卡（52×52 emoji + 名称 + 团队 · 状态 + Progress 进度条 + 百分比）。本篇基于 24-research-mgmt/entry/src/main/ets/pages/HomeTab.ets（约 110 行）逐段拆解，附 4 张实机截图。

一、整体结构：Header + 3 栏统计 + 4 项目卡

App 24 首页是"科研管理"的展示页——3 个 @Builder 块：

build() {
  Column() {
    this.Header()
    Scroll() {
      Column({ space: 14 }) {
        this.SummaryCard()
        this.SectionTitle('科研项目')
        this.ProjectList()
      }
      .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)
}

3 块结构：

1. Header — "科研管理"标题
2. SummaryCard — 3 栏统计
3. SectionTitle('科研项目') + ProjectList — 4 张项目卡

主题色 #4338CA 靛蓝——系列第一个靛蓝（indigo）——靛蓝是"科研/学术/专业"的传统色（学术帽/学位服/期刊封面都用靛蓝）——"靛蓝 = 科研/学术/严肃"。

项目源码开源：https://gitee.com/codenestFlow/HarmonyOSHub

二、Header

Header 是"科研管理"单行（与 App 13/17 简版 Header 同款）：

@Builder Header() {
  Column() {
    Text('科研管理')
      .fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.text)
      .width('100%')
      .padding({ top: this.safeTop + 10, left: D.pad, right: D.pad, bottom: 12 })
  }
  .width('100%').backgroundColor(C.card)
}

"科研管理"是产品名（不是分类名）——"工具型应用 Header 用产品名而不是分类名"（如"记账本""天气""计算器"是产品名）。

无 Slogan——App 24 是工具型（科研管理），不需要 Slogan（用户来"管项目"不是来"听故事"）——"工具型 Header = 产品名 + 副标题或 Slogan 可省"。

三、SummaryCard：3 栏统计（项目数/任务/文件）

SummaryCard 是 3 栏彩色统计（与 App 22/23 风格同款，但"项目维度"）：

@Builder SummaryCard() {
  Row({ space: 10 }) {
    Column({ space: 4 }) {
      Text('4').fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.primary)
      Text('负责项目').fontSize(11).fontColor(C.textDim)
    }.layoutWeight(1).padding({ top: 14, bottom: 14 })
    .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
    Column({ space: 4 }) {
      Text('18').fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.ok)
      Text('任务待办').fontSize(11).fontColor(C.textDim)
    }.layoutWeight(1).padding({ top: 14, bottom: 14 })
    .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
    Column({ space: 4 }) {
      Text('32').fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.warn)
      Text('文件数').fontSize(11).fontColor(C.textDim)
    }.layoutWeight(1).padding({ top: 14, bottom: 14 })
    .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
  }.width('100%')
}

3 栏数据：

数字	颜色	标签	含义
4	靛蓝 C.primary	负责项目	4 个项目（与下方项目卡数量一致 ✓）
18	绿 C.ok	任务待办	18 个待办任务（App 24 我的页"任务记录 36"是 36 = 18+18 已完成）
32	橙 C.warn	文件数	32 个文件（与 Func2Tab 6 文件不直接对应——6 是首页展示、32 是总数）

3 栏彩色：

• 项目（靛蓝）= 项目维度（我有多少项目）
• 任务（绿）= 任务维度（我有多少任务）
• 文件（橙）= 文件维度（我有多少文件）

"项目 + 任务 + 文件"是科研管理的 3 大要素——3 栏统计覆盖"科研管理"的核心维度。

数据一致性：4 负责项目 = 下方 4 张项目卡 ✓——"统计与列表"跨组件一致。

"18 待办 vs 36 总任务"是真实项目应分"待办/已完成"两栏——App 24 简化（只展示待办）——"任务双栏（待办/已完成）"是真实项目的细节。

四、SectionTitle：参数化

SectionTitle 是参数化标题：

@Builder SectionTitle(title: string) {
  Row() {
    Text(title).fontSize(16).fontWeight(FontWeight.Bold).fontColor(C.text)
    Blank()
    Text('新建 >').fontSize(12).fontColor(C.primary)
  }.width('100%')
}

"科研项目 / 新建 >"——"右侧'新建 >'是创建入口"（对比 App 22 首页"更多 >"是浏览更多入口）——"任务型应用的 SectionTitle 右侧 = 操作入口（新建/添加/上传）"。

Blank() 撑开标题与右侧"新建"——C.primary 靛蓝高亮"新建"入口。

五、ProjectList：4 张项目进度卡（本页核心）

ProjectList 是 4 张项目卡（emoji + 名称 + 团队/状态 + 进度条 + 百分比）：

@Builder ProjectList() {
  Column({ space: 12 }) {
    ForEach(this.projects, (p: Project) => {
      Column({ space: 10 }) {
        Row({ space: 12 }) {
          Row() { Text(p.emoji).fontSize(28) }
          .width(52).height(52).backgroundColor(C.primarySoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center)
          Column({ space: 4 }) {
            Text(p.name).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text).maxLines(1)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
            Text(p.team + ' · ' + p.status).fontSize(12).fontColor(C.textDim)
          }.alignItems(HorizontalAlign.Start).layoutWeight(1)
        }.width('100%')
        Row({ space: 8 }) {
          Progress({ value: p.progress, total: 100 }).color(C.primary).layoutWeight(1)
          Text(p.progress + '%').fontSize(12).fontColor(C.primary)
        }.width('100%')
      }
      .width('100%').padding(14).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke })
      .onClick(() => { promptAction.showToast({ message: p.name }); })
    }, (p: Project) => p.id.toString())
  }.width('100%')
}

5.1 4 个科研项目的数据

private projects: Project[] = [
  { id: 1, emoji: '🔬', name: '基于深度学习的图像识别研究', team: '5 人', progress: 65, status: '进行中' },
  { id: 2, emoji: '📊', name: '校园交通流量分析系统', team: '4 人', progress: 40, status: '进行中' },
  { id: 3, emoji: '🧬', name: '基因序列比对算法优化', team: '6 人', progress: 85, status: '结题中' },
  { id: 4, emoji: '📱', name: '校园健康监测 APP 开发', team: '3 人', progress: 20, status: '启动期' }
];

4 个科研项目覆盖"科研 4 大方向"：

方向	项目	团队	状态	进度
🔬 AI	深度学习图像识别	5 人	进行中	65%
📊 数据	校园交通流量分析	4 人	进行中	40%
🧬 生物信息	基因序列比对	6 人	结题中	85%
📱 移动开发	健康监测 APP	3 人	启动期	20%

4 个项目的"4 种状态"：

• 进行中（2 个，65%/40%）—— 项目主体阶段
• 结题中（1 个，85%）—— 项目收尾阶段（接近完成）
• 启动期（1 个，20%）—— 项目初始阶段（刚开始）

"进行中 + 结题中 + 启动期"是科研项目的 3 阶段——"3 状态"比 App 22 投票/23 实验室的"2 状态"更细分——"项目阶段比设备状态更复杂"（项目有生命周期）。

5.2 项目进度条（靛蓝）

Row({ space: 8 }) {
  Progress({ value: p.progress, total: 100 }).color(C.primary).layoutWeight(1)
  Text(p.progress + '%').fontSize(12).fontColor(C.primary)
}.width('100%')

Progress({ value: p.progress, total: 100 }) 靛蓝进度条——4 个项目进度 65/40/85/20 视觉对比明显（靛蓝条长度差）——"进度条 = 项目完成度的视觉表达"。

Text(p.progress + '%') 12sp 靛蓝——"百分比 + 进度条"双通道（色弱用户能读数字）。

5.3 名称截断 + 团队/状态

Text(p.name).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text).maxLines(1)
  .textOverflow({ overflow: TextOverflow.Ellipsis })
Text(p.team + ' · ' + p.status).fontSize(12).fontColor(C.textDim)

"基于深度学习的图像识别研究" 12 个汉字在项目卡宽度内放不下——maxLines(1) + Ellipsis 截断为"基于深度学习的图像识别…"——"长项目名 + 单行截断"是项目卡的标准。

"5 人 · 进行中" —— 团队规模 + 状态——"项目卡副信息"——· 分隔符是中文常见风格。

六、@State 与"科研管理"数据模型

HomeTab 只有 0 个 @State（无状态字段，所有数据 private 不可变）——系列第 8 个"0 @State 首页"（首页 0 状态是"纯展示"型 App 的特点）。

App 24 4 Tab 的 @State 分布：

• 首页：0
• 项目：1（@State tasks 任务数组，驱动任务看板完成态切换）
• 文件：1（activeCat 分类 Chip）
• 我的：0

App 24 是"科研管理 0 状态"型应用——"状态"全部以数据字段形式存在（task.done / project.status）——真实项目应把这些字段变为 @State 联动 UI——"0 状态首页 = 演示数据不可变"。

七、"科研项目"4 状态与项目生命周期

App 24 的 3 种项目状态（进行中/结题中/启动期）——真实项目生命周期：

申报期（写申请书、待立项）
  → 启动期（刚立项，团队组建）
  → 进行期（主要研究阶段）
  → 结题期（写结题报告、准备验收）
  → 已结题（验收通过、归档）

5 状态映射（App 24 简化 3 状态）：

• 启动期（App 24 20%）← 申报期（立项前）
• 进行中（App 24 65%/40%）← 进行期（主体）
• 结题中（App 24 85%）← 结题期
• （App 24 无）已结题
• （App 24 无）已延期

"3 状态 vs 5 状态"——App 24 简化了 2 个状态（已结题/已延期）——真实项目应支持完整 5 状态。

"项目状态"与"项目进度"双维度：

• 状态（status）：定性——"进行中/结题中/启动期"——决定项目在哪个阶段
• 进度（progress）：定量——"65%/40%"——决定项目完成度

"项目状态 + 进度"是科研管理的双指标——"状态看阶段、进度看完成度"——真实项目状态决定能做什么操作（进行中可改任务、结题中可写结题报告、已结题只读）。

八、"项目" vs "设备" vs "场地" 的 3 状态对比

App	对象	状态数	状态色
App 14 运动	场地	2	空闲绿/已约满红
App 22 投票	投票	3	进行中绿/即将结束橙/热门红
App 23 实验室	设备	3	空闲绿/使用中橙/维护中红
App 24 科研	项目	3	进行中/结题中/启动期

3 状态 App 共 3 个（22/23/24）——"3 状态 = 业务对象的核心生命周期"——投票有"进行/即将结束/热门"、设备有"空闲/使用/维护"、项目有"启动/进行/结题"。

"3 状态"是业务对象的"开始 + 主体 + 结束"3 阶段——任何业务对象都有生命周期——3 状态 = 1 开始 + 1 主体 + 1 结束——"3 状态是自然分类"。

九、首页与项目页的"项目数据流"

首页 4 个项目（项目列表）→ 项目页 5 团队成员 + 5 任务（项目详情）——"首页列表 → 项目详情"是分层数据流：

项目列表（首页）：

• 4 个项目
• 每个项目：名称/团队/状态/进度

项目详情（项目页）：

• 1 个项目（默认展示第一个"基于深度学习的图像识别研究"）
• 5 个团队成员（每个含角色/任务数）
• 5 个任务（每个含标题/负责人/优先级/完成态）

"列表 → 详情"是经典 App 信息架构——列表展示"概览"、详情展示"细节"——"概览 + 细节"是信息架构的两层。

真实项目应"点击项目 → 显示该项目详情"——App 24 当前项目页硬编码"基于深度学习的图像识别研究"（永远显示第一个项目）——**"路由传参"或"@Prop item"**让详情动态化。

十、"项目卡"与系列其他主列表的对比

App 24 首页的 4 张项目卡与系列其他 App 的主列表卡对比：

App	主列表	信息量	视觉锚点
13 音乐	推荐项目	emoji+标题+标签+进度	标签
14 运动	场地	星级+时间+进度+按钮	进度条
15 环保	分类指南	星级+掌握度+学测	星级
16 商城	商品	划线价+库存+缺货态	价格
18 社交	同好卡	匹配度环形+在线状态	匹配度
19 摄影	作品卡	封面+点赞+完成度	封面+❤
20 阅读	书卡	竖版封+页码条	竖版封
21 问卷	问卷卡	emoji+标题+状态	状态色
22 投票	投票卡	emoji+状态+剩余	状态色+时间
23 实验室	设备卡	emoji+名称+规格+状态	emoji+状态
24 科研	项目卡	emoji+名称+团队/状态+进度	进度条

App 24 项目卡的"科研特色"：

• 唯一带"团队规模"（"5 人"）的卡片
• 唯一带"科研状态"（"进行中/结题中/启动期"）的卡片
• 唯一"状态+进度"双信息卡片

"项目 = 状态 + 进度"是科研管理特色——设备/场地/商品只有"可用/不可用"二态，项目有"3 阶段状态 + 完成度进度"——"项目复杂度 > 设备"是科研管理比 App 23 实验室复杂的根本原因。

十一、列表 → 详情 → 看板 三层信息架构

App 24 的 3 个 Tab 体现"项目管理"的 3 层信息架构：

首页（项目列表）—— 概览层（4 项目 + 进度）
  ↓
项目详情（任务看板）—— 协作层（5 团队 + 5 任务）
  ↓
文件管理（文件列表）—— 资源层（6 文件 + 4 类型）

"概览 → 协作 → 资源"是项目管理的 3 层金字塔：

• 概览层（首页）——"项目做多少"（进度条 + 状态）
• 协作层（项目详情）——"谁在做什么"（团队 + 任务）
• 资源层（文件管理）——"产出什么"（文件 + 类型）

"3 层金字塔"是项目管理的标准架构——任何项目管理类 App（研发/营销/活动）都按 3 层组织——读者做项目管理工具时，先设计 3 层信息架构，再设计每层 UI。

十二、总结

App 24 首页解析完毕。3 栏统计（项目/任务/文件）+ 4 张项目进度卡（3 种状态）是核心组件。"项目生命周期 = 3 状态（启动/进行/结题）"是科研管理的核心。"项目状态 + 进度"双维度和**"列表 → 详情"信息架构是项目管理的标准。"靛蓝 = 科研/学术"的主题色映射让 App 调性专业。"0 状态首页 = 纯展示"是工具型应用的特点。"概览 → 协作 → 资源"3 层金字塔**是项目管理的标准架构。