fdb2 1.0.0

package/src/platform/database/components/data-import-export.vue

@@ -0,0 +1,1602 @@
+<template>
+  <div class="data-import-export">
+    <div class="import-export-header">
+      <div class="header-title">
+        <i class="bi bi-arrow-left-right"></i>
+        <span>数据导入导出</span>
+      </div>
+      <div class="header-tabs">
+        <button 
+          class="tab-btn"
+          :class="{ active: activeTab === 'import' }"
+          @click="activeTab = 'import'"
+        >
+          <i class="bi bi-download"></i>
+          <span>数据导入</span>
+        </button>
+        <button 
+          class="tab-btn"
+          :class="{ active: activeTab === 'export' }"
+          @click="activeTab = 'export'"
+        >
+          <i class="bi bi-upload"></i>
+          <span>数据导出</span>
+        </button>
+      </div>
+    </div>
+
+    <div class="import-export-content">
+      <!-- 数据导入 -->
+      <div class="import-section" v-if="activeTab === 'import'">
+        <div class="step-indicator">
+          <div class="step" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
+            <span class="step-number">1</span>
+            <span class="step-title">选择文件</span>
+          </div>
+          <div class="step" :class="{ active: currentStep >= 2, completed: currentStep > 2 }">
+            <span class="step-number">2</span>
+            <span class="step-title">配置选项</span>
+          </div>
+          <div class="step" :class="{ active: currentStep >= 3, completed: currentStep > 3 }">
+            <span class="step-number">3</span>
+            <span class="step-title">预览数据</span>
+          </div>
+          <div class="step" :class="{ active: currentStep >= 4 }">
+            <span class="step-number">4</span>
+            <span class="step-title">执行导入</span>
+          </div>
+        </div>
+
+        <!-- 步骤1: 选择文件 -->
+        <div class="step-content" v-if="currentStep === 1">
+          <div class="file-upload-area" :class="{ 'drag-over': isDragOver }" 
+               @drop="handleDrop" 
+               @dragover.prevent="isDragOver = true" 
+               @dragleave="isDragOver = false">
+            <div class="upload-icon">
+              <i class="bi bi-cloud-upload"></i>
+            </div>
+            <h3>拖拽文件到此处或点击选择</h3>
+            <p>支持 CSV、Excel (xlsx)、JSON 格式</p>
+            <input type="file" ref="fileInput" @change="handleFileSelect" accept=".csv,.xlsx,.json" hidden>
+            <button class="btn-select-file" @click="fileInput?.click()">
+              <i class="bi bi-folder2-open"></i>
+              <span>选择文件</span>
+            </button>
+          </div>
+          
+          <div class="selected-files" v-if="selectedFiles.length > 0">
+            <h4>已选择的文件:</h4>
+            <div class="file-list">
+              <div class="file-item" v-for="(file, index) in selectedFiles" :key="index">
+                <div class="file-icon">
+                  <i :class="getFileIcon(file.name)"></i>
+                </div>
+                <div class="file-info">
+                  <div class="file-name">{{ file.name }}</div>
+                  <div class="file-size">{{ formatFileSize(file.size) }}</div>
+                </div>
+                <button class="btn-remove-file" @click="removeFile(index)">
+                  <i class="bi bi-x"></i>
+                </button>
+              </div>
+            </div>
+            <button class="btn-next" @click="nextStep" :disabled="selectedFiles.length === 0">
+              下一步
+              <i class="bi bi-arrow-right"></i>
+            </button>
+          </div>
+        </div>
+
+        <!-- 步骤2: 配置选项 -->
+        <div class="step-content" v-if="currentStep === 2">
+          <div class="config-form">
+            <div class="form-section">
+              <h4>目标表配置</h4>
+              <div class="form-grid">
+                <div class="form-group">
+                  <label>数据库连接</label>
+                  <select v-model="importConfig.connectionId" class="form-input">
+                    <option value="">选择连接</option>
+                    <option v-for="connection in connections" :key="connection.id" :value="connection.id">
+                      {{ connection.name }}
+                    </option>
+                  </select>
+                </div>
+                <div class="form-group">
+                  <label>目标表</label>
+                  <select v-model="importConfig.tableName" class="form-input" :disabled="!importConfig.connectionId">
+                    <option value="">选择表</option>
+                    <option v-for="table in tables" :key="table" :value="table">
+                      {{ table }}
+                    </option>
+                  </select>
+                </div>
+              </div>
+            </div>
+
+            <div class="form-section">
+              <h4>导入选项</h4>
+              <div class="form-grid">
+                <div class="form-group">
+                  <label>导入模式</label>
+                  <select v-model="importConfig.mode" class="form-input">
+                    <option value="insert">插入新数据</option>
+                    <option value="replace">替换表数据</option>
+                    <option value="update">更新现有数据</option>
+                    <option value="append">追加数据</option>
+                  </select>
+                </div>
+                <div class="form-group">
+                  <label>编码格式</label>
+                  <select v-model="importConfig.encoding" class="form-input">
+                    <option value="utf-8">UTF-8</option>
+                    <option value="gbk">GBK</option>
+                    <option value="latin1">Latin1</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+
+            <div class="form-section">
+              <h4>CSV/Excel 选项</h4>
+              <div class="form-grid">
+                <div class="form-group">
+                  <label>分隔符</label>
+                  <select v-model="importConfig.delimiter" class="form-input">
+                    <option value=",">逗号 (,)</option>
+                    <option value=";">分号 (;)</option>
+                    <option value="\t">制表符 (Tab)</option>
+                    <option value="|">竖线 (|)</option>
+                  </select>
+                </div>
+                <div class="form-group">
+                  <label>首行是否为标题</label>
+                  <div class="checkbox-group">
+                    <input type="checkbox" id="hasHeader" v-model="importConfig.hasHeader">
+                    <label for="hasHeader">首行是列标题</label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="step-actions">
+            <button class="btn-prev" @click="prevStep">
+              <i class="bi bi-arrow-left"></i>
+              上一步
+            </button>
+            <button class="btn-next" @click="nextStep" :disabled="!isConfigValid">
+              下一步
+              <i class="bi bi-arrow-right"></i>
+            </button>
+          </div>
+        </div>
+
+        <!-- 步骤3: 预览数据 -->
+        <div class="step-content" v-if="currentStep === 3">
+          <div class="preview-section">
+            <div class="preview-header">
+              <h4>数据预览</h4>
+              <div class="preview-info">
+                <span>显示前 {{ previewData.length }} 行数据</span>
+                <button class="btn-load-more" @click="loadPreviewData" v-if="hasMoreData">
+                  加载更多
+                </button>
+              </div>
+            </div>
+            
+            <div class="preview-table-wrapper">
+              <table class="preview-table">
+                <thead>
+                  <tr>
+                    <th v-for="column in previewColumns" :key="column">
+                      {{ column }}
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(row, index) in previewData" :key="index">
+                    <td v-for="column in previewColumns" :key="column">
+                      {{ row[column] }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <div class="step-actions">
+            <button class="btn-prev" @click="prevStep">
+              <i class="bi bi-arrow-left"></i>
+              上一步
+            </button>
+            <button class="btn-next" @click="nextStep">
+              下一步
+              <i class="bi bi-arrow-right"></i>
+            </button>
+          </div>
+        </div>
+
+        <!-- 步骤4: 执行导入 -->
+        <div class="step-content" v-if="currentStep === 4">
+          <div class="import-progress">
+            <div class="progress-header">
+              <h4>正在导入数据</h4>
+              <div class="progress-stats">
+                <span>{{ importProgress.current }} / {{ importProgress.total }}</span>
+                <span>{{ Math.round((importProgress.current / importProgress.total) * 100) }}%</span>
+              </div>
+            </div>
+            
+            <div class="progress-bar">
+              <div class="progress-fill" :style="{ width: (importProgress.current / importProgress.total) * 100 + '%' }"></div>
+            </div>
+            
+            <div class="progress-details" v-if="importProgress.message">
+              <p>{{ importProgress.message }}</p>
+            </div>
+            
+            <div class="import-result" v-if="importComplete">
+              <div class="result-icon">
+                <i class="bi bi-check-circle"></i>
+              </div>
+              <h5>导入完成!</h5>
+              <p>成功导入 {{ importResult.success }} 条记录，失败 {{ importResult.failed }} 条</p>
+              <button class="btn-view-details" @click="showImportDetails = true">
+                查看详细信息
+              </button>
+            </div>
+          </div>
+
+          <div class="step-actions" v-if="importComplete">
+            <button class="btn-new-import" @click="resetImport">
+              <i class="bi bi-plus-circle"></i>
+              新建导入
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 数据导出 -->
+      <div class="export-section" v-if="activeTab === 'export'">
+        <div class="export-form">
+          <div class="form-section">
+            <h4>数据源配置</h4>
+            <div class="form-grid">
+              <div class="form-group">
+                <label>数据库连接</label>
+                <select v-model="exportConfig.connectionId" @change="loadTables" class="form-input">
+                  <option value="">选择连接</option>
+                  <option v-for="connection in connections" :key="connection.id" :value="connection.id">
+                    {{ connection.name }}
+                  </option>
+                </select>
+              </div>
+              <div class="form-group">
+                <label>表名</label>
+                <select v-model="exportConfig.tableName" class="form-input" :disabled="!exportConfig.connectionId">
+                  <option value="">选择表</option>
+                  <option v-for="table in tables" :key="table" :value="table">
+                    {{ table }}
+                  </option>
+                </select>
+              </div>
+            </div>
+          </div>
+
+          <div class="form-section">
+            <h4>导出选项</h4>
+            <div class="form-grid">
+              <div class="form-group">
+                <label>导出格式</label>
+                <select v-model="exportConfig.format" class="form-input">
+                  <option value="csv">CSV</option>
+                  <option value="xlsx">Excel</option>
+                  <option value="json">JSON</option>
+                  <option value="sql">SQL</option>
+                </select>
+              </div>
+              <div class="form-group">
+                <label>编码格式</label>
+                <select v-model="exportConfig.encoding" class="form-input">
+                  <option value="utf-8">UTF-8</option>
+                  <option value="gbk">GBK</option>
+                </select>
+              </div>
+            </div>
+          </div>
+
+          <div class="form-section">
+            <h4>数据筛选</h4>
+            <div class="form-group">
+              <label>WHERE 条件 (可选)</label>
+              <textarea 
+                v-model="exportConfig.whereCondition" 
+                class="form-textarea" 
+                placeholder="例如: created_at > '2024-01-01' AND status = 'active'"
+                rows="3"
+              ></textarea>
+            </div>
+            <div class="form-grid">
+              <div class="form-group">
+                <label>限制行数</label>
+                <input type="number" v-model="exportConfig.limit" class="form-input" placeholder="0表示无限制">
+              </div>
+              <div class="form-group">
+                <label>排序字段</label>
+                <input type="text" v-model="exportConfig.orderBy" class="form-input" placeholder="例如: id DESC">
+              </div>
+            </div>
+          </div>
+
+          <div class="form-section">
+            <h4>列选择</h4>
+            <div class="columns-selection">
+              <div class="selection-header">
+                <div class="checkbox-group">
+                  <input type="checkbox" id="selectAll" v-model="selectAllColumns" @change="toggleAllColumns">
+                  <label for="selectAll">全选</label>
+                </div>
+                <span>{{ selectedColumns.length }} / {{ availableColumns.length }} 列已选择</span>
+              </div>
+              <div class="columns-grid">
+                <div class="column-item" v-for="column in availableColumns" :key="column">
+                  <div class="checkbox-group">
+                    <input 
+                      type="checkbox" 
+                      :id="column" 
+                      :value="column"
+                      v-model="selectedColumns"
+                    >
+                    <label :for="column">{{ column }}</label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="export-actions">
+            <button class="btn-preview" @click="previewExport" :disabled="!isExportConfigValid">
+              <i class="bi bi-eye"></i>
+              预览数据
+            </button>
+            <button class="btn-export" @click="startExport" :disabled="!isExportConfigValid || isExporting">
+              <i class="bi bi-download" v-if="!isExporting"></i>
+              <i class="bi bi-arrow-clockwise spin" v-if="isExporting"></i>
+              <span v-if="!isExporting">开始导出</span>
+              <span v-if="isExporting">导出中...</span>
+            </button>
+          </div>
+        </div>
+
+        <!-- 导出预览 -->
+        <div class="export-preview" v-if="exportPreview.length > 0">
+          <div class="preview-header">
+            <h4>导出预览</h4>
+            <div class="preview-info">
+              <span>共 {{ exportTotalCount }} 条记录</span>
+              <button class="btn-close-preview" @click="closePreview">
+                <i class="bi bi-x"></i>
+              </button>
+            </div>
+          </div>
+          
+          <div class="preview-table-wrapper">
+            <table class="preview-table">
+              <thead>
+                <tr>
+                  <th v-for="column in selectedColumns" :key="column">
+                    {{ column }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(row, index) in exportPreview" :key="index">
+                  <td v-for="column in selectedColumns" :key="column">
+                    {{ row[column] }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted } from 'vue';
+import { ConnectionService } from '@/service/database';
+import type { ConnectionEntity } from '@/typings/database';
+import { exportDataToCSV, exportDataToJSON, exportDataToExcel, exportDataToSQL } from '../utils/export';
+import { readExcel, decodeBook } from '@/utils/xlsx';
+import { toast } from '@/utils/toast';
+
+const connectionService = new ConnectionService();
+
+// 响应式数据
+const activeTab = ref('import');
+const currentStep = ref(1);
+const selectedFiles = ref<File[]>([]);
+const fileInput = ref<HTMLInputElement | null>(null);
+const isDragOver = ref(false);
+const connections = ref<ConnectionEntity[]>([]);
+const tables = ref<string[]>([]);
+
+// 导入配置
+const importConfig = ref({
+  connectionId: '',
+  tableName: '',
+  mode: 'insert',
+  encoding: 'utf-8',
+  delimiter: ',',
+  hasHeader: true
+});
+
+// 导出配置
+const exportConfig = ref({
+  connectionId: '',
+  tableName: '',
+  format: 'csv',
+  encoding: 'utf-8',
+  whereCondition: '',
+  limit: 0,
+  orderBy: ''
+});
+
+// 预览数据
+const previewData = ref<any[]>([]);
+const previewColumns = ref<string[]>([]);
+const hasMoreData = ref(false);
+
+// 导入进度
+const importProgress = ref({
+  current: 0,
+  total: 0,
+  message: '',
+  status: 'pending' // pending, processing, completed, error
+});
+
+const importComplete = ref(false);
+const importResult = ref({
+  success: 0,
+  failed: 0,
+  errors: [] as string[]
+});
+
+// 导出进度
+const exportProgress = ref({
+  current: 0,
+  total: 0,
+  message: '',
+  status: 'pending'
+});
+
+const exportComplete = ref(false);
+const exportResult = ref({
+  success: 0,
+  failed: 0,
+  fileUrl: ''
+});
+
+// 导出相关
+const availableColumns = ref<string[]>([]);
+const selectedColumns = ref<string[]>([]);
+const exportPreview = ref<any[]>([]);
+const exportTotalCount = ref(0);
+const isExporting = ref(false);
+const showImportDetails = ref(false);
+const showExportDetails = ref(false);
+
+// 计算属性
+const selectAllColumns = computed({
+  get: () => selectedColumns.value.length === availableColumns.value.length && availableColumns.value.length > 0,
+  set: (value: boolean) => {
+    if (value) {
+      selectedColumns.value = [...availableColumns.value];
+    } else {
+      selectedColumns.value = [];
+    }
+  }
+});
+
+const isConfigValid = computed(() => {
+  return importConfig.value.connectionId && 
+         importConfig.value.tableName && 
+         selectedFiles.value.length > 0;
+});
+
+const isExportConfigValid = computed(() => {
+  return exportConfig.value.connectionId && 
+         exportConfig.value.tableName && 
+         selectedColumns.value.length > 0;
+});
+
+// 方法
+async function loadConnections() {
+  try {
+    const response = await connectionService.getAllConnections();
+    connections.value = response || [];
+  } catch (error) {
+    console.error('加载连接失败:', error);
+    const errorMessage = error instanceof Error ? error.message : '未知错误';
+    toast.error(`加载连接失败: ${errorMessage}`);
+  }
+}
+
+async function loadTables() {
+  if (!exportConfig.value.connectionId) return;
+  
+  try {
+    // 模拟加载表列表
+    tables.value = ['users', 'orders', 'products', 'categories', 'reviews'];
+    availableColumns.value = ['id', 'name', 'email', 'created_at', 'updated_at'];
+    selectedColumns.value = [...availableColumns.value];
+  } catch (error) {
+    console.error('加载表列表失败:', error);
+  }
+}
+
+function handleFileSelect(event: Event) {
+  const files = (event.target as HTMLInputElement).files;
+  if (files) {
+    selectedFiles.value = Array.from(files);
+  }
+}
+
+function handleDrop(event: DragEvent) {
+  event.preventDefault();
+  isDragOver.value = false;
+  
+  const files = event.dataTransfer?.files;
+  if (files) {
+    selectedFiles.value = Array.from(files);
+  }
+}
+
+function removeFile(index: number) {
+  selectedFiles.value.splice(index, 1);
+}
+
+function getFileIcon(filename: string): string {
+  const ext = filename.split('.').pop()?.toLowerCase();
+  switch (ext) {
+    case 'csv': return 'bi-file-earmark-spreadsheet';
+    case 'xlsx': return 'bi-file-earmark-excel';
+    case 'json': return 'bi-file-earmark-code';
+    default: return 'bi-file-earmark';
+  }
+}
+
+// 文件解析方法
+async function parseCSVFile(file: File): Promise<any[]> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const content = e.target?.result as string;
+        const lines = content.split('\n').filter(line => line.trim());
+        const delimiter = importConfig.value.delimiter;
+        const hasHeader = importConfig.value.hasHeader;
+        
+        const data: any[] = [];
+        let headers: string[] = [];
+        
+        if (hasHeader && lines.length > 0 && lines[0]) {
+          headers = lines[0].split(delimiter).map(header => header.trim().replace(/^"|"$/g, ''));
+          lines.slice(1).forEach(line => {
+            const values = line.split(delimiter).map(value => value.trim().replace(/^"|"$/g, ''));
+            const row: any = {};
+            headers.forEach((header, index) => {
+              row[header] = values[index] || '';
+            });
+            data.push(row);
+          });
+        } else {
+          lines.forEach(line => {
+            const values = line.split(delimiter).map(value => value.trim().replace(/^"|"$/g, ''));
+            const row: any = {};
+            values.forEach((value, index) => {
+              row[`列${index + 1}`] = value;
+            });
+            data.push(row);
+          });
+        }
+        
+        resolve(data);
+      } catch (error) {
+        reject(error);
+      }
+    };
+    reader.onerror = reject;
+    reader.readAsText(file, importConfig.value.encoding);
+  });
+}
+
+async function parseExcelFile(file: File): Promise<any[]> {
+  try {
+    const book = await readExcel(file);
+    const decoded = decodeBook(book);
+    if (decoded.sheets.length > 0) {
+      // 提取第一个工作表的数据
+      const sheet = decoded.sheets[0];
+      const data: any[] = [];
+      const headers = Object.values(sheet.cols || {});
+      
+      sheet.data.forEach(row => {
+        const formattedRow: any = {};
+        Object.keys(row).forEach(key => {
+          const colIndex = parseInt(key.replace(/[^0-9]/g, ''));
+          const header = headers[colIndex];
+          if (header !== undefined) {
+            formattedRow[header] = row[key];
+          }
+        });
+        data.push(formattedRow);
+      });
+      
+      return data;
+    }
+    return [];
+  } catch (error) {
+    console.error('解析Excel文件失败:', error);
+    toast.error(`解析Excel文件失败: ${error instanceof Error ? error.message : '未知错误'}`);
+    return [];
+  }
+}
+
+async function parseJSONFile(file: File): Promise<any[]> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const content = e.target?.result as string;
+        const data = JSON.parse(content);
+        resolve(Array.isArray(data) ? data : [data]);
+      } catch (error) {
+        reject(error);
+      }
+    };
+    reader.onerror = reject;
+    reader.readAsText(file, 'utf-8');
+  });
+}
+
+async function parseFile(file: File): Promise<any[]> {
+  const fileName = file.name.toLowerCase();
+  
+  try {
+    if (fileName.endsWith('.csv')) {
+      return await parseCSVFile(file);
+    } else if (fileName.endsWith('.xlsx') || fileName.endsWith('.xls')) {
+      return await parseExcelFile(file);
+    } else if (fileName.endsWith('.json')) {
+      return await parseJSONFile(file);
+    } else {
+      throw new Error('不支持的文件格式');
+    }
+  } catch (error) {
+    console.error('解析文件失败:', error);
+    toast.error(`解析文件失败: ${error instanceof Error ? error.message : '未知错误'}`);
+    return [];
+  }
+}
+
+// 开始导入
+async function startImport() {
+  if (selectedFiles.value.length === 0 || !importConfig.value.connectionId || !importConfig.value.tableName) {
+    toast.error('请选择文件并配置导入选项');
+    return;
+  }
+  
+  try {
+    const file = selectedFiles.value[0];
+    if (!file) {
+      toast.error('请选择文件');
+      return;
+    }
+    const data = await parseFile(file);
+    
+    importProgress.value.total = data.length;
+    importProgress.value.current = 0;
+    importProgress.value.message = '正在准备导入...';
+    importProgress.value.status = 'processing';
+    importComplete.value = false;
+    importResult.value = { success: 0, failed: 0, errors: [] };
+    
+    // 模拟导入过程
+    for (let i = 0; i < data.length; i++) {
+      // 模拟插入延迟
+      await new Promise(resolve => setTimeout(resolve, 50));
+      
+      importProgress.value.current = i + 1;
+      importProgress.value.message = `正在导入第 ${i + 1} 条记录...`;
+      
+      // 模拟成功/失败的概率
+      const isSuccess = Math.random() > 0.05; // 95%成功率
+      if (isSuccess) {
+        importResult.value.success++;
+      } else {
+        importResult.value.failed++;
+        importResult.value.errors.push(`第 ${i + 1} 条记录导入失败`);
+      }
+    }
+    
+    importProgress.value.status = 'completed';
+    importComplete.value = true;
+    importProgress.value.message = '导入完成';
+    
+    toast.success(`成功导入 ${importResult.value.success} 条记录，失败 ${importResult.value.failed} 条`);
+  } catch (error) {
+    importProgress.value.status = 'error';
+    importProgress.value.message = '导入失败';
+    toast.error(`导入失败: ${error instanceof Error ? error.message : '未知错误'}`);
+  }
+}
+
+// 加载预览数据
+async function loadPreviewData() {
+  if (selectedFiles.value.length === 0) return;
+  
+  try {
+    const file = selectedFiles.value[0];
+    const data = await parseFile(file);
+    
+    // 只显示前100行作为预览
+    const previewCount = 100;
+    previewData.value = data.slice(0, previewCount);
+    hasMoreData.value = data.length > previewCount;
+    
+    // 提取列名
+    if (previewData.value.length > 0) {
+      previewColumns.value = Object.keys(previewData.value[0]);
+    } else {
+      previewColumns.value = [];
+    }
+  } catch (error) {
+    console.error('加载预览数据失败:', error);
+    toast.error(`加载预览数据失败: ${error instanceof Error ? error.message : '未知错误'}`);
+  }
+}
+
+function formatFileSize(bytes: number): string {
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  if (bytes === 0) return '0 B';
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
+}
+
+function nextStep() {
+  if (currentStep.value === 2) {
+    loadPreviewData();
+  } else if (currentStep.value === 3) {
+    startImport();
+  }
+  currentStep.value++;
+}
+
+function prevStep() {
+  currentStep.value--;
+}
+
+
+async function previewExport() {
+  try {
+    // 模拟预览数据
+    exportPreview.value = [
+      { id: 1, name: '张三', email: 'zhangsan@example.com', created_at: '2024-01-01' },
+      { id: 2, name: '李四', email: 'lisi@example.com', created_at: '2024-01-02' },
+      { id: 3, name: '王五', email: 'wangwu@example.com', created_at: '2024-01-03' },
+      { id: 4, name: '赵六', email: 'zhaoliu@example.com', created_at: '2024-01-04' },
+      { id: 5, name: '钱七', email: 'qianqi@example.com', created_at: '2024-01-05' }
+    ];
+    exportTotalCount.value = 5000;
+  } catch (error) {
+    console.error('预览导出数据失败:', error);
+  }
+}
+
+async function startExport() {
+  if (!exportConfig.value.connectionId || !exportConfig.value.tableName) {
+    console.error('缺少导出配置');
+    return;
+  }
+  
+  isExporting.value = true;
+  
+  try {
+    // 这里应该调用API获取实际数据
+    // const response = await databaseService.exportTableData(exportConfig.value);
+    
+    // 模拟数据
+    const mockData = [
+      { id: 1, name: '张三', email: 'zhangsan@example.com' },
+      { id: 2, name: '李四', email: 'lisi@example.com' },
+      { id: 3, name: '王五', email: 'wangwu@example.com' }
+    ];
+    
+    const filename = `${exportConfig.value.tableName}_${new Date().getTime()}`;
+    
+    // 使用新的导出工具
+    switch (exportConfig.value.format) {
+      case 'csv':
+        await exportDataToCSV(mockData, {}, filename + '.csv');
+        break;
+      case 'json':
+        await exportDataToJSON(mockData, filename + '.json');
+        break;
+      case 'xlsx':
+        await exportDataToExcel(mockData, {}, filename + '.xlsx');
+        break;
+      case 'sql':
+        await exportDataToSQL(mockData, exportConfig.value.tableName, {}, filename + '.sql');
+        break;
+    }
+    
+  } catch (error) {
+    console.error('导出失败:', error);
+  } finally {
+    isExporting.value = false;
+  }
+}
+
+function generateExportContent(): string {
+  // 模拟生成导出内容
+  const data = [
+    { id: 1, name: '张三', email: 'zhangsan@example.com' },
+    { id: 2, name: '李四', email: 'lisi@example.com' },
+    { id: 3, name: '王五', email: 'wangwu@example.com' }
+  ];
+  
+  switch (exportConfig.value.format) {
+    case 'csv':
+      return 'id,name,email\n' + 
+             data.map(row => `${row.id},${row.name},${row.email}`).join('\n');
+    case 'json':
+      return JSON.stringify(data, null, 2);
+    case 'sql':
+      return `INSERT INTO ${exportConfig.value.tableName} (id, name, email) VALUES\n` +
+             data.map(row => `(${row.id}, '${row.name}', '${row.email}')`).join(',\n') + ';';
+    default:
+      return '';
+  }
+}
+
+function getContentType(format: string): string {
+  switch (format) {
+    case 'csv': return 'text/csv';
+    case 'json': return 'application/json';
+    case 'sql': return 'text/sql';
+    default: return 'application/octet-stream';
+  }
+}
+
+function toggleAllColumns() {
+  if (selectAllColumns.value) {
+    selectedColumns.value = [...availableColumns.value];
+  } else {
+    selectedColumns.value = [];
+  }
+}
+
+function closePreview() {
+  exportPreview.value = [];
+}
+
+function resetImport() {
+  currentStep.value = 1;
+  selectedFiles.value = [];
+  importComplete.value = false;
+  importProgress.value = {
+    current: 0,
+    total: 0,
+    message: '',
+    status: 'pending'
+  };
+}
+
+// 生命周期
+onMounted(() => {
+  loadConnections();
+});
+</script>
+
+<style scoped>
+.data-import-export {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.import-export-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 600;
+  color: #1e293b;
+  font-size: 1.1rem;
+}
+
+.header-tabs {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.tab-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  background: white;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.tab-btn:hover {
+  background: #f3f4f6;
+}
+
+.tab-btn.active {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border-color: transparent;
+}
+
+.import-export-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 2rem;
+}
+
+/* 步骤指示器 */
+.step-indicator {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 3rem;
+  position: relative;
+}
+
+.step-indicator::before {
+  content: '';
+  position: absolute;
+  top: 20px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: #e5e7eb;
+  z-index: 1;
+}
+
+.step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  z-index: 2;
+}
+
+.step-number {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: white;
+  border: 2px solid #e5e7eb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  color: #6b7280;
+  margin-bottom: 0.5rem;
+  transition: all 0.3s ease;
+}
+
+.step.active .step-number {
+  border-color: #667eea;
+  color: #667eea;
+  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
+}
+
+.step.completed .step-number {
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  border-color: #10b981;
+  color: white;
+}
+
+.step-title {
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.step.active .step-title {
+  color: #1e293b;
+  font-weight: 600;
+}
+
+.step.completed .step-title {
+  color: #10b981;
+}
+
+/* 步骤内容 */
+.step-content {
+  min-height: 400px;
+}
+
+/* 文件上传区域 */
+.file-upload-area {
+  border: 2px dashed #d1d5db;
+  border-radius: 12px;
+  padding: 3rem 2rem;
+  text-align: center;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.file-upload-area:hover,
+.file-upload-area.drag-over {
+  border-color: #667eea;
+  background: rgba(102, 126, 234, 0.05);
+}
+
+.upload-icon {
+  font-size: 3rem;
+  color: #667eea;
+  margin-bottom: 1rem;
+}
+
+.file-upload-area h3 {
+  font-size: 1.25rem;
+  color: #1e293b;
+  margin-bottom: 0.5rem;
+}
+
+.file-upload-area p {
+  color: #6b7280;
+  margin-bottom: 1.5rem;
+}
+
+.btn-select-file {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.btn-select-file:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.selected-files {
+  margin-top: 2rem;
+}
+
+.selected-files h4 {
+  font-size: 1rem;
+  color: #1e293b;
+  margin-bottom: 1rem;
+}
+
+.file-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem;
+  background: #f8fafc;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+}
+
+.file-icon {
+  color: #667eea;
+  font-size: 1.25rem;
+}
+
+.file-info {
+  flex: 1;
+}
+
+.file-name {
+  font-weight: 500;
+  color: #1e293b;
+}
+
+.file-size {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.btn-remove-file {
+  background: none;
+  border: none;
+  color: #ef4444;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.btn-remove-file:hover {
+  background: #fef2f2;
+}
+
+/* 表单样式 */
+.config-form,
+.export-form {
+  max-width: 800px;
+}
+
+.form-section {
+  margin-bottom: 2rem;
+}
+
+.form-section h4 {
+  font-size: 1.125rem;
+  color: #1e293b;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid #f3f4f6;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.form-group label {
+  font-weight: 500;
+  color: #374151;
+  font-size: 0.875rem;
+}
+
+.form-input,
+.form-textarea {
+  padding: 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  transition: border-color 0.2s ease;
+}
+
+.form-input:focus,
+.form-textarea:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.checkbox-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.checkbox-group input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  accent-color: #667eea;
+}
+
+.checkbox-group label {
+  cursor: pointer;
+  user-select: none;
+}
+
+/* 步骤操作按钮 */
+.step-actions {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 2rem;
+  padding-top: 2rem;
+  border-top: 1px solid #e5e7eb;
+}
+
+.btn-prev,
+.btn-next {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  background: white;
+  color: #374151;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.btn-prev:hover,
+.btn-next:hover:not(:disabled) {
+  background: #f3f4f6;
+  transform: translateY(-1px);
+}
+
+.btn-next:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-next:not(:disabled) {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+}
+
+/* 预览表格 */
+.preview-section {
+  margin-bottom: 2rem;
+}
+
+.preview-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.preview-header h4 {
+  font-size: 1.125rem;
+  color: #1e293b;
+  margin: 0;
+}
+
+.preview-info {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.btn-load-more {
+  padding: 0.25rem 0.75rem;
+  background: #667eea;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+
+.preview-table-wrapper {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.preview-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.preview-table th {
+  background: #f8fafc;
+  padding: 0.75rem;
+  text-align: left;
+  font-weight: 600;
+  color: #374151;
+  border-bottom: 2px solid #e5e7eb;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.preview-table td {
+  padding: 0.75rem;
+  border-bottom: 1px solid #f3f4f6;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.preview-table tr:hover {
+  background: #fafbfc;
+}
+
+/* 导入进度 */
+.import-progress {
+  max-width: 600px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.progress-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.progress-header h4 {
+  font-size: 1.25rem;
+  color: #1e293b;
+  margin: 0;
+}
+
+.progress-stats {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 12px;
+  background: #f3f4f6;
+  border-radius: 6px;
+  overflow: hidden;
+  margin-bottom: 1rem;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #667eea, #764ba2);
+  transition: width 0.3s ease;
+}
+
+.progress-details p {
+  color: #6b7280;
+  font-size: 0.875rem;
+  margin: 0 0 1rem 0;
+}
+
+.import-result {
+  padding: 2rem;
+  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
+  border: 1px solid #bbf7d0;
+  border-radius: 12px;
+  margin-top: 2rem;
+}
+
+.result-icon {
+  width: 60px;
+  height: 60px;
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 1.5rem;
+  margin: 0 auto 1rem;
+}
+
+.import-result h5 {
+  font-size: 1.25rem;
+  color: #065f46;
+  margin-bottom: 0.5rem;
+}
+
+.import-result p {
+  color: #047857;
+  margin-bottom: 1.5rem;
+}
+
+.btn-view-details {
+  padding: 0.75rem 1.5rem;
+  background: white;
+  color: #10b981;
+  border: 1px solid #10b981;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.btn-view-details:hover {
+  background: #10b981;
+  color: white;
+}
+
+.btn-new-import {
+  padding: 0.75rem 1.5rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin: 0 auto;
+}
+
+.btn-new-import:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+/* 列选择 */
+.columns-selection {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+.selection-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.columns-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 0.5rem;
+}
+
+.column-item {
+  padding: 0.5rem;
+  border: 1px solid #f3f4f6;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.column-item:hover {
+  background: #fafbfc;
+}
+
+/* 导出操作 */
+.export-actions {
+  display: flex;
+  gap: 1rem;
+  margin-top: 2rem;
+  padding-top: 2rem;
+  border-top: 1px solid #e5e7eb;
+}
+
+.btn-preview,
+.btn-export {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  background: white;
+  color: #374151;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.btn-preview:hover:not(:disabled) {
+  background: #f3f4f6;
+  border-color: #667eea;
+  color: #667eea;
+}
+
+.btn-export {
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  color: white;
+  border: none;
+}
+
+.btn-export:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+}
+
+.btn-preview:disabled,
+.btn-export:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.btn-close-preview {
+  background: none;
+  border: none;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.btn-close-preview:hover {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.export-preview {
+  margin-top: 2rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .import-export-content {
+    padding: 1rem;
+  }
+  
+  .step-indicator {
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 2rem;
+  }
+  
+  .step-indicator::before {
+    display: none;
+  }
+  
+  .step {
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: 1rem;
+  }
+  
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .step-actions {
+    flex-direction: column;
+    gap: 1rem;
+  }
+  
+  .export-actions {
+    flex-direction: column;
+  }
+  
+  .columns-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .preview-header {
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: stretch;
+  }
+}
+</style>