xto-fronted 0.6.2 → 0.7.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.
Files changed (35) hide show
  1. package/dist/api/index.js +1 -1
  2. package/dist/{index-DGrQCWU0.js → index-BO31bICK.js} +13 -13
  3. package/dist/{index-CYFcc2sd.js → index-D4K3OfZa.js} +23 -23
  4. package/dist/{index-DIlGh6S6.js → index-DkG24eV5.js} +9 -9
  5. package/dist/{index-DYmKmoMX.js → index-QdDB_2uu.js} +20 -20
  6. package/dist/{index-Dpv33ZXi.js → index-k2XmHxrU.js} +802 -795
  7. package/dist/index.js +2 -2
  8. package/dist/style.css +1 -1
  9. package/dist/{user-ChcAx-5W.js → user-77I_qZ8j.js} +6 -6
  10. package/package.json +1 -1
  11. package/src/App.vue +3 -3
  12. package/src/assets/styles/_dark.scss +170 -170
  13. package/src/assets/styles/_reset.scss +8 -8
  14. package/src/assets/styles/_root.scss +95 -93
  15. package/src/assets/styles/_variables.scss +17 -17
  16. package/src/assets/styles/index.scss +39 -39
  17. package/src/components/Layout/Footer.vue +1 -1
  18. package/src/components/Layout/Header.vue +54 -54
  19. package/src/components/Layout/MixTopMenu.vue +41 -41
  20. package/src/components/Layout/Sidebar.vue +8 -8
  21. package/src/components/Layout/SidebarMenuItem.vue +2 -2
  22. package/src/components/Layout/Tabs.vue +6 -6
  23. package/src/components/Layout/TopMenu.vue +41 -41
  24. package/src/components/Layout/index.vue +4 -4
  25. package/src/router/guards.ts +12 -1
  26. package/src/stores/app.ts +2 -2
  27. package/src/stores/menu.ts +15 -6
  28. package/src/style.scss +2 -2
  29. package/src/views/dashboard/index.vue +32 -32
  30. package/src/views/error/403.vue +13 -13
  31. package/src/views/error/404.vue +19 -19
  32. package/src/views/login/index.vue +15 -15
  33. package/src/views/system/menu/index.vue +20 -20
  34. package/src/views/system/role/index.vue +20 -20
  35. package/src/views/system/user/index.vue +23 -23
