create-component-template-cli 1.0.0

package/.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

package/.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.1.2/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "master",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

package/.claude/settings.local.json

@@ -0,0 +1,12 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(gh auth:*)",
+      "Bash(gh repo:*)",
+      "Bash(git filter-branch:*)",
+      "Bash(node bin/cli.mjs --help)",
+      "Bash(node bin/cli.mjs --version)",
+      "Bash(node bin/cli.mjs --name=TestComp --rootPath=src/components/platform)"
+    ]
+  }
+}

package/CHANGELOG.md

@@ -0,0 +1,49 @@
+# create-vue-component-template
+
+## 1.1.0
+
+### Minor Changes
+
+- test
+
+## 1.0.11
+
+### Patch Changes
+
+- 修改模板
+
+## 1.0.10
+
+### Patch Changes
+
+- 修改 hooks
+
+## 1.0.9
+
+### Patch Changes
+
+- 修改提示
+
+## 1.0.8
+
+### Patch Changes
+
+- 测试新增模板选项
+
+## 1.0.7
+
+### Patch Changes
+
+- 完善 hooks
+
+## 1.0.6
+
+### Patch Changes
+
+- test
+
+## 1.0.5
+
+### Patch Changes
+
+- 修改 vue 组件代码

package/CLAUDE.md

