xto-fronted 0.5.2 → 0.6.0

package/src/assets/styles/_dark.scss

@@ -6,76 +6,76 @@ html.dark {
   // 侧边栏
   .sidebar,
   .layout__aside {
-    background-color: var(--xto-bg-color, #111827);
+    background-color: var(--xto-bg-color, #111A2C);
   }
 
   .sidebar {
-    border-right: 1px solid var(--xto-border-color, #374151);
+    border-right: 1px solid var(--xto-border-color, #334155);
   }
 
   .sidebar__search-results {
-    background-color: var(--xto-bg-color-overlay, #1F2937);
-    border-color: var(--xto-border-color, #374151);
+    background-color: var(--xto-bg-color-overlay, #182338);
+    border-color: var(--xto-border-color, #334155);
   }
 
   .sidebar__search-item:hover {
-    background-color: var(--xto-fill-color, #1F2937);
+    background-color: var(--xto-fill-color, #182338);
   }
 
   .sidebar__search-item-title {
-    color: var(--xto-color-text-regular, #E5E7EB);
+    color: var(--xto-color-text-regular, #CBD5E1);
   }
 
   .sidebar__search-item-parent {
-    color: var(--xto-color-text-secondary, #9CA3AF);
+    color: var(--xto-color-text-secondary, #94A3B8);
   }
 
   .sidebar__logo {
-    border-bottom-color: var(--xto-border-color, #374151);
+    border-bottom-color: var(--xto-border-color, #334155);
   }
 
   .sidebar__user {
-    border-top-color: var(--xto-border-color, #374151);
+    border-top-color: var(--xto-border-color, #334155);
   }
 
   .sidebar__user-name {
-    color: var(--xto-color-text-regular, #E5E7EB);
+    color: var(--xto-color-text-regular, #CBD5E1);
   }
 
   .sidebar__user-role {
-    color: var(--xto-color-text-secondary, #9CA3AF);
+    color: var(--xto-color-text-secondary, #94A3B8);
   }
 
   // 菜单
   .x-menu {
-    background-color: var(--xto-bg-color, #111827) !important;
-    border-color: var(--xto-border-color, #374151);
-    color: var(--xto-color-text-regular, #E5E7EB);
+    background-color: var(--xto-bg-color, #111A2C) !important;
+    border-color: var(--xto-border-color, #334155);
+    color: var(--xto-color-text-regular, #CBD5E1);
 
     &.x-menu--vertical {
-      border-right-color: var(--xto-border-color, #374151);
+      border-right-color: var(--xto-border-color, #334155);
     }
 
     &.x-menu--horizontal {
-      border-bottom-color: var(--xto-border-color, #374151);
-      background-color: var(--xto-bg-color, #111827) !important;
+      border-bottom-color: var(--xto-border-color, #334155);
+      background-color: var(--xto-bg-color, #111A2C) !important;
     }
   }
 
   .x-menu-item {
-    color: var(--xto-color-text-regular, #E5E7EB) !important;
+    color: var(--xto-color-text-regular, #CBD5E1) !important;
     background-color: transparent !important;
 
     &:hover {
-      background-color: var(--xto-fill-color, #1F2937) !important;
+      background-color: var(--xto-fill-color, #182338) !important;
     }
 
     &.is-active {
-      color: var(--xto-color-primary, #818CF8) !important;
-      background-color: rgba(129, 140, 248, 0.1) !important;
+      color: var(--xto-color-primary, #4C8DFF) !important;
+      background-color: rgba(76, 141, 255, 0.12) !important;
 
       &::before {
-        background-color: var(--xto-color-primary, #818CF8);
+        background-color: var(--xto-color-primary, #4C8DFF);
       }
     }
 
@@ -87,44 +87,44 @@ html.dark {
 
       &.is-active {
         background-color: transparent !important;
-        border-bottom-color: var(--xto-color-primary, #818CF8);
+        border-bottom-color: var(--xto-color-primary, #4C8DFF);
       }
     }
   }
 
   .x-sub-menu {
     &__title {
-      color: var(--xto-color-text-regular, #E5E7EB) !important;
+      color: var(--xto-color-text-regular, #CBD5E1) !important;
       background-color: transparent !important;
 
       &:hover {
-        background-color: var(--xto-fill-color, #1F2937) !important;
+        background-color: var(--xto-fill-color, #182338) !important;
       }
     }
 
     &__menu {
-      background-color: var(--xto-bg-color-overlay, #1F2937) !important;
-      border: 1px solid var(--xto-border-color, #374151);
+      background-color: var(--xto-bg-color-overlay, #182338) !important;
+      border: 1px solid var(--xto-border-color, #334155);
       box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
 
       // 子菜单中的菜单项
       .x-menu-item {
         background-color: transparent !important;
-        color: var(--xto-color-text-regular, #E5E7EB) !important;
+        color: var(--xto-color-text-regular, #CBD5E1) !important;
 
         &:hover {
-          background-color: var(--xto-fill-color, #1F2937) !important;
+          background-color: var(--xto-fill-color, #182338) !important;
         }
 
         &.is-active {
-          color: var(--xto-color-primary, #818CF8) !important;
-          background-color: rgba(129, 140, 248, 0.1) !important;
+          color: var(--xto-color-primary, #4C8DFF) !important;
+          background-color: rgba(76, 141, 255, 0.12) !important;
         }
       }
     }
 
     &__arrow {
-      color: var(--xto-color-text-secondary, #9CA3AF);
+      color: var(--xto-color-text-secondary, #94A3B8);
     }
 
     &.is-opened > .x-sub-menu__title {
@@ -132,7 +132,7 @@ html.dark {
     }
 
     &.is-active > .x-sub-menu__title {
-      color: var(--xto-color-primary, #818CF8) !important;
+      color: var(--xto-color-primary, #4C8DFF) !important;
     }
 
     // 水平模式下的子菜单
@@ -142,134 +142,134 @@ html.dark {
       }
 
       .x-sub-menu__menu {
-        background-color: var(--xto-bg-color-overlay, #1F2937) !important;
-        border: 1px solid var(--xto-border-color, #374151);
+        background-color: var(--xto-bg-color-overlay, #182338) !important;
+        border: 1px solid var(--xto-border-color, #334155);
       }
     }
 
     // 收起状态下的弹出菜单
     &.is-collapse > .x-sub-menu__menu {
-      background-color: var(--xto-bg-color-overlay, #1F2937) !important;
-      border: 1px solid var(--xto-border-color, #374151);
+      background-color: var(--xto-bg-color-overlay, #182338) !important;
+      border: 1px solid var(--xto-border-color, #334155);
     }
   }
 
   // 顶部导航
   .header {
-    background-color: var(--xto-bg-color, #111827);
-    border-bottom-color: var(--xto-border-color, #374151);
+    background-color: var(--xto-bg-color, #111A2C);
+    border-bottom-color: var(--xto-border-color, #334155);
   }
 
   .header__collapse {
-    color: var(--xto-color-text-regular, #E5E7EB);
+    color: var(--xto-color-text-regular, #CBD5E1);
   }
 
   .header__breadcrumb {
-    color: var(--xto-color-text-secondary, #9CA3AF);
+    color: var(--xto-color-text-secondary, #94A3B8);
   }
 
   .header__user-name {
-    color: var(--xto-color-text-regular, #E5E7EB);
+    color: var(--xto-color-text-regular, #CBD5E1);
   }
 
   .header__user-arrow {
-    color: var(--xto-color-text-secondary, #9CA3AF);
+    color: var(--xto-color-text-secondary, #94A3B8);
   }
 
   .header__action:hover {
-    background-color: var(--xto-fill-color, #1F2937);
+    background-color: var(--xto-fill-color, #182338);
   }
 
   .header__user-trigger:hover {
-    background-color: var(--xto-fill-color, #1F2937);
+    background-color: var(--xto-fill-color, #182338);
   }
 
   // 下拉菜单
   .header__dropdown {
-    background-color: var(--xto-bg-color-overlay, #1F2937);
-    border: 1px solid var(--xto-border-color, #374151);
+    background-color: var(--xto-bg-color-overlay, #182338);
+    border: 1px solid var(--xto-border-color, #334155);
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
   }
 
   .header__dropdown-name {
-    color: var(--xto-color-text-primary, #F9FAFB);
+    color: var(--xto-color-text-primary, #F1F5F9);
   }
 
   .header__dropdown-role {
-    color: var(--xto-color-text-secondary, #9CA3AF);
+    color: var(--xto-color-text-secondary, #94A3B8);
   }
 
   .header__dropdown-divider {
-    background-color: var(--xto-border-color, #374151);
+    background-color: var(--xto-border-color, #334155);
   }
 
   .header__dropdown-item {
-    color: var(--xto-color-text-regular, #E5E7EB);
+    color: var(--xto-color-text-regular, #CBD5E1);
 
     &:hover {
-      background-color: var(--xto-fill-color, #1F2937);
-      color: var(--xto-color-text-primary, #F9FAFB);
+      background-color: var(--xto-fill-color, #182338);
+      color: var(--xto-color-text-primary, #F1F5F9);
     }
   }
 
   // 顶部菜单组件
   .top-menu {
-    background-color: var(--xto-bg-color, #111827);
+    background-color: var(--xto-bg-color, #111A2C);
 
     &__menu {
-      background-color: var(--xto-bg-color, #111827) !important;
+      background-color: var(--xto-bg-color, #111A2C) !important;
     }
 
     &__menu-char {
-      background-color: rgba(129, 140, 248, 0.2);
-      color: var(--xto-color-primary-light-3, #7578F3);
+      background-color: rgba(76, 141, 255, 0.2);
+      color: var(--xto-color-primary-light-3, #2563EB);
     }
 
     &__action {
-      color: var(--xto-color-text-regular, #E5E7EB);
+      color: var(--xto-color-text-regular, #CBD5E1);
 
       &:hover {
-        background-color: var(--xto-fill-color, #1F2937);
-        color: var(--xto-color-primary, #818CF8);
+        background-color: var(--xto-fill-color, #182338);
+        color: var(--xto-color-primary, #4C8DFF);
       }
     }
 
     &__user-trigger:hover {
-      background-color: var(--xto-fill-color, #1F2937);
+      background-color: var(--xto-fill-color, #182338);
     }
 
     &__user-name {
-      color: var(--xto-color-text-regular, #E5E7EB);
+      color: var(--xto-color-text-regular, #CBD5E1);
     }
 
     &__user-arrow {
-      color: var(--xto-color-text-secondary, #9CA3AF);
+      color: var(--xto-color-text-secondary, #94A3B8);
     }
 
     &__dropdown {
-      background-color: var(--xto-bg-color-overlay, #1F2937);
-      border: 1px solid var(--xto-border-color, #374151);
+      background-color: var(--xto-bg-color-overlay, #182338);
+      border: 1px solid var(--xto-border-color, #334155);
       box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
     }
 
     &__dropdown-name {
-      color: var(--xto-color-text-primary, #F9FAFB);
+      color: var(--xto-color-text-primary, #F1F5F9);
     }
 
     &__dropdown-role {
-      color: var(--xto-color-text-secondary, #9CA3AF);
+      color: var(--xto-color-text-secondary, #94A3B8);
     }
 
     &__dropdown-divider {
-      background-color: var(--xto-border-color, #374151);
+      background-color: var(--xto-border-color, #334155);
     }
 
     &__dropdown-item {
-      color: var(--xto-color-text-regular, #E5E7EB);
+      color: var(--xto-color-text-regular, #CBD5E1);
 
       &:hover {
-        background-color: var(--xto-fill-color, #1F2937);
-        color: var(--xto-color-text-primary, #F9FAFB);
+        background-color: var(--xto-fill-color, #182338);
+        color: var(--xto-color-text-primary, #F1F5F9);
       }
     }
   }
@@ -277,24 +277,24 @@ html.dark {
   // 按钮
   .x-button {
     &.x-button--default {
-      background-color: var(--xto-bg-color, #111827);
-      border-color: var(--xto-border-color-light, #1F2937);
-      color: var(--xto-color-text-regular, #E5E7EB);
+      background-color: var(--xto-bg-color, #111A2C);
+      border-color: var(--xto-border-color-light, #182338);
+      color: var(--xto-color-text-regular, #CBD5E1);
 
       &:hover {
-        border-color: var(--xto-color-primary, #818CF8);
-        color: var(--xto-color-primary, #818CF8);
+        border-color: var(--xto-color-primary, #4C8DFF);
+        color: var(--xto-color-primary, #4C8DFF);
       }
     }
 
     &.x-button--text {
-      color: var(--xto-color-primary, #818CF8);
+      color: var(--xto-color-primary, #4C8DFF);
     }
   }
 
   // 表单
   .x-form-item__label {
-    color: var(--xto-color-text-regular, #E5E7EB);
+    color: var(--xto-color-text-regular, #CBD5E1);
   }
 
   .x-form-item__error {
@@ -303,60 +303,60 @@ html.dark {
 
   // 输入框
   .x-input {
-    background-color: var(--xto-bg-color, #111827);
-    border-color: var(--xto-border-color-light, #1F2937);
+    background-color: var(--xto-bg-color, #111A2C);
+    border-color: var(--xto-border-color-light, #182338);
 
     &.is-focus {
-      border-color: var(--xto-color-primary, #818CF8);
+      border-color: var(--xto-color-primary, #4C8DFF);
     }
 
     .x-input__inner {
       background-color: transparent;
-      color: var(--xto-color-text-primary, #F9FAFB);
+      color: var(--xto-color-text-primary, #F1F5F9);
 
       &::placeholder {
-        color: var(--xto-color-text-placeholder, #6B7280);
+        color: var(--xto-color-text-placeholder, #64748B);
       }
     }
 
     .x-input__suffix,
     .x-input__prefix {
-      color: var(--xto-color-text-secondary, #9CA3AF);
+      color: var(--xto-color-text-secondary, #94A3B8);
     }
   }
 
   // 选择器
   .x-select {
-    background-color: var(--xto-bg-color, #111827);
-    border-color: var(--xto-border-color-light, #1F2937);
+    background-color: var(--xto-bg-color, #111A2C);
+    border-color: var(--xto-border-color-light, #182338);
   }
 
   // 卡片
   .x-card {
-    background-color: var(--xto-bg-color-overlay, #1F2937);
-    border-color: var(--xto-border-color, #374151);
+    background-color: var(--xto-bg-color-overlay, #182338);
+    border-color: var(--xto-border-color, #334155);
   }
 
   .x-card__header {
-    border-bottom-color: var(--xto-border-color, #374151);
-    color: var(--xto-color-text-primary, #F9FAFB);
+    border-bottom-color: var(--xto-border-color, #334155);
+    color: var(--xto-color-text-primary, #F1F5F9);
   }
 
   // 表格
   .data-table {
     th {
-      background-color: var(--xto-fill-color, #1F2937);
-      color: var(--xto-color-text-regular, #E5E7EB);
-      border-bottom-color: var(--xto-border-color, #374151);
+      background-color: var(--xto-fill-color, #182338);
+      color: var(--xto-color-text-regular, #CBD5E1);
+      border-bottom-color: var(--xto-border-color, #334155);
     }
 
     td {
-      border-bottom-color: var(--xto-border-color, #374151);
-      color: var(--xto-color-text-regular, #E5E7EB);
+      border-bottom-color: var(--xto-border-color, #334155);
+      color: var(--xto-color-text-regular, #CBD5E1);
     }
 
     tr:hover td {
-      background-color: var(--xto-fill-color, #1F2937);
+      background-color: var(--xto-fill-color, #182338);
     }
   }
 
@@ -367,32 +367,32 @@ html.dark {
     }
 
     &__container {
-      background-color: var(--xto-bg-color-overlay, #1F2937);
-      border: 1px solid var(--xto-border-color, #374151);
+      background-color: var(--xto-bg-color-overlay, #182338);
+      border: 1px solid var(--xto-border-color, #334155);
     }
 
     &__header {
-      border-bottom-color: var(--xto-border-color, #374151);
-      color: var(--xto-color-text-primary, #F9FAFB);
+      border-bottom-color: var(--xto-border-color, #334155);
+      color: var(--xto-color-text-primary, #F1F5F9);
     }
 
     &__footer {
-      border-top-color: var(--xto-border-color, #374151);
+      border-top-color: var(--xto-border-color, #334155);
     }
   }
 
   // 消息提示
   .x-message {
-    background-color: var(--xto-bg-color-overlay, #1F2937);
-    border: 1px solid var(--xto-border-color, #374151);
+    background-color: var(--xto-bg-color-overlay, #182338);
+    border: 1px solid var(--xto-border-color, #334155);
   }
 
   // 标签
   .x-tag {
     &.x-tag--primary {
-      background-color: rgba(129, 140, 248, 0.2);
-      color: var(--xto-color-primary-light-3, #7578F3);
-      border-color: rgba(129, 140, 248, 0.3);
+      background-color: rgba(76, 141, 255, 0.2);
+      color: var(--xto-color-primary-light-3, #2563EB);
+      border-color: rgba(76, 141, 255, 0.3);
     }
 
     &.x-tag--success {
@@ -415,131 +415,169 @@ html.dark {
 
     &.x-tag--info {
       background-color: rgba(156, 163, 175, 0.2);
-      color: var(--xto-color-text-disabled, #4B5563);
+      color: var(--xto-color-text-disabled, #475569);
       border-color: rgba(156, 163, 175, 0.3);
     }
   }
 
   // 开关
   .x-switch {
-    background-color: var(--xto-border-color-light, #1F2937);
+    background-color: var(--xto-border-color-light, #182338);
 
     &.is-checked {
-      background-color: var(--xto-color-primary, #818CF8);
+      background-color: var(--xto-color-primary, #4C8DFF);
     }
   }
 
   // 分页
   .x-pagination {
-    color: var(--xto-color-text-regular, #E5E7EB);
+    color: var(--xto-color-text-regular, #CBD5E1);
 
     &__item {
-      background-color: var(--xto-bg-color, #111827);
-      border-color: var(--xto-border-color-light, #1F2937);
-      color: var(--xto-color-text-regular, #E5E7EB);
+      background-color: var(--xto-bg-color, #111A2C);
+      border-color: var(--xto-border-color-light, #182338);
+      color: var(--xto-color-text-regular, #CBD5E1);
 
       &:hover {
-        color: var(--xto-color-primary, #818CF8);
+        color: var(--xto-color-primary, #4C8DFF);
       }
 
       &.is-active {
-        background-color: var(--xto-color-primary, #818CF8);
-        border-color: var(--xto-color-primary, #818CF8);
+        background-color: var(--xto-color-primary, #4C8DFF);
+        border-color: var(--xto-color-primary, #4C8DFF);
         color: #fff;
       }
     }
   }
 
-  // 登录页面
+  // 登录页面（新版左右分区：品牌区 + 表单区）
+  .login-brand {
+    background: linear-gradient(135deg, #0B1220 0%, #122554 45%, #1E3A8A 100%) !important;
+  }
+
+  .login-form-section {
+    background: var(--xto-bg-color-page, #0B1220) !important;
+
+    .form-header h2 {
+      color: var(--xto-color-text-primary, #F1F5F9);
+    }
+
+    .form-header p {
+      color: var(--xto-color-text-secondary, #94A3B8);
+    }
+
+    .input-label {
+      color: var(--xto-color-text-regular, #CBD5E1);
+    }
+
+    .copyright p {
+      color: var(--xto-color-text-placeholder, #64748B);
+    }
+
+    .social-btn {
+      background: var(--xto-fill-color, #1E293B) !important;
+      color: var(--xto-color-text-secondary, #94A3B8) !important;
+
+      &:hover {
+        background: var(--xto-color-primary-light-8, #122554) !important;
+        color: var(--xto-color-primary, #4C8DFF) !important;
+      }
+    }
+
+    .forgot-link {
+      color: var(--xto-color-primary, #4C8DFF) !important;
+    }
+  }
+
   .login {
     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
   }
 
   .login__container {
-    background-color: var(--xto-bg-color-overlay, #1F2937);
-    border: 1px solid var(--xto-border-color, #374151);
+    background-color: var(--xto-bg-color-overlay, #182338);
+    border: 1px solid var(--xto-border-color, #334155);
   }
 
   .login__title {
-    color: var(--xto-color-primary, #818CF8);
+    color: var(--xto-color-primary, #4C8DFF);
   }
 
   .login__subtitle {
-    color: var(--xto-color-text-secondary, #9CA3AF);
+    color: var(--xto-color-text-secondary, #94A3B8);
   }
 
   .login__footer {
-    color: var(--xto-color-text-placeholder, #6B7280);
+    color: var(--xto-color-text-placeholder, #64748B);
   }
 
   // 仪表盘
   .stat-card__title {
-    color: var(--xto-color-text-secondary, #9CA3AF);
+    color: var(--xto-color-text-secondary, #94A3B8);
   }
 
   .quick-link {
-    background-color: var(--xto-fill-color, #1F2937);
+    background-color: var(--xto-fill-color, #182338);
 
     &:hover {
-      background-color: rgba(129, 140, 248, 0.1);
+      background-color: rgba(76, 141, 255, 0.12);
     }
 
     &__title {
-      color: var(--xto-color-text-regular, #E5E7EB);
+      color: var(--xto-color-text-regular, #CBD5E1);
     }
   }
 
   .activity-item {
-    border-bottom-color: var(--xto-border-color, #374151);
+    border-bottom-color: var(--xto-border-color, #334155);
 
     &__action {
-      color: var(--xto-color-text-regular, #E5E7EB);
+      color: var(--xto-color-text-regular, #CBD5E1);
     }
   }
 
   // 搜索卡片
   .search-card {
-    background-color: var(--xto-bg-color-overlay, #1F2937);
-    border: 1px solid var(--xto-border-color, #374151);
+    background-color: var(--xto-bg-color-overlay, #182338);
+    border: 1px solid var(--xto-border-color, #334155);
   }
 
   // 表格卡片
   .table-card {
-    background-color: var(--xto-bg-color-overlay, #1F2937);
-    border: 1px solid var(--xto-border-color, #374151);
+    background-color: var(--xto-bg-color-overlay, #182338);
+    border: 1px solid var(--xto-border-color, #334155);
   }
 
   // Popconfirm
   .x-popconfirm {
-    background-color: var(--xto-bg-color-overlay, #1F2937);
-    border: 1px solid var(--xto-border-color, #374151);
+    background-color: var(--xto-bg-color-overlay, #182338);
+    border: 1px solid var(--xto-border-color, #334155);
   }
 
   // Drawer 抽屉组件
   .x-drawer {
-    background-color: var(--xto-bg-color-overlay, #1F2937);
+    background-color: var(--xto-bg-color-overlay, #182338);
 
     &__header {
-      background-color: var(--xto-bg-color-overlay, #1F2937);
-      border-bottom-color: var(--xto-border-color, #374151);
-      color: var(--xto-color-text-primary, #F9FAFB);
+      background-color: var(--xto-bg-color-overlay, #182338);
+      border-bottom-color: var(--xto-border-color, #334155);
+      color: var(--xto-color-text-primary, #F1F5F9);
     }
 
     &__body {
-      background-color: var(--xto-bg-color-overlay, #1F2937);
-      color: var(--xto-color-text-regular, #E5E7EB);
+      background-color: var(--xto-bg-color-overlay, #182338);
+      color: var(--xto-color-text-regular, #CBD5E1);
     }
 
     &__footer {
-      background-color: var(--xto-bg-color-overlay, #1F2937);
-      border-top-color: var(--xto-border-color, #374151);
+      background-color: var(--xto-bg-color-overlay, #182338);
+      border-top-color: var(--xto-border-color, #334155);
     }
   }
 
   // 设置抽屉内容
   .settings-drawer {
     .settings-title {
-      color: var(--xto-color-text-primary, #F9FAFB);
+      color: var(--xto-color-text-primary, #F1F5F9);
     }
 
     .settings-section {
@@ -547,93 +585,93 @@ html.dark {
     }
 
     .layout-option {
-      border-color: var(--xto-border-color-light, #1F2937);
+      border-color: var(--xto-border-color-light, #182338);
       background-color: transparent;
 
       &:hover {
-        border-color: var(--xto-color-primary, #818CF8);
+        border-color: var(--xto-color-primary, #4C8DFF);
       }
 
       &.is-active {
-        border-color: var(--xto-color-primary, #818CF8);
-        background-color: rgba(129, 140, 248, 0.1);
+        border-color: var(--xto-color-primary, #4C8DFF);
+        background-color: rgba(76, 141, 255, 0.12);
       }
 
       &__label {
-        color: var(--xto-color-text-regular, #E5E7EB);
+        color: var(--xto-color-text-regular, #CBD5E1);
       }
     }
 
     .settings-switch-item {
       span {
-        color: var(--xto-color-text-regular, #E5E7EB);
+        color: var(--xto-color-text-regular, #CBD5E1);
       }
     }
   }
 
   // 混合顶部菜单
   .mix-top-menu {
-    background-color: var(--xto-bg-color, #111827);
-    border-bottom-color: var(--xto-border-color, #374151);
+    background-color: var(--xto-bg-color, #111A2C);
+    border-bottom-color: var(--xto-border-color, #334155);
 
     &__logo-text {
-      color: var(--xto-color-primary, #818CF8);
+      color: var(--xto-color-primary, #4C8DFF);
     }
 
     &__menu {
-      background-color: var(--xto-bg-color, #111827) !important;
+      background-color: var(--xto-bg-color, #111A2C) !important;
     }
 
     &__menu-char {
-      color: var(--xto-color-primary-light-3, #7578F3);
-      background-color: rgba(129, 140, 248, 0.2);
+      color: var(--xto-color-primary-light-3, #2563EB);
+      background-color: rgba(76, 141, 255, 0.2);
     }
 
     &__action {
-      color: var(--xto-color-text-regular, #E5E7EB);
+      color: var(--xto-color-text-regular, #CBD5E1);
 
       &:hover {
-        background-color: var(--xto-fill-color, #1F2937);
-        color: var(--xto-color-primary, #818CF8);
+        background-color: var(--xto-fill-color, #182338);
+        color: var(--xto-color-primary, #4C8DFF);
       }
     }
 
     &__user-trigger:hover {
-      background-color: var(--xto-fill-color, #1F2937);
+      background-color: var(--xto-fill-color, #182338);
     }
 
     &__user-name {
-      color: var(--xto-color-text-regular, #E5E7EB);
+      color: var(--xto-color-text-regular, #CBD5E1);
     }
 
     &__user-arrow {
-      color: var(--xto-color-text-secondary, #9CA3AF);
+      color: var(--xto-color-text-secondary, #94A3B8);
     }
 
     &__dropdown {
-      background-color: var(--xto-bg-color-overlay, #1F2937);
-      border: 1px solid var(--xto-border-color, #374151);
+      background-color: var(--xto-bg-color-overlay, #182338);
+      border: 1px solid var(--xto-border-color, #334155);
       box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
     }
 
     &__dropdown-name {
-      color: var(--xto-color-text-primary, #F9FAFB);
+      color: var(--xto-color-text-primary, #F1F5F9);
     }
 
     &__dropdown-role {
-      color: var(--xto-color-text-secondary, #9CA3AF);
+      color: var(--xto-color-text-secondary, #94A3B8);
     }
 
     &__dropdown-divider {
-      background-color: var(--xto-border-color, #374151);
+      background-color: var(--xto-border-color, #334155);
     }
 
     &__dropdown-item {
-      color: var(--xto-color-text-regular, #E5E7EB);
+      color: var(--xto-color-text-regular, #CBD5E1);
 
       &:hover {
-        background-color: var(--xto-fill-color, #1F2937);
-        color: var(--xto-color-text-primary, #F9FAFB);
+        background-color: var(--xto-fill-color, #182338);
+        color: var(--xto-color-text-primary, #F1F5F9);
       }
     }
   }