package/src/assets/styles/_dark.scss CHANGED
@@ -6,76 +6,76 @@ html.dark {
6
6
  // 侧边栏
7
7
  .sidebar,
8
8
  .layout__aside {
9
- background-color: var(--xto-bg-color, #111A2C);
9
+ background-color: var(--xto-bg-color, #161B21);
10
10
  }
11
11
 
12
12
  .sidebar {
13
- border-right: 1px solid var(--xto-border-color, #334155);
13
+ border-right: 1px solid var(--xto-border-color, #4E5566);
14
14
  }
15
15
 
16
16
  .sidebar__search-results {
17
- background-color: var(--xto-bg-color-overlay, #182338);
18
- border-color: var(--xto-border-color, #334155);
17
+ background-color: var(--xto-bg-color-overlay, #1A2027);
18
+ border-color: var(--xto-border-color, #4E5566);
19
19
  }
20
20
 
21
21
  .sidebar__search-item:hover {
22
- background-color: var(--xto-fill-color, #182338);
22
+ background-color: var(--xto-fill-color, #1A2027);
23
23
  }
24
24
 
25
25
  .sidebar__search-item-title {
26
- color: var(--xto-color-text-regular, #CBD5E1);
26
+ color: var(--xto-color-text-regular, #D9DCE1);
27
27
  }
28
28
 
29
29
  .sidebar__search-item-parent {
30
- color: var(--xto-color-text-secondary, #94A3B8);
30
+ color: var(--xto-color-text-secondary, #A9AEB8);
31
31
  }
32
32
 
33
33
  .sidebar__logo {
34
- border-bottom-color: var(--xto-border-color, #334155);
34
+ border-bottom-color: var(--xto-border-color, #4E5566);
35
35
  }
36
36
 
37
37
  .sidebar__user {
38
- border-top-color: var(--xto-border-color, #334155);
38
+ border-top-color: var(--xto-border-color, #4E5566);
39
39
  }
40
40
 
41
41
  .sidebar__user-name {
42
- color: var(--xto-color-text-regular, #CBD5E1);
42
+ color: var(--xto-color-text-regular, #D9DCE1);
43
43
  }
44
44
 
45
45
  .sidebar__user-role {
46
- color: var(--xto-color-text-secondary, #94A3B8);
46
+ color: var(--xto-color-text-secondary, #A9AEB8);
47
47
  }
48
48
 
49
49
  // 菜单
50
50
  .x-menu {
51
- background-color: var(--xto-bg-color, #111A2C) !important;
52
- border-color: var(--xto-border-color, #334155);
53
- color: var(--xto-color-text-regular, #CBD5E1);
51
+ background-color: var(--xto-bg-color, #161B21) !important;
52
+ border-color: var(--xto-border-color, #4E5566);
53
+ color: var(--xto-color-text-regular, #D9DCE1);
54
54
 
55
55
  &.x-menu--vertical {
56
- border-right-color: var(--xto-border-color, #334155);
56
+ border-right-color: var(--xto-border-color, #4E5566);
57
57
  }
58
58
 
59
59
  &.x-menu--horizontal {
60
- border-bottom-color: var(--xto-border-color, #334155);
61
- background-color: var(--xto-bg-color, #111A2C) !important;
60
+ border-bottom-color: var(--xto-border-color, #4E5566);
61
+ background-color: var(--xto-bg-color, #161B21) !important;
62
62
  }
63
63
  }
64
64
 
65
65
  .x-menu-item {
66
- color: var(--xto-color-text-regular, #CBD5E1) !important;
66
+ color: var(--xto-color-text-regular, #D9DCE1) !important;
67
67
  background-color: transparent !important;
68
68
 
69
69
  &:hover {
70
- background-color: var(--xto-fill-color, #182338) !important;
70
+ background-color: var(--xto-fill-color, #1A2027) !important;
71
71
  }
72
72
 
73
73
  &.is-active {
74
- color: var(--xto-color-primary, #4C8DFF) !important;
74
+ color: var(--xto-color-primary, #2ED3CB) !important;
75
75
  background-color: rgba(76, 141, 255, 0.12) !important;
76
76
 
77
77
  &::before {
78
- background-color: var(--xto-color-primary, #4C8DFF);
78
+ background-color: var(--xto-color-primary, #2ED3CB);
79
79
  }
80
80
  }
81
81
 
@@ -87,44 +87,44 @@ html.dark {
87
87
 
88
88
  &.is-active {
89
89
  background-color: transparent !important;
90
- border-bottom-color: var(--xto-color-primary, #4C8DFF);
90
+ border-bottom-color: var(--xto-color-primary, #2ED3CB);
91
91
  }
92
92
  }
93
93
  }
94
94
 
95
95
  .x-sub-menu {
96
96
  &__title {
97
- color: var(--xto-color-text-regular, #CBD5E1) !important;
97
+ color: var(--xto-color-text-regular, #D9DCE1) !important;
98
98
  background-color: transparent !important;
99
99
 
100
100
  &:hover {
101
- background-color: var(--xto-fill-color, #182338) !important;
101
+ background-color: var(--xto-fill-color, #1A2027) !important;
102
102
  }
103
103
  }
104
104
 
105
105
  &__menu {
106
- background-color: var(--xto-bg-color-overlay, #182338) !important;
107
- border: 1px solid var(--xto-border-color, #334155);
106
+ background-color: var(--xto-bg-color-overlay, #1A2027) !important;
107
+ border: 1px solid var(--xto-border-color, #4E5566);
108
108
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
109
109
 
110
110
  // 子菜单中的菜单项
111
111
  .x-menu-item {
112
112
  background-color: transparent !important;
113
- color: var(--xto-color-text-regular, #CBD5E1) !important;
113
+ color: var(--xto-color-text-regular, #D9DCE1) !important;
114
114
 
115
115
  &:hover {
116
- background-color: var(--xto-fill-color, #182338) !important;
116
+ background-color: var(--xto-fill-color, #1A2027) !important;
117
117
  }
118
118
 
119
119
  &.is-active {
120
- color: var(--xto-color-primary, #4C8DFF) !important;
120
+ color: var(--xto-color-primary, #2ED3CB) !important;
121
121
  background-color: rgba(76, 141, 255, 0.12) !important;
122
122
  }
123
123
  }
124
124
  }
125
125
 
126
126
  &__arrow {
127
- color: var(--xto-color-text-secondary, #94A3B8);
127
+ color: var(--xto-color-text-secondary, #A9AEB8);
128
128
  }
129
129
 
130
130
  &.is-opened > .x-sub-menu__title {
@@ -132,7 +132,7 @@ html.dark {
132
132
  }
133
133
 
134
134
  &.is-active > .x-sub-menu__title {
135
- color: var(--xto-color-primary, #4C8DFF) !important;
135
+ color: var(--xto-color-primary, #2ED3CB) !important;
136
136
  }
137
137
 
138
138
  // 水平模式下的子菜单
@@ -142,134 +142,134 @@ html.dark {
142
142
  }
143
143
 
144
144
  .x-sub-menu__menu {
145
- background-color: var(--xto-bg-color-overlay, #182338) !important;
146
- border: 1px solid var(--xto-border-color, #334155);
145
+ background-color: var(--xto-bg-color-overlay, #1A2027) !important;
146
+ border: 1px solid var(--xto-border-color, #4E5566);
147
147
  }
148
148
  }
149
149
 
150
150
  // 收起状态下的弹出菜单
151
151
  &.is-collapse > .x-sub-menu__menu {
152
- background-color: var(--xto-bg-color-overlay, #182338) !important;
153
- border: 1px solid var(--xto-border-color, #334155);
152
+ background-color: var(--xto-bg-color-overlay, #1A2027) !important;
153
+ border: 1px solid var(--xto-border-color, #4E5566);
154
154
  }
155
155
  }
156
156
 
157
157
  // 顶部导航
158
158
  .header {
159
- background-color: var(--xto-bg-color, #111A2C);
160
- border-bottom-color: var(--xto-border-color, #334155);
159
+ background-color: var(--xto-bg-color, #161B21);
160
+ border-bottom-color: var(--xto-border-color, #4E5566);
161
161
  }
162
162
 
163
163
  .header__collapse {
164
- color: var(--xto-color-text-regular, #CBD5E1);
164
+ color: var(--xto-color-text-regular, #D9DCE1);
165
165
  }
166
166
 
167
167
  .header__breadcrumb {
168
- color: var(--xto-color-text-secondary, #94A3B8);
168
+ color: var(--xto-color-text-secondary, #A9AEB8);
169
169
  }
170
170
 
171
171
  .header__user-name {
172
- color: var(--xto-color-text-regular, #CBD5E1);
172
+ color: var(--xto-color-text-regular, #D9DCE1);
173
173
  }
174
174
 
175
175
  .header__user-arrow {
176
- color: var(--xto-color-text-secondary, #94A3B8);
176
+ color: var(--xto-color-text-secondary, #A9AEB8);
177
177
  }
178
178
 
179
179
  .header__action:hover {
180
- background-color: var(--xto-fill-color, #182338);
180
+ background-color: var(--xto-fill-color, #1A2027);
181
181
  }
182
182
 
183
183
  .header__user-trigger:hover {
184
- background-color: var(--xto-fill-color, #182338);
184
+ background-color: var(--xto-fill-color, #1A2027);
185
185
  }
186
186
 
187
187
  // 下拉菜单
188
188
  .header__dropdown {
189
- background-color: var(--xto-bg-color-overlay, #182338);
190
- border: 1px solid var(--xto-border-color, #334155);
189
+ background-color: var(--xto-bg-color-overlay, #1A2027);
190
+ border: 1px solid var(--xto-border-color, #4E5566);
191
191
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
192
192
  }
193
193
 
194
194
  .header__dropdown-name {
195
- color: var(--xto-color-text-primary, #F1F5F9);
195
+ color: var(--xto-color-text-primary, #F2F3F5);
196
196
  }
197
197
 
198
198
  .header__dropdown-role {
199
- color: var(--xto-color-text-secondary, #94A3B8);
199
+ color: var(--xto-color-text-secondary, #A9AEB8);
200
200
  }
201
201
 
202
202
  .header__dropdown-divider {
203
- background-color: var(--xto-border-color, #334155);
203
+ background-color: var(--xto-border-color, #4E5566);
204
204
  }
205
205
 
206
206
  .header__dropdown-item {
207
- color: var(--xto-color-text-regular, #CBD5E1);
207
+ color: var(--xto-color-text-regular, #D9DCE1);
208
208
 
209
209
  &:hover {
210
- background-color: var(--xto-fill-color, #182338);
211
- color: var(--xto-color-text-primary, #F1F5F9);
210
+ background-color: var(--xto-fill-color, #1A2027);
211
+ color: var(--xto-color-text-primary, #F2F3F5);
212
212
  }
213
213
  }
214
214
 
215
215
  // 顶部菜单组件
216
216
  .top-menu {
217
- background-color: var(--xto-bg-color, #111A2C);
217
+ background-color: var(--xto-bg-color, #161B21);
218
218
 
219
219
  &__menu {
220
- background-color: var(--xto-bg-color, #111A2C) !important;
220
+ background-color: var(--xto-bg-color, #161B21) !important;
221
221
  }
222
222
 
223
223
  &__menu-char {
224
224
  background-color: rgba(76, 141, 255, 0.2);
225
- color: var(--xto-color-primary-light-3, #2563EB);
225
+ color: var(--xto-color-primary-light-3, #17C3BB);
226
226
  }
227
227
 
228
228
  &__action {
229
- color: var(--xto-color-text-regular, #CBD5E1);
229
+ color: var(--xto-color-text-regular, #D9DCE1);
230
230
 
231
231
  &:hover {
232
- background-color: var(--xto-fill-color, #182338);
233
- color: var(--xto-color-primary, #4C8DFF);
232
+ background-color: var(--xto-fill-color, #1A2027);
233
+ color: var(--xto-color-primary, #2ED3CB);
234
234
  }
235
235
  }
236
236
 
237
237
  &__user-trigger:hover {
238
- background-color: var(--xto-fill-color, #182338);
238
+ background-color: var(--xto-fill-color, #1A2027);
239
239
  }
240
240
 
241
241
  &__user-name {
242
- color: var(--xto-color-text-regular, #CBD5E1);
242
+ color: var(--xto-color-text-regular, #D9DCE1);
243
243
  }
244
244
 
245
245
  &__user-arrow {
246
- color: var(--xto-color-text-secondary, #94A3B8);
246
+ color: var(--xto-color-text-secondary, #A9AEB8);
247
247
  }
248
248
 
249
249
  &__dropdown {
250
- background-color: var(--xto-bg-color-overlay, #182338);
251
- border: 1px solid var(--xto-border-color, #334155);
250
+ background-color: var(--xto-bg-color-overlay, #1A2027);
251
+ border: 1px solid var(--xto-border-color, #4E5566);
252
252
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
253
253
  }
254
254
 
255
255
  &__dropdown-name {
256
- color: var(--xto-color-text-primary, #F1F5F9);
256
+ color: var(--xto-color-text-primary, #F2F3F5);
257
257
  }
258
258
 
259
259
  &__dropdown-role {
260
- color: var(--xto-color-text-secondary, #94A3B8);
260
+ color: var(--xto-color-text-secondary, #A9AEB8);
261
261
  }
262
262
 
263
263
  &__dropdown-divider {
264
- background-color: var(--xto-border-color, #334155);
264
+ background-color: var(--xto-border-color, #4E5566);
265
265
  }
266
266
 
267
267
  &__dropdown-item {
268
- color: var(--xto-color-text-regular, #CBD5E1);
268
+ color: var(--xto-color-text-regular, #D9DCE1);
269
269
 
270
270
  &:hover {
271
- background-color: var(--xto-fill-color, #182338);
272
- color: var(--xto-color-text-primary, #F1F5F9);
271
+ background-color: var(--xto-fill-color, #1A2027);
272
+ color: var(--xto-color-text-primary, #F2F3F5);
273
273
  }
274
274
  }
275
275
  }
@@ -277,24 +277,24 @@ html.dark {
277
277
  // 按钮
278
278
  .x-button {
279
279
  &.x-button--default {
280
- background-color: var(--xto-bg-color, #111A2C);
281
- border-color: var(--xto-border-color-light, #182338);
282
- color: var(--xto-color-text-regular, #CBD5E1);
280
+ background-color: var(--xto-bg-color, #161B21);
281
+ border-color: var(--xto-border-color-light, #1A2027);
282
+ color: var(--xto-color-text-regular, #D9DCE1);
283
283
 
284
284
  &:hover {
285
- border-color: var(--xto-color-primary, #4C8DFF);
286
- color: var(--xto-color-primary, #4C8DFF);
285
+ border-color: var(--xto-color-primary, #2ED3CB);
286
+ color: var(--xto-color-primary, #2ED3CB);
287
287
  }
288
288
  }
289
289
 
290
290
  &.x-button--text {
291
- color: var(--xto-color-primary, #4C8DFF);
291
+ color: var(--xto-color-primary, #2ED3CB);
292
292
  }
293
293
  }
294
294
 
295
295
  // 表单
296
296
  .x-form-item__label {
297
- color: var(--xto-color-text-regular, #CBD5E1);
297
+ color: var(--xto-color-text-regular, #D9DCE1);
298
298
  }
299
299
 
300
300
  .x-form-item__error {
@@ -303,60 +303,60 @@ html.dark {
303
303
 
304
304
  // 输入框
305
305
  .x-input {
306
- background-color: var(--xto-bg-color, #111A2C);
307
- border-color: var(--xto-border-color-light, #182338);
306
+ background-color: var(--xto-bg-color, #161B21);
307
+ border-color: var(--xto-border-color-light, #1A2027);
308
308
 
309
309
  &.is-focus {
310
- border-color: var(--xto-color-primary, #4C8DFF);
310
+ border-color: var(--xto-color-primary, #2ED3CB);
311
311
  }
312
312
 
313
313
  .x-input__inner {
314
314
  background-color: transparent;
315
- color: var(--xto-color-text-primary, #F1F5F9);
315
+ color: var(--xto-color-text-primary, #F2F3F5);
316
316
 
317
317
  &::placeholder {
318
- color: var(--xto-color-text-placeholder, #64748B);
318
+ color: var(--xto-color-text-placeholder, #86909C);
319
319
  }
320
320
  }
321
321
 
322
322
  .x-input__suffix,
323
323
  .x-input__prefix {
324
- color: var(--xto-color-text-secondary, #94A3B8);
324
+ color: var(--xto-color-text-secondary, #A9AEB8);
325
325
  }
326
326
  }
327
327
 
328
328
  // 选择器
329
329
  .x-select {
330
- background-color: var(--xto-bg-color, #111A2C);
331
- border-color: var(--xto-border-color-light, #182338);
330
+ background-color: var(--xto-bg-color, #161B21);
331
+ border-color: var(--xto-border-color-light, #1A2027);
332
332
  }
333
333
 
334
334
  // 卡片
335
335
  .x-card {
336
- background-color: var(--xto-bg-color-overlay, #182338);
337
- border-color: var(--xto-border-color, #334155);
336
+ background-color: var(--xto-bg-color-overlay, #1A2027);
337
+ border-color: var(--xto-border-color, #4E5566);
338
338
  }
339
339
 
340
340
  .x-card__header {
341
- border-bottom-color: var(--xto-border-color, #334155);
342
- color: var(--xto-color-text-primary, #F1F5F9);
341
+ border-bottom-color: var(--xto-border-color, #4E5566);
342
+ color: var(--xto-color-text-primary, #F2F3F5);
343
343
  }
344
344
 
345
345
  // 表格
346
346
  .data-table {
347
347
  th {
348
- background-color: var(--xto-fill-color, #182338);
349
- color: var(--xto-color-text-regular, #CBD5E1);
350
- border-bottom-color: var(--xto-border-color, #334155);
348
+ background-color: var(--xto-fill-color, #1A2027);
349
+ color: var(--xto-color-text-regular, #D9DCE1);
350
+ border-bottom-color: var(--xto-border-color, #4E5566);
351
351
  }
352
352
 
353
353
  td {
354
- border-bottom-color: var(--xto-border-color, #334155);
355
- color: var(--xto-color-text-regular, #CBD5E1);
354
+ border-bottom-color: var(--xto-border-color, #4E5566);
355
+ color: var(--xto-color-text-regular, #D9DCE1);
356
356
  }
357
357
 
358
358
  tr:hover td {
359
- background-color: var(--xto-fill-color, #182338);
359
+ background-color: var(--xto-fill-color, #1A2027);
360
360
  }
361
361
  }
362
362
 
@@ -367,24 +367,24 @@ html.dark {
367
367
  }
368
368
 
369
369
  &__container {
370
- background-color: var(--xto-bg-color-overlay, #182338);
371
- border: 1px solid var(--xto-border-color, #334155);
370
+ background-color: var(--xto-bg-color-overlay, #1A2027);
371
+ border: 1px solid var(--xto-border-color, #4E5566);
372
372
  }
373
373
 
374
374
  &__header {
375
- border-bottom-color: var(--xto-border-color, #334155);
376
- color: var(--xto-color-text-primary, #F1F5F9);
375
+ border-bottom-color: var(--xto-border-color, #4E5566);
376
+ color: var(--xto-color-text-primary, #F2F3F5);
377
377
  }
378
378
 
379
379
  &__footer {
380
- border-top-color: var(--xto-border-color, #334155);
380
+ border-top-color: var(--xto-border-color, #4E5566);
381
381
  }
382
382
  }
383
383
 
384
384
  // 消息提示
385
385
  .x-message {
386
- background-color: var(--xto-bg-color-overlay, #182338);
387
- border: 1px solid var(--xto-border-color, #334155);
386
+ background-color: var(--xto-bg-color-overlay, #1A2027);
387
+ border: 1px solid var(--xto-border-color, #4E5566);
388
388
  }
389
389
 
390
390
  // 标签：暗色样式已由 @xto 组件库 dark tokens 统一提供（--xto-color-*-light-N 阶梯反转），
@@ -392,70 +392,70 @@ html.dark {
392
392
 
393
393
  // 开关
394
394
  .x-switch {
395
- background-color: var(--xto-border-color-light, #182338);
395
+ background-color: var(--xto-border-color-light, #1A2027);
396
396
 
397
397
  &.is-checked {
398
- background-color: var(--xto-color-primary, #4C8DFF);
398
+ background-color: var(--xto-color-primary, #2ED3CB);
399
399
  }
400
400
  }
401
401
 
402
402
  // 分页
403
403
  .x-pagination {
404
- color: var(--xto-color-text-regular, #CBD5E1);
404
+ color: var(--xto-color-text-regular, #D9DCE1);
405
405
 
406
406
  &__item {
407
- background-color: var(--xto-bg-color, #111A2C);
408
- border-color: var(--xto-border-color-light, #182338);
409
- color: var(--xto-color-text-regular, #CBD5E1);
407
+ background-color: var(--xto-bg-color, #161B21);
408
+ border-color: var(--xto-border-color-light, #1A2027);
409
+ color: var(--xto-color-text-regular, #D9DCE1);
410
410
 
411
411
  &:hover {
412
- color: var(--xto-color-primary, #4C8DFF);
412
+ color: var(--xto-color-primary, #2ED3CB);
413
413
  }
414
414
 
415
415
  &.is-active {
416
- background-color: var(--xto-color-primary, #4C8DFF);
417
- border-color: var(--xto-color-primary, #4C8DFF);
418
- color: #fff;
416
+ background-color: var(--xto-color-primary, #2ED3CB);
417
+ border-color: var(--xto-color-primary, #2ED3CB);
418
+ color: var(--xto-color-on-primary, #04302D);
419
419
  }
420
420
  }
421
421
  }
422
422
 
423
423
  // 登录页面（新版左右分区：品牌区 + 表单区）
424
424
  .login-brand {
425
- background: linear-gradient(135deg, #0B1220 0%, #122554 45%, #1E3A8A 100%) !important;
425
+ background: linear-gradient(135deg, #0E1216 0%, #074442 45%, #0B6B67 100%) !important;
426
426
  }
427
427
 
428
428
  .login-form-section {
429
- background: var(--xto-bg-color-page, #0B1220) !important;
429
+ background: var(--xto-bg-color-page, #0E1216) !important;
430
430
 
431
431
  .form-header h2 {
432
- color: var(--xto-color-text-primary, #F1F5F9);
432
+ color: var(--xto-color-text-primary, #F2F3F5);
433
433
  }
434
434
 
435
435
  .form-header p {
436
- color: var(--xto-color-text-secondary, #94A3B8);
436
+ color: var(--xto-color-text-secondary, #A9AEB8);
437
437
  }
438
438
 
439
439
  .input-label {
440
- color: var(--xto-color-text-regular, #CBD5E1);
440
+ color: var(--xto-color-text-regular, #D9DCE1);
441
441
  }
442
442
 
443
443
  .copyright p {
444
- color: var(--xto-color-text-placeholder, #64748B);
444
+ color: var(--xto-color-text-placeholder, #86909C);
445
445
  }
446
446
 
447
447
  .social-btn {
448
- background: var(--xto-fill-color, #1E293B) !important;
449
- color: var(--xto-color-text-secondary, #94A3B8) !important;
448
+ background: var(--xto-fill-color, #1E242B) !important;
449
+ color: var(--xto-color-text-secondary, #A9AEB8) !important;
450
450
 
451
451
  &:hover {
452
- background: var(--xto-color-primary-light-8, #122554) !important;
453
- color: var(--xto-color-primary, #4C8DFF) !important;
452
+ background: var(--xto-color-primary-light-8, #074442) !important;
453
+ color: var(--xto-color-primary, #2ED3CB) !important;
454
454
  }
455
455
  }
456
456
 
457
457
  .forgot-link {
458
- color: var(--xto-color-primary, #4C8DFF) !important;
458
+ color: var(--xto-color-primary, #2ED3CB) !important;
459
459
  }
460
460
  }
461
461
 
@@ -464,90 +464,90 @@ html.dark {
464
464
  }
465
465
 
466
466
  .login__container {
467
- background-color: var(--xto-bg-color-overlay, #182338);
468
- border: 1px solid var(--xto-border-color, #334155);
467
+ background-color: var(--xto-bg-color-overlay, #1A2027);
468
+ border: 1px solid var(--xto-border-color, #4E5566);
469
469
  }
470
470
 
471
471
  .login__title {
472
- color: var(--xto-color-primary, #4C8DFF);
472
+ color: var(--xto-color-primary, #2ED3CB);
473
473
  }
474
474
 
475
475
  .login__subtitle {
476
- color: var(--xto-color-text-secondary, #94A3B8);
476
+ color: var(--xto-color-text-secondary, #A9AEB8);
477
477
  }
478
478
 
479
479
  .login__footer {
480
- color: var(--xto-color-text-placeholder, #64748B);
480
+ color: var(--xto-color-text-placeholder, #86909C);
481
481
  }
482
482
 
483
483
  // 仪表盘
484
484
  .stat-card__title {
485
- color: var(--xto-color-text-secondary, #94A3B8);
485
+ color: var(--xto-color-text-secondary, #A9AEB8);
486
486
  }
487
487
 
488
488
  .quick-link {
489
- background-color: var(--xto-fill-color, #182338);
489
+ background-color: var(--xto-fill-color, #1A2027);
490
490
 
491
491
  &:hover {
492
492
  background-color: rgba(76, 141, 255, 0.12);
493
493
  }
494
494
 
495
495
  &__title {
496
- color: var(--xto-color-text-regular, #CBD5E1);
496
+ color: var(--xto-color-text-regular, #D9DCE1);
497
497
  }
498
498
  }
499
499
 
500
500
  .activity-item {
501
- border-bottom-color: var(--xto-border-color, #334155);
501
+ border-bottom-color: var(--xto-border-color, #4E5566);
502
502
 
503
503
  &__action {
504
- color: var(--xto-color-text-regular, #CBD5E1);
504
+ color: var(--xto-color-text-regular, #D9DCE1);
505
505
  }
506
506
  }
507
507
 
508
508
  // 搜索卡片
509
509
  .search-card {
510
- background-color: var(--xto-bg-color-overlay, #182338);
511
- border: 1px solid var(--xto-border-color, #334155);
510
+ background-color: var(--xto-bg-color-overlay, #1A2027);
511
+ border: 1px solid var(--xto-border-color, #4E5566);
512
512
  }
513
513
 
514
514
  // 表格卡片
515
515
  .table-card {
516
- background-color: var(--xto-bg-color-overlay, #182338);
517
- border: 1px solid var(--xto-border-color, #334155);
516
+ background-color: var(--xto-bg-color-overlay, #1A2027);
517
+ border: 1px solid var(--xto-border-color, #4E5566);
518
518
  }
519
519
 
520
520
  // Popconfirm
521
521
  .x-popconfirm {
522
- background-color: var(--xto-bg-color-overlay, #182338);
523
- border: 1px solid var(--xto-border-color, #334155);
522
+ background-color: var(--xto-bg-color-overlay, #1A2027);
523
+ border: 1px solid var(--xto-border-color, #4E5566);
524
524
  }
525
525
 
526
526
  // Drawer 抽屉组件
527
527
  .x-drawer {
528
- background-color: var(--xto-bg-color-overlay, #182338);
528
+ background-color: var(--xto-bg-color-overlay, #1A2027);
529
529
 
530
530
  &__header {
531
- background-color: var(--xto-bg-color-overlay, #182338);
532
- border-bottom-color: var(--xto-border-color, #334155);
533
- color: var(--xto-color-text-primary, #F1F5F9);
531
+ background-color: var(--xto-bg-color-overlay, #1A2027);
532
+ border-bottom-color: var(--xto-border-color, #4E5566);
533
+ color: var(--xto-color-text-primary, #F2F3F5);
534
534
  }
535
535
 
536
536
  &__body {
537
- background-color: var(--xto-bg-color-overlay, #182338);
538
- color: var(--xto-color-text-regular, #CBD5E1);
537
+ background-color: var(--xto-bg-color-overlay, #1A2027);
538
+ color: var(--xto-color-text-regular, #D9DCE1);
539
539
  }
540
540
 
541
541
  &__footer {
542
- background-color: var(--xto-bg-color-overlay, #182338);
543
- border-top-color: var(--xto-border-color, #334155);
542
+ background-color: var(--xto-bg-color-overlay, #1A2027);
543
+ border-top-color: var(--xto-border-color, #4E5566);
544
544
  }
545
545
  }
546
546
 
547
547
  // 设置抽屉内容
548
548
  .settings-drawer {
549
549
  .settings-title {
550
- color: var(--xto-color-text-primary, #F1F5F9);
550
+ color: var(--xto-color-text-primary, #F2F3F5);
551
551
  }
552
552
 
553
553
  .settings-section {
@@ -555,93 +555,93 @@ html.dark {
555
555
  }
556
556
 
557
557
  .layout-option {
558
- border-color: var(--xto-border-color-light, #182338);
558
+ border-color: var(--xto-border-color-light, #1A2027);
559
559
  background-color: transparent;
560
560
 
561
561
  &:hover {
562
- border-color: var(--xto-color-primary, #4C8DFF);
562
+ border-color: var(--xto-color-primary, #2ED3CB);
563
563
  }
564
564
 
565
565
  &.is-active {
566
- border-color: var(--xto-color-primary, #4C8DFF);
566
+ border-color: var(--xto-color-primary, #2ED3CB);
567
567
  background-color: rgba(76, 141, 255, 0.12);
568
568
  }
569
569
 
570
570
  &__label {
571
- color: var(--xto-color-text-regular, #CBD5E1);
571
+ color: var(--xto-color-text-regular, #D9DCE1);
572
572
  }
573
573
  }
574
574
 
575
575
  .settings-switch-item {
576
576
  span {
577
- color: var(--xto-color-text-regular, #CBD5E1);
577
+ color: var(--xto-color-text-regular, #D9DCE1);
578
578
  }
579
579
  }
580
580
  }
581
581
 
582
582
  // 混合顶部菜单
583
583
  .mix-top-menu {
584
- background-color: var(--xto-bg-color, #111A2C);
585
- border-bottom-color: var(--xto-border-color, #334155);
584
+ background-color: var(--xto-bg-color, #161B21);
585
+ border-bottom-color: var(--xto-border-color, #4E5566);
586
586
 
587
587
  &__logo-text {
588
- color: var(--xto-color-primary, #4C8DFF);
588
+ color: var(--xto-color-primary, #2ED3CB);
589
589
  }
590
590
 
591
591
  &__menu {
592
- background-color: var(--xto-bg-color, #111A2C) !important;
592
+ background-color: var(--xto-bg-color, #161B21) !important;
593
593
  }
594
594
 
595
595
  &__menu-char {
596
- color: var(--xto-color-primary-light-3, #2563EB);
596
+ color: var(--xto-color-primary-light-3, #17C3BB);
597
597
  background-color: rgba(76, 141, 255, 0.2);
598
598
  }
599
599
 
600
600
  &__action {
601
- color: var(--xto-color-text-regular, #CBD5E1);
601
+ color: var(--xto-color-text-regular, #D9DCE1);
602
602
 
603
603
  &:hover {
604
- background-color: var(--xto-fill-color, #182338);
605
- color: var(--xto-color-primary, #4C8DFF);
604
+ background-color: var(--xto-fill-color, #1A2027);
605
+ color: var(--xto-color-primary, #2ED3CB);
606
606
  }
607
607
  }
608
608
 
609
609
  &__user-trigger:hover {
610
- background-color: var(--xto-fill-color, #182338);
610
+ background-color: var(--xto-fill-color, #1A2027);
611
611
  }
612
612
 
613
613
  &__user-name {
614
- color: var(--xto-color-text-regular, #CBD5E1);
614
+ color: var(--xto-color-text-regular, #D9DCE1);
615
615
  }
616
616
 
617
617
  &__user-arrow {
618
- color: var(--xto-color-text-secondary, #94A3B8);
618
+ color: var(--xto-color-text-secondary, #A9AEB8);
619
619
  }
620
620
 
621
621
  &__dropdown {
622
- background-color: var(--xto-bg-color-overlay, #182338);
623
- border: 1px solid var(--xto-border-color, #334155);
622
+ background-color: var(--xto-bg-color-overlay, #1A2027);
623
+ border: 1px solid var(--xto-border-color, #4E5566);
624
624
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
625
625
  }
626
626
 
627
627
  &__dropdown-name {
628
- color: var(--xto-color-text-primary, #F1F5F9);
628
+ color: var(--xto-color-text-primary, #F2F3F5);
629
629
  }
630
630
 
631
631
  &__dropdown-role {
632
- color: var(--xto-color-text-secondary, #94A3B8);
632
+ color: var(--xto-color-text-secondary, #A9AEB8);
633
633
  }
634
634
 
635
635
  &__dropdown-divider {
636
- background-color: var(--xto-border-color, #334155);
636
+ background-color: var(--xto-border-color, #4E5566);
637
637
  }
638
638
 
639
639
  &__dropdown-item {
640
- color: var(--xto-color-text-regular, #CBD5E1);
640
+ color: var(--xto-color-text-regular, #D9DCE1);
641
641
 
642
642
  &:hover {
643
- background-color: var(--xto-fill-color, #182338);
644
- color: var(--xto-color-text-primary, #F1F5F9);
643
+ background-color: var(--xto-fill-color, #1A2027);
644
+ color: var(--xto-color-text-primary, #F2F3F5);
645
645
  }
646
646
  }
647
647
  }