未读提示

场景与目标

• 目标：在 AI 旅行规划应用中实现“未读消息提示”功能。当 AI 完成行程规划后，前端会自动显示未读数量，并支持用户点击确认后消除提示。
• 适用场景：异步任务处理通知、系统消息提醒、订单状态更新提示。
• 核心逻辑：
  1. 前端显示：使用条件式容器，通过聚合计算统计当前用户下 is_completed 为真且 is_read 为假的记录数。
  2. 交互更新：通过按钮触发更新数据行为，将符合条件的记录状态批量修改为已读。

前置要求

本教程为AI旅行规划系列的第 3 部分。请确保你已完成 [第一篇：API与Agent配置] 和 [第二篇：数据循环存储] 的核心业务流与列表展示功能。

实现步骤

数据存储

数据模型

详见总览中数据存储部分。

UI 构建与交互

• 组件树 (Component Tree):

  • 条件式容器 (提示区域)
    • 状态：已读
      • 文本：(空或默认欢迎语)
    • 状态：未读
      • 文本：显示未读数量
      • 按钮：点击确认已读
  • 列表 (计划列表)：订阅 trip 数据表，展示生成的详细内容。

1. 配置未读提示的显示逻辑

我们需要控制条件式容器在不同数据状态下的显示切换。

1. 选择组件：在页面视图或大纲树中选中条件式容器。
2. 配置“已读”状态：进入条件设置，添加“数据计算”条件。
   • 数据源：当前用户 -> 关联的 trip 列表。
   • 聚合方式：数量 (Count)。
   • 过滤条件：设置 is_completed 等于 真 且 is_read 等于 假。
   • 显示逻辑：当上述符合条件的数量 等于 0 时，条件式容器切换至“已读”状态（隐藏或显示默认信息）。

3. 配置“未读”状态：
   • 使用与上方相同的聚合计算逻辑。
   • 显示逻辑：当符合条件的行程数量 大于 0 时，条件式容器切换至“未读”状态。

2. 绑定未读数量文本

为了直观看到有多少条新行程，可以将统计数值动态绑定到 UI。

1. 选择组件：选中“未读”状态下的文本组件。
2. 绑定数据：在右侧面板的内容属性中选择动态获取。
3. 数据路径：当前用户 -> trip 列表 (过滤条件：is_completed=真, is_read=假) -> 数量。
4. 格式：可在动态数据外包裹静态文本，例如 未读: {数量}。

3. 配置“一键已读”交互行为

当用户点击“点击确认”按钮时，系统应批量更新数据状态并自动收起提示。

1. 添加行为：选中“点击确认”按钮，进入行为面板，添加 点击时 触发的动作。
2. 更新数据：选择目标表为 trip。
3. 数据过滤：
   • account_id 等于 当前用户.id。
   • is_read 等于 假。
4. 更新字段：将 is_read 字段设为 True (真)。

5. 成功时回调 (按钮：更新trip表)：

   • 刷新当前用户数据：确保前端的统计数值基于最新数据立即发生变化。

6. 成功时回调 (计划列表：订阅)：

   • 刷新当前用户数据：选定页面外层的计划列表组件，为其增加一个 成功时 触发的“刷新当前用户数据”动作，保证数据状态全局同步。

4. 功能验证

步骤 1：处理历史未读记录

• 操作：上一次演示中创建了一条状态为已完成且未读的记录。此时预览页面应显示“未读数量 1”。点击“点击确认”按钮。
• 预期结果：系统修改对应数据为已读。由于未读数量归零，条件式容器因不满足显示条件而自动切换回“已读”状态。

步骤 2：模拟新行程生成触发机制

• 操作：输入一组全新的旅行需求，点击“开始生成”。
• 预期结果：后台异步行为流开始运转，AI 开始规划。当处理完毕、新数据成功存入数据库后，前端列表订阅到新增记录，此时条件式容器会自动侦测到未读数据并切换至“未读”状态。

步骤 3：数据库状态确认

• 操作：切回底层的数据库管理界面，查看 trip 数据表。
• 预期结果：验证 is_read 字段布尔值与前端交互一致。