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