create-component-template-cli 1.0.0 → 1.0.2

package/plop-templates/general/index.normal.vue.hbs

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

package/plop-templates/general/index.scss.hbs

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

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

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

package/plop-templates/{index.ts.hbs → general/index.ts.hbs}

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

package/plop-templates/general/typing.ts.hbs

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

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

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

package/plop-templates/multiple-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 selectedValues = ref(props.modelValue ?? data.slice(0, 2).map((item) => item.value))
+
+  return {
+    selectedValues,
+  }
+}

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

@@ -0,0 +1,37 @@
+<template>
+  <div class="{{ class }}">
+    <div v-for="item in selectedValues" :key="item">{{ item }}</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { {{ componentName }}Props } from './typing'
+import { use{{ componentName }} } from './hook'
+
+export default defineComponent({
+  name: '{{ componentName }}',
+  props: {
+    user: {
+      type: Object as PropType<{{ componentName }}Props['user']>,
+      required: false,
+    },
+    modelValue: {
+      type: Array as PropType<{{ componentName }}Props['modelValue']>,
+      required: false,
+      default: () => [],
+    },
+  },
+  setup(props) {
+    const { selectedValues } = use{{ componentName }}(props as {{ componentName }}Props)
+
+    return {
+      selectedValues,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

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

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

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

@@ -0,0 +1,22 @@
+<template>
+  <div class="{{ class }}">
+    <div v-for="item in selectedValues" :key="item">{{ item }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { {{ componentName }}Props } from './typing'
+import { use{{ componentName }} } from './hook'
+
+defineOptions({
+  name: '{{ componentName }}',
+})
+
+const props = defineProps<{{ componentName }}Props>()
+
+const { selectedValues } = use{{ componentName }}(props)
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

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

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

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)) {