xto-fronted 0.6.3 → 0.7.0

package/src/components/Layout/Sidebar.vue

@@ -105,9 +105,9 @@ watch(displayMenuList, (newList, oldList) => {
 }, { immediate: false })
 
 // 菜单主题相关（浅色模式走 CSS 变量，深色模式保留深底硬编码以配合暗色覆盖）
-const menuBgColor = computed(() => appStore.isDark ? '#111A2C' : '#fff')
-const menuTextColor = computed(() => appStore.isDark ? '#CBD5E1' : '#334155')
-const menuActiveTextColor = computed(() => appStore.isDark ? '#4C8DFF' : '#1D4ED8')
+const menuBgColor = computed(() => appStore.isDark ? '#161B21' : '#fff')
+const menuTextColor = computed(() => appStore.isDark ? '#D9DCE1' : '#4E5566')
+const menuActiveTextColor = computed(() => appStore.isDark ? '#2ED3CB' : '#12B6AF')
 
 // 菜单选择
 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-light, #E2E8F0);
+  border-right: 1px solid var(--xto-border-color-light, #E5E6EB);
 
   &--collapsed {
     .sidebar__logo {
@@ -183,7 +183,7 @@ const handleLogout = () => {
     align-items: center;
     padding: 0 20px;
     gap: 10px;
-    border-bottom: 1px solid var(--xto-border-color-light, #E2E8F0);
+    border-bottom: 1px solid var(--xto-border-color-light, #E5E6EB);
   }
 
   &__logo-img {
@@ -194,7 +194,7 @@ const handleLogout = () => {
   &__logo-text {
     font-size: 16px;
     font-weight: 600;
-    color: var(--xto-color-primary, #1D4ED8);
+    color: var(--xto-color-primary, #12B6AF);
   }
 
   &__menu {
@@ -220,7 +220,7 @@ const handleLogout = () => {
 
   &__user {
     padding: 10px;
-    border-top: 1px solid var(--xto-border-color-light, #E2E8F0);
+    border-top: 1px solid var(--xto-border-color-light, #E5E6EB);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -239,7 +239,7 @@ const handleLogout = () => {
 
   &__user-role {
     font-size: 12px;
-    color: var(--xto-color-text-secondary, #64748B);
+    color: var(--xto-color-text-secondary, #86909C);
   }
 }
 </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, #1D4ED8);
-  background-color: var(--xto-color-primary-light-8, #DBEAFE);
+  color: var(--xto-color-primary, #12B6AF);
+  background-color: var(--xto-color-primary-light-8, #DDF6F4);
   border-radius: var(--xto-border-radius-small, 4px);
 }
 </style>

package/src/components/Layout/Tabs.vue

@@ -83,7 +83,7 @@ const handleClose = (path: string) => {
   height: 100%;
   padding: 0 16px;
   background-color: var(--xto-bg-color, #FFFFFF);
-  border-bottom: 1px solid var(--xto-border-color-light, #E2E8F0);
+  border-bottom: 1px solid var(--xto-border-color-light, #E5E6EB);
   box-sizing: border-box;
 
   :deep(.t-tabs) {
@@ -106,17 +106,17 @@ const handleClose = (path: string) => {
     margin-right: 4px;
     border-radius: 0;
     padding: 0 16px;
-    color: var(--xto-color-text-regular, #334155);
+    color: var(--xto-color-text-regular, #4E5566);
     position: relative;
     transition: color 0.2s;
 
     &:hover {
-      color: var(--xto-color-primary, #1D4ED8);
+      color: var(--xto-color-primary, #12B6AF);
     }
 
     &.is-active {
       background-color: transparent;
-      color: var(--xto-color-primary, #1D4ED8);
+      color: var(--xto-color-primary, #12B6AF);
       font-weight: 600;
 
       &::after {
@@ -127,7 +127,7 @@ const handleClose = (path: string) => {
         right: 12px;
         height: 2px;
         border-radius: 2px;
-        background-color: var(--xto-color-primary, #1D4ED8);
+        background-color: var(--xto-color-primary, #12B6AF);
       }
     }
   }
@@ -150,7 +150,7 @@ const handleClose = (path: string) => {
 
   &:hover {
     background-color: var(--xto-color-danger-light, #FEE2E2);
-    color: var(--xto-color-danger, #EF4444);
+    color: var(--xto-color-danger, #F53F3F);
   }
 }
 </style>

package/src/components/Layout/TopMenu.vue

@@ -584,7 +584,7 @@ onUnmounted(() => {
   &__logo-text {
     font-size: 16px;
     font-weight: 600;
-    color: var(--xto-color-primary, #4F46E5);
+    color: var(--xto-color-primary, #12B6AF);
   }
 
   &__menu {
@@ -676,7 +676,7 @@ onUnmounted(() => {
     height: 16px;
     font-size: 12px;
     font-weight: 600;
-    color: var(--xto-color-primary, #4F46E5);
+    color: var(--xto-color-primary, #12B6AF);
     background-color: var(--xto-color-primary-light-8, #C7D2FE);
     border-radius: var(--xto-border-radius-small, 4px);
   }
@@ -692,28 +692,28 @@ onUnmounted(() => {
     position: relative;
     display: flex;
     align-items: center;
-    background-color: var(--xto-fill-color-light, #F5F7FA);
+    background-color: var(--xto-fill-color-light, #F7F8FA);
     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, #86909C);
     }
 
     &-input {
       flex: 1;
       height: 100%;
       font-size: 14px;
-      color: var(--xto-color-text-primary, #1F2937);
+      color: var(--xto-color-text-primary, #1F2329);
       background: transparent;
       border: none;
       outline: none;
       padding-left: 8px;
 
       &::placeholder {
-        color: var(--xto-color-text-placeholder, #9CA3AF);
+        color: var(--xto-color-text-placeholder, #A9AEB8);
       }
     }
 
@@ -744,17 +744,17 @@ onUnmounted(() => {
       transition: background-color 0.2s;
 
       &:hover {
-        background-color: var(--xto-fill-color, #EDF2F7);
+        background-color: var(--xto-fill-color, #EDEEF1);
       }
 
       &-title {
         font-size: 14px;
-        color: var(--xto-color-text-primary, #1F2937);
+        color: var(--xto-color-text-primary, #1F2329);
       }
 
       &-parent {
         font-size: 12px;
-        color: var(--xto-color-text-secondary, #6B7280);
+        color: var(--xto-color-text-secondary, #86909C);
         margin-left: auto;
       }
     }
@@ -776,7 +776,7 @@ onUnmounted(() => {
       height: 16px;
       font-size: 12px;
       font-weight: 600;
-      color: var(--xto-color-primary, #4F46E5);
+      color: var(--xto-color-primary, #12B6AF);
       background-color: var(--xto-color-primary-light-8, #C7D2FE);
       border-radius: var(--xto-border-radius-small, 4px);
     }
@@ -784,7 +784,7 @@ onUnmounted(() => {
     &-empty {
       padding: 16px 12px;
       text-align: center;
-      color: var(--xto-color-text-secondary, #6B7280);
+      color: var(--xto-color-text-secondary, #86909C);
       font-size: 14px;
     }
   }
@@ -797,12 +797,12 @@ onUnmounted(() => {
     justify-content: center;
     cursor: pointer;
     border-radius: var(--xto-border-radius-base, 6px);
-    color: var(--xto-color-text-regular, #4B5563);
+    color: var(--xto-color-text-regular, #4E5566);
     transition: all 0.2s;
 
     &:hover {
-      background-color: var(--xto-fill-color, #EDF2F7);
-      color: var(--xto-color-primary, #4F46E5);
+      background-color: var(--xto-fill-color, #EDEEF1);
+      color: var(--xto-color-primary, #12B6AF);
     }
   }
 
@@ -821,13 +821,13 @@ onUnmounted(() => {
       transition: background-color 0.2s;
 
       &:hover {
-        background-color: var(--xto-fill-color, #EDF2F7);
+        background-color: var(--xto-fill-color, #EDEEF1);
       }
     }
 
     &-name {
       font-size: 14px;
-      color: var(--xto-color-text-primary, #1F2937);
+      color: var(--xto-color-text-primary, #1F2329);
       max-width: 100px;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -836,7 +836,7 @@ onUnmounted(() => {
 
     &-arrow {
       font-size: 10px;
-      color: var(--xto-color-text-secondary, #6B7280);
+      color: var(--xto-color-text-secondary, #86909C);
       transition: transform 0.2s;
 
       &.is-active {
@@ -849,7 +849,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, #12B6AF), var(--xto-color-primary-light-3, #51DAD3));
     display: flex;
     align-items: center;
     justify-content: center;
@@ -881,7 +881,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, #12B6AF), var(--xto-color-primary-light-3, #51DAD3));
       display: flex;
       align-items: center;
       justify-content: center;
@@ -897,18 +897,18 @@ onUnmounted(() => {
     &-name {
       font-size: 14px;
       font-weight: 500;
-      color: var(--xto-color-text-primary, #1F2937);
+      color: var(--xto-color-text-primary, #1F2329);
     }
 
     &-role {
       font-size: 12px;
-      color: var(--xto-color-text-secondary, #6B7280);
+      color: var(--xto-color-text-secondary, #86909C);
       margin-top: 2px;
     }
 
     &-divider {
       height: 1px;
-      background-color: var(--xto-border-color-lighter, #EDF2F7);
+      background-color: var(--xto-border-color-lighter, #EDEEF1);
     }
 
     &-menu {
@@ -922,20 +922,20 @@ onUnmounted(() => {
       padding: 10px 16px;
       cursor: pointer;
       font-size: 14px;
-      color: var(--xto-color-text-regular, #4B5563);
+      color: var(--xto-color-text-regular, #4E5566);
       transition: all 0.2s;
 
       &:hover {
-        background-color: var(--xto-fill-color, #EDF2F7);
-        color: var(--xto-color-text-primary, #1F2937);
+        background-color: var(--xto-fill-color, #EDEEF1);
+        color: var(--xto-color-text-primary, #1F2329);
       }
 
       &--danger {
-        color: var(--xto-color-danger, #EF4444);
+        color: var(--xto-color-danger, #F53F3F);
 
         &:hover {
           background-color: var(--xto-color-danger-light, #FEE2E2);
-          color: var(--xto-color-danger, #EF4444);
+          color: var(--xto-color-danger, #F53F3F);
         }
       }
     }
@@ -951,7 +951,7 @@ onUnmounted(() => {
   .settings-title {
     font-size: 14px;
     font-weight: 500;
-    color: var(--xto-color-text-primary, #1F2937);
+    color: var(--xto-color-text-primary, #1F2329);
     margin-bottom: 12px;
   }
 
@@ -967,7 +967,7 @@ onUnmounted(() => {
     align-items: center;
     gap: 8px;
     padding: 12px;
-    border: 1px solid var(--xto-border-color, #D1D5DB);
+    border: 1px solid var(--xto-border-color, #D9DCE1);
     border-radius: var(--xto-border-radius-base, 6px);
     cursor: pointer;
     transition: all 0.2s;
@@ -977,21 +977,21 @@ onUnmounted(() => {
     }
 
     &.is-active {
-      border-color: var(--xto-color-primary, #4F46E5);
+      border-color: var(--xto-color-primary, #12B6AF);
       background-color: var(--xto-color-primary-light-9, #EEF2FF);
     }
 
     &__preview {
       width: 48px;
       height: 36px;
-      border: 1px solid var(--xto-border-color-light, #E5E7EB);
+      border: 1px solid var(--xto-border-color-light, #E5E6EB);
       border-radius: 2px;
       overflow: hidden;
     }
 
     &__label {
       font-size: 12px;
-      color: var(--xto-color-text-regular, #4B5563);
+      color: var(--xto-color-text-regular, #4E5566);
     }
   }
 
@@ -1013,12 +1013,12 @@ onUnmounted(() => {
 
       .preview-header {
         height: 20%;
-        background-color: var(--xto-border-color-light, #E5E7EB);
+        background-color: var(--xto-border-color-light, #E5E6EB);
       }
 
       .preview-content {
         flex: 1;
-        background-color: var(--xto-bg-color-page, #F5F7FA);
+        background-color: var(--xto-bg-color-page, #F7F8FA);
       }
     }
   }
@@ -1035,7 +1035,7 @@ onUnmounted(() => {
 
     .preview-content-full {
       flex: 1;
-      background-color: var(--xto-bg-color-page, #F5F7FA);
+      background-color: var(--xto-bg-color-page, #F7F8FA);
     }
   }
 
@@ -1051,7 +1051,7 @@ onUnmounted(() => {
 
       .preview-mix-left {
         width: 30%;
-        background-color: var(--xto-color-primary, #4F46E5);
+        background-color: var(--xto-color-primary, #12B6AF);
       }
     }
 
@@ -1066,7 +1066,7 @@ onUnmounted(() => {
 
       .preview-mix-content {
         flex: 1;
-        background-color: var(--xto-bg-color-page, #F5F7FA);
+        background-color: var(--xto-bg-color-page, #F7F8FA);
       }
     }
   }
@@ -1091,7 +1091,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, #12B6AF);
     }
   }
 
@@ -1108,7 +1108,7 @@ onUnmounted(() => {
 
     span {
       font-size: 14px;
-      color: var(--xto-color-text-regular, #4B5563);
+      color: var(--xto-color-text-regular, #4E5566);
     }
   }
 
@@ -1123,7 +1123,7 @@ onUnmounted(() => {
       width: 100%;
       height: 100%;
       border-radius: 11px;
-      background-color: var(--xto-border-color, #D1D5DB);
+      background-color: var(--xto-border-color, #D9DCE1);
       position: relative;
       transition: background-color 0.2s;
 
@@ -1142,7 +1142,7 @@ onUnmounted(() => {
 
     &.is-checked {
       .switch-core {
-        background-color: var(--xto-color-primary, #4F46E5);
+        background-color: var(--xto-color-primary, #12B6AF);
 
         &::after {
           left: 24px;

package/src/components/Layout/index.vue

@@ -139,7 +139,7 @@ const showMixSidebar = computed(() => {
       width: 100%;
       height: 50px;
       background-color: var(--xto-bg-color, #FFFFFF);
-      border-bottom: 1px solid var(--xto-border-color-lighter, #EDF2F7);
+      border-bottom: 1px solid var(--xto-border-color-lighter, #EDEEF1);
       flex-shrink: 0;
     }
 
@@ -163,7 +163,7 @@ const showMixSidebar = computed(() => {
     height: 50px;
     box-sizing: border-box;
     background-color: var(--xto-bg-color, #FFFFFF);
-    border-bottom: 1px solid var(--xto-border-color-lighter, #EDF2F7);
+    border-bottom: 1px solid var(--xto-border-color-lighter, #EDEEF1);
     flex-shrink: 0;
   }
 
@@ -186,14 +186,14 @@ const showMixSidebar = computed(() => {
     height: 50px;
     box-sizing: border-box;
     background-color: var(--xto-bg-color, #FFFFFF);
-    border-bottom: 1px solid var(--xto-border-color-lighter, #EDF2F7);
+    border-bottom: 1px solid var(--xto-border-color-lighter, #EDEEF1);
     flex-shrink: 0;
   }
 
   &__content {
     flex: 1;
     overflow: auto;
-    background-color: var(--xto-bg-color-page, #F5F7FA);
+    background-color: var(--xto-bg-color-page, #F7F8FA);
     padding: 0;
   }
 }

package/src/stores/app.ts

@@ -21,7 +21,7 @@ export const useAppStore = defineStore('app', () => {
   const showTabs = ref<boolean>(local.get<boolean>('showTabs') ?? true)
   const showFooter = ref<boolean>(local.get<boolean>('showFooter') ?? true)
   const showBreadcrumb = ref<boolean>(local.get<boolean>('showBreadcrumb') ?? true)
-  const primaryColor = ref<string>(local.get<string>('primaryColor') || '#4F46E5')
+  const primaryColor = ref<string>(local.get<string>('primaryColor') || '#12B6AF')
   const cachedViews = ref<string[]>([])
   const mixSubMenus = ref<any[]>([])
 
@@ -137,7 +137,7 @@ export const useAppStore = defineStore('app', () => {
   // 初始化主题
   const initTheme = () => {
     updateTheme()
-    if (primaryColor.value !== '#4F46E5') {
+    if (primaryColor.value !== '#12B6AF') {
       document.documentElement.style.setProperty('--xto-color-primary', primaryColor.value)
     }
   }

package/src/style.scss

@@ -9,8 +9,8 @@
 /* 全局样式变量（与 @xto/core 主题系统对齐） */
 :root {
   --xto-bg-color: #FFFFFF;
-  --xto-bg-color-page: #F5F7FA;
-  --xto-border-color-lighter: #EDF2F7;
+  --xto-bg-color-page: #F7F8FA;
+  --xto-border-color-lighter: #EDEEF1;
 }
 
 /* ===== 交互光标与文本选中规范 =====

package/src/views/dashboard/index.vue

@@ -155,7 +155,7 @@ const systemInfo = ref([
 <style lang="scss" scoped>
 .dashboard {
   padding: 24px;
-  background: var(--xto-bg-color-page, #F9FAFB);
+  background: var(--xto-bg-color-page, #F7F8FA);
   min-height: 100%;
 }
 
@@ -217,7 +217,7 @@ const systemInfo = ref([
 
   .stat-title {
     font-size: 14px;
-    color: var(--xto-color-text-secondary, #6B7280);
+    color: var(--xto-color-text-secondary, #86909C);
     margin-bottom: 8px;
   }
 
@@ -242,12 +242,12 @@ const systemInfo = ref([
     }
 
     &.up {
-      color: var(--xto-color-success, #10B981);
+      color: var(--xto-color-success, #2BC48A);
       background: var(--xto-color-success-lighter, #D1FAE5);
     }
 
     &.down {
-      color: var(--xto-color-danger, #EF4444);
+      color: var(--xto-color-danger, #F53F3F);
       background: var(--xto-color-danger-lighter, #FEE2E2);
     }
   }
@@ -285,20 +285,20 @@ const systemInfo = ref([
   h3 {
     font-size: 16px;
     font-weight: 600;
-    color: var(--xto-color-text-primary, #1F2937);
+    color: var(--xto-color-text-primary, #1F2329);
   }
 
   .section-badge {
     font-size: 12px;
-    color: var(--xto-color-text-placeholder, #9CA3AF);
-    background: var(--xto-fill-color, #F3F4F6);
+    color: var(--xto-color-text-placeholder, #A9AEB8);
+    background: var(--xto-fill-color, #F2F3F5);
     padding: 4px 10px;
     border-radius: 12px;
   }
 
   .section-link {
     font-size: 14px;
-    color: var(--xto-color-primary, #4F46E5);
+    color: var(--xto-color-primary, #12B6AF);
     text-decoration: none;
     transition: color 0.2s;
 
@@ -327,7 +327,7 @@ const systemInfo = ref([
   align-items: center;
   gap: 16px;
   padding: 16px;
-  background: var(--xto-fill-color-light, #F9FAFB);
+  background: var(--xto-fill-color-light, #F7F8FA);
   border-radius: var(--xto-border-radius-base, 6px);
   text-decoration: none;
   transition: all 0.2s ease;
@@ -337,7 +337,7 @@ const systemInfo = ref([
     transform: translateX(4px);
 
     .quick-arrow {
-      color: var(--xto-color-primary, #4F46E5);
+      color: var(--xto-color-primary, #12B6AF);
       transform: translateX(4px);
     }
   }
@@ -362,13 +362,13 @@ const systemInfo = ref([
   .quick-title {
     font-size: 15px;
     font-weight: 500;
-    color: var(--xto-color-text-primary, #1F2937);
+    color: var(--xto-color-text-primary, #1F2329);
     margin-bottom: 4px;
   }
 
   .quick-desc {
     font-size: 13px;
-    color: var(--xto-color-text-secondary, #6B7280);
+    color: var(--xto-color-text-secondary, #86909C);
   }
 
   .quick-arrow {
@@ -377,7 +377,7 @@ const systemInfo = ref([
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--xto-color-text-placeholder, #9CA3AF);
+    color: var(--xto-color-text-placeholder, #A9AEB8);
     transition: all 0.2s ease;
 
     svg {
@@ -405,7 +405,7 @@ const systemInfo = ref([
   align-items: flex-start;
   gap: 12px;
   padding: 14px 0;
-  border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
+  border-bottom: 1px solid var(--xto-border-color-lighter, #F2F3F5);
   position: relative;
 
   &:last-child {
@@ -424,11 +424,11 @@ const systemInfo = ref([
   font-weight: 500;
   flex-shrink: 0;
 
-  &.success { background: var(--xto-color-success-lighter, #D1FAE5); color: var(--xto-color-success, #10B981); }
-  &.warning { background: var(--xto-color-warning-lighter, #FEF3C7); color: var(--xto-color-warning, #F59E0B); }
-  &.info { background: var(--xto-color-info-lighter, #E5E7EB); color: var(--xto-color-info, #6B7280); }
-  &.danger { background: var(--xto-color-danger-lighter, #FEE2E2); color: var(--xto-color-danger, #EF4444); }
-  &.primary { background: var(--xto-color-primary-light-6, #C7D2FE); color: var(--xto-color-primary, #4F46E5); }
+  &.success { background: var(--xto-color-success-lighter, #D1FAE5); color: var(--xto-color-success, #2BC48A); }
+  &.warning { background: var(--xto-color-warning-lighter, #FEF3C7); color: var(--xto-color-warning, #FF7D00); }
+  &.info { background: var(--xto-color-info-lighter, #E5E6EB); color: var(--xto-color-info, #86909C); }
+  &.danger { background: var(--xto-color-danger-lighter, #FEE2E2); color: var(--xto-color-danger, #F53F3F); }
+  &.primary { background: var(--xto-color-primary-light-6, #C7D2FE); color: var(--xto-color-primary, #12B6AF); }
 }
 
 .activity-content {
@@ -443,18 +443,18 @@ const systemInfo = ref([
 .activity-user {
   font-size: 14px;
   font-weight: 500;
-  color: var(--xto-color-text-primary, #1F2937);
+  color: var(--xto-color-text-primary, #1F2329);
   margin-right: 8px;
 }
 
 .activity-action {
   font-size: 14px;
-  color: var(--xto-color-text-secondary, #6B7280);
+  color: var(--xto-color-text-secondary, #86909C);
 }
 
 .activity-time {
   font-size: 12px;
-  color: var(--xto-color-text-placeholder, #9CA3AF);
+  color: var(--xto-color-text-placeholder, #A9AEB8);
 }
 
 .activity-dot {
@@ -467,11 +467,11 @@ const systemInfo = ref([
   border-radius: 50%;
   opacity: 0.6;
 
-  &.success { background: var(--xto-color-success, #10B981); }
-  &.warning { background: var(--xto-color-warning, #F59E0B); }
-  &.info { background: var(--xto-color-info, #6B7280); }
-  &.danger { background: var(--xto-color-danger, #EF4444); }
-  &.primary { background: var(--xto-color-primary, #4F46E5); }
+  &.success { background: var(--xto-color-success, #2BC48A); }
+  &.warning { background: var(--xto-color-warning, #FF7D00); }
+  &.info { background: var(--xto-color-info, #86909C); }
+  &.danger { background: var(--xto-color-danger, #F53F3F); }
+  &.primary { background: var(--xto-color-primary, #12B6AF); }
 }
 
 // 系统信息
@@ -503,18 +503,18 @@ const systemInfo = ref([
   justify-content: space-between;
   align-items: center;
   padding: 12px 16px;
-  background: var(--xto-fill-color-light, #F9FAFB);
+  background: var(--xto-fill-color-light, #F7F8FA);
   border-radius: var(--xto-border-radius-base, 6px);
 
   .info-label {
     font-size: 14px;
-    color: var(--xto-color-text-secondary, #6B7280);
+    color: var(--xto-color-text-secondary, #86909C);
   }
 
   .info-value {
     font-size: 14px;
     font-weight: 500;
-    color: var(--xto-color-text-primary, #1F2937);
+    color: var(--xto-color-text-primary, #1F2329);
   }
 }
 
@@ -534,13 +534,13 @@ const systemInfo = ref([
 
   .status-label {
     font-size: 14px;
-    color: var(--xto-color-text-secondary, #6B7280);
+    color: var(--xto-color-text-secondary, #86909C);
   }
 
   .status-value {
     font-size: 14px;
     font-weight: 500;
-    color: var(--xto-color-text-primary, #1F2937);
+    color: var(--xto-color-text-primary, #1F2329);
   }
 }
 </style>