refactor: refactor route

src/components/Breadcrumb/index.ts

@@ -1,6 +0,0 @@
-import BreadcrumbLib from './src/Breadcrumb.vue';
-import BreadcrumbItemLib from './src/BreadcrumbItem.vue';
-import { withInstall } from '../util';
-
-export const Breadcrumb = withInstall(BreadcrumbLib);
-export const BreadcrumbItem = withInstall(BreadcrumbItemLib);

src/components/Breadcrumb/src/Breadcrumb.vue

@@ -1,96 +0,0 @@
-<template>
-  <div ref="breadcrumbRef" class="breadcrumb">
-    <slot />
-  </div>
-</template>
-
-<script lang="ts">
-  import { defineComponent, provide, ref } from 'vue';
-  import { propTypes } from '/@/utils/propTypes';
-
-  export default defineComponent({
-    name: 'Breadcrumb',
-    props: {
-      separator: propTypes.string.def('/'),
-      separatorClass: propTypes.string,
-    },
-    setup(props) {
-      const breadcrumbRef = ref<Nullable<HTMLElement>>(null);
-
-      provide('breadcrumb', props);
-
-      return {
-        breadcrumbRef,
-      };
-    },
-  });
-</script>
-<style lang="less">
-  @import (reference) '../../../design/index.less';
-
-  .breadcrumb {
-    .unselect();
-
-    height: @header-height;
-    padding-right: 20px;
-    font-size: 13px;
-    line-height: @header-height;
-    // line-height: 1;
-
-    &::after,
-    &::before {
-      display: table;
-      content: '';
-    }
-
-    &::after {
-      clear: both;
-    }
-
-    &__separator {
-      margin: 0 9px;
-      font-weight: 700;
-      color: @breadcrumb-item-normal-color;
-
-      &[class*='icon'] {
-        margin: 0 6px;
-        font-weight: 400;
-      }
-    }
-
-    &__item {
-      float: left;
-    }
-
-    &__inner {
-      color: @breadcrumb-item-normal-color;
-
-      &.is-link,
-      a {
-        font-weight: 500;
-        color: @text-color-base;
-        text-decoration: none;
-        transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-      }
-
-      a:hover,
-      &.is-link:hover {
-        color: @primary-color;
-        cursor: pointer;
-      }
-    }
-
-    &__item:last-child .breadcrumb__inner,
-    &__item:last-child &__inner a,
-    &__item:last-child &__inner a:hover,
-    &__item:last-child &__inner:hover {
-      font-weight: 400;
-      color: @breadcrumb-item-normal-color;
-      cursor: text;
-    }
-
-    &__item:last-child &__separator {
-      display: none;
-    }
-  }
-</style>

src/components/Breadcrumb/src/BreadcrumbItem.vue

@@ -1,57 +0,0 @@
-<template>
-  <span class="breadcrumb__item">
-    <span ref="linkRef" :class="['breadcrumb__inner', to || isLink ? 'is-link' : '']">
-      <slot />
-    </span>
-    <i v-if="separatorClass" class="breadcrumb__separator" :class="separatorClass"></i>
-    <span v-else class="breadcrumb__separator">{{ separator }}</span>
-  </span>
-</template>
-
-<script lang="ts">
-  import { defineComponent, inject, ref, onMounted, unref } from 'vue';
-  import { useRouter } from 'vue-router';
-  import { useEventListener } from '/@/hooks/event/useEventListener';
-
-  import { propTypes } from '/@/utils/propTypes';
-
-  export default defineComponent({
-    name: 'BreadcrumbItem',
-    props: {
-      to: propTypes.oneOfType([propTypes.string, propTypes.object]),
-      replace: propTypes.bool,
-      isLink: propTypes.bool,
-    },
-    setup(props) {
-      const linkRef = ref<Nullable<HTMLElement>>(null);
-
-      const parent = inject('breadcrumb') as {
-        separator: string;
-        separatorClass: string;
-      };
-
-      const { push, replace } = useRouter();
-
-      onMounted(() => {
-        const link = unref(linkRef);
-        if (!link) return;
-        useEventListener({
-          el: link,
-          listener: () => {
-            const { to } = props;
-            if (!props.to) return;
-            props.replace ? replace(to) : push(to);
-          },
-          name: 'click',
-          wait: 0,
-        });
-      });
-
-      return {
-        linkRef,
-        separator: parent.separator && parent.separator,
-        separatorClass: parent.separatorClass && parent.separatorClass,
-      };
-    },
-  });
-</script>

