AI 周报卡片：智能生成内容的 UI 呈现

前言

"海风日记"的回顾页中，AI 周报卡片以智能生成内容的形式，为用户提供每周写作总结和情绪分析。虽然目前是 Mock 数据，但 UI 设计为后续接入 AI 能力预留了空间。

本文将从源码出发，深入讲解 AI 周报卡片的 UI 设计。

一、AI 周报卡片

1.1 源码

typescript 复制代码

Column({ space: 12 }) {
  Row({ space: 8 }) {
    Text('✨').fontSize(16)
    Text('海风 AI 周报')
      .fontSize(15).fontColor(COLOR_TEXT_MAIN).fontWeight(FontWeight.Bold)
    Blank()
    Text('智能生成').fontSize(11).fontColor(COLOR_AMBER)
      .backgroundColor('rgba(245,166,35,0.10)').borderRadius(8)
      .padding({ left: 8, right: 8, top: 2, bottom: 2 })
  }
  .width('100%')

  Text('这周你一共写了 7 篇日记，整体情绪偏积极，开心占到了 40%。周四那天海边散步的记录特别温暖，相比上周你的写作字数增加了 25%，很棒！继续保持这份记录生活的习惯吧 🌊')
    .fontSize(14).fontColor(COLOR_TEXT_MAIN).lineHeight(24)
}

二、卡片布局

复制代码

┌──────────────────────────────────┐
│  ✨ 海风 AI 周报    [智能生成]   │  ← 标题行 + 标签
│                                  │
│  这周你一共写了 7 篇日记...     │  ← AI 生成内容
│  继续保持这份记录生活的习惯吧 🌊  │
└──────────────────────────────────┘

三、标签样式

typescript 复制代码

Text('智能生成').fontSize(11).fontColor(COLOR_AMBER)
  .backgroundColor('rgba(245,166,35,0.10)')
  .borderRadius(8)
  .padding({ left: 8, right: 8, top: 2, bottom: 2 })

四、卡片样式

typescript 复制代码

.padding(PAGE_PADDING)
.backgroundColor(COLOR_CARD_BG)
.borderRadius(CARD_RADIUS)
.shadow({ radius: 8, color: 'rgba(160,120,60,0.08)', offsetY: 2 })
.margin({ left: PAGE_PADDING, right: PAGE_PADDING })

五、常见问题

5.1 AI 内容显示不全

问题：AI 生成的文字过长，超出卡片区域。

解决方案 ：使用 maxLines 和 textOverflow 控制文本溢出。

总结

本文通过"海风日记"的 AI 周报卡片，深入讲解了智能生成内容的 UI 呈现：

标题行：emoji + 标题 + 标签
内容区域：多行文本
标签样式：品牌色药丸标签
卡片样式：圆角 + 阴影

下一篇文章将深入讲解 日记时间轴组件，敬请期待。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

Column 组件文档
Text 组件文档
Shadow 属性文档
海风日记项目源码
$HarmonyOS 开发者官网$ (https://atomgit.com/openharmony/docs
开源鸿蒙跨平台社区