@ljjjjjjj/my-cli 1.0.0 → 1.1.0

package/README.md

@@ -0,0 +1,3 @@
+# Button
+
+Button 组件说明。

package/bin/index.js

@@ -9,60 +9,408 @@ import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+// ---------- 模板映射（不变） ----------
 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());
+}
 
-if (command !== 'create' || !projectName) {
-    console.log('使用方法：my-cli create 项目名称');
-    process.exit(0);
+function renderTemplate(templatePath, replacements) {
+    const template = fs.readFileSync(templatePath, 'utf8');
+    return template.replace(/\{\{(\w+)\}\}/g, (_, key) => replacements[key] ?? '');
 }
 
-(async function run() {
-    console.log(`✨ 正在创建项目: ${projectName}`);
+function printHelp() {
+    console.log(`使用方法：
+  my-cli create <项目名称>
+  my-cli add component <组件名称> [--force]
+  my-cli add page <页面名称> [--force]
+  my-cli help`);
+}
+
+// ---------- 查找项目根目录 ----------
+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,      // 'vue' | 'react' | null
+        componentsDir: 'src/components',
+        pagesDir: 'src/pages'
+    };
+
+    // 1. 读取 .my-cli.json
+    const cliConfigPath = path.join(projectRoot, '.my-cli.json');
+    if (fs.existsSync(cliConfigPath)) {
+        try {
+            const userConfig = fs.readJsonSync(cliConfigPath);
+            Object.assign(config, userConfig);
+        } catch (err) {
+            console.warn('⚠️  解析 .my-cli.json 失败，使用默认配置');
+        }
+    }
+
+    // 2. 读取 package.json 中的 myCli 字段
+    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 (err) {
+            // ignore
+        }
+    }
+
+    // 确保路径使用相对路径（相对于项目根）
+    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 (err) {
+            // ignore
+        }
+    }
+
+    // 通过文件存在性检测
+    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';
+        }
+    }
+
+    // 默认返回 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\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\n\ndescribe('${componentName}', () => {\n  it('renders correctly', () => {\n    expect(true).toBe(true);\n  });\n});\n`
+    };
+}
 
-    const answers = await inquirer.prompt([
+// ---------- 辅助：安全写入文件（带覆盖确认） ----------
+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 generateComponentFiles(name, projectRoot, config, force) {
+    const componentName = toPascalCase(name);
+    const baseDir = path.join(projectRoot, config.componentsDir, componentName);
+    await fs.ensureDir(baseDir);
+
+    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)
+        },
+        {
+            path: path.join(baseDir, `${componentName}.module.${scaffoldConfig.styleExt}`),
+            content: renderTemplate(scaffoldConfig.styleTemplatePath, replacements)
+        },
         {
-            type: 'select',
-            name: 'templateKey',
-            message: '请选择项目模板:',
-            choices: Object.keys(TEMPLATE_MAP)
+            path: path.join(baseDir, `index.${scaffoldConfig.entryExt}`),
+            content: `export { default } from './${componentName}.${scaffoldConfig.componentExt}';\n`
         },
         {
-            type: 'input',
-            name: 'description',
-            message: '项目描述:',
-            default: 'A new project'
+            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;
+    let skippedCount = 0;
+
+    for (const file of filesToGenerate) {
+        const result = await safeWriteFile(file.path, file.content, force);
+        if (result) {
+            overwrittenCount++;
+        } else {
+            skippedCount++;
         }
-    ]);
+    }
 
