create-component-template-cli 1.0.0 → 1.0.1

package/.changeset/config.json

@@ -5,7 +5,7 @@
   "fixed": [],
   "linked": [],
   "access": "restricted",
-  "baseBranch": "master",
+  "baseBranch": "agent-cli",
   "updateInternalDependencies": "patch",
   "ignore": []
 }

package/AGENTS.md

@@ -0,0 +1,114 @@
+# AGENTS.md
+
+This file provides guidance to Codex (Codex.ai/code) when working with code in this repository.
+
+## Project Overview
+
+**create-vue-component-template** (CLI command: `cvct`) — a CLI scaffolding tool that generates Vue component directory structures with predefined templates. Published to npm as a global CLI utility.
+
+## Commands
+
+### Non-Interactive Mode (for agents/CI)
+
+```bash
+# Generate a general business template with setup style
+node bin/cli.mjs --name=MyComponent --rootPath=src/components/platform
+
+# Generate a single-pick business template
+node bin/cli.mjs --name=MyComponent --rootPath=src/components/platform --templateType=single-pick
+
+# Generate a multiple-pick business template with defineComponent style
+node bin/cli.mjs --name=MyComponent --rootPath=src/components/platform --templateType=multiple-pick --vueTemplateType=normal
+
+# Overwrite existing directory
+node bin/cli.mjs --name=MyComponent --rootPath=src/components/platform --collisionStrategy=overwrite
+
+# Strict non-interactive (error if missing required args)
+node bin/cli.mjs --name=MyComponent --rootPath=src/components/platform --nonInteractive
+
+# Help & version
+node bin/cli.mjs --help
+node bin/cli.mjs --version
+```
+
+### Interactive Mode (for humans)
+
+```bash
+# Run without args to enter plop interactive prompts
+node bin/cli.mjs
+```
+
+### Version bump via changesets
+
+```bash
+npx changeset          # create a changeset
+npx changeset version  # consume changesets, bump package.json
+```
+
+## CLI Flags Reference
+
+| Flag | Required | Default | Description |
+|------|----------|---------|-------------|
+| `--name` | Yes (non-interactive) | — | Component name, PascalCase (e.g. `MyTest`) |
+| `--rootPath` | Yes (non-interactive) | — | Target directory (e.g. `src/components/platform`) |
+| `--templateType` | No | `general` | `general` = 通用模板；`single-pick` = 产品组单选模板；`multiple-pick` = 产品组多选模板 |
+| `--vueTemplateType` | No | `setup` | `setup` = `<script setup>`；`normal` = `defineComponent` |
+| `--collisionStrategy` | No | `skip` | `skip` = error if exists; `overwrite` = delete & regenerate |
+| `--nonInteractive` | No | false | Fail on missing args instead of prompting |
+| `--help` / `-h` | No | — | Print help text |
+| `--version` / `-v` | No | — | Print version |
+
+## Architecture
+
+**Entry point:** `bin/cli.mjs` — dispatches to non-interactive mode (`src/generate.mjs`) when all required CLI args are provided, otherwise falls back to plop interactive mode.
+
+**Core generation:** `src/generate.mjs` — `generateComponent({ name, rootPath, templateType, collisionStrategy })` — pure function that:
+1. Validates inputs
+2. Converts case (PascalCase, kebab-case via `change-case`)
+3. Detects directory collisions (skip or overwrite)
+4. Renders `plop-templates/*.hbs` templates and writes files
+5. Returns `{ success, files, componentName, targetFolder }` or `{ success: false, error }`
+
+**Interactive mode:** `plopfile.mjs` — plop generator for human interactive use.
+
+**Templates:** `plop-templates/*.hbs` — Handlebars-style template files.
+
+### Business Template Types
+
+- **general**: 通用业务模板
+- **single-pick**: 产品组单选模板
+- **multiple-pick**: 产品组多选模板
+
+### Vue Template Styles
+
+- **setup** (`index.setup.vue.hbs`): `<script setup>` 风格
+- **normal** (`index.normal.vue.hbs`): `defineComponent` 风格
+
+Regardless of Vue style, the generated file name remains `src/index.vue`.
+
+### Generated Component Structure
+
+```
+{rootPath}/{ComponentName}/
+├── index.ts              # Re-exports component and types
+└── src/
+    ├── index.vue         # Component template
+    ├── index.scss        # Scoped styles
+    ├── typing.ts         # Props interface + enums
+    ├── hook.ts           # use{ComponentName}() composable
+    └── data.ts           # Data arrays
+```
+
+### Template Variables
+
+| Variable | Source | Example |
+|----------|--------|---------|
+| `{{componentName}}` | PascalCase of input name | `MyTest` |
+| `{{class}}` | kebab-case of input name | `my-test` |
+| `{{interfaceName}}` | Same as componentName | `MyTest` |
+
+The `change-case` library handles all case conversions.
+
+## Versioning
+
+Uses `@changesets/cli` for version management. Changeset access is `restricted` (private by default). Base branch is `master`.

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # create-vue-component-template
 
