@xubill/xx-cli 1.0.0

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

package/lib/utils/transformers/transformList.js

@@ -0,0 +1,120 @@
+/**
+ * 列表页面转换逻辑
+ * 将页面配置转换为完整的 Vue 组件内容
+ */
+
+// 导入筛选器和表格转换方法
+const { transformFilter } = require('./transformFilter');
+const { transformTable } = require('./transformTable');
+const { generateTemplateHeader, generateTemplateFooter, generateScriptSection, generateStyleSection } = require('./transformTemplate');
+
+/**
+ * 生成 Vue 文件内容
+ * @param {Object} template - 页面模板配置
+ * @param {Object} filter - 筛选器配置
+ * @param {Object} table - 表格配置
+ * @param {Object} material - 组件材料
+ * @returns {string} Vue 文件内容
+ */
+function transformList(template, filter, table, material) {
+  // 使用默认材料（Element UI）
+  const defaultMaterial = {
+    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',
+      selection: 'selection',
+      index: 'index'
+    },
+    pagination: 'el-pagination',
+    tag: 'el-tag',
+    classes: {
+      container: 'list-container',
+      btnGroup: 'btn-group',
+      pagination: 'pagination'
+    }
+  };
+  
+  // 合并材料
+  const finalMaterial = { ...defaultMaterial, ...material };
+  
+  // 生成筛选器内容
+  const filterContent = transformFilter(filter, finalMaterial);
+  
+  // 生成表格内容
+  const tableContent = transformTable(table, finalMaterial);
+  
+  // 生成按钮组
+  const btnGroupContent = template.btn?.map(btn => `<${finalMaterial.form.button} type="primary">${btn}</${finalMaterial.form.button}>`).join('\n      ') || '';
+  
+  // 生成模板内容
+  const templateContent = `<!-- ${template.cn} -->
+<template>
+  <div class="${template.en}">
+    <!-- 顶部插槽 -->
+    ${template.top ? '<slot name="filter-top"></slot>' : ''}
+
+    <!-- 筛选器 -->
+    <${finalMaterial.form.wrapper} :inline="true" :model="searchForm" class="demo-form-inline">
+      ${filterContent}
+      <${finalMaterial.form.item}>
+        <${finalMaterial.form.button} type="primary" @click="handleSearch">查询</${finalMaterial.form.button}>
+        <${finalMaterial.form.button} @click="resetForm">重置</${finalMaterial.form.button}>
+      </${finalMaterial.form.item}>
+    </${finalMaterial.form.wrapper}>
+
+    <!-- 按钮组 -->
+    <div class="btn-group">
+      ${btnGroupContent}
+    </div>
+
+    <!-- 表格 -->
+    <${finalMaterial.table.wrapper}
+      v-loading="loading"
+      :data="tableData"
+      style="width: 100%"
+      ${template.select ? '\n      @selection-change="handleSelectionChange"' : ''}
+    >
+      ${tableContent}
+    </${finalMaterial.table.wrapper}>
+
+    <!-- 底部插槽 -->
+    ${template.bottom ? '<slot name="table-bottom"></slot>' : ''}
+
+    <!-- 分页 -->
+    <div class="pagination">
+      <${finalMaterial.pagination}
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
+      </${finalMaterial.pagination}>
+    </div>
+  </div>
+</template>`;
+  
+  // 生成脚本部分
+  const scriptContent = generateScriptSection(template, finalMaterial);
+  
+  // 生成样式部分
+  const styleContent = generateStyleSection(template, finalMaterial);
+  
+  // 组合所有部分
+  return `${templateContent}\n${scriptContent}\n${styleContent}`;
+}
+
+module.exports = {
+  transformList
+};

package/lib/utils/transformers/transformMock.js

@@ -0,0 +1,43 @@
+/**
+ * Mock 数据转换逻辑
+ * 将页面配置转换为 Mock 数据文件内容
+ */
+
+/**
+ * 生成 mock 数据内容
+ * @param {Object} template - 页面模板配置
+ * @returns {string} mock 数据内容
+ */
+function transformMock(template) {
+  return `// Mock 数据
+const Mock = require('mockjs');
+
+// 生成模拟数据
+const mockData = Mock.mock({
+  'list|10-20': [{
+    'id|+1': 1,
+    'name': '@cname',
+    'email': '@email',
+    'phone': /^1[3-9]\d{9}$/,
+    'createTime': '@datetime',
+    'status|1': ['正常', '禁用']
+  }]
+});
+
+// 导出 mock 数据
+module.exports = {
+  'GET /api/${template.en}': {
+    code: 200,
+    message: 'success',
+    data: {
+      list: mockData.list,
+      total: mockData.list.length
+    }
+  }
+};
+`;
+}
+
+module.exports = {
+  transformMock
+};

package/lib/utils/transformers/transformRoutes.js

@@ -0,0 +1,36 @@
+/**
+ * 路由转换逻辑
+ * 将页面配置转换为路由配置文件内容
+ */
+
+/**
+ * 生成路由配置内容
+ * @param {Object} config - 页面配置
+ * @returns {string} 路由配置内容
+ */
+function transformRoutes(config) {
+  const routes = [];
+  const pages = config.pages || {};
+
+  for (const [pageName, pageConfig] of Object.entries(pages)) {
+    const { template } = pageConfig;
+    routes.push({
+      path: `/${template.en}`,
+      name: template.en,
+      component: () => import(`./${template.en}.vue`),
+      meta: {
+        title: template.cn
+      }
+    });
+  }
+
+  return `// 路由配置
+const routes = ${JSON.stringify(routes, null, 2)};
+
+export default routes;
+`;
+}
+
+module.exports = {
+  transformRoutes
+};

