## 主题配置 - 进入系统点击右上角可实时修改主题预览效果   - 该功能主要用于预览布局效果，建议在生产环境仅为用户开放部分功能或关闭该功能 - 默认主题及配置修改文件`src/store/modules/theme.js` ```javascript // 以实际代码为准 theme: { mainTheme: "", // primary light darkmode menuTheme: "darkblue", // 侧边菜单主题 darkblue light dark black navTheme: "light", // 导航栏主题 light darkblue primary black menuWidth: 220, // 侧边菜单宽度 navType: "1", // 导航菜单展示方式 1菜单模式 2单个下拉菜单 3图标 navShowType: "app", // 下拉菜单展示方式 app图标 list列表（navType 1、3） showNavMenuIcon: true, // 是否显示图标（navType 1） fixNav: false, // 是否固定顶部导航 showFold: true, // 显示折叠菜单图标 showLogo: true, // 是否显示Logo showTags: true, // 是否显示多标签 showSearch: true, // 是否显示搜索菜单 showFooter: true, // 是否显示页脚 weakMode: false, // 色弱模式 } ``` ## Logo素材配置替换 - 需准备三种Logo图片适配各主题配置，替换文件位于`src/assets`下 - `logo-black.png`，黑色文字长方形png格式图片，亮色主题使用，建议大小比例：204*44px - `logo-white.png`，白色文字长方形png格式图片，暗色主题使用，建议大小比例：204*44px - `logo-min.png`，纯Logo正方形png格式图片，缩进侧边栏菜单使用，建议大小比例：44*44px  ## 配置首页（首页跟随顶部菜单切换） - 参考修改`src/views/home/home.vue`文件中的代码，根据当前currNav的值（系统菜单中配置的英文名name）来显示不同的页面组件 ``` javascript <div v-show="currNav=='doc'||currNav=='xboot-show'||currNav=='xpay'||currNav=='xmall'"> <h1>我是这些页面的首页</h1> </div> <div v-show="currNav=='app'"> <h1>我是XBoot Flutter App的首页，点击左侧菜单查看详情</h1> </div> ``` ## 修改Header、Footer页脚 - Header文件修改位置`src/views/main-components/header.vue` - Footer页脚文件修改位置`src/views/main-components/footer.vue`