@xubill/xx-cli 2.0.4

package/lib/utils/plugins-helper.js

@@ -0,0 +1,276 @@
+/**
+ * 插件辅助工具
+ * 提供与 BasePlugin 相同的通用功能，供新的插件实现方式使用
+ */
+
+const ConfigManager = require('./config-manager');
+const chalk = require('chalk').default;
+const ora = require('ora').default;;
+const clipboardy = require('clipboardy').default;
+
+/**
+ * 插件辅助类
+ * @param {string} pluginName - 插件名称
+ * @param {Object} options - 选项
+ */
+class PluginsHelper {
+  constructor(pluginName, options = {}) {
+    this.pluginName = pluginName;
+    this.homeDir = process.env.HOME || process.env.USERPROFILE || process.cwd();
+    this.configManager = new ConfigManager(pluginName, options);
+    this.spinner = null;
+    this.progressTotal = 0;
+    this.progressCurrent = 0;
+    this.hooks = {};
+  }
+
+  /**
+   * 显示加载状态
+   * @param {string} text - 加载文本
+   */
+  startLoading(text) {
+    this.spinner = ora(text).start();
+  }
+
+  /**
+   * 停止加载状态
+   * @param {string} text - 成功文本
+   */
+  stopLoading(text) {
+    if (this.spinner) {
+      this.spinner.succeed(text);
+      this.spinner = null;
+    }
+  }
+
+  /**
+   * 显示错误状态
+   * @param {string} text - 错误文本
+   */
+  showError(text) {
+    if (this.spinner) {
+      this.spinner.fail(text);
+      this.spinner = null;
+    } else {
+      console.error(chalk.red(`❌ ${text}`));
+    }
+  }
+
+  /**
+   * 启动进度条
+   * @param {string} text - 进度条文本
+   * @param {number} total - 总进度值
+   */
+  startProgressBar(text, total = 100) {
+    this.spinner = ora({
+      text,
+      spinner: 'arc',
+      color: 'cyan'
+    }).start();
+    this.progressTotal = total;
+    this.progressCurrent = 0;
+  }
+
+  /**
+   * 更新进度条
+   * @param {number} current - 当前进度值
+   * @param {string} text - 进度条文本
+   */
+  updateProgressBar(current, text) {
+    if (this.spinner && this.progressTotal > 0) {
+      this.progressCurrent = current;
+      const percentage = Math.min(Math.round((current / this.progressTotal) * 100), 100);
+      this.spinner.text = `${text || ''} ${percentage}%`;
+    }
+  }
+
+  /**
+   * 停止进度条
+   * @param {string} text - 完成文本
+   */
+  stopProgressBar(text) {
+    if (this.spinner) {
+      this.spinner.succeed(text);
+      this.spinner = null;
+      this.progressTotal = 0;
+      this.progressCurrent = 0;
+    }
+  }
+
+  /**
+   * 显示成功信息
+   * @param {string} text - 成功文本
+   */
+  showSuccess(text) {
+    console.log(chalk.green(`✅ ${text}`));
+  }
+
+  /**
+   * 显示警告信息
+   * @param {string} text - 警告文本
+   */
+  showWarning(text) {
+    console.log(chalk.yellow(`⚠️  ${text}`));
+  }
+
+  /**
+   * 显示信息
+   * @param {string} text - 信息文本
+   */
+  showInfo(text) {
+    console.log(chalk.blue(`${text}`));
+  }
+
+  /**
+   * 加载配置
+   * @param {string} configName - 配置名称
+   * @param {Object} cliOptions - 命令行选项
+   * @returns {Object} 合并后的配置对象
+   */
+  loadConfig(configName = 'config', cliOptions = {}) {
+    return this.configManager.loadConfig(configName, cliOptions);
+  }
+
+  /**
+   * 保存配置
+   * @param {Object} config - 配置对象
+   * @param {string} configName - 配置名称
+   * @param {boolean} isGlobal - 是否保存到全局配置
+   */
+  saveConfig(config, configName = 'config', isGlobal = true) {
+    this.configManager.saveConfig(config, configName, isGlobal);
+  }
+
+  /**
+   * 验证配置
+   * @param {Object} config - 配置对象
+   * @param {Object} schema - 配置 schema
+   * @returns {Object} 验证结果
+   */
+  validateConfig(config, schema) {
+    return this.configManager.validateConfig(config, schema);
+  }
+
+  /**
+   * 错误处理
+   * @param {Error} error - 错误对象
+   * @param {string} message - 错误消息
+   */
+  handleError(error, message = '操作失败') {
+    this.showError(`${message}: ${error.message}`);
+    // 可以添加错误日志记录等逻辑
+  }
+
+  /**
+   * 执行异步操作
+   * @param {Function} fn - 异步函数
+   * @param {string} loadingText - 加载文本
+   * @param {string} successText - 成功文本
+   * @param {string} errorText - 错误文本
+   * @returns {Promise<any>}
+   */
+  async executeAsync(fn, loadingText, successText, errorText) {
+    try {
+      this.startLoading(loadingText);
+      const result = await fn();
+      this.stopLoading(successText);
+      return result;
+    } catch (error) {
+      this.handleError(error, errorText);
+      throw error;
+    }
+  }
+
+  /**
+   * 注册钩子
+   * @param {string} event - 事件名称
+   * @param {Function} callback - 回调函数
+   */
+  registerHook(event, callback) {
+    if (!this.hooks) {
+      this.hooks = {};
+    }
+    
+    if (!this.hooks[event]) {
+      this.hooks[event] = [];
+    }
+    
+    this.hooks[event].push(callback);
+  }
+
+  /**
+   * 触发钩子
+   * @param {string} event - 事件名称
+   * @param {*} data - 事件数据
+   * @returns {Promise<Array>} 钩子执行结果
+   */
+  async triggerHook(event, data) {
+    if (!this.hooks || !this.hooks[event]) {
+      return [];
+    }
+    
+    const results = [];
+    for (const callback of this.hooks[event]) {
+      try {
+        const result = await callback(data);
+        results.push(result);
+      } catch (error) {
+        this.handleError(error, `执行钩子 ${event} 时出错`);
+      }
+    }
+    
+    return results;
+  }
+
+  /**
+   * 检查是否注册了指定钩子
+   * @param {string} event - 事件名称
+   * @returns {boolean} 是否注册了钩子
+   */
+  hasHook(event) {
+    return this.hooks && this.hooks[event] && this.hooks[event].length > 0;
+  }
+
+  /**
+   * 复制文本到剪贴板
+   * @param {string} text - 要复制的文本
+   * @param {string} successMessage - 成功消息
+   * @returns {Promise<boolean>} 是否复制成功
+   */
+  async copyToClipboard(text, successMessage) {
+    try {
+      // 尝试不同的 clipboardy API 调用方式
+      if (clipboardy.default && typeof clipboardy.default.write === 'function') {
+        await clipboardy.default.write(text);
+      } else if (typeof clipboardy.write === 'function') {
+        await clipboardy.write(text);
+      } else if (typeof clipboardy.writeSync === 'function') {
+        clipboardy.writeSync(text);
+      } else {
+        throw new Error('clipboardy API 不可用');
+      }
+      if (successMessage) {
+        this.showSuccess(successMessage);
+      }
+      return true;
+    } catch (error) {
+      this.showWarning(`复制到剪贴板失败: ${error.message}`);
+      return false;
+    }
+  }
+}
+
+/**
+ * 创建插件辅助实例
+ * @param {string} pluginName - 插件名称
+ * @param {Object} options - 选项
+ * @returns {PluginsHelper} 插件辅助实例
+ */
+function createPluginsHelper(pluginName, options = {}) {
+  return new PluginsHelper(pluginName, options);
+}
+
+module.exports = {
+  PluginsHelper,
+  createPluginsHelper
+};

