xto-fronted 0.6.3 → 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 (31) hide show
  1. package/dist/{index-DydABgae.js → index-BO31bICK.js} +13 -13
  2. package/dist/{index-BXHwCe22.js → index-D4K3OfZa.js} +23 -23
  3. package/dist/{index-BKO6Hzba.js → index-DkG24eV5.js} +9 -9
  4. package/dist/{index-BZSZ3bx2.js → index-QdDB_2uu.js} +20 -20
  5. package/dist/{index-IOKG7Gwo.js → index-k2XmHxrU.js} +235 -235
  6. package/dist/index.js +1 -1
  7. package/dist/style.css +1 -1
  8. package/package.json +1 -1
  9. package/src/App.vue +3 -3
  10. package/src/assets/styles/_dark.scss +170 -170
  11. package/src/assets/styles/_reset.scss +8 -8
  12. package/src/assets/styles/_root.scss +95 -93
  13. package/src/assets/styles/_variables.scss +17 -17
  14. package/src/assets/styles/index.scss +39 -39
  15. package/src/components/Layout/Footer.vue +1 -1
  16. package/src/components/Layout/Header.vue +54 -54
  17. package/src/components/Layout/MixTopMenu.vue +41 -41
  18. package/src/components/Layout/Sidebar.vue +8 -8
  19. package/src/components/Layout/SidebarMenuItem.vue +2 -2
  20. package/src/components/Layout/Tabs.vue +6 -6
  21. package/src/components/Layout/TopMenu.vue +41 -41
  22. package/src/components/Layout/index.vue +4 -4
  23. package/src/stores/app.ts +2 -2
  24. package/src/style.scss +2 -2
  25. package/src/views/dashboard/index.vue +32 -32
  26. package/src/views/error/403.vue +13 -13
  27. package/src/views/error/404.vue +19 -19
  28. package/src/views/login/index.vue +15 -15
  29. package/src/views/system/menu/index.vue +20 -20
  30. package/src/views/system/role/index.vue +20 -20
  31. package/src/views/system/user/index.vue +23 -23
