Vben精讲:10-Vben页面的偏好设置

📅 2026/7/12 15:47:37
Vben精讲:10-Vben页面的偏好设置
文章目录参考内容自定义配置apps\web-antd\src\preferences.tspackages\preferences\src\index.tspackages\core\base\typings\src\helper.d.tspackages\core\preferences\src\types.tsapps\web-antd\src\main.tspackages\core\preferences\src\preferences.tspackages\core\preferences\src\config.ts参考内容https://doc.vben.pro/guide/essentials/settings.html#偏好设置自定义配置apps\web-antd\src\preferences.tsexportconstoverridesPreferencesdefineOverridesPreferences({// overridesapp:{name:import.meta.env.VITE_APP_TITLE,},copyright:appCopyrightPreferences,theme:{builtinType:orange,colorPrimary:hsl(18 89% 40%),mode:light,semiDarkSidebar:true},});packages\preferences\src\index.ts/** * 如果你想所有的app都使用相同的默认偏好设置你可以在这里定义 * 而不是去修改 vben-core/preferences 中的默认偏好设置 * param preferences * returns */functiondefineOverridesPreferences(preferences:DeepPartialPreferences){returnpreferences;}packagescore\base\typings\src\helper.d.ts/** * 深层递归所有属性为可选 */typeDeepPartialT,Dextendsnumber10,Cextendsunknown[][],C[length]extendsD?T:Textendsobject?{[PinkeyofT]?:DeepPartialT[P],D,IncrementC;}:T;packagescore\preferences\src\types.tsinterfacePreferences{/** 全局配置 */app:AppPreferences;/** 顶栏配置 */breadcrumb:BreadcrumbPreferences;/** 版权配置 */copyright:CopyrightPreferences;/** 底栏配置 */footer:FooterPreferences;/** 面包屑配置 */header:HeaderPreferences;/** logo配置 */logo:LogoPreferences;/** 导航配置 */navigation:NavigationPreferences;/** 快捷键配置 */shortcutKeys:ShortcutKeyPreferences;/** 侧边栏配置 */sidebar:SidebarPreferences;/** 标签页配置 */tabbar:TabbarPreferences;/** 主题配置 */theme:ThemePreferences;/** 动画配置 */transition:TransitionPreferences;/** 功能配置 */widget:WidgetPreferences;}apps\web-antd\src\main.ts// app偏好设置初始化awaitinitPreferences({extension:preferencesExtension,namespace,overrides:overridesPreferences,});packagescore\preferences\src\index.tsexportconst{getPreferences,getCustomPreferences,getInitialCustomPreferences,getPreferencesExtension,updatePreferences,updateCustomPreferences,resetPreferences,clearCache,initPreferences,}preferencesManager;packagescore\preferences\src\preferences.ts/** * 初始化偏好设置 * param options - 初始化配置项 * param options.namespace - 命名空间用于隔离不同应用的配置 * param options.overrides - 要覆盖的偏好设置 */initPreferencesasyncTCustomPreferencesextendsobjectCustomPreferencesRecord,({namespace,overrides,extension,}:InitialOptionsTCustomPreferences){// 防止重复初始化if(this.isInitialized){return;}// 使用命名空间初始化存储管理器this.cachenewStorageManager({prefix:namespace});// 合并初始偏好设置前面的对象优先后面的对象仅补齐缺失字段this.initialPreferencesmerge({},overrides,defaultPreferences);this.customPreferencesExtensionextension??null;this.initialCustomPreferencesthis.resolveCustomPreferencesDefaults(this.customPreferencesExtension,);// 加载缓存的偏好设置并仅用缓存补齐初始化配置中未显式设置的字段constcachedPreferences(awaitthis.loadFromCache())||{};constmergedPreferencemerge({},cachedPreferences,// 用户缓存的设置优先this.initialPreferences,// 初始设置仅补齐缺失字段);// 更新偏好设置this.updatePreferences(mergedPreference);constcachedCustom(awaitthis.loadCustomFromCache())||{};this.replaceCustomPreferences(merge({},this.sanitizeCustomPreferences(cachedCustom),this.initialCustomPreferences,),);awaitthis.saveToCache();// 设置监听器this.setupWatcher();// 初始化平台标识this.initPlatform();this.isInitializedtrue;};packagescore\preferences\src\config.tsconstdefaultPreferences:Preferences{app:{accessMode:frontend,authPageLayout:panel-right,checkUpdatesInterval:1,colorGrayMode:false,colorWeakMode:false,compact:false,contentCompact:wide,contentCompactWidth:1200,contentPadding:0,contentPaddingBottom:0,contentPaddingLeft:0,contentPaddingRight:0,contentPaddingTop:0,defaultAvatar:https://unpkg.com/vbenjs/static-source0.1.7/source/avatar-v1.webp,defaultHomePath:/dashboard,dynamicTitle:true,enableCheckUpdates:true,enableCopyPreferences:true,enablePreferences:true,enableRefreshToken:false,enableStickyPreferencesNavigationBar:true,isMobile:false,layout:sidebar-nav,locale:zh-CN,loginExpiredMode:page,name:Vben Admin,preferencesButtonPosition:auto,timezone:Asia/Shanghai,watermark:false,watermarkContent:,zIndex:200,},breadcrumb:{enable:true,hideOnlyOne:false,showHome:false,showIcon:true,styleType:normal,},copyright:{companyName:Vben,companySiteLink:https://www.vben.pro,date:2024,enable:true,icp:闽ICP备19024351号,icpLink:https://beian.miit.gov.cn/,settingShow:true,},footer:{enable:false,fixed:false,height:32,},header:{enable:true,height:50,hidden:false,menuAlign:start,mode:fixed,},logo:{enable:true,fit:contain,source:https://unpkg.com/vbenjs/static-source0.1.7/source/logo-v1.webp,showText:true,logoMode:icon,},navigation:{accordion:true,split:true,styleType:rounded,},shortcutKeys:{enable:true,globalEscape:false,globalLockScreen:true,globalLogout:true,globalPreferences:true,globalSearch:true,},sidebar:{autoActivateChild:false,collapsed:false,collapsedButton:true,collapsedShowTitle:false,collapseWidth:60,draggable:true,enable:true,expandOnHover:true,extraCollapse:false,extraCollapsedWidth:60,fixedButton:true,hidden:false,mixedWidth:80,width:224,},tabbar:{draggable:true,enable:true,height:38,keepAlive:true,maxCount:0,middleClickToClose:false,persist:true,showIcon:true,showMaximize:true,showMore:true,showRefresh:true,styleType:chrome,visitHistory:true,wheelable:true,},theme:{builtinType:default,colorDestructive:hsl(348 100% 61%),colorPrimary:hsl(212 100% 45%),colorSuccess:hsl(144 57% 58%),colorWarning:hsl(42 84% 61%),mode:dark,radius:0.5,fontSize:16,semiDarkHeader:false,semiDarkSidebar:false,semiDarkSidebarSub:false,},transition:{enable:true,loading:true,name:fade-slide,progress:true,},widget:{fullscreen:true,globalSearch:true,languageToggle:true,lockScreen:true,notification:true,refresh:true,sidebarToggle:true,themeToggle:true,timezone:true,},};