-    const targetPath = path.resolve(process.cwd(), projectName);
-    const sourceTemplatePath = TEMPLATE_MAP[answers.templateKey];
+    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 spinner = ora('正在复制模板文件...').start();
-    try {
-        await fs.copy(sourceTemplatePath, targetPath);
+    const replacements = {
+        pageName,
+        pageNameLower: pageName.toLowerCase()
+    };
 
-        const pkgJsonPath = path.join(targetPath, 'package.json');
-        const pkg = await fs.readJson(pkgJsonPath);
-        pkg.description = answers.description;
-        await fs.writeJson(pkgJsonPath, pkg, { spaces: 2 });
+    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)
+        }
+    ];
+
+    // 添加额外的页面文件（api.ts, hooks.ts 等）
+    for (const pageFile of scaffoldConfig.pageFiles) {
+        filesToGenerate.push({
+            path: path.join(baseDir, pageFile.name),
+            content: renderTemplate(pageFile.templatePath, replacements)
+        });
+    }
+
+    let overwrittenCount = 0;
+    let skippedCount = 0;
+
+    for (const file of filesToGenerate) {
+        const result = await safeWriteFile(file.path, file.content, force);
+        if (result) {
+            overwrittenCount++;
+        } else {
+            skippedCount++;
+        }
+    }
+
+    return { overwrittenCount, skippedCount, baseDir };
+}
+
+// ---------- 主函数 ----------
+(async function run() {
+    const args = process.argv.slice(2);
+    let command = args[0];
+    let rest = args.slice(1);
 
-        spinner.succeed('✅ 项目创建成功！');
-        console.log(`
+    // 解析 --force / -f
+    let force = false;
+    const filteredArgs = [];
+    for (const arg of rest) {
+        if (arg === '--force' || arg === '-f') {
+            force = true;
+        } else {
+            filteredArgs.push(arg);
+        }
+    }
+    rest = filteredArgs;
+
+    if (!command || command === 'help' || command === '--help' || command === '-h') {
+        printHelp();
+        process.exit(0);
+    }
+
+    if (command === 'create') {
+        const projectName = rest[0];
+        if (!projectName) {
+            printHelp();
+            process.exit(0);
+        }
+
+        console.log(`✨ 正在创建项目: ${projectName}`);
+
+        const answers = await inquirer.prompt([
+            {
+                type: 'select',
+                name: 'templateKey',
+                message: '请选择项目模板:',
+                choices: Object.keys(TEMPLATE_MAP)
+            },
+            {
+                type: 'input',
+                name: 'description',
+                message: '项目描述:',
+                default: 'A new project'
+            }
+        ]);
+
+        const targetPath = path.resolve(process.cwd(), projectName);
+        const sourceTemplatePath = TEMPLATE_MAP[answers.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 = answers.description;
+            await fs.writeJson(pkgJsonPath, pkg, { spaces: 2 });
+
+            spinner.succeed('✅ 项目创建成功！');
+            console.log(`
 接下来执行命令：
 cd ${projectName}
 npm install
 npm run dev
 `);
+        } catch (err) {
+            spinner.fail('❌ 创建项目失败');
+            console.error(err);
+        }
+        return;
+    }
+
+    if (command === 'add') {
+        const type = rest[0];
+        const name = rest[1];
+
+        if (!type || !name || !['component', 'page'].includes(type)) {
+            printHelp();
+            process.exit(0);
+        }
 
-    } catch (err) {
-        spinner.fail('❌ 创建项目失败');
-        console.error(err);
+        // 定位项目根目录
+        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, force);
+                spinner.succeed(
+                    `✅ 已生成组件文件: ${toPascalCase(name)}\n` +
+                    `   位置: ${path.relative(projectRoot, result.baseDir)}\n` +
+                    `   覆盖: ${result.overwrittenCount} 个文件，跳过: ${result.skippedCount} 个`
+                );
+            } else {
+                result = await generatePageFiles(name, projectRoot, projectConfig, force);
+                spinner.succeed(
+                    `✅ 已生成页面文件: ${toPascalCase(name)}\n` +
+                    `   位置: ${path.relative(projectRoot, result.baseDir)}\n` +
+                    `   覆盖: ${result.overwrittenCount} 个文件，跳过: ${result.skippedCount} 个`
+                );
+            }
+        } catch (err) {
+            spinner.fail('❌ 生成业务代码失败');
+            console.error(err);
+        }
+        return;
     }
+
+    printHelp();
+    process.exit(0);
 })();

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@ljjjjjjj/my-cli",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "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;
+}