fdb2 1.0.35 → 1.0.36

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 (16) hide show
  1. package/README.md +20 -1
  2. package/dist/public/explorer.css +1322 -1115
  3. package/dist/public/explorer.js +619 -461
  4. package/dist/public/index.css +717 -118
  5. package/dist/public/index.js +276 -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/package.json +6 -2
  16. 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;
792
+ }
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);
716
804
  }
717
- .sql-section[data-v-15dc1761] {
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,868 @@ 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-0d3b1052] {
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] {
880
+ .sql-preview[data-v-0d3b1052] {
793
881
  font-family: 'Courier New', monospace;
794
882
  font-size: 0.875rem;
795
883
  max-height: 200px;
796
884
  overflow-y: auto;
797
- border: 1px solid #dee2e6;
885
+ border: 1px solid var(--db-border-lighter);
798
886
  }
799
- .table th[data-v-e8059709] {
887
+ .table th[data-v-0d3b1052] {
800
888
  font-size: 0.875rem;
801
889
  font-weight: 600;
802
890
  }
803
- .table td[data-v-e8059709] {
891
+ .table td[data-v-0d3b1052] {
804
892
  padding: 0!important;
805
893
  }
806
- .table .form-control[data-v-e8059709], .table .form-select[data-v-e8059709] {
894
+ .table .form-control[data-v-0d3b1052], .table .form-select[data-v-0d3b1052] {
807
895
  border: none;
808
896
  border-radius: 0;
809
897
  box-shadow: none;
810
898
  }
811
- .form-control-sm[data-v-e8059709], .form-select-sm[data-v-e8059709] {
899
+ .form-control-sm[data-v-0d3b1052], .form-select-sm[data-v-0d3b1052] {
812
900
  font-size: 0.875rem;
813
901
  }
814
- .modal-content[data-v-e8059709] {
902
+ .modal-content[data-v-0d3b1052] {
815
903
  max-height: 90vh;
816
904
  overflow-y: auto;
817
905
  }
818
- .modal-body[data-v-e8059709] {
906
+ .modal-body[data-v-0d3b1052] {
819
907
  max-height: calc(90vh - 120px);
820
908
  overflow-y: auto;
821
909
  }
822
- .input-group-sm .form-control[data-v-e8059709] {
910
+ .input-group-sm .form-control[data-v-0d3b1052] {
823
911
  border-radius: 0;
824
912
  }
825
- .input-group-sm .form-control[data-v-e8059709]:first-child {
913
+ .input-group-sm .form-control[data-v-0d3b1052]:first-child {
826
914
  border-top-left-radius: 0.25rem;
827
915
  border-bottom-left-radius: 0.25rem;
828
916
  }
829
- .input-group-sm .form-control[data-v-e8059709]:last-child {
917
+ .input-group-sm .form-control[data-v-0d3b1052]:last-child {
830
918
  border-top-right-radius: 0.25rem;
831
919
  border-bottom-right-radius: 0.25rem;
832
920
  }
833
- .text-muted[data-v-e8059709] {
834
- color: #6c757d !important;
921
+ .text-muted[data-v-0d3b1052] {
922
+ color: var(--db-text-muted) !important;
835
923
  }
836
924
 
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);
925
+ .db-tools[data-v-c49117ce] {
926
+ background: var(--db-surface);
927
+ border-radius: 8px;
841
928
  }
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;
929
+ .tools-header[data-v-c49117ce] {
930
+ padding: 6px 12px;
931
+ border-bottom: 1px solid var(--db-border);
847
932
  }
848
- .tools-title[data-v-7577f853] {
933
+ .tools-title[data-v-c49117ce] {
849
934
  margin: 0;
850
- font-size: 1.1rem;
935
+ font-size: 0.875rem;
851
936
  font-weight: 600;
937
+ color: var(--db-dark-color);
852
938
  display: flex;
853
939
  align-items: center;
854
- gap: 0.5rem;
940
+ gap: 0.375rem;
855
941
  }
856
- .tools-content[data-v-7577f853] {
857
- padding: 1.5rem;
942
+ .tools-content[data-v-c49117ce] {
943
+ padding: 12px;
858
944
  overflow-y: auto;
859
945
  }
860
- .tool-section[data-v-7577f853] {
861
- margin-bottom: 2rem;
946
+ .tool-section[data-v-c49117ce] {
947
+ margin-bottom: 1rem;
862
948
  }
863
- .section-title[data-v-7577f853] {
864
- font-size: 0.9rem;
949
+ .tool-section[data-v-c49117ce]:last-child {
950
+ margin-bottom: 0;
951
+ }
952
+ .section-title[data-v-c49117ce] {
953
+ font-size: 0.75rem;
865
954
  font-weight: 600;
866
- color: #374151;
867
- margin-bottom: 1rem;
955
+ letter-spacing: 0.04em;
956
+ text-transform: uppercase;
957
+ color: var(--db-text-muted);
958
+ margin-bottom: 0.5rem;
868
959
  display: flex;
869
960
  align-items: center;
870
- gap: 0.5rem;
961
+ gap: 0.375rem;
871
962
  }
872
- .tool-actions[data-v-7577f853] {
963
+ .tool-actions[data-v-c49117ce] {
873
964
  display: flex;
874
965
  flex-wrap: wrap;
875
- gap: 0.5rem;
966
+ gap: 0.375rem;
876
967
  }
877
- .tool-actions .btn[data-v-7577f853] {
878
- min-width: 120px;
968
+ .tool-actions .btn[data-v-c49117ce] {
969
+ min-width: 108px;
879
970
  display: flex;
880
971
  align-items: center;
881
- gap: 0.5rem;
972
+ gap: 0.375rem;
882
973
  }
883
- .modal[data-v-7577f853] {
974
+ .modal[data-v-c49117ce] {
884
975
  background-color: rgba(0, 0, 0, 0.5);
885
976
  }
886
- .modal-dialog[data-v-7577f853] {
977
+ .modal-dialog[data-v-c49117ce] {
887
978
  max-width: 600px;
888
979
  }
889
- .modal-header[data-v-7577f853] {
890
- background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
891
- border-bottom: 1px solid #cbd5e1;
980
+ .modal-header[data-v-c49117ce] {
981
+ background: var(--db-light-color);
982
+ border-bottom: 1px solid var(--db-gray-medium);
892
983
  }
893
- .modal-title[data-v-7577f853] {
894
- color: #1e293b;
984
+ .modal-title[data-v-c49117ce] {
985
+ color: var(--db-dark-color);
895
986
  font-weight: 600;
896
987
  }
897
- .modal-footer[data-v-7577f853] {
898
- background: #f8fafc;
899
- border-top: 1px solid #cbd5e1;
988
+ .modal-footer[data-v-c49117ce] {
989
+ background: var(--db-light-color);
990
+ border-top: 1px solid var(--db-gray-medium);
900
991
  }
901
992
 
902
993
  /* 工具组件区域 */
903
- .tool-component-area[data-v-7577f853] {
904
- border-top: 1px solid #cbd5e1;
905
- background: #f8fafc;
994
+ .tool-component-area[data-v-c49117ce] {
995
+ border-top: 1px solid var(--db-gray-medium);
996
+ background: var(--db-light-color);
906
997
  }
907
- .component-header[data-v-7577f853] {
998
+ .component-header[data-v-c49117ce] {
908
999
  display: flex;
909
1000
  justify-content: space-between;
910
1001
  align-items: center;
911
- padding: 1rem 1.5rem;
912
- background: linear-gradient(135deg, #f1f5f9 0%, #f8fafc 100%);
913
- border-bottom: 1px solid #cbd5e1;
1002
+ padding: 6px 12px;
1003
+ background: var(--db-bg-soft);
1004
+ border-bottom: 1px solid var(--db-border);
914
1005
  }
915
- .component-title[data-v-7577f853] {
1006
+ .component-title[data-v-c49117ce] {
916
1007
  margin: 0;
917
- font-size: 1rem;
1008
+ font-size: 0.875rem;
918
1009
  font-weight: 600;
919
- color: #1e293b;
1010
+ color: var(--db-dark-color);
920
1011
  display: flex;
921
1012
  align-items: center;
922
- gap: 0.5rem;
1013
+ gap: 0.375rem;
923
1014
  }
924
- .tool-component[data-v-7577f853] {
925
- padding: 1.5rem;
1015
+ .tool-component[data-v-c49117ce] {
1016
+ padding: 12px;
926
1017
  }
927
- .sync-component[data-v-7577f853] {
928
- background: white;
929
- border-radius: 0.375rem;
1018
+ .sync-component[data-v-c49117ce] {
1019
+ background: var(--db-surface);
1020
+ border-radius: 4px;
930
1021
  }
931
1022
 
932
1023
  /* 执行结果区域 */
933
- .execution-results[data-v-7577f853] {
934
- border-top: 1px solid #cbd5e1;
935
- background: #f8fafc;
1024
+ .execution-results[data-v-c49117ce] {
1025
+ border-top: 1px solid var(--db-border);
1026
+ background: var(--db-bg-soft);
936
1027
  }
937
- .results-header[data-v-7577f853] {
1028
+ .results-header[data-v-c49117ce] {
938
1029
  display: flex;
939
1030
  justify-content: space-between;
940
1031
  align-items: center;
941
- padding: 1rem 1.5rem;
942
- background: linear-gradient(135deg, #f1f5f9 0%, #f8fafc 100%);
943
- border-bottom: 1px solid #cbd5e1;
1032
+ padding: 6px 12px;
1033
+ background: var(--db-bg-soft);
1034
+ border-bottom: 1px solid var(--db-border);
944
1035
  }
945
- .results-title[data-v-7577f853] {
1036
+ .results-title[data-v-c49117ce] {
946
1037
  margin: 0;
947
- font-size: 1rem;
1038
+ font-size: 0.875rem;
948
1039
  font-weight: 600;
949
- color: #1e293b;
1040
+ color: var(--db-dark-color);
950
1041
  display: flex;
951
1042
  align-items: center;
952
- gap: 0.5rem;
1043
+ gap: 0.375rem;
953
1044
  }
954
- .results-content[data-v-7577f853] {
1045
+ .results-content[data-v-c49117ce] {
955
1046
  max-height: 400px;
956
1047
  overflow-y: auto;
957
- padding: 1rem;
1048
+ padding: 8px;
958
1049
  }
959
- .no-results[data-v-7577f853] {
1050
+ .no-results[data-v-c49117ce] {
960
1051
  display: flex;
961
1052
  flex-direction: column;
962
1053
  align-items: center;
963
1054
  justify-content: center;
964
- padding: 3rem 1rem;
965
- color: #475569;
1055
+ gap: 0.5rem;
1056
+ padding: 32px 16px;
1057
+ color: var(--db-text-muted);
966
1058
  }
967
- .no-results i[data-v-7577f853] {
968
- font-size: 3rem;
969
- margin-bottom: 1rem;
1059
+ .no-results i[data-v-c49117ce] {
1060
+ font-size: 1.5rem;
1061
+ margin-bottom: 0;
1062
+ opacity: 0.5;
970
1063
  }
971
- .no-results p[data-v-7577f853] {
1064
+ .no-results p[data-v-c49117ce] {
972
1065
  margin: 0;
973
- font-size: 1rem;
1066
+ font-size: 0.8125rem;
974
1067
  }
975
- .result-item[data-v-7577f853] {
976
- margin-bottom: 0.75rem;
977
- border: 1px solid #cbd5e1;
978
- border-radius: 8px;
979
- background: white;
1068
+ .result-item[data-v-c49117ce] {
1069
+ margin-bottom: 0.5rem;
1070
+ border: 1px solid var(--db-border);
1071
+ border-radius: 6px;
1072
+ background: var(--db-surface);
980
1073
  overflow: hidden;
981
1074
  transition: box-shadow 0.2s;
982
1075
  }
983
- .result-item[data-v-7577f853]:hover {
1076
+ .result-item[data-v-c49117ce]:hover {
984
1077
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
985
1078
  }
986
- .result-item.result-success[data-v-7577f853] {
1079
+ .result-item.result-success[data-v-c49117ce] {
987
1080
  border-left: 4px solid #22c55e;
988
1081
  }
989
- .result-item.result-error[data-v-7577f853] {
1082
+ .result-item.result-error[data-v-c49117ce] {
990
1083
  border-left: 4px solid #ef4444;
991
1084
  }
992
- .result-item.result-info[data-v-7577f853] {
1085
+ .result-item.result-info[data-v-c49117ce] {
993
1086
  border-left: 4px solid #3b82f6;
994
1087
  }
995
- .result-header[data-v-7577f853] {
1088
+ .result-header[data-v-c49117ce] {
996
1089
  display: flex;
997
1090
  justify-content: space-between;
998
1091
  align-items: center;
999
1092
  padding: 0.75rem 1rem;
1000
1093
  cursor: pointer;
1001
- background: white;
1094
+ background: var(--db-surface);
1002
1095
  transition: background 0.2s;
1003
1096
  }
1004
- .result-header[data-v-7577f853]:hover {
1005
- background: #f8fafc;
1097
+ .result-header[data-v-c49117ce]:hover {
1098
+ background: var(--db-light-color);
1006
1099
  }
1007
- .result-title[data-v-7577f853] {
1100
+ .result-title[data-v-c49117ce] {
1008
1101
  display: flex;
1009
1102
  align-items: center;
1010
1103
  gap: 0.75rem;
1011
1104
  flex: 1;
1012
1105
  }
1013
- .result-title i[data-v-7577f853] {
1106
+ .result-title i[data-v-c49117ce] {
1014
1107
  font-size: 1.1rem;
1015
1108
  }
1016
- .operation-name[data-v-7577f853] {
1109
+ .operation-name[data-v-c49117ce] {
1017
1110
  font-weight: 600;
1018
- color: #1e293b;
1111
+ color: var(--db-dark-color);
1019
1112
  font-size: 0.95rem;
1020
1113
  }
1021
- .operation-time[data-v-7577f853] {
1022
- color: #334155;
1114
+ .operation-time[data-v-c49117ce] {
1115
+ color: var(--db-darker-color);
1023
1116
  font-size: 0.85rem;
1024
1117
  margin-left: auto;
1025
1118
  }
1026
- .toggle-icon[data-v-7577f853] {
1119
+ .toggle-icon[data-v-c49117ce] {
1027
1120
  transition: transform 0.2s;
1028
- color: #475569;
1121
+ color: var(--db-gray-dark);
1029
1122
  font-size: 0.9rem;
1030
1123
  }
1031
- .toggle-icon.expanded[data-v-7577f853] {
1124
+ .toggle-icon.expanded[data-v-c49117ce] {
1032
1125
  transform: rotate(180deg);
1033
1126
  }
1034
- .result-body[data-v-7577f853] {
1127
+ .result-body[data-v-c49117ce] {
1035
1128
  padding: 1rem;
1036
- background: #fafafa;
1037
- border-top: 1px solid #cbd5e1;
1129
+ background: var(--db-bg-soft4);
1130
+ border-top: 1px solid var(--db-gray-medium);
1038
1131
  }
1039
- .result-body pre[data-v-7577f853] {
1132
+ .result-body pre[data-v-c49117ce] {
1040
1133
  margin: 0;
1041
1134
  font-size: 0.85rem;
1042
1135
  line-height: 1.5;
1043
1136
  max-height: 300px;
1044
1137
  overflow: auto;
1045
1138
  }
1046
- .result-body code[data-v-7577f853] {
1139
+ .result-body code[data-v-c49117ce] {
1047
1140
  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
1048
1141
  }
1049
1142
 
1050
1143
  /* JSON 语法高亮 - 不使用 scoped 以确保 v-html 内容能应用样式 */
1051
- [data-v-7577f853] .json-key {
1144
+ [data-v-c49117ce] .json-key {
1052
1145
  color: #d04255;
1053
1146
  font-weight: 500;
1054
1147
  }
1055
- [data-v-7577f853] .json-string {
1148
+ [data-v-c49117ce] .json-string {
1056
1149
  color: #22863a;
1057
1150
  }
1058
- [data-v-7577f853] .json-number {
1151
+ [data-v-c49117ce] .json-number {
1059
1152
  color: #005cc5;
1060
1153
  }
1061
- [data-v-7577f853] .json-boolean {
1154
+ [data-v-c49117ce] .json-boolean {
1062
1155
  color: #d73a49;
1063
1156
  }
1064
- [data-v-7577f853] .json-null {
1157
+ [data-v-c49117ce] .json-null {
1065
1158
  color: #6f42c1;
1066
1159
  }
1067
1160
 
1068
1161
  /* 滚动条样式 */
1069
- .results-content[data-v-7577f853]::-webkit-scrollbar,
1070
- .result-body pre[data-v-7577f853]::-webkit-scrollbar {
1162
+ .results-content[data-v-c49117ce]::-webkit-scrollbar,
1163
+ .result-body pre[data-v-c49117ce]::-webkit-scrollbar {
1071
1164
  width: 8px;
1072
1165
  height: 8px;
1073
1166
  }
1074
- .results-content[data-v-7577f853]::-webkit-scrollbar-track,
1075
- .result-body pre[data-v-7577f853]::-webkit-scrollbar-track {
1076
- background: #f1f5f9;
1167
+ .results-content[data-v-c49117ce]::-webkit-scrollbar-track,
1168
+ .result-body pre[data-v-c49117ce]::-webkit-scrollbar-track {
1169
+ background: var(--db-gray-light);
1077
1170
  border-radius: 4px;
1078
1171
  }
1079
- .results-content[data-v-7577f853]::-webkit-scrollbar-thumb,
1080
- .result-body pre[data-v-7577f853]::-webkit-scrollbar-thumb {
1081
- background: #cbd5e1;
1172
+ .results-content[data-v-c49117ce]::-webkit-scrollbar-thumb,
1173
+ .result-body pre[data-v-c49117ce]::-webkit-scrollbar-thumb {
1174
+ background: var(--db-gray-medium);
1082
1175
  border-radius: 4px;
1083
1176
  }
1084
- .results-content[data-v-7577f853]::-webkit-scrollbar-thumb:hover,
1085
- .result-body pre[data-v-7577f853]::-webkit-scrollbar-thumb:hover {
1086
- background: #94a3b8;
1177
+ .results-content[data-v-c49117ce]::-webkit-scrollbar-thumb:hover,
1178
+ .result-body pre[data-v-c49117ce]::-webkit-scrollbar-thumb:hover {
1179
+ background: var(--db-text-faint);
1087
1180
  }
1088
1181
 
1089
- .database-detail[data-v-922ad53c] {
1182
+ .database-detail[data-v-822c95b7] {
1090
1183
  width: 100%;
1091
1184
  height: 100%;
1092
1185
  display: flex;
1093
1186
  flex-direction: column;
1094
1187
  }
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;
1188
+
1189
+ /* SQL 面板直接铺满 tab 内容区（内边距由 .tab-content 统一提供） */
1190
+ .sql-executor-section[data-v-822c95b7] {
1191
+ margin: 0;
1192
+ padding: 0;
1193
+ background-color: transparent;
1194
+ border: none;
1195
+ border-radius: 0;
1101
1196
  flex: 1;
1102
1197
  display: flex;
1103
1198
  }
1104
1199
 
1105
1200
  /* 加载状态样式 */
1106
- .loading-state[data-v-922ad53c] {
1201
+ .loading-state[data-v-822c95b7] {
1107
1202
  display: flex;
1108
1203
  flex-direction: column;
1109
1204
  align-items: center;
1110
1205
  justify-content: center;
1111
- padding: 40px 0;
1112
- color: #475569;
1206
+ padding: 24px 0;
1207
+ color: var(--db-text-muted);
1113
1208
  }
1114
- .loading-state .spinner-border[data-v-922ad53c] {
1115
- margin-bottom: 15px;
1116
- color: #0d6efd;
1209
+ .loading-state .spinner-border[data-v-822c95b7] {
1210
+ margin-bottom: 10px;
1211
+ color: var(--db-primary-color);
1117
1212
  }
1118
- .loading-state p[data-v-922ad53c] {
1213
+ .loading-state p[data-v-822c95b7] {
1119
1214
  margin: 0;
1120
- font-size: 14px;
1215
+ font-size: 12px;
1121
1216
  }
1122
- .database-header[data-v-922ad53c] {
1123
- padding: 1rem;
1124
- background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
1125
- border-bottom: 1px solid #cbd5e1;
1217
+ .database-header[data-v-822c95b7] {
1218
+ padding: 8px 12px;
1219
+ background: var(--db-bg-soft2);
1220
+ border-bottom: 1px solid var(--db-border);
1126
1221
  }
1127
- .database-header-content[data-v-922ad53c] {
1222
+ .database-header-content[data-v-822c95b7] {
1128
1223
  display: flex;
1129
1224
  justify-content: space-between;
1130
1225
  align-items: center;
1131
- gap: 2rem;
1226
+ gap: 1rem;
1132
1227
  }
1133
- .database-info[data-v-922ad53c] {
1228
+ .database-info[data-v-822c95b7] {
1134
1229
  display: flex;
1135
1230
  align-items: center;
1136
- gap: 1rem;
1231
+ gap: 0.625rem;
1137
1232
  }
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;
1233
+ .database-icon[data-v-822c95b7] {
1234
+ width: 34px;
1235
+ height: 34px;
1236
+ background: var(--db-primary-bg);
1237
+ border: 1px solid var(--db-border);
1238
+ border-radius: 6px;
1143
1239
  display: flex;
1144
1240
  align-items: center;
1145
1241
  justify-content: center;
1146
- color: white;
1147
- font-size: 1.5rem;
1242
+ color: var(--db-primary-color);
1243
+ font-size: 1rem;
1244
+ flex-shrink: 0;
1148
1245
  }
1149
- .database-meta h4[data-v-922ad53c] {
1150
- margin: 0 0 0.5rem 0;
1151
- color: #1e293b;
1246
+ .database-meta h4[data-v-822c95b7] {
1247
+ margin: 0 0 0.25rem 0;
1248
+ font-size: 0.9375rem;
1249
+ color: var(--db-dark-color);
1152
1250
  font-weight: 600;
1153
1251
  }
1154
- .connection-info[data-v-922ad53c] {
1252
+ .connection-info[data-v-822c95b7] {
1155
1253
  display: flex;
1156
- gap: 0.75rem;
1254
+ align-items: center;
1255
+ gap: 0.375rem;
1256
+ font-size: 0.75rem;
1257
+ }
1258
+ .connection-info .crumb[data-v-822c95b7] {
1259
+ display: inline-flex;
1260
+ align-items: center;
1261
+ padding: 0;
1262
+ border-radius: 0;
1263
+ font-size: 0.75rem;
1264
+ transition: color 0.15s ease;
1265
+ }
1266
+ .connection-info .crumb-link[data-v-822c95b7] {
1267
+ cursor: pointer;
1268
+ background: transparent;
1269
+ color: var(--db-primary-color);
1270
+ }
1271
+ .connection-info .crumb-link[data-v-822c95b7]:hover {
1272
+ color: var(--db-primary-light);
1273
+ text-decoration: underline;
1274
+ }
1275
+ .connection-info .crumb-current[data-v-822c95b7] {
1276
+ font-weight: 500;
1277
+ color: var(--db-text-muted);
1157
1278
  }
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;
1279
+ .connection-name[data-v-822c95b7] {
1280
+ background: transparent;
1281
+ color: var(--db-primary-color);
1282
+ padding: 0;
1283
+ border-radius: 0;
1284
+ font-size: 0.75rem;
1164
1285
  font-weight: 500;
1165
1286
  }
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;
1287
+ .connection-type[data-v-822c95b7] {
1288
+ background: var(--db-primary-bg);
1289
+ color: var(--db-primary-color);
1290
+ padding: 1px 7px;
1291
+ border-radius: 999px;
1292
+ font-size: 0.6875rem;
1293
+ font-weight: 500;
1173
1294
  }
1174
- .database-stats[data-v-922ad53c] {
1295
+ .database-stats[data-v-822c95b7] {
1175
1296
  display: flex;
1176
- gap: 2rem;
1297
+ gap: 1.5rem;
1177
1298
  }
1178
- .stat-item[data-v-922ad53c] {
1179
- text-align: center;
1299
+ .stat-item[data-v-822c95b7] {
1300
+ text-align: right;
1180
1301
  }
1181
- .stat-value[data-v-922ad53c] {
1182
- font-size: 1.5rem;
1302
+ .stat-value[data-v-822c95b7] {
1303
+ font-size: 1rem;
1183
1304
  font-weight: 700;
1184
- color: #1e293b;
1185
- margin-bottom: 0.25rem;
1305
+ line-height: 1.2;
1306
+ color: var(--db-dark-color);
1307
+ margin-bottom: 0;
1186
1308
  }
1187
- .stat-label[data-v-922ad53c] {
1188
- font-size: 0.875rem;
1189
- color: #334155;
1190
- font-weight: 600;
1309
+ .stat-label[data-v-822c95b7] {
1310
+ font-size: 0.6875rem;
1311
+ color: var(--db-text-muted);
1312
+ font-weight: 400;
1191
1313
  }
1192
- .database-tabs[data-v-922ad53c] {
1314
+ .database-tabs[data-v-822c95b7] {
1193
1315
  flex: 1;
1194
1316
  overflow: hidden;
1195
1317
  display: flex;
1196
1318
  flex-direction: column;
1319
+ min-height: 0;
1197
1320
  }
1198
- .nav-tabs[data-v-922ad53c] {
1199
- background: #f8fafc;
1200
- border-bottom: 1px solid #cbd5e1;
1201
- padding: 0 1.5rem;
1321
+ .nav-tabs[data-v-822c95b7] {
1322
+ background: var(--db-gray-light);
1323
+ border-bottom: 1px solid var(--db-border);
1324
+ padding: 0 0.5rem;
1325
+ gap: 0;
1202
1326
  }
1203
- .nav-link[data-v-922ad53c] {
1327
+ .nav-link[data-v-822c95b7] {
1204
1328
  border: none;
1205
1329
  background: transparent;
1206
- color: #334155;
1207
- padding: 1rem 1.5rem;
1330
+ color: var(--db-text-muted);
1331
+ padding: 6px 12px;
1332
+ font-size: 12px;
1208
1333
  font-weight: 500;
1209
- transition: all 0.2s ease;
1334
+ transition: color 0.15s ease, background-color 0.15s ease;
1210
1335
  }
1211
- .nav-link[data-v-922ad53c]:hover {
1212
- color: #667eea;
1213
- background: rgba(102, 126, 234, 0.1);
1336
+ .nav-link[data-v-822c95b7]:hover {
1337
+ color: var(--db-dark-color);
1338
+ background: var(--db-bg-soft);
1214
1339
  }
1215
- .nav-link.active[data-v-922ad53c] {
1216
- color: #667eea;
1217
- background: white;
1218
- border-bottom: 2px solid #667eea;
1340
+ .nav-link.active[data-v-822c95b7] {
1341
+ color: var(--db-primary-color);
1342
+ background: transparent;
1343
+ border-bottom: 2px solid var(--db-primary-color);
1219
1344
  }
1220
- .tab-content[data-v-922ad53c] {
1345
+ .tab-content[data-v-822c95b7] {
1221
1346
  overflow-y: auto;
1222
1347
  flex: 1;
1223
1348
  display: flex;
1224
1349
  flex-direction: column;
1225
- height: 100%;
1350
+ min-height: 0;
1226
1351
  }
1227
- .tab-panel[data-v-922ad53c] {
1352
+ .tab-panel[data-v-822c95b7] {
1228
1353
  flex: 1;
1229
1354
  overflow-y: auto;
1230
1355
  display: flex;
1231
1356
  flex-direction: column;
1232
- height: 100%;
1357
+ min-height: 0;
1233
1358
  }
1234
- .table-grid[data-v-922ad53c] {
1359
+ .table-grid[data-v-822c95b7] {
1235
1360
  display: grid;
1236
- grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
1237
- gap: 1rem;
1361
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
1362
+ gap: 8px;
1238
1363
  }
1239
- .table-card[data-v-922ad53c] {
1240
- background: white;
1241
- border: 1px solid #cbd5e1;
1242
- border-radius: 12px;
1364
+ .table-card[data-v-822c95b7] {
1365
+ background: var(--db-bg-soft2);
1366
+ border: 1px solid var(--db-border);
1367
+ border-radius: 6px;
1243
1368
  overflow: hidden;
1244
- transition: all 0.2s ease;
1369
+ transition: border-color 0.15s ease, background-color 0.15s ease;
1245
1370
  cursor: pointer;
1246
1371
  }
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);
1372
+ .table-card[data-v-822c95b7]:hover {
1373
+ border-color: var(--db-primary-color);
1374
+ background: var(--db-bg-soft);
1375
+ box-shadow: none;
1251
1376
  }
1252
- .card-header[data-v-922ad53c] {
1253
- background: #f8fafc;
1254
- padding: 1rem;
1377
+ .card-header[data-v-822c95b7] {
1378
+ background: var(--db-bg-soft);
1379
+ padding: 6px 8px;
1255
1380
  display: flex;
1256
1381
  align-items: center;
1257
- gap: 0.75rem;
1382
+ gap: 0.5rem;
1258
1383
  }
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;
1384
+ .table-icon[data-v-822c95b7] {
1385
+ width: 22px;
1386
+ height: 22px;
1387
+ font-size: 0.75rem;
1388
+ background: var(--db-success-bg);
1389
+ border-radius: 4px;
1264
1390
  display: flex;
1265
1391
  align-items: center;
1266
1392
  justify-content: center;
1267
- color: white;
1393
+ color: var(--db-accent-color);
1394
+ flex-shrink: 0;
1268
1395
  }
1269
- .table-info[data-v-922ad53c] {
1396
+ .table-info[data-v-822c95b7] {
1270
1397
  flex: 1;
1271
1398
  min-width: 0; /* 允许子元素截断 */
1272
1399
  }
1273
- .table-name-wrapper[data-v-922ad53c] {
1400
+ .table-name-wrapper[data-v-822c95b7] {
1274
1401
  display: flex;
1275
1402
  align-items: center;
1276
- gap: 0.5rem;
1277
- margin-bottom: 0.25rem;
1403
+ gap: 0.375rem;
1404
+ margin-bottom: 0;
1278
1405
  }
1279
- .table-name[data-v-922ad53c] {
1280
- font-weight: 600;
1281
- color: #1e293b;
1406
+ .table-name[data-v-822c95b7] {
1407
+ font-size: 0.8125rem;
1408
+ font-weight: 500;
1409
+ color: var(--db-dark-color);
1282
1410
  white-space: nowrap;
1283
1411
  overflow: hidden;
1284
1412
  text-overflow: ellipsis;
1413
+ min-width: 0;
1285
1414
  }
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;
1415
+ .table-engine[data-v-822c95b7] {
1416
+ font-size: 0.625rem;
1417
+ color: var(--db-primary-color);
1418
+ background: var(--db-primary-bg);
1419
+ padding: 0 0.375rem;
1420
+ border-radius: 999px;
1292
1421
  flex-shrink: 0;
1293
1422
  }
1294
- .table-comment-header[data-v-922ad53c] {
1295
- font-size: 0.75rem;
1296
- color: #334155;
1423
+ .table-comment-header[data-v-822c95b7] {
1424
+ font-size: 0.6875rem;
1425
+ color: var(--db-text-muted);
1297
1426
  white-space: nowrap;
1298
1427
  overflow: hidden;
1299
1428
  text-overflow: ellipsis;
1300
1429
  }
1301
- .card-body[data-v-922ad53c] {
1302
- padding: 1rem;
1430
+
1431
+ /* 卡片正文：标签在上、数值在下，右下角编辑按钮（对齐 VSCode 数据库插件的表格卡片） */
1432
+ .card-body[data-v-822c95b7] {
1433
+ padding: 8px;
1434
+ display: flex;
1435
+ flex-direction: column;
1436
+ align-items: stretch;
1437
+ gap: 8px;
1303
1438
  }
1304
- .table-stats[data-v-922ad53c] {
1439
+ .table-stats[data-v-822c95b7] {
1305
1440
  display: flex;
1306
- gap: 1rem;
1307
- margin-bottom: 0.75rem;
1441
+ align-items: flex-start;
1442
+ gap: 1.25rem;
1443
+ margin-bottom: 0;
1444
+ flex-wrap: wrap;
1445
+ min-width: 0;
1308
1446
  }
1309
- .stat[data-v-922ad53c] {
1447
+ .stat[data-v-822c95b7] {
1310
1448
  display: flex;
1311
1449
  flex-direction: column;
1312
- gap: 0.25rem;
1450
+ align-items: flex-start;
1451
+ gap: 0;
1313
1452
  }
1314
- .table-comment[data-v-922ad53c] {
1315
- font-size: 0.875rem;
1316
- color: #334155;
1453
+
1454
+ /* 卡片内的统计字号覆盖（不影响顶部数据库统计的大号数字） */
1455
+ .table-card .stat-label[data-v-822c95b7] {
1456
+ font-size: 0.6875rem;
1457
+ color: var(--db-text-muted);
1458
+ }
1459
+ .table-card .stat-value[data-v-822c95b7] {
1460
+ font-size: 0.9375rem;
1461
+ font-weight: 600;
1462
+ color: var(--db-dark-color);
1463
+ }
1464
+ .table-comment[data-v-822c95b7] {
1465
+ font-size: 0.8125rem;
1466
+ color: var(--db-text-muted);
1317
1467
  font-style: italic;
1318
- margin-bottom: 0.75rem;
1468
+ margin-bottom: 0.5rem;
1319
1469
  line-height: 1.4;
1320
1470
  }
1321
- .table-actions[data-v-922ad53c] {
1471
+ .table-actions[data-v-822c95b7] {
1322
1472
  display: flex;
1323
- gap: 0.5rem;
1473
+ gap: 0.375rem;
1474
+ flex-shrink: 0;
1475
+ }
1476
+ .table-actions .btn[data-v-822c95b7] {
1477
+ width: 22px;
1478
+ height: 22px;
1479
+ padding: 0;
1480
+ display: inline-flex;
1481
+ align-items: center;
1482
+ justify-content: center;
1483
+ font-size: 0.6875rem;
1484
+ line-height: 1;
1485
+ border: 1px solid var(--db-primary-color);
1486
+ border-radius: 4px;
1487
+ background: transparent;
1488
+ color: var(--db-primary-color);
1489
+ }
1490
+ .table-actions .btn[data-v-822c95b7]:hover {
1491
+ background: var(--db-primary-bg);
1492
+ color: var(--db-primary-color);
1493
+ border-color: var(--db-primary-color);
1324
1494
  }
1325
- .empty-state[data-v-922ad53c] {
1495
+ .empty-state[data-v-822c95b7] {
1326
1496
  display: flex;
1327
1497
  flex-direction: column;
1328
1498
  align-items: center;
1329
1499
  justify-content: center;
1330
- height: 200px;
1331
- color: #475569;
1500
+ gap: 0.5rem;
1501
+ height: 140px;
1502
+ color: var(--db-text-muted);
1332
1503
  text-align: center;
1333
- font-size: 1.5rem;
1504
+ font-size: 0.8125rem;
1334
1505
  }
1335
- .empty-state i[data-v-922ad53c] {
1336
- margin-bottom: 1rem;
1506
+ .empty-state i[data-v-822c95b7] {
1507
+ font-size: 1.5rem;
1508
+ margin-bottom: 0;
1337
1509
  opacity: 0.5;
1338
1510
  }
1339
1511
 
1340
1512
  /* 视图和存储过程卡片样式 */
1341
- .views-grid[data-v-922ad53c], .procedures-grid[data-v-922ad53c] {
1513
+ .views-grid[data-v-822c95b7], .procedures-grid[data-v-822c95b7] {
1342
1514
  display: grid;
1343
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
1344
- gap: 1rem;
1515
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
1516
+ gap: 8px;
1345
1517
  }
1346
- .view-card[data-v-922ad53c], .procedure-card[data-v-922ad53c] {
1347
- background: white;
1348
- border: 1px solid #cbd5e1;
1349
- border-radius: 12px;
1518
+ .view-card[data-v-822c95b7], .procedure-card[data-v-822c95b7] {
1519
+ background: var(--db-bg-soft2);
1520
+ border: 1px solid var(--db-border);
1521
+ border-radius: 6px;
1350
1522
  overflow: hidden;
1351
- transition: all 0.2s ease;
1523
+ transition: border-color 0.15s ease, background-color 0.15s ease;
1352
1524
  }
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);
1525
+ .view-card[data-v-822c95b7]:hover, .procedure-card[data-v-822c95b7]:hover {
1526
+ border-color: var(--db-primary-color);
1527
+ background: var(--db-bg-soft);
1528
+ box-shadow: none;
1529
+ transform: none;
1357
1530
  }
1358
- .view-card .card-header[data-v-922ad53c], .procedure-card .card-header[data-v-922ad53c] {
1359
- background: #f8fafc;
1360
- padding: 1rem;
1531
+ .view-card .card-header[data-v-822c95b7], .procedure-card .card-header[data-v-822c95b7] {
1532
+ background: var(--db-bg-soft);
1533
+ padding: 8px 10px;
1361
1534
  display: flex;
1362
1535
  align-items: center;
1363
- gap: 0.75rem;
1536
+ gap: 0.5rem;
1364
1537
  }
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;
1538
+ .view-icon[data-v-822c95b7], .procedure-icon[data-v-822c95b7] {
1539
+ width: 26px;
1540
+ height: 26px;
1541
+ font-size: 0.8125rem;
1542
+ background: var(--db-info-bg);
1543
+ border-radius: 4px;
1370
1544
  display: flex;
1371
1545
  align-items: center;
1372
1546
  justify-content: center;
1373
- color: white;
1547
+ color: var(--db-info-color);
1548
+ flex-shrink: 0;
1374
1549
  }
1375
- .procedure-icon[data-v-922ad53c] {
1376
- background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
1550
+ .procedure-icon[data-v-822c95b7] {
1551
+ background: var(--db-warning-bg);
1552
+ color: var(--db-warning-color);
1377
1553
  }
1378
- .view-name[data-v-922ad53c], .procedure-name[data-v-922ad53c] {
1379
- font-weight: 600;
1380
- color: #1e293b;
1381
- margin-bottom: 0.25rem;
1554
+ .view-name[data-v-822c95b7], .procedure-name[data-v-822c95b7] {
1555
+ font-size: 0.8125rem;
1556
+ font-weight: 500;
1557
+ color: var(--db-dark-color);
1558
+ margin-bottom: 0.125rem;
1382
1559
  }
1383
- .view-comment[data-v-922ad53c], .procedure-comment[data-v-922ad53c] {
1384
- font-size: 0.75rem;
1385
- color: #334155;
1386
- margin-bottom: 0.5rem;
1560
+ .view-comment[data-v-822c95b7], .procedure-comment[data-v-822c95b7] {
1561
+ font-size: 0.6875rem;
1562
+ color: var(--db-text-muted);
1563
+ margin-bottom: 0.375rem;
1387
1564
  line-height: 1.4;
1388
1565
  }
1389
- .procedure-type[data-v-922ad53c] {
1566
+ .procedure-type[data-v-822c95b7] {
1390
1567
  display: flex;
1391
1568
  gap: 0.25rem;
1392
1569
  flex-wrap: wrap;
1393
1570
  }
1394
- .view-card .card-body[data-v-922ad53c], .procedure-card .card-body[data-v-922ad53c] {
1395
- padding: 1rem;
1571
+ .view-card .card-body[data-v-822c95b7], .procedure-card .card-body[data-v-822c95b7] {
1572
+ padding: 8px 10px;
1396
1573
  }
1397
- .view-actions[data-v-922ad53c], .procedure-actions[data-v-922ad53c] {
1574
+ .view-actions[data-v-822c95b7], .procedure-actions[data-v-822c95b7] {
1398
1575
  display: flex;
1399
- gap: 0.5rem;
1576
+ gap: 0.375rem;
1400
1577
  }
1401
- .views-actions[data-v-922ad53c], .procedures-actions[data-v-922ad53c], .tables-actions[data-v-922ad53c] {
1578
+
1579
+ /* 操作栏：无底色无边框，只是一行工具按钮（对齐 VSCode 插件的 Create Table / Refresh） */
1580
+ .views-actions[data-v-822c95b7], .procedures-actions[data-v-822c95b7], .tables-actions[data-v-822c95b7] {
1402
1581
  display: flex;
1403
- gap: 0.5rem;
1404
- margin-bottom: 1rem;
1405
- padding: 0.75rem 1rem;
1406
- background: #f8fafc;
1407
- border-radius: 8px;
1582
+ gap: 0.375rem;
1583
+ margin-bottom: 10px;
1584
+ padding: 0;
1585
+ background: transparent;
1586
+ border-radius: 0;
1408
1587
  }
1409
1588
 
1410
1589
  /* 模态框样式 */
1411
- .modal-dialog[data-v-922ad53c] {
1590
+ .modal-dialog[data-v-822c95b7] {
1412
1591
  margin-top: 10vh;
1413
1592
  }
1414
- .modal-content[data-v-922ad53c] {
1593
+ .modal-content[data-v-822c95b7] {
1415
1594
  border-radius: 12px;
1416
1595
  border: none;
1417
1596
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
1418
1597
  }
1419
- .modal-header[data-v-922ad53c] {
1420
- border-bottom: 1px solid #cbd5e1;
1598
+ .modal-header[data-v-822c95b7] {
1599
+ border-bottom: 1px solid var(--db-gray-medium);
1421
1600
  padding: 1rem 1.5rem;
1422
1601
  }
1423
- .modal-title[data-v-922ad53c] {
1602
+ .modal-title[data-v-822c95b7] {
1424
1603
  margin: 0;
1425
1604
  font-weight: 600;
1426
- color: #1e293b;
1605
+ color: var(--db-dark-color);
1427
1606
  }
1428
- .modal-body[data-v-922ad53c] {
1607
+ .modal-body[data-v-822c95b7] {
1429
1608
  padding: 1.5rem;
1430
1609
  }
1431
- .modal-footer[data-v-922ad53c] {
1432
- border-top: 1px solid #cbd5e1;
1610
+ .modal-footer[data-v-822c95b7] {
1611
+ border-top: 1px solid var(--db-gray-medium);
1433
1612
  padding: 1rem 1.5rem;
1434
1613
  display: flex;
1435
1614
  justify-content: flex-end;
1436
1615
  gap: 0.5rem;
1437
1616
  }
1438
1617
 
1439
- .modal[data-v-7f0c01ca] {
1618
+ .modal[data-v-d9b3ed26] {
1440
1619
  background-color: rgba(0, 0, 0, 0.5);
1441
1620
  }
1442
- .modal-dialog[data-v-7f0c01ca] {
1621
+ .modal-dialog[data-v-d9b3ed26] {
1443
1622
  max-width: 800px;
1444
1623
  }
1445
- .form-label[data-v-7f0c01ca] {
1624
+ .form-label[data-v-d9b3ed26] {
1446
1625
  font-weight: 500;
1447
- color: #374151;
1626
+ color: var(--db-text-body);
1448
1627
  }
1449
- .form-control[data-v-7f0c01ca], .form-select[data-v-7f0c01ca] {
1450
- border: 1px solid #d1d5db;
1628
+ .form-control[data-v-d9b3ed26], .form-select[data-v-d9b3ed26] {
1629
+ border: 1px solid var(--db-border-light);
1451
1630
  border-radius: 6px;
1452
1631
  }
1453
- .form-control[data-v-7f0c01ca]:focus, .form-select[data-v-7f0c01ca]:focus {
1632
+ .form-control[data-v-d9b3ed26]:focus, .form-select[data-v-d9b3ed26]:focus {
1454
1633
  border-color: #3b82f6;
1455
1634
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
1456
1635
  }
1457
- .modal-header[data-v-7f0c01ca] {
1458
- background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
1459
- border-bottom: 1px solid #e2e8f0;
1636
+ .modal-header[data-v-d9b3ed26] {
1637
+ background: linear-gradient(135deg, var(--db-light-color) 0%, var(--db-gray-light) 100%);
1638
+ border-bottom: 1px solid var(--db-border);
1460
1639
  }
1461
- .modal-title[data-v-7f0c01ca] {
1462
- color: #1e293b;
1640
+ .modal-title[data-v-d9b3ed26] {
1641
+ color: var(--db-dark-color);
1463
1642
  font-weight: 600;
1464
1643
  }
1465
- .modal-footer[data-v-7f0c01ca] {
1466
- background: #f8fafc;
1467
- border-top: 1px solid #e2e8f0;
1644
+ .modal-footer[data-v-d9b3ed26] {
1645
+ background: var(--db-light-color);
1646
+ border-top: 1px solid var(--db-border);
1468
1647
  }
1469
- .text-danger[data-v-7f0c01ca] {
1648
+ .text-danger[data-v-d9b3ed26] {
1470
1649
  color: #ef4444;
1471
1650
  }
1472
- .text-muted[data-v-7f0c01ca] {
1473
- color: #6b7280;
1651
+ .text-muted[data-v-d9b3ed26] {
1652
+ color: var(--db-text-muted);
1474
1653
  font-size: 0.875rem;
1475
1654
  }
1476
- .json-editor .text-muted[data-v-7f0c01ca] {
1655
+ .json-editor .text-muted[data-v-d9b3ed26] {
1477
1656
  font-size: 0.75rem;
1478
1657
  }
1479
- .json-editor[data-v-7f0c01ca] .cm-editor {
1658
+ .json-editor[data-v-d9b3ed26] .cm-editor {
1480
1659
  height: 100%;
1481
1660
  }
1482
1661
 
1483
- .table-data-grid[data-v-5ed43e1b] {
1662
+ .table-data-grid[data-v-f6763da8] {
1484
1663
  display: flex;
1485
1664
  flex-direction: column;
1486
1665
  height: 100%;
1487
1666
  }
1488
- .data-grid-wrapper[data-v-5ed43e1b] {
1667
+ .data-grid-wrapper[data-v-f6763da8] {
1489
1668
  flex: 1;
1490
1669
  overflow: hidden;
1491
1670
  }
1492
- .column-header-custom[data-v-5ed43e1b] {
1671
+ .column-header-custom[data-v-f6763da8] {
1493
1672
  display: flex;
1494
1673
  flex-direction: column;
1495
1674
  cursor: pointer;
1496
1675
  user-select: none;
1497
1676
  }
1498
- .header-main[data-v-5ed43e1b] {
1677
+ .header-main[data-v-f6763da8] {
1499
1678
  display: flex;
1500
1679
  align-items: center;
1501
1680
  }
1502
- .column-name[data-v-5ed43e1b] {
1681
+ .column-name[data-v-f6763da8] {
1503
1682
  font-weight: 600;
1504
1683
  }
1505
- .header-sub[data-v-5ed43e1b] {
1684
+ .header-sub[data-v-f6763da8] {
1506
1685
  display: flex;
1507
1686
  align-items: center;
1508
1687
  margin-top: 2px;
1509
1688
  max-width: 150px; /* 限制子标题区域的最大宽度 */
1510
1689
  }
1511
- .column-type[data-v-5ed43e1b] {
1690
+ .column-type[data-v-f6763da8] {
1512
1691
  font-size: 0.7rem;
1513
1692
  line-height: 1;
1514
1693
  flex-shrink: 0; /* 防止类型被压缩 */
1515
1694
  }
1516
- .column-comment[data-v-5ed43e1b] {
1695
+ .column-comment[data-v-f6763da8] {
1517
1696
  font-size: 0.7rem;
1518
1697
  line-height: 1;
1519
1698
  opacity: 0.8;
@@ -1522,521 +1701,549 @@ to {
1522
1701
  text-overflow: ellipsis;
1523
1702
  flex: 1; /* 允许注释占据剩余空间并截断 */
1524
1703
  }
1525
- .cell-value[data-v-5ed43e1b] {
1704
+ .cell-value[data-v-f6763da8] {
1526
1705
  max-width: 300px;
1527
1706
  overflow: hidden;
1528
1707
  text-overflow: ellipsis;
1529
1708
  white-space: nowrap;
1530
1709
  }
1531
- .grid-footer-bar[data-v-5ed43e1b] {
1532
- background: #f8f9fa;
1533
- border-top: 1px solid #dee2e6;
1534
- padding: 8px 16px;
1710
+ .grid-footer-bar[data-v-f6763da8] {
1711
+ background: var(--db-bg-soft2);
1712
+ border-top: 1px solid var(--db-border);
1713
+ padding: 6px 12px;
1714
+ }
1715
+ .footer-pagination[data-v-f6763da8] .pagination {
1716
+ margin-bottom: 0;
1535
1717
  }
1536
1718
 
1537
- .table-detail[data-v-7e9c9695] {
1719
+ .table-detail[data-v-15c7e3be] {
1538
1720
  width: 100%;
1539
1721
  height: 100%;
1540
1722
  display: flex;
1541
1723
  flex-direction: column;
1542
1724
  }
1543
- .table-header[data-v-7e9c9695] {
1544
- background-color: #f1f5f9;
1545
- border-bottom: 1px solid #cbd5e1;
1546
- padding: 15px 20px;
1725
+ .table-header[data-v-15c7e3be] {
1726
+ background-color: var(--db-bg-soft2);
1727
+ border-bottom: 1px solid var(--db-border);
1728
+ padding: 8px 12px;
1547
1729
  }
1548
- .table-header-content[data-v-7e9c9695] {
1730
+ .table-header-content[data-v-15c7e3be] {
1549
1731
  display: flex;
1550
1732
  justify-content: space-between;
1551
1733
  align-items: center;
1552
1734
  }
1553
- .table-info[data-v-7e9c9695] {
1735
+ .table-info[data-v-15c7e3be] {
1554
1736
  display: flex;
1555
1737
  align-items: center;
1556
- gap: 15px;
1738
+ gap: 10px;
1557
1739
  }
1558
- .table-icon[data-v-7e9c9695] {
1559
- font-size: 32px;
1560
- color: #1e293b;
1740
+ .table-icon[data-v-15c7e3be] {
1741
+ font-size: 20px;
1742
+ color: var(--db-primary-color);
1561
1743
  }
1562
- .table-meta[data-v-7e9c9695] {
1744
+ .table-meta[data-v-15c7e3be] {
1563
1745
  display: flex;
1564
1746
  flex-direction: column;
1565
- gap: 5px;
1747
+ gap: 2px;
1566
1748
  }
1567
- .table-name[data-v-7e9c9695] {
1749
+ .table-name[data-v-15c7e3be] {
1568
1750
  margin: 0;
1569
- font-size: 1.25rem;
1751
+ font-size: 0.9375rem;
1570
1752
  font-weight: 600;
1571
1753
  }
1572
- .table-breadcrumb[data-v-7e9c9695] {
1754
+ .table-breadcrumb[data-v-15c7e3be] {
1573
1755
  display: flex;
1574
1756
  align-items: center;
1575
- gap: 8px;
1576
- font-size: 0.875rem;
1577
- color: #475569;
1757
+ gap: 6px;
1758
+ font-size: 0.75rem;
1759
+ color: var(--db-text-muted);
1578
1760
  }
1579
- .table-stats[data-v-7e9c9695] {
1761
+ .table-breadcrumb .crumb[data-v-15c7e3be] {
1762
+ display: inline-flex;
1763
+ align-items: center;
1764
+ padding: 0;
1765
+ border-radius: 0;
1766
+ transition: color 0.15s ease;
1767
+ }
1768
+ .table-breadcrumb .crumb-link[data-v-15c7e3be] {
1769
+ cursor: pointer;
1770
+ color: var(--db-primary-color);
1771
+ }
1772
+ .table-breadcrumb .crumb-link[data-v-15c7e3be]:hover {
1773
+ background-color: transparent;
1774
+ color: var(--db-primary-light);
1775
+ text-decoration: underline;
1776
+ }
1777
+ .table-breadcrumb .crumb-current[data-v-15c7e3be] {
1778
+ font-weight: 500;
1779
+ color: var(--db-text-muted);
1780
+ }
1781
+ .table-stats[data-v-15c7e3be] {
1580
1782
  display: flex;
1581
- gap: 20px;
1783
+ gap: 14px;
1582
1784
  }
1583
- .stat-item[data-v-7e9c9695] {
1785
+ .stat-item[data-v-15c7e3be] {
1584
1786
  display: flex;
1585
1787
  flex-direction: column;
1586
- align-items: center;
1587
- gap: 2px;
1788
+ align-items: flex-end;
1789
+ gap: 0;
1588
1790
  }
1589
- .stat-value[data-v-7e9c9695] {
1590
- font-size: 1.125rem;
1791
+ .stat-value[data-v-15c7e3be] {
1792
+ font-size: 0.9375rem;
1591
1793
  font-weight: 600;
1592
- color: #1e293b;
1794
+ line-height: 1.25;
1795
+ color: var(--db-dark-color);
1593
1796
  }
1594
- .stat-label[data-v-7e9c9695] {
1595
- font-size: 0.75rem;
1596
- color: #475569;
1797
+ .stat-label[data-v-15c7e3be] {
1798
+ font-size: 0.6875rem;
1799
+ color: var(--db-text-muted);
1597
1800
  }
1598
- .table-toolbar[data-v-7e9c9695] {
1801
+ .table-toolbar[data-v-15c7e3be] {
1599
1802
  display: flex;
1600
1803
  justify-content: space-between;
1601
1804
  align-items: center;
1602
- padding: 10px 20px;
1603
- background-color: #f1f5f9;
1604
- border-bottom: 1px solid #cbd5e1;
1805
+ padding: 6px 12px;
1806
+ background-color: var(--db-bg-soft2);
1807
+ border-bottom: 1px solid var(--db-border);
1605
1808
  }
1606
- .toolbar-left[data-v-7e9c9695] {
1809
+ .toolbar-left[data-v-15c7e3be] {
1607
1810
  display: flex;
1608
- gap: 10px;
1811
+ gap: 6px;
1609
1812
  align-items: center;
1610
1813
  }
1611
- .toolbar-right[data-v-7e9c9695] {
1814
+ .toolbar-right[data-v-15c7e3be] {
1612
1815
  display: flex;
1613
- gap: 10px;
1816
+ gap: 6px;
1614
1817
  align-items: center;
1615
1818
  }
1616
- .table-tabs[data-v-7e9c9695] {
1819
+ .table-tabs[data-v-15c7e3be] {
1617
1820
  flex: 1;
1618
1821
  display: flex;
1619
1822
  flex-direction: column;
1620
1823
  overflow: hidden;
1621
1824
  }
1622
- .nav-tabs[data-v-7e9c9695] {
1623
- border-bottom: 1px solid #cbd5e1;
1624
- background-color: #f1f5f9;
1825
+ .nav-tabs[data-v-15c7e3be] {
1826
+ border-bottom: 1px solid var(--db-border);
1827
+ background-color: var(--db-gray-light);
1625
1828
  flex-shrink: 0;
1829
+ padding: 0 6px;
1626
1830
  }
1627
- .nav-tabs .nav-link[data-v-7e9c9695] {
1628
- color: #334155;
1831
+ .nav-tabs .nav-link[data-v-15c7e3be] {
1832
+ color: var(--db-text-muted);
1629
1833
  border: none;
1630
- border-bottom: 3px solid transparent;
1834
+ border-bottom: 2px solid transparent;
1631
1835
  border-radius: 0;
1632
- padding: 10px 15px;
1836
+ padding: 6px 12px;
1837
+ font-size: 12px;
1633
1838
  font-weight: 500;
1634
1839
  }
1635
- .nav-tabs .nav-link[data-v-7e9c9695]:hover {
1636
- background-color: #e2e8f0;
1637
- border-bottom-color: #94a3b8;
1840
+ .nav-tabs .nav-link[data-v-15c7e3be]:hover {
1841
+ background-color: var(--db-bg-soft);
1842
+ border-bottom-color: var(--db-border-light);
1843
+ color: var(--db-dark-color);
1638
1844
  }
1639
- .nav-tabs .nav-link.active[data-v-7e9c9695] {
1640
- background-color: #fff;
1641
- border-bottom-color: #0d6efd;
1642
- color: #0d6efd;
1845
+ .nav-tabs .nav-link.active[data-v-15c7e3be] {
1846
+ background-color: transparent;
1847
+ border-bottom-color: var(--db-primary-color);
1848
+ color: var(--db-primary-color);
1643
1849
  }
1644
- .tab-content[data-v-7e9c9695] {
1850
+ .tab-content[data-v-15c7e3be] {
1645
1851
  flex: 1;
1646
1852
  overflow: auto;
1647
- padding: 20px;
1648
- background-color: #fff;
1853
+ padding: 10px 12px;
1854
+ background-color: transparent;
1649
1855
  display: flex;
1650
1856
  flex-direction: column;
1651
1857
  }
1652
- .tab-panel[data-v-7e9c9695] {
1858
+ .tab-panel[data-v-15c7e3be] {
1653
1859
  flex: 1;
1654
1860
  display: flex;
1655
1861
  flex-direction: column;
1656
1862
  height: 100%;
1657
1863
  overflow: auto;
1658
1864
  }
1659
- .data-content[data-v-7e9c9695] {
1865
+ .data-content[data-v-15c7e3be] {
1660
1866
  height: 100%;
1661
1867
  display: flex;
1662
1868
  flex-direction: column;
1663
1869
  }
1664
- .data-content.loading[data-v-7e9c9695] {
1870
+ .data-content.loading[data-v-15c7e3be] {
1665
1871
  opacity: 0.7;
1666
1872
  pointer-events: none;
1667
1873
  }
1668
- .table-responsive[data-v-7e9c9695] {
1874
+ .table-responsive[data-v-15c7e3be] {
1669
1875
  flex: 1;
1670
1876
  overflow: auto;
1671
1877
  }
1672
- .column-header[data-v-7e9c9695] {
1878
+ .column-header[data-v-15c7e3be] {
1673
1879
  position: relative;
1674
1880
  }
1675
- .column-key[data-v-7e9c9695] {
1881
+ .column-key[data-v-15c7e3be] {
1676
1882
  position: absolute;
1677
1883
  top: -5px;
1678
1884
  right: -15px;
1679
- color: #0d6efd;
1885
+ color: var(--db-primary-color);
1680
1886
  font-size: 0.75rem;
1681
1887
  }
1682
- .cell-value[data-v-7e9c9695] {
1888
+ .cell-value[data-v-15c7e3be] {
1683
1889
  max-width: 200px;
1684
1890
  overflow: hidden;
1685
1891
  text-overflow: ellipsis;
1686
1892
  white-space: nowrap;
1687
1893
  }
1688
- .loading-state[data-v-7e9c9695] {
1894
+ .loading-state[data-v-15c7e3be] {
1689
1895
  display: flex;
1690
1896
  flex-direction: column;
1691
1897
  align-items: center;
1692
1898
  justify-content: center;
1693
- height: 300px;
1694
- gap: 15px;
1899
+ height: 200px;
1900
+ gap: 10px;
1695
1901
  }
1696
- .empty-state[data-v-7e9c9695] {
1902
+ .empty-state[data-v-15c7e3be] {
1697
1903
  display: flex;
1698
1904
  flex-direction: column;
1699
1905
  align-items: center;
1700
1906
  justify-content: center;
1701
- height: 300px;
1702
- gap: 15px;
1703
- color: #475569;
1907
+ height: 200px;
1908
+ gap: 10px;
1909
+ color: var(--db-text-muted);
1704
1910
  }
1705
- .empty-state i[data-v-7e9c9695] {
1706
- font-size: 48px;
1911
+ .empty-state i[data-v-15c7e3be] {
1912
+ font-size: 28px;
1707
1913
  opacity: 0.5;
1708
1914
  }
1709
- .pagination-nav[data-v-7e9c9695] {
1710
- margin-top: 20px;
1711
- border-top: 1px solid #cbd5e1;
1712
- padding-top: 15px;
1915
+ .pagination-nav[data-v-15c7e3be] {
1916
+ margin-top: 10px;
1917
+ border-top: 1px solid var(--db-border);
1918
+ padding-top: 10px;
1713
1919
  }
1714
- .pagination-container[data-v-7e9c9695] {
1920
+ .pagination-container[data-v-15c7e3be] {
1715
1921
  display: flex;
1716
1922
  align-items: center;
1717
1923
  justify-content: space-between;
1718
1924
  flex-wrap: wrap;
1719
1925
  gap: 10px;
1720
1926
  }
1721
- .pagination-info[data-v-7e9c9695] {
1722
- font-size: 0.875rem;
1723
- color: #475569;
1927
+ .pagination-info[data-v-15c7e3be] {
1928
+ font-size: 0.75rem;
1929
+ color: var(--db-text-muted);
1724
1930
  }
1725
- .page-size-selector[data-v-7e9c9695] {
1931
+ .page-size-selector[data-v-15c7e3be] {
1726
1932
  display: flex;
1727
1933
  align-items: center;
1728
1934
  gap: 5px;
1729
1935
  }
1730
- .page-jump[data-v-7e9c9695] {
1936
+ .page-jump[data-v-15c7e3be] {
1731
1937
  display: flex;
1732
1938
  align-items: center;
1733
1939
  gap: 5px;
1734
1940
  }
1735
- .structure-actions[data-v-7e9c9695] {
1941
+ .structure-actions[data-v-15c7e3be] {
1736
1942
  display: flex;
1737
- gap: 10px;
1738
- margin-bottom: 15px;
1943
+ gap: 6px;
1944
+ margin-bottom: 10px;
1739
1945
  }
1740
- .structure-table[data-v-7e9c9695], .indexes-table[data-v-7e9c9695], .relations-table[data-v-7e9c9695] {
1946
+ .structure-table[data-v-15c7e3be], .indexes-table[data-v-15c7e3be], .relations-table[data-v-15c7e3be] {
1741
1947
  overflow: auto;
1742
1948
  }
1743
- .structure-table table[data-v-7e9c9695], .indexes-table table[data-v-7e9c9695], .relations-table table[data-v-7e9c9695] {
1949
+ .structure-table table[data-v-15c7e3be], .indexes-table table[data-v-15c7e3be], .relations-table table[data-v-15c7e3be] {
1744
1950
  width: 100%;
1745
1951
  }
1746
- .sql-section[data-v-7e9c9695] {
1952
+ .sql-section[data-v-15c7e3be] {
1747
1953
  height: 100%;
1748
1954
  }
1749
1955
 
1750
1956
  /* 响应式设计 */
1751
1957
  @media (max-width: 768px) {
1752
- .table-header-content[data-v-7e9c9695] {
1958
+ .table-header-content[data-v-15c7e3be] {
1753
1959
  flex-direction: column;
1754
1960
  align-items: flex-start;
1755
1961
  gap: 15px;
1756
1962
  }
1757
- .table-stats[data-v-7e9c9695] {
1963
+ .table-stats[data-v-15c7e3be] {
1758
1964
  width: 100%;
1759
1965
  justify-content: space-around;
1760
1966
  }
1761
- .table-toolbar[data-v-7e9c9695] {
1967
+ .table-toolbar[data-v-15c7e3be] {
1762
1968
  flex-direction: column;
1763
1969
  align-items: stretch;
1764
1970
  gap: 10px;
1765
1971
  }
1766
- .toolbar-left[data-v-7e9c9695], .toolbar-right[data-v-7e9c9695] {
1972
+ .toolbar-left[data-v-15c7e3be], .toolbar-right[data-v-15c7e3be] {
1767
1973
  justify-content: center;
1768
1974
  }
1769
- .pagination-container[data-v-7e9c9695] {
1975
+ .pagination-container[data-v-15c7e3be] {
1770
1976
  flex-direction: column;
1771
1977
  align-items: flex-start;
1772
1978
  gap: 15px;
1773
1979
  }
1774
- .pagination[data-v-7e9c9695] {
1980
+ .pagination[data-v-15c7e3be] {
1775
1981
  width: 100%;
1776
1982
  justify-content: center;
1777
1983
  }
1778
1984
  }
1779
1985
 
1780
- .database-explorer[data-v-96b10f51] {
1986
+ .database-explorer[data-v-50189218] {
1781
1987
  height: 100vh;
1782
1988
  min-height: 600px;
1783
1989
  }
1784
- .explorer-layout[data-v-96b10f51] {
1990
+ .explorer-layout[data-v-50189218] {
1785
1991
  display: flex;
1786
1992
  height: 100%;
1787
- background: #ffffff;
1788
- border-radius: 12px;
1789
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
1993
+ background: var(--db-surface);
1790
1994
  overflow: hidden;
1791
- border: 1px solid #cbd5e1;
1792
1995
  }
1793
1996
 
1794
1997
  /* 左侧边栏 */
1795
- .explorer-sidebar[data-v-96b10f51] {
1796
- width: 350px;
1998
+ .explorer-sidebar[data-v-50189218] {
1999
+ width: 264px;
1797
2000
  flex-shrink: 0;
1798
- border-right: 1px solid #cbd5e1;
2001
+ border-right: 1px solid var(--db-border);
1799
2002
  display: flex;
1800
2003
  flex-direction: column;
1801
- background: #ffffff;
2004
+ background: var(--db-gray-light);
1802
2005
  }
1803
- .sidebar-content[data-v-96b10f51] {
2006
+ .sidebar-content[data-v-50189218] {
1804
2007
  flex: 1;
1805
2008
  overflow-y: auto;
1806
2009
  padding: 0.5rem 0;
1807
2010
  display: flex;
1808
2011
  flex-direction: column;
1809
2012
  }
1810
- .tree-container[data-v-96b10f51] {
2013
+ .tree-container[data-v-50189218] {
1811
2014
  flex: 1;
1812
2015
  }
1813
2016
 
1814
2017
  /* 工具信息样式 - 固定在左下角 */
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%);
2018
+ .sidebar-tool-info[data-v-50189218] {
2019
+ padding: 0.5rem 0.625rem;
2020
+ border-top: 1px solid var(--db-border);
2021
+ background: transparent;
1819
2022
  display: flex;
1820
2023
  align-items: center;
1821
- gap: 0.75rem;
2024
+ gap: 0.5rem;
1822
2025
  cursor: pointer;
1823
- transition: all 0.3s ease;
2026
+ transition: background-color 0.15s ease;
1824
2027
  }
1825
- .sidebar-tool-info[data-v-96b10f51]:hover {
1826
- background: linear-gradient(135deg, #e0e7ff 0%, #ddd6fe 100%);
1827
- transform: translateY(-1px);
2028
+ .sidebar-tool-info[data-v-50189218]:hover {
2029
+ background: var(--db-bg-soft);
1828
2030
  }
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%);
2031
+ .tool-logo[data-v-50189218] {
2032
+ width: 24px;
2033
+ height: 24px;
2034
+ border-radius: 4px;
2035
+ background: var(--db-primary-color);
1834
2036
  display: flex;
1835
2037
  align-items: center;
1836
2038
  justify-content: center;
1837
- color: white;
1838
- font-size: 1rem;
2039
+ color: var(--db-on-accent);
2040
+ font-size: 0.8125rem;
1839
2041
  flex-shrink: 0;
1840
2042
  }
1841
- .tool-details[data-v-96b10f51] {
2043
+ .tool-details[data-v-50189218] {
1842
2044
  flex: 1;
1843
2045
  display: flex;
1844
2046
  flex-direction: column;
1845
2047
  gap: 0.125rem;
1846
2048
  }
1847
- .tool-name[data-v-96b10f51] {
2049
+ .tool-name[data-v-50189218] {
1848
2050
  font-size: 0.875rem;
1849
2051
  font-weight: 600;
1850
- color: #0f172a;
2052
+ color: var(--db-black);
1851
2053
  }
1852
- .tool-description[data-v-96b10f51] {
2054
+ .tool-description[data-v-50189218] {
1853
2055
  font-size: 0.75rem;
1854
- color: #334155;
2056
+ color: var(--db-darker-color);
1855
2057
  }
1856
- .sidebar-header[data-v-96b10f51] {
1857
- padding: 1rem 0.875rem;
1858
- border-bottom: 1px solid #cbd5e1;
1859
- background: #f8f9fa;
2058
+ .sidebar-header[data-v-50189218] {
2059
+ padding: 0.5rem 0.625rem;
2060
+ border-bottom: 1px solid var(--db-border);
2061
+ background: transparent;
1860
2062
  display: flex;
1861
2063
  justify-content: space-between;
1862
2064
  align-items: center;
1863
2065
  }
1864
- .sidebar-title[data-v-96b10f51] {
2066
+ .sidebar-title[data-v-50189218] {
1865
2067
  margin: 0;
1866
- font-size: 0.9375rem;
2068
+ font-size: 0.6875rem;
1867
2069
  font-weight: 600;
1868
- color: #24292f;
2070
+ letter-spacing: 0.06em;
2071
+ text-transform: uppercase;
2072
+ color: var(--db-text-muted);
1869
2073
  display: flex;
1870
2074
  align-items: center;
1871
- gap: 0.5rem;
2075
+ gap: 0.375rem;
1872
2076
  }
1873
- .sidebar-title i[data-v-96b10f51] {
1874
- color: #374151;
2077
+ .sidebar-title i[data-v-50189218] {
2078
+ color: var(--db-text-muted);
1875
2079
  }
1876
- .sidebar-actions[data-v-96b10f51] {
2080
+ .sidebar-actions[data-v-50189218] {
1877
2081
  display: flex;
1878
2082
  gap: 0.25rem;
1879
2083
  }
1880
- .sidebar-actions .btn[data-v-96b10f51] {
1881
- padding: 0.375rem 0.625rem;
2084
+ .sidebar-actions .btn[data-v-50189218] {
2085
+ padding: 0.15rem 0.4rem;
1882
2086
  font-size: 0.75rem;
1883
- border: 1px solid #d0d7de;
1884
- background-color: #ffffff;
1885
- color: #24292f;
1886
- border-radius: 6px;
2087
+ border: 1px solid var(--db-border);
2088
+ background-color: transparent;
2089
+ color: var(--db-text-muted);
2090
+ border-radius: 4px;
1887
2091
  transition: all 0.15s ease;
1888
2092
  }
1889
- .sidebar-actions .btn[data-v-96b10f51]:hover {
1890
- background-color: #f3f4f6;
1891
- border-color: #d0d7de;
2093
+ .sidebar-actions .btn[data-v-50189218]:hover {
2094
+ background-color: var(--db-bg-soft);
2095
+ border-color: var(--db-border-light);
2096
+ color: var(--db-dark-color);
1892
2097
  }
1893
- .sidebar-actions .btn-outline-primary[data-v-96b10f51] {
1894
- border-color: #0969da;
1895
- color: #0969da;
2098
+ .sidebar-actions .btn-outline-primary[data-v-50189218] {
2099
+ border-color: var(--db-border);
2100
+ color: var(--db-text-muted);
1896
2101
  }
1897
- .sidebar-actions .btn-outline-primary[data-v-96b10f51]:hover {
1898
- background-color: #0969da;
1899
- border-color: #0969da;
1900
- color: #ffffff;
2102
+ .sidebar-actions .btn-outline-primary[data-v-50189218]:hover {
2103
+ background-color: var(--db-primary-bg);
2104
+ border-color: var(--db-primary-color);
2105
+ color: var(--db-primary-color);
1901
2106
  }
1902
- .sidebar-actions .btn-outline-success[data-v-96b10f51] {
1903
- border-color: #1a7f37;
1904
- color: #1a7f37;
2107
+ .sidebar-actions .btn-outline-success[data-v-50189218] {
2108
+ border-color: var(--db-border);
2109
+ color: var(--db-text-muted);
1905
2110
  }
1906
- .sidebar-actions .btn-outline-success[data-v-96b10f51]:hover {
1907
- background-color: #1a7f37;
1908
- border-color: #1a7f37;
1909
- color: #ffffff;
2111
+ .sidebar-actions .btn-outline-success[data-v-50189218]:hover {
2112
+ background-color: var(--db-success-bg);
2113
+ border-color: var(--db-accent-color);
2114
+ color: var(--db-accent-color);
1910
2115
  }
1911
- .sidebar-content[data-v-96b10f51] {
2116
+ .sidebar-content[data-v-50189218] {
1912
2117
  flex: 1;
1913
2118
  overflow-y: auto;
1914
- padding: 0.5rem 0;
2119
+ padding: 0.25rem 0;
1915
2120
  }
1916
2121
 
1917
2122
  /* 树形结构 */
1918
- .tree-container[data-v-96b10f51] {
1919
- font-size: 0.875rem;
2123
+ .tree-container[data-v-50189218] {
2124
+ font-size: 0.8125rem;
1920
2125
  user-select: none;
1921
2126
  }
1922
- .tree-node[data-v-96b10f51] {
2127
+ .tree-node[data-v-50189218] {
1923
2128
  margin-bottom: 0;
1924
2129
  }
1925
- .tree-children[data-v-96b10f51] {
1926
- margin-left: 0.75rem;
1927
- border-left: 1px solid #e1e5e9;
1928
- padding-left: 0.5rem;
2130
+ .tree-children[data-v-50189218] {
2131
+ margin-left: 0.5rem;
2132
+ border-left: 1px solid var(--db-border);
2133
+ padding-left: 0.375rem;
1929
2134
  }
1930
- .node-content[data-v-96b10f51] {
2135
+ .node-content[data-v-50189218] {
1931
2136
  display: flex;
1932
2137
  align-items: center;
1933
- padding: 0.375rem 0.75rem;
2138
+ padding: 0.175rem 0.5rem;
1934
2139
  cursor: pointer;
1935
2140
  transition: background-color 0.15s ease;
1936
2141
  position: relative;
1937
- margin-right: 0.5rem;
1938
- border-radius: 6px;
1939
- gap: 0.25rem;
2142
+ margin-right: 0.25rem;
2143
+ border-radius: 4px;
2144
+ gap: 0.125rem;
1940
2145
  }
1941
- .node-expand[data-v-96b10f51] {
1942
- width: 16px;
1943
- height: 16px;
2146
+ .node-expand[data-v-50189218] {
2147
+ width: 14px;
2148
+ height: 14px;
1944
2149
  display: flex;
1945
2150
  align-items: center;
1946
2151
  justify-content: center;
1947
2152
  flex-shrink: 0;
1948
- margin-right: 0.25rem;
2153
+ margin-right: 0.125rem;
1949
2154
  }
1950
- .node-expand i[data-v-96b10f51] {
1951
- font-size: 0.6875rem;
1952
- color: #374151;
2155
+ .node-expand i[data-v-50189218] {
2156
+ font-size: 0.625rem;
2157
+ color: var(--db-text-muted);
1953
2158
  transition: transform 0.15s ease;
1954
2159
  }
1955
- .node-expand i.expanded[data-v-96b10f51] {
2160
+ .node-expand i.expanded[data-v-50189218] {
1956
2161
  transform: rotate(90deg);
1957
2162
  }
1958
- .node-main[data-v-96b10f51] {
2163
+ .node-main[data-v-50189218] {
1959
2164
  display: flex;
1960
2165
  align-items: center;
1961
2166
  flex: 1;
1962
2167
  min-width: 0;
1963
2168
  }
1964
- .node-content[data-v-96b10f51]:hover {
1965
- background-color: #f3f4f6;
2169
+ .node-content[data-v-50189218]:hover {
2170
+ background-color: var(--db-bg-soft);
1966
2171
  }
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);
2172
+ .tree-node.selected .node-content[data-v-50189218] {
2173
+ background-color: var(--db-primary-bg);
2174
+ color: var(--db-dark-color);
2175
+ box-shadow: none;
1972
2176
  }
1973
- .tree-node.selected .node-content[data-v-96b10f51]::before {
2177
+ .tree-node.selected .node-content[data-v-50189218]::before {
1974
2178
  content: '';
1975
2179
  position: absolute;
1976
2180
  left: 0;
1977
2181
  top: 0;
1978
2182
  bottom: 0;
1979
- width: 3px;
1980
- background: linear-gradient(135deg, #0969da, #0550ae);
1981
- border-radius: 3px 0 0 3px;
2183
+ width: 2px;
2184
+ background: var(--db-primary-color);
2185
+ border-radius: 2px 0 0 2px;
1982
2186
  }
1983
- .node-icon[data-v-96b10f51] {
1984
- width: 20px;
2187
+ .node-icon[data-v-50189218] {
2188
+ width: 16px;
1985
2189
  display: flex;
1986
2190
  justify-content: center;
1987
2191
  flex-shrink: 0;
1988
- margin-right: 0.5rem;
2192
+ margin-right: 0.375rem;
1989
2193
  }
1990
- .node-icon i[data-v-96b10f51] {
1991
- font-size: 0.875rem;
2194
+ .node-icon i[data-v-50189218] {
2195
+ font-size: 0.8125rem;
2196
+ color: var(--db-text-muted);
1992
2197
  }
1993
- .node-label[data-v-96b10f51] {
2198
+ .node-label[data-v-50189218] {
1994
2199
  flex: 1;
1995
2200
  display: flex;
1996
2201
  align-items: center;
1997
2202
  gap: 0.375rem;
1998
2203
  min-width: 0;
1999
2204
  }
2000
- .connection-name[data-v-96b10f51],
2001
- .database-name[data-v-96b10f51],
2002
- .table-name[data-v-96b10f51] {
2003
- font-weight: 500;
2205
+ .connection-name[data-v-50189218],
2206
+ .database-name[data-v-50189218],
2207
+ .table-name[data-v-50189218] {
2208
+ font-weight: 400;
2004
2209
  white-space: nowrap;
2005
2210
  overflow: hidden;
2006
2211
  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;
2212
+ line-height: 1.4;
2013
2213
  }
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;
2214
+ .tree-node.selected .connection-name[data-v-50189218],
2215
+ .tree-node.selected .database-name[data-v-50189218],
2216
+ .tree-node.selected .table-name[data-v-50189218] {
2021
2217
  font-weight: 500;
2218
+ }
2219
+
2220
+ /* 类型 / 行数说明：走 VSCode 树的「描述文字」样式，浅灰无底色，减少噪声 */
2221
+ .connection-type[data-v-50189218],
2222
+ .table-info[data-v-50189218] {
2223
+ font-size: 0.6875rem;
2224
+ color: var(--db-text-faint);
2225
+ background-color: transparent;
2226
+ padding: 0;
2227
+ border-radius: 0;
2228
+ font-weight: 400;
2022
2229
  white-space: nowrap;
2023
2230
  }
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;
2231
+ .tree-node.selected .connection-type[data-v-50189218],
2232
+ .tree-node.selected .table-info[data-v-50189218] {
2233
+ background-color: transparent;
2234
+ color: var(--db-text-muted);
2028
2235
  }
2029
- .node-actions[data-v-96b10f51] {
2236
+ .node-actions[data-v-50189218] {
2030
2237
  display: flex;
2031
2238
  gap: 0.125rem;
2032
2239
  opacity: 0;
2033
2240
  transition: opacity 0.15s ease;
2034
2241
  }
2035
- .node-content:hover .node-actions[data-v-96b10f51] {
2242
+ .node-content:hover .node-actions[data-v-50189218] {
2036
2243
  opacity: 1;
2037
2244
  }
2038
- .btn-icon[data-v-96b10f51] {
2039
- padding: 0.25rem;
2245
+ .btn-icon[data-v-50189218] {
2246
+ padding: 0;
2040
2247
  background: transparent;
2041
2248
  border: none;
2042
2249
  border-radius: 4px;
@@ -2044,179 +2251,179 @@ to {
2044
2251
  display: flex;
2045
2252
  align-items: center;
2046
2253
  justify-content: center;
2047
- width: 20px;
2048
- height: 20px;
2254
+ width: 18px;
2255
+ height: 18px;
2049
2256
  }
2050
- .btn-icon[data-v-96b10f51]:hover {
2051
- background-color: #e1e4e8;
2257
+ .btn-icon[data-v-50189218]:hover {
2258
+ background-color: var(--db-bg-soft);
2052
2259
  }
2053
- .btn-icon i[data-v-96b10f51] {
2260
+ .btn-icon i[data-v-50189218] {
2054
2261
  font-size: 0.6875rem;
2055
- color: #374151;
2262
+ color: var(--db-text-muted);
2056
2263
  }
2057
- .tree-node.selected .btn-icon[data-v-96b10f51]:hover {
2058
- background-color: rgba(9, 105, 218, 0.1);
2264
+ .tree-node.selected .btn-icon[data-v-50189218]:hover {
2265
+ background-color: var(--db-bg-soft);
2059
2266
  }
2060
- .tree-node.selected .btn-icon i[data-v-96b10f51] {
2061
- color: #475569;
2267
+ .tree-node.selected .btn-icon i[data-v-50189218] {
2268
+ color: var(--db-text-muted);
2062
2269
  }
2063
- .tree-node.selected .btn-icon:hover i[data-v-96b10f51] {
2064
- color: #0969da;
2270
+ .tree-node.selected .btn-icon:hover i[data-v-50189218] {
2271
+ color: var(--db-dark-color);
2065
2272
  }
2066
- .btn-icon-danger[data-v-96b10f51]:hover {
2067
- background-color: #fee2e2;
2273
+ .btn-icon-danger[data-v-50189218]:hover {
2274
+ background-color: var(--db-danger-bg);
2068
2275
  }
2069
- .btn-icon-danger:hover i[data-v-96b10f51] {
2276
+ .btn-icon-danger:hover i[data-v-50189218] {
2070
2277
  color: #dc2626;
2071
2278
  }
2072
- .node-spinner[data-v-96b10f51] {
2279
+ .node-spinner[data-v-50189218] {
2073
2280
  display: flex;
2074
2281
  align-items: center;
2075
2282
  justify-content: center;
2076
2283
  }
2077
- .spinner-border-sm[data-v-96b10f51] {
2284
+ .spinner-border-sm[data-v-50189218] {
2078
2285
  width: 1rem;
2079
2286
  height: 1rem;
2080
2287
  border-width: 0.15em;
2081
2288
  }
2082
2289
 
2083
2290
  /* 连接节点样式 */
2084
- .connection-content[data-v-96b10f51] {
2291
+ .connection-content[data-v-50189218] {
2085
2292
  font-weight: 500;
2086
- color: #24292f;
2293
+ color: var(--db-text-body);
2087
2294
  }
2088
- .connection-content[data-v-96b10f51]:hover {
2089
- background-color: #f3f4f6;
2295
+ .connection-content[data-v-50189218]:hover {
2296
+ background-color: var(--db-bg-soft);
2090
2297
  }
2091
- .tree-node.selected .connection-content[data-v-96b10f51] {
2092
- background-color: #eff1ff;
2093
- color: #0969da;
2298
+ .tree-node.selected .connection-content[data-v-50189218] {
2299
+ background-color: var(--db-primary-bg);
2300
+ color: var(--db-dark-color);
2094
2301
  }
2095
2302
 
2096
2303
  /* 数据库节点样式 */
2097
- .database-content[data-v-96b10f51] {
2098
- color: #24292f;
2304
+ .database-content[data-v-50189218] {
2305
+ color: var(--db-text-body);
2099
2306
  }
2100
- .database-content[data-v-96b10f51]:hover {
2101
- background-color: #f6f8fa;
2307
+ .database-content[data-v-50189218]:hover {
2308
+ background-color: var(--db-bg-soft);
2102
2309
  }
2103
- .tree-node.selected .database-content[data-v-96b10f51] {
2104
- background-color: #eff1ff;
2105
- color: #0969da;
2310
+ .tree-node.selected .database-content[data-v-50189218] {
2311
+ background-color: var(--db-primary-bg);
2312
+ color: var(--db-dark-color);
2106
2313
  }
2107
2314
 
2108
2315
  /* 表节点样式 */
2109
- .table-content[data-v-96b10f51] {
2110
- color: #24292f;
2316
+ .table-content[data-v-50189218] {
2317
+ color: var(--db-text-body);
2111
2318
  }
2112
- .table-content[data-v-96b10f51]:hover {
2113
- background-color: #f6f8fa;
2319
+ .table-content[data-v-50189218]:hover {
2320
+ background-color: var(--db-bg-soft);
2114
2321
  }
2115
- .tree-node.selected .table-content[data-v-96b10f51] {
2116
- background-color: #eff1ff;
2117
- color: #0969da;
2322
+ .tree-node.selected .table-content[data-v-50189218] {
2323
+ background-color: var(--db-primary-bg);
2324
+ color: var(--db-dark-color);
2118
2325
  }
2119
2326
 
2120
2327
  /* 数据库品牌色彩 */
2121
- .db-mysql[data-v-96b10f51] {
2328
+ .db-mysql[data-v-50189218] {
2122
2329
  color: #00758f !important;
2123
- background: linear-gradient(135deg, #00758f, #005a70);
2330
+ background: #00758f;
2124
2331
  -webkit-background-clip: text;
2125
2332
  -webkit-text-fill-color: transparent;
2126
2333
  }
2127
- .db-mysql-bg[data-v-96b10f51] { background: linear-gradient(135deg, #00758f, #005a70);
2334
+ .db-mysql-bg[data-v-50189218] { background: #00758f;
2128
2335
  }
2129
- .db-postgres[data-v-96b10f51] {
2336
+ .db-postgres[data-v-50189218] {
2130
2337
  color: #336791 !important;
2131
- background: linear-gradient(135deg, #336791, #2a5278);
2338
+ background: #336791;
2132
2339
  -webkit-background-clip: text;
2133
2340
  -webkit-text-fill-color: transparent;
2134
2341
  }
2135
- .db-postgres-bg[data-v-96b10f51] { background: linear-gradient(135deg, #336791, #2a5278);
2342
+ .db-postgres-bg[data-v-50189218] { background: #336791;
2136
2343
  }
2137
- .db-sqlite[data-v-96b10f51] {
2344
+ .db-sqlite[data-v-50189218] {
2138
2345
  color: #003b57 !important;
2139
- background: linear-gradient(135deg, #003b57, #002d42);
2346
+ background: #003b57;
2140
2347
  -webkit-background-clip: text;
2141
2348
  -webkit-text-fill-color: transparent;
2142
2349
  }
2143
- .db-sqlite-bg[data-v-96b10f51] { background: linear-gradient(135deg, #003b57, #002d42);
2350
+ .db-sqlite-bg[data-v-50189218] { background: #003b57;
2144
2351
  }
2145
- .db-mssql[data-v-96b10f51] {
2352
+ .db-mssql[data-v-50189218] {
2146
2353
  color: #cc2927 !important;
2147
- background: linear-gradient(135deg, #cc2927, #a62220);
2354
+ background: #cc2927;
2148
2355
  -webkit-background-clip: text;
2149
2356
  -webkit-text-fill-color: transparent;
2150
2357
  }
2151
- .db-mssql-bg[data-v-96b10f51] { background: linear-gradient(135deg, #cc2927, #a62220);
2358
+ .db-mssql-bg[data-v-50189218] { background: #cc2927;
2152
2359
  }
2153
- .db-oracle[data-v-96b10f51] {
2360
+ .db-oracle[data-v-50189218] {
2154
2361
  color: #f80000 !important;
2155
- background: linear-gradient(135deg, #f80000, #d40000);
2362
+ background: #f80000;
2156
2363
  -webkit-background-clip: text;
2157
2364
  -webkit-text-fill-color: transparent;
2158
2365
  }
2159
- .db-oracle-bg[data-v-96b10f51] { background: linear-gradient(135deg, #f80000, #d40000);
2366
+ .db-oracle-bg[data-v-50189218] { background: #f80000;
2160
2367
  }
2161
- .db-default[data-v-96b10f51] {
2162
- color: #64748b !important;
2163
- background: linear-gradient(135deg, #64748b, #475569);
2368
+ .db-default[data-v-50189218] {
2369
+ color: var(--db-text-muted) !important;
2370
+ background: linear-gradient(135deg, var(--db-text-muted), var(--db-gray-dark));
2164
2371
  -webkit-background-clip: text;
2165
2372
  -webkit-text-fill-color: transparent;
2166
2373
  }
2167
- .db-default-bg[data-v-96b10f51] { background: linear-gradient(135deg, #64748b, #475569);
2374
+ .db-default-bg[data-v-50189218] { background: linear-gradient(135deg, var(--db-text-muted), var(--db-gray-dark));
2168
2375
  }
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;
2376
+ .tree-node.selected .db-mysql[data-v-50189218],
2377
+ .tree-node.selected .db-postgres[data-v-50189218],
2378
+ .tree-node.selected .db-sqlite[data-v-50189218],
2379
+ .tree-node.selected .db-mssql[data-v-50189218],
2380
+ .tree-node.selected .db-oracle[data-v-50189218],
2381
+ .tree-node.selected .db-default[data-v-50189218] {
2382
+ color: var(--db-on-accent) !important;
2176
2383
  background: none;
2177
- -webkit-text-fill-color: white;
2384
+ -webkit-text-fill-color: var(--db-on-accent);
2178
2385
  }
2179
2386
 
2180
2387
  /* 数据库Logo图标 */
2181
- .db-logo[data-v-96b10f51] {
2182
- width: 20px;
2183
- height: 20px;
2184
- border-radius: 4px;
2388
+ .db-logo[data-v-50189218] {
2389
+ width: 16px;
2390
+ height: 16px;
2391
+ border-radius: 3px;
2185
2392
  display: flex;
2186
2393
  align-items: center;
2187
2394
  justify-content: center;
2188
2395
  font-weight: 700;
2189
- font-size: 0.75rem;
2190
- color: white;
2191
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2396
+ font-size: 0.625rem;
2397
+ line-height: 1;
2398
+ color: var(--db-on-accent);
2192
2399
  }
2193
- .db-logo-mysql[data-v-96b10f51] {
2194
- background: linear-gradient(135deg, #00758f, #005a70);
2400
+ .db-logo-mysql[data-v-50189218] {
2401
+ background: #00758f;
2195
2402
  border: 1px solid #004d61;
2196
2403
  }
2197
- .db-logo-postgres[data-v-96b10f51] {
2198
- background: linear-gradient(135deg, #336791, #2a5278);
2404
+ .db-logo-postgres[data-v-50189218] {
2405
+ background: #336791;
2199
2406
  border: 1px solid #244566;
2200
2407
  }
2201
- .db-logo-sqlite[data-v-96b10f51] {
2202
- background: linear-gradient(135deg, #003b57, #002d42);
2408
+ .db-logo-sqlite[data-v-50189218] {
2409
+ background: #003b57;
2203
2410
  border: 1px solid #002939;
2204
2411
  }
2205
- .db-logo-mssql[data-v-96b10f51] {
2206
- background: linear-gradient(135deg, #cc2927, #a62220);
2412
+ .db-logo-mssql[data-v-50189218] {
2413
+ background: #cc2927;
2207
2414
  border: 1px solid #8b1f1d;
2208
2415
  }
2209
- .db-logo-oracle[data-v-96b10f51] {
2210
- background: linear-gradient(135deg, #f80000, #d40000);
2416
+ .db-logo-oracle[data-v-50189218] {
2417
+ background: #f80000;
2211
2418
  border: 1px solid #b30000;
2212
2419
  }
2213
- .db-logo-default[data-v-96b10f51] {
2214
- background: linear-gradient(135deg, #64748b, #475569);
2215
- border: 1px solid #334155;
2420
+ .db-logo-default[data-v-50189218] {
2421
+ background: linear-gradient(135deg, var(--db-text-muted), var(--db-gray-dark));
2422
+ border: 1px solid var(--db-darker-color);
2216
2423
  }
2217
2424
 
2218
2425
  /* 右侧主内容 */
2219
- .explorer-main[data-v-96b10f51] {
2426
+ .explorer-main[data-v-50189218] {
2220
2427
  flex: 1;
2221
2428
  display: flex;
2222
2429
  flex-direction: column;
@@ -2225,208 +2432,208 @@ to {
2225
2432
  }
2226
2433
 
2227
2434
  /* 详情组件容器 */
2228
- .explorer-main[data-v-96b10f51] > * {
2435
+ .explorer-main[data-v-50189218] > * {
2229
2436
  flex: 1;
2230
2437
  display: flex;
2231
2438
  flex-direction: column;
2232
2439
  height: 100%;
2233
2440
  }
2234
- .content-tabs[data-v-96b10f51] {
2441
+ .content-tabs[data-v-50189218] {
2235
2442
  flex: 1;
2236
2443
  display: flex;
2237
2444
  flex-direction: column;
2238
2445
  height: 100%;
2239
2446
  }
2240
- .nav-tabs[data-v-96b10f51] {
2241
- background: #f8fafc;
2242
- border-bottom: 1px solid #cbd5e1;
2447
+ .nav-tabs[data-v-50189218] {
2448
+ background: var(--db-light-color);
2449
+ border-bottom: 1px solid var(--db-gray-medium);
2243
2450
  padding: 0 1rem;
2244
2451
  }
2245
- .nav-link[data-v-96b10f51] {
2452
+ .nav-link[data-v-50189218] {
2246
2453
  border: none;
2247
2454
  background: transparent;
2248
- color: #334155;
2455
+ color: var(--db-darker-color);
2249
2456
  padding: 1rem 1.5rem;
2250
2457
  font-weight: 500;
2251
2458
  transition: all 0.2s ease;
2252
2459
  }
2253
- .nav-link[data-v-96b10f51]:hover {
2460
+ .nav-link[data-v-50189218]:hover {
2254
2461
  color: #667eea;
2255
2462
  background: rgba(102, 126, 234, 0.1);
2256
2463
  }
2257
- .nav-link.active[data-v-96b10f51] {
2464
+ .nav-link.active[data-v-50189218] {
2258
2465
  color: #667eea;
2259
- background: white;
2466
+ background: var(--db-surface);
2260
2467
  border-bottom: 2px solid #667eea;
2261
2468
  }
2262
- .tab-content[data-v-96b10f51] {
2469
+ .tab-content[data-v-50189218] {
2263
2470
  flex: 1;
2264
2471
  overflow-y: auto;
2265
- padding: 1.5rem;
2472
+ padding: 1.25rem;
2266
2473
  height: calc(100% - 60px); /* 减去导航栏高度 */
2267
2474
  }
2268
2475
 
2269
2476
  /* 概览样式 */
2270
- .overview-section[data-v-96b10f51] {
2477
+ .overview-section[data-v-50189218] {
2271
2478
  padding: 1rem 0;
2272
2479
  }
2273
- .info-cards[data-v-96b10f51] {
2480
+ .info-cards[data-v-50189218] {
2274
2481
  display: grid;
2275
2482
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
2276
- gap: 1rem;
2483
+ gap: 0.75rem;
2277
2484
  }
2278
- .info-card[data-v-96b10f51] {
2279
- background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
2280
- border-radius: 12px;
2281
- padding: 1.5rem;
2485
+ .info-card[data-v-50189218] {
2486
+ background: linear-gradient(135deg, var(--db-light-color) 0%, var(--db-border) 100%);
2487
+ border-radius: 8px;
2488
+ padding: 0.875rem;
2282
2489
  display: flex;
2283
2490
  align-items: center;
2284
- gap: 1rem;
2285
- border: 1px solid #cbd5e1;
2491
+ gap: 0.75rem;
2492
+ border: 1px solid var(--db-gray-medium);
2286
2493
  }
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;
2494
+ .card-icon[data-v-50189218] {
2495
+ width: 36px;
2496
+ height: 36px;
2497
+ background: var(--db-primary-color);
2498
+ border-radius: 8px;
2292
2499
  display: flex;
2293
2500
  align-items: center;
2294
2501
  justify-content: center;
2295
- color: white;
2296
- font-size: 1.25rem;
2502
+ color: var(--db-on-accent);
2503
+ font-size: 1rem;
2297
2504
  }
2298
- .card-content h6[data-v-96b10f51] {
2505
+ .card-content h6[data-v-50189218] {
2299
2506
  margin: 0 0 0.25rem 0;
2300
- color: #334155;
2301
- font-size: 0.875rem;
2507
+ color: var(--db-darker-color);
2508
+ font-size: 0.8125rem;
2302
2509
  font-weight: 500;
2303
2510
  }
2304
- .card-value[data-v-96b10f51] {
2511
+ .card-value[data-v-50189218] {
2305
2512
  margin: 0;
2306
- color: #1e293b;
2513
+ color: var(--db-dark-color);
2307
2514
  font-weight: 600;
2308
- font-size: 1.1rem;
2515
+ font-size: 1rem;
2309
2516
  }
2310
2517
 
2311
2518
  /* 表格网格 */
2312
- .table-grid[data-v-96b10f51] {
2519
+ .table-grid[data-v-50189218] {
2313
2520
  display: grid;
2314
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
2315
- gap: 1rem;
2521
+ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
2522
+ gap: 0.75rem;
2316
2523
  }
2317
- .table-card[data-v-96b10f51] {
2318
- background: white;
2319
- border: 1px solid #cbd5e1;
2320
- border-radius: 12px;
2321
- padding: 1rem;
2524
+ .table-card[data-v-50189218] {
2525
+ background: var(--db-surface);
2526
+ border: 1px solid var(--db-gray-medium);
2527
+ border-radius: 8px;
2528
+ padding: 0.75rem;
2322
2529
  cursor: pointer;
2323
2530
  transition: all 0.2s ease;
2324
2531
  }
2325
- .table-card[data-v-96b10f51]:hover {
2326
- border-color: #667eea;
2532
+ .table-card[data-v-50189218]:hover {
2533
+ border-color: var(--db-primary-color);
2327
2534
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
2328
2535
  transform: translateY(-2px);
2329
2536
  }
2330
- .table-card .card-header[data-v-96b10f51] {
2537
+ .table-card .card-header[data-v-50189218] {
2331
2538
  display: flex;
2332
2539
  align-items: center;
2333
- gap: 0.75rem;
2334
- margin-bottom: 0.75rem;
2540
+ gap: 0.5rem;
2541
+ margin-bottom: 0.5rem;
2335
2542
  }
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;
2543
+ .table-icon[data-v-50189218] {
2544
+ width: 28px;
2545
+ height: 28px;
2546
+ background: var(--db-accent-color);
2547
+ border-radius: 6px;
2341
2548
  display: flex;
2342
2549
  align-items: center;
2343
2550
  justify-content: center;
2344
- color: white;
2551
+ color: var(--db-on-accent);
2345
2552
  }
2346
- .table-name[data-v-96b10f51] {
2553
+ .table-name[data-v-50189218] {
2347
2554
  font-weight: 600;
2348
- color: #1e293b;
2555
+ color: var(--db-dark-color);
2349
2556
  }
2350
- .table-stats[data-v-96b10f51] {
2557
+ .table-stats[data-v-50189218] {
2351
2558
  display: flex;
2352
- gap: 1rem;
2559
+ gap: 0.75rem;
2353
2560
  margin-bottom: 0.5rem;
2354
2561
  }
2355
- .stat[data-v-96b10f51] {
2562
+ .stat[data-v-50189218] {
2356
2563
  display: flex;
2357
2564
  flex-direction: column;
2358
2565
  gap: 0.25rem;
2359
2566
  }
2360
- .stat-label[data-v-96b10f51] {
2567
+ .stat-label[data-v-50189218] {
2361
2568
  font-size: 0.75rem;
2362
- color: #334155;
2569
+ color: var(--db-darker-color);
2363
2570
  }
2364
- .stat-value[data-v-96b10f51] {
2571
+ .stat-value[data-v-50189218] {
2365
2572
  font-size: 0.875rem;
2366
2573
  font-weight: 600;
2367
- color: #0f172a;
2574
+ color: var(--db-black);
2368
2575
  }
2369
- .table-comment[data-v-96b10f51] {
2576
+ .table-comment[data-v-50189218] {
2370
2577
  font-size: 0.75rem;
2371
- color: #334155;
2578
+ color: var(--db-darker-color);
2372
2579
  font-style: italic;
2373
2580
  }
2374
2581
 
2375
2582
  /* 数据工具栏 */
2376
- .data-toolbar[data-v-96b10f51] {
2583
+ .data-toolbar[data-v-50189218] {
2377
2584
  display: flex;
2378
2585
  justify-content: space-between;
2379
2586
  align-items: center;
2380
2587
  margin-bottom: 1rem;
2381
2588
  padding: 0.75rem;
2382
- background: #f8fafc;
2589
+ background: var(--db-light-color);
2383
2590
  border-radius: 8px;
2384
2591
  }
2385
- .toolbar-left[data-v-96b10f51],
2386
- .toolbar-right[data-v-96b10f51] {
2592
+ .toolbar-left[data-v-50189218],
2593
+ .toolbar-right[data-v-50189218] {
2387
2594
  display: flex;
2388
2595
  gap: 0.5rem;
2389
2596
  align-items: center;
2390
2597
  }
2391
2598
 
2392
2599
  /* 空状态 */
2393
- .empty-state[data-v-96b10f51],
2394
- .default-state[data-v-96b10f51] {
2600
+ .empty-state[data-v-50189218],
2601
+ .default-state[data-v-50189218] {
2395
2602
  display: flex;
2396
2603
  flex-direction: column;
2397
2604
  align-items: center;
2398
2605
  justify-content: center;
2399
2606
  height: 100%;
2400
- color: #334155;
2607
+ color: var(--db-darker-color);
2401
2608
  text-align: center;
2402
2609
  }
2403
- .empty-icon[data-v-96b10f51],
2404
- .default-icon[data-v-96b10f51] {
2405
- font-size: 3rem;
2406
- margin-bottom: 1rem;
2407
- opacity: 0.5;
2610
+ .empty-icon[data-v-50189218],
2611
+ .default-icon[data-v-50189218] {
2612
+ font-size: 1.75rem;
2613
+ margin-bottom: 0.5rem;
2614
+ opacity: 0.4;
2408
2615
  }
2409
- .empty-text h5[data-v-96b10f51],
2410
- .default-content h5[data-v-96b10f51] {
2411
- color: #1e293b;
2616
+ .empty-text h5[data-v-50189218],
2617
+ .default-content h5[data-v-50189218] {
2618
+ color: var(--db-dark-color);
2412
2619
  margin-bottom: 0.5rem;
2413
2620
  }
2414
2621
 
2415
2622
  /* 响应式 */
2416
2623
  @media (max-width: 768px) {
2417
- .explorer-layout[data-v-96b10f51] {
2624
+ .explorer-layout[data-v-50189218] {
2418
2625
  flex-direction: column;
2419
2626
  }
2420
- .explorer-sidebar[data-v-96b10f51] {
2627
+ .explorer-sidebar[data-v-50189218] {
2421
2628
  width: 100%;
2422
2629
  height: 40vh;
2423
2630
  border-right: none;
2424
- border-bottom: 1px solid #cbd5e1;
2631
+ border-bottom: 1px solid var(--db-gray-medium);
2425
2632
  }
2426
- .info-cards[data-v-96b10f51] {
2633
+ .info-cards[data-v-50189218] {
2427
2634
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
2428
2635
  }
2429
- .table-grid[data-v-96b10f51] {
2636
+ .table-grid[data-v-50189218] {
2430
2637
  grid-template-columns: 1fr;
2431
2638
  }
2432
2639
  }