@coze-arch/cli 0.0.1-alpha.912cd5 → 0.0.1-alpha.a3fb1a

package/lib/__templates__/templates.json

@@ -52,7 +52,7 @@
         "port": {
           "type": "number",
           "description": "Development server port",
-          "default": 5000,
+          "default": 6000,
           "minimum": 1024,
           "maximum": 65535
         }

package/lib/__templates__/vite/.coze

@@ -2,10 +2,10 @@
 requires = ["nodejs-24"]
 
 [dev]
-run = ["npm", "run", "dev"]
+run = ["bash", "./scripts/dev.sh"]
 deps = ["git"] # -> apt install git
 
 [deploy]
-build = ["npm", "run", "build"]
-run = ["npm", "run", "start"]
+build = ["bash","./scripts/build.sh"]
+run = ["bash","./scripts/start.sh"]
 deps = ["git"] # -> apt install git

package/lib/__templates__/vite/README.md

@@ -1,61 +1,239 @@
 # <%= appName %>
 
-Vanilla TypeScript application built with Vite.
+这是一个基于 TypeScript + Vite + Tailwind CSS 的轻量级 Web 应用项目，由扣子编程 CLI 创建。
 
-## Getting Started
+## 快速开始
 
-Install dependencies:
+### 启动开发服务器
 
 ```bash
-npm install
+coze dev
 ```
 
