From f4a24ef4171f1d477a50c723aeaadf66823fe686 Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Fri, 31 Dec 2021 13:06:37 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=9D=A2=E5=8C=85=E5=B1=91=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E5=92=8C=E5=BC=B9=E7=AA=97=E6=8B=96=E6=8B=BD=E5=90=8E?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.production                               |  4 +-
 package.json                                  |  2 +-
 src/App.vue                                   |  4 +-
 src/components/a-custom-modal/index.vue       |  3 +
 src/layout/header/index.vue                   | 81 +++++++++++++++----
 src/layout/menu/menu.vue                      | 14 ++--
 src/layout/tabs/tabs-view.vue                 |  2 +-
 src/plugins/assets.ts                         |  4 +-
 src/router/asyncModules/test.ts               |  3 +-
 src/router/generator-router.tsx               | 38 ++++++---
 src/router/staticModules/dashboard.ts         |  6 +-
 src/router/staticModules/demos.ts             | 32 ++++----
 src/router/staticModules/error.ts             |  6 +-
 src/styles/common.less                        | 16 ----
 src/styles/index.less                         |  4 +
 src/styles/transition.less                    | 58 +++++++++++++
 src/utils/urlUtils.ts                         |  7 ++
 .../shared/demos/tables/lol-table/columns.tsx |  4 +-
 .../demos/tables/wzry-table/columns.tsx       |  2 +-
 types/vue-router.d.ts                         |  6 +-
 vue.config.js                                 |  4 +-
 yarn.lock                                     | 18 ++---
 22 files changed, 221 insertions(+), 97 deletions(-)
 create mode 100644 src/styles/index.less
 create mode 100644 src/styles/transition.less

diff --git a/.env.production b/.env.production
index 080e9cb33..ed85a0735 100644
--- a/.env.production
+++ b/.env.production
@@ -2,9 +2,9 @@
 ENV = 'production'
 
 # base api
-VUE_APP_BASE_API = 'http://175.24.200.3:7001/admin/'
+VUE_APP_BASE_API = 'http://buqiyuan.site:7001/admin/'
 VUE_APP_BASE_SOCKET_PATH = '/ws-api'
-VUE_APP_BASE_SOCKET_NSP = 'ws://175.24.200.3:7002/admin'
+VUE_APP_BASE_SOCKET_NSP = 'ws://buqiyuan.site:7002/admin'
 
 # 网站前缀
 BASE_URL = /vue3-antd-admin/
