fdb2 1.0.35 → 1.0.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/README.md +20 -1
  2. package/dist/public/explorer.css +1338 -1122
  3. package/dist/public/explorer.js +990 -665
  4. package/dist/public/index.css +797 -120
  5. package/dist/public/index.js +282 -26
  6. package/dist/public/layout.css +201 -202
  7. package/dist/public/layout.js +14 -14
  8. package/dist/server/index.d.ts.map +1 -1
  9. package/dist/server/index.js.map +1 -1
  10. package/dist/server/index.ts +0 -1
  11. package/dist/server/service/database/clickhouse-connection.d.ts.map +1 -1
  12. package/dist/server/service/database/clickhouse-connection.js +3 -3
  13. package/dist/server/service/database/clickhouse-connection.js.map +1 -1
  14. package/dist/server/service/database/clickhouse-connection.ts +3 -3
  15. package/dist/server/service/database/mssql.service.d.ts.map +1 -1
  16. package/dist/server/service/database/mssql.service.js +14 -45
  17. package/dist/server/service/database/mssql.service.js.map +1 -1
  18. package/dist/server/service/database/mssql.service.ts +21 -49
  19. package/dist/server/service/database/mysql.service.d.ts.map +1 -1
  20. package/dist/server/service/database/mysql.service.js +34 -52
  21. package/dist/server/service/database/mysql.service.js.map +1 -1
  22. package/dist/server/service/database/mysql.service.ts +50 -55
  23. package/dist/server/service/database/oracle.service.d.ts.map +1 -1
  24. package/dist/server/service/database/oracle.service.js +16 -53
  25. package/dist/server/service/database/oracle.service.js.map +1 -1
  26. package/dist/server/service/database/oracle.service.ts +23 -56
  27. package/dist/server/service/database/postgres.service.d.ts.map +1 -1
  28. package/dist/server/service/database/postgres.service.js +15 -53
  29. package/dist/server/service/database/postgres.service.js.map +1 -1
  30. package/dist/server/service/database/postgres.service.ts +22 -57
  31. package/dist/server/service/database/sql-type.helper.d.ts +28 -0
  32. package/dist/server/service/database/sql-type.helper.d.ts.map +1 -0
  33. package/dist/server/service/database/sql-type.helper.js +151 -0
  34. package/dist/server/service/database/sql-type.helper.js.map +1 -0
  35. package/dist/server/service/database/sql-type.helper.ts +157 -0
  36. package/dist/server/service/database/sqlite.service.d.ts.map +1 -1
  37. package/dist/server/service/database/sqlite.service.js +58 -67
  38. package/dist/server/service/database/sqlite.service.js.map +1 -1
  39. package/dist/server/service/database/sqlite.service.ts +72 -72
  40. package/package.json +6 -2
  41. package/public/fdb2.png +0 -0
package/dist/public/explorer.css CHANGED
@@ -1,416 +1,425 @@
1
1
 
2
2
  /* 继承原有的样式，这里可以添加组件特定的样式 */
