fdb2 1.0.8 → 1.0.10

package/src/platform/database/components/connection-detail.vue

@@ -1,1154 +1,1153 @@
-<template>
-  <div class="connection-detail">
-    <!-- 连接头部信息 -->
-    <div class="connection-header">
-      <div class="connection-info">
-        <div class="connection-avatar">
-          <div class="db-logo" :class="getDbLogoClass(connection?.type)">
-            {{ getDbLogoText(connection?.type) }}
-          </div>
-        </div>
-        <div class="connection-meta">
-          <h4 class="connection-name">{{ connection?.name }}</h4>
-          <div class="connection-type-info">
-            <span class="db-type">{{ getDbTypeLabel(connection?.type) }}</span>
-            <span class="connection-status" :class="connectionStatusClass">
-              <div class="status-dot"></div>
-              {{ connectionStatusText }}
-            </span>
-          </div>
-        </div>
-      </div>
-      <div class="connection-actions">
-        <button class="btn btn-sm btn-outline-info" @click="toggleDetails" title="查看/隐藏详细信息">
-          <i class="bi" :class="isDetailsExpanded ? 'bi-chevron-up' : 'bi-chevron-down'"></i> 详情
-        </button>
-        <button class="btn btn-sm btn-outline-primary" @click="testConnection">
-          <i class="bi bi-wifi"></i>
-        </button>
-        <button class="btn btn-sm btn-outline-secondary" @click="editConnection">
-          <i class="bi bi-pencil"></i> 编辑
-        </button>
-      </div>
-    </div>
-
-    <!-- 连接详情卡片 -->
-    <div v-if="isDetailsExpanded" class="connection-details-panel">
-      <div class="detail-card">
-        <div class="card-body">
-          <div class="row">
-            <!-- 基本信息 -->
-            <div class="col-md-6">
-              <h6 class="section-title">
-                <i class="bi bi-info-circle"></i>
-                基本信息
-              </h6>
-              <div class="info-grid">
-                <div class="info-item">
-                  <label class="info-label">主机地址</label>
-                  <div class="info-value">{{ connection?.host }}</div>
-                </div>
-                <div class="info-item">
-                  <label class="info-label">端口</label>
-                  <div class="info-value">{{ connection?.port }}</div>
-                </div>
-                <div class="info-item">
-                  <label class="info-label">用户名</label>
-                  <div class="info-value">{{ connection?.username }}</div>
-                </div>
-                <div class="info-item">
-                  <label class="info-label">数据库类型</label>
-                  <div class="info-value">
-                    <span class="db-type-badge" :class="getDbLogoClass(connection?.type)">
-                      {{ getDbTypeLabel(connection?.type) }}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            
-            <!-- 连接统计 -->
-            <div class="col-md-6">
-              <h6 class="section-title">
-                <i class="bi bi-bar-chart"></i>
-                连接统计
-              </h6>
-              <div class="stats-grid">
-                <div class="stat-item">
-                  <div class="stat-value">{{ connectionStats.databaseCount || 0 }}</div>
-                  <div class="stat-label">数据库数量</div>
-                </div>
-                <div class="stat-item">
-                  <div class="stat-value">{{ connectionStats.tableCount || 0 }}</div>
-                  <div class="stat-label">表总数</div>
-                </div>
-                <div class="stat-item">
-                  <div class="stat-value">{{ formatFileSize(connectionStats.totalSize || 0) }}</div>
-                  <div class="stat-label">总大小</div>
-                </div>
-                <div class="stat-item">
-                  <div class="stat-value">{{ connectionStats.lastConnected || '从未' }}</div>
-                  <div class="stat-label">最后连接</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 快速操作 -->
-    <div class="quick-actions">
-      <div class="actions-header">
-        <h6 class="actions-title">
-          <i class="bi bi-lightning"></i>
-          快速操作
-        </h6>
-      </div>
-      <div class="actions-grid">
-        <button class="action-btn" @click="showCreateDatabaseModal">
-          <div class="action-icon">
-            <i class="bi bi-plus-circle"></i>
-          </div>
-          <div class="action-text">创建数据库</div>
-        </button>
-        <!-- <button class="action-btn" @click="refreshAll">
-          <div class="action-icon">
-            <i class="bi bi-arrow-clockwise"></i>
-          </div>
-          <div class="action-text">刷新所有数据库</div>
-        </button> -->
-        <!-- <button class="action-btn" @click="activeTab = 'sql'">
-          <div class="action-icon">
-            <i class="bi bi-terminal"></i>
-          </div>
-          <div class="action-text">SQL查询</div>
-        </button> -->
-        <button class="action-btn" @click="exportSchema">
-          <div class="action-icon">
-            <i class="bi bi-download"></i>
-          </div>
-          <div class="action-text">导出架构</div>
-        </button>
-        <button class="action-btn" @click="viewLogs">
-          <div class="action-icon">
-            <i class="bi bi-file-text"></i>
-          </div>
-          <div class="action-text">查看日志</div>
-        </button>
-      </div>
-    </div>
-
-    <!-- 标签页 -->
-    <div class="connection-tabs">
-      <ul class="nav nav-tabs">
-        <li class="nav-item">
-          <button 
-            class="nav-link" 
-            :class="{ active: activeTab === 'databases' }"
-            @click="activeTab = 'databases'"
-          >
-            <i class="bi bi-database-fill"></i> 数据库列表
-            <span class="badge bg-primary ms-1">{{ databases.length }}</span>
-          </button>
-        </li>
-        <li class="nav-item">
-          <button 
-            class="nav-link" 
-            :class="{ active: activeTab === 'sql' }"
-            @click="activeTab = 'sql'"
-          >
-            <i class="bi bi-terminal"></i> SQL查询
-          </button>
-        </li>
-      </ul>
-
-      <div class="tab-content">
-        <!-- 数据库列表标签页 -->
-        <div v-show="activeTab === 'databases'" class="tab-panel">
-          <div class="databases-section">
-            <div class="section-header">
-              <div class="section-actions">
-                <div class="search-box">
-                  <input 
-                    type="text" 
-                    class="form-control form-control-sm" 
-                    v-model="searchKeyword" 
-                    placeholder="搜索数据库..."
-                    style="width: 200px;"
-                  >
-                </div>
-                <button class="btn btn-sm btn-outline-primary ms-2" @click="loadDatabases" :disabled="loadingDatabases">
-                  <span v-if="loadingDatabases" class="spinner-border spinner-border-sm me-1"></span>
-                  <i class="bi bi-arrow-clockwise"></i> 刷新
-                </button>
-              </div>
-            </div>
-            
-            <div class="databases-list">
-              <div v-if="loadingDatabases" class="loading-state">
-                <div class="spinner-border text-primary"></div>
-                <span>加载数据库列表...</span>
-              </div>
-              <div v-else-if="filteredDatabases.length === 0" class="empty-state">
-                <i class="bi bi-database"></i>
-                <p>{{ searchKeyword ? '没有找到匹配的数据库' : '暂无数据库' }}</p>
-                <button class="btn btn-sm btn-primary" @click="showCreateDatabaseModal">
-                  <i class="bi bi-plus"></i> 创建数据库
-                </button>
-              </div>
-              <div v-else class="databases-list-simple">
-                <div 
-                  v-for="database in filteredDatabases" 
-                  :key="database.name" 
-                  class="database-item"
-                  @click="openDatabase(database)"
-                >
-                  <div class="database-item-icon">
-                    <i class="bi bi-database"></i>
-                  </div>
-                  <div class="database-item-name">{{ database.name }}</div>
-                  <div class="database-item-actions">
-                    <button class="btn btn-sm btn-outline-secondary" @click.stop="activeTab = 'sql'">
-                      <i class="bi bi-terminal"></i>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- SQL查询标签页 -->
-        <div v-show="activeTab === 'sql'" class="tab-panel">
-          <div class="sql-section">
-            <div class="sql-header">
-              <h6 class="sql-title">
-                <i class="bi bi-terminal"></i>
-                SQL查询
-              </h6>
-              <div class="sql-db-info" v-if="props.connection">
-                <span class="badge bg-info">{{ props.connection.name }}</span>
-              </div>
-            </div>
-            <SqlExecutor 
-              :connection="props.connection"
-              :database="''"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 创建数据库模态框 -->
-    <div v-if="showCreateDatabase" class="modal fade show d-block" style="background: rgba(0,0,0,0.5);">
-      <div class="modal-dialog">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">创建数据库</h5>
-            <button type="button" class="btn-close" @click="showCreateDatabase = false"></button>
-          </div>
-          <div class="modal-body">
-            <form>
-              <div class="mb-3">
-                <label class="form-label">数据库名称 <span class="text-danger">*</span></label>
-                <input type="text" class="form-control" v-model="newDatabase.name" placeholder="输入数据库名称" required>
-              </div>
-              
-              <!-- MySQL特定选项 -->
-              <div v-if="connection?.type === 'mysql'">
-                <div class="mb-3">
-                  <label class="form-label">字符集</label>
-                  <select class="form-select" v-model="newDatabase.options.charset">
-                    <option value="">默认</option>
-                    <option value="utf8mb4">utf8mb4</option>
-                    <option value="utf8">utf8</option>
-                    <option value="latin1">latin1</option>
-                  </select>
-                </div>
-                <div class="mb-3">
-                  <label class="form-label">排序规则</label>
-                  <select class="form-select" v-model="newDatabase.options.collation">
-                    <option value="">默认</option>
-                    <option value="utf8mb4_unicode_ci">utf8mb4_unicode_ci</option>
-                    <option value="utf8mb4_general_ci">utf8mb4_general_ci</option>
-                    <option value="utf8_unicode_ci">utf8_unicode_ci</option>
-                  </select>
-                </div>
-              </div>
-
-              <!-- PostgreSQL特定选项 -->
-              <div v-if="connection?.type === 'postgres'">
-                <div class="mb-3">
-                  <label class="form-label">所有者</label>
-                  <input type="text" class="form-control" v-model="newDatabase.options.owner" placeholder="数据库所有者">
-                </div>
-                <div class="mb-3">
-                  <label class="form-label">模板</label>
-                  <input type="text" class="form-control" v-model="newDatabase.options.template" placeholder="模板数据库">
-                </div>
-                <div class="mb-3">
-                  <label class="form-label">编码</label>
-                  <select class="form-select" v-model="newDatabase.options.encoding">
-                    <option value="">默认</option>
-                    <option value="UTF8">UTF8</option>
-                    <option value="LATIN1">LATIN1</option>
-                  </select>
-                </div>
-                <div class="mb-3">
-                  <label class="form-label">表空间</label>
-                  <input type="text" class="form-control" v-model="newDatabase.options.tablespace" placeholder="表空间">
-                </div>
-              </div>
-
-              <!-- SQL Server特定选项 -->
-              <div v-if="connection?.type === 'mssql'">
-                <div class="mb-3">
-                  <label class="form-label">排序规则</label>
-                  <input type="text" class="form-control" v-model="newDatabase.options.collation" placeholder="排序规则">
-                </div>
-              </div>
-            </form>
-          </div>
-          <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" @click="showCreateDatabase = false">取消</button>
-            <button type="button" class="btn btn-primary" @click="createDatabase" :disabled="!newDatabase.name || creatingDatabase">
-              <span v-if="creatingDatabase" class="spinner-border spinner-border-sm me-2"></span>
-              创建
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, onMounted, watch } from 'vue';
-import { useRouter } from 'vue-router';
-import type { ConnectionEntity } from '@/typings/database';
-import { useConnectionStore } from '@/stores/connection';
-import SqlExecutor from './sql-executor.vue';
-import { modal } from '@/utils/modal';
-
-const router = useRouter();
-
-const props = defineProps<{
-  connection: ConnectionEntity | null;
-}>();
-
-const emit = defineEmits<{
-  'test-connection': [connection: ConnectionEntity];
-  'edit-connection': [connection: ConnectionEntity];
-  'refresh-all': [connection: ConnectionEntity];
-  'open-sql-query': [connection: ConnectionEntity];
-  'export-schema': [connection: ConnectionEntity];
-  'view-logs': [connection: ConnectionEntity];
-  'create-database': [];
-  'open-database': [connection: ConnectionEntity, database: string];
-}>();
-
-// 初始化连接 store
-const connectionStore = useConnectionStore();
-
-// 连接统计信息
-const connectionStats = ref({
-  databaseCount: 0,
-  tableCount: 0,
-  totalSize: 0,
-  lastConnected: null as string | null
-});
-
-// 连接状态: 'unknown' | 'connected' | 'disconnected' | 'testing'
-const connectionStatus = ref<'unknown' | 'connected' | 'disconnected' | 'testing'>('unknown');
-
-// 搜索关键字
-const searchKeyword = ref('');
-
-// 折叠状态
-const isDetailsExpanded = ref(false);
-
-// 切换折叠状态
-function toggleDetails() {
-  isDetailsExpanded.value = !isDetailsExpanded.value;
-}
-
-// 创建数据库相关
-const showCreateDatabase = ref(false);
-const creatingDatabase = ref(false);
-const newDatabase = ref({
-  name: '',
-  options: {
-    charset: '',
-    collation: '',
-    owner: '',
-    template: '',
-    encoding: '',
-    tablespace: ''
-  }
-});
-
-// 标签页状态
-const activeTab = ref('databases');
-
-// 监听连接变化
-watch(() => props.connection, (newConnection) => {
-  connectionStore.setCurrentConnection(newConnection);
-  if (newConnection) {
-    loadConnectionStats();
-    // 重置连接状态为未知
-    connectionStatus.value = 'unknown';
-    // 自动测试连接
-    testConnection();
-  }
-}, { immediate: true });
-
-// 生命周期
-onMounted(() => {
-  if (props.connection) {
-    loadConnectionStats();
-  }
-});
-
-// 数据库列表（从 store 获取）
-const databases = computed(() => connectionStore.databases);
-const loadingDatabases = computed(() => connectionStore.isLoadingDatabases);
-
-// 连接状态的显示类和文本
-const connectionStatusClass = computed(() => {
-  switch (connectionStatus.value) {
-    case 'connected':
-      return 'status-online';
-    case 'disconnected':
-      return 'status-offline';
-    case 'testing':
-      return 'status-testing';
-    default:
-      return 'status-offline';
-  }
-});
-
-const connectionStatusText = computed(() => {
-  switch (connectionStatus.value) {
-    case 'connected':
-      return '已连接';
-    case 'disconnected':
-      return '未连接';
-    case 'testing':
-      return '测试中...';
-    default:
-      return '未知';
-  }
-});
-
-// 方法
-function loadConnectionStats() {
-  // 模拟加载连接统计信息
-  connectionStats.value = {
-    databaseCount: connectionStore.databaseCount,
-    tableCount: connectionStore.tableCount,
-    totalSize: 1024 * 1024 * 512, // 512MB
-    lastConnected: '2小时前'
-  };
-}
-
-function loadDatabases() {
-  connectionStore.loadDatabases();
-}
-
-const filteredDatabases = computed(() => {
-  if (!searchKeyword.value) {
-    return databases.value;
-  }
-  const keyword = searchKeyword.value.toLowerCase();
-  return databases.value.filter(db => 
-    db.name.toLowerCase().includes(keyword)
-  );
-});
-
-function openDatabase(database: any) {
-  if (props.connection) {
-    emit('open-database', props.connection, database.name);
-    router.push({
-      path: `/database/explorer`,
-      query: { connectionId: props.connection.id, database: database.name }
-    });
-  }
-}
-
-async function testConnection() {
-  if (!props.connection) return;
-  
-  connectionStatus.value = 'testing';
-  
-  try {
-    const isConnected = await connectionStore.testConnection(props.connection);
-    connectionStatus.value = isConnected ? 'connected' : 'disconnected';
-  } catch (error) {
-    console.error('连接测试失败:', error);
-    connectionStatus.value = 'disconnected';
-  }
-}
-
-function editConnection() {
-  if (props.connection) {
-    emit('edit-connection', props.connection);
-  }
-}
-
-function refreshAll() {
-  if (props.connection) {
-    emit('refresh-all', props.connection);
-  }
-}
-
-function exportSchema() {
-  if (props.connection) {
-    emit('export-schema', props.connection);
-  }
-}
-
-function viewLogs() {
-  if (props.connection) {
-    emit('view-logs', props.connection);
-  }
-}
-
-function showCreateDatabaseModal() {
-  emit('create-database');
-  showCreateDatabase.value = true;
-}
-
-async function createDatabase() {
-  if (!newDatabase.value.name) {
-    modal.warning('请输入数据库名称');
-    return;
-  }
-  
-  if (props.connection) {
-    creatingDatabase.value = true;
-    try {
-      await connectionStore.createDatabase(newDatabase.value.name);
-      modal.success('数据库创建成功');
-      showCreateDatabase.value = false;
-      // 重置表单
-      newDatabase.value = {
-        name: '',
-        options: {
-          charset: '',
-          collation: '',
-          owner: '',
-          template: '',
-          encoding: '',
-          tablespace: ''
-        }
-      };
-      // 刷新数据库列表
-      await loadDatabases();
-      // 通知父组件刷新数据库缓存
-      emit('create-database');
-    } catch (error: any) {
-      modal.error(error.message || '创建数据库失败');
-    } finally {
-      creatingDatabase.value = false;
-    }
-  }
-}
-
-// 格式化文件大小
-function formatFileSize(bytes: number): string {
-  if (bytes === 0) return '0 B';
-  const k = 1024;
-  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-}
-
-// 格式化日期时间
-function formatDate(dateString: string): string {
-  if (!dateString) return '';
-  const date = new Date(dateString);
-  return date.toLocaleString();
-}
-
-// 获取数据库类型标签
-function getDbTypeLabel(type?: string): string {
-  const typeMap: Record<string, string> = {
-    mysql: 'MySQL',
-    postgres: 'PostgreSQL',
-    mssql: 'SQL Server',
-    sqlite: 'SQLite',
-    oracle: 'Oracle'
-  };
-  return typeMap[type || ''] || 'Unknown';
-}
-
-// 获取数据库Logo类名
-function getDbLogoClass(type?: string): string {
-  return `db-${type || ''}`;
-}
-
-// 获取数据库Logo文本
-function getDbLogoText(type?: string): string {
-  const textMap: Record<string, string> = {
-    mysql: 'MY',
-    postgres: 'PG',
-    mssql: 'MS',
-    sqlite: 'SQ',
-    oracle: 'OR'
-  };
-  return textMap[type || ''] || 'DB';
-}
-</script>
-
-<style scoped>
-.connection-detail {
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  gap: 20px;
-}
-
-.connection-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-  padding: 20px;
-  background-color: #f8f9fa;
-  border-radius: 8px;
-}
-
-.connection-info {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.connection-avatar {
-  width: 60px;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
-  background-color: #e9ecef;
-}
-
-.db-logo {
-  font-size: 24px;
-  font-weight: bold;
-  color: #6c757d;
-}
-
-.db-mysql {
-  background-color: #4CAF50;
-  color: white;
-}
-
-.db-postgres {
-  background-color: #336791;
-  color: white;
-}
-
-.db-mssql {
-  background-color: #0078d4;
-  color: white;
-}
-
-.db-sqlite {
-  background-color: #003B57;
-  color: white;
-}
-
-.db-oracle {
-  background-color: #F80000;
-  color: white;
-}
-
-.connection-meta {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.connection-name {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 600;
-}
-
-.connection-type-info {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.db-type {
-  padding: 4px 12px;
-  border-radius: 12px;
-  background-color: #e9ecef;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.connection-status {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 14px;
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: #6c757d;
-}
-
-.status-online .status-dot {
-  background-color: #28a745;
-}
-
-.status-offline .status-dot {
-  background-color: #dc3545;
-}
-
-.status-testing .status-dot {
-  background-color: #ffc107;
-  animation: pulse 1s infinite;
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-.connection-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.connection-details-panel {
-  margin-bottom: 30px;
-  animation: fadeIn 0.3s ease;
-}
-
-.section-title {
-  margin: 0 0 16px 0;
-  font-size: 16px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #343a40;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #e9ecef;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.detail-card {
-  border: 1px solid #dee2e6;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.card-header {
-  padding: 16px;
-  background-color: #f8f9fa;
-  border-bottom: 1px solid #dee2e6;
-}
-
-.card-title {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.card-body {
-  padding: 16px;
-}
-
-.info-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 16px;
-  margin-bottom: 10px;
-}
-
-.info-item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 10px;
-  background-color: #f8f9fa;
-  border-radius: 6px;
-  transition: all 0.2s ease;
-}
-
-.info-item:hover {
-  background-color: #e9ecef;
-  transform: translateY(-1px);
-}
-
-.info-label {
-  font-size: 12px;
-  font-weight: 500;
-  color: #6c757d;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.info-value {
-  font-size: 14px;
-  font-weight: 500;
-  color: #343a40;
-}
-
-.db-type-badge {
-  padding: 4px 10px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-  gap: 16px;
-}
-
-.stat-item {
-  text-align: center;
-  padding: 12px;
-  background-color: #f8f9fa;
-  border-radius: 6px;
-  transition: all 0.2s ease;
-}
-
-.stat-item:hover {
-  background-color: #e9ecef;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.stat-value {
-  font-size: 20px;
-  font-weight: 600;
-  color: #343a40;
-}
-
-.stat-label {
-  font-size: 12px;
-  color: #6c757d;
-  margin-top: 4px;
-}
-
-.quick-actions {
-  margin-bottom: 30px;
-  padding: 20px;
-  background-color: #f8f9fa;
-  border-radius: 8px;
-}
-
-.actions-header {
-  margin-bottom: 16px;
-}
-
-.actions-title {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.actions-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  gap: 16px;
-}
-
-.action-btn {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 16px;
-  background-color: white;
-  border: 1px solid #dee2e6;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.action-btn:hover {
-  background-color: #e9ecef;
-  transform: translateY(-2px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.action-icon {
-  font-size: 24px;
-  color: #6c757d;
-}
-
-.action-text {
-  font-size: 14px;
-  font-weight: 500;
-  color: #343a40;
-}
-
-.connection-tabs {
-  border: 1px solid #dee2e6;
-  border-radius: 8px;
-  overflow: hidden;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.nav-tabs {
-  border-bottom: 1px solid #dee2e6;
-  background-color: #f8f9fa;
-}
-
-.nav-link {
-  border: none;
-  border-radius: 0;
-  padding: 12px 20px;
-  font-size: 14px;
-  font-weight: 500;
-  transition: all 0.2s ease;
-}
-
-.nav-link:hover {
-  background-color: #e9ecef;
-}
-
-.nav-link.active {
-  background-color: white;
-  border-bottom: 2px solid #0d6efd;
-}
-
-.tab-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.tab-panel {
-  padding: 20px;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.databases-section {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  flex: 1;
-  overflow: hidden;
-}
-
-.section-header {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.section-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.databases-list {
-  min-height: 300px;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 8px;
-}
-
-.loading-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 60px 20px;
-  gap: 16px;
-}
-
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 60px 20px;
-  gap: 16px;
-  text-align: center;
-}
-
-.empty-state i {
-  font-size: 48px;
-  color: #ced4da;
-}
-
-.empty-state p {
-  margin: 0;
-  color: #6c757d;
-  font-size: 16px;
-}
-
-.databases-list-simple {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 12px;
-}
-
-.database-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 16px;
-  border: 1px solid #dee2e6;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  text-align: center;
-  min-height: 100px;
-}
-
-.database-item:hover {
-  border-color: #0d6efd;
-  background-color: #f8f9fa;
-  transform: translateY(-2px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.database-item-icon {
-  font-size: 32px;
-  color: #6c757d;
-}
-
-.database-item-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: #343a40;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100%;
-}
-
-.database-item-actions {
-  display: flex;
-  gap: 4px;
-  margin-top: auto;
-}
-
-.sql-section {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  flex: 1;
-  overflow: hidden;
-}
-
-.sql-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.sql-title {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.sql-db-info {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .connection-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;
-  }
-  
-  .connection-actions {
-    align-self: flex-end;
-  }
-  
-  .connection-cards {
-    grid-template-columns: 1fr;
-  }
-  
-  .info-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .stats-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  
-  .actions-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  
-  .databases-list-simple {
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: 10px;
-  }
-  
-  .database-item {
-    padding: 12px;
-    min-height: 80px;
-  }
-  
-  .database-item-icon {
-    font-size: 24px;
-  }
-  
-  .database-item-name {
-    font-size: 12px;
-  }
-  
-  .nav-link {
-    padding: 10px 16px;
-    font-size: 13px;
-  }
-}
-</style>
-
+<template>
+  <div class="connection-detail">
+    <!-- 连接头部信息 -->
+    <div class="connection-header">
+      <div class="connection-info">
+        <div class="connection-avatar">
+          <div class="db-logo" :class="getDbLogoClass(connection?.type)">
+            {{ getDbLogoText(connection?.type) }}
+          </div>
+        </div>
+        <div class="connection-meta">
+          <h4 class="connection-name">{{ connection?.name }}</h4>
+          <div class="connection-type-info">
+            <span class="db-type">{{ getDbTypeLabel(connection?.type) }}</span>
+            <span class="connection-status" :class="connectionStatusClass">
+              <div class="status-dot"></div>
+              {{ connectionStatusText }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="connection-actions">
+        <button class="btn btn-sm btn-outline-info" @click="toggleDetails" title="查看/隐藏详细信息">
+          <i class="bi" :class="isDetailsExpanded ? 'bi-chevron-up' : 'bi-chevron-down'"></i> 详情
+        </button>
+        <button class="btn btn-sm btn-outline-primary" @click="testConnection">
+          <i class="bi bi-wifi"></i>
+        </button>
+        <button class="btn btn-sm btn-outline-secondary" @click="editConnection">
+          <i class="bi bi-pencil"></i> 编辑
+        </button>
+      </div>
+    </div>
+
+    <!-- 连接详情卡片 -->
+    <div v-if="isDetailsExpanded" class="connection-details-panel">
+      <div class="detail-card">
+        <div class="card-body">
+          <div class="row">
+            <!-- 基本信息 -->
+            <div class="col-md-6">
+              <h6 class="section-title">
+                <i class="bi bi-info-circle"></i>
+                基本信息
+              </h6>
+              <div class="info-grid">
+                <div class="info-item">
+                  <label class="info-label">主机地址</label>
+                  <div class="info-value">{{ connection?.host }}</div>
+                </div>
+                <div class="info-item">
+                  <label class="info-label">端口</label>
+                  <div class="info-value">{{ connection?.port }}</div>
+                </div>
+                <div class="info-item">
+                  <label class="info-label">用户名</label>
+                  <div class="info-value">{{ connection?.username }}</div>
+                </div>
+                <div class="info-item">
+                  <label class="info-label">数据库类型</label>
+                  <div class="info-value">
+                    <span class="db-type-badge" :class="getDbLogoClass(connection?.type)">
+                      {{ getDbTypeLabel(connection?.type) }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 连接统计 -->
+            <div class="col-md-6">
+              <h6 class="section-title">
+                <i class="bi bi-bar-chart"></i>
+                连接统计
+              </h6>
+              <div class="stats-grid">
+                <div class="stat-item">
+                  <div class="stat-value">{{ connectionStats.databaseCount || 0 }}</div>
+                  <div class="stat-label">数据库数量</div>
+                </div>
+                <div class="stat-item">
+                  <div class="stat-value">{{ connectionStats.tableCount || 0 }}</div>
+                  <div class="stat-label">表总数</div>
+                </div>
+                <div class="stat-item">
+                  <div class="stat-value">{{ formatFileSize(connectionStats.totalSize || 0) }}</div>
+                  <div class="stat-label">总大小</div>
+                </div>
+                <div class="stat-item">
+                  <div class="stat-value">{{ connectionStats.lastConnected || '从未' }}</div>
+                  <div class="stat-label">最后连接</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 快速操作 -->
+    <div class="quick-actions">
+      <div class="actions-header">
+        <h6 class="actions-title">
+          <i class="bi bi-lightning"></i>
+          快速操作
+        </h6>
+      </div>
+      <div class="actions-grid">
+        <button class="action-btn" @click="showCreateDatabaseModal">
+          <div class="action-icon">
+            <i class="bi bi-plus-circle"></i>
+          </div>
+          <div class="action-text">创建数据库</div>
+        </button>
+        <!-- <button class="action-btn" @click="refreshAll">
+          <div class="action-icon">
+            <i class="bi bi-arrow-clockwise"></i>
+          </div>
+          <div class="action-text">刷新所有数据库</div>
+        </button> -->
+        <!-- <button class="action-btn" @click="activeTab = 'sql'">
+          <div class="action-icon">
+            <i class="bi bi-terminal"></i>
+          </div>
+          <div class="action-text">SQL查询</div>
+        </button> -->
+        <button class="action-btn" @click="exportSchema">
+          <div class="action-icon">
+            <i class="bi bi-download"></i>
+          </div>
+          <div class="action-text">导出架构</div>
+        </button>
+        <button class="action-btn" @click="viewLogs">
+          <div class="action-icon">
+            <i class="bi bi-file-text"></i>
+          </div>
+          <div class="action-text">查看日志</div>
+        </button>
+      </div>
+    </div>
+
+    <!-- 标签页 -->
+    <div class="connection-tabs">
+      <ul class="nav nav-tabs">
+        <li class="nav-item">
+          <button 
+            class="nav-link" 
+            :class="{ active: activeTab === 'databases' }"
+            @click="activeTab = 'databases'"
+          >
+            <i class="bi bi-database-fill"></i> 数据库列表
+            <span class="badge bg-primary ms-1">{{ databases.length }}</span>
+          </button>
+        </li>
+        <li class="nav-item">
+          <button 
+            class="nav-link" 
+            :class="{ active: activeTab === 'sql' }"
+            @click="activeTab = 'sql'"
+          >
+            <i class="bi bi-terminal"></i> SQL查询
+          </button>
+        </li>
+      </ul>
+
+      <div class="tab-content">
+        <!-- 数据库列表标签页 -->
+        <div v-show="activeTab === 'databases'" class="tab-panel">
+          <div class="databases-section">
+            <div class="section-header">
+              <div class="section-actions">
+                <div class="search-box">
+                  <input 
+                    type="text" 
+                    class="form-control form-control-sm" 
+                    v-model="searchKeyword" 
+                    placeholder="搜索数据库..."
+                    style="width: 200px;"
+                  >
+                </div>
+                <button class="btn btn-sm btn-outline-primary ms-2" @click="loadDatabases" :disabled="loadingDatabases">
+                  <span v-if="loadingDatabases" class="spinner-border spinner-border-sm me-1"></span>
+                  <i class="bi bi-arrow-clockwise"></i> 刷新
+                </button>
+              </div>
+            </div>
+            
+            <div class="databases-list">
+              <div v-if="loadingDatabases" class="loading-state">
+                <div class="spinner-border text-primary"></div>
+                <span>加载数据库列表...</span>
+              </div>
+              <div v-else-if="filteredDatabases.length === 0" class="empty-state">
+                <i class="bi bi-database"></i>
+                <p>{{ searchKeyword ? '没有找到匹配的数据库' : '暂无数据库' }}</p>
+                <button class="btn btn-sm btn-primary" @click="showCreateDatabaseModal">
+                  <i class="bi bi-plus"></i> 创建数据库
+                </button>
+              </div>
+              <div v-else class="databases-list-simple">
+                <div 
+                  v-for="database in filteredDatabases" 
+                  :key="database.name" 
+                  class="database-item"
+                  @click="openDatabase(database)"
+                >
+                  <div class="database-item-icon">
+                    <i class="bi bi-database"></i>
+                  </div>
+                  <div class="database-item-name">{{ database.name }}</div>
+                  <div class="database-item-actions">
+                    <button class="btn btn-sm btn-outline-secondary" @click.stop="activeTab = 'sql'">
+                      <i class="bi bi-terminal"></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- SQL查询标签页 -->
+        <div v-show="activeTab === 'sql'" class="tab-panel">
+          <div class="sql-section">
+            <div class="sql-header">
+              <h6 class="sql-title">
+                <i class="bi bi-terminal"></i>
+                SQL查询
+              </h6>
+              <div class="sql-db-info" v-if="props.connection">
+                <span class="badge bg-info">{{ props.connection.name }}</span>
+              </div>
+            </div>
+            <SqlExecutor 
+              :connection="props.connection"
+              :database="''"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 创建数据库模态框 -->
+    <div v-if="showCreateDatabase" class="modal fade show d-block" style="background: rgba(0,0,0,0.5);">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">创建数据库</h5>
+            <button type="button" class="btn-close" @click="showCreateDatabase = false"></button>
+          </div>
+          <div class="modal-body">
+            <form>
+              <div class="mb-3">
+                <label class="form-label">数据库名称 <span class="text-danger">*</span></label>
+                <input type="text" class="form-control" v-model="newDatabase.name" placeholder="输入数据库名称" required>
+              </div>
+              
+              <!-- MySQL特定选项 -->
+              <div v-if="connection?.type === 'mysql'">
+                <div class="mb-3">
+                  <label class="form-label">字符集</label>
+                  <select class="form-select" v-model="newDatabase.options.charset">
+                    <option value="">默认</option>
+                    <option value="utf8mb4">utf8mb4</option>
+                    <option value="utf8">utf8</option>
+                    <option value="latin1">latin1</option>
+                  </select>
+                </div>
+                <div class="mb-3">
+                  <label class="form-label">排序规则</label>
+                  <select class="form-select" v-model="newDatabase.options.collation">
+                    <option value="">默认</option>
+                    <option value="utf8mb4_unicode_ci">utf8mb4_unicode_ci</option>
+                    <option value="utf8mb4_general_ci">utf8mb4_general_ci</option>
+                    <option value="utf8_unicode_ci">utf8_unicode_ci</option>
+                  </select>
+                </div>
+              </div>
+
+              <!-- PostgreSQL特定选项 -->
+              <div v-if="connection?.type === 'postgres'">
+                <div class="mb-3">
+                  <label class="form-label">所有者</label>
+                  <input type="text" class="form-control" v-model="newDatabase.options.owner" placeholder="数据库所有者">
+                </div>
+                <div class="mb-3">
+                  <label class="form-label">模板</label>
+                  <input type="text" class="form-control" v-model="newDatabase.options.template" placeholder="模板数据库">
+                </div>
+                <div class="mb-3">
+                  <label class="form-label">编码</label>
+                  <select class="form-select" v-model="newDatabase.options.encoding">
+                    <option value="">默认</option>
+                    <option value="UTF8">UTF8</option>
+                    <option value="LATIN1">LATIN1</option>
+                  </select>
+                </div>
+                <div class="mb-3">
+                  <label class="form-label">表空间</label>
+                  <input type="text" class="form-control" v-model="newDatabase.options.tablespace" placeholder="表空间">
+                </div>
+              </div>
+
+              <!-- SQL Server特定选项 -->
+              <div v-if="connection?.type === 'mssql'">
+                <div class="mb-3">
+                  <label class="form-label">排序规则</label>
+                  <input type="text" class="form-control" v-model="newDatabase.options.collation" placeholder="排序规则">
+                </div>
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" @click="showCreateDatabase = false">取消</button>
+            <button type="button" class="btn btn-primary" @click="createDatabase" :disabled="!newDatabase.name || creatingDatabase">
+              <span v-if="creatingDatabase" class="spinner-border spinner-border-sm me-2"></span>
+              创建
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import type { ConnectionEntity } from '@/typings/database';
+import { useConnectionStore } from '@/stores/connection';
+import SqlExecutor from './sql-executor.vue';
+import { modal } from '@/utils/modal';
+
+const router = useRouter();
+
+const props = defineProps<{
+  connection: ConnectionEntity | null;
+}>();
+
+const emit = defineEmits<{
+  'test-connection': [connection: ConnectionEntity];
+  'edit-connection': [connection: ConnectionEntity];
+  'refresh-all': [connection: ConnectionEntity];
+  'open-sql-query': [connection: ConnectionEntity];
+  'export-schema': [connection: ConnectionEntity];
+  'view-logs': [connection: ConnectionEntity];
+  'create-database': [];
+  'open-database': [connection: ConnectionEntity, database: string];
+}>();
+
+// 初始化连接 store
+const connectionStore = useConnectionStore();
+
+// 连接统计信息
+const connectionStats = ref({
+  databaseCount: 0,
+  tableCount: 0,
+  totalSize: 0,
+  lastConnected: null as string | null
+});
+
+// 连接状态: 'unknown' | 'connected' | 'disconnected' | 'testing'
+const connectionStatus = ref<'unknown' | 'connected' | 'disconnected' | 'testing'>('unknown');
+
+// 搜索关键字
+const searchKeyword = ref('');
+
+// 折叠状态
+const isDetailsExpanded = ref(false);
+
+// 切换折叠状态
+function toggleDetails() {
+  isDetailsExpanded.value = !isDetailsExpanded.value;
+}
+
+// 创建数据库相关
+const showCreateDatabase = ref(false);
+const creatingDatabase = ref(false);
+const newDatabase = ref({
+  name: '',
+  options: {
+    charset: '',
+    collation: '',
+    owner: '',
+    template: '',
+    encoding: '',
+    tablespace: ''
+  }
+});
+
+// 标签页状态
+const activeTab = ref('databases');
+
+// 监听连接变化
+watch(() => props.connection, (newConnection) => {
+  connectionStore.setCurrentConnection(newConnection);
+  if (newConnection) {
+    loadConnectionStats();
+    // 重置连接状态为未知
+    connectionStatus.value = 'unknown';
+    // 自动测试连接
+    testConnection();
+  }
+}, { immediate: true });
+
+// 生命周期
+onMounted(() => {
+  if (props.connection) {
+    loadConnectionStats();
+  }
+});
+
+// 数据库列表（从 store 获取）
+const databases = computed(() => connectionStore.databases);
+const loadingDatabases = computed(() => connectionStore.isLoadingDatabases);
+
+// 连接状态的显示类和文本
+const connectionStatusClass = computed(() => {
+  switch (connectionStatus.value) {
+    case 'connected':
+      return 'status-online';
+    case 'disconnected':
+      return 'status-offline';
+    case 'testing':
+      return 'status-testing';
+    default:
+      return 'status-offline';
+  }
+});
+
+const connectionStatusText = computed(() => {
+  switch (connectionStatus.value) {
+    case 'connected':
+      return '已连接';
+    case 'disconnected':
+      return '未连接';
+    case 'testing':
+      return '测试中...';
+    default:
+      return '未知';
+  }
+});
+
+// 方法
+function loadConnectionStats() {
+  // 模拟加载连接统计信息
+  connectionStats.value = {
+    databaseCount: connectionStore.databaseCount,
+    tableCount: connectionStore.tableCount,
+    totalSize: 1024 * 1024 * 512, // 512MB
+    lastConnected: '2小时前'
+  };
+}
+
+function loadDatabases() {
+  connectionStore.loadDatabases();
+}
+
+const filteredDatabases = computed(() => {
+  if (!searchKeyword.value) {
+    return databases.value;
+  }
+  const keyword = searchKeyword.value.toLowerCase();
+  return databases.value.filter(db => 
+    db.name.toLowerCase().includes(keyword)
+  );
+});
+
+function openDatabase(database: any) {
+  if (props.connection) {
+    emit('open-database', props.connection, database.name);
+    router.push({
+      path: `/database/explorer`,
+      query: { connectionId: props.connection.id, database: database.name }
+    });
+  }
+}
+
+async function testConnection() {
+  if (!props.connection) return;
+  
+  connectionStatus.value = 'testing';
+  
+  try {
+    const isConnected = await connectionStore.testConnection(props.connection);
+    connectionStatus.value = isConnected ? 'connected' : 'disconnected';
+  } catch (error) {
+    console.error('连接测试失败:', error);
+    connectionStatus.value = 'disconnected';
+  }
+}
+
+function editConnection() {
+  if (props.connection) {
+    emit('edit-connection', props.connection);
+  }
+}
+
+function refreshAll() {
+  if (props.connection) {
+    emit('refresh-all', props.connection);
+  }
+}
+
+function exportSchema() {
+  if (props.connection) {
+    emit('export-schema', props.connection);
+  }
+}
+
+function viewLogs() {
+  if (props.connection) {
+    emit('view-logs', props.connection);
+  }
+}
+
+function showCreateDatabaseModal() {
+  emit('create-database');
+  showCreateDatabase.value = true;
+}
+
+async function createDatabase() {
+  if (!newDatabase.value.name) {
+    modal.warning('请输入数据库名称');
+    return;
+  }
+  
+  if (props.connection) {
+    creatingDatabase.value = true;
+    try {
+      await connectionStore.createDatabase(newDatabase.value.name);
+      modal.success('数据库创建成功');
+      showCreateDatabase.value = false;
+      // 重置表单
+      newDatabase.value = {
+        name: '',
+        options: {
+          charset: '',
+          collation: '',
+          owner: '',
+          template: '',
+          encoding: '',
+          tablespace: ''
+        }
+      };
+      // 刷新数据库列表
+      await loadDatabases();
+      // 通知父组件刷新数据库缓存
+      emit('create-database');
+    } catch (error: any) {
+      modal.error(error.message || '创建数据库失败');
+    } finally {
+      creatingDatabase.value = false;
+    }
+  }
+}
+
+// 格式化文件大小
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+// 格式化日期时间
+function formatDate(dateString: string): string {
+  if (!dateString) return '';
+  const date = new Date(dateString);
+  return date.toLocaleString();
+}
+
+// 获取数据库类型标签
+function getDbTypeLabel(type?: string): string {
+  const typeMap: Record<string, string> = {
+    mysql: 'MySQL',
+    postgres: 'PostgreSQL',
+    mssql: 'SQL Server',
+    sqlite: 'SQLite',
+    oracle: 'Oracle'
+  };
+  return typeMap[type || ''] || 'Unknown';
+}
+
+// 获取数据库Logo类名
+function getDbLogoClass(type?: string): string {
+  return `db-${type || ''}`;
+}
+
+// 获取数据库Logo文本
+function getDbLogoText(type?: string): string {
+  const textMap: Record<string, string> = {
+    mysql: 'MY',
+    postgres: 'PG',
+    mssql: 'MS',
+    sqlite: 'SQ',
+    oracle: 'OR'
+  };
+  return textMap[type || ''] || 'DB';
+}
+</script>
+
+<style scoped>
+.connection-detail {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 20px;
+}
+
+.connection-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 20px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+}
+
+.connection-info {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.connection-avatar {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background-color: #e9ecef;
+}
+
+.db-logo {
+  font-size: 24px;
+  font-weight: bold;
+  color: #6c757d;
+}
+
+.db-mysql {
+  background-color: #4CAF50;
+  color: white;
+}
+
+.db-postgres {
+  background-color: #336791;
+  color: white;
+}
+
+.db-mssql {
+  background-color: #0078d4;
+  color: white;
+}
+
+.db-sqlite {
+  background-color: #003B57;
+  color: white;
+}
+
+.db-oracle {
+  background-color: #F80000;
+  color: white;
+}
+
+.connection-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.connection-name {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.connection-type-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.db-type {
+  padding: 4px 12px;
+  border-radius: 12px;
+  background-color: #e9ecef;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.connection-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #6c757d;
+}
+
+.status-online .status-dot {
+  background-color: #28a745;
+}
+
+.status-offline .status-dot {
+  background-color: #dc3545;
+}
+
+.status-testing .status-dot {
+  background-color: #ffc107;
+  animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.connection-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.connection-details-panel {
+  margin-bottom: 30px;
+  animation: fadeIn 0.3s ease;
+}
+
+.section-title {
+  margin: 0 0 16px 0;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #343a40;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e9ecef;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.detail-card {
+  border: 1px solid #dee2e6;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.card-header {
+  padding: 16px;
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.card-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.card-body {
+  padding: 16px;
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 16px;
+  margin-bottom: 10px;
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px;
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.info-item:hover {
+  background-color: #e9ecef;
+  transform: translateY(-1px);
+}
+
+.info-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: #6c757d;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.info-value {
+  font-size: 14px;
+  font-weight: 500;
+  color: #343a40;
+}
+
+.db-type-badge {
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  gap: 16px;
+}
+
+.stat-item {
+  text-align: center;
+  padding: 12px;
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.stat-item:hover {
+  background-color: #e9ecef;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.stat-value {
+  font-size: 20px;
+  font-weight: 600;
+  color: #343a40;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #6c757d;
+  margin-top: 4px;
+}
+
+.quick-actions {
+  margin-bottom: 30px;
+  padding: 20px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+}
+
+.actions-header {
+  margin-bottom: 16px;
+}
+
+.actions-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.actions-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 16px;
+}
+
+.action-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  background-color: white;
+  border: 1px solid #dee2e6;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.action-btn:hover {
+  background-color: #e9ecef;
+  transform: translateY(-2px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.action-icon {
+  font-size: 24px;
+  color: #6c757d;
+}
+
+.action-text {
+  font-size: 14px;
+  font-weight: 500;
+  color: #343a40;
+}
+
+.connection-tabs {
+  border: 1px solid #dee2e6;
+  border-radius: 8px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.nav-tabs {
+  border-bottom: 1px solid #dee2e6;
+  background-color: #f8f9fa;
+}
+
+.nav-link {
+  border: none;
+  border-radius: 0;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.nav-link:hover {
+  background-color: #e9ecef;
+}
+
+.nav-link.active {
+  background-color: white;
+  border-bottom: 2px solid #0d6efd;
+}
+
+.tab-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.tab-panel {
+  padding: 20px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.databases-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  flex: 1;
+  overflow: hidden;
+}
+
+.section-header {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.section-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.databases-list {
+  min-height: 300px;
+  height: 100%;
+  overflow-y: auto;
+  padding-right: 8px;
+}
+
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  gap: 16px;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  gap: 16px;
+  text-align: center;
+}
+
+.empty-state i {
+  font-size: 48px;
+  color: #ced4da;
+}
+
+.empty-state p {
+  margin: 0;
+  color: #6c757d;
+  font-size: 16px;
+}
+
+.databases-list-simple {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 12px;
+}
+
+.database-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  border: 1px solid #dee2e6;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: center;
+  min-height: 100px;
+}
+
+.database-item:hover {
+  border-color: #0d6efd;
+  background-color: #f8f9fa;
+  transform: translateY(-2px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.database-item-icon {
+  font-size: 32px;
+  color: #6c757d;
+}
+
+.database-item-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #343a40;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.database-item-actions {
+  display: flex;
+  gap: 4px;
+  margin-top: auto;
+}
+
+.sql-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  flex: 1;
+  overflow: hidden;
+}
+
+.sql-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sql-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sql-db-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .connection-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+  
+  .connection-actions {
+    align-self: flex-end;
+  }
+  
+  .connection-cards {
+    grid-template-columns: 1fr;
+  }
+  
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .actions-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .databases-list-simple {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 10px;
+  }
+  
+  .database-item {
+    padding: 12px;
+    min-height: 80px;
+  }
+  
+  .database-item-icon {
+    font-size: 24px;
+  }
+  
+  .database-item-name {
+    font-size: 12px;
+  }
+  
+  .nav-link {
+    padding: 10px 16px;
+    font-size: 13px;
+  }
+}
+</style>
+