@@ -0,0 +1,102 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.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 setup-syntax component
+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
+
+# 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 | `setup` | `setup` = `<script setup>` + defineProps; `normal` = defineComponent + PropType |
+| `--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.
+
+### Two Template Modes
+
+- **setup** (`index.setup.vue.hbs`): `<script setup>` + `defineProps<>()` + `defineOptions()`
+- **normal** (`index.vue.hbs`): `defineComponent` + `PropType` + `setup()` function
+
+### 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/README.md

@@ -0,0 +1,29 @@
+# create-vue-component-template
+
+A CLI tool for creating standardized Vue 3 + TypeScript + Sass public component templates.
+
+## USAGE
+
+```bash
+#  create a components via npm
+npm create-vue-component-template --rootPath src/components/platform
+
+# or
+npx create-vue-component-template --rootPath src/components/platform
+
+```
+
+directory tree like this：
+
+.
+└── Demo/
+    ├── src/
+    │   ├── components/
+    │   │   ├── aaa/
+    │   │   ├── bbb/
+    │   │   └── .../
+    │   ├── data.ts
+    │   ├── typing.ts
+    │   ├── hooks.ts
+    │   └── index.scss
+    └── index.ts

package/bin/cli.mjs

@@ -0,0 +1,114 @@
+#!/usr/bin/env node
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { readFileSync } from 'node:fs';
+import minimist from 'minimist';
+import { generateComponent } from '../src/generate.mjs';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const args = process.argv.slice(2);
+const argv = minimist(args);
+
+function printVersion() {
+  const pkg = JSON.parse(readFileSync(path.join(__dirname, '..', 'package.json'), 'utf-8'));
+  console.log(`cvct v${pkg.version}`);
+}
+
+function printHelp() {
+  console.log(`
+cvct — Vue 组件模板生成器 (create-vue-component-template)
+
+用法:
+  cvct [选项]
+
+必填参数 (非交互模式):
+  --name=<ComponentName>     组件名称，PascalCase 格式 (例: MyTest)
+  --rootPath=<path>          组件生成路径 (例: src/components/platform)
+
+可选参数:
+  --templateType=<type>      模板类型: setup (默认) | normal
+                            - setup:   <script setup> + defineProps<> + defineOptions
+                            - normal:  defineComponent + PropType + setup()
+
+  --collisionStrategy=<s>    目录碰撞策略: skip (默认) | overwrite
+                            - skip:       目录已存在时报错退出
+                            - overwrite:  删除旧目录后重新生成
+
+  --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 --collisionStrategy=overwrite
+
+生成的目录结构:
+  {rootPath}/{ComponentName}/
+  ├── index.ts                # 导出组件和类型
+  └── src/
+      ├── index.vue           # 组件模板
+      ├── index.scss           # 样式
+      ├── typing.ts            # Props 接口 + 枚举
+      ├── hook.ts              # use{ComponentName}() composable
+      └── data.ts              # 数据数组
+
+交互模式:
+  不带参数运行 cvct 将进入交互式提示界面 (plop)
+`);
+}
+
+if (argv.help || argv.h) {
+  printHelp();
+  process.exit(0);
+}
+
+if (argv.version || argv.v) {
+  printVersion();
+  process.exit(0);
+}
+
+const hasAllRequired = argv.name && argv.rootPath;
+const nonInteractive = argv.nonInteractive;
+
+if (nonInteractive && !hasAllRequired) {
+  console.error('错误：非交互模式需要 --name 和 --rootPath 参数');
+  console.error('运行 cvct --help 查看帮助');
+  process.exit(1);
+}
+
+if (hasAllRequired) {
+  const result = generateComponent({
+    name: argv.name,
+    rootPath: argv.rootPath,
+    templateType: argv.templateType || 'setup',
+    collisionStrategy: argv.collisionStrategy || 'skip',
+  });
+
+  if (!result.success) {
+    console.error(`错误：${result.error}`);
+    process.exit(1);
+  }
+
+  console.log(`✓ 已生成组件: ${result.componentName}`);
+  console.log(`  路径: ${result.targetFolder}`);
+  result.files.forEach(f => console.log(`  - ${f}`));
+  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) => {
+    const options = {
+      ...env,
+      dest: process.cwd()
+    };
+    return run(options, undefined, true);
+  });
+});

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "create-component-template-cli",
+  "description": "create-vue-component-template,A CLI tool for creating standardized Vue 3 + TypeScript + Sass public component templates.",
+  "version": "1.0.0",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bin": {
+    "cvct": "bin/cli.mjs"
+  },
+  "access": "public",
+  "dependencies": {
+    "@types/minimist": "^1.2.5",
+    "change-case": "^5.4.4",
+    "minimist": "^1.2.8",
+    "plop": "^4.0.1"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.29.8"
+  },
+  "author": {
+    "name": "young-man",
+    "email": "2419445705@qq.com"
+  },
+  "package-info": {
+    "branch": "agent-cli"
+  }
+}

package/plop-templates/data.ts.hbs

@@ -0,0 +1,7 @@
+import type { DataType } from "./typing"
+
+const data:Array<DataType> = []
+
+export {
+    data
+}

package/plop-templates/hook.ts.hbs

@@ -0,0 +1,29 @@
+import { ref } from 'vue';
+import { data } from './data'
+import { useTimeline } from '@/hooks';
+import { {{ componentName }}Props } from './typing'
+import emitter, { useEmitter } from '@/base/toolkit';
+import { usePlatformStore, useProductStore, useGlobalStore } from '@/store';
+import { ButtonGroupItem } from '@/components/common/SinglePickButtonGroup';
+export const use{{componentName}} = (props: {{componentName}}Props) => {
+    const model = ref<string>('')
+    const platformStore = usePlatformStore();
+    const productStore = useProductStore();
+    const globalStore = useGlobalStore();
+
+    useTimeline(model,({currentTime,productTypes})=>{
+        // TODO  产品绑定时间轴，时间轴变化请求数据
+    })
+    useEmitter([
+        {
+            eventName:'test',
+            callback:()=> {
+                // TODO  
+            }
+        }
+    ])
+    
+    return {
+        model
+    }
+}

package/plop-templates/index.scss.hbs

@@ -0,0 +1 @@
+.{{class}} { position:absolute;z-index:999;width:500px;height:500px;top:0;left:0;background-color:#327ccb52}

package/plop-templates/index.setup.vue.hbs

@@ -0,0 +1,25 @@
+<template>
+    <div class="{{ class }}"></div>
+</template>
+
+<script setup lang="ts">
+import { {{ componentName }}Props, {{ componentName }}Enum } from './typing'
+import { use{{componentName}} } from './hook'
+import SinglePickButtonGroup from '@/components/common/SinglePickButtonGroup';
+
+defineOptions({
+    name: `{{ componentName }}`
+});
+
+const props = defineProps<{{ componentName }}Props>();
+
+// withDefaults(defineProps<{{ componentName }}Props>(), {});
+
+const { } = use{{componentName}}(props);
+
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+// 如果有用到v-bind(),它在index.scss中定义会不生效,请在该文件内写入对应的样式。
+</style>

package/plop-templates/index.ts.hbs

@@ -0,0 +1,3 @@
+import {{ componentName }} from './src/index.vue'
+export default {{ componentName }}
+export * from './src/typing'

package/plop-templates/index.vue.hbs

@@ -0,0 +1,38 @@
+
+
+<template>
+    <div class="{{ class }}"></div>
+</template>
+
+<script lang="ts">
+import {
+    defineComponent,
+    PropType
+} from 'vue';
+import { {{ componentName }}Props, {{ componentName }}Enum } from './typing'
+import { use{{componentName}} } from './hook'
+import SinglePickButtonGroup, { ButtonGroupItem } from '@/components/common/SinglePickButtonGroup';
+export default defineComponent({
+    name: `{{ componentName }}`,
+    components: { },
+    props:{         
+        // 示例,使用 PropType 强制指定接口类型
+        user: {
+            type: Object as PropType<{{ componentName }}Props['user']>,
+            required: false,
+        },
+    },
+    setup(props, { emit }) {
+
+        const { } = use{{componentName}}(props)
+
+
+        return {};
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+// 如果有用到v-bind(),它在index.scss中定义会不生效,请在该文件内写入对应的样式。
+</style>

package/plop-templates/typing.ts.hbs

@@ -0,0 +1,14 @@
+
+export enum {{interfaceName}}Enum {
+    'ENUM_KEY1',
+    'ENUM_KEY2'
+}
+
+export interface {{interfaceName}}Props {
+    user: Record<string, any>
+}
+
+export interface DataType {
+    lon: string;
+    lat: string;
+}

package/plopfile.mjs

@@ -0,0 +1,133 @@
+import * as changeCase from 'change-case';
+import path from 'node:path';
+import { fileURLToPath } from 'url';
+import fs from 'node:fs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const rootPath = `src/components/platform`;
+
+export default (plop) => {
+  plop.setGenerator('create-component-template', {
+    description: '----组件模板生成器----',
+    prompts: [
+      {
+        type: 'input',
+        name: 'rootPath',
+        message: '请输入组件生成路径:',
+        // 逻辑：如果命令行传入了 --rootPath，则使用它，否则使用默认值
+        default: (data) => data.rootPath || `src/components/platform`, 
+      },
+      {
+        type: 'list',
+        name: 'templateType',
+        message: '请选择组件模板(使用上下箭头进行选择):',
+        choices: [
+          { name: 'VUE的setup语法糖组件模板', value: 'setup' },
+          { name: 'VUE普通组合式API组件模板', value: 'normal' },
+        ],
+        default: 'setup'
+      },
+      {
+        type: 'input',
+        name: 'name',
+        message: '请输入组件名称 (大驼峰):',
+        // 逻辑：如果命令行传入了 --name，则使用它，否则使用 'CustomComponent'
+        default: (data) => data.name || 'CustomComponent',
+      },
+      {
+        type: 'list', // 使用 list 提供明确的选择
+        name: 'collisionStrategy',
+        message: (data) => `目录 ${data.rootPath}/${data.name} 已存在，请选择操作：`,
+        choices: [
+          { name: '覆盖', value: 'overwrite' },
+          { name: '重新输入名称', value: 'retry' },
+        ],
+        // 关键：只有当目录存在时才触发
+        when: (data) => {
+          const targetPath = path.join(process.cwd(), data.rootPath, data.name);
+          return fs.existsSync(targetPath);
+        },
+      },
+      {
+        // 关键点：如果用户选择 'retry'，我们通过 validate 拦截并强制用户回到上一步
+        type: 'input',
+        name: 'retryName',
+        message: '请重新输入组件名称（按回车确认后将刷新名称）：',
+        when: (data) => data.collisionStrategy === 'retry',
+        validate: (value, data) => {
+          // 这里利用 validate 的特性：
+          // 我们直接修改上层 data.name，然后返回一个错误信息，
+          // 实际上会迫使 Inquirer 停留在这里，但此时 data.name 已经被修正
+          if (value && value !== data.name) {
+             data.name = value; // 覆盖之前的 name
+             // 检查新名字是否依然冲突
+             const newPath = path.join(process.cwd(), data.rootPath, value);
+             if (fs.existsSync(newPath)) {
+                return '新名称依然存在，请再次输入或 Ctrl+C 退出';
+             }
+             return true;
+          }
+          return '请输入一个新的名称以避开冲突';
+        }
+      }
+    ],
+
+    actions: (data) => {
+      const actions = [];
+      // 最终确定的组件名（可能是初始输入的，也可能是 retry 后修正的）
+      const finalName = data.name; 
+      
+      const camelCase = changeCase.camelCase(finalName);
+      const componentName = changeCase.pascalCase(camelCase);
+      const className = changeCase.kebabCase(camelCase);
+      const targetFolder = `${data.rootPath}/${componentName}`;
+
+      // 1. 如果选择了覆盖，执行删除动作
+      if (data.collisionStrategy === 'overwrite') {
+        actions.push({
+          type: 'deleteTargetDir',
+          path: targetFolder,
+        });
+      }
+
+      const vueTemplateFile = data.templateType === 'setup' ? 'index.setup.vue.hbs' : 'index.vue.hbs';
+
+      // 2. 生成文件列表 (统一配置)
+      const templates = [
+        { file: 'index.scss', data: { class: className } },
+        { 
+            file: 'index.vue', 
+            templateFile: vueTemplateFile,
+            data: { class: className, componentName } 
+        },
+        { file: 'typing.ts', data: { interfaceName: componentName } },
+        { file: 'hook.ts', data: { componentName } },
+        { file: 'index.ts', data: { componentName } },
+        { file: 'data.ts' },
+      ];
+
+      templates.forEach(item => {
+        actions.push({
+          type: 'add',
+          force: true, // 既然上面已经处理了删除逻辑，这里 force: true 确保写入成功
+          path: item.file === 'index.ts' ? `${targetFolder}/index.ts` : `${targetFolder}/src/${item.file}`,
+          templateFile: `${__dirname}/plop-templates/${item.templateFile || item.file + '.hbs'}`,
+          data: item.data,
+        });
+      });
+
+      return actions;
+    },
+  });
+
+  // 注册自定义 Action：删除目录
+  plop.setActionType('deleteTargetDir', (answers, config) => {
+    const targetDir = path.join(process.cwd(), config.path);
+    if (fs.existsSync(targetDir)) {
+      fs.rmSync(targetDir, { recursive: true, force: true });
+      return `[Clean] 已清理旧目录: ${config.path}`;
+    }
+    return '无需清理';
+  });
+};

package/src/generate.mjs

@@ -0,0 +1,85 @@
+import * as changeCase from 'change-case';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const TEMPLATES_DIR = path.join(__dirname, '..', 'plop-templates');
+
+const VALID_TEMPLATE_TYPES = ['setup', 'normal'];
+const VALID_COLLISION_STRATEGIES = ['skip', 'overwrite'];
+
+const TEMPLATE_CONFIG = [
+  { file: 'index.scss', dest: 'src', templateFile: 'index.scss.hbs', getData: (cn, cl) => ({ class: cl }) },
+  { file: 'index.vue', dest: 'src', getData: (cn, cl, tt) => ({
+    templateFile: tt === 'setup' ? 'index.setup.vue.hbs' : 'index.vue.hbs',
+    data: { class: cl, componentName: cn },
+  })},
+  { file: 'typing.ts', dest: 'src', templateFile: 'typing.ts.hbs', getData: (cn) => ({ interfaceName: cn }) },
+  { file: 'hook.ts', dest: 'src', templateFile: 'hook.ts.hbs', getData: (cn) => ({ componentName: cn }) },
+  { file: 'data.ts', dest: 'src', templateFile: 'data.ts.hbs', getData: () => ({}) },
+  { file: 'index.ts', dest: '', templateFile: 'index.ts.hbs', getData: (cn) => ({ componentName: cn }) },
+];
+
+function renderTemplate(templateName, data) {
+  const filePath = path.join(TEMPLATES_DIR, templateName);
+  const source = fs.readFileSync(filePath, 'utf-8');
+  let result = source;
+  for (const [key, value] of Object.entries(data)) {
+    result = result.replaceAll(`{{ ${key} }}`, String(value));
+    result = result.replaceAll(`{{${key}}}`, String(value));
+  }
+  return result;
+}
+
+export function generateComponent({ name, rootPath, templateType = 'setup', collisionStrategy = 'skip' }) {
+  if (!name || typeof name !== 'string') {
+    return { success: false, error: '缺少必填参数: --name (组件名称)' };
+  }
+  if (!rootPath || typeof rootPath !== 'string') {
+    return { success: false, error: '缺少必填参数: --rootPath (组件生成路径)' };
+  }
+  if (!VALID_TEMPLATE_TYPES.includes(templateType)) {
+    return { success: false, error: `无效的 templateType: "${templateType}"，可选值: ${VALID_TEMPLATE_TYPES.join(', ')}` };
+  }
+  if (!VALID_COLLISION_STRATEGIES.includes(collisionStrategy)) {
+    return { success: false, error: `无效的 collisionStrategy: "${collisionStrategy}"，可选值: ${VALID_COLLISION_STRATEGIES.join(', ')}` };
+  }
+
+  const camelName = changeCase.camelCase(name);
+  const componentName = changeCase.pascalCase(camelName);
+  const className = changeCase.kebabCase(camelName);
+  const targetFolder = path.join(rootPath, componentName);
+  const fullTargetPath = path.join(process.cwd(), targetFolder);
+
+  if (fs.existsSync(fullTargetPath)) {
+    if (collisionStrategy === 'skip') {
+      return { success: false, error: `目录已存在: ${targetFolder}（使用 --collisionStrategy=overwrite 覆盖）` };
+    }
+    if (collisionStrategy === 'overwrite') {
+      fs.rmSync(fullTargetPath, { recursive: true, force: true });
+    }
+  }
+
+  const generatedFiles = [];
+
+  for (const item of TEMPLATE_CONFIG) {
+    const itemResult = item.getData(componentName, className, templateType);
+    const templateFile = itemResult.templateFile || item.templateFile;
+    const templateData = itemResult.data || itemResult;
+
+    const destDir = item.dest === ''
+      ? fullTargetPath
+      : path.join(fullTargetPath, item.dest);
+    const destFile = path.join(destDir, item.file);
+
+    fs.mkdirSync(destDir, { recursive: true });
+
+    const content = renderTemplate(templateFile, templateData);
+    fs.writeFileSync(destFile, content, 'utf-8');
+    generatedFiles.push(path.join(targetFolder, item.dest, item.file).replace(/\\/g, '/'));
+  }
+
+  return { success: true, files: generatedFiles, componentName, targetFolder };
+}