xto-fronted 0.6.2 → 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/router/guards.ts

@@ -73,7 +73,18 @@ export function setupRouterGuards(router: Router, options: RouterGuardOptions =
       } else {
         // 检查是否已获取用户信息
         if (userStore.isLoggedIn) {
-          // 已有用户信息，直接放行
+          // 已有用户信息，直接放行；但当前应用菜单为空时（跨应用共享 localStorage 场景）补拉菜单
+          if (!menuStore.hasMenu) {
+            try {
+              const menuList = options.fetchMenu
+                ? await options.fetchMenu()
+                : await getMenuTree(options.appId)
+              menuStore.setMenuList(menuList)
+            } catch (error) {
+              // 菜单拉取失败不影响页面访问，仅记录日志
+              console.warn('补拉菜单失败:', error)
+            }
+          }
           // 添加缓存页面
           if (to.name && to.meta.keepAlive) {
             appStore.addCachedView(to.name as string)

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/stores/menu.ts

@@ -6,10 +6,19 @@ import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import type { MenuItem } from '@/types/api'
 import { local } from '@/utils/storage'
+import { getAppId } from '@/utils/config'
 
 const MENU_LIST_KEY = 'menu_list'
 const PERMISSION_LIST_KEY = 'permission_list'
 
+/**
+ * 菜单存储 key 按应用隔离：
+ * 多个前端部署在同一域名下（如 appli.tooyu.service/portal、/tangyang）共享 localStorage，
+ * 固定 key 会导致 A 应用的菜单被 B 应用复用，必须加 appId 命名空间
+ */
+const menuListKey = () => `${MENU_LIST_KEY}_${getAppId()}`
+const permissionListKey = () => `${PERMISSION_LIST_KEY}_${getAppId()}`
+
 // 首页菜单（参考 tineco-ui）
 const indexMenu: MenuItem = {
   menuCode: 'home',
@@ -62,9 +71,9 @@ function extractPermissions(menus: MenuItem[]): string[] {
 
 export const useMenuStore = defineStore('menu', () => {
   // 状态
-  const menuList = ref<MenuItem[]>(local.get<MenuItem[]>(MENU_LIST_KEY) || [])
+  const menuList = ref<MenuItem[]>(local.get<MenuItem[]>(menuListKey()) || [])
   // 功能权限列表
-  const permissions = ref<string[]>(local.get<string[]>(PERMISSION_LIST_KEY) || [])
+  const permissions = ref<string[]>(local.get<string[]>(permissionListKey()) || [])
 
   // 计算属性
   const hasMenu = computed(() => menuList.value.length > 0)
@@ -73,22 +82,22 @@ export const useMenuStore = defineStore('menu', () => {
   const setMenuList = (menus: MenuItem[]) => {
     // 提取功能权限
     permissions.value = extractPermissions(menus)
-    local.set(PERMISSION_LIST_KEY, permissions.value)
+    local.set(permissionListKey(), permissions.value)
 
     // 过滤菜单，只保留菜单项（type !== 1）
     const filteredMenus = filterMenus(menus)
 
     // 添加首页菜单到开头
     menuList.value = [indexMenu, ...filteredMenus]
-    local.set(MENU_LIST_KEY, menuList.value)
+    local.set(menuListKey(), menuList.value)
   }
 
   // 清除菜单
   const clearMenu = () => {
     menuList.value = []
     permissions.value = []
-    local.remove(MENU_LIST_KEY)
-    local.remove(PERMISSION_LIST_KEY)
+    local.remove(menuListKey())
+    local.remove(permissionListKey())
   }
 
   // 检查是否有某个权限

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