m8-mcp-server 1.0.4 → 1.0.6

package/dist/generator/vue-template.js

@@ -1,32 +1,67 @@
 /**
  * Vue 模板生成器
- * @作者 M8 Team
+ * @作者 li peng
  * @创建时间 2024-12-29
  * @描述 生成 Vue2 和 Vue3 组件模板，严格遵循 M8 规范
  */
 import { generateVueFileHeader, generateFileHeader } from './header.js';
+import { readdirSync, existsSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+// ESM 兼容的 __dirname
+const __vueTemplateFilename = fileURLToPath(import.meta.url);
+const __vueTemplateDir = dirname(__vueTemplateFilename);
+/**
+ * 从 resources/components 目录动态加载可用组件列表
+ */
+function loadValidComponents() {
+    const componentsDir = join(__vueTemplateDir, '../resources/components');
+    const components = new Set();
+    // 默认组件列表（作为备用）
+    const fallbackComponents = [
+        'em-actionsheet', 'em-amap', 'em-button', 'em-cell', 'em-checkbox',
+        'em-circle', 'em-datepicker', 'em-field', 'em-form', 'em-header',
+        'em-icon', 'em-loading', 'em-noticebar', 'em-numberkeyboard',
+        'em-pagination', 'em-panel', 'em-passwordinput', 'em-picker',
+        'em-popup', 'em-progress', 'em-radio', 'em-rate', 'em-search',
+        'em-slider', 'em-stepper', 'em-swipecell', 'em-switch',
+        'em-switchcell', 'em-tag', 'em-treeselect', 'em-uploader',
+        'em-verifycode', 'em-minirefresh', 'em-layout', 'em-image',
+        'em-toast', 'em-calendar', 'em-area', 'em-tab', 'em-dialog',
+        'em-dropdownmenu', 'em-notify', 'em-overlay', 'em-collapse',
+        'em-grid', 'em-countdown', 'em-divider', 'em-empty',
+        'em-imagepreview', 'em-lazyload', 'em-skeleton', 'em-steps',
+        'em-sticky', 'em-indexbar', 'em-sidebar', 'em-tabbar', 'em-badge',
+        'em-popover', 'em-cascader', 'em-selectperson', 'em-swipe',
+        'em-easycalendar', 'em-qrcode', 'em-imagescale', 'em-dragsort',
+        'em-chart', 'em-rtc', 'em-table'
+    ];
+    try {
+        if (existsSync(componentsDir)) {
+            const files = readdirSync(componentsDir).filter(f => f.endsWith('.json') && f !== 'index.json');
+            for (const file of files) {
+                // 从文件名提取组件 ID，如 button.json -> em-button
+                const id = file.replace('.json', '');
+                components.add(`em-${id}`);
+            }
+        }
+    }
+    catch {
+        // 静默处理错误
+    }
+    // 如果动态加载失败，使用备用列表
+    if (components.size === 0) {
+        for (const comp of fallbackComponents) {
+            components.add(comp);
+        }
+    }
+    return components;
+}
 /**
  * 可用的 M8 UI 组件列表
- * 只有这些组件才是有效的，其他组件名称会被过滤
+ * 从 resources/components 目录动态加载，确保与组件文档同步
  */
-const VALID_COMPONENTS = new Set([
-    'em-actionsheet', 'em-amap', 'em-button', 'em-cell', 'em-checkbox',
-    'em-circle', 'em-datepicker', 'em-field', 'em-form', 'em-header',
-    'em-icon', 'em-loading', 'em-noticebar', 'em-numberkeyboard',
-    'em-pagination', 'em-panel', 'em-passwordinput', 'em-picker',
-    'em-popup', 'em-progress', 'em-radio', 'em-rate', 'em-search',
-    'em-slider', 'em-stepper', 'em-swipecell', 'em-switch',
-    'em-switchcell', 'em-tag', 'em-treeselect', 'em-uploader',
-    'em-verifycode', 'em-minirefresh', 'em-layout', 'em-image',
-    'em-toast', 'em-calendar', 'em-area', 'em-tab', 'em-dialog',
-    'em-dropdownmenu', 'em-notify', 'em-overlay', 'em-collapse',
-    'em-grid', 'em-countdown', 'em-divider', 'em-empty',
-    'em-imagepreview', 'em-lazyload', 'em-skeleton', 'em-steps',
-    'em-sticky', 'em-indexbar', 'em-sidebar', 'em-tabbar', 'em-badge',
-    'em-popover', 'em-cascader', 'em-selectperson', 'em-swipe',
-    'em-easycalendar', 'em-qrcode', 'em-imagescale', 'em-dragsort',
-    'em-chart', 'em-rtc', 'em-table'
-]);
+const VALID_COMPONENTS = loadValidComponents();
 /**
  * 组件名称映射：常见错误名称 -> 正确名称
  * 确保使用者输入的无效组件名称能被正确映射到 M8 组件库中的有效组件
@@ -148,6 +183,91 @@ export function filterValidComponents(components) {
     }
     return { valid, warnings };
 }
+/**
+ * 从需求描述中提取表单字段信息
+ * @param requirement 需求描述
+ * @returns 表单字段列表
+ */
+export function extractFormFields(requirement) {
+    const fields = [];
+    const req = requirement.toLowerCase();
+    // 手机号相关
+    if (req.includes('手机号') || req.includes('手机') || req.includes('mobile')) {
+        fields.push({
+            name: '手机号',
+            propertyName: 'mobile',
+            type: 'tel',
+            validation: 'mobile',
+            validationMethod: 'Util.string.isMobile'
+        });
+    }
+    // 身份证相关
+    if (req.includes('身份证') || req.includes('idcard') || req.includes('证件号')) {
+        fields.push({
+            name: '身份证号',
+            propertyName: 'idCard',
+            type: 'text',
+            validation: 'idcard',
+            validationMethod: 'Util.string.isIdCard'
+        });
+    }
+    // 邮箱相关
+    if (req.includes('邮箱') || req.includes('email')) {
+        fields.push({
+            name: '邮箱',
+            propertyName: 'email',
+            type: 'text',
+            validation: 'email',
+            validationMethod: 'Util.string.isEmail'
+        });
+    }
+    // 电话相关（固定电话）
+    if (req.includes('固定电话') || req.includes('固话') || req.includes('座机')) {
+        fields.push({
+            name: '固定电话',
+            propertyName: 'tel',
+            type: 'tel',
+            validation: 'tel',
+            validationMethod: 'Util.string.isTel'
+        });
+    }
+    // 姓名相关
+    if (req.includes('姓名') || req.includes('名字')) {
+        fields.push({
+            name: '姓名',
+            propertyName: 'name',
+            type: 'text',
+            validation: 'required'
+        });
+    }
+    // 用户名相关
+    if (req.includes('用户名') || req.includes('username')) {
+        fields.push({
+            name: '用户名',
+            propertyName: 'username',
+            type: 'text',
+            validation: 'required'
+        });
+    }
+    // 密码相关
+    if (req.includes('密码') || req.includes('password')) {
+        fields.push({
+            name: '密码',
+            propertyName: 'password',
+            type: 'password',
+            validation: 'required'
+        });
+    }
+    // 附件/文件上传相关
+    if (req.includes('附件') || req.includes('上传') || req.includes('文件上传') || req.includes('upload')) {
+        fields.push({
+            name: '附件',
+            propertyName: 'attachments',
+            type: 'uploader'
+        });
+    }
+    return fields;
+}
 /**
  * 根据需求智能推荐组件
  * @param requirement 需求描述
@@ -156,11 +276,12 @@ export function filterValidComponents(components) {
 export function suggestComponents(requirement) {
     const components = [];
     const req = requirement.toLowerCase();
+    const fields = extractFormFields(requirement);
     // 登录/表单相关
     if (req.includes('登录') || req.includes('login')) {
         components.push('em-field', 'em-button');
     }
-    if (req.includes('表单') || req.includes('form')) {
+    if (req.includes('表单') || req.includes('form') || req.includes('提交')) {
         components.push('em-form', 'em-field', 'em-button');
     }
     if (req.includes('输入') || req.includes('input')) {
@@ -184,10 +305,23 @@ export function suggestComponents(requirement) {
     if (req.includes('搜索') || req.includes('search')) {
         components.push('em-search');
     }
-    // 上传相关
-    if (req.includes('上传') || req.includes('upload') || req.includes('图片')) {
+    // 上传相关 - 包含"附件"关键词
+    if (req.includes('上传') || req.includes('upload') || req.includes('附件') || req.includes('文件')) {
         components.push('em-uploader');
     }
+    // 根据提取的字段自动添加组件
+    for (const field of fields) {
+        if (field.type === 'uploader') {
+            components.push('em-uploader');
+        }
+        else {
+            components.push('em-field');
+        }
+    }
+    // 如果有表单字段，自动添加表单和按钮
+    if (fields.length > 0) {
+        components.push('em-form', 'em-button');
+    }
     // 去重
     return [...new Set(components)];
 }
@@ -211,10 +345,19 @@ export function generateVue2Template(options) {
     const finalComponents = validComponents.length > 0
         ? validComponents
         : suggestComponents(description);
+    // 提取表单字段信息
+    const formFields = extractFormFields(description);
     // 生成模板内容
     const templateContent = generateTemplateContent(finalComponents, name, description);
     // 生成 CSS 类名 (使用下划线风格，符合 M8 规范)
     const cssClassName = name.replace(/-/g, '_');
+    // 生成动态 formData 初始化
+    const formDataInit = generateFormDataInit(formFields);
+    // 生成校验方法
+    const validateMethod = generateValidateMethod(formFields);
+    // 检查是否需要 uploader 处理
+    const hasUploader = finalComponents.includes('em-uploader') || formFields.some(f => f.type === 'uploader');
+    const uploaderMethod = hasUploader ? generateUploaderMethod() : '';
     const template = `${header}
 <template>
   <div class="${cssClassName}">
@@ -231,7 +374,7 @@ export default {
   data() {
     return {
       // 表单数据
-      formData: {},
+      formData: ${formDataInit},
       // 加载状态
       loading: false
     };
@@ -279,11 +422,16 @@ export default {
         ejs.ui.closeWaiting();
       }
     },
-
+${validateMethod}
     /**
      * 提交表单
      */
     async handleSubmit() {
+      // 表单校验
+      if (!this.validateForm()) {
+        return;
+      }
+
       try {
         ejs.ui.showWaiting({ message: '提交中...' });
         
@@ -307,7 +455,7 @@ export default {
       } finally {
         ejs.ui.closeWaiting();
       }
-    }
+    }${uploaderMethod}
   }
 };
 </script>
