refactor: layouts use setup (#3312)

* refactor: layouts use setup

* refactor: dashboard use setup

* fix: breadcrumbs types

* fix: noticeList type check error

* fix: noticeList type check error

* chore(Breadcrumb): revert setup change

---------

Co-authored-by: invalid w <wangjuesix@gmail.com>

src/components/Application/src/search/AppSearchModal.vue

@@ -62,7 +62,6 @@
   import { SearchOutlined } from '@ant-design/icons-vue';
   import AppSearchFooter from './AppSearchFooter.vue';
   import Icon from '@/components/Icon/Icon.vue';
-  // @ts-ignore
   import vClickOutside from '@/directives/clickOutside';
   import { useDesign } from '@/hooks/web/useDesign';
   import { useRefs } from '@vben/hooks';

src/layouts/default/content/index.vue

@@ -3,31 +3,20 @@
     <PageLayout />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import PageLayout from '/@/layouts/page/index.vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-  import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+<script lang="ts" setup>
+  import PageLayout from '@/layouts/page/index.vue';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
+  import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting';
   import { useContentViewHeight } from './useContentViewHeight';
 
-  export default defineComponent({
-    name: 'LayoutContent',
-    components: { PageLayout },
-    setup() {
-      const { prefixCls } = useDesign('layout-content');
-      const { getOpenPageLoading } = useTransitionSetting();
-      const { getLayoutContentMode, getPageLoading } = useRootSetting();
+  defineOptions({ name: 'LayoutContent' });
 
-      useContentViewHeight();
-      return {
-        prefixCls,
-        getOpenPageLoading,
-        getLayoutContentMode,
-        getPageLoading,
-      };
-    },
-  });
+  const { prefixCls } = useDesign('layout-content');
+  const { getOpenPageLoading } = useTransitionSetting();
+  const { getLayoutContentMode, getPageLoading } = useRootSetting();
+
+  useContentViewHeight();
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-layout-content';

src/layouts/default/content/useContentContext.ts

@@ -1,5 +1,5 @@
 import type { InjectionKey, ComputedRef } from 'vue';
-import { createContext, useContext } from '/@/hooks/core/useContext';
+import { createContext, useContext } from '@/hooks/core/useContext';
 
 export interface ContentContextProps {
   contentHeight: ComputedRef<number>;

src/layouts/default/content/useContentViewHeight.ts

@@ -1,5 +1,5 @@
 import { ref, computed, unref } from 'vue';
-import { createPageContext } from '/@/hooks/component/usePageContext';
+import { createPageContext } from '@/hooks/component/usePageContext';
 import { useWindowSizeFn } from '@vben/hooks';
 
 const headerHeightRef = ref(0);

src/layouts/default/feature/index.vue

@@ -1,73 +1,57 @@
-<script lang="ts">
-  import { defineComponent, computed, unref } from 'vue';
+<template>
+  <LayoutLockPage />
+  <BackTop v-if="getUseOpenBackTop" :target="getTarget" />
+  <SettingDrawer
+    v-if="getIsFixedSettingDrawer && (!getShowMultipleTab || getFullContent)"
+    :class="prefixCls"
+  />
+  <SessionTimeoutLogin v-if="getIsSessionTimeout" />
+</template>
+<script lang="ts" setup>
+  import { computed, unref } from 'vue';
   import { BackTop } from 'ant-design-vue';
 
-  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useUserStoreWithOut } from '/@/store/modules/user';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
+  import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useUserStoreWithOut } from '@/store/modules/user';
 
-  import { SettingButtonPositionEnum } from '/@/enums/appEnum';
-  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import { SettingButtonPositionEnum } from '@/enums/appEnum';
+  import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
 
-  import SessionTimeoutLogin from '/@/views/sys/login/SessionTimeoutLogin.vue';
+  import SessionTimeoutLogin from '@/views/sys/login/SessionTimeoutLogin.vue';
 
-  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+  import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
 
-  export default defineComponent({
-    name: 'LayoutFeatures',
-    components: {
-      BackTop,
-      LayoutLockPage: createAsyncComponent(() => import('/@/views/sys/lock/index.vue')),
-      SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue')),
-      SessionTimeoutLogin,
-    },
-    setup() {
-      const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } =
-        useRootSetting();
-      const userStore = useUserStoreWithOut();
-      const { prefixCls } = useDesign('setting-drawer-feature');
-      const { getShowHeader } = useHeaderSetting();
+  defineOptions({ name: 'LayoutFeatures' });
 
-      const getIsSessionTimeout = computed(() => userStore.getSessionTimeout);
+  const LayoutLockPage = createAsyncComponent(() => import('@/views/sys/lock/index.vue'));
+  const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue'));
 
-      const getIsFixedSettingDrawer = computed(() => {
-        if (!unref(getShowSettingButton)) {
-          return false;
-        }
-        const settingButtonPosition = unref(getSettingButtonPosition);
+  const getTarget = () => document.body;
 
-        if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
-          return !unref(getShowHeader) || unref(getFullContent);
-        }
-        return settingButtonPosition === SettingButtonPositionEnum.FIXED;
-      });
+  const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } =
+    useRootSetting();
+  const userStore = useUserStoreWithOut();
+  const { prefixCls } = useDesign('setting-drawer-feature');
+  const { getShowHeader } = useHeaderSetting();
 
-      const { getShowMultipleTab } = useMultipleTabSetting();
+  const getIsSessionTimeout = computed(() => userStore.getSessionTimeout);
 
-      return {
-        getTarget: () => document.body,
-        getUseOpenBackTop,
-        getIsFixedSettingDrawer,
-        prefixCls,
-        getIsSessionTimeout,
-        getShowMultipleTab,
-        getFullContent,
-      };
-    },
-  });
-</script>
+  const getIsFixedSettingDrawer = computed(() => {
+    if (!unref(getShowSettingButton)) {
+      return false;
+    }
+    const settingButtonPosition = unref(getSettingButtonPosition);
 
-<template>
-  <LayoutLockPage />
-  <BackTop v-if="getUseOpenBackTop" :target="getTarget" />
-  <SettingDrawer
-    v-if="getIsFixedSettingDrawer && (!getShowMultipleTab || getFullContent)"
-    :class="prefixCls"
-  />
-  <SessionTimeoutLogin v-if="getIsSessionTimeout" />
-</template>
+    if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
+      return !unref(getShowHeader) || unref(getFullContent);
+    }
+    return settingButtonPosition === SettingButtonPositionEnum.FIXED;
+  });
 
+  const { getShowMultipleTab } = useMultipleTabSetting();
+</script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-setting-drawer-feature';
 

src/layouts/default/footer/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Footer :class="prefixCls" v-if="getShowLayoutFooter" ref="footerRef">
+  <Layout.Footer :class="prefixCls" v-if="getShowLayoutFooter" ref="footerRef">
     <div :class="`${prefixCls}__links`">
       <a @click="openWindow(SITE_URL)">{{ t('layout.footer.onlinePreview') }}</a>
 
@@ -8,57 +8,41 @@
       <a @click="openWindow(DOC_URL)">{{ t('layout.footer.onlineDocument') }}</a>
     </div>
     <div>Copyright &copy;2020 Vben Admin</div>
-  </Footer>
+  </Layout.Footer>
 </template>
-
-<script lang="ts">
-  import { computed, defineComponent, unref, ref } from 'vue';
+<script lang="ts" setup>
+  import { computed, unref, ref } from 'vue';
   import { Layout } from 'ant-design-vue';
 
   import { GithubFilled } from '@ant-design/icons-vue';
 
-  import { DOC_URL, GITHUB_URL, SITE_URL } from '/@/settings/siteSetting';
-  import { openWindow } from '/@/utils';
+  import { DOC_URL, GITHUB_URL, SITE_URL } from '@/settings/siteSetting';
+  import { openWindow } from '@/utils';
 
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
   import { useRouter } from 'vue-router';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDesign } from '@/hooks/web/useDesign';
   import { useLayoutHeight } from '../content/useContentViewHeight';
 
-  export default defineComponent({
-    name: 'LayoutFooter',
-    components: { Footer: Layout.Footer, GithubFilled },
-    setup() {
-      const { t } = useI18n();
-      const { getShowFooter } = useRootSetting();
-      const { currentRoute } = useRouter();
-      const { prefixCls } = useDesign('layout-footer');
-
-      const footerRef = ref<ComponentRef>(null);
-      const { setFooterHeight } = useLayoutHeight();
-
-      const getShowLayoutFooter = computed(() => {
-        if (unref(getShowFooter)) {
-          const footerEl = unref(footerRef)?.$el;
-          setFooterHeight(footerEl?.offsetHeight || 0);
-        } else {
-          setFooterHeight(0);
-        }
-        return unref(getShowFooter) && !unref(currentRoute).meta?.hiddenFooter;
-      });
-
-      return {
-        getShowLayoutFooter,
-        prefixCls,
-        t,
-        DOC_URL,
-        GITHUB_URL,
-        SITE_URL,
-        openWindow,
-        footerRef,
-      };
-    },
+  defineOptions({ name: 'LayoutFooter' });
+
+  const { t } = useI18n();
+  const { getShowFooter } = useRootSetting();
+  const { currentRoute } = useRouter();
+  const { prefixCls } = useDesign('layout-footer');
+
+  const footerRef = ref<ComponentRef>(null);
+  const { setFooterHeight } = useLayoutHeight();
+
+  const getShowLayoutFooter = computed(() => {
+    if (unref(getShowFooter)) {
+      const footerEl = unref(footerRef)?.$el;
+      setFooterHeight(footerEl?.offsetHeight || 0);
+    } else {
+      setFooterHeight(0);
+    }
+    return unref(getShowFooter) && !unref(currentRoute).meta?.hiddenFooter;
   });
 </script>
 <style lang="less" scoped>

src/layouts/default/header/MultipleHeader.vue

@@ -9,111 +9,91 @@
     <MultipleTabs v-if="getShowTabs" :key="tabStore.getLastDragEndIndex" />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, unref, computed, CSSProperties } from 'vue';
+<script lang="ts" setup>
+  import { unref, computed, CSSProperties } from 'vue';
 
   import LayoutHeader from './index.vue';
   import MultipleTabs from '../tabs/index.vue';
 
-  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-  import { useFullContent } from '/@/hooks/web/useFullContent';
-  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
-  import { useAppInject } from '/@/hooks/web/useAppInject';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
+  import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+  import { useFullContent } from '@/hooks/web/useFullContent';
+  import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
+  import { useAppInject } from '@/hooks/web/useAppInject';
+  import { useDesign } from '@/hooks/web/useDesign';
   import { useLayoutHeight } from '../content/useContentViewHeight';
-  import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+  import { useMultipleTabStore } from '@/store/modules/multipleTab';
 
   const HEADER_HEIGHT = 48;
 
   const TABS_HEIGHT = 32;
-  export default defineComponent({
-    name: 'LayoutMultipleHeader',
-    components: { LayoutHeader, MultipleTabs },
-    setup() {
-      const { setHeaderHeight } = useLayoutHeight();
-      const tabStore = useMultipleTabStore();
-      const { prefixCls } = useDesign('layout-multiple-header');
-
-      const { getCalcContentWidth, getSplit, getShowMenu } = useMenuSetting();
-      const { getIsMobile } = useAppInject();
-      const {
-        getFixed,
-        getShowInsetHeaderRef,
-        getShowFullHeaderRef,
-        getHeaderTheme,
-        getShowHeader,
-      } = useHeaderSetting();
-
-      const { getFullContent } = useFullContent();
-
-      const { getShowMultipleTab, getAutoCollapse } = useMultipleTabSetting();
-
-      const getShowTabs = computed(() => {
-        return unref(getShowMultipleTab) && !unref(getFullContent);
-      });
-
-      const getIsShowPlaceholderDom = computed(() => {
-        return unref(getFixed) || unref(getShowFullHeaderRef);
-      });
-
-      const getWrapStyle = computed((): CSSProperties => {
-        const style: CSSProperties = {};
-        if (unref(getFixed)) {
-          style.width = unref(getIsMobile) ? '100%' : unref(getCalcContentWidth);
-        }
-        if (unref(getShowFullHeaderRef)) {
-          style.top = `${HEADER_HEIGHT}px`;
-        }
-        return style;
-      });
-
-      const getIsFixed = computed(() => {
-        return unref(getFixed) || unref(getShowFullHeaderRef);
-      });
-
-      const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader));
-
-      const getPlaceholderDomStyle = computed((): CSSProperties => {
-        let height = 0;
-        if (!(unref(getAutoCollapse) && unref(getIsUnFold))) {
-          if (
-            (unref(getShowFullHeaderRef) || !unref(getSplit)) &&
-            unref(getShowHeader) &&
-            !unref(getFullContent)
-          ) {
-            height += HEADER_HEIGHT;
-          }
-          if (unref(getShowMultipleTab) && !unref(getFullContent)) {
-            height += TABS_HEIGHT;
-          }
-          setHeaderHeight(height);
-        }
-        return {
-          height: `${height}px`,
-        };
-      });
-
-      const getClass = computed(() => {
-        return [
-          prefixCls,
-          `${prefixCls}--${unref(getHeaderTheme)}`,
-          { [`${prefixCls}--fixed`]: unref(getIsFixed) },
-        ];
-      });
-
-      return {
-        getClass,
-        prefixCls,
-        getPlaceholderDomStyle,
-        getIsFixed,
-        getWrapStyle,
-        getIsShowPlaceholderDom,
-        getShowTabs,
-        getShowInsetHeaderRef,
-        tabStore,
-      };
-    },
+
+  defineOptions({ name: 'LayoutMultipleHeader' });
+
+  const { setHeaderHeight } = useLayoutHeight();
+  const tabStore = useMultipleTabStore();
+  const { prefixCls } = useDesign('layout-multiple-header');
+
+  const { getCalcContentWidth, getSplit, getShowMenu } = useMenuSetting();
+  const { getIsMobile } = useAppInject();
+  const { getFixed, getShowInsetHeaderRef, getShowFullHeaderRef, getHeaderTheme, getShowHeader } =
+    useHeaderSetting();
+
+  const { getFullContent } = useFullContent();
+
+  const { getShowMultipleTab, getAutoCollapse } = useMultipleTabSetting();
+
+  const getShowTabs = computed(() => {
+    return unref(getShowMultipleTab) && !unref(getFullContent);
+  });
+
+  const getIsShowPlaceholderDom = computed(() => {
+    return unref(getFixed) || unref(getShowFullHeaderRef);
+  });
+
+  const getWrapStyle = computed((): CSSProperties => {
+    const style: CSSProperties = {};
+    if (unref(getFixed)) {
+      style.width = unref(getIsMobile) ? '100%' : unref(getCalcContentWidth);
+    }
+    if (unref(getShowFullHeaderRef)) {
+      style.top = `${HEADER_HEIGHT}px`;
+    }
+    return style;
+  });
+
+  const getIsFixed = computed(() => {
+    return unref(getFixed) || unref(getShowFullHeaderRef);
+  });
+
+  const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader));
+
+  const getPlaceholderDomStyle = computed((): CSSProperties => {
+    let height = 0;
+    if (!(unref(getAutoCollapse) && unref(getIsUnFold))) {
+      if (
+        (unref(getShowFullHeaderRef) || !unref(getSplit)) &&
+        unref(getShowHeader) &&
+        !unref(getFullContent)
+      ) {
+        height += HEADER_HEIGHT;
+      }
+      if (unref(getShowMultipleTab) && !unref(getFullContent)) {
+        height += TABS_HEIGHT;
+      }
+      setHeaderHeight(height);
+    }
+    return {
+      height: `${height}px`,
+    };
+  });
+
+  const getClass = computed(() => {
+    return [
+      prefixCls,
+      `${prefixCls}--${unref(getHeaderTheme)}`,
+      { [`${prefixCls}--fixed`]: unref(getIsFixed) },
+    ];
   });
 </script>
 <style lang="less" scoped>

