@ljjjjjjj/my-cli 1.0.0 → 1.1.1

package/README.md

@@ -0,0 +1,198 @@
+# my-cli
+
+一个基于 Node.js 的前端脚手架工具，帮助你快速生成 Vite 项目模板，并在已有项目中生成组件和页面骨架。
+
+## 功能特点
+
+- 支持创建 Vue3 + Vite 或 React + Vite 项目模板
+- 支持在当前项目中生成组件代码
+- 支持在当前项目中生成页面代码
+- 会自动识别项目是 Vue 还是 React
+- 支持通过配置文件自定义生成目录
+- 支持使用 --force 覆盖已存在文件
+
+## 支持的模板
+
+- Vue3 + Vite
+- React + Vite
+
+## 安装方式
+
+### 方式一：作为公开包使用（推荐给他人）
+
+```bash
+npm install -g @ljjjjjjj/my-cli
+```
+
+安装后可以直接使用：
+
+```bash
+my-cli --help
+```
+
+### 方式二：本地开发调试使用
+
+```bash
+npm install
+npm link
+```
+
+然后就可以在当前环境中直接执行：
+
+```bash
+my-cli create your-project-name
+```
+
+## 命令说明
+
+### 0. 查看帮助
+
+```bash
+my-cli help
+```
+
+或：
+
+```bash
+my-cli --help
+```
+
+会看到当前支持的命令：
+
+```bash
+my-cli create <项目名称>
+my-cli add component <组件名称> [--force]
+my-cli add page <页面名称> [--force]
+my-cli help
+```
+
+### 1. 创建项目
+
+```bash
+my-cli create your-project-name
+```
+
+执行后会提示你：
+
+- 选择项目模板
+- 输入项目描述
+
+创建成功后，会生成一个新的 Vite 项目目录。
+
+### 2. 生成组件
+
+在当前项目中执行：
+
+```bash
+my-cli add component Button
+```
+
+脚手架会先从当前目录向上查找 package.json，定位项目根目录；随后根据项目类型自动选择对应模板。
+
+默认生成位置：
+
+- Vue 项目：src/components/Button/
+- React 项目：src/components/Button/
+
+默认生成内容：
+
+Vue 项目：
+
+```text
+src/components/Button/
+├── Button.vue
+├── Button.module.scss
+├── index.ts
+├── README.md
+└── Button.test.ts
+```
+
+React 项目：
+
+```text
+src/components/Button/
+├── Button.jsx
+├── Button.module.css
+├── index.js
+├── README.md
+└── Button.test.jsx
+```
+
+### 3. 生成页面
+
+```bash
+my-cli add page User
+```
+
+默认生成位置：
+
+- Vue 项目：src/pages/User/
+- React 项目：src/pages/User/
+
+默认生成内容：
+
+```text
+src/pages/User/
+├── index.vue
+├── style.scss
+├── api.ts
+├── hooks.ts
+├── store.ts
+└── types.ts
+```
+
+React 项目则会生成对应的 jsx 和 css 文件。
+
+### 4. 覆盖已存在文件
+
+如果目标文件已存在，默认会询问是否覆盖；如果你想直接覆盖，可以使用：
+
+```bash
+my-cli add component Button --force
+```
+
+或简写：
+
+```bash
+my-cli add page User -f
+```
+
+## 配置说明
+
+脚手架会先从当前目录向上查找 package.json，定位项目根目录。
+
+你可以在项目根目录创建 .my-cli.json 来指定生成目录和框架：
+
+```json
+{
+  "framework": "vue",
+  "componentsDir": "src/components",
+  "pagesDir": "src/pages"
+}
+```
+
+也可以在 package.json 中配置：
+
+```json
+{
+  "myCli": {
+    "framework": "react",
+    "componentsDir": "src/components",
+    "pagesDir": "src/pages"
+  }
+}
+```
+
+如果没有配置，脚手架会自动根据 package.json 或项目文件结构进行检测。
+
+## 适用场景
+
+这个脚手架适合用于：
+
+- 快速初始化前端项目
+- 在已有项目中快速生成组件和页面
+- 作为学习和练习 CLI 工具的示例项目
+
+## 说明
+
+如果你希望把这个脚手架给他人使用，请直接使用发布到 npm 的包名进行安装。

package/bin/index.js

@@ -5,64 +5,365 @@ import fs from 'fs-extra';
 import ora from 'ora';
 import inquirer from 'inquirer';
 import { fileURLToPath } from 'url';