@@ -318,6 +466,123 @@ export default {
 `;
     return template;
 }
+/**
+ * 生成 formData 初始化代码
+ * @param fields 表单字段列表
+ * @returns formData 初始化对象字符串
+ */
+function generateFormDataInit(fields) {
+    if (fields.length === 0) {
+        return '{}';
+    }
+    const props = [];
+    for (const field of fields) {
+        if (field.type === 'uploader') {
+            props.push(`${field.propertyName}: []`);
+        }
+        else {
+            props.push(`${field.propertyName}: ''`);
+        }
+    }
+    return `{\n        ${props.join(',\n        ')}\n      }`;
+}
+/**
+ * 生成表单校验方法
+ * @param fields 表单字段列表
+ * @returns 校验方法代码
+ */
+function generateValidateMethod(fields) {
+    if (fields.length === 0) {
+        return `
+    /**
+     * 表单校验
+     */
+    validateForm() {
+      return true;
+    },
+`;
+    }
+    const validations = [];
+    for (const field of fields) {
+        if (field.validationMethod) {
+            // 使用 Util.string 校验方法
+            validations.push(`      // 校验${field.name}
+      if (!this.formData.${field.propertyName}) {
+        ejs.ui.toast({ message: '请输入${field.name}' });
+        return false;
+      }
+      if (!${field.validationMethod}(this.formData.${field.propertyName})) {
+        ejs.ui.toast({ message: '${field.name}格式不正确' });
+        return false;
+      }`);
+        }
+        else if (field.validation === 'required' && field.type !== 'uploader') {
+            // 仅必填校验
+            validations.push(`      // 校验${field.name}
+      if (!this.formData.${field.propertyName}) {
+        ejs.ui.toast({ message: '请输入${field.name}' });
+        return false;
+      }`);
+        }
+    }
+    return `
+    /**
+     * 表单校验
+     * 使用 Util.string 提供的校验方法，符合 M8 规范
+     */
+    validateForm() {
+${validations.join('\n\n')}
+
+      return true;
+    },
+`;
+}
+/**
+ * 生成 uploader 处理方法
+ * @returns uploader 相关方法代码
+ */
+function generateUploaderMethod() {
+    return `,
+
+    /**
+     * 文件上传后的回调
+     * @param file 上传的文件信息
+     * @param detail 额外信息
+     */
+    afterRead(file, detail) {
+      // 设置上传中状态
+      file.status = 'uploading';
+      file.message = '上传中...';
+
+      // TODO: 调用上传接口
+      // 示例：使用 Util.ajax 上传文件
+      // Util.ajax({
+      //   url: Config.serverUrl + '/rest/api/upload',
+      //   type: 'POST',
+      //   data: {
+      //     file: file.file
+      //   }
+      // }).then(res => {
+      //   if (res.status?.code === 1) {
+      //     file.status = 'done';
+      //     file.url = res.data.url;
+      //   } else {
+      //     file.status = 'failed';
+      //     file.message = '上传失败';
+      //   }
+      // }).catch(() => {
+      //   file.status = 'failed';
+      //   file.message = '上传失败';
+      // });
+
+      // 模拟上传成功
+      setTimeout(() => {
+        file.status = 'done';
+        file.message = '';
+        console.log('文件上传完成:', file);
+      }, 1000);
+    }`;
+}
 /**
  * 生成 Vue3 组件模板 (Composition API with script setup)
  * 严格遵循 M8 规范：样式外部引入、使用 ejs.ui API
@@ -337,10 +602,19 @@ export function generateVue3Template(options) {
     const finalComponents = validComponents.length > 0
         ? validComponents
         : suggestComponents(description);
+    // 提取表单字段信息
+    const formFields = extractFormFields(description);
     // 生成模板内容
     const templateContent = generateTemplateContent(finalComponents, name, description);
     // 生成 CSS 类名
     const cssClassName = name.replace(/-/g, '_');
+    // 生成动态 formData 初始化
+    const formDataInitVue3 = generateFormDataInitVue3(formFields);
+    // 生成校验方法
+    const validateMethodVue3 = generateValidateMethodVue3(formFields);
+    // 检查是否需要 uploader 处理
+    const hasUploader = finalComponents.includes('em-uploader') || formFields.some(f => f.type === 'uploader');
+    const uploaderMethodVue3 = hasUploader ? generateUploaderMethodVue3() : '';
     const template = `${header}
 <template>
   <div class="${cssClassName}">
@@ -356,7 +630,7 @@ ${templateContent}
 import { ref, reactive, onMounted } from 'vue';
 
 // ==================== 响应式数据 ====================
-const formData = reactive({});
+const formData = reactive(${formDataInitVue3});
 const loading = ref(false);
 
 // ==================== 生命周期 ====================
@@ -403,11 +677,16 @@ const loadData = async () => {
     ejs.ui.closeWaiting();
   }
 };
