xto-fronted 0.7.0 → 0.8.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.
- package/dist/{index-BO31bICK.js → index-D73_-C9m.js} +2 -2
- package/dist/index-DBjV4kzh.js +249 -0
- package/dist/{index-k2XmHxrU.js → index-DJ1oHe08.js} +988 -933
- package/dist/{index-DkG24eV5.js → index-D_TGEwDg.js} +190 -138
- package/dist/{index-QdDB_2uu.js → index-DauAWAHG.js} +11 -11
- package/dist/index.js +1 -1
- package/dist/style.css +1 -1
- package/package.json +9 -9
- package/src/App.vue +1 -1
- package/src/assets/styles/_dark.scss +31 -31
- package/src/assets/styles/_reset.scss +4 -4
- package/src/assets/styles/_root.scss +87 -83
- package/src/assets/styles/_variables.scss +5 -5
- package/src/assets/styles/index.scss +11 -11
- package/src/components/Layout/Header.vue +21 -22
- package/src/components/Layout/MixTopMenu.vue +19 -20
- package/src/components/Layout/Sidebar.vue +2 -2
- package/src/components/Layout/SidebarMenuItem.vue +2 -2
- package/src/components/Layout/Tabs.vue +3 -3
- package/src/components/Layout/TopMenu.vue +19 -20
- package/src/stores/app.ts +28 -4
- package/src/views/dashboard/index.vue +109 -88
- package/src/views/error/404.vue +7 -7
- package/src/views/login/index.vue +11 -44
- package/src/views/system/menu/index.vue +14 -14
- package/src/views/system/role/index.vue +2 -2
- package/src/views/system/user/index.vue +3 -3
- package/vite.config.ts +4 -1
- package/dist/index-D4K3OfZa.js +0 -189
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "xto-fronted",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "XTO 前端应用框架",
|
|
@@ -54,14 +54,14 @@
|
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@types/node": "^20.11.30",
|
|
56
56
|
"@vitejs/plugin-vue": "^5.0.4",
|
|
57
|
-
"@xto/base": "^1.
|
|
58
|
-
"@xto/business": "^1.
|
|
59
|
-
"@xto/core": "^1.
|
|
60
|
-
"@xto/data": "^1.
|
|
61
|
-
"@xto/feedback": "^1.
|
|
62
|
-
"@xto/form": "^1.
|
|
63
|
-
"@xto/layout": "^1.
|
|
64
|
-
"@xto/navigation": "^1.
|
|
57
|
+
"@xto/base": "^1.8.0",
|
|
58
|
+
"@xto/business": "^1.6.0",
|
|
59
|
+
"@xto/core": "^1.7.0",
|
|
60
|
+
"@xto/data": "^1.6.0",
|
|
61
|
+
"@xto/feedback": "^1.6.0",
|
|
62
|
+
"@xto/form": "^1.8.0",
|
|
63
|
+
"@xto/layout": "^1.5.0",
|
|
64
|
+
"@xto/navigation": "^1.8.0",
|
|
65
65
|
"axios": "^1.6.8",
|
|
66
66
|
"pinia": "^2.1.7",
|
|
67
67
|
"sass": "^1.72.0",
|
package/src/App.vue
CHANGED
|
@@ -71,11 +71,11 @@ html.dark {
|
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
&.is-active {
|
|
74
|
-
color: var(--xto-color-primary, #
|
|
75
|
-
background-color: rgba(
|
|
74
|
+
color: var(--xto-color-primary, #818CF8) !important;
|
|
75
|
+
background-color: rgba(129, 140, 248, 0.12) !important;
|
|
76
76
|
|
|
77
77
|
&::before {
|
|
78
|
-
background-color: var(--xto-color-primary, #
|
|
78
|
+
background-color: var(--xto-color-primary, #818CF8);
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
81
|
|
|
@@ -87,7 +87,7 @@ html.dark {
|
|
|
87
87
|
|
|
88
88
|
&.is-active {
|
|
89
89
|
background-color: transparent !important;
|
|
90
|
-
border-bottom-color: var(--xto-color-primary, #
|
|
90
|
+
border-bottom-color: var(--xto-color-primary, #818CF8);
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
93
|
}
|
|
@@ -117,8 +117,8 @@ html.dark {
|
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
&.is-active {
|
|
120
|
-
color: var(--xto-color-primary, #
|
|
121
|
-
background-color: rgba(
|
|
120
|
+
color: var(--xto-color-primary, #818CF8) !important;
|
|
121
|
+
background-color: rgba(129, 140, 248, 0.12) !important;
|
|
122
122
|
}
|
|
123
123
|
}
|
|
124
124
|
}
|
|
@@ -132,7 +132,7 @@ html.dark {
|
|
|
132
132
|
}
|
|
133
133
|
|
|
134
134
|
&.is-active > .x-sub-menu__title {
|
|
135
|
-
color: var(--xto-color-primary, #
|
|
135
|
+
color: var(--xto-color-primary, #818CF8) !important;
|
|
136
136
|
}
|
|
137
137
|
|
|
138
138
|
// 水平模式下的子菜单
|
|
@@ -221,8 +221,8 @@ html.dark {
|
|
|
221
221
|
}
|
|
222
222
|
|
|
223
223
|
&__menu-char {
|
|
224
|
-
background-color: rgba(
|
|
225
|
-
color: var(--xto-color-primary-light-3, #
|
|
224
|
+
background-color: rgba(129, 140, 248, 0.2);
|
|
225
|
+
color: var(--xto-color-primary-light-3, #6158E7);
|
|
226
226
|
}
|
|
227
227
|
|
|
228
228
|
&__action {
|
|
@@ -230,7 +230,7 @@ html.dark {
|
|
|
230
230
|
|
|
231
231
|
&:hover {
|
|
232
232
|
background-color: var(--xto-fill-color, #1A2027);
|
|
233
|
-
color: var(--xto-color-primary, #
|
|
233
|
+
color: var(--xto-color-primary, #818CF8);
|
|
234
234
|
}
|
|
235
235
|
}
|
|
236
236
|
|
|
@@ -282,13 +282,13 @@ html.dark {
|
|
|
282
282
|
color: var(--xto-color-text-regular, #D9DCE1);
|
|
283
283
|
|
|
284
284
|
&:hover {
|
|
285
|
-
border-color: var(--xto-color-primary, #
|
|
286
|
-
color: var(--xto-color-primary, #
|
|
285
|
+
border-color: var(--xto-color-primary, #818CF8);
|
|
286
|
+
color: var(--xto-color-primary, #818CF8);
|
|
287
287
|
}
|
|
288
288
|
}
|
|
289
289
|
|
|
290
290
|
&.x-button--text {
|
|
291
|
-
color: var(--xto-color-primary, #
|
|
291
|
+
color: var(--xto-color-primary, #818CF8);
|
|
292
292
|
}
|
|
293
293
|
}
|
|
294
294
|
|
|
@@ -307,7 +307,7 @@ html.dark {
|
|
|
307
307
|
border-color: var(--xto-border-color-light, #1A2027);
|
|
308
308
|
|
|
309
309
|
&.is-focus {
|
|
310
|
-
border-color: var(--xto-color-primary, #
|
|
310
|
+
border-color: var(--xto-color-primary, #818CF8);
|
|
311
311
|
}
|
|
312
312
|
|
|
313
313
|
.x-input__inner {
|
|
@@ -395,7 +395,7 @@ html.dark {
|
|
|
395
395
|
background-color: var(--xto-border-color-light, #1A2027);
|
|
396
396
|
|
|
397
397
|
&.is-checked {
|
|
398
|
-
background-color: var(--xto-color-primary, #
|
|
398
|
+
background-color: var(--xto-color-primary, #818CF8);
|
|
399
399
|
}
|
|
400
400
|
}
|
|
401
401
|
|
|
@@ -409,20 +409,20 @@ html.dark {
|
|
|
409
409
|
color: var(--xto-color-text-regular, #D9DCE1);
|
|
410
410
|
|
|
411
411
|
&:hover {
|
|
412
|
-
color: var(--xto-color-primary, #
|
|
412
|
+
color: var(--xto-color-primary, #818CF8);
|
|
413
413
|
}
|
|
414
414
|
|
|
415
415
|
&.is-active {
|
|
416
|
-
background-color: var(--xto-color-primary, #
|
|
417
|
-
border-color: var(--xto-color-primary, #
|
|
418
|
-
color: var(--xto-color-on-primary, #
|
|
416
|
+
background-color: var(--xto-color-primary, #818CF8);
|
|
417
|
+
border-color: var(--xto-color-primary, #818CF8);
|
|
418
|
+
color: var(--xto-color-on-primary, #FFFFFF);
|
|
419
419
|
}
|
|
420
420
|
}
|
|
421
421
|
}
|
|
422
422
|
|
|
423
423
|
// 登录页面(新版左右分区:品牌区 + 表单区)
|
|
424
424
|
.login-brand {
|
|
425
|
-
background: linear-gradient(135deg, #0E1216 0%, #074442 45%, #
|
|
425
|
+
background: linear-gradient(135deg, #0E1216 0%, #074442 45%, #3730A3 100%) !important;
|
|
426
426
|
}
|
|
427
427
|
|
|
428
428
|
.login-form-section {
|
|
@@ -450,12 +450,12 @@ html.dark {
|
|
|
450
450
|
|
|
451
451
|
&:hover {
|
|
452
452
|
background: var(--xto-color-primary-light-8, #074442) !important;
|
|
453
|
-
color: var(--xto-color-primary, #
|
|
453
|
+
color: var(--xto-color-primary, #818CF8) !important;
|
|
454
454
|
}
|
|
455
455
|
}
|
|
456
456
|
|
|
457
457
|
.forgot-link {
|
|
458
|
-
color: var(--xto-color-primary, #
|
|
458
|
+
color: var(--xto-color-primary, #818CF8) !important;
|
|
459
459
|
}
|
|
460
460
|
}
|
|
461
461
|
|
|
@@ -469,7 +469,7 @@ html.dark {
|
|
|
469
469
|
}
|
|
470
470
|
|
|
471
471
|
.login__title {
|
|
472
|
-
color: var(--xto-color-primary, #
|
|
472
|
+
color: var(--xto-color-primary, #818CF8);
|
|
473
473
|
}
|
|
474
474
|
|
|
475
475
|
.login__subtitle {
|
|
@@ -489,7 +489,7 @@ html.dark {
|
|
|
489
489
|
background-color: var(--xto-fill-color, #1A2027);
|
|
490
490
|
|
|
491
491
|
&:hover {
|
|
492
|
-
background-color: rgba(
|
|
492
|
+
background-color: rgba(129, 140, 248, 0.12);
|
|
493
493
|
}
|
|
494
494
|
|
|
495
495
|
&__title {
|
|
@@ -559,12 +559,12 @@ html.dark {
|
|
|
559
559
|
background-color: transparent;
|
|
560
560
|
|
|
561
561
|
&:hover {
|
|
562
|
-
border-color: var(--xto-color-primary, #
|
|
562
|
+
border-color: var(--xto-color-primary, #818CF8);
|
|
563
563
|
}
|
|
564
564
|
|
|
565
565
|
&.is-active {
|
|
566
|
-
border-color: var(--xto-color-primary, #
|
|
567
|
-
background-color: rgba(
|
|
566
|
+
border-color: var(--xto-color-primary, #818CF8);
|
|
567
|
+
background-color: rgba(129, 140, 248, 0.12);
|
|
568
568
|
}
|
|
569
569
|
|
|
570
570
|
&__label {
|
|
@@ -585,7 +585,7 @@ html.dark {
|
|
|
585
585
|
border-bottom-color: var(--xto-border-color, #4E5566);
|
|
586
586
|
|
|
587
587
|
&__logo-text {
|
|
588
|
-
color: var(--xto-color-primary, #
|
|
588
|
+
color: var(--xto-color-primary, #818CF8);
|
|
589
589
|
}
|
|
590
590
|
|
|
591
591
|
&__menu {
|
|
@@ -593,8 +593,8 @@ html.dark {
|
|
|
593
593
|
}
|
|
594
594
|
|
|
595
595
|
&__menu-char {
|
|
596
|
-
color: var(--xto-color-primary-light-3, #
|
|
597
|
-
background-color: rgba(
|
|
596
|
+
color: var(--xto-color-primary-light-3, #6158E7);
|
|
597
|
+
background-color: rgba(129, 140, 248, 0.2);
|
|
598
598
|
}
|
|
599
599
|
|
|
600
600
|
&__action {
|
|
@@ -602,7 +602,7 @@ html.dark {
|
|
|
602
602
|
|
|
603
603
|
&:hover {
|
|
604
604
|
background-color: var(--xto-fill-color, #1A2027);
|
|
605
|
-
color: var(--xto-color-primary, #
|
|
605
|
+
color: var(--xto-color-primary, #818CF8);
|
|
606
606
|
}
|
|
607
607
|
}
|
|
608
608
|
|
|
@@ -37,13 +37,13 @@ body {
|
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
a {
|
|
40
|
-
color: var(--xto-color-primary, #
|
|
40
|
+
color: var(--xto-color-primary, #4F46E5);
|
|
41
41
|
text-decoration: none;
|
|
42
42
|
cursor: pointer;
|
|
43
43
|
transition: color var(--xto-transition-duration-fast, 150ms);
|
|
44
44
|
|
|
45
45
|
&:hover {
|
|
46
|
-
color: var(--xto-color-primary-light-3, #
|
|
46
|
+
color: var(--xto-color-primary-light-3, #726BEA);
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
|
|
@@ -121,6 +121,6 @@ p {
|
|
|
121
121
|
|
|
122
122
|
// 选中文本样式
|
|
123
123
|
::selection {
|
|
124
|
-
background-color: var(--xto-color-primary-light-8, #
|
|
125
|
-
color: var(--xto-color-primary, #
|
|
124
|
+
background-color: var(--xto-color-primary-light-8, #DCDAFC);
|
|
125
|
+
color: var(--xto-color-primary, #4F46E5);
|
|
126
126
|
}
|
|
@@ -1,30 +1,32 @@
|
|
|
1
1
|
// ==============================================
|
|
2
2
|
// CSS Variables - XTO UI Design Token System
|
|
3
|
-
//
|
|
3
|
+
// 企业级靛蓝(Enterprise Indigo #4F46E5)+ 石墨灰中性色
|
|
4
|
+
// 与 @xto/core 1.7.0 主题体系保持一致
|
|
4
5
|
// ==============================================
|
|
5
6
|
|
|
6
7
|
:root {
|
|
7
|
-
// 主色调 -
|
|
8
|
-
--xto-color-primary: #
|
|
9
|
-
--xto-color-on-primary: #
|
|
10
|
-
--xto-color-primary-light-1: #
|
|
11
|
-
--xto-color-primary-light-2: #
|
|
12
|
-
--xto-color-primary-light-3: #
|
|
13
|
-
--xto-color-primary-light-4: #
|
|
14
|
-
--xto-color-primary-light-5: #
|
|
15
|
-
--xto-color-primary-light-6: #
|
|
16
|
-
--xto-color-primary-light-7: #
|
|
17
|
-
--xto-color-primary-light-8: #
|
|
18
|
-
--xto-color-primary-light-9: #
|
|
19
|
-
--xto-color-primary-dark-1: #
|
|
20
|
-
--xto-color-primary-dark-2: #
|
|
21
|
-
--xto-color-primary-dark-3: #
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
--xto-color-success
|
|
8
|
+
// 主色调 - 企业级靛蓝
|
|
9
|
+
--xto-color-primary: #4F46E5;
|
|
10
|
+
--xto-color-on-primary: #FFFFFF;
|
|
11
|
+
--xto-color-primary-light-1: #6158E7;
|
|
12
|
+
--xto-color-primary-light-2: #726BEA;
|
|
13
|
+
--xto-color-primary-light-3: #847DEC;
|
|
14
|
+
--xto-color-primary-light-4: #9590EF;
|
|
15
|
+
--xto-color-primary-light-5: #A7A2F2;
|
|
16
|
+
--xto-color-primary-light-6: #B9B5F5;
|
|
17
|
+
--xto-color-primary-light-7: #CAC7F9;
|
|
18
|
+
--xto-color-primary-light-8: #DCDAFC;
|
|
19
|
+
--xto-color-primary-light-9: #EDEDFC;
|
|
20
|
+
--xto-color-primary-dark-1: #4338CA;
|
|
21
|
+
--xto-color-primary-dark-2: #3730A3;
|
|
22
|
+
--xto-color-primary-dark-3: #312E81;
|
|
23
|
+
--xto-focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.15);
|
|
24
|
+
|
|
25
|
+
// 功能色 - 与 @xto/core 语义色一致
|
|
26
|
+
--xto-color-success: #00A870;
|
|
27
|
+
--xto-color-success-light: #6FDCAA;
|
|
26
28
|
--xto-color-success-lighter: #EAFBF3;
|
|
27
|
-
--xto-color-success-dark: #
|
|
29
|
+
--xto-color-success-dark: #008556;
|
|
28
30
|
|
|
29
31
|
--xto-color-warning: #FF7D00;
|
|
30
32
|
--xto-color-warning-light: #FFB36E;
|
|
@@ -32,23 +34,23 @@
|
|
|
32
34
|
--xto-color-warning-dark: #CC6200;
|
|
33
35
|
|
|
34
36
|
--xto-color-danger: #F53F3F;
|
|
35
|
-
--xto-color-danger-light: #
|
|
37
|
+
--xto-color-danger-light: #F99494;
|
|
36
38
|
--xto-color-danger-lighter: #FEF2F2;
|
|
37
|
-
--xto-color-danger-dark: #
|
|
39
|
+
--xto-color-danger-dark: #D42A2A;
|
|
38
40
|
|
|
39
41
|
--xto-color-info: #86909C;
|
|
40
42
|
--xto-color-info-light: #A9AEB8;
|
|
41
43
|
--xto-color-info-lighter: #F2F3F5;
|
|
42
44
|
--xto-color-info-dark: #4E5566;
|
|
43
45
|
|
|
44
|
-
// 文字颜色 -
|
|
46
|
+
// 文字颜色 - 石墨灰体系
|
|
45
47
|
--xto-color-text-primary: #1F2329;
|
|
46
48
|
--xto-color-text-regular: #4E5566;
|
|
47
49
|
--xto-color-text-secondary: #86909C;
|
|
48
50
|
--xto-color-text-placeholder: #A9AEB8;
|
|
49
51
|
--xto-color-text-disabled: #D9DCE1;
|
|
50
52
|
|
|
51
|
-
// 边框颜色 -
|
|
53
|
+
// 边框颜色 - 中性灰
|
|
52
54
|
--xto-border-color: #D9DCE1;
|
|
53
55
|
--xto-border-color-light: #E5E6EB;
|
|
54
56
|
--xto-border-color-lighter: #EDEEF1;
|
|
@@ -62,28 +64,28 @@
|
|
|
62
64
|
--xto-fill-color-blank: #FFFFFF;
|
|
63
65
|
--xto-fill-color-dark: #E5E6EB;
|
|
64
66
|
|
|
65
|
-
// 背景颜色 -
|
|
67
|
+
// 背景颜色 - 页面层级
|
|
66
68
|
--xto-bg-color: #FFFFFF;
|
|
67
69
|
--xto-bg-color-page: #F7F8FA;
|
|
68
70
|
--xto-bg-color-component: #FFFFFF;
|
|
69
71
|
--xto-bg-color-overlay: #FFFFFF;
|
|
70
|
-
--xto-bg-color-spotlight: #
|
|
71
|
-
|
|
72
|
-
// 盒子阴影 -
|
|
73
|
-
--xto-shadow-subtle: 0 1px 2px rgba(
|
|
74
|
-
--xto-shadow-base: 0 1px
|
|
75
|
-
0
|
|
76
|
-
--xto-shadow-elevated: 0
|
|
77
|
-
0 8px 24px rgba(
|
|
78
|
-
--xto-shadow-prominent: 0
|
|
79
|
-
0 16px
|
|
80
|
-
--xto-shadow-card: var(--xto-shadow-
|
|
81
|
-
--xto-shadow-card-hover: var(--xto-shadow-
|
|
72
|
+
--xto-bg-color-spotlight: #EDEDFC;
|
|
73
|
+
|
|
74
|
+
// 盒子阴影 - 仅中性色(禁止彩色投影)
|
|
75
|
+
--xto-shadow-subtle: 0 1px 2px rgba(31, 35, 41, 0.06);
|
|
76
|
+
--xto-shadow-base: 0 1px 3px rgba(31, 35, 41, 0.08),
|
|
77
|
+
0 4px 12px rgba(31, 35, 41, 0.06);
|
|
78
|
+
--xto-shadow-elevated: 0 4px 8px rgba(31, 35, 41, 0.08),
|
|
79
|
+
0 8px 24px rgba(31, 35, 41, 0.1);
|
|
80
|
+
--xto-shadow-prominent: 0 6px 16px rgba(31, 35, 41, 0.1),
|
|
81
|
+
0 16px 40px rgba(31, 35, 41, 0.14);
|
|
82
|
+
--xto-shadow-card: var(--xto-shadow-subtle);
|
|
83
|
+
--xto-shadow-card-hover: var(--xto-shadow-base);
|
|
82
84
|
|
|
83
85
|
// 字体 - 企业级字体栈
|
|
84
86
|
--xto-font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans SC', 'Source Han Sans SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
85
|
-
--xto-font-family-code: '
|
|
86
|
-
|
|
87
|
+
--xto-font-family-code: 'SF Mono', 'JetBrains Mono', 'Fira Code', Consolas,
|
|
88
|
+
'Liberation Mono', Menlo, monospace;
|
|
87
89
|
--xto-font-size-base: 14px;
|
|
88
90
|
--xto-font-size-small: 12px;
|
|
89
91
|
--xto-font-size-large: 16px;
|
|
@@ -92,13 +94,13 @@
|
|
|
92
94
|
--xto-font-size-hero: 38px;
|
|
93
95
|
--xto-font-line-height: 1.5714285714285714;
|
|
94
96
|
|
|
95
|
-
// 圆角 -
|
|
97
|
+
// 圆角 - 4/8/12/16 几何刻度(与 @xto/core 一致)
|
|
96
98
|
--xto-border-radius-base: 8px;
|
|
97
99
|
--xto-border-radius-small: 4px;
|
|
98
|
-
--xto-border-radius-large:
|
|
100
|
+
--xto-border-radius-large: 12px;
|
|
99
101
|
--xto-border-radius-extra-large: 16px;
|
|
100
102
|
--xto-border-radius-xl: 16px;
|
|
101
|
-
--xto-border-radius-round:
|
|
103
|
+
--xto-border-radius-round: 999px;
|
|
102
104
|
--xto-border-radius-circle: 50%;
|
|
103
105
|
|
|
104
106
|
// 间距 - 8px 基础网格
|
|
@@ -114,12 +116,12 @@
|
|
|
114
116
|
--component-size-default: 36px;
|
|
115
117
|
--component-size-small: 28px;
|
|
116
118
|
|
|
117
|
-
// 过渡 -
|
|
119
|
+
// 过渡 - 流畅动效(克制,无弹跳)
|
|
118
120
|
--xto-transition-duration: 0.2s;
|
|
119
121
|
--xto-transition-duration-fast: 0.1s;
|
|
120
122
|
--xto-transition-duration-slow: 0.3s;
|
|
121
|
-
--xto-transition-easing: cubic-bezier(0.
|
|
122
|
-
--xto-transition-easing-bounce: cubic-bezier(0.
|
|
123
|
+
--xto-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
|
|
124
|
+
--xto-transition-easing-bounce: cubic-bezier(0.4, 0, 0.2, 1);
|
|
123
125
|
|
|
124
126
|
// z-index - 层级管理
|
|
125
127
|
--z-index-dropdown: 1000;
|
|
@@ -137,53 +139,54 @@
|
|
|
137
139
|
--tabs-height: 40px;
|
|
138
140
|
--footer-height: 32px;
|
|
139
141
|
|
|
140
|
-
// 特殊效果
|
|
141
|
-
--xto-gradient-primary:
|
|
142
|
-
--xto-gradient-hero:
|
|
143
|
-
--xto-gradient-card:
|
|
144
|
-
--xto-gradient-mask:
|
|
142
|
+
// 特殊效果 - 企业规范:无装饰渐变,一律纯色(保留变量名兼容既有引用)
|
|
143
|
+
--xto-gradient-primary: #4F46E5;
|
|
144
|
+
--xto-gradient-hero: #4F46E5;
|
|
145
|
+
--xto-gradient-card: rgba(255, 255, 255, 0);
|
|
146
|
+
--xto-gradient-mask: rgba(79, 70, 229, 0);
|
|
145
147
|
}
|
|
146
148
|
|
|
147
|
-
// 暗色主题 -
|
|
149
|
+
// 暗色主题 - 中性石墨黑(与 @xto/core 暗色令牌一致)
|
|
148
150
|
html.dark {
|
|
149
|
-
--xto-color-primary: #
|
|
150
|
-
--xto-color-on-primary: #
|
|
151
|
-
--xto-color-primary-light-1: #
|
|
152
|
-
--xto-color-primary-light-2: #
|
|
153
|
-
--xto-color-primary-light-3: #
|
|
154
|
-
--xto-color-primary-light-4: #
|
|
155
|
-
--xto-color-primary-light-5: #
|
|
156
|
-
--xto-color-primary-light-6: #
|
|
157
|
-
--xto-color-primary-light-7: #
|
|
158
|
-
--xto-color-primary-light-8: #
|
|
159
|
-
--xto-color-primary-light-9: #
|
|
160
|
-
--xto-color-primary-dark-1: #
|
|
161
|
-
--xto-color-primary-dark-2: #
|
|
162
|
-
--xto-color-primary-dark-3: #
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
--xto-color-text-
|
|
166
|
-
--xto-color-text-
|
|
167
|
-
--xto-color-text-
|
|
168
|
-
--xto-color-text-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
--xto-border-color
|
|
151
|
+
--xto-color-primary: #818CF8;
|
|
152
|
+
--xto-color-on-primary: #0E1024;
|
|
153
|
+
--xto-color-primary-light-1: #747EDF;
|
|
154
|
+
--xto-color-primary-light-2: #6770C6;
|
|
155
|
+
--xto-color-primary-light-3: #5A62AE;
|
|
156
|
+
--xto-color-primary-light-4: #4D5495;
|
|
157
|
+
--xto-color-primary-light-5: #41467C;
|
|
158
|
+
--xto-color-primary-light-6: #343863;
|
|
159
|
+
--xto-color-primary-light-7: #272A4A;
|
|
160
|
+
--xto-color-primary-light-8: #1A1C32;
|
|
161
|
+
--xto-color-primary-light-9: #0D0E19;
|
|
162
|
+
--xto-color-primary-dark-1: #A5AAF8;
|
|
163
|
+
--xto-color-primary-dark-2: #A5AAF8;
|
|
164
|
+
--xto-color-primary-dark-3: #A5AAF8;
|
|
165
|
+
--xto-focus-ring: 0 0 0 3px rgba(129, 140, 248, 0.2);
|
|
166
|
+
|
|
167
|
+
--xto-color-text-primary: #F0F2F5;
|
|
168
|
+
--xto-color-text-regular: #C9CDD4;
|
|
169
|
+
--xto-color-text-secondary: #86909C;
|
|
170
|
+
--xto-color-text-placeholder: #5F6672;
|
|
171
|
+
--xto-color-text-disabled: #484D56;
|
|
172
|
+
|
|
173
|
+
--xto-border-color: #2A313A;
|
|
174
|
+
--xto-border-color-light: #232A32;
|
|
172
175
|
--xto-border-color-lighter: #1C232B;
|
|
173
|
-
--xto-border-color-extra-light: #
|
|
174
|
-
--xto-border-color-dark: #
|
|
176
|
+
--xto-border-color-extra-light: #171D24;
|
|
177
|
+
--xto-border-color-dark: #3A434E;
|
|
175
178
|
|
|
176
179
|
--xto-fill-color: #1E242B;
|
|
177
180
|
--xto-fill-color-light: #1C232B;
|
|
178
181
|
--xto-fill-color-lighter: #1F2329;
|
|
179
182
|
--xto-fill-color-blank: #161B21;
|
|
180
|
-
--xto-fill-color-dark: #
|
|
183
|
+
--xto-fill-color-dark: #2A313A;
|
|
181
184
|
|
|
182
185
|
--xto-bg-color: #161B21;
|
|
183
186
|
--xto-bg-color-page: #0E1216;
|
|
184
187
|
--xto-bg-color-component: #1E242B;
|
|
185
|
-
--xto-bg-color-overlay: #
|
|
186
|
-
--xto-bg-color-spotlight: #
|
|
188
|
+
--xto-bg-color-overlay: #1C232B;
|
|
189
|
+
--xto-bg-color-spotlight: #0D0E19;
|
|
187
190
|
|
|
188
191
|
--xto-shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
189
192
|
--xto-shadow-base: 0 1px 3px rgba(0, 0, 0, 0.3),
|
|
@@ -195,7 +198,8 @@ html.dark {
|
|
|
195
198
|
--xto-shadow-card: var(--xto-shadow-base);
|
|
196
199
|
--xto-shadow-card-hover: var(--xto-shadow-elevated);
|
|
197
200
|
|
|
198
|
-
--xto-gradient-primary:
|
|
199
|
-
--xto-gradient-hero:
|
|
200
|
-
--xto-gradient-card:
|
|
201
|
+
--xto-gradient-primary: #818CF8;
|
|
202
|
+
--xto-gradient-hero: #818CF8;
|
|
203
|
+
--xto-gradient-card: rgba(22, 27, 33, 0);
|
|
204
|
+
--xto-gradient-mask: rgba(129, 140, 248, 0);
|
|
201
205
|
}
|
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
// ==============================================
|
|
5
5
|
|
|
6
6
|
// 主题色 - Gauss 品牌深蓝
|
|
7
|
-
$color-primary: #
|
|
8
|
-
$color-primary-light: #
|
|
9
|
-
$color-primary-lighter: #
|
|
10
|
-
$color-primary-dark: #
|
|
11
|
-
$color-primary-darker: #
|
|
7
|
+
$color-primary: #4F46E5;
|
|
8
|
+
$color-primary-light: #726BEA;
|
|
9
|
+
$color-primary-lighter: #847DEC;
|
|
10
|
+
$color-primary-dark: #4338CA;
|
|
11
|
+
$color-primary-darker: #3730A3;
|
|
12
12
|
|
|
13
13
|
// 功能色
|
|
14
14
|
$color-success: #2BC48A;
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
|
|
118
118
|
// 颜色
|
|
119
119
|
.text-primary {
|
|
120
|
-
color: var(--xto-color-primary, #
|
|
120
|
+
color: var(--xto-color-primary, #4F46E5);
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
.text-success {
|
|
@@ -146,7 +146,7 @@
|
|
|
146
146
|
|
|
147
147
|
// 背景
|
|
148
148
|
.bg-primary {
|
|
149
|
-
background-color: var(--xto-color-primary, #
|
|
149
|
+
background-color: var(--xto-color-primary, #4F46E5);
|
|
150
150
|
}
|
|
151
151
|
|
|
152
152
|
.bg-success {
|
|
@@ -308,8 +308,8 @@
|
|
|
308
308
|
}
|
|
309
309
|
|
|
310
310
|
.badge-primary {
|
|
311
|
-
background: var(--xto-color-primary-light-6, #
|
|
312
|
-
color: var(--xto-color-primary, #
|
|
311
|
+
background: var(--xto-color-primary-light-6, #B9B5F5);
|
|
312
|
+
color: var(--xto-color-primary, #4F46E5);
|
|
313
313
|
}
|
|
314
314
|
|
|
315
315
|
.badge-success {
|
|
@@ -374,7 +374,7 @@
|
|
|
374
374
|
width: 32px;
|
|
375
375
|
height: 32px;
|
|
376
376
|
border: 3px solid var(--xto-border-color-lighter, #F2F3F5);
|
|
377
|
-
border-top-color: var(--xto-color-primary, #
|
|
377
|
+
border-top-color: var(--xto-color-primary, #4F46E5);
|
|
378
378
|
border-radius: 50%;
|
|
379
379
|
animation: spin 0.8s linear infinite;
|
|
380
380
|
}
|
|
@@ -392,22 +392,22 @@
|
|
|
392
392
|
|
|
393
393
|
// 链接样式
|
|
394
394
|
.link {
|
|
395
|
-
color: var(--xto-color-primary, #
|
|
395
|
+
color: var(--xto-color-primary, #4F46E5);
|
|
396
396
|
text-decoration: none;
|
|
397
397
|
transition: color 0.2s ease;
|
|
398
398
|
|
|
399
399
|
&:hover {
|
|
400
|
-
color: var(--xto-color-primary-light-1, #
|
|
400
|
+
color: var(--xto-color-primary-light-1, #6158E7);
|
|
401
401
|
}
|
|
402
402
|
}
|
|
403
403
|
|
|
404
404
|
.link-underline {
|
|
405
|
-
color: var(--xto-color-primary, #
|
|
405
|
+
color: var(--xto-color-primary, #4F46E5);
|
|
406
406
|
text-decoration: underline;
|
|
407
407
|
text-underline-offset: 2px;
|
|
408
408
|
|
|
409
409
|
&:hover {
|
|
410
|
-
color: var(--xto-color-primary-light-1, #
|
|
410
|
+
color: var(--xto-color-primary-light-1, #6158E7);
|
|
411
411
|
}
|
|
412
412
|
}
|
|
413
413
|
|
|
@@ -417,7 +417,7 @@
|
|
|
417
417
|
// ==============================================
|
|
418
418
|
.x-menu-item {
|
|
419
419
|
&.is-active {
|
|
420
|
-
color: var(--xto-color-primary, #
|
|
420
|
+
color: var(--xto-color-primary, #4F46E5) !important;
|
|
421
421
|
background-color: var(--xto-color-primary-light-9, #EAF9F8) !important;
|
|
422
422
|
font-weight: 600;
|
|
423
423
|
}
|
|
@@ -425,7 +425,7 @@
|
|
|
425
425
|
|
|
426
426
|
// SubMenu 的子菜单项高亮(只有 MenuItem 高亮,SubMenu 本身不高亮)
|
|
427
427
|
.x-sub-menu__menu .x-menu-item.is-active {
|
|
428
|
-
color: var(--xto-color-primary, #
|
|
428
|
+
color: var(--xto-color-primary, #4F46E5) !important;
|
|
429
429
|
background-color: var(--xto-color-primary-light-9, #EAF9F8) !important;
|
|
430
430
|
font-weight: 600;
|
|
431
431
|
}
|