Stooland Docs

Appearance

超级 Copilot 架构规划 (LUI to Action) ​

1. 产品愿景与定位 ​

目标：打造一个常驻全局、能听懂酒店业务黑话、能代替用户操作鼠标和键盘的超级助理。 交互形态：全局悬浮的对话面板（类似腾讯云 KIKI），支持自然语言输入、流式对话回复、操作步骤渲染（Step-by-step trace）以及一键执行按钮。

2. 核心能力模型 (Capabilities) ​

2.1 意图路由 (Intent Routing) ​

  • 用户输入：“下周我们要推一个新的法式下午茶，给我弄点宣传资料。”
  • Copilot 解析意图：用户需要新品推广的物料。
  • 操作：自动跳转至 /marketing-kit?scenario=new_product。

2.2 数据查询与知识问答 (RAG & Data Fetching) ​

  • 用户输入：“帮我查一下最近生成的客房海报有哪些？”
  • Copilot 解析意图：查询生成历史。
  • 操作：在对话框内通过卡片形式展示最近的 history 列表，或跳转到历史记录页。

2.3 场景内自动执行 (In-Scenario Automation) ​

  • 用户输入：“帮我生成一张国庆节的高级大床房海报，要红色调的。”
  • Copilot 解析意图：调用【节令海报】工具。
  • 操作：自动跳转到节令海报页面 -> 自动将下拉框选为“国庆节” -> 色调选为“中国红” -> 自动触发 Pinia Store 中的 handleGenerate 方法。

2.4 场景外动态执行 (Ad-hoc Execution / Agentic UI) ​

这是超级 Copilot 的灵魂能力。它打破了传统软件“必须有对应表单才能干活”的局限。

  • 用户输入：“刚才大堂有客人在吵架，帮我写个安抚的致歉信，并配一张送果盘的图片。”
  • Copilot 解析意图：系统没有“大堂吵架致歉”的预设表单，触发动态生成机制。
  • 操作：大模型当场构思“致歉信”的文案要求和“果盘”的生图提示词 -> Copilot 绕过静态表单，直接拉起底层的 generateCopyTask 和 generateImageTask 引擎进行并发生成 -> 结果直接呈现在用户面前。

3. 技术架构设计 (Technical Architecture) ​

要实现上述功能，不能仅仅依赖前端对话框，必须在后端建立一个强大的 Agent Orchestrator (智能体编排器)。核心技术依赖于大模型的 Function Calling (函数调用) 能力。

3.1 架构分层 ​

  1. 表现层 (UI/UX)：
    • CopilotPanel.vue：全局悬浮组件，包含消息列表、输入框、步骤渲染器（展示“正在分析意图...”、“正在跳转页面...”、“正在填充参数...”）。
    • AI Page 排版引擎：接收底层图文素材，在 Marketing Kit 工作台动态渲染“小红书笔记”和“长图文详情”双模态预览。
  2. 状态层 (Store & Workflow)：
    • useCopilotStore.js：管理对话历史，以及接收后端发来的 Action 指令（如 navigate_to，fill_form）。
    • Workflow Engine (工作流引擎)：将原有的硬编码调度重构为配置驱动的 WorkflowEngine 和 TaskNode。支持 parallel 和 sequential 节点自由编排，使得 Copilot 能够根据动态任务组装执行树。
  3. 逻辑层 (Backend Agent)：
    • 接收用户的自然语言，附带当前页面的上下文（Current Route, Form State）。
    • 将系统的所有能力定义为 Tools (Functions) 喂给大模型。
    • ApiCopilot.php：提供标准的 OpenAI API 格式接口，将底层的异构模型（如豆包、千问）的 Function Calling 响应统一化。
  4. 模型层 (LLM)：
    • 具备 Function Calling 能力的大模型（如豆包 Pro、GPT-4o、Qwen-Max）。

3.2 核心机制：LUI 与 GUI 融合 (Agentic UI) ​

传统的 Copilot 只是一个聊天机器人，而我们要实现的是**“提线木偶”式的直接操作**。

通过大模型的 Function Calling，我们将系统的所有能力定义为 Tools 喂给大模型。当用户说话时，大模型会返回一个 JSON，告诉前端应该去修改哪个 Pinia State 或触发哪个 Method，而不是让 Copilot 去模拟鼠标点击。

工具库矩阵 (Tool Registry)：

  1. execute_marketing_campaign：用于处理 24 个标准业务场景。大模型提取出 scenario、theme 等参数后，前端将其写入 useMarketingKitStore 并触发 Workflow 引擎执行。
  2. execute_adhoc_task：用于处理突发/未知场景。大模型直接构思底层的 copy_prompt 和 image_prompt，前端拦截后绕过所有表单限制，直接拉起 Workflow 引擎进行节点编排和执行。
  3. report_system_error (自诊断回路)：当 Copilot 触发的底层任务（如视频生成）报错时，系统会自动拦截错误堆栈，将其以特定的 JSON 格式反向喂给 Copilot，Copilot 解析后在聊天框内用人话向开发者报告错误原因，成为24小时在线的自动化测试与运维助理。

3.3 数据流转时序 (The Flow) ​

  1. User: "帮我搞个情人节的浪漫双人餐推广包"
  2. Frontend: 将消息通过 SSE 流式接口发送给 Backend Agent。
  3. Backend Agent: 将系统 Prompt + Tools + User Message 发给大模型 (UnifiedLlmService)，开启 Function Calling。
  4. LLM: 分析出需要调用 execute_marketing_campaign，并生成参数：{"scenario": "valentines-day", "theme": "浪漫双人餐推广"}。
  5. Backend Agent: 将大模型的 tool_calls 意图转化为标准 OpenAI 格式，通过 SSE 实时返回给前端。
  6. Frontend (Copilot API): 解析 SSE Chunk，提取完整的 tool_calls。
  7. Frontend (Store): 触发路由跳转，执行 Vue Router 的 push('/marketing-kit?scenario=valentines-day')，同时填充 Pinia 状态。
  8. Frontend (Workflow Engine): 根据配置好的任务流（如：并发执行图、文、视频），拉起底层引擎开始自动化生成。
  9. Frontend (AI Page): 当图文双原子任务成功后，自动解锁排版模块，渲染最终的发布态物料。Copilot 在对话框中提示：“已为您配置并生成好情人节营销包！”

4. 实施路线图 (Roadmap) ​

考虑到系统的复杂性，超级 Copilot 的落地分为三个阶段：

  • Phase 1: 导航与导购助理 (Navigational Assistant)
    • 能力：只做意图识别和路由跳转。
    • 表现：用户说“我想做个海报”，Copilot 分析后跳转到 /image/marketing-poster 并提示“已为您打开营销海报工具”。
  • Phase 2: 表单副手 (Form Copilot)
    • 能力：深度结合单点工具。
    • 表现：在具体的工具页面内，用户说“我要高大上一点的”，Copilot 自动将当前表单的风格选项切换为“优雅大气”，并修改提示词参数。
  • Phase 3: 全能智能体平台 (Agentic Workflow Platform) - [已达成]
    • 能力：接入真实大模型 Function Calling，引入底层 Workflow 工作流调度，并由 AI Page 引擎完成最后一公里排版。
    • 表现：用户一句话，系统即能处理预设的“五一促销”，也能动态应对突发的“大堂道歉信+果盘图”，自动完成从调度、生成到排版呈现的端到端闭环。