fix: ref写法优化 路由跳转逻辑优化 部分样式优化

src/components/pageTabs/PageTabs.tsx

@@ -3,13 +3,14 @@ import {
   nextTick,
   onBeforeUnmount,
   onMounted,
-  type PropType,
   ref,
+  type PropType,
   watch,
 } from 'vue';
 import { message } from 'ant-design-vue';
 import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
 import type { TabView } from '@/types';
+import { useState } from '@/hooks';
 import { renderRouteIcon } from '@/utils/routeIcon';
 import styles from './PageTabs.module.less';
 
@@ -37,24 +38,24 @@ const PageTabs = defineComponent({
   setup(props) {
     const scrollRef = ref<HTMLElement>();
     const tabItemRefs = ref<Record<string, HTMLElement | undefined>>({});
-    const showNavLeft = ref(false);
-    const showNavRight = ref(false);
+    const [showNavLeft, setShowNavLeft] = useState(false);
+    const [showNavRight, setShowNavRight] = useState(false);
 
     let resizeObserver: ResizeObserver | null = null;
 
     const updateScrollState = () => {
       const el = scrollRef.value;
       if (!el) {
-        showNavLeft.value = false;
-        showNavRight.value = false;
+        setShowNavLeft(false);
+        setShowNavRight(false);
         return;
       }
 
       const { scrollLeft, scrollWidth, clientWidth } = el;
       const canScroll = scrollWidth - clientWidth > 1;
 
-      showNavLeft.value = canScroll && scrollLeft > 1;
-      showNavRight.value = canScroll && scrollLeft + clientWidth < scrollWidth - 1;
+      setShowNavLeft(canScroll && scrollLeft > 1);
+      setShowNavRight(canScroll && scrollLeft + clientWidth < scrollWidth - 1);
     };
 
     const scrollByStep = (direction: -1 | 1) => {
@@ -92,9 +93,10 @@ const PageTabs = defineComponent({
     const setTabItemRef = (path: string, el: Element | null) => {
       if (el) {
         tabItemRefs.value[path] = el as HTMLElement;
-      } else {
-        delete tabItemRefs.value[path];
+        return;
       }
+
+      delete tabItemRefs.value[path];
     };
 
     const handleClick = (key: string) => {