「鸿蒙智能体实战记录 11」年俗文化展示卡片开发与多段内容结构化呈现实现

📘 鸿蒙智能体实战记录 11

年俗文化展示卡片开发与多段内容结构化呈现实现

一、本篇目标

完成以下内容：

创建年俗文化展示卡片
定义多段内容变量（适配工作流输出）
构建分段叙述型排版结构
绑定年俗工作流字段
配置展示逻辑与信息层级
验证整体展示效果

二、创建卡片

进入：

复制代码

卡片 → 新建卡片

填写：

复制代码

卡片名称：年俗文化展示
卡片描述：用于展示年俗名称及其历史、寓意与演变等信息

保存进入编辑页面。

📷 图 1：新建卡片界面

三、添加运行变量（按实际结构）

进入：

复制代码

变量 → 添加变量

依次添加：

3.1 custom_title

复制代码

变量名称：custom_title
变量类型：String
默认值：贴春联
变量描述：年俗名称
绑定运行数据：开启

3.2 custom_origin

复制代码

变量名称：custom_origin
变量类型：String
默认值：贴春联起源于宋代，由桃符演变而来
变量描述：起源历史
绑定运行数据：开启

3.3 custom_meaning

复制代码

变量名称：custom_meaning
变量类型：String
默认值：寓意辞旧迎新、祈福纳吉
变量描述：文化寓意
绑定运行数据：开启

3.4 custom_tradition

复制代码

变量名称：custom_tradition
变量类型：String
默认值：春节前张贴春联迎新年
变量描述：传统做法
绑定运行数据：开启

3.5 custom_modern

复制代码

变量名称：custom_modern
变量类型：String
默认值：出现电子春联、创意春联等形式
变量描述：现代演变
绑定运行数据：开启

3.6 custom_story

复制代码

变量名称：custom_story
变量类型：String
默认值：传说"年"兽惧怕红色与声响
变量描述：故事传说
绑定运行数据：开启

📷 图 2：变量列表界面

四、整体结构搭建（按真实结构树）

复制代码

Root
 └── 纵向容器（主背景）
      ├── 横向容器（标题区）
      ├── 纵向容器（起源区）
      ├── 纵向容器（寓意区）
      ├── 纵向容器（传统区）
      ├── 纵向容器（现代区）
      └── 纵向容器（故事区）

📷 图 3：结构树界面

五、主背景容器配置

yaml 复制代码

背景色: #e9e2d6
内边距: 20
圆角: 24

六、标题区域（横向容器）

yaml 复制代码

下外边距: 16
对齐方式: 居中

固定图标：

yaml 复制代码

文本内容: "🏮"
字重: 700
字体大小: 22
右外边距: 8

变量文本：

yaml 复制代码

文本内容: "{{custom_title}}"
字重: 700
字体大小: 22
文字颜色: #9a3412

七、信息区块统一样式

所有内容区块统一：

yaml 复制代码

背景色: #f3f4f6
内边距: 16
下外边距: 16
圆角: 16

八、各区块组件配置

8.1 起源区块

标题：

yaml 复制代码

文本内容: "📜 起源历史"
字重: 600
字体大小: 16
文字颜色: #9a3412
下外边距: 6

内容：

yaml 复制代码

文本内容: "{{custom_origin}}"
字重: 400
字体大小: 14
文字颜色: #374151

8.2 文化寓意区块

标题：

yaml 复制代码

文本内容: "✨ 文化寓意"
字重: 600
字体大小: 16
文字颜色: #9a3412
下外边距: 6

内容：

yaml 复制代码

文本内容: "{{custom_meaning}}"
字重: 400
字体大小: 14
文字颜色: #374151

8.3 传统做法区块

标题：

yaml 复制代码

文本内容: "🧧 传统做法"
字重: 600
字体大小: 16
文字颜色: #9a3412
下外边距: 6

内容：

yaml 复制代码

文本内容: "{{custom_tradition}}"
字重: 400
字体大小: 14
文字颜色: #374151

8.4 现代演变区块

标题：

yaml 复制代码

文本内容: "🪄 现代演变"
字重: 600
字体大小: 16
文字颜色: #9a3412
下外边距: 6

内容：

yaml 复制代码

文本内容: "{{custom_modern}}"
字重: 400
字体大小: 14
文字颜色: #374151

8.5 故事传说区块

标题：

yaml 复制代码

文本内容: "📖 故事传说"
字重: 600
字体大小: 16
文字颜色: #9a3412
下外边距: 6

内容：

yaml 复制代码

文本内容: "{{custom_story}}"
字重: 400
字体大小: 14
文字颜色: #374151

📷 图 4：区块配置界面

九、绑定工作流与字段映射

进入：

复制代码

编排 → 工作流

选择：

复制代码

workflow_custom_culture

绑定卡片：

复制代码

年俗文化展示

映射关系：

工作流字段	卡片变量
custom_title	custom_title
custom_origin	custom_origin
custom_meaning	custom_meaning
custom_tradition	custom_tradition
custom_modern	custom_modern
custom_story	custom_story

📷 图 5：字段映射界面

十、添加快捷指令

进入：

复制代码

编排 → 快捷指令

新增：

复制代码

快捷指令文案：年俗解读
位置：底部
类型：指令发送型

指令内容：

复制代码

介绍一下贴春联的文化意义

十一、运行测试

进入智能体预览。

验证：

快捷指令可触发工作流
返回多段结构化内容
各区块完整展示
信息层级清晰
无字段缺失

📷 图 6：最终运行效果界面

十二、本篇完成内容

创建年俗文化展示卡片
定义 6 个结构化变量
构建多区块叙述结构
完成工作流字段映射
配置快捷指令
验证完整展示效果

年俗文化能力完成展示层实现。