@coze-arch/cli 0.0.1-alpha.8a7e7e → 0.0.1-alpha.8b5326

package/lib/__templates__/{vite-vue → nuxt-vue}/postcss.config.mjs

@@ -1,6 +1,8 @@
-export default {
+const config = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   },
 };
+
+export default config;

package/lib/__templates__/nuxt-vue/public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

package/lib/__templates__/{vite-vue → nuxt-vue}/scripts/build.sh

@@ -8,7 +8,7 @@ cd "${COZE_WORKSPACE_PATH}"
 echo "Installing dependencies..."
 pnpm install --prefer-frozen-lockfile --prefer-offline --loglevel debug --reporter=append-only
 
-echo "Building the project..."
-npx vite build
+echo "Building the Nuxt.js project..."
+npx nuxt build
 
 echo "Build completed successfully!"

package/lib/__templates__/{vite-vue → nuxt-vue}/scripts/dev.sh

@@ -1,9 +1,16 @@
 #!/bin/bash
 set -Eeuo pipefail
 
+<% if (process.env.NODE_ENV === 'test') { %>
+# 测试环境：支持环境变量覆盖端口
+PORT="${PORT:-<%= port %>}"
+COZE_WORKSPACE_PATH="${COZE_WORKSPACE_PATH:-$(pwd)}"
+DEPLOY_RUN_PORT="${DEPLOY_RUN_PORT:-${PORT}}"
+<% } else { %>
 PORT=<%= port %>
 COZE_WORKSPACE_PATH="${COZE_WORKSPACE_PATH:-$(pwd)}"
 DEPLOY_RUN_PORT=<%= port %>
+<% } %>
 
 cd "${COZE_WORKSPACE_PATH}"
 
@@ -27,6 +34,6 @@ kill_port_if_listening() {
 
 echo "Clearing port ${PORT} before start."
 kill_port_if_listening
-echo "Starting HTTP service on port ${PORT} for dev..."
+echo "Starting Nuxt dev server on port ${PORT}..."
 
-npx vite --port $PORT
+PORT=$PORT npx nuxt dev

package/lib/__templates__/nuxt-vue/scripts/prepare.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+set -Eeuo pipefail
+
+COZE_WORKSPACE_PATH="${COZE_WORKSPACE_PATH:-$(pwd)}"
+
+cd "${COZE_WORKSPACE_PATH}"
+
+echo "Installing dependencies..."
+pnpm install --prefer-frozen-lockfile --prefer-offline
+
+echo "Preparing Nuxt project..."
+pnpm exec nuxt prepare
+
+echo "Preparation completed successfully!"

package/lib/__templates__/nuxt-vue/scripts/start.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+set -Eeuo pipefail
+
+COZE_WORKSPACE_PATH="${COZE_WORKSPACE_PATH:-$(pwd)}"
+<% if (process.env.NODE_ENV === 'test') { %>
+# 测试环境：支持环境变量覆盖端口
+PORT="${PORT:-<%= port %>}"
+DEPLOY_RUN_PORT="${DEPLOY_RUN_PORT:-${PORT}}"
+<% } else { %>
+PORT=<%= port %>
+DEPLOY_RUN_PORT="${DEPLOY_RUN_PORT:-$PORT}"
+<% } %>
+
+start_service() {
+    cd "${COZE_WORKSPACE_PATH}"
+    echo "Starting Nuxt.js service on port ${DEPLOY_RUN_PORT} for production..."
+    PORT=${DEPLOY_RUN_PORT} node .output/server/index.mjs
+}
+
+echo "Starting Nuxt.js service on port ${DEPLOY_RUN_PORT} for production..."
+start_service

package/lib/__templates__/nuxt-vue/server/api/hello.ts

@@ -0,0 +1,10 @@
+/**
+ * Hello API 示例
+ * 访问: http://localhost:<%= port %>/api/hello
+ */
+export default defineEventHandler(() => {
+  return {
+    message: 'Hello from Nuxt API',
+    timestamp: new Date().toISOString(),
+  };
+});

package/lib/__templates__/nuxt-vue/server/middleware/logger.ts

@@ -0,0 +1,10 @@
+/**
+ * 请求日志中间件（仅开发环境）
+ */
+export default defineEventHandler((event) => {
+  const isDev = process.env.COZE_PROJECT_ENV !== 'PROD';
+
+  if (isDev) {
+    console.log(`${event.method} ${event.path}`);
+  }
+});

package/lib/__templates__/nuxt-vue/server/routes/health.ts

@@ -0,0 +1,10 @@
+/**
+ * 健康检查路由
+ * 访问: http://localhost:<%= port %>/health
+ */
+export default defineEventHandler(() => {
+  return {
+    status: 'ok',
+    timestamp: new Date().toISOString(),
+  };
+});

package/lib/__templates__/nuxt-vue/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx,vue}',
+    './pages/**/*.{js,ts,jsx,tsx,vue}',
+    './components/**/*.{js,ts,jsx,tsx,vue}',
+  ],
+  darkMode: 'media',
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/lib/__templates__/nuxt-vue/template.config.js

