xto-fronted 0.6.2 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/api/index.js +1 -1
  2. package/dist/{index-DGrQCWU0.js → index-BO31bICK.js} +13 -13
  3. package/dist/{index-CYFcc2sd.js → index-D4K3OfZa.js} +23 -23
  4. package/dist/{index-DIlGh6S6.js → index-DkG24eV5.js} +9 -9
  5. package/dist/{index-DYmKmoMX.js → index-QdDB_2uu.js} +20 -20
  6. package/dist/{index-Dpv33ZXi.js → index-k2XmHxrU.js} +802 -795
  7. package/dist/index.js +2 -2
  8. package/dist/style.css +1 -1
  9. package/dist/{user-ChcAx-5W.js → user-77I_qZ8j.js} +6 -6
  10. package/package.json +1 -1
  11. package/src/App.vue +3 -3
  12. package/src/assets/styles/_dark.scss +170 -170
  13. package/src/assets/styles/_reset.scss +8 -8
  14. package/src/assets/styles/_root.scss +95 -93
  15. package/src/assets/styles/_variables.scss +17 -17
  16. package/src/assets/styles/index.scss +39 -39
  17. package/src/components/Layout/Footer.vue +1 -1
  18. package/src/components/Layout/Header.vue +54 -54
  19. package/src/components/Layout/MixTopMenu.vue +41 -41
  20. package/src/components/Layout/Sidebar.vue +8 -8
  21. package/src/components/Layout/SidebarMenuItem.vue +2 -2
  22. package/src/components/Layout/Tabs.vue +6 -6
  23. package/src/components/Layout/TopMenu.vue +41 -41
  24. package/src/components/Layout/index.vue +4 -4
  25. package/src/router/guards.ts +12 -1
  26. package/src/stores/app.ts +2 -2
  27. package/src/stores/menu.ts +15 -6
  28. package/src/style.scss +2 -2
  29. package/src/views/dashboard/index.vue +32 -32
  30. package/src/views/error/403.vue +13 -13
  31. package/src/views/error/404.vue +19 -19
  32. package/src/views/login/index.vue +15 -15
  33. package/src/views/system/menu/index.vue +20 -20
  34. package/src/views/system/role/index.vue +20 -20
  35. package/src/views/system/user/index.vue +23 -23
