xto-fronted 0.5.3 → 0.6.0

package/src/components/Layout/Header.vue

@@ -37,7 +37,7 @@ const layoutOptions: { value: LayoutMode; label: string; icon: string }[] = [
 
 // 主题色选项
 const colorOptions = [
-  { value: '#409eff', label: '默认蓝' },
+  { value: '#1D4ED8', label: '品牌蓝' },
   { value: '#1890ff', label: '科技蓝' },
   { value: '#52c41a', label: '极光绿' },
   { value: '#faad14', label: '日落橙' },
@@ -481,7 +481,7 @@ onUnmounted(() => {
   padding: 0 20px;
   height: 100%;
   background-color: var(--xto-bg-color, #FFFFFF);
-  border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
+  border-bottom: 1px solid var(--xto-border-color-lighter, #F1F5F9);
 
   &__left {
     display: flex;
@@ -496,25 +496,25 @@ onUnmounted(() => {
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    color: var(--xto-color-text-regular, #4B5563);
+    color: var(--xto-color-text-regular, #334155);
     transition: color 0.2s;
 
     &:hover {
-      color: var(--xto-color-primary, #4F46E5);
+      color: var(--xto-color-primary, #1D4ED8);
     }
   }
 
   &__breadcrumb {
     font-size: 14px;
-    color: var(--xto-color-text-secondary, #6B7280);
+    color: var(--xto-color-text-secondary, #64748B);
 
     .breadcrumb-separator {
       margin: 0 8px;
-      color: var(--xto-color-text-placeholder, #9CA3AF);
+      color: var(--xto-color-text-placeholder, #94A3B8);
     }
 
     .is-current {
-      color: var(--xto-color-text-primary, #1F2937);
+      color: var(--xto-color-text-primary, #0F172A);
       font-weight: 500;
     }
   }
@@ -529,28 +529,28 @@ onUnmounted(() => {
     position: relative;
     display: flex;
     align-items: center;
-    background-color: var(--xto-fill-color-light, #F9FAFB);
+    background-color: var(--xto-fill-color-light, #F8FAFC);
     border-radius: var(--xto-border-radius-base, 6px);
     padding: 0 12px;
     height: 32px;
     width: 200px;
 
     &-icon {
-      color: var(--xto-color-text-secondary, #6B7280);
+      color: var(--xto-color-text-secondary, #64748B);
     }
 
     &-input {
       flex: 1;
       height: 100%;
       font-size: 14px;
-      color: var(--xto-color-text-primary, #1F2937);
+      color: var(--xto-color-text-primary, #0F172A);
       background: transparent;
       border: none;
       outline: none;
       padding-left: 8px;
 
       &::placeholder {
-        color: var(--xto-color-text-placeholder, #9CA3AF);
+        color: var(--xto-color-text-placeholder, #94A3B8);
       }
     }
 
@@ -581,17 +581,17 @@ onUnmounted(() => {
       transition: background-color 0.2s;
 
       &:hover {
-        background-color: var(--xto-fill-color, #F3F4F6);
+        background-color: var(--xto-fill-color, #F1F5F9);
       }
 
       &-title {
         font-size: 14px;
-        color: var(--xto-color-text-primary, #1F2937);
+        color: var(--xto-color-text-primary, #0F172A);
       }
 
       &-parent {
         font-size: 12px;
-        color: var(--xto-color-text-secondary, #6B7280);
+        color: var(--xto-color-text-secondary, #64748B);
         margin-left: auto;
       }
     }
@@ -613,39 +613,40 @@ onUnmounted(() => {
       height: 16px;
       font-size: 12px;
       font-weight: 600;
-      color: var(--xto-color-primary, #4F46E5);
-      background-color: var(--xto-color-primary-light-8, #C7D2FE);
+      color: var(--xto-color-primary, #1D4ED8);
+      background-color: var(--xto-color-primary-light-8, #DBEAFE);
       border-radius: var(--xto-border-radius-small, 4px);
     }
 
     &-empty {
       padding: 16px 12px;
       text-align: center;
-      color: var(--xto-color-text-secondary, #6B7280);
+      color: var(--xto-color-text-secondary, #64748B);
       font-size: 14px;
     }
   }
 
   &__action {
-    width: 32px;
-    height: 32px;
+    width: 36px;
+    height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    border-radius: var(--xto-border-radius-base, 6px);
-    color: var(--xto-color-text-regular, #4B5563);
+    border-radius: var(--xto-border-radius-circle, 50%);
+    color: var(--xto-color-text-regular, #334155);
     transition: all 0.2s;
 
     &:hover {
-      background-color: var(--xto-fill-color, #F3F4F6);
-      color: var(--xto-color-primary, #4F46E5);
+      background-color: var(--xto-fill-color, #F1F5F9);
+      color: var(--xto-color-primary, #1D4ED8);
     }
   }
 
   &__user {
     position: relative;
     margin-left: 8px;
+    margin-right: 16px;
 
     &-trigger {
       display: flex;
@@ -657,13 +658,13 @@ onUnmounted(() => {
       transition: background-color 0.2s;
 
       &:hover {
-        background-color: var(--xto-fill-color, #F3F4F6);
+        background-color: var(--xto-fill-color, #F1F5F9);
       }
     }
 
     &-name {
       font-size: 14px;
-      color: var(--xto-color-text-primary, #1F2937);
+      color: var(--xto-color-text-primary, #0F172A);
       max-width: 100px;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -672,7 +673,7 @@ onUnmounted(() => {
 
     &-arrow {
       font-size: 10px;
-      color: var(--xto-color-text-secondary, #6B7280);
+      color: var(--xto-color-text-secondary, #64748B);
       transition: transform 0.2s;
 
       &.is-active {
@@ -685,7 +686,7 @@ onUnmounted(() => {
     width: 32px;
     height: 32px;
     border-radius: 50%;
-    background: linear-gradient(135deg, var(--xto-color-primary, #4F46E5), var(--xto-color-primary-light-3, #818CF8));
+    background: linear-gradient(135deg, var(--xto-color-primary, #1D4ED8), var(--xto-color-primary-light-3, #4C8DFF));
     display: flex;
     align-items: center;
     justify-content: center;
@@ -716,7 +717,7 @@ onUnmounted(() => {
       width: 40px;
       height: 40px;
       border-radius: 50%;
-      background: linear-gradient(135deg, var(--xto-color-primary, #4F46E5), var(--xto-color-primary-light-3, #818CF8));
+      background: linear-gradient(135deg, var(--xto-color-primary, #1D4ED8), var(--xto-color-primary-light-3, #4C8DFF));
       display: flex;
       align-items: center;
       justify-content: center;
@@ -732,18 +733,18 @@ onUnmounted(() => {
     &-name {
       font-size: 14px;
       font-weight: 500;
-      color: var(--xto-color-text-primary, #1F2937);
+      color: var(--xto-color-text-primary, #0F172A);
     }
 
     &-role {
       font-size: 12px;
-      color: var(--xto-color-text-secondary, #6B7280);
+      color: var(--xto-color-text-secondary, #64748B);
       margin-top: 2px;
     }
 
     &-divider {
       height: 1px;
-      background-color: var(--xto-border-color-lighter, #F3F4F6);
+      background-color: var(--xto-border-color-lighter, #F1F5F9);
     }
 
     &-menu {
@@ -757,12 +758,12 @@ onUnmounted(() => {
       padding: 10px 16px;
       cursor: pointer;
       font-size: 14px;
-      color: var(--xto-color-text-regular, #4B5563);
+      color: var(--xto-color-text-regular, #334155);
       transition: all 0.2s;
 
       &:hover {
-        background-color: var(--xto-fill-color, #F3F4F6);
-        color: var(--xto-color-text-primary, #1F2937);
+        background-color: var(--xto-fill-color, #F1F5F9);
+        color: var(--xto-color-text-primary, #0F172A);
       }
 
       &--danger {
@@ -786,7 +787,7 @@ onUnmounted(() => {
   .settings-title {
     font-size: 14px;
     font-weight: 500;
-    color: var(--xto-color-text-primary, #1F2937);
+    color: var(--xto-color-text-primary, #0F172A);
     margin-bottom: 12px;
   }
 
@@ -802,31 +803,31 @@ onUnmounted(() => {
     align-items: center;
     gap: 8px;
     padding: 12px;
-    border: 1px solid var(--xto-border-color, #D1D5DB);
+    border: 1px solid var(--xto-border-color, #CBD5E1);
     border-radius: var(--xto-border-radius-base, 6px);
     cursor: pointer;
     transition: all 0.2s;
 
     &:hover {
-      border-color: var(--xto-color-primary-light-5, #A5B4FC);
+      border-color: var(--xto-color-primary-light-5, #93C5FD);
     }
 
     &.is-active {
-      border-color: var(--xto-color-primary, #4F46E5);
-      background-color: var(--xto-color-primary-light-9, #EEF2FF);
+      border-color: var(--xto-color-primary, #1D4ED8);
+      background-color: var(--xto-color-primary-light-9, #EFF6FF);
     }
 
     &__preview {
       width: 48px;
       height: 36px;
-      border: 1px solid var(--xto-border-color-light, #E5E7EB);
+      border: 1px solid var(--xto-border-color-light, #E2E8F0);
       border-radius: 2px;
       overflow: hidden;
     }
 
     &__label {
       font-size: 12px;
-      color: var(--xto-color-text-regular, #4B5563);
+      color: var(--xto-color-text-regular, #334155);
     }
   }
 
@@ -838,7 +839,7 @@ onUnmounted(() => {
     .preview-aside {
       width: 25%;
       height: 100%;
-      background-color: var(--xto-color-primary-light-7, #E0E7FF);
+      background-color: var(--xto-color-primary-light-7, #D0E1FE);
     }
 
     .preview-main {
@@ -848,12 +849,12 @@ onUnmounted(() => {
 
       .preview-header {
         height: 20%;
-        background-color: var(--xto-border-color-light, #E5E7EB);
+        background-color: var(--xto-border-color-light, #E2E8F0);
       }
 
       .preview-content {
         flex: 1;
-        background-color: var(--xto-bg-color-page, #F9FAFB);
+        background-color: var(--xto-bg-color-page, #F8FAFC);
       }
     }
   }
@@ -865,12 +866,12 @@ onUnmounted(() => {
 
     .preview-header-full {
       height: 25%;
-      background-color: var(--xto-color-primary-light-7, #E0E7FF);
+      background-color: var(--xto-color-primary-light-7, #D0E1FE);
     }
 
     .preview-content-full {
       flex: 1;
-      background-color: var(--xto-bg-color-page, #F9FAFB);
+      background-color: var(--xto-bg-color-page, #F8FAFC);
     }
   }
 
@@ -881,12 +882,12 @@ onUnmounted(() => {
 
     .preview-header-mix {
       height: 25%;
-      background-color: var(--xto-color-primary-light-7, #E0E7FF);
+      background-color: var(--xto-color-primary-light-7, #D0E1FE);
       display: flex;
 
       .preview-mix-left {
         width: 30%;
-        background-color: var(--xto-color-primary, #4F46E5);
+        background-color: var(--xto-color-primary, #1D4ED8);
       }
     }
 
@@ -896,12 +897,12 @@ onUnmounted(() => {
 
       .preview-mix-aside {
         width: 25%;
-        background-color: var(--xto-color-primary-light-8, #C7D2FE);
+        background-color: var(--xto-color-primary-light-8, #DBEAFE);
       }
 
       .preview-mix-content {
         flex: 1;
-        background-color: var(--xto-bg-color-page, #F9FAFB);
+        background-color: var(--xto-bg-color-page, #F8FAFC);
       }
     }
   }
@@ -926,7 +927,7 @@ onUnmounted(() => {
     }
 
     &.is-active {
-      box-shadow: 0 0 0 2px var(--xto-bg-color, #FFFFFF), 0 0 0 4px var(--xto-color-primary, #4F46E5);
+      box-shadow: 0 0 0 2px var(--xto-bg-color, #FFFFFF), 0 0 0 4px var(--xto-color-primary, #1D4ED8);
     }
   }
 
@@ -943,7 +944,7 @@ onUnmounted(() => {
 
     span {
       font-size: 14px;
-      color: var(--xto-color-text-regular, #4B5563);
+      color: var(--xto-color-text-regular, #334155);
     }
   }
 
@@ -958,7 +959,7 @@ onUnmounted(() => {
       width: 100%;
       height: 100%;
       border-radius: 11px;
-      background-color: var(--xto-border-color, #D1D5DB);
+      background-color: var(--xto-border-color, #CBD5E1);
       position: relative;
       transition: background-color 0.2s;
 
@@ -977,7 +978,7 @@ onUnmounted(() => {
 
     &.is-checked {
       .switch-core {
-        background-color: var(--xto-color-primary, #4F46E5);
+        background-color: var(--xto-color-primary, #1D4ED8);
 
         &::after {
           left: 24px;

package/src/components/Layout/MixTopMenu.vue

@@ -700,7 +700,7 @@ onUnmounted(() => {
     position: relative;
     display: flex;
     align-items: center;
-    background-color: var(--xto-fill-color-light, #F9FAFB);
+    background-color: var(--xto-fill-color-light, #F5F7FA);
     border-radius: var(--xto-border-radius-base, 6px);
     padding: 0 12px;
     height: 32px;
@@ -752,7 +752,7 @@ onUnmounted(() => {
       transition: background-color 0.2s;
 
       &:hover {
-        background-color: var(--xto-fill-color, #F3F4F6);
+        background-color: var(--xto-fill-color, #EDF2F7);
       }
 
       &-title {
@@ -809,7 +809,7 @@ onUnmounted(() => {
     transition: all 0.2s;
 
     &:hover {
-      background-color: var(--xto-fill-color, #F3F4F6);
+      background-color: var(--xto-fill-color, #EDF2F7);
       color: var(--xto-color-primary, #4F46E5);
     }
   }
@@ -829,7 +829,7 @@ onUnmounted(() => {
       transition: background-color 0.2s;
 
       &:hover {
-        background-color: var(--xto-fill-color, #F3F4F6);
+        background-color: var(--xto-fill-color, #EDF2F7);
       }
     }
 
@@ -916,7 +916,7 @@ onUnmounted(() => {
 
     &-divider {
       height: 1px;
-      background-color: var(--xto-border-color-lighter, #F3F4F6);
+      background-color: var(--xto-border-color-lighter, #EDF2F7);
     }
 
     &-menu {
@@ -934,7 +934,7 @@ onUnmounted(() => {
       transition: all 0.2s;
 
       &:hover {
-        background-color: var(--xto-fill-color, #F3F4F6);
+        background-color: var(--xto-fill-color, #EDF2F7);
         color: var(--xto-color-text-primary, #1F2937);
       }
 
@@ -1026,7 +1026,7 @@ onUnmounted(() => {
 
       .preview-content {
         flex: 1;
-        background-color: var(--xto-bg-color-page, #F9FAFB);
+        background-color: var(--xto-bg-color-page, #F5F7FA);
       }
     }
   }
@@ -1043,7 +1043,7 @@ onUnmounted(() => {
 
     .preview-content-full {
       flex: 1;
-      background-color: var(--xto-bg-color-page, #F9FAFB);
+      background-color: var(--xto-bg-color-page, #F5F7FA);
     }
   }
 
@@ -1074,7 +1074,7 @@ onUnmounted(() => {
 
       .preview-mix-content {
         flex: 1;
-        background-color: var(--xto-bg-color-page, #F9FAFB);
+        background-color: var(--xto-bg-color-page, #F5F7FA);
       }
     }
   }

package/src/components/Layout/Sidebar.vue

@@ -104,10 +104,10 @@ watch(displayMenuList, (newList, oldList) => {
   }
 }, { immediate: false })
 
-// 菜单主题相关
-const menuBgColor = computed(() => appStore.isDark ? '#1d1e1f' : '#fff')
-const menuTextColor = computed(() => appStore.isDark ? '#cfd3dc' : '#303133')
-const menuActiveTextColor = computed(() => '#409eff')
+// 菜单主题相关（浅色模式走 CSS 变量，深色模式保留深底硬编码以配合暗色覆盖）
+const menuBgColor = computed(() => appStore.isDark ? '#111A2C' : '#fff')
+const menuTextColor = computed(() => appStore.isDark ? '#CBD5E1' : '#334155')
+const menuActiveTextColor = computed(() => appStore.isDark ? '#4C8DFF' : '#1D4ED8')
 
 // 菜单选择
 const handleMenuSelect = (index: string) => {
@@ -168,7 +168,7 @@ const handleLogout = () => {
   display: flex;
   flex-direction: column;
   background-color: var(--xto-bg-color, #FFFFFF);
-  border-right: 1px solid var(--xto-border-color-lighter, #F3F4F6);
+  border-right: 1px solid var(--xto-border-color-light, #E2E8F0);
 
   &--collapsed {
     .sidebar__logo {
@@ -178,12 +178,12 @@ const handleLogout = () => {
   }
 
   &__logo {
-    height: 50px;
+    height: 56px;
     display: flex;
     align-items: center;
     padding: 0 20px;
     gap: 10px;
-    border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
+    border-bottom: 1px solid var(--xto-border-color-light, #E2E8F0);
   }
 
   &__logo-img {
@@ -194,18 +194,33 @@ const handleLogout = () => {
   &__logo-text {
     font-size: 16px;
     font-weight: 600;
-    color: var(--xto-color-primary, #4F46E5);
+    color: var(--xto-color-primary, #1D4ED8);
   }
 
   &__menu {
     flex: 1;
     border-right: none;
     overflow-y: auto;
+    padding: 8px;
+
+    // 菜单项圆角化（8px），激活态浅蓝底深蓝字由组件令牌提供
+    :deep(.x-menu-item),
+    :deep(.x-sub-menu__title) {
+      height: 44px;
+      line-height: 44px;
+      margin: 2px 0;
+      padding: 0 12px;
+      border-radius: 8px;
+    }
+
+    :deep(.x-menu-item.is-active) {
+      font-weight: 600;
+    }
   }
 
   &__user {
     padding: 10px;
-    border-top: 1px solid var(--xto-border-color-lighter, #F3F4F6);
+    border-top: 1px solid var(--xto-border-color-light, #E2E8F0);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -224,7 +239,7 @@ const handleLogout = () => {
 
   &__user-role {
     font-size: 12px;
-    color: var(--xto-color-text-secondary, #6B7280);
+    color: var(--xto-color-text-secondary, #64748B);
   }
 }
 </style>

package/src/components/Layout/SidebarMenuItem.vue

@@ -156,8 +156,8 @@ const hasChildren = computed(() => {
   height: 16px;
   font-size: 12px;
   font-weight: 600;
-  color: var(--xto-color-primary, #4F46E5);
-  background-color: var(--xto-color-primary-light-8, #C7D2FE);
+  color: var(--xto-color-primary, #1D4ED8);
+  background-color: var(--xto-color-primary-light-8, #DBEAFE);
   border-radius: var(--xto-border-radius-small, 4px);
 }
 </style>

package/src/components/Layout/Tabs.vue

@@ -81,7 +81,10 @@ const handleClose = (path: string) => {
 .tabs-wrapper {
   width: 100%;
   height: 100%;
-  padding: 0 10px;
+  padding: 0 16px;
+  background-color: var(--xto-bg-color, #FFFFFF);
+  border-bottom: 1px solid var(--xto-border-color-light, #E2E8F0);
+  box-sizing: border-box;
 
   :deep(.t-tabs) {
     height: 100%;
@@ -97,16 +100,35 @@ const handleClose = (path: string) => {
   }
 
   :deep(.t-tabs__item) {
-    height: 32px;
-    line-height: 32px;
-    border: 1px solid var(--xto-border-color-lighter, #F3F4F6);
-    margin-right: 5px;
-    border-radius: var(--xto-border-radius-base, 6px);
-    padding: 0 15px;
+    height: 100%;
+    line-height: 40px;
+    border: none;
+    margin-right: 4px;
+    border-radius: 0;
+    padding: 0 16px;
+    color: var(--xto-color-text-regular, #334155);
+    position: relative;
+    transition: color 0.2s;
+
+    &:hover {
+      color: var(--xto-color-primary, #1D4ED8);
+    }
 
     &.is-active {
-      background-color: var(--xto-color-primary-light-9, #EEF2FF);
-      border-color: var(--xto-color-primary, #4F46E5);
+      background-color: transparent;
+      color: var(--xto-color-primary, #1D4ED8);
+      font-weight: 600;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 12px;
+        right: 12px;
+        height: 2px;
+        border-radius: 2px;
+        background-color: var(--xto-color-primary, #1D4ED8);
+      }
     }
   }
 }

package/src/components/Layout/TopMenu.vue

@@ -692,7 +692,7 @@ onUnmounted(() => {
     position: relative;
     display: flex;
     align-items: center;
-    background-color: var(--xto-fill-color-light, #F9FAFB);
+    background-color: var(--xto-fill-color-light, #F5F7FA);
     border-radius: var(--xto-border-radius-base, 6px);
     padding: 0 12px;
     height: 32px;
@@ -744,7 +744,7 @@ onUnmounted(() => {
       transition: background-color 0.2s;
 
       &:hover {
-        background-color: var(--xto-fill-color, #F3F4F6);
+        background-color: var(--xto-fill-color, #EDF2F7);
       }
 
       &-title {
@@ -801,7 +801,7 @@ onUnmounted(() => {
     transition: all 0.2s;
 
     &:hover {
-      background-color: var(--xto-fill-color, #F3F4F6);
+      background-color: var(--xto-fill-color, #EDF2F7);
       color: var(--xto-color-primary, #4F46E5);
     }
   }
@@ -821,7 +821,7 @@ onUnmounted(() => {
       transition: background-color 0.2s;
 
       &:hover {
-        background-color: var(--xto-fill-color, #F3F4F6);
+        background-color: var(--xto-fill-color, #EDF2F7);
       }
     }
 
@@ -908,7 +908,7 @@ onUnmounted(() => {
 
     &-divider {
       height: 1px;
-      background-color: var(--xto-border-color-lighter, #F3F4F6);
+      background-color: var(--xto-border-color-lighter, #EDF2F7);
     }
 
     &-menu {
@@ -926,7 +926,7 @@ onUnmounted(() => {
       transition: all 0.2s;
 
       &:hover {
-        background-color: var(--xto-fill-color, #F3F4F6);
+        background-color: var(--xto-fill-color, #EDF2F7);
         color: var(--xto-color-text-primary, #1F2937);
       }
 
@@ -1018,7 +1018,7 @@ onUnmounted(() => {
 
       .preview-content {
         flex: 1;
-        background-color: var(--xto-bg-color-page, #F9FAFB);
+        background-color: var(--xto-bg-color-page, #F5F7FA);
       }
     }
   }
@@ -1035,7 +1035,7 @@ onUnmounted(() => {
 
     .preview-content-full {
       flex: 1;
-      background-color: var(--xto-bg-color-page, #F9FAFB);
+      background-color: var(--xto-bg-color-page, #F5F7FA);
     }
   }
 
@@ -1066,7 +1066,7 @@ onUnmounted(() => {
 
       .preview-mix-content {
         flex: 1;
-        background-color: var(--xto-bg-color-page, #F9FAFB);
+        background-color: var(--xto-bg-color-page, #F5F7FA);
       }
     }
   }