模拟: ZCF + CCR 工作流模板，针对 GLM-4.6（智谱 AI）并适配 Vue3 + TypeScript + Handsontable + math.js 项目。

工作流执行生成组件

vue3中生成的组件效果

我们会使用以下工具组合：

🚀 一、目标与效果

让 GLM-4.6 成为你项目的"智能协作开发者"，能：

1. 根据自然语言描述自动生成 Vue3 组件（.vue 文件）；
2. 自动生成并执行 Cypress / Vitest 测试；
3. 自动更新公式逻辑（math.js 联动计算）；
4. 自动在 Git 分支中提交修改；
5. 根据 CCR 路由判断任务类型（前端 / 测试 / 文档 / 调研）；
6. 由工作流系统自动初始化、配置与执行整个流程。

🧩 二、架构图

你输入任务（自然语言）
        ↓
 [ zcf-runner.js ] —— 负责启动环境、加载模板、调用 API
        ↓
 [ CCR 路由 ] —— 识别任务类型并选择对应工作流
        ↓
 [ Workflow 模板 ]
     ├─ Vue3_Dev_Workflow
     ├─ Test_Gen_Workflow
     ├─ Formula_Optimize_Workflow
     └─ Research_Workflow
        ↓
 [ GLM-4.6 API ]
        ↓
 自动生成代码 / 测试 / 文档 / 提交 / 执行

📁 三、项目文件结构

完整目录结构

glm6-workflow/
├── workflow/                    # GLM-4.6 + ZCF + CCR 工作流系统（独立目录）
│   ├── zcf-runner.js           # 工作流执行脚本
│   ├── zcf.config.json         # 工作流配置文件
│   ├── workflows/              # 工作流模板定义
│   │   ├── vue3-dev.json
│   │   ├── test-gen.json
│   │   ├── formula-opt.json
│   │   └── research.json
│   ├── ccr/                    # 代码调用路由配置
│   │   └── config.json
│   ├── src/                    # 工作流生成的中间文件
│   │   └── components/
│   ├── docs/                   # 工作流生成的文档
│   │   └── components/
│   └── scripts/                # 便捷脚本
│       └── run.sh
├── vue3-project/               # 生成的Vue3应用项目（独立目录）
│   ├── src/
│   │   ├── components/         # 生成的.vue组件文件
│   │   ├── router/
│   │   └── views/
│   ├── package.json
│   ├── main.ts
│   ├── App.vue
│   ├── vite.config.ts
│   └── ...
├── package.json                # 项目依赖
├── pnpm-lock.yaml
└── README.md

目录说明

工作流系统目录 (workflow/)

• zcf-runner.js：工作流执行器，读取 CCR、调用模型并保存输出
• zcf.config.json：工作流配置文件（API密钥、模型设置等）
• workflows/：工作流模板，每个 workflow 包含若干步骤（prompt / command / output）
• ccr/config.json：路由规则，基于关键词匹配工作流
• src/：工作流生成的中间文件（如分析报告）
• docs/：工作流生成的文档文件
• scripts/run.sh：便捷脚本（macOS / Linux）

生成的 Vue3 项目目录 (vue3-project/)

• src/components/：生成的.vue组件文件，可直接在Vue3项目中使用
• 完整的Vue3项目结构，包括路由、视图等
• 可以直接运行 npm run dev 启动开发服务器

⚙️ 四、配置文件

1️⃣ .env（可选）

ZHIPU_API_KEY=...
MODEL=glm-4.6
LANG=zh

💡 你可以在 https://open.bigmodel.cn 登录智谱AI账号，获取 API Key。

2️⃣ workflow/zcf.config.json

{
  "model": "glm-4.6",
  "apiBase": "https://open.bigmodel.cn/api/paas/v4",
  "apiKeyEnv": "你的API密钥或环境变量名",
  "router": "./ccr/config.json",
  "workflowsDir": "./workflows",
  "defaultLang": "zh",
  "thinkMode": "auto",
  "saveOutputs": true
}

3️⃣ workflow/ccr/config.json

{
  "routes": [
    {
      "match": ["vue", "组件", "element-plus", "handsontable"],
      "workflow": "vue3-dev"
    },
    {
      "match": ["测试", "vitest", "cypress"],
      "workflow": "test-gen"
    },
    {
      "match": ["公式", "math.js", "联动"],
      "workflow": "formula-opt"
    },
    {
      "match": ["调研", "库", "比较", "分析"],
      "workflow": "research"
    }
  ]
}

在 workflow/ccr/config.json 中定义任务类型识别规则。

CCR 会根据输入描述里的关键词自动选择合适的流程。

🔧 五、工作流模板

🧱 workflow/workflows/vue3-dev.json

这是 Vue3 组件生成工作流，支持以下特性：

