跳到主要内容

默认系统主题切换

v3.9.0 版本新增了四种默认系统主题风格，用户可以根据需求快速切换。

快速切换​

打开 src/settings/projectSetting.ts 文件，修改 menuType 属性即可切换主题：

// 修改此属性，实现默认的四个系统主题快速切换
const menuType = MenuTypeEnum.SIDEBAR;

四种主题类型​

export enum MenuTypeEnum {
  SIDEBAR = 'sidebar',        // 左侧边菜单导航风格
  MIX = 'mix',               // 顶部栏导航风格（一级菜单在顶部，二级在左侧）
  MIX_SIDEBAR = 'mix-sidebar', // 侧边折叠导航风格
  TOP_MENU = 'top-menu',      // 顶部混合导航风格
}

使用示例​

// 切换到左侧边栏
const menuType = MenuTypeEnum.SIDEBAR;

// 切换到顶部导航
const menuType = MenuTypeEnum.MIX;

// 切换到折叠侧边栏
const menuType = MenuTypeEnum.MIX_SIDEBAR;

// 切换到纯顶部菜单
const menuType = MenuTypeEnum.TOP_MENU;

修改后保存文件，刷新浏览器即可看到效果。