create-component-template-cli 1.0.0 → 1.0.1

package/plop-templates/multiple-pick/typing.ts.hbs

@@ -0,0 +1,13 @@
+export enum {{ interfaceName }}Enum {
+  DEFAULT = 'default',
+}
+
+export interface {{ interfaceName }}Props {
+  user?: Record<string, any>
+  modelValue?: string[]
+}
+
+export interface DataType {
+  label: string
+  value: string
+}

package/plop-templates/single-pick/data.ts.hbs

@@ -0,0 +1,16 @@
+import type { DataType } from './typing'
+
+const data: Array<DataType> = [
+  {
+    label: '单选项1',
+    value: 'single-1',
+  },
+  {
+    label: '单选项2',
+    value: 'single-2',
+  },
+]
+
+export {
+  data,
+}

package/plop-templates/single-pick/hook.ts.hbs

@@ -0,0 +1,11 @@
+import { ref } from 'vue'
+import { data } from './data'
+import type { {{ componentName }}Props } from './typing'
+
+export const use{{ componentName }} = (props: {{ componentName }}Props) => {
+  const selectedValue = ref(props.modelValue ?? data[0]?.value ?? '')
+
+  return {
+    selectedValue,
+  }
+}

package/plop-templates/single-pick/index.normal.vue.hbs

