AI 电商提效工作台

产品实际界面

WorkBuddy 完整复刻提示词

将下方指令复制到 WorkBuddy；生成结果与所用版本、模型和配置有关，请按实际环境检查。不要在指令中填入真实密钥或敏感业务数据。

## 角色

你是一名资深电商运营 + 前端工程师，为中小电商店主/运营搭建一个「AI 电商提效工作台」。它把店铺经营总览、任务协同、商品与库存、营销与内容、订单售后、利润核算、数据备份、AI 内容生成整合进一个网页应用。

硬性要求：

1. **三段式布局**：顶部通栏 + 左侧分组导航 + 右侧卡片式内容区。
2. **所有功能必须真实可操作**，不允许出现点了没反应的按钮、写死的假界面、只有标题没有内容的空卡片。
3. **所有数据可增删改**：商品、订单、任务、活动、售后、待办、库存、利润参数、工作流模板，全部支持前端编辑并持久化。
4. **所有 AI 生成结果可编辑**：生成后进入编辑弹窗，可改文字、可复制全文、可保存进生成记录。
5. 零依赖：不引入任何 CDN、框架、图表库；图表用原生 SVG 手写；数据存 localStorage。

---

## 一、界面与视觉规范

- 主色 `#2f6bff`（蓝），辅助渐变 `linear-gradient(120deg,#2f6bff,#9b6ef7)`；成功绿 `#22b573`、警示橙 `#ff8a3d`、危险红 `#f05252`。
- 页面底色浅灰（`#f5f7fb`），内容全部为白色圆角卡片（16px 圆角 + 极轻阴影），卡片间距 16px，留白充足。
- 顶部通栏（高约 64px）：左侧 Logo 方块 + 应用名「AI 电商提效工作台」+ 副标题「让运营提效 10 倍」；中部店铺切换下拉；右侧当前日期、全局搜索框、数据备份按钮、设置入口。
- 左侧导航（宽 220px，可折叠）：按分组展示，分组标题为小号灰字；菜单项 = 图标 + 名称，当前项蓝底白字高亮（左侧有 3px 竖条）。
- 右侧内容区：默认进入「经营总览」，点击菜单切换页面；每次切换只重绘内容区，不刷新整页。
- 所有页面统一节奏：页头标题 + 说明 → KPI/功能卡片 → 表格或图表 → 明细列表。
- 数字使用等宽感字体，金额带千分位与 `¥`；涨跌用中文习惯：**上涨红色、下跌绿色**。
- 交互反馈：操作后右上角 toast 提示（1.8 秒自动消失）；删除类操作二次确认；表单统一走弹窗（modal）。

---

## 二、技术架构（按此分层，便于后续扩展）

```
index.html        骨架：topbar / sidebar / main 三个容器
style.css         全部样式（CSS 变量定义配色，响应式：<980px 折叠侧栏）
js/data.js        默认种子数据 + 模块注册表 + localStorage 读写 + 操作留痕
js/templates.js   内容生成引擎（纯函数，输入参数 → 输出 Markdown 风格纯文本）
js/specials.js    12 个页面的渲染函数（返回 HTML 字符串）+ 各页专属交互
js/app.js         路由、渲染调度、通用组件（卡片/表格/弹窗/toast/CSV导出/JSON备份）
```

约定：

- 数据对象 `DB = { settings, nav, data:{...}, logs }`，持久化键名 `ecommerce_workbench_v1`。
- 每次写操作后调用 `saveDB()`；涉及业务动作时调用 `logWork(类型, 标题)` 记录留痕（最多保留 300 条）。
- 页面渲染用模板字符串拼 HTML，事件用内联 `onclick="fn()"` 绑定全局函数。
- 转义统一走 `esc()`，所有用户输入进入 HTML 前必须转义，防止内容破版。
- 「生成」类功能为**本地规则模板引擎**：不调用任何外部 API，输出稳定、可离线、无密钥，内容是专业可用的框架稿，教师/运营在此基础上改。

---

## 三、左侧导航与 12 个模块

```
▌经营
1. 经营总览      🏠
2. 今日任务      ✅
▌商品与营销
3. 商品管理      📦
4. 营销推广      📣
5. 内容日历      🗓️
▌交易与履约
6. 订单与售后    🧾
7. 库存供应链    🏭
▌经营分析
8. 利润分析      💰
9. 数据中心      📊
▌智能与效率
10. AI 运营助手  🤖
11. 工作流管理   🧩
▌系统
12. 系统设置     ⚙️
```

---

## 四、各页面功能细则

### 1. 经营总览（默认首页）

