yg-yygl 0.0.1

package/dist/views/codegen/generate/components/CodePreviewModal.vue

@@ -0,0 +1,1161 @@
+<script setup lang="ts">
+import type { CodeLanguage } from '@udp/component-ui';
+
+import type { GenerateConfig, PreviewResponse } from '../types';
+
+import {
+  computed,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch,
+} from 'vue';
+
+import { CodeEditor, Dialog, Icon } from '@udp/component-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { previewGeneratedCode } from '../../../../api/codegen';
+
+interface Props {
+  modelValue: boolean;
+  tableName?: string;
+  config?: GenerateConfig; // 接收外部传入的配置
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: boolean): void;
+  (e: 'generate', config: GenerateConfig): void;
+}
+
+interface FileTreeNode {
+  label: string;
+  path: string;
+  isFile: boolean;
+  children?: FileTreeNode[];
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const configFormRef = ref();
+const previewing = ref(false);
+const previewResult = ref<null | PreviewResponse>(null);
+const selectedFile = ref<string>('');
+const selectedFileContent = ref<string>('');
+
+// 拖拽相关状态
+const leftPanelWidth = ref(300);
+const isDragging = ref(false);
+const dragStartX = ref(0);
+const dragStartWidth = ref(0);
+
+// 配置区域拖拽相关状态
+const configLeftWidth = ref(0); // 将在mounted时计算
+const isConfigDragging = ref(false);
+const configDragStartX = ref(0);
+const configDragStartWidth = ref(0);
+
+// 窗口宽度响应式状态
+const windowWidth = ref(window.innerWidth);
+
+const generateConfig = reactive<GenerateConfig>({
+  tableName: '',
+  moduleName: '',
+  packageName: 'com.example',
+  author: 'CodeGen',
+  outputPath: '',
+  tableType: 'SINGLE',
+  generateType: 'zip',
+  columnConfigs: [],
+  treeConfig: {
+    parentIdField: 'parent_id',
+    treeNameField: 'name',
+    treeSortField: 'sort',
+  },
+  mainSubConfig: {
+    subTableNames: [],
+    foreignKeyField: 'main_id',
+  },
+});
+
+const configRules = {
+  tableName: [{ required: true, message: '表名不能为空', trigger: 'blur' }],
+  moduleName: [{ required: true, message: '模块名不能为空', trigger: 'blur' }],
+  packageName: [{ required: true, message: '包名不能为空', trigger: 'blur' }],
+  author: [{ required: true, message: '作者不能为空', trigger: 'blur' }],
+  tableType: [{ required: true, message: '请选择表类型', trigger: 'change' }],
+  generateType: [
+    { required: true, message: '请选择生成类型', trigger: 'change' },
+  ],
+};
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+});
+
+// 计算配置区域的宽度比例（7:3）
+const computedConfigWidths = computed(() => {
+  // 获取实际可用宽度（考虑弹窗的padding等）
+  const availableWidth = windowWidth.value * 0.95 - 80; // 95%窗口宽度减去padding
+
+  if (configLeftWidth.value === 0) {
+    // 默认情况下，左侧占70%，右侧占30%（7:3比例）
+    const leftWidth = availableWidth * 0.7;
+    const rightWidth = availableWidth * 0.3;
+
+    // 确保最小宽度限制
+    const minLeftWidth = 550;
+    const minRightWidth = 280;
+
+    if (leftWidth < minLeftWidth || rightWidth < minRightWidth) {
+      // 如果计算出的宽度太小，使用最小宽度
+      return {
+        leftWidth: Math.max(leftWidth, minLeftWidth),
+        rightWidth: Math.max(rightWidth, minRightWidth),
+      };
+    }
+
+    return {
+      leftWidth,
+      rightWidth,
+    };
+  }
+
+  // 用户手动调整过宽度
+  return {
+    leftWidth: configLeftWidth.value,
+    rightWidth: Math.max(availableWidth - configLeftWidth.value - 16, 280), // 16px是分割线和margin
+  };
+});
+
+// 文件树数据
+const fileTreeData = computed<FileTreeNode[]>(() => {
+  if (!previewResult.value || !previewResult.value.files) {
+    console.log('文件树数据为空:', previewResult.value);
+    return [];
+  }
+
+  const files = previewResult.value.files;
+  console.log('处理文件树数据:', Object.keys(files).length, '个文件');
+
+  const tree: FileTreeNode[] = [];
+  const folders: Record<string, FileTreeNode> = {};
+
+  Object.keys(files).forEach((filePath) => {
+    const parts = filePath.split('/');
+    let currentLevel = tree;
+    let currentPath = '';
+
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      const isLastPart = i === parts.length - 1;
+      currentPath = currentPath ? `${currentPath}/${part}` : part;
+
+      if (isLastPart) {
+        // 文件节点
+        currentLevel.push({
+          label: part,
+          path: filePath,
+          isFile: true,
+        });
+      } else {
+        // 文件夹节点
+        let folder = folders[currentPath];
+        if (!folder) {
+          folder = {
+            label: part,
+            path: currentPath,
+            isFile: false,
+            children: [],
+          };
+          folders[currentPath] = folder;
+          currentLevel.push(folder);
+        }
+        currentLevel = folder.children || [];
+      }
+    }
+  });
+
+  console.log('生成的文件树结构:', tree);
+  return tree;
+});
+
+// 监听弹窗打开
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal) {
+      if (props.config) {
+        // 如果有外部传入的配置，使用外部配置
+        Object.assign(generateConfig, props.config);
+        // 自动触发预览
+        nextTick(() => {
+          handlePreview();
+        });
+      } else if (props.tableName) {
+        // 如果没有外部配置，使用表名生成默认配置
+        generateConfig.tableName = props.tableName;
+        generateConfig.moduleName = extractModuleName(props.tableName);
+        // 也自动触发预览，使用默认的全量生成配置
+        nextTick(() => {
+          handlePreview();
+        });
+      }
+    }
+  },
+);
+
+/**
+ * 提取模块名
+ */
+const extractModuleName = (tableName: string): string => {
+  // 移除表前缀，转换为驼峰命名
+  const cleanName = tableName.replace(/^(t_|sys_|udp_)/i, '');
+  return cleanName.toLowerCase();
+};
+
+/**
+ * 生成预览
+ */
+const handlePreview = async () => {
+  try {
+    await configFormRef.value?.validate();
+
+    previewing.value = true;
+    console.log('开始生成预览，配置:', generateConfig);
+
+    previewResult.value = await previewGeneratedCode(generateConfig);
+    console.log('接口返回的预览结果:', previewResult.value);
+
+    if (!previewResult.value || !previewResult.value.files) {
+      ElMessage.error('预览数据为空');
+      return;
+    }
+
+    const fileKeys = Object.keys(previewResult.value.files);
+    console.log('文件列表:', fileKeys);
+
+    // 默认选择第一个文件
+    const firstFile = fileKeys[0];
+    if (firstFile) {
+      selectedFile.value = firstFile;
+      selectedFileContent.value = previewResult.value.files[firstFile] || '';
+      console.log(
+        '默认选择文件:',
+        firstFile,
+        '内容长度:',
+        selectedFileContent.value.length,
+      );
+    }
+
+    ElMessage.success(`代码预览生成成功，共生成 ${fileKeys.length} 个文件`);
+  } catch (error) {
+    console.error('预览失败:', error);
+    ElMessage.error(`代码预览生成失败: ${(error as Error).message}`);
+  } finally {
+    previewing.value = false;
+  }
+};
+
+/**
+ * 选择文件
+ */
+const handleFileSelect = (data: any, _node?: any) => {
+  if (!previewResult.value) return;
+
+  // 如果是从el-tree的node-click事件来的，data是树节点数据
+  const filePath = data.path || data;
+
+  // 只处理文件，不处理文件夹
+  if (data.isFile === false) return;
+
+  selectedFile.value = filePath;
+  selectedFileContent.value = previewResult.value.files[filePath] || '';
+
+  console.log(
+    '选择文件:',
+    filePath,
+    '内容长度:',
+    selectedFileContent.value.length,
+  );
+};
+
+/**
+ * 根据文件名推断代码语言类型
+ */
+const getCodeLanguage = (fileName: string): CodeLanguage => {
+  const extension = fileName.split('.').pop()?.toLowerCase();
+  const fileNameLower = fileName.toLowerCase();
+
+  // 特殊文件名处理
+  if (fileNameLower === 'pom.xml') return 'xml';
+  if (fileNameLower === 'package.json') return 'json';
+  if (
+    fileNameLower.includes('application') &&
+    (extension === 'yml' || extension === 'yaml')
+  )
+    return 'yaml';
+  if (fileNameLower.includes('application') && extension === 'properties')
+    return 'properties';
+
+  // 根据扩展名匹配
+  switch (extension) {
+    case 'css': {
+      return 'css';
+    }
+    case 'html': {
+      return 'html';
+    }
+    case 'java': {
+      return 'java';
+    }
+    case 'js': {
+      return 'javascript';
+    }
+    case 'json': {
+      return 'json';
+    }
+    case 'md': {
+      return 'markdown';
+    }
+    case 'properties': {
+      return 'properties';
+    }
+    case 'sql': {
+      return 'sql';
+    }
+    case 'ts': {
+      return 'typescript';
+    }
+    case 'vue': {
+      return 'vue';
+    }
+    case 'xml': {
+      return 'xml';
+    }
+    case 'yaml':
+    case 'yml': {
+      return 'yaml';
+    }
+    default: {
+      return 'text';
+    }
+  }
+};
+
+/**
+ * 获取文件图标（参考IDEA风格）
+ */
+const getFileIcon = (fileName: string, isFile: boolean): string => {
+  if (!fileName)
+    return isFile ? 'vscode-icons:default-file' : 'vscode-icons:default-folder';
+
+  if (!isFile) {
+    return getFolderIcon(fileName.toLowerCase());
+  }
+
+  return getFileIconByName(fileName.toLowerCase());
+};
+
+/**
+ * 获取文件夹图标
+ */
+const getFolderIcon = (folderName: string): string => {
+  const folderIconMap: Record<string, string> = {
+    src: 'vscode-icons:folder-type-src',
+    main: 'vscode-icons:folder-type-src',
+    java: 'vscode-icons:default-folder-opened',
+    resources: 'vscode-icons:folder-type-template',
+    webapp: 'vscode-icons:folder-type-webpack',
+    templates: 'vscode-icons:folder-type-template',
+    static: 'vscode-icons:default-folder-opened',
+    css: 'vscode-icons:folder-type-css',
+    js: 'vscode-icons:folder-type-js',
+    components: 'vscode-icons:folder-type-component',
+    views: 'vscode-icons:default-folder-opened',
+    api: 'vscode-icons:folder-type-api',
+    utils: 'vscode-icons:default-folder-opened',
+    config: 'vscode-icons:folder-type-config',
+    mapper: 'vscode-icons:file-type-plsql-package',
+    service: 'vscode-icons:folder-type-services',
+    controller: 'vscode-icons:folder-type-app-opened',
+    entity: 'vscode-icons:folder-type-model',
+    dto: 'vscode-icons:folder-type-model',
+    vo: 'vscode-icons:folder-type-model',
+  };
+
+  return folderIconMap[folderName] || 'vscode-icons:default-folder';
+};
+
+/**
+ * 根据文件名获取文件图标
+ */
+const getFileIconByName = (fileName: string): string => {
+  // 特殊文件名处理
+  const specialFileMap: Record<string, string> = {
+    'pom.xml': 'vscode-icons:file-type-maven',
+    'package.json': 'vscode-icons:file-type-node',
+    dockerfile: 'vscode-icons:file-type-docker',
+  };
+
+  if (specialFileMap[fileName]) {
+    return specialFileMap[fileName];
+  }
+
+  // 特殊文件名模式匹配
+  if (fileName.includes('readme')) return 'vscode-icons:file-type-readme';
+  if (fileName.includes('license')) return 'vscode-icons:file-type-license';
+  if (fileName.includes('gitignore')) return 'vscode-icons:file-type-git';
+
+  // Spring配置文件
+  if (fileName.includes('application')) {
+    const extension = getFileExtension(fileName);
+    if (['properties', 'yaml', 'yml'].includes(extension)) {
+      return 'vscode-icons:file-type-spring';
+    }
+  }
+
+  // 根据扩展名获取图标
+  return getFileIconByExtension(getFileExtension(fileName));
+};
+
+/**
+ * 获取文件扩展名
+ */
+const getFileExtension = (fileName: string): string => {
+  return fileName.split('.').pop() || '';
+};
+
+/**
+ * 根据扩展名获取文件图标
+ */
+const getFileIconByExtension = (extension: string): string => {
+  const extensionIconMap: Record<string, string> = {
+    // 压缩文件
+    '7z': 'vscode-icons:file-type-zip',
+    gz: 'vscode-icons:file-type-zip',
+    rar: 'vscode-icons:file-type-zip',
+    tar: 'vscode-icons:file-type-zip',
+    zip: 'vscode-icons:file-type-zip',
+
+    // 样式文件
+    css: 'vscode-icons:file-type-css',
+    less: 'vscode-icons:file-type-less',
+    scss: 'vscode-icons:file-type-scss',
+
+    // 图片文件
+    gif: 'vscode-icons:file-type-image',
+    ico: 'vscode-icons:file-type-image',
+    jpeg: 'vscode-icons:file-type-image',
+    jpg: 'vscode-icons:file-type-image',
+    png: 'vscode-icons:file-type-image',
+    svg: 'vscode-icons:file-type-image',
+
+    // 代码文件
+    html: 'vscode-icons:file-type-html',
+    java: 'vscode-icons:file-type-java',
+    js: 'vscode-icons:file-type-js-official',
+    ts: 'vscode-icons:file-type-typescript-official',
+    vue: 'vscode-icons:file-type-vue',
+
+    // 配置文件
+    json: 'vscode-icons:file-type-json',
+    xml: 'vscode-icons:file-type-xml',
+    yaml: 'vscode-icons:file-type-yaml',
+    yml: 'vscode-icons:file-type-yaml',
+    properties: 'vscode-icons:file-type-yaml',
+
+    // 文档文件
+    md: 'vscode-icons:file-type-markdown',
+    txt: 'vscode-icons:file-type-text',
+    pdf: 'vscode-icons:file-type-pdf2',
+
+    // 数据库文件
+    sql: 'vscode-icons:file-type-sql',
+  };
+
+  return extensionIconMap[extension] || 'vscode-icons:default-file';
+};
+
+// 当前选中文件的语言类型
+const currentLanguage = computed<CodeLanguage>(() => {
+  if (!selectedFile.value) return 'text';
+  return getCodeLanguage(selectedFile.value);
+});
+
+/**
+ * 复制代码
+ */
+const copyCode = async () => {
+  if (!selectedFileContent.value) return;
+
+  try {
+    // 检查是否支持现代剪贴板 API
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      await navigator.clipboard.writeText(selectedFileContent.value);
+      ElMessage.success('代码已复制到剪贴板');
+    } else {
+      // 降级到传统的复制方法
+      fallbackCopyTextToClipboard(selectedFileContent.value);
+    }
+  } catch (error) {
+    console.error('复制失败:', error);
+    // 如果现代 API 失败，尝试降级方法
+    try {
+      fallbackCopyTextToClipboard(selectedFileContent.value);
+    } catch (fallbackError) {
+      console.error('降级复制也失败:', fallbackError);
+      ElMessage.error('复制失败，请手动复制');
+    }
+  }
+};
+
+/**
+ * 降级复制方法（兼容旧浏览器）
+ */
+const fallbackCopyTextToClipboard = (text: string) => {
+  const textArea = document.createElement('textarea');
+  textArea.value = text;
+
+  // 避免滚动到底部
+  textArea.style.top = '0';
+  textArea.style.left = '0';
+  textArea.style.position = 'fixed';
+  textArea.style.opacity = '0';
+
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+
+  try {
+    const successful = document.execCommand('copy');
+    if (successful) {
+      ElMessage.success('代码已复制到剪贴板');
+    } else {
+      throw new Error('execCommand 复制失败');
+    }
+  } catch (err) {
+    console.error('降级复制失败:', err);
+    throw err;
+  } finally {
+    document.body.removeChild(textArea);
+  }
+};
+
+/**
+ * 确认生成
+ */
+const handleGenerate = () => {
+  emit('generate', { ...generateConfig });
+  handleClose();
+};
+
+/**
+ * 开始拖拽调整左侧面板宽度
+ */
+const startResize = (event: MouseEvent) => {
+  isDragging.value = true;
+  dragStartX.value = event.clientX;
+  dragStartWidth.value = leftPanelWidth.value;
+
+  document.body.style.cursor = 'col-resize';
+  document.body.style.userSelect = 'none';
+
+  document.addEventListener('mousemove', handleResize);
+  document.addEventListener('mouseup', stopResize);
+
+  event.preventDefault();
+};
+
+/**
+ * 处理拖拽过程
+ */
+const handleResize = (event: MouseEvent) => {
+  if (!isDragging.value) return;
+
+  const deltaX = event.clientX - dragStartX.value;
+  const newWidth = dragStartWidth.value + deltaX;
+
+  // 限制最小和最大宽度
+  const minWidth = 200;
+  const maxWidth = window.innerWidth * 0.6; // 最大60%的窗口宽度
+
+  if (newWidth >= minWidth && newWidth <= maxWidth) {
+    leftPanelWidth.value = newWidth;
+  }
+};
+
+/**
+ * 停止拖拽
+ */
+const stopResize = () => {
+  isDragging.value = false;
+  document.body.style.cursor = '';
+  document.body.style.userSelect = '';
+
+  document.removeEventListener('mousemove', handleResize);
+  document.removeEventListener('mouseup', stopResize);
+};
+
+/**
+ * 开始拖拽调整配置区域宽度
+ */
+const startConfigResize = (event: MouseEvent) => {
+  isConfigDragging.value = true;
+  configDragStartX.value = event.clientX;
+  configDragStartWidth.value =
+    configLeftWidth.value || computedConfigWidths.value.leftWidth;
+
+  document.body.style.cursor = 'col-resize';
+  document.body.style.userSelect = 'none';
+
+  document.addEventListener('mousemove', handleConfigResize);
+  document.addEventListener('mouseup', stopConfigResize);
+
+  event.preventDefault();
+};
+
+/**
+ * 处理配置区域拖拽过程
+ */
+const handleConfigResize = (event: MouseEvent) => {
+  if (!isConfigDragging.value) return;
+
+  const deltaX = event.clientX - configDragStartX.value;
+  const newWidth = configDragStartWidth.value + deltaX;
+
+  // 限制最小和最大宽度
+  const minWidth = 550; // 最小宽度，确保表单项能正常显示
+  const maxWidth = window.innerWidth * 0.75; // 最大75%的窗口宽度
+
+  if (newWidth >= minWidth && newWidth <= maxWidth) {
+    configLeftWidth.value = newWidth;
+  }
+};
+
+/**
+ * 停止配置区域拖拽
+ */
+const stopConfigResize = () => {
+  isConfigDragging.value = false;
+  document.body.style.cursor = '';
+  document.body.style.userSelect = '';
+
+  document.removeEventListener('mousemove', handleConfigResize);
+  document.removeEventListener('mouseup', stopConfigResize);
+};
+
+/**
+ * 关闭弹窗
+ */
+const handleClose = () => {
+  visible.value = false;
+  previewResult.value = null;
+  selectedFile.value = '';
+  selectedFileContent.value = '';
+
+  // 清理拖拽状态
+  if (isDragging.value) {
+    stopResize();
+  }
+  if (isConfigDragging.value) {
+    stopConfigResize();
+  }
+  // 重置面板宽度
+  leftPanelWidth.value = 300;
+  configLeftWidth.value = 0;
+};
+
+/**
+ * 处理窗口大小变化
+ */
+const handleWindowResize = () => {
+  windowWidth.value = window.innerWidth;
+};
+
+/**
+ * 组件挂载时的初始化
+ */
+onMounted(() => {
+  window.addEventListener('resize', handleWindowResize);
+});
+
+/**
+ * 组件卸载时的清理
+ */
+onUnmounted(() => {
+  window.removeEventListener('resize', handleWindowResize);
+});
+</script>
+
+<template>
+  <Dialog
+    v-model="visible"
+    title="代码预览"
+    width="95%"
+    :before-close="handleClose"
+    fullscreen
+  >
+    <div class="flex h-full min-h-[600px] flex-col">
+      <!-- 配置表单区域 -->
+      <div
+        class="config-header mb-4 rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800"
+      >
+        <div class="config-content relative flex items-center p-6">
+          <!-- 左侧配置区域 -->
+          <div
+            class="config-left"
+            :style="{ width: `${computedConfigWidths.leftWidth}px` }"
+          >
+            <el-form
+              :model="generateConfig"
+              :rules="configRules"
+              ref="configFormRef"
+              class="config-form"
+            >
+              <!-- 第一行 -->
+              <div class="form-row">
+                <el-form-item label="表名" prop="tableName">
+                  <el-input
+                    v-model="generateConfig.tableName"
+                    placeholder="udp_sys_sys_job_log"
+                    readonly
+                  />
+                </el-form-item>
+
+                <el-form-item label="模块名" prop="moduleName">
+                  <el-input
+                    v-model="generateConfig.moduleName"
+                    placeholder="admin"
+                  />
+                </el-form-item>
+
+                <el-form-item label="结构类型" prop="tableType">
+                  <el-select
+                    v-model="generateConfig.tableType"
+                    placeholder="单表"
+                    :show-arrow="false"
+                  >
+                    <el-option label="单表" value="SINGLE" />
+                    <!-- <el-option label="树表" value="tree" /> -->
+                    <!-- <el-option label="主子表" value="main_sub" /> -->
+                  </el-select>
+                </el-form-item>
+              </div>
+              <!-- 第二行 -->
+              <div class="form-row">
+                <el-form-item label="包名" prop="packageName">
+                  <el-input
+                    v-model="generateConfig.packageName"
+                    placeholder="com.example"
+                  />
+                </el-form-item>
+                <el-form-item label="作者" prop="author">
+                  <el-input
+                    v-model="generateConfig.author"
+                    placeholder="admin"
+                  />
+                </el-form-item>
+
+                <el-form-item label="生成类型" prop="generateType">
+                  <el-select
+                    v-model="generateConfig.generateType"
+                    placeholder="生成zip包"
+                    :show-arrow="false"
+                  >
+                    <el-option label="生成zip包" value="zip" />
+                    <!-- <el-option label="直接生成到项目" value="project" /> -->
+                  </el-select>
+                </el-form-item>
+
+                <el-button
+                  type="primary"
+                  :loading="previewing"
+                  @click="handlePreview"
+                  class="generate-btn"
+                >
+                  {{ previewing ? '预览中...' : '一键生成' }}
+                </el-button>
+              </div>
+            </el-form>
+          </div>
+
+          <!-- 配置区域分割线 -->
+          <div
+            class="config-resize-handle"
+            @mousedown="startConfigResize"
+          ></div>
+
+          <!-- 右侧预览区域 -->
+          <!-- <div
+            class="config-right"
+            :style="{ width: `${computedConfigWidths.rightWidth}px` }"
+          >
+            <div class="preview-modes"> -->
+              <!-- PC模式预览 -->
+              <!-- <div class="preview-mode-item">
+                <div class="mode-demo">
+                  <Icon name="ant-design:desktop-outlined" size="24" />
+                </div>
+                <div class="mode-title">PC样式预览</div>
+              </div> -->
+
+              <!-- 移动端模式预览 -->
+              <!-- <div class="preview-mode-item">
+                <div class="mode-demo mobile">
+                  <Icon name="ant-design:mobile-outlined" size="24" />
+                </div>
+                <div class="mode-title">移动端模式预览</div>
+              </div>
+            </div>
+          </div> -->
+        </div>
+      </div>
+
+      <!-- 预览内容区域 -->
+      <div class="relative flex h-full min-h-0 flex-1">
+        <div class="file-tree" :style="{ width: `${leftPanelWidth}px` }">
+          <el-card>
+            <template #header>
+              <span class="card-title">文件结构</span>
+            </template>
+
+            <div
+              v-if="
+                !previewResult ||
+                !previewResult.files ||
+                Object.keys(previewResult.files).length === 0
+              "
+              class="flex min-h-[300px] flex-1 items-center justify-center bg-gray-50 dark:bg-gray-900"
+            >
+              <el-empty description='点击"生成预览"查看代码文件' />
+            </div>
+
+            <el-tree
+              v-else
+              :data="fileTreeData"
+              :props="{ children: 'children', label: 'label' }"
+              :default-expand-all="true"
+              @node-click="handleFileSelect"
+              class="file-tree-list"
+            >
+              <template #default="{ node, data }">
+                <span
+                  class="flex min-h-[28px] cursor-pointer items-center gap-2 rounded p-[6px_8px] transition-colors hover:bg-gray-100 dark:hover:bg-gray-800"
+                  :class="{
+                    'bg-blue-50 text-blue-500 dark:bg-gray-800 dark:text-blue-400':
+                      selectedFile === data.path,
+                  }"
+                >
+                  <Icon
+                    :name="getFileIcon(node.label, data.isFile)"
+                    :class="
+                      data.isFile
+                        ? 'h-4 w-4 flex-shrink-0'
+                        : 'h-4 w-4 flex-shrink-0 text-yellow-500'
+                    "
+                    size="16"
+                  />
+                  <span
+                    class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm"
+                    >{{ node.label }}</span
+                  >
+                </span>
+              </template>
+            </el-tree>
+          </el-card>
+        </div>
+
+        <!-- 拖拽分隔线 -->
+        <div class="resize-handle" @mousedown="startResize"></div>
+
+        <div
+          class="code-editor"
+          :style="{ width: `calc(100% - ${leftPanelWidth}px - 6px)` }"
+        >
+          <el-card>
+            <template #header>
+              <div class="flex items-center justify-between">
+                <span class="card-title">
+                  {{ selectedFile || '请选择文件查看代码' }}
+                </span>
+                <div class="flex items-center gap-2">
+                  <el-tag v-if="selectedFile" type="info" size="small">
+                    {{ currentLanguage.toUpperCase() }}
+                  </el-tag>
+                  <el-button
+                    v-if="selectedFileContent"
+                    size="small"
+                    @click="copyCode"
+                  >
+                    <Icon name="ant-design:copy-outlined" class="mr-1" />
+                    复制代码
+                  </el-button>
+                </div>
+              </div>
+            </template>
+
+            <div
+              v-if="!selectedFileContent"
+              class="flex min-h-[300px] flex-1 items-center justify-center bg-gray-50 dark:bg-gray-900"
+            >
+              <el-empty description="请从左侧文件树选择文件查看代码内容" />
+            </div>
+
+            <div v-else class="code-editor-wrapper overflow-y-auto">
+              <CodeEditor
+                :model-value="selectedFileContent"
+                :language="currentLanguage"
+                :read-only="true"
+                height="100%"
+                width="100%"
+              />
+            </div>
+          </el-card>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <el-button @click="handleClose">关闭</el-button>
+      <el-button
+        type="primary"
+        :disabled="!previewResult"
+        @click="handleGenerate"
+      >
+        确认生成
+      </el-button>
+    </template>
+  </Dialog>
+</template>
+
+<style scoped>
+.config-card {
+  margin-bottom: 16px;
+  flex-shrink: 0;
+}
+
+.config-header {
+  flex-shrink: 0;
+}
+
+.config-left {
+  flex-shrink: 0;
+  min-width: 550px;
+  max-width: 75vw;
+}
+.dark .config-left {
+  :deep(.el-form-item__label) {
+    color: #d1d5db;
+  }
+}
+
+.config-resize-handle {
+  width: 6px;
+  height: 80px;
+  background: transparent;
+  cursor: col-resize;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 8px;
+}
+
+.config-resize-handle:hover {
+  background: #e6f4ff;
+  border-radius: 3px;
+}
+
+.config-resize-handle::before {
+  content: '⋮⋮';
+  font-size: 14px;
+  color: #bbb;
+  letter-spacing: -2px;
+  transform: rotate(90deg);
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.config-resize-handle:hover::before {
+  opacity: 1;
+  color: #1890ff;
+}
+
+.config-right {
+  flex-shrink: 0;
+  min-width: 280px;
+  max-width: 450px;
+  display: flex;
+  align-items: center;
+}
+
+.config-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+}
+
+.form-row {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+
+.form-row :deep(.el-form-item) {
+  margin-bottom: 0;
+  margin-right: 0;
+  flex: 0 0 auto;
+}
+
+.form-row :deep(.el-form-item__label) {
+  font-size: 14px;
+  color: #495057;
+  font-weight: 500;
+  line-height: 32px;
+  padding-right: 12px;
+  min-width: 70px;
+  white-space: nowrap;
+}
+
+.form-row :deep(.el-input) {
+  width: 170px;
+}
+
+.form-row :deep(.el-select) {
+  width: 150px;
+}
+
+.generate-btn {
+  margin-left: 24px;
+  height: 32px;
+  padding: 0 24px;
+  font-weight: 500;
+}
+
+.preview-modes {
+  display: flex;
+  gap: 20px;
+  width: 100%;
+  justify-content: center;
+}
+
+.preview-mode-item {
+  flex: 0 0 auto;
+  text-align: center;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+  min-width: 90px;
+}
+
+.preview-mode-item:hover {
+  transform: translateY(-2px);
+}
+
+.mode-demo {
+  width: 90px;
+  height: 65px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  margin: 0 auto 10px auto;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.mode-demo.mobile {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+.mode-title {
+  font-size: 14px;
+  color: #495057;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+.dark .mode-title {
+  color: #d1d5db;
+}
+
+.card-title {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.file-tree {
+  min-width: 200px;
+  max-width: 60vw;
+  height: 100%;
+  flex-shrink: 0;
+}
+
+.resize-handle {
+  width: 6px;
+  height: 100%;
+  background: transparent;
+  cursor: col-resize;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 10;
+}
+
+.resize-handle:hover {
+  background: #e6f4ff;
+}
+
+.resize-handle:hover::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 2px;
+  height: 30px;
+  background: #1890ff;
+  border-radius: 1px;
+}
+
+.resize-handle:active {
+  background: #bae0ff;
+}
+
+.code-editor {
+  flex: 1;
+  height: 100%;
+  min-width: 0;
+}
+
+.file-tree :deep(.el-card),
+.code-editor :deep(.el-card) {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.file-tree :deep(.el-card__body),
+.code-editor :deep(.el-card__body) {
+  flex: 1;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.file-tree-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  min-height: 0;
+}
+</style>