mp_1787300862_s8r25x
01dcd83987
- 保留根目录 index.html 作为 v1 单文件原型（不参与构建） - app/ 下新建 Vite + React 工程（vite.config root 指向 app/，两版互不干扰） - 状态收敛到 useAppStore（表单/消息/串行确认/一键发品 + 4 条异步编排流） - 生成卡片重构为结构化数据驱动渲染，按钮为真实 React 事件 - 6 大表单模块卡片化；Agent 意图解析与偏好学习抽为独立 lib - 功能与视觉与 v1 完全一致，浏览器端全流程回归通过
106 lines
5.8 KiB
Markdown
106 lines
5.8 KiB
Markdown
# 旅行商品发布 AI 助手 Demo
|
||
|
||
飞猪商家商品发布平台右侧嵌入的 AI 助手交互式演示。模拟完整的商品发布页（六大模块表单）+ 右侧 AI 助手面板，主打「一键发品」与「越用越好用」的偏好学习机制。
|
||
|
||
仓库包含两个版本，展示同一个 Demo 从「单文件原型」到「前端工程化」的演进：
|
||
|
||
| 版本 | 入口 | 说明 |
|
||
|---|---|---|
|
||
| v1 单文件原型 | `index.html` | HTML + CSS + JS 零依赖，浏览器直接打开 |
|
||
| v2 工程化版 | `app/`（Vite + React） | 组件化拆分、状态收敛、可扩展接入真实 LLM |
|
||
|
||
两个版本的功能与视觉完全一致。
|
||
|
||
## 快速开始（Vite + React 版）
|
||
|
||
```bash
|
||
npm install
|
||
npm run dev # 开发：http://localhost:5173
|
||
npm run build # 构建产物输出到 dist/
|
||
npm run preview # 本地预览构建产物
|
||
```
|
||
|
||
单文件版无需构建：直接 `open index.html`。
|
||
|
||
## 工程结构
|
||
|
||
```
|
||
├── index.html # v1 单文件 Demo（保留作对照，不参与 Vite 构建）
|
||
├── vite.config.js # Vite 配置（root 指向 app/，与根目录 index.html 互不干扰）
|
||
├── app/
|
||
│ ├── index.html # Vite 入口
|
||
│ └── src/
|
||
│ ├── main.jsx # 应用挂载
|
||
│ ├── App.jsx # 布局组合 + Store 注入
|
||
│ ├── styles/global.css # 全局样式（自 v1 完整迁移，类名不变）
|
||
│ ├── data/
|
||
│ │ └── genData.js # 8 个工具的结构化生成器（文案/卡片/回填数据）
|
||
│ ├── lib/
|
||
│ │ ├── agent.js # Agent 意图解析：parseBrief / parseMultiTools / 意图正则
|
||
│ │ └── oc.js # 偏好学习：localStorage 持久化 + 成长等级
|
||
│ ├── store/
|
||
│ │ ├── useAppStore.js # 状态中枢：表单/消息/串行确认/一键发品 + 异步编排流
|
||
│ │ └── context.js # Store Context
|
||
│ └── components/
|
||
│ ├── TopBar.jsx # 顶部导航
|
||
│ ├── FormArea.jsx # 左侧表单（6 大模块）
|
||
│ ├── cards/ # 6 个表单模块卡片（Title/Intro/Detail/Image/Itinerary/Price）
|
||
│ ├── AssistantPanel.jsx # 右侧 AI 助手面板
|
||
│ ├── MessageItem.jsx / GenCardView.jsx / TaskCardView.jsx # 消息流三种消息
|
||
│ ├── OneClickModal.jsx # 一键发品弹窗（配置→进度→完成 状态机）
|
||
│ └── Toast.jsx
|
||
├── Prompt提示词设计文档.md # 各工具背后的 Prompt 设计规范（可直接落地真实 LLM）
|
||
└── AI领教营/ # 项目方法论笔记（AI 价值/边界/验证框架）
|
||
```
|
||
|
||
### 架构要点
|
||
|
||
- **数据驱动渲染**：v1 中拼接 HTML 字符串的生成卡片，v2 重构为结构化数据（`head / lines / foot / tips`），按钮全部是真实 React 事件
|
||
- **异步编排与 UI 解耦**：`quickAction / agentRun / multiToolRun / startOC` 四条编排流集中在 store，通过 ref 读取最新状态避免闭包过期
|
||
- **human-in-the-loop 串行确认**：每个工具生成后 Promise 挂起，等待自动倒计时（5s）或手动确认，支持运行中随时切换模式
|
||
- **偏好学习持久化**：`ocStore` 写入 localStorage，跨会话预填配置与成长等级
|
||
|
||
## 功能概览
|
||
|
||
### 左侧商品发布表单（6 大模块）
|
||
|
||
| 模块 | 说明 |
|
||
|---|---|
|
||
| 商品标题 | 40 字计数器 + 目的地/天数/类型/人群标签（作为 AI 上下文） |
|
||
| 详细介绍 | 列表页卖点摘要 |
|
||
| 商品详情 | 富文本编辑器（工具栏 + 图文混排） |
|
||
| 商品图片 | 4 列图片网格，主图/详情图角标 |
|
||
| 行程编辑 | 动态 D1~Dn 天数卡片 |
|
||
| 价格库存 | 团期表格（日期/成人价/儿童价/库存/在售状态） |
|
||
|
||
每个模块标题行右侧有 `✨ AI` 按钮，可直接唤起助手中对应工具（面板收起时自动展开）。
|
||
|
||
### 右侧 AI 助手
|
||
|
||
- **8 个快捷工具**：生成标题、卖点描述、商品详情、配图建议、行程规划、智能定价、SEO 关键词、合规检查
|
||
- **一键发品（弹窗式）**：选 4 项配置 → 6 大模块逐步生成 → 偏好沉淀 + 成长等级
|
||
- **对话式自主发品（Agent 模式）**：一句话下需求（如「帮我发个海南亲子6天自由行」），助手自动规划 8 步任务清单、串行调用工具
|
||
- **多工具串行调度**：如「帮我优化标题和详情」，自动识别 2+ 模块并依次执行
|
||
- **逐工具确认（human-in-the-loop）**：串行过程中每个工具生成卡片后展示，支持自动（5s 倒计时）/ 手动两种确认模式，可随时切换、可「换一版」
|
||
- **上下文感知**：生成内容随表单选择（目的地/天数/人群）联动
|
||
- **一键回填**：生成卡片「⚡ 一键填入」写入对应模块，自动滚动定位 + 高亮闪烁
|
||
|
||
### 偏好学习（越用越好用）
|
||
|
||
- 即时记忆：每次发品沉淀偏好（localStorage），下次自动预填配置
|
||
- 成长等级：Lv.1 通用模板（0-2 次）→ Lv.2 风格匹配（3-9 次）→ Lv.3 爆款复刻（10+ 次）
|
||
|
||
## 设计规范
|
||
|
||
- **品牌主色**：`#FF7A1A`（飞猪橙黄），渐变 `#FFA200 → #FF6600`
|
||
- **语义色**：AI 橙黄 / 用户蓝紫（`#6366f1 → #8b5cf6`），成功绿 / 警示橙不受主题影响
|
||
|
||
## 落地指引
|
||
|
||
Demo 中的生成逻辑为前端模拟数据（`app/src/data/genData.js`）。接入真实 LLM 时：
|
||
|
||
1. 将 `lib/agent.js` 的意图解析替换为 LLM function calling
|
||
2. 按 `Prompt提示词设计文档.md` 定义 API 契约（表单上下文 + 生成类型 → 流式返回）
|
||
3. Agent 编排对应后端 Agent Loop：意图分类 → 参数抽取 → function calling → 结果回填 → 偏好沉淀
|
||
4. 偏好沉淀对应商家画像服务，喂给 LLM 的个性化 prompt
|