- **6 个 KPI 卡片**（彩色图标 + 数值 + 指标名 + 环比涨跌）：销售额、订单量、转化率、客单价、广告花费、毛利率。数值从当日订单/商品/利润数据实时算出，不写死。
- **销售额趋势折线图**（近 7 天，SVG）：带数据点、渐变填充区、横轴日期、纵轴刻度、鼠标悬停显示具体值。
- **订单量柱状图**（近 7 天，SVG）：柱顶显示数值。
- **今日待办卡**：勾选即完成（划线置灰）、可新增、可删除，完成状态持久化。
- **商品表现 TOP5**：按销售额排序，显示商品名、销量、销售额、环比。
- **最新订单表**：订单号、商品、买家（脱敏 `张**`）、金额、状态标签。
- 右上角一个 AI 助手入口卡片，点击跳转 AI 运营助手。

### 2. 今日任务

- 任务表格字段：任务名、来源工作流、优先级（高/中/低，彩色标签）、截止时间、负责人、进度条（0-100%）、状态。
- 状态流转：待处理 → 进行中 → 待审核 → 已完成，点击状态标签或「推进」按钮前进一步。
- 支持：新增任务（弹窗表单）、编辑、删除、按状态/优先级筛选、按负责人搜索。
- 顶部 4 个统计小卡：待处理、进行中、待审核、今日已完成。
- 「从工作流添加」按钮：选择工作流模板 → 一次性批量生成该模板下的全部任务。

### 3. 商品管理

- 商品表格字段：商品图占位、商品名、类目、SKU、平台、店铺、售价、成本、毛利率（自动算）、库存、状态（已上架/低库存/待优化/已下架）。
- 功能：新增、编辑、删除、关键词搜索、按类目/平台/状态筛选、按售价/毛利率排序。
- 右侧或下方：**类目销售占比环形图**（SVG，中心显示类目数）、**商品表现分析**（销量 TOP / 高毛利 TOP / 需优化清单）。
- 每行操作列含「AI 标题」「AI 详情文案」按钮，点击直接基于该商品生成并弹出结果。

### 4. 营销推广

- 活动卡片/表格：活动名、类型（上新/促销/直播/内容）、起止时间、预算、目标、负责人、状态（筹备中/进行中/已结束）。
- 支持增删改查、按状态筛选、活动预算合计。
- 三个 AI 生成入口：**活动方案**（选活动类型+预算+目标，输出活动主题、机制、节奏排期、投放渠道、预算分配、风险预案）、**直播提纲**（输出开场、产品讲解顺序、话术要点、逼单节奏、互动设计、下播动作）、**下周运营计划**（按天排期，含内容、投放、活动、复盘节点）。

### 5. 内容日历

- 月历视图：7 列（周一至周日）× 5-6 行，每格显示日期与当日事件（最多 3 条，超出显示 +N）。
- 事件类型 5 类，彩色标签区分：上新（蓝）、短视频（紫）、直播（红）、广告（橙）、私域（绿）。
- 支持上月/下月切换、回到本月；点击某一天弹出当日事件列表，可新增/删除事件（事件 = 文本 + 类型）。
- 右侧图例 + 本月各类事件数量统计。

### 6. 订单与售后

- 顶部状态标签页：全部 / 待发货 / 已发货 / 已完成 / 售后中 / 异常订单，带数量角标。
- 订单表：订单号、商品、SKU、买家、金额、支付状态、发货状态、下单时间、操作（推进状态 / 查看详情）。
- 订单状态推进按钮（待发货→已发货→已完成），异常订单可标记处理。
- **售后登记**：订单号、售后类型（物流问题/质量问题/尺码不符/其他原因）、处理状态、处理备注，可增删改。
- **售后归因环形图**：按类型统计占比。
- **客服话术生成**（5 类）：催发货安抚、物流延迟解释、质量问题致歉、退换货引导、差评挽回。每类输出 2-3 条不同语气的完整话术，可直接复制。

### 7. 库存供应链

- 库存表：商品、SKU、供应商、当前库存、安全库存、库存状态（充足/预警/断货）、建议补货量（= 安全库存×2 − 当前库存，负数取 0）。
- 低于安全库存的行整行浅红底 + 状态红色标签，页面顶部红色提示条显示预警商品数量。
- 三个清单：**补货建议**（含建议数量与优先级）、**滞销风险**（库存高但近 7 天销量低）、**断货风险**（库存/日均销量 < 7 天）。
- 一键复制补货清单文本，便于发给供应商。

### 8. 利润分析

