fix: 解决路由按钮边框显示异常的问题 (#2196)

frontend/src/App.vue

@@ -1,6 +1,6 @@
 <template>
     <el-config-provider :locale="i18nLocale" :button="config" size="default">
-        <router-view v-if="isRouterAlive"></router-view>
+        <router-view v-if="isRouterAlive" />
     </el-config-provider>
 </template>
 
@@ -17,17 +17,17 @@ const config = reactive({
     autoInsertSpace: false,
 });
 
-const i18nLocale = computed((): any => {
-    if (globalStore.language && globalStore.language == 'zh') return zhCn;
-    if (globalStore.language == 'en') return en;
-    return '';
+const i18nLocale = computed(() => {
+    if (globalStore.language === 'zh') return zhCn;
+    if (globalStore.language === 'en') return en;
+    return zhCn;
 });
 
-let isRouterAlive = ref(true);
+const isRouterAlive = ref(true);
 
 const reload = () => {
     isRouterAlive.value = false;
-    nextTick(function () {
+    nextTick(() => {
         isRouterAlive.value = true;
     });
 };

frontend/src/api/helper/axios-cancel.ts

@@ -1,5 +1,5 @@
 import axios, { AxiosRequestConfig, Canceler } from 'axios';
-import { isFunction } from '@/utils/is/index';
+import { isFunction } from '@vueuse/core';
 import qs from 'qs';
 
 // * 声明一个 Map 用于存储每个请求的标识 和 取消函数
@@ -39,7 +39,7 @@ export class AxiosCanceler {
         if (pendingMap.has(url)) {
             // 如果在 pending 中存在当前请求标识，需要取消当前请求，并且移除
             const cancel = pendingMap.get(url);
-            cancel && cancel();
+            isFunction(cancel) && cancel();
             pendingMap.delete(url);
         }
     }
@@ -49,7 +49,7 @@ export class AxiosCanceler {
      */
     removeAllPending() {
         pendingMap.forEach((cancel) => {
-            cancel && isFunction(cancel) && cancel();
+            isFunction(cancel) && cancel();
         });
         pendingMap.clear();
     }

frontend/src/components/router-button/index.vue

@@ -8,7 +8,7 @@
                 size="large"
                 :key="index"
             >
-                <el-badge :value="button.count" class="item" v-if="button.count > 0" is-dot>
+                <el-badge :value="button.count" v-if="button.count" is-dot>
                     <span>{{ button.label }}</span>
                 </el-badge>
             </el-radio-button>
@@ -24,13 +24,12 @@ defineOptions({ name: 'RouterButton' });
 
 const props = defineProps({
     buttons: {
-        type: Array,
+        type: Array<RouterButton>,
         required: true,
-        count: Number,
     },
 });
 
-const buttonArray: any = computed(() => {
+const buttonArray = computed(() => {
     return props.buttons;
 });
 
@@ -44,30 +43,21 @@ const routerToName = (name: string) => {
 };
 
 const handleChange = (label: string) => {
-    buttonArray.value.forEach((btn: RouterButton) => {
-        if (btn.label == label) {
-            if (btn.path) {
-                routerToPath(btn.path);
-            } else if (btn.name) {
-                routerToName(btn.name);
-            }
-            activeName.value = btn.label;
-            return;
-        }
-    });
+    const btn = buttonArray.value.find((btn) => btn.label === label);
+    if (!btn) return;
+    if (btn.path) routerToPath(btn.path);
+    else if (btn.name) routerToName(btn.name);
+    activeName.value = btn.label;
 };
 
 onMounted(() => {
-    const nowPath = router.currentRoute.value.path;
-    if (buttonArray.value.length > 0) {
+    if (buttonArray.value.length) {
         let isPathExist = false;
-        buttonArray.value.forEach((btn: RouterButton) => {
-            if (btn.path == nowPath) {
-                isPathExist = true;
-                activeName.value = btn.label;
-                return;
-            }
-        });
+        const btn = buttonArray.value.find((btn) => btn.path === router.currentRoute.value.path);
+        if (btn) {
+            isPathExist = true;
+            activeName.value = btn.label;
+        }
         if (!isPathExist) {
             activeName.value = buttonArray.value[0].label;
         }
@@ -77,32 +67,22 @@ onMounted(() => {
 
 <style lang="scss">
 .router_card {
-    --el-card-border-radius: 8px;
     --el-card-padding: 0;
-    padding: 0px;
-    padding-bottom: 2px;
-    padding-top: 2px;
 }
+
 .router_card_button {
-    margin-left: 2px;
     .el-radio-button__inner {
         min-width: 100px;
         height: 100%;
-        border: 0 !important;
+        background-color: var(--panel-button-active) !important;
+        box-shadow: none !important;
+        border: 2px solid transparent !important;
     }
 
     .el-radio-button__original-radio:checked + .el-radio-button__inner {
-        border-radius: 3px;
         color: $primary-color;
-        background-color: var(--panel-button-active);
-        box-shadow: 0 0 0 2px $primary-color !important;
-    }
-
-    .el-radio-button:first-child .el-radio-button__inner {
-        border-radius: 3px;
-        color: $primary-color;
-        background-color: var(--panel-button-active);
-        box-shadow: 0 0 0 2px $primary-color !important;
+        border-color: $primary-color !important;
+        border-radius: 4px;
     }
 }
 </style>

frontend/src/main.ts

@@ -9,7 +9,7 @@ import '@/styles/style.css';
 
 import directives from '@/directives/index';
 import router from '@/routers/index';
-import I18n from '@/lang/index';
+import i18n from '@/lang/index';
 import pinia from '@/store/index';
 import SvgIcon from './components/svg-icon/svg-icon.vue';
 import Components from '@/components';
@@ -21,14 +21,14 @@ const app = createApp(App);
 app.component('SvgIcon', SvgIcon);
 app.use(ElementPlus);
 
-app.use(Fit2CloudPlus, { locale: I18n.global.messages.value[localStorage.getItem('lang') || 'zh'] });
+app.use(Fit2CloudPlus, { locale: i18n.global.messages.value[localStorage.getItem('lang') || 'zh'] });
 
 Object.keys(Icons).forEach((key) => {
     app.component(key, Icons[key as keyof typeof Icons]);
 });
 
 app.use(router);
-app.use(I18n);
+app.use(i18n);
 app.use(pinia);
 app.use(directives);
 app.use(Components);

frontend/src/routers/cache-router.ts

@@ -7,11 +7,11 @@ import { routerArray } from '@/routers/router';
  * @param {Array} _cache 缓存的路由表
  * @return void
  * */
-let cacheRouter: any[] = [];
+let cacheRouter: RouteRecordName[] = [];
 const filterKeepAlive = (_route: RouteRecordRaw[], _cache: RouteRecordName[]): void => {
     _route.forEach((item) => {
         item.meta?.keepAlive && item.name && _cache.push(item.name);
-        item.children && item.children.length !== 0 && filterKeepAlive(item.children, _cache);
+        item?.children?.length && filterKeepAlive(item.children, _cache);
     });
 };
 

frontend/src/typings/global.d.ts

@@ -26,4 +26,5 @@ declare interface RouterButton {
     label: string;
     path?: string;
     name?: string;
+    count?: number;
 }