m8-mcp-server 1.0.3 → 1.0.5

package/dist/generator/vue-template.js

@@ -2,112 +2,623 @@
  * Vue 模板生成器
  * @作者 M8 Team
  * @创建时间 2024-12-29
- * @描述 生成 Vue2 和 Vue3 组件模板
+ * @描述 生成 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 = loadValidComponents();
+/**
+ * 组件名称映射：常见错误名称 -> 正确名称
+ * 确保使用者输入的无效组件名称能被正确映射到 M8 组件库中的有效组件
+ */
+const COMPONENT_NAME_MAP = {
+    // 输入框类组件 - 统一使用 em-field
+    'em-input': 'em-field',
+    'em-text-field': 'em-field',
+    'em-textfield': 'em-field',
+    'em-textarea': 'em-field',
+    'em-text': 'em-field',
+    'input': 'em-field',
+    'text-field': 'em-field',
+    // 选择器类组件 - 统一使用 em-picker
+    'em-select': 'em-picker',
+    'em-dropdown': 'em-picker',
+    'select': 'em-picker',
+    // 日期时间类组件 - 统一使用 em-datepicker
+    'em-date': 'em-datepicker',
+    'em-time': 'em-datepicker',
+    'em-datetime': 'em-datepicker',
+    'date-picker': 'em-datepicker',
+    // 导航类组件 - 统一使用 em-header
+    'em-nav': 'em-header',
+    'em-navbar': 'em-header',
+    'em-navigation': 'em-header',
+    'navbar': 'em-header',
+    // 列表类组件 - 统一使用 em-cell
+    'em-list': 'em-cell',
+    'em-item': 'em-cell',
+    'em-list-item': 'em-cell',
+    'list-item': 'em-cell',
+    // 按钮类组件
+    'btn': 'em-button',
+    // Toast/提示类 - 这些应该用 API 而非组件，添加警告
+    'em-message': '', // 应使用 ejs.ui.toast
+    'em-alert': '', // 应使用 ejs.ui.alert
+};
+/**
+ * 验证并修正组件名称
+ * @param componentName 组件名称
+ * @returns 修正后的组件名称，如果无效则返回 null；如果应该使用 API 则返回 { useApi: true }
+ */
+export function validateComponentName(componentName) {
+    // 标准化组件名称
+    let normalized = componentName.toLowerCase().trim();
+    // 首先检查是否在映射表中（不管有没有 em- 前缀）
+    if (COMPONENT_NAME_MAP[normalized] !== undefined) {
+        const mapped = COMPONENT_NAME_MAP[normalized];
+        // 如果映射到空字符串，表示应该使用 API 而非组件
+        if (mapped === '') {
+            return null;
+        }
+        normalized = mapped;
+    }
+    else {
+        // 如果没有 em- 前缀，添加它再检查
+        if (!normalized.startsWith('em-')) {
+            const withPrefix = `em-${normalized}`;
+            if (COMPONENT_NAME_MAP[withPrefix] !== undefined) {
+                const mapped = COMPONENT_NAME_MAP[withPrefix];
+                if (mapped === '') {
+                    return null;
+                }
+                normalized = mapped;
+            }
+            else {
+                normalized = withPrefix;
+            }
+        }
+    }
+    // 验证组件是否存在
+    if (VALID_COMPONENTS.has(normalized)) {
+        return normalized;
+    }
+    return null;
+}
+/**
+ * 过滤并验证组件列表
+ * @param components 组件列表
+ * @returns 验证后的组件列表和警告信息
+ */
+export function filterValidComponents(components) {
+    const valid = [];
+    const warnings = [];
+    // 应该使用 API 而非组件的映射
+    const API_SUGGESTIONS = {
+        'em-message': 'ejs.ui.toast({ message: "提示内容" })',
+        'em-alert': 'ejs.ui.alert({ title: "标题", message: "内容" })',
+        'em-toast': 'ejs.ui.toast({ message: "提示内容" })',
+        'em-loading': 'ejs.ui.showWaiting({ message: "加载中..." })',
+        'em-confirm': 'ejs.ui.confirm({ title: "确认", message: "确认操作吗?" })',
+        'message': 'ejs.ui.toast({ message: "提示内容" })',
+        'alert': 'ejs.ui.alert({ title: "标题", message: "内容" })',
+        'toast': 'ejs.ui.toast({ message: "提示内容" })',
+        'loading': 'ejs.ui.showWaiting({ message: "加载中..." })',
+    };
+    for (const comp of components) {
+        const normalized = comp.toLowerCase().trim();
+        // 检查是否应该使用 API
+        if (API_SUGGESTIONS[normalized]) {
+            warnings.push(`"${comp}" 建议使用 API 方式调用：${API_SUGGESTIONS[normalized]}`);
+            continue;
+        }
+        const validated = validateComponentName(comp);
+        if (validated) {
+            if (!valid.includes(validated)) {
+                valid.push(validated);
+            }
+            // 如果名称被修正了，添加警告
+            const original = comp.toLowerCase().startsWith('em-') ? comp : `em-${comp}`;
+            if (original.toLowerCase() !== validated) {
+                warnings.push(`组件 "${comp}" 已自动修正为 "${validated}"`);
+            }
+        }
+        else {
+            warnings.push(`组件 "${comp}" 不存在于 M8 组件库中，已忽略`);
+        }
+    }
+    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 需求描述
+ * @returns 推荐的组件列表
+ */
+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') || req.includes('提交')) {
+        components.push('em-form', 'em-field', 'em-button');
+    }
+    if (req.includes('输入') || req.includes('input')) {
+        components.push('em-field');
+    }
+    if (req.includes('按钮') || req.includes('button')) {
+        components.push('em-button');
+    }
+    // 列表相关
+    if (req.includes('列表') || req.includes('list')) {
+        components.push('em-cell', 'em-minirefresh');
+    }
+    // 选择器相关
+    if (req.includes('选择') || req.includes('picker') || req.includes('下拉')) {
+        components.push('em-picker');
+    }
+    if (req.includes('日期') || req.includes('date')) {
+        components.push('em-datepicker');
+    }
+    // 搜索相关
+    if (req.includes('搜索') || req.includes('search')) {
+        components.push('em-search');
+    }
+    // 上传相关 - 包含"附件"关键词
+    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)];
+}
 /**
  * 生成 Vue2 组件模板 (Options API)
+ * 严格遵循 M8 规范：样式外部引入、使用 ejs.ui API
  * @param options 模板选项
  * @returns Vue2 组件代码
  */
 export function generateVue2Template(options) {
-    const { name, description, components = [], includeStyle = true, author } = options;
+    const { name, description, components = [], author, useMock = true, pageTitle = '页面标题' } = options;
     const headerOptions = {
         author,
         description
     };
     const header = generateVueFileHeader(headerOptions);
     const scriptHeader = generateFileHeader(headerOptions);
-    // 生成组件导入语句
-    const imports = components.length > 0
-        ? components.map(c => {
-            const componentName = c.startsWith('em-') ? c : `em-${c}`;
-            return `// ${componentName} 组件已全局注册，无需导入`;
-        }).join('\n')
-        : '';
+    // 验证组件
+    const { valid: validComponents, warnings } = filterValidComponents(components);
+    // 如果没有指定组件，根据需求智能推荐
+    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="${name}">
-    <!-- TODO: 添加组件内容 -->
-    <div class="${name}__content">
-      ${components.map(c => `<${c.startsWith('em-') ? c : `em-${c}`}></${c.startsWith('em-') ? c : `em-${c}`}>`).join('\n      ')}
-    </div>
+  <div class="${cssClassName}">
+${templateContent}
   </div>
 </template>
 
 <script>
 ${scriptHeader}
 
-${imports}
-
 export default {
-  name: '${name}',
-
-  components: {
-    // M8 UI 组件已全局注册
-  },
-
-  props: {
-    // TODO: 定义组件属性
-  },
+  name: '${toPascalCase(name)}',
 
   data() {
     return {
-      // TODO: 定义组件数据
+      // 表单数据
+      formData: ${formDataInit},
+      // 加载状态
+      loading: false
     };
   },
 
-  computed: {
-    // TODO: 定义计算属性
-  },
-
-  watch: {
-    // TODO: 定义侦听器
-  },
-
   created() {
-    // TODO: 组件创建时的逻辑
-  },
-
-  mounted() {
-    // TODO: 组件挂载后的逻辑
+    this.initPage();
   },
 
   methods: {
-    // TODO: 定义组件方法
+    /**
+     * 初始化页面
+     */
+    initPage() {
+      this.loadData();
+    },
+
+    /**
+     * 加载数据
+     */
+    async loadData() {
+      try {
+        this.loading = true;
+        ejs.ui.showWaiting({ message: '加载中...' });
+        
+        const result = await Util.ajax({
+          url: Config.serverUrl + '${useMock ? '/rest/mock/' + name : '/api/' + name}',
+          type: 'POST',
+          data: {
+            params: JSON.stringify({})
+          }
+        });
+        
+        if (result.status?.code === 1) {
+          // TODO: 处理数据
+          console.log('数据加载成功:', result.data);
+        } else {
+          ejs.ui.toast({ message: result.status?.text || '加载失败' });
+        }
+      } catch (error) {
+        console.error('数据加载失败:', error);
+        ejs.ui.toast({ message: '网络错误，请重试' });
+      } finally {
+        this.loading = false;
+        ejs.ui.closeWaiting();
+      }
+    },
+${validateMethod}
+    /**
+     * 提交表单
+     */
+    async handleSubmit() {
+      // 表单校验
+      if (!this.validateForm()) {
+        return;
+      }
+
+      try {
+        ejs.ui.showWaiting({ message: '提交中...' });
+        
+        const result = await Util.ajax({
+          url: Config.serverUrl + '${useMock ? '/rest/mock/' + name + '/submit' : '/api/' + name + '/submit'}',
+          type: 'POST',
+          data: {
+            params: JSON.stringify(this.formData)
+          }
+        });
+        
+        if (result.status?.code === 1) {
+          ejs.ui.toast({ message: '提交成功' });
+          // TODO: 处理成功逻辑
+        } else {
+          ejs.ui.toast({ message: result.status?.text || '提交失败' });
+        }
+      } catch (error) {
+        console.error('提交失败:', error);
+        ejs.ui.toast({ message: '网络错误，请重试' });
+      } finally {
+        ejs.ui.closeWaiting();
+      }
+    }${uploaderMethod}
   }
 };
 </script>
-${includeStyle ? `
+
 <style lang="scss" scoped>
-.${name} {
-  &__content {
-    // TODO: 添加样式
-  }
-}
+@import './css/${name}.scss';
 </style>
-` : ''}`;
+`;
     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
  * @param options 模板选项
  * @returns Vue3 组件代码
  */
 export function generateVue3Template(options) {
-    const { name, description, components = [], includeStyle = true, author } = options;
+    const { name, description, components = [], author, useMock = true, pageTitle = '页面标题' } = options;
     const headerOptions = {
         author,
         description
     };
     const header = generateVueFileHeader(headerOptions);
+    // 验证组件
+    const { valid: validComponents } = filterValidComponents(components);
+    // 如果没有指定组件，根据需求智能推荐
+    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="${name}">
-    <!-- TODO: 添加组件内容 -->
-    <div class="${name}__content">
-      ${components.map(c => `<${c.startsWith('em-') ? c : `em-${c}`}></${c.startsWith('em-') ? c : `em-${c}`}>`).join('\n      ')}
-    </div>
+  <div class="${cssClassName}">
+${templateContent}
   </div>
 </template>
 
@@ -116,49 +627,381 @@ export function generateVue3Template(options) {
  * @描述 ${description}
  */
 
-import { ref, reactive, computed, onMounted } from 'vue';
-
-// ==================== Props ====================
-const props = defineProps({
-  // TODO: 定义组件属性
-});
-
-// ==================== Emits ====================
-const emit = defineEmits([
-  // TODO: 定义组件事件
-]);
+import { ref, reactive, onMounted } from 'vue';
 
 // ==================== 响应式数据 ====================
-const state = reactive({
-  // TODO: 定义组件状态
-});
-
-// ==================== 计算属性 ====================
-// const computedValue = computed(() => {
-//   // TODO: 计算逻辑
-// });
-
-// ==================== 方法 ====================
-// const handleClick = () => {
-//   // TODO: 处理逻辑
-// };
+const formData = reactive(${formDataInitVue3});
+const loading = ref(false);
 
 // ==================== 生命周期 ====================
 onMounted(() => {
-  // TODO: 组件挂载后的逻辑
+  initPage();
 });
+
+// ==================== 方法 ====================
+
+/**
+ * 初始化页面
+ */
+const initPage = () => {
+  loadData();
+};
+
+/**
+ * 加载数据
+ */
+const loadData = async () => {
+  try {
+    loading.value = true;
+    ejs.ui.showWaiting({ message: '加载中...' });
+    
+    const result = await Util.ajax({
+      url: Config.serverUrl + '${useMock ? '/rest/mock/' + name : '/api/' + name}',
+      type: 'POST',
+      data: {
+        params: JSON.stringify({})
+      }
+    });
+    
+    if (result.status?.code === 1) {
+      // TODO: 处理数据
+      console.log('数据加载成功:', result.data);
+    } else {
+      ejs.ui.toast({ message: result.status?.text || '加载失败' });
+    }
+  } catch (error) {
+    console.error('数据加载失败:', error);
+    ejs.ui.toast({ message: '网络错误，请重试' });
+  } finally {
+    loading.value = false;
+    ejs.ui.closeWaiting();
+  }
+};
+${validateMethodVue3}
+/**
+ * 提交表单
+ */
+const handleSubmit = async () => {
+  // 表单校验
+  if (!validateForm()) {
+    return;
+  }
+
+  try {
+    ejs.ui.showWaiting({ message: '提交中...' });
+    
+    const result = await Util.ajax({
+      url: Config.serverUrl + '${useMock ? '/rest/mock/' + name + '/submit' : '/api/' + name + '/submit'}',
+      type: 'POST',
+      data: {
+        params: JSON.stringify(formData)
+      }
+    });
+    
+    if (result.status?.code === 1) {
+      ejs.ui.toast({ message: '提交成功' });
+      // TODO: 处理成功逻辑
+    } else {
+      ejs.ui.toast({ message: result.status?.text || '提交失败' });
+    }
+  } catch (error) {
+    console.error('提交失败:', error);
+    ejs.ui.toast({ message: '网络错误，请重试' });
+  } finally {
+    ejs.ui.closeWaiting();
+  }
+};
+${uploaderMethodVue3}
 </script>
-${includeStyle ? `
+
 <style lang="scss" scoped>
-.${name} {
-  &__content {
-    // TODO: 添加样式
-  }
-}
+@import './css/${name}.scss';
 </style>
-` : ''}`;
+`;
     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 组件列表
+ * @param name 页面名称
+ * @param description 需求描述
+ * @returns 模板内容
+ */
+function generateTemplateContent(components, name, description) {
+    const lines = [];
+    const cssClassName = name.replace(/-/g, '_');
+    const req = description.toLowerCase();
+    // 提取表单字段信息
+    const formFields = extractFormFields(description);
+    // 判断页面类型
+    // 注意：如果有除用户名/密码之外的明确字段，应该使用动态表单模板
+    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');
+    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`);
+        lines.push(`        v-model="formData.username"`);
+        lines.push(`        label="用户名"`);
+        lines.push(`        placeholder="请输入用户名"`);
+        lines.push(`        clearable`);
+        lines.push(`        required`);
+        lines.push(`      />`);
+        lines.push(`      <em-field`);
+        lines.push(`        v-model="formData.password"`);
+        lines.push(`        type="password"`);
+        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) {
+            if (comp === 'em-field') {
+                lines.push(`      <em-field`);
+                lines.push(`        v-model="formData.field1"`);
+                lines.push(`        label="字段名"`);
+                lines.push(`        placeholder="请输入"`);
+                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>`);
+        lines.push(`      </div>`);
+        lines.push(`    </em-form>`);
+    }
+    else if (isListPage) {
+        // 列表页面模板
+        lines.push(`    <!-- 列表内容 -->`);
+        lines.push(`    <em-minirefresh`);
+        lines.push(`      @refresh="onRefresh"`);
+        lines.push(`      @loadmore="onLoadMore"`);
+        lines.push(`    >`);
+        lines.push(`      <em-cell`);
+        lines.push(`        v-for="item in list"`);
+        lines.push(`        :key="item.id"`);
+        lines.push(`        :title="item.title"`);
+        lines.push(`        is-link`);
+        lines.push(`        @click="handleItemClick(item)"`);
+        lines.push(`      />`);
+        lines.push(`    </em-minirefresh>`);
+    }
+    else {
+        // 默认页面模板
+        lines.push(`    <!-- 页面内容 -->`);
+        lines.push(`    <div class="${cssClassName}__content">`);
+        for (const comp of components) {
+            const compTag = comp.startsWith('em-') ? comp : `em-${comp}`;
+            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: 添加页面内容 -->`);
+        }
+        lines.push(`    </div>`);
+    }
+    return lines.join('\n');
+}
+/**
+ * 转换为 PascalCase
+ * @param str 输入字符串
+ * @returns PascalCase 字符串
+ */
+function toPascalCase(str) {
+    return str
+        .split('-')
+        .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+        .join('');
+}
 /**
  * 根据版本生成 Vue 模板
  * @param options 模板选项