- 利润构成环形图（SVG）：商品成本、平台佣金、广告费、物流费、退款损失、净利。
- 收入与支出可编辑表格：营业收入、商品成本、平台费用、广告费、物流费、退款损失，输入即重算（无需点保存按钮，失焦即存）。
- 自动计算并展示：毛利、毛利率、净利、净利率、广告费占比、各项费用率。
- **健康度提示**：净利率 <10% 提示「偏薄」，广告占比 >20% 提示「投放过重」，并给出 2-3 条具体优化建议（提客单价、砍低效计划、优化退款率等）。

### 9. 数据中心

- 导出区：商品明细 CSV、订单明细 CSV、任务明细 CSV（UTF-8 BOM，Excel 直接打开不乱码）。
- 备份区：**导出全部数据 JSON**（下载文件 + 可复制文本）、**导入恢复**（粘贴 JSON → 校验 → 覆盖恢复）、恢复出厂设置。
- 操作留痕列表：时间、类型、标题，倒序展示，支持按类型筛选与清空。
- 页面顶部提示「数据仅保存在本机浏览器，请每周导出一次备份」。

### 10. AI 运营助手

- 顶部渐变 Hero 区：标题、一句介绍、8 个能力胶囊按钮（点击即执行）：
  1. 安排今日运营工作（生成今日待办清单并可直接落入今日任务）
  2. 分析本周销售（基于近 7 天数据输出增长/下滑原因与三条动作建议）
  3. 生成商品标题（选商品 → 输出 5 个不同风格的标题：卖点型/场景型/数字型/情绪型/搜索词型）
  4. 生成详情页文案（输出痛点开场、卖点分条、参数表、场景描述、信任背书、行动号召）
  5. 生成活动方案
  6. 生成直播提纲
  7. 生成下周计划
  8. 售后话术
- 下方两栏：**最近生成内容**（标题 + 时间 + 查看/编辑/复制/删除）、**AI 使用记录**（来自操作留痕）。
- 生成结果统一弹窗展示：大号可编辑文本域 + 「复制全文」+「保存」；保存后写入生成记录，可反复查看修改。

### 11. 工作流管理

- 顶部标准工作流示意：数据导入 → AI 分析 → 任务生成 → 草稿输出 → 人工确认（5 节点带箭头）。
- 工作流模板库（5 个内置，可新增/编辑/删除）：
  - 每日店铺巡检（🏪，6 步）
  - 每周销售复盘（📊，6 步）
  - 每周营销规划（📣，6 步）
  - 每周库存盘点（📦，5 步）
  - 内容日历排期（🗓️，5 步）
- 每张模板卡显示：图标、名称、说明、步骤数、「使用模板」按钮。
- 点「使用模板」→ 按模板 steps 批量创建任务（前两步高优先级），自动跳转今日任务并提示「已创建 N 个任务」。

### 12. 系统设置

- 店铺信息：店铺名称、负责人、经营平台、服务到期日，保存后顶部通栏同步显示。
- 界面偏好：侧栏默认折叠开关、每页表格行数。
- 数据区：备份入口、恢复出厂（二次确认，清空 localStorage 并重建种子数据）。
- 关于：版本、技术说明（纯本地、无联网、无账号）。

---

## 五、默认种子数据（必须内置，保证打开就有内容）

- **8 个商品**，覆盖箱包、家居日用、服饰内衣、家用电器、运动户外、数码配件 6 个类目，平台分散在淘宝/京东/抖音/小红书，价格 49-199 元，含成本与安全库存，其中至少 1 个低库存、1 个待优化。
- **10 条订单**，订单号 `O20260424xxx`，买家脱敏（张**/李**…），状态覆盖待发货/已发货/已完成/售后中/异常订单，支付与发货状态分开。
- **6 条任务**，绑定不同工作流，进度 20%-100%，状态覆盖四种。
- **1 个活动**（春季新品上市，预算 1 万，筹备中）。
- **3 条售后记录**（物流问题/质量问题/其他原因）。
- **利润参数**：营收 128560、商品成本 54880、平台费 8950、广告费 21340、物流 4620、退款 3652（便于演示净利率与健康度提示）。
- **4 条今日待办**（上架新品、处理售后、素材审核、库存复核）。
- **近 7 天销售趋势**：以 12 万为基准上下浮动生成，订单量 = 销售额/100 取整。
- **当月内容日历事件** 8 条，五类各覆盖。

---

## 六、内容生成引擎要求（templates.js）

每个生成函数是**纯函数**：入参是对象/字符串，返回结构化纯文本（用 `一、` `1.` `-` 等符号分层，便于直接贴到 Word/飞书）。

必须实现的生成器与输出结构：

