feat: 拆解单文件 Demo 为 Vite + React 前端工程

- 保留根目录 index.html 作为 v1 单文件原型（不参与构建）
- app/ 下新建 Vite + React 工程（vite.config root 指向 app/，两版互不干扰）
- 状态收敛到 useAppStore（表单/消息/串行确认/一键发品 + 4 条异步编排流）
- 生成卡片重构为结构化数据驱动渲染，按钮为真实 React 事件
- 6 大表单模块卡片化；Agent 意图解析与偏好学习抽为独立 lib
- 功能与视觉与 v1 完全一致，浏览器端全流程回归通过

README.md

@@ -2,19 +2,63 @@
 
 飞猪商家商品发布平台右侧嵌入的 AI 助手交互式演示。模拟完整的商品发布页（六大模块表单）+ 右侧 AI 助手面板，主打「一键发品」与「越用越好用」的偏好学习机制。
 
-## 快速开始
+仓库包含两个版本，展示同一个 Demo 从「单文件原型」到「前端工程化」的演进：
 
-无需构建，直接用浏览器打开：
+| 版本 | 入口 | 说明 |
+|---|---|---|
+| v1 单文件原型 | `index.html` | HTML + CSS + JS 零依赖，浏览器直接打开 |
+| v2 工程化版 | `app/`（Vite + React） | 组件化拆分、状态收敛、可扩展接入真实 LLM |
+
+两个版本的功能与视觉完全一致。
+
+## 快速开始（Vite + React 版）
 
 ```bash
-open index.html
+npm install
+npm run dev       # 开发：http://localhost:5173
+npm run build     # 构建产物输出到 dist/
+npm run preview   # 本地预览构建产物
 ```
 
-或启动本地静态服务：
+单文件版无需构建：直接 `open index.html`。
+
+## 工程结构
 
-```bash
-npx serve .
 ```
+├── 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，跨会话预填配置与成长等级
 
 ## 功能概览
 
@@ -46,14 +90,6 @@ npx serve .
 - 即时记忆：每次发品沉淀偏好（localStorage），下次自动预填配置
 - 成长等级：Lv.1 通用模板（0-2 次）→ Lv.2 风格匹配（3-9 次）→ Lv.3 爆款复刻（10+ 次）
 
-## 目录结构
-
-```
-├── index.html              # 单文件 Demo（HTML + CSS + JS，零依赖）
-├── Prompt提示词设计文档.md  # 各工具背后的 Prompt 设计规范（可直接落地真实 LLM）
-└── AI领教营/               # 项目方法论笔记（AI 价值/边界/验证框架）
-```
-
 ## 设计规范
 
 - **品牌主色**：`#FF7A1A`（飞猪橙黄），渐变 `#FFA200 → #FF6600`
@@ -61,11 +97,9 @@ npx serve .
 
 ## 落地指引
 
-Demo 中的生成逻辑为前端模拟数据（`genData`）。接入真实 LLM 时：
+Demo 中的生成逻辑为前端模拟数据（`app/src/data/genData.js`）。接入真实 LLM 时：
 
-1. 将助手面板抽成 Vue/React 独立组件
-2. 按设计文档定义 API 契约（表单上下文 + 生成类型 → 流式返回）
+1. 将 `lib/agent.js` 的意图解析替换为 LLM function calling
+2. 按 `Prompt提示词设计文档.md` 定义 API 契约（表单上下文 + 生成类型 → 流式返回）
 3. Agent 编排对应后端 Agent Loop：意图分类 → 参数抽取 → function calling → 结果回填 → 偏好沉淀
 4. 偏好沉淀对应商家画像服务，喂给 LLM 的个性化 prompt
-
-详见 `Prompt提示词设计文档.md`。