xto-fronted 0.5.3 → 0.6.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 (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 +207 -169
  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,32 +367,32 @@ 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
390
  // 标签
391
391
  .x-tag {
392
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);
393
+ background-color: rgba(76, 141, 255, 0.2);
394
+ color: var(--xto-color-primary-light-3, #2563EB);
395
+ border-color: rgba(76, 141, 255, 0.3);
396
396
  }
397
397
 
398
398
  &.x-tag--success {
@@ -415,131 +415,169 @@ html.dark {
415
415
 
416
416
  &.x-tag--info {
417
417
  background-color: rgba(156, 163, 175, 0.2);
418
- color: var(--xto-color-text-disabled, #4B5563);
418
+ color: var(--xto-color-text-disabled, #475569);
419
419
  border-color: rgba(156, 163, 175, 0.3);
420
420
  }
421
421
  }
422
422
 
423
423
  // 开关
424
424
  .x-switch {
425
- background-color: var(--xto-border-color-light, #1F2937);
425
+ background-color: var(--xto-border-color-light, #182338);
426
426
 
427
427
  &.is-checked {
428
- background-color: var(--xto-color-primary, #818CF8);
428
+ background-color: var(--xto-color-primary, #4C8DFF);
429
429
  }
430
430
  }
431
431
 
432
432
  // 分页
433
433
  .x-pagination {
434
- color: var(--xto-color-text-regular, #E5E7EB);
434
+ color: var(--xto-color-text-regular, #CBD5E1);
435
435
 
436
436
  &__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);
437
+ background-color: var(--xto-bg-color, #111A2C);
438
+ border-color: var(--xto-border-color-light, #182338);
439
+ color: var(--xto-color-text-regular, #CBD5E1);
440
440
 
441
441
  &:hover {
442
- color: var(--xto-color-primary, #818CF8);
442
+ color: var(--xto-color-primary, #4C8DFF);
443
443
  }
444
444
 
445
445
  &.is-active {
446
- background-color: var(--xto-color-primary, #818CF8);
447
- border-color: var(--xto-color-primary, #818CF8);
446
+ background-color: var(--xto-color-primary, #4C8DFF);
447
+ border-color: var(--xto-color-primary, #4C8DFF);
448
448
  color: #fff;
449
449
  }
450
450
  }
451
451
  }
452
452
 
453
- // 登录页面
453
+ // 登录页面（新版左右分区：品牌区 + 表单区）
454
+ .login-brand {
455
+ background: linear-gradient(135deg, #0B1220 0%, #122554 45%, #1E3A8A 100%) !important;
456
+ }
457
+
458
+ .login-form-section {
459
+ background: var(--xto-bg-color-page, #0B1220) !important;
460
+
461
+ .form-header h2 {
462
+ color: var(--xto-color-text-primary, #F1F5F9);
463
+ }
464
+
465
+ .form-header p {
466
+ color: var(--xto-color-text-secondary, #94A3B8);
467
+ }
468
+
469
+ .input-label {
470
+ color: var(--xto-color-text-regular, #CBD5E1);
471
+ }
472
+
473
+ .copyright p {
474
+ color: var(--xto-color-text-placeholder, #64748B);
475
+ }
476
+
477
+ .social-btn {
478
+ background: var(--xto-fill-color, #1E293B) !important;
479
+ color: var(--xto-color-text-secondary, #94A3B8) !important;
480
+
481
+ &:hover {
482
+ background: var(--xto-color-primary-light-8, #122554) !important;
483
+ color: var(--xto-color-primary, #4C8DFF) !important;
484
+ }
485
+ }
486
+
487
+ .forgot-link {
488
+ color: var(--xto-color-primary, #4C8DFF) !important;
489
+ }
490
+ }
491
+
454
492
  .login {
455
493
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
456
494
  }
457
495
 
458
496
  .login__container {
459
- background-color: var(--xto-bg-color-overlay, #1F2937);
460
- border: 1px solid var(--xto-border-color, #374151);
497
+ background-color: var(--xto-bg-color-overlay, #182338);
498
+ border: 1px solid var(--xto-border-color, #334155);
461
499
  }
462
500
 
463
501
  .login__title {
464
- color: var(--xto-color-primary, #818CF8);
502
+ color: var(--xto-color-primary, #4C8DFF);
465
503
  }
466
504
 
467
505
  .login__subtitle {
468
- color: var(--xto-color-text-secondary, #9CA3AF);
506
+ color: var(--xto-color-text-secondary, #94A3B8);
469
507
  }
470
508
 
471
509
  .login__footer {
472
- color: var(--xto-color-text-placeholder, #6B7280);
510
+ color: var(--xto-color-text-placeholder, #64748B);
473
511
  }
474
512
 
475
513
  // 仪表盘
476
514
  .stat-card__title {
477
- color: var(--xto-color-text-secondary, #9CA3AF);
515
+ color: var(--xto-color-text-secondary, #94A3B8);
478
516
  }
479
517
 
480
518
  .quick-link {
481
- background-color: var(--xto-fill-color, #1F2937);
519
+ background-color: var(--xto-fill-color, #182338);
482
520
 
483
521
  &:hover {
484
- background-color: rgba(129, 140, 248, 0.1);
522
+ background-color: rgba(76, 141, 255, 0.12);
485
523
  }
486
524
 
487
525
  &__title {
488
- color: var(--xto-color-text-regular, #E5E7EB);
526
+ color: var(--xto-color-text-regular, #CBD5E1);
489
527
  }
490
528
  }
491
529
 
492
530
  .activity-item {
493
- border-bottom-color: var(--xto-border-color, #374151);
531
+ border-bottom-color: var(--xto-border-color, #334155);
494
532
 
495
533
  &__action {
496
- color: var(--xto-color-text-regular, #E5E7EB);
534
+ color: var(--xto-color-text-regular, #CBD5E1);
497
535
  }
498
536
  }
499
537
 
500
538
  // 搜索卡片
501
539
  .search-card {
502
- background-color: var(--xto-bg-color-overlay, #1F2937);
503
- border: 1px solid var(--xto-border-color, #374151);
540
+ background-color: var(--xto-bg-color-overlay, #182338);
541
+ border: 1px solid var(--xto-border-color, #334155);
504
542
  }
505
543
 
506
544
  // 表格卡片
507
545
  .table-card {
508
- background-color: var(--xto-bg-color-overlay, #1F2937);
509
- border: 1px solid var(--xto-border-color, #374151);
546
+ background-color: var(--xto-bg-color-overlay, #182338);
547
+ border: 1px solid var(--xto-border-color, #334155);
510
548
  }
511
549
 
512
550
  // Popconfirm
513
551
  .x-popconfirm {
514
- background-color: var(--xto-bg-color-overlay, #1F2937);
515
- border: 1px solid var(--xto-border-color, #374151);
552
+ background-color: var(--xto-bg-color-overlay, #182338);
553
+ border: 1px solid var(--xto-border-color, #334155);
516
554
  }
517
555
 
518
556
  // Drawer 抽屉组件
519
557
  .x-drawer {
520
- background-color: var(--xto-bg-color-overlay, #1F2937);
558
+ background-color: var(--xto-bg-color-overlay, #182338);
521
559
 
522
560
  &__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);
561
+ background-color: var(--xto-bg-color-overlay, #182338);
562
+ border-bottom-color: var(--xto-border-color, #334155);
563
+ color: var(--xto-color-text-primary, #F1F5F9);
526
564
  }
527
565
 
528
566
  &__body {
529
- background-color: var(--xto-bg-color-overlay, #1F2937);
530
- color: var(--xto-color-text-regular, #E5E7EB);
567
+ background-color: var(--xto-bg-color-overlay, #182338);
568
+ color: var(--xto-color-text-regular, #CBD5E1);
531
569
  }
532
570
 
533
571
  &__footer {
534
- background-color: var(--xto-bg-color-overlay, #1F2937);
535
- border-top-color: var(--xto-border-color, #374151);
572
+ background-color: var(--xto-bg-color-overlay, #182338);
573
+ border-top-color: var(--xto-border-color, #334155);
536
574
  }
537
575
  }
538
576
 
539
577
  // 设置抽屉内容
540
578
  .settings-drawer {
541
579
  .settings-title {
542
- color: var(--xto-color-text-primary, #F9FAFB);
580
+ color: var(--xto-color-text-primary, #F1F5F9);
543
581
  }
544
582
 
545
583
  .settings-section {
@@ -547,93 +585,93 @@ html.dark {
547
585
  }
548
586
 
549
587
  .layout-option {
550
- border-color: var(--xto-border-color-light, #1F2937);
588
+ border-color: var(--xto-border-color-light, #182338);
551
589
  background-color: transparent;
552
590
 
553
591
  &:hover {
554
- border-color: var(--xto-color-primary, #818CF8);
592
+ border-color: var(--xto-color-primary, #4C8DFF);
555
593
  }
556
594
 
557
595
  &.is-active {
558
- border-color: var(--xto-color-primary, #818CF8);
559
- background-color: rgba(129, 140, 248, 0.1);
596
+ border-color: var(--xto-color-primary, #4C8DFF);
597
+ background-color: rgba(76, 141, 255, 0.12);
560
598
  }
561
599
 
562
600
  &__label {
563
- color: var(--xto-color-text-regular, #E5E7EB);
601
+ color: var(--xto-color-text-regular, #CBD5E1);
564
602
  }
565
603
  }
566
604
 
567
605
  .settings-switch-item {
568
606
  span {
569
- color: var(--xto-color-text-regular, #E5E7EB);
607
+ color: var(--xto-color-text-regular, #CBD5E1);
570
608
  }
571
609
  }
572
610
  }
573
611
 
574
612
  // 混合顶部菜单
575
613
  .mix-top-menu {
576
- background-color: var(--xto-bg-color, #111827);
577
- border-bottom-color: var(--xto-border-color, #374151);
614
+ background-color: var(--xto-bg-color, #111A2C);
615
+ border-bottom-color: var(--xto-border-color, #334155);
578
616
 
579
617
  &__logo-text {
580
- color: var(--xto-color-primary, #818CF8);
618
+ color: var(--xto-color-primary, #4C8DFF);
581
619
  }
582
620
 
583
621
  &__menu {
584
- background-color: var(--xto-bg-color, #111827) !important;
622
+ background-color: var(--xto-bg-color, #111A2C) !important;
585
623
  }
586
624
 
587
625
  &__menu-char {
588
- color: var(--xto-color-primary-light-3, #7578F3);
589
- background-color: rgba(129, 140, 248, 0.2);
626
+ color: var(--xto-color-primary-light-3, #2563EB);
627
+ background-color: rgba(76, 141, 255, 0.2);
590
628
  }
591
629
 
592
630
  &__action {
593
- color: var(--xto-color-text-regular, #E5E7EB);
631
+ color: var(--xto-color-text-regular, #CBD5E1);
594
632
 
595
633
  &:hover {
596
- background-color: var(--xto-fill-color, #1F2937);
597
- color: var(--xto-color-primary, #818CF8);
634
+ background-color: var(--xto-fill-color, #182338);
635
+ color: var(--xto-color-primary, #4C8DFF);
598
636
  }
599
637
  }
600
638
 
601
639
  &__user-trigger:hover {
602
- background-color: var(--xto-fill-color, #1F2937);
640
+ background-color: var(--xto-fill-color, #182338);
603
641
  }
604
642
 
605
643
  &__user-name {
606
- color: var(--xto-color-text-regular, #E5E7EB);
644
+ color: var(--xto-color-text-regular, #CBD5E1);
607
645
  }
608
646
 
609
647
  &__user-arrow {
610
- color: var(--xto-color-text-secondary, #9CA3AF);
648
+ color: var(--xto-color-text-secondary, #94A3B8);
611
649
  }
612
650
 
613
651
  &__dropdown {
614
- background-color: var(--xto-bg-color-overlay, #1F2937);
615
- border: 1px solid var(--xto-border-color, #374151);
652
+ background-color: var(--xto-bg-color-overlay, #182338);
653
+ border: 1px solid var(--xto-border-color, #334155);
616
654
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
617
655
  }
618
656
 
619
657
  &__dropdown-name {
620
- color: var(--xto-color-text-primary, #F9FAFB);
658
+ color: var(--xto-color-text-primary, #F1F5F9);
621
659
  }
622
660
 
623
661
  &__dropdown-role {
624
- color: var(--xto-color-text-secondary, #9CA3AF);
662
+ color: var(--xto-color-text-secondary, #94A3B8);
625
663
  }
626
664
 
627
665
  &__dropdown-divider {
628
- background-color: var(--xto-border-color, #374151);
666
+ background-color: var(--xto-border-color, #334155);
629
667
  }
630
668
 
631
669
  &__dropdown-item {
632
- color: var(--xto-color-text-regular, #E5E7EB);
670
+ color: var(--xto-color-text-regular, #CBD5E1);
633
671
 
634
672
  &:hover {
635
- background-color: var(--xto-fill-color, #1F2937);
636
- color: var(--xto-color-text-primary, #F9FAFB);
673
+ background-color: var(--xto-fill-color, #182338);
674
+ color: var(--xto-color-text-primary, #F1F5F9);
637
675
  }
638
676
  }
639
677
  }