X-Agents/web/src/views/Database.vue

<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'

interface Database {
  id: string
  name: string
  description: string
  db_type: string
  host: string
  port: number
  username: string
  password: string
  database: string
  table_count: number
  created_at: string
  updated_at: string
}

// 表信息
interface TableInfo {
  name: string
  ddl: string
  columns: ColumnInfo[]
  table_comment?: string
}

// 字段信息
interface ColumnInfo {
  name: string
  type: string
  comment: string
  mapped_name: string
  column_type?: string
  is_nullable?: string
  default_value?: string
  column_key?: string
}

// 解析 DDL 获取列信息
function parseDDLColumns(ddl: string): ColumnInfo[] {
  const columns: ColumnInfo[] = []
  if (!ddl) return columns

  // 移除 CREATE TABLE 语句，只保留括号内的内容
  const match = ddl.match(/\(([\s\S]*)\)\s*.*$/m)
  if (!match) return columns

  const body = match[1]

  // 按换行或逗号分割列定义（处理多行的情况）
  const lines = body.split(/,\s*(?=`\w+`|\s*$)/)

  for (const line of lines) {
    const trimmed = line.trim()
    if (!trimmed || trimmed.startsWith('PRIMARY KEY') || trimmed.startsWith('KEY ') ||
        trimmed.startsWith('UNIQUE KEY') || trimmed.startsWith('FULLTEXT') ||
        trimmed.startsWith('CONSTRAINT') || trimmed.startsWith('FOREIGN KEY') ||
        trimmed.startsWith('ENGINE') || trimmed.startsWith('CHARSET') || trimmed.startsWith(')')) {
      continue
    }

    // 解析列名（支持反引号和单引号）
    const colNameMatch = trimmed.match(/^`?(\w+)`?\s+/)
    if (!colNameMatch) continue

    const name = colNameMatch[1]

    // 提取列定义剩余部分
    const rest = trimmed.substring(colNameMatch[0].length)

    // 提取数据类型（到 NOT NULL / DEFAULT / COMMENT 之前）
    const typeMatch = rest.match(/^([^\s]+(?:\s*\([^\)]+\))?)/)
    const type = typeMatch ? typeMatch[1] : ''

    // 提取 COMMENT
    const commentMatch = trimmed.match(/COMMENT\s+['"]([^'"]*)['"]/i)
    const comment = commentMatch ? commentMatch[1] : ''

    // 提取默认值
    const defaultMatch = trimmed.match(/DEFAULT\s+([^\s,]+)/i)
    const defaultValue = defaultMatch ? defaultMatch[1] : ''

    // 判断是否可空
    const isNullable = trimmed.includes('NOT NULL') ? 'NO' : 'YES'

    // 判断是否是主键
    const isPrimaryKey = trimmed.includes('PRIMARY KEY')

    columns.push({
      name,
      type,
      comment,
      mapped_name: '',
      column_type: type,
      is_nullable: isNullable,
      default_value: defaultValue,
      column_key: isPrimaryKey ? 'PRI' : '',
    })
  }

  return columns
}

// 数据库数据
const databases = ref<Database[]>([])
const loading = ref(false)

// 编辑状态
const editingDb = ref<Database | null>(null)
const isEditing = ref(false)
const isCreating = ref(false)
const searchQuery = ref('')

// 表映射弹窗状态
const isMapping = ref(false)
const mappingDb = ref<Database | null>(null)
const tables = ref<TableInfo[]>([])
const tableLoading = ref(false)
const tableSearchQuery = ref('')
const selectedTables = ref<TableInfo[]>([]) // 选中的表列表
const tablePage = ref(1)
const tablePageSize = ref(10)
const currentTableIndex = ref(0)

// 搜索时重置分页
watch(tableSearchQuery, () => {
  tablePage.value = 1
})

// 映射步骤：1-选择表, 2-DDl和映射
const mappingStep = ref(1)

// 当前正在编辑的表
const selectedTable = computed(() => {
  if (selectedTables.value.length === 0) return null
  return selectedTables.value[currentTableIndex.value] || null
})

// 检查表是否被选中
const isTableSelected = (tableName: string) => {
  return selectedTables.value.some(t => t.name === tableName)
}