3
- .connection-form-modern[data-v-3a550e2d] {
3
+ .connection-form-modern[data-v-7681a313] {
4
4
  padding: 0;
5
5
  }
6
- .form-section[data-v-3a550e2d] {
7
- margin-bottom: 2rem;
6
+ .form-section[data-v-7681a313] {
7
+ margin-bottom: 1.25rem;
8
8
  }
9
- .section-header[data-v-3a550e2d] {
9
+ .section-header[data-v-7681a313] {
10
10
  display: flex;
11
11
  align-items: center;
12
- margin-bottom: 1.5rem;
13
- padding-bottom: 0.75rem;
14
- border-bottom: 2px solid #cbd5e1;
12
+ margin-bottom: 0.75rem;
13
+ padding-bottom: 0.5rem;
14
+ border-bottom: 1px solid var(--db-border);
15
15
  }
16
- .section-icon[data-v-3a550e2d] {
17
- width: 40px;
18
- height: 40px;
19
- border-radius: 8px;
20
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
16
+ .section-icon[data-v-7681a313] {
17
+ width: 26px;
18
+ height: 26px;
19
+ border-radius: 5px;
20
+ background: var(--db-primary-bg);
21
21
  display: flex;
22
22
  align-items: center;
23
23
  justify-content: center;
24
- color: white;
25
- margin-right: 1rem;
24
+ color: var(--db-primary-color);
25
+ font-size: 0.8125rem;
26
+ margin-right: 0.5rem;
27
+ flex-shrink: 0;
26
28
  }
27
- .section-title[data-v-3a550e2d] {
28
- font-size: 1.1rem;
29
+ .section-title[data-v-7681a313] {
30
+ font-size: 0.875rem;
29
31
  font-weight: 600;
30
32
  margin: 0;
31
- color: #1e293b;
33
+ color: var(--db-dark-color);
32
34
  }
33
- .section-content[data-v-3a550e2d] {
34
- padding-left: 56px;
35
+ .section-content[data-v-7681a313] {
36
+ padding-left: 0;
35
37
  }
36
- .form-grid[data-v-3a550e2d] {
38
+ .form-grid[data-v-7681a313] {
37
39
  display: grid;
38
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
39
- gap: 1.5rem;
40
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
41
+ gap: 0.75rem;
40
42
  }
41
- .form-group-modern[data-v-3a550e2d] {
42
- margin-bottom: 1rem;
43
+ .form-group-modern[data-v-7681a313] {
44
+ margin-bottom: 0.625rem;
43
45
  }
44
- .form-label-modern[data-v-3a550e2d] {
46
+ .form-label-modern[data-v-7681a313] {
45
47
  display: flex;
46
48
  align-items: center;
47
49
  font-weight: 600;
48
- color: #1e293b;
49
- margin-bottom: 0.5rem;
50
- font-size: 0.9rem;
50
+ color: var(--db-text-muted);
51
+ margin-bottom: 0.25rem;
52
+ font-size: 0.75rem;
51
53
  }
52
- .form-control-modern[data-v-3a550e2d],
53
- .form-select-modern[data-v-3a550e2d] {
54
+ .form-control-modern[data-v-7681a313],
55
+ .form-select-modern[data-v-7681a313] {
54
56
  width: 100%;
55
- padding: 0.75rem;
56
- border: 2px solid #94a3b8;
57
- border-radius: 8px;
58
- font-size: 0.95rem;
59
- transition: all 0.3s ease;
60
- color: #1e293b;
61
- background-color: #ffffff;
57
+ padding: 0.3rem 0.5rem;
58
+ border: 1px solid var(--db-border-light);
59
+ border-radius: 4px;
60
+ font-size: 0.8125rem;
61
+ transition: border-color 0.15s ease, box-shadow 0.15s ease;
62
+ color: var(--db-text-body);
63
+ background-color: var(--db-bg-soft);
62
64
  }
63
- .form-control-modern[data-v-3a550e2d]:focus,
64
- .form-select-modern[data-v-3a550e2d]:focus {
65
+ .form-control-modern[data-v-7681a313]:focus,
66
+ .form-select-modern[data-v-7681a313]:focus {
65
67
  outline: none;
66
- border-color: #667eea;
67
- box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
68
+ border-color: var(--db-primary-color);
69
+ box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25);
68
70
  }
69
- .form-check-modern[data-v-3a550e2d] {
71
+ .form-check-modern[data-v-7681a313] {
70
72
  display: flex;
71
73
  align-items: flex-start;
72
74
  padding: 0;
73
75
  }
74
- .form-check-input-modern[data-v-3a550e2d] {
75
- margin-right: 0.75rem;
76
- margin-top: 0.25rem;
76
+ .form-check-input-modern[data-v-7681a313] {
77
+ margin-right: 0.5rem;
78
+ margin-top: 0.2rem;
77
79
  }
78
- .form-check-label-modern[data-v-3a550e2d] {
80
+ .form-check-label-modern[data-v-7681a313] {
79
81
  display: flex;
80
82
  flex-direction: column;
81
83
  cursor: pointer;
82
84
  }
83
- .check-text[data-v-3a550e2d] {
85
+ .check-text[data-v-7681a313] {
84
86
  font-weight: 500;
85
- color: #1e293b;
86
- margin-bottom: 0.25rem;
87
+ font-size: 0.8125rem;
88
+ color: var(--db-text-body);
89
+ margin-bottom: 0.125rem;
87
90
  }
88
- .check-description[data-v-3a550e2d] {
89
- font-size: 0.85rem;
90
- color: #475569;
91
+ .check-description[data-v-7681a313] {
92
+ font-size: 0.6875rem;
93
+ color: var(--db-text-muted);
91
94
  }
92
- .required[data-v-3a550e2d] {
93
- color: #dc3545;
95
+ .required[data-v-7681a313] {
96
+ color: var(--db-danger-color);
94
97
  margin-left: 0.25rem;
95
98
  }
96
- .error-content[data-v-3a550e2d] {
99
+ .error-content[data-v-7681a313] {
97
100
  display: flex;
98
101
  align-items: center;
99
- padding: 1.5rem;
100
- gap: 1rem;
102
+ padding: 0.75rem;
103
+ gap: 0.625rem;
104
+ background-color: var(--db-danger-bg);
105
+ border: 1px solid rgba(239, 68, 68, 0.35);
106
+ border-radius: 4px;
101
107
  }
102
- .error-icon[data-v-3a550e2d] {
103
- width: 48px;
104
- height: 48px;
108
+ .error-icon[data-v-7681a313] {
109
+ width: 28px;
110
+ height: 28px;
105
111
  border-radius: 50%;
106
- background: linear-gradient(135deg, #dc3545 0%, #ff6b6b 100%);
112
+ background: rgba(239, 68, 68, 0.18);
107
113
  display: flex;
108
114
  align-items: center;
109
115
  justify-content: center;
110
- color: white;
111
- font-size: 1.5rem;
116
+ color: var(--db-danger-color);
117
+ font-size: 0.9375rem;
112
118
  flex-shrink: 0;
113
119
  }
114
- .error-message[data-v-3a550e2d] {
120
+ .error-message[data-v-7681a313] {
115
121
  flex: 1;
116
- color: #1e293b;
117
- font-size: 0.95rem;
122
+ color: var(--db-text-body);
123
+ font-size: 0.8125rem;
118
124
  line-height: 1.6;
119
125
  }
120
126
 
121
- .sql-executor[data-v-fe79b105] {
127
+ .sql-executor[data-v-4b956460] {
122
128
  width: 100%;
123
129
  flex: 1;
124
130
  display: flex;
125
131
  flex-direction: column;
126
- gap: 10px;
132
+ gap: 8px;
127
133
  }
128
- .sql-toolbar[data-v-fe79b105] {
134
+ .sql-toolbar[data-v-4b956460] {
129
135
  display: flex;
130
136
  justify-content: space-between;
131
137
  align-items: center;
132
- margin-bottom: 10px;
133
- padding: 10px;
134
- background-color: #f8f9fa;
138
+ margin-bottom: 8px;
139
+ padding: 6px 8px;
140
+ background-color: var(--db-bg-soft2);
135
141
  border-radius: 4px;
136
142
  }
137
- .toolbar-left[data-v-fe79b105],
138
- .toolbar-right[data-v-fe79b105] {
143
+ .toolbar-left[data-v-4b956460],
144
+ .toolbar-right[data-v-4b956460] {
139
145
  display: flex;
140
- gap: 8px;
146
+ gap: 6px;
141
147
  }
142
- .sql-container[data-v-fe79b105] {
148
+ .sql-container[data-v-4b956460] {
143
149
  position: relative;
144
- border: 1px solid #dee2e6;
150
+ border: 1px solid var(--db-border);
145
151
  border-radius: 4px;
146
152
  overflow: hidden;
147
153
  flex: 1;
148
154
  display: flex;
149
155
  flex-direction: column;
150
156
  }
151
- .sql-editor[data-v-fe79b105] {
157
+ .sql-editor[data-v-4b956460] {
152
158
  position: relative;
153
159
  overflow: auto;
154
- flex: 0 1 300px;
155
- min-height: 200px;
160
+ flex: 0 1 260px;
161
+ min-height: 160px;
156
162
  }
157
- .sql-result[data-v-fe79b105] {
163
+ .sql-result[data-v-4b956460] {
158
164
  position: relative;
159
165
  overflow: auto;
160
- border-top: 1px solid #dee2e6;
166
+ border-top: 1px solid var(--db-border-lighter);
161
167
  flex: 1;
162
168
  }
163
- .codemirror-editor[data-v-fe79b105] {
169
+ .codemirror-editor[data-v-4b956460] {
164
170
  height: 100%;
165
171
  width: 100%;
166
172
  }
167
- .resizer[data-v-fe79b105] {
173
+ .resizer[data-v-4b956460] {
168
174
  height: 8px;
169
- background-color: #e9ecef;
175
+ background-color: var(--db-border-soft);
170
176
  cursor: ns-resize;
171
177
  display: flex;
172
178
  align-items: center;
173
179
  justify-content: center;
174
180
  }
175
- .resizer[data-v-fe79b105]:hover {
176
- background-color: #dee2e6;
181
+ .resizer[data-v-4b956460]:hover {
182
+ background-color: var(--db-border-lighter);
177
183
  }
178
- .resizer[data-v-fe79b105]::before {
184
+ .resizer[data-v-4b956460]::before {
179
185
  content: '';
180
186
  width: 40px;
181
187
  height: 2px;
182
- background-color: #adb5bd;
188
+ background-color: var(--db-border-light);
183
189
  border-radius: 1px;
184
190
  }
185
- .resizer.resizing[data-v-fe79b105] {
186
- background-color: #dee2e6;
191
+ .resizer.resizing[data-v-4b956460] {
192
+ background-color: var(--db-border-lighter);
187
193
  }
188
- .resizer.resizing[data-v-fe79b105]::before {
189
- background-color: #6c757d;
194
+ .resizer.resizing[data-v-4b956460]::before {
195
+ background-color: var(--db-text-muted);
190
196
  }
191
- .sql-result[data-v-fe79b105] {
197
+ .sql-result[data-v-4b956460] {
192
198
  position: relative;
193
199
  overflow: auto;
194
- border-top: 1px solid #dee2e6;
200
+ border-top: 1px solid var(--db-border-lighter);
195
201
  }
196
- .result-content[data-v-fe79b105] {
202
+ .result-content[data-v-4b956460] {
197
203
  height: 100%;
198
204
  display: flex;
199
205
  flex-direction: column;
200
206
  }
201
- .result-header[data-v-fe79b105] {
207
+ .result-header[data-v-4b956460] {
202
208
  display: flex;
203
209
  justify-content: space-between;
204
210
  align-items: center;
205
- padding: 12px;
206
- background-color: #f8f9fa;
207
- border-bottom: 1px solid #dee2e6;
211
+ padding: 6px 10px;
212
+ background-color: var(--db-bg-soft2);
213
+ border-bottom: 1px solid var(--db-border);
208
214
  }
209
- .result-title[data-v-fe79b105] {
215
+ .result-title[data-v-4b956460] {
210
216
  margin: 0;
211
- font-size: 14px;
217
+ font-size: 13px;
212
218
  font-weight: 600;
213
219
  display: flex;
214
220
  align-items: center;
215
221
  gap: 8px;
216
222
  }
217
- .sql-loading[data-v-fe79b105] {
223
+ .sql-loading[data-v-4b956460] {
218
224
  display: flex;
219
225
  align-items: center;
220
226
  gap: 8px;
221
227
  }
222
- .result-stats[data-v-fe79b105] {
228
+ .result-stats[data-v-4b956460] {
223
229
  display: flex;
224
230
  gap: 8px;
225
231
  }
226
- .result-info[data-v-fe79b105] {
232
+ .result-info[data-v-4b956460] {
227
233
  display: flex;
228
234
  justify-content: space-between;
229
235
  align-items: center;
230
- padding: 10px 12px;
231
- background-color: #f8f9fa;
232
- border-bottom: 1px solid #dee2e6;
236
+ padding: 6px 10px;
237
+ background-color: var(--db-bg-soft2);
238
+ border-bottom: 1px solid var(--db-border);
233
239
  }
234
- .result-actions[data-v-fe79b105] {
240
+ .result-actions[data-v-4b956460] {
235
241
  display: flex;
236
- gap: 8px;
242
+ gap: 6px;
237
243
  }
238
- .result-table-container[data-v-fe79b105] {
244
+ .result-table-container[data-v-4b956460] {
239
245
  flex: 1;
240
246
  overflow: auto;
241
247
  }
242
248
 
243
249
  /* 对象结果样式 */
244
- .result-object[data-v-fe79b105] {
250
+ .result-object[data-v-4b956460] {
245
251
  display: flex;
246
252
  flex-direction: column;
247
253
  height: 100%;
248
254
  }
249
- .object-container[data-v-fe79b105] {
255
+ .object-container[data-v-4b956460] {
250
256
  flex: 1;
251
257
  overflow: auto;
252
258
  }
253
- .object-container table[data-v-fe79b105] {
259
+ .object-container table[data-v-4b956460] {
254
260
  width: 100%;
255
261
  }
256
- .object-container th[data-v-fe79b105]:first-child {
262
+ .object-container th[data-v-4b956460]:first-child {
257
263
  width: 20%;
258
264
  min-width: 100px;
259
265
  }
260
- .object-container td[data-v-fe79b105]:first-child {
266
+ .object-container td[data-v-4b956460]:first-child {
261
267
  font-weight: 500;
262
- background-color: #f8f9fa;
268
+ background-color: var(--db-bg-soft2);
263
269
  }
264
- .sql-loading-state[data-v-fe79b105] {
270
+ .sql-loading-state[data-v-4b956460] {
265
271
  display: flex;
266
272
  align-items: center;
267
273
  justify-content: center;
268
274
  height: 100%;
269
275
  flex: 1;
270
276
  }
271
- .sql-empty-result[data-v-fe79b105],
272
- .sql-error[data-v-fe79b105] {
277
+ .sql-empty-result[data-v-4b956460],
278
+ .sql-error[data-v-4b956460] {
273
279
  padding: 12px;
274
280
  flex: 1;
275
281
  }
276
- .result-empty[data-v-fe79b105] {
282
+ .result-empty[data-v-4b956460] {
277
283
  display: flex;
278
284
  flex-direction: column;
279
285
  align-items: center;
280
286
  justify-content: center;
281
287
  height: 100%;
282
- color: #6c757d;
288
+ color: var(--db-text-muted);
283
289
  gap: 10px;
284
290
  }
285
- .result-empty i[data-v-fe79b105] {
286
- font-size: 48px;
287
- opacity: 0.5;
291
+ .result-empty i[data-v-4b956460] {
292
+ font-size: 24px;
293
+ opacity: 0.4;
288
294
  }
289
- .json-result[data-v-fe79b105] {
295
+ .json-result[data-v-4b956460] {
290
296
  flex: 1;
291
297
  overflow: hidden;
292
298
  }
293
- .json-result .codemirror-editor[data-v-fe79b105] {
299
+ .json-result .codemirror-editor[data-v-4b956460] {
294
300
  height: 100%;
295
301
  width: 100%;
296
302
  }
297
303
 
298
304
  /* 响应式设计 */
299
305
  @media (max-width: 768px) {
300
- .sql-toolbar[data-v-fe79b105] {
306
+ .sql-toolbar[data-v-4b956460] {
301
307
  flex-direction: column;
302
308
  align-items: stretch;
303
309
  gap: 8px;
304
310
  }
305
- .toolbar-left[data-v-fe79b105],
306
- .toolbar-right[data-v-fe79b105] {
311
+ .toolbar-left[data-v-4b956460],
312
+ .toolbar-right[data-v-4b956460] {
307
313
  justify-content: center;
308
314
  }
309
315
  }
310
316
 
311
- .connection-detail[data-v-15dc1761] {
312
- padding: 20px;
317
+ .connection-detail[data-v-ef9effac] {
318
+ padding: 10px;
313
319
  display: flex;
314
320
  flex-direction: column;
315
321
  height: 100%;
316
- gap: 20px;
322
+ gap: 10px;
317
323
  }
318
- .connection-header[data-v-15dc1761] {
324
+ .connection-header[data-v-ef9effac] {
319
325
  display: flex;
320
326
  justify-content: space-between;
321
327
  align-items: center;
322
- margin-bottom: 20px;
323
- padding: 20px;
324
- background-color: #f1f5f9;
325
- border-radius: 8px;
326
- border: 1px solid #cbd5e1;
328
+ margin-bottom: 0;
329
+ padding: 8px 12px;
330
+ background-color: var(--db-bg-soft2);
331
+ border-radius: 6px;
332
+ border: 1px solid var(--db-border);
327
333
  }
328
- .connection-info[data-v-15dc1761] {
334
+ .connection-info[data-v-ef9effac] {
329
335
  display: flex;
330
336
  align-items: center;
331
- gap: 16px;
337
+ gap: 12px;
332
338
  }
333
- .connection-avatar[data-v-15dc1761] {
334
- width: 60px;
335
- height: 60px;
339
+ .connection-avatar[data-v-ef9effac] {
340
+ width: 34px;
341
+ height: 34px;
336
342
  display: flex;
337
343
  align-items: center;
338
344
  justify-content: center;
339
- border-radius: 8px;
340
- background-color: #e2e8f0;
341
- border: 1px solid #cbd5e1;
345
+ border-radius: 6px;
346
+ background-color: var(--db-border);
347
+ border: 1px solid var(--db-border);
348
+ flex-shrink: 0;
342
349
  }
343
- .db-logo[data-v-15dc1761] {
344
- font-size: 24px;
345
- font-weight: bold;
346
- color: #475569;
350
+ .db-logo[data-v-ef9effac] {
351
+ font-size: 13px;
352
+ font-weight: 700;
353
+ letter-spacing: 0.02em;
354
+ color: var(--db-gray-dark);
347
355
  }
348
- .db-mysql[data-v-15dc1761] {
356
+ .db-mysql[data-v-ef9effac] {
349
357
  background-color: #4CAF50;
350
- color: white;
358
+ color: var(--db-on-accent);
351
359
  }
352
- .db-postgres[data-v-15dc1761] {
360
+ .db-postgres[data-v-ef9effac] {
353
361
  background-color: #336791;
354
- color: white;
362
+ color: var(--db-on-accent);
355
363
  }
356
- .db-mssql[data-v-15dc1761] {
364
+ .db-mssql[data-v-ef9effac] {
357
365
  background-color: #0078d4;
358
- color: white;
366
+ color: var(--db-on-accent);
359
367
  }
360
- .db-sqlite[data-v-15dc1761] {
368
+ .db-sqlite[data-v-ef9effac] {
361
369
  background-color: #003B57;
362
- color: white;
370
+ color: var(--db-on-accent);
363
371
  }
364
- .db-oracle[data-v-15dc1761] {
372
+ .db-oracle[data-v-ef9effac] {
365
373
  background-color: #F80000;
366
- color: white;
374
+ color: var(--db-on-accent);
367
375
  }
368
- .connection-meta[data-v-15dc1761] {
376
+ .connection-meta[data-v-ef9effac] {
369
377
  display: flex;
370
378
  flex-direction: column;
371
379
  gap: 4px;
372
380
  }
373
- .connection-name[data-v-15dc1761] {
381
+ .connection-name[data-v-ef9effac] {
374
382
  margin: 0;
375
- font-size: 20px;
383
+ font-size: 15px;
376
384
  font-weight: 600;
377
385
  }
378
- .connection-type-info[data-v-15dc1761] {
386
+ .connection-type-info[data-v-ef9effac] {
379
387
  display: flex;
380
388
  align-items: center;
381
- gap: 12px;
389
+ gap: 8px;
382
390
  }
383
- .db-type[data-v-15dc1761] {
384
- padding: 4px 12px;
385
- border-radius: 12px;
386
- background-color: #e2e8f0;
387
- font-size: 12px;
388
- font-weight: 600;
389
- color: #334155;
391
+ .db-type[data-v-ef9effac] {
392
+ padding: 1px 7px;
393
+ border-radius: 999px;
394
+ background-color: var(--db-primary-bg);
395
+ font-size: 11px;
396
+ font-weight: 500;
397
+ color: var(--db-primary-color);
390
398
  }
391
- .connection-status[data-v-15dc1761] {
399
+ .connection-status[data-v-ef9effac] {
392
400
  display: flex;
393
401
  align-items: center;
394
402
  gap: 6px;
395
- font-size: 14px;
403
+ font-size: 12px;
404
+ color: var(--db-text-muted);
396
405
  }
397
- .status-dot[data-v-15dc1761] {
398
- width: 8px;
399
- height: 8px;
406
+ .status-dot[data-v-ef9effac] {
407
+ width: 7px;
408
+ height: 7px;
400
409
  border-radius: 50%;
401
- background-color: #475569;
410
+ background-color: var(--db-gray-dark);
402
411
  }
403
- .status-online .status-dot[data-v-15dc1761] {
412
+ .status-online .status-dot[data-v-ef9effac] {
404
413
  background-color: #28a745;
405
414
  }
406
- .status-offline .status-dot[data-v-15dc1761] {
415
+ .status-offline .status-dot[data-v-ef9effac] {
407
416
  background-color: #dc3545;
408
417
  }
409
- .status-testing .status-dot[data-v-15dc1761] {
418
+ .status-testing .status-dot[data-v-ef9effac] {
410
419
  background-color: #ffc107;
411
- animation: pulse-15dc1761 1s infinite;
420
+ animation: pulse-ef9effac 1s infinite;
412
421
  }
413
- @keyframes pulse-15dc1761 {
422
+ @keyframes pulse-ef9effac {
414
423
  0%, 100% {
415
424
  opacity: 1;
416
425
  }
@@ -418,26 +427,26 @@
418
427
  opacity: 0.5;
419
428
  }
420
429
  }
421
- .connection-actions[data-v-15dc1761] {
430
+ .connection-actions[data-v-ef9effac] {
422
431
  display: flex;
423
432
  gap: 8px;
424
433
  }
425
- .connection-details-panel[data-v-15dc1761] {
426
- margin-bottom: 30px;
427
- animation: fadeIn-15dc1761 0.3s ease;
434
+ .connection-details-panel[data-v-ef9effac] {
435
+ margin-bottom: 0;
436
+ animation: fadeIn-ef9effac 0.3s ease;
428
437
  }
429
- .section-title[data-v-15dc1761] {
430
- margin: 0 0 16px 0;
431
- font-size: 16px;
438
+ .section-title[data-v-ef9effac] {
439
+ margin: 0 0 10px 0;
440
+ font-size: 13px;
432
441
  font-weight: 600;
433
442
  display: flex;
434
443
  align-items: center;
435
444
  gap: 8px;
436
- color: #1e293b;
437
- padding-bottom: 8px;
438
- border-bottom: 1px solid #cbd5e1;
445
+ color: var(--db-dark-color);
446
+ padding-bottom: 6px;
447
+ border-bottom: 1px solid var(--db-border);
439
448
  }
440
- @keyframes fadeIn-15dc1761 {
449
+ @keyframes fadeIn-ef9effac {
441
450
  from {
442
451
  opacity: 0;
443
452
  transform: translateY(-10px);
@@ -447,286 +456,366 @@ to {
447
456
  transform: translateY(0);
448
457
  }
449
458
  }
450
- .detail-card[data-v-15dc1761] {
451
- border: 1px solid #cbd5e1;
452
- border-radius: 8px;
459
+ .detail-card[data-v-ef9effac] {
460
+ border: 1px solid var(--db-border);
461
+ border-radius: 6px;
453
462
  overflow: hidden;
454
463
  }
455
- .card-header[data-v-15dc1761] {
456
- padding: 16px;
457
- background-color: #f8f9fa;
458
- border-bottom: 1px solid #cbd5e1;
464
+ .card-header[data-v-ef9effac] {
465
+ padding: 10px;
466
+ background-color: var(--db-bg-soft);
467
+ border-bottom: 1px solid var(--db-border);
459
468
  }
460
- .card-title[data-v-15dc1761] {
469
+ .card-title[data-v-ef9effac] {
461
470
  margin: 0;
462
- font-size: 16px;
471
+ font-size: 13px;
463
472
  font-weight: 600;
464
473
  display: flex;
465
474
  align-items: center;
466
475
  gap: 8px;
467
476
  }
468
- .card-body[data-v-15dc1761] {
469
- padding: 16px;
477
+ .card-body[data-v-ef9effac] {
478
+ padding: 10px;
470
479
  }
471
- .info-grid[data-v-15dc1761] {
480
+ .info-grid[data-v-ef9effac] {
472
481
  display: grid;
473
482
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
474
- gap: 16px;
475
- margin-bottom: 10px;
483
+ gap: 8px;
484
+ margin-bottom: 0;
476
485
  }
477
- .info-item[data-v-15dc1761] {
486
+ .info-item[data-v-ef9effac] {
478
487
  display: flex;
479
488
  flex-direction: column;
480
- gap: 4px;
481
- padding: 10px;
482
- background-color: #f1f5f9;
483
- border-radius: 6px;
484
- transition: all 0.2s ease;
485
- border: 1px solid #cbd5e1;
489
+ gap: 2px;
490
+ padding: 6px 8px;
491
+ background-color: var(--db-bg-soft);
492
+ border-radius: 4px;
493
+ transition: background-color 0.15s ease;
494
+ border: 1px solid var(--db-border);
486
495
  }
487
- .info-item[data-v-15dc1761]:hover {
488
- background-color: #e9ecef;
489
- transform: translateY(-1px);
496
+ .info-item[data-v-ef9effac]:hover {
497
+ background-color: var(--db-bg-soft2);
490
498
  }
491
- .info-label[data-v-15dc1761] {
492
- font-size: 12px;
499
+ .info-label[data-v-ef9effac] {
500
+ font-size: 10px;
493
501
  font-weight: 600;
494
- color: #475569;
502
+ color: var(--db-text-muted);
495
503
  text-transform: uppercase;
496
- letter-spacing: 0.5px;
504
+ letter-spacing: 0.04em;
497
505
  }
498
- .info-value[data-v-15dc1761] {
499
- font-size: 14px;
506
+ .info-value[data-v-ef9effac] {
507
+ font-size: 12px;
500
508
  font-weight: 500;
501
- color: #1e293b;
509
+ color: var(--db-dark-color);
502
510
  }
503
- .db-type-badge[data-v-15dc1761] {
504
- padding: 4px 10px;
505
- border-radius: 12px;
506
- font-size: 12px;
511
+ .db-type-badge[data-v-ef9effac] {
512
+ padding: 1px 7px;
513
+ border-radius: 999px;
514
+ font-size: 11px;
507
515
  font-weight: 500;
508
516
  }
509
- .stats-grid[data-v-15dc1761] {
517
+ .stats-grid[data-v-ef9effac] {
510
518
  display: grid;
511
519
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
512
- gap: 16px;
520
+ gap: 8px;
513
521
  }
514
- .stat-item[data-v-15dc1761] {
515
- text-align: center;
516
- padding: 12px;
517
- background-color: #f1f5f9;
518
- border-radius: 6px;
519
- transition: all 0.2s ease;
520
- border: 1px solid #cbd5e1;
522
+ .stat-item[data-v-ef9effac] {
523
+ text-align: left;
524
+ padding: 8px;
525
+ background-color: var(--db-bg-soft);
526
+ border-radius: 4px;
527
+ transition: background-color 0.15s ease;
528
+ border: 1px solid var(--db-border);
521
529
  }
522
- .stat-item[data-v-15dc1761]:hover {
523
- background-color: #e9ecef;
524
- transform: translateY(-1px);
525
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
530
+ .stat-item[data-v-ef9effac]:hover {
531
+ background-color: var(--db-bg-soft2);
526
532
  }
527
- .stat-value[data-v-15dc1761] {
528
- font-size: 20px;
533
+ .stat-value[data-v-ef9effac] {
534
+ font-size: 15px;
529
535
  font-weight: 600;
530
- color: #1e293b;
536
+ line-height: 1.25;
537
+ color: var(--db-dark-color);
531
538
  }
532
- .stat-label[data-v-15dc1761] {
533
- font-size: 12px;
534
- color: #475569;
535
- margin-top: 4px;
539
+ .stat-label[data-v-ef9effac] {
540
+ font-size: 11px;
541
+ color: var(--db-text-muted);
542
+ margin-top: 2px;
536
543
  }
537
- .quick-actions[data-v-15dc1761] {
538
- margin-bottom: 30px;
539
- padding: 20px;
540
- background-color: #f1f5f9;
541
- border-radius: 8px;
542
- border: 1px solid #cbd5e1;
544
+ .quick-actions[data-v-ef9effac] {
545
+ margin-bottom: 0;
546
+ padding: 10px 12px;
547
+ background-color: var(--db-bg-soft2);
548
+ border-radius: 6px;
549
+ border: 1px solid var(--db-border);
543
550
  }
544
- .actions-header[data-v-15dc1761] {
545
- margin-bottom: 16px;
551
+ .actions-header[data-v-ef9effac] {
552
+ margin-bottom: 8px;
546
553
  }
547
- .actions-title[data-v-15dc1761] {
554
+ .actions-title[data-v-ef9effac] {
548
555
  margin: 0;
549
- font-size: 16px;
556
+ font-size: 13px;
550
557
  font-weight: 600;
551
558
  display: flex;
552
559
  align-items: center;
553
560
  gap: 8px;
554
561
  }
555
- .actions-grid[data-v-15dc1761] {
562
+ .actions-grid[data-v-ef9effac] {
556
563
  display: grid;
557
- grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
558
- gap: 16px;
564
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
565
+ gap: 6px;
559
566
  }
560
- .action-btn[data-v-15dc1761] {
567
+ .action-btn[data-v-ef9effac] {
561
568
  display: flex;
562
- flex-direction: column;
569
+ flex-direction: row;
563
570
  align-items: center;
571
+ justify-content: flex-start;
564
572
  gap: 8px;
565
- padding: 16px;
566
- background-color: white;
567
- border: 1px solid #cbd5e1;
568
- border-radius: 8px;
573
+ padding: 6px 10px;
574
+ background-color: var(--db-bg-soft);
575
+ border: 1px solid var(--db-border);
576
+ border-radius: 4px;
569
577
  cursor: pointer;
570
- transition: all 0.2s ease;
571
- }
572
- .action-btn[data-v-15dc1761]:hover {
573
- background-color: #e9ecef;
574
- transform: translateY(-2px);
575
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
578
+ transition: background-color 0.15s ease, border-color 0.15s ease;
579
+ color: var(--db-text-body);
576
580
  }
577
- .action-icon[data-v-15dc1761] {
578
- font-size: 24px;
579
- color: #475569;
581
+ .action-btn[data-v-ef9effac]:hover {
582
+ background-color: var(--db-bg-soft2);
583
+ border-color: var(--db-primary-color);
580
584
  }
581
- .action-text[data-v-15dc1761] {
585
+ .action-icon[data-v-ef9effac] {
582
586
  font-size: 14px;
587
+ color: var(--db-primary-color);
588
+ }
589
+ .action-text[data-v-ef9effac] {
590
+ font-size: 12px;
583
591
  font-weight: 500;
584
- color: #1e293b;
592
+ color: var(--db-text-body);
585
593
  }
586
- .connection-tabs[data-v-15dc1761] {
587
- border: 1px solid #cbd5e1;
588
- border-radius: 8px;
594
+ .connection-tabs[data-v-ef9effac] {
595
+ border: 1px solid var(--db-border);
596
+ border-radius: 6px;
589
597
  flex: 1;
590
598
  display: flex;
591
599
  flex-direction: column;
600
+ /* flex 子项默认 min-height:auto 会拒绝收缩，内容撑破后被外层
601
+ overflow:hidden 裁掉且不出现滚动条，必须显式允许收缩 */
602
+ min-height: 0;
592
603
  }
593
- .nav-tabs[data-v-15dc1761] {
594
- border-bottom: 1px solid #cbd5e1;
595
- background-color: #f1f5f9;
604
+ .nav-tabs[data-v-ef9effac] {
605
+ border-bottom: 1px solid var(--db-border);
606
+ background-color: var(--db-gray-light);
607
+ padding: 0 4px;
608
+ gap: 0;
596
609
  }
597
- .nav-link[data-v-15dc1761] {
610
+ .nav-link[data-v-ef9effac] {
598
611
  border: none;
599
612
  border-radius: 0;
600
- padding: 12px 20px;
601
- font-size: 14px;
613
+ padding: 6px 12px;
614
+ font-size: 12px;
602
615
  font-weight: 500;
603
- transition: all 0.2s ease;
604
- color: #334155;
616
+ transition: color 0.15s ease, background-color 0.15s ease;
617
+ color: var(--db-text-muted);
605
618
  }
606
- .nav-link[data-v-15dc1761]:hover {
607
- background-color: #e9ecef;
619
+ .nav-link[data-v-ef9effac]:hover {
620
+ background-color: var(--db-bg-soft);
621
+ color: var(--db-dark-color);
608
622
  }
609
- .nav-link.active[data-v-15dc1761] {
610
- background-color: white;
611
- border-bottom: 2px solid #0d6efd;
623
+ .nav-link.active[data-v-ef9effac] {
624
+ background-color: transparent;
625
+ color: var(--db-primary-color);
626
+ border-bottom: 2px solid var(--db-primary-color);
612
627
  }
613
- .tab-content[data-v-15dc1761] {
628
+ .tab-content[data-v-ef9effac] {
614
629
  flex: 1;
615
630
  display: flex;
616
631
  flex-direction: column;
617
632
  overflow: hidden;
633
+ min-height: 0;
618
634
  }
619
- .tab-panel[data-v-15dc1761] {
620
- padding: 20px;
635
+ .tab-panel[data-v-ef9effac] {
636
+ padding: 0;
621
637
  flex: 1;
622
638
  display: flex;
623
639
  flex-direction: column;
624
640
  overflow: hidden;
641
+ min-height: 0;
625
642
  }
626
- .databases-section[data-v-15dc1761] {
643
+ .databases-section[data-v-ef9effac] {
627
644
  display: flex;
628
645
  flex-direction: column;
629
- gap: 16px;
646
+ gap: 10px;
630
647
  flex: 1;
631
648
  overflow: hidden;
649
+ min-height: 0;
632
650
  }
633
- .section-header[data-v-15dc1761] {
651
+ .section-header[data-v-ef9effac] {
634
652
  display: flex;
635
653
  justify-content: flex-end;
636
654
  align-items: center;
655
+ gap: 8px;
637
656
  }
638
- .section-actions[data-v-15dc1761] {
657
+ .db-search[data-v-ef9effac] {
639
658
  display: flex;
640
659
  align-items: center;
641
- gap: 8px;
660
+ gap: 6px;
661
+ height: 26px;
662
+ padding: 0 8px;
663
+ border: 1px solid var(--db-border-light);
664
+ border-radius: 4px;
665
+ background: var(--db-bg-soft);
666
+ transition: border-color 0.15s ease, box-shadow 0.15s ease;
642
667
  }
643
- .databases-list[data-v-15dc1761] {
644
- min-height: 300px;
645
- height: 100%;
668
+ .db-search[data-v-ef9effac]:focus-within {
669
+ border-color: var(--db-primary-color);
670
+ box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15);
671
+ }
672
+ .db-search > i[data-v-ef9effac] {
673
+ font-size: 12px;
674
+ color: var(--db-gray-dark);
675
+ flex-shrink: 0;
676
+ }
677
+ .db-search-input[data-v-ef9effac] {
678
+ border: none;
679
+ outline: none;
680
+ background: transparent;
681
+ color: var(--db-dark-color);
682
+ font-size: 12px;
683
+ line-height: 1;
684
+ width: 150px;
685
+ padding: 0;
686
+ }
687
+ .db-search-input[data-v-ef9effac]::placeholder {
688
+ color: var(--db-gray-dark);
689
+ opacity: 0.8;
690
+ }
691
+ .db-refresh-btn[data-v-ef9effac] {
692
+ display: inline-flex;
693
+ align-items: center;
694
+ justify-content: center;
695
+ width: 26px;
696
+ height: 26px;
697
+ padding: 0;
698
+ border: 1px solid var(--db-border-light);
699
+ border-radius: 4px;
700
+ background: transparent;
701
+ color: var(--db-text-muted);
702
+ cursor: pointer;
703
+ transition: all 0.15s ease;
704
+ }
705
+ .db-refresh-btn[data-v-ef9effac]:hover:not(:disabled) {
706
+ color: var(--db-primary-color);
707
+ border-color: var(--db-primary-color);
708
+ background: var(--db-primary-bg);
709
+ }
710
+ .db-refresh-btn[data-v-ef9effac]:disabled {
711
+ opacity: 0.6;
712
+ cursor: default;
713
+ }
714
+ .databases-list[data-v-ef9effac] {
715
+ flex: 1;
716
+ min-height: 0;
646
717
  overflow-y: auto;
647
718
  padding-right: 8px;
648
719
  }
649
- .loading-state[data-v-15dc1761] {
720
+ .loading-state[data-v-ef9effac] {
650
721
  display: flex;
651
722
  flex-direction: column;
652
723
  align-items: center;
653
724
  justify-content: center;
654
- padding: 60px 20px;
655
- gap: 16px;
725
+ padding: 28px 16px;
726
+ gap: 10px;
656
727
  }
657
- .empty-state[data-v-15dc1761] {
728
+ .empty-state[data-v-ef9effac] {
658
729
  display: flex;
659
730
  flex-direction: column;
660
731
  align-items: center;
661
732
  justify-content: center;
662
- padding: 60px 20px;
663
- gap: 16px;
733
+ padding: 28px 16px;
734
+ gap: 10px;
664
735
  text-align: center;
665
736
  }
666
- .empty-state i[data-v-15dc1761] {
667
- font-size: 48px;
668
- color: #ced4da;
737
+ .empty-state i[data-v-ef9effac] {
738
+ font-size: 28px;
739
+ color: var(--db-text-faint);
669
740
  }
670
- .empty-state p[data-v-15dc1761] {
741
+ .empty-state p[data-v-ef9effac] {
671
742
  margin: 0;
672
- color: #475569;
673
- font-size: 16px;
743
+ color: var(--db-text-muted);
744
+ font-size: 12px;
674
745
  }
675
- .databases-list-simple[data-v-15dc1761] {
746
+ .databases-list-simple[data-v-ef9effac] {
676
747
  display: grid;
677
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
678
- gap: 12px;
748
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
749
+ gap: 6px;
679
750
  }
680
- .database-item[data-v-15dc1761] {
751
+ .database-item[data-v-ef9effac] {
681
752
  display: flex;
682
- flex-direction: column;
753
+ flex-direction: row;
683
754
  align-items: center;
684
755
  gap: 8px;
685
- padding: 16px;
686
- border: 1px solid #cbd5e1;
687
- border-radius: 6px;
756
+ padding: 6px 8px;
757
+ border: 1px solid var(--db-border);
758
+ border-radius: 4px;
759
+ background: var(--db-bg-soft);
688
760
  cursor: pointer;
689
- transition: all 0.2s ease;
690
- text-align: center;
691
- min-height: 100px;
761
+ transition: background-color 0.15s ease, border-color 0.15s ease;
762
+ text-align: left;
692
763
  }
693
- .database-item[data-v-15dc1761]:hover {
694
- border-color: #0d6efd;
695
- background-color: #f8f9fa;
696
- transform: translateY(-2px);
697
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
764
+ .database-item[data-v-ef9effac]:hover {
765
+ background: var(--db-bg-soft2);
766
+ border-color: var(--db-primary-color);
698
767
  }
699
- .database-item-icon[data-v-15dc1761] {
700
- font-size: 32px;
701
- color: #475569;
768
+ .database-item-icon[data-v-ef9effac] {
769
+ font-size: 12px;
770
+ color: var(--db-primary-color);
771
+ flex-shrink: 0;
702
772
  }
703
- .database-item-name[data-v-15dc1761] {
704
- font-size: 14px;
773
+ .database-item-name[data-v-ef9effac] {
774
+ flex: 1;
775
+ font-size: 12px;
705
776
  font-weight: 500;
706
- color: #1e293b;
777
+ color: var(--db-dark-color);
707
778
  overflow: hidden;
708
779
  text-overflow: ellipsis;
709
780
  white-space: nowrap;
710
- max-width: 100%;
781
+ min-width: 0;
711
782
  }
712
- .database-item-actions[data-v-15dc1761] {
783
+ .database-item-actions[data-v-ef9effac] {
713
784
  display: flex;
714
785
  gap: 4px;
715
- margin-top: auto;
786
+ flex-shrink: 0;
787
+ opacity: 0.55;
788
+ transition: opacity 0.15s ease;
789
+ }
790
+ .database-item:hover .database-item-actions[data-v-ef9effac] {
791
+ opacity: 1;
716
792
  }
717
- .sql-section[data-v-15dc1761] {
793
+ .database-item-actions .btn[data-v-ef9effac] {
794
+ padding: 1px 5px;
795
+ font-size: 12px;
796
+ line-height: 1.3;
797
+ border: none;
798
+ background: transparent;
799
+ color: var(--db-darker-color);
800
+ }
801
+ .database-item-actions .btn[data-v-ef9effac]:hover {
802
+ color: var(--db-primary-color);
803
+ background: var(--db-bg-soft2);
804
+ }
805
+ .sql-section[data-v-ef9effac] {
718
806
  display: flex;
719
807
  flex-direction: column;
720
808
  gap: 16px;
721
809
  flex: 1;
722
810
  overflow: hidden;
811
+ min-height: 0;
723
812
  }
724
- .sql-header[data-v-15dc1761] {
813
+ .sql-header[data-v-ef9effac] {
725
814
  display: flex;
726
815
  justify-content: space-between;
727
816
  align-items: center;
728
817
  }
729
- .sql-title[data-v-15dc1761] {
818
+ .sql-title[data-v-ef9effac] {
730
819
  margin: 0;
731
820
  font-size: 16px;
732
821
  font-weight: 600;
@@ -734,7 +823,7 @@ to {
734
823
  align-items: center;
735
824
  gap: 8px;
736
825
  }
737
- .sql-db-info[data-v-15dc1761] {
826
+ .sql-db-info[data-v-ef9effac] {
738
827
  display: flex;
739
828
  align-items: center;
740
829
  gap: 8px;
@@ -742,778 +831,877 @@ to {
742
831
 
743
832
  /* 响应式设计 */
744
833
  @media (max-width: 768px) {
745
- .connection-header[data-v-15dc1761] {
834
+ .connection-header[data-v-ef9effac] {
746
835
  flex-direction: column;
747
836
  align-items: flex-start;
748
837
  gap: 16px;
749
838
  }
750
- .connection-actions[data-v-15dc1761] {
839
+ .connection-actions[data-v-ef9effac] {
751
840
  align-self: flex-end;
752
841
  }
753
- .connection-cards[data-v-15dc1761] {
842
+ .connection-cards[data-v-ef9effac] {
754
843
  grid-template-columns: 1fr;
755
844
  }
756
- .info-grid[data-v-15dc1761] {
845
+ .info-grid[data-v-ef9effac] {
757
846
  grid-template-columns: 1fr;
758
847
  }
759
- .stats-grid[data-v-15dc1761] {
848
+ .stats-grid[data-v-ef9effac] {
760
849
  grid-template-columns: repeat(2, 1fr);
761
850
  }
762
- .actions-grid[data-v-15dc1761] {
851
+ .actions-grid[data-v-ef9effac] {
763
852
  grid-template-columns: repeat(2, 1fr);
764
853
  }
765
- .databases-list-simple[data-v-15dc1761] {
766
- grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
767
- gap: 10px;
854
+ .databases-list-simple[data-v-ef9effac] {
855
+ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
856
+ gap: 6px;
768
857
  }
769
- .database-item[data-v-15dc1761] {
770
- padding: 12px;
771
- min-height: 80px;
858
+ .database-item[data-v-ef9effac] {
859
+ padding: 6px 8px;
772
860
  }
773
- .database-item-icon[data-v-15dc1761] {
774
- font-size: 24px;
861
+ .database-item-icon[data-v-ef9effac] {
862
+ font-size: 14px;
775
863
  }
776
- .database-item-name[data-v-15dc1761] {
864
+ .database-item-name[data-v-ef9effac] {
777
865
  font-size: 12px;
778
866
  }
779
- .nav-link[data-v-15dc1761] {
867
+ .nav-link[data-v-ef9effac] {
780
868
  padding: 10px 16px;
781
869
  font-size: 13px;
782
870
  }
783
871
  }
784
872
 
785
- .section-title[data-v-e8059709] {
786
- color: #495057;
873
+ .section-title[data-v-b80d5611] {
874
+ color: var(--db-text-body);
787
875
  font-weight: 600;
788
- border-bottom: 2px solid #e9ecef;
876
+ border-bottom: 2px solid var(--db-border-soft);
789
877
  padding-bottom: 0.5rem;
790
878
  margin-bottom: 1rem;
791
879
  }
792
- .sql-preview[data-v-e8059709] {
793
- font-family: 'Courier New', monospace;
880
+ .sql-preview[data-v-b80d5611] {
881
+ font-family: 'Courier New', Consolas, monospace;
794
882
  font-size: 0.875rem;
883
+ line-height: 1.5;
795
884
  max-height: 200px;
796
885
  overflow-y: auto;
797
- border: 1px solid #dee2e6;
798
- }
799
- .table th[data-v-e8059709] {
886
+ margin: 0;
887
+ padding: 0.75rem;
888
+ border-radius: var(--db-radius-sm);
889
+ /* 深色代码块：与全局 pre / SQL 编辑器一致，跟随主题令牌，不使用 Bootstrap bg-light */
890
+ background-color: var(--db-code-bg);
891
+ color: var(--db-code-fg);
892
+ border: 1px solid var(--db-border);
893
+ white-space: pre-wrap;
894
+ word-break: break-all;
895
+ }
896
+ .table th[data-v-b80d5611] {
800
897
  font-size: 0.875rem;
801
898
  font-weight: 600;
802
899
  }
803
- .table td[data-v-e8059709] {
900
+ .table td[data-v-b80d5611] {
804
901
  padding: 0!important;
805
902
  }
806
- .table .form-control[data-v-e8059709], .table .form-select[data-v-e8059709] {
903
+ .table .form-control[data-v-b80d5611], .table .form-select[data-v-b80d5611] {
807
904
  border: none;
808
905
  border-radius: 0;
809
906
  box-shadow: none;
810
907
  }
811
- .form-control-sm[data-v-e8059709], .form-select-sm[data-v-e8059709] {
908
+ .form-control-sm[data-v-b80d5611], .form-select-sm[data-v-b80d5611] {
812
909
  font-size: 0.875rem;
813
910
  }
814
- .modal-content[data-v-e8059709] {
911
+ .modal-content[data-v-b80d5611] {
815
912
  max-height: 90vh;
816
913
  overflow-y: auto;
817
914
  }
818
- .modal-body[data-v-e8059709] {
915
+ .modal-body[data-v-b80d5611] {
819
916
  max-height: calc(90vh - 120px);
820
917
  overflow-y: auto;
821
918
  }
822
- .input-group-sm .form-control[data-v-e8059709] {
919
+ .input-group-sm .form-control[data-v-b80d5611] {
823
920
  border-radius: 0;
824
921
  }
825
- .input-group-sm .form-control[data-v-e8059709]:first-child {
922
+ .input-group-sm .form-control[data-v-b80d5611]:first-child {
826
923
  border-top-left-radius: 0.25rem;
827
924
  border-bottom-left-radius: 0.25rem;
828
925
  }
829
- .input-group-sm .form-control[data-v-e8059709]:last-child {
926
+ .input-group-sm .form-control[data-v-b80d5611]:last-child {
830
927
  border-top-right-radius: 0.25rem;
831
928
  border-bottom-right-radius: 0.25rem;
832
929
  }
833
- .text-muted[data-v-e8059709] {
834
- color: #6c757d !important;
930
+ .text-muted[data-v-b80d5611] {
931
+ color: var(--db-text-muted) !important;
835
932
  }
836
933
 
837
- .db-tools[data-v-7577f853] {
838
- background: white;
839
- border-radius: 12px;
840
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
934
+ .db-tools[data-v-a123948c] {
935
+ background: var(--db-surface);
936
+ border-radius: 8px;
841
937
  }
842
- .tools-header[data-v-7577f853] {
843
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
844
- color: white;
845
- padding: 1rem 1.5rem;
846
- border-bottom: 1px solid #cbd5e1;
938
+ .tools-header[data-v-a123948c] {
939
+ padding: 6px 12px;
940
+ border-bottom: 1px solid var(--db-border);
847
941
  }
848
- .tools-title[data-v-7577f853] {
942
+ .tools-title[data-v-a123948c] {
849
943
  margin: 0;
850
- font-size: 1.1rem;
944
+ font-size: 0.875rem;
851
945
  font-weight: 600;
946
+ color: var(--db-dark-color);
852
947
  display: flex;
853
948
  align-items: center;
854
- gap: 0.5rem;
949
+ gap: 0.375rem;
855
950
  }
856
- .tools-content[data-v-7577f853] {
857
- padding: 1.5rem;
951
+ .tools-content[data-v-a123948c] {
952
+ padding: 12px;
858
953
  overflow-y: auto;
859
954
  }
860
- .tool-section[data-v-7577f853] {
861
- margin-bottom: 2rem;
955
+ .tool-section[data-v-a123948c] {
956
+ margin-bottom: 1rem;
957
+ }
958
+ .tool-section[data-v-a123948c]:last-child {
959
+ margin-bottom: 0;
862
960
  }
863
- .section-title[data-v-7577f853] {
864
- font-size: 0.9rem;
961
+ .section-title[data-v-a123948c] {
962
+ font-size: 0.75rem;
865
963
  font-weight: 600;
866
- color: #374151;
867
- margin-bottom: 1rem;
964
+ letter-spacing: 0.04em;
965
+ text-transform: uppercase;
966
+ color: var(--db-text-muted);
967
+ margin-bottom: 0.5rem;
868
968
  display: flex;
869
969
  align-items: center;
870
- gap: 0.5rem;
970
+ gap: 0.375rem;
871
971
  }
872
- .tool-actions[data-v-7577f853] {
972
+ .tool-actions[data-v-a123948c] {
873
973
  display: flex;
874
974
  flex-wrap: wrap;
875
- gap: 0.5rem;
975
+ gap: 0.375rem;
876
976
  }
877
- .tool-actions .btn[data-v-7577f853] {
878
- min-width: 120px;
977
+ .tool-actions .btn[data-v-a123948c] {
978
+ min-width: 108px;
879
979
  display: flex;
880
980
  align-items: center;
881
- gap: 0.5rem;
981
+ gap: 0.375rem;
882
982
  }
883
- .modal[data-v-7577f853] {
983
+ .modal[data-v-a123948c] {
884
984
  background-color: rgba(0, 0, 0, 0.5);
885
985
  }
886
- .modal-dialog[data-v-7577f853] {
986
+ .modal-dialog[data-v-a123948c] {
887
987
  max-width: 600px;
888
988
  }
889
- .modal-header[data-v-7577f853] {
890
- background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
891
- border-bottom: 1px solid #cbd5e1;
989
+ .modal-header[data-v-a123948c] {
990
+ background: var(--db-light-color);
991
+ border-bottom: 1px solid var(--db-gray-medium);
892
992
  }
893
- .modal-title[data-v-7577f853] {
894
- color: #1e293b;
993
+ .modal-title[data-v-a123948c] {
994
+ color: var(--db-dark-color);
895
995
  font-weight: 600;
896
996
  }
897
- .modal-footer[data-v-7577f853] {
898
- background: #f8fafc;
899
- border-top: 1px solid #cbd5e1;
997
+ .modal-footer[data-v-a123948c] {
998
+ background: var(--db-light-color);
999
+ border-top: 1px solid var(--db-gray-medium);
900
1000
  }
901
1001
 
902
1002
  /* 工具组件区域 */
903
- .tool-component-area[data-v-7577f853] {
904
- border-top: 1px solid #cbd5e1;
905
- background: #f8fafc;
1003
+ .tool-component-area[data-v-a123948c] {
1004
+ border-top: 1px solid var(--db-gray-medium);
1005
+ background: var(--db-light-color);
906
1006
  }
907
- .component-header[data-v-7577f853] {
1007
+ .component-header[data-v-a123948c] {
908
1008
  display: flex;
909
1009
  justify-content: space-between;
910
1010
  align-items: center;
911
- padding: 1rem 1.5rem;
912
- background: linear-gradient(135deg, #f1f5f9 0%, #f8fafc 100%);
913
- border-bottom: 1px solid #cbd5e1;
1011
+ padding: 6px 12px;
1012
+ background: var(--db-bg-soft);
1013
+ border-bottom: 1px solid var(--db-border);
914
1014
  }
915
- .component-title[data-v-7577f853] {
1015
+ .component-title[data-v-a123948c] {
916
1016
  margin: 0;
917
- font-size: 1rem;
1017
+ font-size: 0.875rem;
918
1018
  font-weight: 600;
919
- color: #1e293b;
1019
+ color: var(--db-dark-color);
920
1020
  display: flex;
921
1021
  align-items: center;
922
- gap: 0.5rem;
1022
+ gap: 0.375rem;
923
1023
  }
924
- .tool-component[data-v-7577f853] {
925
- padding: 1.5rem;
1024
+ .tool-component[data-v-a123948c] {
1025
+ padding: 12px;
926
1026
  }
927
- .sync-component[data-v-7577f853] {
928
- background: white;
929
- border-radius: 0.375rem;
1027
+ .sync-component[data-v-a123948c] {
1028
+ background: var(--db-surface);
1029
+ border-radius: 4px;
930
1030
  }
931
1031
 
932
1032
  /* 执行结果区域 */
933
- .execution-results[data-v-7577f853] {
934
- border-top: 1px solid #cbd5e1;
935
- background: #f8fafc;
1033
+ .execution-results[data-v-a123948c] {
1034
+ border-top: 1px solid var(--db-border);
1035
+ background: var(--db-bg-soft);
936
1036
  }
937
- .results-header[data-v-7577f853] {
1037
+ .results-header[data-v-a123948c] {
938
1038
  display: flex;
939
1039
  justify-content: space-between;
940
1040
  align-items: center;
941
- padding: 1rem 1.5rem;
942
- background: linear-gradient(135deg, #f1f5f9 0%, #f8fafc 100%);
943
- border-bottom: 1px solid #cbd5e1;
1041
+ padding: 6px 12px;
1042
+ background: var(--db-bg-soft);
1043
+ border-bottom: 1px solid var(--db-border);
944
1044
  }
945
- .results-title[data-v-7577f853] {
1045
+ .results-title[data-v-a123948c] {
946
1046
  margin: 0;
947
- font-size: 1rem;
1047
+ font-size: 0.875rem;
948
1048
  font-weight: 600;
949
- color: #1e293b;
1049
+ color: var(--db-dark-color);
950
1050
  display: flex;
951
1051
  align-items: center;
952
- gap: 0.5rem;
1052
+ gap: 0.375rem;
953
1053
  }
954
- .results-content[data-v-7577f853] {
1054
+ .results-content[data-v-a123948c] {
955
1055
  max-height: 400px;
956
1056
  overflow-y: auto;
957
- padding: 1rem;
1057
+ padding: 8px;
958
1058
  }
959
- .no-results[data-v-7577f853] {
1059
+ .no-results[data-v-a123948c] {
960
1060
  display: flex;
961
1061
  flex-direction: column;
962
1062
  align-items: center;
963
1063
  justify-content: center;
964
- padding: 3rem 1rem;
965
- color: #475569;
1064
+ gap: 0.5rem;
1065
+ padding: 32px 16px;
1066
+ color: var(--db-text-muted);
966
1067
  }
967
- .no-results i[data-v-7577f853] {
968
- font-size: 3rem;
969
- margin-bottom: 1rem;
1068
+ .no-results i[data-v-a123948c] {
1069
+ font-size: 1.5rem;
1070
+ margin-bottom: 0;
1071
+ opacity: 0.5;
970
1072
  }
971
- .no-results p[data-v-7577f853] {
1073
+ .no-results p[data-v-a123948c] {
972
1074
  margin: 0;
973
- font-size: 1rem;
1075
+ font-size: 0.8125rem;
974
1076
  }
975
- .result-item[data-v-7577f853] {
976
- margin-bottom: 0.75rem;
977
- border: 1px solid #cbd5e1;
978
- border-radius: 8px;
979
- background: white;
1077
+ .result-item[data-v-a123948c] {
1078
+ margin-bottom: 0.5rem;
1079
+ border: 1px solid var(--db-border);
1080
+ border-radius: 6px;
1081
+ background: var(--db-surface);
980
1082
  overflow: hidden;
981
1083
  transition: box-shadow 0.2s;
982
1084
  }
983
- .result-item[data-v-7577f853]:hover {
1085
+ .result-item[data-v-a123948c]:hover {
984
1086
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
985
1087
  }
986
- .result-item.result-success[data-v-7577f853] {
1088
+ .result-item.result-success[data-v-a123948c] {
987
1089
  border-left: 4px solid #22c55e;
988
1090
  }
989
- .result-item.result-error[data-v-7577f853] {
1091
+ .result-item.result-error[data-v-a123948c] {
990
1092
  border-left: 4px solid #ef4444;
991
1093
  }
992
- .result-item.result-info[data-v-7577f853] {
1094
+ .result-item.result-info[data-v-a123948c] {
993
1095
  border-left: 4px solid #3b82f6;
994
1096
  }
995
- .result-header[data-v-7577f853] {
1097
+ .result-header[data-v-a123948c] {
996
1098
  display: flex;
997
1099
  justify-content: space-between;
998
1100
  align-items: center;
999
1101
  padding: 0.75rem 1rem;
1000
1102
  cursor: pointer;
1001
- background: white;
1103
+ background: var(--db-surface);
1002
1104
  transition: background 0.2s;
1003
1105
  }
1004
- .result-header[data-v-7577f853]:hover {
1005
- background: #f8fafc;
1106
+ .result-header[data-v-a123948c]:hover {
1107
+ background: var(--db-light-color);
1006
1108
  }
1007
- .result-title[data-v-7577f853] {
1109
+ .result-title[data-v-a123948c] {
1008
1110
  display: flex;
1009
1111
  align-items: center;
1010
1112
  gap: 0.75rem;
1011
1113
  flex: 1;
1012
1114
  }
1013
- .result-title i[data-v-7577f853] {
1115
+ .result-title i[data-v-a123948c] {
1014
1116
  font-size: 1.1rem;
1015
1117
  }
1016
- .operation-name[data-v-7577f853] {
1118
+ .operation-name[data-v-a123948c] {
1017
1119
  font-weight: 600;
1018
- color: #1e293b;
1120
+ color: var(--db-dark-color);
1019
1121
  font-size: 0.95rem;
1020
1122
  }
1021
- .operation-time[data-v-7577f853] {
1022
- color: #334155;
1123
+ .operation-time[data-v-a123948c] {
1124
+ color: var(--db-darker-color);
1023
1125
  font-size: 0.85rem;
1024
1126
  margin-left: auto;
1025
1127
  }
1026
- .toggle-icon[data-v-7577f853] {
1128
+ .toggle-icon[data-v-a123948c] {
1027
1129
  transition: transform 0.2s;
1028
- color: #475569;
1130
+ color: var(--db-gray-dark);
1029
1131
  font-size: 0.9rem;
1030
1132
  }
1031
- .toggle-icon.expanded[data-v-7577f853] {
1133
+ .toggle-icon.expanded[data-v-a123948c] {
1032
1134
  transform: rotate(180deg);
1033
1135
  }
1034
- .result-body[data-v-7577f853] {
1136
+ .result-body[data-v-a123948c] {
1035
1137
  padding: 1rem;
1036
- background: #fafafa;
1037
- border-top: 1px solid #cbd5e1;
1138
+ background: var(--db-bg-soft4);
1139
+ border-top: 1px solid var(--db-gray-medium);
1038
1140
  }
1039
- .result-body pre[data-v-7577f853] {
1141
+ .result-body pre[data-v-a123948c] {
1040
1142
  margin: 0;
1041
1143
  font-size: 0.85rem;
1042
1144
  line-height: 1.5;
1043
1145
  max-height: 300px;
1044
1146
  overflow: auto;
1045
1147
  }
1046
- .result-body code[data-v-7577f853] {
1148
+ .result-body code[data-v-a123948c] {
1047
1149
  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
1048
1150
  }
1049
1151
 
1050
1152
  /* JSON 语法高亮 - 不使用 scoped 以确保 v-html 内容能应用样式 */
1051
- [data-v-7577f853] .json-key {
1052
- color: #d04255;
1153
+ [data-v-a123948c] .json-key {
1154
+ color: var(--db-json-key);
1053
1155
  font-weight: 500;
1054
1156
  }
1055
- [data-v-7577f853] .json-string {
1056
- color: #22863a;
1157
+ [data-v-a123948c] .json-string {
1158
+ color: var(--db-json-string);
1057
1159
  }
1058
- [data-v-7577f853] .json-number {
1059
- color: #005cc5;
1160
+ [data-v-a123948c] .json-number {
1161
+ color: var(--db-json-number);
1060
1162
  }
1061
- [data-v-7577f853] .json-boolean {
1062
- color: #d73a49;
1163
+ [data-v-a123948c] .json-boolean {
1164
+ color: var(--db-json-boolean);
1063
1165
  }
1064
- [data-v-7577f853] .json-null {
1065
- color: #6f42c1;
1166
+ [data-v-a123948c] .json-null {
1167
+ color: var(--db-json-null);
1066
1168
  }
1067
1169
 
1068
1170
  /* 滚动条样式 */
1069
- .results-content[data-v-7577f853]::-webkit-scrollbar,
1070
- .result-body pre[data-v-7577f853]::-webkit-scrollbar {
1171
+ .results-content[data-v-a123948c]::-webkit-scrollbar,
1172
+ .result-body pre[data-v-a123948c]::-webkit-scrollbar {
1071
1173
  width: 8px;
1072
1174
  height: 8px;
1073
1175
  }
1074
- .results-content[data-v-7577f853]::-webkit-scrollbar-track,
1075
- .result-body pre[data-v-7577f853]::-webkit-scrollbar-track {
1076
- background: #f1f5f9;
1176
+ .results-content[data-v-a123948c]::-webkit-scrollbar-track,
1177
+ .result-body pre[data-v-a123948c]::-webkit-scrollbar-track {
1178
+ background: var(--db-gray-light);
1077
1179
  border-radius: 4px;
1078
1180
  }
1079
- .results-content[data-v-7577f853]::-webkit-scrollbar-thumb,
1080
- .result-body pre[data-v-7577f853]::-webkit-scrollbar-thumb {
1081
- background: #cbd5e1;
1181
+ .results-content[data-v-a123948c]::-webkit-scrollbar-thumb,
1182
+ .result-body pre[data-v-a123948c]::-webkit-scrollbar-thumb {
1183
+ background: var(--db-gray-medium);
1082
1184
  border-radius: 4px;
1083
1185
  }
1084
- .results-content[data-v-7577f853]::-webkit-scrollbar-thumb:hover,
1085
- .result-body pre[data-v-7577f853]::-webkit-scrollbar-thumb:hover {
1086
- background: #94a3b8;
1186
+ .results-content[data-v-a123948c]::-webkit-scrollbar-thumb:hover,
1187
+ .result-body pre[data-v-a123948c]::-webkit-scrollbar-thumb:hover {
1188
+ background: var(--db-text-faint);
1087
1189
  }
1088
1190
 
1089
- .database-detail[data-v-922ad53c] {
1191
+ .database-detail[data-v-a6f90f39] {
1090
1192
  width: 100%;
1091
1193
  height: 100%;
1092
1194
  display: flex;
1093
1195
  flex-direction: column;
1094
1196
  }
1095
- .sql-executor-section[data-v-922ad53c] {
1096
- margin: 15px 0;
1097
- padding: 15px;
1098
- background-color: #f8f9fa;
1099
- border-radius: 4px;
1100
- border: 1px solid #cbd5e6;
1197
+
1198
+ /* SQL 面板直接铺满 tab 内容区（内边距由 .tab-content 统一提供） */
1199
+ .sql-executor-section[data-v-a6f90f39] {
1200
+ margin: 0;
1201
+ padding: 0;
1202
+ background-color: transparent;
1203
+ border: none;
1204
+ border-radius: 0;
1101
1205
  flex: 1;
1102
1206
  display: flex;
1103
1207
  }
1104
1208
 
1105
1209
  /* 加载状态样式 */
1106
- .loading-state[data-v-922ad53c] {
1210
+ .loading-state[data-v-a6f90f39] {
1107
1211
  display: flex;
1108
1212
  flex-direction: column;
1109
1213
  align-items: center;
1110
1214
  justify-content: center;
1111
- padding: 40px 0;
1112
- color: #475569;
1215
+ padding: 24px 0;
1216
+ color: var(--db-text-muted);
1113
1217
  }
1114
- .loading-state .spinner-border[data-v-922ad53c] {
1115
- margin-bottom: 15px;
1116
- color: #0d6efd;
1218
+ .loading-state .spinner-border[data-v-a6f90f39] {
1219
+ margin-bottom: 10px;
1220
+ color: var(--db-primary-color);
1117
1221
  }
1118
- .loading-state p[data-v-922ad53c] {
1222
+ .loading-state p[data-v-a6f90f39] {
1119
1223
  margin: 0;
1120
- font-size: 14px;
1224
+ font-size: 12px;
1121
1225
  }
1122
- .database-header[data-v-922ad53c] {
1123
- padding: 1rem;
1124
- background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
1125
- border-bottom: 1px solid #cbd5e1;
1226
+ .database-header[data-v-a6f90f39] {
1227
+ padding: 8px 12px;
1228
+ background: var(--db-bg-soft2);
1229
+ border-bottom: 1px solid var(--db-border);
1126
1230
  }
1127
- .database-header-content[data-v-922ad53c] {
1231
+ .database-header-content[data-v-a6f90f39] {
1128
1232
  display: flex;
1129
1233
  justify-content: space-between;
1130
1234
  align-items: center;
1131
- gap: 2rem;
1235
+ gap: 1rem;
1132
1236
  }
1133
- .database-info[data-v-922ad53c] {
1237
+ .database-info[data-v-a6f90f39] {
1134
1238
  display: flex;
1135
1239
  align-items: center;
1136
- gap: 1rem;
1240
+ gap: 0.625rem;
1137
1241
  }
1138
- .database-icon[data-v-922ad53c] {
1139
- width: 60px;
1140
- height: 60px;
1141
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
1142
- border-radius: 12px;
1242
+ .database-icon[data-v-a6f90f39] {
1243
+ width: 34px;
1244
+ height: 34px;
1245
+ background: var(--db-primary-bg);
1246
+ border: 1px solid var(--db-border);
1247
+ border-radius: 6px;
1143
1248
  display: flex;
1144
1249
  align-items: center;
1145
1250
  justify-content: center;
1146
- color: white;
1147
- font-size: 1.5rem;
1251
+ color: var(--db-primary-color);
1252
+ font-size: 1rem;
1253
+ flex-shrink: 0;
1148
1254
  }
1149
- .database-meta h4[data-v-922ad53c] {
1150
- margin: 0 0 0.5rem 0;
1151
- color: #1e293b;
1255
+ .database-meta h4[data-v-a6f90f39] {
1256
+ margin: 0 0 0.25rem 0;
1257
+ font-size: 0.9375rem;
1258
+ color: var(--db-dark-color);
1152
1259
  font-weight: 600;
1153
1260
  }
1154
- .connection-info[data-v-922ad53c] {
1261
+ .connection-info[data-v-a6f90f39] {
1155
1262
  display: flex;
1156
- gap: 0.75rem;
1263
+ align-items: center;
1264
+ gap: 0.375rem;
1265
+ font-size: 0.75rem;
1266
+ }
1267
+ .connection-info .crumb[data-v-a6f90f39] {
1268
+ display: inline-flex;
1269
+ align-items: center;
1270
+ padding: 0;
1271
+ border-radius: 0;
1272
+ font-size: 0.75rem;
1273
+ transition: color 0.15s ease;
1274
+ }
1275
+ .connection-info .crumb-link[data-v-a6f90f39] {
1276
+ cursor: pointer;
1277
+ background: transparent;
1278
+ color: var(--db-primary-color);
1279
+ }
1280
+ .connection-info .crumb-link[data-v-a6f90f39]:hover {
1281
+ color: var(--db-primary-light);
1282
+ text-decoration: underline;
1283
+ }
1284
+ .connection-info .crumb-current[data-v-a6f90f39] {
1285
+ font-weight: 500;
1286
+ color: var(--db-text-muted);
1157
1287
  }
1158
- .connection-name[data-v-922ad53c] {
1159
- background: rgba(102, 126, 234, 0.1);
1160
- color: #667eea;
1161
- padding: 0.25rem 0.5rem;
1162
- border-radius: 12px;
1163
- font-size: 0.875rem;
1288
+ .connection-name[data-v-a6f90f39] {
1289
+ background: transparent;
1290
+ color: var(--db-primary-color);
1291
+ padding: 0;
1292
+ border-radius: 0;
1293
+ font-size: 0.75rem;
1164
1294
  font-weight: 500;
1165
1295
  }
1166
- .connection-type[data-v-922ad53c] {
1167
- background: #e2e8f0;
1168
- color: #334155;
1169
- padding: 0.25rem 0.5rem;
1170
- border-radius: 12px;
1171
- font-size: 0.875rem;
1172
- font-weight: 600;
1296
+ .connection-type[data-v-a6f90f39] {
1297
+ background: var(--db-primary-bg);
1298
+ color: var(--db-primary-color);
1299
+ padding: 1px 7px;
1300
+ border-radius: 999px;
1301
+ font-size: 0.6875rem;
1302
+ font-weight: 500;
1173
1303
  }
1174
- .database-stats[data-v-922ad53c] {
1304
+ .database-stats[data-v-a6f90f39] {
1175
1305
  display: flex;
1176
- gap: 2rem;
1306
+ gap: 1.5rem;
1177
1307
  }
1178
- .stat-item[data-v-922ad53c] {
1179
- text-align: center;
1308
+ .stat-item[data-v-a6f90f39] {
1309
+ text-align: right;
1180
1310
  }
1181
- .stat-value[data-v-922ad53c] {
1182
- font-size: 1.5rem;
1311
+ .stat-value[data-v-a6f90f39] {
1312
+ font-size: 1rem;
1183
1313
  font-weight: 700;
1184
- color: #1e293b;
1185
- margin-bottom: 0.25rem;
1314
+ line-height: 1.2;
1315
+ color: var(--db-dark-color);
1316
+ margin-bottom: 0;
1186
1317
  }
1187
- .stat-label[data-v-922ad53c] {
1188
- font-size: 0.875rem;
1189
- color: #334155;
1190
- font-weight: 600;
1318
+ .stat-label[data-v-a6f90f39] {
1319
+ font-size: 0.6875rem;
1320
+ color: var(--db-text-muted);
1321
+ font-weight: 400;
1191
1322
  }
1192
- .database-tabs[data-v-922ad53c] {
1323
+ .database-tabs[data-v-a6f90f39] {
1193
1324
  flex: 1;
1194
1325
  overflow: hidden;
1195
1326
  display: flex;
1196
1327
  flex-direction: column;
1328
+ min-height: 0;
1197
1329
  }
1198
- .nav-tabs[data-v-922ad53c] {
1199
- background: #f8fafc;
1200
- border-bottom: 1px solid #cbd5e1;
1201
- padding: 0 1.5rem;
1330
+ .nav-tabs[data-v-a6f90f39] {
1331
+ background: var(--db-gray-light);
1332
+ border-bottom: 1px solid var(--db-border);
1333
+ padding: 0 0.5rem;
1334
+ gap: 0;
1202
1335
  }
1203
- .nav-link[data-v-922ad53c] {
1336
+ .nav-link[data-v-a6f90f39] {
1204
1337
  border: none;
1205
1338
  background: transparent;
1206
- color: #334155;
1207
- padding: 1rem 1.5rem;
1339
+ color: var(--db-text-muted);
1340
+ padding: 6px 12px;
1341
+ font-size: 12px;
1208
1342
  font-weight: 500;
1209
- transition: all 0.2s ease;
1343
+ transition: color 0.15s ease, background-color 0.15s ease;
1210
1344
  }
1211
- .nav-link[data-v-922ad53c]:hover {
1212
- color: #667eea;
1213
- background: rgba(102, 126, 234, 0.1);
1345
+ .nav-link[data-v-a6f90f39]:hover {
1346
+ color: var(--db-dark-color);
1347
+ background: var(--db-bg-soft);
1214
1348
  }
1215
- .nav-link.active[data-v-922ad53c] {
1216
- color: #667eea;
1217
- background: white;
1218
- border-bottom: 2px solid #667eea;
1349
+ .nav-link.active[data-v-a6f90f39] {
1350
+ color: var(--db-primary-color);
1351
+ background: transparent;
1352
+ border-bottom: 2px solid var(--db-primary-color);
1219
1353
  }
1220
- .tab-content[data-v-922ad53c] {
1354
+ .tab-content[data-v-a6f90f39] {
1221
1355
  overflow-y: auto;
1222
1356
  flex: 1;
1223
1357
  display: flex;
1224
1358
  flex-direction: column;
1225
- height: 100%;
1359
+ min-height: 0;
1226
1360
  }
1227
- .tab-panel[data-v-922ad53c] {
1361
+ .tab-panel[data-v-a6f90f39] {
1228
1362
  flex: 1;
1229
1363
  overflow-y: auto;
1230
1364
  display: flex;
1231
1365
  flex-direction: column;
1232
- height: 100%;
1366
+ min-height: 0;
1233
1367
  }
1234
- .table-grid[data-v-922ad53c] {
1368
+ .table-grid[data-v-a6f90f39] {
1235
1369
  display: grid;
1236
- grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
1237
- gap: 1rem;
1370
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
1371
+ gap: 8px;
1238
1372
  }
1239
- .table-card[data-v-922ad53c] {
1240
- background: white;
1241
- border: 1px solid #cbd5e1;
1242
- border-radius: 12px;
1373
+ .table-card[data-v-a6f90f39] {
1374
+ background: var(--db-bg-soft2);
1375
+ border: 1px solid var(--db-border);
1376
+ border-radius: 6px;
1243
1377
  overflow: hidden;
1244
- transition: all 0.2s ease;
1378
+ transition: border-color 0.15s ease, background-color 0.15s ease;
1245
1379
  cursor: pointer;
1246
1380
  }
1247
- .table-card[data-v-922ad53c]:hover {
1248
- border-color: #667eea;
1249
- box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
1250
- transform: translateY(-2px);
1381
+ .table-card[data-v-a6f90f39]:hover {
1382
+ border-color: var(--db-primary-color);
1383
+ background: var(--db-bg-soft);
1384
+ box-shadow: none;
1251
1385
  }
1252
- .card-header[data-v-922ad53c] {
1253
- background: #f8fafc;
1254
- padding: 1rem;
1386
+ .card-header[data-v-a6f90f39] {
1387
+ background: var(--db-bg-soft);
1388
+ padding: 6px 8px;
1255
1389
  display: flex;
1256
1390
  align-items: center;
1257
- gap: 0.75rem;
1391
+ gap: 0.5rem;
1258
1392
  }
1259
- .table-icon[data-v-922ad53c] {
1260
- width: 40px;
1261
- height: 40px;
1262
- background: linear-gradient(135deg, #10b981 0%, #059669 100%);
1263
- border-radius: 8px;
1393
+ .table-icon[data-v-a6f90f39] {
1394
+ width: 22px;
1395
+ height: 22px;
1396
+ font-size: 0.75rem;
1397
+ background: var(--db-success-bg);
1398
+ border-radius: 4px;
1264
1399
  display: flex;
1265
1400
  align-items: center;
1266
1401
  justify-content: center;
1267
- color: white;
1402
+ color: var(--db-accent-color);
1403
+ flex-shrink: 0;
1268
1404
  }
1269
- .table-info[data-v-922ad53c] {
1405
+ .table-info[data-v-a6f90f39] {
1270
1406
  flex: 1;
1271
1407
  min-width: 0; /* 允许子元素截断 */
1272
1408
  }
1273
- .table-name-wrapper[data-v-922ad53c] {
1409
+ .table-name-wrapper[data-v-a6f90f39] {
1274
1410
  display: flex;
1275
1411
  align-items: center;
1276
- gap: 0.5rem;
1277
- margin-bottom: 0.25rem;
1412
+ gap: 0.375rem;
1413
+ margin-bottom: 0;
1278
1414
  }
1279
- .table-name[data-v-922ad53c] {
1280
- font-weight: 600;
1281
- color: #1e293b;
1415
+ .table-name[data-v-a6f90f39] {
1416
+ font-size: 0.8125rem;
1417
+ font-weight: 500;
1418
+ color: var(--db-dark-color);
1282
1419
  white-space: nowrap;
1283
1420
  overflow: hidden;
1284
1421
  text-overflow: ellipsis;
1422
+ min-width: 0;
1285
1423
  }
1286
- .table-engine[data-v-922ad53c] {
1287
- font-size: 0.75rem;
1288
- color: #334155;
1289
- background: #e2e8f0;
1290
- padding: 0.125rem 0.375rem;
1291
- border-radius: 8px;
1424
+ .table-engine[data-v-a6f90f39] {
1425
+ font-size: 0.625rem;
1426
+ color: var(--db-primary-color);
1427
+ background: var(--db-primary-bg);
1428
+ padding: 0 0.375rem;
1429
+ border-radius: 999px;
1292
1430
  flex-shrink: 0;
1293
1431
  }
1294
- .table-comment-header[data-v-922ad53c] {
1295
- font-size: 0.75rem;
1296
- color: #334155;
1432
+ .table-comment-header[data-v-a6f90f39] {
1433
+ font-size: 0.6875rem;
1434
+ color: var(--db-text-muted);
1297
1435
  white-space: nowrap;
1298
1436
  overflow: hidden;
1299
1437
  text-overflow: ellipsis;
1300
1438
  }
1301
- .card-body[data-v-922ad53c] {
1302
- padding: 1rem;
1439
+
1440
+ /* 卡片正文：标签在上、数值在下，右下角编辑按钮（对齐 VSCode 数据库插件的表格卡片） */
1441
+ .card-body[data-v-a6f90f39] {
1442
+ padding: 8px;
1443
+ display: flex;
1444
+ flex-direction: column;
1445
+ align-items: stretch;
1446
+ gap: 8px;
1303
1447
  }
1304
- .table-stats[data-v-922ad53c] {
1448
+ .table-stats[data-v-a6f90f39] {
1305
1449
  display: flex;
1306
- gap: 1rem;
1307
- margin-bottom: 0.75rem;
1450
+ align-items: flex-start;
1451
+ gap: 1.25rem;
1452
+ margin-bottom: 0;
1453
+ flex-wrap: wrap;
1454
+ min-width: 0;
1308
1455
  }
1309
- .stat[data-v-922ad53c] {
1456
+ .stat[data-v-a6f90f39] {
1310
1457
  display: flex;
1311
1458
  flex-direction: column;
1312
- gap: 0.25rem;
1459
+ align-items: flex-start;
1460
+ gap: 0;
1313
1461
  }
1314
- .table-comment[data-v-922ad53c] {
1315
- font-size: 0.875rem;
1316
- color: #334155;
1462
+
1463
+ /* 卡片内的统计字号覆盖（不影响顶部数据库统计的大号数字） */
1464
+ .table-card .stat-label[data-v-a6f90f39] {
1465
+ font-size: 0.6875rem;
1466
+ color: var(--db-text-muted);
1467
+ }
1468
+ .table-card .stat-value[data-v-a6f90f39] {
1469
+ font-size: 0.9375rem;
1470
+ font-weight: 600;
1471
+ color: var(--db-dark-color);
1472
+ }
1473
+ .table-comment[data-v-a6f90f39] {
1474
+ font-size: 0.8125rem;
1475
+ color: var(--db-text-muted);
1317
1476
  font-style: italic;
1318
- margin-bottom: 0.75rem;
1477
+ margin-bottom: 0.5rem;
1319
1478
  line-height: 1.4;
1320
1479
  }
1321
- .table-actions[data-v-922ad53c] {
1480
+ .table-actions[data-v-a6f90f39] {
1322
1481
  display: flex;
1323
- gap: 0.5rem;
1482
+ gap: 0.375rem;
1483
+ flex-shrink: 0;
1484
+ }
1485
+ .table-actions .btn[data-v-a6f90f39] {
1486
+ width: 22px;
1487
+ height: 22px;
1488
+ padding: 0;
1489
+ display: inline-flex;
1490
+ align-items: center;
1491
+ justify-content: center;
1492
+ font-size: 0.6875rem;
1493
+ line-height: 1;
1494
+ border: 1px solid var(--db-primary-color);
1495
+ border-radius: 4px;
1496
+ background: transparent;
1497
+ color: var(--db-primary-color);
1498
+ }
1499
+ .table-actions .btn[data-v-a6f90f39]:hover {
1500
+ background: var(--db-primary-bg);
1501
+ color: var(--db-primary-color);
1502
+ border-color: var(--db-primary-color);
1324
1503
  }
1325
- .empty-state[data-v-922ad53c] {
1504
+ .empty-state[data-v-a6f90f39] {
1326
1505
  display: flex;
1327
1506
  flex-direction: column;
1328
1507
  align-items: center;
1329
1508
  justify-content: center;
1330
- height: 200px;
1331
- color: #475569;
1509
+ gap: 0.5rem;
1510
+ height: 140px;
1511
+ color: var(--db-text-muted);
1332
1512
  text-align: center;
1333
- font-size: 1.5rem;
1513
+ font-size: 0.8125rem;
1334
1514
  }
1335
- .empty-state i[data-v-922ad53c] {
1336
- margin-bottom: 1rem;
1515
+ .empty-state i[data-v-a6f90f39] {
1516
+ font-size: 1.5rem;
1517
+ margin-bottom: 0;
1337
1518
  opacity: 0.5;
1338
1519
  }
1339
1520
 
1340
1521
  /* 视图和存储过程卡片样式 */
1341
- .views-grid[data-v-922ad53c], .procedures-grid[data-v-922ad53c] {
1522
+ .views-grid[data-v-a6f90f39], .procedures-grid[data-v-a6f90f39] {
1342
1523
  display: grid;
1343
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
1344
- gap: 1rem;
1524
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
1525
+ gap: 8px;
1345
1526
  }
1346
- .view-card[data-v-922ad53c], .procedure-card[data-v-922ad53c] {
1347
- background: white;
1348
- border: 1px solid #cbd5e1;
1349
- border-radius: 12px;
1527
+ .view-card[data-v-a6f90f39], .procedure-card[data-v-a6f90f39] {
1528
+ background: var(--db-bg-soft2);
1529
+ border: 1px solid var(--db-border);
1530
+ border-radius: 6px;
1350
1531
  overflow: hidden;
1351
- transition: all 0.2s ease;
1532
+ transition: border-color 0.15s ease, background-color 0.15s ease;
1352
1533
  }
1353
- .view-card[data-v-922ad53c]:hover, .procedure-card[data-v-922ad53c]:hover {
1354
- border-color: #667eea;
1355
- box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
1356
- transform: translateY(-2px);
1534
+ .view-card[data-v-a6f90f39]:hover, .procedure-card[data-v-a6f90f39]:hover {
1535
+ border-color: var(--db-primary-color);
1536
+ background: var(--db-bg-soft);
1537
+ box-shadow: none;
1538
+ transform: none;
1357
1539
  }
1358
- .view-card .card-header[data-v-922ad53c], .procedure-card .card-header[data-v-922ad53c] {
1359
- background: #f8fafc;
1360
- padding: 1rem;
1540
+ .view-card .card-header[data-v-a6f90f39], .procedure-card .card-header[data-v-a6f90f39] {
1541
+ background: var(--db-bg-soft);
1542
+ padding: 8px 10px;
1361
1543
  display: flex;
1362
1544
  align-items: center;
1363
- gap: 0.75rem;
1545
+ gap: 0.5rem;
1364
1546
  }
1365
- .view-icon[data-v-922ad53c], .procedure-icon[data-v-922ad53c] {
1366
- width: 40px;
1367
- height: 40px;
1368
- background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
1369
- border-radius: 8px;
1547
+ .view-icon[data-v-a6f90f39], .procedure-icon[data-v-a6f90f39] {
1548
+ width: 26px;
1549
+ height: 26px;
1550
+ font-size: 0.8125rem;
1551
+ background: var(--db-info-bg);
1552
+ border-radius: 4px;
1370
1553
  display: flex;
1371
1554
  align-items: center;
1372
1555
  justify-content: center;
1373
- color: white;
1556
+ color: var(--db-info-color);
1557
+ flex-shrink: 0;
1374
1558
  }
1375
- .procedure-icon[data-v-922ad53c] {
1376
- background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
1559
+ .procedure-icon[data-v-a6f90f39] {
1560
+ background: var(--db-warning-bg);
1561
+ color: var(--db-warning-color);
1377
1562
  }
1378
- .view-name[data-v-922ad53c], .procedure-name[data-v-922ad53c] {
1379
- font-weight: 600;
1380
- color: #1e293b;
1381
- margin-bottom: 0.25rem;
1563
+ .view-name[data-v-a6f90f39], .procedure-name[data-v-a6f90f39] {
1564
+ font-size: 0.8125rem;
1565
+ font-weight: 500;
1566
+ color: var(--db-dark-color);
1567
+ margin-bottom: 0.125rem;
1382
1568
  }
1383
- .view-comment[data-v-922ad53c], .procedure-comment[data-v-922ad53c] {
1384
- font-size: 0.75rem;
1385
- color: #334155;
1386
- margin-bottom: 0.5rem;
1569
+ .view-comment[data-v-a6f90f39], .procedure-comment[data-v-a6f90f39] {
1570
+ font-size: 0.6875rem;
1571
+ color: var(--db-text-muted);
1572
+ margin-bottom: 0.375rem;
1387
1573
  line-height: 1.4;
1388
1574
  }
1389
- .procedure-type[data-v-922ad53c] {
1575
+ .procedure-type[data-v-a6f90f39] {
1390
1576
  display: flex;
1391
1577
  gap: 0.25rem;
1392
1578
  flex-wrap: wrap;
1393
1579
  }
1394
- .view-card .card-body[data-v-922ad53c], .procedure-card .card-body[data-v-922ad53c] {
1395
- padding: 1rem;
1580
+ .view-card .card-body[data-v-a6f90f39], .procedure-card .card-body[data-v-a6f90f39] {
1581
+ padding: 8px 10px;
1396
1582
  }
1397
- .view-actions[data-v-922ad53c], .procedure-actions[data-v-922ad53c] {
1583
+ .view-actions[data-v-a6f90f39], .procedure-actions[data-v-a6f90f39] {
1398
1584
  display: flex;
1399
- gap: 0.5rem;
1585
+ gap: 0.375rem;
1400
1586
  }
1401
- .views-actions[data-v-922ad53c], .procedures-actions[data-v-922ad53c], .tables-actions[data-v-922ad53c] {
1587
+
1588
+ /* 操作栏：无底色无边框，只是一行工具按钮（对齐 VSCode 插件的 Create Table / Refresh） */
1589
+ .views-actions[data-v-a6f90f39], .procedures-actions[data-v-a6f90f39], .tables-actions[data-v-a6f90f39] {
1402
1590
  display: flex;
1403
- gap: 0.5rem;
1404
- margin-bottom: 1rem;
1405
- padding: 0.75rem 1rem;
1406
- background: #f8fafc;
1407
- border-radius: 8px;
1591
+ gap: 0.375rem;
1592
+ margin-bottom: 10px;
1593
+ padding: 0;
1594
+ background: transparent;
1595
+ border-radius: 0;
1408
1596
  }
1409
1597
 
1410
1598
  /* 模态框样式 */
1411
- .modal-dialog[data-v-922ad53c] {
1599
+ .modal-dialog[data-v-a6f90f39] {
1412
1600
  margin-top: 10vh;
1413
1601
  }
1414
- .modal-content[data-v-922ad53c] {
1602
+ .modal-content[data-v-a6f90f39] {
1415
1603
  border-radius: 12px;
1416
1604
  border: none;
1417
1605
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
1418
1606
  }
1419
- .modal-header[data-v-922ad53c] {
1420
- border-bottom: 1px solid #cbd5e1;
1607
+ .modal-header[data-v-a6f90f39] {
1608
+ border-bottom: 1px solid var(--db-gray-medium);
1421
1609
  padding: 1rem 1.5rem;
1422
1610
  }
1423
- .modal-title[data-v-922ad53c] {
1611
+ .modal-title[data-v-a6f90f39] {
1424
1612
  margin: 0;
1425
1613
  font-weight: 600;
1426
- color: #1e293b;
1614
+ color: var(--db-dark-color);
1427
1615
  }
1428
- .modal-body[data-v-922ad53c] {
1616
+ .modal-body[data-v-a6f90f39] {
1429
1617
  padding: 1.5rem;
1430
1618
  }
1431
- .modal-footer[data-v-922ad53c] {
1432
- border-top: 1px solid #cbd5e1;
1619
+ .modal-footer[data-v-a6f90f39] {
1620
+ border-top: 1px solid var(--db-gray-medium);
1433
1621
  padding: 1rem 1.5rem;
1434
1622
  display: flex;
1435
1623
  justify-content: flex-end;
1436
1624
  gap: 0.5rem;
1437
1625
  }
1438
1626
 
1439
- .modal[data-v-7f0c01ca] {
1627
+ .modal[data-v-d9b3ed26] {
1440
1628
  background-color: rgba(0, 0, 0, 0.5);
1441
1629
  }
1442
- .modal-dialog[data-v-7f0c01ca] {
1630
+ .modal-dialog[data-v-d9b3ed26] {
1443
1631
  max-width: 800px;
1444
1632
  }
1445
- .form-label[data-v-7f0c01ca] {
1633
+ .form-label[data-v-d9b3ed26] {
1446
1634
  font-weight: 500;
1447
- color: #374151;
1635
+ color: var(--db-text-body);
1448
1636
  }
1449
- .form-control[data-v-7f0c01ca], .form-select[data-v-7f0c01ca] {
1450
- border: 1px solid #d1d5db;
1637
+ .form-control[data-v-d9b3ed26], .form-select[data-v-d9b3ed26] {
1638
+ border: 1px solid var(--db-border-light);
1451
1639
  border-radius: 6px;
1452
1640
  }
1453
- .form-control[data-v-7f0c01ca]:focus, .form-select[data-v-7f0c01ca]:focus {
1641
+ .form-control[data-v-d9b3ed26]:focus, .form-select[data-v-d9b3ed26]:focus {
1454
1642
  border-color: #3b82f6;
1455
1643
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
1456
1644
  }
1457
- .modal-header[data-v-7f0c01ca] {
1458
- background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
1459
- border-bottom: 1px solid #e2e8f0;
1645
+ .modal-header[data-v-d9b3ed26] {
1646
+ background: linear-gradient(135deg, var(--db-light-color) 0%, var(--db-gray-light) 100%);
1647
+ border-bottom: 1px solid var(--db-border);
1460
1648
  }
1461
- .modal-title[data-v-7f0c01ca] {
1462
- color: #1e293b;
1649
+ .modal-title[data-v-d9b3ed26] {
1650
+ color: var(--db-dark-color);
1463
1651
  font-weight: 600;
1464
1652
  }
1465
- .modal-footer[data-v-7f0c01ca] {
1466
- background: #f8fafc;
1467
- border-top: 1px solid #e2e8f0;
1653
+ .modal-footer[data-v-d9b3ed26] {
1654
+ background: var(--db-light-color);
1655
+ border-top: 1px solid var(--db-border);
1468
1656
  }
1469
- .text-danger[data-v-7f0c01ca] {
1657
+ .text-danger[data-v-d9b3ed26] {
1470
1658
  color: #ef4444;
1471
1659
  }
1472
- .text-muted[data-v-7f0c01ca] {
1473
- color: #6b7280;
1660
+ .text-muted[data-v-d9b3ed26] {
1661
+ color: var(--db-text-muted);
1474
1662
  font-size: 0.875rem;
1475
1663
  }
1476
- .json-editor .text-muted[data-v-7f0c01ca] {
1664
+ .json-editor .text-muted[data-v-d9b3ed26] {
1477
1665
  font-size: 0.75rem;
1478
1666
  }
1479
- .json-editor[data-v-7f0c01ca] .cm-editor {
1667
+ .json-editor[data-v-d9b3ed26] .cm-editor {
1480
1668
  height: 100%;
1481
1669
  }
1482
1670
 
1483
- .table-data-grid[data-v-5ed43e1b] {
1671
+ .table-data-grid[data-v-f6763da8] {
1484
1672
  display: flex;
1485
1673
  flex-direction: column;
1486
1674
  height: 100%;
1487
1675
  }
1488
- .data-grid-wrapper[data-v-5ed43e1b] {
1676
+ .data-grid-wrapper[data-v-f6763da8] {
1489
1677
  flex: 1;
1490
1678
  overflow: hidden;
1491
1679
  }
1492
- .column-header-custom[data-v-5ed43e1b] {
1680
+ .column-header-custom[data-v-f6763da8] {
1493
1681
  display: flex;
1494
1682
  flex-direction: column;
1495
1683
  cursor: pointer;
1496
1684
  user-select: none;
1497
1685
  }
1498
- .header-main[data-v-5ed43e1b] {
1686
+ .header-main[data-v-f6763da8] {
1499
1687
  display: flex;
1500
1688
  align-items: center;
1501
1689
  }
1502
- .column-name[data-v-5ed43e1b] {
1690
+ .column-name[data-v-f6763da8] {
1503
1691
  font-weight: 600;
1504
1692
  }
1505
- .header-sub[data-v-5ed43e1b] {
1693
+ .header-sub[data-v-f6763da8] {
1506
1694
  display: flex;
1507
1695
  align-items: center;
1508
1696
  margin-top: 2px;
1509
1697
  max-width: 150px; /* 限制子标题区域的最大宽度 */
1510
1698
  }
1511
- .column-type[data-v-5ed43e1b] {
1699
+ .column-type[data-v-f6763da8] {
1512
1700
  font-size: 0.7rem;
1513
1701
  line-height: 1;
1514
1702
  flex-shrink: 0; /* 防止类型被压缩 */
1515
1703
  }
1516
- .column-comment[data-v-5ed43e1b] {
1704
+ .column-comment[data-v-f6763da8] {
1517
1705
  font-size: 0.7rem;
1518
1706
  line-height: 1;
1519
1707
  opacity: 0.8;
@@ -1522,521 +1710,549 @@ to {
1522
1710
  text-overflow: ellipsis;
1523
1711
  flex: 1; /* 允许注释占据剩余空间并截断 */
1524
1712
  }
1525
- .cell-value[data-v-5ed43e1b] {
1713
+ .cell-value[data-v-f6763da8] {
1526
1714
  max-width: 300px;
1527
1715
  overflow: hidden;
1528
1716
  text-overflow: ellipsis;
1529
1717
  white-space: nowrap;
1530
1718
  }
1531
- .grid-footer-bar[data-v-5ed43e1b] {
1532
- background: #f8f9fa;
1533
- border-top: 1px solid #dee2e6;
1534
- padding: 8px 16px;
1719
+ .grid-footer-bar[data-v-f6763da8] {
1720
+ background: var(--db-bg-soft2);
1721
+ border-top: 1px solid var(--db-border);
1722
+ padding: 6px 12px;
1723
+ }
1724
+ .footer-pagination[data-v-f6763da8] .pagination {
1725
+ margin-bottom: 0;
1535
1726
  }
1536
1727
 
1537
- .table-detail[data-v-7e9c9695] {
1728
+ .table-detail[data-v-15c7e3be] {
1538
1729
  width: 100%;
1539
1730
  height: 100%;
1540
1731
  display: flex;
1541
1732
  flex-direction: column;
1542
1733
  }
1543
- .table-header[data-v-7e9c9695] {
1544
- background-color: #f1f5f9;
1545
- border-bottom: 1px solid #cbd5e1;
1546
- padding: 15px 20px;
1734
+ .table-header[data-v-15c7e3be] {
1735
+ background-color: var(--db-bg-soft2);
1736
+ border-bottom: 1px solid var(--db-border);
1737
+ padding: 8px 12px;
1547
1738
  }
1548
- .table-header-content[data-v-7e9c9695] {
1739
+ .table-header-content[data-v-15c7e3be] {
1549
1740
  display: flex;
1550
1741
  justify-content: space-between;
1551
1742
  align-items: center;
1552
1743
  }
1553
- .table-info[data-v-7e9c9695] {
1744
+ .table-info[data-v-15c7e3be] {
1554
1745
  display: flex;
1555
1746
  align-items: center;
1556
- gap: 15px;
1747
+ gap: 10px;
1557
1748
  }
1558
- .table-icon[data-v-7e9c9695] {
1559
- font-size: 32px;
1560
- color: #1e293b;
1749
+ .table-icon[data-v-15c7e3be] {
1750
+ font-size: 20px;
1751
+ color: var(--db-primary-color);
1561
1752
  }
1562
- .table-meta[data-v-7e9c9695] {
1753
+ .table-meta[data-v-15c7e3be] {
1563
1754
  display: flex;
1564
1755
  flex-direction: column;
1565
- gap: 5px;
1756
+ gap: 2px;
1566
1757
  }
1567
- .table-name[data-v-7e9c9695] {
1758
+ .table-name[data-v-15c7e3be] {
1568
1759
  margin: 0;
1569
- font-size: 1.25rem;
1760
+ font-size: 0.9375rem;
1570
1761
  font-weight: 600;
1571
1762
  }
1572
- .table-breadcrumb[data-v-7e9c9695] {
1763
+ .table-breadcrumb[data-v-15c7e3be] {
1573
1764
  display: flex;
1574
1765
  align-items: center;
1575
- gap: 8px;
1576
- font-size: 0.875rem;
1577
- color: #475569;
1766
+ gap: 6px;
1767
+ font-size: 0.75rem;
1768
+ color: var(--db-text-muted);
1578
1769
  }
1579
- .table-stats[data-v-7e9c9695] {
1770
+ .table-breadcrumb .crumb[data-v-15c7e3be] {
1771
+ display: inline-flex;
1772
+ align-items: center;
1773
+ padding: 0;
1774
+ border-radius: 0;
1775
+ transition: color 0.15s ease;
1776
+ }
1777
+ .table-breadcrumb .crumb-link[data-v-15c7e3be] {
1778
+ cursor: pointer;
1779
+ color: var(--db-primary-color);
1780
+ }
1781
+ .table-breadcrumb .crumb-link[data-v-15c7e3be]:hover {
1782
+ background-color: transparent;
1783
+ color: var(--db-primary-light);
1784
+ text-decoration: underline;
1785
+ }
1786
+ .table-breadcrumb .crumb-current[data-v-15c7e3be] {
1787
+ font-weight: 500;
1788
+ color: var(--db-text-muted);
1789
+ }
1790
+ .table-stats[data-v-15c7e3be] {
1580
1791
  display: flex;
1581
- gap: 20px;
1792
+ gap: 14px;
1582
1793
  }
1583
- .stat-item[data-v-7e9c9695] {
1794
+ .stat-item[data-v-15c7e3be] {
1584
1795
  display: flex;
1585
1796
  flex-direction: column;
1586
- align-items: center;
1587
- gap: 2px;
1797
+ align-items: flex-end;
1798
+ gap: 0;
1588
1799
  }
1589
- .stat-value[data-v-7e9c9695] {
1590
- font-size: 1.125rem;
1800
+ .stat-value[data-v-15c7e3be] {
1801
+ font-size: 0.9375rem;
1591
1802
  font-weight: 600;
1592
- color: #1e293b;
1803
+ line-height: 1.25;
1804
+ color: var(--db-dark-color);
1593
1805
  }
1594
- .stat-label[data-v-7e9c9695] {
1595
- font-size: 0.75rem;
1596
- color: #475569;
1806
+ .stat-label[data-v-15c7e3be] {
1807
+ font-size: 0.6875rem;
1808
+ color: var(--db-text-muted);
1597
1809
  }
1598
- .table-toolbar[data-v-7e9c9695] {
1810
+ .table-toolbar[data-v-15c7e3be] {
1599
1811
  display: flex;
1600
1812
  justify-content: space-between;
1601
1813
  align-items: center;
1602
- padding: 10px 20px;
1603
- background-color: #f1f5f9;
1604
- border-bottom: 1px solid #cbd5e1;
1814
+ padding: 6px 12px;
1815
+ background-color: var(--db-bg-soft2);
1816
+ border-bottom: 1px solid var(--db-border);
1605
1817
  }
1606
- .toolbar-left[data-v-7e9c9695] {
1818
+ .toolbar-left[data-v-15c7e3be] {
1607
1819
  display: flex;
1608
- gap: 10px;
1820
+ gap: 6px;
1609
1821
  align-items: center;
1610
1822
  }
1611
- .toolbar-right[data-v-7e9c9695] {
1823
+ .toolbar-right[data-v-15c7e3be] {
1612
1824
  display: flex;
1613
- gap: 10px;
1825
+ gap: 6px;
1614
1826
  align-items: center;
1615
1827
  }
1616
- .table-tabs[data-v-7e9c9695] {
1828
+ .table-tabs[data-v-15c7e3be] {
1617
1829
  flex: 1;
1618
1830
  display: flex;
1619
1831
  flex-direction: column;
1620
1832
  overflow: hidden;
1621
1833
  }
1622
- .nav-tabs[data-v-7e9c9695] {
1623
- border-bottom: 1px solid #cbd5e1;
1624
- background-color: #f1f5f9;
1834
+ .nav-tabs[data-v-15c7e3be] {
1835
+ border-bottom: 1px solid var(--db-border);
1836
+ background-color: var(--db-gray-light);
1625
1837
  flex-shrink: 0;
1838
+ padding: 0 6px;
1626
1839
  }
1627
- .nav-tabs .nav-link[data-v-7e9c9695] {
1628
- color: #334155;
1840
+ .nav-tabs .nav-link[data-v-15c7e3be] {
1841
+ color: var(--db-text-muted);
1629
1842
  border: none;
1630
- border-bottom: 3px solid transparent;
1843
+ border-bottom: 2px solid transparent;
1631
1844
  border-radius: 0;
1632
- padding: 10px 15px;
1845
+ padding: 6px 12px;
1846
+ font-size: 12px;
1633
1847
  font-weight: 500;
1634
1848
  }
1635
- .nav-tabs .nav-link[data-v-7e9c9695]:hover {
1636
- background-color: #e2e8f0;
1637
- border-bottom-color: #94a3b8;
1849
+ .nav-tabs .nav-link[data-v-15c7e3be]:hover {
1850
+ background-color: var(--db-bg-soft);
1851
+ border-bottom-color: var(--db-border-light);
1852
+ color: var(--db-dark-color);
1638
1853
  }
1639
- .nav-tabs .nav-link.active[data-v-7e9c9695] {
1640
- background-color: #fff;
1641
- border-bottom-color: #0d6efd;
1642
- color: #0d6efd;
1854
+ .nav-tabs .nav-link.active[data-v-15c7e3be] {
1855
+ background-color: transparent;
1856
+ border-bottom-color: var(--db-primary-color);
1857
+ color: var(--db-primary-color);
1643
1858
  }
1644
- .tab-content[data-v-7e9c9695] {
1859
+ .tab-content[data-v-15c7e3be] {
1645
1860
  flex: 1;
1646
1861
  overflow: auto;
1647
- padding: 20px;
1648
- background-color: #fff;
1862
+ padding: 10px 12px;
1863
+ background-color: transparent;
1649
1864
  display: flex;
1650
1865
  flex-direction: column;
1651
1866
  }
1652
- .tab-panel[data-v-7e9c9695] {
1867
+ .tab-panel[data-v-15c7e3be] {
1653
1868
  flex: 1;
1654
1869
  display: flex;
1655
1870
  flex-direction: column;
1656
1871
  height: 100%;
1657
1872
  overflow: auto;
1658
1873
  }
1659
- .data-content[data-v-7e9c9695] {
1874
+ .data-content[data-v-15c7e3be] {
1660
1875
  height: 100%;
1661
1876
  display: flex;
1662
1877
  flex-direction: column;
1663
1878
  }
1664
- .data-content.loading[data-v-7e9c9695] {
1879
+ .data-content.loading[data-v-15c7e3be] {
1665
1880
  opacity: 0.7;
1666
1881
  pointer-events: none;
1667
1882
  }
1668
- .table-responsive[data-v-7e9c9695] {
1883
+ .table-responsive[data-v-15c7e3be] {
1669
1884
  flex: 1;
1670
1885
  overflow: auto;
1671
1886
  }
1672
- .column-header[data-v-7e9c9695] {
1887
+ .column-header[data-v-15c7e3be] {
1673
1888
  position: relative;
1674
1889
  }
1675
- .column-key[data-v-7e9c9695] {
1890
+ .column-key[data-v-15c7e3be] {
1676
1891
  position: absolute;
1677
1892
  top: -5px;
1678
1893
  right: -15px;
1679
- color: #0d6efd;
1894
+ color: var(--db-primary-color);
1680
1895
  font-size: 0.75rem;
1681
1896
  }
1682
- .cell-value[data-v-7e9c9695] {
1897
+ .cell-value[data-v-15c7e3be] {
1683
1898
  max-width: 200px;
1684
1899
  overflow: hidden;
1685
1900
  text-overflow: ellipsis;
1686
1901
  white-space: nowrap;
1687
1902
  }
1688
- .loading-state[data-v-7e9c9695] {
1903
+ .loading-state[data-v-15c7e3be] {
1689
1904
  display: flex;
1690
1905
  flex-direction: column;
1691
1906
  align-items: center;
1692
1907
  justify-content: center;
1693
- height: 300px;
1694
- gap: 15px;
1908
+ height: 200px;
1909
+ gap: 10px;
1695
1910
  }
1696
- .empty-state[data-v-7e9c9695] {
1911
+ .empty-state[data-v-15c7e3be] {
1697
1912
  display: flex;
1698
1913
  flex-direction: column;
1699
1914
  align-items: center;
1700
1915
  justify-content: center;
1701
- height: 300px;
1702
- gap: 15px;
1703
- color: #475569;
1916
+ height: 200px;
1917
+ gap: 10px;
1918
+ color: var(--db-text-muted);
1704
1919
  }
1705
- .empty-state i[data-v-7e9c9695] {
1706
- font-size: 48px;
1920
+ .empty-state i[data-v-15c7e3be] {
1921
+ font-size: 28px;
1707
1922
  opacity: 0.5;
1708
1923
  }
1709
- .pagination-nav[data-v-7e9c9695] {
1710
- margin-top: 20px;
1711
- border-top: 1px solid #cbd5e1;
1712
- padding-top: 15px;
1924
+ .pagination-nav[data-v-15c7e3be] {
1925
+ margin-top: 10px;
1926
+ border-top: 1px solid var(--db-border);
1927
+ padding-top: 10px;
1713
1928
  }
1714
- .pagination-container[data-v-7e9c9695] {
1929
+ .pagination-container[data-v-15c7e3be] {
1715
1930
  display: flex;
1716
1931
  align-items: center;
1717
1932
  justify-content: space-between;
1718
1933
  flex-wrap: wrap;
1719
1934
  gap: 10px;
1720
1935
  }
1721
- .pagination-info[data-v-7e9c9695] {
1722
- font-size: 0.875rem;
1723
- color: #475569;
1936
+ .pagination-info[data-v-15c7e3be] {
1937
+ font-size: 0.75rem;
1938
+ color: var(--db-text-muted);
1724
1939
  }
1725
- .page-size-selector[data-v-7e9c9695] {
1940
+ .page-size-selector[data-v-15c7e3be] {
1726
1941
  display: flex;
1727
1942
  align-items: center;
1728
1943
  gap: 5px;
1729
1944
  }
1730
- .page-jump[data-v-7e9c9695] {
1945
+ .page-jump[data-v-15c7e3be] {
1731
1946
  display: flex;
1732
1947
  align-items: center;
1733
1948
  gap: 5px;
1734
1949
  }
1735
- .structure-actions[data-v-7e9c9695] {
1950
+ .structure-actions[data-v-15c7e3be] {
1736
1951
  display: flex;
1737
- gap: 10px;
1738
- margin-bottom: 15px;
1952
+ gap: 6px;
1953
+ margin-bottom: 10px;
1739
1954
  }
1740
- .structure-table[data-v-7e9c9695], .indexes-table[data-v-7e9c9695], .relations-table[data-v-7e9c9695] {
1955
+ .structure-table[data-v-15c7e3be], .indexes-table[data-v-15c7e3be], .relations-table[data-v-15c7e3be] {
1741
1956
  overflow: auto;
1742
1957
  }
1743
- .structure-table table[data-v-7e9c9695], .indexes-table table[data-v-7e9c9695], .relations-table table[data-v-7e9c9695] {
1958
+ .structure-table table[data-v-15c7e3be], .indexes-table table[data-v-15c7e3be], .relations-table table[data-v-15c7e3be] {
1744
1959
  width: 100%;
1745
1960
  }
1746
- .sql-section[data-v-7e9c9695] {
1961
+ .sql-section[data-v-15c7e3be] {
1747
1962
  height: 100%;
1748
1963
  }
1749
1964
 
1750
1965
  /* 响应式设计 */
1751
1966
  @media (max-width: 768px) {
1752
- .table-header-content[data-v-7e9c9695] {
1967
+ .table-header-content[data-v-15c7e3be] {
1753
1968
  flex-direction: column;
1754
1969
  align-items: flex-start;
1755
1970
  gap: 15px;
1756
1971
  }
1757
- .table-stats[data-v-7e9c9695] {
1972
+ .table-stats[data-v-15c7e3be] {
1758
1973
  width: 100%;
1759
1974
  justify-content: space-around;
1760
1975
  }
1761
- .table-toolbar[data-v-7e9c9695] {
1976
+ .table-toolbar[data-v-15c7e3be] {
1762
1977
  flex-direction: column;
1763
1978
  align-items: stretch;
1764
1979
  gap: 10px;
1765
1980
  }
1766
- .toolbar-left[data-v-7e9c9695], .toolbar-right[data-v-7e9c9695] {
1981
+ .toolbar-left[data-v-15c7e3be], .toolbar-right[data-v-15c7e3be] {
1767
1982
  justify-content: center;
1768
1983
  }
1769
- .pagination-container[data-v-7e9c9695] {
1984
+ .pagination-container[data-v-15c7e3be] {
1770
1985
  flex-direction: column;
1771
1986
  align-items: flex-start;
1772
1987
  gap: 15px;
1773
1988
  }
1774
- .pagination[data-v-7e9c9695] {
1989
+ .pagination[data-v-15c7e3be] {
1775
1990
  width: 100%;
1776
1991
  justify-content: center;
1777
1992
  }
1778
1993
  }
1779
1994
 
1780
- .database-explorer[data-v-96b10f51] {
1995
+ .database-explorer[data-v-50189218] {
1781
1996
  height: 100vh;
1782
1997
  min-height: 600px;
1783
1998
  }
1784
- .explorer-layout[data-v-96b10f51] {
1999
+ .explorer-layout[data-v-50189218] {
1785
2000
  display: flex;
1786
2001
  height: 100%;
1787
- background: #ffffff;
1788
- border-radius: 12px;
1789
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
2002
+ background: var(--db-surface);
1790
2003
  overflow: hidden;
1791
- border: 1px solid #cbd5e1;
1792
2004
  }
1793
2005
 
1794
2006
  /* 左侧边栏 */
1795
- .explorer-sidebar[data-v-96b10f51] {
1796
- width: 350px;
2007
+ .explorer-sidebar[data-v-50189218] {
2008
+ width: 264px;
1797
2009
  flex-shrink: 0;
1798
- border-right: 1px solid #cbd5e1;
2010
+ border-right: 1px solid var(--db-border);
1799
2011
  display: flex;
1800
2012
  flex-direction: column;
1801
- background: #ffffff;
2013
+ background: var(--db-gray-light);
1802
2014
  }
1803
- .sidebar-content[data-v-96b10f51] {
2015
+ .sidebar-content[data-v-50189218] {
1804
2016
  flex: 1;
1805
2017
  overflow-y: auto;
1806
2018
  padding: 0.5rem 0;
1807
2019
  display: flex;
1808
2020
  flex-direction: column;
1809
2021
  }
1810
- .tree-container[data-v-96b10f51] {
2022
+ .tree-container[data-v-50189218] {
1811
2023
  flex: 1;
1812
2024
  }
1813
2025
 
1814
2026
  /* 工具信息样式 - 固定在左下角 */
1815
- .sidebar-tool-info[data-v-96b10f51] {
1816
- padding: 0.75rem;
1817
- border-top: 1px solid #cbd5e1;
1818
- background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
2027
+ .sidebar-tool-info[data-v-50189218] {
2028
+ padding: 0.5rem 0.625rem;
2029
+ border-top: 1px solid var(--db-border);
2030
+ background: transparent;
1819
2031
  display: flex;
1820
2032
  align-items: center;
1821
- gap: 0.75rem;
2033
+ gap: 0.5rem;
1822
2034
  cursor: pointer;
1823
- transition: all 0.3s ease;
2035
+ transition: background-color 0.15s ease;
1824
2036
  }
1825
- .sidebar-tool-info[data-v-96b10f51]:hover {
1826
- background: linear-gradient(135deg, #e0e7ff 0%, #ddd6fe 100%);
1827
- transform: translateY(-1px);
2037
+ .sidebar-tool-info[data-v-50189218]:hover {
2038
+ background: var(--db-bg-soft);
1828
2039
  }
1829
- .tool-logo[data-v-96b10f51] {
1830
- width: 32px;
1831
- height: 32px;
1832
- border-radius: 6px;
1833
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
2040
+ .tool-logo[data-v-50189218] {
2041
+ width: 24px;
2042
+ height: 24px;
2043
+ border-radius: 4px;
2044
+ background: var(--db-primary-color);
1834
2045
  display: flex;
1835
2046
  align-items: center;
1836
2047
  justify-content: center;
1837
- color: white;
1838
- font-size: 1rem;
2048
+ color: var(--db-on-accent);
2049
+ font-size: 0.8125rem;
1839
2050
  flex-shrink: 0;
1840
2051
  }
1841
- .tool-details[data-v-96b10f51] {
2052
+ .tool-details[data-v-50189218] {
1842
2053
  flex: 1;
1843
2054
  display: flex;
1844
2055
  flex-direction: column;
1845
2056
  gap: 0.125rem;
1846
2057
  }
1847
- .tool-name[data-v-96b10f51] {
2058
+ .tool-name[data-v-50189218] {
1848
2059
  font-size: 0.875rem;
1849
2060
  font-weight: 600;
1850
- color: #0f172a;
2061
+ color: var(--db-black);
1851
2062
  }
1852
- .tool-description[data-v-96b10f51] {
2063
+ .tool-description[data-v-50189218] {
1853
2064
  font-size: 0.75rem;
1854
- color: #334155;
2065
+ color: var(--db-darker-color);
1855
2066
  }
1856
- .sidebar-header[data-v-96b10f51] {
1857
- padding: 1rem 0.875rem;
1858
- border-bottom: 1px solid #cbd5e1;
1859
- background: #f8f9fa;
2067
+ .sidebar-header[data-v-50189218] {
2068
+ padding: 0.5rem 0.625rem;
2069
+ border-bottom: 1px solid var(--db-border);
2070
+ background: transparent;
1860
2071
  display: flex;
1861
2072
  justify-content: space-between;
1862
2073
  align-items: center;
1863
2074
  }
1864
- .sidebar-title[data-v-96b10f51] {
2075
+ .sidebar-title[data-v-50189218] {
1865
2076
  margin: 0;
1866
- font-size: 0.9375rem;
2077
+ font-size: 0.6875rem;
1867
2078
  font-weight: 600;
1868
- color: #24292f;
2079
+ letter-spacing: 0.06em;
2080
+ text-transform: uppercase;
2081
+ color: var(--db-text-muted);
1869
2082
  display: flex;
1870
2083
  align-items: center;
1871
- gap: 0.5rem;
2084
+ gap: 0.375rem;
1872
2085
  }
1873
- .sidebar-title i[data-v-96b10f51] {
1874
- color: #374151;
2086
+ .sidebar-title i[data-v-50189218] {
2087
+ color: var(--db-text-muted);
1875
2088
  }
1876
- .sidebar-actions[data-v-96b10f51] {
2089
+ .sidebar-actions[data-v-50189218] {
1877
2090
  display: flex;
1878
2091
  gap: 0.25rem;
1879
2092
  }
1880
- .sidebar-actions .btn[data-v-96b10f51] {
1881
- padding: 0.375rem 0.625rem;
2093
+ .sidebar-actions .btn[data-v-50189218] {
2094
+ padding: 0.15rem 0.4rem;
1882
2095
  font-size: 0.75rem;
1883
- border: 1px solid #d0d7de;
1884
- background-color: #ffffff;
1885
- color: #24292f;
1886
- border-radius: 6px;
2096
+ border: 1px solid var(--db-border);
2097
+ background-color: transparent;
2098
+ color: var(--db-text-muted);
2099
+ border-radius: 4px;
1887
2100
  transition: all 0.15s ease;
1888
2101
  }
1889
- .sidebar-actions .btn[data-v-96b10f51]:hover {
1890
- background-color: #f3f4f6;
1891
- border-color: #d0d7de;
2102
+ .sidebar-actions .btn[data-v-50189218]:hover {
2103
+ background-color: var(--db-bg-soft);
2104
+ border-color: var(--db-border-light);
2105
+ color: var(--db-dark-color);
1892
2106
  }
1893
- .sidebar-actions .btn-outline-primary[data-v-96b10f51] {
1894
- border-color: #0969da;
1895
- color: #0969da;
2107
+ .sidebar-actions .btn-outline-primary[data-v-50189218] {
2108
+ border-color: var(--db-border);
2109
+ color: var(--db-text-muted);
1896
2110
  }
1897
- .sidebar-actions .btn-outline-primary[data-v-96b10f51]:hover {
1898
- background-color: #0969da;
1899
- border-color: #0969da;
1900
- color: #ffffff;
2111
+ .sidebar-actions .btn-outline-primary[data-v-50189218]:hover {
2112
+ background-color: var(--db-primary-bg);
2113
+ border-color: var(--db-primary-color);
2114
+ color: var(--db-primary-color);
1901
2115
  }
1902
- .sidebar-actions .btn-outline-success[data-v-96b10f51] {
1903
- border-color: #1a7f37;
1904
- color: #1a7f37;
2116
+ .sidebar-actions .btn-outline-success[data-v-50189218] {
2117
+ border-color: var(--db-border);
2118
+ color: var(--db-text-muted);
1905
2119
  }
1906
- .sidebar-actions .btn-outline-success[data-v-96b10f51]:hover {
1907
- background-color: #1a7f37;
1908
- border-color: #1a7f37;
1909
- color: #ffffff;
2120
+ .sidebar-actions .btn-outline-success[data-v-50189218]:hover {
2121
+ background-color: var(--db-success-bg);
2122
+ border-color: var(--db-accent-color);
2123
+ color: var(--db-accent-color);
1910
2124
  }
1911
- .sidebar-content[data-v-96b10f51] {
2125
+ .sidebar-content[data-v-50189218] {
1912
2126
  flex: 1;
1913
2127
  overflow-y: auto;
1914
- padding: 0.5rem 0;
2128
+ padding: 0.25rem 0;
1915
2129
  }
1916
2130
 
1917
2131
  /* 树形结构 */
1918
- .tree-container[data-v-96b10f51] {
1919
- font-size: 0.875rem;
2132
+ .tree-container[data-v-50189218] {
2133
+ font-size: 0.8125rem;
1920
2134
  user-select: none;
1921
2135
  }
1922
- .tree-node[data-v-96b10f51] {
2136
+ .tree-node[data-v-50189218] {
1923
2137
  margin-bottom: 0;
1924
2138
  }
1925
- .tree-children[data-v-96b10f51] {
1926
- margin-left: 0.75rem;
1927
- border-left: 1px solid #e1e5e9;
1928
- padding-left: 0.5rem;
2139
+ .tree-children[data-v-50189218] {
2140
+ margin-left: 0.5rem;
2141
+ border-left: 1px solid var(--db-border);
2142
+ padding-left: 0.375rem;
1929
2143
  }
1930
- .node-content[data-v-96b10f51] {
2144
+ .node-content[data-v-50189218] {
1931
2145
  display: flex;
1932
2146
  align-items: center;
1933
- padding: 0.375rem 0.75rem;
2147
+ padding: 0.175rem 0.5rem;
1934
2148
  cursor: pointer;
1935
2149
  transition: background-color 0.15s ease;
1936
2150
  position: relative;
1937
- margin-right: 0.5rem;
1938
- border-radius: 6px;
1939
- gap: 0.25rem;
2151
+ margin-right: 0.25rem;
2152
+ border-radius: 4px;
2153
+ gap: 0.125rem;
1940
2154
  }
1941
- .node-expand[data-v-96b10f51] {
1942
- width: 16px;
1943
- height: 16px;
2155
+ .node-expand[data-v-50189218] {
2156
+ width: 14px;
2157
+ height: 14px;
1944
2158
  display: flex;
1945
2159
  align-items: center;
1946
2160
  justify-content: center;
1947
2161
  flex-shrink: 0;
1948
- margin-right: 0.25rem;
2162
+ margin-right: 0.125rem;
1949
2163
  }
1950
- .node-expand i[data-v-96b10f51] {
1951
- font-size: 0.6875rem;
1952
- color: #374151;
2164
+ .node-expand i[data-v-50189218] {
2165
+ font-size: 0.625rem;
2166
+ color: var(--db-text-muted);
1953
2167
  transition: transform 0.15s ease;
1954
2168
  }
1955
- .node-expand i.expanded[data-v-96b10f51] {
2169
+ .node-expand i.expanded[data-v-50189218] {
1956
2170
  transform: rotate(90deg);
1957
2171
  }
1958
- .node-main[data-v-96b10f51] {
2172
+ .node-main[data-v-50189218] {
1959
2173
  display: flex;
1960
2174
  align-items: center;
1961
2175
  flex: 1;
1962
2176
  min-width: 0;
1963
2177
  }
1964
- .node-content[data-v-96b10f51]:hover {
1965
- background-color: #f3f4f6;
2178
+ .node-content[data-v-50189218]:hover {
2179
+ background-color: var(--db-bg-soft);
1966
2180
  }
1967
- .tree-node.selected .node-content[data-v-96b10f51] {
1968
- background-color: #eff1ff;
1969
- color: #0969da;
1970
- font-weight: 500;
1971
- box-shadow: 0 2px 8px rgba(9, 105, 218, 0.15);
2181
+ .tree-node.selected .node-content[data-v-50189218] {
2182
+ background-color: var(--db-primary-bg);
2183
+ color: var(--db-dark-color);
2184
+ box-shadow: none;
1972
2185
  }
1973
- .tree-node.selected .node-content[data-v-96b10f51]::before {
2186
+ .tree-node.selected .node-content[data-v-50189218]::before {
1974
2187
  content: '';
1975
2188
  position: absolute;
1976
2189
  left: 0;
1977
2190
  top: 0;
1978
2191
  bottom: 0;
1979
- width: 3px;
1980
- background: linear-gradient(135deg, #0969da, #0550ae);
1981
- border-radius: 3px 0 0 3px;
2192
+ width: 2px;
2193
+ background: var(--db-primary-color);
2194
+ border-radius: 2px 0 0 2px;
1982
2195
  }
1983
- .node-icon[data-v-96b10f51] {
1984
- width: 20px;
2196
+ .node-icon[data-v-50189218] {
2197
+ width: 16px;
1985
2198
  display: flex;
1986
2199
  justify-content: center;
1987
2200
  flex-shrink: 0;
1988
- margin-right: 0.5rem;
2201
+ margin-right: 0.375rem;
1989
2202
  }
1990
- .node-icon i[data-v-96b10f51] {
1991
- font-size: 0.875rem;
2203
+ .node-icon i[data-v-50189218] {
2204
+ font-size: 0.8125rem;
2205
+ color: var(--db-text-muted);
1992
2206
  }
1993
- .node-label[data-v-96b10f51] {
2207
+ .node-label[data-v-50189218] {
1994
2208
  flex: 1;
1995
2209
  display: flex;
1996
2210
  align-items: center;
1997
2211
  gap: 0.375rem;
1998
2212
  min-width: 0;
1999
2213
  }
2000
- .connection-name[data-v-96b10f51],
2001
- .database-name[data-v-96b10f51],
2002
- .table-name[data-v-96b10f51] {
2003
- font-weight: 500;
2214
+ .connection-name[data-v-50189218],
2215
+ .database-name[data-v-50189218],
2216
+ .table-name[data-v-50189218] {
2217
+ font-weight: 400;
2004
2218
  white-space: nowrap;
2005
2219
  overflow: hidden;
2006
2220
  text-overflow: ellipsis;
2007
- line-height: 1.25;
2008
- }
2009
- .tree-node.selected .connection-name[data-v-96b10f51],
2010
- .tree-node.selected .database-name[data-v-96b10f51],
2011
- .tree-node.selected .table-name[data-v-96b10f51] {
2012
- font-weight: 600;
2221
+ line-height: 1.4;
2013
2222
  }
2014
- .connection-type[data-v-96b10f51],
2015
- .table-info[data-v-96b10f51] {
2016
- font-size: 0.75rem;
2017
- color: #374151;
2018
- background-color: #e2e8f0;
2019
- padding: 0.125rem 0.375rem;
2020
- border-radius: 12px;
2223
+ .tree-node.selected .connection-name[data-v-50189218],
2224
+ .tree-node.selected .database-name[data-v-50189218],
2225
+ .tree-node.selected .table-name[data-v-50189218] {
2021
2226
  font-weight: 500;
2227
+ }
2228
+
2229
+ /* 类型 / 行数说明：走 VSCode 树的「描述文字」样式，浅灰无底色，减少噪声 */
2230
+ .connection-type[data-v-50189218],
2231
+ .table-info[data-v-50189218] {
2232
+ font-size: 0.6875rem;
2233
+ color: var(--db-text-faint);
2234
+ background-color: transparent;
2235
+ padding: 0;
2236
+ border-radius: 0;
2237
+ font-weight: 400;
2022
2238
  white-space: nowrap;
2023
2239
  }
2024
- .tree-node.selected .connection-type[data-v-96b10f51],
2025
- .tree-node.selected .table-info[data-v-96b10f51] {
2026
- background-color: rgba(9, 105, 218, 0.1);
2027
- color: #0969da;
2240
+ .tree-node.selected .connection-type[data-v-50189218],
2241
+ .tree-node.selected .table-info[data-v-50189218] {
2242
+ background-color: transparent;
2243
+ color: var(--db-text-muted);
2028
2244
  }
2029
- .node-actions[data-v-96b10f51] {
2245
+ .node-actions[data-v-50189218] {
2030
2246
  display: flex;
2031
2247
  gap: 0.125rem;
2032
2248
  opacity: 0;
2033
2249
  transition: opacity 0.15s ease;
2034
2250
  }
2035
- .node-content:hover .node-actions[data-v-96b10f51] {
2251
+ .node-content:hover .node-actions[data-v-50189218] {
2036
2252
  opacity: 1;
2037
2253
  }
2038
- .btn-icon[data-v-96b10f51] {
2039
- padding: 0.25rem;
2254
+ .btn-icon[data-v-50189218] {
2255
+ padding: 0;
2040
2256
  background: transparent;
2041
2257
  border: none;
2042
2258
  border-radius: 4px;
@@ -2044,179 +2260,179 @@ to {
2044
2260
  display: flex;
2045
2261
  align-items: center;
2046
2262
  justify-content: center;
2047
- width: 20px;
2048
- height: 20px;
2263
+ width: 18px;
2264
+ height: 18px;
2049
2265
  }
2050
- .btn-icon[data-v-96b10f51]:hover {
2051
- background-color: #e1e4e8;
2266
+ .btn-icon[data-v-50189218]:hover {
2267
+ background-color: var(--db-bg-soft);
2052
2268
  }
2053
- .btn-icon i[data-v-96b10f51] {
2269
+ .btn-icon i[data-v-50189218] {
2054
2270
  font-size: 0.6875rem;
2055
- color: #374151;
2271
+ color: var(--db-text-muted);
2056
2272
  }
2057
- .tree-node.selected .btn-icon[data-v-96b10f51]:hover {
2058
- background-color: rgba(9, 105, 218, 0.1);
2273
+ .tree-node.selected .btn-icon[data-v-50189218]:hover {
2274
+ background-color: var(--db-bg-soft);
2059
2275
  }
2060
- .tree-node.selected .btn-icon i[data-v-96b10f51] {
2061
- color: #475569;
2276
+ .tree-node.selected .btn-icon i[data-v-50189218] {
2277
+ color: var(--db-text-muted);
2062
2278
  }
2063
- .tree-node.selected .btn-icon:hover i[data-v-96b10f51] {
2064
- color: #0969da;
2279
+ .tree-node.selected .btn-icon:hover i[data-v-50189218] {
2280
+ color: var(--db-dark-color);
2065
2281
  }
2066
- .btn-icon-danger[data-v-96b10f51]:hover {
2067
- background-color: #fee2e2;
2282
+ .btn-icon-danger[data-v-50189218]:hover {
2283
+ background-color: var(--db-danger-bg);
2068
2284
  }
2069
- .btn-icon-danger:hover i[data-v-96b10f51] {
2285
+ .btn-icon-danger:hover i[data-v-50189218] {
2070
2286
  color: #dc2626;
2071
2287
  }
2072
- .node-spinner[data-v-96b10f51] {
2288
+ .node-spinner[data-v-50189218] {
2073
2289
  display: flex;
2074
2290
  align-items: center;
2075
2291
  justify-content: center;
2076
2292
  }
2077
- .spinner-border-sm[data-v-96b10f51] {
2293
+ .spinner-border-sm[data-v-50189218] {
2078
2294
  width: 1rem;
2079
2295
  height: 1rem;
2080
2296
  border-width: 0.15em;
2081
2297
  }
2082
2298
 
2083
2299
  /* 连接节点样式 */
2084
- .connection-content[data-v-96b10f51] {
2300
+ .connection-content[data-v-50189218] {
2085
2301
  font-weight: 500;
2086
- color: #24292f;
2302
+ color: var(--db-text-body);
2087
2303
  }
2088
- .connection-content[data-v-96b10f51]:hover {
2089
- background-color: #f3f4f6;
2304
+ .connection-content[data-v-50189218]:hover {
2305
+ background-color: var(--db-bg-soft);
2090
2306
  }
2091
- .tree-node.selected .connection-content[data-v-96b10f51] {
2092
- background-color: #eff1ff;
2093
- color: #0969da;
2307
+ .tree-node.selected .connection-content[data-v-50189218] {
2308
+ background-color: var(--db-primary-bg);
2309
+ color: var(--db-dark-color);
2094
2310
  }
2095
2311
 
2096
2312
  /* 数据库节点样式 */
2097
- .database-content[data-v-96b10f51] {
2098
- color: #24292f;
2313
+ .database-content[data-v-50189218] {
2314
+ color: var(--db-text-body);
2099
2315
  }
2100
- .database-content[data-v-96b10f51]:hover {
2101
- background-color: #f6f8fa;
2316
+ .database-content[data-v-50189218]:hover {
2317
+ background-color: var(--db-bg-soft);
2102
2318
  }
2103
- .tree-node.selected .database-content[data-v-96b10f51] {
2104
- background-color: #eff1ff;
2105
- color: #0969da;
2319
+ .tree-node.selected .database-content[data-v-50189218] {
2320
+ background-color: var(--db-primary-bg);
2321
+ color: var(--db-dark-color);
2106
2322
  }
2107
2323
 
2108
2324
  /* 表节点样式 */
2109
- .table-content[data-v-96b10f51] {
2110
- color: #24292f;
2325
+ .table-content[data-v-50189218] {
2326
+ color: var(--db-text-body);
2111
2327
  }
2112
- .table-content[data-v-96b10f51]:hover {
2113
- background-color: #f6f8fa;
2328
+ .table-content[data-v-50189218]:hover {
2329
+ background-color: var(--db-bg-soft);
2114
2330
  }
2115
- .tree-node.selected .table-content[data-v-96b10f51] {
2116
- background-color: #eff1ff;
2117
- color: #0969da;
2331
+ .tree-node.selected .table-content[data-v-50189218] {
2332
+ background-color: var(--db-primary-bg);
2333
+ color: var(--db-dark-color);
2118
2334
  }
2119
2335
 
2120
2336
  /* 数据库品牌色彩 */
2121
- .db-mysql[data-v-96b10f51] {
2337
+ .db-mysql[data-v-50189218] {
2122
2338
  color: #00758f !important;
2123
- background: linear-gradient(135deg, #00758f, #005a70);
2339
+ background: #00758f;
2124
2340
  -webkit-background-clip: text;
2125
2341
  -webkit-text-fill-color: transparent;
2126
2342
  }
2127
- .db-mysql-bg[data-v-96b10f51] { background: linear-gradient(135deg, #00758f, #005a70);
2343
+ .db-mysql-bg[data-v-50189218] { background: #00758f;
2128
2344
  }
2129
- .db-postgres[data-v-96b10f51] {
2345
+ .db-postgres[data-v-50189218] {
2130
2346
  color: #336791 !important;
2131
- background: linear-gradient(135deg, #336791, #2a5278);
2347
+ background: #336791;
2132
2348
  -webkit-background-clip: text;
2133
2349
  -webkit-text-fill-color: transparent;
2134
2350
  }
2135
- .db-postgres-bg[data-v-96b10f51] { background: linear-gradient(135deg, #336791, #2a5278);
2351
+ .db-postgres-bg[data-v-50189218] { background: #336791;
2136
2352
  }
2137
- .db-sqlite[data-v-96b10f51] {
2353
+ .db-sqlite[data-v-50189218] {
2138
2354
  color: #003b57 !important;
2139
- background: linear-gradient(135deg, #003b57, #002d42);
2355
+ background: #003b57;
2140
2356
  -webkit-background-clip: text;
2141
2357
  -webkit-text-fill-color: transparent;
2142
2358
  }
2143
- .db-sqlite-bg[data-v-96b10f51] { background: linear-gradient(135deg, #003b57, #002d42);
2359
+ .db-sqlite-bg[data-v-50189218] { background: #003b57;
2144
2360
  }
2145
- .db-mssql[data-v-96b10f51] {
2361
+ .db-mssql[data-v-50189218] {
2146
2362
  color: #cc2927 !important;
2147
- background: linear-gradient(135deg, #cc2927, #a62220);
2363
+ background: #cc2927;
2148
2364
  -webkit-background-clip: text;
2149
2365
  -webkit-text-fill-color: transparent;
2150
2366
  }
2151
- .db-mssql-bg[data-v-96b10f51] { background: linear-gradient(135deg, #cc2927, #a62220);
2367
+ .db-mssql-bg[data-v-50189218] { background: #cc2927;
2152
2368
  }
2153
- .db-oracle[data-v-96b10f51] {
2369
+ .db-oracle[data-v-50189218] {
2154
2370
  color: #f80000 !important;
2155
- background: linear-gradient(135deg, #f80000, #d40000);
2371
+ background: #f80000;
2156
2372
  -webkit-background-clip: text;
2157
2373
  -webkit-text-fill-color: transparent;
2158
2374
  }
2159
- .db-oracle-bg[data-v-96b10f51] { background: linear-gradient(135deg, #f80000, #d40000);
2375
+ .db-oracle-bg[data-v-50189218] { background: #f80000;
2160
2376
  }
2161
- .db-default[data-v-96b10f51] {
2162
- color: #64748b !important;
2163
- background: linear-gradient(135deg, #64748b, #475569);
2377
+ .db-default[data-v-50189218] {
2378
+ color: var(--db-text-muted) !important;
2379
+ background: linear-gradient(135deg, var(--db-text-muted), var(--db-gray-dark));
2164
2380
  -webkit-background-clip: text;
2165
2381
  -webkit-text-fill-color: transparent;
2166
2382
  }
2167
- .db-default-bg[data-v-96b10f51] { background: linear-gradient(135deg, #64748b, #475569);
2383
+ .db-default-bg[data-v-50189218] { background: linear-gradient(135deg, var(--db-text-muted), var(--db-gray-dark));
2168
2384
  }
2169
- .tree-node.selected .db-mysql[data-v-96b10f51],
2170
- .tree-node.selected .db-postgres[data-v-96b10f51],
2171
- .tree-node.selected .db-sqlite[data-v-96b10f51],
2172
- .tree-node.selected .db-mssql[data-v-96b10f51],
2173
- .tree-node.selected .db-oracle[data-v-96b10f51],
2174
- .tree-node.selected .db-default[data-v-96b10f51] {
2175
- color: white !important;
2385
+ .tree-node.selected .db-mysql[data-v-50189218],
2386
+ .tree-node.selected .db-postgres[data-v-50189218],
2387
+ .tree-node.selected .db-sqlite[data-v-50189218],
2388
+ .tree-node.selected .db-mssql[data-v-50189218],
2389
+ .tree-node.selected .db-oracle[data-v-50189218],
2390
+ .tree-node.selected .db-default[data-v-50189218] {
2391
+ color: var(--db-on-accent) !important;
2176
2392
  background: none;
2177
- -webkit-text-fill-color: white;
2393
+ -webkit-text-fill-color: var(--db-on-accent);
2178
2394
  }
2179
2395
 
2180
2396
  /* 数据库Logo图标 */
2181
- .db-logo[data-v-96b10f51] {
2182
- width: 20px;
2183
- height: 20px;
2184
- border-radius: 4px;
2397
+ .db-logo[data-v-50189218] {
2398
+ width: 16px;
2399
+ height: 16px;
2400
+ border-radius: 3px;
2185
2401
  display: flex;
2186
2402
  align-items: center;
2187
2403
  justify-content: center;
2188
2404
  font-weight: 700;
2189
- font-size: 0.75rem;
2190
- color: white;
2191
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2405
+ font-size: 0.625rem;
2406
+ line-height: 1;
2407
+ color: var(--db-on-accent);
2192
2408
  }
2193
- .db-logo-mysql[data-v-96b10f51] {
2194
- background: linear-gradient(135deg, #00758f, #005a70);
2409
+ .db-logo-mysql[data-v-50189218] {
2410
+ background: #00758f;
2195
2411
  border: 1px solid #004d61;
2196
2412
  }
2197
- .db-logo-postgres[data-v-96b10f51] {
2198
- background: linear-gradient(135deg, #336791, #2a5278);
2413
+ .db-logo-postgres[data-v-50189218] {
2414
+ background: #336791;
2199
2415
  border: 1px solid #244566;
2200
2416
  }
2201
- .db-logo-sqlite[data-v-96b10f51] {
2202
- background: linear-gradient(135deg, #003b57, #002d42);
2417
+ .db-logo-sqlite[data-v-50189218] {
2418
+ background: #003b57;
2203
2419
  border: 1px solid #002939;
2204
2420
  }
2205
- .db-logo-mssql[data-v-96b10f51] {
2206
- background: linear-gradient(135deg, #cc2927, #a62220);
2421
+ .db-logo-mssql[data-v-50189218] {
2422
+ background: #cc2927;
2207
2423
  border: 1px solid #8b1f1d;
2208
2424
  }
2209
- .db-logo-oracle[data-v-96b10f51] {
2210
- background: linear-gradient(135deg, #f80000, #d40000);
2425
+ .db-logo-oracle[data-v-50189218] {
2426
+ background: #f80000;
2211
2427
  border: 1px solid #b30000;
2212
2428
  }
2213
- .db-logo-default[data-v-96b10f51] {
2214
- background: linear-gradient(135deg, #64748b, #475569);
2215
- border: 1px solid #334155;
2429
+ .db-logo-default[data-v-50189218] {
2430
+ background: linear-gradient(135deg, var(--db-text-muted), var(--db-gray-dark));
2431
+ border: 1px solid var(--db-darker-color);
2216
2432
  }
2217
2433
 
2218
2434
  /* 右侧主内容 */
2219
- .explorer-main[data-v-96b10f51] {
2435
+ .explorer-main[data-v-50189218] {
2220
2436
  flex: 1;
2221
2437
  display: flex;
2222
2438
  flex-direction: column;
@@ -2225,208 +2441,208 @@ to {
2225
2441
  }
2226
2442
 
2227
2443
  /* 详情组件容器 */
2228
- .explorer-main[data-v-96b10f51] > * {
2444
+ .explorer-main[data-v-50189218] > * {
2229
2445
  flex: 1;
2230
2446
  display: flex;
2231
2447
  flex-direction: column;
2232
2448
  height: 100%;
2233
2449
  }
2234
- .content-tabs[data-v-96b10f51] {
2450
+ .content-tabs[data-v-50189218] {
2235
2451
  flex: 1;
2236
2452
  display: flex;
2237
2453
  flex-direction: column;
2238
2454
  height: 100%;
2239
2455
  }
2240
- .nav-tabs[data-v-96b10f51] {
2241
- background: #f8fafc;
2242
- border-bottom: 1px solid #cbd5e1;
2456
+ .nav-tabs[data-v-50189218] {
2457
+ background: var(--db-light-color);
2458
+ border-bottom: 1px solid var(--db-gray-medium);
2243
2459
  padding: 0 1rem;
2244
2460
  }
2245
- .nav-link[data-v-96b10f51] {
2461
+ .nav-link[data-v-50189218] {
2246
2462
  border: none;
2247
2463
  background: transparent;
2248
- color: #334155;
2464
+ color: var(--db-darker-color);
2249
2465
  padding: 1rem 1.5rem;
2250
2466
  font-weight: 500;
2251
2467
  transition: all 0.2s ease;
2252
2468
  }
2253
- .nav-link[data-v-96b10f51]:hover {
2469
+ .nav-link[data-v-50189218]:hover {
2254
2470
  color: #667eea;
2255
2471
  background: rgba(102, 126, 234, 0.1);
2256
2472
  }
2257
- .nav-link.active[data-v-96b10f51] {
2473
+ .nav-link.active[data-v-50189218] {
2258
2474
  color: #667eea;
2259
- background: white;
2475
+ background: var(--db-surface);
2260
2476
  border-bottom: 2px solid #667eea;
2261
2477
  }
2262
- .tab-content[data-v-96b10f51] {
2478
+ .tab-content[data-v-50189218] {
2263
2479
  flex: 1;
2264
2480
  overflow-y: auto;
2265
- padding: 1.5rem;
2481
+ padding: 1.25rem;
2266
2482
  height: calc(100% - 60px); /* 减去导航栏高度 */
2267
2483
  }
2268
2484
 
2269
2485
  /* 概览样式 */
2270
- .overview-section[data-v-96b10f51] {
2486
+ .overview-section[data-v-50189218] {
2271
2487
  padding: 1rem 0;
2272
2488
  }
2273
- .info-cards[data-v-96b10f51] {
2489
+ .info-cards[data-v-50189218] {
2274
2490
  display: grid;
2275
2491
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
2276
- gap: 1rem;
2492
+ gap: 0.75rem;
2277
2493
  }
2278
- .info-card[data-v-96b10f51] {
2279
- background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
2280
- border-radius: 12px;
2281
- padding: 1.5rem;
2494
+ .info-card[data-v-50189218] {
2495
+ background: linear-gradient(135deg, var(--db-light-color) 0%, var(--db-border) 100%);
2496
+ border-radius: 8px;
2497
+ padding: 0.875rem;
2282
2498
  display: flex;
2283
2499
  align-items: center;
2284
- gap: 1rem;
2285
- border: 1px solid #cbd5e1;
2500
+ gap: 0.75rem;
2501
+ border: 1px solid var(--db-gray-medium);
2286
2502
  }
2287
- .card-icon[data-v-96b10f51] {
2288
- width: 48px;
2289
- height: 48px;
2290
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
2291
- border-radius: 12px;
2503
+ .card-icon[data-v-50189218] {
2504
+ width: 36px;
2505
+ height: 36px;
2506
+ background: var(--db-primary-color);
2507
+ border-radius: 8px;
2292
2508
  display: flex;
2293
2509
  align-items: center;
2294
2510
  justify-content: center;
2295
- color: white;
2296
- font-size: 1.25rem;
2511
+ color: var(--db-on-accent);
2512
+ font-size: 1rem;
2297
2513
  }
2298
- .card-content h6[data-v-96b10f51] {
2514
+ .card-content h6[data-v-50189218] {
2299
2515
  margin: 0 0 0.25rem 0;
2300
- color: #334155;
2301
- font-size: 0.875rem;
2516
+ color: var(--db-darker-color);
2517
+ font-size: 0.8125rem;
2302
2518
  font-weight: 500;
2303
2519
  }
2304
- .card-value[data-v-96b10f51] {
2520
+ .card-value[data-v-50189218] {
2305
2521
  margin: 0;
2306
- color: #1e293b;
2522
+ color: var(--db-dark-color);
2307
2523
  font-weight: 600;
2308
- font-size: 1.1rem;
2524
+ font-size: 1rem;
2309
2525
  }
2310
2526
 
2311
2527
  /* 表格网格 */
2312
- .table-grid[data-v-96b10f51] {
2528
+ .table-grid[data-v-50189218] {
2313
2529
  display: grid;
2314
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
2315
- gap: 1rem;
2530
+ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
2531
+ gap: 0.75rem;
2316
2532
  }
2317
- .table-card[data-v-96b10f51] {
2318
- background: white;
2319
- border: 1px solid #cbd5e1;
2320
- border-radius: 12px;
2321
- padding: 1rem;
2533
+ .table-card[data-v-50189218] {
2534
+ background: var(--db-surface);
2535
+ border: 1px solid var(--db-gray-medium);
2536
+ border-radius: 8px;
2537
+ padding: 0.75rem;
2322
2538
  cursor: pointer;
2323
2539
  transition: all 0.2s ease;
2324
2540
  }
2325
- .table-card[data-v-96b10f51]:hover {
2326
- border-color: #667eea;
2541
+ .table-card[data-v-50189218]:hover {
2542
+ border-color: var(--db-primary-color);
2327
2543
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
2328
2544
  transform: translateY(-2px);
2329
2545
  }
2330
- .table-card .card-header[data-v-96b10f51] {
2546
+ .table-card .card-header[data-v-50189218] {
2331
2547
  display: flex;
2332
2548
  align-items: center;
2333
- gap: 0.75rem;
2334
- margin-bottom: 0.75rem;
2549
+ gap: 0.5rem;
2550
+ margin-bottom: 0.5rem;
2335
2551
  }
2336
- .table-icon[data-v-96b10f51] {
2337
- width: 32px;
2338
- height: 32px;
2339
- background: linear-gradient(135deg, #10b981 0%, #059669 100%);
2340
- border-radius: 8px;
2552
+ .table-icon[data-v-50189218] {
2553
+ width: 28px;
2554
+ height: 28px;
2555
+ background: var(--db-accent-color);
2556
+ border-radius: 6px;
2341
2557
  display: flex;
2342
2558
  align-items: center;
2343
2559
  justify-content: center;
2344
- color: white;
2560
+ color: var(--db-on-accent);
2345
2561
  }
2346
- .table-name[data-v-96b10f51] {
2562
+ .table-name[data-v-50189218] {
2347
2563
  font-weight: 600;
2348
- color: #1e293b;
2564
+ color: var(--db-dark-color);
2349
2565
  }
2350
- .table-stats[data-v-96b10f51] {
2566
+ .table-stats[data-v-50189218] {
2351
2567
  display: flex;
2352
- gap: 1rem;
2568
+ gap: 0.75rem;
2353
2569
  margin-bottom: 0.5rem;
2354
2570
  }
2355
- .stat[data-v-96b10f51] {
2571
+ .stat[data-v-50189218] {
2356
2572
  display: flex;
2357
2573
  flex-direction: column;
2358
2574
  gap: 0.25rem;
2359
2575
  }
2360
- .stat-label[data-v-96b10f51] {
2576
+ .stat-label[data-v-50189218] {
2361
2577
  font-size: 0.75rem;
2362
- color: #334155;
2578
+ color: var(--db-darker-color);
2363
2579
  }
2364
- .stat-value[data-v-96b10f51] {
2580
+ .stat-value[data-v-50189218] {
2365
2581
  font-size: 0.875rem;
2366
2582
  font-weight: 600;
2367
- color: #0f172a;
2583
+ color: var(--db-black);
2368
2584
  }
2369
- .table-comment[data-v-96b10f51] {
2585
+ .table-comment[data-v-50189218] {
2370
2586
  font-size: 0.75rem;
2371
- color: #334155;
2587
+ color: var(--db-darker-color);
2372
2588
  font-style: italic;
2373
2589
  }
2374
2590
 
2375
2591
  /* 数据工具栏 */
2376
- .data-toolbar[data-v-96b10f51] {
2592
+ .data-toolbar[data-v-50189218] {
2377
2593
  display: flex;
2378
2594
  justify-content: space-between;
2379
2595
  align-items: center;
2380
2596
  margin-bottom: 1rem;
2381
2597
  padding: 0.75rem;
2382
- background: #f8fafc;
2598
+ background: var(--db-light-color);
2383
2599
  border-radius: 8px;
2384
2600
  }
2385
- .toolbar-left[data-v-96b10f51],
2386
- .toolbar-right[data-v-96b10f51] {
2601
+ .toolbar-left[data-v-50189218],
2602
+ .toolbar-right[data-v-50189218] {
2387
2603
  display: flex;
2388
2604
  gap: 0.5rem;
2389
2605
  align-items: center;
2390
2606
  }
2391
2607
 
2392
2608
  /* 空状态 */
2393
- .empty-state[data-v-96b10f51],
2394
- .default-state[data-v-96b10f51] {
2609
+ .empty-state[data-v-50189218],
2610
+ .default-state[data-v-50189218] {
2395
2611
  display: flex;
2396
2612
  flex-direction: column;
2397
2613
  align-items: center;
2398
2614
  justify-content: center;
2399
2615
  height: 100%;
2400
- color: #334155;
2616
+ color: var(--db-darker-color);
2401
2617
  text-align: center;
2402
2618
  }
2403
- .empty-icon[data-v-96b10f51],
2404
- .default-icon[data-v-96b10f51] {
2405
- font-size: 3rem;
2406
- margin-bottom: 1rem;
2407
- opacity: 0.5;
2619
+ .empty-icon[data-v-50189218],
2620
+ .default-icon[data-v-50189218] {
2621
+ font-size: 1.75rem;
2622
+ margin-bottom: 0.5rem;
2623
+ opacity: 0.4;
2408
2624
  }
2409
- .empty-text h5[data-v-96b10f51],
2410
- .default-content h5[data-v-96b10f51] {
2411
- color: #1e293b;
2625
+ .empty-text h5[data-v-50189218],
2626
+ .default-content h5[data-v-50189218] {
2627
+ color: var(--db-dark-color);
2412
2628
  margin-bottom: 0.5rem;
2413
2629
  }
2414
2630
 
2415
2631
  /* 响应式 */
2416
2632
  @media (max-width: 768px) {
2417
- .explorer-layout[data-v-96b10f51] {
2633
+ .explorer-layout[data-v-50189218] {
2418
2634
  flex-direction: column;
2419
2635
  }
2420
- .explorer-sidebar[data-v-96b10f51] {
2636
+ .explorer-sidebar[data-v-50189218] {
2421
2637
  width: 100%;
2422
2638
  height: 40vh;
2423
2639
  border-right: none;
2424
- border-bottom: 1px solid #cbd5e1;
2640
+ border-bottom: 1px solid var(--db-gray-medium);
2425
2641
  }
2426
- .info-cards[data-v-96b10f51] {
2642
+ .info-cards[data-v-50189218] {
2427
2643
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
2428
2644
  }
2429
- .table-grid[data-v-96b10f51] {
2645
+ .table-grid[data-v-50189218] {
2430
2646
  grid-template-columns: 1fr;
2431
2647
  }
2432
2648
  }