package/src/components/Layout/Header.vue CHANGED
@@ -37,7 +37,7 @@ const layoutOptions: { value: LayoutMode; label: string; icon: string }[] = [
37
37
 
38
38
  // 主题色选项
39
39
  const colorOptions = [
40
- { value: '#1D4ED8', label: '品牌蓝' },
40
+ { value: '#12B6AF', label: '品牌蓝' },
41
41
  { value: '#1890ff', label: '科技蓝' },
42
42
  { value: '#52c41a', label: '极光绿' },
43
43
  { value: '#faad14', label: '日落橙' },
@@ -481,7 +481,7 @@ onUnmounted(() => {
481
481
  padding: 0 20px;
482
482
  height: 100%;
483
483
  background-color: var(--xto-bg-color, #FFFFFF);
484
- border-bottom: 1px solid var(--xto-border-color-lighter, #F1F5F9);
484
+ border-bottom: 1px solid var(--xto-border-color-lighter, #F2F3F5);
485
485
 
486
486
  &__left {
487
487
  display: flex;
@@ -496,25 +496,25 @@ onUnmounted(() => {
496
496
  align-items: center;
497
497
  justify-content: center;
498
498
  cursor: pointer;
499
- color: var(--xto-color-text-regular, #334155);
499
+ color: var(--xto-color-text-regular, #4E5566);
500
500
  transition: color 0.2s;
501
501
 
502
502
  &:hover {
503
- color: var(--xto-color-primary, #1D4ED8);
503
+ color: var(--xto-color-primary, #12B6AF);
504
504
  }
505
505
  }
506
506
 
507
507
  &__breadcrumb {
508
508
  font-size: 14px;
509
- color: var(--xto-color-text-secondary, #64748B);
509
+ color: var(--xto-color-text-secondary, #86909C);
510
510
 
511
511
  .breadcrumb-separator {
512
512
  margin: 0 8px;
513
- color: var(--xto-color-text-placeholder, #94A3B8);
513
+ color: var(--xto-color-text-placeholder, #A9AEB8);
514
514
  }
515
515
 
516
516
  .is-current {
517
- color: var(--xto-color-text-primary, #0F172A);
517
+ color: var(--xto-color-text-primary, #1F2329);
518
518
  font-weight: 500;
519
519
  }
520
520
  }
@@ -529,28 +529,28 @@ onUnmounted(() => {
529
529
  position: relative;
530
530
  display: flex;
531
531
  align-items: center;
532
- background-color: var(--xto-fill-color-light, #F8FAFC);
532
+ background-color: var(--xto-fill-color-light, #F7F8FA);
533
533
  border-radius: var(--xto-border-radius-base, 6px);
534
534
  padding: 0 12px;
535
- height: 32px;
535
+ height: 36px;
536
536
  width: 200px;
537
537
 
538
538
  &-icon {
539
- color: var(--xto-color-text-secondary, #64748B);
539
+ color: var(--xto-color-text-secondary, #86909C);
540
540
  }
541
541
 
542
542
  &-input {
543
543
  flex: 1;
544
544
  height: 100%;
545
545
  font-size: 14px;
546
- color: var(--xto-color-text-primary, #0F172A);
546
+ color: var(--xto-color-text-primary, #1F2329);
547
547
  background: transparent;
548
548
  border: none;
549
549
  outline: none;
550
550
  padding-left: 8px;
551
551
 
552
552
  &::placeholder {
553
- color: var(--xto-color-text-placeholder, #94A3B8);
553
+ color: var(--xto-color-text-placeholder, #A9AEB8);
554
554
  }
555
555
  }
556
556
 
@@ -581,17 +581,17 @@ onUnmounted(() => {
581
581
  transition: background-color 0.2s;
582
582
 
583
583
  &:hover {
584
- background-color: var(--xto-fill-color, #F1F5F9);
584
+ background-color: var(--xto-fill-color, #F2F3F5);
585
585
  }
586
586
 
587
587
  &-title {
588
588
  font-size: 14px;
589
- color: var(--xto-color-text-primary, #0F172A);
589
+ color: var(--xto-color-text-primary, #1F2329);
590
590
  }
591
591
 
592
592
  &-parent {
593
593
  font-size: 12px;
594
- color: var(--xto-color-text-secondary, #64748B);
594
+ color: var(--xto-color-text-secondary, #86909C);
595
595
  margin-left: auto;
596
596
  }
597
597
  }
@@ -613,15 +613,15 @@ onUnmounted(() => {
613
613
  height: 16px;
614
614
  font-size: 12px;
615
615
  font-weight: 600;
616
- color: var(--xto-color-primary, #1D4ED8);
617
- background-color: var(--xto-color-primary-light-8, #DBEAFE);
616
+ color: var(--xto-color-primary, #12B6AF);
617
+ background-color: var(--xto-color-primary-light-8, #DDF6F4);
618
618
  border-radius: var(--xto-border-radius-small, 4px);
619
619
  }
620
620
 
621
621
  &-empty {
622
622
  padding: 16px 12px;
623
623
  text-align: center;
624
- color: var(--xto-color-text-secondary, #64748B);
624
+ color: var(--xto-color-text-secondary, #86909C);
625
625
  font-size: 14px;
626
626
  }
627
627
  }
@@ -634,12 +634,12 @@ onUnmounted(() => {
634
634
  justify-content: center;
635
635
  cursor: pointer;
636
636
  border-radius: var(--xto-border-radius-circle, 50%);
637
- color: var(--xto-color-text-regular, #334155);
637
+ color: var(--xto-color-text-regular, #4E5566);
638
638
  transition: all 0.2s;
639
639
 
640
640
  &:hover {
641
- background-color: var(--xto-fill-color, #F1F5F9);
642
- color: var(--xto-color-primary, #1D4ED8);
641
+ background-color: var(--xto-fill-color, #F2F3F5);
642
+ color: var(--xto-color-primary, #12B6AF);
643
643
  }
644
644
  }
645
645
 
@@ -658,13 +658,13 @@ onUnmounted(() => {
658
658
  transition: background-color 0.2s;
659
659
 
660
660
  &:hover {
661
- background-color: var(--xto-fill-color, #F1F5F9);
661
+ background-color: var(--xto-fill-color, #F2F3F5);
662
662
  }
663
663
  }
664
664
 
665
665
  &-name {
666
666
  font-size: 14px;
667
- color: var(--xto-color-text-primary, #0F172A);
667
+ color: var(--xto-color-text-primary, #1F2329);
668
668
  max-width: 100px;
669
669
  overflow: hidden;
670
670
  text-overflow: ellipsis;
@@ -673,7 +673,7 @@ onUnmounted(() => {
673
673
 
674
674
  &-arrow {
675
675
  font-size: 10px;
676
- color: var(--xto-color-text-secondary, #64748B);
676
+ color: var(--xto-color-text-secondary, #86909C);
677
677
  transition: transform 0.2s;
678
678
 
679
679
  &.is-active {
@@ -686,7 +686,7 @@ onUnmounted(() => {
686
686
  width: 32px;
687
687
  height: 32px;
688
688
  border-radius: 50%;
689
- background: linear-gradient(135deg, var(--xto-color-primary, #1D4ED8), var(--xto-color-primary-light-3, #4C8DFF));
689
+ background: linear-gradient(135deg, var(--xto-color-primary, #12B6AF), var(--xto-color-primary-light-3, #2ED3CB));
690
690
  display: flex;
691
691
  align-items: center;
692
692
  justify-content: center;
@@ -717,7 +717,7 @@ onUnmounted(() => {
717
717
  width: 40px;
718
718
  height: 40px;
719
719
  border-radius: 50%;
720
- background: linear-gradient(135deg, var(--xto-color-primary, #1D4ED8), var(--xto-color-primary-light-3, #4C8DFF));
720
+ background: linear-gradient(135deg, var(--xto-color-primary, #12B6AF), var(--xto-color-primary-light-3, #2ED3CB));
721
721
  display: flex;
722
722
  align-items: center;
723
723
  justify-content: center;
@@ -733,18 +733,18 @@ onUnmounted(() => {
733
733
  &-name {
734
734
  font-size: 14px;
735
735
  font-weight: 500;
736
- color: var(--xto-color-text-primary, #0F172A);
736
+ color: var(--xto-color-text-primary, #1F2329);
737
737
  }
738
738
 
739
739
  &-role {
740
740
  font-size: 12px;
741
- color: var(--xto-color-text-secondary, #64748B);
741
+ color: var(--xto-color-text-secondary, #86909C);
742
742
  margin-top: 2px;
743
743
  }
744
744
 
745
745
  &-divider {
746
746
  height: 1px;
747
- background-color: var(--xto-border-color-lighter, #F1F5F9);
747
+ background-color: var(--xto-border-color-lighter, #F2F3F5);
748
748
  }
749
749
 
750
750
  &-menu {
@@ -758,20 +758,20 @@ onUnmounted(() => {
758
758
  padding: 10px 16px;
759
759
  cursor: pointer;
760
760
  font-size: 14px;
761
- color: var(--xto-color-text-regular, #334155);
761
+ color: var(--xto-color-text-regular, #4E5566);
762
762
  transition: all 0.2s;
763
763
 
764
764
  &:hover {
765
- background-color: var(--xto-fill-color, #F1F5F9);
766
- color: var(--xto-color-text-primary, #0F172A);
765
+ background-color: var(--xto-fill-color, #F2F3F5);
766
+ color: var(--xto-color-text-primary, #1F2329);
767
767
  }
768
768
 
769
769
  &--danger {
770
- color: var(--xto-color-danger, #EF4444);
770
+ color: var(--xto-color-danger, #F53F3F);
771
771
 
772
772
  &:hover {
773
773
  background-color: var(--xto-color-danger-light, #FEE2E2);
774
- color: var(--xto-color-danger, #EF4444);
774
+ color: var(--xto-color-danger, #F53F3F);
775
775
  }
776
776
  }
777
777
  }
@@ -787,7 +787,7 @@ onUnmounted(() => {
787
787
  .settings-title {
788
788
  font-size: 14px;
789
789
  font-weight: 500;
790
- color: var(--xto-color-text-primary, #0F172A);
790
+ color: var(--xto-color-text-primary, #1F2329);
791
791
  margin-bottom: 12px;
792
792
  }
793
793
 
@@ -803,31 +803,31 @@ onUnmounted(() => {
803
803
  align-items: center;
804
804
  gap: 8px;
805
805
  padding: 12px;
806
- border: 1px solid var(--xto-border-color, #CBD5E1);
806
+ border: 1px solid var(--xto-border-color, #D9DCE1);
807
807
  border-radius: var(--xto-border-radius-base, 6px);
808
808
  cursor: pointer;
809
809
  transition: all 0.2s;
810
810
 
811
811
  &:hover {
812
- border-color: var(--xto-color-primary-light-5, #93C5FD);
812
+ border-color: var(--xto-color-primary-light-5, #A0E8E4);
813
813
  }
814
814
 
815
815
  &.is-active {
816
- border-color: var(--xto-color-primary, #1D4ED8);
817
- background-color: var(--xto-color-primary-light-9, #EFF6FF);
816
+ border-color: var(--xto-color-primary, #12B6AF);
817
+ background-color: var(--xto-color-primary-light-9, #EAF9F8);
818
818
  }
819
819
 
820
820
  &__preview {
821
821
  width: 48px;
822
822
  height: 36px;
823
- border: 1px solid var(--xto-border-color-light, #E2E8F0);
823
+ border: 1px solid var(--xto-border-color-light, #E5E6EB);
824
824
  border-radius: 2px;
825
825
  overflow: hidden;
826
826
  }
827
827
 
828
828
  &__label {
829
829
  font-size: 12px;
830
- color: var(--xto-color-text-regular, #334155);
830
+ color: var(--xto-color-text-regular, #4E5566);
831
831
  }
832
832
  }
833
833
 
@@ -839,7 +839,7 @@ onUnmounted(() => {
839
839
  .preview-aside {
840
840
  width: 25%;
841
841
  height: 100%;
842
- background-color: var(--xto-color-primary-light-7, #D0E1FE);
842
+ background-color: var(--xto-color-primary-light-7, #CFF3F0);
843
843
  }
844
844
 
845
845
  .preview-main {
@@ -849,12 +849,12 @@ onUnmounted(() => {
849
849
 
850
850
  .preview-header {
851
851
  height: 20%;
852
- background-color: var(--xto-border-color-light, #E2E8F0);
852
+ background-color: var(--xto-border-color-light, #E5E6EB);
853
853
  }
854
854
 
855
855
  .preview-content {
856
856
  flex: 1;
857
- background-color: var(--xto-bg-color-page, #F8FAFC);
857
+ background-color: var(--xto-bg-color-page, #F7F8FA);
858
858
  }
859
859
  }
860
860
  }
@@ -866,12 +866,12 @@ onUnmounted(() => {
866
866
 
867
867
  .preview-header-full {
868
868
  height: 25%;
869
- background-color: var(--xto-color-primary-light-7, #D0E1FE);
869
+ background-color: var(--xto-color-primary-light-7, #CFF3F0);
870
870
  }
871
871
 
872
872
  .preview-content-full {
873
873
  flex: 1;
874
- background-color: var(--xto-bg-color-page, #F8FAFC);
874
+ background-color: var(--xto-bg-color-page, #F7F8FA);
875
875
  }
876
876
  }
877
877
 
@@ -882,12 +882,12 @@ onUnmounted(() => {
882
882
 
883
883
  .preview-header-mix {
884
884
  height: 25%;
885
- background-color: var(--xto-color-primary-light-7, #D0E1FE);
885
+ background-color: var(--xto-color-primary-light-7, #CFF3F0);
886
886
  display: flex;
887
887
 
888
888
  .preview-mix-left {
889
889
  width: 30%;
890
- background-color: var(--xto-color-primary, #1D4ED8);
890
+ background-color: var(--xto-color-primary, #12B6AF);
891
891
  }
892
892
  }
893
893
 
@@ -897,12 +897,12 @@ onUnmounted(() => {
897
897
 
898
898
  .preview-mix-aside {
899
899
  width: 25%;
900
- background-color: var(--xto-color-primary-light-8, #DBEAFE);
900
+ background-color: var(--xto-color-primary-light-8, #DDF6F4);
901
901
  }
902
902
 
903
903
  .preview-mix-content {
904
904
  flex: 1;
905
- background-color: var(--xto-bg-color-page, #F8FAFC);
905
+ background-color: var(--xto-bg-color-page, #F7F8FA);
906
906
  }
907
907
  }
908
908
  }
@@ -927,7 +927,7 @@ onUnmounted(() => {
927
927
  }
928
928
 
929
929
  &.is-active {
930
- box-shadow: 0 0 0 2px var(--xto-bg-color, #FFFFFF), 0 0 0 4px var(--xto-color-primary, #1D4ED8);
930
+ box-shadow: 0 0 0 2px var(--xto-bg-color, #FFFFFF), 0 0 0 4px var(--xto-color-primary, #12B6AF);
931
931
  }
932
932
  }
933
933
 
@@ -944,7 +944,7 @@ onUnmounted(() => {
944
944
 
945
945
  span {
946
946
  font-size: 14px;
947
- color: var(--xto-color-text-regular, #334155);
947
+ color: var(--xto-color-text-regular, #4E5566);
948
948
  }
949
949
  }
950
950
 
@@ -959,7 +959,7 @@ onUnmounted(() => {
959
959
  width: 100%;
960
960
  height: 100%;
961
961
  border-radius: 11px;
962
- background-color: var(--xto-border-color, #CBD5E1);
962
+ background-color: var(--xto-border-color, #D9DCE1);
963
963
  position: relative;
964
964
  transition: background-color 0.2s;
965
965
 
@@ -978,7 +978,7 @@ onUnmounted(() => {
978
978
 
979
979
  &.is-checked {
980
980
  .switch-core {
981
- background-color: var(--xto-color-primary, #1D4ED8);
981
+ background-color: var(--xto-color-primary, #12B6AF);
982
982
 
983
983
  &::after {
984
984
  left: 24px;
package/src/components/Layout/MixTopMenu.vue CHANGED
@@ -592,7 +592,7 @@ onUnmounted(() => {
592
592
  &__logo-text {
593
593
  font-size: 16px;
594
594
  font-weight: 600;
595
- color: var(--xto-color-primary, #4F46E5);
595
+ color: var(--xto-color-primary, #12B6AF);
596
596
  }
597
597
 
598
598
  &__menu {
@@ -684,7 +684,7 @@ onUnmounted(() => {
684
684
  height: 16px;
685
685
  font-size: 12px;
686
686
  font-weight: 600;
687
- color: var(--xto-color-primary, #4F46E5);
687
+ color: var(--xto-color-primary, #12B6AF);
688
688
  background-color: var(--xto-color-primary-light-8, #C7D2FE);
689
689
  border-radius: var(--xto-border-radius-small, 4px);
690
690
  }
@@ -700,28 +700,28 @@ onUnmounted(() => {
700
700
  position: relative;
701
701
  display: flex;
702
702
  align-items: center;
703
- background-color: var(--xto-fill-color-light, #F5F7FA);
703
+ background-color: var(--xto-fill-color-light, #F7F8FA);
704
704
  border-radius: var(--xto-border-radius-base, 6px);
705
705
  padding: 0 12px;
706
706
  height: 32px;
707
707
  width: 200px;
708
708
 
709
709
  &-icon {
710
- color: var(--xto-color-text-secondary, #6B7280);
710
+ color: var(--xto-color-text-secondary, #86909C);
711
711
  }
712
712
 
713
713
  &-input {
714
714
  flex: 1;
715
715
  height: 100%;
716
716
  font-size: 14px;
717
- color: var(--xto-color-text-primary, #1F2937);
717
+ color: var(--xto-color-text-primary, #1F2329);
718
718
  background: transparent;
719
719
  border: none;
720
720
  outline: none;
721
721
  padding-left: 8px;
722
722
 
723
723
  &::placeholder {
724
- color: var(--xto-color-text-placeholder, #9CA3AF);
724
+ color: var(--xto-color-text-placeholder, #A9AEB8);
725
725
  }
726
726
  }
727
727
 
@@ -752,17 +752,17 @@ onUnmounted(() => {
752
752
  transition: background-color 0.2s;
753
753
 
754
754
  &:hover {
755
- background-color: var(--xto-fill-color, #EDF2F7);
755
+ background-color: var(--xto-fill-color, #EDEEF1);
756
756
  }
757
757
 
758
758
  &-title {
759
759
  font-size: 14px;
760
- color: var(--xto-color-text-primary, #1F2937);
760
+ color: var(--xto-color-text-primary, #1F2329);
761
761
  }
762
762
 
763
763
  &-parent {
764
764
  font-size: 12px;
765
- color: var(--xto-color-text-secondary, #6B7280);
765
+ color: var(--xto-color-text-secondary, #86909C);
766
766
  margin-left: auto;
767
767
  }
768
768
  }
@@ -784,7 +784,7 @@ onUnmounted(() => {
784
784
  height: 16px;
785
785
  font-size: 12px;
786
786
  font-weight: 600;
787
- color: var(--xto-color-primary, #4F46E5);
787
+ color: var(--xto-color-primary, #12B6AF);
788
788
  background-color: var(--xto-color-primary-light-8, #C7D2FE);
789
789
  border-radius: var(--xto-border-radius-small, 4px);
790
790
  }
@@ -792,7 +792,7 @@ onUnmounted(() => {
792
792
  &-empty {
793
793
  padding: 16px 12px;
794
794
  text-align: center;
795
- color: var(--xto-color-text-secondary, #6B7280);
795
+ color: var(--xto-color-text-secondary, #86909C);
796
796
  font-size: 14px;
797
797
  }
798
798
  }
@@ -805,12 +805,12 @@ onUnmounted(() => {
805
805
  justify-content: center;
806
806
  cursor: pointer;
807
807
  border-radius: var(--xto-border-radius-base, 6px);
808
- color: var(--xto-color-text-regular, #4B5563);
808
+ color: var(--xto-color-text-regular, #4E5566);
809
809
  transition: all 0.2s;
810
810
 
811
811
  &:hover {
812
- background-color: var(--xto-fill-color, #EDF2F7);
813
- color: var(--xto-color-primary, #4F46E5);
812
+ background-color: var(--xto-fill-color, #EDEEF1);
813
+ color: var(--xto-color-primary, #12B6AF);
814
814
  }
815
815
  }
816
816
 
@@ -829,13 +829,13 @@ onUnmounted(() => {
829
829
  transition: background-color 0.2s;
830
830
 
831
831
  &:hover {
832
- background-color: var(--xto-fill-color, #EDF2F7);
832
+ background-color: var(--xto-fill-color, #EDEEF1);
833
833
  }
834
834
  }
835
835
 
836
836
  &-name {
837
837
  font-size: 14px;
838
- color: var(--xto-color-text-primary, #1F2937);
838
+ color: var(--xto-color-text-primary, #1F2329);
839
839
  max-width: 100px;
840
840
  overflow: hidden;
841
841
  text-overflow: ellipsis;
@@ -844,7 +844,7 @@ onUnmounted(() => {
844
844
 
845
845
  &-arrow {
846
846
  font-size: 10px;
847
- color: var(--xto-color-text-secondary, #6B7280);
847
+ color: var(--xto-color-text-secondary, #86909C);
848
848
  transition: transform 0.2s;
849
849
 
850
850
  &.is-active {
@@ -857,7 +857,7 @@ onUnmounted(() => {
857
857
  width: 32px;
858
858
  height: 32px;
859
859
  border-radius: 50%;
860
- background: linear-gradient(135deg, var(--xto-color-primary, #4F46E5), var(--xto-color-primary-light-3, #818CF8));
860
+ background: linear-gradient(135deg, var(--xto-color-primary, #12B6AF), var(--xto-color-primary-light-3, #51DAD3));
861
861
  display: flex;
862
862
  align-items: center;
863
863
  justify-content: center;
@@ -889,7 +889,7 @@ onUnmounted(() => {
889
889
  width: 40px;
890
890
  height: 40px;
891
891
  border-radius: 50%;
892
- background: linear-gradient(135deg, var(--xto-color-primary, #4F46E5), var(--xto-color-primary-light-3, #818CF8));
892
+ background: linear-gradient(135deg, var(--xto-color-primary, #12B6AF), var(--xto-color-primary-light-3, #51DAD3));
893
893
  display: flex;
894
894
  align-items: center;
895
895
  justify-content: center;
@@ -905,18 +905,18 @@ onUnmounted(() => {
905
905
  &-name {
906
906
  font-size: 14px;
907
907
  font-weight: 500;
908
- color: var(--xto-color-text-primary, #1F2937);
908
+ color: var(--xto-color-text-primary, #1F2329);
909
909
  }
910
910
 
911
911
  &-role {
912
912
  font-size: 12px;
913
- color: var(--xto-color-text-secondary, #6B7280);
913
+ color: var(--xto-color-text-secondary, #86909C);
914
914
  margin-top: 2px;
915
915
  }
916
916
 
917
917
  &-divider {
918
918
  height: 1px;
919
- background-color: var(--xto-border-color-lighter, #EDF2F7);
919
+ background-color: var(--xto-border-color-lighter, #EDEEF1);
920
920
  }
921
921
 
922
922
  &-menu {
@@ -930,20 +930,20 @@ onUnmounted(() => {
930
930
  padding: 10px 16px;
931
931
  cursor: pointer;
932
932
  font-size: 14px;
933
- color: var(--xto-color-text-regular, #4B5563);
933
+ color: var(--xto-color-text-regular, #4E5566);
934
934
  transition: all 0.2s;
935
935
 
936
936
  &:hover {
937
- background-color: var(--xto-fill-color, #EDF2F7);
938
- color: var(--xto-color-text-primary, #1F2937);
937
+ background-color: var(--xto-fill-color, #EDEEF1);
938
+ color: var(--xto-color-text-primary, #1F2329);
939
939
  }
940
940
 
941
941
  &--danger {
942
- color: var(--xto-color-danger, #EF4444);
942
+ color: var(--xto-color-danger, #F53F3F);
943
943
 
944
944
  &:hover {
945
945
  background-color: var(--xto-color-danger-light, #FEE2E2);
946
- color: var(--xto-color-danger, #EF4444);
946
+ color: var(--xto-color-danger, #F53F3F);
947
947
  }
948
948
  }
949
949
  }
@@ -959,7 +959,7 @@ onUnmounted(() => {
959
959
  .settings-title {
960
960
  font-size: 14px;
961
961
  font-weight: 500;
962
- color: var(--xto-color-text-primary, #1F2937);
962
+ color: var(--xto-color-text-primary, #1F2329);
963
963
  margin-bottom: 12px;
964
964
  }
965
965
 
@@ -975,7 +975,7 @@ onUnmounted(() => {
975
975
  align-items: center;
976
976
  gap: 8px;
977
977
  padding: 12px;
978
- border: 1px solid var(--xto-border-color, #D1D5DB);
978
+ border: 1px solid var(--xto-border-color, #D9DCE1);
979
979
  border-radius: var(--xto-border-radius-base, 6px);
980
980
  cursor: pointer;
981
981
  transition: all 0.2s;
@@ -985,21 +985,21 @@ onUnmounted(() => {
985
985
  }
986
986
 
987
987
  &.is-active {
988
- border-color: var(--xto-color-primary, #4F46E5);
988
+ border-color: var(--xto-color-primary, #12B6AF);
989
989
  background-color: var(--xto-color-primary-light-9, #EEF2FF);
990
990
  }
991
991
 
992
992
  &__preview {
993
993
  width: 48px;
994
994
  height: 36px;
995
- border: 1px solid var(--xto-border-color-light, #E5E7EB);
995
+ border: 1px solid var(--xto-border-color-light, #E5E6EB);
996
996
  border-radius: 2px;
997
997
  overflow: hidden;
998
998
  }
999
999
 
1000
1000
  &__label {
1001
1001
  font-size: 12px;
1002
- color: var(--xto-color-text-regular, #4B5563);
1002
+ color: var(--xto-color-text-regular, #4E5566);
1003
1003
  }
1004
1004
  }
1005
1005
 
@@ -1021,12 +1021,12 @@ onUnmounted(() => {
1021
1021
 
1022
1022
  .preview-header {
1023
1023
  height: 20%;
1024
- background-color: var(--xto-border-color-light, #E5E7EB);
1024
+ background-color: var(--xto-border-color-light, #E5E6EB);
1025
1025
  }
1026
1026
 
1027
1027
  .preview-content {
1028
1028
  flex: 1;
1029
- background-color: var(--xto-bg-color-page, #F5F7FA);
1029
+ background-color: var(--xto-bg-color-page, #F7F8FA);
1030
1030
  }
1031
1031
  }
1032
1032
  }
@@ -1043,7 +1043,7 @@ onUnmounted(() => {
1043
1043
 
1044
1044
  .preview-content-full {
1045
1045
  flex: 1;
1046
- background-color: var(--xto-bg-color-page, #F5F7FA);
1046
+ background-color: var(--xto-bg-color-page, #F7F8FA);
1047
1047
  }
1048
1048
  }
1049
1049
 
@@ -1059,7 +1059,7 @@ onUnmounted(() => {
1059
1059
 
1060
1060
  .preview-mix-left {
1061
1061
  width: 30%;
1062
- background-color: var(--xto-color-primary, #4F46E5);
1062
+ background-color: var(--xto-color-primary, #12B6AF);
1063
1063
  }
1064
1064
  }
1065
1065
 
@@ -1074,7 +1074,7 @@ onUnmounted(() => {
1074
1074
 
1075
1075
  .preview-mix-content {
1076
1076
  flex: 1;
1077
- background-color: var(--xto-bg-color-page, #F5F7FA);
1077
+ background-color: var(--xto-bg-color-page, #F7F8FA);
1078
1078
  }
1079
1079
  }
1080
1080
  }
@@ -1099,7 +1099,7 @@ onUnmounted(() => {
1099
1099
  }
1100
1100
 
1101
1101
  &.is-active {
1102
- box-shadow: 0 0 0 2px var(--xto-bg-color, #FFFFFF), 0 0 0 4px var(--xto-color-primary, #4F46E5);
1102
+ box-shadow: 0 0 0 2px var(--xto-bg-color, #FFFFFF), 0 0 0 4px var(--xto-color-primary, #12B6AF);
1103
1103
  }
1104
1104
  }
1105
1105
 
@@ -1116,7 +1116,7 @@ onUnmounted(() => {
1116
1116
 
1117
1117
  span {
1118
1118
  font-size: 14px;
1119
- color: var(--xto-color-text-regular, #4B5563);
1119
+ color: var(--xto-color-text-regular, #4E5566);
1120
1120
  }
1121
1121
  }
1122
1122
 
@@ -1131,7 +1131,7 @@ onUnmounted(() => {
1131
1131
  width: 100%;
1132
1132
  height: 100%;
1133
1133
  border-radius: 11px;
1134
- background-color: var(--xto-border-color, #D1D5DB);
1134
+ background-color: var(--xto-border-color, #D9DCE1);
1135
1135
  position: relative;
1136
1136
  transition: background-color 0.2s;
1137
1137
 
@@ -1150,7 +1150,7 @@ onUnmounted(() => {
1150
1150
 
1151
1151
  &.is-checked {
1152
1152
  .switch-core {
1153
- background-color: var(--xto-color-primary, #4F46E5);
1153
+ background-color: var(--xto-color-primary, #12B6AF);
1154
1154
 
1155
1155
  &::after {
1156
1156
  left: 24px;