package/lib/utils/transformers/transformTable.js

@@ -0,0 +1,81 @@
+/**
+ * 表格转换逻辑
+ * 将表格配置转换为 HTML 内容
+ */
+
+// 导入生成字段名的方法
+const { generateFieldName } = require('./transformFilter');
+
+/**
+ * 生成表格内容
+ * @param {Object} table - 表格配置
+ * @param {Object} material - 组件材料
+ * @returns {string} 表格 HTML 内容
+ */
+function transformTable(table, material) {
+  let content = '';
+  for (const [label, type] of Object.entries(table || {})) {
+    if (typeof type === 'object') {
+      if (type.type === 'operate') {
+        content += `
+      <${material.table.column} label="${label}" ${type.fixed ? `fixed="${type.fixed}"` : ''} width="180">
+        <template slot-scope="scope">
+          ${type.render?.map(action => `<${material.button} size="small">${action}</${material.button}>`).join('\n          ') || ''}
+        </template>
+      </${material.table.column}>`;
+      }
+    } else {
+      // 生成英文字段名
+      const fieldName = generateFieldName(label);
+      switch (type) {
+        case 'selection':
+          content += `
+      <${material.table.column} type="selection" width="55"></${material.table.column}>`;
+          break;
+        case 'index':
+          content += `
+      <${material.table.column} type="index" label="${label}" width="80"></${material.table.column}>`;
+          break;
+        case 'text':
+          content += `
+      <${material.table.column} prop="${fieldName}" label="${label}"></${material.table.column}>`;
+          break;
+        case 'time':
+        case 'date':
+        case 'datetime':
+          content += `
+      <${material.table.column} prop="${fieldName}" label="${label}"></${material.table.column}>`;
+          break;
+        case 'option':
+          content += `
+      <${material.table.column} prop="${fieldName}" label="${label}">
+        <template slot-scope="scope">
+          <el-tag>{{ scope.row.${fieldName} }}</el-tag>
+        </template>
+      </${material.table.column}>`;
+          break;
+        case 'link':
+          content += `
+      <${material.table.column} prop="${fieldName}" label="${label}">
+        <template slot-scope="scope">
+          <a href="#">{{ scope.row.${fieldName} }}</a>
+        </template>
+      </${material.table.column}>`;
+          break;
+        case 'tag':
+          content += `
+      <${material.table.column} prop="${fieldName}" label="${label}">
+        <template slot-scope="scope">
+          <el-tag>{{ scope.row.${fieldName} }}</el-tag>
+        </template>
+      </${material.table.column}>`;
+          break;
+      }
+    }
+  }
+  return content;
+}
+
+module.exports = {
+  transformTable
+};

package/lib/utils/transformers/transformTemplate.js

@@ -0,0 +1,129 @@
+/**
+ * 模板转换的通用逻辑
+ * 提供通用的模板处理功能
+ */
+
+/**
+ * 转换模板配置
+ * @param {Object} template - 模板配置
+ * @param {Object} material - 组件材料
+ * @returns {Object} 转换后的模板配置
+ */
+function transformTemplateConfig(template, material) {
+  return {
+    ...template,
+    // 添加组件材料信息
+    material: material,
+    // 生成唯一标识
+    id: `${template.en}_${Date.now()}`
+  };
+}
+
+/**
+ * 生成模板头部
+ * @param {Object} template - 模板配置
+ * @returns {string} 模板头部注释
+ */
+function generateTemplateHeader(template) {
+  return `<!-- ${template.cn} -->
+<template>
+  <div class="${template.en}">`;
+}
+
+/**
+ * 生成模板底部
+ * @param {Object} template - 模板配置
+ * @returns {string} 模板底部
+ */
+function generateTemplateFooter(template) {
+  return `  </div>
+</template>`;
+}
+
+/**
+ * 生成脚本部分
+ * @param {Object} template - 模板配置
+ * @param {Object} material - 组件材料
+ * @returns {string} 脚本部分
+ */
+function generateScriptSection(template, material) {
+  return `<script>
+export default {
+  name: '${template.en}',
+  data() {
+    return {
+      searchForm: {},
+      tableData: [],
+      loading: false,
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      ${template.select ? 'multipleSelection: [],' : ''}
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    getList() {
+      this.loading = true;
+      // TODO: 替换为实际接口调用
+      setTimeout(() => {
+        this.tableData = [];
+        this.total = 0;
+        this.loading = false;
+      }, 500);
+    },
+    handleSearch() {
+      this.currentPage = 1;
+      this.getList();
+    },
+    resetForm() {
+      this.searchForm = {};
+      this.getList();
+    },
+    ${template.select ? `
+handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },` : ''}
+    handleSizeChange(size) {
+      this.pageSize = size;
+      this.getList();
+    },
+    handleCurrentChange(current) {
+      this.currentPage = current;
+      this.getList();
+    }
+  }
+};
+</script>`;
+}
+
+/**
+ * 生成样式部分
+ * @param {Object} template - 模板配置
+ * @param {Object} material - 组件材料
+ * @returns {string} 样式部分
+ */
+function generateStyleSection(template, material) {
+  return `<style scoped>
+.${template.en} {
+  padding: 20px;
+}
+.btn-group {
+  margin: 20px 0;
+}
+.pagination {
+  margin-top: 20px;
+  text-align: right;
+}
+</style>`;
+}
+
+module.exports = {
+  transformTemplateConfig,
+  generateTemplateHeader,
+  generateTemplateFooter,
+  generateScriptSection,
+  generateStyleSection
+};