xto-fronted 0.8.3 → 0.9.0

package/dist/utils/config.d.ts

@@ -54,3 +54,22 @@ export declare const appConfig: {
     apiBaseUrl: import('vue').Ref<string, string>;
     basePath: import('vue').Ref<string, string>;
 };
+export interface AppUiFeatures {
+    showTabs?: boolean;
+    showBreadcrumb?: boolean;
+    showFooter?: boolean;
+}
+export interface AppUiConfig {
+    /** 默认布局模式 */
+    layout?: 'sidebar' | 'top' | 'mix';
+    /** 默认主题色 */
+    primaryColor?: string;
+    /** 默认深浅主题 */
+    theme?: 'light' | 'dark';
+    /** 默认功能开关 */
+    features?: AppUiFeatures;
+    /** 是否允许用户在界面右上角自行修改（false 时锁定设置入口） */
+    allowUserOverride?: boolean;
+}
+export declare function setServerUiConfig(config: AppUiConfig): void;
+export declare function getServerUiConfig(): AppUiConfig;

package/package.json

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

package/src/api/system.ts

@@ -51,6 +51,12 @@ export function getMenuTree(appId?: string) {
   return http.get<MenuItem[]>(`/user/v1.0/menu/get-menu?appId=${id}`)
 }
 
