xto-fronted 0.8.4 → 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.4",
+  "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/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/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
 }