1. 匹配度检测：在执行前检查任务与工作流的匹配度
2. 自动技术栈识别：从 vue3-project/package.json 自动识别技术栈
3. 生成.vue文件：直接生成可用的Vue3组件文件，而非Markdown

完整配置示例：

{
  "name": "Vue3 Component Generator",
  "matchConfig": {
    "enabled": true,
    "threshold": 50,
    "autoDetectTechStack": true,
    "techStack": [
      "Vue3",
      "TypeScript",
      "Element Plus",
      "Handsontable",
      "组件开发",
      "前端开发"
    ],
    "description": "专门用于 Vue3 + TypeScript + Element Plus + Handsontable 组件开发。"
  },
  "steps": [
    {
      "name": "AnalyzeRequirement",
      "mode": "thinking",
      "prompt": "你是一个资深 Vue3 前端工程师..."
    },
    {
      "name": "GenerateCode",
      "prompt": "你是 Vue3 + TypeScript 专家...",
      "output": "src/components/"
    },
    {
      "name": "GenerateDoc",
      "prompt": "请根据生成的 Vue3 组件代码...",
      "output": "docs/components/"
    }
  ]
}

matchConfig 配置参数说明

匹配度检测机制

工作流使用两级检测机制，提高性能：

1. 快速关键词预检（几乎瞬时）

   • 不调用 API，仅本地关键词匹配
   • 如果完全不匹配（<30分）或高度匹配（≥85分），直接返回结果

2. AI 精确判断（仅在需要时）

   • 仅当快速预检分数在 30-84 分之间才调用 AI
   • 使用简化的 prompt，提高响应速度

🧪 workflow/workflows/test-gen.json

{
  "name": "Test Generator",
  "steps": [
    {
      "name": "AnalyzeTarget",
      "mode": "thinking",
      "prompt": "请分析目标模块，识别关键测试点和边界情况。"
    },
    {
      "name": "GenerateTests",
      "prompt": "生成适用于 Cypress 和 Vitest 的自动化测试代码，覆盖主要功能和异常场景。",
      "output": "tests/"
    },
    {
      "name": "RunTests",
      "command": "pnpm run test"
    }
  ]
}

🔢 workflow/workflows/formula-opt.json

{
  "name": "Formula Optimizer",
  "steps": [
    {
      "name": "AnalyzeDependencies",
      "prompt": "分析 math.js 公式依赖关系，找出循环引用和计算瓶颈。"
    },
    {
      "name": "OptimizeLogic",
      "prompt": "优化公式计算逻辑，生成新的 math.js 模块代码，使其在 Handsontable 实时联动中更高效。",
      "output": "src/components/"
    }
  ]
}

🔍 workflow/workflows/research.json

{
  "name": "Library Researcher",
  "steps": [
    {
      "name": "CompareLibraries",
      "prompt": "对比在浏览器端可用的数学解析库（如 math.js、nerdamer、expr-eval 等），输出性能、体积、兼容性。"
    },
    {
      "name": "GenerateReport",
      "prompt": "输出调研报告（Markdown），推荐最适合 Vue3 + TS 项目的方案。",
      "output": "docs/research/"
    }
  ]
}

🧰 六、运行脚本

workflow/scripts/run.sh

#!/bin/bash
TASK="$*"
if [ -z "$TASK" ]; then
  echo "Usage: bash workflow/scripts/run.sh "你的任务描述""
  exit 1
fi
echo "🧠 检测任务类型中..."
cd "$(dirname "$0")/.."
node zcf-runner.js "$TASK"

使用方式

方式1：使用 npm 脚本

npm start "生成一个支持公式联动的 Handsontable 表格组件"

方式2：直接运行

node workflow/zcf-runner.js "生成一个支持公式联动的 Handsontable 表格组件"

方式3：使用便捷脚本

bash workflow/scripts/run.sh "生成一个支持公式联动的 Handsontable 表格组件"

🚀 七、执行流程示例

示例1：生成Vue3组件

输入：

npm start "生成一个支持公式联动的 Handsontable 表格组件"

执行流程：

1. CCR 检测到关键词"表格 + Handsontable"
2. 路由到 vue3-dev 工作流
3. 快速关键词预检（匹配度：85%）
4. 匹配度检查通过，继续执行
5. GLM-4.6 启动思考模式，分析需求
6. 生成Vue3组件代码
7. 自动提取Vue代码并保存为 .vue 文件
   • 保存到：vue3-project/src/components/Handsontable.vue
   • 同时保存原始输出到：workflow/src/components/GenerateCode.md
8. 生成使用文档
   • 保存到：workflow/docs/components/GenerateDoc.md

示例2：任务不匹配

输入：

npm start "写一个Python后端API"

执行流程：