+// 获取应用界面配置（免登录：布局模式/主题色/功能开关的按应用默认值）
+export function getAppUiConfig(appId?: string) {
+  const id = appId || getAppId()
+  return http.get<Record<string, any>>('/user/v1.0/app/ui-config', { params: { appId: id } })
+}
+
 // 创建菜单
 export function createMenu(data: Partial<MenuItem>) {
   return http.post<MenuItem>('/menu', data)

package/src/components/Layout/Header.vue

@@ -175,6 +175,12 @@ const handleDarkModeToggle = () => {
   drawerVisible.value = false
 }
 
+// 恢复默认（清个人偏好，回到服务端按应用配置的默认值）
+const handleResetDefaults = () => {
+  appStore.resetToServerDefaults()
+  drawerVisible.value = false
+}
+
 // 切换全屏
 const toggleFullscreen = () => {
   if (!document.fullscreenElement) {
@@ -334,8 +340,8 @@ onUnmounted(() => {
         <Icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" :size="16" />
       </div>
 
-      <!-- 换肤设置 -->
-      <div class="header__action" @click="openSettingsDrawer" title="换肤设置">
+      <!-- 换肤设置（allowUserOverride=false 时由应用管理员锁定） -->
+      <div v-if="appStore.allowUserOverride" class="header__action" @click="openSettingsDrawer" title="换肤设置">
         <Icon name="skin" :size="16" />
       </div>
 
@@ -467,6 +473,14 @@ onUnmounted(() => {
             </div>
           </div>
         </div>
+
+        <!-- 恢复默认：清掉个人偏好，回到管理员在用户中心配置的界面默认值 -->
+        <div class="settings-section">
+          <div class="settings-reset" @click="handleResetDefaults">
+            <Icon name="refresh" :size="14" />
+            <span>恢复默认</span>
+          </div>
+        </div>
       </div>
     </Drawer>
   </div>
@@ -985,6 +999,25 @@ onUnmounted(() => {
       }
     }
   }
+
+  .settings-reset {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    height: 34px;
+    border: 1px solid var(--xto-border-color, #D9DCE1);
+    border-radius: 6px;
+    font-size: 13px;
+    color: var(--xto-color-text-regular, #4E5566);
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      color: var(--xto-color-primary, #4F46E5);
+      border-color: var(--xto-color-primary, #4F46E5);
+    }
+  }
 }
 
 // 下拉动画

package/src/components/Layout/MixTopMenu.vue

@@ -14,9 +14,11 @@ import { Drawer } from '@xto/feedback'
 const props = withDefaults(defineProps<{
   logoSrc?: string
 }>(), {
-  logoSrc: withBasePath('/vite.svg')
 })
 
+// logo 地址在渲染期解析：模块加载早于 createXtoApp 的运行时配置，不能作为默认值立即求值
+const resolvedLogoSrc = computed(() => props.logoSrc || withBasePath('/vite.svg'))
+
 const route = useRoute()
 const router = useRouter()
 const menuStore = useMenuStore()
@@ -360,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

@@ -21,9 +21,11 @@ const props = withDefaults(defineProps<{
   menuList: () => [],
   showLogo: true,
   showUser: true,
-  logoSrc: withBasePath('/vite.svg')
 })
 
+// logo 地址在渲染期解析：模块加载早于 createXtoApp 的运行时配置，不能作为默认值立即求值
+const resolvedLogoSrc = computed(() => props.logoSrc || withBasePath('/vite.svg'))
+
 const route = useRoute()
 const router = useRouter()
 const menuStore = useMenuStore()
@@ -130,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

@@ -14,9 +14,11 @@ import { Drawer } from '@xto/feedback'
 const props = withDefaults(defineProps<{
   logoSrc?: string
 }>(), {
-  logoSrc: withBasePath('/vite.svg')
 })
 
+// logo 地址在渲染期解析：模块加载早于 createXtoApp 的运行时配置，不能作为默认值立即求值
+const resolvedLogoSrc = computed(() => props.logoSrc || withBasePath('/vite.svg'))
+
 const route = useRoute()
 const router = useRouter()
 const menuStore = useMenuStore()
@@ -303,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

@@ -12,9 +12,11 @@ import MixTopMenu from './MixTopMenu.vue'
 const props = withDefaults(defineProps<{
   logoSrc?: string
 }>(), {
-  logoSrc: withBasePath('/vite.svg')
 })
 
+// logo 地址在渲染期解析：模块加载早于 createXtoApp 的运行时配置，不能作为默认值立即求值
+const resolvedLogoSrc = computed(() => props.logoSrc || withBasePath('/vite.svg'))
+
 const appStore = useAppStore()
 const menuStore = useMenuStore()
 
@@ -52,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">
@@ -67,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">
@@ -80,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/index.ts

@@ -2,8 +2,9 @@
 import './style.scss'
 
 // 配置
-import { initAppConfig, getAppId, getClientId, getApiBaseUrl, loadRuntimeConfig } from './utils/config'
+import { initAppConfig, getAppId, getClientId, getApiBaseUrl, loadRuntimeConfig, setServerUiConfig, type AppUiConfig } from './utils/config'
 import { setBasePath, setApiBaseUrl } from './utils/request'
+import { getAppUiConfig } from './api/system'
 import type { LocaleCode } from '@xto/core/locale'
 
 // XtoConfig 类型定义
@@ -48,6 +49,23 @@ export async function createXtoApp(config: Partial<XtoConfig>) {
     setBasePath(config.basePath)
   }
 
+  // 拉取服务端按应用配置的界面默认值（免登录接口，xto-admin「界面设置」维护）
+  // 必须在 store 首次实例化前完成，失败/超时静默降级为内置默认
+  const resolvedAppId = config.appId || getAppId()
+  if (resolvedAppId) {
+    try {
+      const uiConfig = await Promise.race([
+        getAppUiConfig(resolvedAppId),
+        new Promise<null>((resolve) => setTimeout(() => resolve(null), 2000))
+      ])
+      if (uiConfig && typeof uiConfig === 'object') {
+        setServerUiConfig(uiConfig as AppUiConfig)
+      }
+    } catch (error) {
+      console.warn('加载应用界面配置失败，使用内置默认', error)
+    }
+  }
+
   // 设置应用名称和路径到 store
   import('./stores/app').then(({ useAppStore }) => {
     const appStore = useAppStore()

package/src/router/layoutRoute.ts

@@ -28,7 +28,9 @@ export function createLayoutRoute(
   options: LayoutRouteOptions = {}
 ): RouteRecordRaw {
   const indexPath = options.indexPath || '/dashboard'
-  const logoSrc = options.logoSrc || withBasePath('/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/stores/app.ts

@@ -5,6 +5,7 @@
 import { defineStore } from 'pinia'
 import { ref, computed, watch } from 'vue'
 import { local } from '@/utils/storage'
+import { getServerUiConfig } from '@/utils/config'
 
 export type ThemeMode = 'light' | 'dark'
 export type LayoutMode = 'sidebar' | 'top' | 'mix'
@@ -17,19 +18,33 @@ function hexToRgb(hex: string): [number, number, number] | null {
   return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
 }
 
+/** 读取用户显式保存过的偏好；未设置过返回 undefined（与「服务端默认」区分开） */
+function readUserPreference<T>(key: string): T | undefined {
+  const value = local.get<T>(key)
+  return value === null || value === ('' as unknown as T) ? undefined : value
+}
+
+// 服务端按应用下发的默认值（xto-admin 界面配置），仅在用户未显式设置时生效
+const serverUi = getServerUiConfig()
+const serverFeatures = serverUi.features || {}
+
+// 重置时需要清掉的用户偏好键（isCollapsed 属个人习惯，不随默认值重置）
+const PREFERENCE_KEYS = ['layout', 'primaryColor', 'theme', 'isDark', 'showTabs', 'showBreadcrumb', 'showFooter'] as const
+
 export const useAppStore = defineStore('app', () => {
-  // 状态
+  // 状态（优先级：用户本地偏好 > 服务端按应用默认 > 内置默认）
   const appName = ref<string>(local.get<string>('appName') || 'XTO App')
   const indexPath = ref<string>(local.get<string>('indexPath') || '/dashboard')
   const loginPath = ref<string>(local.get<string>('loginPath') || '/login')
-  const isDark = ref<boolean>(local.get<boolean>('isDark') || false)
-  const theme = ref<ThemeMode>(local.get<ThemeMode>('theme') || 'light')
-  const layout = ref<LayoutMode>(local.get<LayoutMode>('layout') || 'sidebar')
+  const theme = ref<ThemeMode>(readUserPreference<ThemeMode>('theme') ?? serverUi.theme ?? 'light')
+  const isDark = ref<boolean>(theme.value === 'dark')
+  const layout = ref<LayoutMode>(readUserPreference<LayoutMode>('layout') ?? serverUi.layout ?? 'sidebar')
   const isCollapsed = ref<boolean>(local.get<boolean>('isCollapsed') || false)
-  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 showTabs = ref<boolean>(readUserPreference<boolean>('showTabs') ?? serverFeatures.showTabs ?? true)
+  const showFooter = ref<boolean>(readUserPreference<boolean>('showFooter') ?? serverFeatures.showFooter ?? true)
+  const showBreadcrumb = ref<boolean>(readUserPreference<boolean>('showBreadcrumb') ?? serverFeatures.showBreadcrumb ?? true)
+  const primaryColor = ref<string>(readUserPreference<string>('primaryColor') ?? serverUi.primaryColor ?? '#4F46E5')
+  const allowUserOverride = ref<boolean>(serverUi.allowUserOverride !== false)
   const cachedViews = ref<string[]>([])
   const mixSubMenus = ref<any[]>([])
 
@@ -54,28 +69,33 @@ export const useAppStore = defineStore('app', () => {
     local.set('loginPath', path)
   }
 
-  // 切换主题
+  // 应用深浅主题到 DOM（不写 localStorage，供初始化与重置使用）
+  const applyThemeClass = () => {
+    const html = document.documentElement
+    if (isDark.value) {
+      html.classList.add('dark')
+    } else {
+      html.classList.remove('dark')
+    }
+  }
+
+  // 切换主题（用户操作，持久化）
   const toggleTheme = () => {
     isDark.value = !isDark.value
     theme.value = isDark.value ? 'dark' : 'light'
     updateTheme()
   }
 
-  // 设置主题
+  // 设置主题（用户操作，持久化）
   const setTheme = (mode: ThemeMode) => {
     theme.value = mode
     isDark.value = mode === 'dark'
     updateTheme()
   }
 
-  // 更新主题
+  // 更新主题（用户操作路径：应用 DOM + 持久化）
   const updateTheme = () => {
-    const html = document.documentElement
-    if (isDark.value) {
-      html.classList.add('dark')
-    } else {
-      html.classList.remove('dark')
-    }
+    applyThemeClass()
     local.set('isDark', isDark.value)
     local.set('theme', theme.value)
   }
@@ -110,9 +130,8 @@ export const useAppStore = defineStore('app', () => {
     local.set('showBreadcrumb', showBreadcrumb.value)
   }
 
-  // 设置主题色（同时生成 light-1..9 / dark-1..3 色阶，保证浅色变体跟随）
-  const setPrimaryColor = (color: string) => {
-    primaryColor.value = color
+  // 主题色 CSS 变量应用（含 light-1..9 / dark-1..3 色阶；不写 localStorage，供初始化与重置使用）
+  const applyPrimaryColorVars = (color: string) => {
     const root = document.documentElement
     root.style.setProperty('--xto-color-primary', color)
     const rgb = hexToRgb(color)
@@ -130,9 +149,29 @@ export const useAppStore = defineStore('app', () => {
       root.style.setProperty('--xto-color-primary-dark-3', mix(0.45, false))
       root.style.setProperty('--xto-color-ring', color)
     }
+  }
+
+  // 设置主题色（用户操作，持久化）
+  const setPrimaryColor = (color: string) => {
+    primaryColor.value = color
+    applyPrimaryColorVars(color)
     local.set('primaryColor', color)
   }
 
+  // 恢复默认：清掉本地偏好，回到服务端按应用配置（无配置则回内置默认）
+  const resetToServerDefaults = () => {
+    PREFERENCE_KEYS.forEach((key) => local.remove(key))
+    layout.value = serverUi.layout ?? 'sidebar'
+    primaryColor.value = serverUi.primaryColor ?? '#4F46E5'
+    theme.value = serverUi.theme ?? 'light'
+    isDark.value = theme.value === 'dark'
+    showTabs.value = serverFeatures.showTabs ?? true
+    showFooter.value = serverFeatures.showFooter ?? true
+    showBreadcrumb.value = serverFeatures.showBreadcrumb ?? true
+    applyThemeClass()
+    applyPrimaryColorVars(primaryColor.value)
+  }
+
   // 添加缓存页面
   const addCachedView = (name: string) => {
     if (!cachedViews.value.includes(name)) {
@@ -158,16 +197,14 @@ export const useAppStore = defineStore('app', () => {
     mixSubMenus.value = menus
   }
 
-  // 初始化主题
+  // 初始化主题：只应用运行时效果，不持久化（避免把服务端默认值固化成用户偏好）
   const initTheme = () => {
-    updateTheme()
-    if (primaryColor.value !== '#4F46E5') {
-      document.documentElement.style.setProperty('--xto-color-primary', primaryColor.value)
-    }
+    applyThemeClass()
+    applyPrimaryColorVars(primaryColor.value)
   }
 
   // 监听主题变化
-  watch(isDark, updateTheme)
+  watch(isDark, applyThemeClass)
 
   return {
     appName,
@@ -181,6 +218,7 @@ export const useAppStore = defineStore('app', () => {
     showFooter,
     showBreadcrumb,
     primaryColor,
+    allowUserOverride,
     cachedViews,
     mixSubMenus,
     themeClass,
@@ -195,6 +233,7 @@ export const useAppStore = defineStore('app', () => {
     toggleFooter,
     toggleBreadcrumb,
     setPrimaryColor,
+    resetToServerDefaults,
     addCachedView,
     removeCachedView,
     clearCachedViews,

package/src/utils/config.ts

@@ -168,4 +168,36 @@ export const appConfig = {
   clientId,
   apiBaseUrl,
   basePath
+}
+
+// ==================== 应用界面配置（服务端按应用下发的默认值） ====================
+
+export interface AppUiFeatures {
+  showTabs?: boolean
+  showBreadcrumb?: boolean
+  showFooter?: boolean
+}
+
+export interface AppUiConfig {
+  /** 默认布局模式 */
+  layout?: 'sidebar' | 'top' | 'mix'
+  /** 默认主题色 */
+  primaryColor?: string
+  /** 默认深浅主题 */
+  theme?: 'light' | 'dark'
+  /** 默认功能开关 */
+  features?: AppUiFeatures
+  /** 是否允许用户在界面右上角自行修改（false 时锁定设置入口） */
+  allowUserOverride?: boolean
+}
+
+// 模块级保存，app store 首次实例化时读取（早于任何组件渲染，无闪烁）
+let serverUiConfig: AppUiConfig = {}
+
+export function setServerUiConfig(config: AppUiConfig): void {
+  serverUiConfig = config || {}
+}
+
+export function getServerUiConfig(): AppUiConfig {
+  return serverUiConfig
 }