- Agent 原型设计方案 (v1.5)
版本：v1.5 (简化 MVP 场景交互) 文档用途：定义 Agent 在飞书小程序 Chatbox 中的视觉交互规范。 适用端：飞书移动端 & PC 端（自适应卡片/桌面端模拟手机框）。
1. 交互框架 (Interaction Framework)
- 载体：飞书企业自建应用 (Bot/小程序)。
- 视觉风格：
- 配色：科技蓝 (
#184073->#0d2542渐变) 作为 Header 主色调，体现稳重与科技感。 - 布局：桌面端采用 375px × 812px 手机仿真外框，移动端全屏自适应。
- 导航栏：复刻飞书小程序原生导航栏 (高度 64px)，包含胶囊按钮 (Capsule Button) 与沉浸式状态栏。
- 配色：科技蓝 (
- 核心隐喻：基于 RAG 的智能问答助手 (Chatbox)，兼具指令执行能力。
2. 界面流程设计 (UI Flow)
2.1 界面一：初始态 (Initial State)
场景：用户打开应用。界面保持极简，聚焦于高频快捷入口。
text
+-------------------------------------------+
| [Logo] 智能助手 [••• | ◎] | <-- 飞书胶囊按钮
+-------------------------------------------+
| |
| [ Bot Logo ] |
| Chery Intelligent Assistant |
| |
| [ 猜你想问 ] |
| -------------------- |
| [? 帮我预定一个明天的会议室 ] |
| [? 帮我预定明天下午2点的A-101 ] |
| [? 查看本月企业能耗数据 ] |
| [? 打开305会议室的灯 ] |
| |
+-------------------------------------------+
| [ ⌨️ | 请输入您的需求... | 🎙️ ] |
+-------------------------------------------+- 实现细节：
- Header：深空蓝渐变背景，白色文字，右侧标准胶囊菜单。
- Body：顶部品牌弱提示，中间卡片式“猜你想问”列表。
- Footer：悬浮式输入框 + SVG 矢量麦克风图标。
2.2 界面二：会议预定 - 未指定会议室 (Unspecified Room)
场景：用户点击“帮我预定...”或输入时间，Bot 推荐 Top 3。
组件定义：会议室列表卡片 (Room List Card)
- 结构：
- Card Header：状态文本 (如 "✅ 找到 3 个可用房间") + 摘要信息 (时间)。
- List Item (Repeater)：
- Title：会议室名称 (加粗)。
- Tags：推荐标签 (如 "🌟 推荐")。
- Meta：楼层 | 容量 | 关键设备图标 (📺 📶)。
- Action：[立即预定] 按钮 (点击后变灰显示“已预定”)。
text
(User) 🗣️ 帮我预定一个明天的会议室
(Bot) 🤖
[ 气泡：好的，已为您查找明天... ]
[ 卡片组件：可用会议室列表 ]
-------------------------------------------------------
✅ 找到 3 个可用房间 10:00 - 11:00
**A-101 大会议室** [🌟 推荐]
📍 1F | 👥 20人 | 📺 投影
[ 立即预定 ]
**B-202 研讨室**
📍 2F | 👥 8人 | 📺 电视
[ 立即预定 ]
**C-305 洽谈室**
📍 3F | 👥 4人
[ 立即预定 ]
-------------------------------------------------------2.3 界面三：会议预定 - 指定会议室 (Specified Room)
场景：用户明确指定地点，且该地点可用。
text
(User) 🗣️ 帮我预定明天下午2点的A-101
(Bot) 🤖
[ 卡片组件：单一结果 ]
-------------------------------------------------------
✅ A-101 当前可用 14:00 - 15:00
**A-101 大会议室**
📍 1F | 👥 20人 | 📺 投影
[ 立即预定 ]
-------------------------------------------------------2.4 界面四：会议预定 - 成功反馈 (Success Feedback)
场景：点击“立即预定”后。
text
(Bot) 🤖
-------------------------------------------------------
🎉 **预定成功！**
**临时会议**
🕒 时间：明天 10:00 - 11:00
📍 地点：**A-101 大会议室**
[ 📅 编辑日程 / 邀请参会人 ] <-- (AppLink跳转)
-------------------------------------------------------2.5 界面五：设备控制 - 确认 (Device Control: Confirmation)
场景：用户指令涉及物理设备操作。
text
(User) 🗣️ 打开305会议室的灯
(Bot) 🤖
-------------------------------------------------------
❓ **请确认操作**
即将执行：**开启** (绿色高亮)
目标设备：**主灯**
位置： **305会议室**
[ 取消 ] [ 确认执行 ]
-------------------------------------------------------
*您可以直接语音说“确认”2.6 界面六：设备控制 - 执行结果 (Device Control: Status)
场景：用户点击确认后。
text
(Bot) 🤖
-------------------------------------------------------
💡 **操作已执行**
设备状态： **ON** (绿色高亮)
位置： 305会议室
-------------------------------------------------------3. 智能体交互模态规范 (Interaction Modality)
为解决对话流与 UI 组件衔接问题，定义以下增强交互规范：
3.1 播报模式 (Post-Action Narration)
用户在卡片/表单上执行“确认”、“执行”或“保存”操作后，AI 必须在对话流中自动同步一条语义化反馈消息。
- 示例：用户点击 [确认执行] IoT 操作 -> UI 显示“已执行” -> AI 自动发送：“好的，305会议室灯光已开启，当前环境亮度已优化。”
3.2 [MVP 暂不包含] 纠偏路由模式 (Complex Intent Handover)
(此部分考虑到 ASR 场景下的复杂性与同音词冲突，一阶段暂不实现，统一引导至 AppLink 处理。)
3.3 交互防呆与状态持久化
- 按钮失效：交互卡片（如会议室列表、IoT 确认）在用户完成点击操作后，按钮应立即进入
Disabled状态（置灰），防止同一指令被重复触发或产生逻辑冲突。 - 预填一致性：所有从对话中唤起的表单卡片，必须携带已识别的词槽参数（时间、地点、人员）进行预填，用户仅需对缺失项进行补全。