| 生成器       | 输入               | 输出结构                                                     |
| ------------ | ------------------ | ------------------------------------------------------------ |
| 商品标题     | 商品对象           | 5 条标题，分别标注风格（卖点/场景/数字/情绪/搜索），每条 20-30 字 |
| 详情页文案   | 商品对象           | 痛点开场 → 5 条卖点（每条含小标题+解释）→ 参数表 → 使用场景 → 信任背书 → 行动号召 |
| 活动方案     | 活动类型/预算/目标 | 活动主题（3 选）→ 活动机制 → 时间节奏（预热/爆发/返场）→ 渠道组合 → 预算分配表 → 风险预案 |
| 直播提纲     | 商品/专场名        | 开场留人 → 商品讲解顺序（含讲解要点与话术）→ 逼单节奏 → 互动设计 → 下播动作 |
| 下周计划     | 店铺数据           | 周一至周日逐日安排（内容/投放/活动/复盘），附本周三个重点    |
| 售后话术     | 场景类型           | 每类 2-3 条，覆盖「致歉+解释+方案+补偿」四段                 |
| 本周销售分析 | 近 7 天数据        | 整体表现 → 增长/下滑归因 → 商品结构 → 三条可执行动作         |
| 今日待办     | 店铺数据           | 按优先级排列的 6-8 项待办，标注预计耗时                      |

文案要求：具体、有数字、有动作，禁止「提升用户体验」这类空话；每个建议都要能当天执行。

---

## 七、图表实现（不引库，纯 SVG）

1. **折线图**：viewBox 固定宽高，按数据最大最小值映射 Y 轴，画网格线、面积渐变、折线、圆点，最后一个点高亮；X 轴标签间隔显示避免拥挤。
2. **柱状图**：等宽柱、圆角顶、渐变填充，柱顶标数值，X 轴标签在下。
3. **环形图**：用 `stroke-dasharray` 分段绘制圆弧，中心显示总计或主指标，右侧/下方配彩色图例（色块 + 名称 + 占比）。
4. 所有图表容器宽度 100%，高度固定 200-240px，移动端自动缩放。

---

## 八、交互与质量要求

1. **CRUD 完整**：每个可编辑对象都有新增、编辑、删除三条路径，删除必须二次确认。
2. **状态持久化**：刷新页面后，所有改动、待办勾选、生成记录、留痕都要还在。
3. **空状态处理**：列表为空时显示引导文案（如「暂无生成记录，点击上方能力卡片开始」），不能出现空白卡片。
4. **输入校验**：必填项为空、数字非法、JSON 格式错误时给出明确中文提示，不允许静默失败。
5. **搜索**：顶部全局搜索框支持按商品名/订单号/任务名跨模块搜索并跳转定位。
6. **响应式**：≥1280px 三栏完整；980-1280px 收窄侧栏；<980px 侧栏变抽屉，卡片单列。
7. **性能**：单页渲染 <100ms；数据量 500 条以内不卡顿。
8. **可访问性**：按钮有 hover/active 态，颜色不作为唯一信息载体（状态同时有文字）。

---

## 九、验收清单（交付前逐条自测）

- [ ] 12 个页面全部能打开，无 JS 报错、无空白页
- [ ] 6 个 KPI 数值与图表数据一致，改订单/利润后总览同步变化
- [ ] 商品/订单/任务/活动/售后/待办 六类数据均能新增、编辑、删除，刷新后仍在
- [ ] 8 个 AI 生成器全部能出结果，结果可编辑、可复制、可保存、可再次打开
- [ ] 工作流「使用模板」能批量创建任务并自动跳转
- [ ] 内容日历可切月、可加删事件，事件按类型着色
- [ ] 库存预警、利润健康度提示随数据变化正确触发
- [ ] CSV 导出用 Excel 打开中文不乱码；JSON 备份导出后可完整恢复
- [ ] 恢复出厂二次确认，执行后回到种子数据状态
- [ ] 断网状态下所有功能可用（证明零外部依赖）

---

## 十、交付说明模板（生成后附给用户）

1. 访问方式：双击 `index.html` 本地打开（Chrome/Edge），无需服务器与账号。
2. 数据位置：浏览器 localStorage（键 `ecommerce_workbench_v1`），不上传云端。
3. 数据风险：清缓存/换浏览器/换设备会丢数据，务必每周在「数据中心」导出 JSON 备份。
4. 生成能力边界：内置规则模板引擎，输出为专业框架稿，需按自家店铺实际卖点与平台规则微调；如需联网大模型生成，可后续接入云端服务。
5. 二次开发入口：改种子数据看 `js/data.js`，改生成话术看 `js/templates.js`，加新页面看 `js/specials.js` + `nav` 注册。