m8-mcp-server 1.0.3 → 1.0.5

package/dist/generator/index.js

@@ -2,76 +2,122 @@
  * 代码生成器主入口
  * @作者 M8 Team
  * @创建时间 2024-12-29
- * @描述 根据需求生成符合 M8 规范的代码
+ * @描述 根据需求生成符合 M8 规范的代码，包括 Vue、SCSS、Router、Mock 等
  */
 import { generateFileHeader, generateScssFileHeader } from './header.js';
-import { generateVueTemplate } from './vue-template.js';
+import { generateVueTemplate, filterValidComponents, suggestComponents } from './vue-template.js';
+/**
+ * 从需求描述中提取模块名称
+ * @param requirement 需求描述
+ * @returns 模块名称 (kebab-case)
+ */
+function extractModuleName(requirement) {
+    // 尝试从需求中提取有意义的名称
+    const patterns = [
+        /创建(.+?)组件/,
+        /生成(.+?)页面/,
+        /实现(.+?)功能/,
+        /(.+?)页面/,
+        /(.+?)列表/,
+        /(.+?)表单/,
+        /(.+?)详情/
+    ];
+    for (const pattern of patterns) {
+        const match = requirement.match(pattern);
+        if (match && match[1]) {
+            // 转换为 kebab-case
+            return match[1]
+                .trim()
+                .replace(/[\s_]+/g, '-')
+                .toLowerCase();
+        }
+    }
+    // 默认名称
+    return 'my-page';
+}
+/**
+ * 从需求描述中提取页面标题
+ * @param requirement 需求描述
+ * @returns 页面标题
+ */
+function extractPageTitle(requirement) {
+    const patterns = [
+        /创建(.+?)组件/,
+        /生成(.+?)页面/,
+        /实现(.+?)功能/,
+        /(.+?)页面/,
+    ];
+    for (const pattern of patterns) {
+        const match = requirement.match(pattern);
+        if (match && match[1]) {
+            return match[1].trim();
+        }
+    }
+    return '页面标题';
+}
 /**
  * 生成 API 调用代码
  * @param requirement 需求描述
+ * @param moduleName 模块名称
+ * @param useMock 是否使用 Mock
  * @returns 生成的代码
  */