src/layouts/default/header/components/Breadcrumb.vue

@@ -6,7 +6,7 @@
         <span v-if="!hasRedirect(routesMatched, route)">
           {{ t(route.name || route.meta.title) }}
         </span>
-        <router-link v-else to="" @click="handleClick(route, paths, $event)">
+        <router-link v-else to="" @click="handleClick(route, paths, $event as Event)">
           {{ t(route.name || route.meta.title) }}
         </router-link>
       </template>

src/layouts/default/header/components/ChangeApi/index.vue

@@ -19,11 +19,11 @@
 </template>
 <script lang="ts" setup>
   import { Radio } from 'ant-design-vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { BasicModal, useModalInner } from '/@/components/Modal/index';
-  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
   import { ref } from 'vue';
-  import { useAppStore } from '/@/store/modules/app';
+  import { useAppStore } from '@/store/modules/app';
   import type { ApiAddress } from '/#/store';
 
   const appStore = useAppStore();
@@ -79,4 +79,3 @@
     }
   };
 </script>
-<style lang="less"></style>

src/layouts/default/header/components/ErrorAction.vue

@@ -10,38 +10,27 @@
     </Badge>
   </Tooltip>
 </template>
-<script lang="ts">
-  import { defineComponent, computed } from 'vue';
+<script lang="ts" setup>
+  import { computed } from 'vue';
   import { Tooltip, Badge } from 'ant-design-vue';
   import Icon from '@/components/Icon/Icon.vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { useErrorLogStore } from '/@/store/modules/errorLog';
-  import { PageEnum } from '/@/enums/pageEnum';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { useErrorLogStore } from '@/store/modules/errorLog';
+  import { PageEnum } from '@/enums/pageEnum';
 
   import { useRouter } from 'vue-router';
 
-  export default defineComponent({
-    name: 'ErrorAction',
-    components: { Icon, Tooltip, Badge },
+  defineOptions({ name: 'ErrorAction' });
 
-    setup() {
-      const { t } = useI18n();
-      const { push } = useRouter();
-      const errorLogStore = useErrorLogStore();
+  const { t } = useI18n();
+  const { push } = useRouter();
+  const errorLogStore = useErrorLogStore();
 
-      const getCount = computed(() => errorLogStore.getErrorLogListCount);
+  const getCount = computed(() => errorLogStore.getErrorLogListCount);
 
-      function handleToErrorList() {
-        push(PageEnum.ERROR_LOG_PAGE).then(() => {
-          errorLogStore.setErrorLogListCount(0);
-        });
-      }
-
-      return {
-        t,
-        getCount,
-        handleToErrorList,
-      };
-    },
-  });
+  function handleToErrorList() {
+    push(PageEnum.ERROR_LOG_PAGE).then(() => {
+      errorLogStore.setErrorLogListCount(0);
+    });
+  }
 </script>

src/layouts/default/header/components/FullScreen.vue

@@ -6,40 +6,29 @@
     </span>
   </Tooltip>
 </template>
-<script lang="ts">
-  import { defineComponent, computed, unref } from 'vue';
+<script lang="ts" setup>
+  import { computed, unref } from 'vue';
   import { Tooltip } from 'ant-design-vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
   import { useFullscreen } from '@vueuse/core';
 
   import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
 
