基于 Harmony 6.0 应用的简历制作与投递管理应用首页实现

前言

求职季最焦虑的事是简历投出去石沉大海——投了 100 份只有 3 个回复。一款好的简历应用要把"我的简历 / 投递记录 / 面试邀约 / AI 优化"四件事在一屏内全部铺到。Harmony 6.0 时代，简历类应用迎来了几个独特的能力红利——AI 助手能力优化简历内容、HMS Cloud 让简历多版本云端存档、PushKit 提供 HR 回复推送、HMS Wallet 让简历可一键扫码递交。本文用 Flutter 在 Harmony 6.0 上实现一个简历投递首页。

背景

简历类应用的视觉关键词是"专业、清晰、激励"——靛蓝色 #4338CA 配青色 #06B6D4 是这类应用的合适主色。本项目首页 5 个模块：渐变 Header（投递数 + 大新建简历按钮）、AI 优化建议、投递进度漏斗、面试邀约列表、简历模板推荐。

Flutter × Harmony 6.0 跨端开发介绍

Harmony 6.0 在简历类应用上的能力栈完整——AI 助手能力分析简历不足并给出优化建议、HMS Cloud 让简历多版本云端备份（针对不同岗位投不同版本）、PushKit 提供 HR 回复实时推送、HMS Wallet 让面试凭证落袋、CameraKit 让证书原件拍照存档。

开发核心代码

代码一：投递 Header

Widget _header() {
  return Container(
    padding: const EdgeInsets.all(20),
    decoration: BoxDecoration(
      gradient: const LinearGradient(
        colors: [_primary, Color(0xFF312E81)],
        begin: Alignment.topLeft, end: Alignment.bottomRight),
      borderRadius: BorderRadius.circular(24),
    ),
    child: Column(crossAxisAlignment: CrossAxisAlignment.start,
        children: [
      const Row(children: [
        Icon(Icons.description, color: Colors.white, size: 22),
        SizedBox(width: 8),
        Text('简历助手',
            style: TextStyle(color: Colors.white,
                fontSize: 18, fontWeight: FontWeight.w800)),
        Spacer(),
        Icon(Icons.cloud_done, color: Colors.white, size: 20),
      ]),
      const SizedBox(height: 14),
      const Row(crossAxisAlignment: CrossAxisAlignment.end,
          children: [
        Text('86',
            style: TextStyle(color: Colors.white,
                fontSize: 50, fontWeight: FontWeight.w900)),
        SizedBox(width: 6),
        Padding(padding: EdgeInsets.only(bottom: 10),
          child: Text('已投递 · 12 已邀面试',
              style: TextStyle(color: Colors.white,
                  fontSize: 14, fontWeight: FontWeight.w700))),
      ]),
      const SizedBox(height: 14),
      Container(width: double.infinity, height: 50,
        decoration: BoxDecoration(color: Colors.white,
            borderRadius: BorderRadius.circular(25)),
        child: const Center(child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.edit, color: _primary, size: 22),
            SizedBox(width: 6),
            Text('编辑我的简历',
                style: TextStyle(color: _primary,
                    fontSize: 16, fontWeight: FontWeight.w800)),
          ],
        )),
      ),
    ]),
  );
}

投递 Header 用「投递数量 + 当前状态 + 快捷投递按钮」构成求职应用的首屏核心信息。它的作用不是展示复杂数据，而是让用户一眼知道自己当前求职进度：投了多少、有哪些岗位在推进、下一步该继续投递还是优化简历。大字号数字配合主色渐变背景，会把「求职进度」变成可量化的目标。

从「投递 Header」的目标管理与焦虑缓解设计角度再补一段。求职过程天然伴随焦虑，Header 如果只显示失败和未读很容易让用户挫败，所以更适合显示「已投递 X 家 / 今日新增 X 家」这种行动型指标，强化「我正在推进」的正反馈。如果未来要扩展支持「按岗位方向统计」（前端、后端、产品、运营），可以在 Header 下方加 chip 切换栏。鸿蒙 6.0 的 PushKit 可以在 HR 查看简历、发起面试邀约时精准推送，让用户及时响应关键节点。

代码二：AI 优化建议

Widget _aiSuggest() {
  return Container(padding: const EdgeInsets.all(16),
    decoration: BoxDecoration(
      gradient: LinearGradient(colors: [
        _primary.withValues(alpha: 0.12),
        _accent.withValues(alpha: 0.12),
      ]),
      borderRadius: BorderRadius.circular(16)),
    child: Column(crossAxisAlignment: CrossAxisAlignment.start,
        children: [
      const Row(children: [
        Icon(Icons.auto_awesome, color: _primary, size: 20),
        SizedBox(width: 6),
        Text('AI 简历优化建议',
            style: TextStyle(color: _ink, fontSize: 14,
                fontWeight: FontWeight.w800)),
        Spacer(),
        Text('当前评分 · 78',
            style: TextStyle(color: _accent, fontSize: 12,
                fontWeight: FontWeight.w700)),
      ]),
      const SizedBox(height: 12),
      const Text(
          '建议 1：将"负责项目"改为"主导项目，提升 30% 性能"\n'
          '建议 2：技能栈缺少行业关键词，建议补充 "Kubernetes"\n'
          '建议 3：项目经验过短，建议补充技术细节',
          style: TextStyle(color: _ink, fontSize: 12, height: 1.6)),
    ]),
  );
}