-
+${validateMethodVue3}
 /**
  * 提交表单
  */
 const handleSubmit = async () => {
+  // 表单校验
+  if (!validateForm()) {
+    return;
+  }
+
   try {
     ejs.ui.showWaiting({ message: '提交中...' });
     
@@ -432,6 +711,7 @@ const handleSubmit = async () => {
     ejs.ui.closeWaiting();
   }
 };
+${uploaderMethodVue3}
 </script>
 
 <style lang="scss" scoped>
@@ -440,6 +720,122 @@ const handleSubmit = async () => {
 `;
     return template;
 }
+/**
+ * 生成 Vue3 formData 初始化代码
+ * @param fields 表单字段列表
+ * @returns formData 初始化对象字符串
+ */
+function generateFormDataInitVue3(fields) {
+    if (fields.length === 0) {
+        return '{}';
+    }
+    const props = [];
+    for (const field of fields) {
+        if (field.type === 'uploader') {
+            props.push(`${field.propertyName}: []`);
+        }
+        else {
+            props.push(`${field.propertyName}: ''`);
+        }
+    }
+    return `{\n  ${props.join(',\n  ')}\n}`;
+}
+/**
+ * 生成 Vue3 表单校验方法
+ * @param fields 表单字段列表
+ * @returns 校验方法代码
+ */
+function generateValidateMethodVue3(fields) {
+    if (fields.length === 0) {
+        return `
+/**
+ * 表单校验
+ */
+const validateForm = () => {
+  return true;
+};
+`;
+    }
+    const validations = [];
+    for (const field of fields) {
+        if (field.validationMethod) {
+            // 使用 Util.string 校验方法
+            validations.push(`  // 校验${field.name}
+  if (!formData.${field.propertyName}) {
+    ejs.ui.toast({ message: '请输入${field.name}' });
+    return false;
+  }
+  if (!${field.validationMethod}(formData.${field.propertyName})) {
+    ejs.ui.toast({ message: '${field.name}格式不正确' });
+    return false;
+  }`);
+        }
+        else if (field.validation === 'required' && field.type !== 'uploader') {
+            // 仅必填校验
+            validations.push(`  // 校验${field.name}
+  if (!formData.${field.propertyName}) {
+    ejs.ui.toast({ message: '请输入${field.name}' });
+    return false;
+  }`);
+        }
+    }
+    return `
+/**
+ * 表单校验
+ * 使用 Util.string 提供的校验方法，符合 M8 规范
+ */
+const validateForm = () => {
+${validations.join('\n\n')}
+
+  return true;
+};
+`;
+}
+/**
+ * 生成 Vue3 uploader 处理方法
+ * @returns uploader 相关方法代码
+ */
+function generateUploaderMethodVue3() {
+    return `
+/**
+ * 文件上传后的回调
+ * @param file 上传的文件信息
+ * @param detail 额外信息
+ */
+const afterRead = (file, detail) => {
+  // 设置上传中状态
+  file.status = 'uploading';
+  file.message = '上传中...';
+
+  // TODO: 调用上传接口
+  // 示例：使用 Util.ajax 上传文件
+  // Util.ajax({
+  //   url: Config.serverUrl + '/rest/api/upload',
+  //   type: 'POST',
+  //   data: {
+  //     file: file.file
+  //   }
+  // }).then(res => {
+  //   if (res.status?.code === 1) {
+  //     file.status = 'done';
+  //     file.url = res.data.url;
+  //   } else {
+  //     file.status = 'failed';
+  //     file.message = '上传失败';
+  //   }
+  // }).catch(() => {
+  //   file.status = 'failed';
+  //   file.message = '上传失败';
+  // });
+
+  // 模拟上传成功
+  setTimeout(() => {
+    file.status = 'done';
+    file.message = '';
+    console.log('文件上传完成:', file);
+  }, 1000);
+};`;
+}
 /**
  * 根据组件列表生成模板内容
  * @param components 组件列表
@@ -451,12 +847,17 @@ function generateTemplateContent(components, name, description) {
     const lines = [];
     const cssClassName = name.replace(/-/g, '_');
     const req = description.toLowerCase();
+    // 提取表单字段信息
+    const formFields = extractFormFields(description);
     // 判断页面类型
-    const isLoginPage = req.includes('登录') || req.includes('login');
-    const isFormPage = req.includes('表单') || req.includes('form') || isLoginPage;
+    // 注意：如果有除用户名/密码之外的明确字段，应该使用动态表单模板
+    const hasCustomFields = formFields.some(f => !['username', 'password'].includes(f.propertyName));
+    const isLoginPage = (req.includes('登录') || req.includes('login')) && !hasCustomFields;
+    const isFormPage = req.includes('表单') || req.includes('form') || req.includes('提交') || formFields.length > 0;
     const isListPage = req.includes('列表') || req.includes('list');
-    if (isLoginPage) {
-        // 登录页面模板
+    const hasUploader = components.includes('em-uploader') || formFields.some(f => f.type === 'uploader');
+    if (isLoginPage && !hasCustomFields) {
+        // 纯登录页面模板（只有用户名和密码）
         lines.push(`    <!-- 登录表单 -->`);
         lines.push(`    <div class="${cssClassName}__form">`);
         lines.push(`      <em-field`);
@@ -464,6 +865,7 @@ function generateTemplateContent(components, name, description) {
         lines.push(`        label="用户名"`);
         lines.push(`        placeholder="请输入用户名"`);
         lines.push(`        clearable`);
+        lines.push(`        required`);
         lines.push(`      />`);
         lines.push(`      <em-field`);
         lines.push(`        v-model="formData.password"`);
@@ -471,14 +873,59 @@ function generateTemplateContent(components, name, description) {
         lines.push(`        label="密码"`);
         lines.push(`        placeholder="请输入密码"`);
         lines.push(`        clearable`);
+        lines.push(`        required`);
         lines.push(`      />`);
         lines.push(`      <div class="${cssClassName}__actions">`);
         lines.push(`        <em-button type="primary" block @click="handleSubmit">登录</em-button>`);
         lines.push(`      </div>`);
         lines.push(`    </div>`);
     }
+    else if (isFormPage && formFields.length > 0) {
+        // 有明确字段的表单页面模板
+        lines.push(`    <!-- 表单内容 -->`);
+        lines.push(`    <em-form ref="formRef">`);
+        // 根据提取的字段生成表单项
+        for (const field of formFields) {
+            if (field.type === 'uploader') {
+                // 文件上传组件
+                lines.push(`      <!-- ${field.name}上传 -->`);
+                lines.push(`      <div class="${cssClassName}__uploader">`);
+                lines.push(`        <div class="${cssClassName}__uploader-label">${field.name}</div>`);
+                lines.push(`        <em-uploader`);
+                lines.push(`          v-model="formData.${field.propertyName}"`);
+                lines.push(`          :after-read="afterRead"`);
+                lines.push(`          :max-count="9"`);
+                lines.push(`          multiple`);
+                lines.push(`        />`);
+                lines.push(`      </div>`);
+            }
+            else {
+                // 普通输入字段
+                lines.push(`      <em-field`);
+                lines.push(`        v-model="formData.${field.propertyName}"`);
+                if (field.type === 'tel') {
+                    lines.push(`        type="tel"`);
+                }
+                else if (field.type === 'password') {
+                    lines.push(`        type="password"`);
+                }
+                lines.push(`        label="${field.name}"`);
+                lines.push(`        placeholder="请输入${field.name}"`);
+                lines.push(`        clearable`);
+                if (field.validation === 'required' || field.validationMethod) {
+                    lines.push(`        required`);
+                }
+                lines.push(`      />`);
+            }
+        }
+        lines.push(`      <div class="${cssClassName}__actions">`);
+        const buttonText = req.includes('登录') ? '登录' : '提交';
+        lines.push(`        <em-button type="primary" block @click="handleSubmit">${buttonText}</em-button>`);
+        lines.push(`      </div>`);
+        lines.push(`    </em-form>`);
+    }
     else if (isFormPage) {
-        // 通用表单页面模板
+        // 通用表单页面模板（没有明确字段）
         lines.push(`    <!-- 表单内容 -->`);
         lines.push(`    <em-form ref="formRef">`);
         for (const comp of components) {
@@ -490,6 +937,18 @@ function generateTemplateContent(components, name, description) {
                 lines.push(`        required`);
                 lines.push(`      />`);
             }
+            else if (comp === 'em-uploader') {
+                lines.push(`      <!-- 附件上传 -->`);
+                lines.push(`      <div class="${cssClassName}__uploader">`);
+                lines.push(`        <div class="${cssClassName}__uploader-label">附件</div>`);
+                lines.push(`        <em-uploader`);
+                lines.push(`          v-model="formData.attachments"`);
+                lines.push(`          :after-read="afterRead"`);
+                lines.push(`          :max-count="9"`);
+                lines.push(`          multiple`);
+                lines.push(`        />`);
+                lines.push(`      </div>`);
+            }
         }
         lines.push(`      <div class="${cssClassName}__actions">`);
         lines.push(`        <em-button type="primary" block @click="handleSubmit">提交</em-button>`);
@@ -518,7 +977,12 @@ function generateTemplateContent(components, name, description) {
         lines.push(`    <div class="${cssClassName}__content">`);
         for (const comp of components) {
             const compTag = comp.startsWith('em-') ? comp : `em-${comp}`;
-            lines.push(`      <${compTag} />`);
+            if (comp === 'em-uploader') {
+                lines.push(`      <em-uploader v-model="fileList" :after-read="afterRead" />`);
+            }
+            else {
+                lines.push(`      <${compTag} />`);
+            }
         }
         if (components.length === 0) {
             lines.push(`      <!-- TODO: 添加页面内容 -->`);