个性化主题菜单布局

Web 管理端右上角齿轮可以打开「偏好设置」，偏好设置会以抽屉形式展示在页面右侧，并且支持实时预览。这里主要说明上线时常用的主题、菜单布局和全系统默认配置方式。

1. 打开偏好设置

在 Web 管理端任意页面，点击右上角齿轮图标进入偏好设置：

进入后右侧会打开「偏好设置」抽屉，顶部包含「外观」「布局」「快捷键」「通用」「Antd 拓展」等页签。

2. 外观配置

「外观」页签主要用于调整整体视觉风格：

常用配置说明：

配置项	作用	上线建议
浅色 / 深色 / 跟随系统	控制整体明暗模式	客户现场通常固定为「浅色」，减少不同终端展示差异
深色侧边栏	只让左侧菜单使用深色背景	如客户喜欢传统后台风格可开启
深色侧边栏子栏	混合菜单或双列菜单时的子栏深色效果	仅在对应布局下明显
深色顶栏	顶部导航栏深色效果	适合品牌色较深的客户
内置主题	快速切换默认、紫罗兰、樱花粉、柠檬黄、天蓝色、浅绿色等主题色	可根据客户 VI 选择；也可在代码中固化自定义主色
圆角、字号	调整界面细节观感	一般保持默认，避免影响表格密度

截图底部的「复制偏好设置」用于把当前已调整的偏好复制成 JSON，后续可写入前端默认配置文件。

3. 布局配置

切换到「布局」页签，可调整菜单与内容区域布局：

常用配置说明：

配置项	作用	适用场景
垂直	左侧单列菜单，顶部保留工具区	菜单层级较清晰、传统后台最常用
双列菜单	左侧一级菜单 + 二级菜单双列展示	模块很多，希望一级模块更突出时使用
水平	顶部菜单横向展示	一级菜单较少、偏门户式后台时使用
侧边导航	左侧导航更突出，适合工作台式布局	常用于固定模块入口
混合垂直	顶部一级模块 + 左侧子菜单	当前项目常用，适合模块较多的综合平台
混合双列	顶部一级模块 + 左侧双列子菜单	菜单层级较多时使用
内容全屏	隐藏常规菜单区域，突出内容	大屏、设计器、报表类页面更适合
流式 / 定宽	控制内容区宽度	管理后台一般用流式；官网类页面可定宽
显示侧边栏	控制左侧菜单显示	若关闭会更接近顶部导航/全屏内容模式

布局调整会立即在左侧页面预览。确认适合客户使用习惯后，再决定是否复制为全系统默认配置。

4. 默认仅个人生效

在偏好设置抽屉里直接调整的配置，默认写入当前浏览器本地缓存，只对当前用户、当前浏览器生效：

• 换浏览器、换电脑后不会自动同步；
• 清理浏览器缓存后可能恢复默认；
• 点击「清空缓存 & 退出登录」后会清除本地偏好；
• 其他用户不会因为当前用户调整而变化。

因此，个人临时体验可以直接在偏好设置中调整；如果客户要求所有用户登录后默认就是某一套主题和菜单布局，需要把偏好设置复制到前端默认配置文件。

5. 复制偏好设置到前端默认配置

操作步骤：

1. 点击右上角齿轮，打开「偏好设置」。
2. 在「外观」「布局」「通用」等页签中调整到客户要求的效果。
3. 点击抽屉底部「复制偏好设置」。
4. 打开 ruoyi-office-vben/apps/web-antd/src/preferences.ts。
5. 将复制出的 JSON 合并到 overridesPreferences。
6. 重新构建并发布 Web 管理端。

示例：把混合垂直布局、浅色主题、樱花粉主题色等配置固化到默认偏好中：

// ruoyi-office-vben/apps/web-antd/src/preferences.ts
export const overridesPreferences = defineOverridesPreferences({
  app: {
    accessMode: 'backend',
    name: import.meta.env.VITE_APP_TITLE,
    layout: 'mixed-nav',
    defaultHomePath: '/workspace',
  },
  theme: {
    mode: 'light',
    builtinType: 'pink',
    semiDarkHeader: false,
    semiDarkSidebar: false,
    semiDarkSidebarSub: false,
  },
  sidebar: {
    collapsed: false,
    expandOnHover: true,
    showExpandAllMenusButton: true,
  },
  tabbar: {
    showIcon: false,
    showMore: true,
    showMaximize: true,
  },
});

注意：复制出来的内容只包含相对默认值变化的字段。合并时不要误删项目已有配置，例如 app.accessMode、app.name、app.defaultHomePath、logo.source 等。

6. 重新构建与验证

修改 preferences.ts 后执行：

cd ruoyi-office-vben
pnpm build:antd

发布后建议用无痕窗口或清空浏览器缓存验证，避免旧的本地偏好覆盖新默认值。若验证账号之前点过「复制偏好设置」或调整过主题，也建议先点击「清空缓存 & 退出登录」后重新登录验证。