package/lib/utils/transformers/getInput.js

@@ -0,0 +1,76 @@
+/**
+ * 获取输入配置
+ * 处理用户输入的模板配置，转换为标准格式
+ */
+
+/**
+ * 处理模板配置
+ * @param {Object} config - 原始模板配置
+ * @returns {Object} 处理后的模板配置
+ */
+function processTemplateConfig(config) {
+  // 确保配置对象存在
+  if (!config) {
+    return {
+      dir: '.lists',
+      pages: {},
+      routes: { isRender: false },
+      mock: false
+    };
+  }
+
+  // 处理默认值
+  return {
+    dir: config.dir || '.lists',
+    pages: config.pages || {},
+    routes: {
+      isRender: config.routes?.isRender ?? false,
+      ...config.routes
+    },
+    mock: config.mock ?? false,
+    templateType: config.templateType || 'element-ui'
+  };
+}
+
+/**
+ * 处理页面配置
+ * @param {Object} pageConfig - 原始页面配置
+ * @returns {Object} 处理后的页面配置
+ */
+function processPageConfig(pageConfig) {
+  // 确保配置对象存在
+  if (!pageConfig) {
+    return {
+      template: {
+        cn: '列表页面',
+        en: 'list',
+        top: false,
+        bottom: false,
+        select: false,
+        btn: []
+      },
+      filter: {},
+      table: {}
+    };
+  }
+
+  // 处理默认值
+  return {
+    template: {
+      cn: pageConfig.template?.cn || '列表页面',
+      en: pageConfig.template?.en || 'list',
+      top: pageConfig.template?.top ?? false,
+      bottom: pageConfig.template?.bottom ?? false,
+      select: pageConfig.template?.select ?? false,
+      btn: pageConfig.template?.btn || [],
+      ...pageConfig.template
+    },
+    filter: pageConfig.filter || {},
+    table: pageConfig.table || {}
+  };
+}
+
+module.exports = {
+  processTemplateConfig,
+  processPageConfig
+};

