create-component-template-cli 1.0.0 → 1.0.2

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
+}

package/tmp-output/MultiplePickNormalDemo/index.ts

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

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

@@ -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/tmp-output/MultiplePickNormalDemo/src/hook.ts

@@ -0,0 +1,11 @@
+import { ref } from 'vue'
+import { data } from './data'
+import type { MultiplePickNormalDemoProps } from './typing'
+
+export const useMultiplePickNormalDemo = (props: MultiplePickNormalDemoProps) => {
+  const selectedValues = ref(props.modelValue ?? data.slice(0, 2).map((item) => item.value))
+
+  return {
+    selectedValues,
+  }
+}

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

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

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

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

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

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

package/tmp-output/MultiplePickSetupDemo/index.ts

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

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

@@ -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/tmp-output/MultiplePickSetupDemo/src/hook.ts

@@ -0,0 +1,11 @@
+import { ref } from 'vue'
+import { data } from './data'
+import type { MultiplePickSetupDemoProps } from './typing'
+
+export const useMultiplePickSetupDemo = (props: MultiplePickSetupDemoProps) => {
+  const selectedValues = ref(props.modelValue ?? data.slice(0, 2).map((item) => item.value))
+
+  return {
+    selectedValues,
+  }
+}

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

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

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

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

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

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

package/tmp-output/SinglePickNormalDemo/index.ts

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

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

@@ -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/tmp-output/SinglePickNormalDemo/src/hook.ts

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

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

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

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

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

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

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

package/tmp-output/SinglePickSetupDemo/index.ts

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

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

@@ -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/tmp-output/SinglePickSetupDemo/src/hook.ts

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

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

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