xto-fronted 0.6.3 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/{index-DydABgae.js → index-D73_-C9m.js} +13 -13
  2. package/dist/index-DBjV4kzh.js +249 -0
  3. package/dist/{index-IOKG7Gwo.js → index-DJ1oHe08.js} +973 -918
  4. package/dist/{index-BKO6Hzba.js → index-D_TGEwDg.js} +192 -140
  5. package/dist/{index-BZSZ3bx2.js → index-DauAWAHG.js} +28 -28
  6. package/dist/index.js +1 -1
  7. package/dist/style.css +1 -1
  8. package/package.json +9 -9
  9. package/src/App.vue +4 -4
  10. package/src/assets/styles/_dark.scss +176 -176
  11. package/src/assets/styles/_reset.scss +8 -8
  12. package/src/assets/styles/_root.scss +131 -125
  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 +59 -60
  17. package/src/components/Layout/MixTopMenu.vue +42 -43
  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 +42 -43
  22. package/src/components/Layout/index.vue +4 -4
  23. package/src/stores/app.ts +26 -2
  24. package/src/style.scss +2 -2
  25. package/src/views/dashboard/index.vue +125 -104
  26. package/src/views/error/403.vue +13 -13
  27. package/src/views/error/404.vue +14 -14
  28. package/src/views/login/index.vue +21 -54
  29. package/src/views/system/menu/index.vue +30 -30
  30. package/src/views/system/role/index.vue +20 -20
  31. package/src/views/system/user/index.vue +23 -23
  32. package/vite.config.ts +4 -1
  33. package/dist/index-BXHwCe22.js +0 -189
