xto-fronted 0.6.3 → 0.8.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 ? '#818CF8' : '#4F46E5')
 
 // 菜单选择
 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, #4F46E5);
   }
 
   &__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, #4F46E5);
+  background-color: var(--xto-color-primary-light-8, #DCDAFC);
   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, #4F46E5);
     }
 
     &.is-active {
       background-color: transparent;
-      color: var(--xto-color-primary, #1D4ED8);
+      color: var(--xto-color-primary, #4F46E5);
       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, #4F46E5);
       }
     }
   }
@@ -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

@@ -233,11 +233,10 @@ const handleLayoutChange = (mode: LayoutMode) => {
 // 主题色选项
 const colorOptions = [
   { value: '#409eff', label: '默认蓝' },
-  { value: '#1890ff', label: '科技蓝' },
-  { value: '#52c41a', label: '极光绿' },
-  { value: '#faad14', label: '日落橙' },
-  { value: '#f5222d', label: '薄暮红' },
-  { value: '#722ed1', label: '酱紫' }
+  { value: '#0F6FDE', label: '企业蓝' },
+  { value: '#00A870', label: '翡翠绿' },
+  { value: '#D46B08', label: '琥珀橙' },
+  { value: '#1F2329', label: '石墨黑' }
 ]
 
 // 设置主题色
@@ -440,7 +439,7 @@ onUnmounted(() => {
             <span>{{ userStore.userName?.charAt(0) || 'U' }}</span>
           </div>
           <span class="top-menu__user-name">{{ userStore.userName }}</span>
-          <span class="top-menu__user-arrow" :class="{ 'is-active': dropdownVisible }">▼</span>
+          <span class="top-menu__user-arrow" :class="{ 'is-active': dropdownVisible }"><svg viewBox="0 0 12 12" width="10" height="10" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 4.5 6 8l3.5-3.5"/></svg></span>
         </div>
 
         <!-- 下拉菜单 -->
@@ -677,7 +676,7 @@ onUnmounted(() => {
     font-size: 12px;
     font-weight: 600;
     color: var(--xto-color-primary, #4F46E5);
-    background-color: var(--xto-color-primary-light-8, #C7D2FE);
+    background-color: var(--xto-color-primary-light-8, #CAC7F9);
     border-radius: var(--xto-border-radius-small, 4px);
   }
 
@@ -692,28 +691,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 +743,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;
       }
     }
@@ -777,14 +776,14 @@ onUnmounted(() => {
       font-size: 12px;
       font-weight: 600;
       color: var(--xto-color-primary, #4F46E5);
-      background-color: var(--xto-color-primary-light-8, #C7D2FE);
+      background-color: var(--xto-color-primary-light-8, #CAC7F9);
       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, #86909C);
       font-size: 14px;
     }
   }
@@ -797,11 +796,11 @@ 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);
+      background-color: var(--xto-fill-color, #EDEEF1);
       color: var(--xto-color-primary, #4F46E5);
     }
   }
@@ -821,13 +820,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 +835,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 +848,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, #4F46E5), var(--xto-color-primary-light-3, #847DEC));
     display: flex;
     align-items: center;
     justify-content: center;
@@ -881,7 +880,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, #4F46E5), var(--xto-color-primary-light-3, #847DEC));
       display: flex;
       align-items: center;
       justify-content: center;
@@ -897,18 +896,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 +921,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 +950,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,13 +966,13 @@ 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;
 
     &:hover {
-      border-color: var(--xto-color-primary-light-5, #A5B4FC);
+      border-color: var(--xto-color-primary-light-5, #B9B5F5);
     }
 
     &.is-active {
@@ -984,14 +983,14 @@ onUnmounted(() => {
     &__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 +1012,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 +1034,7 @@ onUnmounted(() => {
 
     .preview-content-full {
       flex: 1;
-      background-color: var(--xto-bg-color-page, #F5F7FA);
+      background-color: var(--xto-bg-color-page, #F7F8FA);
     }
   }
 
@@ -1061,12 +1060,12 @@ onUnmounted(() => {
 
       .preview-mix-aside {
         width: 25%;
-        background-color: var(--xto-color-primary-light-8, #C7D2FE);
+        background-color: var(--xto-color-primary-light-8, #CAC7F9);
       }
 
       .preview-mix-content {
         flex: 1;
-        background-color: var(--xto-bg-color-page, #F5F7FA);
+        background-color: var(--xto-bg-color-page, #F7F8FA);
       }
     }
   }
@@ -1108,7 +1107,7 @@ onUnmounted(() => {
 
     span {
       font-size: 14px;
-      color: var(--xto-color-text-regular, #4B5563);
+      color: var(--xto-color-text-regular, #4E5566);
     }
   }
 
@@ -1123,7 +1122,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;
 

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

@@ -9,6 +9,14 @@ import { local } from '@/utils/storage'
 export type ThemeMode = 'light' | 'dark'
 export type LayoutMode = 'sidebar' | 'top' | 'mix'
 
+/** hex → rgb 数组，非法输入返回 null */
+function hexToRgb(hex: string): [number, number, number] | null {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim())
+  if (!m) return null
+  const n = parseInt(m[1], 16)
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
+}
+
 export const useAppStore = defineStore('app', () => {
   // 状态
   const appName = ref<string>(local.get<string>('appName') || 'XTO App')
@@ -102,10 +110,26 @@ export const useAppStore = defineStore('app', () => {
     local.set('showBreadcrumb', showBreadcrumb.value)
   }
 
-  // 设置主题色
+  // 设置主题色（同时生成 light-1..9 / dark-1..3 色阶，保证浅色变体跟随）
   const setPrimaryColor = (color: string) => {
     primaryColor.value = color
-    document.documentElement.style.setProperty('--xto-color-primary', color)
+    const root = document.documentElement
+    root.style.setProperty('--xto-color-primary', color)
+    const rgb = hexToRgb(color)
+    if (rgb) {
+      const mix = (t: number, toWhite: boolean) => {
+        const target = toWhite ? [255, 255, 255] : [0, 0, 0]
+        const c = rgb.map((v, i) => Math.round(v + (target[i] - v) * t))
+        return `#${c.map((v) => v.toString(16).padStart(2, '0')).join('')}`
+      }
+      for (let n = 1; n <= 9; n++) {
+        root.style.setProperty(`--xto-color-primary-light-${n}`, mix(n * 0.1, true))
+      }
+      root.style.setProperty('--xto-color-primary-dark-1', mix(0.12, false))
+      root.style.setProperty('--xto-color-primary-dark-2', mix(0.28, false))
+      root.style.setProperty('--xto-color-primary-dark-3', mix(0.45, false))
+      root.style.setProperty('--xto-color-ring', color)
+    }
     local.set('primaryColor', color)
   }
 

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;
 }
 
 /* ===== 交互光标与文本选中规范 =====