fix(layout): transition component memory leak

buqiyuan · Mar 7, 2024 · 19eda95 · 19eda95
1 parent 69ce11c
commit 19eda95
Show file tree

Hide file tree

Showing 13 changed files with 68 additions and 58 deletions.
diff --git a/package.json b/package.json
@@ -52,7 +52,7 @@
     "nprogress": "~1.0.0-1",
     "pinia": "~2.1.7",
     "qiniu-js": "^3.4.2",
-    "qs": "~6.11.2",
+    "qs": "~6.12.0",
     "sortablejs": "~1.15.2",
     "tinymce": "^6.8.3",
     "vue": "~3.4.21",

diff --git a/packages/vite-plugin-msw/src/browser/enableMocking.ts b/packages/vite-plugin-msw/src/browser/enableMocking.ts
@@ -29,7 +29,9 @@ export const enableMocking = async (handlers: HttpHandler[], options?: StartOpti
   );
   const worker = setupWorker(...handlers);
 
-  globalThis.__msw_worker = worker;
+  if (import.meta.env.DEV) {
+    globalThis.__msw_worker = worker;
+  }
 
   const serviceWorkerRegistration = await worker.start({
     onUnhandledRequest: 'bypass',

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/basic/icon/Icon.vue b/src/components/basic/icon/Icon.vue
@@ -32,7 +32,6 @@
   const handleIconUpdated = (vnode: VNode) => {
     const title = attrs.title;
     if (vnode.el && title) {
-      globalThis.sss = vnode.el;
       vnode.el.insertAdjacentHTML?.('afterbegin', `<title>${title}</title>`);
     }
   };

diff --git a/src/components/core/dynamic-table/src/components/table-action.vue b/src/components/core/dynamic-table/src/components/table-action.vue
@@ -16,7 +16,7 @@
 
 <script lang="tsx" setup>
   import { computed, ref, h, type FunctionalComponent } from 'vue';
-  import { debounce, isFunction, isObject, isString } from 'lodash-es';
+  import { isFunction, isObject, isString } from 'lodash-es';
   import { Popconfirm, Tooltip, type TooltipProps } from 'ant-design-vue';
   import type { ActionItem } from '../types/tableAction';
   import type { CustomRenderParams } from '../types/column';
@@ -89,7 +89,7 @@
         const onClick = item.onClick;
 
         if (isFunction(onClick) && !hasClickFnFlag(onClick)) {
-          item.onClick = debounce(async () => {
+          item.onClick = async () => {
             const callbackRes = onClick(props.columnParams);
 
             if (isPromise(callbackRes)) {
@@ -99,7 +99,7 @@
                 loadingMap.value.delete(key);
               });
             }
-          });
+          };
           setClickFnFlag(item.onClick);
         }
         if (item.icon) {

diff --git a/src/components/core/schema-form/src/hooks/useFormState.ts b/src/components/core/schema-form/src/hooks/useFormState.ts
@@ -15,19 +15,19 @@ export type useFormStateParams = {
 };
 
 export const useFormState = ({ props, attrs }: useFormStateParams) => {
-  // TODO 将formSchema克隆一份，避免修改原有的formSchema
+  /** // TODO 将formSchema克隆一份，避免修改原有的formSchema */
   const formPropsRef = ref<SchemaFormProps>(cloneDeep(props));
   /** 表单项数据 */
   const formModel = reactive({ ...props.initialValues });
-  // 表单默认数据
+  /** 表单默认数据 */
   const defaultFormValues = reactive({ ...props.initialValues });
-  // 表单实例
+  /** 表单实例 */
   const schemaFormRef = ref<FormInstance>();
-  // 缓存的表单值，用于恢复form-item v-if为true后的值
+  /** 缓存的表单值，用于恢复form-item v-if为true后的值 */
   const cacheFormModel = { ...props.initialValues };
-  // 将所有的表单组件实例保存起来
+  /** 将所有的表单组件实例保存起来 */
   const compRefMap = new Map<string, DefineComponent<any>>();
-  // 初始时的componentProps，用于updateSchema更新时不覆盖componentProps为函数时的值
+  /** 初始时的componentProps，用于updateSchema更新时不覆盖componentProps为函数时的值 */
   const originComponentPropsFnMap = new Map<
     string,
     (opt: RenderCallbackParams) => ComponentProps

diff --git a/src/layout/menu/menu.vue b/src/layout/menu/menu.vue
@@ -45,7 +45,7 @@
   });
 
   const menus = computed(() => userStore.menus);
