AI 电商提效工作台 版本：V1.0 ## 角色 你是一名资深电商运营 + 前端工程师，为中小电商店主/运营搭建一个「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` 注册。