xto-fronted 0.8.2 → 0.8.4

package/dist/utils/config.d.ts

@@ -43,6 +43,11 @@ export declare function getApiBaseUrl(): string;
  * 获取应用基础路径（用于路由 base）
  */
 export declare function getBasePath(): string;
+/**
+ * 拼接部署路径的静态资源地址（public 目录资源，如 logo）
+ * 部署在子路径（如 /lending）时，绝对路径 /vite.svg 会落到域名根路径 404，需自动补前缀
+ */
+export declare function withBasePath(path: string): string;
 export declare const appConfig: {
     appId: import('vue').Ref<string, string>;
     clientId: import('vue').Ref<string, string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xto-fronted",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "private": false,
   "type": "module",
   "description": "XTO 前端应用框架",

package/src/components/Layout/MixTopMenu.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, onMounted, onUnmounted, watch } from 'vue'
+import { withBasePath } from '@/utils/config'
 import { useRoute, useRouter } from 'vue-router'
 import { useMenuStore } from '@/stores/menu'
 import { useAppStore } from '@/stores/app'
@@ -13,9 +14,11 @@ import { Drawer } from '@xto/feedback'
 const props = withDefaults(defineProps<{
   logoSrc?: string
 }>(), {
-  logoSrc: '/vite.svg'
 })
 
+// logo 地址在渲染期解析：模块加载早于 createXtoApp 的运行时配置，不能作为默认值立即求值
+const resolvedLogoSrc = computed(() => props.logoSrc || withBasePath('/vite.svg'))
+
 const route = useRoute()
 const router = useRouter()
 const menuStore = useMenuStore()