package/lib/utils/transformers/index.js

@@ -0,0 +1,43 @@
+/**
+ * Transformers 统一入口
+ * 导出所有转换逻辑方法
+ */
+
+// 导出筛选器转换
+const { transformFilter, generateFieldName } = require('./transformFilter');
+
+// 导出表格转换
+const { transformTable } = require('./transformTable');
+
+// 导出列表页面转换
+const { transformList } = require('./transformList');
+
+// 导出路由转换
+const { transformRoutes } = require('./transformRoutes');
+
+// 导出 Mock 数据转换
+const { transformMock } = require('./transformMock');
+
+// 导出渲染列表页面
+const { renderLists } = require('./renderLists');
+
+module.exports = {
+  // 筛选器相关
+  transformFilter,
+  generateFieldName,
+  
+  // 表格相关
+  transformTable,
+  
+  // 列表页面相关
+  transformList,
+  
+  // 路由相关
+  transformRoutes,
+  
+  // Mock 数据相关
+  transformMock,
+  
+  // 渲染相关
+  renderLists
+};

package/lib/utils/transformers/renderLists.js

@@ -0,0 +1,94 @@
+/**
+ * 渲染列表页面的主入口
+ * 协调各个转换模块，生成完整的页面文件
+ */
+
+// 导入转换模块
+const { processTemplateConfig, processPageConfig } = require('./getInput');
+const { getSfcMaterial, getTransformersByType } = require('./sfcMaterial');
+const { transformList } = require('./transformList');
+const { transformRoutes } = require('./transformRoutes');
+const { transformMock } = require('./transformMock');
+
+/**
+ * 渲染列表页面
+ * @param {Object} config - 模板配置
+ * @returns {Object} 生成的文件内容
+ */
+function renderLists(config) {
+  // 处理模板配置
+  const processedConfig = processTemplateConfig(config);
+  
+  // 获取模板类型
+  const templateType = processedConfig.templateType;
+  
+  // 获取组件材料
+  const material = getSfcMaterial(templateType);
+  
+  // 获取转换函数
+  const transformers = getTransformersByType(templateType);
+  
+  const results = {
+    pages: {},
+    routes: null,
+    mock: {}
+  };
+  
+  // 处理每个页面
+  const pages = processedConfig.pages;
+  for (const [pageName, pageConfig] of Object.entries(pages)) {
+    // 处理页面配置
+    const processedPageConfig = processPageConfig(pageConfig);
+    const { template, filter, table } = processedPageConfig;
+    
+    // 生成 Vue 文件内容
+    const vueContent = transformList(template, filter, table, material);
+    results.pages[pageName] = {
+      content: vueContent,
+      fileName: `${template.en}.vue`
+    };
+    
+    // 生成 Mock 数据（如果需要）
+    if (processedConfig.mock) {
+      const mockContent = transformMock(template);
+      results.mock[pageName] = {
+        content: mockContent,
+        fileName: `${template.en}.mock.js`
+      };
+    }
+  }
+  
+  // 生成路由配置（如果需要）
+  if (processedConfig.routes?.isRender) {
+    const routesContent = transformRoutes(processedConfig);
+    results.routes = {
+      content: routesContent,
+      fileName: 'routes.js'
+    };
+  }
+  
+  return results;
+}
+
+/**
+ * 渲染单个页面
+ * @param {Object} pageConfig - 页面配置
+ * @param {string} templateType - 模板类型
+ * @returns {string} Vue 文件内容
+ */
+function renderSinglePage(pageConfig, templateType = 'element-ui') {
+  // 处理页面配置
+  const processedPageConfig = processPageConfig(pageConfig);
+  const { template, filter, table } = processedPageConfig;
+  
+  // 获取组件材料
+  const material = getSfcMaterial(templateType);
+  
+  // 生成 Vue 文件内容
+  return transformList(template, filter, table, material);
+}
+
+module.exports = {
+  renderLists,
+  renderSinglePage
+};