package/src/components/Layout/Header.vue CHANGED
@@ -37,12 +37,11 @@ const layoutOptions: { value: LayoutMode; label: string; icon: string }[] = [
37
37
 
38
38
  // 主题色选项
39
39
  const colorOptions = [
40
- { value: '#1D4ED8', label: '品牌蓝' },
41
- { value: '#1890ff', label: '科技蓝' },
42
- { value: '#52c41a', label: '极光绿' },
43
- { value: '#faad14', label: '日落橙' },
44
- { value: '#f5222d', label: '薄暮红' },
45
- { value: '#722ed1', label: '酱紫' }
40
+ { value: '#4F46E5', label: '品牌蓝' },
41
+ { value: '#0F6FDE', label: '企业蓝' },
42
+ { value: '#00A870', label: '翡翠绿' },
43
+ { value: '#D46B08', label: '琥珀橙' },
44
+ { value: '#1F2329', label: '石墨黑' }
46
45
  ]
47
46
 
48
47
  // 面包屑
@@ -352,7 +351,7 @@ onUnmounted(() => {
352
351
  <span>{{ userStore.userName?.charAt(0) || 'U' }}</span>
353
352
  </div>
354
353
  <span class="header__user-name">{{ userStore.userName }}</span>
355
- <span class="header__user-arrow" :class="{ 'is-active': dropdownVisible }">▼</span>
354
+ <span class="header__user-arrow" :class="{ 'is-active': dropdownVisible }"><svg viewBox="0 0 12 12" width="10" height="10" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 4.5 6 8l3.5-3.5"/></svg></span>
356
355
  </div>
357
356
 
358
357
  <!-- 下拉菜单 -->
@@ -481,7 +480,7 @@ onUnmounted(() => {
481
480
  padding: 0 20px;
482
481
  height: 100%;
483
482
  background-color: var(--xto-bg-color, #FFFFFF);
484
- border-bottom: 1px solid var(--xto-border-color-lighter, #F1F5F9);
483
+ border-bottom: 1px solid var(--xto-border-color-lighter, #F2F3F5);
485
484
 
486
485
  &__left {
487
486
  display: flex;
@@ -496,25 +495,25 @@ onUnmounted(() => {
496
495
  align-items: center;
497
496
  justify-content: center;
498
497
  cursor: pointer;
499
- color: var(--xto-color-text-regular, #334155);
498
+ color: var(--xto-color-text-regular, #4E5566);
500
499
  transition: color 0.2s;
501
500
 
502
501
  &:hover {
503
- color: var(--xto-color-primary, #1D4ED8);
502
+ color: var(--xto-color-primary, #4F46E5);
504
503
  }
505
504
  }
506
505
 
507
506
  &__breadcrumb {
508
507
  font-size: 14px;
509
- color: var(--xto-color-text-secondary, #64748B);
508
+ color: var(--xto-color-text-secondary, #86909C);
510
509
 
511
510
  .breadcrumb-separator {
512
511
  margin: 0 8px;
513
- color: var(--xto-color-text-placeholder, #94A3B8);
512
+ color: var(--xto-color-text-placeholder, #A9AEB8);
514
513
  }
515
514
 
516
515
  .is-current {
517
- color: var(--xto-color-text-primary, #0F172A);
516
+ color: var(--xto-color-text-primary, #1F2329);
518
517
  font-weight: 500;
519
518
  }
520
519
  }
@@ -529,28 +528,28 @@ onUnmounted(() => {
529
528
  position: relative;
530
529
  display: flex;
531
530
  align-items: center;
532
- background-color: var(--xto-fill-color-light, #F8FAFC);
531
+ background-color: var(--xto-fill-color-light, #F7F8FA);
533
532
  border-radius: var(--xto-border-radius-base, 6px);
534
533
  padding: 0 12px;
535
- height: 32px;
534
+ height: 36px;
536
535
  width: 200px;
537
536
 
538
537
  &-icon {
539
- color: var(--xto-color-text-secondary, #64748B);
538
+ color: var(--xto-color-text-secondary, #86909C);
540
539
  }
541
540
 
542
541
  &-input {
543
542
  flex: 1;
544
543
  height: 100%;
545
544
  font-size: 14px;
546
- color: var(--xto-color-text-primary, #0F172A);
545
+ color: var(--xto-color-text-primary, #1F2329);
547
546
  background: transparent;
548
547
  border: none;
549
548
  outline: none;
550
549
  padding-left: 8px;
551
550
 
552
551
  &::placeholder {
553
- color: var(--xto-color-text-placeholder, #94A3B8);
552
+ color: var(--xto-color-text-placeholder, #A9AEB8);
554
553
  }
555
554
  }
556
555
 
@@ -581,17 +580,17 @@ onUnmounted(() => {
581
580
  transition: background-color 0.2s;
582
581
 
583
582
  &:hover {
584
- background-color: var(--xto-fill-color, #F1F5F9);
583
+ background-color: var(--xto-fill-color, #F2F3F5);
585
584
  }
586
585
 
587
586
  &-title {
588
587
  font-size: 14px;
589
- color: var(--xto-color-text-primary, #0F172A);
588
+ color: var(--xto-color-text-primary, #1F2329);
590
589
  }
591
590
 
592
591
  &-parent {
593
592
  font-size: 12px;
594
- color: var(--xto-color-text-secondary, #64748B);
593
+ color: var(--xto-color-text-secondary, #86909C);
595
594
  margin-left: auto;
596
595
  }
597
596
  }
@@ -613,15 +612,15 @@ onUnmounted(() => {
613
612
  height: 16px;
614
613
  font-size: 12px;
615
614
  font-weight: 600;
616
- color: var(--xto-color-primary, #1D4ED8);
617
- background-color: var(--xto-color-primary-light-8, #DBEAFE);
615
+ color: var(--xto-color-primary, #4F46E5);
616
+ background-color: var(--xto-color-primary-light-8, #DCDAFC);
618
617
  border-radius: var(--xto-border-radius-small, 4px);
619
618
  }
620
619
 
621
620
  &-empty {
622
621
  padding: 16px 12px;
623
622
  text-align: center;
624
- color: var(--xto-color-text-secondary, #64748B);
623
+ color: var(--xto-color-text-secondary, #86909C);
625
624
  font-size: 14px;
626
625
  }
627
626
  }
@@ -634,12 +633,12 @@ onUnmounted(() => {
634
633
  justify-content: center;
635
634
  cursor: pointer;
636
635
  border-radius: var(--xto-border-radius-circle, 50%);
637
- color: var(--xto-color-text-regular, #334155);
636
+ color: var(--xto-color-text-regular, #4E5566);
638
637
  transition: all 0.2s;
639
638
 
640
639
  &:hover {
641
- background-color: var(--xto-fill-color, #F1F5F9);
642
- color: var(--xto-color-primary, #1D4ED8);
640
+ background-color: var(--xto-fill-color, #F2F3F5);
641
+ color: var(--xto-color-primary, #4F46E5);
643
642
  }
644
643
  }
645
644
 
@@ -658,13 +657,13 @@ onUnmounted(() => {
658
657
  transition: background-color 0.2s;
659
658
 
660
659
  &:hover {
661
- background-color: var(--xto-fill-color, #F1F5F9);
660
+ background-color: var(--xto-fill-color, #F2F3F5);
662
661
  }
663
662
  }
664
663
 
665
664
  &-name {
666
665
  font-size: 14px;
667
- color: var(--xto-color-text-primary, #0F172A);
666
+ color: var(--xto-color-text-primary, #1F2329);
668
667
  max-width: 100px;
669
668
  overflow: hidden;
670
669
  text-overflow: ellipsis;
@@ -673,7 +672,7 @@ onUnmounted(() => {
673
672
 
674
673
  &-arrow {
675
674
  font-size: 10px;
676
- color: var(--xto-color-text-secondary, #64748B);
675
+ color: var(--xto-color-text-secondary, #86909C);
677
676
  transition: transform 0.2s;
678
677
 
679
678
  &.is-active {
@@ -686,7 +685,7 @@ onUnmounted(() => {
686
685
  width: 32px;
687
686
  height: 32px;
688
687
  border-radius: 50%;
689
- background: linear-gradient(135deg, var(--xto-color-primary, #1D4ED8), var(--xto-color-primary-light-3, #4C8DFF));
688
+ background: var(--xto-color-primary, #4F46E5);
690
689
  display: flex;
691
690
  align-items: center;
692
691
  justify-content: center;
@@ -717,7 +716,7 @@ onUnmounted(() => {
717
716
  width: 40px;
718
717
  height: 40px;
719
718
  border-radius: 50%;
720
- background: linear-gradient(135deg, var(--xto-color-primary, #1D4ED8), var(--xto-color-primary-light-3, #4C8DFF));
719
+ background: var(--xto-color-primary, #4F46E5);
721
720
  display: flex;
722
721
  align-items: center;
723
722
  justify-content: center;
@@ -733,18 +732,18 @@ onUnmounted(() => {
733
732
  &-name {
734
733
  font-size: 14px;
735
734
  font-weight: 500;
736
- color: var(--xto-color-text-primary, #0F172A);
735
+ color: var(--xto-color-text-primary, #1F2329);
737
736
  }
738
737
 
739
738
  &-role {
740
739
  font-size: 12px;
741
- color: var(--xto-color-text-secondary, #64748B);
740
+ color: var(--xto-color-text-secondary, #86909C);
742
741
  margin-top: 2px;
743
742
  }
744
743
 
745
744
  &-divider {
746
745
  height: 1px;
747
- background-color: var(--xto-border-color-lighter, #F1F5F9);
746
+ background-color: var(--xto-border-color-lighter, #F2F3F5);
748
747
  }
749
748
 
750
749
  &-menu {
@@ -758,20 +757,20 @@ onUnmounted(() => {
758
757
  padding: 10px 16px;
759
758
  cursor: pointer;
760
759
  font-size: 14px;
761
- color: var(--xto-color-text-regular, #334155);
760
+ color: var(--xto-color-text-regular, #4E5566);
762
761
  transition: all 0.2s;
763
762
 
764
763
  &:hover {
765
- background-color: var(--xto-fill-color, #F1F5F9);
766
- color: var(--xto-color-text-primary, #0F172A);
764
+ background-color: var(--xto-fill-color, #F2F3F5);
765
+ color: var(--xto-color-text-primary, #1F2329);
767
766
  }
768
767
 
769
768
  &--danger {
770
- color: var(--xto-color-danger, #EF4444);
769
+ color: var(--xto-color-danger, #F53F3F);
771
770
 
772
771
  &:hover {
773
772
  background-color: var(--xto-color-danger-light, #FEE2E2);
774
- color: var(--xto-color-danger, #EF4444);
773
+ color: var(--xto-color-danger, #F53F3F);
775
774
  }
776
775
  }
777
776
  }
@@ -787,7 +786,7 @@ onUnmounted(() => {
787
786
  .settings-title {
788
787
  font-size: 14px;
789
788
  font-weight: 500;
790
- color: var(--xto-color-text-primary, #0F172A);
789
+ color: var(--xto-color-text-primary, #1F2329);
791
790
  margin-bottom: 12px;
792
791
  }
793
792
 
@@ -803,31 +802,31 @@ onUnmounted(() => {
803
802
  align-items: center;
804
803
  gap: 8px;
805
804
  padding: 12px;
806
- border: 1px solid var(--xto-border-color, #CBD5E1);
805
+ border: 1px solid var(--xto-border-color, #D9DCE1);
807
806
  border-radius: var(--xto-border-radius-base, 6px);
808
807
  cursor: pointer;
809
808
  transition: all 0.2s;
810
809
 
811
810
  &:hover {
812
- border-color: var(--xto-color-primary-light-5, #93C5FD);
811
+ border-color: var(--xto-color-primary-light-5, #A7A2F2);
813
812
  }
814
813
 
815
814
  &.is-active {
816
- border-color: var(--xto-color-primary, #1D4ED8);
817
- background-color: var(--xto-color-primary-light-9, #EFF6FF);
815
+ border-color: var(--xto-color-primary, #4F46E5);
816
+ background-color: var(--xto-color-primary-light-9, #EAF9F8);
818
817
  }
819
818
 
820
819
  &__preview {
821
820
  width: 48px;
822
821
  height: 36px;
823
- border: 1px solid var(--xto-border-color-light, #E2E8F0);
822
+ border: 1px solid var(--xto-border-color-light, #E5E6EB);
824
823
  border-radius: 2px;
825
824
  overflow: hidden;
826
825
  }
827
826
 
828
827
  &__label {
829
828
  font-size: 12px;
830
- color: var(--xto-color-text-regular, #334155);
829
+ color: var(--xto-color-text-regular, #4E5566);
831
830
  }
832
831
  }
833
832
 
@@ -839,7 +838,7 @@ onUnmounted(() => {
839
838
  .preview-aside {
840
839
  width: 25%;
841
840
  height: 100%;
842
- background-color: var(--xto-color-primary-light-7, #D0E1FE);
841
+ background-color: var(--xto-color-primary-light-7, #CAC7F9);
843
842
  }
844
843
 
845
844
  .preview-main {
@@ -849,12 +848,12 @@ onUnmounted(() => {
849
848
 
850
849
  .preview-header {
851
850
  height: 20%;
852
- background-color: var(--xto-border-color-light, #E2E8F0);
851
+ background-color: var(--xto-border-color-light, #E5E6EB);
853
852
  }
854
853
 
855
854
  .preview-content {
856
855
  flex: 1;
857
- background-color: var(--xto-bg-color-page, #F8FAFC);
856
+ background-color: var(--xto-bg-color-page, #F7F8FA);
858
857
  }
859
858
  }
860
859
  }
@@ -866,12 +865,12 @@ onUnmounted(() => {
866
865
 
867
866
  .preview-header-full {
868
867
  height: 25%;
869
- background-color: var(--xto-color-primary-light-7, #D0E1FE);
868
+ background-color: var(--xto-color-primary-light-7, #CAC7F9);
870
869
  }
871
870
 
872
871
  .preview-content-full {
873
872
  flex: 1;
874
- background-color: var(--xto-bg-color-page, #F8FAFC);
873
+ background-color: var(--xto-bg-color-page, #F7F8FA);
875
874
  }
876
875
  }
877
876
 
@@ -882,12 +881,12 @@ onUnmounted(() => {
882
881
 
883
882
  .preview-header-mix {
884
883
  height: 25%;
885
- background-color: var(--xto-color-primary-light-7, #D0E1FE);
884
+ background-color: var(--xto-color-primary-light-7, #CAC7F9);
886
885
  display: flex;
887
886
 
888
887
  .preview-mix-left {
889
888
  width: 30%;
890
- background-color: var(--xto-color-primary, #1D4ED8);
889
+ background-color: var(--xto-color-primary, #4F46E5);
891
890
  }
892
891
  }
893
892
 
@@ -897,12 +896,12 @@ onUnmounted(() => {
897
896
 
898
897
  .preview-mix-aside {
899
898
  width: 25%;
900
- background-color: var(--xto-color-primary-light-8, #DBEAFE);
899
+ background-color: var(--xto-color-primary-light-8, #DCDAFC);
901
900
  }
902
901
 
903
902
  .preview-mix-content {
904
903
  flex: 1;
905
- background-color: var(--xto-bg-color-page, #F8FAFC);
904
+ background-color: var(--xto-bg-color-page, #F7F8FA);
906
905
  }
907
906
  }
908
907
  }
@@ -927,7 +926,7 @@ onUnmounted(() => {
927
926
  }
928
927
 
929
928
  &.is-active {
930
- box-shadow: 0 0 0 2px var(--xto-bg-color, #FFFFFF), 0 0 0 4px var(--xto-color-primary, #1D4ED8);
929
+ box-shadow: 0 0 0 2px var(--xto-bg-color, #FFFFFF), 0 0 0 4px var(--xto-color-primary, #4F46E5);
931
930
  }
932
931
  }
933
932
 
@@ -944,7 +943,7 @@ onUnmounted(() => {
944
943
 
945
944
  span {
946
945
  font-size: 14px;
947
- color: var(--xto-color-text-regular, #334155);
946
+ color: var(--xto-color-text-regular, #4E5566);
948
947
  }
949
948
  }
950
949
 
@@ -959,7 +958,7 @@ onUnmounted(() => {
959
958
  width: 100%;
960
959
  height: 100%;
961
960
  border-radius: 11px;
962
- background-color: var(--xto-border-color, #CBD5E1);
961
+ background-color: var(--xto-border-color, #D9DCE1);
963
962
  position: relative;
964
963
  transition: background-color 0.2s;
965
964
 
@@ -978,7 +977,7 @@ onUnmounted(() => {
978
977
 
979
978
  &.is-checked {
980
979
  .switch-core {
981
- background-color: var(--xto-color-primary, #1D4ED8);
980
+ background-color: var(--xto-color-primary, #4F46E5);
982
981
 
983
982
  &::after {
984
983
  left: 24px;
package/src/components/Layout/MixTopMenu.vue CHANGED
@@ -289,11 +289,10 @@ const handleLayoutChange = (mode: LayoutMode) => {
289
289
  // 主题色选项
290
290
  const colorOptions = [
291
291
  { value: '#409eff', label: '默认蓝' },
292
- { value: '#1890ff', label: '科技蓝' },
293
- { value: '#52c41a', label: '极光绿' },
294
- { value: '#faad14', label: '日落橙' },
295
- { value: '#f5222d', label: '薄暮红' },
296
- { value: '#722ed1', label: '酱紫' }
292
+ { value: '#0F6FDE', label: '企业蓝' },
293
+ { value: '#00A870', label: '翡翠绿' },
294
+ { value: '#D46B08', label: '琥珀橙' },
295
+ { value: '#1F2329', label: '石墨黑' }
297
296
  ]
298
297
 
299
298
  // 设置主题色
@@ -448,7 +447,7 @@ onUnmounted(() => {
448
447
  <span>{{ userStore.userName?.charAt(0) || 'U' }}</span>
449
448
  </div>
450
449
  <span class="mix-top-menu__user-name">{{ userStore.userName }}</span>
451
- <span class="mix-top-menu__user-arrow" :class="{ 'is-active': dropdownVisible }">▼</span>
450
+ <span class="mix-top-menu__user-arrow" :class="{ 'is-active': dropdownVisible }"><svg viewBox="0 0 12 12" width="10" height="10" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 4.5 6 8l3.5-3.5"/></svg></span>
452
451
  </div>
453
452
 
454
453
  <!-- 下拉菜单 -->
@@ -685,7 +684,7 @@ onUnmounted(() => {
685
684
  font-size: 12px;
686
685
  font-weight: 600;
687
686
  color: var(--xto-color-primary, #4F46E5);
688
- background-color: var(--xto-color-primary-light-8, #C7D2FE);
687
+ background-color: var(--xto-color-primary-light-8, #CAC7F9);
689
688
  border-radius: var(--xto-border-radius-small, 4px);
690
689
  }
691
690
 
@@ -700,28 +699,28 @@ onUnmounted(() => {
700
699
  position: relative;
701
700
  display: flex;
702
701
  align-items: center;
703
- background-color: var(--xto-fill-color-light, #F5F7FA);
702
+ background-color: var(--xto-fill-color-light, #F7F8FA);
704
703
  border-radius: var(--xto-border-radius-base, 6px);
705
704
  padding: 0 12px;
706
705
  height: 32px;
707
706
  width: 200px;
708
707
 
709
708
  &-icon {
710
- color: var(--xto-color-text-secondary, #6B7280);
709
+ color: var(--xto-color-text-secondary, #86909C);
711
710
  }
712
711
 
713
712
  &-input {
714
713
  flex: 1;
715
714
  height: 100%;
716
715
  font-size: 14px;
717
- color: var(--xto-color-text-primary, #1F2937);
716
+ color: var(--xto-color-text-primary, #1F2329);
718
717
  background: transparent;
719
718
  border: none;
720
719
  outline: none;
721
720
  padding-left: 8px;
722
721
 
723
722
  &::placeholder {
724
- color: var(--xto-color-text-placeholder, #9CA3AF);
723
+ color: var(--xto-color-text-placeholder, #A9AEB8);
725
724
  }
726
725
  }
727
726
 
@@ -752,17 +751,17 @@ onUnmounted(() => {
752
751
  transition: background-color 0.2s;
753
752
 
754
753
  &:hover {
755
- background-color: var(--xto-fill-color, #EDF2F7);
754
+ background-color: var(--xto-fill-color, #EDEEF1);
756
755
  }
757
756
 
758
757
  &-title {
759
758
  font-size: 14px;
760
- color: var(--xto-color-text-primary, #1F2937);
759
+ color: var(--xto-color-text-primary, #1F2329);
761
760
  }
762
761
 
763
762
  &-parent {
764
763
  font-size: 12px;
765
- color: var(--xto-color-text-secondary, #6B7280);
764
+ color: var(--xto-color-text-secondary, #86909C);
766
765
  margin-left: auto;
767
766
  }
768
767
  }
@@ -785,14 +784,14 @@ onUnmounted(() => {
785
784
  font-size: 12px;
786
785
  font-weight: 600;
787
786
  color: var(--xto-color-primary, #4F46E5);
788
- background-color: var(--xto-color-primary-light-8, #C7D2FE);
787
+ background-color: var(--xto-color-primary-light-8, #CAC7F9);
789
788
  border-radius: var(--xto-border-radius-small, 4px);
790
789
  }
791
790
 
792
791
  &-empty {
793
792
  padding: 16px 12px;
794
793
  text-align: center;
795
- color: var(--xto-color-text-secondary, #6B7280);
794
+ color: var(--xto-color-text-secondary, #86909C);
796
795
  font-size: 14px;
797
796
  }
798
797
  }
@@ -805,11 +804,11 @@ onUnmounted(() => {
805
804
  justify-content: center;
806
805
  cursor: pointer;
807
806
  border-radius: var(--xto-border-radius-base, 6px);
808
- color: var(--xto-color-text-regular, #4B5563);
807
+ color: var(--xto-color-text-regular, #4E5566);
809
808
  transition: all 0.2s;
810
809
 
811
810
  &:hover {
812
- background-color: var(--xto-fill-color, #EDF2F7);
811
+ background-color: var(--xto-fill-color, #EDEEF1);
813
812
  color: var(--xto-color-primary, #4F46E5);
814
813
  }
815
814
  }
@@ -829,13 +828,13 @@ onUnmounted(() => {
829
828
  transition: background-color 0.2s;
830
829
 
831
830
  &:hover {
832
- background-color: var(--xto-fill-color, #EDF2F7);
831
+ background-color: var(--xto-fill-color, #EDEEF1);
833
832
  }
834
833
  }
835
834
 
836
835
  &-name {
837
836
  font-size: 14px;
838
- color: var(--xto-color-text-primary, #1F2937);
837
+ color: var(--xto-color-text-primary, #1F2329);
839
838
  max-width: 100px;
840
839
  overflow: hidden;
841
840
  text-overflow: ellipsis;
@@ -844,7 +843,7 @@ onUnmounted(() => {
844
843
 
845
844
  &-arrow {
846
845
  font-size: 10px;
847
- color: var(--xto-color-text-secondary, #6B7280);
846
+ color: var(--xto-color-text-secondary, #86909C);
848
847
  transition: transform 0.2s;
849
848
 
850
849
  &.is-active {
@@ -857,7 +856,7 @@ onUnmounted(() => {
857
856
  width: 32px;
858
857
  height: 32px;
859
858
  border-radius: 50%;
860
- background: linear-gradient(135deg, var(--xto-color-primary, #4F46E5), var(--xto-color-primary-light-3, #818CF8));
859
+ background: linear-gradient(135deg, var(--xto-color-primary, #4F46E5), var(--xto-color-primary-light-3, #847DEC));
861
860
  display: flex;
862
861
  align-items: center;
863
862
  justify-content: center;
@@ -889,7 +888,7 @@ onUnmounted(() => {
889
888
  width: 40px;
890
889
  height: 40px;
891
890
  border-radius: 50%;
892
- background: linear-gradient(135deg, var(--xto-color-primary, #4F46E5), var(--xto-color-primary-light-3, #818CF8));
891
+ background: linear-gradient(135deg, var(--xto-color-primary, #4F46E5), var(--xto-color-primary-light-3, #847DEC));
893
892
  display: flex;
894
893
  align-items: center;
895
894
  justify-content: center;
@@ -905,18 +904,18 @@ onUnmounted(() => {
905
904
  &-name {
906
905
  font-size: 14px;
907
906
  font-weight: 500;
908
- color: var(--xto-color-text-primary, #1F2937);
907
+ color: var(--xto-color-text-primary, #1F2329);
909
908
  }
910
909
 
911
910
  &-role {
912
911
  font-size: 12px;
913
- color: var(--xto-color-text-secondary, #6B7280);
912
+ color: var(--xto-color-text-secondary, #86909C);
914
913
  margin-top: 2px;
915
914
  }
916
915
 
917
916
  &-divider {
918
917
  height: 1px;
919
- background-color: var(--xto-border-color-lighter, #EDF2F7);
918
+ background-color: var(--xto-border-color-lighter, #EDEEF1);
920
919
  }
921
920
 
922
921
  &-menu {
@@ -930,20 +929,20 @@ onUnmounted(() => {
930
929
  padding: 10px 16px;
931
930
  cursor: pointer;
932
931
  font-size: 14px;
933
- color: var(--xto-color-text-regular, #4B5563);
932
+ color: var(--xto-color-text-regular, #4E5566);
934
933
  transition: all 0.2s;
935
934
 
936
935
  &:hover {
937
- background-color: var(--xto-fill-color, #EDF2F7);
938
- color: var(--xto-color-text-primary, #1F2937);
936
+ background-color: var(--xto-fill-color, #EDEEF1);
937
+ color: var(--xto-color-text-primary, #1F2329);
939
938
  }
940
939
 
941
940
  &--danger {
942
- color: var(--xto-color-danger, #EF4444);
941
+ color: var(--xto-color-danger, #F53F3F);
943
942
 
944
943
  &:hover {
945
944
  background-color: var(--xto-color-danger-light, #FEE2E2);
946
- color: var(--xto-color-danger, #EF4444);
945
+ color: var(--xto-color-danger, #F53F3F);
947
946
  }
948
947
  }
949
948
  }
@@ -959,7 +958,7 @@ onUnmounted(() => {
959
958
  .settings-title {
960
959
  font-size: 14px;
961
960
  font-weight: 500;
962
- color: var(--xto-color-text-primary, #1F2937);
961
+ color: var(--xto-color-text-primary, #1F2329);
963
962
  margin-bottom: 12px;
964
963
  }
965
964
 
@@ -975,13 +974,13 @@ onUnmounted(() => {
975
974
  align-items: center;
976
975
  gap: 8px;
977
976
  padding: 12px;
978
- border: 1px solid var(--xto-border-color, #D1D5DB);
977
+ border: 1px solid var(--xto-border-color, #D9DCE1);
979
978
  border-radius: var(--xto-border-radius-base, 6px);
980
979
  cursor: pointer;
981
980
  transition: all 0.2s;
982
981
 
983
982
  &:hover {
984
- border-color: var(--xto-color-primary-light-5, #A5B4FC);
983
+ border-color: var(--xto-color-primary-light-5, #B9B5F5);
985
984
  }
986
985
 
987
986
  &.is-active {
@@ -992,14 +991,14 @@ onUnmounted(() => {
992
991
  &__preview {
993
992
  width: 48px;
994
993
  height: 36px;
995
- border: 1px solid var(--xto-border-color-light, #E5E7EB);
994
+ border: 1px solid var(--xto-border-color-light, #E5E6EB);
996
995
  border-radius: 2px;
997
996
  overflow: hidden;
998
997
  }
999
998
 
1000
999
  &__label {
1001
1000
  font-size: 12px;
1002
- color: var(--xto-color-text-regular, #4B5563);
1001
+ color: var(--xto-color-text-regular, #4E5566);
1003
1002
  }
1004
1003
  }
1005
1004
 
@@ -1021,12 +1020,12 @@ onUnmounted(() => {
1021
1020
 
1022
1021
  .preview-header {
1023
1022
  height: 20%;
1024
- background-color: var(--xto-border-color-light, #E5E7EB);
1023
+ background-color: var(--xto-border-color-light, #E5E6EB);
1025
1024
  }
1026
1025
 
1027
1026
  .preview-content {
1028
1027
  flex: 1;
1029
- background-color: var(--xto-bg-color-page, #F5F7FA);
1028
+ background-color: var(--xto-bg-color-page, #F7F8FA);
1030
1029
  }
1031
1030
  }
1032
1031
  }
@@ -1043,7 +1042,7 @@ onUnmounted(() => {
1043
1042
 
1044
1043
  .preview-content-full {
1045
1044
  flex: 1;
1046
- background-color: var(--xto-bg-color-page, #F5F7FA);
1045
+ background-color: var(--xto-bg-color-page, #F7F8FA);
1047
1046
  }
1048
1047
  }
1049
1048
 
@@ -1069,12 +1068,12 @@ onUnmounted(() => {
1069
1068
 
1070
1069
  .preview-mix-aside {
1071
1070
  width: 25%;
1072
- background-color: var(--xto-color-primary-light-8, #C7D2FE);
1071
+ background-color: var(--xto-color-primary-light-8, #CAC7F9);
1073
1072
  }
1074
1073
 
1075
1074
  .preview-mix-content {
1076
1075
  flex: 1;
1077
- background-color: var(--xto-bg-color-page, #F5F7FA);
1076
+ background-color: var(--xto-bg-color-page, #F7F8FA);
1078
1077
  }
1079
1078
  }
1080
1079
  }
@@ -1116,7 +1115,7 @@ onUnmounted(() => {
1116
1115
 
1117
1116
  span {
1118
1117
  font-size: 14px;
1119
- color: var(--xto-color-text-regular, #4B5563);
1118
+ color: var(--xto-color-text-regular, #4E5566);
1120
1119
  }
1121
1120
  }
1122
1121
 
@@ -1131,7 +1130,7 @@ onUnmounted(() => {
1131
1130
  width: 100%;
1132
1131
  height: 100%;
1133
1132
  border-radius: 11px;
1134
- background-color: var(--xto-border-color, #D1D5DB);
1133
+ background-color: var(--xto-border-color, #D9DCE1);
1135
1134
  position: relative;
1136
1135
  transition: background-color 0.2s;
1137
1136