src/components/Menu/src/BasicMenu.tsx

@@ -36,6 +36,7 @@ import { getCurrentParentPath } from '/@/router/menus';
 
 import { basicProps } from './props';
 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+import { REDIRECT_NAME } from '/@/router/constant';
 export default defineComponent({
   name: 'BasicMenu',
   props: basicProps,
@@ -120,7 +121,7 @@ export default defineComponent({
     watch(
       () => currentRoute.value.name,
       (name: string) => {
-        if (name === 'Redirect') return;
+        if (name === REDIRECT_NAME) return;
         handleMenuChange();
         props.isHorizontal && appStore.getProjectConfig.menuSetting.split && getParentPath();
       }

src/components/Menu/src/hooks/useOpenKeys.ts

@@ -4,7 +4,7 @@ import type { MenuState } from '../types';
 import type { Ref } from 'vue';
 
 import { unref } from 'vue';
-import { getAllParentPath } from '/@/utils/helper/menuHelper';
+import { getAllParentPath } from '/@/router/helper/menuHelper';
 import { es6Unique } from '/@/utils';
 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
 

src/components/Menu/src/hooks/useSearchInput.ts

@@ -5,7 +5,7 @@ import type { Ref } from 'vue';
 import { isString } from '/@/utils/is';
 import { unref } from 'vue';
 import { es6Unique } from '/@/utils';
-import { getAllParentPath } from '/@/utils/helper/menuHelper';
+import { getAllParentPath } from '/@/router/helper/menuHelper';
 
 interface UseSearchInputOptions {
   menuState: MenuState;

src/components/Table/src/components/TableSetting.vue

@@ -33,7 +33,7 @@
 
     <Tooltip placement="top" v-if="getSetting.setting">
       <template #title>
-        <span>{{ t('settingColumn') }}</span>
+        <span>{{ t('component.table.settingColumn') }}</span>
       </template>
       <Popover
         placement="bottomLeft"
@@ -58,9 +58,11 @@
               v-model:checked="checkAll"
               @change="onCheckAllChange"
             >
-              {{ t('settingColumnShow') }}
+              {{ t('component.table.settingColumnShow') }}
             </Checkbox>
-            <a-button size="small" type="link" @click="reset"> {{ t('settingReset') }}</a-button>
+            <a-button size="small" type="link" @click="reset">
+              {{ t('component.table.settingReset') }}</a-button
+            >
           </div>
         </template>
         <SettingOutlined />
@@ -69,7 +71,7 @@
 
     <Tooltip placement="top" v-if="getSetting.fullScreen">
       <template #title>
-        <span>{{ t('settingFullScreen') }}</span>
+        <span>{{ t('component.table.settingFullScreen') }}</span>
       </template>
       <FullscreenOutlined @click="handleFullScreen" v-if="!isFullscreenRef" />
       <FullscreenExitOutlined @click="handleFullScreen" v-else />

src/components/registerGlobComp.ts

@@ -33,6 +33,7 @@ import {
   Empty,
   Avatar,
   Menu,
+  Breadcrumb,
 } from 'ant-design-vue';
 import { getApp } from '/@/setup/App';
 
@@ -55,6 +56,7 @@ export function registerGlobComp() {
   getApp()
     .use(Select)
     .use(Alert)
+    .use(Breadcrumb)
     .use(Checkbox)
     .use(DatePicker)
     .use(Radio)