package/lib/utils/transformers/sfcMaterial.js

@@ -0,0 +1,113 @@
+/**
+ * 组件材料管理
+ * 定义不同模板类型的组件标签映射
+ */
+
+/**
+ * 获取组件材料
+ * @param {string} templateType - 模板类型
+ * @returns {Object} 组件材料配置
+ */
+function getSfcMaterial(templateType = 'element-ui') {
+  const materials = {
+    'element-ui': {
+      form: {
+        wrapper: 'el-form',
+        item: 'el-form-item',
+        input: 'el-input',
+        select: 'el-select',
+        option: 'el-option',
+        datePicker: 'el-date-picker',
+        button: 'el-button'
+      },
+      table: {
+        wrapper: 'el-table',
+        column: 'el-table-column',
+        pagination: 'el-pagination'
+      },
+      layout: {
+        container: 'el-container',
+        header: 'el-header',
+        main: 'el-main',
+        footer: 'el-footer',
+        row: 'el-row',
+        col: 'el-col'
+      },
+      button: 'el-button'
+    },
+    'antd': {
+      form: {
+        wrapper: 'a-form',
+        item: 'a-form-item',
+        input: 'a-input',
+        select: 'a-select',
+        option: 'a-select-option',
+        datePicker: 'a-date-picker',
+        button: 'a-button'
+      },
+      table: {
+        wrapper: 'a-table',
+        column: 'a-table-column',
+        pagination: 'a-pagination'
+      },
+      layout: {
+        container: 'a-layout',
+        header: 'a-layout-header',
+        main: 'a-layout-content',
+        footer: 'a-layout-footer',
+        row: 'a-row',
+        col: 'a-col'
+      },
+      button: 'a-button'
+    },
+    'element-plus': {
+      form: {
+        wrapper: 'el-form',
+        item: 'el-form-item',
+        input: 'el-input',
+        select: 'el-select',
+        option: 'el-option',
+        datePicker: 'el-date-picker',
+        button: 'el-button'
+      },
+      table: {
+        wrapper: 'el-table',
+        column: 'el-table-column',
+        pagination: 'el-pagination'
+      },
+      layout: {
+        container: 'el-container',
+        header: 'el-header',
+        main: 'el-main',
+        footer: 'el-footer',
+        row: 'el-row',
+        col: 'el-col'
+      },
+      button: 'el-button'
+    }
+  };
+
+  return materials[templateType] || materials['element-ui'];
+}
+
+/**
+ * 根据模板类型获取转换器
+ * @param {string} templateType - 模板类型
+ * @returns {Object} 转换器映射
+ */
+function getTransformersByType(templateType = 'element-ui') {
+  // 这里可以根据需要返回不同模板类型的特定转换器
+  // 目前使用通用转换器，后续可以扩展
+  return {
+    list: require('./transformList'),
+    filter: require('./transformFilter'),
+    table: require('./transformTable'),
+    routes: require('./transformRoutes'),
+    mock: require('./transformMock')
+  };
+}
+
+module.exports = {
+  getSfcMaterial,
+  getTransformersByType
+};