-  console.log('menus', menus.value);
+  // console.log('menus', menus.value);
   /** 侧边栏布局 */
   const isSideMenu = computed(() => layoutSettingStore.layoutSetting.layout === 'sidemenu');
   const getRouteByName = (name: string) => router.getRoutes().find((n) => n.name === name);

diff --git a/src/layout/tabs/tabs-view.vue b/src/layout/tabs/tabs-view.vue
@@ -23,20 +23,20 @@
     <div class="tabs-view-content" :style="{ overflow }">
       <router-view v-slot="{ Component }">
         <template v-if="Component">
-          <Transition
-            :name="Object.is(route.meta?.transitionName, false) ? '' : 'fade-transform'"
-            mode="out-in"
-            appear
-            @before-leave="overflow = 'hidden'"
-            @after-leave="overflow = 'auto'"
-          >
-            <keep-alive :include="keepAliveComponents">
-              <Suspense>
+          <Suspense>
+            <Transition
+              name="fade-slide"
+              mode="out-in"
+              appear
+              @before-leave="overflow = 'hidden'"
+              @after-leave="overflow = 'auto'"
+            >
+              <keep-alive :include="keepAliveComponents">
                 <component :is="Component" :key="route.fullPath" />
-                <template #fallback> 正在加载... </template>
-              </Suspense>
-            </keep-alive>
-          </Transition>
+              </keep-alive>
+            </Transition>
+            <template #fallback> 正在加载... </template>
+          </Suspense>
         </template>
       </router-view>
     </div>