AI 简历优化通过 AI 助手能力分析"简历内容 + 目标岗位 JD"，给出具体改进建议——比通用建议更精准。

从「AI 优化建议」的信息呈现与可执行性设计角度再补一段。简历优化最怕空泛建议，所以这张卡片必须把建议写成可执行动作，例如「把负责项目改为主导项目」「补充量化指标」「增加岗位关键词」。每条建议都应该能一键应用或复制，降低用户修改成本。如果未来要扩展支持「不同岗位版本管理」，可以把优化结果保存为多个简历版本。鸿蒙 6.0 的端侧 AI 让简历和 JD 的匹配分析在本地完成，避免敏感求职信息上传云端。

代码三：投递进度漏斗

Widget _funnel() {
  final stages = const [
    ['已投递', 86, 1.0, _primary],
    ['通过初筛', 42, 0.49, _accent],
    ['面试邀约', 12, 0.14, _amber],
    ['Offer', 3, 0.035, _green],
  ];
  return Container(padding: const EdgeInsets.all(16),
    decoration: BoxDecoration(color: _card,
        borderRadius: BorderRadius.circular(16)),
    child: Column(crossAxisAlignment: CrossAxisAlignment.start,
        children: [
      const Text('投递漏斗',
          style: TextStyle(color: _ink, fontSize: 14,
              fontWeight: FontWeight.w700)),
      const SizedBox(height: 14),
      ...stages.map((s) {
        final c = s[3] as Color;
        return Padding(padding: const EdgeInsets.only(bottom: 10),
          child: Row(children: [
            SizedBox(width: 64,
              child: Text(s[0] as String,
                  style: const TextStyle(color: _ink,
                      fontSize: 12,
                      fontWeight: FontWeight.w700))),
            Expanded(child: Stack(children: [
              Container(height: 28,
                decoration: BoxDecoration(
                  color: c.withValues(alpha: 0.12),
                  borderRadius: BorderRadius.circular(6)),
              ),
              FractionallySizedBox(widthFactor: s[2] as double,
                child: Container(height: 28,
                  decoration: BoxDecoration(color: c,
                      borderRadius: BorderRadius.circular(6)),
                  alignment: Alignment.centerLeft,
                  padding: const EdgeInsets.only(left: 8),
                  child: Text('${s[1]}',
                      style: const TextStyle(color: Colors.white,
                          fontSize: 12,
                          fontWeight: FontWeight.w800))),
              ),
            ])),
          ]),
        );
      }),
    ]),
  );
}

漏斗数据让用户看到每一阶段的转化率——从 86 投递到 3 个 Offer，整体转化 3.5%。这种数据可视化让用户知道自己处于求职哪个阶段。

从「投递进度漏斗」的求职策略与数据复盘设计角度再补一段。漏斗图的价值不是展示漂亮图形，而是帮助用户判断问题卡在哪一层：投递多但初筛少，说明简历关键词或岗位匹配度有问题；初筛多但面试少，说明简历亮点不足；面试多但 Offer 少，说明表达或业务理解需要加强。如果未来要扩展支持「按岗位方向拆分漏斗」，可以让前端、后端、产品分别生成转化率。鸿蒙 6.0 的端侧 AI 可以基于漏斗薄弱环节给出下一步行动建议。

心得

简历类 App 的视觉灵魂是"专业 + 激励"——靛蓝色给商务专业感，AI 评分给即时反馈。开发时最容易犯的错是把简历模板做得太花哨。我的策略是突出 AI 优化和投递漏斗这两个差异化功能。从能力扩展角度，简历应用最值得在鸿蒙端打造的是"AI 助手简历优化 + HMS Cloud 多版本管理 + PushKit HR 回复 + HMS Wallet 简历快速递交"四件套。

总结

本篇实现了 Harmony 6.0 端的简历投递首页，5 个模块、纯 UI、零依赖、约 340 行代码。第三十六组的"面试模拟 / 职场人脉 / 简历投递"三个迥异的求职场景共用同一份骨架。从扩展角度建议生产业务里：把简历优化接入 AI 助手；把多版本接入 HMS Cloud；把 HR 回复接入 PushKit；把"投递数"做成 FormExtensionAbility 桌面卡片；把简历快速递交接入 HMS Wallet。下一篇进入第三十七组——音乐节奏 / 歌词创作 / 音乐画像。