@@ -0,0 +1,36 @@
+<template>
+  <div class="{{ class }}">
+    <SinglePickButtonGroup />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import SinglePickButtonGroup from '@/components/common/SinglePickButtonGroup'
+import { {{ componentName }}Props } from './typing'
+import { use{{ componentName }} } from './hook'
+
+export default defineComponent({
+  name: '{{ componentName }}',
+  components: {
+    SinglePickButtonGroup,
+  },
+  props: {
+    user: {
+      type: Object as PropType<{{ componentName }}Props['user']>,
+      required: false,
+    },
+  },
+  setup(props) {
+    const { selectedValue } = use{{ componentName }}(props as {{ componentName }}Props)
+
+    return {
+      selectedValue,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/plop-templates/single-pick/index.scss.hbs

@@ -0,0 +1,5 @@
+.{{class}} {
+  position: absolute;
+  top: 0;
+  left: 0;
+}

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

@@ -0,0 +1,23 @@
+<template>
+  <div class="{{ class }}">
+    <SinglePickButtonGroup />
+  </div>
+</template>
+
+<script setup lang="ts">
+import SinglePickButtonGroup from '@/components/common/SinglePickButtonGroup'
+import { {{ componentName }}Props } from './typing'
+import { use{{ componentName }} } from './hook'
+
+defineOptions({
+  name: '{{ componentName }}',
+})
+
+const props = defineProps<{{ componentName }}Props>()
+
+const { selectedValue } = use{{ componentName }}(props)
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/plop-templates/single-pick/index.ts.hbs

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

package/plop-templates/single-pick/typing.ts.hbs

@@ -0,0 +1,13 @@
+export enum {{ interfaceName }}Enum {
+  DEFAULT = 'default',
+}
+
+export interface {{ interfaceName }}Props {
+  user?: Record<string, any>
+  modelValue?: string
+}
+
+export interface DataType {
+  label: string
+  value: string
+}

package/plopfile.mjs

@@ -5,85 +5,110 @@ import fs from 'node:fs';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const rootPath = `src/components/platform`;
+
+const BUSINESS_TEMPLATE_CHOICES = [
+  { name: '通用模板', value: 'general' },
+  { name: '产品组单选模板', value: 'single-pick' },
+  { name: '产品组多选模板', value: 'multiple-pick' },
+];
+
+const VUE_TEMPLATE_STYLE_CHOICES = [
+  { name: 'script setup 风格', value: 'setup' },
+  { name: 'defineComponent 风格', value: 'normal' },
+];
+
+const BUSINESS_TEMPLATE_DIR_MAP = {
+  general: 'general',
+  'single-pick': 'single-pick',
+  'multiple-pick': 'multiple-pick',
+};
+
+const VUE_TEMPLATE_FILE_MAP = {
+  setup: 'index.setup.vue.hbs',
+  normal: 'index.normal.vue.hbs',
+};
+
+const TEMPLATE_FILES = [
+  { file: 'index.scss', output: 'src/index.scss', templateFile: 'index.scss.hbs', getData: (componentName, className) => ({ class: className, componentName }) },
+  { file: 'index.vue', output: 'src/index.vue', type: 'vue-entry', getData: (componentName, className) => ({ class: className, componentName }) },
+  { file: 'typing.ts', output: 'src/typing.ts', templateFile: 'typing.ts.hbs', getData: (componentName) => ({ interfaceName: componentName, componentName }) },
+  { file: 'hook.ts', output: 'src/hook.ts', templateFile: 'hook.ts.hbs', getData: (componentName) => ({ componentName }) },
+  { file: 'data.ts', output: 'src/data.ts', templateFile: 'data.ts.hbs', getData: (componentName) => ({ componentName }) },
+  { file: 'index.ts', output: 'index.ts', templateFile: 'index.ts.hbs', getData: (componentName) => ({ componentName }) },
+];
 
 export default (plop) => {
   plop.setGenerator('create-component-template', {
-    description: '----组件模板生成器----',
+    description: '----组件模板生成器---',
     prompts: [
       {
         type: 'input',
         name: 'rootPath',
         message: '请输入组件生成路径:',
-        // 逻辑：如果命令行传入了 --rootPath，则使用它，否则使用默认值
-        default: (data) => data.rootPath || `src/components/platform`, 
+        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'
+        message: '请选择业务模板类型:',
+        choices: BUSINESS_TEMPLATE_CHOICES,
+        default: 'general',
+      },
+      {
+        type: 'list',
+        name: 'vueTemplateType',
+        message: '请选择 index.vue 的 Vue 语法风格:',
+        choices: VUE_TEMPLATE_STYLE_CHOICES,
+        default: 'setup',
       },
       {
         type: 'input',
         name: 'name',
-        message: '请输入组件名称 (大驼峰):',
-        // 逻辑：如果命令行传入了 --name，则使用它，否则使用 'CustomComponent'
+        message: '请输入组件名称(大驼峰):',
         default: (data) => data.name || 'CustomComponent',
       },
       {
-        type: 'list', // 使用 list 提供明确的选择
+        type: 'list',
         name: 'collisionStrategy',
-        message: (data) => `目录 ${data.rootPath}/${data.name} 已存在，请选择操作：`,
+        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: '请重新输入组件名称（按回车确认后将刷新名称）：',
+        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;
+            data.name = value;
+            const newPath = path.join(process.cwd(), data.rootPath, value);
+            if (fs.existsSync(newPath)) {
+              return '新名称仍然已存在，请再次输入或 Ctrl+C 退出';
+            }
+            return true;
           }
-          return '请输入一个新的名称以避开冲突';
-        }
-      }
+          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 finalName = data.name;
+      const camelName = changeCase.camelCase(finalName);
+      const componentName = changeCase.pascalCase(camelName);
+      const className = changeCase.kebabCase(camelName);
       const targetFolder = `${data.rootPath}/${componentName}`;
+      const businessTemplateDir = BUSINESS_TEMPLATE_DIR_MAP[data.templateType];
+      const vueTemplateFile = VUE_TEMPLATE_FILE_MAP[data.vueTemplateType];
 
-      // 1. 如果选择了覆盖，执行删除动作
       if (data.collisionStrategy === 'overwrite') {
         actions.push({
           type: 'deleteTargetDir',
@@ -91,29 +116,14 @@ export default (plop) => {
         });
       }
 
-      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 => {
+      TEMPLATE_FILES.forEach((item) => {
+        const templateFile = item.type === 'vue-entry' ? vueTemplateFile : item.templateFile;
         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,
+          force: true,
+          path: `${targetFolder}/${item.output}`,
+          templateFile: `${__dirname}/plop-templates/${businessTemplateDir}/${templateFile}`,
+          data: item.getData(componentName, className),
         });
       });
 
@@ -121,7 +131,6 @@ export default (plop) => {
     },
   });
 
-  // 注册自定义 Action：删除目录
   plop.setActionType('deleteTargetDir', (answers, config) => {
     const targetDir = path.join(process.cwd(), config.path);
     if (fs.existsSync(targetDir)) {

package/src/generate.mjs

@@ -7,24 +7,45 @@ 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 BUSINESS_TEMPLATE_MAP = {
+  general: {
+    label: '通用模板',
+    templateDir: 'general',
+  },
+  'single-pick': {
+    label: '产品组单选模板',
+    templateDir: 'single-pick',
+  },
+  'multiple-pick': {
+    label: '产品组多选模板',
+    templateDir: 'multiple-pick',
+  },
+};
+
+const VUE_TEMPLATE_STYLE_MAP = {
+  setup: {
+    label: 'script setup 风格',
+    templateFile: 'index.setup.vue.hbs',
+  },
+  normal: {
+    label: 'defineComponent 风格',
+    templateFile: 'index.normal.vue.hbs',
+  },
+};
+
 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 }) },
+const TEMPLATE_FILES = [
+  { output: 'src/index.scss', templateFile: 'index.scss.hbs', getData: (componentName, className) => ({ class: className, componentName }) },
+  { output: 'src/index.vue', type: 'vue-entry', getData: (componentName, className) => ({ class: className, componentName }) },
+  { output: 'src/typing.ts', templateFile: 'typing.ts.hbs', getData: (componentName) => ({ interfaceName: componentName, componentName }) },
+  { output: 'src/hook.ts', templateFile: 'hook.ts.hbs', getData: (componentName) => ({ componentName }) },
+  { output: 'src/data.ts', templateFile: 'data.ts.hbs', getData: (componentName) => ({ componentName }) },
+  { output: 'index.ts', templateFile: 'index.ts.hbs', getData: (componentName) => ({ componentName }) },
 ];
 
-function renderTemplate(templateName, data) {
-  const filePath = path.join(TEMPLATES_DIR, templateName);
-  const source = fs.readFileSync(filePath, 'utf-8');
+function renderTemplate(templatePath, data) {
+  const source = fs.readFileSync(templatePath, 'utf-8');
   let result = source;
   for (const [key, value] of Object.entries(data)) {
     result = result.replaceAll(`{{ ${key} }}`, String(value));
@@ -33,18 +54,56 @@ function renderTemplate(templateName, data) {
   return result;
 }
 
-export function generateComponent({ name, rootPath, templateType = 'setup', collisionStrategy = 'skip' }) {
+function resolveTemplateOptions({ templateType, vueTemplateType }) {
+  const businessTemplate = BUSINESS_TEMPLATE_MAP[templateType];
+  const vueTemplateStyle = VUE_TEMPLATE_STYLE_MAP[vueTemplateType];
+
+  if (!businessTemplate) {
+    return {
+      success: false,
+      error: `无效的 templateType: "${templateType}"，可选值: ${Object.keys(BUSINESS_TEMPLATE_MAP).join(', ')}`,
+    };
+  }
+
+  if (!vueTemplateStyle) {
+    return {
+      success: false,
+      error: `无效的 vueTemplateType: "${vueTemplateType}"，可选值: ${Object.keys(VUE_TEMPLATE_STYLE_MAP).join(', ')}`,
+    };
+  }
+
+  return {
+    success: true,
+    businessTemplate,
+    vueTemplateStyle,
+  };
+}
+
+export function generateComponent({
+  name,
+  rootPath,
+  templateType = 'general',
+  vueTemplateType = '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(', ')}` };
+
+  const resolvedOptions = resolveTemplateOptions({ templateType, vueTemplateType });
+  if (!resolvedOptions.success) {
+    return resolvedOptions;
   }
+
   if (!VALID_COLLISION_STRATEGIES.includes(collisionStrategy)) {
-    return { success: false, error: `无效的 collisionStrategy: "${collisionStrategy}"，可选值: ${VALID_COLLISION_STRATEGIES.join(', ')}` };
+    return {
+      success: false,
+      error: `无效的 collisionStrategy: "${collisionStrategy}"，可选值: ${VALID_COLLISION_STRATEGIES.join(', ')}`,
+    };
   }
 
   const camelName = changeCase.camelCase(name);
@@ -55,31 +114,42 @@ export function generateComponent({ name, rootPath, templateType = 'setup', coll
 
   if (fs.existsSync(fullTargetPath)) {
     if (collisionStrategy === 'skip') {
-      return { success: false, error: `目录已存在: ${targetFolder}（使用 --collisionStrategy=overwrite 覆盖）` };
+      return {
+        success: false,
+        error: `目录已存在: ${targetFolder}（使用 --collisionStrategy=overwrite 覆盖）`,
+      };
     }
+
     if (collisionStrategy === 'overwrite') {
       fs.rmSync(fullTargetPath, { recursive: true, force: true });
     }
   }
 
+  const { businessTemplate, vueTemplateStyle } = resolvedOptions;
   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);
+  for (const item of TEMPLATE_FILES) {
+    const templateFile = item.type === 'vue-entry' ? vueTemplateStyle.templateFile : item.templateFile;
+    const templatePath = path.join(TEMPLATES_DIR, businessTemplate.templateDir, templateFile);
+    const templateData = item.getData(componentName, className);
+    const destFile = path.join(fullTargetPath, item.output);
+    const destDir = path.dirname(destFile);
 
     fs.mkdirSync(destDir, { recursive: true });
 
-    const content = renderTemplate(templateFile, templateData);
+    const content = renderTemplate(templatePath, templateData);
     fs.writeFileSync(destFile, content, 'utf-8');
-    generatedFiles.push(path.join(targetFolder, item.dest, item.file).replace(/\\/g, '/'));
+    generatedFiles.push(path.join(targetFolder, item.output).replace(/\\/g, '/'));
   }
 
-  return { success: true, files: generatedFiles, componentName, targetFolder };
+  return {
+    success: true,
+    files: generatedFiles,
+    componentName,
+    targetFolder,
+    templateType,
+    vueTemplateType,
+    templateLabel: businessTemplate.label,
+    vueTemplateLabel: vueTemplateStyle.label,
+  };
 }

package/tmp-output/GeneralNormalDemo/index.ts

@@ -0,0 +1,4 @@
+import GeneralNormalDemo from './src/index.vue'
+
+export default GeneralNormalDemo
+export * from './src/typing'

package/tmp-output/GeneralNormalDemo/src/data.ts

@@ -0,0 +1,16 @@
+import type { DataType } from './typing'
+
+const data: Array<DataType> = [
+  {
+    label: '示例项1',
+    value: 'option-1',
+  },
+  {
+    label: '示例项2',
+    value: 'option-2',
+  },
+]
+
+export {
+  data,
+}

package/tmp-output/GeneralNormalDemo/src/hook.ts

@@ -0,0 +1,11 @@
+import { ref } from 'vue'
+import type { GeneralNormalDemoProps } from './typing'
+
+export const useGeneralNormalDemo = (props: GeneralNormalDemoProps) => {
+  const visible = ref(true)
+
+  return {
+    props,
+    visible,
+  }
+}

package/tmp-output/GeneralNormalDemo/src/index.scss

@@ -0,0 +1,5 @@
+.general-normal-demo {
+  position: absolute;
+  top: 0;
+  left: 0;
+}

package/tmp-output/GeneralNormalDemo/src/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="general-normal-demo"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { GeneralNormalDemoProps } from './typing'
+import { useGeneralNormalDemo } from './hook'
+
+export default defineComponent({
+  name: 'GeneralNormalDemo',
+  props: {
+    user: {
+      type: Object as PropType<GeneralNormalDemoProps['user']>,
+      required: false,
+    },
+  },
+  setup(props) {
+    const {} = useGeneralNormalDemo(props as GeneralNormalDemoProps)
+
+    return {}
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/tmp-output/GeneralNormalDemo/src/typing.ts

@@ -0,0 +1,13 @@
+export enum GeneralNormalDemoEnum {
+  ENUM_KEY1 = 'ENUM_KEY1',
+  ENUM_KEY2 = 'ENUM_KEY2',
+}
+
+export interface GeneralNormalDemoProps {
+  user?: Record<string, any>
+}
+
+export interface DataType {
+  label: string
+  value: string
+}

package/tmp-output/GeneralSetupDemo/index.ts

@@ -0,0 +1,4 @@
+import GeneralSetupDemo from './src/index.vue'
+
+export default GeneralSetupDemo
+export * from './src/typing'

package/tmp-output/GeneralSetupDemo/src/data.ts

@@ -0,0 +1,16 @@
+import type { DataType } from './typing'
+
+const data: Array<DataType> = [
+  {
+    label: '示例项1',
+    value: 'option-1',
+  },
+  {
+    label: '示例项2',
+    value: 'option-2',
+  },
+]
+
+export {
+  data,
+}

package/tmp-output/GeneralSetupDemo/src/hook.ts

@@ -0,0 +1,11 @@
+import { ref } from 'vue'
+import type { GeneralSetupDemoProps } from './typing'
+
+export const useGeneralSetupDemo = (props: GeneralSetupDemoProps) => {
+  const visible = ref(true)
+
+  return {
+    props,
+    visible,
+  }
+}

package/tmp-output/GeneralSetupDemo/src/index.scss

@@ -0,0 +1,5 @@
+.general-setup-demo {
+  position: absolute;
+  top: 0;
+  left: 0;
+}

package/tmp-output/GeneralSetupDemo/src/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="general-setup-demo"></div>
+</template>
+
+<script setup lang="ts">
+import { GeneralSetupDemoProps } from './typing'
+import { useGeneralSetupDemo } from './hook'
+
+defineOptions({
+  name: 'GeneralSetupDemo',
+})
+
+const props = defineProps<GeneralSetupDemoProps>()
+
+const {} = useGeneralSetupDemo(props)
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/tmp-output/GeneralSetupDemo/src/typing.ts

@@ -0,0 +1,13 @@
+export enum GeneralSetupDemoEnum {
+  ENUM_KEY1 = 'ENUM_KEY1',
+  ENUM_KEY2 = 'ENUM_KEY2',
+}
+
+export interface GeneralSetupDemoProps {
+  user?: Record<string, any>
+}
+
+export interface DataType {
+  label: string
+  value: string
+}