「鸿蒙智能体实战记录 10」节气知识展示卡片开发与工作流绑定实现

📘 鸿蒙智能体实战记录 10

节气知识展示卡片开发与工作流绑定实现

一、本篇目标

完成以下内容：

创建节气知识展示卡片
定义运行变量（含默认值）
构建信息分区型排版结构
绑定节气工作流字段
配置快捷指令并打通触发链路
验证预览与运行效果

二、创建卡片

进入：

复制代码

卡片 → 新建卡片

填写：

复制代码

卡片名称：节气知识展示
卡片描述：用于展示节气名称、时间、含义、习俗与养生建议

保存进入编辑页面。

📷 图 1：新建卡片界面

三、添加运行变量

进入：

复制代码

变量 → 添加变量

3.1 term_name

复制代码

变量名称：term_name
变量类型：String
默认值：立春
变量描述：节气名称
绑定运行数据：开启

3.2 term_date

复制代码

变量名称：term_date
变量类型：String
默认值：2月3日至2月5日
变量描述：节气时间范围
绑定运行数据：开启

3.3 term_meaning

复制代码

变量名称：term_meaning
变量类型：String
默认值：立春是二十四节气中的第一个节气，标志着春天的开始，万物复苏。
变量描述：节气含义
绑定运行数据：开启

3.4 term_customs

复制代码

变量名称：term_customs
变量类型：String
默认值：迎春仪式、吃春饼、贴春联等习俗。
变量描述：节气习俗
绑定运行数据：开启

3.5 term_health

复制代码

变量名称：term_health
变量类型：String
默认值：注意保暖，饮食清淡，适量运动，增强体质。
变量描述：养生建议
绑定运行数据：开启

完成后共 5 个变量。

📷 图 2：变量列表界面

四、整体结构搭建

复制代码

Root
 └── 纵向容器（主背景）
      ├── 横向容器（标题区）
      ├── 横向容器（时间区）
      ├── 纵向容器（含义区）
      ├── 纵向容器（习俗区）
      └── 纵向容器（养生区）

📷 图 3：结构树界面

五、主背景容器配置

添加纵向容器：

yaml 复制代码

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

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

添加横向容器：

yaml 复制代码

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

内部组件：

固定文本：

yaml 复制代码

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

变量文本：

yaml 复制代码

文本内容: "{{term_name}}"
字重: 700
字体大小: 22
文字颜色: #1f7a4d

七、时间区域（横向容器）

添加横向容器：

yaml 复制代码

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

内部组件：

固定文本：

yaml 复制代码

文本内容: "🗓"
字重: 400
字体大小: 11
右外边距: 8

变量文本：

yaml 复制代码

文本内容: "{{term_date}}"
字重: 400
字体大小: 11
文字颜色: #6b7280

八、含义区块（纵向容器）

yaml 复制代码

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

标题：

yaml 复制代码

文本内容: "📌 含义由来"
字重: 600
字体大小: 15
文字颜色: #1f7a4d
下外边距: 6

内容：

yaml 复制代码

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

九、习俗区块（纵向容器）

yaml 复制代码

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

标题：

yaml 复制代码

文本内容: "🧧 传统习俗"
字重: 600
字体大小: 15
文字颜色: #1f7a4d
下外边距: 6

内容：

yaml 复制代码

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

十、养生区块（纵向容器）

yaml 复制代码

背景色: #ffffff
内边距: 16
圆角: 16

标题：

yaml 复制代码

文本内容: "🥣 养生建议"
字重: 600
字体大小: 15
文字颜色: #1f7a4d
下外边距: 6

内容：

yaml 复制代码

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

📷 图 4：区块组件配置界面

十一、绑定工作流与字段映射

进入：

复制代码

编排 → 工作流

选择：

复制代码

workflow_solar_term_query

绑定卡片：

复制代码

节气知识展示

映射关系：

工作流字段	卡片变量
term_name	term_name
term_date	term_date
term_meaning	term_meaning
term_customs	term_customs
term_health	term_health

📷 图 5：字段映射界面

十二、添加快捷指令

进入：

复制代码

编排 → 快捷指令

新增：

复制代码

快捷指令文案：节气查询
位置：底部
类型：指令发送型

指令内容：

复制代码

介绍一下立春

十三、运行测试

进入智能体预览。

验证：

点击快捷指令可触发工作流
返回结构化数据
卡片完整展示五个字段
无空字段、无额外文本

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

十四、本篇完成内容

创建节气知识展示卡片
定义 5 个运行变量并设置默认值
构建信息分区型结构
完成工作流绑定与字段映射
配置快捷指令
验证完整触发与展示效果

节气知识能力完成从生成到展示的闭环。