diff --git a/src/router/asyncModules/index.ts b/src/router/asyncModules/index.ts
@@ -15,4 +15,4 @@ export const asyncRoutes = Object.entries(modulesFiles).reduce((routes, [url, im
   return routes;
 }, {} as Recordable<ImportVueFileFnType>);
 
-console.log('asyncRoutes', asyncRoutes);
+// console.log('asyncRoutes', asyncRoutes);
diff --git a/src/router/helper/routeHelper.tsx b/src/router/helper/routeHelper.tsx
@@ -61,7 +61,7 @@ export const generateDynamicRoutes = (menus: RouteRecordRaw[]) => {
   rootRoute.children = [...filterRoutes];
   // 4.重新添加拍平后的路由
   router.addRoute(rootRoute);
-  console.log('routes', router.getRoutes());
+  // console.log('routes', router.getRoutes());
 
   return routes;
 };

diff --git a/src/router/routes/modules/demos.ts b/src/router/routes/modules/demos.ts
@@ -19,7 +19,7 @@ const routes: Array<RouteRecordRaw> = [
         meta: {
           title: t('routes.demo.modal'),
           icon: 'ant-design:desktop-outlined',
-          keepAlive: true,
+          keepAlive: false,
         },
         component: () => import('@/views/demos/custom-modal.vue'),
       },
@@ -29,7 +29,7 @@ const routes: Array<RouteRecordRaw> = [
         meta: {
           title: t('routes.demo.button'),
           icon: 'ant-design:desktop-outlined',
-          keepAlive: true,
+          keepAlive: false,
         },
         component: () => import('@/views/demos/button.vue'),
       },
@@ -39,7 +39,7 @@ const routes: Array<RouteRecordRaw> = [
         meta: {
           title: t('routes.demo.form.demo'),
           icon: 'ant-design:desktop-outlined',
-          keepAlive: true,
+          keepAlive: false,
         },
         redirect: { name: `${moduleName}-form-basic` },
         children: [
@@ -49,7 +49,7 @@ const routes: Array<RouteRecordRaw> = [
             meta: {
               title: t('routes.demo.form.basic'),
               icon: 'ant-design:desktop-outlined',
-              keepAlive: true,
+              keepAlive: false,
             },
             component: () => import('@/views/demos/form/basic-form/index.vue'),
           },
@@ -59,7 +59,7 @@ const routes: Array<RouteRecordRaw> = [
             meta: {
               title: t('routes.demo.form.rule'),
               icon: 'ant-design:desktop-outlined',
-              keepAlive: true,
+              keepAlive: false,
             },
             component: () => import('@/views/demos/form/rule-form/index.vue'),
           },
@@ -69,7 +69,7 @@ const routes: Array<RouteRecordRaw> = [
             meta: {
               title: t('routes.demo.form.dynamic'),
               icon: 'ant-design:desktop-outlined',
-              keepAlive: true,
+              keepAlive: false,
             },
             component: () => import('@/views/demos/form/dynamic-form/index.vue'),
           },
@@ -79,7 +79,7 @@ const routes: Array<RouteRecordRaw> = [
             meta: {
               title: 'useForm',
               icon: 'ant-design:desktop-outlined',
-              keepAlive: true,
+              keepAlive: false,
             },
             component: () => import('@/views/demos/form/use-form/index.vue'),
           },
@@ -89,7 +89,7 @@ const routes: Array<RouteRecordRaw> = [
             meta: {
               title: t('routes.demo.form.customForm'),
               icon: 'ant-design:desktop-outlined',
-              keepAlive: true,
+              keepAlive: false,
             },
             component: () => import('@/views/demos/form/custom-form/index.vue'),
           },
@@ -99,7 +99,7 @@ const routes: Array<RouteRecordRaw> = [
             meta: {
               title: '自定义请求表单',
               icon: 'ant-design:desktop-outlined',
-              keepAlive: true,
+              keepAlive: false,
             },
             component: () => import('@/views/demos/form/request-form/index.vue'),
           },
@@ -111,7 +111,7 @@ const routes: Array<RouteRecordRaw> = [
         meta: {
           title: t('routes.demo.table.demo'),
           icon: 'ant-design:desktop-outlined',
-          keepAlive: true,
+          keepAlive: false,
         },
         redirect: { name: `${moduleName}-table-wzry` },
         children: [
@@ -151,7 +151,7 @@ const routes: Array<RouteRecordRaw> = [
             meta: {
               title: t('routes.demo.table.lol'),
               icon: 'ant-design:desktop-outlined',
-              keepAlive: true,
+              keepAlive: false,
             },
             component: () => import('@/views/demos/tables/lol-table/index.vue'),
           },
@@ -161,8 +161,8 @@ const routes: Array<RouteRecordRaw> = [
             meta: {
               title: '英雄详情',
               icon: 'ant-design:desktop-outlined',
-              hideInMenu: true,
-              keepAlive: true,
+              hideInMenu: false,
+              keepAlive: false,
               activeMenu: `${moduleName}-table-lol`,
             },
             component: () => import('@/views/demos/tables/lol-table/heroInfo.vue'),
@@ -176,8 +176,8 @@ const routes: Array<RouteRecordRaw> = [
         meta: {
           title: '嵌套路由',
           icon: 'ant-design:desktop-outlined',
-          keepAlive: true,
-          hideChildrenInMenu: true,
+          keepAlive: false,
+          hideChildrenInMenu: false,
           transitionName: false,
         },
         component: () => import('@/views/demos/nested-routes/index.vue'),
@@ -188,7 +188,7 @@ const routes: Array<RouteRecordRaw> = [
             meta: {
               title: '路由一',
               icon: 'ant-design:desktop-outlined',
-              hideInMenu: true,
+              hideInMenu: false,
               activeMenu: `${moduleName}-nested-routes`,
             },
             component: () => import('@/views/demos/nested-routes/route-one.vue'),
@@ -199,7 +199,7 @@ const routes: Array<RouteRecordRaw> = [
             meta: {
               title: '路由二',
               icon: 'ant-design:desktop-outlined',
-              hideInMenu: true,
+              hideInMenu: false,
               activeMenu: `${moduleName}-nested-routes`,
             },
             component: () => import('@/views/demos/nested-routes/route-two.vue'),
@@ -210,7 +210,7 @@ const routes: Array<RouteRecordRaw> = [
             meta: {
               title: '路由三',
               icon: 'ant-design:desktop-outlined',
-              hideInMenu: true,
+              hideInMenu: false,
               activeMenu: `${moduleName}-nested-routes`,
             },
             component: () => import('@/views/demos/nested-routes/route-three.vue'),

diff --git a/src/styles/transition.less b/src/styles/transition.less
@@ -25,18 +25,18 @@
   opacity: 0;
 }
 
-/* fade-transform */
-.fade-transform-leave-active,
-.fade-transform-enter-active {
+/* fade-slide */
+.fade-slide-leave-active,
+.fade-slide-enter-active {
   transition: all 0.5s;
 }
 
-.fade-transform-enter-from {
+.fade-slide-enter-from {
   transform: translateX(-30px);
   opacity: 0;
 }
 
-.fade-transform-leave-to {
+.fade-slide-leave-to {
   transform: translateX(30px);
   opacity: 0;
 }

diff --git a/src/views/demos/form/rule-form/index.vue b/src/views/demos/form/rule-form/index.vue
@@ -33,8 +33,6 @@
     name: 'DemosFormRuleForm',
   });
 
-  console.log('sss', import.meta.url);
-
   /**
    * @description 验证表单
    */
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,8 +33,6 @@ @@
         name: 'DemosFormRuleForm',
       });
-      console.log('sss', import.meta.url);
       /**
        * @description 验证表单
        */
@@ Expand Down @@