@@ -0,0 +1,87 @@
+
+
+
+
+
+
+
+
+
+const description = `Nuxt.js（服务端 + Vue）：\`coze init \${COZE_WORKSPACE_PATH} --template nuxt-vue\`
+- 适用：全栈应用、需要服务端接口能力的 Vue 项目
+- 特点：
+    - **服务端能力**：内置服务端 API 路由，可直接创建后端接口
+    - **Vue 3**：基于最新的 Vue 3 Composition API
+    - **Vite**：使用 Vite 作为构建工具，开发体验极佳
+    - **TypeScript**：完整的 TypeScript 支持
+    - **文件路由**：基于文件系统的自动路由
+    - **项目理解加速**：可依赖项目下 \`package.json\` 和 \`nuxt.config.ts\` 理解项目配置`;
+
+export const paramsSchema = {
+  type: 'object',
+  properties: {
+    appName: {
+      type: 'string',
+      minLength: 1,
+      pattern: '^[a-z0-9-]+$',
+      description:
+        'Application name (lowercase, alphanumeric and hyphens only)',
+    },
+    port: {
+      type: 'number',
+      default: 5000,
+      minimum: 1024,
+      maximum: 65535,
+      description: 'Development server port (for Nuxt dev server)',
+    },
+    hmrPort: {
+      type: 'number',
+      default: 6000,
+      minimum: 1024,
+      maximum: 65535,
+      description: 'Hot Module Replacement (HMR) port',
+    },
+  },
+  required: [],
+  additionalProperties: false,
+};
+
+const config = {
+  description: description,
+  paramsSchema,
+
+  // 显式定义默认参数，确保在渲染时可用
+  defaultParams: {
+    port: 5000,
+    hmrPort: 6000,
+    appName: 'nuxt-vue',
+  },
+
+  onBeforeRender: async context => {
+    console.log(`Creating Nuxt.js project: ${context.appName}`);
+    return context;
+  },
+
+  onAfterRender: async (_context, outputPath) => {
+    console.log(`\nProject created at: ${outputPath}`);
+    console.log('\nConfiguration:');
+    console.log('  - Framework: Nuxt.js');
+    console.log('  - TypeScript: enabled');
+    console.log('  - Vue: 3.x');
+    console.log('  - Build Tool: Vite');
+    console.log(`  - Port: ${_context.port}`);
+  },
+
+  onComplete: async (_context, _outputPath) => {
+    // Skip additional setup in test environment
+    if (process.env.NODE_ENV === 'test') {
+      console.log('⊘ Skipping additional setup in test environment');
+      return;
+    }
+
+    console.log('\n✓ Nuxt.js project setup completed!');
+    console.log('  You can now start the development server');
+  },
+};
+
+export default config;

package/lib/__templates__/nuxt-vue/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}

package/lib/__templates__/templates.json

