dsh-plugin-usage 0.1.0

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.
@@ -0,0 +1,885 @@
1
+ // Token 用量统计 — 全部样式(tsd- 前缀;颜色一律使用 DSW 主题变量,深浅色自适应)
2
+ export const CSS = `
3
+ /* ============ 布局 ============ */
4
+ .tsd-section {
5
+ width: 100%;
6
+ display: flex;
7
+ flex-direction: column;
8
+ gap: 16px;
9
+ color: var(--dsw-alias-label-primary);
10
+ animation: tsd-fade-in 0.4s var(--ds-ease-in-out);
11
+ }
12
+ @keyframes tsd-fade-in {
13
+ from { opacity: 0; transform: translateY(8px); }
14
+ to { opacity: 1; transform: none; }
15
+ }
16
+
17
+ /* ============ Header ============ */
18
+ .tsd-header {
19
+ display: flex;
20
+ align-items: flex-end;
21
+ justify-content: space-between;
22
+ gap: 12px;
23
+ flex-wrap: wrap;
24
+ }
25
+ .tsd-title {
26
+ margin: 0;
27
+ font-size: 24px;
28
+ font-weight: 700;
29
+ letter-spacing: -0.02em;
30
+ color: var(--dsw-alias-label-primary);
31
+ }
32
+ .tsd-subtitle {
33
+ margin: 4px 0 0;
34
+ font-size: 14px;
35
+ color: var(--dsw-alias-label-secondary);
36
+ }
37
+ .tsd-icon-btn {
38
+ display: inline-flex;
39
+ align-items: center;
40
+ justify-content: center;
41
+ width: 34px;
42
+ height: 34px;
43
+ padding: 0;
44
+ border: 1px solid var(--dsw-alias-border-l2);
45
+ background: var(--dsw-alias-bg-layer-1);
46
+ color: var(--dsw-alias-label-secondary);
47
+ border-radius: 8px;
48
+ cursor: pointer;
49
+ font: inherit;
50
+ }
51
+ .tsd-icon-btn:hover {
52
+ color: var(--dsw-alias-label-primary);
53
+ background: var(--dsw-alias-interactive-bg-hover);
54
+ }
55
+ .tsd-spinning svg {
56
+ animation: tsd-spin 0.9s linear infinite;
57
+ }
58
+ @keyframes tsd-spin {
59
+ to { transform: rotate(360deg); }
60
+ }
61
+
62
+ /* ============ 筛选栏 ============ */
63
+ .tsd-filterbar {
64
+ display: flex;
65
+ align-items: center;
66
+ gap: 8px;
67
+ flex-wrap: wrap;
68
+ }
69
+ .tsd-seg-wrap {
70
+ position: relative;
71
+ display: inline-flex;
72
+ }
73
+ .tsd-seg {
74
+ display: inline-flex;
75
+ gap: 2px;
76
+ padding: 4px;
77
+ border-radius: 10px;
78
+ background: color-mix(in srgb, var(--dsw-alias-label-tertiary) 12%, transparent);
79
+ }
80
+ .tsd-seg-btn {
81
+ display: inline-flex;
82
+ align-items: center;
83
+ height: 28px;
84
+ padding: 0 12px;
85
+ border: none;
86
+ background: transparent;
87
+ color: var(--dsw-alias-label-secondary);
88
+ border-radius: 8px;
89
+ font: inherit;
90
+ font-size: 13px;
91
+ line-height: 1;
92
+ cursor: pointer;
93
+ white-space: nowrap;
94
+ }
95
+ .tsd-seg-btn:hover {
96
+ color: var(--dsw-alias-label-primary);
97
+ background: var(--dsw-alias-interactive-bg-hover);
98
+ }
99
+ .tsd-seg-active {
100
+ background: var(--dsw-alias-bg-base);
101
+ color: var(--dsw-alias-brand-primary);
102
+ font-weight: 600;
103
+ box-shadow: var(--dsw-shadow-lv1);
104
+ }
105
+ .tsd-seg-custom {
106
+ max-width: 220px;
107
+ }
108
+ .tsd-seg-custom .tsd-seg-label {
109
+ overflow: hidden;
110
+ text-overflow: ellipsis;
111
+ white-space: nowrap;
112
+ }
113
+ .tsd-seg-custom.tsd-seg-active {
114
+ background: var(--dsw-alias-brand-primary);
115
+ color: var(--dsw-alias-label-primary-inverted, #fff);
116
+ }
117
+ .tsd-seg-custom.tsd-seg-active:hover {
118
+ background: var(--dsw-alias-button-primary-hover);
119
+ }
120
+
121
+ /* ============ 通用按钮 ============ */
122
+ .tsd-btn {
123
+ height: 30px;
124
+ padding: 0 14px;
125
+ border: 1px solid var(--dsw-alias-border-l2);
126
+ background: var(--dsw-alias-bg-layer-1);
127
+ color: var(--dsw-alias-label-primary);
128
+ border-radius: 8px;
129
+ font: inherit;
130
+ font-size: 13px;
131
+ cursor: pointer;
132
+ white-space: nowrap;
133
+ }
134
+ .tsd-btn:hover { background: var(--dsw-alias-interactive-bg-hover); }
135
+ .tsd-btn:disabled { opacity: 0.5; cursor: not-allowed; }
136
+ .tsd-btn-primary {
137
+ background: var(--dsw-alias-button-primary-fill);
138
+ border-color: transparent;
139
+ color: var(--dsw-alias-label-primary-inverted, #fff);
140
+ }
141
+ .tsd-btn-primary:hover { background: var(--dsw-alias-button-primary-hover); }
142
+ .tsd-btn-ghost { background: transparent; }
143
+ .tsd-btn-ghost:hover { background: var(--dsw-alias-interactive-bg-hover); }
144
+
145
+ /* ============ 浮层 Popover ============ */
146
+ .tsd-popover-anchor {
147
+ position: relative;
148
+ display: inline-flex;
149
+ }
150
+ .tsd-popover {
151
+ position: absolute;
152
+ top: calc(100% + 6px);
153
+ left: 0;
154
+ z-index: 40;
155
+ padding: 12px;
156
+ border: 1px solid var(--dsw-alias-border-l2);
157
+ background: var(--dsw-alias-bg-overlay);
158
+ border-radius: 12px;
159
+ box-shadow: var(--dsw-shadow-lv3);
160
+ }
161
+ .tsd-model-popover {
162
+ width: 320px;
163
+ max-width: calc(100vw - 24px);
164
+ }
165
+ .tsd-range-popover {
166
+ width: 300px;
167
+ max-width: calc(100vw - 24px);
168
+ }
169
+ .tsd-popover-title {
170
+ font-size: 14px;
171
+ font-weight: 600;
172
+ color: var(--dsw-alias-label-primary);
173
+ margin: 0 0 10px;
174
+ }
175
+ .tsd-popover-tools {
176
+ display: flex;
177
+ justify-content: space-between;
178
+ margin-bottom: 8px;
179
+ }
180
+ .tsd-link-btn {
181
+ border: none;
182
+ background: none;
183
+ color: var(--dsw-alias-state-business-primary);
184
+ font: inherit;
185
+ font-size: 12px;
186
+ cursor: pointer;
187
+ padding: 2px 4px;
188
+ border-radius: 4px;
189
+ }
190
+ .tsd-link-btn:hover { background: var(--dsw-alias-interactive-bg-hover); }
191
+ .tsd-popover-actions {
192
+ display: flex;
193
+ justify-content: flex-end;
194
+ gap: 8px;
195
+ margin-top: 12px;
196
+ }
197
+ .tsd-popover-note {
198
+ margin: 8px 0 0;
199
+ font-size: 11px;
200
+ color: var(--dsw-alias-label-tertiary);
201
+ }
202
+ .tsd-popover-empty {
203
+ margin: 0;
204
+ padding: 10px 0;
205
+ text-align: center;
206
+ font-size: 12px;
207
+ color: var(--dsw-alias-label-tertiary);
208
+ }
209
+
210
+ /* ============ 模型下拉搜索 ============ */
211
+ .tsd-select-btn {
212
+ display: inline-flex;
213
+ align-items: center;
214
+ gap: 6px;
215
+ min-width: 120px;
216
+ max-width: 260px;
217
+ height: 36px;
218
+ padding: 0 10px;
219
+ border: 1px solid var(--dsw-alias-border-l2);
220
+ background: var(--dsw-alias-bg-layer-1);
221
+ color: var(--dsw-alias-label-primary);
222
+ border-radius: 8px;
223
+ font: inherit;
224
+ font-size: 13px;
225
+ cursor: pointer;
226
+ }
227
+ .tsd-select-btn:hover { border-color: var(--dsw-alias-border-l3); }
228
+ .tsd-select-has { border-color: color-mix(in srgb, var(--dsw-alias-brand-primary) 45%, var(--dsw-alias-border-l2)); }
229
+ .tsd-select-label {
230
+ overflow: hidden;
231
+ text-overflow: ellipsis;
232
+ white-space: nowrap;
233
+ min-width: 0;
234
+ }
235
+ .tsd-chevron {
236
+ flex: none;
237
+ transition: transform var(--ds-transition-duration-fast) var(--ds-ease-in-out);
238
+ }
239
+ .tsd-chevron-open { transform: rotate(180deg); }
240
+ .tsd-search {
241
+ position: relative;
242
+ margin-bottom: 8px;
243
+ }
244
+ .tsd-search-icon {
245
+ position: absolute;
246
+ left: 8px;
247
+ top: 50%;
248
+ transform: translateY(-50%);
249
+ color: var(--dsw-alias-label-tertiary);
250
+ pointer-events: none;
251
+ }
252
+ .tsd-search input {
253
+ box-sizing: border-box;
254
+ width: 100%;
255
+ height: 32px;
256
+ padding: 0 8px 0 28px;
257
+ border: 1px solid var(--dsw-alias-border-l2);
258
+ background: var(--dsw-alias-bg-layer-1);
259
+ color: var(--dsw-alias-label-primary);
260
+ border-radius: 8px;
261
+ font: inherit;
262
+ font-size: 13px;
263
+ outline: none;
264
+ }
265
+ .tsd-search input:focus {
266
+ border-color: var(--dsw-alias-state-business-primary);
267
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-state-business-primary) 18%, transparent);
268
+ }
269
+ .tsd-model-list {
270
+ display: flex;
271
+ flex-direction: column;
272
+ gap: 2px;
273
+ max-height: 240px;
274
+ overflow-y: auto;
275
+ --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
276
+ --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
277
+ }
278
+ .tsd-model-item {
279
+ display: flex;
280
+ align-items: center;
281
+ gap: 8px;
282
+ padding: 5px 6px;
283
+ border-radius: 6px;
284
+ cursor: pointer;
285
+ font-size: 13px;
286
+ color: var(--dsw-alias-label-primary);
287
+ min-width: 0;
288
+ }
289
+ .tsd-model-item:hover { background: var(--dsw-alias-interactive-bg-hover); }
290
+ .tsd-model-item input { margin: 0; accent-color: var(--dsw-alias-brand-primary); }
291
+ .tsd-model-name {
292
+ font-family: var(--ds-font-family-code);
293
+ font-size: 12px;
294
+ overflow: hidden;
295
+ text-overflow: ellipsis;
296
+ white-space: nowrap;
297
+ min-width: 0;
298
+ }
299
+
300
+ /* ============ 自定义日期浮层 ============ */
301
+ .tsd-range-fields {
302
+ display: flex;
303
+ flex-direction: column;
304
+ gap: 10px;
305
+ }
306
+ .tsd-field {
307
+ display: flex;
308
+ flex-direction: column;
309
+ gap: 4px;
310
+ }
311
+ .tsd-field-label {
312
+ font-size: 12px;
313
+ color: var(--dsw-alias-label-secondary);
314
+ }
315
+ .tsd-field input {
316
+ box-sizing: border-box;
317
+ width: 100%;
318
+ height: 32px;
319
+ padding: 0 8px;
320
+ border: 1px solid var(--dsw-alias-border-l2);
321
+ background: var(--dsw-alias-bg-layer-1);
322
+ color: var(--dsw-alias-label-primary);
323
+ border-radius: 8px;
324
+ font: inherit;
325
+ font-size: 13px;
326
+ outline: none;
327
+ }
328
+ .tsd-field input:focus {
329
+ border-color: var(--dsw-alias-state-business-primary);
330
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-state-business-primary) 18%, transparent);
331
+ }
332
+ .tsd-field-error {
333
+ margin: 6px 0 0;
334
+ font-size: 12px;
335
+ color: var(--dsw-alias-state-error-primary);
336
+ }
337
+ .tsd-field-hint {
338
+ margin: 6px 0 0;
339
+ font-size: 11px;
340
+ color: var(--dsw-alias-label-tertiary);
341
+ }
342
+
343
+ /* ============ 汇总指标卡 ============ */
344
+ .tsd-cards {
345
+ display: grid;
346
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
347
+ gap: 10px;
348
+ }
349
+ .tsd-card {
350
+ min-width: 0;
351
+ padding: 14px 16px;
352
+ border: 1px solid var(--dsw-alias-border-l2);
353
+ background: var(--dsw-alias-bg-layer-3);
354
+ border-radius: 12px;
355
+ box-shadow: var(--dsw-shadow-lv1);
356
+ }
357
+ .tsd-card-head {
358
+ display: flex;
359
+ align-items: center;
360
+ gap: 6px;
361
+ }
362
+ .tsd-card-icon {
363
+ display: inline-flex;
364
+ }
365
+ .tsd-card-label {
366
+ font-size: 12px;
367
+ color: var(--dsw-alias-label-secondary);
368
+ overflow: hidden;
369
+ text-overflow: ellipsis;
370
+ white-space: nowrap;
371
+ }
372
+ .tsd-card-value {
373
+ margin-top: 8px;
374
+ font-size: 20px;
375
+ font-weight: 700;
376
+ letter-spacing: -0.01em;
377
+ color: var(--dsw-alias-label-primary);
378
+ font-variant-numeric: tabular-nums;
379
+ overflow: hidden;
380
+ text-overflow: ellipsis;
381
+ white-space: nowrap;
382
+ }
383
+ .tsd-card-sub {
384
+ margin-top: 4px;
385
+ font-size: 12px;
386
+ color: var(--dsw-alias-label-tertiary);
387
+ }
388
+ .tsd-card-note {
389
+ margin-top: 4px;
390
+ font-size: 11px;
391
+ color: var(--dsw-alias-state-warn-primary);
392
+ }
393
+
394
+ /* ============ 卡片头部(图表 / 表格共用) ============ */
395
+ .tsd-card-header {
396
+ display: flex;
397
+ align-items: center;
398
+ justify-content: space-between;
399
+ gap: 8px;
400
+ margin-bottom: 12px;
401
+ }
402
+ .tsd-card-title {
403
+ margin: 0;
404
+ font-size: 15px;
405
+ font-weight: 600;
406
+ color: var(--dsw-alias-label-primary);
407
+ }
408
+ .tsd-card-tag {
409
+ font-size: 12px;
410
+ color: var(--dsw-alias-label-tertiary);
411
+ font-variant-numeric: tabular-nums;
412
+ white-space: nowrap;
413
+ overflow: hidden;
414
+ text-overflow: ellipsis;
415
+ }
416
+
417
+ /* ============ 每日用量柱状图 ============ */
418
+ .tsd-chart-card { padding: 14px 16px 10px; }
419
+ .tsd-legend {
420
+ display: flex;
421
+ gap: 14px;
422
+ margin-bottom: 8px;
423
+ }
424
+ .tsd-legend-item {
425
+ display: inline-flex;
426
+ align-items: center;
427
+ gap: 6px;
428
+ font-size: 12px;
429
+ color: var(--dsw-alias-label-secondary);
430
+ }
431
+ .tsd-legend-dot,
432
+ .tsd-tooltip-dot {
433
+ display: inline-block;
434
+ width: 10px;
435
+ height: 10px;
436
+ border-radius: 2px;
437
+ flex: none;
438
+ }
439
+ .tsd-legend-in { background: var(--dsw-static-deepseek-500); }
440
+ .tsd-legend-out { background: var(--dsw-static-green-500); }
441
+
442
+ .tsd-chart {
443
+ position: relative;
444
+ display: flex;
445
+ align-items: stretch;
446
+ gap: 2px;
447
+ height: 240px;
448
+ padding: 0 4px;
449
+ }
450
+ .tsd-chart-col {
451
+ flex: 1;
452
+ min-width: 0;
453
+ display: flex;
454
+ flex-direction: column;
455
+ align-items: center;
456
+ border-radius: 4px;
457
+ cursor: default;
458
+ transition: opacity var(--ds-transition-duration-fast) var(--ds-ease-in-out);
459
+ }
460
+ .tsd-chart-col:focus-visible {
461
+ outline: 2px solid var(--dsw-alias-state-business-primary);
462
+ outline-offset: 2px;
463
+ }
464
+ .tsd-chart:hover .tsd-chart-col { opacity: 0.4; }
465
+ .tsd-chart:hover .tsd-chart-col:hover,
466
+ .tsd-chart:focus-within .tsd-chart-col:focus { opacity: 1; }
467
+
468
+ .tsd-chart-plot {
469
+ flex: 1;
470
+ width: 100%;
471
+ display: flex;
472
+ align-items: flex-end;
473
+ justify-content: center;
474
+ border-bottom: 1px solid var(--dsw-alias-border-l2);
475
+ background-image: linear-gradient(to top, var(--dsw-alias-border-l1) 1px, transparent 1px);
476
+ background-size: 100% 25%;
477
+ background-repeat: no-repeat;
478
+ }
479
+ .tsd-chart-stack {
480
+ width: 62%;
481
+ height: 100%;
482
+ display: flex;
483
+ flex-direction: column;
484
+ justify-content: flex-end;
485
+ }
486
+ .tsd-chart-seg {
487
+ width: 100%;
488
+ }
489
+ .tsd-seg-in {
490
+ background: var(--dsw-static-deepseek-500);
491
+ }
492
+ .tsd-seg-out {
493
+ background: var(--dsw-static-green-500);
494
+ border-radius: 3px 3px 0 0;
495
+ }
496
+ .tsd-chart-label {
497
+ height: 14px;
498
+ line-height: 14px;
499
+ margin-top: 6px;
500
+ font-size: 11px;
501
+ color: var(--dsw-alias-label-tertiary);
502
+ font-variant-numeric: tabular-nums;
503
+ white-space: nowrap;
504
+ }
505
+ .tsd-chart-label-hidden { visibility: hidden; }
506
+
507
+ /* tooltip */
508
+ .tsd-tooltip {
509
+ position: absolute;
510
+ top: 10px;
511
+ transform: translateX(-50%);
512
+ z-index: 6;
513
+ min-width: 156px;
514
+ padding: 8px 10px;
515
+ border: 1px solid var(--dsw-alias-border-l2);
516
+ background: var(--dsw-alias-bg-overlay);
517
+ backdrop-filter: blur(8px);
518
+ border-radius: 8px;
519
+ box-shadow: var(--dsw-shadow-lv3);
520
+ pointer-events: none;
521
+ }
522
+ .tsd-tooltip-date {
523
+ margin-bottom: 6px;
524
+ font-size: 12px;
525
+ font-weight: 600;
526
+ color: var(--dsw-alias-label-primary);
527
+ }
528
+ .tsd-tooltip-row {
529
+ display: flex;
530
+ align-items: center;
531
+ gap: 6px;
532
+ margin: 2px 0;
533
+ font-size: 12px;
534
+ color: var(--dsw-alias-label-secondary);
535
+ font-variant-numeric: tabular-nums;
536
+ }
537
+ .tsd-tooltip-val {
538
+ margin-left: auto;
539
+ padding-left: 12px;
540
+ color: var(--dsw-alias-label-primary);
541
+ }
542
+ .tsd-tooltip-total {
543
+ display: flex;
544
+ justify-content: space-between;
545
+ margin-top: 6px;
546
+ padding-top: 6px;
547
+ border-top: 1px solid var(--dsw-alias-border-l2);
548
+ font-size: 12px;
549
+ font-weight: 600;
550
+ color: var(--dsw-alias-label-primary);
551
+ font-variant-numeric: tabular-nums;
552
+ }
553
+
554
+ /* ============ 按模型明细表 ============ */
555
+ .tsd-table-card { padding: 0; }
556
+ .tsd-table-card .tsd-card-header { padding: 14px 16px 0; }
557
+ .tsd-table-wrap {
558
+ overflow-x: auto;
559
+ --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
560
+ --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
561
+ }
562
+ .tsd-table {
563
+ width: 100%;
564
+ border-collapse: collapse;
565
+ font-size: 13px;
566
+ }
567
+ .tsd-th {
568
+ padding: 10px 12px;
569
+ text-align: left;
570
+ font-size: 12px;
571
+ font-weight: 500;
572
+ color: var(--dsw-alias-label-secondary);
573
+ border-bottom: 1px solid var(--dsw-alias-border-l2);
574
+ white-space: nowrap;
575
+ }
576
+ .tsd-th-num { text-align: right; }
577
+ .tsd-sort-btn {
578
+ display: inline-flex;
579
+ align-items: center;
580
+ gap: 2px;
581
+ padding: 0;
582
+ border: none;
583
+ background: none;
584
+ font: inherit;
585
+ font-size: 12px;
586
+ color: inherit;
587
+ cursor: pointer;
588
+ }
589
+ .tsd-sort-btn:hover { color: var(--dsw-alias-label-primary); }
590
+ .tsd-sort-active { color: var(--dsw-alias-brand-primary); }
591
+ .tsd-sort-arrow {
592
+ font-size: 10px;
593
+ line-height: 1;
594
+ }
595
+ .tsd-tr:hover { background: var(--dsw-alias-interactive-bg-hover); }
596
+ .tsd-td {
597
+ padding: 9px 12px;
598
+ border-bottom: 1px solid var(--dsw-alias-border-l1);
599
+ color: var(--dsw-alias-label-secondary);
600
+ white-space: nowrap;
601
+ }
602
+ .tsd-td-model { max-width: 240px; }
603
+ .tsd-model-mono {
604
+ display: block;
605
+ max-width: 220px;
606
+ overflow: hidden;
607
+ text-overflow: ellipsis;
608
+ white-space: nowrap;
609
+ font-family: var(--ds-font-family-code);
610
+ font-size: 12px;
611
+ color: var(--dsw-alias-label-primary);
612
+ }
613
+ .tsd-num {
614
+ text-align: right;
615
+ font-variant-numeric: tabular-nums;
616
+ }
617
+ .tsd-total {
618
+ font-weight: 600;
619
+ color: var(--dsw-alias-label-primary);
620
+ }
621
+ .tsd-unpriced {
622
+ color: var(--dsw-alias-label-tertiary);
623
+ font-style: italic;
624
+ }
625
+ .tsd-td-ratio { text-align: right; }
626
+ .tsd-ratio {
627
+ display: inline-flex;
628
+ align-items: center;
629
+ justify-content: flex-end;
630
+ gap: 8px;
631
+ }
632
+ .tsd-ratio-bar {
633
+ width: 60px;
634
+ height: 6px;
635
+ border-radius: 3px;
636
+ background: var(--dsw-alias-bg-layer-1);
637
+ overflow: hidden;
638
+ flex: none;
639
+ }
640
+ .tsd-ratio-fill {
641
+ height: 100%;
642
+ border-radius: 3px;
643
+ background: linear-gradient(90deg, var(--dsw-static-deepseek-500), color-mix(in srgb, var(--dsw-static-deepseek-500) 55%, var(--dsw-static-deepseek-300)));
644
+ }
645
+ .tsd-ratio-pct {
646
+ min-width: 42px;
647
+ text-align: right;
648
+ font-size: 12px;
649
+ color: var(--dsw-alias-label-secondary);
650
+ font-variant-numeric: tabular-nums;
651
+ }
652
+
653
+ /* ============ 定价配置 ============ */
654
+ .tsd-details {
655
+ border: 1px solid var(--dsw-alias-border-l2);
656
+ background: var(--dsw-alias-bg-layer-3);
657
+ border-radius: 12px;
658
+ box-shadow: var(--dsw-shadow-lv1);
659
+ overflow: hidden;
660
+ }
661
+ .tsd-details-summary {
662
+ display: flex;
663
+ align-items: center;
664
+ justify-content: space-between;
665
+ gap: 8px;
666
+ padding: 14px 16px;
667
+ cursor: pointer;
668
+ font-size: 14px;
669
+ font-weight: 600;
670
+ color: var(--dsw-alias-label-primary);
671
+ list-style: none;
672
+ user-select: none;
673
+ }
674
+ .tsd-details-summary::-webkit-details-marker { display: none; }
675
+ .tsd-details-summary:hover { background: var(--dsw-alias-interactive-bg-hover); }
676
+ .tsd-details-count {
677
+ font-size: 12px;
678
+ font-weight: 400;
679
+ color: var(--dsw-alias-label-tertiary);
680
+ }
681
+ .tsd-details-body {
682
+ padding: 0 16px 14px;
683
+ border-top: 1px solid var(--dsw-alias-border-l1);
684
+ overflow-x: auto;
685
+ }
686
+ .tsd-price-head,
687
+ .tsd-price-row {
688
+ display: grid;
689
+ grid-template-columns: minmax(120px, 1.4fr) repeat(4, minmax(72px, 1fr)) minmax(64px, auto);
690
+ gap: 8px;
691
+ align-items: center;
692
+ min-width: 560px;
693
+ }
694
+ .tsd-price-head {
695
+ padding: 10px 0 6px;
696
+ }
697
+ .tsd-price-col {
698
+ font-size: 11px;
699
+ color: var(--dsw-alias-label-tertiary);
700
+ }
701
+ .tsd-price-row {
702
+ padding: 6px 0;
703
+ border-top: 1px solid var(--dsw-alias-border-l1);
704
+ }
705
+ .tsd-price-model-name {
706
+ font-family: var(--ds-font-family-code);
707
+ font-size: 12px;
708
+ color: var(--dsw-alias-label-primary);
709
+ overflow: hidden;
710
+ text-overflow: ellipsis;
711
+ white-space: nowrap;
712
+ min-width: 0;
713
+ }
714
+ .tsd-price-row input {
715
+ box-sizing: border-box;
716
+ width: 100%;
717
+ height: 28px;
718
+ padding: 0 6px;
719
+ border: 1px solid var(--dsw-alias-border-l2);
720
+ background: var(--dsw-alias-bg-layer-1);
721
+ color: var(--dsw-alias-label-primary);
722
+ border-radius: 6px;
723
+ font: inherit;
724
+ font-size: 12px;
725
+ font-variant-numeric: tabular-nums;
726
+ outline: none;
727
+ }
728
+ .tsd-price-row input:focus {
729
+ border-color: var(--dsw-alias-state-business-primary);
730
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-state-business-primary) 18%, transparent);
731
+ }
732
+ .tsd-price-save {
733
+ height: 28px;
734
+ padding: 0 10px;
735
+ font-size: 12px;
736
+ }
737
+ .tsd-price-saved,
738
+ .tsd-price-save[data-saved=true] {
739
+ color: var(--dsw-alias-state-success-primary);
740
+ border-color: color-mix(in srgb, var(--dsw-alias-state-success-primary) 40%, transparent);
741
+ }
742
+ .tsd-price-err {
743
+ grid-column: 1 / -1;
744
+ margin: 2px 0 0;
745
+ font-size: 11px;
746
+ color: var(--dsw-alias-state-error-primary);
747
+ }
748
+ .tsd-price-note {
749
+ margin: 10px 0 0;
750
+ font-size: 11px;
751
+ color: var(--dsw-alias-label-tertiary);
752
+ }
753
+
754
+ /* ============ 三态:空 / 错误 / 加载 ============ */
755
+ .tsd-empty {
756
+ display: flex;
757
+ flex-direction: column;
758
+ align-items: center;
759
+ gap: 6px;
760
+ padding: 40px 16px;
761
+ text-align: center;
762
+ }
763
+ .tsd-empty-icon {
764
+ color: var(--dsw-alias-label-tertiary);
765
+ margin-bottom: 4px;
766
+ }
767
+ .tsd-empty-title {
768
+ margin: 0;
769
+ font-size: 15px;
770
+ font-weight: 600;
771
+ color: var(--dsw-alias-label-primary);
772
+ }
773
+ .tsd-empty-desc {
774
+ margin: 0;
775
+ font-size: 13px;
776
+ color: var(--dsw-alias-label-secondary);
777
+ }
778
+ .tsd-empty-block {
779
+ padding: 24px;
780
+ text-align: center;
781
+ font-size: 13px;
782
+ color: var(--dsw-alias-label-tertiary);
783
+ }
784
+
785
+ .tsd-error {
786
+ display: flex;
787
+ align-items: center;
788
+ gap: 12px;
789
+ padding: 20px 16px;
790
+ border-color: color-mix(in srgb, var(--dsw-alias-state-error-primary) 40%, transparent);
791
+ background: color-mix(in srgb, var(--dsw-alias-state-error-secondary) 30%, var(--dsw-alias-bg-layer-3));
792
+ }
793
+ .tsd-error-icon {
794
+ flex: none;
795
+ color: var(--dsw-alias-state-error-primary);
796
+ }
797
+ .tsd-error-text {
798
+ flex: 1;
799
+ min-width: 0;
800
+ }
801
+ .tsd-error-title {
802
+ margin: 0;
803
+ font-size: 14px;
804
+ font-weight: 600;
805
+ color: var(--dsw-alias-label-primary);
806
+ }
807
+ .tsd-error-detail {
808
+ margin: 2px 0 0;
809
+ font-size: 12px;
810
+ color: var(--dsw-alias-label-secondary);
811
+ overflow: hidden;
812
+ text-overflow: ellipsis;
813
+ white-space: nowrap;
814
+ }
815
+
816
+ .tsd-alert-banner {
817
+ display: flex;
818
+ align-items: center;
819
+ gap: 10px;
820
+ padding: 10px 14px;
821
+ border: 1px solid color-mix(in srgb, var(--dsw-alias-state-error-primary) 40%, transparent);
822
+ border-radius: 10px;
823
+ background: color-mix(in srgb, var(--dsw-alias-state-error-secondary) 30%, var(--dsw-alias-bg-layer-3));
824
+ color: var(--dsw-alias-state-error-primary);
825
+ font-size: 13px;
826
+ }
827
+
828
+ .tsd-loading {
829
+ display: flex;
830
+ flex-direction: column;
831
+ gap: 16px;
832
+ }
833
+ .tsd-card-skeleton { min-height: 84px; }
834
+ .tsd-skeleton {
835
+ background: var(--dsw-alias-bg-skeleton);
836
+ border-radius: 6px;
837
+ animation: tsd-pulse 1.6s var(--ds-ease-in-out) infinite;
838
+ }
839
+ .tsd-skeleton-row {
840
+ height: 14px;
841
+ margin: 12px 0;
842
+ background: var(--dsw-alias-bg-skeleton);
843
+ border-radius: 4px;
844
+ animation: tsd-pulse 1.6s var(--ds-ease-in-out) infinite;
845
+ }
846
+ @keyframes tsd-pulse {
847
+ 0%, 100% { opacity: 1; }
848
+ 50% { opacity: 0.45; }
849
+ }
850
+
851
+ /* ============ 刷新时的内容态 ============ */
852
+ .tsd-content {
853
+ display: flex;
854
+ flex-direction: column;
855
+ gap: 16px;
856
+ transition: opacity var(--ds-transition-duration) var(--ds-ease-in-out);
857
+ }
858
+ .tsd-content[data-busy=true] { opacity: 0.55; }
859
+
860
+ /* ============ 无障碍 ============ */
861
+ .tsd-visually-hidden {
862
+ position: absolute;
863
+ width: 1px;
864
+ height: 1px;
865
+ padding: 0;
866
+ margin: -1px;
867
+ overflow: hidden;
868
+ clip: rect(0 0 0 0);
869
+ white-space: nowrap;
870
+ border: 0;
871
+ }
872
+ .tsd-icon {
873
+ flex: none;
874
+ }
875
+ .tsd-seg-btn:focus-visible,
876
+ .tsd-select-btn:focus-visible,
877
+ .tsd-btn:focus-visible,
878
+ .tsd-icon-btn:focus-visible,
879
+ .tsd-link-btn:focus-visible,
880
+ .tsd-sort-btn:focus-visible,
881
+ .tsd-details-summary:focus-visible {
882
+ outline: 2px solid var(--dsw-alias-state-business-primary);
883
+ outline-offset: 2px;
884
+ }
885
+ `;