柔性定制工作流管理系统 — 构建技能

技能概述

此技能用于构建一个8阶段柔性定制工作流管理系统，是一个功能完备的单页Web应用（纯HTML/CSS/JS，无外部依赖）。系统覆盖从前期客户接触、需求挖掘到最终下单复购的全流程项目管理。

触发场景：

• 用户请求「帮我做一个XX行业的工作流管理系统」
• 用户请求「柔性定制流程管理」
• 用户请求「8阶段流程管理系统」
• 涉及「客户信息收集 → 需求挖掘 → 立项 → 打样 → 测试反馈 → 新品上市 → 下单 → 复购」的业务流程

系统架构

整个系统是一个自包含的 index.html 文件，包含：

1. CSS样式层 — 完整UI组件库（侧边栏、顶栏、统计卡片、看板、表格、弹窗、表单、时间线等）
2. HTML结构层 — 6个页面（工作台、看板视图、项目列表、客户信息、数据报表、系统设置）
3. JavaScript逻辑层 — 数据层、导航、渲染函数、CRUD操作、推进逻辑、搜索、导入导出

数据使用 localStorage 持久化存储。

8阶段工作流定义

const STAGES = [
  {id:1, name:'客户信息收集', color:'#E65100', icon:'📇'},
  {id:2, name:'需求挖掘',     color:'#1565C0', icon:'🔍'},
  {id:3, name:'立项评审',     color:'#7B1FA2', icon:'📝'},
  {id:4, name:'打样制作',     color:'#2E7D32', icon:'🧪'},
  {id:5, name:'测试反馈',     color:'#F57F17', icon:'💬'},
  {id:6, name:'新品上市',     color:'#00838F', icon:'🚀'},
  {id:7, name:'下单生产',     color:'#C62828', icon:'📦'},
  {id:8, name:'复购管理',     color:'#283593', icon:'🔄'}
];

构建步骤

步骤1：创建项目目录

mkdir -p <项目目录>

步骤2：生成 index.html

使用 assets/ 目录下的 template.html 作为基础。根据用户需求替换行业相关的：

• 页面标题和品牌文案
• 预置演示数据（客户和项目）
• 色彩主题（可选，修改CSS变量 --primary 等）

步骤3：调整演示数据

references/demo-data.md 包含了可复用的演示数据生成逻辑。

根据用户行业修改客户名称、项目名称、需求描述等。

步骤4：启动预览

使用 preview_url 工具预览生成的HTML文件。

核心功能模块

数据模型

// 项目对象结构
{
  id: 'string',
  customerId: 'string',      // 关联客户ID
  name: 'string',            // 项目名称
  stage: 1-8,                // 当前阶段
  priority: 'high|medium|low',
  manager: 'string',
  created: 'YYYY-MM-DD',
  updated: 'YYYY-MM-DD',
  stageHistory: [{           // 阶段推进记录
    stage: number,
    date: 'YYYY-MM-DD',
    note: 'string'
  }],
  details: {
    target: 'string',        // 产品目标
    spec: 'string',          // 规格要求
    budget: 'string',        // 预算
    deadline: 'YYYY-MM-DD'   // 交付日期
  }
}

// 客户对象结构
{
  id: 'string',
  name: 'string',
  contact: 'string',         // 联系人
  phone: 'string',
  type: 'string',            // 餐饮连锁|食品加工|经销商|电商|其他
  address: 'string',
  notes: 'string',
  created: 'YYYY-MM-DD'
}

6大页面功能

1. 工作台 — 统计卡片（项目总数、进行中、已下单/复购、客户数）、阶段分布柱状图、近期动态、待处理事项
2. 看板视图 — 按8个阶段分列展示项目卡片，支持阶段/优先级筛选
3. 项目列表 — 表格展示全部项目，支持搜索、阶段筛选、优先级筛选、详情/推进/删除操作
4. 客户管理 — 客户卡片网格展示，按类型筛选，可查看客户详情和关联项目
5. 数据报表 — 转化漏斗图、客户类型分布、阶段停留时间分析
6. 系统设置 — 公司信息设置、数据导入/导出/清空

阶段推进逻辑

推进项目到下一阶段时：

1. 弹出确认弹窗显示当前阶段→下一阶段
2. 填写推进备注
3. 更新 project.stage 和 project.updated
4. 追加 stageHistory 记录
5. 添加活动动态 addActivity('stage', ...)
6. 保存数据并刷新视图

UI组件矩阵

配色主题

默认配色方案（适用于调味品行业）：

--primary: #E8590C;    /* 橙色主调 */
--primary-light: #FFF4E6;
--success: #2F9E44;    /* 绿色 */
--info: #1971C2;       /* 蓝色 */
--warning: #E67700;    /* 橙色警告 */
--danger: #E03131;     /* 红色危险 */
--purple: #6741D9;     /* 紫色 */

各阶段颜色对应8种不同的视觉色系，从红色系→蓝色系→紫色系→绿色系→黄色系→青色系→红色系→靛蓝系的渐变。

参考资源

• references/demo-data.md — 演示数据生成指南及示例
• assets/template.html — 完整系统模板（如果需要从零重新生成）

技能来源说明

此技能包由调味品柔性工作流管理系统项目提炼而成。原项目是一个功能完备的单页Web应用，涵盖从客户信息收集到复购管理的全8阶段流程，预置了6家调味品行业客户（海底捞、真功夫、双汇、卫龙等）和8个不同阶段的项目示例，并包含完整的工作台看板、数据报表、客户管理等功能。

提炼过程：

1. 从实际运行的HTML应用中提取完整的8阶段工作流数据模型
2. 将UI组件（侧边栏、卡片、看板、弹窗、表格、时间线等）整理为组件矩阵
3. 将行业特定的演示数据替换为通用占位符模板（demo-data.md）
4. 将完整系统保存为可复用的模板文件（template.html）
5. 将配色主题、阶段颜色体系、推进逻辑等核心架构写入SKILL.md

使用此技能时，只需将 [占位符] 替换为目标行业对应的客户名、项目名和需求描述，调整CSS变量颜色主题即可快速生成一个新的工作流管理系统。

重要提示

1. 所有数据存储在前端 localStorage，无需后端
2. 预置演示数据仅当 data.projects.length === 0 时加载
3. 阶段推进使用 confirmAdvance(id, newStage) 函数，会弹出备注弹窗
4. 搜索功能支持项目名和客户名模糊匹配
5. 导出为JSON格式，导入要求相同格式