-function generateApiCallCode(requirement) {
+function generateApiCallCode(requirement, moduleName, useMock = true) {
     const header = generateFileHeader({
         description: requirement
     });
-    // 分析需求，生成对应的 API 调用代码
+    const apiPath = useMock ? `/rest/mock/${moduleName}` : `/api/${moduleName}`;
     const code = `${header}
 
 /**
- * ${requirement}
+ * ${requirement} - API 接口
  * 使用 Util.ajax 发送请求，遵循 M8 规范
  */
 
-// 引入配置
-import Config from '@/config';
-
 /**
- * 发送 API 请求
+ * 获取列表数据
  * @param {Object} params - 请求参数
  * @returns {Promise} 请求结果
  */
-export function fetchData(params = {}) {
-  return new Promise((resolve, reject) => {
-    Util.ajax({
-      url: Config.serverUrl + '/api/endpoint',
-      type: 'POST',
-      data: params,
-      success: (res) => {
-        if (res.success) {
-          resolve(res.data);
-        } else {
-          reject(new Error(res.message || '请求失败'));
-        }
-      },
-      error: (err) => {
-        reject(err);
-      }
-    });
+export function getList(params = {}) {
+  return Util.ajax({
+    url: Config.serverUrl + '${apiPath}/list',
+    type: 'POST',
+    data: {
+      params: JSON.stringify(params)
+    },
+    dataPath: 'data'
   });
 }
 
 /**
- * GET 请求示例
+ * 获取详情数据
  * @param {string} id - 数据 ID
  * @returns {Promise} 请求结果
  */
-export function getDataById(id) {
-  return new Promise((resolve, reject) => {
-    Util.ajax({
-      url: Config.serverUrl + '/api/data/' + id,
-      type: 'GET',
-      success: (res) => {
-        if (res.success) {
-          resolve(res.data);
-        } else {
-          reject(new Error(res.message || '请求失败'));
-        }
-      },
-      error: (err) => {
-        reject(err);
-      }
-    });
+export function getDetail(id) {
+  return Util.ajax({
+    url: Config.serverUrl + '${apiPath}/detail',
+    type: 'POST',
+    data: {
+      params: JSON.stringify({ id })
+    },
+    dataPath: 'data'
+  });
+}
+
+/**
+ * 提交数据
+ * @param {Object} data - 提交的数据
+ * @returns {Promise} 请求结果
+ */
+export function submitData(data) {
+  return Util.ajax({
+    url: Config.serverUrl + '${apiPath}/submit',
+    type: 'POST',
+    data: {
+      params: JSON.stringify(data)
+    }
   });
 }
 `;
@@ -81,8 +127,8 @@ export function getDataById(id) {
         explanation: `生成了符合 M8 规范的 API 调用代码：
 - 使用 Util.ajax 而非 fetch 或 axios
 - 使用 Config.serverUrl 作为 API 基础 URL
-- 包含完整的错误处理
-- 包含规范的文件头注释`
+- ${useMock ? '使用 Mock 接口路径 /rest/mock/' : '使用正式接口路径 /api/'}
+- 包含完整的错误处理`
     };
 }
 /**
@@ -100,8 +146,6 @@ function generateJavaScriptCode(requirement) {
  * ${requirement}
  */
 
-// TODO: 根据需求实现具体逻辑
-
 /**
  * 示例函数
  * @param {Object} options - 配置选项
@@ -124,131 +168,325 @@ export function processData(options = {}) {
 /**
  * 生成 SCSS 代码
  * @param requirement 需求描述
+ * @param moduleName 模块名称
  * @returns 生成的代码
  */
-function generateScssCode(requirement) {
+function generateScssCode(requirement, moduleName) {
     const header = generateScssFileHeader({
         description: requirement
     });
-    const code = `${header}
+    // 生成 CSS 类名 (使用下划线风格)
+    const cssClassName = moduleName.replace(/-/g, '_');
+    const req = requirement.toLowerCase();
+    // 判断页面类型生成对应样式
+    const isLoginPage = req.includes('登录') || req.includes('login');
+    const isFormPage = req.includes('表单') || req.includes('form') || isLoginPage;
+    const isListPage = req.includes('列表') || req.includes('list');
+    let styleContent = '';
+    if (isLoginPage) {
+        styleContent = `
+// 登录页面样式
+.${cssClassName} {
+  min-height: 100vh;
+  padding: 40px 24px;
+  background: #f5f7fa;
 
-/**
- * ${requirement}
- */
-
-// 变量定义
-$primary-color: #1989fa;
-$text-color: #323233;
-$border-color: #ebedf0;
-$background-color: #f7f8fa;
-
-// 混入定义
-@mixin flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-@mixin ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// 组件样式
-.component {
-  padding: 12px;
-  background-color: $background-color;
+  &__form {
+    padding: 24px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  }
 
-  &__header {
-    @include flex-center;
-    padding: 8px 0;
-    border-bottom: 1px solid $border-color;
+  &__actions {
+    margin-top: 24px;
+    padding: 0 16px;
   }
+}`;
+    }
+    else if (isFormPage) {
+        styleContent = `
+// 表单页面样式
+.${cssClassName} {
+  min-height: 100vh;
+  padding: 12px;
+  background: #f5f7fa;
 
-  &__content {
-    padding: 16px 0;
+  &__actions {
+    margin-top: 24px;
+    padding: 0 16px;
   }
+}`;
+    }
+    else if (isListPage) {
+        styleContent = `
+// 列表页面样式
+.${cssClassName} {
+  min-height: 100vh;
+  background: #f5f7fa;
 
-  &__title {
-    @include ellipsis;
-    font-size: 16px;
-    color: $text-color;
+  &__item {
+    margin-bottom: 8px;
+    background: #fff;
   }
+}`;
+    }
+    else {
+        styleContent = `
+// 页面样式
+.${cssClassName} {
+  min-height: 100vh;
+  padding: 12px;
+  background: #f5f7fa;
 
-  &__footer {
-    padding: 8px 0;
-    text-align: center;
+  &__content {
+    padding: 16px;
+    background: #fff;
+    border-radius: 8px;
   }
-}
+}`;
+    }
+    const code = `${header}
+/**
+ * ${requirement}
+ * 样式文件遵循 BEM 命名规范
+ */
+${styleContent}
 `;
     return {
         code,
         language: 'scss',
         explanation: `生成了符合 M8 规范的 SCSS 代码：
 - 使用 BEM 命名规范
-- 定义了常用变量
-- 包含常用混入
+- 使用下划线风格的类名
 - 规范的文件头注释`
     };
 }
+/**
+ * 生成路由配置代码
+ * @param moduleName 模块名称
+ * @param pageTitle 页面标题
+ * @returns 生成的代码
+ */
+function generateRouterCode(moduleName, pageTitle) {
+    const header = generateFileHeader({
+        description: `${pageTitle} - 路由配置`
+    });
+    const code = `${header}
+
+/**
+ * ${pageTitle} 路由配置
+ * router.js 无需 import 组件，path 路径需与 vue 组件名称保持匹配
+ * 构建时会自动将模块下的路由配置合并到 pages.json 内
+ */
+
+// 定义路由规则
+const routes = [
+  {
+    path: 'pages/${moduleName}/index',
+    style: {
+      navigationBarTitleText: '${pageTitle}',
+      navigationStyle: 'custom'
+    }
+  }
+];
+
+// 路由选项
+const options = {
+  autoSubPackages: true,
+  isFirstModule: false
+};
+
+// 导出路由配置
+export default { routes, options };
+`;
+    return {
+        code,
+        language: 'javascript',
+        explanation: `生成了符合 M8 规范的路由配置：
+- 路径与 Vue 组件名称匹配
+- 包含导航栏标题配置
+- 使用 custom 导航样式`
+    };
+}
+/**
+ * 生成 Mock 数据代码
+ * @param moduleName 模块名称
+ * @param requirement 需求描述
+ * @returns 生成的代码
+ */
+function generateMockCode(moduleName, requirement) {
+    const header = generateFileHeader({
+        description: `${requirement} - Mock 数据`
+    });
+    const req = requirement.toLowerCase();
+    const isLoginPage = req.includes('登录') || req.includes('login');
+    const isListPage = req.includes('列表') || req.includes('list');
+    let mockContent = '';
+    if (isLoginPage) {
+        mockContent = `
+  {
+    // 登录接口
+    methodUrl: '/rest/mock/${moduleName}/submit',
+    input: {},
+    output: Mock.mock({
+      status: {
+        code: 1,
+        text: '登录成功'
+      },
+      data: {
+        token: '@guid',
+        userId: '@id',
+        username: '@cname'
+      }
+    })
+  }`;
+    }
+    else if (isListPage) {
+        mockContent = `
+  {
+    // 列表接口
+    methodUrl: '/rest/mock/${moduleName}/list',
+    input: {},
+    output: Mock.mock({
+      status: {
+        code: 1,
+        text: '成功'
+      },
+      data: {
+        'list|10-20': [
+          {
+            'id|+1': 1,
+            title: '@ctitle(5, 15)',
+            date: '@date("yyyy-MM-dd")',
+            content: '@cparagraph(1, 2)'
+          }
+        ],
+        total: '@integer(50, 200)'
+      }
+    })
+  },
+  {
+    // 详情接口
+    methodUrl: '/rest/mock/${moduleName}/detail',
+    input: {},
+    output: Mock.mock({
+      status: {
+        code: 1,
+        text: '成功'
+      },
+      data: {
+        id: '@id',
+        title: '@ctitle(10, 20)',
+        content: '@cparagraph(5, 10)',
+        createTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
+        author: '@cname'
+      }
+    })
+  }`;
+    }
+    else {
+        mockContent = `
+  {
+    // 获取数据接口
+    methodUrl: '/rest/mock/${moduleName}',
+    input: {},
+    output: Mock.mock({
+      status: {
+        code: 1,
+        text: '成功'
+      },
+      data: {
+        id: '@id',
+        name: '@cname',
+        createTime: '@datetime("yyyy-MM-dd HH:mm:ss")'
+      }
+    })
+  },
+  {
+    // 提交数据接口
+    methodUrl: '/rest/mock/${moduleName}/submit',
+    input: {},
+    output: Mock.mock({
+      status: {
+        code: 1,
+        text: '提交成功'
+      },
+      data: {
+        id: '@id'
+      }
+    })
+  }`;
+    }
+    const code = `${header}
+
+/**
+ * ${requirement} - Mock 数据配置
+ * Mock 文件定义请求本地接口时响应的模拟数据
+ */
+import Mock from '@mock';
+
+const mockData = [${mockContent}
+];
+
+export default mockData;
+`;
+    return {
+        code,
+        language: 'javascript',
+        explanation: `生成了符合 M8 规范的 Mock 数据配置：
+- 使用 @mock 导入 Mock 库
+- 定义了 methodUrl 匹配的接口
+- 使用 Mock.mock 生成随机数据`
+    };
+}
 /**
  * 生成 Vue 组件代码
  * @param requirement 需求描述
  * @param vueVersion Vue 版本
  * @param components 使用的组件列表
+ * @param useMock 是否使用 Mock
  * @returns 生成的代码
  */
-function generateVueComponentCode(requirement, vueVersion = 2, components = []) {
+function generateVueComponentCode(requirement, vueVersion = 2, components = [], useMock = true) {
     // 从需求中提取组件名称
-    const componentName = extractComponentName(requirement);
+    const componentName = extractModuleName(requirement);
+    const pageTitle = extractPageTitle(requirement);
+    // 验证组件
+    const { valid: validComponents, warnings } = filterValidComponents(components);
+    // 如果没有指定组件，根据需求智能推荐
+    const finalComponents = validComponents.length > 0
+        ? validComponents
+        : suggestComponents(requirement);
     const options = {
         name: componentName,
         vueVersion,
         description: requirement,
-        components,
-        includeStyle: true
+        components: finalComponents,
+        includeStyle: true,
+        useMock,
+        pageTitle
     };
     const code = generateVueTemplate(options);
     const apiStyle = vueVersion === 3 ? 'Composition API (script setup)' : 'Options API';
+    let explanation = `生成了 Vue${vueVersion} 组件代码：
+- 使用 ${apiStyle} 语法
+- 包含规范的文件头注释
+- 样式通过 @import 引入外部 SCSS 文件
+- 使用 ejs.ui.toast/showWaiting 等原生 API
+- 使用 Util.ajax + Config.serverUrl 发送请求`;
+    if (finalComponents.length > 0) {
+        explanation += `\n- 使用了 ${finalComponents.join(', ')} 组件`;
+    }
+    if (warnings.length > 0) {
+        explanation += `\n\n⚠️ 警告:\n${warnings.map(w => `- ${w}`).join('\n')}`;
+    }
     return {
         code,
         language: 'vue',
-        explanation: `生成了 Vue${vueVersion} 组件代码：
-- 使用 ${apiStyle} 语法
-- 包含规范的文件头注释
-- 使用 BEM 命名的 SCSS 样式
-- ${components.length > 0 ? `集成了 ${components.join(', ')} 组件` : '基础组件结构'}`
+        explanation
     };
 }
-/**
- * 从需求描述中提取组件名称
- * @param requirement 需求描述
- * @returns 组件名称
- */
-function extractComponentName(requirement) {
-    // 尝试从需求中提取有意义的名称
-    const patterns = [
-        /创建(.+?)组件/,
-        /生成(.+?)页面/,
-        /实现(.+?)功能/,
-        /(.+?)列表/,
-        /(.+?)表单/,
-        /(.+?)详情/
-    ];
-    for (const pattern of patterns) {
-        const match = requirement.match(pattern);
-        if (match && match[1]) {
-            // 转换为 kebab-case
-            return match[1]
-                .trim()
-                .replace(/[\s_]+/g, '-')
-                .toLowerCase();
-        }
-    }
-    // 默认名称
-    return 'my-component';
-}
 /**
  * 代码生成器类
  */
@@ -259,14 +497,15 @@ export class CodeGenerator {
      * @returns 生成的代码
      */
     generateCode(options) {
-        const { type, requirement, vueVersion = 2, components = [] } = options;
+        const { type, requirement, vueVersion = 2, components = [], useMock = true } = options;
         // 如果 type 是数组，使用 generateMultipleCode
         if (Array.isArray(type)) {
             const result = this.generateMultipleCode({
                 types: type,
                 requirement,
                 vueVersion,
-                components
+                components,
+                useMock
             });
             // 返回第一个文件作为兼容
             return {
@@ -275,25 +514,27 @@ export class CodeGenerator {
                 explanation: result.explanation
             };
         }
+        const moduleName = extractModuleName(requirement);
         switch (type) {
             case 'vue-component':
-                return generateVueComponentCode(requirement, vueVersion, components);
+                return generateVueComponentCode(requirement, vueVersion, components, useMock);
             case 'javascript':
                 return generateJavaScriptCode(requirement);
             case 'scss':
-                return generateScssCode(requirement);
+                return generateScssCode(requirement, moduleName);
             case 'api-call':
-                return generateApiCallCode(requirement);
+                return generateApiCallCode(requirement, moduleName, useMock);
             case 'full-page':
-                // full-page 转换为多文件生成
+                // full-page 转换为完整页面生成（Vue + SCSS + Router + Mock）
                 const result = this.generateMultipleCode({
-                    types: ['vue-component', 'scss'],
+                    types: ['vue-component', 'scss', 'router', 'mock'],
                     requirement,
                     vueVersion,
-                    components
+                    components,
+                    useMock
                 });
                 return {
-                    code: result.files.map(f => `// === ${f.filename} ===\n${f.code}`).join('\n\n'),
+                    code: result.files.map(f => `// === ${f.relativePath || f.filename} ===\n${f.code}`).join('\n\n'),
                     language: 'text',
                     explanation: result.explanation
                 };
@@ -311,29 +552,47 @@ export class CodeGenerator {
      * @returns 多文件生成结果
      */
     generateMultipleCode(options) {
-        const { types, requirement, vueVersion = 2, components = [] } = options;
-        const componentName = extractComponentName(requirement);
+        const { types, requirement, vueVersion = 2, components = [], useMock = true } = options;
+        const moduleName = extractModuleName(requirement);
+        const pageTitle = extractPageTitle(requirement);
+        // 默认模块路径在 src/pages 下
+        const modulePath = options.modulePath || `src/pages/${moduleName}`;
         const files = [];
         const explanations = [];
         for (const type of types) {
             let result;
             let filename;
+            let relativePath;
             switch (type) {
                 case 'vue-component':
-                    result = generateVueComponentCode(requirement, vueVersion, components);
-                    filename = `${toPascalCase(componentName)}.vue`;
+                    result = generateVueComponentCode(requirement, vueVersion, components, useMock);
+                    filename = 'index.vue';
+                    relativePath = `${modulePath}/index.vue`;
                     break;
                 case 'javascript':
                     result = generateJavaScriptCode(requirement);
-                    filename = `${componentName}.js`;
+                    filename = `${moduleName}.js`;
+                    relativePath = `${modulePath}/${moduleName}.js`;
                     break;
                 case 'scss':
-                    result = generateScssCode(requirement);
-                    filename = `${componentName}.scss`;
+                    result = generateScssCode(requirement, moduleName);
+                    filename = `${moduleName}.scss`;
+                    relativePath = `${modulePath}/css/${moduleName}.scss`;
                     break;
                 case 'api-call':
-                    result = generateApiCallCode(requirement);
-                    filename = `${componentName}-api.js`;
+                    result = generateApiCallCode(requirement, moduleName, useMock);
+                    filename = 'api.js';
+                    relativePath = `${modulePath}/api.js`;
+                    break;
+                case 'router':
+                    result = generateRouterCode(moduleName, pageTitle);
+                    filename = 'router.js';
+                    relativePath = `${modulePath}/router.js`;
+                    break;
+                case 'mock':
+                    result = generateMockCode(moduleName, requirement);
+                    filename = 'mock.js';
+                    relativePath = `${modulePath}/mock.js`;
                     break;
                 default:
                     continue;
@@ -342,13 +601,39 @@ export class CodeGenerator {
                 type,
                 code: result.code,
                 language: result.language,
-                filename
+                filename,
+                relativePath
             });
-            explanations.push(`**${filename}**: ${result.explanation}`);
+            explanations.push(`**${relativePath}**: ${result.explanation.split('\n')[0]}`);
         }
+        // 生成目录结构说明
+        const structureExplanation = `
+## 生成的文件结构
+
+\`\`\`
+${modulePath}/
+├── index.vue          # Vue 页面组件
+├── router.js          # 路由配置
+├── mock.js            # Mock 数据
+└── css/
+    └── ${moduleName}.scss  # 样式文件
+\`\`\`
+
+## 文件说明
+
+${explanations.join('\n\n')}
+
+## 使用说明
+
+1. 将生成的文件放置到对应目录
+2. Mock 数据会自动被框架加载
+3. 路由配置会自动合并到 pages.json
+4. 样式文件通过 @import 在 Vue 组件中引入
+`;
         return {
             files,
-            explanation: explanations.join('\n\n')
+            explanation: structureExplanation,
+            modulePath
         };
     }
     /**