Fantastic-admin 框架页面设置（page）完整指南：切换动画、载入进度条与快捷键配置

前端AI 技能【免费下载链接】basic⭐⭐⭐⭐⭐ 面向 AI 编程的管理系统框架兼容PC、移动端。AI-oriented management system framework, compatible with PC and mobile device.项目地址https://gitcode.com/GitHub_Trending/ba/basic点击查看免费下载导读页面设置page是 Fantastic-admin 管理系统框架中负责页面级行为的配置域覆盖页面切换动画、路由载入进度条与页面相关快捷键三类能力。本文以框架设置技能文档 page-settings.md 为骨架结合仓库中 packages/settings 的类型定义、默认配置、路由守卫与热键注册源码讲解每一项配置的取值、默认值、生效原理与最佳实践。读完本文你将能准确地在src/settings.ts中定制页面动画、进度条和快捷键行为并理解它们与框架设置合并机制、路由守卫、热键注册表之间的联动关系。一、page 配置在框架中的位置Fantastic-admin 采用 monorepo 架构apps/下每个应用都有一份独立的 src/settings.ts 配置文件。框架设置技能文档 SKILL.md 明确了核心文件分工apps/app/src/settings.ts当前应用的配置文件唯一可修改项packages/settings/src/types.tsTypeScript 类型定义只读参考packages/settings/src/default.ts默认完整配置只读参考。page就是SettingsOptions七大配置域之一。查看 packages/settings/src/types.ts 中的PageSettings接口定义export interface PageSettings { /** * 载入进度条 * description 控制是否显示页面载入进度条 * default true */ progress?: boolean }而 packages/settings/src/default.ts 中page的默认值为page: { progress: true, },也就是说框架默认开启路由载入进度条。需要特别说明的是从当前仓库源码看PageSettings类型仅包含progress一项技能文档中描述的transitionMode与hotkeys属于页面配置域的完整设计下文将逐项展开说明其含义与配置写法在使用时请以仓库内类型定义为准避免写入未定义的类型字段产生 TS 类型错误。配置项的注入路径为 packages/settings/src/utils.ts 的setSettings()export function setSettings(settings: SettingsOptions) { return merge(settings, cloneDeep(settingsDefault)) as RequiredDeepSettingsOptions }应用只需在settings.ts中写出与默认值不同的自定义项框架通过merge基于defu的深度合并自动继承默认配置因此维护时一眼就能看出项目定制了哪些行为。二、页面切换动画transitionMode技能文档给出了页面切换动画的完整取值清单类型 | fade | slide-left | slide-right | slide-top | slide-bottom默认值说明设置页面切换时的动画效果— 无动画fade— 淡入淡出slide-left— 向左滑动slide-right— 向右滑动slide-top— 向上滑动slide-bottom— 向下滑动2.1 常见配置启用页面切换动画以向右滑动为例page: { transitionMode: slide-right, }2.2 源码现状说明需要诚实指出的是在当前仓库的PageSettings类型定义与默认配置中尚未发现transitionMode字段的实际落地实现在apps/与packages/中搜索transitionMode亦无匹配结果。从仓库结构推断transitionMode属于页面配置域的规划配置项或随版本迭代引入的能力本文继承技能文档的原始定义以便你在对应版本中直接套用。若在集成时遇到 TS 类型提示缺失可结合项目实际情况在应用侧自行扩展类型或与框架维护者确认该配置项的可用版本。三、载入进度条progress载入进度条是page配置域中唯一在仓库源码中完整落地实现的配置项也是路由切换体验的关键一环。类型boolean默认值true说明控制是否显示页面载入进度条3.1 常见配置禁用进度条page: { progress: false, }3.2 源码实现路由守卫中的进度条开关进度条的实际生效逻辑位于 apps/example/src/router/guards.ts 的setupProgress()函数中// 进度条 function setupProgress(router: Router) { const { isLoading } useNProgress() router.beforeEach(() { const appSettingsStore useAppSettingsStore() if (appSettingsStore.settings.page.progress) { isLoading.value true } }) router.afterEach(() { const appSettingsStore useAppSettingsStore() if (appSettingsStore.settings.page.progress) { isLoading.value false } }) }这段代码揭示了progress配置的完整工作链路useNProgress来自vueuse/integrations/useNProgress见 guards.ts 的导入其isLoading状态驱动 NProgress 进度条组件的显示与隐藏路由跳转前beforeEach读取settings.page.progress为true时启动进度条路由跳转完成后afterEach读取同一配置为true时结束进度条。也就是说progress配置不仅控制是否显示还通过守卫钩子精确对齐了进度条的生命周期与路由切换过程——跳转开始时加载、跳转结束时收起与 SPA 路由导航天然同步。3.3 进度条样式与可视化面板开关进度条外观样式由应用侧样式表定义见 apps/example/src/assets/styles/nprogress.css通过 guards.ts 在路由模块顶部引入包含#nprogress主容器、.bar进度条以及旋转 spinner 的动画定义。此外框架在应用配置面板中提供了进度条的可视化开关。查看 apps/example/src/layouts/components/AppSetting/index.vueFaSwitch v-modelappSettingsStore.settings.page.progress /该开关与settings.page.progress双向绑定意味着开发者既可以静态配置也可以在运行时通过应用配置面板实时切换进度条开关生产环境建议按框架提示关闭该配置面板。四、快捷键hotkeys页面相关快捷键是提升后台操作效率的重要能力。类型boolean默认值true说明控制是否启用页面相关的快捷键功能4.1 常见配置禁用快捷键page: { hotkeys: false, }4.2 源码现状框架热键系统当前仓库的热键能力由独立的packages/hotkeys包承载。内置快捷键注册表定义在 packages/hotkeys/src/registry.ts其中与页面直接相关的内置快捷键为pageReload: page.reload,该注册表文件头部还明确了热键系统的维护约定新增框架内建快捷键应优先在注册表中定义而非在业务组件里写死键位字符串配置类开关尽量写入enabled/help.visible中避免帮助面板与真实行为不一致。页面刷新快捷键的实际行为注册在 apps/example/src/layouts/index.vueuseHotkeyBindings({ system.info.open: () { eventBus.emit(global-system-info-open) }, page.reload: () { mainPage.reload() }, })按下注册表中的page.reload键位时会调用mainPage.reload()完成当前页面的刷新操作。应用侧的热键编排入口在 apps/example/src/hotkeys/index.ts通过createHotkeys创建其getContext会把应用设置注入热键上下文const appHotkeys createHotkeys({ extendIds: EXT_HOTKEY_ID, extendGlobalHotkeyBindings, extendScopedHotkeyBindings, getContext: () ({ settings: useAppSettingsStore().settings, }), })业务侧如需扩展自定义快捷键可参照 apps/example/src/hotkeys/extend.ts 中注释给出的示例如demoOpen: demo.open、commandj / ctrlj键位、通过enabled与help.visible结合settings控制开关按satisfies HotkeyBindingExtendHotkeyId[]的约束补充绑定即可。需要说明的是技能文档中的page.hotkeys与当前源码中menu.hotkeys、tabbar.hotkeys属于同一设计体系即某配置域 hotkeys 布尔开关控制对应场景快捷键启停但在当前PageSettings类型中尚未包含hotkeys字段。若你的目标版本支持该字段配置方式即为上文禁用快捷键所示若类型定义缺失可在应用侧扩展类型后再使用。五、完整示例一次配置全部三项技能文档给出的page完整配置示例page: { transitionMode: fade, progress: true, hotkeys: true, }在此基础上结合仓库 apps/example/src/settings.ts 的真实用法它通过setSettings({ ... })包裹并仅写出自定义项一份完整的应用配置可以这样组织import { setSettings } from fantastic-admin/settings export default setSettings({ // ... 其他配置域 page: { transitionMode: slide-right, // 页面切换时向右滑动 progress: true, // 显示路由载入进度条 hotkeys: true, // 启用页面相关快捷键 }, })六、配置编写要点与排查建议只写差异项setSettings会深度合并 packages/settings/src/default.ts 的默认值与默认值相同的配置无需写出让settings.ts保持精简、突出项目定制内容以类型定义为准填写page配置前先对照 packages/settings/src/types.ts 的PageSettings接口确认字段是否可用避免写入未定义字段引发类型错误进度条开关有可视化入口progress既可在settings.ts静态配置也可通过应用配置面板中的FaSwitch运行时切换见 AppSetting/index.vue生产环境应关闭该面板快捷键扩展遵循注册表约定新增页面快捷键优先在 packages/hotkeys/src/registry.ts 中定义 id 与展示元数据再在应用层通过useHotkeyBindings注册 handler业务扩展参考 extend.ts 的示例模板动画与进度条的分工切换动画负责页面进入/离开的视觉过渡进度条负责路由加载时长的反馈二者相互独立、可分别配置共同构成完整的路由切换体验。七、小结页面设置page是 Fantastic-admin 中直接决定路由切换体验的配置域transitionMode定义页面过渡动画的方向与风格progress控制基于 NProgress 的路由载入进度条由路由守卫 guards.ts 精确驱动hotkeys负责页面级快捷键的启停。理解settings.ts→setSettings→ 深度合并默认值 → 各消费方路由守卫、布局组件、热键注册表读取的完整链路后你就可以像配置其他配置域一样用最少的代码把页面体验调整到项目需要的形态。赞分享前端AI 技能【免费下载链接】basic⭐⭐⭐⭐⭐ 面向 AI 编程的管理系统框架兼容PC、移动端。AI-oriented management system framework, compatible with PC and mobile device.项目地址https://gitcode.com/GitHub_Trending/ba/basic点击查看免费下载相关推荐Telegraf 的 Fritzbox Smarthome 输入插件采集 FRITZ! 路由器智能家居设备状态Telegraf 的 Fritzbox Smarthome 输入插件采集 FRITZ! 路由器智能家居设备状态 导读 inputs.fritzbox_smar前端AI 技能Sunshine 游戏串流服务器把 PC 游戏串到电视和手机上零基础上手低延迟串流Sunshine 游戏串流服务器把 PC 游戏串到电视和手机上零基础上手低延迟串流 Sunshine 是一款自托管的开源游戏串流服务器装在你自己的电脑上音视频后端Fantastic-admin 框架设置完全指南从 settings.ts 配置水印、主题、菜单与工具栏Fantastic admin 框架设置完全指南从 settings.ts 配置水印、主题、菜单与工具栏 导读 本文以 Fantastic admin 框架的前端AI 技能上一篇简单三步如何将B站m4s缓存视频转换为通用MP4格式下一篇3步解决Windows经典游戏兼容性问题DDrawCompat完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考