-  export default defineComponent({
-    name: 'FullScreen',
-    components: { FullscreenExitOutlined, FullscreenOutlined, Tooltip },
+  defineOptions({ name: 'FullScreen' });
 
-    setup() {
-      const { t } = useI18n();
-      const { toggle, isFullscreen } = useFullscreen();
-      // 重新检查全屏状态
-      isFullscreen.value = !!(
-        document.fullscreenElement ||
-        document.webkitFullscreenElement ||
-        document.mozFullScreenElement ||
-        document.msFullscreenElement
-      );
+  const { t } = useI18n();
+  const { toggle, isFullscreen } = useFullscreen();
+  // 重新检查全屏状态
+  isFullscreen.value = !!(
+    document.fullscreenElement ||
+    document.webkitFullscreenElement ||
+    document.mozFullScreenElement ||
+    document.msFullscreenElement
+  );
 
-      const getTitle = computed(() => {
-        return unref(isFullscreen)
-          ? t('layout.header.tooltipExitFull')
-          : t('layout.header.tooltipEntryFull');
-      });
-
-      return {
-        getTitle,
-        isFullscreen,
-        toggle,
-      };
-    },
+  const getTitle = computed(() => {
+    return unref(isFullscreen)
+      ? t('layout.header.tooltipExitFull')
+      : t('layout.header.tooltipEntryFull');
   });
 </script>

src/layouts/default/header/components/index.ts

@@ -1,4 +1,4 @@
-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
 import FullScreen from './FullScreen.vue';
 
 export const UserDropDown = createAsyncComponent(() => import('./user-dropdown/index.vue'), {

src/layouts/default/header/components/lock/LockModal.vue

@@ -24,75 +24,60 @@
     </div>
   </BasicModal>
 </template>
-<script lang="ts">
-  import { defineComponent, computed } from 'vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { BasicModal, useModalInner } from '/@/components/Modal/index';
-  import { BasicForm, useForm } from '/@/components/Form/index';
-
-  import { useUserStore } from '/@/store/modules/user';
-  import { useLockStore } from '/@/store/modules/lock';
-  import headerImg from '/@/assets/images/header.jpg';
-
-  export default defineComponent({
-    name: 'LockModal',
-    components: { BasicModal, BasicForm },
-
-    setup() {
-      const { t } = useI18n();
-      const { prefixCls } = useDesign('header-lock-modal');
-      const userStore = useUserStore();
-      const lockStore = useLockStore();
-
-      const getRealName = computed(() => userStore.getUserInfo?.realName);
-      const [register, { closeModal }] = useModalInner();
-
-      const [registerForm, { validate, resetFields }] = useForm({
-        showActionButtonGroup: false,
-        schemas: [
-          {
-            field: 'password',
-            label: t('layout.header.lockScreenPassword'),
-            colProps: {
-              span: 24,
-            },
-            component: 'InputPassword',
-            required: true,
-          },
-        ],
-      });
-
-      const handleLock = async () => {
-        const { password = '' } = await validate<{
-          password: string;
-        }>();
-
-        closeModal();
-
-        lockStore.setLockInfo({
-          isLock: true,
-          pwd: password,
-        });
-
-        await resetFields();
-      };
-
-      const avatar = computed(() => {
-        const { avatar } = userStore.getUserInfo;
-        return avatar || headerImg;
-      });
-
-      return {
-        t,
-        prefixCls,
-        getRealName,
-        register,
-        registerForm,
-        handleLock,
-        avatar,
-      };
-    },
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+
+  import { useUserStore } from '@/store/modules/user';
+  import { useLockStore } from '@/store/modules/lock';
+  import headerImg from '@/assets/images/header.jpg';
+
+  defineOptions({ name: 'LockModal' });
+
+  const { t } = useI18n();
+  const { prefixCls } = useDesign('header-lock-modal');
+  const userStore = useUserStore();
+  const lockStore = useLockStore();
+
+  const getRealName = computed(() => userStore.getUserInfo?.realName);
+  const [register, { closeModal }] = useModalInner();
+
+  const [registerForm, { validate, resetFields }] = useForm({
+    showActionButtonGroup: false,
+    schemas: [
+      {
+        field: 'password',
+        label: t('layout.header.lockScreenPassword'),
+        colProps: {
+          span: 24,
+        },
+        component: 'InputPassword',
+        required: true,
+      },
+    ],
+  });
+
+  const handleLock = async () => {
+    const { password = '' } = await validate<{
+      password: string;
+    }>();
+
+    closeModal();
+
+    lockStore.setLockInfo({
+      isLock: true,
+      pwd: password,
+    });
+
+    await resetFields();
+  };
+
+  const avatar = computed(() => {
+    const { avatar } = userStore.getUserInfo;
+    return avatar || headerImg;
   });
 </script>
 <style lang="less">

src/layouts/default/header/components/notify/NoticeList.vue

@@ -1,43 +1,38 @@
 <template>
-  <a-list :class="prefixCls" bordered :pagination="getPagination">
+  <List :class="prefixCls" bordered :pagination="getPagination">
     <template v-for="item in getData" :key="item.id">
-      <a-list-item class="list-item">
-        <a-list-item-meta>
+      <List.Item class="list-item">
+        <List.Item.Meta>
           <template #title>
             <div class="title">
-              <a-typography-paragraph
+              <Typography.Paragraph
                 @click="handleTitleClick(item)"
-                style="width: 100%; margin-bottom: 0 !important"
-                :style="{ cursor: isTitleClickable ? 'pointer' : '' }"
                 :delete="!!item.titleDelete"
                 :ellipsis="
-                  $props.titleRows && $props.titleRows > 0
-                    ? { rows: $props.titleRows, tooltip: !!item.title }
-                    : false
+                  titleRows && titleRows > 0 ? { rows: titleRows, tooltip: !!item.title } : false
                 "
                 :content="item.title"
               />
               <div class="extra" v-if="item.extra">
-                <a-tag class="tag" :color="item.color">
+                <Tag class="tag" :color="item.color">
                   {{ item.extra }}
-                </a-tag>
+                </Tag>
               </div>
             </div>
           </template>
 
           <template #avatar>
-            <a-avatar v-if="item.avatar" class="avatar" :src="item.avatar" />
+            <Avatar v-if="item.avatar" class="avatar" :src="item.avatar" />
             <span v-else> {{ item.avatar }}</span>
           </template>
 
           <template #description>
             <div>
               <div class="description" v-if="item.description">
-                <a-typography-paragraph
-                  style="width: 100%; margin-bottom: 0 !important"
+                <Typography.Paragraph
                   :ellipsis="
-                    $props.descRows && $props.descRows > 0
-                      ? { rows: $props.descRows, tooltip: !!item.description }
+                    descRows && descRows > 0
+                      ? { rows: descRows, tooltip: !!item.description }
                       : false
                   "
                   :content="item.description"
@@ -48,107 +43,85 @@
               </div>
             </div>
           </template>
-        </a-list-item-meta>
-      </a-list-item>
+        </List.Item.Meta>
+      </List.Item>
     </template>
-  </a-list>
+  </List>
 </template>
-<script lang="ts">
-  import { computed, defineComponent, PropType, ref, watch, unref } from 'vue';
+<script lang="ts" setup>
+  import { computed, PropType, ref, watch, unref } from 'vue';
   import { ListItem } from './data';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDesign } from '@/hooks/web/useDesign';
   import { List, Avatar, Tag, Typography } from 'ant-design-vue';
-  import { isNumber } from '/@/utils/is';
-
-  // types
-  import type { StyleValue } from '/@/utils/types';
-  import type { FunctionalComponent } from 'vue';
-  import type { ParagraphProps } from 'ant-design-vue/es/typography/Paragraph';
-
-  export default defineComponent({
-    components: {
-      [Avatar.name]: Avatar,
-      [List.name]: List,
-      [List.Item.name]: List.Item,
-      AListItemMeta: List.Item.Meta,
-      ATypographyParagraph: Typography.Paragraph as FunctionalComponent<
-        ParagraphProps & {
-          style?: StyleValue;
-        }
-      >,
-      [Tag.name]: Tag,
+  import { isNumber } from '@/utils/is';
+
+  const props = defineProps({
+    list: {
+      type: Array as PropType<ListItem[]>,
+      default: () => [],
     },
-    props: {
-      list: {
-        type: Array as PropType<ListItem[]>,
-        default: () => [],
-      },
-      pageSize: {
-        type: [Boolean, Number] as PropType<Boolean | Number>,
-        default: 5,
-      },
-      currentPage: {
-        type: Number,
-        default: 1,
-      },
-      titleRows: {
-        type: Number,
-        default: 1,
-      },
-      descRows: {
-        type: Number,
-        default: 2,
-      },
-      onTitleClick: {
-        type: Function as PropType<(Recordable) => void>,
-      },
+    pageSize: {
+      type: [Boolean, Number] as PropType<Boolean | Number>,
+      default: 5,
     },
-    emits: ['update:currentPage'],
-    setup(props, { emit }) {
-      const { prefixCls } = useDesign('header-notify-list');
-      const current = ref(props.currentPage || 1);
-      const getData = computed(() => {
-        const { pageSize, list } = props;
-        if (pageSize === false) return [];
-        let size = isNumber(pageSize) ? pageSize : 5;
-        return list.slice(size * (unref(current) - 1), size * unref(current));
-      });
-      watch(
-        () => props.currentPage,
-        (v) => {
-          current.value = v;
-        },
-      );
-      const isTitleClickable = computed(() => !!props.onTitleClick);
-      const getPagination = computed(() => {
-        const { list, pageSize } = props;
-
-        // compatible line 104
-        // if typeof pageSize is boolean, Number(true) && 5 = 5, Number(false) && 5 = 0
-        const size = isNumber(pageSize) ? pageSize : Number(pageSize) && 5;
-
-        if (size > 0 && list && list.length > size) {
-          return {
-            total: list.length,
-            pageSize: size,
-            current: unref(current),
-            onChange(page) {
-              current.value = page;
-              emit('update:currentPage', page);
-            },
-          };
-        } else {
-          return false;
-        }
-      });
+    currentPage: {
+      type: Number,
+      default: 1,
+    },
+    titleRows: {
+      type: Number,
+      default: 1,
+    },
+    descRows: {
+      type: Number,
+      default: 2,
+    },
+    onTitleClick: {
+      type: Function as PropType<(Recordable) => void>,
+    },
+  });
 
-      function handleTitleClick(item: ListItem) {
-        props.onTitleClick && props.onTitleClick(item);
-      }
+  const emit = defineEmits(['update:currentPage']);
 
-      return { prefixCls, getPagination, getData, handleTitleClick, isTitleClickable };
+  const { prefixCls } = useDesign('header-notify-list');
+  const current = ref(props.currentPage || 1);
+  const getData = computed(() => {
+    const { pageSize, list } = props;
+    if (pageSize === false) return [];
+    let size = isNumber(pageSize) ? pageSize : 5;
+    return list.slice(size * (unref(current) - 1), size * unref(current));
+  });
+  watch(
+    () => props.currentPage,
+    (v) => {
+      current.value = v;
     },
+  );
+  const getPagination = computed(() => {
+    const { list, pageSize } = props;
+
+    // compatible line 104
+    // if typeof pageSize is boolean, Number(true) && 5 = 5, Number(false) && 5 = 0
+    const size = isNumber(pageSize) ? pageSize : Number(pageSize) && 5;
+
+    if (size > 0 && list && list.length > size) {
+      return {
+        total: list.length,
+        pageSize: size,
+        current: unref(current),
+        onChange(page) {
+          current.value = page;
+          emit('update:currentPage', page);
+        },
+      };
+    } else {
+      return false;
+    }
   });
+
+  function handleTitleClick(item: ListItem) {
+    props.onTitleClick && props.onTitleClick(item);
+  }
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-header-notify-list';

src/layouts/default/header/components/notify/index.vue

@@ -7,7 +7,7 @@
       <template #content>
         <Tabs>
           <template v-for="item in listData" :key="item.key">
-            <TabPane>
+            <Tabs.TabPane>
               <template #tab>
                 {{ item.name }}
                 <span v-if="item.list.length !== 0">({{ item.list.length }})</span>
@@ -15,52 +15,40 @@
               <!-- 绑定title-click事件的通知列表中标题是“可点击”的-->
               <NoticeList :list="item.list" v-if="item.key === '1'" @title-click="onNoticeClick" />
               <NoticeList :list="item.list" v-else />
-            </TabPane>
+            </Tabs.TabPane>
           </template>
         </Tabs>
       </template>
     </Popover>
   </div>
 </template>
-<script lang="ts">
-  import { computed, defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
   import { Popover, Tabs, Badge } from 'ant-design-vue';
   import { BellOutlined } from '@ant-design/icons-vue';
   import { tabListData, ListItem } from './data';
   import NoticeList from './NoticeList.vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useMessage } from '@/hooks/web/useMessage';
 
-  export default defineComponent({
-    components: { Popover, BellOutlined, Tabs, TabPane: Tabs.TabPane, Badge, NoticeList },
-    setup() {
-      const { prefixCls } = useDesign('header-notify');
-      const { createMessage } = useMessage();
-      const listData = ref(tabListData);
+  const { prefixCls } = useDesign('header-notify');
+  const { createMessage } = useMessage();
+  const listData = ref(tabListData);
+  const numberStyle = {};
 
-      const count = computed(() => {
-        let count = 0;
-        for (let i = 0; i < tabListData.length; i++) {
-          count += tabListData[i].list.length;
-        }
-        return count;
-      });
-
-      function onNoticeClick(record: ListItem) {
-        createMessage.success('你点击了通知，ID=' + record.id);
-        // 可以直接将其标记为已读（为标题添加删除线）,此处演示的代码会切换删除线状态
-        record.titleDelete = !record.titleDelete;
-      }
-
-      return {
-        prefixCls,
-        listData,
-        count,
-        onNoticeClick,
-        numberStyle: {},
-      };
-    },
+  const count = computed(() => {
+    let count = 0;
+    for (let i = 0; i < tabListData.length; i++) {
+      count += tabListData[i].list.length;
+    }
+    return count;
   });
+
+  function onNoticeClick(record: ListItem) {
+    createMessage.success('你点击了通知，ID=' + record.id);
+    // 可以直接将其标记为已读（为标题添加删除线）,此处演示的代码会切换删除线状态
+    record.titleDelete = !record.titleDelete;
+  }
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-header-notify';

src/layouts/default/header/components/user-dropdown/DropMenuItem.vue

@@ -1,32 +1,26 @@
 <template>
-  <MenuItem :key="itemKey">
+  <Menu.Item :key="itemKey">
     <span class="flex items-center">
       <Icon :icon="icon" class="mr-1" />
       <span>{{ text }}</span>
     </span>
-  </MenuItem>
+  </Menu.Item>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import { Menu } from 'ant-design-vue';
-
-  import { computed, defineComponent, getCurrentInstance } from 'vue';
+  import { computed, getCurrentInstance } from 'vue';
   import Icon from '@/components/Icon/Icon.vue';
+  import { propTypes } from '@/utils/propTypes';
 
-  import { propTypes } from '/@/utils/propTypes';
+  defineOptions({ name: 'DropdownMenuItem' });
 
-  export default defineComponent({
-    name: 'DropdownMenuItem',
-    components: { MenuItem: Menu.Item, Icon },
-    props: {
-      // eslint-disable-next-line
-      key: propTypes.string,
-      text: propTypes.string,
-      icon: propTypes.string,
-    },
-    setup(props) {
-      const instance = getCurrentInstance();
-      const itemKey = computed(() => props.key || instance?.vnode?.props?.key);
-      return { itemKey };
-    },
+  const props = defineProps({
+    // eslint-disable-next-line
+    key: propTypes.string,
+    text: propTypes.string,
+    icon: propTypes.string,
   });
+
+  const instance = getCurrentInstance();
+  const itemKey = computed(() => props.key || instance?.vnode?.props?.key);
 </script>

src/layouts/default/header/components/user-dropdown/index.vue

@@ -17,7 +17,7 @@
           icon="ion:document-text-outline"
           v-if="getShowDoc"
         />
-        <MenuDivider v-if="getShowDoc" />
+        <Menu.Divider v-if="getShowDoc" />
         <MenuItem
           v-if="getShowApi"
           key="api"
@@ -41,104 +41,80 @@
   <LockAction @register="register" />
   <ChangeApi @register="registerApi" />
 </template>
-<script lang="ts">
-  // components
+<script lang="ts" setup>
   import { Dropdown, Menu } from 'ant-design-vue';
   import type { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
+  import { computed } from 'vue';
+  import { DOC_URL } from '@/settings/siteSetting';
+  import { useUserStore } from '@/store/modules/user';
+  import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useModal } from '@/components/Modal';
+  import headerImg from '@/assets/images/header.jpg';
+  import { propTypes } from '@/utils/propTypes';
+  import { openWindow } from '@/utils';
+  import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
 
-  import { defineComponent, computed } from 'vue';
+  type MenuEvent = 'logout' | 'doc' | 'lock' | 'api';
 
-  import { DOC_URL } from '/@/settings/siteSetting';
+  const MenuItem = createAsyncComponent(() => import('./DropMenuItem.vue'));
+  const LockAction = createAsyncComponent(() => import('../lock/LockModal.vue'));
+  const ChangeApi = createAsyncComponent(() => import('../ChangeApi/index.vue'));
 
-  import { useUserStore } from '/@/store/modules/user';
-  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useModal } from '/@/components/Modal';
+  defineOptions({ name: 'UserDropdown' });
 
-  import headerImg from '/@/assets/images/header.jpg';
-  import { propTypes } from '/@/utils/propTypes';
-  import { openWindow } from '/@/utils';
+  defineProps({
+    theme: propTypes.oneOf(['dark', 'light']),
+  });
 
-  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  const { prefixCls } = useDesign('header-user-dropdown');
+  const { t } = useI18n();
+  const { getShowDoc, getUseLockPage, getShowApi } = useHeaderSetting();
+  const userStore = useUserStore();
 
-  type MenuEvent = 'logout' | 'doc' | 'lock' | 'api';
+  const getUserInfo = computed(() => {
+    const { realName = '', avatar, desc } = userStore.getUserInfo || {};
+    return { realName, avatar: avatar || headerImg, desc };
+  });
 
-  export default defineComponent({
-    name: 'UserDropdown',
-    components: {
-      Dropdown,
-      Menu,
-      MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
-      MenuDivider: Menu.Divider,
-      LockAction: createAsyncComponent(() => import('../lock/LockModal.vue')),
-      ChangeApi: createAsyncComponent(() => import('../ChangeApi/index.vue')),
-    },
-    props: {
-      theme: propTypes.oneOf(['dark', 'light']),
-    },
-    setup() {
-      const { prefixCls } = useDesign('header-user-dropdown');
-      const { t } = useI18n();
-      const { getShowDoc, getUseLockPage, getShowApi } = useHeaderSetting();
-      const userStore = useUserStore();
-
-      const getUserInfo = computed(() => {
-        const { realName = '', avatar, desc } = userStore.getUserInfo || {};
-        return { realName, avatar: avatar || headerImg, desc };
-      });
-
-      const [register, { openModal }] = useModal();
-      const [registerApi, { openModal: openApiModal }] = useModal();
-
-      function handleLock() {
-        openModal(true);
-      }
+  const [register, { openModal }] = useModal();
+  const [registerApi, { openModal: openApiModal }] = useModal();
 
-      function handleApi() {
-        openApiModal(true, {});
-      }
+  function handleLock() {
+    openModal(true);
+  }
 
-      //  login out
-      function handleLoginOut() {
-        userStore.confirmLoginOut();
-      }
+  function handleApi() {
+    openApiModal(true, {});
+  }
 
-      // open doc
-      function openDoc() {
-        openWindow(DOC_URL);
-      }
+  //  login out
+  function handleLoginOut() {
+    userStore.confirmLoginOut();
+  }
 
-      function handleMenuClick(e: MenuInfo) {
-        switch (e.key as MenuEvent) {
-          case 'logout':
-            handleLoginOut();
-            break;
-          case 'doc':
-            openDoc();
-            break;
-          case 'lock':
-            handleLock();
-            break;
-          case 'api':
-            handleApi();
-            break;
-        }
-      }
+  // open doc
+  function openDoc() {
+    openWindow(DOC_URL);
+  }
 
-      return {
-        prefixCls,
-        t,
-        getUserInfo,
-        handleMenuClick,
-        getShowDoc,
-        getShowApi,
-        register,
-        registerApi,
-        getUseLockPage,
-      };
-    },
-  });
+  function handleMenuClick(e: MenuInfo) {
+    switch (e.key as MenuEvent) {
+      case 'logout':
+        handleLoginOut();
+        break;
+      case 'doc':
+        openDoc();
+        break;
+      case 'lock':
+        handleLock();
+        break;
+      case 'api':
+        handleApi();
+        break;
+    }
+  }
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-header-user-dropdown';

src/layouts/default/index.vue

@@ -13,69 +13,50 @@
   </Layout>
 </template>
 
-<script lang="ts">
-  import { defineComponent, computed, unref } from 'vue';
+<script lang="ts" setup>
+  import { computed, unref } from 'vue';
   import { Layout } from 'ant-design-vue';
-  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
 
   import LayoutHeader from './header/index.vue';
   import LayoutContent from './content/index.vue';
   import LayoutSideBar from './sider/index.vue';
   import LayoutMultipleHeader from './header/MultipleHeader.vue';
 
-  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useLockPage } from '/@/hooks/web/useLockPage';
-
-  import { useAppInject } from '/@/hooks/web/useAppInject';
-
-  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
-
-  export default defineComponent({
-    name: 'DefaultLayout',
-    components: {
-      LayoutFeatures: createAsyncComponent(() => import('/@/layouts/default/feature/index.vue')),
-      LayoutFooter: createAsyncComponent(() => import('/@/layouts/default/footer/index.vue')),
-      LayoutHeader,
-      LayoutContent,
-      LayoutSideBar,
-      LayoutMultipleHeader,
-      Layout,
-    },
-    setup() {
-      const { prefixCls } = useDesign('default-layout');
-      const { getIsMobile } = useAppInject();
-      const { getShowFullHeaderRef } = useHeaderSetting();
-      const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting();
-      const { getAutoCollapse } = useMultipleTabSetting();
-
-      // Create a lock screen monitor
-      const lockEvents = useLockPage();
-
-      const layoutClass = computed(() => {
-        let cls: string[] = ['ant-layout'];
-        if (unref(getIsMixSidebar) || unref(getShowMenu)) {
-          cls.push('ant-layout-has-sider');
-        }
+  import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
+  import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useLockPage } from '@/hooks/web/useLockPage';
 
-        if (!unref(getShowMenu) && unref(getAutoCollapse)) {
-          cls.push('ant-layout-auto-collapse-tabs');
-        }
+  import { useAppInject } from '@/hooks/web/useAppInject';
+
+  import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
+
+  const LayoutFeatures = createAsyncComponent(() => import('@/layouts/default/feature/index.vue'));
+  const LayoutFooter = createAsyncComponent(() => import('@/layouts/default/footer/index.vue'));
+
+  defineOptions({ name: 'DefaultLayout' });
+
+  const { prefixCls } = useDesign('default-layout');
+  const { getIsMobile } = useAppInject();
+  const { getShowFullHeaderRef } = useHeaderSetting();
+  const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting();
+  const { getAutoCollapse } = useMultipleTabSetting();
+
+  // Create a lock screen monitor
+  const lockEvents = useLockPage();
+
+  const layoutClass = computed(() => {
+    let cls: string[] = ['ant-layout'];
+    if (unref(getIsMixSidebar) || unref(getShowMenu)) {
+      cls.push('ant-layout-has-sider');
+    }
+
+    if (!unref(getShowMenu) && unref(getAutoCollapse)) {
+      cls.push('ant-layout-auto-collapse-tabs');
+    }
 
-        return cls;
-      });
-
-      return {
-        getShowFullHeaderRef,
-        getShowSidebar,
-        prefixCls,
-        getIsMobile,
-        getIsMixSidebar,
-        layoutClass,
-        lockEvents,
-      };
-    },
+    return cls;
   });
 </script>
 <style lang="less">

src/layouts/default/menu/index.vue

@@ -2,23 +2,23 @@
   import type { PropType, CSSProperties } from 'vue';
 
   import { computed, defineComponent, unref, toRef } from 'vue';
-  import { BasicMenu } from '/@/components/Menu';
-  import { SimpleMenu } from '/@/components/SimpleMenu';
-  import { AppLogo } from '/@/components/Application';
+  import { BasicMenu } from '@/components/Menu';
+  import { SimpleMenu } from '@/components/SimpleMenu';
+  import { AppLogo } from '@/components/Application';
 
-  import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
+  import { MenuModeEnum, MenuSplitTyeEnum } from '@/enums/menuEnum';
 
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-  import { ScrollContainer } from '/@/components/Container';
+  import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+  import { ScrollContainer } from '@/components/Container';
 
-  import { useGo } from '/@/hooks/web/usePage';
+  import { useGo } from '@/hooks/web/usePage';
   import { useSplitMenu } from './useLayoutMenu';
-  import { openWindow } from '/@/utils';
-  import { propTypes } from '/@/utils/propTypes';
-  import { isHttpUrl } from '/@/utils/is';
-  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-  import { useAppInject } from '/@/hooks/web/useAppInject';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { openWindow } from '@/utils';
+  import { propTypes } from '@/utils/propTypes';
+  import { isHttpUrl } from '@/utils/is';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
+  import { useAppInject } from '@/hooks/web/useAppInject';
+  import { useDesign } from '@/hooks/web/useDesign';
 
   export default defineComponent({
     name: 'LayoutMenu',

src/layouts/default/menu/useLayoutMenu.ts

@@ -1,13 +1,13 @@
-import type { Menu } from '/@/router/types';
+import type { Menu } from '@/router/types';
 import type { Ref } from 'vue';
 import { watch, unref, ref, computed } from 'vue';
 import { useRouter } from 'vue-router';
-import { MenuSplitTyeEnum } from '/@/enums/menuEnum';
+import { MenuSplitTyeEnum } from '@/enums/menuEnum';
 import { useThrottleFn } from '@vueuse/core';
-import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-import { getChildrenMenus, getCurrentParentPath, getMenus, getShallowMenus } from '/@/router/menus';
-import { usePermissionStore } from '/@/store/modules/permission';
-import { useAppInject } from '/@/hooks/web/useAppInject';
+import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+import { getChildrenMenus, getCurrentParentPath, getMenus, getShallowMenus } from '@/router/menus';
+import { usePermissionStore } from '@/store/modules/permission';
+import { useAppInject } from '@/hooks/web/useAppInject';
 
 export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
   // Menu array

src/layouts/default/setting/SettingDrawer.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, computed, unref } from 'vue';
-import { BasicDrawer } from '/@/components/Drawer/index';
+import { BasicDrawer } from '@/components/Drawer';
 import { Divider } from 'ant-design-vue';
 import {
   TypePicker,
@@ -10,16 +10,16 @@ import {
   InputNumberItem,
 } from './components';
 
-import { AppDarkModeToggle } from '/@/components/Application';
+import { AppDarkModeToggle } from '@/components/Application';
 
-import { MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
+import { MenuTypeEnum, TriggerEnum } from '@/enums/menuEnum';
 
-import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
-import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
-import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
-import { useI18n } from '/@/hooks/web/useI18n';
+import { useRootSetting } from '@/hooks/setting/useRootSetting';
+import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
+import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
+import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting';
+import { useI18n } from '@/hooks/web/useI18n';
 
 import { baseHandler } from './handler';
 
@@ -29,7 +29,7 @@ import {
   topMenuAlignOptions,
   getMenuTriggerOptions,
   routerTransitionOptions,
-  menuTypeList,
+  menuTypeListEnum,
   mixSidebarTriggerOptions,
 } from './enum';
 
@@ -37,8 +37,8 @@ import {
 //   HEADER_PRESET_BG_COLOR_LIST,
 //   SIDE_BAR_BG_COLOR_LIST,
 //   APP_PRESET_COLOR_LIST,
-// } from '/@/settings/designSetting';
-import { SIDE_BAR_BG_COLOR_LIST } from '/@/settings/designSetting';
+// } from '@/settings/designSetting';
+import { SIDE_BAR_BG_COLOR_LIST } from '@/settings/designSetting';
 
 const { t } = useI18n();
 
@@ -101,8 +101,8 @@ export default defineComponent({
       return (
         <>
           <TypePicker
-            menuTypeList={menuTypeList}
-            handler={(item: (typeof menuTypeList)[0]) => {
+            menuTypeList={menuTypeListEnum}
+            handler={(item: (typeof menuTypeListEnum)[0]) => {
               baseHandler(HandlerEnum.CHANGE_LAYOUT, {
                 mode: item.mode,
                 type: item.type,

src/layouts/default/setting/components/InputNumberItem.vue

@@ -9,37 +9,30 @@
     />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, PropType } from 'vue';
+<script lang="ts" setup>
+  import { PropType } from 'vue';
 
   import { InputNumber } from 'ant-design-vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDesign } from '@/hooks/web/useDesign';
   import { baseHandler } from '../handler';
   import { HandlerEnum } from '../enum';
 
-  export default defineComponent({
-    name: 'InputNumberItem',
-    components: { InputNumber },
-    props: {
-      event: {
-        type: Number as PropType<HandlerEnum>,
-      },
-      title: {
-        type: String,
-      },
-    },
-    setup(props) {
-      const { prefixCls } = useDesign('setting-input-number-item');
+  defineOptions({ name: 'InputNumberItem' });
 
-      function handleChange(e) {
-        props.event && baseHandler(props.event, e);
-      }
-      return {
-        prefixCls,
-        handleChange,
-      };
+  const props = defineProps({
+    event: {
+      type: Number as PropType<HandlerEnum>,
+    },
+    title: {
+      type: String,
     },
   });
+
+  const { prefixCls } = useDesign('setting-input-number-item');
+
+  function handleChange(e) {
+    props.event && baseHandler(props.event, e);
+  }
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-setting-input-number-item';

src/layouts/default/setting/components/SelectItem.vue

@@ -11,55 +11,46 @@
     />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, PropType, computed } from 'vue';
+<script lang="ts" setup>
+  import { PropType, computed } from 'vue';
 
   import { Select, type SelectProps } from 'ant-design-vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDesign } from '@/hooks/web/useDesign';
   import { baseHandler } from '../handler';
   import { HandlerEnum } from '../enum';
 
-  export default defineComponent({
-    name: 'SelectItem',
-    components: { Select },
-    props: {
-      event: {
-        type: Number as PropType<HandlerEnum>,
-      },
-      disabled: {
-        type: Boolean,
-      },
-      title: {
-        type: String,
-      },
-      def: {
-        type: [String, Number] as PropType<string | number>,
-      },
-      initValue: {
-        type: [String, Number] as PropType<string | number>,
-      },
-      options: {
-        type: Array as PropType<LabelValueOptions>,
-        default: () => [],
-      },
-    },
-    setup(props) {
-      const { prefixCls } = useDesign('setting-select-item');
-      const getBindValue = computed(() => {
-        return props.def ? { value: props.def, defaultValue: props.initValue || props.def } : {};
-      });
-
-      const handleChange: SelectProps['onChange'] = (val) => {
-        props.event && baseHandler(props.event, val);
-      };
+  defineOptions({ name: 'SelectItem' });
 
-      return {
-        prefixCls,
-        handleChange,
-        getBindValue,
-      };
+  const props = defineProps({
+    event: {
+      type: Number as PropType<HandlerEnum>,
+    },
+    disabled: {
+      type: Boolean,
+    },
+    title: {
+      type: String,
+    },
+    def: {
+      type: [String, Number] as PropType<string | number>,
+    },
+    initValue: {
+      type: [String, Number] as PropType<string | number>,
+    },
+    options: {
+      type: Array as PropType<LabelValueOptions>,
+      default: () => [],
     },
   });
+
+  const { prefixCls } = useDesign('setting-select-item');
+  const getBindValue = computed(() => {
+    return props.def ? { value: props.def, defaultValue: props.initValue || props.def } : {};
+  });
+
+  const handleChange: SelectProps['onChange'] = (val) => {
+    props.event && baseHandler(props.event, val);
+  };
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-setting-select-item';

src/layouts/default/setting/components/SettingFooter.vue

@@ -16,75 +16,64 @@
     </a-button>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, unref } from 'vue';
+<script lang="ts" setup>
+  import { unref } from 'vue';
 
   import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue';
 
-  import { useAppStore } from '/@/store/modules/app';
-  import { usePermissionStore } from '/@/store/modules/permission';
-  import { useMultipleTabStore } from '/@/store/modules/multipleTab';
-  import { useUserStore } from '/@/store/modules/user';
+  import { useAppStore } from '@/store/modules/app';
+  import { usePermissionStore } from '@/store/modules/permission';
+  import { useMultipleTabStore } from '@/store/modules/multipleTab';
+  import { useUserStore } from '@/store/modules/user';
 
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { copyText } from '/@/utils/copyTextToClipboard';
-  import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
-  import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
-  import defaultSetting from '/@/settings/projectSetting';
-  import { updateSidebarBgColor } from '/@/logics/theme/updateBackground';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { copyText } from '@/utils/copyTextToClipboard';
+  import { updateColorWeak } from '@/logics/theme/updateColorWeak';
+  import { updateGrayMode } from '@/logics/theme/updateGrayMode';
+  import defaultSetting from '@/settings/projectSetting';
+  import { updateSidebarBgColor } from '@/logics/theme/updateBackground';
 
-  export default defineComponent({
-    name: 'SettingFooter',
-    components: { CopyOutlined, RedoOutlined },
-    setup() {
-      const permissionStore = usePermissionStore();
-      const { prefixCls } = useDesign('setting-footer');
-      const { t } = useI18n();
-      const { createSuccessModal, createMessage } = useMessage();
-      const tabStore = useMultipleTabStore();
-      const userStore = useUserStore();
-      const appStore = useAppStore();
+  defineOptions({ name: 'SettingFooter' });
 
-      function handleCopy() {
-        copyText(JSON.stringify(unref(appStore.getProjectConfig), null, 2), null);
+  const permissionStore = usePermissionStore();
+  const { prefixCls } = useDesign('setting-footer');
+  const { t } = useI18n();
+  const { createSuccessModal, createMessage } = useMessage();
+  const tabStore = useMultipleTabStore();
+  const userStore = useUserStore();
+  const appStore = useAppStore();
 
-        createSuccessModal({
-          title: t('layout.setting.operatingTitle'),
-          content: t('layout.setting.operatingContent'),
-        });
-      }
-      function handleResetSetting() {
-        try {
-          appStore.setProjectConfig(defaultSetting);
-          const { colorWeak, grayMode } = defaultSetting;
-          updateSidebarBgColor();
-          updateColorWeak(colorWeak);
-          updateGrayMode(grayMode);
-          createMessage.success(t('layout.setting.resetSuccess'));
-        } catch (error: any) {
-          createMessage.error(error);
-        }
-      }
+  function handleCopy() {
+    copyText(JSON.stringify(unref(appStore.getProjectConfig), null, 2), null);
 
-      function handleClearAndRedo() {
-        localStorage.clear();
-        appStore.resetAllState();
-        permissionStore.resetState();
-        tabStore.resetState();
-        userStore.resetState();
-        location.reload();
-      }
-      return {
-        prefixCls,
-        t,
-        handleCopy,
-        handleResetSetting,
-        handleClearAndRedo,
-      };
-    },
-  });
+    createSuccessModal({
+      title: t('layout.setting.operatingTitle'),
+      content: t('layout.setting.operatingContent'),
+    });
+  }
+  function handleResetSetting() {
+    try {
+      appStore.setProjectConfig(defaultSetting);
+      const { colorWeak, grayMode } = defaultSetting;
+      updateSidebarBgColor();
+      updateColorWeak(colorWeak);
+      updateGrayMode(grayMode);
+      createMessage.success(t('layout.setting.resetSuccess'));
+    } catch (error: any) {
+      createMessage.error(error);
+    }
+  }
+
+  function handleClearAndRedo() {
+    localStorage.clear();
+    appStore.resetAllState();
+    permissionStore.resetState();
+    tabStore.resetState();
+    userStore.resetState();
+    location.reload();
+  }
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-setting-footer';

src/layouts/default/setting/components/SwitchItem.vue

@@ -10,52 +10,42 @@
     />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, PropType, computed } from 'vue';
+<script lang="ts" setup>
+  import { PropType, computed } from 'vue';
 
   import { Switch, type SwitchProps } from 'ant-design-vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useI18n } from '@/hooks/web/useI18n';
   import { baseHandler } from '../handler';
   import { HandlerEnum } from '../enum';
 
-  export default defineComponent({
-    name: 'SwitchItem',
-    components: { Switch },
-    props: {
-      event: {
-        type: Number as PropType<HandlerEnum>,
-      },
-      disabled: {
-        type: Boolean,
-      },
-      title: {
-        type: String,
-      },
-      def: {
-        type: Boolean,
-      },
-    },
-    setup(props) {
-      const { prefixCls } = useDesign('setting-switch-item');
-      const { t } = useI18n();
+  defineOptions({ name: 'SwitchItem' });
 
-      const getBindValue = computed(() => {
-        return props.def ? { checked: props.def } : {};
-      });
+  const props = defineProps({
+    event: {
+      type: Number as PropType<HandlerEnum>,
+    },
+    disabled: {
+      type: Boolean,
+    },
+    title: {
+      type: String,
+    },
+    def: {
+      type: Boolean,
+    },
+  });
 
-      const handleChange: SwitchProps['onChange'] = (val) => {
-        props.event && baseHandler(props.event, val);
-      };
+  const { prefixCls } = useDesign('setting-switch-item');
+  const { t } = useI18n();
 
-      return {
-        prefixCls,
-        t,
-        handleChange,
-        getBindValue,
-      };
-    },
+  const getBindValue = computed(() => {
+    return props.def ? { checked: props.def } : {};
   });
+
+  const handleChange: SwitchProps['onChange'] = (val) => {
+    props.event && baseHandler(props.event, val);
+  };
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-setting-switch-item';

src/layouts/default/setting/components/ThemeColorPicker.vue

@@ -16,42 +16,35 @@
     </template>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, PropType } from 'vue';
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
   import { CheckOutlined } from '@ant-design/icons-vue';
 
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDesign } from '@/hooks/web/useDesign';
 
   import { baseHandler } from '../handler';
   import { HandlerEnum } from '../enum';
 
-  export default defineComponent({
-    name: 'ThemeColorPicker',
-    components: { CheckOutlined },
-    props: {
-      colorList: {
-        type: Array as PropType<string[]>,
-        default: () => [],
-      },
-      event: {
-        type: Number as PropType<HandlerEnum>,
-      },
-      def: {
-        type: String,
-      },
-    },
-    setup(props) {
-      const { prefixCls } = useDesign('setting-theme-picker');
+  defineOptions({ name: 'ThemeColorPicker' });
 
-      function handleClick(color: string) {
-        props.event && baseHandler(props.event, color);
-      }
-      return {
-        prefixCls,
-        handleClick,
-      };
+  const props = defineProps({
+    colorList: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    event: {
+      type: Number as PropType<HandlerEnum>,
+    },
+    def: {
+      type: String,
     },
   });
+
+  const { prefixCls } = useDesign('setting-theme-picker');
+
+  function handleClick(color: string) {
+    props.event && baseHandler(props.event, color);
+  }
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-setting-theme-picker';

src/layouts/default/setting/components/TypePicker.vue

@@ -18,39 +18,32 @@
     </template>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, PropType } from 'vue';
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
 
   import { Tooltip } from 'ant-design-vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-
-  import { menuTypeList } from '../enum';
-
-  export default defineComponent({
-    name: 'MenuTypePicker',
-    components: { Tooltip },
-    props: {
-      menuTypeList: {
-        type: Array as PropType<typeof menuTypeList>,
-        default: () => [],
-      },
-      handler: {
-        type: Function,
-        default: () => ({}),
-      },
-      def: {
-        type: String,
-        default: '',
-      },
-    },
-    setup() {
-      const { prefixCls } = useDesign('setting-menu-type-picker');
+  import { useDesign } from '@/hooks/web/useDesign';
+
+  import { menuTypeListEnum } from '../enum';
+
+  defineOptions({ name: 'MenuTypePicker' });
 
-      return {
-        prefixCls,
-      };
+  defineProps({
+    menuTypeList: {
+      type: Array as PropType<typeof menuTypeListEnum>,
+      default: () => [],
+    },
+    handler: {
+      type: Function,
+      default: () => ({}),
+    },
+    def: {
+      type: String,
+      default: '',
     },
   });
+
+  const { prefixCls } = useDesign('setting-menu-type-picker');
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-setting-menu-type-picker';

src/layouts/default/setting/components/index.ts

@@ -1,4 +1,4 @@
-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
 
 export const TypePicker = createAsyncComponent(() => import('./TypePicker.vue'));
 export const ThemeColorPicker = createAsyncComponent(() => import('./ThemeColorPicker.vue'));

src/layouts/default/setting/enum.ts

@@ -1,13 +1,13 @@
-import { ContentEnum, RouterTransitionEnum } from '/@/enums/appEnum';
+import { ContentEnum, RouterTransitionEnum } from '@/enums/appEnum';
 import {
   MenuModeEnum,
   MenuTypeEnum,
   TopMenuAlignEnum,
   TriggerEnum,
   MixSidebarTriggerEnum,
-} from '/@/enums/menuEnum';
+} from '@/enums/menuEnum';
 
-import { useI18n } from '/@/hooks/web/useI18n';
+import { useI18n } from '@/hooks/web/useI18n';
 
 const { t } = useI18n();
 
@@ -121,7 +121,7 @@ export const routerTransitionOptions = [
   };
 });
 
-export const menuTypeList = [
+export const menuTypeListEnum = [
   {
     title: t('layout.setting.menuTypeSidebar'),
     mode: MenuModeEnum.INLINE,

src/layouts/default/setting/handler.ts

@@ -1,12 +1,12 @@
 import { HandlerEnum } from './enum';
-import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
-import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
-import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
+import { updateHeaderBgColor, updateSidebarBgColor } from '@/logics/theme/updateBackground';
+import { updateColorWeak } from '@/logics/theme/updateColorWeak';
+import { updateGrayMode } from '@/logics/theme/updateGrayMode';
 
-import { useAppStore } from '/@/store/modules/app';
+import { useAppStore } from '@/store/modules/app';
 import { ProjectConfig } from '/#/config';
-import { updateDarkTheme } from '/@/logics/theme/dark';
-import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+import { updateDarkTheme } from '@/logics/theme/dark';
+import { useRootSetting } from '@/hooks/setting/useRootSetting';
 
 export function baseHandler(event: HandlerEnum, value: any) {
   const appStore = useAppStore();

src/layouts/default/setting/index.vue

@@ -4,23 +4,13 @@
     <SettingDrawer @register="register" />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import SettingDrawer from './SettingDrawer';
   import Icon from '@/components/Icon/Icon.vue';
 
-  import { useDrawer } from '/@/components/Drawer';
+  import { useDrawer } from '@/components/Drawer';
 
-  export default defineComponent({
-    name: 'SettingButton',
-    components: { SettingDrawer, Icon },
-    setup() {
-      const [register, { openDrawer }] = useDrawer();
+  defineOptions({ name: 'SettingButton' });
 
-      return {
-        register,
-        openDrawer,
-      };
-    },
-  });
+  const [register, { openDrawer }] = useDrawer();
 </script>

src/layouts/default/sider/DragBar.vue

@@ -1,43 +1,35 @@
 <template>
   <div :class="getClass" :style="getDragBarStyle"></div>
 </template>
-<script lang="ts">
-  import { defineComponent, computed, unref } from 'vue';
+<script lang="ts" setup>
+  import { computed, unref } from 'vue';
 
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
 
-  export default defineComponent({
-    name: 'DargBar',
-    props: {
-      mobile: Boolean,
-    },
-    setup(props) {
-      const { getMiniWidthNumber, getCollapsed, getCanDrag } = useMenuSetting();
+  defineOptions({ name: 'DargBar' });
 
-      const { prefixCls } = useDesign('darg-bar');
-      const getDragBarStyle = computed(() => {
-        if (unref(getCollapsed)) {
-          return { left: `${unref(getMiniWidthNumber)}px` };
-        }
-        return {};
-      });
+  const props = defineProps({
+    mobile: Boolean,
+  });
+
+  const { getMiniWidthNumber, getCollapsed, getCanDrag } = useMenuSetting();
 
-      const getClass = computed(() => {
-        return [
-          prefixCls,
-          {
-            [`${prefixCls}--hide`]: !unref(getCanDrag) || props.mobile,
-          },
-        ];
-      });
+  const { prefixCls } = useDesign('darg-bar');
+  const getDragBarStyle = computed(() => {
+    if (unref(getCollapsed)) {
+      return { left: `${unref(getMiniWidthNumber)}px` };
+    }
+    return {};
+  });
 
-      return {
-        prefixCls,
-        getDragBarStyle,
-        getClass,
-      };
-    },
+  const getClass = computed(() => {
+    return [
+      prefixCls,
+      {
+        [`${prefixCls}--hide`]: !unref(getCanDrag) || props.mobile,
+      },
+    ];
   });
 </script>
 <style lang="less" scoped>

src/layouts/default/sider/MixSider.vue

@@ -83,273 +83,236 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-  import type { Menu } from '/@/router/types';
+<script lang="ts" setup>
+  import type { Menu } from '@/router/types';
   import type { CSSProperties } from 'vue';
-  import { computed, defineComponent, onMounted, ref, unref, watch } from 'vue';
+  import { computed, onMounted, ref, unref, watch } from 'vue';
   import type { RouteLocationNormalized } from 'vue-router';
-  import { ScrollContainer } from '/@/components/Container';
-  import { SimpleMenu } from '/@/components/SimpleMenu';
+  import { ScrollContainer } from '@/components/Container';
+  import { SimpleMenu } from '@/components/SimpleMenu';
   import Icon from '@/components/Icon/Icon.vue';
-  import { AppLogo } from '/@/components/Application';
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-  import { usePermissionStore } from '/@/store/modules/permission';
+  import { AppLogo } from '@/components/Application';
+  import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+  import { usePermissionStore } from '@/store/modules/permission';
   import { useDragLine } from './useLayoutSider';
-  import { useGlobSetting } from '/@/hooks/setting';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { useGo } from '/@/hooks/web/usePage';
-  import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
-  import clickOutside from '/@/directives/clickOutside';
-  import { getChildrenMenus, getCurrentParentPath, getShallowMenus } from '/@/router/menus';
-  import { listenerRouteChange } from '/@/logics/mitt/routeChange';
+  import { useGlobSetting } from '@/hooks/setting';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { useGo } from '@/hooks/web/usePage';
+  import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '@/enums/appEnum';
+  import vClickOutside from '@/directives/clickOutside';
+  import { getChildrenMenus, getCurrentParentPath, getShallowMenus } from '@/router/menus';
+  import { listenerRouteChange } from '@/logics/mitt/routeChange';
   import LayoutTrigger from '../trigger/index.vue';
-  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
-
-  export default defineComponent({
-    name: 'LayoutMixSider',
-    components: {
-      ScrollContainer,
-      AppLogo,
-      SimpleMenu,
-      Icon,
-      LayoutTrigger,
-      SimpleMenuTag: createAsyncComponent(
-        () => import('/@/components/SimpleMenu/src/SimpleMenuTag.vue'),
-      ),
-    },
-    directives: {
-      clickOutside,
-    },
-    setup() {
-      let menuModules = ref<Menu[]>([]);
-      const activePath = ref('');
-      const childrenMenus = ref<Menu[]>([]);
-      const openMenu = ref(false);
-      const dragBarRef = ref(null);
-      const sideRef = ref(null);
-      const currentRoute = ref<RouteLocationNormalized | null>(null);
-
-      const { prefixCls } = useDesign('layout-mix-sider');
-      const go = useGo();
-      const { t } = useI18n();
-      const {
-        getMenuWidth,
-        getCanDrag,
-        getCloseMixSidebarOnChange,
-        getMenuTheme,
-        getMixSideTrigger,
-        getRealWidth,
-        getMixSideFixed,
-        mixSideHasChildren,
-        setMenuSetting,
-        getIsMixSidebar,
-        getCollapsed,
-      } = useMenuSetting();
-
-      const { title } = useGlobSetting();
-      const permissionStore = usePermissionStore();
-
-      useDragLine(sideRef, dragBarRef, true);
-
-      const getMenuStyle = computed((): CSSProperties => {
-        return {
-          width: unref(openMenu) ? `${unref(getMenuWidth)}px` : 0,
-          left: `${unref(getMixSideWidth)}px`,
-        };
-      });
-
-      const getIsFixed = computed(() => {
-        /* eslint-disable-next-line */
-        mixSideHasChildren.value = unref(childrenMenus).length > 0;
-        const isFixed = unref(getMixSideFixed) && unref(mixSideHasChildren);
-        if (isFixed) {
-          /* eslint-disable-next-line */
-          openMenu.value = true;
-        }
-        return isFixed;
-      });
-
-      const getMixSideWidth = computed(() => {
-        return unref(getCollapsed) ? SIDE_BAR_MINI_WIDTH : SIDE_BAR_SHOW_TIT_MINI_WIDTH;
-      });
-
-      const getDomStyle = computed((): CSSProperties => {
-        const fixedWidth = unref(getIsFixed) ? unref(getRealWidth) : 0;
-        const width = `${unref(getMixSideWidth) + fixedWidth}px`;
-        return getWrapCommonStyle(width);
-      });
-
-      const getWrapStyle = computed((): CSSProperties => {
-        const width = `${unref(getMixSideWidth)}px`;
-        return getWrapCommonStyle(width);
-      });
-
-      const getMenuEvents = computed(() => {
-        return !unref(getMixSideFixed)
-          ? {
-              onMouseleave: () => {
-                setActive(true);
-                closeMenu();
-              },
-            }
-          : {};
-      });
+  import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
+
+  const SimpleMenuTag = createAsyncComponent(
+    () => import('@/components/SimpleMenu/src/SimpleMenuTag.vue'),
+  );
+
+  defineOptions({ name: 'LayoutMixSider' });
+
+  let menuModules = ref<Menu[]>([]);
+  const activePath = ref('');
+  const childrenMenus = ref<Menu[]>([]);
+  const openMenu = ref(false);
+  const dragBarRef = ref(null);
+  const sideRef = ref(null);
+  const currentRoute = ref<RouteLocationNormalized | null>(null);
+
+  const { prefixCls } = useDesign('layout-mix-sider');
+  const go = useGo();
+  const { t } = useI18n();
+  const {
+    getMenuWidth,
+    getCanDrag,
+    getCloseMixSidebarOnChange,
+    getMenuTheme,
+    getMixSideTrigger,
+    getRealWidth,
+    getMixSideFixed,
+    mixSideHasChildren,
+    setMenuSetting,
+    getIsMixSidebar,
+    getCollapsed,
+  } = useMenuSetting();
+
+  const { title } = useGlobSetting();
+  const permissionStore = usePermissionStore();
+
+  useDragLine(sideRef, dragBarRef, true);
+
+  const getMenuStyle = computed((): CSSProperties => {
+    return {
+      width: unref(openMenu) ? `${unref(getMenuWidth)}px` : 0,
+      left: `${unref(getMixSideWidth)}px`,
+    };
+  });
 
-      const getShowDragBar = computed(() => unref(getCanDrag));
+  const getIsFixed = computed(() => {
+    /* eslint-disable-next-line */
+    mixSideHasChildren.value = unref(childrenMenus).length > 0;
+    const isFixed = unref(getMixSideFixed) && unref(mixSideHasChildren);
+    if (isFixed) {
+      /* eslint-disable-next-line */
+      openMenu.value = true;
+    }
+    return isFixed;
+  });
 
-      onMounted(async () => {
-        menuModules.value = await getShallowMenus();
-      });
+  const getMixSideWidth = computed(() => {
+    return unref(getCollapsed) ? SIDE_BAR_MINI_WIDTH : SIDE_BAR_SHOW_TIT_MINI_WIDTH;
+  });
 
-      // Menu changes
-      watch(
-        [() => permissionStore.getLastBuildMenuTime, () => permissionStore.getBackMenuList],
-        async () => {
-          menuModules.value = await getShallowMenus();
-        },
-        {
-          immediate: true,
-        },
-      );
+  const getDomStyle = computed((): CSSProperties => {
+    const fixedWidth = unref(getIsFixed) ? unref(getRealWidth) : 0;
+    const width = `${unref(getMixSideWidth) + fixedWidth}px`;
+    return getWrapCommonStyle(width);
+  });
 
-      listenerRouteChange((route) => {
-        currentRoute.value = route;
-        setActive(true);
-        if (unref(getCloseMixSidebarOnChange)) {
-          closeMenu();
-        }
-      });
-
-      function getWrapCommonStyle(width: string): CSSProperties {
-        return {
-          width,
-          maxWidth: width,
-          minWidth: width,
-          flex: `0 0 ${width}`,
-        };
-      }
+  const getWrapStyle = computed((): CSSProperties => {
+    const width = `${unref(getMixSideWidth)}px`;
+    return getWrapCommonStyle(width);
+  });
 
-      // Process module menu click
-      async function handleModuleClick(path: string, hover = false) {
-        const children = await getChildrenMenus(path);
-        if (unref(activePath) === path) {
-          if (!hover) {
-            if (!unref(openMenu)) {
-              openMenu.value = true;
-            } else {
-              closeMenu();
-            }
-          } else {
-            if (!unref(openMenu)) {
-              openMenu.value = true;
-            }
-          }
-          if (!unref(openMenu)) {
-            setActive();
-          }
-        } else {
-          openMenu.value = true;
-          activePath.value = path;
+  const getMenuEvents = computed(() => {
+    return !unref(getMixSideFixed)
+      ? {
+          onMouseleave: () => {
+            setActive(true);
+            closeMenu();
+          },
         }
+      : {};
+  });
 
-        if (!children || children.length === 0) {
-          if (!hover) go(path);
-          childrenMenus.value = [];
+  const getShowDragBar = computed(() => unref(getCanDrag));
+
+  onMounted(async () => {
+    menuModules.value = await getShallowMenus();
+  });
+
+  // Menu changes
+  watch(
+    [() => permissionStore.getLastBuildMenuTime, () => permissionStore.getBackMenuList],
+    async () => {
+      menuModules.value = await getShallowMenus();
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  listenerRouteChange((route) => {
+    currentRoute.value = route;
+    setActive(true);
+    if (unref(getCloseMixSidebarOnChange)) {
+      closeMenu();
+    }
+  });
+
+  function getWrapCommonStyle(width: string): CSSProperties {
+    return {
+      width,
+      maxWidth: width,
+      minWidth: width,
+      flex: `0 0 ${width}`,
+    };
+  }
+
+  // Process module menu click
+  async function handleModuleClick(path: string, hover = false) {
+    const children = await getChildrenMenus(path);
+    if (unref(activePath) === path) {
+      if (!hover) {
+        if (!unref(openMenu)) {
+          openMenu.value = true;
+        } else {
           closeMenu();
-          return;
         }
-        childrenMenus.value = children;
-      }
-
-      // Set the currently active menu and submenu
-      async function setActive(setChildren = false) {
-        const path = currentRoute.value?.path;
-        if (!path) return;
-        activePath.value = await getCurrentParentPath(path);
-        // hanldeModuleClick(parentPath);
-        if (unref(getIsMixSidebar)) {
-          const activeMenu = unref(menuModules).find((item) => item.path === unref(activePath));
-          const p = activeMenu?.path;
-          if (p) {
-            const children = await getChildrenMenus(p);
-            if (setChildren) {
-              childrenMenus.value = children;
-
-              if (unref(getMixSideFixed)) {
-                openMenu.value = children.length > 0;
-              }
-            }
-            if (children.length === 0) {
-              childrenMenus.value = [];
-            }
-          }
+      } else {
+        if (!unref(openMenu)) {
+          openMenu.value = true;
         }
       }
-
-      function handleMenuClick(path: string) {
-        go(path);
+      if (!unref(openMenu)) {
+        setActive();
       }
+    } else {
+      openMenu.value = true;
+      activePath.value = path;
+    }
 
-      function handleClickOutside() {
-        setActive(true);
-        closeMenu();
-      }
+    if (!children || children.length === 0) {
+      if (!hover) go(path);
+      childrenMenus.value = [];
+      closeMenu();
+      return;
+    }
+    childrenMenus.value = children;
+  }
 
-      function getItemEvents(item: Menu) {
-        if (unref(getMixSideTrigger) === 'hover') {
-          return {
-            onMouseenter: () => handleModuleClick(item.path, true),
-            onClick: async () => {
-              const children = await getChildrenMenus(item.path);
-              if (item.path && (!children || children.length === 0)) go(item.path);
-            },
-          };
+  // Set the currently active menu and submenu
+  async function setActive(setChildren = false) {
+    const path = currentRoute.value?.path;
+    if (!path) return;
+    activePath.value = await getCurrentParentPath(path);
+    // hanldeModuleClick(parentPath);
+    if (unref(getIsMixSidebar)) {
+      const activeMenu = unref(menuModules).find((item) => item.path === unref(activePath));
+      const p = activeMenu?.path;
+      if (p) {
+        const children = await getChildrenMenus(p);
+        if (setChildren) {
+          childrenMenus.value = children;
+
+          if (unref(getMixSideFixed)) {
+            openMenu.value = children.length > 0;
+          }
+        }
+        if (children.length === 0) {
+          childrenMenus.value = [];
         }
-        return {
-          onClick: () => handleModuleClick(item.path),
-        };
       }
+    }
+  }
 
-      function handleFixedMenu() {
-        setMenuSetting({
-          mixSideFixed: !unref(getIsFixed),
-        });
-      }
+  function handleMenuClick(path: string) {
+    go(path);
+  }
 
-      // Close menu
-      function closeMenu() {
-        if (!unref(getIsFixed)) {
-          openMenu.value = false;
-        }
-      }
+  function handleClickOutside() {
+    setActive(true);
+    closeMenu();
+  }
 
+  function getItemEvents(item: Menu) {
+    if (unref(getMixSideTrigger) === 'hover') {
       return {
-        t,
-        prefixCls,
-        menuModules,
-        handleModuleClick: handleModuleClick,
-        activePath,
-        childrenMenus: childrenMenus,
-        getShowDragBar,
-        handleMenuClick,
-        getMenuStyle,
-        handleClickOutside,
-        sideRef,
-        dragBarRef,
-        title,
-        openMenu,
-        getMenuTheme,
-        getItemEvents,
-        getMenuEvents,
-        getDomStyle,
-        handleFixedMenu,
-        getMixSideFixed,
-        getWrapStyle,
-        getCollapsed,
+        onMouseenter: () => handleModuleClick(item.path, true),
+        onClick: async () => {
+          const children = await getChildrenMenus(item.path);
+          if (item.path && (!children || children.length === 0)) go(item.path);
+        },
       };
-    },
-  });
+    }
+    return {
+      onClick: () => handleModuleClick(item.path),
+    };
+  }
+
+  function handleFixedMenu() {
+    setMenuSetting({
+      mixSideFixed: !unref(getIsFixed),
+    });
+  }
+
+  // Close menu
+  function closeMenu() {
+    if (!unref(getIsFixed)) {
+      openMenu.value = false;
+    }
+  }
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-layout-mix-sider';

src/layouts/default/sider/index.vue

@@ -14,34 +14,26 @@
   <Sider v-else />
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
+<script lang="ts" setup>
   import Sider from './LayoutSider.vue';
   import MixSider from './MixSider.vue';
   import { Drawer } from 'ant-design-vue';
 
-  import { useAppInject } from '/@/hooks/web/useAppInject';
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useAppInject } from '@/hooks/web/useAppInject';
+  import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+  import { useDesign } from '@/hooks/web/useDesign';
 
-  export default defineComponent({
-    name: 'SiderWrapper',
-    components: { Sider, Drawer, MixSider },
-    setup() {
-      const { prefixCls } = useDesign('layout-sider-wrapper');
-      const { getIsMobile } = useAppInject();
-      const { setMenuSetting, getCollapsed, getMenuWidth, getIsMixSidebar } = useMenuSetting();
+  defineOptions({ name: 'SiderWrapper' });
 
-      function handleClose() {
-        setMenuSetting({
-          collapsed: true,
-        });
-      }
+  const { prefixCls } = useDesign('layout-sider-wrapper');
+  const { getIsMobile } = useAppInject();
+  const { setMenuSetting, getCollapsed, getMenuWidth, getIsMixSidebar } = useMenuSetting();
 
-      return { prefixCls, getIsMobile, getCollapsed, handleClose, getMenuWidth, getIsMixSidebar };
-    },
-  });
+  function handleClose() {
+    setMenuSetting({
+      collapsed: true,
+    });
+  }
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-layout-sider-wrapper';

src/layouts/default/sider/useLayoutSider.ts

@@ -2,11 +2,11 @@ import type { Ref } from 'vue';
 
 import { computed, unref, onMounted, nextTick } from 'vue';
 
-import { TriggerEnum } from '/@/enums/menuEnum';
+import { TriggerEnum } from '@/enums/menuEnum';
 
-import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
 import { useDebounceFn } from '@vueuse/core';
-import { useAppStore } from '/@/store/modules/app';
+import { useAppStore } from '@/store/modules/app';
 
 /**
  * Handle related operations of menu events

src/layouts/default/tabs/components/FoldButton.vue

@@ -3,40 +3,34 @@
     <Icon :icon="getIcon" />
   </span>
 </template>
-<script lang="ts">
-  import { defineComponent, unref, computed } from 'vue';
+<script lang="ts" setup>
+  import { unref, computed } from 'vue';
   import Icon from '@/components/Icon/Icon.vue';
 
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-  import { triggerWindowResize } from '/@/utils/event';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
+  import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+  import { triggerWindowResize } from '@/utils/event';
 
-  export default defineComponent({
-    name: 'FoldButton',
-    components: { Icon },
-    setup() {
-      const { prefixCls } = useDesign('multiple-tabs-content');
-      const { getShowMenu, setMenuSetting } = useMenuSetting();
-      const { getShowHeader, setHeaderSetting } = useHeaderSetting();
+  defineOptions({ name: 'FoldButton' });
 
-      const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader));
+  const { prefixCls } = useDesign('multiple-tabs-content');
+  const { getShowMenu, setMenuSetting } = useMenuSetting();
+  const { getShowHeader, setHeaderSetting } = useHeaderSetting();
 
-      const getIcon = computed(() =>
-        unref(getIsUnFold) ? 'codicon:screen-normal' : 'codicon:screen-full',
-      );
+  const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader));
 
-      function handleFold() {
-        const isUnFold = unref(getIsUnFold);
-        setMenuSetting({
-          show: isUnFold,
-          hidden: !isUnFold,
-        });
-        setHeaderSetting({ show: isUnFold });
-        triggerWindowResize();
-      }
+  const getIcon = computed(() =>
+    unref(getIsUnFold) ? 'codicon:screen-normal' : 'codicon:screen-full',
+  );
 
-      return { prefixCls, getIcon, handleFold };
-    },
-  });
+  function handleFold() {
+    const isUnFold = unref(getIsUnFold);
+    setMenuSetting({
+      show: isUnFold,
+      hidden: !isUnFold,
+    });
+    setHeaderSetting({ show: isUnFold });
+    triggerWindowResize();
+  }
 </script>

src/layouts/default/tabs/components/SettingButton.vue

@@ -4,27 +4,16 @@
     <SettingDrawer @register="register" />
   </span>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import SettingDrawer from '/@/layouts/default/setting/SettingDrawer';
+<script lang="ts" setup>
+  import SettingDrawer from '@/layouts/default/setting/SettingDrawer';
   import Icon from '@/components/Icon/Icon.vue';
 
-  import { useDrawer } from '/@/components/Drawer';
+  import { useDrawer } from '@/components/Drawer';
 
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDesign } from '@/hooks/web/useDesign';
 
-  export default defineComponent({
-    name: 'SettingButton',
-    components: { SettingDrawer, Icon },
-    setup() {
-      const [register, { openDrawer }] = useDrawer();
-      const { prefixCls } = useDesign('multiple-tabs-content');
+  defineOptions({ name: 'SettingButton' });
 
-      return {
-        register,
-        openDrawer,
-        prefixCls,
-      };
-    },
-  });
+  const [register, { openDrawer }] = useDrawer();
+  const { prefixCls } = useDesign('multiple-tabs-content');
 </script>

src/layouts/default/tabs/components/TabContent.vue

@@ -14,63 +14,50 @@
     </span>
   </Dropdown>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { PropType } from 'vue';
   import type { RouteLocationNormalized } from 'vue-router';
 
-  import { defineComponent, computed, unref } from 'vue';
-  import { Dropdown } from '/@/components/Dropdown/index';
+  import { computed, unref } from 'vue';
+  import { Dropdown } from '@/components/Dropdown';
   import Icon from '@/components/Icon/Icon.vue';
 
   import { TabContentProps } from '../types';
 
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useI18n } from '@/hooks/web/useI18n';
   import { useTabDropdown } from '../useTabDropdown';
 
-  export default defineComponent({
-    name: 'TabContent',
-    components: { Dropdown, Icon },
-    props: {
-      tabItem: {
-        type: Object as PropType<RouteLocationNormalized>,
-        default: null,
-      },
-      isExtra: Boolean,
+  defineOptions({ name: 'TabContent' });
+
+  const props = defineProps({
+    tabItem: {
+      type: Object as PropType<RouteLocationNormalized>,
+      default: null,
     },
-    setup(props) {
-      const { prefixCls } = useDesign('multiple-tabs-content');
-      const { t } = useI18n();
+    isExtra: Boolean,
+  });
 
-      const getTitle = computed(() => {
-        const { tabItem: { meta } = {} } = props;
-        return meta && t(meta.title as string);
-      });
+  const { prefixCls } = useDesign('multiple-tabs-content');
+  const { t } = useI18n();
 
-      const getIsTabs = computed(() => !props.isExtra);
+  const getTitle = computed(() => {
+    const { tabItem: { meta } = {} } = props;
+    return meta && t(meta.title as string);
+  });
 
-      const getTrigger = computed((): ('contextmenu' | 'click' | 'hover')[] =>
-        unref(getIsTabs) ? ['contextmenu'] : ['click'],
-      );
+  const getIsTabs = computed(() => !props.isExtra);
 
-      const { getDropMenuList, handleMenuEvent, handleContextMenu } = useTabDropdown(
-        props as TabContentProps,
-        getIsTabs,
-      );
+  const getTrigger = computed((): ('contextmenu' | 'click' | 'hover')[] =>
+    unref(getIsTabs) ? ['contextmenu'] : ['click'],
+  );
 
-      function handleContext(e) {
-        props.tabItem && handleContextMenu(props.tabItem)(e);
-      }
+  const { getDropMenuList, handleMenuEvent, handleContextMenu } = useTabDropdown(
+    props as TabContentProps,
+    getIsTabs,
+  );
 
-      return {
-        prefixCls,
-        getDropMenuList,
-        handleMenuEvent,
-        handleContext,
-        getTrigger,
-        getIsTabs,
-        getTitle,
-      };
-    },
-  });
+  function handleContext(e) {
+    props.tabItem && handleContextMenu(props.tabItem)(e);
+  }
 </script>

src/layouts/default/tabs/components/TabRedo.vue

@@ -3,33 +3,27 @@
     <RedoOutlined :spin="loading" />
   </span>
 </template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+  import { ref } from 'vue';
   import { RedoOutlined } from '@ant-design/icons-vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useTabs } from '/@/hooks/web/useTabs';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useTabs } from '@/hooks/web/useTabs';
 
-  export default defineComponent({
-    name: 'TabRedo',
-    components: { RedoOutlined },
+  defineOptions({ name: 'TabRedo' });
 
-    setup() {
-      const loading = ref(false);
+  const loading = ref(false);
 
-      const { prefixCls } = useDesign('multiple-tabs-content');
-      const { refreshPage } = useTabs();
+  const { prefixCls } = useDesign('multiple-tabs-content');
+  const { refreshPage } = useTabs();
 
-      async function handleRedo() {
-        loading.value = true;
-        await refreshPage();
-        setTimeout(() => {
-          loading.value = false;
-          // Animation execution time
-        }, 1200);
-      }
-      return { prefixCls, handleRedo, loading };
-    },
-  });
+  async function handleRedo() {
+    loading.value = true;
+    await refreshPage();
+    setTimeout(() => {
+      loading.value = false;
+      // Animation execution time
+    }, 1200);
+  }
 </script>
 <style lang="less" scoped>
   span.anticon-redo {

src/layouts/default/tabs/index.vue

@@ -11,11 +11,11 @@
       @edit="(e) => handleEdit(`${e}`)"
     >
       <template v-for="item in getTabsState" :key="item.query ? item.fullPath : item.path">
-        <TabPane :closable="!(item && item.meta && item.meta.affix)">
+        <Tabs.TabPane :closable="!(item && item.meta && item.meta.affix)">
           <template #tab>
             <TabContent :tabItem="item" />
           </template>
-        </TabPane>
+        </Tabs.TabPane>
       </template>
 
       <template #rightExtra v-if="getShowRedo || getShowQuick">
@@ -27,135 +27,110 @@
     </Tabs>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { RouteLocationNormalized, RouteMeta } from 'vue-router';
 
-  import { defineComponent, computed, unref, ref } from 'vue';
+  import { computed, unref, ref } from 'vue';
 
   import { Tabs } from 'ant-design-vue';
   import TabContent from './components/TabContent.vue';
   import FoldButton from './components/FoldButton.vue';
   import TabRedo from './components/TabRedo.vue';
 
-  import { useGo } from '/@/hooks/web/usePage';
+  import { useGo } from '@/hooks/web/usePage';
 
-  import { useMultipleTabStore } from '/@/store/modules/multipleTab';
-  import { useUserStore } from '/@/store/modules/user';
+  import { useMultipleTabStore } from '@/store/modules/multipleTab';
+  import { useUserStore } from '@/store/modules/user';
 
   import { initAffixTabs, useTabsDrag } from './useMultipleTabs';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
 
-  import { REDIRECT_NAME } from '/@/router/constant';
-  import { listenerRouteChange } from '/@/logics/mitt/routeChange';
+  import { REDIRECT_NAME } from '@/router/constant';
+  import { listenerRouteChange } from '@/logics/mitt/routeChange';
 
   import { useRouter } from 'vue-router';
 
   import { useMouse } from '@vueuse/core';
-  import { multipleTabHeight } from '/@/settings/designSetting';
+  import { multipleTabHeight } from '@/settings/designSetting';
 
   import SettingButton from './components/SettingButton.vue';
-  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-
-  export default defineComponent({
-    name: 'MultipleTabs',
-    components: {
-      TabRedo,
-      FoldButton,
-      Tabs,
-      TabPane: Tabs.TabPane,
-      TabContent,
-      SettingButton,
-    },
-    setup() {
-      const affixTextList = initAffixTabs();
-      const activeKeyRef = ref('');
-
-      useTabsDrag(affixTextList);
-      const tabStore = useMultipleTabStore();
-      const userStore = useUserStore();
-      const router = useRouter();
-
-      const { prefixCls } = useDesign('multiple-tabs');
-      const go = useGo();
-      const { getShowQuick, getShowRedo, getShowFold } = useMultipleTabSetting();
-
-      const getTabsState = computed(() => {
-        return tabStore.getTabList.filter((item) => !item.meta?.hideTab);
-      });
-
-      const unClose = computed(() => unref(getTabsState).length === 1);
-
-      const { y: mouseY } = useMouse();
-
-      const { getShowMenu } = useMenuSetting();
-      const { getShowHeader } = useHeaderSetting();
-      const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader));
-
-      const getWrapClass = computed(() => {
-        return [
-          prefixCls,
-          {
-            [`${prefixCls}--hide-close`]: unref(unClose),
-            [`${prefixCls}--hover`]: unref(mouseY) < multipleTabHeight,
-          },
-        ];
-      });
-
-      listenerRouteChange((route) => {
-        const { name } = route;
-        if (name === REDIRECT_NAME || !route || !userStore.getToken) {
-          return;
-        }
-
-        const { path, fullPath, meta = {} } = route;
-        const { currentActiveMenu, hideTab } = meta as RouteMeta;
-        const isHide = !hideTab ? null : currentActiveMenu;
-        const p = isHide || fullPath || path;
-        if (activeKeyRef.value !== p) {
-          activeKeyRef.value = p as string;
-        }
-
-        if (isHide) {
-          const findParentRoute = router
-            .getRoutes()
-            .find((item) => item.path === currentActiveMenu);
-
-          findParentRoute && tabStore.addTab(findParentRoute as unknown as RouteLocationNormalized);
-        } else {
-          tabStore.addTab(unref(route));
-        }
-      });
-
-      function handleChange(activeKey: any) {
-        activeKeyRef.value = activeKey;
-        go(activeKey, false);
-      }
-
-      // Close the current tab
-      function handleEdit(targetKey: string) {
-        // Added operation to hide, currently only use delete operation
-        if (unref(unClose)) {
-          return;
-        }
-
-        tabStore.closeTabByKey(targetKey, router);
-      }
-      return {
-        getWrapClass,
-        handleEdit,
-        handleChange,
-        activeKeyRef,
-        getTabsState,
-        getShowQuick,
-        getShowRedo,
-        getShowFold,
-        getIsUnFold,
-        getShowHeader,
-      };
-    },
+  import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
+  import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+
+  defineOptions({ name: 'MultipleTabs' });
+
+  const affixTextList = initAffixTabs();
+  const activeKeyRef = ref('');
+
+  useTabsDrag(affixTextList);
+  const tabStore = useMultipleTabStore();
+  const userStore = useUserStore();
+  const router = useRouter();
+
+  const { prefixCls } = useDesign('multiple-tabs');
+  const go = useGo();
+  const { getShowQuick, getShowRedo, getShowFold } = useMultipleTabSetting();
+
+  const getTabsState = computed(() => {
+    return tabStore.getTabList.filter((item) => !item.meta?.hideTab);
   });
+
+  const unClose = computed(() => unref(getTabsState).length === 1);
+
+  const { y: mouseY } = useMouse();
+
+  const { getShowMenu } = useMenuSetting();
+  const { getShowHeader } = useHeaderSetting();
+  const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader));
+
+  const getWrapClass = computed(() => {
+    return [
+      prefixCls,
+      {
+        [`${prefixCls}--hide-close`]: unref(unClose),
+        [`${prefixCls}--hover`]: unref(mouseY) < multipleTabHeight,
+      },
+    ];
+  });
+
+  listenerRouteChange((route) => {
+    const { name } = route;
+    if (name === REDIRECT_NAME || !route || !userStore.getToken) {
+      return;
+    }
+
+    const { path, fullPath, meta = {} } = route;
+    const { currentActiveMenu, hideTab } = meta as RouteMeta;
+    const isHide = !hideTab ? null : currentActiveMenu;
+    const p = isHide || fullPath || path;
+    if (activeKeyRef.value !== p) {
+      activeKeyRef.value = p as string;
+    }
+
+    if (isHide) {
+      const findParentRoute = router.getRoutes().find((item) => item.path === currentActiveMenu);
+
+      findParentRoute && tabStore.addTab(findParentRoute as unknown as RouteLocationNormalized);
+    } else {
+      tabStore.addTab(unref(route));
+    }
+  });
+
+  function handleChange(activeKey: any) {
+    activeKeyRef.value = activeKey;
+    go(activeKey, false);
+  }
+
+  // Close the current tab
+  function handleEdit(targetKey: string) {
+    // Added operation to hide, currently only use delete operation
+    if (unref(unClose)) {
+      return;
+    }
+
+    tabStore.closeTabByKey(targetKey, router);
+  }
 </script>
 <style lang="less">
   @import url('./index.less');

src/layouts/default/tabs/types.ts

@@ -1,4 +1,4 @@
-import type { DropMenu } from '/@/components/Dropdown/index';
+import type { DropMenu } from '@/components/Dropdown';
 import type { RouteLocationNormalized } from 'vue-router';
 
 export enum TabContentEnum {

src/layouts/default/tabs/useMultipleTabs.ts

@@ -1,12 +1,12 @@
 import { toRaw, ref, nextTick } from 'vue';
 import type { RouteLocationNormalized } from 'vue-router';
-import { useDesign } from '/@/hooks/web/useDesign';
-import { useSortable } from '/@/hooks/web/useSortable';
-import { useMultipleTabStore } from '/@/store/modules/multipleTab';
-import { isNil } from '/@/utils/is';
-import projectSetting from '/@/settings/projectSetting';
+import { useDesign } from '@/hooks/web/useDesign';
+import { useSortable } from '@/hooks/web/useSortable';
+import { useMultipleTabStore } from '@/store/modules/multipleTab';
+import { isNil } from '@/utils/is';
+import projectSetting from '@/settings/projectSetting';
 import { useRouter } from 'vue-router';
-import { useI18n } from '/@/hooks/web/useI18n';
+import { useI18n } from '@/hooks/web/useI18n';
 
 const { t } = useI18n();
 

src/layouts/default/tabs/useTabDropdown.ts

@@ -1,13 +1,13 @@
 import type { TabContentProps } from './types';
-import type { DropMenu } from '/@/components/Dropdown';
+import type { DropMenu } from '@/components/Dropdown';
 import type { ComputedRef } from 'vue';
 
 import { computed, unref, reactive } from 'vue';
 import { MenuEventEnum } from './types';
-import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+import { useMultipleTabStore } from '@/store/modules/multipleTab';
 import { RouteLocationNormalized, useRouter } from 'vue-router';
-import { useTabs } from '/@/hooks/web/useTabs';
-import { useI18n } from '/@/hooks/web/useI18n';
+import { useTabs } from '@/hooks/web/useTabs';
+import { useI18n } from '@/hooks/web/useI18n';
 
 export function useTabDropdown(tabContentProps: TabContentProps, getIsTabs: ComputedRef<boolean>) {
   const state = reactive({

src/layouts/default/trigger/HeaderTrigger.vue

@@ -5,9 +5,9 @@
 </template>
 <script lang="ts" setup>
   import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { propTypes } from '/@/utils/propTypes';
+  import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { propTypes } from '@/utils/propTypes';
 
   defineProps({
     theme: propTypes.oneOf(['light', 'dark']),

src/layouts/default/trigger/SiderTrigger.vue

@@ -6,7 +6,7 @@
 </template>
 <script lang="ts" setup>
   import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons-vue';
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
 
   const { getCollapsed, toggleCollapsed } = useMenuSetting();
 </script>

src/layouts/default/trigger/index.vue

@@ -4,7 +4,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { propTypes } from '/@/utils/propTypes';
+  import { propTypes } from '@/utils/propTypes';
   import HeaderTrigger from './HeaderTrigger.vue';
   import SiderTrigger from './SiderTrigger.vue';
 

src/layouts/iframe/index.vue

@@ -9,21 +9,15 @@
     </template>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, unref, computed } from 'vue';
-  import FramePage from '/@/views/sys/iframe/index.vue';
+<script lang="ts" setup>
+  import { unref, computed } from 'vue';
+  import FramePage from '@/views/sys/iframe/index.vue';
 
   import { useFrameKeepAlive } from './useFrameKeepAlive';
 
-  export default defineComponent({
-    name: 'FrameLayout',
-    components: { FramePage },
-    setup() {
-      const { getFramePages, hasRenderFrame, showIframe } = useFrameKeepAlive();
+  defineOptions({ name: 'FrameLayout' });
 
-      const showFrame = computed(() => unref(getFramePages).length > 0);
+  const { getFramePages, hasRenderFrame, showIframe } = useFrameKeepAlive();
 
-      return { getFramePages, hasRenderFrame, showIframe, showFrame };
-    },
-  });
+  const showFrame = computed(() => unref(getFramePages).length > 0);
 </script>

src/layouts/iframe/useFrameKeepAlive.ts

@@ -1,12 +1,12 @@
-import type { AppRouteRecordRaw } from '/@/router/types';
+import type { AppRouteRecordRaw } from '@/router/types';
 
 import { computed, toRaw, unref } from 'vue';
 
-import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+import { useMultipleTabStore } from '@/store/modules/multipleTab';
 
 import { uniqBy } from 'lodash-es';
 
-import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
 
 import { useRouter } from 'vue-router';
 

src/layouts/page/index.vue

@@ -24,47 +24,34 @@
   <FrameLayout v-if="getCanEmbedIFramePage" />
 </template>
 
-<script lang="ts">
-  import { computed, defineComponent, unref } from 'vue';
+<script lang="ts" setup>
+  import { computed, unref } from 'vue';
 
-  import FrameLayout from '/@/layouts/iframe/index.vue';
+  import FrameLayout from '@/layouts/iframe/index.vue';
 
-  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
 
-  import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
-  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+  import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting';
+  import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
   import { getTransitionName } from './transition';
 
-  import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+  import { useMultipleTabStore } from '@/store/modules/multipleTab';
 
-  export default defineComponent({
-    name: 'PageLayout',
-    components: { FrameLayout },
-    setup() {
-      const { getShowMultipleTab } = useMultipleTabSetting();
-      const tabStore = useMultipleTabStore();
+  defineOptions({ name: 'PageLayout' });
 
-      const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();
+  const { getShowMultipleTab } = useMultipleTabSetting();
+  const tabStore = useMultipleTabStore();
 
-      const { getBasicTransition, getEnableTransition } = useTransitionSetting();
+  const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();
 
-      const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab));
+  const { getBasicTransition, getEnableTransition } = useTransitionSetting();
 
-      const getCaches = computed((): string[] => {
-        if (!unref(getOpenKeepAlive)) {
-          return [];
-        }
-        return tabStore.getCachedTabList;
-      });
+  const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab));
 
-      return {
-        getTransitionName,
-        openCache,
-        getEnableTransition,
-        getBasicTransition,
-        getCaches,
-        getCanEmbedIFramePage,
-      };
-    },
+  const getCaches = computed((): string[] => {
+    if (!unref(getOpenKeepAlive)) {
+      return [];
+    }
+    return tabStore.getCachedTabList;
   });
 </script>

src/views/dashboard/analysis/components/VisitAnalysis.vue

@@ -1,12 +1,10 @@
 <template>
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
-<script lang="ts">
-  import { basicProps } from './props';
-</script>
 <script lang="ts" setup>
   import { onMounted, ref, Ref } from 'vue';
   import { useECharts } from '@/hooks/web/useECharts';
+  import { basicProps } from './props';
 
   defineProps({
     ...basicProps,

src/views/dashboard/analysis/components/VisitAnalysisBar.vue

@@ -1,12 +1,10 @@
 <template>
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
-<script lang="ts">
-  import { basicProps } from './props';
-</script>
 <script lang="ts" setup>
   import { onMounted, ref, Ref } from 'vue';
   import { useECharts } from '@/hooks/web/useECharts';
+  import { basicProps } from './props';
 
   defineProps({
     ...basicProps,

src/views/dashboard/workbench/components/ProjectCard.vue

@@ -4,7 +4,7 @@
       <a-button type="link" size="small">更多</a-button>
     </template>
 
-    <CardGrid v-for="item in items" :key="item.title" class="!md:w-1/3 !w-full">
+    <CardGrid v-for="item in groupItems" :key="item.title" class="!md:w-1/3 !w-full">
       <span class="flex">
         <Icon :icon="item.icon" :color="item.color" size="30" />
         <span class="text-lg ml-4">{{ item.title }}</span>
@@ -17,16 +17,8 @@
     </CardGrid>
   </Card>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { Card, CardGrid } from 'ant-design-vue';
   import Icon from '@/components/Icon/Icon.vue';
   import { groupItems } from './data';
-
-  export default defineComponent({
-    components: { Card, CardGrid, Icon },
-    setup() {
-      return { items: groupItems };
-    },
-  });
 </script>