fdb2 1.0.2 → 1.0.4

package/dist/public/explorer.css

@@ -0,0 +1,2137 @@
+
+/* 继承原有的样式，这里可以添加组件特定的样式 */
+.connection-form-modern[data-v-093594aa] {
+  padding: 0;
+}
+.form-section[data-v-093594aa] {
+  margin-bottom: 2rem;
+}
+.section-header[data-v-093594aa] {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 2px solid #f0f0f0;
+}
+.section-icon[data-v-093594aa] {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  margin-right: 1rem;
+}
+.section-title[data-v-093594aa] {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin: 0;
+  color: #333;
+}
+.section-content[data-v-093594aa] {
+  padding-left: 56px;
+}
+.form-grid[data-v-093594aa] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+}
+.form-group-modern[data-v-093594aa] {
+  margin-bottom: 1rem;
+}
+.form-label-modern[data-v-093594aa] {
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  color: #555;
+  margin-bottom: 0.5rem;
+  font-size: 0.9rem;
+}
+.form-control-modern[data-v-093594aa],
+.form-select-modern[data-v-093594aa] {
+  width: 100%;
+  padding: 0.75rem;
+  border: 2px solid #e9ecef;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  transition: all 0.3s ease;
+}
+.form-control-modern[data-v-093594aa]:focus,
+.form-select-modern[data-v-093594aa]:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+.form-check-modern[data-v-093594aa] {
+  display: flex;
+  align-items: flex-start;
+  padding: 0;
+}
+.form-check-input-modern[data-v-093594aa] {
+  margin-right: 0.75rem;
+  margin-top: 0.25rem;
+}
+.form-check-label-modern[data-v-093594aa] {
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+}
+.check-text[data-v-093594aa] {
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 0.25rem;
+}
+.check-description[data-v-093594aa] {
+  font-size: 0.85rem;
+  color: #666;
+}
+.required[data-v-093594aa] {
+  color: #dc3545;
+  margin-left: 0.25rem;
+}
+.error-content[data-v-093594aa] {
+  display: flex;
+  align-items: center;
+  padding: 1.5rem;
+  gap: 1rem;
+}
+.error-icon[data-v-093594aa] {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #dc3545 0%, #ff6b6b 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 1.5rem;
+  flex-shrink: 0;
+}
+.error-message[data-v-093594aa] {
+  flex: 1;
+  color: #333;
+  font-size: 0.95rem;
+  line-height: 1.6;
+}
+
+.sql-executor[data-v-ac4aced1] {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.sql-toolbar[data-v-ac4aced1] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  padding: 10px;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+}
+.toolbar-left[data-v-ac4aced1],
+.toolbar-right[data-v-ac4aced1] {
+  display: flex;
+  gap: 8px;
+}
+.sql-container[data-v-ac4aced1] {
+  position: relative;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+  overflow: hidden;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.sql-editor[data-v-ac4aced1] {
+  position: relative;
+  overflow: auto;
+  flex: 0 1 300px;
+  min-height: 200px;
+}
+.sql-result[data-v-ac4aced1] {
+  position: relative;
+  overflow: auto;
+  border-top: 1px solid #dee2e6;
+  flex: 1;
+}
+.codemirror-editor[data-v-ac4aced1] {
+  height: 100%;
+  width: 100%;
+}
+.resizer[data-v-ac4aced1] {
+  height: 8px;
+  background-color: #e9ecef;
+  cursor: ns-resize;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.resizer[data-v-ac4aced1]:hover {
+  background-color: #dee2e6;
+}
+.resizer[data-v-ac4aced1]::before {
+  content: '';
+  width: 40px;
+  height: 2px;
+  background-color: #adb5bd;
+  border-radius: 1px;
+}
+.resizer.resizing[data-v-ac4aced1] {
+  background-color: #dee2e6;
+}
+.resizer.resizing[data-v-ac4aced1]::before {
+  background-color: #6c757d;
+}
+.sql-result[data-v-ac4aced1] {
+  position: relative;
+  overflow: auto;
+  border-top: 1px solid #dee2e6;
+}
+.result-content[data-v-ac4aced1] {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.result-header[data-v-ac4aced1] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px;
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+}
+.result-title[data-v-ac4aced1] {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.sql-loading[data-v-ac4aced1] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.result-stats[data-v-ac4aced1] {
+  display: flex;
+  gap: 8px;
+}
+.result-info[data-v-ac4aced1] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 12px;
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+}
+.result-actions[data-v-ac4aced1] {
+  display: flex;
+  gap: 8px;
+}
+.result-table-container[data-v-ac4aced1] {
+  flex: 1;
+  overflow: auto;
+}
+
+/* 对象结果样式 */
+.result-object[data-v-ac4aced1] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.object-container[data-v-ac4aced1] {
+  flex: 1;
+  overflow: auto;
+}
+.object-container table[data-v-ac4aced1] {
+  width: 100%;
+}
+.object-container th[data-v-ac4aced1]:first-child {
+  width: 20%;
+  min-width: 100px;
+}
+.object-container td[data-v-ac4aced1]:first-child {
+  font-weight: 500;
+  background-color: #f8f9fa;
+}
+.sql-loading-state[data-v-ac4aced1] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  flex: 1;
+}
+.sql-empty-result[data-v-ac4aced1],
+.sql-error[data-v-ac4aced1] {
+  padding: 12px;
+  flex: 1;
+}
+.result-empty[data-v-ac4aced1] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #6c757d;
+  gap: 10px;
+}
+.result-empty i[data-v-ac4aced1] {
+  font-size: 48px;
+  opacity: 0.5;
+}
+.json-result[data-v-ac4aced1] {
+  flex: 1;
+  overflow: hidden;
+}
+.json-result .codemirror-editor[data-v-ac4aced1] {
+  height: 100%;
+  width: 100%;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+.sql-toolbar[data-v-ac4aced1] {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+}
+.toolbar-left[data-v-ac4aced1],
+  .toolbar-right[data-v-ac4aced1] {
+    justify-content: center;
+}
+}
+
+.connection-detail[data-v-d46cb2d8] {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 20px;
+}
+.connection-header[data-v-d46cb2d8] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 20px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+}
+.connection-info[data-v-d46cb2d8] {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.connection-avatar[data-v-d46cb2d8] {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background-color: #e9ecef;
+}
+.db-logo[data-v-d46cb2d8] {
+  font-size: 24px;
+  font-weight: bold;
+  color: #6c757d;
+}
+.db-mysql[data-v-d46cb2d8] {
+  background-color: #4CAF50;
+  color: white;
+}
+.db-postgres[data-v-d46cb2d8] {
+  background-color: #336791;
+  color: white;
+}
+.db-mssql[data-v-d46cb2d8] {
+  background-color: #0078d4;
+  color: white;
+}
+.db-sqlite[data-v-d46cb2d8] {
+  background-color: #003B57;
+  color: white;
+}
+.db-oracle[data-v-d46cb2d8] {
+  background-color: #F80000;
+  color: white;
+}
+.connection-meta[data-v-d46cb2d8] {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.connection-name[data-v-d46cb2d8] {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+.connection-type-info[data-v-d46cb2d8] {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.db-type[data-v-d46cb2d8] {
+  padding: 4px 12px;
+  border-radius: 12px;
+  background-color: #e9ecef;
+  font-size: 12px;
+  font-weight: 500;
+}
+.connection-status[data-v-d46cb2d8] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+}
+.status-dot[data-v-d46cb2d8] {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #6c757d;
+}
+.status-online .status-dot[data-v-d46cb2d8] {
+  background-color: #28a745;
+}
+.status-offline .status-dot[data-v-d46cb2d8] {
+  background-color: #dc3545;
+}
+.status-testing .status-dot[data-v-d46cb2d8] {
+  background-color: #ffc107;
+  animation: pulse-d46cb2d8 1s infinite;
+}
+@keyframes pulse-d46cb2d8 {
+0%, 100% {
+    opacity: 1;
+}
+50% {
+    opacity: 0.5;
+}
+}
+.connection-actions[data-v-d46cb2d8] {
+  display: flex;
+  gap: 8px;
+}
+.connection-details-panel[data-v-d46cb2d8] {
+  margin-bottom: 30px;
+  animation: fadeIn-d46cb2d8 0.3s ease;
+}
+.section-title[data-v-d46cb2d8] {
+  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-d46cb2d8 {
+from {
+    opacity: 0;
+    transform: translateY(-10px);
+}
+to {
+    opacity: 1;
+    transform: translateY(0);
+}
+}
+.detail-card[data-v-d46cb2d8] {
+  border: 1px solid #dee2e6;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.card-header[data-v-d46cb2d8] {
+  padding: 16px;
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+}
+.card-title[data-v-d46cb2d8] {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.card-body[data-v-d46cb2d8] {
+  padding: 16px;
+}
+.info-grid[data-v-d46cb2d8] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 16px;
+  margin-bottom: 10px;
+}
+.info-item[data-v-d46cb2d8] {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px;
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+.info-item[data-v-d46cb2d8]:hover {
+  background-color: #e9ecef;
+  transform: translateY(-1px);
+}
+.info-label[data-v-d46cb2d8] {
+  font-size: 12px;
+  font-weight: 500;
+  color: #6c757d;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.info-value[data-v-d46cb2d8] {
+  font-size: 14px;
+  font-weight: 500;
+  color: #343a40;
+}
+.db-type-badge[data-v-d46cb2d8] {
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+.stats-grid[data-v-d46cb2d8] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  gap: 16px;
+}
+.stat-item[data-v-d46cb2d8] {
+  text-align: center;
+  padding: 12px;
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+.stat-item[data-v-d46cb2d8]:hover {
+  background-color: #e9ecef;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+.stat-value[data-v-d46cb2d8] {
+  font-size: 20px;
+  font-weight: 600;
+  color: #343a40;
+}
+.stat-label[data-v-d46cb2d8] {
+  font-size: 12px;
+  color: #6c757d;
+  margin-top: 4px;
+}
+.quick-actions[data-v-d46cb2d8] {
+  margin-bottom: 30px;
+  padding: 20px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+}
+.actions-header[data-v-d46cb2d8] {
+  margin-bottom: 16px;
+}
+.actions-title[data-v-d46cb2d8] {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.actions-grid[data-v-d46cb2d8] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 16px;
+}
+.action-btn[data-v-d46cb2d8] {
+  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[data-v-d46cb2d8]:hover {
+  background-color: #e9ecef;
+  transform: translateY(-2px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.action-icon[data-v-d46cb2d8] {
+  font-size: 24px;
+  color: #6c757d;
+}
+.action-text[data-v-d46cb2d8] {
+  font-size: 14px;
+  font-weight: 500;
+  color: #343a40;
+}
+.connection-tabs[data-v-d46cb2d8] {
+  border: 1px solid #dee2e6;
+  border-radius: 8px;
+  overflow: hidden;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.nav-tabs[data-v-d46cb2d8] {
+  border-bottom: 1px solid #dee2e6;
+  background-color: #f8f9fa;
+}
+.nav-link[data-v-d46cb2d8] {
+  border: none;
+  border-radius: 0;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+.nav-link[data-v-d46cb2d8]:hover {
+  background-color: #e9ecef;
+}
+.nav-link.active[data-v-d46cb2d8] {
+  background-color: white;
+  border-bottom: 2px solid #0d6efd;
+}
+.tab-content[data-v-d46cb2d8] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.tab-panel[data-v-d46cb2d8] {
+  padding: 20px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.databases-section[data-v-d46cb2d8] {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  flex: 1;
+  overflow: hidden;
+}
+.section-header[data-v-d46cb2d8] {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.section-actions[data-v-d46cb2d8] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.databases-list[data-v-d46cb2d8] {
+  min-height: 300px;
+  height: 100%;
+  overflow-y: auto;
+  padding-right: 8px;
+}
+.loading-state[data-v-d46cb2d8] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  gap: 16px;
+}
+.empty-state[data-v-d46cb2d8] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  gap: 16px;
+  text-align: center;
+}
+.empty-state i[data-v-d46cb2d8] {
+  font-size: 48px;
+  color: #ced4da;
+}
+.empty-state p[data-v-d46cb2d8] {
+  margin: 0;
+  color: #6c757d;
+  font-size: 16px;
+}
+.databases-list-simple[data-v-d46cb2d8] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 12px;
+}
+.database-item[data-v-d46cb2d8] {
+  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[data-v-d46cb2d8]:hover {
+  border-color: #0d6efd;
+  background-color: #f8f9fa;
+  transform: translateY(-2px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+.database-item-icon[data-v-d46cb2d8] {
+  font-size: 32px;
+  color: #6c757d;
+}
+.database-item-name[data-v-d46cb2d8] {
+  font-size: 14px;
+  font-weight: 500;
+  color: #343a40;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+.database-item-actions[data-v-d46cb2d8] {
+  display: flex;
+  gap: 4px;
+  margin-top: auto;
+}
+.sql-section[data-v-d46cb2d8] {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  flex: 1;
+  overflow: hidden;
+}
+.sql-header[data-v-d46cb2d8] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.sql-title[data-v-d46cb2d8] {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.sql-db-info[data-v-d46cb2d8] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+.connection-header[data-v-d46cb2d8] {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+}
+.connection-actions[data-v-d46cb2d8] {
+    align-self: flex-end;
+}
+.connection-cards[data-v-d46cb2d8] {
+    grid-template-columns: 1fr;
+}
+.info-grid[data-v-d46cb2d8] {
+    grid-template-columns: 1fr;
+}
+.stats-grid[data-v-d46cb2d8] {
+    grid-template-columns: repeat(2, 1fr);
+}
+.actions-grid[data-v-d46cb2d8] {
+    grid-template-columns: repeat(2, 1fr);
+}
+.databases-list-simple[data-v-d46cb2d8] {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 10px;
+}
+.database-item[data-v-d46cb2d8] {
+    padding: 12px;
+    min-height: 80px;
+}
+.database-item-icon[data-v-d46cb2d8] {
+    font-size: 24px;
+}
+.database-item-name[data-v-d46cb2d8] {
+    font-size: 12px;
+}
+.nav-link[data-v-d46cb2d8] {
+    padding: 10px 16px;
+    font-size: 13px;
+}
+}
+
+.section-title[data-v-081084ef] {
+  color: #495057;
+  font-weight: 600;
+  border-bottom: 2px solid #e9ecef;
+  padding-bottom: 0.5rem;
+  margin-bottom: 1rem;
+}
+.sql-preview[data-v-081084ef] {
+  font-family: 'Courier New', monospace;
+  font-size: 0.875rem;
+  max-height: 200px;
+  overflow-y: auto;
+  border: 1px solid #dee2e6;
+}
+.table th[data-v-081084ef] {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+.table td[data-v-081084ef] {
+  padding: 0!important;
+}
+.table .form-control[data-v-081084ef], .table .form-select[data-v-081084ef] {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+.form-control-sm[data-v-081084ef], .form-select-sm[data-v-081084ef] {
+  font-size: 0.875rem;
+}
+.modal-content[data-v-081084ef] {
+  max-height: 90vh;
+  overflow-y: auto;
+}
+.modal-body[data-v-081084ef] {
+  max-height: calc(90vh - 120px);
+  overflow-y: auto;
+}
+.input-group-sm .form-control[data-v-081084ef] {
+  border-radius: 0;
+}
+.input-group-sm .form-control[data-v-081084ef]:first-child {
+  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+.input-group-sm .form-control[data-v-081084ef]:last-child {
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+.text-muted[data-v-081084ef] {
+  color: #6c757d !important;
+}
+
+.db-tools[data-v-94a9d8f2] {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+.tools-header[data-v-94a9d8f2] {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+.tools-title[data-v-94a9d8f2] {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.tools-content[data-v-94a9d8f2] {
+  padding: 1.5rem;
+  max-height: 500px;
+  overflow-y: auto;
+}
+.tool-section[data-v-94a9d8f2] {
+  margin-bottom: 2rem;
+}
+.section-title[data-v-94a9d8f2] {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.tool-actions[data-v-94a9d8f2] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.tool-actions .btn[data-v-94a9d8f2] {
+  min-width: 120px;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.health-results[data-v-94a9d8f2] {
+  max-height: 400px;
+  overflow-y: auto;
+}
+.health-item[data-v-94a9d8f2] {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+.health-status[data-v-94a9d8f2] {
+  min-width: 150px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.health-message[data-v-94a9d8f2] {
+  flex: 1;
+  color: #6b7280;
+}
+.modal[data-v-94a9d8f2] {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.modal-dialog[data-v-94a9d8f2] {
+  max-width: 600px;
+}
+.modal-lg .modal-dialog[data-v-94a9d8f2] {
+  max-width: 800px;
+}
+.modal-header[data-v-94a9d8f2] {
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border-bottom: 1px solid #e2e8f0;
+}
+.modal-title[data-v-94a9d8f2] {
+  color: #1e293b;
+  font-weight: 600;
+}
+.modal-footer[data-v-94a9d8f2] {
+  background: #f8fafc;
+  border-top: 1px solid #e2e8f0;
+}
+
+.database-detail[data-v-fd20d470] {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.sql-executor-section[data-v-fd20d470] {
+  margin: 15px 0;
+  padding: 15px;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  border: 1px solid #dee2e6;
+  flex: 1;
+  display: flex;
+}
+
+/* 加载状态样式 */
+.loading-state[data-v-fd20d470] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 0;
+  color: #6c757d;
+}
+.loading-state .spinner-border[data-v-fd20d470] {
+  margin-bottom: 15px;
+  color: #0d6efd;
+}
+.loading-state p[data-v-fd20d470] {
+  margin: 0;
+  font-size: 14px;
+}
+.database-header[data-v-fd20d470] {
+  padding: 1rem;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  border-bottom: 1px solid #e2e8f0;
+}
+.database-header-content[data-v-fd20d470] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
+}
+.database-info[data-v-fd20d470] {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.database-icon[data-v-fd20d470] {
+  width: 60px;
+  height: 60px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 1.5rem;
+}
+.database-meta h4[data-v-fd20d470] {
+  margin: 0 0 0.5rem 0;
+  color: #1e293b;
+  font-weight: 600;
+}
+.connection-info[data-v-fd20d470] {
+  display: flex;
+  gap: 0.75rem;
+}
+.connection-name[data-v-fd20d470] {
+  background: rgba(102, 126, 234, 0.1);
+  color: #667eea;
+  padding: 0.25rem 0.5rem;
+  border-radius: 12px;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+.connection-type[data-v-fd20d470] {
+  background: #f1f5f9;
+  color: #64748b;
+  padding: 0.25rem 0.5rem;
+  border-radius: 12px;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+.database-stats[data-v-fd20d470] {
+  display: flex;
+  gap: 2rem;
+}
+.stat-item[data-v-fd20d470] {
+  text-align: center;
+}
+.stat-value[data-v-fd20d470] {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #1e293b;
+  margin-bottom: 0.25rem;
+}
+.stat-label[data-v-fd20d470] {
+  font-size: 0.875rem;
+  color: #64748b;
+  font-weight: 500;
+}
+.database-tabs[data-v-fd20d470] {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.nav-tabs[data-v-fd20d470] {
+  background: #f8fafc;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 0 1.5rem;
+}
+.nav-link[data-v-fd20d470] {
+  border: none;
+  background: transparent;
+  color: #64748b;
+  padding: 1rem 1.5rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+.nav-link[data-v-fd20d470]:hover {
+  color: #667eea;
+  background: rgba(102, 126, 234, 0.1);
+}
+.nav-link.active[data-v-fd20d470] {
+  color: #667eea;
+  background: white;
+  border-bottom: 2px solid #667eea;
+}
+.tab-content[data-v-fd20d470] {
+  padding: 1.5rem;
+  overflow-y: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.tab-panel[data-v-fd20d470] {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+.table-grid[data-v-fd20d470] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 1rem;
+}
+.table-card[data-v-fd20d470] {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  overflow: hidden;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+.table-card[data-v-fd20d470]:hover {
+  border-color: #667eea;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
+  transform: translateY(-2px);
+}
+.card-header[data-v-fd20d470] {
+  background: #f8fafc;
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.table-icon[data-v-fd20d470] {
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+.table-name[data-v-fd20d470] {
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 0.25rem;
+}
+.table-engine[data-v-fd20d470] {
+  font-size: 0.75rem;
+  color: #64748b;
+  background: #f1f5f9;
+  padding: 0.125rem 0.375rem;
+  border-radius: 8px;
+}
+.card-body[data-v-fd20d470] {
+  padding: 1rem;
+}
+.table-stats[data-v-fd20d470] {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+}
+.stat[data-v-fd20d470] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.table-comment[data-v-fd20d470] {
+  font-size: 0.875rem;
+  color: #64748b;
+  font-style: italic;
+  margin-bottom: 0.75rem;
+  line-height: 1.4;
+}
+.table-actions[data-v-fd20d470] {
+  display: flex;
+  gap: 0.5rem;
+}
+.empty-state[data-v-fd20d470] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: #64748b;
+  text-align: center;
+  font-size: 1.5rem;
+}
+.empty-state i[data-v-fd20d470] {
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+
+/* 视图和存储过程卡片样式 */
+.views-grid[data-v-fd20d470], .procedures-grid[data-v-fd20d470] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1rem;
+}
+.view-card[data-v-fd20d470], .procedure-card[data-v-fd20d470] {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  overflow: hidden;
+  transition: all 0.2s ease;
+}
+.view-card[data-v-fd20d470]:hover, .procedure-card[data-v-fd20d470]:hover {
+  border-color: #667eea;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
+  transform: translateY(-2px);
+}
+.view-card .card-header[data-v-fd20d470], .procedure-card .card-header[data-v-fd20d470] {
+  background: #f8fafc;
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.view-icon[data-v-fd20d470], .procedure-icon[data-v-fd20d470] {
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+.procedure-icon[data-v-fd20d470] {
+  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+}
+.view-name[data-v-fd20d470], .procedure-name[data-v-fd20d470] {
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 0.25rem;
+}
+.view-comment[data-v-fd20d470], .procedure-comment[data-v-fd20d470] {
+  font-size: 0.75rem;
+  color: #64748b;
+  margin-bottom: 0.5rem;
+  line-height: 1.4;
+}
+.procedure-type[data-v-fd20d470] {
+  display: flex;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+}
+.view-card .card-body[data-v-fd20d470], .procedure-card .card-body[data-v-fd20d470] {
+  padding: 1rem;
+}
+.view-actions[data-v-fd20d470], .procedure-actions[data-v-fd20d470] {
+  display: flex;
+  gap: 0.5rem;
+}
+.views-actions[data-v-fd20d470], .procedures-actions[data-v-fd20d470], .tables-actions[data-v-fd20d470] {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding: 0.75rem 1rem;
+  background: #f8fafc;
+  border-radius: 8px;
+}
+
+/* 模态框样式 */
+.modal-dialog[data-v-fd20d470] {
+  margin-top: 10vh;
+}
+.modal-content[data-v-fd20d470] {
+  border-radius: 12px;
+  border: none;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+}
+.modal-header[data-v-fd20d470] {
+  border-bottom: 1px solid #e2e8f0;
+  padding: 1rem 1.5rem;
+}
+.modal-title[data-v-fd20d470] {
+  margin: 0;
+  font-weight: 600;
+  color: #1e293b;
+}
+.modal-body[data-v-fd20d470] {
+  padding: 1.5rem;
+}
+.modal-footer[data-v-fd20d470] {
+  border-top: 1px solid #e2e8f0;
+  padding: 1rem 1.5rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.modal[data-v-bc488007] {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.modal-dialog[data-v-bc488007] {
+  max-width: 800px;
+}
+.form-label[data-v-bc488007] {
+  font-weight: 500;
+  color: #374151;
+}
+.form-control[data-v-bc488007], .form-select[data-v-bc488007] {
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+}
+.form-control[data-v-bc488007]:focus, .form-select[data-v-bc488007]:focus {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+.modal-header[data-v-bc488007] {
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border-bottom: 1px solid #e2e8f0;
+}
+.modal-title[data-v-bc488007] {
+  color: #1e293b;
+  font-weight: 600;
+}
+.modal-footer[data-v-bc488007] {
+  background: #f8fafc;
+  border-top: 1px solid #e2e8f0;
+}
+.text-danger[data-v-bc488007] {
+  color: #ef4444;
+}
+.text-muted[data-v-bc488007] {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+.json-editor textarea[data-v-bc488007] {
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  background-color: #f8fafc;
+  border-color: #e2e8f0;
+  resize: vertical;
+}
+.json-editor textarea[data-v-bc488007]:focus {
+  background-color: #ffffff;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+.json-editor .text-muted[data-v-bc488007] {
+  font-size: 0.75rem;
+}
+
+.table-detail[data-v-365fca24] {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.table-header[data-v-365fca24] {
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+  padding: 15px 20px;
+}
+.table-header-content[data-v-365fca24] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.table-info[data-v-365fca24] {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+.table-icon[data-v-365fca24] {
+  font-size: 32px;
+  color: #495057;
+}
+.table-meta[data-v-365fca24] {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.table-name[data-v-365fca24] {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+.table-breadcrumb[data-v-365fca24] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.875rem;
+  color: #6c757d;
+}
+.table-stats[data-v-365fca24] {
+  display: flex;
+  gap: 20px;
+}
+.stat-item[data-v-365fca24] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+.stat-value[data-v-365fca24] {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #495057;
+}
+.stat-label[data-v-365fca24] {
+  font-size: 0.75rem;
+  color: #6c757d;
+}
+.table-toolbar[data-v-365fca24] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+}
+.toolbar-left[data-v-365fca24] {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+.toolbar-right[data-v-365fca24] {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+.table-tabs[data-v-365fca24] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.nav-tabs[data-v-365fca24] {
+  border-bottom: 1px solid #dee2e6;
+  background-color: #f8f9fa;
+}
+.nav-tabs .nav-link[data-v-365fca24] {
+  color: #495057;
+  border: none;
+  border-bottom: 3px solid transparent;
+  border-radius: 0;
+  padding: 10px 15px;
+  font-weight: 500;
+}
+.nav-tabs .nav-link[data-v-365fca24]:hover {
+  background-color: #e9ecef;
+  border-bottom-color: #adb5bd;
+}
+.nav-tabs .nav-link.active[data-v-365fca24] {
+  background-color: #fff;
+  border-bottom-color: #0d6efd;
+  color: #0d6efd;
+}
+.tab-content[data-v-365fca24] {
+  flex: 1;
+  overflow: auto;
+  padding: 20px;
+  background-color: #fff;
+}
+.tab-panel[data-v-365fca24] {
+  height: 100%;
+}
+.data-content[data-v-365fca24] {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.data-content.loading[data-v-365fca24] {
+  opacity: 0.7;
+  pointer-events: none;
+}
+.table-responsive[data-v-365fca24] {
+  flex: 1;
+  overflow: auto;
+}
+.column-header[data-v-365fca24] {
+  position: relative;
+}
+.column-key[data-v-365fca24] {
+  position: absolute;
+  top: -5px;
+  right: -15px;
+  color: #0d6efd;
+  font-size: 0.75rem;
+}
+.cell-value[data-v-365fca24] {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.loading-state[data-v-365fca24] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  gap: 15px;
+}
+.empty-state[data-v-365fca24] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  gap: 15px;
+  color: #6c757d;
+}
+.empty-state i[data-v-365fca24] {
+  font-size: 48px;
+  opacity: 0.5;
+}
+.pagination-nav[data-v-365fca24] {
+  margin-top: 20px;
+  border-top: 1px solid #dee2e6;
+  padding-top: 15px;
+}
+.pagination-container[data-v-365fca24] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.pagination-info[data-v-365fca24] {
+  font-size: 0.875rem;
+  color: #6c757d;
+}
+.page-size-selector[data-v-365fca24] {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.page-jump[data-v-365fca24] {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.structure-actions[data-v-365fca24] {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+.structure-table[data-v-365fca24], .indexes-table[data-v-365fca24], .relations-table[data-v-365fca24] {
+  overflow: auto;
+}
+.structure-table table[data-v-365fca24], .indexes-table table[data-v-365fca24], .relations-table table[data-v-365fca24] {
+  width: 100%;
+}
+.sql-section[data-v-365fca24] {
+  height: 100%;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+.table-header-content[data-v-365fca24] {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 15px;
+}
+.table-stats[data-v-365fca24] {
+    width: 100%;
+    justify-content: space-around;
+}
+.table-toolbar[data-v-365fca24] {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+}
+.toolbar-left[data-v-365fca24], .toolbar-right[data-v-365fca24] {
+    justify-content: center;
+}
+.pagination-container[data-v-365fca24] {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 15px;
+}
+.pagination[data-v-365fca24] {
+    width: 100%;
+    justify-content: center;
+}
+}
+
+.database-explorer[data-v-f2a7bdef] {
+  height: 100vh;
+  min-height: 600px;
+}
+.explorer-layout[data-v-f2a7bdef] {
+  display: flex;
+  height: 100%;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+/* 左侧边栏 */
+.explorer-sidebar[data-v-f2a7bdef] {
+  width: 350px;
+  flex-shrink: 0;
+  border-right: 1px solid #e1e5e9;
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+}
+.sidebar-header[data-v-f2a7bdef] {
+  padding: 1rem 0.875rem;
+  border-bottom: 1px solid #e1e5e9;
+  background: #f8f9fa;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.sidebar-title[data-v-f2a7bdef] {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: #24292f;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.sidebar-title i[data-v-f2a7bdef] {
+  color: #656d76;
+}
+.sidebar-actions[data-v-f2a7bdef] {
+  display: flex;
+  gap: 0.25rem;
+}
+.sidebar-actions .btn[data-v-f2a7bdef] {
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+  border: 1px solid #d0d7de;
+  background-color: #ffffff;
+  color: #24292f;
+  border-radius: 6px;
+  transition: all 0.15s ease;
+}
+.sidebar-actions .btn[data-v-f2a7bdef]:hover {
+  background-color: #f3f4f6;
+  border-color: #d0d7de;
+}
+.sidebar-actions .btn-outline-primary[data-v-f2a7bdef] {
+  border-color: #0969da;
+  color: #0969da;
+}
+.sidebar-actions .btn-outline-primary[data-v-f2a7bdef]:hover {
+  background-color: #0969da;
+  border-color: #0969da;
+  color: #ffffff;
+}
+.sidebar-actions .btn-outline-success[data-v-f2a7bdef] {
+  border-color: #1a7f37;
+  color: #1a7f37;
+}
+.sidebar-actions .btn-outline-success[data-v-f2a7bdef]:hover {
+  background-color: #1a7f37;
+  border-color: #1a7f37;
+  color: #ffffff;
+}
+.sidebar-content[data-v-f2a7bdef] {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem 0;
+}
+
+/* 树形结构 */
+.tree-container[data-v-f2a7bdef] {
+  font-size: 0.875rem;
+  user-select: none;
+}
+.tree-node[data-v-f2a7bdef] {
+  margin-bottom: 0;
+}
+.tree-children[data-v-f2a7bdef] {
+  margin-left: 0.75rem;
+  border-left: 1px solid #e1e5e9;
+  padding-left: 0.5rem;
+}
+.node-content[data-v-f2a7bdef] {
+  display: flex;
+  align-items: center;
+  padding: 0.375rem 0.75rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  position: relative;
+  margin-right: 0.5rem;
+  border-radius: 6px;
+  gap: 0.25rem;
+}
+.node-expand[data-v-f2a7bdef] {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-right: 0.25rem;
+}
+.node-expand i[data-v-f2a7bdef] {
+  font-size: 0.6875rem;
+  color: #656d76;
+  transition: transform 0.15s ease;
+}
+.node-expand i.expanded[data-v-f2a7bdef] {
+  transform: rotate(90deg);
+}
+.node-main[data-v-f2a7bdef] {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+}
+.node-content[data-v-f2a7bdef]:hover {
+  background-color: #f3f4f6;
+}
+.tree-node.selected .node-content[data-v-f2a7bdef] {
+  background-color: #eff1ff;
+  color: #0969da;
+  font-weight: 500;
+  box-shadow: 0 2px 8px rgba(9, 105, 218, 0.15);
+}
+.tree-node.selected .node-content[data-v-f2a7bdef]::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: linear-gradient(135deg, #0969da, #0550ae);
+  border-radius: 3px 0 0 3px;
+}
+.node-icon[data-v-f2a7bdef] {
+  width: 20px;
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-right: 0.5rem;
+}
+.node-icon i[data-v-f2a7bdef] {
+  font-size: 0.875rem;
+}
+.node-label[data-v-f2a7bdef] {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-width: 0;
+}
+.connection-name[data-v-f2a7bdef],
+.database-name[data-v-f2a7bdef],
+.table-name[data-v-f2a7bdef] {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.25;
+}
+.tree-node.selected .connection-name[data-v-f2a7bdef],
+.tree-node.selected .database-name[data-v-f2a7bdef],
+.tree-node.selected .table-name[data-v-f2a7bdef] {
+  font-weight: 600;
+}
+.connection-type[data-v-f2a7bdef],
+.table-info[data-v-f2a7bdef] {
+  font-size: 0.75rem;
+  color: #656d76;
+  background-color: #f6f8fa;
+  padding: 0.125rem 0.375rem;
+  border-radius: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+.tree-node.selected .connection-type[data-v-f2a7bdef],
+.tree-node.selected .table-info[data-v-f2a7bdef] {
+  background-color: rgba(9, 105, 218, 0.1);
+  color: #0969da;
+}
+.node-actions[data-v-f2a7bdef] {
+  display: flex;
+  gap: 0.125rem;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.node-content:hover .node-actions[data-v-f2a7bdef] {
+  opacity: 1;
+}
+.btn-icon[data-v-f2a7bdef] {
+  padding: 0.25rem;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  transition: background-color 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+.btn-icon[data-v-f2a7bdef]:hover {
+  background-color: #e1e4e8;
+}
+.btn-icon i[data-v-f2a7bdef] {
+  font-size: 0.6875rem;
+  color: #656d76;
+}
+.tree-node.selected .btn-icon[data-v-f2a7bdef]:hover {
+  background-color: rgba(9, 105, 218, 0.1);
+}
+.tree-node.selected .btn-icon i[data-v-f2a7bdef] {
+  color: #656d76;
+}
+.tree-node.selected .btn-icon:hover i[data-v-f2a7bdef] {
+  color: #0969da;
+}
+.btn-icon-danger[data-v-f2a7bdef]:hover {
+  background-color: #fee2e2;
+}
+.btn-icon-danger:hover i[data-v-f2a7bdef] {
+  color: #dc2626;
+}
+.node-spinner[data-v-f2a7bdef] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.spinner-border-sm[data-v-f2a7bdef] {
+  width: 1rem;
+  height: 1rem;
+  border-width: 0.15em;
+}
+
+/* 连接节点样式 */
+.connection-content[data-v-f2a7bdef] {
+  font-weight: 500;
+  color: #24292f;
+}
+.connection-content[data-v-f2a7bdef]:hover {
+  background-color: #f3f4f6;
+}
+.tree-node.selected .connection-content[data-v-f2a7bdef] {
+  background-color: #eff1ff;
+  color: #0969da;
+}
+
+/* 数据库节点样式 */
+.database-content[data-v-f2a7bdef] {
+  color: #24292f;
+}
+.database-content[data-v-f2a7bdef]:hover {
+  background-color: #f6f8fa;
+}
+.tree-node.selected .database-content[data-v-f2a7bdef] {
+  background-color: #eff1ff;
+  color: #0969da;
+}
+
+/* 表节点样式 */
+.table-content[data-v-f2a7bdef] {
+  color: #24292f;
+}
+.table-content[data-v-f2a7bdef]:hover {
+  background-color: #f6f8fa;
+}
+.tree-node.selected .table-content[data-v-f2a7bdef] {
+  background-color: #eff1ff;
+  color: #0969da;
+}
+
+/* 数据库品牌色彩 */
+.db-mysql[data-v-f2a7bdef] { 
+  color: #00758f !important; 
+  background: linear-gradient(135deg, #00758f, #005a70);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.db-mysql-bg[data-v-f2a7bdef] { background: linear-gradient(135deg, #00758f, #005a70);
+}
+.db-postgres[data-v-f2a7bdef] { 
+  color: #336791 !important; 
+  background: linear-gradient(135deg, #336791, #2a5278);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.db-postgres-bg[data-v-f2a7bdef] { background: linear-gradient(135deg, #336791, #2a5278);
+}
+.db-sqlite[data-v-f2a7bdef] { 
+  color: #003b57 !important; 
+  background: linear-gradient(135deg, #003b57, #002d42);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.db-sqlite-bg[data-v-f2a7bdef] { background: linear-gradient(135deg, #003b57, #002d42);
+}
+.db-mssql[data-v-f2a7bdef] { 
+  color: #cc2927 !important; 
+  background: linear-gradient(135deg, #cc2927, #a62220);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.db-mssql-bg[data-v-f2a7bdef] { background: linear-gradient(135deg, #cc2927, #a62220);
+}
+.db-oracle[data-v-f2a7bdef] { 
+  color: #f80000 !important; 
+  background: linear-gradient(135deg, #f80000, #d40000);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.db-oracle-bg[data-v-f2a7bdef] { background: linear-gradient(135deg, #f80000, #d40000);
+}
+.db-default[data-v-f2a7bdef] { 
+  color: #64748b !important; 
+  background: linear-gradient(135deg, #64748b, #475569);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.db-default-bg[data-v-f2a7bdef] { background: linear-gradient(135deg, #64748b, #475569);
+}
+.tree-node.selected .db-mysql[data-v-f2a7bdef],
+.tree-node.selected .db-postgres[data-v-f2a7bdef],
+.tree-node.selected .db-sqlite[data-v-f2a7bdef],
+.tree-node.selected .db-mssql[data-v-f2a7bdef],
+.tree-node.selected .db-oracle[data-v-f2a7bdef],
+.tree-node.selected .db-default[data-v-f2a7bdef] {
+  color: white !important;
+  background: none;
+  -webkit-text-fill-color: white;
+}
+
+/* 数据库Logo图标 */
+.db-logo[data-v-f2a7bdef] {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 0.75rem;
+  color: white;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+.db-logo-mysql[data-v-f2a7bdef] {
+  background: linear-gradient(135deg, #00758f, #005a70);
+  border: 1px solid #004d61;
+}
+.db-logo-postgres[data-v-f2a7bdef] {
+  background: linear-gradient(135deg, #336791, #2a5278);
+  border: 1px solid #244566;
+}
+.db-logo-sqlite[data-v-f2a7bdef] {
+  background: linear-gradient(135deg, #003b57, #002d42);
+  border: 1px solid #002939;
+}
+.db-logo-mssql[data-v-f2a7bdef] {
+  background: linear-gradient(135deg, #cc2927, #a62220);
+  border: 1px solid #8b1f1d;
+}
+.db-logo-oracle[data-v-f2a7bdef] {
+  background: linear-gradient(135deg, #f80000, #d40000);
+  border: 1px solid #b30000;
+}
+.db-logo-default[data-v-f2a7bdef] {
+  background: linear-gradient(135deg, #64748b, #475569);
+  border: 1px solid #334155;
+}
+
+/* 右侧主内容 */
+.explorer-main[data-v-f2a7bdef] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: 100%;
+}
+
+/* 详情组件容器 */
+.explorer-main[data-v-f2a7bdef] > * {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.content-tabs[data-v-f2a7bdef] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.nav-tabs[data-v-f2a7bdef] {
+  background: #f8fafc;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 0 1rem;
+}
+.nav-link[data-v-f2a7bdef] {
+  border: none;
+  background: transparent;
+  color: #64748b;
+  padding: 1rem 1.5rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+.nav-link[data-v-f2a7bdef]:hover {
+  color: #667eea;
+  background: rgba(102, 126, 234, 0.1);
+}
+.nav-link.active[data-v-f2a7bdef] {
+  color: #667eea;
+  background: white;
+  border-bottom: 2px solid #667eea;
+}
+.tab-content[data-v-f2a7bdef] {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+  height: calc(100% - 60px); /* 减去导航栏高度 */
+}
+
+/* 概览样式 */
+.overview-section[data-v-f2a7bdef] {
+  padding: 1rem 0;
+}
+.info-cards[data-v-f2a7bdef] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
+.info-card[data-v-f2a7bdef] {
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  border-radius: 12px;
+  padding: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  border: 1px solid #e2e8f0;
+}
+.card-icon[data-v-f2a7bdef] {
+  width: 48px;
+  height: 48px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 1.25rem;
+}
+.card-content h6[data-v-f2a7bdef] {
+  margin: 0 0 0.25rem 0;
+  color: #64748b;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+.card-value[data-v-f2a7bdef] {
+  margin: 0;
+  color: #1e293b;
+  font-weight: 600;
+  font-size: 1.1rem;
+}
+
+/* 表格网格 */
+.table-grid[data-v-f2a7bdef] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1rem;
+}
+.table-card[data-v-f2a7bdef] {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 1rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.table-card[data-v-f2a7bdef]:hover {
+  border-color: #667eea;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
+  transform: translateY(-2px);
+}
+.table-card .card-header[data-v-f2a7bdef] {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+.table-icon[data-v-f2a7bdef] {
+  width: 32px;
+  height: 32px;
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+.table-name[data-v-f2a7bdef] {
+  font-weight: 600;
+  color: #1e293b;
+}
+.table-stats[data-v-f2a7bdef] {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 0.5rem;
+}
+.stat[data-v-f2a7bdef] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.stat-label[data-v-f2a7bdef] {
+  font-size: 0.75rem;
+  color: #64748b;
+}
+.stat-value[data-v-f2a7bdef] {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #1e293b;
+}
+.table-comment[data-v-f2a7bdef] {
+  font-size: 0.75rem;
+  color: #64748b;
+  font-style: italic;
+}
+
+/* 数据工具栏 */
+.data-toolbar[data-v-f2a7bdef] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding: 0.75rem;
+  background: #f8fafc;
+  border-radius: 8px;
+}
+.toolbar-left[data-v-f2a7bdef],
+.toolbar-right[data-v-f2a7bdef] {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+/* 空状态 */
+.empty-state[data-v-f2a7bdef],
+.default-state[data-v-f2a7bdef] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #64748b;
+  text-align: center;
+}
+.empty-icon[data-v-f2a7bdef],
+.default-icon[data-v-f2a7bdef] {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+.empty-text h5[data-v-f2a7bdef],
+.default-content h5[data-v-f2a7bdef] {
+  color: #64748b;
+  margin-bottom: 0.5rem;
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+.explorer-layout[data-v-f2a7bdef] {
+    flex-direction: column;
+}
+.explorer-sidebar[data-v-f2a7bdef] {
+    width: 100%;
+    height: 40vh;
+    border-right: none;
+    border-bottom: 1px solid #e2e8f0;
+}
+.info-cards[data-v-f2a7bdef] {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+}
+.table-grid[data-v-f2a7bdef] {
+    grid-template-columns: 1fr;
+}
+}