@@ -63,9 +63,9 @@
       }
     },
     {
-      "name": "taro",
-      "description": "Taro（小程序 + H5）：`coze init ${COZE_WORKSPACE_PATH} --template taro`\n- 适用：微信小程序、H5 跨端应用\n- 前后端分离架构：Taro 4 + NestJS\n- 支持微信小程序和 H5 双端构建\n- 使用 TailwindCSS + weapp-tailwindcss 实现跨端样式",
-      "location": "./taro",
+      "name": "nuxt-vue",
+      "description": "Nuxt.js（服务端 + Vue）：`coze init ${COZE_WORKSPACE_PATH} --template nuxt-vue`\n- 适用：全栈应用、需要服务端接口能力的 Vue 项目\n- 特点：\n    - **服务端能力**：内置服务端 API 路由，可直接创建后端接口\n    - **Vue 3**：基于最新的 Vue 3 Composition API\n    - **Vite**：使用 Vite 作为构建工具，开发体验极佳\n    - **TypeScript**：完整的 TypeScript 支持\n    - **文件路由**：基于文件系统的自动路由\n    - **项目理解加速**：可依赖项目下 `package.json` 和 `nuxt.config.ts` 理解项目配置",
+      "location": "./nuxt-vue",
       "paramsSchema": {
         "type": "object",
         "properties": {
@@ -80,14 +80,14 @@
             "default": 5000,
             "minimum": 1024,
             "maximum": 65535,
-            "description": "H5 development server port"
+            "description": "Development server port (for Nuxt dev server)"
           },
-          "serverPort": {
+          "hmrPort": {
             "type": "number",
-            "default": 3000,
+            "default": 6000,
             "minimum": 1024,
             "maximum": 65535,
-            "description": "NestJS backend server port"
+            "description": "Hot Module Replacement (HMR) port"
           }
         },
         "required": [],
@@ -95,9 +95,9 @@
       }
     },
     {
-      "name": "vite",
-      "description": "Vite（简单项目）：`coze init ${COZE_WORKSPACE_PATH} --template vite`\n- 适用：轻量级 SPA、纯前端交互、仪表盘等轻量级项目。",
-      "location": "./vite",
+      "name": "taro",
+      "description": "Taro（小程序 + H5）：`coze init ${COZE_WORKSPACE_PATH} --template taro`\n- 适用：微信小程序、H5 跨端应用\n- 前后端分离架构：Taro 4 + NestJS\n- 支持微信小程序和 H5 双端构建\n- 使用 TailwindCSS + weapp-tailwindcss 实现跨端样式",
+      "location": "./taro",
       "paramsSchema": {
         "type": "object",
         "properties": {
@@ -112,14 +112,14 @@
             "default": 5000,
             "minimum": 1024,
             "maximum": 65535,
-            "description": "Development server port"
+            "description": "H5 development server port"
           },
-          "hmrPort": {
+          "serverPort": {
             "type": "number",
-            "default": 6000,
+            "default": 3000,
             "minimum": 1024,
             "maximum": 65535,
-            "description": "Development HMR server port"
+            "description": "NestJS backend server port"
           }
         },
         "required": [],
@@ -127,9 +127,9 @@
       }
     },
     {
-      "name": "vite-vue",
-      "description": "Vite + Vue 3（Vue 项目）：`coze init ${COZE_WORKSPACE_PATH} --template vite-vue`\n- 适用：使用 Vue 3 框架的 SPA 应用、交互式前端、组件化仪表盘等项目。",
-      "location": "./vite-vue",
+      "name": "vite",
+      "description": "Vite（简单项目）：`coze init ${COZE_WORKSPACE_PATH} --template vite`\n- 适用：轻量级 SPA、纯前端交互、仪表盘等轻量级项目。",
+      "location": "./vite",
       "paramsSchema": {
         "type": "object",
         "properties": {

package/lib/__templates__/vite/README.md

@@ -1,6 +1,12 @@
 # <%= appName %>
 
-这是一个基于 TypeScript + Vite + Tailwind CSS 的轻量级 Web 应用项目，由扣子编程 CLI 创建。
+这是一个基于 Express + Vite + TypeScript + Tailwind CSS 的全栈 Web 应用项目，由扣子编程 CLI 创建。
+
+**核心特性：**
+- 🚀 前端：Vite + TypeScript + Tailwind CSS
+- 🔧 后端：Express + TypeScript，提供 RESTful API
+- 🔥 开发模式：Vite HMR + Express API，单进程启动
+- 📦 生产模式：Express 静态服务 + API，高性能部署
 
 ## 快速开始
 
@@ -33,19 +39,149 @@ coze start
 ## 项目结构
 
 ```
-├── index.html              # HTML 入口文件
-├── src/
-│   ├── index.ts           # 应用入口（初始化）
-│   ├── main.ts            # 主逻辑文件
-│   └── index.css          # 全局样式（包含 Tailwind 指令）
-├── vite.config.ts         # Vite 配置
-├── tailwind.config.ts     # Tailwind CSS 配置
-└── tsconfig.json          # TypeScript 配置
+├── server/                # 后端服务器目录
+│   ├── index.ts          # express 服务器入口
+│   ├── routes/           # API 路由目录
+│   │   └── index.ts      # 路由定义
+│   └── vite.ts           # Vite 集成逻辑
+├── src/                   # 前端源码目录
+│   ├── index.ts          # 前端应用入口（初始化）
+│   ├── main.ts           # 前端主逻辑文件
+│   └── index.css         # 全局样式（包含 Tailwind 指令）
+├── index.html            # HTML 入口文件
+├── vite.config.ts        # Vite 配置
+├── tailwind.config.ts    # Tailwind CSS 配置
+└── tsconfig.json         # TypeScript 配置
 ```
 
+**目录说明：**
+
+- **`server/`** - 后端服务器代码
+  - `server.ts` - 服务器主入口，负责创建和启动 Express 应用
+  - `routes/` - API 路由模块，支持按功能拆分路由
+  - `vite.ts` - Vite 开发服务器和静态文件服务集成
+
+- **`src/`** - 前端应用代码
+  - 所有前端相关代码都在这里
+
+**工作原理：**
+
+- **开发模式** (`coze dev`)：
+  - 运行 `server/server.ts` 启动 Express 服务器
+  - Vite 以 middleware 模式集成到 Express
+  - 前端支持 HMR（热模块替换）
+  - 后端 API 和前端在同一进程，端口 <%= port %>
+
+- **生产模式** (`coze start`)：
+  - `coze build` 构建前端 → `dist/` 目录
+  - `coze build` 构建后端 → `dist-server/index.js` (CommonJS 格式)
+  - 运行 `dist-server/index.js` 启动生产服务器
+  - Express 服务静态文件 + API 路由
+  - 单一 Node.js 进程，轻量高效
+
 ## 核心开发规范
 
-### 1. 样式开发
+### 1. 后端 API 开发
+
+**添加新的 API 路由**
+
+在 `server/routes/index.ts` 中添加路由：
+
+```typescript
+// GET 请求示例
+router.get('/api/users', (req, res) => {
+  res.json({
+    users: [
+      { id: 1, name: 'Alice' },
+      { id: 2, name: 'Bob' },
+    ],
+  });
+});
+
+// POST 请求示例
+router.post('/api/users', (req, res) => {
+  const userData = req.body;
+  // 处理业务逻辑
+  res.json({
+    success: true,
+    user: userData,
+  });
+});
+
+// 动态路由参数
+router.get('/api/users/:id', (req, res) => {
+  const userId = req.params.id;
+  res.json({
+    id: userId,
+    name: 'User ' + userId,
+  });
+});
+```
+
+**拆分路由模块**（推荐）
+
+当路由变多时，可以按功能拆分：
+
+```typescript
+// server/routes/users.ts
+import { Router } from 'express';
+
+const router = Router();
+
+router.get('/api/users', (req, res) => {
+  // 用户列表逻辑
+  res.json({ users: [] });
+});
+
+router.post('/api/users', (req, res) => {
+  // 创建用户逻辑
+  res.json({ success: true });
+});
+
+export default router;
+```
+
+然后在 `server/server.ts` 中注册：
+
+```typescript
+import usersRouter from './routes/users';
+
+// 注册路由
+app.use(usersRouter);
+```
+
+**前端调用 API**
+
+```typescript
+// GET 请求
+async function getUsers() {
+  const response = await fetch('/api/users');
+  const data = await response.json();
+  console.log(data);
+}
+
+// POST 请求
+async function createUser(name: string) {
+  const response = await fetch('/api/users', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ name }),
+  });
+  const data = await response.json();
+  console.log(data);
+}
+```
+
+**API 最佳实践**
+
+- ✅ 所有 API 路由以 `/api` 开头，避免与前端路由冲突
+- ✅ 使用 RESTful 设计：GET 查询、POST 创建、PUT 更新、DELETE 删除
+- ✅ 返回统一的响应格式：`{ success: boolean, data?: any, error?: string }`
+- ✅ 添加错误处理和参数验证
+
+### 2. 样式开发
 
 **使用 Tailwind CSS**
 
@@ -219,17 +355,31 @@ console.log(apiUrl); // https://api.example.com
 
 ## 技术栈
 
-- **构建工具**: Vite 6.x
+**前端：**
+- **构建工具**: Vite 7.x
 - **语言**: TypeScript 5.x
 - **样式**: Tailwind CSS 3.x
+
+**后端：**
+- **框架**: Express 4.x
+- **内置中间件**: express.json(), express.urlencoded(), express.static()
+
+**工具：**
 - **包管理器**: pnpm 9+
+- **运行时**: Node.js 18+
+- **开发工具**: tsx (TypeScript 执行器)
 
 ## 参考文档
 
+**前端：**
 - [Vite 官方文档](https://cn.vitejs.dev/)
 - [TypeScript 官方文档](https://www.typescriptlang.org/zh/docs/)
 - [Tailwind CSS 文档](https://tailwindcss.com/docs)
 
+**后端：**
+- [Express 官方文档](https://expressjs.com/)
+- [Express 中文文档](https://expressjs.com/zh-cn/)
+
 ## 重要提示
 
 1. **必须使用 pnpm** 作为包管理器
@@ -237,3 +387,32 @@ console.log(apiUrl); // https://api.example.com
 3. **使用 Tailwind CSS** 进行样式开发，支持响应式和暗色模式
 4. **环境变量必须以 `VITE_` 开头** 才能在客户端代码中访问
 5. **开发时使用 `coze dev`**，支持热更新和快速刷新
+6. **API 路由以 `/api` 开头**，避免与前端路由冲突
+7. **单进程架构**：开发和生产环境都是前后端在同一进程中运行
+
+## 常见问题
+
+**Q: 如何分离前后端端口？**
+
+如果需要前后端分离部署，可以：
+- 前端：使用 `npx vite` 单独启动（默认端口 5173）
+- 后端：修改 `server.ts`，移除 Vite middleware，单独启动
+
+**Q: 如何添加数据库？**
+
+```bash
+# 安装数据库客户端（以 PostgreSQL 为例）
+pnpm add pg
+pnpm add -D @types/pg
+
+# 在 server.ts 中使用
+import { Pool } from 'pg';
+const pool = new Pool({ connectionString: process.env.DATABASE_URL });
+```
+
+**Q: 如何部署？**
+
+1. 运行 `coze build` 构建前后端
+2. 将整个项目上传到服务器
+3. 运行 `pnpm install --prod`
+4. 运行 `coze start` 启动服务

package/lib/__templates__/vite/_gitignore

@@ -5,6 +5,7 @@ node_modules/
 
 # Production build
 dist/
+dist-server/
 build/
 out/
 

package/lib/__templates__/vite/eslint.config.mjs

@@ -5,5 +5,10 @@ import { defineConfig, globalIgnores } from 'eslint/config';
 export default defineConfig([
   eslint.configs.recommended,
   ...tseslint.configs.recommended,
-  globalIgnores(['dist/**', 'node_modules/**']),
+  globalIgnores([
+    'dist/**',
+    'dist-server/**',
+    'node_modules/**',
+    'scripts/**',
+  ]),
 ]);

package/lib/__templates__/vite/package.json

@@ -1,7 +1,7 @@
 {
   "name": "<%= appName %>",
   "version": "1.0.0",
-  "description": "Vanilla TypeScript application with Vite (HTML + CSS + TS)",
+  "description": "Vanilla TypeScript application with Express + Vite (HTML + CSS + TS + Node API)",
   "scripts": {
     "build": "bash ./scripts/build.sh",
     "dev": "bash ./scripts/dev.sh",
@@ -12,15 +12,21 @@
   },
   "dependencies": {
     "@supabase/supabase-js": "2.95.3",
-    "dotenv": "^17.2.3"
+    "dotenv": "^17.2.3",
+    "express": "^4.21.2"
   },
   "devDependencies": {
+    "@types/express": "^5.0.0",
+    "@types/node": "^22.10.5",
     "autoprefixer": "^10.4.20",
     "coze-coding-dev-sdk": "^0.7.16",
+    "esbuild": "^0.24.2",
     "eslint": "^9",
     "only-allow": "^1.2.2",
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.17",
+    "tsup": "^8.3.5",
+    "tsx": "^4.19.2",
     "typescript": "^5.6.0",
     "typescript-eslint": "^8",
     "vite": "^7.2.4"
@@ -31,7 +37,8 @@
   },
   "pnpm": {
     "overrides": {
-      "esbuild": "^0.27.2"
+      "esbuild": "^0.27.2",
+      "is-generator-function": "1.0.10"
     }
   }
 }