@k-table/report 1.0.10 → 1.0.12

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.
package/dist/styles.css CHANGED
@@ -1,678 +1,724 @@
1
- [data-kt-root] {
2
- --kt-font: 14px;
3
- --kt-space: 8px;
4
- --kt-primary: #165dff;
5
- --kt-success: #00b42a;
6
- --kt-warning: #ff7d00;
7
- --kt-error: #f53f3f;
8
- --kt-primary-soft: rgba(22, 93, 255, 0.12);
9
- --kt-text: #1d3a5c;
10
- --kt-text-secondary: #4e6a8a;
11
- --kt-header-bg: #f3f7fd;
12
- --kt-border: #c5d6ee;
13
- --kt-page-bg: #e8f0fb;
14
- --kt-forms-page-bg: #e8f0fb;
15
- --kt-forms-header-bg: #f3f7fd;
16
- --kt-forms-border: #c5d6ee;
17
- --kt-forms-text: #1d3a5c;
18
- --kt-forms-text-secondary: #4e6a8a;
19
- --kt-forms-chrome-bar: #dce8f6;
20
- --kt-forms-chrome-tab: #d0deef;
21
- --kt-forms-canvas-pad: #d4e4f5;
22
- --kt-forms-preview-host: #dce8f6;
23
- --kt-paper-bg: #fff;
24
- --kt-canvas-header: #f3f3f3;
25
- --kt-canvas-header-grid: #c4c4c4;
26
- --kt-canvas-header-text: #333333;
27
- box-sizing: border-box;
28
- height: 100%;
29
- min-height: 0;
30
- display: flex;
31
- flex-direction: column;
32
- }
33
-
34
- /* 只有 kt 产品界面(surface)才接管文字/背景与 antd 观感;root 只发 --kt-* 变量。
35
- 否则 Provider 包住整个宿主应用时,--ant-* 覆盖与 .ant-* 规则会污染宿主自己的 antd 页面
36
- (260915 lims 委托单输入框蓝底事故)。surface 可能 portal 到 body(宿主 Arco Modal),
37
- 故选择器不挂在 [data-kt-root] 下。 */
38
- [data-kt-surface] {
39
- font-size: var(--kt-font);
40
- color: var(--kt-forms-text, #1d3a5c);
41
- background: var(--kt-forms-page-bg, #e8f0fb);
42
- --ant-color-text: var(--kt-forms-text, #1d3a5c);
43
- --ant-color-text-secondary: var(--kt-forms-text-secondary, #4e6a8a);
44
- --ant-color-bg-container: var(--kt-forms-chrome-tab, #d0deef);
45
- --ant-color-bg-elevated: var(--kt-forms-chrome-tab, #f3f7fd);
46
- --ant-color-border: var(--kt-forms-border, #c5d6ee);
47
- }
48
-
49
- html:has([data-kt-root]),
50
- html:has([data-kt-root]) body {
51
- height: 100%;
52
- }
53
-
54
- /* kt 的 antd 作用域(KtAntdScope)用 <App component={false}>,不产生 .ant-app DOM;
55
- 这里不再写任何 .ant-app 规则,避免影响宿主自己的 antd App 布局。 */
56
-
57
- /* kt 自有类(kt-* / data-kt-paper)不挂 [data-kt-root]:界面可能被宿主弹窗 portal 到 body,
58
- 变量由 surface 根节点内联带入(useKtSurfaceProps),选择器保持位置无关。 */
59
- .kt-fill-page,
60
- .kt-fill-layout,
61
- .kt-report-designer-page {
62
- flex: 1 1 auto;
63
- min-height: 0;
64
- height: 100%;
65
- }
66
-
67
- [data-kt-root][data-kt-type="sm"] { --kt-font: 12px; }
68
- [data-kt-root][data-kt-type="md"] { --kt-font: 14px; }
69
- [data-kt-root][data-kt-type="lg"] { --kt-font: 16px; }
70
- [data-kt-root][data-kt-density="compact"] { --kt-space: 4px; }
71
- [data-kt-root][data-kt-density="comfortable"] { --kt-space: 8px; }
72
- [data-kt-root][data-kt-density="spacious"] { --kt-space: 12px; }
73
- [data-kt-root][data-kt-scheme="dark"] {
74
- color-scheme: dark;
75
- --kt-canvas-header: #1f1f1f;
76
- --kt-canvas-header-grid: #424242;
77
- --kt-canvas-header-text: rgba(255, 255, 255, 0.88);
78
- }
79
-
80
- [data-kt-root] .kt-brand {
81
- display: flex;
82
- align-items: center;
83
- flex-wrap: wrap;
84
- gap: 8px 12px;
85
- box-sizing: border-box;
86
- min-height: 40px;
87
- padding: 6px 12px;
88
- line-height: 1;
89
- background: var(--kt-primary);
90
- color: #fff;
91
- }
92
-
93
- [data-kt-root] .kt-brand > strong {
94
- flex-shrink: 0;
95
- font-size: 14px;
96
- line-height: 28px;
97
- }
98
-
99
- [data-kt-root] .kt-brand .kt-theme-bar {
100
- margin-left: auto;
101
- }
102
-
103
- .kt-paper-island {
104
- background: var(--kt-forms-canvas-pad, var(--kt-page-bg, #d4e4f5));
105
- color: var(--kt-forms-text, var(--kt-text, #1d3a5c));
106
- }
107
-
108
- .kt-paper-island[data-tone="preview"],
109
- .kt-preview-stage {
110
- background: var(--kt-forms-preview-host, var(--kt-page-bg, #dce8f6));
111
- }
112
-
113
- [data-kt-paper],
114
- .kt-report-page,
115
- .klab-fill-sheet {
116
- color-scheme: light;
117
- background: var(--kt-paper-bg, #fff);
118
- color: #1d2129;
119
- --ant-color-text: #1d2129;
120
- --ant-color-text-secondary: #4e5969;
121
- --ant-color-bg-container: #fff;
122
- --ant-color-bg-elevated: #fff;
123
- --ant-color-border: #d9d9d9;
124
- }
125
-
126
- .kt-chrome {
127
- display: flex;
128
- align-items: center;
129
- flex-wrap: wrap;
130
- gap: 8px;
131
- box-sizing: border-box;
132
- min-height: 40px;
133
- padding: 6px 12px;
134
- line-height: 1;
135
- border-bottom: 1px solid var(--kt-forms-border, var(--kt-border, #c5d6ee));
136
- background: var(--kt-forms-chrome-bar, var(--kt-header-bg, #dce8f6));
137
- color: var(--kt-forms-text, var(--kt-text, #1d3a5c));
138
- }
139
-
140
- /* 铬层不跟 density 的 32/36 控件高走;疏密只影响工作区。 */
141
- .kt-chrome .ant-btn {
142
- height: 28px;
143
- padding-inline: 10px;
144
- font-size: 12px;
145
- }
146
-
147
- .kt-chrome .ant-btn.ant-btn-icon-only {
148
- width: 28px;
149
- padding-inline: 0;
150
- }
151
-
152
- .kt-chrome .ant-select {
153
- font-size: 12px;
154
- }
155
-
156
- .kt-chrome .ant-select-selector {
157
- min-height: 28px !important;
158
- }
159
-
160
- .kt-report-print-hide .ant-btn {
161
- height: 28px;
162
- padding-inline: 10px;
163
- font-size: 12px;
164
- }
165
-
166
- .kt-chrome-sub {
167
- background: var(--kt-forms-header-bg, var(--kt-header-bg, #f3f7fd));
168
- border-bottom: 1px solid var(--kt-forms-border, var(--kt-border, #c5d6ee));
169
- color: var(--kt-forms-text, var(--kt-text, #1d3a5c));
170
- }
171
-
172
- .kt-chrome-tab {
173
- background: var(--kt-forms-chrome-tab, #d0deef);
174
- border: 1px solid var(--kt-forms-border, #c5d6ee);
175
- color: var(--kt-forms-text-secondary, #4e6a8a);
176
- }
177
-
178
- .kt-workspace {
179
- min-height: 480px;
180
- background: var(--kt-forms-canvas-pad, var(--kt-page-bg, #d4e4f5));
181
- }
182
-
183
- [data-kt-root] .kt-theme-bar {
184
- display: flex;
185
- flex-wrap: nowrap;
186
- align-items: center;
187
- gap: 2px;
188
- }
189
-
190
- /* 深蓝品牌条上的两个图标按钮:白字、hover 微亮 */
191
- [data-kt-root] .kt-theme-bar--on-primary .ant-btn-text {
192
- color: rgba(255, 255, 255, 0.92);
193
- }
194
-
195
- [data-kt-root] .kt-theme-bar--on-primary .ant-btn-text:hover {
196
- color: #fff !important;
197
- background: rgba(255, 255, 255, 0.16) !important;
198
- }
199
-
200
- /* 浮层常挂到 body,选择器不能只写在 [data-kt-root] 下。 */
201
- .kt-theme-palette {
202
- display: flex;
203
- flex-direction: column;
204
- gap: 10px;
205
- width: 280px;
206
- }
207
-
208
- .kt-theme-palette__cap {
209
- display: block;
210
- font-size: 12px;
211
- line-height: 1;
212
- }
213
-
214
- .kt-theme-palette__row {
215
- display: flex;
216
- align-items: center;
217
- justify-content: space-between;
218
- gap: 8px;
219
- }
220
-
221
- .kt-theme-palette__row .kt-theme-palette__cap {
222
- flex-shrink: 0;
223
- }
224
-
225
- .kt-swatch-grid {
226
- display: grid;
227
- grid-template-columns: 1fr 1fr;
228
- gap: 8px 12px;
229
- }
230
-
231
- .kt-swatch {
232
- display: flex;
233
- align-items: center;
234
- justify-content: space-between;
235
- gap: 8px;
236
- min-width: 0;
237
- }
238
-
239
- .kt-swatch-label {
240
- font-size: 12px;
241
- line-height: 1;
242
- color: var(--kt-forms-text-secondary, #4e5969);
243
- flex-shrink: 0;
244
- }
245
-
246
- .kt-swatch-chip {
247
- position: relative;
248
- display: block;
249
- width: 36px;
250
- height: 20px;
251
- border-radius: 4px;
252
- border: 1px solid var(--kt-forms-border, #d0d5dd);
253
- box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
254
- overflow: hidden;
255
- flex-shrink: 0;
256
- }
257
-
258
- .kt-swatch-chip input[type="color"] {
259
- position: absolute;
260
- inset: -8px;
261
- width: calc(100% + 16px);
262
- height: calc(100% + 16px);
263
- padding: 0;
264
- border: none;
265
- opacity: 0;
266
- cursor: pointer;
267
- }
268
-
269
- /* surface 根节点自带 data-kt-style(useKtSurfaceProps),portal 到 body 也能命中 */
270
- [data-kt-surface][data-kt-style="arco"] .ant-btn,
271
- [data-kt-surface][data-kt-style="arco"] .ant-input,
272
- [data-kt-surface][data-kt-style="arco"] .ant-input-affix-wrapper,
273
- [data-kt-surface][data-kt-style="arco"] .ant-select-selector,
274
- [data-kt-surface][data-kt-style="arco"] .ant-radio-button-wrapper {
275
- border-radius: 2px;
276
- }
277
-
278
- /* 铬层控件跟主题变量(含宿主插槽的另一份 antd);纸面内再锁浅色。
279
- 作用域限 kt 产品界面(data-kt-surface),不碰宿主自己的 antd 控件。 */
280
- [data-kt-surface] .ant-input,
281
- [data-kt-surface] .ant-input-outlined,
282
- [data-kt-surface] .ant-input-affix-wrapper,
283
- [data-kt-surface] textarea.ant-input,
284
- [data-kt-surface] .ant-picker,
285
- [data-kt-surface] .ant-picker-outlined,
286
- [data-kt-surface] .ant-select-selector,
287
- [data-kt-surface] .ant-input-number,
288
- [data-kt-surface] .ant-input-number-outlined,
289
- [data-kt-surface] .ant-btn-default {
290
- background: var(--kt-forms-chrome-tab, var(--kt-forms-header-bg)) !important;
291
- color: var(--kt-forms-text, var(--kt-text)) !important;
292
- border-color: var(--kt-forms-border, var(--kt-border)) !important;
293
- }
294
-
295
- [data-kt-surface] .ant-select-auto-complete .ant-select-selector,
296
- [data-kt-surface] .ant-select-selection-search-input,
297
- [data-kt-surface] .ant-select-selection-search input,
298
- [data-kt-surface] .ant-picker-input > input,
299
- [data-kt-surface] .ant-picker-input input {
300
- background: transparent !important;
301
- color: var(--kt-forms-text, var(--kt-text)) !important;
302
- }
303
-
304
- [data-kt-surface] .ant-select-auto-complete .ant-select-selector {
305
- background: var(--kt-forms-chrome-tab, var(--kt-forms-header-bg)) !important;
306
- }
307
-
308
- [data-kt-surface] .ant-input::placeholder,
309
- [data-kt-surface] .ant-input-outlined::placeholder,
310
- [data-kt-surface] .ant-select-selection-placeholder,
311
- [data-kt-surface] .ant-select-selection-search-input::placeholder,
312
- [data-kt-surface] .ant-picker-input > input::placeholder,
313
- [data-kt-surface] .ant-picker-input input::placeholder {
314
- color: var(--kt-forms-text-secondary, var(--kt-text-secondary)) !important;
315
- }
316
-
317
- [data-kt-surface] .ant-select-selection-item,
318
- [data-kt-surface] .ant-select-arrow,
319
- [data-kt-surface] .ant-select-clear,
320
- [data-kt-surface] .ant-picker-suffix,
321
- [data-kt-surface] .ant-picker-separator,
322
- [data-kt-surface] .ant-picker-clear {
323
- color: var(--kt-forms-text, var(--kt-text)) !important;
324
- }
325
-
326
- [data-kt-surface] .ant-typography,
327
- [data-kt-surface] .ant-typography h1,
328
- [data-kt-surface] .ant-typography h2,
329
- [data-kt-surface] .ant-typography h3,
330
- [data-kt-surface] .ant-typography h4,
331
- [data-kt-surface] .ant-typography h5,
332
- [data-kt-surface] .ant-form-item-label > label {
333
- color: var(--kt-forms-text, var(--kt-text)) !important;
334
- }
335
-
336
- .kt-chrome-meta,
337
- [data-kt-surface] .ant-typography-secondary.kt-chrome-meta {
338
- color: var(--kt-forms-text-secondary, var(--kt-text-secondary, #4e6a8a)) !important;
339
- }
340
-
341
- [data-kt-surface] .ant-typography-secondary,
342
- [data-kt-surface] .ant-typography.ant-typography-secondary {
343
- color: var(--kt-forms-text-secondary, var(--kt-text-secondary)) !important;
344
- }
345
-
346
- [data-kt-surface] .ant-btn-text:not(.ant-btn-dangerous):not(.ant-btn-primary) {
347
- color: var(--kt-forms-text, var(--kt-text)) !important;
348
- }
349
-
350
- [data-kt-surface] .ant-btn-link:not(.ant-btn-dangerous) {
351
- color: var(--kt-primary) !important;
352
- }
353
-
354
- [data-kt-paper] .ant-input,
355
- [data-kt-paper] .ant-input-outlined,
356
- [data-kt-paper] .ant-input-affix-wrapper,
357
- [data-kt-paper] textarea.ant-input,
358
- [data-kt-paper] .ant-picker,
359
- [data-kt-paper] .ant-select-selector,
360
- [data-kt-paper] .ant-input-number,
361
- [data-kt-paper] .ant-btn-default,
362
- .kt-report-page .ant-input,
363
- .kt-report-page .ant-select-selector,
364
- .klab-fill-sheet .ant-input,
365
- .klab-fill-sheet .ant-input-outlined,
366
- .klab-fill-sheet .ant-input-affix-wrapper,
367
- .klab-fill-sheet textarea.ant-input,
368
- .klab-fill-sheet .ant-select-selector,
369
- .klab-fill-sheet .ant-btn-default {
370
- background: var(--kt-paper-bg, #fff) !important;
371
- color: #1d2129 !important;
372
- border-color: #d9d9d9 !important;
373
- }
374
-
375
- [data-kt-paper] .ant-select-selection-item,
376
- [data-kt-paper] .ant-select-arrow,
377
- [data-kt-paper] .ant-select-selection-search-input,
378
- [data-kt-paper] .ant-picker-input > input,
379
- .klab-fill-sheet .ant-select-selection-item,
380
- .klab-fill-sheet .ant-select-arrow,
381
- .klab-fill-sheet .ant-select-selection-search-input {
382
- color: #1d2129 !important;
383
- }
384
-
385
- [data-kt-paper] .ant-typography,
386
- .kt-report-page .ant-typography,
387
- .klab-fill-sheet .ant-typography {
388
- color: #1d2129 !important;
389
- }
390
-
391
- [data-kt-paper] .ant-typography-secondary,
392
- .klab-fill-sheet .ant-typography-secondary {
393
- color: #4e5969 !important;
394
- }
395
-
396
- [data-kt-paper] .ant-input::placeholder,
397
- .klab-fill-sheet .ant-input::placeholder,
398
- .klab-fill-sheet .ant-select-selection-placeholder {
399
- color: #8c8c8c !important;
400
- }
401
-
402
- .kt-preview-stage {
403
- box-sizing: border-box;
404
- display: flex;
405
- flex-direction: column;
406
- align-items: center;
407
- min-height: calc(100vh - 88px);
408
- padding: 24px 16px 48px;
409
- background: var(--kt-forms-preview-host, #f2f3f5);
410
- }
411
-
412
- /* antd 6 外壳是 .ant-modal-container(不再用 .ant-modal-content),两套都写以免回退。 */
413
- .kt-preview-modal .ant-modal-content,
414
- .kt-preview-modal .ant-modal-container {
415
- display: flex;
416
- flex-direction: column;
417
- max-height: calc(100vh - 72px);
418
- padding: 0;
419
- overflow: hidden;
420
- background: var(--kt-forms-preview-host, var(--kt-page-bg, #dce8f6));
421
- color: var(--kt-forms-text, var(--kt-text));
422
- border: 1px solid var(--kt-forms-border, var(--kt-border));
423
- box-sizing: border-box;
424
- }
425
-
426
- .kt-preview-modal .ant-modal-header {
427
- flex-shrink: 0;
428
- margin-bottom: 0;
429
- padding: 10px 16px;
430
- background: var(--kt-forms-chrome-bar, var(--kt-header-bg, #dce8f6));
431
- border-bottom: 1px solid var(--kt-forms-border, var(--kt-border, #c5d6ee));
432
- }
433
-
434
- .kt-preview-modal .ant-modal-title,
435
- .kt-preview-modal .ant-modal-close {
436
- color: var(--kt-forms-text, var(--kt-text, #1d3a5c));
437
- }
438
-
439
- .kt-preview-modal .ant-modal-body {
440
- flex: 1 1 auto;
441
- min-height: 0;
442
- background: var(--kt-forms-preview-host, var(--kt-page-bg, #dce8f6));
443
- padding: 8px 16px 16px;
444
- max-height: none;
445
- overflow: auto;
446
- }
447
-
448
- .kt-preview-modal .kt-preview,
449
- .kt-preview-modal .kt-preview--modal {
450
- display: flex;
451
- flex-direction: column;
452
- min-width: 0;
453
- min-height: 0;
454
- }
455
-
456
- .kt-preview-modal .kt-preview-print-bar {
457
- position: sticky;
458
- top: 0;
459
- z-index: 2;
460
- margin-bottom: 8px;
461
- background: var(--kt-forms-preview-host, var(--kt-page-bg, #dce8f6));
462
- }
463
-
464
- .kt-preview-modal .kt-report-preview-host {
465
- padding: 8px 0 0;
466
- background: transparent;
467
- }
468
-
469
- .kt-preview-print-bar .ant-btn,
470
- .kt-preview--modal .ant-btn {
471
- height: 28px;
472
- padding-inline: 10px;
473
- font-size: 12px;
474
- }
475
-
476
- .kt-preview-print-bar .ant-select-selector {
477
- min-height: 28px !important;
478
- }
479
-
480
- @media print {
481
- [data-kt-root] {
482
- --kt-text: #1d2129;
483
- --kt-text-secondary: #4e5969;
484
- --kt-header-bg: #fff;
485
- --kt-border: #e5e6eb;
486
- --kt-page-bg: #fff;
487
- --kt-forms-page-bg: #fff;
488
- --kt-forms-header-bg: #fff;
489
- --kt-forms-border: #e5e6eb;
490
- --kt-forms-text: #1d2129;
491
- --kt-forms-canvas-pad: #fff;
492
- --kt-forms-preview-host: #fff;
493
- color: #1d2129;
494
- background: #fff;
495
- }
496
-
497
- /* surface 根节点内联了主题变量(useKtSurfaceProps),打印时用 !important 强制浅色,
498
- 对 portal 到 body 的界面同样生效 */
499
- [data-kt-surface] {
500
- --kt-text: #1d2129 !important;
501
- --kt-text-secondary: #4e5969 !important;
502
- --kt-header-bg: #fff !important;
503
- --kt-border: #e5e6eb !important;
504
- --kt-page-bg: #fff !important;
505
- --kt-forms-page-bg: #fff !important;
506
- --kt-forms-header-bg: #fff !important;
507
- --kt-forms-border: #e5e6eb !important;
508
- --kt-forms-text: #1d2129 !important;
509
- --kt-forms-canvas-pad: #fff !important;
510
- --kt-forms-preview-host: #fff !important;
511
- color: #1d2129 !important;
512
- background: #fff !important;
513
- }
514
-
515
- .kt-paper-island,
516
- [data-kt-paper],
517
- .kt-report-page,
518
- .klab-fill-sheet {
519
- color-scheme: light !important;
520
- background: #fff !important;
521
- color: #1d2129 !important;
522
- }
523
-
524
- .kt-brand,
525
- .kt-chrome,
526
- .kt-report-print-hide {
527
- display: none !important;
528
- }
529
- }
530
-
531
- /* —— Modal:Portal 在 body。KtProvider 给 root 挂 scheme 类 + chrome 变量。 —— */
532
- .kt-mimic-arco-modal .ant-modal-content {
533
- border-radius: 4px;
534
- padding: 0;
535
- overflow: hidden;
536
- }
537
-
538
- .kt-mimic-arco-modal--light .ant-modal-content {
539
- border: 1px solid var(--kt-forms-border, #e5e6eb);
540
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
541
- box-sizing: border-box;
542
- background: var(--kt-forms-header-bg, #fff);
543
- }
544
-
545
- .kt-mimic-arco-modal--light .ant-modal-header {
546
- margin: 0;
547
- padding: 20px 20px 16px;
548
- border-bottom: 1px solid var(--kt-forms-border, #e5e6eb);
549
- background: var(--kt-forms-header-bg, #fff);
550
- }
551
-
552
- .kt-mimic-arco-modal--light .ant-modal-title {
553
- font-weight: 500;
554
- font-size: 16px;
555
- line-height: 1.5;
556
- color: var(--kt-forms-text, #1d2129);
557
- }
558
-
559
- .kt-mimic-arco-modal--light .ant-modal-body {
560
- padding: 20px;
561
- color: var(--kt-forms-text, #1d2129);
562
- font-size: 14px;
563
- line-height: 1.5715;
564
- }
565
-
566
- .kt-mimic-arco-modal--light .ant-modal-footer {
567
- margin: 0;
568
- padding: 10px 20px 16px;
569
- border-top: 1px solid var(--kt-forms-border, #e5e6eb);
570
- background: var(--kt-forms-header-bg, #fff);
571
- }
572
-
573
- .kt-mimic-arco-modal--light .ant-modal-close {
574
- top: 18px;
575
- right: 16px;
576
- color: var(--kt-forms-text-secondary, #86909c);
577
- }
578
-
579
- .kt-mimic-arco-modal--light .ant-modal-close:hover {
580
- color: var(--kt-forms-text, #1d2129);
581
- background: transparent;
582
- }
583
-
584
- .kt-mimic-arco-modal--dark .ant-modal-content {
585
- border: 1px solid var(--kt-forms-border, #424242);
586
- box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.48);
587
- box-sizing: border-box;
588
- background: var(--kt-forms-header-bg, #1f1f1f);
589
- color: var(--kt-forms-text, rgba(255, 255, 255, 0.85));
590
- }
591
-
592
- .kt-mimic-arco-modal--dark .ant-modal-header {
593
- margin: 0;
594
- padding: 20px 20px 16px;
595
- border-bottom: 1px solid var(--kt-forms-border, #424242);
596
- background: var(--kt-forms-chrome-bar, var(--kt-forms-header-bg));
597
- }
598
-
599
- .kt-mimic-arco-modal--dark .ant-modal-title,
600
- .kt-mimic-arco-modal--dark .ant-modal-close {
601
- color: var(--kt-forms-text, rgba(255, 255, 255, 0.85));
602
- }
603
-
604
- .kt-mimic-arco-modal--dark .ant-modal-body {
605
- padding: 20px;
606
- font-size: 14px;
607
- line-height: 1.5715;
608
- color: var(--kt-forms-text, rgba(255, 255, 255, 0.85));
609
- }
610
-
611
- .kt-mimic-arco-modal--dark .ant-modal-footer {
612
- margin: 0;
613
- padding: 10px 20px 16px;
614
- border-top: 1px solid var(--kt-forms-border, #424242);
615
- }
616
-
617
- .kt-mimic-arco-modal--dark .ant-modal-close {
618
- top: 18px;
619
- right: 16px;
620
- }
621
-
622
- .kt-mimic-arco-modal--light.ant-modal-confirm .ant-modal-content,
623
- .kt-mimic-arco-modal--light .ant-modal-confirm .ant-modal-content {
624
- border: 1px solid var(--kt-forms-border, #e5e6eb);
625
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
626
- border-radius: 4px;
627
- padding: 0;
628
- box-sizing: border-box;
629
- }
630
-
631
- .kt-mimic-arco-modal--light.ant-modal-confirm .ant-modal-body,
632
- .kt-mimic-arco-modal--light .ant-modal-confirm .ant-modal-body {
633
- padding: 20px 20px 8px;
634
- }
635
-
636
- .kt-mimic-arco-modal--light .ant-modal-confirm-title {
637
- font-weight: 500;
638
- font-size: 16px;
639
- line-height: 1.5;
640
- color: var(--kt-forms-text, #1d2129);
641
- margin-bottom: 8px;
642
- }
643
-
644
- .kt-mimic-arco-modal--light .ant-modal-confirm-content {
645
- color: var(--kt-forms-text-secondary, #4e5969);
646
- font-size: 14px;
647
- line-height: 1.5715;
648
- margin-top: 0;
649
- }
650
-
651
- .kt-mimic-arco-modal--light .ant-modal-confirm-btns {
652
- margin-top: 20px;
653
- padding-top: 10px;
654
- border-top: 1px solid var(--kt-forms-border, #e5e6eb);
655
- }
656
-
657
- .kt-mimic-arco-modal--dark.ant-modal-confirm .ant-modal-content,
658
- .kt-mimic-arco-modal--dark .ant-modal-confirm .ant-modal-content {
659
- border: 1px solid var(--kt-forms-border, #424242);
660
- box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.48);
661
- border-radius: 4px;
662
- padding: 0;
663
- box-sizing: border-box;
664
- }
665
-
666
- .kt-mimic-arco-modal--dark.ant-modal-confirm .ant-modal-body,
667
- .kt-mimic-arco-modal--dark .ant-modal-confirm .ant-modal-body {
668
- padding: 20px 20px 8px;
669
- }
670
-
671
- .kt-mimic-arco-modal--dark .ant-modal-confirm-btns {
672
- margin-top: 20px;
673
- padding-top: 10px;
674
- border-top: 1px solid var(--kt-forms-border, #424242);
675
- }
1
+ [data-kt-root] {
2
+ --kt-font: 14px;
3
+ --kt-space: 8px;
4
+ --kt-primary: #165dff;
5
+ --kt-success: #00b42a;
6
+ --kt-warning: #ff7d00;
7
+ --kt-error: #f53f3f;
8
+ --kt-primary-soft: rgba(22, 93, 255, 0.12);
9
+ --kt-text: #1d3a5c;
10
+ --kt-text-secondary: #4e6a8a;
11
+ --kt-header-bg: #f3f7fd;
12
+ --kt-border: #c5d6ee;
13
+ --kt-page-bg: #e8f0fb;
14
+ --kt-forms-page-bg: #e8f0fb;
15
+ --kt-forms-header-bg: #f3f7fd;
16
+ --kt-forms-border: #c5d6ee;
17
+ --kt-forms-text: #1d3a5c;
18
+ --kt-forms-text-secondary: #4e6a8a;
19
+ --kt-forms-chrome-bar: #dce8f6;
20
+ --kt-forms-chrome-tab: #d0deef;
21
+ --kt-forms-canvas-pad: #d4e4f5;
22
+ --kt-forms-preview-host: #dce8f6;
23
+ --kt-paper-bg: #fff;
24
+ --kt-canvas-header: #f3f3f3;
25
+ --kt-canvas-header-grid: #c4c4c4;
26
+ --kt-canvas-header-text: #333333;
27
+ box-sizing: border-box;
28
+ height: 100%;
29
+ min-height: 0;
30
+ display: flex;
31
+ flex-direction: column;
32
+ }
33
+
34
+ /* 只有 kt 产品界面(surface)才接管文字/背景与 antd 观感;root 只发 --kt-* 变量。
35
+ 否则 Provider 包住整个宿主应用时,--ant-* 覆盖与 .ant-* 规则会污染宿主自己的 antd 页面
36
+ (260915 lims 委托单输入框蓝底事故)。surface 可能 portal 到 body(宿主 Arco Modal),
37
+ 故选择器不挂在 [data-kt-root] 下。 */
38
+ [data-kt-surface] {
39
+ font-size: var(--kt-font);
40
+ color: var(--kt-forms-text, #1d3a5c);
41
+ background: var(--kt-forms-page-bg, #e8f0fb);
42
+ --ant-color-text: var(--kt-forms-text, #1d3a5c);
43
+ --ant-color-text-secondary: var(--kt-forms-text-secondary, #4e6a8a);
44
+ --ant-color-bg-container: var(--kt-forms-chrome-tab, #d0deef);
45
+ --ant-color-bg-elevated: var(--kt-forms-chrome-tab, #f3f7fd);
46
+ --ant-color-border: var(--kt-forms-border, #c5d6ee);
47
+ }
48
+
49
+ html:has([data-kt-root]),
50
+ html:has([data-kt-root]) body {
51
+ height: 100%;
52
+ }
53
+
54
+ /* kt 的 antd 作用域(KtAntdScope)用 <App component={false}>,不产生 .ant-app DOM;
55
+ 这里不再写任何 .ant-app 规则,避免影响宿主自己的 antd App 布局。 */
56
+
57
+ /* kt 自有类(kt-* / data-kt-paper)不挂 [data-kt-root]:界面可能被宿主弹窗 portal 到 body,
58
+ 变量由 surface 根节点内联带入(useKtSurfaceProps),选择器保持位置无关。 */
59
+ .kt-fill-page,
60
+ .kt-fill-layout,
61
+ .kt-report-designer-page {
62
+ flex: 1 1 auto;
63
+ min-height: 0;
64
+ height: 100%;
65
+ }
66
+
67
+ [data-kt-root][data-kt-type="sm"] { --kt-font: 12px; }
68
+ [data-kt-root][data-kt-type="md"] { --kt-font: 14px; }
69
+ [data-kt-root][data-kt-type="lg"] { --kt-font: 16px; }
70
+ [data-kt-root][data-kt-density="compact"] { --kt-space: 4px; }
71
+ [data-kt-root][data-kt-density="comfortable"] { --kt-space: 8px; }
72
+ [data-kt-root][data-kt-density="spacious"] { --kt-space: 12px; }
73
+ [data-kt-root][data-kt-scheme="dark"] {
74
+ color-scheme: dark;
75
+ --kt-canvas-header: #1f1f1f;
76
+ --kt-canvas-header-grid: #424242;
77
+ --kt-canvas-header-text: rgba(255, 255, 255, 0.88);
78
+ }
79
+
80
+ [data-kt-root] .kt-brand {
81
+ display: flex;
82
+ align-items: center;
83
+ flex-wrap: wrap;
84
+ gap: 8px 12px;
85
+ box-sizing: border-box;
86
+ min-height: 40px;
87
+ padding: 6px 12px;
88
+ line-height: 1;
89
+ background: var(--kt-primary);
90
+ color: #fff;
91
+ }
92
+
93
+ [data-kt-root] .kt-brand > strong {
94
+ flex-shrink: 0;
95
+ font-size: 14px;
96
+ line-height: 28px;
97
+ }
98
+
99
+ [data-kt-root] .kt-brand .kt-theme-bar {
100
+ margin-left: auto;
101
+ }
102
+
103
+ .kt-paper-island {
104
+ background: var(--kt-forms-canvas-pad, var(--kt-page-bg, #d4e4f5));
105
+ color: var(--kt-forms-text, var(--kt-text, #1d3a5c));
106
+ }
107
+
108
+ .kt-paper-island[data-tone="preview"],
109
+ .kt-preview-stage {
110
+ background: var(--kt-forms-preview-host, var(--kt-page-bg, #dce8f6));
111
+ }
112
+
113
+ [data-kt-paper],
114
+ .kt-report-page,
115
+ .klab-fill-sheet {
116
+ color-scheme: light;
117
+ background: var(--kt-paper-bg, #fff);
118
+ color: #1d2129;
119
+ --ant-color-text: #1d2129;
120
+ --ant-color-text-secondary: #4e5969;
121
+ --ant-color-bg-container: #fff;
122
+ --ant-color-bg-elevated: #fff;
123
+ --ant-color-border: #d9d9d9;
124
+ }
125
+
126
+ .kt-chrome {
127
+ display: flex;
128
+ align-items: center;
129
+ flex-wrap: wrap;
130
+ gap: 8px;
131
+ box-sizing: border-box;
132
+ min-height: 40px;
133
+ padding: 6px 12px;
134
+ line-height: 1;
135
+ border-bottom: 1px solid var(--kt-forms-border, var(--kt-border, #c5d6ee));
136
+ background: var(--kt-forms-chrome-bar, var(--kt-header-bg, #dce8f6));
137
+ color: var(--kt-forms-text, var(--kt-text, #1d3a5c));
138
+ }
139
+
140
+ /* 铬层不跟 density 的 32/36 控件高走;疏密只影响工作区。 */
141
+ .kt-chrome .ant-btn {
142
+ height: 28px;
143
+ padding-inline: 10px;
144
+ font-size: 12px;
145
+ }
146
+
147
+ .kt-chrome .ant-btn.ant-btn-icon-only {
148
+ width: 28px;
149
+ padding-inline: 0;
150
+ }
151
+
152
+ .kt-chrome .ant-select {
153
+ font-size: 12px;
154
+ }
155
+
156
+ .kt-chrome .ant-select-selector {
157
+ min-height: 28px !important;
158
+ }
159
+
160
+ .kt-report-print-hide .ant-btn {
161
+ height: 28px;
162
+ padding-inline: 10px;
163
+ font-size: 12px;
164
+ }
165
+
166
+ .kt-chrome-sub {
167
+ background: var(--kt-forms-header-bg, var(--kt-header-bg, #f3f7fd));
168
+ border-bottom: 1px solid var(--kt-forms-border, var(--kt-border, #c5d6ee));
169
+ color: var(--kt-forms-text, var(--kt-text, #1d3a5c));
170
+ }
171
+
172
+ .kt-chrome-tab {
173
+ background: var(--kt-forms-chrome-tab, #d0deef);
174
+ border: 1px solid var(--kt-forms-border, #c5d6ee);
175
+ color: var(--kt-forms-text-secondary, #4e6a8a);
176
+ }
177
+
178
+ .kt-workspace {
179
+ min-height: 480px;
180
+ background: var(--kt-forms-canvas-pad, var(--kt-page-bg, #d4e4f5));
181
+ }
182
+
183
+ [data-kt-root] .kt-theme-bar {
184
+ display: flex;
185
+ flex-wrap: nowrap;
186
+ align-items: center;
187
+ gap: 2px;
188
+ }
189
+
190
+ /* 深蓝品牌条上的两个图标按钮:白字、hover 微亮 */
191
+ [data-kt-root] .kt-theme-bar--on-primary .ant-btn-text {
192
+ color: rgba(255, 255, 255, 0.92);
193
+ }
194
+
195
+ [data-kt-root] .kt-theme-bar--on-primary .ant-btn-text:hover {
196
+ color: #fff !important;
197
+ background: rgba(255, 255, 255, 0.16) !important;
198
+ }
199
+
200
+ /* 浮层常挂到 body,选择器不能只写在 [data-kt-root] 下。 */
201
+ .kt-theme-palette {
202
+ display: flex;
203
+ flex-direction: column;
204
+ gap: 10px;
205
+ width: 280px;
206
+ }
207
+
208
+ .kt-theme-palette__cap {
209
+ display: block;
210
+ font-size: 12px;
211
+ line-height: 1;
212
+ }
213
+
214
+ .kt-theme-palette__row {
215
+ display: flex;
216
+ align-items: center;
217
+ justify-content: space-between;
218
+ gap: 8px;
219
+ }
220
+
221
+ .kt-theme-palette__row .kt-theme-palette__cap {
222
+ flex-shrink: 0;
223
+ }
224
+
225
+ .kt-swatch-grid {
226
+ display: grid;
227
+ grid-template-columns: 1fr 1fr;
228
+ gap: 8px 12px;
229
+ }
230
+
231
+ .kt-swatch {
232
+ display: flex;
233
+ align-items: center;
234
+ justify-content: space-between;
235
+ gap: 8px;
236
+ min-width: 0;
237
+ }
238
+
239
+ .kt-swatch-label {
240
+ font-size: 12px;
241
+ line-height: 1;
242
+ color: var(--kt-forms-text-secondary, #4e5969);
243
+ flex-shrink: 0;
244
+ }
245
+
246
+ .kt-swatch-chip {
247
+ position: relative;
248
+ display: block;
249
+ width: 36px;
250
+ height: 20px;
251
+ border-radius: 4px;
252
+ border: 1px solid var(--kt-forms-border, #d0d5dd);
253
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
254
+ overflow: hidden;
255
+ flex-shrink: 0;
256
+ }
257
+
258
+ .kt-swatch-chip input[type="color"] {
259
+ position: absolute;
260
+ inset: -8px;
261
+ width: calc(100% + 16px);
262
+ height: calc(100% + 16px);
263
+ padding: 0;
264
+ border: none;
265
+ opacity: 0;
266
+ cursor: pointer;
267
+ }
268
+
269
+ /* surface 根节点自带 data-kt-style(useKtSurfaceProps),portal 到 body 也能命中 */
270
+ [data-kt-surface][data-kt-style="arco"] .ant-btn,
271
+ [data-kt-surface][data-kt-style="arco"] .ant-input,
272
+ [data-kt-surface][data-kt-style="arco"] .ant-input-affix-wrapper,
273
+ [data-kt-surface][data-kt-style="arco"] .ant-select-selector,
274
+ [data-kt-surface][data-kt-style="arco"] .ant-radio-button-wrapper {
275
+ border-radius: 2px;
276
+ }
277
+
278
+ /* 铬层控件跟主题变量(含宿主插槽的另一份 antd);纸面内再锁浅色。
279
+ 作用域限 kt 产品界面(data-kt-surface),不碰宿主自己的 antd 控件。 */
280
+ [data-kt-surface] .ant-input,
281
+ [data-kt-surface] .ant-input-outlined,
282
+ [data-kt-surface] .ant-input-affix-wrapper,
283
+ [data-kt-surface] textarea.ant-input,
284
+ [data-kt-surface] .ant-picker,
285
+ [data-kt-surface] .ant-picker-outlined,
286
+ [data-kt-surface] .ant-select-selector,
287
+ [data-kt-surface] .ant-input-number,
288
+ [data-kt-surface] .ant-input-number-outlined,
289
+ [data-kt-surface] .ant-btn-default {
290
+ background: var(--kt-forms-chrome-tab, var(--kt-forms-header-bg)) !important;
291
+ color: var(--kt-forms-text, var(--kt-text)) !important;
292
+ border-color: var(--kt-forms-border, var(--kt-border)) !important;
293
+ }
294
+
295
+ [data-kt-surface] .ant-select-auto-complete .ant-select-selector,
296
+ [data-kt-surface] .ant-select-selection-search-input,
297
+ [data-kt-surface] .ant-select-selection-search input,
298
+ [data-kt-surface] .ant-picker-input > input,
299
+ [data-kt-surface] .ant-picker-input input {
300
+ background: transparent !important;
301
+ color: var(--kt-forms-text, var(--kt-text)) !important;
302
+ }
303
+
304
+ [data-kt-surface] .ant-select-auto-complete .ant-select-selector {
305
+ background: var(--kt-forms-chrome-tab, var(--kt-forms-header-bg)) !important;
306
+ }
307
+
308
+ [data-kt-surface] .ant-input::placeholder,
309
+ [data-kt-surface] .ant-input-outlined::placeholder,
310
+ [data-kt-surface] .ant-select-selection-placeholder,
311
+ [data-kt-surface] .ant-select-selection-search-input::placeholder,
312
+ [data-kt-surface] .ant-picker-input > input::placeholder,
313
+ [data-kt-surface] .ant-picker-input input::placeholder {
314
+ color: var(--kt-forms-text-secondary, var(--kt-text-secondary)) !important;
315
+ }
316
+
317
+ [data-kt-surface] .ant-select-selection-item,
318
+ [data-kt-surface] .ant-select-arrow,
319
+ [data-kt-surface] .ant-select-clear,
320
+ [data-kt-surface] .ant-picker-suffix,
321
+ [data-kt-surface] .ant-picker-separator,
322
+ [data-kt-surface] .ant-picker-clear {
323
+ color: var(--kt-forms-text, var(--kt-text)) !important;
324
+ }
325
+
326
+ [data-kt-surface] .ant-typography,
327
+ [data-kt-surface] .ant-typography h1,
328
+ [data-kt-surface] .ant-typography h2,
329
+ [data-kt-surface] .ant-typography h3,
330
+ [data-kt-surface] .ant-typography h4,
331
+ [data-kt-surface] .ant-typography h5,
332
+ [data-kt-surface] .ant-form-item-label > label {
333
+ color: var(--kt-forms-text, var(--kt-text)) !important;
334
+ }
335
+
336
+ .kt-chrome-meta,
337
+ [data-kt-surface] .ant-typography-secondary.kt-chrome-meta {
338
+ color: var(--kt-forms-text-secondary, var(--kt-text-secondary, #4e6a8a)) !important;
339
+ }
340
+
341
+ [data-kt-surface] .ant-typography-secondary,
342
+ [data-kt-surface] .ant-typography.ant-typography-secondary {
343
+ color: var(--kt-forms-text-secondary, var(--kt-text-secondary)) !important;
344
+ }
345
+
346
+ [data-kt-surface] .ant-btn-text:not(.ant-btn-dangerous):not(.ant-btn-primary) {
347
+ color: var(--kt-forms-text, var(--kt-text)) !important;
348
+ }
349
+
350
+ [data-kt-surface] .ant-btn-link:not(.ant-btn-dangerous) {
351
+ color: var(--kt-primary) !important;
352
+ }
353
+
354
+ [data-kt-paper] .ant-input,
355
+ [data-kt-paper] .ant-input-outlined,
356
+ [data-kt-paper] .ant-input-affix-wrapper,
357
+ [data-kt-paper] textarea.ant-input,
358
+ [data-kt-paper] .ant-picker,
359
+ [data-kt-paper] .ant-select-selector,
360
+ [data-kt-paper] .ant-input-number,
361
+ [data-kt-paper] .ant-btn-default,
362
+ .kt-report-page .ant-input,
363
+ .kt-report-page .ant-select-selector,
364
+ .klab-fill-sheet .ant-input,
365
+ .klab-fill-sheet .ant-input-outlined,
366
+ .klab-fill-sheet .ant-input-affix-wrapper,
367
+ .klab-fill-sheet textarea.ant-input,
368
+ .klab-fill-sheet .ant-select-selector,
369
+ .klab-fill-sheet .ant-btn-default {
370
+ background: var(--kt-paper-bg, #fff) !important;
371
+ color: #1d2129 !important;
372
+ border-color: #d9d9d9 !important;
373
+ }
374
+
375
+ [data-kt-paper] .ant-select-selection-item,
376
+ [data-kt-paper] .ant-select-arrow,
377
+ [data-kt-paper] .ant-select-selection-search-input,
378
+ [data-kt-paper] .ant-picker-input > input,
379
+ .klab-fill-sheet .ant-select-selection-item,
380
+ .klab-fill-sheet .ant-select-arrow,
381
+ .klab-fill-sheet .ant-select-selection-search-input {
382
+ color: #1d2129 !important;
383
+ }
384
+
385
+ [data-kt-paper] .ant-typography,
386
+ .kt-report-page .ant-typography,
387
+ .klab-fill-sheet .ant-typography {
388
+ color: #1d2129 !important;
389
+ }
390
+
391
+ [data-kt-paper] .ant-typography-secondary,
392
+ .klab-fill-sheet .ant-typography-secondary {
393
+ color: #4e5969 !important;
394
+ }
395
+
396
+ [data-kt-paper] .ant-input::placeholder,
397
+ .klab-fill-sheet .ant-input::placeholder,
398
+ .klab-fill-sheet .ant-select-selection-placeholder {
399
+ color: #8c8c8c !important;
400
+ }
401
+
402
+ .kt-preview-stage {
403
+ box-sizing: border-box;
404
+ display: flex;
405
+ flex-direction: column;
406
+ align-items: center;
407
+ min-height: calc(100vh - 88px);
408
+ padding: 24px 16px 48px;
409
+ background: var(--kt-forms-preview-host, #f2f3f5);
410
+ }
411
+
412
+ /* antd 6 外壳是 .ant-modal-container(不再用 .ant-modal-content),两套都写以免回退。
413
+ 选择器多带一层 .kt-mimic-arco-modal,压过通用弹窗外壳(标题栏/内边距)以免预览被拆成两截。 */
414
+ .kt-preview-modal .ant-modal-content,
415
+ .kt-preview-modal .ant-modal-container,
416
+ .kt-mimic-arco-modal .kt-preview-modal .ant-modal-content,
417
+ .kt-mimic-arco-modal .kt-preview-modal .ant-modal-container {
418
+ display: flex;
419
+ flex-direction: column;
420
+ max-height: calc(100vh - 72px);
421
+ padding: 0;
422
+ overflow: hidden;
423
+ background: var(--kt-forms-preview-host, var(--kt-page-bg, #dce8f6));
424
+ color: var(--kt-forms-text, var(--kt-text));
425
+ border: 1px solid var(--kt-forms-border, var(--kt-border));
426
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
427
+ border-radius: 4px;
428
+ box-sizing: border-box;
429
+ }
430
+
431
+ .kt-preview-modal .ant-modal-header,
432
+ .kt-mimic-arco-modal .kt-preview-modal .ant-modal-header {
433
+ flex-shrink: 0;
434
+ margin: 0;
435
+ padding: 10px 16px;
436
+ background: var(--kt-forms-chrome-bar, var(--kt-header-bg, #dce8f6));
437
+ border-bottom: 1px solid var(--kt-forms-border, var(--kt-border, #c5d6ee));
438
+ border-radius: 0;
439
+ }
440
+
441
+ .kt-preview-modal .ant-modal-title,
442
+ .kt-preview-modal .ant-modal-close,
443
+ .kt-mimic-arco-modal .kt-preview-modal .ant-modal-title,
444
+ .kt-mimic-arco-modal .kt-preview-modal .ant-modal-close {
445
+ color: var(--kt-forms-text, var(--kt-text, #1d3a5c));
446
+ }
447
+
448
+ .kt-preview-modal .ant-modal-close,
449
+ .kt-mimic-arco-modal .kt-preview-modal .ant-modal-close {
450
+ top: 8px;
451
+ right: 12px;
452
+ inset-inline-end: 12px;
453
+ }
454
+
455
+ .kt-preview-modal .ant-modal-body,
456
+ .kt-mimic-arco-modal .kt-preview-modal .ant-modal-body {
457
+ display: flex;
458
+ flex-direction: column;
459
+ flex: 1 1 auto;
460
+ min-height: 0;
461
+ background: var(--kt-forms-preview-host, var(--kt-page-bg, #dce8f6));
462
+ padding: 0;
463
+ max-height: none;
464
+ overflow: hidden;
465
+ }
466
+
467
+ .kt-preview-modal .kt-preview,
468
+ .kt-preview-modal .kt-preview--modal {
469
+ display: flex;
470
+ flex-direction: column;
471
+ min-width: 0;
472
+ min-height: 0;
473
+ }
474
+
475
+ .kt-preview-modal .kt-preview-print-bar {
476
+ position: relative;
477
+ flex-shrink: 0;
478
+ z-index: auto;
479
+ height: auto;
480
+ min-height: 40px;
481
+ overflow: visible;
482
+ margin-bottom: 0;
483
+ background: var(--kt-forms-chrome-bar, var(--kt-forms-preview-host, #dce8f6));
484
+ }
485
+
486
+ .kt-preview-modal .kt-report-preview-host {
487
+ padding: 8px 0 0;
488
+ background: transparent;
489
+ }
490
+
491
+ .kt-preview-print-bar .ant-btn,
492
+ .kt-preview--modal .ant-btn {
493
+ height: 28px;
494
+ padding-inline: 10px;
495
+ font-size: 12px;
496
+ }
497
+
498
+ .kt-preview-print-bar .ant-select-selector {
499
+ min-height: 28px !important;
500
+ }
501
+
502
+ /* 宿主弹窗外框适配:宿主 Modal(Arco/antd)内容区直接包 kt modal 表面时,
503
+ 去掉内容区默认 padding,让表面底色铺满弹窗(白框消失、视觉一体);
504
+ 仅当内容区里存在 kt modal 表面才生效,不影响宿主其它弹窗。 */
505
+ .arco-modal-content:has(> [data-kt-surface].kt-preview--modal),
506
+ .arco-modal-content:has(> .kt-antd-scope > [data-kt-surface].kt-preview--modal),
507
+ .ant-modal-body:has(> [data-kt-surface].kt-preview--modal),
508
+ .ant-modal-body:has(> .kt-antd-scope > [data-kt-surface].kt-preview--modal) {
509
+ padding: 0 !important;
510
+ }
511
+
512
+ /* 表面铺满后裁齐弹窗圆角 */
513
+ .arco-modal:has([data-kt-surface].kt-preview--modal),
514
+ .ant-modal:has([data-kt-surface].kt-preview--modal) {
515
+ overflow: hidden;
516
+ }
517
+
518
+ @media print {
519
+ [data-kt-root] {
520
+ --kt-text: #1d2129;
521
+ --kt-text-secondary: #4e5969;
522
+ --kt-header-bg: #fff;
523
+ --kt-border: #e5e6eb;
524
+ --kt-page-bg: #fff;
525
+ --kt-forms-page-bg: #fff;
526
+ --kt-forms-header-bg: #fff;
527
+ --kt-forms-border: #e5e6eb;
528
+ --kt-forms-text: #1d2129;
529
+ --kt-forms-canvas-pad: #fff;
530
+ --kt-forms-preview-host: #fff;
531
+ color: #1d2129;
532
+ background: #fff;
533
+ }
534
+
535
+ /* surface 根节点内联了主题变量(useKtSurfaceProps),打印时用 !important 强制浅色,
536
+ 对 portal 到 body 的界面同样生效 */
537
+ [data-kt-surface] {
538
+ --kt-text: #1d2129 !important;
539
+ --kt-text-secondary: #4e5969 !important;
540
+ --kt-header-bg: #fff !important;
541
+ --kt-border: #e5e6eb !important;
542
+ --kt-page-bg: #fff !important;
543
+ --kt-forms-page-bg: #fff !important;
544
+ --kt-forms-header-bg: #fff !important;
545
+ --kt-forms-border: #e5e6eb !important;
546
+ --kt-forms-text: #1d2129 !important;
547
+ --kt-forms-canvas-pad: #fff !important;
548
+ --kt-forms-preview-host: #fff !important;
549
+ color: #1d2129 !important;
550
+ background: #fff !important;
551
+ }
552
+
553
+ .kt-paper-island,
554
+ [data-kt-paper],
555
+ .kt-report-page,
556
+ .klab-fill-sheet {
557
+ color-scheme: light !important;
558
+ background: #fff !important;
559
+ color: #1d2129 !important;
560
+ }
561
+
562
+ .kt-brand,
563
+ .kt-chrome,
564
+ .kt-report-print-hide {
565
+ display: none !important;
566
+ }
567
+ }
568
+
569
+ /* —— Modal:Portal 在 body。KtProvider 给 root 挂 scheme 类 + chrome 变量。
570
+ antd 6 可视外壳是 .ant-modal-container(.ant-modal-content 已不再生成),两套都写。 —— */
571
+ .kt-mimic-arco-modal .ant-modal-content,
572
+ .kt-mimic-arco-modal .ant-modal-container {
573
+ border-radius: 4px;
574
+ padding: 0;
575
+ overflow: hidden;
576
+ }
577
+
578
+ .kt-mimic-arco-modal--light .ant-modal-content,
579
+ .kt-mimic-arco-modal--light .ant-modal-container {
580
+ border: 1px solid var(--kt-forms-border, #e5e6eb);
581
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
582
+ box-sizing: border-box;
583
+ background: var(--kt-forms-header-bg, #fff);
584
+ }
585
+
586
+ .kt-mimic-arco-modal--light .ant-modal-header {
587
+ margin: 0;
588
+ padding: 20px 20px 16px;
589
+ border-bottom: 1px solid var(--kt-forms-border, #e5e6eb);
590
+ background: var(--kt-forms-header-bg, #fff);
591
+ }
592
+
593
+ .kt-mimic-arco-modal--light .ant-modal-title {
594
+ font-weight: 500;
595
+ font-size: 16px;
596
+ line-height: 1.5;
597
+ color: var(--kt-forms-text, #1d2129);
598
+ }
599
+
600
+ .kt-mimic-arco-modal--light .ant-modal-body {
601
+ padding: 20px;
602
+ color: var(--kt-forms-text, #1d2129);
603
+ font-size: 14px;
604
+ line-height: 1.5715;
605
+ }
606
+
607
+ .kt-mimic-arco-modal--light .ant-modal-footer {
608
+ margin: 0;
609
+ padding: 10px 20px 16px;
610
+ border-top: 1px solid var(--kt-forms-border, #e5e6eb);
611
+ background: var(--kt-forms-header-bg, #fff);
612
+ }
613
+
614
+ .kt-mimic-arco-modal--light .ant-modal-close {
615
+ top: 18px;
616
+ right: 16px;
617
+ color: var(--kt-forms-text-secondary, #86909c);
618
+ }
619
+
620
+ .kt-mimic-arco-modal--light .ant-modal-close:hover {
621
+ color: var(--kt-forms-text, #1d2129);
622
+ background: transparent;
623
+ }
624
+
625
+ .kt-mimic-arco-modal--dark .ant-modal-content,
626
+ .kt-mimic-arco-modal--dark .ant-modal-container {
627
+ border: 1px solid var(--kt-forms-border, #424242);
628
+ box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.48);
629
+ box-sizing: border-box;
630
+ background: var(--kt-forms-header-bg, #1f1f1f);
631
+ color: var(--kt-forms-text, rgba(255, 255, 255, 0.85));
632
+ }
633
+
634
+ .kt-mimic-arco-modal--dark .ant-modal-header {
635
+ margin: 0;
636
+ padding: 20px 20px 16px;
637
+ border-bottom: 1px solid var(--kt-forms-border, #424242);
638
+ background: var(--kt-forms-chrome-bar, var(--kt-forms-header-bg));
639
+ }
640
+
641
+ .kt-mimic-arco-modal--dark .ant-modal-title,
642
+ .kt-mimic-arco-modal--dark .ant-modal-close {
643
+ color: var(--kt-forms-text, rgba(255, 255, 255, 0.85));
644
+ }
645
+
646
+ .kt-mimic-arco-modal--dark .ant-modal-body {
647
+ padding: 20px;
648
+ font-size: 14px;
649
+ line-height: 1.5715;
650
+ color: var(--kt-forms-text, rgba(255, 255, 255, 0.85));
651
+ }
652
+
653
+ .kt-mimic-arco-modal--dark .ant-modal-footer {
654
+ margin: 0;
655
+ padding: 10px 20px 16px;
656
+ border-top: 1px solid var(--kt-forms-border, #424242);
657
+ }
658
+
659
+ .kt-mimic-arco-modal--dark .ant-modal-close {
660
+ top: 18px;
661
+ right: 16px;
662
+ }
663
+
664
+ .kt-mimic-arco-modal--light.ant-modal-confirm .ant-modal-content,
665
+ .kt-mimic-arco-modal--light.ant-modal-confirm .ant-modal-container,
666
+ .kt-mimic-arco-modal--light .ant-modal-confirm .ant-modal-content,
667
+ .kt-mimic-arco-modal--light .ant-modal-confirm .ant-modal-container {
668
+ border: 1px solid var(--kt-forms-border, #e5e6eb);
669
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
670
+ border-radius: 4px;
671
+ padding: 0;
672
+ box-sizing: border-box;
673
+ }
674
+
675
+ .kt-mimic-arco-modal--light.ant-modal-confirm .ant-modal-body,
676
+ .kt-mimic-arco-modal--light .ant-modal-confirm .ant-modal-body {
677
+ padding: 20px 20px 8px;
678
+ }
679
+
680
+ .kt-mimic-arco-modal--light .ant-modal-confirm-title {
681
+ font-weight: 500;
682
+ font-size: 16px;
683
+ line-height: 1.5;
684
+ color: var(--kt-forms-text, #1d2129);
685
+ margin-bottom: 8px;
686
+ }
687
+
688
+ .kt-mimic-arco-modal--light .ant-modal-confirm-content {
689
+ color: var(--kt-forms-text-secondary, #4e5969);
690
+ font-size: 14px;
691
+ line-height: 1.5715;
692
+ margin-top: 0;
693
+ }
694
+
695
+ .kt-mimic-arco-modal--light .ant-modal-confirm-btns {
696
+ margin-top: 20px;
697
+ padding-top: 10px;
698
+ border-top: 1px solid var(--kt-forms-border, #e5e6eb);
699
+ }
700
+
701
+ .kt-mimic-arco-modal--dark.ant-modal-confirm .ant-modal-content,
702
+ .kt-mimic-arco-modal--dark.ant-modal-confirm .ant-modal-container,
703
+ .kt-mimic-arco-modal--dark .ant-modal-confirm .ant-modal-content,
704
+ .kt-mimic-arco-modal--dark .ant-modal-confirm .ant-modal-container {
705
+ border: 1px solid var(--kt-forms-border, #424242);
706
+ box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.48);
707
+ border-radius: 4px;
708
+ padding: 0;
709
+ box-sizing: border-box;
710
+ }
711
+
712
+ .kt-mimic-arco-modal--dark.ant-modal-confirm .ant-modal-body,
713
+ .kt-mimic-arco-modal--dark .ant-modal-confirm .ant-modal-body {
714
+ padding: 20px 20px 8px;
715
+ }
716
+
717
+ .kt-mimic-arco-modal--dark .ant-modal-confirm-btns {
718
+ margin-top: 20px;
719
+ padding-top: 10px;
720
+ border-top: 1px solid var(--kt-forms-border, #424242);
721
+ }
676
722
 
677
723
 
678
724
  /* designer chrome — 宿主只引 styles.css,须打进同一文件 */
@@ -1562,14 +1608,36 @@ table.kt-sheet-region-table td {
1562
1608
  }
1563
1609
 
1564
1610
  .kt-preview--modal .kt-preview-print-bar {
1565
- position: sticky;
1566
- top: 0;
1567
- z-index: 2;
1568
- background: var(--kt-forms-preview-host, var(--kt-page-bg, #f2f3f5));
1611
+ position: relative;
1612
+ flex-shrink: 0;
1613
+ z-index: auto;
1614
+ height: auto;
1615
+ min-height: 40px;
1616
+ max-height: none;
1617
+ overflow: visible;
1618
+ margin-bottom: 0;
1619
+ background: var(--kt-forms-chrome-bar, var(--kt-forms-preview-host, #dce8f6));
1620
+ border-bottom: 1px solid var(--kt-forms-border, var(--kt-border, #c5d6ee));
1621
+ padding: 8px 16px;
1622
+ box-sizing: border-box;
1623
+ }
1624
+
1625
+ .kt-preview--modal .kt-chrome-meta {
1626
+ display: block;
1627
+ margin: 0 0 8px;
1628
+ line-height: 16px;
1629
+ position: relative;
1630
+ }
1631
+
1632
+ /* modal 模式:工具条贴边,纸面区自己留 gutter(page 模式由 .kt-preview-page-chrome 的 padding 提供) */
1633
+ .kt-preview--modal .kt-preview-body {
1634
+ box-sizing: border-box;
1635
+ padding: 12px 16px 16px;
1569
1636
  }
1570
1637
 
1571
1638
  .kt-preview--modal .kt-report-preview-host {
1572
- padding-top: 8px;
1639
+ padding: 8px 0 0;
1640
+ background: transparent;
1573
1641
  }
1574
1642
 
1575
1643
  .kt-preview-page-chrome--fill {
@@ -1579,6 +1647,231 @@ table.kt-sheet-region-table td {
1579
1647
  flex-direction: column;
1580
1648
  }
1581
1649
 
1650
+ /* 铺满 = Fullscreen API。内联 width/top 与 antd 的 top:100px 必须压掉,否则全屏元素仍是小窗。
1651
+ Arco 默认 position:relative + display:inline-block,不用 fixed/flex 压过去时,全屏盒仍按内容撑开再被裁切。 */
1652
+ .kt-preview-modal:fullscreen,
1653
+ .arco-modal:fullscreen,
1654
+ .kt-preview:fullscreen,
1655
+ .kt-preview--modal:fullscreen,
1656
+ .kt-preview-page-chrome:fullscreen {
1657
+ position: fixed !important;
1658
+ inset: 0 !important;
1659
+ width: 100% !important;
1660
+ height: 100% !important;
1661
+ max-width: none !important;
1662
+ max-height: 100% !important;
1663
+ margin: 0 !important;
1664
+ top: 0 !important;
1665
+ left: 0 !important;
1666
+ right: auto !important;
1667
+ transform: none !important;
1668
+ border-radius: 0 !important;
1669
+ display: flex !important;
1670
+ flex-direction: column !important;
1671
+ box-sizing: border-box !important;
1672
+ background: var(--kt-forms-preview-host, #dce8f6);
1673
+ }
1674
+
1675
+ .kt-preview-modal:fullscreen,
1676
+ .arco-modal:fullscreen {
1677
+ overflow: hidden !important;
1678
+ }
1679
+
1680
+ /* 全屏元素高度被锁死,外壳若跟着内容撑开就会被裁掉且无法滚动。
1681
+ 标题栏固定,内容区单独滚动。 */
1682
+ .kt-preview-modal:fullscreen .ant-modal-container,
1683
+ .kt-mimic-arco-modal .kt-preview-modal:fullscreen .ant-modal-container {
1684
+ display: flex !important;
1685
+ flex-direction: column !important;
1686
+ flex: 1 1 auto !important;
1687
+ width: 100% !important;
1688
+ height: 100% !important;
1689
+ max-height: 100% !important;
1690
+ min-height: 0 !important;
1691
+ overflow: hidden !important;
1692
+ border-radius: 0;
1693
+ box-sizing: border-box !important;
1694
+ }
1695
+
1696
+ /* Arco 的 content 与标题栏并列。flex-basis 必须是 0,不能是 auto,否则高度跟纸张走,外层 overflow:hidden 只裁不滚。 */
1697
+ .arco-modal:fullscreen .arco-modal-content {
1698
+ display: flex !important;
1699
+ flex-direction: column !important;
1700
+ flex: 1 1 0% !important;
1701
+ width: 100% !important;
1702
+ height: auto !important;
1703
+ max-height: none !important;
1704
+ min-height: 0 !important;
1705
+ overflow: hidden !important;
1706
+ border-radius: 0;
1707
+ box-sizing: border-box !important;
1708
+ padding: 0 !important;
1709
+ }
1710
+
1711
+ .kt-preview-modal:fullscreen .ant-modal-header,
1712
+ .arco-modal:fullscreen .arco-modal-header {
1713
+ flex: 0 0 auto !important;
1714
+ }
1715
+
1716
+ .kt-preview-modal:fullscreen .ant-modal-body,
1717
+ .arco-modal:fullscreen .arco-modal-body {
1718
+ display: flex !important;
1719
+ flex-direction: column !important;
1720
+ flex: 1 1 auto !important;
1721
+ height: auto !important;
1722
+ max-height: none !important;
1723
+ min-height: 0 !important;
1724
+ overflow: hidden !important;
1725
+ }
1726
+
1727
+ /* 标题和打印工具条固定,只滚下面的纸张区。basis 用 0%,避免 height:auto 把滚动盒撑成纸张高度。 */
1728
+ .kt-preview-modal:fullscreen .kt-preview--modal,
1729
+ .arco-modal:fullscreen .kt-preview--modal,
1730
+ .kt-preview:fullscreen,
1731
+ .kt-preview--modal:fullscreen,
1732
+ .kt-preview-page-chrome:fullscreen {
1733
+ display: flex !important;
1734
+ flex-direction: column !important;
1735
+ flex: 1 1 0% !important;
1736
+ min-height: 0 !important;
1737
+ height: auto !important;
1738
+ overflow: hidden !important;
1739
+ }
1740
+
1741
+ .kt-preview-modal:fullscreen .kt-preview-print-bar,
1742
+ .arco-modal:fullscreen .kt-preview-print-bar,
1743
+ .kt-preview-page-chrome:fullscreen .kt-preview-print-bar,
1744
+ .kt-preview--modal:fullscreen .kt-preview-print-bar {
1745
+ flex: 0 0 auto !important;
1746
+ }
1747
+
1748
+ .kt-preview-modal:fullscreen .kt-preview-body,
1749
+ .arco-modal:fullscreen .kt-preview-body,
1750
+ .kt-preview-page-chrome:fullscreen .kt-preview-body,
1751
+ .kt-preview--modal:fullscreen .kt-preview-body {
1752
+ display: flex !important;
1753
+ flex: 1 1 0% !important;
1754
+ align-items: stretch !important;
1755
+ min-height: 0 !important;
1756
+ min-width: 0 !important;
1757
+ overflow: hidden !important;
1758
+ }
1759
+
1760
+ .kt-preview-modal:fullscreen .kt-preview-main,
1761
+ .arco-modal:fullscreen .kt-preview-main,
1762
+ .kt-preview-page-chrome:fullscreen .kt-preview-main,
1763
+ .kt-preview--modal:fullscreen .kt-preview-main {
1764
+ flex: 1 1 auto !important;
1765
+ align-self: stretch !important;
1766
+ min-width: 0 !important;
1767
+ min-height: 0 !important;
1768
+ height: 100% !important;
1769
+ max-height: 100% !important;
1770
+ overflow: auto !important;
1771
+ }
1772
+
1773
+ /* 宿主 Arco(lims 委托单等)默认 inline-block,弹窗跟纸张一起撑高,外层壳 overflow:hidden 时没有滚动条。
1774
+ 不依赖 :fullscreen,调用方不用改 Modal。遮罩层默认 overflow:auto,居中占位会多出一条外围滚动条。 */
1775
+ .arco-modal-wrapper:has(.kt-preview--modal) {
1776
+ overflow: hidden !important;
1777
+ }
1778
+
1779
+ .arco-modal:has(.kt-preview--modal) {
1780
+ display: flex !important;
1781
+ flex-direction: column !important;
1782
+ max-height: calc(100vh - 24px) !important;
1783
+ overflow: hidden !important;
1784
+ }
1785
+
1786
+ .arco-modal:has(.kt-preview--modal) .arco-modal-header {
1787
+ flex: 0 0 auto !important;
1788
+ }
1789
+
1790
+ .arco-modal:has(.kt-preview--modal) .arco-modal-content {
1791
+ display: flex !important;
1792
+ flex-direction: column !important;
1793
+ flex: 1 1 0% !important;
1794
+ min-height: 0 !important;
1795
+ overflow: hidden !important;
1796
+ padding: 0 !important;
1797
+ }
1798
+
1799
+ .arco-modal:has(.kt-preview--modal) .kt-preview--modal {
1800
+ display: flex !important;
1801
+ flex-direction: column !important;
1802
+ flex: 1 1 0% !important;
1803
+ min-height: 0 !important;
1804
+ overflow: hidden !important;
1805
+ }
1806
+
1807
+ .arco-modal:has(.kt-preview--modal) .kt-preview-print-bar {
1808
+ flex: 0 0 auto !important;
1809
+ }
1810
+
1811
+ .arco-modal:has(.kt-preview--modal) .kt-preview-body {
1812
+ display: flex !important;
1813
+ flex: 1 1 0% !important;
1814
+ align-items: stretch !important;
1815
+ min-height: 0 !important;
1816
+ min-width: 0 !important;
1817
+ overflow: hidden !important;
1818
+ }
1819
+
1820
+ .arco-modal:has(.kt-preview--modal) .kt-preview-main {
1821
+ flex: 1 1 auto !important;
1822
+ align-self: stretch !important;
1823
+ min-width: 0 !important;
1824
+ min-height: 0 !important;
1825
+ /* 用视口扣掉标题和工具条,不跟父级 height:auto 走。父级被壳裁切时这里仍出滚动条。 */
1826
+ max-height: calc(100vh - 132px) !important;
1827
+ overflow: auto !important;
1828
+ }
1829
+
1830
+ /* 设计器 antd 预览:内容区不要整块滚,否则打印工具条会跟着纸张走。只滚 .kt-preview-main。 */
1831
+ .kt-preview-modal .ant-modal-body,
1832
+ .kt-mimic-arco-modal .kt-preview-modal .ant-modal-body {
1833
+ display: flex !important;
1834
+ flex-direction: column !important;
1835
+ flex: 1 1 auto !important;
1836
+ min-height: 0 !important;
1837
+ overflow: hidden !important;
1838
+ }
1839
+
1840
+ .kt-preview-modal .kt-preview--modal,
1841
+ .kt-mimic-arco-modal .kt-preview-modal .kt-preview--modal {
1842
+ display: flex !important;
1843
+ flex-direction: column !important;
1844
+ flex: 1 1 0% !important;
1845
+ min-height: 0 !important;
1846
+ overflow: hidden !important;
1847
+ }
1848
+
1849
+ .kt-preview-modal .kt-preview-print-bar,
1850
+ .kt-mimic-arco-modal .kt-preview-modal .kt-preview-print-bar {
1851
+ flex: 0 0 auto !important;
1852
+ }
1853
+
1854
+ .kt-preview-modal .kt-preview-body,
1855
+ .kt-mimic-arco-modal .kt-preview-modal .kt-preview-body {
1856
+ display: flex !important;
1857
+ flex: 1 1 0% !important;
1858
+ align-items: stretch !important;
1859
+ min-height: 0 !important;
1860
+ min-width: 0 !important;
1861
+ overflow: hidden !important;
1862
+ }
1863
+
1864
+ .kt-preview-modal .kt-preview-main,
1865
+ .kt-mimic-arco-modal .kt-preview-modal .kt-preview-main {
1866
+ flex: 1 1 auto !important;
1867
+ align-self: stretch !important;
1868
+ min-width: 0 !important;
1869
+ min-height: 0 !important;
1870
+ height: auto !important;
1871
+ max-height: none !important;
1872
+ overflow: auto !important;
1873
+ }
1874
+
1582
1875
  .kt-preview-page-chrome--fill .kt-report-preview-host {
1583
1876
  flex: 1;
1584
1877
  min-height: 0;