@@ -359,7 +362,7 @@ onUnmounted(() => {
   <div class="mix-top-menu">
     <!-- 左侧 Logo -->
     <div class="mix-top-menu__logo">
-      <img :src="props.logoSrc" alt="Logo" class="mix-top-menu__logo-img" />
+      <img :src="resolvedLogoSrc" alt="Logo" class="mix-top-menu__logo-img" />
       <span class="mix-top-menu__logo-text">{{ appStore.appName }}</span>
     </div>
 

package/src/components/Layout/Sidebar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
+import { withBasePath } from '@/utils/config'
 import { useRoute, useRouter } from 'vue-router'
 import { useMenuStore } from '@/stores/menu'
 import { useUserStore } from '@/stores/user'
@@ -20,9 +21,11 @@ const props = withDefaults(defineProps<{
   menuList: () => [],
   showLogo: true,
   showUser: true,
-  logoSrc: '/vite.svg'
 })
 
+// logo 地址在渲染期解析：模块加载早于 createXtoApp 的运行时配置，不能作为默认值立即求值
+const resolvedLogoSrc = computed(() => props.logoSrc || withBasePath('/vite.svg'))
+
 const route = useRoute()
 const router = useRouter()
 const menuStore = useMenuStore()
@@ -129,7 +132,7 @@ const handleLogout = () => {
   <div class="sidebar" :class="{ 'sidebar--collapsed': isCollapsed }">
     <!-- Logo -->
     <div v-if="props.showLogo" class="sidebar__logo">
-      <img :src="props.logoSrc" alt="Logo" class="sidebar__logo-img" />
+      <img :src="resolvedLogoSrc" alt="Logo" class="sidebar__logo-img" />
       <span v-show="!isCollapsed" class="sidebar__logo-text">{{ appStore.appName }}</span>
     </div>
 

package/src/components/Layout/TopMenu.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { withBasePath } from '@/utils/config'
 import { useRoute, useRouter } from 'vue-router'
 import { useMenuStore } from '@/stores/menu'
 import { useAppStore } from '@/stores/app'
@@ -13,9 +14,11 @@ import { Drawer } from '@xto/feedback'
 const props = withDefaults(defineProps<{
   logoSrc?: string
 }>(), {
-  logoSrc: '/vite.svg'
 })
 
+// logo 地址在渲染期解析：模块加载早于 createXtoApp 的运行时配置，不能作为默认值立即求值
+const resolvedLogoSrc = computed(() => props.logoSrc || withBasePath('/vite.svg'))
+
 const route = useRoute()
 const router = useRouter()
 const menuStore = useMenuStore()
@@ -302,7 +305,7 @@ onUnmounted(() => {
   <div class="top-menu">
     <!-- 左侧 Logo -->
     <div class="top-menu__logo">
-      <img :src="props.logoSrc" alt="Logo" class="top-menu__logo-img" />
+      <img :src="resolvedLogoSrc" alt="Logo" class="top-menu__logo-img" />
       <span class="top-menu__logo-text">{{ appStore.appName }}</span>
     </div>
 

package/src/components/Layout/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { withBasePath } from '@/utils/config'
 import { useAppStore } from '@/stores/app'
 import { useMenuStore } from '@/stores/menu'
 import Sidebar from './Sidebar.vue'
@@ -11,9 +12,11 @@ import MixTopMenu from './MixTopMenu.vue'
 const props = withDefaults(defineProps<{
   logoSrc?: string
 }>(), {
-  logoSrc: '/vite.svg'
 })
 
+// logo 地址在渲染期解析：模块加载早于 createXtoApp 的运行时配置，不能作为默认值立即求值
+const resolvedLogoSrc = computed(() => props.logoSrc || withBasePath('/vite.svg'))
+
 const appStore = useAppStore()
 const menuStore = useMenuStore()
 
@@ -51,7 +54,7 @@ const showMixSidebar = computed(() => {
   <!-- sidebar模式：左侧菜单 + 顶部Header + 主内容 -->
   <div v-if="layoutMode === 'sidebar'" class="layout layout--sidebar">
     <aside class="layout__aside" :style="{ width: sidebarWidth }">
-      <Sidebar :menu-list="sidebarMenuList" :show-logo="true" :show-user="true" :logo-src="props.logoSrc" />
+      <Sidebar :menu-list="sidebarMenuList" :show-logo="true" :show-user="true" :logo-src="resolvedLogoSrc" />
     </aside>
     <div class="layout__main">
       <header class="layout__header">
@@ -66,7 +69,7 @@ const showMixSidebar = computed(() => {
   <!-- top模式：顶部菜单 + 主内容 -->
   <div v-if="layoutMode === 'top'" class="layout layout--top">
     <div class="layout__top-menu">
-      <TopMenu :logo-src="props.logoSrc" />
+      <TopMenu :logo-src="resolvedLogoSrc" />
     </div>
     <div class="layout__main">
       <main class="layout__content">
@@ -79,7 +82,7 @@ const showMixSidebar = computed(() => {
   <div v-if="layoutMode === 'mix'" class="layout layout--mix">
     <!-- 顶部一级菜单 -->
     <div class="layout__mix-top-menu">
-      <MixTopMenu :logo-src="props.logoSrc" />
+      <MixTopMenu :logo-src="resolvedLogoSrc" />
     </div>
     <!-- 下方：左侧子菜单 + 主内容 -->
     <div class="layout__mix-body">

package/src/router/layoutRoute.ts

@@ -6,7 +6,7 @@ import { createRouter as vueCreateRouter, createWebHistory } from 'vue-router'
 import type { RouteRecordRaw, Router } from 'vue-router'
 import { h, defineComponent } from 'vue'
 import Layout from '@/components/Layout/index.vue'
-import { getBasePath } from '@/utils/config'
+import { getBasePath, withBasePath } from '@/utils/config'
 
 interface LayoutRouteOptions {
   indexPath?: string
@@ -28,7 +28,9 @@ export function createLayoutRoute(
   options: LayoutRouteOptions = {}
 ): RouteRecordRaw {
   const indexPath = options.indexPath || '/dashboard'
-  const logoSrc = options.logoSrc || '/vite.svg'
+  // 注意：createLayoutRoute 常在模块顶层被调用（早于 createXtoApp 初始化运行时配置），
+  // logo 地址必须延迟到渲染时解析，不能在此处求值
+  const logoSrc = options.logoSrc
 
   // 添加 catch-all 路由，让404在Layout内部渲染，保持左侧菜单显示
   const catchAllRoute: RouteRecordRaw = {
@@ -44,7 +46,7 @@ export function createLayoutRoute(
   const LayoutWrapper = defineComponent({
     name: 'LayoutWrapper',
     render() {
-      return h(Layout, { logoSrc })
+      return h(Layout, { logoSrc: logoSrc || withBasePath('/vite.svg') })
     }
   })
 

package/src/utils/config.ts

@@ -152,6 +152,16 @@ export function getBasePath(): string {
   return basePath.value
 }
 
+/**
+ * 拼接部署路径的静态资源地址（public 目录资源，如 logo）
+ * 部署在子路径（如 /lending）时，绝对路径 /vite.svg 会落到域名根路径 404，需自动补前缀
+ */
+export function withBasePath(path: string): string {
+  if (!path) return path
+  const base = getBasePath().replace(/\/$/, '')
+  return path.startsWith('/') ? `${base}${path}` : `${base}/${path}`
+}
+
 // 导出响应式引用（供特殊场景直接使用）
 export const appConfig = {
   appId,