fdb2 1.0.35 → 1.0.37

package/dist/public/index.css

@@ -61,11 +61,11 @@ to { transform: translateY(0);
 
 /* 基础变量 - 现代色彩方案 */
 :root {
-  /* 主色调 - 紫色渐变 */
+  /* 主色调 - 扁平纯色（gradient 变量名保留以兼容既有引用） */
   --db-primary-color: #667eea;
   --db-primary-dark: #5a67d8;
   --db-primary-light: #7c8bf8;
-  --db-primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --db-primary-gradient: var(--db-primary-color);
   
   /* 辅助色彩 */
   --db-secondary-color: #6c757d;
@@ -85,7 +85,7 @@ to { transform: translateY(0);
   
   /* 背景渐变 */
   --db-bg-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-  --db-card-gradient: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+  --db-card-gradient: linear-gradient(135deg, var(--db-surface) 0%, #f8fafc 100%);
   
   /* 阴影 */
   --db-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
@@ -112,6 +112,43 @@ to { transform: translateY(0);
   /* 字体 */
   --db-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   --db-font-mono: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', monospace;
+
+  /* 表面 / 边框 / 文本令牌（VSCode webview 主题跟随用，暗色值见 body.vscode-dark 块） */
+  --db-surface: #ffffff;
+  --db-on-accent: #ffffff;
+  --db-border: #e2e8f0;
+  --db-border-gray: #e5e7eb;
+  --db-border-light: #d1d5db;
+  --db-border-lighter: #dee2e6;
+  --db-border-soft: #e9ecef;
+  --db-bg-soft: #f3f4f6;
+  --db-bg-soft2: #f8f9fa;
+  --db-bg-soft3: #fafbfc;
+  --db-bg-soft4: #fafafa;
+  --db-bg-soft5: #f6f8fa;
+  --db-text-body: #374151;
+  --db-text-muted: #64748b;
+  --db-text-faint: #94a3b8;
+  --db-danger-bg: #fee2e2;
+  --db-success-bg: #d1fae5;
+  --db-warning-bg: #fef3c7;
+  --db-info-bg: #dbeafe;
+  --db-primary-bg: #e0e7ff;
+  --db-code-bg: #282c34;
+  --db-code-fg: #abb2bf;
+
+  /* 语义底色上的文字色（浅色主题用深色阶；暗色主题在下方各暗色块覆写为亮色阶） */
+  --db-success-fg: #047857;
+  --db-warning-fg: #b45309;
+  --db-danger-fg: #b91c1c;
+  --db-info-fg: #1d4ed8;
+
+  /* JSON 语法高亮（浅色：GitHub Light 配色；暗色在各暗色块覆写为 GitHub Dark） */
+  --db-json-key: #d04255;
+  --db-json-string: #22863a;
+  --db-json-number: #005cc5;
+  --db-json-boolean: #d73a49;
+  --db-json-null: #6f42c1;
 }
 
 /* 全局布局 - 现代桌面应用风格 */
@@ -214,7 +251,7 @@ body {
 
 /* 现代表格样式 */
 .table {
-  background: white;
+  background: var(--db-surface);
   border-radius: var(--db-radius-lg);
   overflow: hidden;
   box-shadow: var(--db-shadow-sm);
@@ -254,52 +291,31 @@ body {
 
 /* 现代按钮样式 */
 .btn {
-  border-radius: var(--db-radius-md);
+  border-radius: var(--db-radius-sm);
   font-weight: 600;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
   border: none;
   position: relative;
-  overflow: hidden;
   letter-spacing: 0.025em;
-  box-shadow: var(--db-shadow-sm);
 }
 
-.btn::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.2);
-  transform: translate(-50%, -50%);
-  transition: width 0.6s, height 0.6s;
+.btn:hover:not(:disabled) {
+  opacity: 0.92;
 }
 
-.btn:active::before {
-  width: 300px;
-  height: 300px;
-}
-
-.btn:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--db-shadow-lg);
-}
-
-.btn:active {
-  transform: translateY(0);
+.btn:active:not(:disabled) {
+  opacity: 1;
 }
 
 /* 主要按钮 */
 .btn-primary {
   background: var(--db-primary-gradient);
-  color: white;
+  color: var(--db-on-accent);
 }
 
 .btn-primary:hover {
   background: var(--db-primary-dark);
-  color: white;
+  color: var(--db-on-accent);
 }
 
 /* 次要按钮 */
@@ -316,26 +332,26 @@ body {
 
 /* 成功按钮 */
 .btn-success {
-  background: linear-gradient(135deg, var(--db-accent-color) 0%, #059669 100%);
-  color: white;
+  background: var(--db-accent-color);
+  color: var(--db-on-accent);
 }
 
 /* 警告按钮 */
 .btn-warning {
-  background: linear-gradient(135deg, var(--db-warning-color) 0%, #d97706 100%);
-  color: white;
+  background: var(--db-warning-color);
+  color: var(--db-on-accent);
 }
 
 /* 危险按钮 */
 .btn-danger {
-  background: linear-gradient(135deg, var(--db-danger-color) 0%, #dc2626 100%);
-  color: white;
+  background: var(--db-danger-color);
+  color: var(--db-on-accent);
 }
 
 /* 信息按钮 */
 .btn-info {
-  background: linear-gradient(135deg, var(--db-info-color) 0%, #2563eb 100%);
-  color: white;
+  background: var(--db-info-color);
+  color: var(--db-on-accent);
 }
 
 /* 轮廓按钮 */
@@ -347,7 +363,7 @@ body {
 
 .btn-outline-primary:hover {
   background: var(--db-primary-gradient);
-  color: white;
+  color: var(--db-on-accent);
   border-color: transparent;
 }
 
@@ -374,19 +390,19 @@ body {
 }
 
 .badge.bg-success {
-  background: linear-gradient(135deg, var(--db-accent-color) 0%, #059669 100%) !important;
+  background: var(--db-accent-color) !important;
 }
 
 .badge.bg-warning {
-  background: linear-gradient(135deg, var(--db-warning-color) 0%, #d97706 100%) !important;
+  background: var(--db-warning-color) !important;
 }
 
 .badge.bg-danger {
-  background: linear-gradient(135deg, var(--db-danger-color) 0%, #dc2626 100%) !important;
+  background: var(--db-danger-color) !important;
 }
 
 .badge.bg-info {
-  background: linear-gradient(135deg, var(--db-info-color) 0%, #2563eb 100%) !important;
+  background: var(--db-info-color) !important;
 }
 
 /* 现代导航样式 */
@@ -445,7 +461,7 @@ body {
 
 .navbar-nav .nav-link.active {
   background: var(--db-primary-gradient);
-  color: white;
+  color: var(--db-on-accent);
   font-weight: 700;
   box-shadow: var(--db-shadow-md);
 }
@@ -502,7 +518,11 @@ body {
 }
 
 .btn-close {
-  background: var(--db-gray-light);
+  background-color: var(--db-gray-light);
+  background-image: var(--bs-btn-close-bg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 0.8em auto;
   border: none;
   border-radius: var(--db-radius-md);
   width: 32px;
@@ -514,8 +534,7 @@ body {
 }
 
 .btn-close:hover {
-  background: var(--db-danger-color);
-  color: white;
+  background-color: var(--db-danger-color);
   transform: rotate(90deg);
 }
 
@@ -526,7 +545,7 @@ body {
   padding: 0.75rem var(--db-spacing-md);
   font-size: 0.95rem;
   transition: all 0.3s ease;
-  background: white;
+  background: var(--db-surface);
   font-weight: 500;
 }
 
@@ -543,7 +562,7 @@ body {
   padding: 0.75rem var(--db-spacing-md);
   font-size: 0.95rem;
   transition: all 0.3s ease;
-  background: white;
+  background: var(--db-surface);
   font-weight: 500;
   cursor: pointer;
 }
@@ -557,7 +576,7 @@ body {
 
 .form-label {
   font-weight: 700;
-  color: #1e293b;
+  color: var(--db-dark-color);
   margin-bottom: var(--db-spacing-sm);
   font-size: 0.9rem;
   letter-spacing: 0.025em;
@@ -568,7 +587,7 @@ body {
 
 .form-text {
   font-size: 0.875rem;
-  color: #334155;
+  color: var(--db-darker-color);
   margin-top: var(--db-spacing-xs);
 }
 
@@ -596,7 +615,7 @@ body {
 
 /* 代码样式 */
 code {
-  background-color: #e2e8f0;
+  background-color: var(--db-border);
   color: #be185d;
   padding: 0.2rem 0.4rem;
   border-radius: 3px;
@@ -604,8 +623,8 @@ code {
 }
 
 pre {
-  background-color: #f1f5f9;
-  border: 1px solid #cbd5e1;
+  background-color: var(--db-gray-light);
+  border: 1px solid var(--db-gray-medium);
   border-radius: 6px;
   padding: 1rem;
   margin: 0;
@@ -621,22 +640,22 @@ pre {
 }
 
 .alert-success {
-  background-color: #dcfce7;
+  background-color: var(--db-success-bg);
   color: #166534;
 }
 
 .alert-danger {
-  background-color: #fee2e2;
+  background-color: var(--db-danger-bg);
   color: #991b1b;
 }
 
 .alert-warning {
-  background-color: #fef3c7;
+  background-color: var(--db-warning-bg);
   color: #92400e;
 }
 
 .alert-info {
-  background-color: #dbeafe;
+  background-color: var(--db-info-bg);
   color: #1e40af;
 }
 
@@ -659,7 +678,7 @@ pre {
 }
 
 .dropdown-item:hover {
-  background-color: #e2e8f0;
+  background-color: var(--db-border);
   transform: translateX(2px);
 }
 
@@ -672,14 +691,14 @@ pre {
 }
 
 .list-group-item:hover {
-  background-color: #e2e8f0;
+  background-color: var(--db-border);
   transform: translateX(4px);
 }
 
 /* 页面头部样式 */
 .page-header {
-  background: linear-gradient(135deg, var(--db-primary-color) 0%, #0056b3 100%);
-  color: white;
+  background: var(--db-primary-color);
+  color: var(--db-on-accent);
   padding: 2rem 0;
   margin-bottom: 2rem;
 }
@@ -786,17 +805,17 @@ pre {
 }
 
 ::-webkit-scrollbar-track {
-  background: #f1f1f1;
+  background: var(--db-bg-soft);
   border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
+  background: var(--db-border-light);
   border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #a8a8a8;
+  background: var(--db-border-light);
 }
 
 /* 加载状态 */
@@ -813,7 +832,7 @@ pre {
   width: 20px;
   height: 20px;
   margin: -10px 0 0 -10px;
-  border: 2px solid #f3f3f3;
+  border: 2px solid var(--db-bg-soft);
   border-top: 2px solid var(--db-primary-color);
   border-radius: 50%;
   animation: spin 1s linear infinite;
@@ -833,7 +852,7 @@ pre {
 }
 
 .status-offline {
-  color: #64748b;
+  color: var(--db-text-muted);
   display: flex;
   align-items: center;
   gap: var(--db-spacing-xs);
@@ -857,23 +876,23 @@ pre {
 /* 数据库类型样式 */
 .db-icon-mysql { 
   color: #00758f; 
-  background: linear-gradient(135deg, #00758f 0%, #005a70 100%);
+  background: #00758f;
 }
 .db-icon-postgres { 
   color: #336791; 
-  background: linear-gradient(135deg, #336791 0%, #2a5278 100%);
+  background: #336791;
 }
 .db-icon-sqlite { 
   color: #003b57; 
-  background: linear-gradient(135deg, #003b57 0%, #002d42 100%);
+  background: #003b57;
 }
 .db-icon-mssql { 
   color: #cc2927; 
-  background: linear-gradient(135deg, #cc2927 0%, #a62220 100%);
+  background: #cc2927;
 }
 .db-icon-oracle { 
   color: #f80000; 
-  background: linear-gradient(135deg, #f80000 0%, #d40000 100%);
+  background: #f80000;
 }
 
 /* 现代工具类 */
@@ -968,9 +987,13 @@ pre {
   }
 }
 
-/* 暗色模式支持 */
+/* 暗色模式支持
+ *  - 桌面端（Electron/浏览器）：跟随 OS，via prefers-color-scheme；
+ *    排除 webview（body 带 vscode-* 类），避免 OS 暗色 + 编辑器浅色时错配。
+ *  - VSCode webview：跟随编辑器主题，由宿主维护的 body.vscode-dark / vscode-high-contrast 类驱动。
+ */
 @media (prefers-color-scheme: dark) {
-  :root {
+  body:not(.vscode-light):not(.vscode-dark):not(.vscode-high-contrast) {
     --db-light-color: #1e293b;
     --db-gray-light: #334155;
     --db-gray-medium: #475569;
@@ -978,35 +1001,688 @@ pre {
     --db-darker-color: #cbd5e1;
     --db-dark-color: #e2e8f0;
     --db-black: #f8fafc;
-    
+
     --db-bg-gradient: linear-gradient(135deg, #1e293b 0%, #334155 100%);
     --db-card-gradient: linear-gradient(135deg, #334155 0%, #1e293b 100%);
+
+    --db-surface: #1e293b;
+    --db-on-accent: #ffffff;
+    --db-border: #475569;
+    --db-border-gray: #445263;
+    --db-border-light: #4d5b6b;
+    --db-border-lighter: #4d5b6b;
+    --db-border-soft: #3d4a59;
+    --db-bg-soft: #263041;
+    --db-bg-soft2: #263041;
+    --db-bg-soft3: #263041;
+    --db-bg-soft4: #232d3c;
+    --db-bg-soft5: #232d3c;
+    --db-text-body: #cbd5e1;
+    --db-text-muted: #8296ab;
+    --db-text-faint: #64748b;
+    --db-danger-bg: rgba(239, 68, 68, 0.16);
+    --db-success-bg: rgba(16, 185, 129, 0.16);
+    --db-warning-bg: rgba(245, 158, 11, 0.16);
+    --db-info-bg: rgba(59, 130, 246, 0.18);
+    --db-primary-bg: rgba(102, 126, 234, 0.18);
+    --db-code-bg: #1b1f27;
+    --db-code-fg: #abb2bf;
+
+    /* 语义底色上的文字 / JSON 高亮：暗色下统一提亮 */
+    --db-success-fg: #34d399;
+    --db-warning-fg: #fbbf24;
+    --db-danger-fg: #f87171;
+    --db-info-fg: #60a5fa;
+    --db-json-key: #ff7b72;
+    --db-json-string: #a5d6ff;
+    --db-json-number: #79c0ff;
+    --db-json-boolean: #d2a8ff;
+    --db-json-null: #8b949e;
   }
-  
-  .card {
+
+  body:not(.vscode-light):not(.vscode-dark):not(.vscode-high-contrast) .card {
     border-color: #475569;
   }
-  
-  .form-control,
-  .form-select {
+
+  body:not(.vscode-light):not(.vscode-dark):not(.vscode-high-contrast) .form-control,
+  body:not(.vscode-light):not(.vscode-dark):not(.vscode-high-contrast) .form-select {
     background: #1e293b;
     border-color: #475569;
     color: #f1f5f9;
   }
-  
-  .navbar {
+
+  body:not(.vscode-light):not(.vscode-dark):not(.vscode-high-contrast) .navbar {
     background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
   }
-  
-  .table {
+
+  body:not(.vscode-light):not(.vscode-dark):not(.vscode-high-contrast) .table {
     background: #1e293b;
   }
-  
-  .table th {
+
+  body:not(.vscode-light):not(.vscode-dark):not(.vscode-high-contrast) .table th {
     background: #475569;
     color: #f1f5f9;
   }
+
+  /* Bootstrap 浅色工具类在暗色下过于刺眼/对比不足，统一改挂主题令牌
+     （与下方 body.vscode-dark 的同名规则对应，覆盖 OS 暗色入口） */
+  body:not(.vscode-light):not(.vscode-dark):not(.vscode-high-contrast) .border-light,
+  body:not(.vscode-light):not(.vscode-dark):not(.vscode-high-contrast) .bg-light {
+    border-color: #475569 !important;
+    background-color: #263041 !important;
+  }
+
+  body:not(.vscode-light):not(.vscode-dark):not(.vscode-high-contrast) .btn-outline-secondary,
+  body:not(.vscode-light):not(.vscode-dark):not(.vscode-high-contrast) .btn-outline-light {
+    color: #f1f5f9 !important;
+    border-color: #4d5b6b !important;
+  }
+
+  body:not(.vscode-light):not(.vscode-dark):not(.vscode-high-contrast) .btn-outline-secondary:hover,
+  body:not(.vscode-light):not(.vscode-dark):not(.vscode-high-contrast) .btn-outline-light:hover {
+    background-color: #263041 !important;
+    color: #f1f5f9 !important;
+  }
 }
+
+/* VSCode webview：编辑器暗色 / 高对比主题（变量与上面的 OS 暗色保持一致） */
+body.vscode-dark,
+body.vscode-high-contrast {
+  --db-light-color: var(--vscode-editor-background, #1e293b);
+  --db-gray-light: var(--vscode-sideBar-background, #334155);
+  --db-gray-medium: var(--vscode-panel-border, #475569);
+  --db-gray-dark: var(--vscode-descriptionForeground, #94a3b8);
+  --db-darker-color: var(--vscode-editor-foreground, #cbd5e1);
+  --db-dark-color: var(--vscode-foreground, #e2e8f0);
+  --db-black: var(--vscode-editor-foreground, #f8fafc);
+
+  --db-bg-gradient: linear-gradient(135deg, var(--vscode-editor-background, #1e293b) 0%, var(--vscode-sideBar-background, #334155) 100%);
+  --db-card-gradient: linear-gradient(135deg, var(--vscode-sideBar-background, #334155) 0%, var(--vscode-editor-background, #1e293b) 100%);
+
+  --db-surface: var(--vscode-editorWidget-background, #1e293b);
+  --db-on-accent: var(--vscode-button-foreground, #ffffff);
+  --db-border: var(--vscode-panel-border, #475569);
+  --db-border-gray: var(--vscode-editorWidget-border, var(--vscode-panel-border, #445263));
+  --db-border-light: var(--vscode-input-border, #4d5b6b);
+  --db-border-lighter: var(--vscode-input-border, #4d5b6b);
+  --db-border-soft: var(--vscode-list-hoverBackground, #3d4a59);
+  --db-bg-soft: var(--vscode-editorWidget-background, #263041);
+  --db-bg-soft2: var(--vscode-sideBar-background, #263041);
+  --db-bg-soft3: var(--vscode-editorWidget-background, #263041);
+  --db-bg-soft4: var(--vscode-editor-background, #232d3c);
+  --db-bg-soft5: var(--vscode-editor-background, #232d3c);
+  --db-text-body: var(--vscode-editor-foreground, #cbd5e1);
+  --db-text-muted: var(--vscode-descriptionForeground, #8296ab);
+  --db-text-faint: var(--vscode-disabledForeground, #64748b);
+  --db-danger-bg: rgba(239, 68, 68, 0.16);
+  --db-success-bg: rgba(16, 185, 129, 0.16);
+  --db-warning-bg: rgba(245, 158, 11, 0.16);
+  --db-info-bg: rgba(59, 130, 246, 0.18);
+  --db-primary-bg: rgba(102, 126, 234, 0.18);
+  --db-code-bg: var(--vscode-textCodeBlock-background, #1b1f27);
+  --db-code-fg: var(--vscode-editor-foreground, #abb2bf);
+
+  /* 语义底色上的文字 / JSON 高亮：暗色下统一提亮 */
+  --db-success-fg: #34d399;
+  --db-warning-fg: #fbbf24;
+  --db-danger-fg: #f87171;
+  --db-info-fg: #60a5fa;
+  --db-json-key: #ff7b72;
+  --db-json-string: #a5d6ff;
+  --db-json-number: #79c0ff;
+  --db-json-boolean: #d2a8ff;
+  --db-json-null: #8b949e;
+}
+
+/* 浅色主题：同样桥接到宿主令牌，跟随任意浅色主题（GitHub Light / Quiet Light / Solarized Light…） */
+body.vscode-light {
+  --db-light-color: var(--vscode-editor-background, #f8fafc);
+  --db-gray-light: var(--vscode-sideBar-background, #f1f5f9);
+  --db-gray-medium: var(--vscode-panel-border, #cbd5e1);
+  --db-gray-dark: var(--vscode-descriptionForeground, #475569);
+  --db-darker-color: var(--vscode-editor-foreground, #334155);
+  --db-dark-color: var(--vscode-foreground, #1e293b);
+  --db-black: var(--vscode-editor-foreground, #0f172a);
+
+  --db-bg-gradient: linear-gradient(135deg, var(--vscode-editor-background, #f8fafc) 0%, var(--vscode-sideBar-background, #e2e8f0) 100%);
+  --db-card-gradient: linear-gradient(135deg, var(--vscode-editorWidget-background, #ffffff) 0%, var(--vscode-editor-background, #f8fafc) 100%);
+
+  --db-surface: var(--vscode-editorWidget-background, #ffffff);
+  --db-on-accent: var(--vscode-button-foreground, #ffffff);
+  --db-border: var(--vscode-panel-border, #e2e8f0);
+  --db-border-gray: var(--vscode-editorWidget-border, var(--vscode-panel-border, #e5e7eb));
+  --db-border-light: var(--vscode-input-border, #d1d5db);
+  --db-border-lighter: var(--vscode-input-border, #dee2e6);
+  --db-border-soft: var(--vscode-list-hoverBackground, #e9ecef);
+  --db-bg-soft: var(--vscode-editorWidget-background, #f3f4f6);
+  --db-bg-soft2: var(--vscode-sideBar-background, #f8f9fa);
+  --db-bg-soft3: var(--vscode-editorWidget-background, #fafbfc);
+  --db-bg-soft4: var(--vscode-editor-background, #fafafa);
+  --db-bg-soft5: var(--vscode-editor-background, #f6f8fa);
+  --db-text-body: var(--vscode-editor-foreground, #374151);
+  --db-text-muted: var(--vscode-descriptionForeground, #64748b);
+  --db-text-faint: var(--vscode-disabledForeground, #94a3b8);
+  --db-code-bg: var(--vscode-textCodeBlock-background, #282c34);
+  --db-code-fg: var(--vscode-editor-foreground, #abb2bf);
+}
+
+/* 暗色下的 Bootstrap 默认浅色控件兜底（同样走令牌，跟随任意主题） */
+body.vscode-dark .card,
+body.vscode-high-contrast .card {
+  border-color: var(--db-gray-medium);
+}
+
+body.vscode-dark .form-control,
+body.vscode-dark .form-select,
+body.vscode-high-contrast .form-control,
+body.vscode-high-contrast .form-select {
+  background: var(--db-surface);
+  border-color: var(--db-border);
+  color: var(--db-text-body);
+}
+
+body.vscode-dark .navbar,
+body.vscode-high-contrast .navbar {
+  background: var(--db-bg-gradient);
+}
+
+body.vscode-dark .table,
+body.vscode-high-contrast .table {
+  background: var(--db-surface);
+}
+
+body.vscode-dark .table th,
+body.vscode-high-contrast .table th {
+  background: var(--db-bg-soft);
+  color: var(--db-text-body);
+}
+
+/* Bootstrap 的浅色工具类在暗色下过于刺眼/对比不足，统一改挂主题令牌。
+   覆盖全部暗色入口：VSCode webview 暗色/高对比、桌面端（body.platform-desktop）。
+   注意 body.platform-desktop 只在桌面端入口添加（src/platform/index.ts），
+   webview 不带该类，不会误伤浅色编辑器主题。 */
+body.vscode-dark .border-light,
+body.vscode-high-contrast .border-light,
+body.platform-desktop .border-light,
+body.vscode-dark .bg-light,
+body.vscode-high-contrast .bg-light,
+body.platform-desktop .bg-light {
+  border-color: var(--db-border) !important;
+  background-color: var(--db-bg-soft) !important;
+}
+
+body.vscode-dark .btn-outline-secondary,
+body.vscode-high-contrast .btn-outline-secondary,
+body.platform-desktop .btn-outline-secondary,
+body.vscode-dark .btn-outline-light,
+body.vscode-high-contrast .btn-outline-light,
+body.platform-desktop .btn-outline-light {
+  color: var(--db-text-body) !important;
+  border-color: var(--db-border-light) !important;
+}
+
+body.vscode-dark .btn-outline-secondary:hover,
+body.vscode-high-contrast .btn-outline-secondary:hover,
+body.platform-desktop .btn-outline-secondary:hover,
+body.vscode-dark .btn-outline-light:hover,
+body.vscode-high-contrast .btn-outline-light:hover,
+body.platform-desktop .btn-outline-light:hover {
+  background-color: var(--db-bg-soft) !important;
+  color: var(--db-text-body) !important;
+}
+/* ------------------------------------------------------------------
+ * webview：显式接管 Bootstrap 的基础文本/背景色与标题色。
+ * 之前只靠 data-bs-theme 间接切换，一旦宿主变量未按预期生效，
+ * 表名/标题等继承链上的文字就会保持黑色（--bs-body-color 默认 #212529）。
+ * 这里按主题类直接给出取值，两个方向都锁死。
+ * ------------------------------------------------------------------ */
+body.vscode-light {
+  color: var(--db-dark-color);
+  --bs-body-bg: var(--db-light-color);
+  --bs-body-color: var(--db-dark-color);
+  --bs-secondary-bg: var(--db-bg-soft);
+  --bs-secondary-color: var(--db-text-muted);
+  --bs-tertiary-bg: var(--db-bg-soft2);
+  --bs-tertiary-color: var(--db-text-muted);
+  --bs-emphasis-color: var(--db-black);
+  --bs-border-color: var(--db-border);
+  --bs-heading-color: var(--db-dark-color);
+}
+
+body.vscode-dark,
+body.vscode-high-contrast {
+  color: var(--db-dark-color);
+  --bs-body-bg: var(--db-light-color);
+  --bs-body-color: var(--db-dark-color);
+  --bs-secondary-bg: var(--db-bg-soft);
+  --bs-secondary-color: var(--db-text-muted);
+  --bs-tertiary-bg: var(--db-bg-soft2);
+  --bs-tertiary-color: var(--db-text-muted);
+  --bs-emphasis-color: var(--db-black);
+  --bs-border-color: var(--db-border);
+  --bs-heading-color: var(--db-dark-color);
+}
+
+/* 标题与表格文本兜底：Bootstrap 的 heading / table 走 --bs-*-color，
+   上面已覆盖变量，这里再兜一层避免个别版本变量缺失 */
+body.vscode-dark h1,
+body.vscode-dark h2,
+body.vscode-dark h3,
+body.vscode-dark h4,
+body.vscode-dark h5,
+body.vscode-dark h6,
+body.vscode-high-contrast h1,
+body.vscode-high-contrast h2,
+body.vscode-high-contrast h3,
+body.vscode-high-contrast h4,
+body.vscode-high-contrast h5,
+body.vscode-high-contrast h6,
+body.vscode-dark .table,
+body.vscode-high-contrast .table,
+body.vscode-dark .table-name,
+body.vscode-high-contrast .table-name {
+  color: var(--db-dark-color);
+}
+
+/* =================================================================
+ * 桌面端（Electron / Web）「编辑器深色」主题
+ *
+ * 对齐 VSCode 插件面板的观感：深色面板、1px 细边框、无渐变、无浮起阴影，
+ * 中性色阶只留三层（内容面 / 面板面 / 悬停面），品牌色只用于图标与选中态，
+ * 同时把按钮、表单、表格、工具栏的尺寸整体收缩一档。
+ *
+ * 选择器刻意写成一串 :not()：特异性 (0,4,1) 高于上方
+ * prefers-color-scheme: dark 的 (0,3,1)，保证系统切浅色时不会回落到浅色令牌。
+ * 仅作用于 body.platform-desktop，不影响 VSCode webview（走 theme.ts + 宿主主题）。
+ * ================================================================= */
+body.platform-desktop:not(.vscode-dark):not(.vscode-light):not(.vscode-high-contrast) {
+  color-scheme: dark;
+
+  /* 中性色阶（VSCode Dark Modern 的面板层次） */
+  --db-surface: #1f1f1f;
+  --db-light-color: #1f1f1f;
+  --db-gray-light: #181818;
+  --db-gray-medium: #2f2f2f;
+  --db-gray-dark: #9d9d9d;
+  --db-darker-color: #b8b8b8;
+  --db-dark-color: #e6e6e6;
+  --db-black: #ffffff;
+
+  /* 背景一律压平 */
+  --db-bg-gradient: #1f1f1f;
+  --db-card-gradient: #202020;
+
+  /* 边框 */
+  --db-border: #2f2f2f;
+  --db-border-gray: #2f2f2f;
+  --db-border-light: #3c3c3c;
+  --db-border-lighter: #333333;
+  --db-border-soft: #2a2d2e;
+
+  /* 面 */
+  --db-bg-soft: #252526;
+  --db-bg-soft2: #202020;
+  --db-bg-soft3: #1f1f1f;
+  --db-bg-soft4: #1a1a1a;
+  --db-bg-soft5: #1a1a1a;
+
+  /* 文本 */
+  --db-text-body: #cccccc;
+  --db-text-muted: #9d9d9d;
+  --db-text-faint: #6e6e6e;
+
+  /* 语义底色 */
+  --db-danger-bg: rgba(239, 68, 68, 0.16);
+  --db-success-bg: rgba(16, 185, 129, 0.16);
+  --db-warning-bg: rgba(245, 158, 11, 0.16);
+  --db-info-bg: rgba(59, 130, 246, 0.18);
+  --db-primary-bg: rgba(102, 126, 234, 0.2);
+
+  --db-code-bg: #1b1f27;
+  --db-code-fg: #abb2bf;
+
+  /* 语义底色上的文字 / JSON 高亮：暗色下统一提亮 */
+  --db-success-fg: #34d399;
+  --db-warning-fg: #fbbf24;
+  --db-danger-fg: #f87171;
+  --db-info-fg: #60a5fa;
+  --db-json-key: #ff7b72;
+  --db-json-string: #a5d6ff;
+  --db-json-number: #79c0ff;
+  --db-json-boolean: #d2a8ff;
+  --db-json-null: #8b949e;
+
+  /* 深色下投影几乎不可见，层级改由边框与面色表达 */
+  --db-shadow-sm: none;
+  --db-shadow-md: none;
+  --db-shadow-lg: none;
+  --db-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.5);
+  --db-shadow-2xl: 0 16px 40px rgba(0, 0, 0, 0.6);
+
+  /* 圆角收紧：编辑器面板不用大圆角 */
+  --db-radius-sm: 4px;
+  --db-radius-md: 6px;
+  --db-radius-lg: 8px;
+  --db-radius-xl: 10px;
+  --db-radius-2xl: 12px;
+
+  /* 间距整体收缩一档（全局 .card / .modal / .table 等共用这套令牌） */
+  --db-spacing-xs: 0.375rem;
+  --db-spacing-sm: 0.5rem;
+  --db-spacing-md: 0.75rem;
+  --db-spacing-lg: 1rem;
+  --db-spacing-xl: 1.25rem;
+  --db-spacing-2xl: 2rem;
+
+  /* Bootstrap 令牌桥接：下拉 / 弹窗 / 分页等组件一并转入深色 */
+  --bs-body-bg: var(--db-surface);
+  --bs-body-color: var(--db-text-body);
+  --bs-secondary-bg: var(--db-bg-soft);
+  --bs-secondary-color: var(--db-text-muted);
+  --bs-tertiary-bg: var(--db-bg-soft2);
+  --bs-tertiary-color: var(--db-text-muted);
+  --bs-emphasis-color: var(--db-black);
+  --bs-border-color: var(--db-border);
+  --bs-heading-color: var(--db-dark-color);
+}
+
+/* ---------------- 滚动条 / 选中 / 代码块 ---------------- */
+body.platform-desktop ::-webkit-scrollbar { width: 10px; height: 10px; }
+body.platform-desktop ::-webkit-scrollbar-track { background: transparent; border-radius: 0; }
+body.platform-desktop ::-webkit-scrollbar-thumb {
+  background-color: #424242;
+  background-clip: content-box;
+  border: 2px solid transparent;
+  border-radius: 5px;
+}
+body.platform-desktop ::-webkit-scrollbar-thumb:hover { background-color: #4f4f4f; background-clip: content-box; }
+body.platform-desktop ::selection { background: rgba(102, 126, 234, 0.35); color: #ffffff; }
+body.platform-desktop code { background-color: var(--db-bg-soft); color: #ce9178; padding: 0.1rem 0.3rem; }
+body.platform-desktop pre {
+  background-color: var(--db-code-bg);
+  border: 1px solid var(--db-border);
+  color: var(--db-code-fg);
+  padding: 0.625rem;
+  font-size: 12px;
+}
+
+/* ---------------- 基础组件密度 ---------------- */
+body.platform-desktop .btn {
+  padding: 0.25rem 0.6rem;
+  font-size: 12px;
+  line-height: 1.4;
+  font-weight: 500;
+  border-radius: 4px;
+  box-shadow: none;
+}
+body.platform-desktop .btn-sm { padding: 0.2rem 0.5rem; font-size: 12px; border-radius: 4px; }
+body.platform-desktop .btn-group-sm > .btn { padding: 0.15rem 0.4rem; font-size: 12px; }
+/* 树 / 列表里的纯图标按钮：不能在 .btn 密度下被撑开 */
+body.platform-desktop .btn-icon {
+  padding: 0;
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+}
+
+body.platform-desktop .form-control,
+body.platform-desktop .form-select {
+  padding: 0.3rem 0.5rem;
+  font-size: 12px;
+  border: 1px solid var(--db-border-light);
+  border-radius: 4px;
+  background-color: var(--db-bg-soft);
+  color: var(--db-text-body);
+}
+body.platform-desktop .form-control:focus,
+body.platform-desktop .form-select:focus {
+  border-color: var(--db-primary-color);
+  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25);
+  transform: none;
+}
+body.platform-desktop .form-control-sm,
+body.platform-desktop .form-select-sm { padding: 0.15rem 0.4rem; font-size: 12px; }
+body.platform-desktop .form-select-sm { padding-right: 1.4rem; }
+body.platform-desktop .form-label { margin-bottom: 0.25rem; font-size: 12px; font-weight: 600; color: var(--db-text-muted); }
+body.platform-desktop .form-text { font-size: 11px; color: var(--db-text-muted); }
+body.platform-desktop .form-check-input { width: 14px; height: 14px; margin-top: 0.2rem; border-width: 1px; border-radius: 3px; }
+body.platform-desktop .form-check-label { margin-left: 0.375rem; font-size: 12px; }
+
+body.platform-desktop .table {
+  border-radius: 0;
+  box-shadow: none;
+  --bs-table-bg: transparent;
+  --bs-table-color: var(--db-text-body);
+  --bs-table-border-color: var(--db-border);
+  --bs-table-striped-bg: var(--db-bg-soft2);
+  --bs-table-striped-color: var(--db-text-body);
+  --bs-table-hover-bg: var(--db-bg-soft);
+  --bs-table-hover-color: var(--db-black);
+}
+body.platform-desktop .table th {
+  padding: 0.375rem 0.625rem;
+  background-color: var(--db-bg-soft);
+  border-color: var(--db-border);
+  color: var(--db-text-muted);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+body.platform-desktop .table td { padding: 0.3rem 0.625rem; border-color: var(--db-border); font-size: 12px; }
+body.platform-desktop .table-dark { --bs-table-bg: var(--db-bg-soft); --bs-table-color: var(--db-text-muted); }
+body.platform-desktop .table-striped tbody tr:nth-of-type(odd) { background-color: transparent; }
+body.platform-desktop .table-hover tbody tr:hover { background-color: var(--db-bg-soft); transform: none; }
+body.platform-desktop .table-responsive { border-radius: 0; box-shadow: none; }
+
+body.platform-desktop .dropdown-menu {
+  padding: 0.25rem;
+  background-color: var(--db-bg-soft);
+  border: 1px solid var(--db-border-light);
+  border-radius: 6px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
+  font-size: 12px;
+}
+body.platform-desktop .dropdown-item { padding: 0.3rem 0.5rem; border-radius: 4px; font-size: 12px; color: var(--db-text-body); }
+body.platform-desktop .dropdown-item:hover,
+body.platform-desktop .dropdown-item:focus { background-color: var(--db-primary-bg); color: var(--db-dark-color); transform: none; }
+body.platform-desktop .dropdown-divider { margin: 0.25rem 0; border-color: var(--db-border); }
+body.platform-desktop .dropdown-header { padding: 0.25rem 0.5rem; font-size: 11px; color: var(--db-text-faint); }
+
+body.platform-desktop .modal-content {
+  background-color: var(--db-bg-soft2);
+  border: 1px solid var(--db-border-light);
+  border-radius: 8px;
+  box-shadow: var(--db-shadow-2xl);
+}
+body.platform-desktop .modal-header {
+  padding: 0.625rem 0.875rem;
+  background-color: var(--db-bg-soft);
+  border-bottom: 1px solid var(--db-border);
+}
+body.platform-desktop .modal-header::before { height: 0; }
+body.platform-desktop .modal-title { font-size: 14px; font-weight: 600; color: var(--db-dark-color); }
+body.platform-desktop .modal-body { padding: 0.875rem; max-height: 72vh; color: var(--db-text-body); }
+body.platform-desktop .modal-footer {
+  padding: 0.625rem 0.875rem;
+  background-color: var(--db-bg-soft);
+  border-top: 1px solid var(--db-border);
+}
+body.platform-desktop .btn-close {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  background-color: transparent;
+  background-image: var(--bs-btn-close-bg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 0.8em auto;
+  border-radius: 4px;
+  opacity: 0.7;
+}
+body.platform-desktop .btn-close:hover { background-color: var(--db-bg-soft); opacity: 1; transform: none; }
+
+body.platform-desktop .alert { padding: 0.5rem 0.75rem; border: 1px solid transparent; border-radius: 4px; font-size: 12px; }
+body.platform-desktop .alert-success { background-color: var(--db-success-bg); border-color: rgba(16, 185, 129, 0.35); color: #4ade80; }
+body.platform-desktop .alert-danger { background-color: var(--db-danger-bg); border-color: rgba(239, 68, 68, 0.35); color: #f87171; }
+body.platform-desktop .alert-warning { background-color: var(--db-warning-bg); border-color: rgba(245, 158, 11, 0.35); color: #fbbf24; }
+body.platform-desktop .alert-info { background-color: var(--db-info-bg); border-color: rgba(59, 130, 246, 0.35); color: #60a5fa; }
+
+body.platform-desktop .card { background-color: var(--db-bg-soft2); border: 1px solid var(--db-border); box-shadow: none; }
+body.platform-desktop .card:hover { transform: none; box-shadow: none; border-color: var(--db-border-light); }
+body.platform-desktop .card-header { background-color: var(--db-bg-soft); border-bottom: 1px solid var(--db-border); }
+body.platform-desktop .card-header::before { display: none; }
+body.platform-desktop .card-footer { background-color: var(--db-bg-soft); border-top: 1px solid var(--db-border); }
+
+body.platform-desktop .loading-overlay { background-color: rgba(31, 31, 31, 0.75); }
+body.platform-desktop .loading-spinner { border-color: var(--db-bg-soft); border-top-color: var(--db-primary-color); }
+body.platform-desktop .bg-glass { background-color: rgba(31, 31, 31, 0.85); border-color: var(--db-border); }
+body.platform-desktop .list-group-item { background-color: transparent; color: var(--db-text-body); }
+body.platform-desktop .list-group-item:hover { background-color: var(--db-bg-soft); transform: none; }
+body.platform-desktop .page-link {
+  padding: 0.2rem 0.5rem;
+  background-color: transparent;
+  border-color: var(--db-border);
+  color: var(--db-text-body);
+  font-size: 12px;
+}
+body.platform-desktop .page-link:hover { background-color: var(--db-bg-soft); border-color: var(--db-border-light); color: var(--db-dark-color); }
+body.platform-desktop .page-item.active .page-link { background-color: var(--db-primary-color); border-color: var(--db-primary-color); color: var(--db-on-accent); }
+
+/* ---------------- 布局紧凑化 ---------------- */
+/* 连接详情：信息条与快捷操作紧凑化 */
+body.platform-desktop .connection-detail { gap: 10px !important; padding: 10px !important; }
+body.platform-desktop .connection-header { margin-bottom: 0 !important; padding: 8px 12px !important; }
+body.platform-desktop .connection-info { gap: 10px !important; }
+body.platform-desktop .quick-actions { margin-bottom: 0 !important; padding: 10px 12px !important; }
+body.platform-desktop .actions-grid { gap: 6px !important; }
+body.platform-desktop .action-btn {
+  flex-direction: row !important;
+  justify-content: flex-start !important;
+  gap: 8px !important;
+  padding: 6px 10px !important;
+}
+body.platform-desktop .action-icon { font-size: 14px !important; }
+
+/* 表详情页：信息条 / 工具栏 / 页签整体收紧 */
+body.platform-desktop .table-header { padding: 8px 12px !important; }
+body.platform-desktop .table-icon { font-size: 20px !important; }
+body.platform-desktop .table-name { font-size: 0.9375rem !important; }
+body.platform-desktop .table-breadcrumb { font-size: 0.75rem !important; }
+body.platform-desktop .table-stats { gap: 14px !important; }
+body.platform-desktop .table-toolbar { padding: 6px 12px !important; gap: 6px !important; flex-wrap: wrap !important; }
+body.platform-desktop .toolbar-left,
+body.platform-desktop .toolbar-right { gap: 6px !important; flex-wrap: wrap !important; }
+body.platform-desktop .table-toolbar .btn,
+body.platform-desktop .data-toolbar .btn {
+  padding: 3px 8px !important;
+  font-size: 12px !important;
+  line-height: 1.4 !important;
+  border-radius: 4px !important;
+}
+body.platform-desktop .table-toolbar .btn i,
+body.platform-desktop .data-toolbar .btn i { font-size: 12px !important; }
+body.platform-desktop .table-toolbar .dropdown-menu { font-size: 12px !important; }
+body.platform-desktop .table-toolbar .dropdown-item { padding: 4px 10px !important; font-size: 12px !important; }
+body.platform-desktop .nav-tabs { padding: 0 0.5rem !important; }
+body.platform-desktop .nav-tabs .nav-link { padding: 6px 12px !important; font-size: 12px !important; }
+body.platform-desktop .nav-tabs .nav-link .badge { font-size: 10px !important; padding: 2px 5px !important; }
+body.platform-desktop .tab-content { padding: 10px 12px !important; }
+
+/* SQL 编辑器工具栏（桌面端独立存在） */
+body.platform-desktop .sql-toolbar,
+body.platform-desktop .editor-toolbar { padding: 6px 10px !important; gap: 6px !important; flex-wrap: wrap !important; }
+body.platform-desktop .sql-toolbar .btn,
+body.platform-desktop .editor-toolbar .btn {
+  padding: 3px 8px !important;
+  font-size: 12px !important;
+  line-height: 1.4 !important;
+  border-radius: 4px !important;
+}
+
+/* ---------------- 配色降噪 ---------------- */
+body.platform-desktop .btn-primary,
+body.platform-desktop .btn-info,
+body.platform-desktop .btn-success,
+body.platform-desktop .btn-secondary {
+  background-color: var(--db-bg-soft) !important;
+  border-color: var(--db-border-light) !important;
+  color: var(--db-text-body) !important;
+}
+body.platform-desktop .btn-primary:hover,
+body.platform-desktop .btn-info:hover,
+body.platform-desktop .btn-success:hover,
+body.platform-desktop .btn-secondary:hover,
+body.platform-desktop .btn-primary:focus,
+body.platform-desktop .btn-info:focus,
+body.platform-desktop .btn-success:focus,
+body.platform-desktop .btn-secondary:focus {
+  background-color: var(--db-border-soft) !important;
+  border-color: var(--db-border-light) !important;
+  color: var(--db-text-body) !important;
+}
+/* 破坏性 / 警告操作保留语义色，但降饱和 */
+body.platform-desktop .btn-danger,
+body.platform-desktop .btn-outline-danger {
+  background-color: transparent !important;
+  border-color: rgba(239, 68, 68, 0.55) !important;
+  color: #ef4444 !important;
+}
+body.platform-desktop .btn-warning,
+body.platform-desktop .btn-outline-warning {
+  background-color: transparent !important;
+  border-color: rgba(245, 158, 11, 0.5) !important;
+  color: #f59e0b !important;
+}
+/* 工具栏里的主操作保留一点主题色，避免整条工具栏全是灰button */
+body.platform-desktop .tables-actions .btn-primary,
+body.platform-desktop .views-actions .btn-success,
+body.platform-desktop .procedures-actions .btn-info {
+  background-color: var(--db-primary-bg) !important;
+  border-color: var(--db-primary-color) !important;
+  color: var(--db-primary-color) !important;
+}
+body.platform-desktop .tables-actions .btn-primary:hover,
+body.platform-desktop .views-actions .btn-success:hover,
+body.platform-desktop .procedures-actions .btn-info:hover {
+  background-color: rgba(102, 126, 234, 0.3) !important;
+  color: var(--db-primary-light) !important;
+  border-color: var(--db-primary-light) !important;
+}
+/* 徽章统一中性 */
+body.platform-desktop .badge {
+  background-color: var(--db-bg-soft) !important;
+  color: var(--db-text-muted) !important;
+  font-weight: 500 !important;
+  padding: 0.1rem 0.4rem;
+  font-size: 10px;
+  border-radius: 999px;
+  text-transform: none;
+  letter-spacing: 0;
+  box-shadow: none;
+}
+/* 数据库卡片的大块品牌渐变改为中性面，品牌色只保留 logo 小方块 */
+body.platform-desktop .db-mysql-bg,
+body.platform-desktop .db-postgres-bg,
+body.platform-desktop .db-sqlite-bg,
+body.platform-desktop .db-mssql-bg,
+body.platform-desktop .db-oracle-bg,
+body.platform-desktop .db-default-bg {
+  background: var(--db-bg-soft) !important;
+  color: var(--db-text-body) !important;
+  border: 1px solid var(--db-border) !important;
+}
+/* 进度指示器收敛为主题色 */
+body.platform-desktop .spinner-border.text-primary,
+body.platform-desktop .text-primary.spinner-border {
+  color: var(--db-text-muted) !important;
+}
+
   /* 覆盖Bootstrap默认样式 */
 .toast-container[data-v-7d639c44] {
     z-index: 1100;
@@ -1036,39 +1712,39 @@ pre {
     text-align: center;
 }
   
-.modal-dialog[data-v-323d35a9] {
+.modal-dialog[data-v-aa6b0e1f] {
     z-index: var(--bs-modal-zindex);
     max-width:none !important;
 }
-.modal-success .modal-header[data-v-323d35a9] {
+.modal-success .modal-header[data-v-aa6b0e1f] {
   background-color: var(--bs-success);
   color: white;
 }
-.modal-error .modal-header[data-v-323d35a9] {
+.modal-error .modal-header[data-v-aa6b0e1f] {
   background-color: var(--bs-danger);
   color: white;
 }
-.modal-warning .modal-header[data-v-323d35a9] {
+.modal-warning .modal-header[data-v-aa6b0e1f] {
   background-color: var(--bs-warning);
   color: var(--bs-dark);
 }
-.modal-info .modal-header[data-v-323d35a9] {
+.modal-info .modal-header[data-v-aa6b0e1f] {
   background-color: var(--bs-info);
   color: white;
 }
-.modal-body[data-v-323d35a9] {
+.modal-body[data-v-aa6b0e1f] {
   min-height: 80px;
   display: flex;
   flex-direction: column;
   align-items: stretch;
 }
-.error-details[data-v-323d35a9] {
+.error-details[data-v-aa6b0e1f] {
     width: 100%;
     margin-top: 1rem;
 }
-.error-content[data-v-323d35a9] {
-    background-color: #f8f9fa;
-    border: 1px solid #cbd5e1;
+.error-content[data-v-aa6b0e1f] {
+    background-color: var(--db-bg-soft2);
+    border: 1px solid var(--db-gray-medium);
     border-radius: 0.375rem;
     padding: 1rem;
     margin: 0;
@@ -1080,19 +1756,19 @@ pre {
     font-size: 0.875rem;
     line-height: 1.5;
 }
-.error-details-toggle[data-v-323d35a9] {
+.error-details-toggle[data-v-aa6b0e1f] {
     width: 100%;
 }
-.error-details-content[data-v-323d35a9] {
-    background-color: #f8f9fa;
-    border: 1px solid #cbd5e1;
+.error-details-content[data-v-aa6b0e1f] {
+    background-color: var(--db-bg-soft2);
+    border: 1px solid var(--db-gray-medium);
     border-radius: 0.375rem;
     padding: 1rem;
     margin-top: 0.5rem;
 }
-.error-json[data-v-323d35a9] {
-    background-color: #212529;
-    color: #f8f9fa;
+.error-json[data-v-aa6b0e1f] {
+    background-color: var(--db-text-body);
+    color: var(--db-bg-soft2);
     border-radius: 0.25rem;
     padding: 0.75rem;
     font-size: 0.8rem;
@@ -1102,56 +1778,57 @@ pre {
     white-space: pre-wrap;
     word-break: break-word;
 }
-.error-meta[data-v-323d35a9] {
-    border-bottom: 1px solid #cbd5e1;
+.error-meta[data-v-aa6b0e1f] {
+    border-bottom: 1px solid var(--db-gray-medium);
     padding-bottom: 0.5rem;
     margin-bottom: 0.5rem;
 }
-.modal-body .fs-1[data-v-323d35a9] {
+.modal-body .fs-1[data-v-aa6b0e1f] {
   font-size: 2.5rem;
   margin-bottom: 1rem;
 }
 
 /* 响应式调整 */
 @media (max-width: 576px) {
-.error-content[data-v-323d35a9],
-    .error-json[data-v-323d35a9] {
+.error-content[data-v-aa6b0e1f],
+    .error-json[data-v-aa6b0e1f] {
         font-size: 0.75rem;
         max-height: 150px;
 }
 }
 
-.datagrid-container[data-v-f249eac8] {
+.datagrid-container[data-v-6e7b7e09] {
     display: flex;
     flex-direction: column;
     height: 100%;
 }
-.datagrid-inner[data-v-f249eac8] {
+.datagrid-inner[data-v-6e7b7e09] {
     flex: 1;
     overflow: auto;
     margin-bottom: 10px;
 }
-.datagrid-th[data-v-f249eac8] {
+.datagrid-th[data-v-6e7b7e09] {
     min-width: 80px;
     white-space: nowrap;
     position: sticky;
     top: 0;
     z-index: 10;
-    background-color: #f8f9fa;
+    /* sticky 表头必须有不透明背景，令牌在暗色下自动切换 */
+    background-color: var(--db-bg-soft2, #f8f9fa);
 }
-.datagrid-th.sortable[data-v-f249eac8] {
+.datagrid-th.sortable[data-v-6e7b7e09] {
     cursor: pointer;
     user-select: none;
 }
-.datagrid-th.sortable[data-v-f249eac8]:hover {
-    background-color: #e9ecef;
+.datagrid-th.sortable[data-v-6e7b7e09]:hover {
+    background-color: var(--db-border-soft, #e9ecef);
 }
-.header-content[data-v-f249eac8] {
+.header-content[data-v-6e7b7e09] {
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }
-.sort-icon[data-v-f249eac8] {
+.sort-icon[data-v-6e7b7e09] {
     display: flex;
     align-items: center;
     font-size: 0.75rem;