-Start development server:
+启动后，在浏览器中打开 [http://localhost:<%= port %>](http://localhost:<%= port %>) 查看应用。
+
+开发服务器支持热更新（HMR），修改代码后页面会自动刷新。
+
+### 构建生产版本
 
 ```bash
-npm run dev
+coze build
 ```
 
-Or use coze-coding CLI:
+构建产物位于 `dist/` 目录，可直接部署到静态托管服务。
+
+### 预览生产版本
 
 ```bash
-coze-coding dev
+coze start
 ```
 
-## Build
+在本地启动一个静态服务器，预览生产构建的效果。
 
-Build for production:
+## 项目结构
 
-```bash
-npm run build
+```
+├── index.html              # HTML 入口文件
+├── src/
+│   ├── index.ts           # 应用入口（初始化）
+│   ├── main.ts            # 主逻辑文件
+│   └── index.css          # 全局样式（包含 Tailwind 指令）
+├── vite.config.ts         # Vite 配置
+├── tailwind.config.ts     # Tailwind CSS 配置
+└── tsconfig.json          # TypeScript 配置
 ```
 
-Or:
+## 核心开发规范
 
-```bash
-coze-coding build
+### 1. 样式开发
+
+**使用 Tailwind CSS**
+
+本项目使用 Tailwind CSS 进行样式开发，支持亮色/暗色模式自动切换。
+
+```typescript
+// 使用 Tailwind 工具类
+app.innerHTML = `
+  <div class="flex items-center justify-center min-h-screen bg-white dark:bg-black">
+    <h1 class="text-4xl font-bold text-black dark:text-white">
+      Hello World
+    </h1>
+  </div>
+`;
 ```
 
-## Preview
+**主题变量**
+
+主题变量定义在 `src/index.css` 中，支持自动适配系统主题：
+
+```css
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+```
 
-Preview production build:
+**常用 Tailwind 类名**
+
+- 布局：`flex`, `grid`, `container`, `mx-auto`
+- 间距：`p-4`, `m-4`, `gap-4`, `space-x-4`
+- 颜色：`bg-white`, `text-black`, `dark:bg-black`, `dark:text-white`
+- 排版：`text-lg`, `font-bold`, `leading-8`, `tracking-tight`
+- 响应式：`sm:`, `md:`, `lg:`, `xl:`
+
+### 2. 依赖管理
+
+**必须使用 pnpm 管理依赖**
 
 ```bash
-npm run preview
+# ✅ 安装依赖
+pnpm install
+
+# ✅ 添加新依赖
+pnpm add package-name
+
+# ✅ 添加开发依赖
+pnpm add -D package-name
+
+# ❌ 禁止使用 npm 或 yarn
+# npm install  # 错误！
+# yarn add     # 错误！
 ```
 
-Or:
+项目已配置 `preinstall` 脚本，使用其他包管理器会报错。
+
+### 3. TypeScript 开发
+
+**类型安全**
+
+充分利用 TypeScript 的类型系统，确保代码质量：
+
+```typescript
+// 定义接口
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+// 使用类型
+function createUser(data: User): void {
+  console.log(`Creating user: ${data.name}`);
+}
+
+// DOM 操作类型推断
+const button = document.querySelector<HTMLButtonElement>('#my-button');
+if (button) {
+  button.addEventListener('click', () => {
+    console.log('Button clicked');
+  });
+}
+```
+
+**避免 any 类型**
+
+尽量避免使用 `any`，使用 `unknown` 或具体类型：
+
+```typescript
+// ❌ 不推荐
+function process(data: any) { }
+
+// ✅ 推荐
+function process(data: unknown) {
+  if (typeof data === 'string') {
+    console.log(data.toUpperCase());
+  }
+}
+```
+
+## 常见开发场景
+
+### 添加新页面
+
+本项目是单页应用（SPA），如需多页面：
+
+1. 在 `src/` 下创建新的 `.ts` 文件
+2. 在 `vite.config.ts` 中配置多入口
+3. 创建对应的 `.html` 文件
+
+### DOM 操作
+
+```typescript
+// 获取元素
+const app = document.getElementById('app');
+const button = document.querySelector<HTMLButtonElement>('.my-button');
+
+// 动态创建元素
+const div = document.createElement('div');
+div.className = 'flex items-center gap-4';
+div.textContent = 'Hello World';
+app?.appendChild(div);
+
+// 事件监听
+button?.addEventListener('click', (e) => {
+  console.log('Clicked', e);
+});
+```
+
+### 数据获取
+
+```typescript
+// Fetch API
+async function fetchData() {
+  try {
+    const response = await fetch('https://api.example.com/data');
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Failed to fetch data:', error);
+  }
+}
+
+// 使用数据
+fetchData().then(data => {
+  console.log(data);
+});
+```
+
+### 环境变量
+
+在 `.env` 文件中定义环境变量（需以 `VITE_` 开头）：
 
 ```bash
-coze-coding start
+VITE_API_URL=https://api.example.com
+```
+
+在代码中使用：
+
+```typescript
+const apiUrl = import.meta.env.VITE_API_URL;
+console.log(apiUrl); // https://api.example.com
 ```
 
-## Configuration
+## 技术栈
+
+- **构建工具**: Vite 6.x
+- **语言**: TypeScript 5.x
+- **样式**: Tailwind CSS 3.x
+- **包管理器**: pnpm 9+
+
+## 参考文档
 
-- Dev Server Port: <%= port %>
+- [Vite 官方文档](https://cn.vitejs.dev/)
+- [TypeScript 官方文档](https://www.typescriptlang.org/zh/docs/)
+- [Tailwind CSS 文档](https://tailwindcss.com/docs)
 
-## Tech Stack
+## 重要提示
 
-- TypeScript
-- Vite
-- HTML + CSS
+1. **必须使用 pnpm** 作为包管理器
+2. **使用 TypeScript** 进行类型安全开发，避免使用 `any`
+3. **使用 Tailwind CSS** 进行样式开发，支持响应式和暗色模式
+4. **环境变量必须以 `VITE_` 开头** 才能在客户端代码中访问
+5. **开发时使用 `coze dev`**，支持热更新和快速刷新

package/lib/__templates__/vite/template.config.js

@@ -19,7 +19,7 @@ export const paramsSchema = {
     },
     port: {
       type: 'number',
-      default: 5000,
+      default: 6000,
       minimum: 1024,
       maximum: 65535,
       description: 'Development server port',

package/lib/cli.js

@@ -11,6 +11,7 @@ var jsYaml = require('js-yaml');
 var perf_hooks = require('perf_hooks');
 var addFormats = require('ajv-formats');
 var Ajv = require('ajv');
+var minimist = require('minimist');
 var changeCase = require('change-case');
 var ejs = require('ejs');
 
@@ -882,6 +883,8 @@ const getTemplatePath = async (
  * 从 Commander 解析透传参数
  * 将 kebab-case 的 CLI 参数转换为 camelCase
  *
+ * 使用 minimist 解析 process.argv，自动处理类型转换
+ *
  * @param command - Commander 命令实例
  * @param knownOptions - 已知的选项集合（不需要透传的选项）
  * @returns 参数对象
@@ -890,20 +893,34 @@ const parsePassThroughParams = (
   command,
   knownOptions = new Set(),
 ) => {
-  const rawOptions = command.opts();
+  // 使用 minimist 解析所有参数
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers -- slice(2) to skip node and script path
+  const parsed = minimist(process.argv.slice(2));
 
-  const initial = {};
-  return Object.entries(rawOptions).reduce(
+  // 过滤掉已知选项和位置参数(_)
+  const filtered = Object.entries(parsed).reduce(
     (params, [key, value]) => {
-      if (knownOptions.has(key)) {
+      // 跳过 minimist 的位置参数数组
+      if (key === '_') {
+        return params;
+      }
+
+      // 跳过已知选项（支持原始格式和 camelCase 格式）
+      if (knownOptions.has(key) || knownOptions.has(changeCase.camelCase(key))) {
         return params;
       }
 
+      // 将 kebab-case 转换为 camelCase
       const camelKey = changeCase.camelCase(key);
-      return { ...params, [camelKey]: value };
+      // eslint-disable-next-line security/detect-object-injection -- camelKey is sanitized by camelCase
+      params[camelKey] = value;
+
+      return params;
     },
-    initial,
+    {},
   );
+
+  return filtered;
 };
 
 /**
@@ -1581,7 +1598,7 @@ const registerCommand = program => {
     });
 };
 
-var version = "0.0.1-alpha.912cd5";
+var version = "0.0.1-alpha.a3fb1a";
 var packageJson = {
 	version: version};
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coze-arch/cli",
-  "version": "0.0.1-alpha.912cd5",
+  "version": "0.0.1-alpha.a3fb1a",
   "private": false,
   "description": "coze coding devtools cli",
   "license": "MIT",
@@ -38,6 +38,7 @@
     "commander": "~12.1.0",
     "ejs": "^3.1.10",
     "js-yaml": "^4.1.0",
+    "minimist": "^1.2.5",
     "shelljs": "^0.10.0"
   },
   "devDependencies": {
@@ -51,6 +52,7 @@
     "@types/ejs": "^3.1.5",
     "@types/iarna__toml": "^2.0.5",
     "@types/js-yaml": "^4.0.9",
+    "@types/minimist": "^1.2.5",
     "@types/node": "^24",
     "@types/shelljs": "^0.10.0",
     "@vitest/coverage-v8": "~4.0.16",