// 切换表的选择状态
const toggleTableSelection = (table: TableInfo) => {
  const index = selectedTables.value.findIndex(t => t.name === table.name)
  if (index >= 0) {
    selectedTables.value.splice(index, 1)
    // 调整当前索引
    if (currentTableIndex.value >= selectedTables.value.length) {
      currentTableIndex.value = Math.max(0, selectedTables.value.length - 1)
    }
  } else {
    selectedTables.value.push(table)
  }
}

// 全选所有表
const selectAllTables = () => {
  selectedTables.value = [...filteredTables()]
  currentTableIndex.value = 0
}

// 清除所有选择
const clearAllTables = () => {
  selectedTables.value = []
  currentTableIndex.value = 0
}

// 上一张表
const prevTable = () => {
  if (currentTableIndex.value > 0) {
    currentTableIndex.value--
  }
}

// 下一张表
const nextTable = () => {
  if (currentTableIndex.value < selectedTables.value.length - 1) {
    currentTableIndex.value++
  }
}

// 过滤后的表
const filteredTables = () => {
  let result = tables.value
  if (tableSearchQuery.value) {
    result = result.filter(t => t.name.toLowerCase().includes(tableSearchQuery.value.toLowerCase()))
  }
  return result
}

const paginatedTables = computed(() => {
  const start = (tablePage.value - 1) * tablePageSize.value
  const end = start + tablePageSize.value
  return filteredTables().slice(start, end)
})

const totalFilteredTables = computed(() => filteredTables().length)

// 关闭映射弹窗
const closeMapping = () => {
  isMapping.value = false
  mappingDb.value = null
  tables.value = []
  selectedTables.value = []
  currentTableIndex.value = 0
  mappingStep.value = 1
  tableSearchQuery.value = ''
  tablePage.value = 1
}

// 打开映射弹窗（从列表页面点击映射按钮）
const openMapping = async (db: Database) => {
  mappingDb.value = db
  tables.value = []
  selectedTables.value = []
  currentTableIndex.value = 0
  mappingStep.value = 1
  tableLoading.value = true
  isMapping.value = true

  try {
    // 并行获取实时表结构和已保存的映射数据
    const [checkRes, mappingRes] = await Promise.all([
      fetch(`${API_BASE}/database/check`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          db_type: db.db_type,
          host: db.host,
          port: db.port,
          username: db.username,
          password: db.password,
          database: db.database,
          charset: 'utf8mb4',
        }),
      }),
      // 如果是已存在的数据库，获取已保存的映射
      db.id ? fetch(`${API_BASE}/sub-table/database/${db.id}`) : Promise.resolve(null),
    ])

    if (!checkRes.ok) {
      throw new Error(`HTTP ${checkRes.status}`)
    }

    const result = await checkRes.json()

    // 获取已保存的映射数据
    let savedMappings: any = {}
    let savedTableNames: string[] = []  // 已保存的表名列表
    if (mappingRes && mappingRes.ok) {
      const mappingResult = await mappingRes.json()
      // 后端返回的是 list 字段
      const tablesList = mappingResult.list || mappingResult.tables || []
      if (tablesList.length > 0) {
        // 构建映射表: parent_table -> fields[]
        for (const table of tablesList) {
          savedMappings[table.parent_table] = table.fields || []
          savedTableNames.push(table.parent_table)
        }
      }
    }

    if (result.success && result.tables) {
      tables.value = result.tables.map((table: any) => {
        const ddl = table.ddl || ''
        // 获取该表已保存的字段映射
        const savedFields = savedMappings[table.table_name] || []

        // 如果有 columns 数据则使用，否则尝试从 DDL 解析
        let columns: ColumnInfo[]
        if (table.columns && table.columns.length > 0) {
          columns = table.columns.map((col: any) => {
            // 查找已保存的映射
            const savedField = savedFields.find((f: any) => f.column_name === col.column_name)
            return {
              name: col.column_name,
              type: col.data_type || col.column_type || '',
              column_type: col.column_type || '',
              comment: col.column_comment || '',
              is_nullable: col.is_nullable || '',
              default_value: col.default_value || '',
              column_key: col.column_key || '',
              mapped_name: savedField?.mapped_name || col.mapped_name || '',
            }
          })
        } else if (ddl) {
          // 从 DDL 解析列信息，并合并已保存的映射
          columns = parseDDLColumns(ddl).map(col => {
            const savedField = savedFields.find((f: any) => f.column_name === col.name)
            return {
              ...col,
              mapped_name: savedField?.mapped_name || '',
            }
          })
        } else {
          columns = []
        }

        return {
          name: table.table_name,
          table_comment: table.table_comment || '',
          ddl,
          columns,
        }
      })

      // 恢复已选择的表
      if (savedTableNames.length > 0) {
        selectedTables.value = tables.value.filter(t => savedTableNames.includes(t.name))
      } else {
        selectedTables.value = []
      }
      currentTableIndex.value = 0
    } else {
      ElMessage.warning(result.message || '获取表结构失败')
    }
  } catch (error: any) {
    console.error('获取表结构失败:', error)
    ElMessage.error('获取表结构失败: ' + error.message)
  } finally {
    tableLoading.value = false
  }
}