+## 1.0.1
+
+### Patch Changes
+
+- 添加三种业务组件模板
+
 ## 1.1.0
 
 ### Minor Changes

package/CLAUDE.md

@@ -11,11 +11,14 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 ### Non-Interactive Mode (for agents/CI)
 
 ```bash
-# Generate a setup-syntax component
+# Generate a general business template with setup style
 node bin/cli.mjs --name=MyComponent --rootPath=src/components/platform
 
-# Generate a normal (defineComponent) component
-node bin/cli.mjs --name=MyComponent --rootPath=src/components/platform --templateType=normal
+# Generate a single-pick business template
+node bin/cli.mjs --name=MyComponent --rootPath=src/components/platform --templateType=single-pick
+
+# Generate a multiple-pick business template with defineComponent style
+node bin/cli.mjs --name=MyComponent --rootPath=src/components/platform --templateType=multiple-pick --vueTemplateType=normal
 
 # Overwrite existing directory
 node bin/cli.mjs --name=MyComponent --rootPath=src/components/platform --collisionStrategy=overwrite
@@ -48,7 +51,8 @@ npx changeset version  # consume changesets, bump package.json
 |------|----------|---------|-------------|
 | `--name` | Yes (non-interactive) | — | Component name, PascalCase (e.g. `MyTest`) |
 | `--rootPath` | Yes (non-interactive) | — | Target directory (e.g. `src/components/platform`) |
-| `--templateType` | No | `setup` | `setup` = `<script setup>` + defineProps; `normal` = defineComponent + PropType |
+| `--templateType` | No | `general` | `general` = 通用模板；`single-pick` = 产品组单选模板；`multiple-pick` = 产品组多选模板 |
+| `--vueTemplateType` | No | `setup` | `setup` = `<script setup>`；`normal` = `defineComponent` |
 | `--collisionStrategy` | No | `skip` | `skip` = error if exists; `overwrite` = delete & regenerate |
 | `--nonInteractive` | No | false | Fail on missing args instead of prompting |
 | `--help` / `-h` | No | — | Print help text |
@@ -69,10 +73,18 @@ npx changeset version  # consume changesets, bump package.json
 
 **Templates:** `plop-templates/*.hbs` — Handlebars-style template files.
 
-### Two Template Modes
+### Business Template Types
+
+- **general**: 通用业务模板
+- **single-pick**: 产品组单选模板
+- **multiple-pick**: 产品组多选模板
+
+### Vue Template Styles
+
+- **setup** (`index.setup.vue.hbs`): `<script setup>` 风格
+- **normal** (`index.normal.vue.hbs`): `defineComponent` 风格
 
-- **setup** (`index.setup.vue.hbs`): `<script setup>` + `defineProps<>()` + `defineOptions()`
-- **normal** (`index.vue.hbs`): `defineComponent` + `PropType` + `setup()` function
+Regardless of Vue style, the generated file name remains `src/index.vue`.
 
 ### Generated Component Structure
 

package/README.md

@@ -1,29 +1,49 @@
 # create-vue-component-template
 
-A CLI tool for creating standardized Vue 3 + TypeScript + Sass public component templates.
+一个用于快速创建 Vue 3 + TypeScript + Sass 组件骨架的 CLI 工具。
 
-## USAGE
+## 用法
 
 ```bash
-#  create a components via npm
-npm create-vue-component-template --rootPath src/components/platform
+# 交互模式
+node bin/cli.mjs
 
-# or
-npx create-vue-component-template --rootPath src/components/platform
+# 非交互模式
+node bin/cli.mjs --name=MyComponent --rootPath=src/components/platform
 
+# 指定业务模板类型
+node bin/cli.mjs --name=MyComponent --rootPath=src/components/platform --templateType=single-pick
+
+# 指定 index.vue 的 Vue 风格
+node bin/cli.mjs --name=MyComponent --rootPath=src/components/platform --templateType=multiple-pick --vueTemplateType=normal
 ```
 
-directory tree like this：
-
-.
-└── Demo/
-    ├── src/
-    │   ├── components/
-    │   │   ├── aaa/
-    │   │   ├── bbb/
-    │   │   └── .../
-    │   ├── data.ts
-    │   ├── typing.ts
-    │   ├── hooks.ts
-    │   └── index.scss
-    └── index.ts
+## 参数说明
+
+| 参数 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `--name` | 是（非交互） | - | 组件名称，PascalCase |
+| `--rootPath` | 是（非交互） | - | 输出目录 |
+| `--templateType` | 否 | `general` | 业务模板类型：`general` / `single-pick` / `multiple-pick` |
+| `--vueTemplateType` | 否 | `setup` | `index.vue` 的 Vue 风格：`setup` / `normal` |
+| `--collisionStrategy` | 否 | `skip` | 目录冲突策略：`skip` / `overwrite` |
+| `--nonInteractive` | 否 | `false` | 缺少必填参数时直接报错，不进入交互模式 |
+
+## 模板规则
+
+1. `templateType` 只控制业务模板类型。
+2. `vueTemplateType` 只控制 `index.vue` 的 Vue 写法。
+3. 无论选择哪种 Vue 风格，最终生成的文件名始终是 `src/index.vue`。
+
+## 生成目录结构
+
+```txt
+{rootPath}/{ComponentName}/
+├── index.ts
+└── src/
+    ├── index.vue
+    ├── index.scss
+    ├── typing.ts
+    ├── hook.ts
+    └── data.ts
+```

package/bin/cli.mjs

@@ -16,46 +16,53 @@ function printVersion() {
 
 function printHelp() {
   console.log(`
-cvct — Vue 组件模板生成器 (create-vue-component-template)
+cvct - Vue 组件模板生成器 (create-vue-component-template)
 
 用法:
   cvct [选项]
 
 必填参数 (非交互模式):
-  --name=<ComponentName>     组件名称，PascalCase 格式 (例: MyTest)
-  --rootPath=<path>          组件生成路径 (例: src/components/platform)
+  --name=<ComponentName>         组件名称，PascalCase 格式 (例: MyTest)
+  --rootPath=<path>              组件生成路径 (例: src/components/platform)
 
 可选参数:
-  --templateType=<type>      模板类型: setup (默认) | normal
-                            - setup:   <script setup> + defineProps<> + defineOptions
-                            - normal:  defineComponent + PropType + setup()
+  --templateType=<type>          业务模板类型: general (默认) | single-pick | multiple-pick
+                                - general:        通用业务模板
+                                - single-pick:    产品组单选模板
+                                - multiple-pick:  产品组多选模板
 
-  --collisionStrategy=<s>    目录碰撞策略: skip (默认) | overwrite
-                            - skip:       目录已存在时报错退出
-                            - overwrite:  删除旧目录后重新生成
+  --vueTemplateType=<type>       index.vue 语法风格: setup (默认) | normal
+                                - setup:   <script setup> 风格
+                                - normal:  defineComponent 风格
+                                - 注意: 最终生成文件名始终为 index.vue
 
-  --nonInteractive           强制非交互模式，缺少必填参数时报错而非提示
+  --collisionStrategy=<s>        目录冲突策略: skip (默认) | overwrite
+                                - skip:       目录已存在时直接报错退出
+                                - overwrite:  删除旧目录后重新生成
 
-  -h, --help                 显示帮助信息
-  -v, --version              显示版本号
+  --nonInteractive               强制非交互模式，缺少必填参数时直接报错
+
+  -h, --help                     显示帮助信息
+  -v, --version                  显示版本号
 
 非交互模式示例:
   cvct --name=MyTest --rootPath=src/components/platform
-  cvct --name=MyTest --rootPath=src/components/platform --templateType=normal
+  cvct --name=MyTest --rootPath=src/components/platform --templateType=single-pick
+  cvct --name=MyTest --rootPath=src/components/platform --templateType=multiple-pick --vueTemplateType=normal
   cvct --name=MyTest --rootPath=src/components/platform --collisionStrategy=overwrite
 
 生成的目录结构:
   {rootPath}/{ComponentName}/
-  ├── index.ts                # 导出组件和类型
+  ├── index.ts
   └── src/
-      ├── index.vue           # 组件模板
-      ├── index.scss           # 样式
-      ├── typing.ts            # Props 接口 + 枚举
-      ├── hook.ts              # use{ComponentName}() composable
-      └── data.ts              # 数据数组
+      ├── index.vue
+      ├── index.scss
+      ├── typing.ts
+      ├── hook.ts
+      └── data.ts
 
 交互模式:
-  不带参数运行 cvct 将进入交互式提示界面 (plop)
+  不带参数运行 cvct 将进入 plop 交互提示界面
 `);
 }
 
@@ -73,7 +80,7 @@ const hasAllRequired = argv.name && argv.rootPath;
 const nonInteractive = argv.nonInteractive;
 
 if (nonInteractive && !hasAllRequired) {
-  console.error('错误：非交互模式需要 --name 和 --rootPath 参数');
+  console.error('错误：非交互模式需要同时传入 --name 和 --rootPath');
   console.error('运行 cvct --help 查看帮助');
   process.exit(1);
 }
@@ -82,7 +89,8 @@ if (hasAllRequired) {
   const result = generateComponent({
     name: argv.name,
     rootPath: argv.rootPath,
-    templateType: argv.templateType || 'setup',
+    templateType: argv.templateType || 'general',
+    vueTemplateType: argv.vueTemplateType || 'setup',
     collisionStrategy: argv.collisionStrategy || 'skip',
   });
 
@@ -93,21 +101,22 @@ if (hasAllRequired) {
 
   console.log(`✓ 已生成组件: ${result.componentName}`);
   console.log(`  路径: ${result.targetFolder}`);
-  result.files.forEach(f => console.log(`  - ${f}`));
+  console.log(`  业务模板: ${result.templateType}`);
+  console.log(`  Vue 风格: ${result.vueTemplateType}`);
+  result.files.forEach((file) => console.log(`  - ${file}`));
   process.exit(0);
 }
 
-// Fallback: interactive mode via plop
 const { Plop, run } = await import('plop');
 
 Plop.prepare({
   configPath: path.join(__dirname, '../plopfile.mjs'),
-  import: []
-}, env => {
-  Plop.execute(env, (env) => {
+  import: [],
+}, (env) => {
+  Plop.execute(env, (executeEnv) => {
     const options = {
-      ...env,
-      dest: process.cwd()
+      ...executeEnv,
+      dest: process.cwd(),
     };
     return run(options, undefined, true);
   });

package/docs/2026-05-11T10-04-44-/344/270/211/345/245/227/346/250/241/346/235/277/351/207/215/346/236/204/2026-05-11T10-04-44-/344/270/211/345/245/227/346/250/241/346/235/277/351/207/215/346/236/204-/346/200/235/350/267/257/346/226/207/346/241/243.md

@@ -0,0 +1,167 @@
+# 三套业务模板重构思路文档
+
+## 1. 这次真正要解决的问题
+
+补充需求之后，问题已经不是“把 `setup/normal` 改成三种业务模板”。
+
+真正的问题是：
+
+1. 业务模板层需要扩展为三种
+2. Vue 写法层仍然保留两种
+3. 这两个层次不能继续混用一个参数语义
+
+也就是说，当前项目要从“单维模板选择”升级成“双维模板选择”。
+
+## 2. 为什么之前会容易混淆
+
+当前代码里，`templateType` 实际控制的是：
+
+- `index.vue` 用 `setup`
+- 或者 `index.vue` 用 `normal`
+
+这会让人自然以为 `templateType` 就是“模板类型”。
+
+但现在已经确认：
+
+- `general` / `single-pick` / `multiple-pick` 才是业务模板类型
+- `setup` / `normal` 只是 Vue 文件写法
+
+因此，之前的困惑本质上来自“参数命名承载了错误的业务语义”。
+
+## 3. 我对结构的重新判断
+
+重构后最合理的抽象应该是：
+
+### 第一层：业务模板目录
+
+这一层决定：
+
+- `typing.ts`
+- `hook.ts`
+- `data.ts`
+- `index.scss`
+- `index.ts`
+- 以及 `index.vue` 的业务语义部分
+
+### 第二层：Vue 风格分支
+
+这一层只决定：
+
+- `index.vue` 采用 `setup`
+- 还是 `defineComponent`
+
+所以目录结构不应该是：
+
+```txt
+setup/
+normal/
+```
+
+而应该是：
+
+```txt
+general/
+single-pick/
+multiple-pick/
+```
+
+然后在每个业务目录下再放：
+
+```txt
+index.setup.vue.hbs
+index.normal.vue.hbs
+```
+
+但这里要注意：
+
+```txt
+上面这两个名字只是模板源文件名，
+最终生成到组件目录里的文件名仍然统一是 index.vue
+```
+
+## 4. 为什么这样拆最稳
+
+因为这符合差异的主次关系。
+
+### 主差异
+
+主差异是业务模板不同。
+
+这会影响整套模板资源的含义，所以它应该成为目录分层的第一优先级。
+
+### 次差异
+
+次差异是 `index.vue` 的 Vue 写法不同。
+
+这只影响单个文件，因此应该成为业务目录下的次级分支，而不是顶层结构。
+它影响的是“选哪份模板源文件”，不影响最终输出文件名。
+
+## 5. 参数层面的思考
+
+如果继续只保留一个 `templateType`，后面无非两种结果：
+
+1. `templateType` 既可能传业务值，又可能传 Vue 风格值
+2. 代码内部继续做大量兼容判断
+
+这两种都不利于长期维护。
+
+所以我更倾向于把参数拆开，例如：
+
+- `templateType`
+- `vueTemplateType`
+
+这样能直接把概念表达清楚。
+
+## 6. 兼容旧调用的思路
+
+这里不能简单粗暴地完全切断旧逻辑，因为现有项目已经支持：
+
+```bash
+--templateType=setup
+--templateType=normal
+```
+
+如果马上废弃，旧脚本会直接失效。
+
+所以更合适的迁移方式是：
+
+1. 新逻辑正式引入双维度参数
+2. 旧逻辑临时兼容
+3. 兼容时把旧值映射到：
+   - 业务模板默认 `general`
+   - Vue 风格沿用旧值
+
+这个映射是合理的，因为旧调用本来就没有表达业务模板差异。
+
+## 7. 对模板文件生成阶段的判断
+
+你前面说“各个类型模板文件先给我生成，文件内容参考现有文件”，这意味着后续实施阶段的重点不是一次性把业务逻辑填满，而是先把骨架建立完整。
+
+所以执行时更适合：
+
+1. 先复用现有模板为基础
+2. 再按三类业务语义做差异化改造
+3. 最后再接回生成器逻辑
+
+这样风险更低，也更容易验证。
+
+## 8. 最终思路结论
+
+这次最关键的思路不是“模板数量从 2 变成 3”，而是：
+
+```txt
+原来只有一个维度：
+Vue 写法维度
+
+现在变成两个维度：
+业务模板维度 + Vue 写法维度
+```
+
+只要把这个抽象立住，后面的代码改造、目录设计、参数设计和测试方案都会自然顺下来。
+
+补充一个最终落地规则：
+
+```txt
+模板源文件可以区分 setup / normal，
+最终组件目录中只能生成统一的 index.vue
+```

package/docs/2026-05-11T10-04-44-/344/270/211/345/245/227/346/250/241/346/235/277/351/207/215/346/236/204/2026-05-11T10-04-44-/344/270/211/345/245/227/346/250/241/346/235/277/351/207/215/346/236/204-/346/200/273/347/273/223/346/226/207/346/241/243.md

@@ -0,0 +1,80 @@
+# 三套业务模板重构总结文档
+
+## 1. 本轮已完成内容
+
+本轮工作已经从设计阶段进入实施阶段，完成了模板资源重构、生成逻辑重构和文档同步。
+
+本次实现后的核心定义如下：
+
+1. `templateType`
+   业务模板类型：
+   - `general`
+   - `single-pick`
+   - `multiple-pick`
+
+2. `vueTemplateType`
+   Vue 语法风格：
+   - `setup`
+   - `normal`
+
+## 2. 本轮修订点
+
+相较于上一版方案，本轮主要修正了以下内容：
+
+1. 新建了三套业务模板目录
+   - `plop-templates/general/`
+   - `plop-templates/single-pick/`
+   - `plop-templates/multiple-pick/`
+
+2. 每套业务模板都补齐了两份 Vue 模板源文件
+   - `index.setup.vue.hbs`
+   - `index.normal.vue.hbs`
+
+3. 重构了 `src/generate.mjs`
+   生成器现在同时支持业务模板类型与 Vue 风格两个维度。
+
+4. 重构了 `plopfile.mjs`
+   交互模式现在可以分别选择业务模板类型与 Vue 风格。
+
+5. 重构了 `bin/cli.mjs`
+   CLI 参数说明已经切换到双维度模型。
+
+6. 同步更新了说明文档
+   包括 `README.md`、`AGENTS.md`、`CLAUDE.md`。
+
+7. 保持了最终输出命名规则
+   `index.setup.vue.hbs` 与 `index.normal.vue.hbs` 只是模板源文件名，最终输出文件名始终是 `index.vue`。
+
+## 3. 当前版本结论
+
+当前代码结构已经能够准确表达这次需求，后续新增业务模板或新增 Vue 风格时都可以在现有结构上继续扩展。
+
+本次修订后的关键结论是：
+
+```txt
+业务模板类型决定整套模板语义，
+Vue 风格只决定 index.vue 的模板来源。
+```
+
+并且：
+
+```txt
+setup / normal 只影响模板选择，
+不影响最终输出文件名。
+```
+
+## 4. 仍未完成的部分
+
+1. 业务模板内容目前还是第一版骨架，后续可以继续补充更贴近真实业务的默认实现
+2. 还没有为交互模式和非交互模式补自动化测试
+3. 还需要通过命令行实际跑通 6 组组合验证
+4. 还需要最终确认生成文件名始终统一为 `index.vue`
+
+## 5. 下一步建议
+
+下一步直接执行闭环验证，建议顺序如下：
+
+1. 运行 6 组组合命令验证
+2. 检查每组输出目录结构
+3. 检查最终是否始终生成 `src/index.vue`
+4. 执行 `git add` 暂存本轮修改