feat: 在前端添加标签式导航

- default.vue 中实现了标签页的添加、切换和移除逻辑

- 更新了路由配置，使用命名路由来更好地管理标签页

-  调整了相关页面布局，以适应标签页的显示

Author: ricardo

frontend/src/layouts/default.vue

@@ -2,16 +2,16 @@
 import zhCn from "element-plus/es/locale/lang/zh-cn"
 import { HomeFilled, Tools, List, InfoFilled, Sunny, Moon, Calendar, Collection } from "@element-plus/icons-vue"
 import ContextMenu from '@imengyu/vue3-context-menu'
-import { ElMessage, type MenuItemInstance, type CardConfigContext } from "element-plus"
+import { ElMessage, type MenuItemInstance, type CardConfigContext, type TabPaneName } from "element-plus"
 import { request } from "@/api"
 
 defineOptions({
   name: "defaultLayout"
 })
 
 const themeStore = useThemeStore()
-const route = useRoute()
-const router = useRouter()
+const route = useRoute() // 当前路由实例
+const router = useRouter() // 路由器实例
 const cardConfig: CardConfigContext = {
   shadow: "always"
 }
@@ -28,6 +28,14 @@ const messageConfig = {
   plain: true
 }
 
+const activeTabName = ref("/")
+const activeMenu = ref("0")
+const openTabs = ref<TabItem[]>([])
+// 缓存已打开的tab
+const components = computed(() => {
+  return openTabs.value.map(item => item.componentName).filter(Boolean)
+})
+
 const menuItemList = [
   {
     title: "点歌板",
@@ -133,6 +141,11 @@ const closeTour = async () => {
   navSideTour.value = false
 }
 
+const updateActiveMenu = (routeName: string) => {
+  const menuItemIndex = menuItemList.findIndex(item => item.routerName == routeName)
+  activeMenu.value = menuItemIndex.toString()
+}
+
 /**
  * 跳转到指定页面
  * @param {string} name 路由的name
@@ -144,7 +157,62 @@ const goto = (name: string) => {
     return
   }
 
-  router.push({ path: name })
+  changeTab(name as TabPaneName)
+}
+
+/**
+ * 切换标签页
+ * @param name 
+ */
+const changeTab = (name: TabPaneName) => {
+  const tabName = name.toString()
+
+  const currentRouteTitle = menuItemList.find(item => item.routerName == tabName)?.title || route.path
+  let tab = openTabs.value.find(tab => tab.name === tabName)
+
+  if (!tab) {
+    tab = {
+      name: tabName,
+      title: currentRouteTitle,
+      path: tabName,
+      closable: tabName !== "/", 
+      componentName: tabName == "/" ? "home" : tabName.replaceAll('/', '')
+    }
+    openTabs.value.push(tab)
+  }
+
+  activeTabName.value = tabName
+  router.push({ path: tabName })
+  updateActiveMenu(tabName)
+} 
+
+/**
+ * 移除标签页
+ * @param {TabPaneName} targetTabName 要移除的标签页的name
+ */
+const removeTab = (targetTabName: TabPaneName) => {
+  const tabs = openTabs.value
+  const tabName = targetTabName.toString()
+  let newActiveTabName = activeTabName.value
+
+  if (newActiveTabName === tabName) {
+    tabs.forEach((tab, index) => {
+      if (tab.name === tabName) {
+        const nextTab = tabs[index + 1] || tabs[index - 1]
+        if (nextTab) {
+          newActiveTabName = nextTab.name
+        } else {
+          // 如果没有其他标签页，则回到首页
+          newActiveTabName = "/"
+        }
+      }
+    })
+  }
+
+  openTabs.value = tabs.filter(tab => tab.name !== tabName)
+  activeTabName.value = newActiveTabName
+  router.push({ path: newActiveTabName })
+  updateActiveMenu(newActiveTabName)
 }
 
 /**
@@ -225,23 +293,35 @@ const isDarktheme = computed(() => {
 })
 
 watch(isFetching, () => {
-  if(globalConfigData.value) initGlobalConfig()
+  if (globalConfigData.value) initGlobalConfig()
 }, { once: true })
+
+onMounted(() => {
+  const currentRouteTitle = menuItemList.find(item => item.routerName == route.path)?.title || route.name
+  openTabs.value.push({
+    name: route.path,
+    title: currentRouteTitle,
+    path: route.path,
+    closable: route.path !== "/",
+    componentName: route.name as string
+  })
+  activeTabName.value = route.path
+})
 </script>
 
 <template>
   <el-container class="layout-container-demo">
     <el-aside :style="asideStyle">
-      <el-menu default-active="0" :collapse="globalConfig.collapse" class="layout-aside-menu">
+      <el-menu :default-active="activeMenu" :collapse="globalConfig.collapse" class="layout-aside-menu">
         <template v-for="item, index in menuItemList" :key="index">
-          <el-menu-item :index="`${index}`" @click="goto(item.routerName)" :ref="item.ref || undefined">
+          <el-menu-item :index="index.toString()" @click="goto(item.routerName)" :ref="item.ref || undefined">
             <el-icon>
               <component :is="item.icon" />
             </el-icon>
             <template #title>{{ item.title }}</template>
           </el-menu-item>
         </template>
-        <el-menu-item ref="themeRef" @click="updateTheme">
+        <el-menu-item :index="(menuItemList.length + 1).toString()" ref="themeRef" @click="updateTheme">
           <el-icon v-if="!isDarktheme">
             <Sunny />
           </el-icon>
@@ -253,11 +333,16 @@ watch(isFetching, () => {
     </el-aside>
     <el-main @contextmenu="onContextMenu" :style="mainStyle" ref="mainRef">
       <el-config-provider :locale="zhCn" :card="cardConfig" :dialog="dialogConfig" :message="messageConfig">
-        <router-view v-slot="{ Component }">
-          <keep-alive :include="['home']">
-            <component :is="Component" />
-          </keep-alive>
-        </router-view>
+        <el-tabs v-model="activeTabName" type="card" closable @tab-remove="removeTab" @tab-change="changeTab">
+          <el-tab-pane v-for="item in openTabs" :key="item.name" :label="item.title" :name="item.name"
+            :closable="item.closable">
+            <router-view v-slot="{ Component }">
+              <keep-alive :include="components">
+                <component :is="Component" />
+              </keep-alive>
+            </router-view>
+          </el-tab-pane>
+        </el-tabs>
         <!-- 
         el-tour组件finish和close事件的的使用示例
         https://github.com/element-plus/element-plus/issues/22419 

frontend/src/pages/about/index.vue

@@ -71,3 +71,8 @@ onMounted(() => {
         </div>
     </el-card>
 </template>
+<route lang="json">
+    {
+        "name": "about"
+    }
+</route>

frontend/src/pages/changelog/index.vue

@@ -65,4 +65,9 @@ onMounted(() => {
             <div class="md-content" v-html="model.changelog"></div>
         </div>
     </el-card>
-</template>
+</template>
+<route lang="json">
+    {
+        "name": "changelog"
+    }
+</route>

frontend/src/pages/danmaku/index.vue

@@ -89,6 +89,7 @@ onMounted(() => {
 </template>
 <route lang="json">
 {
+    "name": "danmaku",
     "meta": {
         "layout": "blank"
     }

frontend/src/pages/history/index.vue

@@ -180,4 +180,9 @@ onMounted(() => {
             </el-card>
         </el-main>
     </el-container>
-</template>
+</template>
+<route lang="json">
+    {
+        "name": "history"
+    }
+</route>

frontend/src/pages/index.vue

@@ -145,7 +145,7 @@ watch(danmakuList, async () => {
 })
 
 onMounted(() => {
-    const height = window.innerHeight * 0.9
+    const height = window.innerHeight * 0.9 - 40
     chatMainRef.value?.$el.style.setProperty("overflow", "hidden")
 
     const listHeight = height * 0.8
@@ -256,3 +256,8 @@ onMounted(() => {
         </el-main>
     </el-container>
 </template>
+<route lang="json">
+    {
+        "name": "home"
+    }
+</route>

frontend/src/pages/playlist/index.vue

@@ -236,7 +236,7 @@ const nextPage = (remainDistance: number) => {
 }
 
 onMounted(() => {
-    const height = window.innerHeight * 0.9
+    const height = window.innerHeight * 0.9 - 60
     cardRef.value?.$el.style.setProperty("overflow", "hidden")
 
     const listHeight = height * 0.6
@@ -309,4 +309,9 @@ onMounted(() => {
             <add-playlist-dialog @submit="emitSubmit" ref="addPlaylistDialogRef" />
         </el-main>
     </el-container>
-</template>
+</template>
+<route lang="json">
+    {
+        "name": "playlist"
+    }
+</route>

frontend/src/pages/settings/index.vue

@@ -2,7 +2,7 @@
 import type { TabsPaneContext } from "element-plus"
 
 defineOptions({
-  name: "settings"
+    name: "settings"
 })
 
 const activeName = ref("1")
@@ -30,3 +30,8 @@ const tabClickHandle = (pane: TabsPaneContext, ev: Event) => {
     </el-main>
   </el-container>
 </template>
+<route lang="json">
+    {
+        "name": "settings"
+    }
+</route>

frontend/src/route-map.d.ts

@@ -26,50 +26,50 @@ declare module 'vue-router/auto-routes' {
    * Route name map generated by vue-router
    */
   export interface RouteNamedMap {
-    '/': RouteRecordInfo<
-      '/',
+    'home': RouteRecordInfo<
+      'home',
       '/',
       Record<never, never>,
       Record<never, never>,
       | never
     >,
-    '/about/': RouteRecordInfo<
-      '/about/',
+    'about': RouteRecordInfo<
+      'about',
       '/about',
       Record<never, never>,
       Record<never, never>,
       | never
     >,
-    '/changelog/': RouteRecordInfo<
-      '/changelog/',
+    'changelog': RouteRecordInfo<
+      'changelog',
       '/changelog',
       Record<never, never>,
       Record<never, never>,
       | never
     >,
-    '/danmaku/': RouteRecordInfo<
-      '/danmaku/',
+    'danmaku': RouteRecordInfo<
+      'danmaku',
       '/danmaku',
       Record<never, never>,
       Record<never, never>,
       | never
     >,
-    '/history/': RouteRecordInfo<
-      '/history/',
+    'history': RouteRecordInfo<
+      'history',
       '/history',
       Record<never, never>,
       Record<never, never>,
       | never
     >,
-    '/playlist/': RouteRecordInfo<
-      '/playlist/',
+    'playlist': RouteRecordInfo<
+      'playlist',
       '/playlist',
       Record<never, never>,
       Record<never, never>,
       | never
     >,
-    '/settings/': RouteRecordInfo<
-      '/settings/',
+    'settings': RouteRecordInfo<
+      'settings',
       '/settings',
       Record<never, never>,
       Record<never, never>,
@@ -90,43 +90,43 @@ declare module 'vue-router/auto-routes' {
   export interface _RouteFileInfoMap {
     'src/pages/index.vue': {
       routes:
-        | '/'
+        | 'home'
       views:
         | never
     }
     'src/pages/about/index.vue': {
       routes:
-        | '/about/'
+        | 'about'
       views:
         | never
     }
     'src/pages/changelog/index.vue': {
       routes:
-        | '/changelog/'
+        | 'changelog'
       views:
         | never
     }
     'src/pages/danmaku/index.vue': {
       routes:
-        | '/danmaku/'
+        | 'danmaku'
       views:
         | never
     }
     'src/pages/history/index.vue': {
       routes:
-        | '/history/'
+        | 'history'
       views:
         | never
     }
     'src/pages/playlist/index.vue': {
       routes:
-        | '/playlist/'
+        | 'playlist'
       views:
         | never
     }
     'src/pages/settings/index.vue': {
       routes:
-        | '/settings/'
+        | 'settings'
       views:
         | never
     }