package/src/views/error/403.vue CHANGED
@@ -33,10 +33,10 @@ const goBack = () => {
33
33
  <svg viewBox="0 0 200 120" fill="none" xmlns="http://www.w3.org/2000/svg">
34
34
  <!-- 盾牌 -->
35
35
  <path d="M100 15 L150 35 L150 70 C150 95 100 110 100 110 C100 110 50 95 50 70 L50 35 Z"
36
- fill="var(--xto-color-warning-light-9, #FFFBEB)" stroke="var(--xto-color-warning, #F59E0B)" stroke-width="2"/>
36
+ fill="var(--xto-color-warning-light-9, #FFF3E8)" stroke="var(--xto-color-warning, #FF7D00)" stroke-width="2"/>
37
37
  <!-- 锁 -->
38
- <rect x="85" y="55" width="30" height="25" rx="4" fill="var(--xto-color-warning, #F59E0B)"/>
39
- <path d="M92 55 V48 A8 8 0 0 1 108 48 V55" fill="none" stroke="var(--xto-color-warning, #F59E0B)" stroke-width="3"/>
38
+ <rect x="85" y="55" width="30" height="25" rx="4" fill="var(--xto-color-warning, #FF7D00)"/>
39
+ <path d="M92 55 V48 A8 8 0 0 1 108 48 V55" fill="none" stroke="var(--xto-color-warning, #FF7D00)" stroke-width="3"/>
40
40
  <!-- 禁止符号 -->
41
41
  <circle cx="100" cy="67" r="6" fill="none" stroke="#fff" stroke-width="2"/>
42
42
  <line x1="96" y1="63" x2="104" y2="71" stroke="#fff" stroke-width="2"/>
@@ -87,7 +87,7 @@ const goBack = () => {
87
87
  display: flex;
88
88
  align-items: center;
89
89
  justify-content: center;
90
- background: var(--xto-bg-color-page, #F9FAFB);
90
+ background: var(--xto-bg-color-page, #F7F8FA);
91
91
  position: relative;
92
92
  overflow: hidden;
93
93
  }
@@ -115,7 +115,7 @@ const goBack = () => {
115
115
  height: 400px;
116
116
  top: -100px;
117
117
  right: -100px;
118
- background: var(--xto-color-warning, #F59E0B);
118
+ background: var(--xto-color-warning, #FF7D00);
119
119
  }
120
120
 
121
121
  &.circle-2 {
@@ -123,7 +123,7 @@ const goBack = () => {
123
123
  height: 300px;
124
124
  bottom: -50px;
125
125
  left: -50px;
126
- background: var(--xto-color-warning, #F59E0B);
126
+ background: var(--xto-color-warning, #FF7D00);
127
127
  }
128
128
 
129
129
  &.circle-3 {
@@ -151,7 +151,7 @@ const goBack = () => {
151
151
  .code-digit {
152
152
  font-size: 80px;
153
153
  font-weight: 700;
154
- color: var(--xto-color-text-primary, #1F2937);
154
+ color: var(--xto-color-text-primary, #1F2329);
155
155
  line-height: 1;
156
156
  }
157
157
 
@@ -162,7 +162,7 @@ const goBack = () => {
162
162
  display: flex;
163
163
  align-items: center;
164
164
  justify-content: center;
165
- background: linear-gradient(135deg, var(--xto-color-warning, #F59E0B) 0%, var(--xto-color-warning-light, #FDE68A) 100%);
165
+ background: linear-gradient(135deg, var(--xto-color-warning, #FF7D00) 0%, var(--xto-color-warning-light, #FDE68A) 100%);
166
166
  border-radius: 50%;
167
167
 
168
168
  .zero-inner {
@@ -182,13 +182,13 @@ const goBack = () => {
182
182
  .error-title {
183
183
  font-size: 24px;
184
184
  font-weight: 600;
185
- color: var(--xto-color-text-primary, #1F2937);
185
+ color: var(--xto-color-text-primary, #1F2329);
186
186
  margin-bottom: 12px;
187
187
  }
188
188
 
189
189
  .error-desc {
190
190
  font-size: 14px;
191
- color: var(--xto-color-text-secondary, #6B7280);
191
+ color: var(--xto-color-text-secondary, #86909C);
192
192
  margin-bottom: 32px;
193
193
  }
194
194
 
@@ -218,7 +218,7 @@ const goBack = () => {
218
218
  p {
219
219
  font-size: 14px;
220
220
  font-weight: 500;
221
- color: var(--xto-color-text-primary, #1F2937);
221
+ color: var(--xto-color-text-primary, #1F2329);
222
222
  margin-bottom: 12px;
223
223
  }
224
224
 
@@ -229,7 +229,7 @@ const goBack = () => {
229
229
 
230
230
  li {
231
231
  font-size: 13px;
232
- color: var(--xto-color-text-secondary, #6B7280);
232
+ color: var(--xto-color-text-secondary, #86909C);
233
233
  padding: 4px 0;
234
234
  position: relative;
235
235
  padding-left: 16px;
@@ -242,7 +242,7 @@ const goBack = () => {
242
242
  transform: translateY(-50%);
243
243
  width: 6px;
244
244
  height: 6px;
245
- background: var(--xto-color-warning, #F59E0B);
245
+ background: var(--xto-color-warning, #FF7D00);
246
246
  border-radius: 50%;
247
247
  opacity: 0.6;
248
248
  }
package/src/views/error/404.vue CHANGED
@@ -32,16 +32,16 @@ const goBack = () => {
32
32
  <div class="error-illustration">
33
33
  <svg viewBox="0 0 200 120" fill="none" xmlns="http://www.w3.org/2000/svg">
34
34
  <!-- 页面图标 -->
35
- <rect x="40" y="20" width="120" height="80" rx="8" fill="var(--xto-fill-color, #F3F4F6)" stroke="var(--xto-border-color, #D1D5DB)" stroke-width="2"/>
35
+ <rect x="40" y="20" width="120" height="80" rx="8" fill="var(--xto-fill-color, #F2F3F5)" stroke="var(--xto-border-color, #D9DCE1)" stroke-width="2"/>
36
36
  <rect x="50" y="30" width="100" height="60" rx="4" fill="var(--xto-bg-color, #FFFFFF)"/>
37
- <line x1="60" y1="45" x2="140" y2="45" stroke="var(--xto-border-color-light, #E5E7EB)" stroke-width="2"/>
38
- <line x1="60" y1="55" x2="120" y2="55" stroke="var(--xto-border-color-light, #E5E7EB)" stroke-width="2"/>
39
- <line x1="60" y1="65" x2="100" y2="65" stroke="var(--xto-border-color-light, #E5E7EB)" stroke-width="2"/>
37
+ <line x1="60" y1="45" x2="140" y2="45" stroke="var(--xto-border-color-light, #E5E6EB)" stroke-width="2"/>
38
+ <line x1="60" y1="55" x2="120" y2="55" stroke="var(--xto-border-color-light, #E5E6EB)" stroke-width="2"/>
39
+ <line x1="60" y1="65" x2="100" y2="65" stroke="var(--xto-border-color-light, #E5E6EB)" stroke-width="2"/>
40
40
  <!-- 问号 -->
41
- <text x="100" y="75" text-anchor="middle" fill="var(--xto-color-primary, #4F46E5)" font-size="24" font-weight="600">?</text>
41
+ <text x="100" y="75" text-anchor="middle" fill="var(--xto-color-primary, #12B6AF)" font-size="24" font-weight="600">?</text>
42
42
  <!-- 搜索图标 -->
43
- <circle cx="150" cy="35" r="12" stroke="var(--xto-color-primary, #4F46E5)" stroke-width="2" fill="none"/>
44
- <line x1="158" y1="43" x2="168" y2="53" stroke="var(--xto-color-primary, #4F46E5)" stroke-width="2" stroke-linecap="round"/>
43
+ <circle cx="150" cy="35" r="12" stroke="var(--xto-color-primary, #12B6AF)" stroke-width="2" fill="none"/>
44
+ <line x1="158" y1="43" x2="168" y2="53" stroke="var(--xto-color-primary, #12B6AF)" stroke-width="2" stroke-linecap="round"/>
45
45
  </svg>
46
46
  </div>
47
47
 
@@ -89,7 +89,7 @@ const goBack = () => {
89
89
  display: flex;
90
90
  align-items: center;
91
91
  justify-content: center;
92
- background: var(--xto-bg-color-page, #F9FAFB);
92
+ background: var(--xto-bg-color-page, #F7F8FA);
93
93
  position: relative;
94
94
  overflow: hidden;
95
95
  }
@@ -117,7 +117,7 @@ const goBack = () => {
117
117
  height: 400px;
118
118
  top: -100px;
119
119
  right: -100px;
120
- background: var(--xto-color-primary, #4F46E5);
120
+ background: var(--xto-color-primary, #12B6AF);
121
121
  }
122
122
 
123
123
  &.circle-2 {
@@ -125,7 +125,7 @@ const goBack = () => {
125
125
  height: 300px;
126
126
  bottom: -50px;
127
127
  left: -50px;
128
- background: var(--xto-color-info, #6B7280);
128
+ background: var(--xto-color-info, #86909C);
129
129
  }
130
130
 
131
131
  &.circle-3 {
@@ -134,7 +134,7 @@ const goBack = () => {
134
134
  top: 50%;
135
135
  left: 50%;
136
136
  transform: translate(-50%, -50%);
137
- background: var(--xto-color-primary-light-3, #818CF8);
137
+ background: var(--xto-color-primary-light-3, #51DAD3);
138
138
  }
139
139
  }
140
140
  }
@@ -153,7 +153,7 @@ const goBack = () => {
153
153
  .code-digit {
154
154
  font-size: 80px;
155
155
  font-weight: 700;
156
- color: var(--xto-color-text-primary, #1F2937);
156
+ color: var(--xto-color-text-primary, #1F2329);
157
157
  line-height: 1;
158
158
  }
159
159
 
@@ -164,7 +164,7 @@ const goBack = () => {
164
164
  display: flex;
165
165
  align-items: center;
166
166
  justify-content: center;
167
- background: linear-gradient(135deg, var(--xto-color-primary, #4F46E5) 0%, var(--xto-color-primary-light-1, #5B54E8) 100%);
167
+ background: linear-gradient(135deg, var(--xto-color-primary, #12B6AF) 0%, var(--xto-color-primary-light-1, #17C3BB) 100%);
168
168
  border-radius: 50%;
169
169
 
170
170
  .zero-inner {
@@ -184,13 +184,13 @@ const goBack = () => {
184
184
  .error-title {
185
185
  font-size: 24px;
186
186
  font-weight: 600;
187
- color: var(--xto-color-text-primary, #1F2937);
187
+ color: var(--xto-color-text-primary, #1F2329);
188
188
  margin-bottom: 12px;
189
189
  }
190
190
 
191
191
  .error-desc {
192
192
  font-size: 14px;
193
- color: var(--xto-color-text-secondary, #6B7280);
193
+ color: var(--xto-color-text-secondary, #86909C);
194
194
  margin-bottom: 32px;
195
195
  }
196
196
 
@@ -214,13 +214,13 @@ const goBack = () => {
214
214
 
215
215
  .error-tip {
216
216
  padding: 20px;
217
- background: var(--xto-fill-color-light, #F9FAFB);
217
+ background: var(--xto-fill-color-light, #F7F8FA);
218
218
  border-radius: var(--xto-border-radius-large, 8px);
219
219
 
220
220
  p {
221
221
  font-size: 14px;
222
222
  font-weight: 500;
223
- color: var(--xto-color-text-primary, #1F2937);
223
+ color: var(--xto-color-text-primary, #1F2329);
224
224
  margin-bottom: 12px;
225
225
  }
226
226
 
@@ -231,7 +231,7 @@ const goBack = () => {
231
231
 
232
232
  li {
233
233
  font-size: 13px;
234
- color: var(--xto-color-text-secondary, #6B7280);
234
+ color: var(--xto-color-text-secondary, #86909C);
235
235
  padding: 4px 0;
236
236
  position: relative;
237
237
  padding-left: 16px;
@@ -244,7 +244,7 @@ const goBack = () => {
244
244
  transform: translateY(-50%);
245
245
  width: 6px;
246
246
  height: 6px;
247
- background: var(--xto-color-primary, #4F46E5);
247
+ background: var(--xto-color-primary, #12B6AF);
248
248
  border-radius: 50%;
249
249
  opacity: 0.6;
250
250
  }
package/src/views/login/index.vue CHANGED
@@ -252,7 +252,7 @@ const handleLogin = async () => {
252
252
  width: 100%;
253
253
  min-height: 100vh;
254
254
  display: flex;
255
- background: var(--xto-bg-color-page, #F5F7FA);
255
+ background: var(--xto-bg-color-page, #F7F8FA);
256
256
  }
257
257
 
258
258
  // 左侧品牌区域（淡紫蓝渐变网格背景，纯 CSS 无图片资源）
@@ -262,7 +262,7 @@ const handleLogin = async () => {
262
262
  display: flex;
263
263
  align-items: center;
264
264
  justify-content: center;
265
- background: linear-gradient(135deg, #172E6E 0%, #1E3A8A 45%, #1D4ED8 100%);
265
+ background: linear-gradient(135deg, #095755 0%, #0B6B67 45%, #12B6AF 100%);
266
266
  overflow: hidden;
267
267
 
268
268
  @media (max-width: 992px) {
@@ -462,13 +462,13 @@ const handleLogin = async () => {
462
462
  h2 {
463
463
  font-size: 28px;
464
464
  font-weight: 600;
465
- color: var(--xto-color-text-primary, #0F172A);
465
+ color: var(--xto-color-text-primary, #1F2329);
466
466
  margin-bottom: 8px;
467
467
  }
468
468
 
469
469
  p {
470
470
  font-size: 14px;
471
- color: var(--xto-color-text-secondary, #64748B);
471
+ color: var(--xto-color-text-secondary, #86909C);
472
472
  }
473
473
  }
474
474
 
@@ -481,7 +481,7 @@ const handleLogin = async () => {
481
481
  display: block;
482
482
  font-size: 14px;
483
483
  font-weight: 500;
484
- color: var(--xto-color-text-regular, #334155);
484
+ color: var(--xto-color-text-regular, #4E5566);
485
485
  margin-bottom: 8px;
486
486
  }
487
487
 
@@ -495,7 +495,7 @@ const handleLogin = async () => {
495
495
 
496
496
  :deep(.x-input__prefix) {
497
497
  margin-right: 12px;
498
- color: var(--xto-color-text-placeholder, #94A3B8);
498
+ color: var(--xto-color-text-placeholder, #A9AEB8);
499
499
  }
500
500
  }
501
501
 
@@ -507,12 +507,12 @@ const handleLogin = async () => {
507
507
 
508
508
  .forgot-link {
509
509
  font-size: 14px;
510
- color: var(--xto-color-primary, #1D4ED8);
510
+ color: var(--xto-color-primary, #12B6AF);
511
511
  text-decoration: none;
512
512
  transition: color 0.2s;
513
513
 
514
514
  &:hover {
515
- color: var(--xto-color-primary-dark-1, #1E40AF);
515
+ color: var(--xto-color-primary-dark-1, #0D7F7A);
516
516
  }
517
517
  }
518
518
  }
@@ -539,12 +539,12 @@ const handleLogin = async () => {
539
539
  .form-footer {
540
540
  margin-top: 32px;
541
541
  padding-top: 24px;
542
- border-top: 1px solid var(--xto-border-color-lighter, #EDF2F7);
542
+ border-top: 1px solid var(--xto-border-color-lighter, #EDEEF1);
543
543
  text-align: center;
544
544
 
545
545
  p {
546
546
  font-size: 13px;
547
- color: var(--xto-color-text-placeholder, #94A3B8);
547
+ color: var(--xto-color-text-placeholder, #A9AEB8);
548
548
  margin-bottom: 16px;
549
549
  }
550
550
 
@@ -560,12 +560,12 @@ const handleLogin = async () => {
560
560
  display: flex;
561
561
  align-items: center;
562
562
  justify-content: center;
563
- background: var(--xto-fill-color, #F1F5F9);
563
+ background: var(--xto-fill-color, #F2F3F5);
564
564
  border: none;
565
565
  border-radius: 50%;
566
566
  cursor: pointer;
567
567
  transition: all 0.2s ease;
568
- color: var(--xto-color-text-secondary, #64748B);
568
+ color: var(--xto-color-text-secondary, #86909C);
569
569
 
570
570
  svg {
571
571
  width: 20px;
@@ -573,8 +573,8 @@ const handleLogin = async () => {
573
573
  }
574
574
 
575
575
  &:hover {
576
- background: var(--xto-color-primary-light-8, #DBEAFE);
577
- color: var(--xto-color-primary, #1D4ED8);
576
+ background: var(--xto-color-primary-light-8, #DDF6F4);
577
+ color: var(--xto-color-primary, #12B6AF);
578
578
  transform: translateY(-2px);
579
579
  }
580
580
  }
@@ -586,7 +586,7 @@ const handleLogin = async () => {
586
586
 
587
587
  p {
588
588
  font-size: 12px;
589
- color: var(--xto-color-text-placeholder, #94A3B8);
589
+ color: var(--xto-color-text-placeholder, #A9AEB8);
590
590
  }
591
591
  }
592
592
  }
package/src/views/system/menu/index.vue CHANGED
@@ -275,9 +275,9 @@ onMounted(() => {
275
275
  <svg viewBox="0 0 64 41" fill="none">
276
276
  <g transform="translate(0 1)">
277
277
  <ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7"/>
278
- <g stroke="var(--xto-color-text-placeholder, #9CA3AF)" stroke-width="2">
278
+ <g stroke="var(--xto-color-text-placeholder, #A9AEB8)" stroke-width="2">
279
279
  <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"/>
280
- <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35H11.95C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="var(--xto-fill-color, #F3F4F6)"/>
280
+ <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35H11.95C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="var(--xto-fill-color, #F2F3F5)"/>
281
281
  </g>
282
282
  </g>
283
283
  </svg>
@@ -446,7 +446,7 @@ onMounted(() => {
446
446
  <style lang="scss" scoped>
447
447
  .menu-page {
448
448
  padding: 24px;
449
- background: var(--xto-bg-color-page, #F9FAFB);
449
+ background: var(--xto-bg-color-page, #F7F8FA);
450
450
  min-height: 100%;
451
451
  }
452
452
 
@@ -463,7 +463,7 @@ onMounted(() => {
463
463
  justify-content: space-between;
464
464
  align-items: center;
465
465
  padding: 16px 24px;
466
- border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
466
+ border-bottom: 1px solid var(--xto-border-color-lighter, #F2F3F5);
467
467
 
468
468
  .toolbar-left {
469
469
  display: flex;
@@ -472,7 +472,7 @@ onMounted(() => {
472
472
 
473
473
  .table-count {
474
474
  font-size: 14px;
475
- color: var(--xto-color-text-secondary, #6B7280);
475
+ color: var(--xto-color-text-secondary, #86909C);
476
476
  }
477
477
  }
478
478
 
@@ -488,14 +488,14 @@ onMounted(() => {
488
488
  th, td {
489
489
  padding: 14px 16px;
490
490
  text-align: left;
491
- border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
491
+ border-bottom: 1px solid var(--xto-border-color-lighter, #F2F3F5);
492
492
  }
493
493
 
494
494
  th {
495
495
  font-size: 14px;
496
496
  font-weight: 500;
497
- color: var(--xto-color-text-secondary, #6B7280);
498
- background: var(--xto-fill-color-light, #F9FAFB);
497
+ color: var(--xto-color-text-secondary, #86909C);
498
+ background: var(--xto-fill-color-light, #F7F8FA);
499
499
  white-space: nowrap;
500
500
  }
501
501
 
@@ -522,7 +522,7 @@ onMounted(() => {
522
522
  flex-direction: column;
523
523
  align-items: center;
524
524
  gap: 16px;
525
- color: var(--xto-color-text-placeholder, #9CA3AF);
525
+ color: var(--xto-color-text-placeholder, #A9AEB8);
526
526
 
527
527
  svg {
528
528
  width: 64px;
@@ -533,8 +533,8 @@ onMounted(() => {
533
533
  .loading-spinner {
534
534
  width: 32px;
535
535
  height: 32px;
536
- border: 3px solid var(--xto-border-color-lighter, #F3F4F6);
537
- border-top-color: var(--xto-color-primary, #4F46E5);
536
+ border: 3px solid var(--xto-border-color-lighter, #F2F3F5);
537
+ border-top-color: var(--xto-color-primary, #12B6AF);
538
538
  border-radius: 50%;
539
539
  animation: spin 0.8s linear infinite;
540
540
  }
@@ -561,7 +561,7 @@ onMounted(() => {
561
561
  display: inline-block;
562
562
  width: 16px;
563
563
  height: 1px;
564
- background: var(--xto-border-color-light, #E5E7EB);
564
+ background: var(--xto-border-color-light, #E5E6EB);
565
565
  margin-right: 8px;
566
566
  vertical-align: middle;
567
567
  }
@@ -583,7 +583,7 @@ onMounted(() => {
583
583
  display: flex;
584
584
  align-items: center;
585
585
  justify-content: center;
586
- background: var(--xto-fill-color-light, #F9FAFB);
586
+ background: var(--xto-fill-color-light, #F7F8FA);
587
587
  border-radius: var(--xto-border-radius-base, 6px);
588
588
  font-size: 14px;
589
589
  }
@@ -591,12 +591,12 @@ onMounted(() => {
591
591
  .menu-title {
592
592
  font-size: 14px;
593
593
  font-weight: 500;
594
- color: var(--xto-color-text-primary, #1F2937);
594
+ color: var(--xto-color-text-primary, #1F2329);
595
595
  cursor: pointer;
596
596
  transition: color 0.2s;
597
597
 
598
598
  &:hover {
599
- color: var(--xto-color-primary, #4F46E5);
599
+ color: var(--xto-color-primary, #12B6AF);
600
600
  }
601
601
  }
602
602
 
@@ -616,9 +616,9 @@ onMounted(() => {
616
616
  font-family: 'SF Mono', Monaco, Consolas, monospace;
617
617
  font-size: 12px;
618
618
  padding: 4px 8px;
619
- background: var(--xto-fill-color-light, #F9FAFB);
619
+ background: var(--xto-fill-color-light, #F7F8FA);
620
620
  border-radius: var(--xto-border-radius-small, 4px);
621
- color: var(--xto-color-text-secondary, #6B7280);
621
+ color: var(--xto-color-text-secondary, #86909C);
622
622
  }
623
623
 
624
624
  .col-type {
@@ -636,10 +636,10 @@ onMounted(() => {
636
636
  min-width: 24px;
637
637
  height: 24px;
638
638
  padding: 0 8px;
639
- background: var(--xto-fill-color, #F3F4F6);
639
+ background: var(--xto-fill-color, #F2F3F5);
640
640
  border-radius: 12px;
641
641
  font-size: 12px;
642
- color: var(--xto-color-text-secondary, #6B7280);
642
+ color: var(--xto-color-text-secondary, #86909C);
643
643
  }
644
644
 
645
645
  .col-status {
@@ -684,7 +684,7 @@ onMounted(() => {
684
684
 
685
685
  .status-label {
686
686
  font-size: 14px;
687
- color: var(--xto-color-text-secondary, #6B7280);
687
+ color: var(--xto-color-text-secondary, #86909C);
688
688
  }
689
689
  }
690
690
  </style>
package/src/views/system/role/index.vue CHANGED
@@ -237,9 +237,9 @@ onMounted(() => {
237
237
  <svg viewBox="0 0 64 41" fill="none">
238
238
  <g transform="translate(0 1)">
239
239
  <ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7"/>
240
- <g stroke="var(--xto-color-text-placeholder, #9CA3AF)" stroke-width="2">
240
+ <g stroke="var(--xto-color-text-placeholder, #A9AEB8)" stroke-width="2">
241
241
  <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"/>
242
- <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35H11.95C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="var(--xto-fill-color, #F3F4F6)"/>
242
+ <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35H11.95C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="var(--xto-fill-color, #F2F3F5)"/>
243
243
  </g>
244
244
  </g>
245
245
  </svg>
@@ -351,7 +351,7 @@ onMounted(() => {
351
351
  <style lang="scss" scoped>
352
352
  .role-page {
353
353
  padding: 24px;
354
- background: var(--xto-bg-color-page, #F9FAFB);
354
+ background: var(--xto-bg-color-page, #F7F8FA);
355
355
  min-height: 100%;
356
356
  }
357
357
 
@@ -392,7 +392,7 @@ onMounted(() => {
392
392
  justify-content: space-between;
393
393
  align-items: center;
394
394
  padding: 16px 24px;
395
- border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
395
+ border-bottom: 1px solid var(--xto-border-color-lighter, #F2F3F5);
396
396
 
397
397
  .toolbar-left {
398
398
  display: flex;
@@ -401,7 +401,7 @@ onMounted(() => {
401
401
 
402
402
  .table-count {
403
403
  font-size: 14px;
404
- color: var(--xto-color-text-secondary, #6B7280);
404
+ color: var(--xto-color-text-secondary, #86909C);
405
405
  }
406
406
  }
407
407
 
@@ -417,14 +417,14 @@ onMounted(() => {
417
417
  th, td {
418
418
  padding: 14px 16px;
419
419
  text-align: left;
420
- border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
420
+ border-bottom: 1px solid var(--xto-border-color-lighter, #F2F3F5);
421
421
  }
422
422
 
423
423
  th {
424
424
  font-size: 14px;
425
425
  font-weight: 500;
426
- color: var(--xto-color-text-secondary, #6B7280);
427
- background: var(--xto-fill-color-light, #F9FAFB);
426
+ color: var(--xto-color-text-secondary, #86909C);
427
+ background: var(--xto-fill-color-light, #F7F8FA);
428
428
  white-space: nowrap;
429
429
  }
430
430
 
@@ -451,7 +451,7 @@ onMounted(() => {
451
451
  flex-direction: column;
452
452
  align-items: center;
453
453
  gap: 16px;
454
- color: var(--xto-color-text-placeholder, #9CA3AF);
454
+ color: var(--xto-color-text-placeholder, #A9AEB8);
455
455
 
456
456
  svg {
457
457
  width: 64px;
@@ -462,8 +462,8 @@ onMounted(() => {
462
462
  .loading-spinner {
463
463
  width: 32px;
464
464
  height: 32px;
465
- border: 3px solid var(--xto-border-color-lighter, #F3F4F6);
466
- border-top-color: var(--xto-color-primary, #4F46E5);
465
+ border: 3px solid var(--xto-border-color-lighter, #F2F3F5);
466
+ border-top-color: var(--xto-color-primary, #12B6AF);
467
467
  border-radius: 50%;
468
468
  animation: spin 0.8s linear infinite;
469
469
  }
@@ -482,11 +482,11 @@ onMounted(() => {
482
482
  display: inline-block;
483
483
  min-width: 32px;
484
484
  padding: 4px 10px;
485
- background: var(--xto-fill-color, #F3F4F6);
485
+ background: var(--xto-fill-color, #F2F3F5);
486
486
  border-radius: 12px;
487
487
  font-size: 12px;
488
488
  font-weight: 500;
489
- color: var(--xto-color-text-secondary, #6B7280);
489
+ color: var(--xto-color-text-secondary, #86909C);
490
490
  text-align: center;
491
491
  }
492
492
 
@@ -497,7 +497,7 @@ onMounted(() => {
497
497
  .role-name {
498
498
  font-size: 14px;
499
499
  font-weight: 500;
500
- color: var(--xto-color-text-primary, #1F2937);
500
+ color: var(--xto-color-text-primary, #1F2329);
501
501
  }
502
502
 
503
503
  .col-code {
@@ -510,7 +510,7 @@ onMounted(() => {
510
510
 
511
511
  .desc-text {
512
512
  font-size: 14px;
513
- color: var(--xto-color-text-secondary, #6B7280);
513
+ color: var(--xto-color-text-secondary, #86909C);
514
514
  }
515
515
 
516
516
  .col-status {
@@ -525,10 +525,10 @@ onMounted(() => {
525
525
 
526
526
  .status-text {
527
527
  font-size: 13px;
528
- color: var(--xto-color-text-secondary, #6B7280);
528
+ color: var(--xto-color-text-secondary, #86909C);
529
529
 
530
530
  &.enabled {
531
- color: var(--xto-color-success, #10B981);
531
+ color: var(--xto-color-success, #2BC48A);
532
532
  }
533
533
  }
534
534
 
@@ -538,7 +538,7 @@ onMounted(() => {
538
538
 
539
539
  .time-text {
540
540
  font-size: 13px;
541
- color: var(--xto-color-text-secondary, #6B7280);
541
+ color: var(--xto-color-text-secondary, #86909C);
542
542
  }
543
543
 
544
544
  .col-actions {
@@ -562,7 +562,7 @@ onMounted(() => {
562
562
  display: flex;
563
563
  justify-content: flex-end;
564
564
  padding: 16px 24px;
565
- border-top: 1px solid var(--xto-border-color-lighter, #F3F4F6);
565
+ border-top: 1px solid var(--xto-border-color-lighter, #F2F3F5);
566
566
  }
567
567
 
568
568
  // 弹窗表单
@@ -577,7 +577,7 @@ onMounted(() => {
577
577
 
578
578
  .status-label {
579
579
  font-size: 14px;
580
- color: var(--xto-color-text-secondary, #6B7280);
580
+ color: var(--xto-color-text-secondary, #86909C);
581
581
  }
582
582
  }
583
583
  </style>