diff --git a/package.json b/package.json
index fe54b40d1..a7600b572 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "test prod gzip": "http-server dist --cors --gzip -c-1"
   },
   "dependencies": {
-    "@vueuse/core": "^7.4.1",
+    "@vueuse/core": "^7.4.3",
     "ant-design-vue": "3.0.0-beta.4",
     "axios": "^0.24.0",
     "core-js": "^3.20.1",
diff --git a/src/App.vue b/src/App.vue
index 303db523b..bf25504f0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,12 @@
 <template>
-  <config-provider :locale="zhCN">
+  <ConfigProvider :locale="zhCN">
     <router-view v-slot="{ Component }">
       <Suspense>
         <component :is="Component" />
       </Suspense>
     </router-view>
     <LockScreen />
-  </config-provider>
+  </ConfigProvider>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/a-custom-modal/index.vue b/src/components/a-custom-modal/index.vue
index 5e050c890..b9b1a0c30 100644
--- a/src/components/a-custom-modal/index.vue
+++ b/src/components/a-custom-modal/index.vue
@@ -6,6 +6,7 @@
         v-model:visible="visibleModel"
         :maskClosable="false"
         :getContainer="() => modalWrapRef"
+        :width="innerWidth || width"
         @ok="emit('ok')"
         @cancel="emit('cancel')"
       >
@@ -65,6 +66,7 @@
 
   const visibleModel = useVModel(props, 'visible');
   const fullscreenModel = ref(props.fullscreen);
+  const innerWidth = ref('');
 
   const cursorStyle = {
     top: 'n-resize',
@@ -234,6 +236,7 @@
             modalEl.style.width = event.clientX - iParentLeft + 'px';
             modalEl.style.height = event.clientY - iParentTop + 'px';
           }
+          innerWidth.value = modalEl.style.width;
         };
 
         const mouseup = () => {
diff --git a/src/layout/header/index.vue b/src/layout/header/index.vue
index 25ea368c1..bf45073cb 100644
--- a/src/layout/header/index.vue
+++ b/src/layout/header/index.vue
@@ -5,17 +5,21 @@
         <component :is="collapsed ? MenuUnfoldOutlined : MenuFoldOutlined" />
       </span>
       <Breadcrumb>
-        <template v-for="(routeItem, rotueIndex) in $route.matched" :key="routeItem.name">
+        <template v-for="(routeItem, rotueIndex) in menus" :key="routeItem.name">
           <Breadcrumb.Item>
-            <span>{{ getTitle(routeItem.meta.title) }}</span>
-            <template v-if="routeItem.children.length" #overlay>
-              <a-menu :selectedKeys="[$route.matched[rotueIndex + 1]?.name]" @click="clickMenuItem">
-                <template v-for="childItem in routeItem.children">
-                  <a-menu-item v-if="!childItem.meta?.hideInMenu" :key="childItem.name">
+            <span>{{ getTitle(routeItem?.meta?.title) }}</span>
+            <template v-if="routeItem?.children?.length" #overlay>
+              <Menu :selectedKeys="[menus[rotueIndex + 1]?.name]">
+                <template v-for="childItem in routeItem?.children" :key="childItem.name">
+                  <Menu.Item
+                    v-if="!childItem.meta?.hideInMenu"
+                    :key="childItem.name"
+                    @click="clickMenuItem(childItem)"
+                  >
                     <span>{{ getTitle(childItem.meta?.title) }}</span>
-                  </a-menu-item>
+                  </Menu.Item>
                 </template>
-              </a-menu>
+              </Menu>
             </template>
           </Breadcrumb.Item>
         </template>
@@ -52,7 +56,7 @@
 
 <script lang="tsx" setup>
   import { ref, computed } from 'vue';
-  import { useRouter, useRoute } from 'vue-router';
+  import { useRouter, useRoute, RouteRecordRaw } from 'vue-router';
   import {
     Layout,
     message,
@@ -92,14 +96,61 @@
   const router = useRouter();
   const route = useRoute();
   const userInfo = computed(() => userStore.userInfo);
+  const menus = computed(() => {
+    console.log('route', route, userStore.menus);
+    if (route.meta?.namePath) {
+      let children = userStore.menus;
+      const paths = route.meta?.namePath?.map((item) => {
+        const a = children.find((n) => n.name === item);
+        children = a?.children || [];
+        return a;
+      });
+      return [
+        {
+          name: '__index',
+          meta: {
+            title: '首页',
+          },
+          children: userStore.menus,
+        },
+        ...paths,
+      ];
+    }
+    return route.matched;
+  });
+
+  const findLastChild = (route?: RouteRecordRaw) => {
+    if (typeof route?.redirect === 'object') {
+      const redirectValues = Object.values(route.redirect);
+      if (route?.children?.length) {
+        const target = route.children.find((n) =>
+          redirectValues.some((m) => [n.name, n.path, n.meta?.fullPath].some((v) => v === m)),
+        );
+        return findLastChild(target);
+      }
+      return redirectValues.find((n) => typeof n === 'string');
+    } else if (typeof route?.redirect === 'string') {
+      if (route?.children?.length) {
+        const target = route.children.find((n) =>
+          [n.name, n.path, n.meta?.fullPath].some((m) => m === route?.redirect),
+        );
+        return findLastChild(target);
+      }
+      return route?.redirect;
+    }
+    return route;
+  };
 
   // 点击菜单
-  const clickMenuItem = ({ key }) => {
-    if (key === route.name) return;
-    if (/http(s)?:/.test(key)) {
-      window.open(key);
-    } else {
-      router.push({ name: key });
+  const clickMenuItem = (menuItem: RouteRecordRaw) => {
+    const lastChild = findLastChild(menuItem);
+    console.log('lastChild', menuItem, lastChild);
+
+    if (lastChild?.name === route.name) return;
+    if (/http(s)?:/.test(lastChild?.name)) {
+      window.open(lastChild?.name);
+    } else if (lastChild?.name) {
+      router.push({ name: lastChild.name });
     }
   };
 
diff --git a/src/layout/menu/menu.vue b/src/layout/menu/menu.vue
index 2f0c30654..e29596387 100644
--- a/src/layout/menu/menu.vue
+++ b/src/layout/menu/menu.vue
@@ -1,21 +1,23 @@
 <template>
-  <a-menu
+  <Menu
     v-model:open-keys="state.openKeys"
     v-model:selected-keys="state.selectedKeys"
     mode="inline"
     theme="dark"
-    :inline-collapsed="props.collapsed"
+    :collapsed="props.collapsed"
+    collapsible
     class="menu-container"
     @click="clickMenuItem"
   >
     <template v-for="item in menus" :key="item.name">
-      <menu-item :menu-info="item" />
+      <MenuItem :menu-info="item" />
     </template>
-  </a-menu>
+  </Menu>
 </template>
 
 <script setup lang="ts">
   import { reactive, computed, watch } from 'vue';
+  import { Menu } from 'ant-design-vue';
   import MenuItem from './menu-item.vue';
   import { useUserStore } from '@/store/modules/user';
   import { useRoute, useRouter } from 'vue-router';
@@ -43,9 +45,9 @@
     const meta = currentRoute.meta;
     if (meta?.activeMenu) {
       const targetMenu = getTargetMenuByActiveMenuName(meta.activeMenu);
-      return targetMenu?.meta?.keyPath ?? meta?.activeMenu;
+      return targetMenu?.meta?.namePath ?? [meta?.activeMenu];
     }
-    return currentRoute.meta?.keyPath ?? currentRoute.matched.slice(1).map((n) => n.name);
+    return currentRoute.meta?.namePath ?? currentRoute.matched.slice(1).map((n) => n.name);
   };
 
   const state = reactive({
diff --git a/src/layout/tabs/tabs-view.vue b/src/layout/tabs/tabs-view.vue
index 9de90330b..de0fbce6c 100644
--- a/src/layout/tabs/tabs-view.vue
+++ b/src/layout/tabs/tabs-view.vue
@@ -84,7 +84,7 @@
     <div class="tabs-view-content">
       <router-view v-slot="{ Component }">
         <template v-if="Component">
-          <transition name="zoom-fade" mode="out-in" appear>
+          <transition name="fade-transform" mode="out-in" appear>
             <keep-alive :include="keepAliveComponents">
               <suspense>
                 <component :is="Component" :key="route.fullPath" />
diff --git a/src/plugins/assets.ts b/src/plugins/assets.ts
index 155ed527b..005e16e8b 100644
--- a/src/plugins/assets.ts
+++ b/src/plugins/assets.ts
@@ -1,7 +1,5 @@
 import 'windi.css';
-import '@/styles/global.less';
-import '@/styles/common.less';
-import '@/styles/antdv.override.less';
+import '@/styles/index.less';
 
 // 引入静态资源
 export function setupAssets() {}
diff --git a/src/router/asyncModules/test.ts b/src/router/asyncModules/test.ts
index 37c924df3..dd73ad07b 100644
--- a/src/router/asyncModules/test.ts
+++ b/src/router/asyncModules/test.ts
@@ -5,7 +5,8 @@ const prefix = 'shared/demos/';
 export default {
   'views/shared/demos/form/rule-form.vue': getAsyncPage(`${prefix}form/rule-form/index.vue`), // 验证表单
   'views/shared/demos/icons/Iconfont.vue': getAsyncPage(`${prefix}icons/Iconfont.vue`), // 自定义图标
-  [`views/${prefix}tables/summary-table/index.vue`]: getAsyncPage(`${prefix}tables/summary-table`), // 合计表格
+  [`views/${prefix}tables/lol-table/index.vue`]: getAsyncPage(`${prefix}tables/lol-table`), // lol
+  [`views/${prefix}tables/wzry-table/index.vue`]: getAsyncPage(`${prefix}tables/wzry-table`), // wzry
   'views/shared/demos/button.vue': getAsyncPage(`${prefix}button.vue`), // 自定义按钮
   'views/shared/demos/custom-modal.vue': getAsyncPage(`${prefix}custom-modal.vue`), // 自定义模态框
 };
diff --git a/src/router/generator-router.tsx b/src/router/generator-router.tsx
index 33042a420..69912aef1 100644
--- a/src/router/generator-router.tsx
+++ b/src/router/generator-router.tsx
@@ -2,6 +2,7 @@ import { Result } from 'ant-design-vue';
 import { type RouteRecordRaw } from 'vue-router';
 import RouterView from '@/layout/routerView/index.vue';
 import { isUrl } from '@/utils/is';
+import { uniqueSlash } from '@/utils/urlUtils';
 import { constantRouterComponents } from '@/router/asyncModules';
 import NotFound from '@/views/shared/error/404.vue';
 import router, { routes } from '.';
@@ -16,20 +17,20 @@ const endRoutes: RouteRecordRaw[] = [...shared, errorRoutes, notFound];
 export function filterAsyncRoute(
   routes: API.Menu[],
   parentRoute: API.Menu | null = null,
-  lastKeyPath: string[] = [],
+  lastNamePath: string[] = [],
 ): RouteRecordRaw[] {
   return routes
     .filter((item) => item.type !== 2 && item.isShow && item.parentId == parentRoute?.id)
     .map((item) => {
       const { router, viewPath, name, icon, keepalive } = item;
       let fullPath = '';
-      const pathPrefix = lastKeyPath.slice(-1)[0] || '';
+      const pathPrefix = lastNamePath.slice(-1)[0] || '';
       if (isUrl(router)) {
         fullPath = router;
       } else {
         fullPath = router.startsWith('/') ? router : '/' + router;
         fullPath = router.startsWith(pathPrefix) ? fullPath : pathPrefix + fullPath;
-        fullPath = [...new Set(fullPath.split('/'))].join('/');
+        fullPath = [...new Set(uniqueSlash(fullPath).split('/'))].join('/');
       }
       let realRoutePath = router;
       if (parentRoute) {
@@ -48,14 +49,14 @@ export function filterAsyncRoute(
           title: name,
           perms: [],
           icon: icon,
-          keyPath: lastKeyPath.concat(fullPath),
+          namePath: lastNamePath.concat(fullPath),
           keepAlive: keepalive,
         },
       };
 
       if (item.type === 0) {
         // 如果是目录
-        const children = filterAsyncRoute(routes, item, lastKeyPath.concat(fullPath));
+        const children = filterAsyncRoute(routes, item, lastNamePath.concat(fullPath));
         if (children?.length) {
           route.component = RouterView;
           route.children = children;
@@ -100,7 +101,8 @@ export const generatorDynamicRouter = (asyncMenus: API.Menu[]) => {
     const routeList = filterAsyncRoute(asyncMenus);
     const layout = routes.find((item) => item.name == 'Layout')!;
     // console.log(routeList, '根据后端返回的权限路由生成');
-    generatorKeyPath(common);
+    // 给公共路由添加namePath
+    generatorNamePath(common);
     const menus = [...common, ...routeList];
     layout.children = menus;
     const removeRoute = router.addRoute(layout);
@@ -129,19 +131,31 @@ export const generatorDynamicRouter = (asyncMenus: API.Menu[]) => {
 
 /**
  * 主要方便于控制a-menu的open-keys，即控制左侧菜单应当展开哪些菜单
- * @param {RouteRecordRaw[]} routes 需要添加keyPath的路由
- * @param {string[]} keyPath
+ * @param {RouteRecordRaw[]} routes 需要添加namePath的路由
+ * @param {string[]} namePath
  */
-export const generatorKeyPath = (routes: RouteRecordRaw[], keyPath?: string[]) => {
+export const generatorNamePath = (
+  routes: RouteRecordRaw[],
+  namePath?: string[],
+  parent?: RouteRecordRaw,
+) => {
   routes.forEach((item) => {
     if (item.children?.length) {
       if (item.meta && typeof item.name === 'string') {
-        item.meta.keyPath = Array.isArray(keyPath) ? keyPath.concat(item.name) : [item.name];
-        generatorKeyPath(item.children, item.meta.keyPath);
+        item.meta.namePath = Array.isArray(namePath) ? namePath.concat(item.name) : [item.name];
+        item.meta.fullPath = parent?.meta?.fullPath
+          ? [parent.meta.fullPath, item.path].join('/')
+          : item.path;
+        item.meta.fullPath = uniqueSlash(item.meta.fullPath);
+        generatorNamePath(item.children, item.meta.namePath, item);
       }
     } else {
       if (item.meta && typeof item.name === 'string') {
-        item.meta.keyPath = Array.isArray(keyPath) ? keyPath.concat(item.name) : [item.name];
+        item.meta.namePath = Array.isArray(namePath) ? namePath.concat(item.name) : [item.name];
+        item.meta.fullPath = parent?.meta?.fullPath
+          ? [parent.meta.fullPath, item.path].join('/')
+          : item.path;
+        item.meta.fullPath = uniqueSlash(item.meta.fullPath);
       }
     }
   });
diff --git a/src/router/staticModules/dashboard.ts b/src/router/staticModules/dashboard.ts
index 417dfff64..0e7920c17 100644
--- a/src/router/staticModules/dashboard.ts
+++ b/src/router/staticModules/dashboard.ts
@@ -1,12 +1,12 @@
 import { type RouteRecordRaw } from 'vue-router';
 import RouterView from '@/layout/routerView/index.vue';
 
-const routeName = 'dashboard';
+const moduleName = 'dashboard';
 
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/dashboard',
-    name: routeName,
+    name: moduleName,
     redirect: '/dashboard/welcome',
     component: RouterView,
     meta: {
@@ -16,7 +16,7 @@ const routes: Array<RouteRecordRaw> = [
     children: [
       {
         path: 'welcome',
-        name: `${routeName}-welcome`,
+        name: `${moduleName}-welcome`,
         meta: {
           title: '首页',
           icon: 'icon-shouye',
diff --git a/src/router/staticModules/demos.ts b/src/router/staticModules/demos.ts
index 9e40491ae..e6789003c 100644
--- a/src/router/staticModules/demos.ts
+++ b/src/router/staticModules/demos.ts
@@ -1,13 +1,13 @@
 import { type RouteRecordRaw } from 'vue-router';
 import RouterView from '@/layout/routerView/index.vue';
 
-const routeName = 'demos';
+const moduleName = 'demos';
 
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/demos',
-    name: routeName,
-    redirect: '/demos/custom-a-custom-modal',
+    name: moduleName,
+    redirect: { name: `${moduleName}-custom-modal` },
     component: RouterView,
     meta: {
       title: 'demo演示',
@@ -16,7 +16,7 @@ const routes: Array<RouteRecordRaw> = [
     children: [
       {
         path: 'custom-a-custom-modal',
-        name: `${routeName}-custom-modal`,
+        name: `${moduleName}-custom-modal`,
         meta: {
           title: '自定义模态框',
           icon: 'icon-zhuomian',
@@ -29,7 +29,7 @@ const routes: Array<RouteRecordRaw> = [
       },
       {
         path: 'button',
-        name: `${routeName}-button`,
+        name: `${moduleName}-button`,
         meta: {
           title: '按钮的扩展',
           icon: 'icon-zhuomian',
@@ -40,18 +40,18 @@ const routes: Array<RouteRecordRaw> = [
       },
       {
         path: 'form',
-        name: `${routeName}-form`,
+        name: `${moduleName}-form`,
         meta: {
           title: '表单演示',
           icon: 'icon-zhuomian',
           keepAlive: true,
         },
-        redirect: { name: `${routeName}-form-rule` },
+        redirect: { name: `${moduleName}-form-basic` },
         component: RouterView,
         children: [
           {
             path: 'basic',
-            name: `${routeName}-form-basic`,
+            name: `${moduleName}-form-basic`,
             meta: {
               title: '基本表单',
               icon: 'icon-zhuomian',
@@ -64,7 +64,7 @@ const routes: Array<RouteRecordRaw> = [
           },
           {
             path: 'rule',
-            name: `${routeName}-form-rule`,
+            name: `${moduleName}-form-rule`,
             meta: {
               title: '验证表单',
               icon: 'icon-zhuomian',
@@ -79,18 +79,18 @@ const routes: Array<RouteRecordRaw> = [
       },
       {
         path: 'table',
-        name: `${routeName}-table`,
+        name: `${moduleName}-table`,
         meta: {
           title: '表格演示',
           icon: 'icon-zhuomian',
           keepAlive: true,
         },
-        redirect: { name: `${routeName}-table-wzry` },
+        redirect: { name: `${moduleName}-table-wzry` },
         component: RouterView,
         children: [
           {
             path: 'wzry',
-            name: `${routeName}-wzry-table`,
+            name: `${moduleName}-table-wzry`,
             meta: {
               title: '王者荣耀',
               icon: 'icon-zhuomian',
@@ -103,7 +103,7 @@ const routes: Array<RouteRecordRaw> = [
           },
           {
             path: 'lol',
-            name: `${routeName}-lol-table`,
+            name: `${moduleName}-table-lol`,
             meta: {
               title: '英雄联盟',
               icon: 'icon-zhuomian',
@@ -116,13 +116,13 @@ const routes: Array<RouteRecordRaw> = [
           },
           {
             path: 'lol/:id',
-            name: `${routeName}-lol-info-table`,
+            name: `${moduleName}-table-lol-info`,
             meta: {
               title: '英雄详情',
               icon: 'icon-zhuomian',
               hideInMenu: true,
               keepAlive: true,
-              activeMenu: `${routeName}-lol-table`,
+              activeMenu: `${moduleName}-table-lol`,
             },
             component: () =>
               import(
@@ -133,7 +133,7 @@ const routes: Array<RouteRecordRaw> = [
       },
       {
         path: 'icons',
-        name: `${routeName}-icons`,
+        name: `${moduleName}-icons`,
         meta: {
           title: '自定义图标',
           icon: 'icon-zhuomian',
diff --git a/src/router/staticModules/error.ts b/src/router/staticModules/error.ts
index 89d0fb41f..d858a9e40 100644
--- a/src/router/staticModules/error.ts
+++ b/src/router/staticModules/error.ts
@@ -1,6 +1,6 @@
 import RouterView from '@/layout/routerView/index.vue';
 
-const routeName = 'error';
+const moduleName = 'error';
 
 export const notFound = {
   path: '/:pathMatch(.*)*',
@@ -11,7 +11,7 @@ export const notFound = {
 
 export const errorRoutes = {
   path: '/error',
-  name: routeName,
+  name: moduleName,
   redirect: '/error/404',
   component: RouterView,
   meta: {
@@ -22,7 +22,7 @@ export const errorRoutes = {
   children: [
     {
       path: '404',
-      name: `${routeName}-404`,
+      name: `${moduleName}-404`,
       meta: {
         title: '404',
         icon: 'UserOutlined',
diff --git a/src/styles/common.less b/src/styles/common.less
index f2872a1b1..e289a9311 100644
--- a/src/styles/common.less
+++ b/src/styles/common.less
@@ -25,19 +25,3 @@
 *::-webkit-scrollbar-thumb:hover {
   background-color: #bbb;
 }
-
-/* router view transition */
-.zoom-fade-enter-active,
-.zoom-fade-leave-active {
-  transition: transform 0.35s, opacity 0.28s ease-in-out;
-}
-
-.zoom-fade-enter-from {
-  opacity: 0;
-  transform: scale(0.97);
-}
-
-.zoom-fade-leave-to {
-  opacity: 0;
-  transform: scale(1.03);
-}
diff --git a/src/styles/index.less b/src/styles/index.less
new file mode 100644
index 000000000..9615ea232
--- /dev/null
+++ b/src/styles/index.less
@@ -0,0 +1,4 @@
+@import './global.less';
+@import './transition.less';
+@import './common.less';
+@import './antdv.override.less';
diff --git a/src/styles/transition.less b/src/styles/transition.less
new file mode 100644
index 000000000..229b11627
--- /dev/null
+++ b/src/styles/transition.less
@@ -0,0 +1,58 @@
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all 0.5s;
+}
+
+.breadcrumb-enter-from,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 0.5s;
+}
+
+.fade-transform-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* router view transition */
+.zoom-fade-enter-active,
+.zoom-fade-leave-active {
+  transition: transform 0.35s, opacity 0.28s ease-in-out;
+}
+
+.zoom-fade-enter-from {
+  opacity: 0;
+  transform: scale(0.97);
+}
+
+.zoom-fade-leave-to {
+  opacity: 0;
+  transform: scale(1.03);
+}
diff --git a/src/utils/urlUtils.ts b/src/utils/urlUtils.ts
index f03166cdb..094631ce9 100644
--- a/src/utils/urlUtils.ts
+++ b/src/utils/urlUtils.ts
@@ -22,3 +22,10 @@ export function setObjToUrlParams(baseUrl: string, obj: object): string {
   }
   return url;
 }
+
+/**
+ * 将路径中重复的正斜杆替换成单个斜杆隔开的字符串
+ * @param path 要处理的路径
+ * @returns {string} 将/去重后的结果
+ */
+export const uniqueSlash = (path: string) => path.replace(/(?<!:)\/{2,}/g, '/');
diff --git a/src/views/shared/demos/tables/lol-table/columns.tsx b/src/views/shared/demos/tables/lol-table/columns.tsx
index 3ad710a1e..bd923ec42 100644
--- a/src/views/shared/demos/tables/lol-table/columns.tsx
+++ b/src/views/shared/demos/tables/lol-table/columns.tsx
@@ -11,7 +11,7 @@ export const columns: TableColumn[] = [
     hideInSearch: true,
     dataIndex: 'avatar',
     bodyCell: ({ record }) => (
-      <ImagePreview src={record.avatar} preview={{ src: record.posters }} />
+      <ImagePreview src={record.avatar} preview={{ src: record.posters }} key={record.avatar} />
     ),
   },
   {
@@ -46,7 +46,7 @@ export const columns: TableColumn[] = [
     actions: ({ record }) => [
       {
         label: '查看详情',
-        onClick: () => router.push({ name: 'demos-lol-info-table', params: { id: record.heroId } }),
+        onClick: () => router.push({ name: 'demos-table-lol-info', params: { id: record.heroId } }),
       },
     ],
   },
diff --git a/src/views/shared/demos/tables/wzry-table/columns.tsx b/src/views/shared/demos/tables/wzry-table/columns.tsx
index d13273ced..8b3f06f7b 100644
--- a/src/views/shared/demos/tables/wzry-table/columns.tsx
+++ b/src/views/shared/demos/tables/wzry-table/columns.tsx
@@ -10,7 +10,7 @@ export const columns: TableColumn[] = [
     hideInSearch: true,
     dataIndex: 'faceimg',
     bodyCell: ({ record }) => (
-      <ImagePreview src={record.faceimg} preview={{ src: record.heroimg }} />
+      <ImagePreview src={record.faceimg} preview={{ src: record.heroimg }} key={record.faceimg} />
     ),
   },
   {
diff --git a/types/vue-router.d.ts b/types/vue-router.d.ts
index 6076b28fe..509cd75f7 100644
--- a/types/vue-router.d.ts
+++ b/types/vue-router.d.ts
@@ -15,8 +15,10 @@ declare module 'vue-router' {
     perms?: PermissionType[];
     /** 是否需要缓存 */
     keepAlive?: boolean;
-    /** 当前路由keypath */
-    keyPath?: string[];
+    /** 当前路由namePath 祖先name集合 */
+    namePath?: string[];
+    /** 当前路由所在的完整路径 */
+    fullPath?: string;
     /** 是否固定在标签栏 */
     affix?: boolean;
     /** 菜单图标 */
diff --git a/vue.config.js b/vue.config.js
index b1463da9b..e2e355dcd 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -167,7 +167,7 @@ module.exports = defineConfig({
       // },
       '^/api': {
         // target: process.env.VUE_APP_API_URL,
-        target: 'http://175.24.200.3:7001',
+        target: 'http://buqiyuan.site:7001',
         changeOrigin: true,
         logLevel: 'debug',
         pathRewrite: {
@@ -175,7 +175,7 @@ module.exports = defineConfig({
         },
       },
       '/ws-api': {
-        target: 'ws://175.24.200.3:7002',
+        target: 'ws://buqiyuan.site:7002',
         changeOrigin: true, //是否允许跨域
         ws: true,
       },
diff --git a/yarn.lock b/yarn.lock
index 8141f439f..62e2e8274 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1932,18 +1932,18 @@
   resolved "https://registry.npm.taobao.org/@vue/web-component-wrapper/download/@vue/web-component-wrapper-1.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fweb-component-wrapper%2Fdownload%2F%40vue%2Fweb-component-wrapper-1.3.0.tgz#b6b40a7625429d2bd7c2281ddba601ed05dc7f1a"
   integrity sha1-trQKdiVCnSvXwigd26YB7QXcfxo=
 
-"@vueuse/core@^7.4.1":
-  version "7.4.1"
-  resolved "https://registry.npmmirror.com/@vueuse/core/download/@vueuse/core-7.4.1.tgz#81ede3f67dfd58af8284c910ac2fee25458892c6"
-  integrity sha512-8UeLPCAieeQLXFHF1/28SIEK6ILLPb/4hp03hR+xkXF00gB/YUp0CEVcRAL9uQ8HTZa3S2T/jTISMc1ZjilM0A==
+"@vueuse/core@^7.4.3":
+  version "7.4.3"
+  resolved "https://registry.npmmirror.com/@vueuse/core/download/@vueuse/core-7.4.3.tgz#cf5b616605c6d9641715889c462d31da36226e11"
+  integrity sha512-OflPLlQ7eqaDJgKYw9DpRCbtfpkFkg1EqHFq7CFrbIEElB39wIfB9ccNypCar8e5KRDrAbOJLIOOvDZO6aC2Gg==
   dependencies:
-    "@vueuse/shared" "7.4.1"
+    "@vueuse/shared" "7.4.3"
     vue-demi "*"
 
-"@vueuse/shared@7.4.1":
-  version "7.4.1"
-  resolved "https://registry.npmmirror.com/@vueuse/shared/download/@vueuse/shared-7.4.1.tgz#0aa090147fbd66ba56334ada1ffa2dafab815c1b"
-  integrity sha512-Pzb7XoHIcgPwwBJ5Ow9lZb0HTDyaLDV3pgxKauPGTMN9qvEylG06kUG+VTjJXkPsRtiGu46di8XyFeMw2dongA==
+"@vueuse/shared@7.4.3":
+  version "7.4.3"
+  resolved "https://registry.npmmirror.com/@vueuse/shared/download/@vueuse/shared-7.4.3.tgz#59ef90ea27a1ee4d08e001be293c821849252f0c"
+  integrity sha512-tNOCbpD3uZyzxNuw2GX5LTVkMB//IZ7GS452F7TwlY07aIoGjPgixi2Yfk/xSR4CcC9iU56zprZW33aEGj1O1Q==
   dependencies:
     vue-demi "*"