yg-yygl 0.0.1

package/src/views/codegen/generate/components/GenerateConfigModal.vue

@@ -0,0 +1,1005 @@
+<script setup lang="ts">
+import type { TemplateGroup } from '../../template-manage/types';
+import type {
+  DatabaseColumn,
+  DictionaryOption,
+  GenerateConfig,
+} from '../types';
+
+import { computed, reactive, ref, watch } from 'vue';
+
+import { Drawer } from '@udp/component-ui';
+
+import { Loading } from '@element-plus/icons-vue';
+import { ElIcon, ElMessage } from 'element-plus';
+
+import { getTableDetailInfo } from '../../../../api/codegen';
+import { templateGroupApi } from '../../../../api/codegen/template-group';
+import { getDictionaryOptions } from '../../../../api/dictionary';
+
+import { FORM_TYPE_OPTIONS, QUERY_TYPE_OPTIONS } from '../types';
+import { getCommonFieldList, getDataModelingById, getTableColumns } from '../../../../api/data-modeling';
+
+interface Props {
+  modelValue: boolean;
+  tableName?: string;
+  modelId: string;
+  availableTables?: string[];
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: boolean): void;
+  (e: 'preview', config: GenerateConfig): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+// 支持查询的表单类型白名单（基于代码生成模板的实际支持情况）
+const QUERY_SUPPORTED_FORM_TYPES = [
+  'input',
+  'select',
+  'radio',
+  'checkbox',
+  'date',
+  'datetime',
+] as const;
+
+const formRef = ref();
+const selectedSubTables = ref<string[]>([]);
+
+// 模板分组相关
+const availableGroups = ref<TemplateGroup[]>([]);
+const loadingGroups = ref(false);
+
+// 字段配置相关
+const tableColumns = ref<DatabaseColumn[]>([]);
+const loadingColumns = ref(false);
+
+// 字典选项相关
+const dictionaryOptions = ref<DictionaryOption[]>([]);
+const loadingDictionary = ref(false);
+
+const formData = reactive<GenerateConfig>({
+  tableName: '',
+  moduleName: '',
+  packageName: 'com.example',
+  author: 'CodeGen',
+  outputPath: '',
+  tableType: 'SINGLE',
+  generateType: 'zip',
+  templateGroupId: undefined,
+  columnConfigs: [],
+  treeConfig: {
+    parentIdField: 'parent_id',
+    treeNameField: 'name',
+    treeSortField: 'sort',
+  },
+  mainSubConfig: {
+    subTableNames: [],
+    foreignKeyField: 'main_id',
+  },
+});
+
+const formRules = {
+  tableName: [{ required: true, message: '表名不能为空', trigger: 'blur' }],
+  moduleName: [{ required: true, message: '模块名不能为空', trigger: 'blur' }],
+  packageName: [
+    { required: true, message: '包名不能为空', trigger: 'blur' },
+    {
+      pattern: /^[a-z][a-z0-9]*(\.[a-z][a-z0-9]*)*$/i,
+      message: '包名格式不正确',
+      trigger: 'blur',
+    },
+  ],
+  author: [{ required: true, message: '作者不能为空', trigger: 'blur' }],
+  tableType: [{ required: true, message: '请选择表类型', trigger: 'change' }],
+  generateType: [
+    { required: true, message: '请选择生成方式', trigger: 'change' },
+  ],
+  outputPath: [
+    {
+      required: true,
+      message: '输出路径不能为空',
+      trigger: 'blur',
+    },
+  ],
+  'treeConfig.parentIdField': [
+    { required: true, message: '父ID字段不能为空', trigger: 'blur' },
+  ],
+  'treeConfig.treeNameField': [
+    { required: true, message: '节点名称字段不能为空', trigger: 'blur' },
+  ],
+  'mainSubConfig.foreignKeyField': [
+    { required: true, message: '外键字段不能为空', trigger: 'blur' },
+  ],
+};
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+});
+
+// 监听弹窗打开
+watch(
+  () => props.modelValue,
+  async (newVal) => {
+    if (newVal && props.modelId) {
+      // 并行加载，但不让字典加载失败影响其他功能
+      const loadTasks = [
+        loadTemplateGroups(formData.tableType),
+        loadTableColumns(),
+        loadDictionaryOptions(), // 即使失败也不会阻塞其他加载
+      ];
+
+      // 等待所有任务完成，不抛出错误
+      await Promise.allSettled(loadTasks);
+    }
+  },
+);
+
+// 监听表类型变化
+watch(
+  () => formData.tableType,
+  async (newType) => {
+    formData.treeConfig =
+      newType === 'tree'
+        ? {
+            parentIdField: 'parent_id',
+            treeNameField: 'name',
+            treeSortField: 'sort',
+          }
+        : undefined;
+
+    if (newType === 'main_sub') {
+      formData.mainSubConfig = {
+        subTableNames: [],
+        foreignKeyField: 'main_id',
+      };
+    } else {
+      formData.mainSubConfig = undefined;
+      selectedSubTables.value = [];
+    }
+
+    // 根据表类型加载推荐的模板分组
+    await loadTemplateGroups(newType);
+  },
+);
+
+// 监听生成方式变化
+watch(
+  () => formData.generateType,
+  (newType) => {
+    if (newType === 'zip') {
+      formData.outputPath = '';
+    }
+  },
+);
+
+/**
+ * 加载模板分组
+ */
+const loadTemplateGroups = async (tableType?: string) => {
+  try {
+    loadingGroups.value = true;
+    if (tableType) {
+      // 根据表类型获取推荐分组
+      availableGroups.value = await templateGroupApi.getByTableType(tableType);
+      // 如果有推荐分组，自动选择第一个
+      if (availableGroups.value.length > 0) {
+        formData.templateGroupId = availableGroups.value[0].id;
+      }
+    } else {
+      // 获取所有启用分组
+      availableGroups.value = await templateGroupApi.getActiveGroups();
+    }
+  } catch (error) {
+    console.error('加载模板分组失败:', error);
+    availableGroups.value = [];
+  } finally {
+    loadingGroups.value = false;
+  }
+};
+
+/**
+ * 加载表字段信息
+ */
+const loadTableColumns = async () => {
+  try {
+    loadingColumns.value = true;
+    const tableInfo = await getDataModelingById(props.modelId);
+
+    formData.tableName = tableInfo.tableName;
+    formData.moduleName = extractModuleName(formData.tableName);
+
+    const columns = await getCommonFieldList(props.modelId);
+
+    // 初始化字段配置，设置默认值
+    tableColumns.value = columns.map((column, index) => {
+      const _column = {
+        ...column,
+        javaType: column.javaType,
+        jdbcType: column.columnType.toLocaleUpperCase(),
+        propertyName: column.propertyName,
+        capitalizedPropertyName: column.capitalizedPropertyName,
+        columnName: column.columnName,
+        isPrimaryKey: column.isPrimary === 1,
+        dataType: column.dataType,
+        columnComment: column.description,
+        length: column.columnLength,
+        isAutoIncrement: column.isAutoInc === 1,
+        autoIncrement: column.isAutoInc === 1,
+        nullable: column.isAllowNull === 1,
+      };
+      return {
+        ..._column,
+        // 设置默认配置
+        isRequired: false,
+        isList: !_column.isPrimaryKey && index < 6, // 前6个非主键字段默认显示在列表
+        isQuery: ['name', 'title', 'status', 'type'].some((key) =>
+          _column.columnName.toLowerCase().includes(key),
+        ), // 常见查询字段
+        queryType: _column.dataType === 'varchar' ? 'LIKE' : 'EQ', // 文本字段默认模糊查询
+        isForm: !_column.isPrimaryKey && !_column.isAutoIncrement, // 非主键非自增字段显示在表单
+        isEdit: !_column.isPrimaryKey && !_column.isAutoIncrement, // 非主键非自增字段可编辑
+        formType: getDefaultFormType(_column), // 根据数据类型推断表单类型
+        listSort: index + 1,
+        formSort: index + 1,
+      };
+    });
+
+    // 清洗：确保不支持查询的表单类型的 isQuery 为 false
+    tableColumns.value = tableColumns.value.map((col) => {
+      const isSupported = QUERY_SUPPORTED_FORM_TYPES.includes(
+        col.formType as (typeof QUERY_SUPPORTED_FORM_TYPES)[number],
+      );
+      if (!isSupported && col.isQuery) {
+        return { ...col, isQuery: false };
+      }
+      return col;
+    });
+
+    // 更新表单数据中的字段配置
+    formData.columnConfigs = [...tableColumns.value];
+  } catch (error) {
+    console.error('加载表字段信息失败:', error);
+    ElMessage.error('加载表字段信息失败');
+    tableColumns.value = [];
+  } finally {
+    loadingColumns.value = false;
+  }
+};
+
+/**
+ * 加载字典选项
+ */
+const loadDictionaryOptions = async () => {
+  try {
+    loadingDictionary.value = true;
+    const options = await getDictionaryOptions();
+    dictionaryOptions.value = options || [];
+    console.log('加载字典选项结果:', options?.length || 0, '个选项');
+  } catch (error) {
+    console.error('字典API调用失败:', error);
+    dictionaryOptions.value = [];
+  } finally {
+    loadingDictionary.value = false;
+  }
+};
+
+/**
+ * 根据数据类型推断默认表单类型
+ */
+const getDefaultFormType = (column: DatabaseColumn): string => {
+  const dataType = column.dataType.toLowerCase();
+  const columnName = column.columnName.toLowerCase();
+
+  // 根据字段名判断
+  if (columnName.includes('password')) return 'password';
+  if (columnName.includes('email')) return 'email';
+  if (columnName.includes('phone')) return 'tel';
+  if (columnName.includes('date') || columnName.includes('time')) {
+    return dataType.includes('datetime') ? 'datetime' : 'date';
+  }
+  if (
+    columnName.includes('content') ||
+    columnName.includes('desc') ||
+    columnName.includes('remark')
+  ) {
+    return 'textarea';
+  }
+  if (
+    columnName.includes('status') ||
+    columnName.includes('type') ||
+    columnName.includes('gender')
+  ) {
+    return 'select';
+  }
+
+  // 根据数据类型判断
+  if (dataType.includes('text')) return 'textarea';
+  if (dataType.includes('date')) return 'date';
+  if (dataType.includes('datetime') || dataType.includes('timestamp'))
+    return 'datetime';
+  if (
+    dataType.includes('int') ||
+    dataType.includes('bit') ||
+    dataType.includes('decimal') ||
+    dataType.includes('float')
+  ) {
+    return 'number';
+  }
+
+  return 'input'; // 默认输入框
+};
+
+/**
+ * 字段配置变更处理
+ */
+const onColumnConfigChange = (
+  column: DatabaseColumn,
+  field: string,
+  value: any,
+) => {
+  const index = tableColumns.value.findIndex(
+    (c) => c.columnName === column.columnName,
+  );
+  if (index !== -1) {
+    (tableColumns.value[index] as any)[field] = value;
+
+    // 表单类型切换时的联动处理
+    if (field === 'formType') {
+      const newFormType = value as string;
+      const isSupported = QUERY_SUPPORTED_FORM_TYPES.includes(
+        newFormType as (typeof QUERY_SUPPORTED_FORM_TYPES)[number],
+      );
+
+      // 如果新类型不支持查询，自动关闭可查询开关
+      if (!isSupported && (tableColumns.value[index] as any).isQuery) {
+        (tableColumns.value[index] as any).isQuery = false;
+      }
+    }
+
+    // 同步到formData
+    formData.columnConfigs = [...tableColumns.value];
+  }
+};
+
+/**
+ * 判断字段是否禁用可查询开关
+ * 只有支持查询的表单类型才能开启可查询开关
+ */
+const isQueryDisabled = (row: DatabaseColumn): boolean => {
+  return !QUERY_SUPPORTED_FORM_TYPES.includes(
+    row.formType as (typeof QUERY_SUPPORTED_FORM_TYPES)[number],
+  );
+};
+
+/**
+ * 批量设置字段配置
+ */
+const batchSetColumnConfig = (field: string, value: any) => {
+  tableColumns.value.forEach((column) => {
+    (column as any)[field] = value;
+  });
+  formData.columnConfigs = [...tableColumns.value];
+  ElMessage.success(`批量设置${field}成功`);
+};
+
+/**
+ * 重置字段配置为默认值
+ */
+const resetColumnConfig = () => {
+  loadTableColumns();
+  ElMessage.success('字段配置已重置为默认值');
+};
+
+/**
+ * 提取模块名
+ */
+const extractModuleName = (tableName: string): string => {
+  const cleanName = tableName.replace(/^(t_|sys_|udp_)/i, '');
+  return cleanName.toLowerCase();
+};
+
+/**
+ * 模块名变化处理
+ */
+const onModuleNameChange = () => {
+  // 可以根据模块名自动调整包名等
+};
+
+/**
+ * 子表选择变化
+ */
+const onSubTablesChange = (value: string[]) => {
+  if (formData.mainSubConfig) {
+    formData.mainSubConfig.subTableNames = value;
+  }
+};
+
+/**
+ * 预览代码
+ */
+const handlePreview = async () => {
+  try {
+    await formRef.value?.validate();
+
+    // 确保字段配置是最新的
+    formData.columnConfigs = [...tableColumns.value];
+
+    console.log('准备预览代码，配置数据:', {
+      tableName: formData.tableName,
+      columnConfigs: formData.columnConfigs?.length || 0,
+      config: formData
+    });
+
+    // 触发预览事件
+    emit('preview', { ...formData });
+  } catch (error) {
+    console.error('表单验证失败:', error);
+  }
+};
+
+/**
+ * 关闭抽屉
+ */
+const handleClose = () => {
+  visible.value = false;
+  // 重置表单
+  selectedSubTables.value = [];
+};
+</script>
+
+<template>
+  <Drawer
+    v-model="visible"
+    title="代码生成配置"
+    size="60%"
+    icon="material-symbols:code"
+    direction="rtl"
+    :before-close="handleClose"
+  >
+    <el-form
+      :model="formData"
+      :rules="formRules"
+      ref="formRef"
+      label-width="120px"
+      @submit.prevent
+    >
+      <!-- 基本配置 -->
+      <el-card class="config-section">
+        <template #header>
+          <span class="section-title">基本配置</span>
+        </template>
+
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="表名" prop="tableName">
+              <el-input
+                v-model="formData.tableName"
+                placeholder="表名"
+                readonly
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="模块名" prop="moduleName">
+              <el-input
+                v-model="formData.moduleName"
+                placeholder="如：system、user"
+                @input="onModuleNameChange"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="包名" prop="packageName">
+              <el-input
+                v-model="formData.packageName"
+                placeholder="如：com.example.project"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="作者" prop="author">
+              <el-input v-model="formData.author" placeholder="作者名" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="表类型" prop="tableType">
+              <el-select
+                v-model="formData.tableType"
+                placeholder="选择表类型"
+                :show-arrow="false"
+                style="width: 100%"
+              >
+                <el-option label="单表" value="SINGLE" />
+                <!-- <el-option label="树表" value="TREE" /> -->
+                <!-- <el-option label="主子表" value="MAINSUB" /> -->
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="模板分组" prop="templateGroupId">
+              <el-select
+                v-model="formData.templateGroupId"
+                placeholder="选择模板分组"
+                style="width: 100%"
+                :loading="loadingGroups"
+                clearable
+                :show-arrow="false"
+              >
+                <el-option
+                  v-for="group in availableGroups"
+                  :key="group.id"
+                  :label="`${group.groupName}${group.isDefault ? ' (默认)' : ''}`"
+                  :value="group.id"
+                >
+                  <span>{{ group.groupName }}</span>
+                  <span
+                    v-if="group.isDefault"
+                    style="color: var(--el-color-primary); margin-left: 8px"
+                    >(默认)</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="生成方式" prop="generateType">
+              <el-select
+                v-model="formData.generateType"
+                placeholder="选择生成方式"
+                style="width: 100%"
+                :show-arrow="false"
+              >
+                <el-option label="生成ZIP包下载" value="zip" />
+                <el-option label="直接生成到项目" value="project" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-form-item
+          v-if="formData.generateType === 'project'"
+          label="输出路径"
+          prop="outputPath"
+        >
+          <el-input
+            v-model="formData.outputPath"
+            placeholder="代码生成输出路径，如：/path/to/project/src/main/java"
+          />
+        </el-form-item>
+      </el-card>
+
+      <!-- 字段配置 -->
+      <el-card class="config-section">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <span class="section-title">字段配置</span>
+            <div class="space-x-2">
+              <el-button
+                size="small"
+                type="primary"
+                :loading="loadingColumns"
+                @click="loadTableColumns"
+              >
+                刷新字段
+              </el-button>
+              <el-button size="small" @click="resetColumnConfig">
+                重置配置
+              </el-button>
+              <el-button
+                size="small"
+                :loading="loadingDictionary"
+                @click="loadDictionaryOptions"
+              >
+                刷新字典
+              </el-button>
+            </div>
+          </div>
+        </template>
+
+        <div v-if="loadingColumns" class="py-8 text-center">
+          <el-icon class="is-loading"><Loading /></el-icon>
+          <p class="mt-2 text-gray-500">加载字段信息中...</p>
+        </div>
+
+        <div
+          v-else-if="tableColumns.length === 0"
+          class="py-8 text-center text-gray-500"
+        >
+          <p>暂无字段信息</p>
+          <el-button type="primary" link @click="loadTableColumns">点击加载</el-button>
+        </div>
+
+        <div v-else>
+          <!-- 批量操作按钮 -->
+          <div class="mb-4 flex items-center space-x-2">
+            <span class="text-sm font-medium text-gray-700">批量设置:</span>
+            <el-button
+              size="small"
+              @click="batchSetColumnConfig('isList', true)"
+            >
+              全部列表显示
+            </el-button>
+            <el-button
+              size="small"
+              @click="batchSetColumnConfig('isList', false)"
+            >
+              全部列表隐藏
+            </el-button>
+            <el-button
+              size="small"
+              @click="batchSetColumnConfig('isQuery', true)"
+            >
+              全部可查询
+            </el-button>
+            <el-button
+              size="small"
+              @click="batchSetColumnConfig('isForm', true)"
+            >
+              全部表单显示
+            </el-button>
+            <el-button
+              size="small"
+              @click="batchSetColumnConfig('isRequired', false)"
+            >
+              全部非必填
+            </el-button>
+          </div>
+
+          <!-- 字段配置表格 -->
+          <el-table
+            :data="tableColumns"
+            size="small"
+            max-height="600"
+            style="width: 100%"
+          >
+            <el-table-column
+              prop="columnName"
+              label="字段名"
+              min-width="140"
+              fixed="left"
+            >
+              <template #default="{ row }">
+                <div class="text-xs">
+                  <div class="font-medium">{{ row.columnName }}</div>
+                  <div class="text-gray-500">{{ row.dataType }}</div>
+                </div>
+              </template>
+            </el-table-column>
+
+            <el-table-column
+              prop="columnComment"
+              label="字段描述"
+              min-width="150"
+              show-overflow-tooltip
+            >
+              <template #default="{ row }">
+                <div class="text-xs">{{ row.columnComment || '--' }}</div>
+              </template>
+            </el-table-column>
+
+            <el-table-column label="列表显示" width="80" align="center">
+              <template #default="{ row }">
+                <el-switch
+                  :model-value="row.isList"
+                  @change="
+                    (value) => onColumnConfigChange(row, 'isList', value)
+                  "
+                  size="small"
+                />
+              </template>
+            </el-table-column>
+
+            <el-table-column label="可查询" width="70" align="center">
+              <template #default="{ row }">
+                <el-switch
+                  :model-value="row.isQuery"
+                  :disabled="isQueryDisabled(row)"
+                  @change="
+                    (value) => onColumnConfigChange(row, 'isQuery', value)
+                  "
+                  size="small"
+                />
+              </template>
+            </el-table-column>
+
+            <el-table-column label="查询方式" width="130">
+              <template #default="{ row }">
+                <el-select
+                  :model-value="row.queryType"
+                  @change="
+                    (value: any) =>
+                      onColumnConfigChange(row, 'queryType', value)
+                  "
+                  :disabled="!row.isQuery"
+                  size="small"
+                  :show-arrow="false"
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="option in QUERY_TYPE_OPTIONS"
+                    :key="option.value"
+                    :label="option.label"
+                    :value="option.value"
+                    :title="option.description"
+                  />
+                </el-select>
+              </template>
+            </el-table-column>
+
+            <el-table-column label="表单显示" width="80" align="center">
+              <template #default="{ row }">
+                <el-switch
+                  :model-value="row.isForm"
+                  @change="
+                    (value) => onColumnConfigChange(row, 'isForm', value)
+                  "
+                  size="small"
+                />
+              </template>
+            </el-table-column>
+
+            <el-table-column label="必填项" width="70" align="center">
+              <template #default="{ row }">
+                <el-switch
+                  :model-value="row.isRequired"
+                  @change="
+                    (value) => onColumnConfigChange(row, 'isRequired', value)
+                  "
+                  :disabled="!row.isForm"
+                  size="small"
+                />
+              </template>
+            </el-table-column>
+
+            <el-table-column label="可编辑" width="70" align="center">
+              <template #default="{ row }">
+                <el-switch
+                  :model-value="row.isEdit"
+                  @change="
+                    (value) => onColumnConfigChange(row, 'isEdit', value)
+                  "
+                  :disabled="!row.isForm"
+                  size="small"
+                />
+              </template>
+            </el-table-column>
+
+            <el-table-column label="表单类型" width="140">
+              <template #default="{ row }">
+                <el-select
+                  :model-value="row.formType"
+                  @change="
+                    (value) => onColumnConfigChange(row, 'formType', value)
+                  "
+                  :disabled="!row.isForm"
+                  size="small"
+                  style="width: 100%"
+                  :show-arrow="false"
+                >
+                  <el-option
+                    v-for="option in FORM_TYPE_OPTIONS"
+                    :key="option.value"
+                    :label="option.label"
+                    :value="option.value"
+                    :title="option.description"
+                  />
+                </el-select>
+              </template>
+            </el-table-column>
+
+            <el-table-column label="字典类型" width="140">
+              <template #default="{ row }">
+                <el-select
+                  :model-value="row.dictType"
+                  @change="
+                    (value) => onColumnConfigChange(row, 'dictType', value)
+                  "
+                  :disabled="
+                    !['select', 'radio', 'checkbox'].includes(row.formType)
+                  "
+                  size="small"
+                  style="width: 100%"
+                  clearable
+                  :placeholder="dictionaryOptions.length > 0 ? '选择字典' : '暂无字典数据'"
+                  :loading="loadingDictionary"
+                  filterable
+                  :show-arrow="false"
+                >
+                  <el-option
+                    v-for="option in dictionaryOptions"
+                    :key="option.value"
+                    :label="option.label"
+                    :value="option.value"
+                    :title="option.description"
+                  >
+                    <div class="flex items-center justify-between">
+                      <span>{{ option.label }}</span>
+                      <span class="text-xs text-gray-400">{{
+                        option.value
+                      }}</span>
+                    </div>
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-card>
+
+      <!-- 树表配置 -->
+      <el-card v-if="formData.tableType === 'TREE'" class="config-section">
+        <template #header>
+          <span class="section-title">树表配置</span>
+        </template>
+
+        <el-row :gutter="16">
+          <el-col :span="8">
+            <el-form-item label="父ID字段" prop="treeConfig.parentIdField">
+              <el-input
+                v-model="formData.treeConfig!.parentIdField"
+                placeholder="如：parent_id"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="节点名称字段" prop="treeConfig.treeNameField">
+              <el-input
+                v-model="formData.treeConfig!.treeNameField"
+                placeholder="如：name"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="排序字段" prop="treeConfig.treeSortField">
+              <el-input
+                v-model="formData.treeConfig!.treeSortField"
+                placeholder="如：sort"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-card>
+
+      <!-- 主子表配置 -->
+      <el-card v-if="formData.tableType === 'MAINSUB'" class="config-section">
+        <template #header>
+          <span class="section-title">主子表配置</span>
+        </template>
+
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="外键字段" prop="mainSubConfig.foreignKeyField">
+              <el-input
+                v-model="formData.mainSubConfig!.foreignKeyField"
+                placeholder="如：main_id"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="子表名">
+              <el-select
+                v-model="selectedSubTables"
+                multiple
+                filterable
+                allow-create
+                :show-arrow="false"
+                placeholder="选择或输入子表名"
+                style="width: 100%"
+                @change="onSubTablesChange"
+              >
+                <el-option
+                  v-for="table in availableTables"
+                  :key="table"
+                  :label="table"
+                  :value="table"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-form>
+
+    <template #footer>
+      <div class="drawer-footer">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="handlePreview"> 预览代码 </el-button>
+      </div>
+    </template>
+  </Drawer>
+</template>
+
+<style scoped>
+.config-section {
+  margin-bottom: 16px;
+}
+
+.config-section:last-child {
+  margin-bottom: 0;
+}
+
+.section-title {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* 字段配置表格样式 */
+.config-section .el-table {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.config-section .el-table th {
+  background-color: #f8f9fa;
+  font-weight: 600;
+  color: #495057;
+  font-size: 12px;
+}
+
+.config-section .el-table td {
+  padding: 8px 0;
+}
+
+.config-section .el-table .el-switch {
+  --el-switch-on-color: #67c23a;
+  --el-switch-off-color: #dcdfe6;
+}
+
+/* 批量操作按钮样式 */
+.config-section .space-x-2 > * + * {
+  margin-left: 8px;
+}
+
+/* 表格内容对齐 */
+.config-section .text-xs {
+  font-size: 11px;
+  line-height: 1.2;
+}
+
+.config-section .text-xs .font-medium {
+  font-weight: 500;
+  color: #2d3748;
+}
+
+.config-section .text-xs .text-gray-500 {
+  color: #9ca3af;
+  margin-top: 2px;
+}
+
+/* 滚动条样式 */
+.config-section .el-table__body-wrapper::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.config-section .el-table__body-wrapper::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.config-section .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.config-section .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+</style>