1. CCR 路由到 vue3-dev 工作流
2. 快速关键词预检（匹配度：20%）
3. ❌ 匹配度检查失败（低于50%阈值）
4. 工作流终止，显示错误信息：

   ❌ 工作流终止：任务内容不匹配
   任务匹配度仅为 20%，低于 50% 阈值。
   该工作流适用于：Vue3、TypeScript、Element Plus、Handsontable、组件开发、前端开发。
   

📦 八、核心功能说明

1. 自动技术栈识别

系统会自动从 vue3-project/package.json 中识别技术栈：

// 支持的自动识别技术栈
{
  'vue': 'Vue3',
  'typescript': 'TypeScript',
  'element-plus': 'Element Plus',
  'handsontable': 'Handsontable',
  'mathjs': 'Math.js',
  'pinia': 'Pinia',
  'vue-router': 'Vue Router',
  // ... 更多
}

自动识别的技术栈会与工作流配置中的 techStack 合并，用于匹配度检测。

2. 智能组件命名

系统会根据任务描述自动生成合适的组件文件名：

• "生成一个 Handsontable 表格组件" → Handsontable.vue
• "创建一个表单组件" → Form.vue
• "开发一个树形菜单" → Tree.vue

3. Vue代码提取

系统会智能提取AI输出中的Vue代码：

• 自动识别 markdown 代码块（vue`、typescript`等）
• 提取完整的Vue单文件组件结构（template + script + style）
• 保存为可直接使用的 .vue 文件

📦 九、生成的 Vue3 项目配置说明

项目结构

生成的 vue3-project/ 目录结构：

vue3-project/
├── index.html              # HTML 入口文件
├── App.vue                 # Vue 根组件（位于根目录）
├── package.json            # 项目依赖配置
├── vite.config.ts          # Vite 配置
├── vue.config.js           # Vue CLI 配置（可选）
├── tsconfig.json           # TypeScript 配置
└── src/
    ├── main.ts             # 应用入口（位于 src 目录）
    ├── router/
    │   └── index.ts        # 路由配置
    ├── views/
    │   └── Home.vue        # 页面组件
    └── components/         # 组件目录（生成的.vue文件在这里）

依赖版本配置

重要依赖版本要求：

• @vue/cli-service: ^5.0.0
• @vue/cli-plugin-typescript: ~5.0.0（必须与 cli-service 版本兼容）
• vue: ^3.3.0
• typescript: ^5.0.0
• vite: ^4.0.0

⚠️ 注意：@vue/cli-plugin-typescript 的版本必须与 @vue/cli-service 版本匹配。使用 ^1.0.0 会导致安装失败。

Vite 配置

vite.config.ts 已配置支持 IP 访问：

export default defineConfig({
  server: {
    host: '0.0.0.0', // 允许通过 IP 地址访问
    port: 3000,
    open: true
  }
});

启动开发服务器后，可以通过以下方式访问：

• 本机：http://localhost:3000/
• 局域网其他设备：http://你的IP地址:3000/

TypeScript 配置

tsconfig.json 关键配置：

• 路径别名：@/* 映射到 src/*
• Include：包含 src/**/* 和根目录的 *.ts、*.vue

项目入口

• HTML 入口：index.html 中引用 /src/main.ts
• 应用入口：src/main.ts，使用 @/router 别名导入路由
• 根组件：App.vue 位于项目根目录

启动项目

cd vue3-project
npm install  # 或 pnpm install
npm run dev  # 或 pnpm dev

🧭 十、拓展建议

📊 十一、可扩展功能

🔒 十二、安全建议

• 在 .env 存储 API Key，避免硬编码；
• 设置工作流权限仅限本地或 CI 环境；
• 使用 Git 分支隔离自动生成内容；
• 审核模型输出后再 merge。

🧠 十三、ZCF 的使用逻辑说明

关于 ZCF

• ZCF（Zero Config Flow）是一个工作流管理框架的设计理念
• 在本项目中，我们使用 zcf-runner.js 代替了 ZCF CLI 的功能：
  • 可以直接读取工作流 JSON 和 CCR 配置
  • 调用 GLM-4.6 API
  • 管理步骤上下文和占位符替换
  • 输出到统一目录
• 不需要额外安装 ZCF 就可以运行工作流
• 这是为了兼容国内环境（无法直接使用官方 ZCF CLI），并且可以直接用 Node.js + pnpm 运行

🎯 快速参考

常用命令

# 安装依赖
npm install

# 运行工作流
npm start "你的任务描述"

# 开发Vue3项目
cd vue3-project && npm run dev

配置文件位置

• 工作流配置：workflow/zcf.config.json
• 路由配置：workflow/ccr/config.json
• 工作流模板：workflow/workflows/*.json
• Vue3项目配置：vue3-project/package.json

生成的文件位置

• Vue组件：vue3-project/src/components/*.vue
• 工作流文档：workflow/docs/components/*.md
• 中间文件：workflow/src/components/*.md