package/lib/utils/transformers/transformFilter.js

@@ -0,0 +1,95 @@
+/**
+ * 筛选器转换逻辑
+ * 将筛选器配置转换为 HTML 内容
+ */
+
+/**
+ * 生成字段名
+ * @param {string} label - 标签名称
+ * @returns {string} 字段名
+ */
+function generateFieldName(label) {
+  // 中文标签映射
+  const chineseMap = {
+    '用户名': 'username',
+    '状态': 'status',
+    '创建时间': 'createTime',
+    '邮箱': 'email',
+    '手机号': 'phone',
+    '地址': 'address',
+    'ID': 'id',
+    '名称': 'name',
+    '类型': 'type',
+    '描述': 'description',
+    '备注': 'remark'
+  };
+  
+  // 如果有映射，直接返回
+  if (chineseMap[label]) {
+    return chineseMap[label];
+  }
+  
+  // 否则，移除空格并转换为小写
+  return label.toLowerCase().replace(/\s+/g, '');
+}
+
+/**
+ * 生成筛选器内容
+ * @param {Object} filter - 筛选器配置
+ * @param {Object} material - 组件材料
+ * @returns {string} 筛选器 HTML 内容
+ */
+function transformFilter(filter, material) {
+  let content = '';
+  for (const [label, type] of Object.entries(filter || {})) {
+    // 生成英文字段名
+    const fieldName = generateFieldName(label);
+    switch (type) {
+      case 'input':
+        content += `
+      <${material.form.item} label="${label}">
+        <${material.form.input} v-model="searchForm.${fieldName}" placeholder="请输入${label}"></${material.form.input}>
+      </${material.form.item}>`;
+        break;
+      case 'select':
+        content += `
+      <${material.form.item} label="${label}">
+        <${material.form.select} v-model="searchForm.${fieldName}" placeholder="请选择${label}">
+          <${material.form.option} label="选项1" value="1"></${material.form.option}>
+          <${material.form.option} label="选项2" value="2"></${material.form.option}>
+        </${material.form.select}>
+      </${material.form.item}>`;
+        break;
+      case 'date':
+        content += `
+      <${material.form.item} label="${label}">
+        <${material.form.datePicker} v-model="searchForm.${fieldName}" type="date" placeholder="选择日期"></${material.form.datePicker}>
+      </${material.form.item}>`;
+        break;
+      case 'daterange':
+        content += `
+      <${material.form.item} label="${label}">
+        <${material.form.datePicker} v-model="searchForm.${fieldName}" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></${material.form.datePicker}>
+      </${material.form.item}>`;
+        break;
+      case 'datetime':
+        content += `
+      <${material.form.item} label="${label}">
+        <${material.form.datePicker} v-model="searchForm.${fieldName}" type="datetime" placeholder="选择日期时间"></${material.form.datePicker}>
+      </${material.form.item}>`;
+        break;
+      case 'datetimerange':
+        content += `
+      <${material.form.item} label="${label}">
+        <${material.form.datePicker} v-model="searchForm.${fieldName}" type="datetimerange" range-separator="至" start-placeholder="开始日期时间" end-placeholder="结束日期时间"></${material.form.datePicker}>
+      </${material.form.item}>`;
+        break;
+    }
+  }
+  return content;
+}
+
+module.exports = {
+  transformFilter,
+  generateFieldName
+};