fix: tab 样式更新以及tab replace 逻辑更新

src/assets/styles/globals.css

@@ -14,10 +14,10 @@
   --g-sidebar-logo-height: 50px;
 
   /* 标签栏高度 */
-  --g-tabbar-height: 50px;
+  --g-tabbar-height: 30px;
 
   /* 工具栏高度 */
-  --g-toolbar-height: 50px;
+  --g-toolbar-height: 30px;
 
   /* 滚动条颜色 */
   --scrollbar-color: 240 5.9% 90%;

src/layouts/components/Topbar/Tabbar/index.vue

@@ -31,7 +31,6 @@ watch(() => route, (val) => {
     tabbarStore.add(val)
     nextTick(() => {
       const index = tabbarStore.list.findIndex(item => item.tabId === activedTabId.value)
-      console.log(tabbarStore.list, activedTabId,3333)
       if (index !== -1) {
         const tabEl = tabRef.value?.find(item => Number.parseInt(item.dataset.index!) === index)
         const containerEl = tabsRef.value?.ref?.$el
@@ -183,18 +182,28 @@ onMounted(() => {
 onUnmounted(() => {
   hotkeys.unbind('alt+left,alt+right,alt+w,alt+1,alt+2,alt+3,alt+4,alt+5,alt+6,alt+7,alt+8,alt+9,alt+0')
 })
+const stripQuery = (path: string) => path.split('?')[0];
+const checkActived = (fullPath: string, activedTabId: string) => {
+  console.log(stripQuery(fullPath), stripQuery(activedTabId))
+
+  return stripQuery(fullPath) === stripQuery(activedTabId);
+}
+
 </script>
 
 <template>
   <div class="tabbar">
+    <!-- {{ tabbarStore.list }} -->
     <component :is="useSlots('tabbar-start')" />
     <div class="tabbar-container">
       <FaScrollArea ref="tabsRef" :scrollbar="false" mask horizontal gradient-color="var(--g-tabbar-bg)" class="tabs">
         <TransitionGroup ref="tabContainerRef" name="tabbar" tag="div" class="tab-container">
           <div
-            v-for="(element, index) in tabbarStore.list" :key="element.tabId"
+            v-for="(element, index) in tabbarStore.list" :key="element.fullPath"
+            :data-a="element.fullPath"
+            :data-b="activedTabId"
             ref="tabRef" :data-index="index" class="tab" :class="{
-              actived: element.tabId === activedTabId,
+              actived: checkActived(element.fullPath, activedTabId),
             }" @click="router.push(element.fullPath)"
           >
             <FaContextMenu :items="contextMenuItems(element)">

src/router/extensions.ts

@@ -2,7 +2,7 @@ import type { RouteLocationRaw, Router } from 'vue-router'
 import pinia from '@/store'
 
 function getId(router: Router) {
-  return router.currentRoute.value.fullPath
+  return router.currentRoute.value.fullPath.split('?')[0]
 }
 
 function extendPush(router: Router) {
@@ -45,8 +45,13 @@ function extendReplace(router: Router) {
     if (settingsStore.settings.tabbar.enable) {
       const tabId = getId(router)
       const tabbarStore = useTabbarStore(pinia)
+
       return originalReplace(to).then(() => {
-        tabbarStore.remove(tabId)
+        // 如果是当前页 replace 用于更新 ? page, size 等参数，则不移除当前 tab
+        if((typeof to !== 'string') && to?.path !== tabId){
+          tabbarStore.remove(tabId)
+        }
+
       })
     }
     else {

src/store/modules/tabbar.ts

@@ -19,7 +19,12 @@ export const useTabbarStore = defineStore(
         }
       })
       const meta = route.matched.at(-1)?.meta
-      const tabId = route.fullPath
+      let tabId = route.fullPath.split('?')[0]
+      // if(route.fullPath.indexOf('?') > -1){
+      //   tabId = path.split('?')[0]
+      // }else{
+      //   tabId = route.fullPath
+      // }
       if (route.name !== 'reload') {
         // 记录查找到的标签页
         const findTab = list.value.find((item) => {
@@ -46,6 +51,7 @@ export const useTabbarStore = defineStore(
     }
     // 删除指定标签页
     function remove(tabId: Tabbar.recordRaw['tabId']) {
+      console.log(tabId,3333)
       const keepName: string[] = []
       const removeName: string[] = []
       list.value.forEach((v) => {

src/views/voice-management/components/SearchForm.vue

@@ -56,7 +56,7 @@ function handleClear() {
 <template>
   <ElForm ref="formRef" :model="searchParams" inline label-width="80px">
       <ElFormItem label="名称" prop="name" label-width="120" >
-            <ElInput v-model="searchParams.name" placeholder="请输入" clearable @clear="handleClear" />
+            <ElInput v-model="searchParams.name" placeholder="请输入" clearable @clear="handleClear" style="width: 120px;" />
           </ElFormItem>
           <ElFormItem label="性别" prop="gender" label-width="120" >
             <ElSelect v-model="searchParams.gender" style="width: 120px;">