界面自定义
2023/9/27大约 5 分钟
🎨 界面自定义
界面自定义功能允许用户根据个人喜好调整 MediaSaber 系统的外观和布局。通过该功能，您可以更改主题模式、主题颜色、侧边栏状态以及其他界面元素，打造符合个人使用习惯的界面环境。
🚪 功能入口
界面自定义功能通过首页顶部导航栏最右侧的用户头像下拉菜单访问：
- 点击首页顶部导航栏最右侧的用户头像图标
- 在弹出的下拉菜单中选择"界面自定义"选项
- 系统将从右侧滑出界面自定义侧边栏面板
🖥️ 界面布局
界面自定义面板采用垂直布局，包含多个设置区域：
🎯 顶部操作栏
- 显示"界面自定义"标题
- 提供关闭按钮（× 图标）用于隐藏面板
⚙️ 设置区域
面板主体包含多个设置区域，每个区域针对不同的界面元素进行配置。
📋 自定义选项
🌗 主题模式
控制界面的整体明暗风格：
亮色模式
- 使用白色和浅色作为主色调
- 适合在光线充足的环境中使用
- 提供清晰的对比度
暗黑模式
- 使用深灰色和黑色作为主色调
- 减少眼部疲劳，适合夜间使用
- 节省 OLED 屏幕设备的电量
切换方法：
- 在"主题模式"区域点击相应的模式按钮
- 系统会立即应用所选主题
- 设置会自动保存并在下次访问时生效
🎨 主题颜色
提供多种主题颜色供选择，满足不同用户的审美偏好：
| 颜色选项 | 预览 | 说明 |
|---|---|---|
| 📘 蓝色 | 经典商务蓝，稳重大方 | |
| 🌊 湖绿色 | 清新自然，舒适宜人 | |
| 🟣 紫色 | 神秘优雅，富有创意 | |
| 🌿 绿色 | 生机勃勃，自然环保 | |
| 🌬️ 青色 | 清爽明亮，科技感强 | |
| 🍊 橙色 | 温暖活力，积极向上 |
选择方法：
- 在"主题颜色"区域点击喜欢的颜色圆圈
- 系统会立即应用所选颜色主题
- 主题色将应用于按钮、链接、高亮元素等界面组件
📐 侧边栏默认状态
控制左侧导航菜单的默认显示状态：
展开状态
- 侧边栏显示完整菜单文字
- 占用更多屏幕空间
- 适合大屏幕设备使用
- 更直观地展示所有功能
收缩状态
- 侧边栏仅显示图标
- 节省屏幕空间
- 适合小屏幕设备使用
- 点击图标可临时展开查看菜单文字
设置方法：
- 在"侧边栏默认状态"区域选择"展开"或"收缩"
- 设置将作为默认状态保存
- 下次访问系统时将使用该默认状态
🎴 卡片边缘样式
控制界面中卡片组件的边缘显示效果：
阴影效果
- 卡片周围显示阴影
- 提供层次感和立体效果
- 更符合 Material Design 设计规范
- 适合亮色主题
边框效果
- 卡片周围显示边框线
- 提供清晰的边界定义
- 更加简洁明了
- 适合暗黑主题
切换方法：
- 在"卡片边缘"区域选择"阴影"或"边框"
- 系统会立即应用所选样式
- 所有卡片组件都会使用该边缘样式
⚙️ 使用方法
打开自定义面板
- 在首页顶部导航栏最右侧找到用户头像图标
- 点击用户头像图标打开下拉菜单
- 在下拉菜单中选择"界面自定义"选项
- 界面自定义面板将从右侧滑出
应用设置
- 在面板中找到需要调整的设置项
- 点击相应的选项按钮
- 系统会立即应用设置并保存
关闭面板
- 点击面板顶部的关闭按钮（× 图标）
- 或者点击页面其他区域
- 面板将向右滑入隐藏
💾 设置保存
所有界面自定义设置都会自动保存：
- 设置保存在浏览器本地存储中
- 下次访问时会自动应用上次的设置
- 不同浏览器设备需要分别设置
- 设置与用户账户绑定
🔄 重置默认设置
如需恢复默认设置，可通过以下方式：
- 清除浏览器缓存和本地存储
- 使用浏览器的隐私模式访问
- 联系管理员重置账户设置
📱 响应式适配
界面自定义功能针对不同设备进行了优化：
桌面设备
- 面板宽度适中，不影响主要内容区域
- 所有设置选项完整显示
- 操作便捷，支持鼠标点击
移动设备
- 面板自动适应屏幕宽度
- 设置选项垂直排列，便于触控操作
- 关闭按钮增大，便于点击
🎯 使用建议
主题选择建议
- 工作环境：在明亮办公环境中使用亮色主题
- 夜间使用：在暗光环境中使用暗黑主题保护视力
- 个人偏好：根据个人喜好选择主题颜色
- 长时间使用：推荐使用暗黑主题减少眼部疲劳
布局优化建议
屏幕尺寸：
- 大屏幕选择展开侧边栏
- 小屏幕选择收缩侧边栏
使用习惯：
- 熟悉系统用户可选择收缩侧边栏节省空间
- 新用户建议选择展开侧边栏便于学习
视觉偏好：
- 喜欢层次感选择阴影效果
- 喜欢简洁风格选择边框效果
通过界面自定义功能，您可以打造个性化的 MediaSaber 使用体验，提高工作效率和使用舒适度。