@java0racle/loongair-ui 0.0.1

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/index.css ADDED
@@ -0,0 +1,695 @@
1
+ :root {
2
+ /*
3
+ Loongair Design Tokens(统一维护入口)
4
+ - 命名:--la-<category>-<token>
5
+ - 仅放“设计系统”级别 token;组件内部用 token 派生,避免硬编码
6
+ - 后续可按 Pixso Variables/Styles 对齐替换数值
7
+ */
8
+
9
+ /* ---------- Color / 基础色板 ---------- */
10
+ --la-color-primary: #007fff;
11
+ --la-color-success: #00b042;
12
+ --la-color-warning: #ff9200;
13
+ --la-color-danger: #ff5219;
14
+ --la-color-info: #7e868e;
15
+
16
+ /* ---------- Color / 中性色(文本、边框、背景)---------- */
17
+ /* From Pixso DSL (most common): #303133 / #606266 / #a8abb2 / #909399 */
18
+ --la-text-1: #303133;
19
+ --la-text-2: #606266;
20
+ --la-text-3: #909399;
21
+ --la-text-4: #a8abb2;
22
+
23
+ /* Border colors: Pixso selection didn't surface explicit border palette; keep semantic defaults */
24
+ --la-border-1: #dcdfe6;
25
+ --la-border-2: #e4e7ed;
26
+ --la-border-3: #ebeef5;
27
+ --la-border-4: #f2f6fc;
28
+
29
+ /* From Pixso DSL: #ffffff, #f5f7fa, #fafafa */
30
+ --la-bg-1: #ffffff;
31
+ --la-bg-2: #f5f7fa;
32
+ --la-bg-3: #fafafa;
33
+ --la-bg-overlay: rgba(0, 0, 0, 0.4);
34
+
35
+ /* ---------- Typography / 字体 ---------- */
36
+ /* From Pixso DSL: PingFang SC Regular is present; keep system stack but prefer PingFang SC */
37
+ --la-font-family: "PingFang SC", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
38
+ "Apple Color Emoji", "Segoe UI Emoji";
39
+
40
+ /* From Pixso DSL (most common): 14px, also 12px */
41
+ --la-font-size-xs: 12px;
42
+ --la-font-size-sm: 13px;
43
+ --la-font-size-md: 14px;
44
+ --la-font-size-lg: 16px;
45
+ --la-font-size-xl: 20px;
46
+
47
+ --la-line-height-sm: 1.4;
48
+ --la-line-height-md: 1.6;
49
+ --la-line-height-lg: 1.75;
50
+
51
+ /* ---------- Radius / 圆角 ---------- */
52
+ --la-radius-xs: 4px;
53
+ --la-radius-sm: 6px;
54
+ --la-radius-md: 8px;
55
+ --la-radius-lg: 12px;
56
+
57
+ /* ---------- Spacing / 间距(4px 栅格)---------- */
58
+ --la-space-1: 4px;
59
+ --la-space-2: 8px;
60
+ --la-space-3: 12px;
61
+ --la-space-4: 16px;
62
+ --la-space-5: 20px;
63
+ --la-space-6: 24px;
64
+ --la-space-8: 32px;
65
+
66
+ /* ---------- Shadow / 阴影 ---------- */
67
+ --la-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
68
+ --la-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.08);
69
+
70
+ /* ---------- Bridge / Element Plus 语义变量映射 ---------- */
71
+ /*
72
+ 目的:让组件库(Element Plus)直接消费 Loongair tokens,
73
+ 从而把“公共颜色”收敛到 `--la-*` 一处维护。
74
+ */
75
+
76
+ /* Brand */
77
+ --el-color-primary: var(--la-color-primary);
78
+ --el-color-success: var(--la-color-success);
79
+ --el-color-warning: var(--la-color-warning);
80
+ --el-color-danger: var(--la-color-danger);
81
+ --el-color-info: var(--la-color-info);
82
+
83
+ /* RGB(避免 Element Plus 侧仍使用默认 rgb 常量) */
84
+ --el-color-primary-rgb: 0, 127, 255;
85
+ --el-color-success-rgb: 0, 176, 66;
86
+ --el-color-warning-rgb: 255, 146, 0;
87
+ --el-color-danger-rgb: 255, 82, 25;
88
+ --el-color-info-rgb: 126, 134, 142;
89
+
90
+ /*
91
+ Element Plus 会直接消费这些派生变量(hover/active/disabled 等状态),
92
+ 仅覆盖 --el-color-* 不足以改变整体观感。
93
+ 这里使用 color-mix 以主色派生浅色与深色,达到“一处改,全局跟随”。
94
+ */
95
+
96
+ /* Primary derived */
97
+ --el-color-primary-light-3: color-mix(in srgb, var(--la-color-primary) 70%, white);
98
+ --el-color-primary-light-5: color-mix(in srgb, var(--la-color-primary) 50%, white);
99
+ --el-color-primary-light-7: color-mix(in srgb, var(--la-color-primary) 30%, white);
100
+ --el-color-primary-light-8: color-mix(in srgb, var(--la-color-primary) 20%, white);
101
+ --el-color-primary-light-9: color-mix(in srgb, var(--la-color-primary) 10%, white);
102
+ --el-color-primary-dark-2: color-mix(in srgb, var(--la-color-primary) 80%, black);
103
+
104
+ /* Success derived */
105
+ --el-color-success-light-3: color-mix(in srgb, var(--la-color-success) 70%, white);
106
+ --el-color-success-light-5: color-mix(in srgb, var(--la-color-success) 50%, white);
107
+ --el-color-success-light-7: color-mix(in srgb, var(--la-color-success) 30%, white);
108
+ --el-color-success-light-8: color-mix(in srgb, var(--la-color-success) 20%, white);
109
+ --el-color-success-light-9: color-mix(in srgb, var(--la-color-success) 10%, white);
110
+ --el-color-success-dark-2: color-mix(in srgb, var(--la-color-success) 80%, black);
111
+
112
+ /* Warning derived */
113
+ --el-color-warning-light-3: color-mix(in srgb, var(--la-color-warning) 70%, white);
114
+ --el-color-warning-light-5: color-mix(in srgb, var(--la-color-warning) 50%, white);
115
+ --el-color-warning-light-7: color-mix(in srgb, var(--la-color-warning) 30%, white);
116
+ --el-color-warning-light-8: color-mix(in srgb, var(--la-color-warning) 20%, white);
117
+ --el-color-warning-light-9: color-mix(in srgb, var(--la-color-warning) 10%, white);
118
+ --el-color-warning-dark-2: color-mix(in srgb, var(--la-color-warning) 80%, black);
119
+
120
+ /* Danger derived */
121
+ --el-color-danger-light-3: color-mix(in srgb, var(--la-color-danger) 70%, white);
122
+ --el-color-danger-light-5: color-mix(in srgb, var(--la-color-danger) 50%, white);
123
+ --el-color-danger-light-7: color-mix(in srgb, var(--la-color-danger) 30%, white);
124
+ --el-color-danger-light-8: color-mix(in srgb, var(--la-color-danger) 20%, white);
125
+ --el-color-danger-light-9: color-mix(in srgb, var(--la-color-danger) 10%, white);
126
+ --el-color-danger-dark-2: color-mix(in srgb, var(--la-color-danger) 80%, black);
127
+
128
+ /* Info derived */
129
+ --el-color-info-light-3: color-mix(in srgb, var(--la-color-info) 70%, white);
130
+ --el-color-info-light-5: color-mix(in srgb, var(--la-color-info) 50%, white);
131
+ --el-color-info-light-7: color-mix(in srgb, var(--la-color-info) 30%, white);
132
+ --el-color-info-light-8: color-mix(in srgb, var(--la-color-info) 20%, white);
133
+ --el-color-info-light-9: color-mix(in srgb, var(--la-color-info) 10%, white);
134
+ --el-color-info-dark-2: color-mix(in srgb, var(--la-color-info) 80%, black);
135
+
136
+ /* Text */
137
+ --el-text-color-primary: var(--la-text-1);
138
+ --el-text-color-regular: var(--la-text-2);
139
+ --el-text-color-secondary: var(--la-text-3);
140
+ --el-text-color-placeholder: var(--la-text-4);
141
+
142
+ /* Border */
143
+ --el-border-color: var(--la-border-1);
144
+ --el-border-color-light: var(--la-border-2);
145
+ --el-border-color-lighter: var(--la-border-3);
146
+ --el-border-color-extra-light: var(--la-border-4);
147
+
148
+ /* Background */
149
+ --el-bg-color: var(--la-bg-1);
150
+ --el-bg-color-page: var(--la-bg-2);
151
+ --el-bg-color-overlay: var(--la-bg-1);
152
+
153
+ /* Overlay */
154
+ --el-overlay-color-lighter: var(--la-bg-overlay);
155
+ }
156
+
157
+ /* 组件库全局样式入口(尽量保持轻量,业务样式放 demo) */
158
+
159
+ /* ---------- 全局字体设置 ---------- */
160
+
161
+ /* 为组件库所有元素设置默认字体,优先使用 PingFang SC */
162
+
163
+ .la-theme,
164
+ .la-theme * {
165
+ font-family: var(--la-font-family);
166
+ }
167
+
168
+ /* 根元素字体设置(当在 html/body 上添加 la-theme 类时生效) */
169
+
170
+ .la-theme {
171
+ font-size: var(--la-font-size-md, 14px);
172
+ line-height: var(--la-line-height-md, 1.6);
173
+ color: var(--la-text-1, #303133);
174
+ }
175
+
176
+ /* 确保所有组件继承字体 */
177
+
178
+ [class^="la-"],
179
+ [class^="el-"] {
180
+ font-family: inherit;
181
+ }
182
+
183
+ /* ---------- Tabs 默认样式 ---------- */
184
+
185
+ /* 对齐 demo 的默认内容区视觉,减少业务侧二次重写成本 */
186
+
187
+ .la-theme .la-tabs.el-tabs--card > .el-tabs__content {
188
+ padding: 32px;
189
+ color: #6b778c;
190
+ font-size: 32px;
191
+ font-weight: 600;
192
+ }
193
+
194
+ /* ---------- Select 默认样式 ---------- */
195
+
196
+ /* 统一多选标签的间距与视觉,减少 demo/业务重复覆盖 */
197
+
198
+ .la-theme .la-select .el-select__tags {
199
+ gap: 4px;
200
+ }
201
+
202
+ .la-theme .la-select .el-tag--info {
203
+ background-color: rgba(250, 250, 250, 1);
204
+ border-color: rgba(126, 134, 142, 0.16);
205
+ color: rgba(0, 0, 0, 0.4);
206
+ font-size: 12px;
207
+ padding: 2px 8px;
208
+ height: 24px;
209
+ line-height: 16px;
210
+ }
211
+
212
+ .la-theme .la-select .el-tag--info .el-tag__close {
213
+ color: rgba(0, 0, 0, 0.4);
214
+ margin-left: 4px;
215
+ }
216
+
217
+ /* ---------- Pagination 默认样式 ---------- */
218
+
219
+ .la-theme .la-pagination {
220
+ --el-pagination-font-size: 14px;
221
+ --el-pagination-button-width: 24px;
222
+ --el-pagination-button-height: 24px;
223
+ }
224
+
225
+ .la-theme .la-pagination .el-pagination .el-pager li {
226
+ min-width: 24px;
227
+ height: 24px;
228
+ line-height: 22px;
229
+ border-radius: 2px;
230
+ font-size: 14px;
231
+ margin: 0 2px;
232
+ }
233
+
234
+ .la-theme .la-pagination .el-pagination .btn-prev,
235
+ .la-theme .la-pagination .el-pagination .btn-next {
236
+ min-width: 24px;
237
+ height: 24px;
238
+ line-height: 22px;
239
+ border-radius: 2px;
240
+ padding: 0 4px;
241
+ }
242
+
243
+ /* ---------- Steps 默认样式 ---------- */
244
+
245
+ .la-theme .la-steps .el-step__title {
246
+ font-size: 14px;
247
+ font-weight: 500;
248
+ }
249
+
250
+ .la-theme .la-steps .el-step__description {
251
+ font-size: 12px;
252
+ color: #909399;
253
+ }
254
+
255
+ /* ---------- Alert 默认样式 ---------- */
256
+
257
+ .la-theme .la-alert.el-alert {
258
+ padding: 12px 16px;
259
+ border-radius: 4px;
260
+ }
261
+
262
+ .la-theme .la-alert .el-alert__title {
263
+ font-size: 14px;
264
+ font-weight: 500;
265
+ line-height: 1.4;
266
+ }
267
+
268
+ .la-theme .la-alert .el-alert__description {
269
+ font-size: 12px;
270
+ line-height: 1.5;
271
+ margin-top: 4px;
272
+ }
273
+
274
+ .la-theme .la-alert .el-alert__icon {
275
+ width: 20px;
276
+ height: 20px;
277
+ font-size: 16px;
278
+ }
279
+
280
+ /* ---------- Tag 默认样式 ---------- */
281
+
282
+ .la-theme .la-tag.el-tag {
283
+ --el-tag-border-radius: 2px;
284
+ }
285
+
286
+ .la-theme .la-tag .el-tag__close {
287
+ margin-left: 4px;
288
+ }
289
+
290
+ /* ---------- Result 默认样式 ---------- */
291
+
292
+ .la-theme .la-result .el-result {
293
+ padding: 16px 8px;
294
+ }
295
+
296
+ /* ---------- Drawer 默认样式 ---------- */
297
+
298
+ .la-theme .la-drawer .el-drawer {
299
+ border-radius: 0;
300
+ }
301
+
302
+ .la-theme .la-drawer .el-drawer__header {
303
+ padding: 20px;
304
+ margin-bottom: 0;
305
+ border-bottom: 1px solid #ebeef5;
306
+ font-size: 16px;
307
+ font-weight: 500;
308
+ color: #303133;
309
+ height: 73px;
310
+ box-sizing: border-box;
311
+ display: flex;
312
+ align-items: center;
313
+ }
314
+
315
+ .la-theme .la-drawer .el-drawer__body {
316
+ padding: 0;
317
+ overflow: hidden;
318
+ }
319
+
320
+ .la-theme .la-drawer .el-drawer__footer {
321
+ padding: 0;
322
+ }
323
+
324
+ /* ---------- Descriptions 默认样式 ---------- */
325
+
326
+ .la-theme .la-descriptions .el-descriptions__header {
327
+ margin-bottom: 16px;
328
+ }
329
+
330
+ .la-theme .la-descriptions .el-descriptions__title {
331
+ font-size: 16px;
332
+ font-weight: 500;
333
+ color: rgba(23, 26, 29, 0.9);
334
+ }
335
+
336
+ .la-theme .la-descriptions.is-large .el-descriptions__header {
337
+ margin-bottom: 20px;
338
+ }
339
+
340
+ .la-theme .la-descriptions.is-large .el-descriptions__title {
341
+ font-size: 18px;
342
+ }
343
+
344
+ .la-theme .la-descriptions.is-small .el-descriptions__header {
345
+ margin-bottom: 12px;
346
+ }
347
+
348
+ .la-theme .la-descriptions.is-small .el-descriptions__title {
349
+ font-size: 14px;
350
+ }
351
+
352
+ .la-theme .la-descriptions .el-descriptions__label {
353
+ color: rgba(0, 0, 0, 0.4);
354
+ font-weight: 400;
355
+ background-color: transparent;
356
+ }
357
+
358
+ .la-theme .la-descriptions .el-descriptions__body .el-descriptions__label {
359
+ background-color: #f5f7fa;
360
+ }
361
+
362
+ .la-theme .la-descriptions .el-descriptions__content {
363
+ color: rgba(23, 26, 29, 0.9);
364
+ }
365
+
366
+ .la-theme .la-descriptions .el-descriptions__body,
367
+ .la-theme .la-descriptions .el-descriptions__body th,
368
+ .la-theme .la-descriptions .el-descriptions__body td {
369
+ border-color: rgba(126, 134, 142, 0.16);
370
+ }
371
+
372
+ .la-theme .la-descriptions.is-large .el-descriptions__cell {
373
+ padding: 16px 20px;
374
+ font-size: 14px;
375
+ }
376
+
377
+ .la-theme .la-descriptions .el-descriptions__cell {
378
+ padding: 12px 16px;
379
+ font-size: 14px;
380
+ }
381
+
382
+ .la-theme .la-descriptions.is-small .el-descriptions__cell {
383
+ padding: 8px 12px;
384
+ font-size: 13px;
385
+ }
386
+
387
+ .la-theme .la-descriptions:not(.is-bordered) .el-descriptions__label {
388
+ background-color: transparent;
389
+ }
390
+
391
+ .la-theme .la-descriptions .el-tag {
392
+ vertical-align: middle;
393
+ }
394
+
395
+ .la-theme .la-descriptions.is-vertical .el-descriptions__label {
396
+ margin-bottom: 4px;
397
+ }
398
+
399
+ /* ---------- Collapse 默认样式 ---------- */
400
+
401
+ .la-theme .la-collapse.el-collapse {
402
+ border-top: 1px solid rgba(126, 134, 142, 0.24);
403
+ border-bottom: none;
404
+ }
405
+
406
+ .la-theme .la-collapse .el-collapse-item {
407
+ background-color: #ffffff;
408
+ }
409
+
410
+ .la-theme .la-collapse .el-collapse-item__header {
411
+ height: 48px;
412
+ min-height: 48px;
413
+ line-height: 48px;
414
+ padding: 0 12px;
415
+ background-color: #ffffff;
416
+ border-bottom: 1px solid rgba(126, 134, 142, 0.24);
417
+ font-size: 14px;
418
+ font-weight: 400;
419
+ color: #171a1d;
420
+ }
421
+
422
+ .la-theme .la-collapse .el-collapse-item__title {
423
+ font-size: 14px;
424
+ font-weight: 400;
425
+ color: #171a1d;
426
+ }
427
+
428
+ .la-theme .la-collapse .el-collapse-item__header .el-collapse-item__arrow {
429
+ width: 14px;
430
+ height: 14px;
431
+ font-size: 14px;
432
+ color: #303133;
433
+ margin: 0;
434
+ }
435
+
436
+ .la-theme .la-collapse .el-collapse-item__header .el-collapse-item__arrow.is-active {
437
+ transform: rotate(90deg);
438
+ }
439
+
440
+ .la-theme .la-collapse .el-collapse-item__wrap {
441
+ background-color: #ffffff;
442
+ border-bottom: 1px solid rgba(126, 134, 142, 0.24);
443
+ }
444
+
445
+ .la-theme .la-collapse .el-collapse-item__content {
446
+ padding: 12px;
447
+ font-size: 14px;
448
+ color: #171a1d;
449
+ line-height: 1.5;
450
+ }
451
+
452
+ /* ---------- DatePicker 默认样式 ---------- */
453
+
454
+ .la-theme .la-date-picker .el-date-editor .el-range-separator,
455
+ .la-theme .la-datetime-picker .el-date-editor .el-range-separator {
456
+ padding: 0 4px;
457
+ color: rgba(23, 26, 29, 0.4);
458
+ font-size: 14px;
459
+ }
460
+
461
+ .la-theme .la-date-picker .el-date-editor .el-range-input,
462
+ .la-theme .la-datetime-picker .el-date-editor .el-range-input {
463
+ text-align: center;
464
+ font-size: 14px;
465
+ }
466
+
467
+ .la-theme .la-date-picker .el-date-editor.is-disabled,
468
+ .la-theme .la-datetime-picker .el-date-editor.is-disabled {
469
+ background-color: rgba(245, 247, 250, 1);
470
+ }
471
+
472
+ .la-theme .la-date-picker .el-date-editor.is-disabled .el-range-input,
473
+ .la-theme .la-datetime-picker .el-date-editor.is-disabled .el-range-input {
474
+ color: rgba(23, 26, 29, 0.24);
475
+ }
476
+
477
+ .la-theme .la-datetime-picker .el-input.is-disabled .el-input__wrapper {
478
+ background-color: rgba(245, 247, 250, 1);
479
+ }
480
+
481
+ .la-theme .la-datetime-picker .el-input.is-disabled .el-input__inner {
482
+ color: rgba(23, 26, 29, 0.24);
483
+ }
484
+
485
+
486
+ /* ============================================================
487
+ LaTable - Pixso 设计稿样式封装
488
+ 对应 item-id=143:10363
489
+ ============================================================ */
490
+
491
+ /* ---------- 基础表格覆盖 ---------- */
492
+ .la-table {
493
+ --la-table-header-bg: #f5f7fa;
494
+ --la-table-border-color: rgba(126, 134, 142, 0.16);
495
+ --la-table-text-primary: rgba(23, 26, 29, 1);
496
+ --la-table-text-secondary: rgba(0, 0, 0, 0.4);
497
+ --la-table-hover-bg: rgba(245, 247, 250, 0.6);
498
+ --la-table-current-row-bg: rgba(0, 127, 255, 0.08);
499
+ --la-table-stripe-bg: #fafafa;
500
+
501
+ /* 覆盖 Element Plus 默认变量 */
502
+ --el-table-border-color: var(--la-table-border-color);
503
+ --el-table-border: 1px solid var(--la-table-border-color);
504
+ --el-table-header-bg-color: var(--la-table-header-bg);
505
+ --el-table-header-text-color: var(--la-table-text-secondary);
506
+ --el-table-row-hover-bg-color: var(--la-table-hover-bg);
507
+ --el-table-current-row-bg-color: var(--la-table-current-row-bg);
508
+
509
+ font-size: 14px;
510
+ font-family: var(
511
+ --la-font-family,
512
+ "PingFang SC",
513
+ ui-sans-serif,
514
+ system-ui,
515
+ -apple-system,
516
+ Segoe UI,
517
+ Roboto,
518
+ Helvetica,
519
+ Arial,
520
+ "Apple Color Emoji",
521
+ "Segoe UI Emoji"
522
+ );
523
+ color: var(--la-table-text-primary);
524
+ }
525
+
526
+ /* 强制显示表格外边框 */
527
+ .la-table.el-table {
528
+ border: 1px solid var(--la-table-border-color) !important;
529
+ border-radius: 0;
530
+ width: 100% !important; /* 确保表格填满容器,固定列需要 */
531
+ }
532
+
533
+ /* 单元格盒模型:边框包含在宽度内,不额外占用空间 */
534
+ .la-table .el-table__cell {
535
+ box-sizing: border-box;
536
+ }
537
+
538
+ /* 单元格纵向边框 - 当用户设置 border prop 时显示 */
539
+ .la-table.el-table--border {
540
+ border-right: 1px solid var(--la-table-border-color);
541
+ border-bottom: 1px solid var(--la-table-border-color);
542
+ }
543
+ .la-table.el-table--border .el-table__cell {
544
+ border-right: 1px solid var(--la-table-border-color);
545
+ }
546
+ .la-table.el-table--border th.el-table__cell {
547
+ border-bottom: 1px solid var(--la-table-border-color);
548
+ }
549
+
550
+ /* 表头底部边框线 */
551
+ .la-table .el-table__header-wrapper {
552
+ border-bottom: 1px solid var(--la-table-border-color);
553
+ }
554
+
555
+ /* 表格底部边框线 */
556
+ .la-table.el-table::before {
557
+ background-color: var(--la-table-border-color);
558
+ height: 1px;
559
+ }
560
+
561
+ /* ---------- 固定列样式 ---------- */
562
+ /* 保留 Element Plus 默认固定列实现,仅调整边框颜色 */
563
+ .la-table .el-table__fixed-left::before,
564
+ .la-table .el-table__fixed-right::before {
565
+ background-color: var(--la-table-border-color);
566
+ }
567
+
568
+ /* 固定列阴影效果 */
569
+ .la-table .el-table__fixed-left {
570
+ box-shadow: 6px 0 8px -4px rgba(0, 0, 0, 0.1);
571
+ }
572
+ .la-table .el-table__fixed-right {
573
+ box-shadow: -6px 0 8px -4px rgba(0, 0, 0, 0.1);
574
+ }
575
+
576
+ /* 固定列边框 */
577
+ .la-table.el-table--border .el-table__fixed-left {
578
+ border-right: 1px solid var(--la-table-border-color);
579
+ }
580
+ .la-table.el-table--border .el-table__fixed-right {
581
+ border-left: 1px solid var(--la-table-border-color);
582
+ }
583
+
584
+ /* 固定列单元格背景色 */
585
+ .la-table .el-table__fixed-left .el-table__cell,
586
+ .la-table .el-table__fixed-right .el-table__cell {
587
+ background-color: inherit;
588
+ }
589
+
590
+ /* ---------- 表头样式 ---------- */
591
+ .la-table .la-table__header-row {
592
+ background-color: var(--la-table-header-bg);
593
+ }
594
+ .la-table th.la-table__header-cell {
595
+ height: 40px;
596
+ padding: 0;
597
+ background-color: var(--la-table-header-bg) !important;
598
+ border-bottom: 1px solid var(--la-table-border-color);
599
+ }
600
+ .la-table th.la-table__header-cell .cell {
601
+ padding: 0 12px;
602
+ color: var(--la-table-text-secondary);
603
+ font-weight: 400;
604
+ line-height: 23px;
605
+ white-space: nowrap;
606
+ }
607
+
608
+ /* ---------- 数据行样式 ---------- */
609
+ .la-table .la-table__row {
610
+ background-color: #fff;
611
+ }
612
+ .la-table td.la-table__cell {
613
+ height: 40px;
614
+ padding: 0;
615
+ border-bottom: 1px solid var(--la-table-border-color);
616
+ }
617
+ .la-table td.la-table__cell .cell {
618
+ padding: 8px 12px;
619
+ line-height: 23px;
620
+ color: var(--la-table-text-primary);
621
+ }
622
+
623
+ /* ---------- 斑马纹 ---------- */
624
+ .la-table.el-table--striped .el-table__body tr.el-table__row--striped {
625
+ background-color: var(--la-table-stripe-bg);
626
+ }
627
+ .la-table.el-table--striped .el-table__body tr.el-table__row--striped td {
628
+ background-color: var(--la-table-stripe-bg);
629
+ }
630
+
631
+ /* ---------- 状态行高亮 ---------- */
632
+ /* success - 绿色 #00B042 12% */
633
+ .la-table .la-table__row--success td.la-table__cell {
634
+ background-color: rgba(0, 176, 66, 0.12) !important;
635
+ }
636
+
637
+ /* warning - 橙色 #FF9200 12% */
638
+ .la-table .la-table__row--warning td.la-table__cell {
639
+ background-color: rgba(255, 146, 0, 0.12) !important;
640
+ }
641
+
642
+ /* danger - 红色 #FF5219 12% */
643
+ .la-table .la-table__row--danger td.la-table__cell {
644
+ background-color: rgba(255, 82, 25, 0.12) !important;
645
+ }
646
+
647
+ /* info - 灰色 #7E868E 12% */
648
+ .la-table .la-table__row--info td.la-table__cell {
649
+ background-color: rgba(126, 134, 142, 0.12) !important;
650
+ }
651
+
652
+ /* 状态行 hover 保持原色 */
653
+ .la-table .la-table__row--success:hover td.la-table__cell,
654
+ .la-table .la-table__row--warning:hover td.la-table__cell,
655
+ .la-table .la-table__row--danger:hover td.la-table__cell,
656
+ .la-table .la-table__row--info:hover td.la-table__cell {
657
+ background-color: inherit !important;
658
+ }
659
+
660
+ /* ---------- 单行选中高亮 ---------- */
661
+ .la-table .el-table__body tr.current-row > td.la-table__cell {
662
+ background-color: var(--la-table-current-row-bg) !important;
663
+ }
664
+ .la-table .el-table__body tr.current-row:hover > td.la-table__cell {
665
+ background-color: rgba(0, 127, 255, 0.12) !important;
666
+ }
667
+
668
+ /* ---------- Checkbox 样式对齐 ---------- */
669
+ .la-table .el-checkbox__inner {
670
+ width: 14px;
671
+ height: 14px;
672
+ border-radius: 2px;
673
+ border-color: rgba(126, 134, 142, 0.4);
674
+ }
675
+ .la-table .el-checkbox__inner::after {
676
+ height: 8px;
677
+ left: 4px;
678
+ top: 1px;
679
+ }
680
+
681
+ /* ---------- 排序图标区域 ---------- */
682
+ .la-table th.la-table__header-cell--sortable .cell {
683
+ display: flex;
684
+ align-items: center;
685
+ gap: 4px;
686
+ }
687
+
688
+ /* ---------- 空状态 ---------- */
689
+ .la-table .el-table__empty-block {
690
+ min-height: 120px;
691
+ }
692
+ .la-table .el-table__empty-text {
693
+ color: var(--la-table-text-secondary);
694
+ font-size: 14px;
695
+ }