// 进入下一步（选择表后）
const goToStep2 = () => {
  if (selectedTables.value.length > 0) {
    mappingStep.value = 2
    currentTableIndex.value = 0
  }
}

// 返回上一步
const goToStep1 = () => {
  mappingStep.value = 1
}

// 保存映射（创建或更新数据库 + 保存子表）
const saveMapping = async () => {
  if (!mappingDb.value) {
    ElMessage.warning('数据库信息不存在')
    return
  }

  const isEditing = !!mappingDb.value.id
  const subTablesData = selectedTables.value.map(table => ({
    parent_table: table.name,
    sub_table_name: table.table_comment || table.name,
    sub_table_comment: table.table_comment || '',
    fields: (table.columns || []).map(col => ({
      column_name: col.name,
      mapped_name: col.mapped_name || '',  // 这里实际存的是 comment
    })),
  }))

  try {
    let response: Response

    if (isEditing) {
      // 编辑模式：调用更新接口
      response = await fetch(`${API_BASE}/database/${mappingDb.value.id}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: mappingDb.value.name,
          description: mappingDb.value.description,
          db_type: mappingDb.value.db_type,
          host: mappingDb.value.host,
          port: mappingDb.value.port,
          username: mappingDb.value.username,
          password: mappingDb.value.password,
          database: mappingDb.value.database,
          sub_tables: subTablesData,
        }),
      })
    } else {
      // 新建模式：调用创建接口
      response = await fetch(`${API_BASE}/database/add`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: mappingDb.value.name,
          description: mappingDb.value.description,
          db_type: mappingDb.value.db_type,
          host: mappingDb.value.host,
          port: mappingDb.value.port,
          username: mappingDb.value.username,
          password: mappingDb.value.password,
          database: mappingDb.value.database,
          sub_tables: subTablesData,
        }),
      })
    }

    if (response.ok) {
      const result = await response.json()
      if (!isEditing) {
        databases.value.push(result)
      }
      closeMapping()
      ElMessage.success(isEditing ? 'Mapping updated successfully' : 'Database created successfully')
      // 刷新列表
      fetchDatabases()
    } else {
      const errorData = await response.json()
      ElMessage.error(errorData.error || (isEditing ? 'Failed to update mapping' : 'Failed to create database'))
    }
  } catch (error: any) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败: ' + error.message)
  }
}

const dbTypes = ['MySQL', 'PostgreSQL', 'MongoDB', 'Redis']

// API 基础 URL
const API_BASE = 'http://localhost:8082'

// 获取列表数据
const fetchDatabases = async () => {
  loading.value = true
  try {
    const response = await fetch(`${API_BASE}/database/list`)
    if (!response.ok) {
      throw new Error('Failed to fetch databases')
    }
    const data = await response.json()
    databases.value = data.list || []
  } catch (error) {
    console.error('Failed to fetch databases:', error)
    ElMessage.error('Failed to load databases')
    databases.value = []
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchDatabases()
})

// 新建 Database 表单
const newDbForm = ref({
  name: '',
  db_type: 'MySQL',
  description: '',
  host: 'localhost',
  port: 3306,
  username: 'root',
  password: '',
  database: '',
})

// 打开新建弹窗
const openCreate = () => {
  newDbForm.value = {
    name: '',
    db_type: 'MySQL',
    description: '',
    host: 'localhost',
    port: 3306,
    username: 'root',
    password: '',
    database: '',
  }
  isCreating.value = true
}

// 关闭新建弹窗
const closeCreate = () => {
  isCreating.value = false
}

// 测试连接并获取表列表
const testConnect = async () => {
  try {
    const response = await fetch(`${API_BASE}/database/check`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        db_type: newDbForm.value.db_type,
        host: newDbForm.value.host,
        port: newDbForm.value.port,
        username: newDbForm.value.username,
        password: newDbForm.value.password,
        database: newDbForm.value.database,
        charset: 'utf8mb4',
      }),
    })

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`)
    }

    const result = await response.json()

    if (result.success) {
      // 连接成功，显示表映射弹窗
      const dbInfo: Database = {
        id: '',
        name: newDbForm.value.name || 'Untitled Database',
        description: newDbForm.value.description,
        db_type: newDbForm.value.db_type,
        host: newDbForm.value.host,
        port: newDbForm.value.port,
        username: newDbForm.value.username,
        password: newDbForm.value.password,
        database: newDbForm.value.database,
        table_count: 0,
        created_at: '',
        updated_at: '',
      }

      // 将后端返回的表数据映射到前端格式
      if (result.tables && result.tables.length > 0) {
        tables.value = result.tables.map((table: any) => {
          const ddl = table.ddl || ''
          // 如果有 columns 数据则使用，否则尝试从 DDL 解析
          let columns: ColumnInfo[]
          if (table.columns && table.columns.length > 0) {
            columns = table.columns.map((col: any) => ({
              name: col.column_name,
              type: col.data_type || col.column_type || '',
              column_type: col.column_type || '',
              comment: col.column_comment || '',
              is_nullable: col.is_nullable || '',
              default_value: col.default_value || '',
              column_key: col.column_key || '',
              mapped_name: '',
            }))
          } else if (ddl) {
            // 从 DDL 解析列信息
            columns = parseDDLColumns(ddl)
          } else {
            columns = []
          }

          return {
            name: table.table_name,
            table_comment: table.table_comment || '',
            ddl,
            columns,
          }
        })
      }

      // 默认不选中任何表
      selectedTables.value = []
      currentTableIndex.value = 0
      mappingStep.value = 1
      mappingDb.value = dbInfo
      isMapping.value = true
      isCreating.value = false // 关闭创建弹窗
      ElMessage.success('Connection successful! Please select tables to map.')
    } else {
      ElMessage.error(result.message || 'Connection failed')
    }
  } catch (error: any) {
    console.error('Connection test failed:', error)
    ElMessage.error('Connection test failed: ' + error.message)
  }
}