+import { program } from 'commander';   // ← 关键新增
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+// ---------- 读取 package.json ----------
+const pkg = await fs.readJson(path.join(__dirname, '../package.json'));
+
+// ---------- 模板映射 ----------
 const TEMPLATE_MAP = {
     'Vue3 + Vite': path.resolve(__dirname, '../templates/vue3-vite'),
     'React + Vite': path.resolve(__dirname, '../templates/react-vite')
 };
 
-const args = process.argv.slice(2);
-const command = args[0];
-const projectName = args[1];
+// ---------- 工具函数 ----------
+function toPascalCase(value) {
+    return value
+        .replace(/[_\-\s]+(.)?/g, (_, char) => (char ? char.toUpperCase() : ''))
+        .replace(/^(.)/, (char) => char.toUpperCase());
+}
+
+function renderTemplate(templatePath, replacements) {
+    const template = fs.readFileSync(templatePath, 'utf8');
+    return template.replace(/\{\{(\w+)\}\}/g, (_, key) => replacements[key] ?? '');
+}
+
+// ---------- 查找项目根目录 ----------
+function findProjectRoot(startDir = process.cwd()) {
+    let current = startDir;
+    while (current !== path.parse(current).root) {
+        const pkgPath = path.join(current, 'package.json');
+        if (fs.existsSync(pkgPath)) {
+            return current;
+        }
+        current = path.dirname(current);
+    }
+    return startDir;
+}
+
+// ---------- 加载项目配置 ----------
+function loadProjectConfig(projectRoot) {
+    const config = {
+        framework: null,
+        componentsDir: 'src/components',
+        pagesDir: 'src/pages'
+    };
+
+    const cliConfigPath = path.join(projectRoot, '.my-cli.json');
+    if (fs.existsSync(cliConfigPath)) {
+        try {
+            const userConfig = fs.readJsonSync(cliConfigPath);
+            Object.assign(config, userConfig);
+        } catch {
+            console.warn('⚠️  解析 .my-cli.json 失败，使用默认配置');
+        }
+    }
+
+    const pkgPath = path.join(projectRoot, 'package.json');
+    if (fs.existsSync(pkgPath)) {
+        try {
+            const pkg = fs.readJsonSync(pkgPath);
+            if (pkg.myCli) {
+                Object.assign(config, pkg.myCli);
+            }
+        } catch { }
+    }
+
+    config.componentsDir = config.componentsDir.replace(/^\.?\//, '');
+    config.pagesDir = config.pagesDir.replace(/^\.?\//, '');
+    return config;
+}
+
+// ---------- 检测项目类型 ----------
+function detectProjectType(projectRoot, config) {
+    if (config.framework) {
+        if (config.framework === 'react' || config.framework === 'vue') {
+            return config.framework;
+        }
+        console.warn(`⚠️  未知框架 "${config.framework}"，将自动检测`);
+    }
+
+    const pkgPath = path.join(projectRoot, 'package.json');
+    if (fs.existsSync(pkgPath)) {
+        try {
+            const pkg = fs.readJsonSync(pkgPath);
+            const deps = {
+                ...(pkg.dependencies || {}),
+                ...(pkg.devDependencies || {})
+            };
+            if (deps.react || deps['@vitejs/plugin-react'] || deps.preact) return 'react';
+            if (deps.vue || deps['@vitejs/plugin-vue']) return 'vue';
+        } catch { }
+    }
+
+    const srcPath = path.join(projectRoot, 'src');
+    if (fs.existsSync(srcPath)) {
+        const files = fs.readdirSync(srcPath);
+        if (files.some(f => f.endsWith('.jsx') || f.endsWith('.tsx'))) return 'react';
+        if (files.some(f => f.endsWith('.vue'))) return 'vue';
+    }
+    return 'vue';
+}
+
+// ---------- 获取脚手架配置 ----------
+function getScaffoldConfig(projectRoot, projectType) {
+    const templateRoot = path.resolve(__dirname, '../templates/generator');
+    if (projectType === 'react') {
+        return {
+            projectType,
+            componentExt: 'jsx',
+            styleExt: 'css',
+            entryExt: 'js',
+            componentTemplatePath: path.join(templateRoot, 'component/react/component.jsx.tpl'),
+            styleTemplatePath: path.join(templateRoot, 'component/react/component.css.tpl'),
+            pageTemplatePath: path.join(templateRoot, 'page/react/page.jsx.tpl'),
+            pageStyleTemplatePath: path.join(templateRoot, 'page/react/page.css.tpl'),
+            pageFiles: [
+                { name: 'api.ts', templatePath: path.join(templateRoot, 'page/react/api.ts.tpl') },
+                { name: 'hooks.ts', templatePath: path.join(templateRoot, 'page/react/hooks.ts.tpl') },
+                { name: 'store.ts', templatePath: path.join(templateRoot, 'page/react/store.ts.tpl') },
+                { name: 'types.ts', templatePath: path.join(templateRoot, 'page/react/types.ts.tpl') }
+            ],
+            testTemplate: (componentName) =>
+                `import { describe, it, expect } from 'vitest';\n\ndescribe('${componentName}', () => {\n  it('renders correctly', () => {\n    expect(true).toBe(true);\n  });\n});\n`
+        };
+    }
+    // vue
+    return {
+        projectType: 'vue',
+        componentExt: 'vue',
+        styleExt: 'scss',
+        entryExt: 'ts',
+        componentTemplatePath: path.join(templateRoot, 'component/vue/component.vue.tpl'),
+        styleTemplatePath: path.join(templateRoot, 'component/vue/component.scss.tpl'),
+        pageTemplatePath: path.join(templateRoot, 'page/vue/page.vue.tpl'),
+        pageStyleTemplatePath: path.join(templateRoot, 'page/vue/page.scss.tpl'),
+        pageFiles: [
+            { name: 'api.ts', templatePath: path.join(templateRoot, 'page/vue/api.ts.tpl') },
+            { name: 'hooks.ts', templatePath: path.join(templateRoot, 'page/vue/hooks.ts.tpl') },
+            { name: 'store.ts', templatePath: path.join(templateRoot, 'page/vue/store.ts.tpl') },
+            { name: 'types.ts', templatePath: path.join(templateRoot, 'page/vue/types.ts.tpl') }
+        ],
+        testTemplate: (componentName) =>
+            `import { describe, it, expect } from 'vitest';\n\ndescribe('${componentName}', () => {\n  it('renders correctly', () => {\n    expect(true).toBe(true);\n  });\n});\n`
+    };
+}
 
-if (command !== 'create' || !projectName) {
-    console.log('使用方法：my-cli create 项目名称');
-    process.exit(0);
+// ---------- 安全写入文件 ----------
+async function safeWriteFile(filePath, content, force = false) {
+    if (fs.existsSync(filePath) && !force) {
+        const { overwrite } = await inquirer.prompt([
+            {
+                type: 'confirm',
+                name: 'overwrite',
+                message: `文件 ${path.basename(filePath)} 已存在，是否覆盖？`,
+                default: false
+            }
+        ]);
+        if (!overwrite) return false;
+    }
+    await fs.outputFile(filePath, content);
+    return true;
 }
 
-(async function run() {
-    console.log(`✨ 正在创建项目: ${projectName}`);
+// ---------- 生成组件 ----------
+async function generateComponentFiles(name, projectRoot, config, force) {
+    const componentName = toPascalCase(name);
+    const baseDir = path.join(projectRoot, config.componentsDir, componentName);
+    await fs.ensureDir(baseDir);
 
-    const answers = await inquirer.prompt([
+    const scaffoldConfig = getScaffoldConfig(projectRoot, config.framework || detectProjectType(projectRoot, config));
+    const replacements = {
+        componentName,
+        componentNameLower: componentName.toLowerCase()
+    };
+
+    const filesToGenerate = [
+        {
+            path: path.join(baseDir, `${componentName}.${scaffoldConfig.componentExt}`),
+            content: renderTemplate(scaffoldConfig.componentTemplatePath, replacements)
+        },
         {
-            type: 'select',
-            name: 'templateKey',
-            message: '请选择项目模板:',
-            choices: Object.keys(TEMPLATE_MAP)
+            path: path.join(baseDir, `${componentName}.module.${scaffoldConfig.styleExt}`),
+            content: renderTemplate(scaffoldConfig.styleTemplatePath, replacements)
         },
         {
-            type: 'input',
-            name: 'description',
-            message: '项目描述:',
-            default: 'A new project'
+            path: path.join(baseDir, `index.${scaffoldConfig.entryExt}`),
+            content: `export { default } from './${componentName}.${scaffoldConfig.componentExt}';\n`
+        },
+        {
+            path: path.join(baseDir, 'README.md'),
+            content: `# ${componentName}\n\n${componentName} 组件说明。\n`
+        },
+        {
+            path: path.join(baseDir, `${componentName}.${scaffoldConfig.projectType === 'react' ? 'test.jsx' : 'test.ts'}`),
+            content: scaffoldConfig.testTemplate(componentName)
+        }
+    ];
+
+    let overwrittenCount = 0, skippedCount = 0;
+    for (const file of filesToGenerate) {
+        const result = await safeWriteFile(file.path, file.content, force);
+        result ? overwrittenCount++ : skippedCount++;
+    }
+    return { overwrittenCount, skippedCount, baseDir };
+}
+
+// ---------- 生成页面 ----------
+async function generatePageFiles(name, projectRoot, config, force) {
+    const pageName = toPascalCase(name);
+    const baseDir = path.join(projectRoot, config.pagesDir, pageName);
+    await fs.ensureDir(baseDir);
+
+    const scaffoldConfig = getScaffoldConfig(projectRoot, config.framework || detectProjectType(projectRoot, config));
+    const replacements = {
+        pageName,
+        pageNameLower: pageName.toLowerCase()
+    };
+
+    const filesToGenerate = [
+        {
+            path: path.join(baseDir, `index.${scaffoldConfig.componentExt}`),
+            content: renderTemplate(scaffoldConfig.pageTemplatePath, replacements)
+        },
+        {
+            path: path.join(baseDir, `style.${scaffoldConfig.styleExt}`),
+            content: renderTemplate(scaffoldConfig.pageStyleTemplatePath, replacements)
         }
-    ]);
+    ];
+    for (const pageFile of scaffoldConfig.pageFiles) {
+        filesToGenerate.push({
+            path: path.join(baseDir, pageFile.name),
+            content: renderTemplate(pageFile.templatePath, replacements)
+        });
+    }
 
-    const targetPath = path.resolve(process.cwd(), projectName);
-    const sourceTemplatePath = TEMPLATE_MAP[answers.templateKey];
+    let overwrittenCount = 0, skippedCount = 0;
+    for (const file of filesToGenerate) {
+        const result = await safeWriteFile(file.path, file.content, force);
+        result ? overwrittenCount++ : skippedCount++;
+    }
+    return { overwrittenCount, skippedCount, baseDir };
+}
 
-    const spinner = ora('正在复制模板文件...').start();
-    try {
-        await fs.copy(sourceTemplatePath, targetPath);
+// ---------- Commander 配置 ----------
+program
+    .version(pkg.version, '-V, --version', '显示版本号')
+    .description('一个快速生成 Vue3/React + Vite 项目的脚手架工具');
 
-        const pkgJsonPath = path.join(targetPath, 'package.json');
-        const pkg = await fs.readJson(pkgJsonPath);
-        pkg.description = answers.description;
-        await fs.writeJson(pkgJsonPath, pkg, { spaces: 2 });
+// ---------- create 命令 ----------
+program
+    .command('create <project-name>')
+    .description('创建一个新项目')
+    .option('-t, --template <name>', '指定模板名称（Vue3 + Vite / React + Vite）')
+    .option('-d, --description <desc>', '项目描述')
+    .action(async (projectName, options) => {
+        console.log(`✨ 正在创建项目: ${projectName}`);
 
-        spinner.succeed('✅ 项目创建成功！');
-        console.log(`
+        let templateKey = options.template;
+        let description = options.description;
+
+        if (!templateKey) {
+            const answer = await inquirer.prompt([
+                {
+                    type: 'select',
+                    name: 'templateKey',
+                    message: '请选择项目模板:',
+                    choices: Object.keys(TEMPLATE_MAP)
+                }
+            ]);
+            templateKey = answer.templateKey;
+        } else if (!Object.keys(TEMPLATE_MAP).includes(templateKey)) {
+            console.error(`❌ 未知模板: ${templateKey}`);
+            console.log(`可用模板: ${Object.keys(TEMPLATE_MAP).join(', ')}`);
+            process.exit(1);
+        }
+
+        if (!description) {
+            const answer = await inquirer.prompt([
+                {
+                    type: 'input',
+                    name: 'description',
+                    message: '项目描述:',
+                    default: 'A new project'
+                }
+            ]);
+            description = answer.description;
+        }
+
+        const targetPath = path.resolve(process.cwd(), projectName);
+        const sourceTemplatePath = TEMPLATE_MAP[templateKey];
+
+        const spinner = ora('正在复制模板文件...').start();
+        try {
+            await fs.copy(sourceTemplatePath, targetPath);
+            const pkgJsonPath = path.join(targetPath, 'package.json');
+            const pkg = await fs.readJson(pkgJsonPath);
+            pkg.description = description;
+            await fs.writeJson(pkgJsonPath, pkg, { spaces: 2 });
+            spinner.succeed('✅ 项目创建成功！');
+            console.log(`
 接下来执行命令：
-cd ${projectName}
-npm install
-npm run dev
+  cd ${projectName}
+  npm install
+  npm run dev
 `);
+        } catch (err) {
+            spinner.fail('❌ 创建项目失败');
+            console.error(err);
+        }
+    });
 
-    } catch (err) {
-        spinner.fail('❌ 创建项目失败');
-        console.error(err);
-    }
-})();
+// ---------- add 命令 ----------
+program
+    .command('add <type> <name>')
+    .description('添加组件或页面（type: component | page）')
+    .option('-f, --force', '强制覆盖已存在的文件')
+    .action(async (type, name, options) => {
+        if (!['component', 'page'].includes(type)) {
+            console.error('❌ 类型必须是 component 或 page');
+            process.exit(1);
+        }
+
+        const projectRoot = findProjectRoot(process.cwd());
+        const projectConfig = loadProjectConfig(projectRoot);
+        const framework = projectConfig.framework || detectProjectType(projectRoot, projectConfig);
+        projectConfig.framework = framework;
+
+        const spinner = ora('正在生成业务代码...').start();
+        try {
+            let result;
+            if (type === 'component') {
+                result = await generateComponentFiles(name, projectRoot, projectConfig, options.force);
+                spinner.succeed(
+                    `✅ 已生成组件文件: ${toPascalCase(name)}\n` +
+                    `   位置: ${path.relative(projectRoot, result.baseDir)}\n` +
+                    `   覆盖: ${result.overwrittenCount} 个文件，跳过: ${result.skippedCount} 个`
+                );
+            } else {
+                result = await generatePageFiles(name, projectRoot, projectConfig, options.force);
+                spinner.succeed(
+                    `✅ 已生成页面文件: ${toPascalCase(name)}\n` +
+                    `   位置: ${path.relative(projectRoot, result.baseDir)}\n` +
+                    `   覆盖: ${result.overwrittenCount} 个文件，跳过: ${result.skippedCount} 个`
+                );
+            }
+        } catch (err) {
+            spinner.fail('❌ 生成业务代码失败');
+            console.error(err);
+        }
+    });
+
+program.on('command:*', () => {
+    console.error('❌ 未知命令: %s', program.args.join(' '));
+    program.help();
+});
+
+program.parse(process.argv);
+
+if (!process.argv.slice(2).length) {
+    program.help();
+}

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@ljjjjjjj/my-cli",
-    "version": "1.0.0",
+    "version": "1.1.1",
     "description": "vite脚手架，快速生成Vue3/React+vite项目模板",
     "main": "./bin/index.js",
     "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
+        "test": "node --test tests/"
     },
     "keywords": [
         "cli",

package/templates/generator/component/react/component.css.tpl

@@ -0,0 +1,70 @@
+/* 基础样式 */
+.button {
+  font-family: inherit;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+/* 尺寸变体 */
+.small {
+  padding: 6px 16px;
+  font-size: 14px;
+}
+.medium {
+  padding: 10px 24px;
+  font-size: 16px;
+}
+.large {
+  padding: 14px 32px;
+  font-size: 18px;
+}
+
+/* 颜色变体 */
+.primary {
+  background-color: #646cff;
+  color: #fff;
+}
+.primary:hover:not(:disabled) {
+  background-color: #535bf2;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(100, 108, 255, 0.4);
+}
+
+.secondary {
+  background-color: #e9ecef;
+  color: #495057;
+}
+.secondary:hover:not(:disabled) {
+  background-color: #dee2e6;
+  transform: translateY(-2px);
+}
+
+.danger {
+  background-color: #ff6b6b;
+  color: #fff;
+}
+.danger:hover:not(:disabled) {
+  background-color: #fa5252;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
+}
+
+/* 禁用状态 */
+.button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+/* 点击反馈 */
+.button:active:not(:disabled) {
+  transform: scale(0.96) !important;
+}

package/templates/generator/component/react/component.jsx.tpl

@@ -0,0 +1,19 @@
+import styles from './{{componentName}}.module.css';
+
+export default function {{componentName}}({ 
+  children, 
+  onClick, 
+  variant = 'primary', 
+  disabled = false, 
+  size = 'medium' 
+}) {
+  return (
+    <button
+      className={`${styles.button} ${styles[variant]} ${styles[size]}`}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children || '{{componentName}}'}
+    </button>
+  );
+}

package/templates/generator/component/vue/component.scss.tpl

@@ -0,0 +1,73 @@
+// 基础样式
+.button {
+  font-family: inherit;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+
+  // 尺寸变体
+  &.small {
+    padding: 6px 16px;
+    font-size: 14px;
+  }
+  &.medium {
+    padding: 10px 24px;
+    font-size: 16px;
+  }
+  &.large {
+    padding: 14px 32px;
+    font-size: 18px;
+  }
+
+  // 颜色变体
+  &.primary {
+    background-color: #646cff;
+    color: #fff;
+
+    &:hover:not(:disabled) {
+      background-color: #535bf2;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(100, 108, 255, 0.4);
+    }
+  }
+
+  &.secondary {
+    background-color: #e9ecef;
+    color: #495057;
+
+    &:hover:not(:disabled) {
+      background-color: #dee2e6;
+      transform: translateY(-2px);
+    }
+  }
+
+  &.danger {
+    background-color: #ff6b6b;
+    color: #fff;
+
+    &:hover:not(:disabled) {
+      background-color: #fa5252;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
+    }
+  }
+
+  // 禁用状态
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none !important;
+    box-shadow: none !important;
+  }
+
+  // 点击反馈
+  &:active:not(:disabled) {
+    transform: scale(0.96) !important;
+  }
+}

package/templates/generator/component/vue/component.vue.tpl

@@ -0,0 +1,40 @@
+<template>
+  <button
+    :class="[styles.button, styles[variant], styles[size]]"
+    :disabled="disabled"
+    @click="handleClick"
+  >
+    <!-- 支持插槽，方便传入复杂内容 -->
+    <slot>{{ componentName }}</slot>
+  </button>
+</template>
+
+<script setup>
+// 导入同名的 CSS Modules 样式文件
+import styles from './{{componentName}}.module.scss';
+
+// 定义组件属性
+defineProps({
+  variant: {
+    type: String,
+    default: 'primary',
+    validator: (val) => ['primary', 'secondary', 'danger'].includes(val)
+  },
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (val) => ['small', 'medium', 'large'].includes(val)
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// 定义事件
+const emit = defineEmits(['click']);
+
+const handleClick = (event) => {
+  emit('click', event);
+};
+</script>

package/templates/generator/page/react/api.ts.tpl

@@ -0,0 +1,3 @@
+export const fetch{{pageName}}Data = async () => {
+  return {};
+};

package/templates/generator/page/react/hooks.ts.tpl

@@ -0,0 +1,3 @@
+export function use{{pageName}}() {
+  return {};
+}

package/templates/generator/page/react/page.css.tpl

@@ -0,0 +1,3 @@
+.{{pageNameLower}} {
+  padding: 16px;
+}

package/templates/generator/page/react/page.jsx.tpl

@@ -0,0 +1,5 @@
+import './style.css';
+
+export default function {{pageName}}() {
+  return <section className="{{pageNameLower}}">{{pageName}}</section>;
+}

package/templates/generator/page/react/store.ts.tpl

@@ -0,0 +1,3 @@
+export const {{pageName}}Store = {
+  state: {}
+};

package/templates/generator/page/react/types.ts.tpl

@@ -0,0 +1,3 @@
+export interface {{pageName}}State {
+  id?: string;
+}

package/templates/generator/page/vue/api.ts.tpl

@@ -0,0 +1,3 @@
+export const fetch{{pageName}}Data = async () => {
+  return {};
+};

package/templates/generator/page/vue/hooks.ts.tpl

@@ -0,0 +1,3 @@
+export function use{{pageName}}() {
+  return {};
+}

package/templates/generator/page/vue/page.scss.tpl

@@ -0,0 +1,3 @@
+.{{pageNameLower}} {
+  padding: 16px;
+}

package/templates/generator/page/vue/page.vue.tpl

@@ -0,0 +1,14 @@
+<template>
+  <section class="{{pageNameLower}}">
+    <h1>{{pageName}}</h1>
+  </section>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped lang="scss">
+.{{pageNameLower}} {
+  padding: 16px;
+}
+</style>

package/templates/generator/page/vue/store.ts.tpl

@@ -0,0 +1,3 @@
+export const {{pageName}}Store = {
+  state: {}
+};

package/templates/generator/page/vue/types.ts.tpl

@@ -0,0 +1,3 @@
+export interface {{pageName}}State {
+  id?: string;
+}