MolanDev

Appearance

标签页系统 ​

MolanDev Cloud 提供了强大的多标签页系统，支持页面缓存、右键菜单操作、自动滚动定位等功能。

功能特性 ​

1. 多标签页管理 ​

自动记录用户访问过的页面，生成标签页，方便快速切换。

特点：

  • ✅ 自动记录访问历史
  • ✅ 支持快速切换页面
  • ✅ 鼠标滚轮滚动标签
  • ✅ 自动滚动到当前标签
  • ✅ 标签图标显示（可配置）

TODO - 标签页系统截图

建议截图： 显示多个标签页的顶部导航栏，包含首页、用户管理、角色管理等标签，当前激活标签高亮显示

2. 智能缓存系统 ​

基于 Vue 的 KeepAlive 实现页面缓存，提升用户体验。

缓存策略：

  • 访问页面时自动缓存
  • 关闭标签时清除缓存
  • 刷新标签时重新加载
  • 支持配置哪些页面需要缓存

3. 右键菜单操作 ​

右键点击标签页显示操作菜单，提供丰富的操作选项。

菜单选项：

  • 🔄 刷新当前
  • ✕ 关闭当前
  • ✕ 关闭其他
  • ← 关闭左侧
  • → 关闭右侧
  • ✕ 全部关闭

TODO - 右键菜单截图

建议截图： 右键点击标签页时弹出的上下文菜单，展示所有操作选项

配置选项 ​

1. 开启/关闭标签页 ​

javascript
setting.value.tagsView = true  // 显示标签页
setting.value.tagsView = false // 隐藏标签页

2. 标签页图标 ​

javascript
setting.value.tagsViewIcon = true  // 显示图标
setting.value.tagsViewIcon = false // 隐藏图标

3. 路由配置 ​

在路由 meta 中配置页面是否需要缓存：

javascript
{
  path: '/user/list',
  component: () => import('@/views/system/user/index.vue'),
  meta: {
    title: '用户管理',
    icon: 'ele-User',
    componentName: 'UserList',  // 组件名称，用于缓存
    cached: true                 // 是否缓存
  }
}

使用说明 ​

组件命名 ​

必须为需要缓存的组件设置 name 属性：

vue
<script setup name="UserList">
// 组件代码
</script>

鼠标滚轮滚动 ​

支持使用鼠标滚轮横向滚动标签页，当标签过多时非常方便。

TODO - 滚动效果演示

建议GIF： 录制鼠标滚轮滚动标签页的效果，展示标签页平滑横向滚动

总结 ​

MolanDev Cloud 的标签页系统提供了：

  • ✅ 多标签页管理：自动记录访问历史
  • ✅ 智能缓存：基于 KeepAlive 的页面缓存
  • ✅ 右键菜单：丰富的操作选项
  • ✅ 自动滚动：自动定位到当前标签
  • ✅ 鼠标滚轮：支持横向滚动
  • ✅ 配置灵活：支持开关、图标等配置

这为用户提供了高效便捷的多页面管理体验！