// 编辑表单数据
const editForm = ref({
  name: '',
  db_type: '',
  description: '',
  host: '',
  port: 0,
  username: '',
  password: '',
  database: '',
})

// 打开编辑弹窗
const openEdit = (db: Database) => {
  editingDb.value = db
  editForm.value = {
    name: db.name,
    db_type: db.db_type,
    description: db.description,
    host: db.host,
    port: db.port,
    username: db.username,
    password: db.password,
    database: db.database,
  }
  isEditing.value = true
}

// 保存编辑
const saveEdit = async () => {
  if (editingDb.value) {
    try {
      const response = await fetch(`${API_BASE}/database/${editingDb.value.id}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: editForm.value.name,
          description: editForm.value.description,
          db_type: editForm.value.db_type,
          host: editForm.value.host,
          port: editForm.value.port,
          username: editForm.value.username,
          password: editForm.value.password,
          database: editForm.value.database,
        }),
      })
      if (response.ok) {
        const updatedDb = await response.json()
        const index = databases.value.findIndex(d => d.id === editingDb.value!.id)
        if (index !== -1) {
          databases.value[index] = updatedDb
        }
        ElMessage.success('Database updated successfully')
      } else {
        const errorData = await response.json()
        ElMessage.error(errorData.error || 'Failed to update database')
      }
    } catch (error) {
      console.error('Failed to update database:', error)
      ElMessage.error('Failed to update database')
    }
  }
  isEditing.value = false
}

// 取消编辑
const cancelEdit = () => {
  isEditing.value = false
  editingDb.value = null
}

// 删除 Database
const deleteDb = async (id: string) => {
  try {
    const response = await fetch(`${API_BASE}/database/${id}`, {
      method: 'DELETE'
    })
    if (response.ok) {
      databases.value = databases.value.filter(d => d.id !== id)
      ElMessage.success('Database deleted successfully')
    } else {
      ElMessage.error('Failed to delete database')
    }
  } catch (error) {
    console.error('Failed to delete database:', error)
    ElMessage.error('Failed to delete database')
  }
}

// 过滤后的 Databases
const filteredDatabases = () => {
  return databases.value.filter(db => {
    const matchSearch = !searchQuery.value ||
      db.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      db.db_type.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      db.host.toLowerCase().includes(searchQuery.value.toLowerCase())
    return matchSearch
  })
}

</script>

<template>
  <!-- 主内容区域 -->
  <div class="p-6 min-h-screen">
    <!-- 顶部导航 -->
    <div class="flex justify-between items-center mb-6">
      <div class="flex items-center gap-2">
        <i class="fa-solid fa-database text-gray-400"></i>
        <span class="font-medium">Database</span>
      </div>
      <button @click="openCreate" class="btn-primary">
        <i class="fa-solid fa-plus"></i>
        New Connection
      </button>
    </div>

    <!-- 搜索 -->
    <div class="flex gap-4 mb-6">
      <div class="flex-1 relative">
        <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
        <input
          v-model="searchQuery"
          type="text"
          placeholder="Search databases by name, type or host..."
          class="search-input w-full"
        >
      </div>
    </div>

    <!-- Database 列表 -->
    <div class="bg-dark-700 rounded-xl overflow-hidden">
      <div v-if="loading" class="py-12 text-center text-gray-400">
        <i class="fa-solid fa-circle-notch fa-spin text-2xl mb-2"></i>
        <p>Loading...</p>
      </div>
      <table v-else class="w-full">
        <thead class="bg-dark-600">
          <tr>
            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Database Name</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Type</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Host</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Tables</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Created</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="db in filteredDatabases()" :key="db.id" class="table-row">
            <td class="px-5 py-4">
              <div class="font-medium">{{ db.name }}</div>
              <div class="text-sm text-gray-500">{{ db.description }}</div>
            </td>
            <td class="px-5 py-4 text-center">
              <span class="bg-dark-500 px-2 py-1 rounded text-sm">{{ db.db_type }}</span>
            </td>
            <td class="px-5 py-4 text-center text-gray-400 text-sm">
              {{ db.host }}:{{ db.port }}
            </td>
            <td class="px-5 py-4 text-center">
              <span class="text-primary-cyan">{{ db.table_count }}</span>
            </td>
            <td class="px-5 py-4 text-center text-gray-400 text-sm">{{ db.created_at?.split('T')[0] }}</td>
            <td class="px-5 py-4">
              <div class="flex items-center justify-center gap-2">
                <button
                  @click="openMapping(db)"
                  class="btn-icon"
                  title="Map Tables"
                >
                  <i class="fa-solid fa-link text-gray-400"></i>
                </button>
                <button
                  @click="openEdit(db)"
                  class="btn-icon"
                  title="Edit"
                >
                  <i class="fa-solid fa-pen text-gray-400"></i>
                </button>
                <button
                  @click="deleteDb(db.id)"
                  class="btn-icon"
                  title="Delete"
                >
                  <i class="fa-solid fa-trash text-gray-400 hover:text-primary-danger"></i>
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>

      <!-- 空状态 -->
      <div v-if="filteredDatabases().length === 0" class="empty-state">
        <i class="fa-solid fa-database empty-state-icon"></i>
        <p>No databases found</p>
      </div>
    </div>

    <!-- 编辑弹窗 -->
    <Teleport to="body">
      <div v-if="isEditing" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50 modal-overlay">
        <div class="bg-dark-700 rounded-2xl w-full max-w-lg border border-dark-500 shadow-2xl modal-content">
          <!-- 弹窗头部 -->
          <div class="flex items-center justify-between p-5 border-b border-dark-500">
            <h3 class="text-lg font-semibold">Edit Database</h3>
            <button @click="cancelEdit" class="btn-icon">
              <i class="fa-solid fa-xmark text-xl"></i>
            </button>
          </div>

          <!-- 弹窗内容 -->
          <div class="p-5 space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Database Name</label>
              <input
                v-model="editForm.name"
                type="text"
                class="input-field"
              >
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Description</label>
              <textarea
                v-model="editForm.description"
                rows="2"
                class="input-field resize-none"
              ></textarea>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Type</label>
              <el-select v-model="editForm.db_type" placeholder="Select" class="w-full" size="large" popper-class="dark-select-dropdown">
                <el-option v-for="type in dbTypes" :key="type" :label="type" :value="type" />
              </el-select>
            </div>

            <!-- 连接凭据 -->
            <div class="space-y-4 pt-2">
              <div class="grid grid-cols-2 gap-4">
                <div>
                  <label class="block text-sm font-medium text-gray-300 mb-2">Host</label>
                  <input
                    v-model="editForm.host"
                    type="text"
                    class="input-field"
                  >
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-300 mb-2">Port</label>
                  <input
                    v-model="editForm.port"
                    type="number"
                    class="input-field"
                  >
                </div>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">Database</label>
                <input
                  v-model="editForm.database"
                  type="text"
                  placeholder="Database name..."
                  class="input-field"
                >
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">User</label>
                <input
                  v-model="editForm.username"
                  type="text"
                  class="input-field"
                >
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">Password</label>
                <input
                  v-model="editForm.password"
                  type="password"
                  placeholder="Leave blank to keep current"
                  class="input-field"
                >
              </div>
            </div>
          </div>

          <!-- 弹窗底部 -->
          <div class="flex items-center justify-end gap-3 p-5 border-t border-dark-500">
            <button
              @click="cancelEdit"
              class="btn-secondary"
            >
              Cancel
            </button>
            <button
              @click="saveEdit"
              class="btn-primary"
            >
              Save Changes
            </button>
          </div>
        </div>
      </div>
    </Teleport>

    <!-- 新建 Database 弹窗 -->
    <Teleport to="body">
      <div v-if="isCreating" class="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4 modal-overlay">
        <div class="bg-dark-800 rounded-2xl w-full max-w-lg border border-dark-600 shadow-2xl overflow-hidden modal-content">
          <!-- 弹窗头部 -->
          <div class="flex items-center justify-between p-5 border-b border-dark-600 bg-dark-700/50">
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-orange to-red-500 flex items-center justify-center">
                <i class="fa-solid fa-database text-white"></i>
              </div>
              <div>
                <h3 class="text-xl font-semibold text-white">Create New Connection</h3>
                <p class="text-sm text-gray-400">Configure your database connection</p>
              </div>
            </div>
            <button @click="closeCreate" class="btn-icon">
              <i class="fa-solid fa-xmark text-xl"></i>
            </button>
          </div>

          <!-- 弹窗内容 -->
          <div class="p-5 space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Database Name</label>
              <input
                v-model="newDbForm.name"
                type="text"
                placeholder="Enter database name..."
                class="input-field"
              >
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Description</label>
              <textarea
                v-model="newDbForm.description"
                rows="2"
                placeholder="Describe this database..."
                class="input-field resize-none"
              ></textarea>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Type</label>
              <el-select v-model="newDbForm.db_type" placeholder="Select" class="w-full" size="large" popper-class="dark-select-dropdown">
                <el-option v-for="type in dbTypes" :key="type" :label="type" :value="type" />
              </el-select>
            </div>

            <!-- 连接凭据 - 当选择MySQL时显示 -->
            <div v-if="newDbForm.db_type === 'MySQL'" class="space-y-4 pt-2">
              <div class="grid grid-cols-2 gap-4">
                <div>
                  <label class="block text-sm font-medium text-gray-300 mb-2">Host</label>
                  <input
                    v-model="newDbForm.host"
                    type="text"
                    placeholder="localhost"
                    class="input-field"
                  >
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-300 mb-2">Port</label>
                  <input
                    v-model="newDbForm.port"
                    type="number"
                    placeholder="3306"
                    class="input-field"
                  >
                </div>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">Database</label>
                <input
                  v-model="newDbForm.database"
                  type="text"
                  placeholder="Database name..."
                  class="input-field"
                >
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">User</label>
                <input
                  v-model="newDbForm.username"
                  type="text"
                  placeholder="root"
                  class="input-field"
                >
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">Password</label>
                <input
                  v-model="newDbForm.password"
                  type="password"
                  placeholder="Enter password..."
                  class="input-field"
                >
              </div>
            </div>
          </div>

          <!-- 底部操作栏 -->
          <div class="flex items-center justify-end gap-3 p-5 border-t border-dark-600 bg-dark-700/50">
            <button
              @click="closeCreate"
              class="btn-secondary"
            >
              Cancel
            </button>
            <button
              @click="testConnect"
              class="btn-primary"
            >
              <i class="fa-solid fa-plug"></i>
              Connect
            </button>
          </div>
        </div>
      </div>
    </Teleport>

    <!-- 表映射弹窗 -->
    <Teleport to="body">
      <div v-if="isMapping" class="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4 modal-overlay">
        <div class="bg-dark-800 rounded-2xl w-full max-w-6xl h-[85vh] border border-dark-600 shadow-2xl overflow-hidden flex flex-col modal-content">
          <!-- 弹窗头部 -->
          <div class="flex items-center justify-between p-5 border-b border-dark-600 bg-dark-700/50">
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-cyan to-blue-500 flex items-center justify-center">
                <i class="fa-solid fa-table text-white"></i>
              </div>
              <div>
                <h3 class="text-xl font-semibold text-white">Table Mapping</h3>
                <p class="text-sm text-gray-400">
                  <span v-if="mappingStep === 1">Step 1: Select tables to map</span>
                  <span v-else>Step 2: Edit DDL and field mapping</span>
                </p>
              </div>
            </div>
            <button @click="closeMapping" class="btn-icon">
              <i class="fa-solid fa-xmark text-xl"></i>
            </button>
          </div>

          <!-- 步骤指示器 -->
          <div class="flex items-center justify-center gap-4 py-4 border-b border-dark-600">
            <div class="flex items-center gap-2">
              <div :class="['w-8 h-8 rounded-full flex items-center justify-center text-sm', mappingStep >= 1 ? 'bg-primary-cyan text-white' : 'bg-dark-600 text-gray-400']">1</div>
              <span :class="mappingStep >= 1 ? 'text-white' : 'text-gray-400'">Select Tables</span>
            </div>
            <div class="w-16 h-0.5" :class="mappingStep >= 2 ? 'bg-primary-cyan' : 'bg-dark-600'"></div>
            <div class="flex items-center gap-2">
              <div :class="['w-8 h-8 rounded-full flex items-center justify-center text-sm', mappingStep >= 2 ? 'bg-primary-cyan text-white' : 'bg-dark-600 text-gray-400']">2</div>
              <span :class="mappingStep >= 2 ? 'text-white' : 'text-gray-400'">Edit Mapping</span>
            </div>
          </div>

          <!-- 弹窗内容 -->
          <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 步骤1：选择表 -->
            <template v-if="mappingStep === 1">
              <div class="p-4 flex-1 overflow-auto">
                <div class="mb-3">
                  <span class="text-sm font-medium text-gray-300">Select Tables ({{ selectedTables.length }} selected):</span>
                </div>
                <div class="relative mb-3">
                  <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                  <input
                    v-model="tableSearchQuery"
                    type="text"
                    placeholder="Filter tables by name..."
                    class="search-input w-full"
                  >
                </div>
                <!-- 表选择列表 -->
                <div class="bg-dark-900 rounded-lg p-2 max-h-80 overflow-auto">
                  <div
                    v-for="table in paginatedTables"
                    :key="table.name"
                    class="flex items-center gap-3 p-3 rounded-lg cursor-pointer"
                    @click="toggleTableSelection(table)"
                  >
                    <el-checkbox
                      :model-value="isTableSelected(table.name)"
                      @click.stop
                      @change="toggleTableSelection(table)"
                      class="table-checkbox"
                    />
                    <span class="font-medium text-white">{{ table.name }}</span>
                    <span class="text-xs text-gray-500">{{ table.columns.length }} columns</span>
                  </div>
                  <div v-if="paginatedTables.length === 0" class="py-8 text-center text-gray-500">
                    No tables found
                  </div>
                </div>
                <!-- 分页 -->
                <div class="flex justify-center mt-3">
                  <el-pagination
                    v-if="totalFilteredTables > tablePageSize"
                    v-model:current-page="tablePage"
                    :page-size="tablePageSize"
                    :total="totalFilteredTables"
                    layout="prev, pager, next"
                    background
                    small
                  />
                </div>
              </div>
            </template>

            <!-- 步骤2：DDL和字段映射 -->
            <template v-if="mappingStep === 2">
              <!-- DDL 展示 -->
              <div class="p-4 border-b border-dark-600 bg-dark-900/50">
                <div class="flex items-center justify-between mb-2">
                  <span class="text-sm font-medium text-gray-300">DDL - {{ selectedTable?.name }}</span>
                  <div class="flex items-center gap-2">
                    <button
                      v-if="selectedTables.length > 1"
                      @click="prevTable"
                      class="p-1 hover:bg-dark-700 rounded"
                      :disabled="currentTableIndex <= 0"
                    >
                      <i class="fa-solid fa-chevron-left text-gray-400"></i>
                    </button>
                    <span class="text-xs text-gray-500">{{ currentTableIndex + 1 }} / {{ selectedTables.length }}</span>
                    <button
                      v-if="selectedTables.length > 1"
                      @click="nextTable"
                      class="p-1 hover:bg-dark-700 rounded"
                      :disabled="currentTableIndex >= selectedTables.length - 1"
                    >
                      <i class="fa-solid fa-chevron-right text-gray-400"></i>
                    </button>
                  </div>
                </div>
                <div v-if="selectedTable" class="bg-dark-950 rounded-lg p-4 max-h-32 overflow-auto">
                  <pre class="text-xs text-primary-cyan font-mono whitespace-pre-wrap">{{ selectedTable.ddl }}</pre>
                </div>
              </div>

              <!-- 字段映射表格 - 卡片式布局 -->
              <div class="flex-1 overflow-auto p-4">
                <div v-if="selectedTable" class="space-y-2">
                  <!-- 表头 -->
                  <div class="grid grid-cols-12 gap-4 px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">
                    <div class="col-span-3">Field Name</div>
                    <div class="col-span-2">Type</div>
                    <div class="col-span-7">Comment / Mapping</div>
                  </div>
                  <!-- 字段行 -->
                  <div
                    v-for="col in selectedTable.columns"
                    :key="col.name"
                    class="grid grid-cols-12 gap-4 items-center px-4 py-3 bg-dark-800 rounded-lg border border-dark-600"
                  >
                    <!-- 字段名 -->
                    <div class="col-span-3 flex items-center gap-2">
                      <div class="w-6 h-6 rounded bg-primary-yellow/20 flex items-center justify-center flex-shrink-0">
                        <i class="fa-solid fa-key text-xs text-primary-yellow"></i>
                      </div>
                      <span class="font-medium text-primary-yellow truncate" :title="col.name">{{ col.name }}</span>
                    </div>
                    <!-- 类型 -->
                    <div class="col-span-2">
                      <span class="inline-flex items-center px-2 py-1 rounded-md bg-dark-600 text-gray-400 text-xs font-mono">
                        {{ col.type }}
                      </span>
                    </div>
                    <!-- 注释输入 -->
                    <div class="col-span-7">
                      <input
                        v-model="col.mapped_name"
                        type="text"
                        :placeholder="col.comment || 'Enter comment...'"
                        class="w-full bg-dark-700 border border-dark-500 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-primary-cyan focus:ring-1 focus:ring-primary-cyan/30 transition-all"
                      >
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>

          <!-- 底部操作栏 -->
          <div class="flex items-center justify-between p-5 border-t border-dark-600 bg-dark-700/50">
            <div class="text-sm text-gray-400">
              <span v-if="mappingStep === 1">{{ selectedTables.length }} tables selected</span>
              <span v-else>Editing: {{ selectedTable?.name }}</span>
            </div>
            <div class="flex items-center gap-3">
              <template v-if="mappingStep === 1">
                <button @click="closeMapping" class="btn-secondary">Skip</button>
                <button
                  @click="goToStep2"
                  :disabled="selectedTables.length === 0"
                  class="px-4 py-2 rounded-lg bg-gradient-to-r from-primary-cyan to-blue-500 text-white hover:from-cyan-500 hover:to-blue-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
                >
                  Next <i class="fa-solid fa-arrow-right"></i>
                </button>
              </template>
              <template v-else>
                <button @click="goToStep1" class="btn-secondary">
                  <i class="fa-solid fa-arrow-left"></i> Back
                </button>
                <button @click="saveMapping" class="px-4 py-2 rounded-lg bg-gradient-to-r from-primary-cyan to-blue-500 text-white hover:from-cyan-500 hover:to-blue-600 transition-all flex items-center gap-2">
                  <i class="fa-solid fa-save"></i> Save Mapping
                </button>
              </template>
            </div>
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>