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() {
+  defineOptions({ name: 'LayoutContent' });
+
   const { prefixCls } = useDesign('layout-content');
   const { getOpenPageLoading } = useTransitionSetting();
   const { getLayoutContentMode, getPageLoading } = useRootSetting();
 
   useContentViewHeight();
-      return {
-        prefixCls,
-        getOpenPageLoading,
-        getLayoutContentMode,
-        getPageLoading,
-      };
-    },
-  });
 </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,28 +1,35 @@
-<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';
+
+  defineOptions({ name: 'LayoutFeatures' });
+
+  const LayoutLockPage = createAsyncComponent(() => import('@/views/sys/lock/index.vue'));
+  const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue'));
+
+  const getTarget = () => document.body;
 
-  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();
@@ -44,30 +51,7 @@
   });
 
   const { getShowMultipleTab } = useMultipleTabSetting();
-
-      return {
-        getTarget: () => document.body,
-        getUseOpenBackTop,
-        getIsFixedSettingDrawer,
-        prefixCls,
-        getIsSessionTimeout,
-        getShowMultipleTab,
-        getFullContent,
-      };
-    },
-  });
 </script>
-
-<template>
-  <LayoutLockPage />
-  <BackTop v-if="getUseOpenBackTop" :target="getTarget" />
-  <SettingDrawer
-    v-if="getIsFixedSettingDrawer && (!getShowMultipleTab || getFullContent)"
-    :class="prefixCls"
-  />
-  <SessionTimeoutLogin v-if="getIsSessionTimeout" />
-</template>
-
 <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,28 +8,25 @@
       <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() {
+  defineOptions({ name: 'LayoutFooter' });
+
   const { t } = useI18n();
   const { getShowFooter } = useRootSetting();
   const { currentRoute } = useRouter();
@@ -47,19 +44,6 @@
     }
     return unref(getShowFooter) && !unref(currentRoute).meta?.hiddenFooter;
   });
-
-      return {
-        getShowLayoutFooter,
-        prefixCls,
-        t,
-        DOC_URL,
-        GITHUB_URL,
-        SITE_URL,
-        openWindow,
-        footerRef,
-      };
-    },
-  });
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-layout-footer';

src/layouts/default/header/MultipleHeader.vue

@@ -9,41 +9,35 @@
     <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() {
+
+  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 { getFixed, getShowInsetHeaderRef, getShowFullHeaderRef, getHeaderTheme, getShowHeader } =
+    useHeaderSetting();
 
   const { getFullContent } = useFullContent();
 
@@ -101,20 +95,6 @@
       { [`${prefixCls}--fixed`]: unref(getIsFixed) },
     ];
   });
-
-      return {
-        getClass,
-        prefixCls,
-        getPlaceholderDomStyle,
-        getIsFixed,
-        getWrapStyle,
-        getIsShowPlaceholderDom,
-        getShowTabs,
-        getShowInsetHeaderRef,
-        tabStore,
-      };
-    },
-  });
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-layout-multiple-header';

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,21 +10,18 @@
     </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();
@@ -36,12 +33,4 @@
       errorLogStore.setErrorLogListCount(0);
     });
   }
-
-      return {
-        t,
-        getCount,
-        handleToErrorList,
-      };
-    },
-  });
 </script>

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

@@ -6,19 +6,16 @@
     </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();
   // 重新检查全屏状态
@@ -34,12 +31,4 @@
       ? t('layout.header.tooltipExitFull')
       : t('layout.header.tooltipEntryFull');
   });
-
-      return {
-        getTitle,
-        isFullscreen,
-        toggle,
-      };
-    },
-  });
 </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,22 +24,19 @@
     </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';
+<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';
+  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 },
+  defineOptions({ name: 'LockModal' });
 
-    setup() {
   const { t } = useI18n();
   const { prefixCls } = useDesign('header-lock-modal');
   const userStore = useUserStore();
@@ -82,18 +79,6 @@
     const { avatar } = userStore.getUserInfo;
     return avatar || headerImg;
   });
-
-      return {
-        t,
-        prefixCls,
-        getRealName,
-        register,
-        registerForm,
-        handleLock,
-        avatar,
-      };
-    },
-  });
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-header-lock-modal';

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,37 +43,19 @@
               </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';
+  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,
-    },
-    props: {
+  const props = defineProps({
     list: {
       type: Array as PropType<ListItem[]>,
       default: () => [],
@@ -102,9 +79,10 @@
     onTitleClick: {
       type: Function as PropType<(Recordable) => void>,
     },
-    },
-    emits: ['update:currentPage'],
-    setup(props, { emit }) {
+  });
+
+  const emit = defineEmits(['update:currentPage']);
+
   const { prefixCls } = useDesign('header-notify-list');
   const current = ref(props.currentPage || 1);
   const getData = computed(() => {
@@ -119,7 +97,6 @@
       current.value = v;
     },
   );
-      const isTitleClickable = computed(() => !!props.onTitleClick);
   const getPagination = computed(() => {
     const { list, pageSize } = props;
 
@@ -145,10 +122,6 @@
   function handleTitleClick(item: ListItem) {
     props.onTitleClick && props.onTitleClick(item);
   }
-
-      return { prefixCls, getPagination, getData, handleTitleClick, isTitleClickable };
-    },
-  });
 </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,28 +15,26 @@
               <!-- 绑定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 numberStyle = {};
 
   const count = computed(() => {
     let count = 0;
@@ -51,16 +49,6 @@
     // 可以直接将其标记为已读（为标题添加删除线）,此处演示的代码会切换删除线状态
     record.titleDelete = !record.titleDelete;
   }
-
-      return {
-        prefixCls,
-        listData,
-        count,
-        onNoticeClick,
-        numberStyle: {},
-      };
-    },
-  });
 </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: {
+  const props = defineProps({
     // 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 };
-    },
-  });
 </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,43 +41,33 @@
   <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 { defineComponent, 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 { 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';
 
   type MenuEvent = 'logout' | 'doc' | 'lock' | 'api';
 
-  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: {
+  const MenuItem = createAsyncComponent(() => import('./DropMenuItem.vue'));
+  const LockAction = createAsyncComponent(() => import('../lock/LockModal.vue'));
+  const ChangeApi = createAsyncComponent(() => import('../ChangeApi/index.vue'));
+
+  defineOptions({ name: 'UserDropdown' });
+
+  defineProps({
     theme: propTypes.oneOf(['dark', 'light']),
-    },
-    setup() {
+  });
+
   const { prefixCls } = useDesign('header-user-dropdown');
   const { t } = useI18n();
   const { getShowDoc, getUseLockPage, getShowApi } = useHeaderSetting();
@@ -125,20 +115,6 @@
         break;
     }
   }
-
-      return {
-        prefixCls,
-        t,
-        getUserInfo,
-        handleMenuClick,
-        getShowDoc,
-        getShowApi,
-        register,
-        registerApi,
-        getUseLockPage,
-      };
-    },
-  });
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-header-user-dropdown';

src/layouts/default/index.vue

@@ -13,37 +13,30 @@
   </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 { 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 { useAppInject } from '@/hooks/web/useAppInject';
 
-  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+  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' });
 
-  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();
@@ -65,18 +58,6 @@
 
     return cls;
   });
-
-      return {
-        getShowFullHeaderRef,
-        getShowSidebar,
-        prefixCls,
-        getIsMobile,
-        getIsMixSidebar,
-        layoutClass,
-        lockEvents,
-      };
-    },
-  });
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-default-layout';

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: {
+  defineOptions({ name: 'InputNumberItem' });
+
+  const props = defineProps({
     event: {
       type: Number as PropType<HandlerEnum>,
     },
     title: {
       type: String,
     },
-    },
-    setup(props) {
+  });
+
   const { prefixCls } = useDesign('setting-input-number-item');
 
   function handleChange(e) {
     props.event && baseHandler(props.event, e);
   }
-      return {
-        prefixCls,
-        handleChange,
-      };
-    },
-  });
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-setting-input-number-item';

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

@@ -11,18 +11,17 @@
     />
   </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: {
+  defineOptions({ name: 'SelectItem' });
+
+  const props = defineProps({
     event: {
       type: Number as PropType<HandlerEnum>,
     },
@@ -42,8 +41,8 @@
       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 } : {};
@@ -52,14 +51,6 @@
   const handleChange: SelectProps['onChange'] = (val) => {
     props.event && baseHandler(props.event, val);
   };
-
-      return {
-        prefixCls,
-        handleChange,
-        getBindValue,
-      };
-    },
-  });
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-setting-select-item';

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

@@ -16,29 +16,27 @@
     </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';
+
+  defineOptions({ name: 'SettingFooter' });
 
-  export default defineComponent({
-    name: 'SettingFooter',
-    components: { CopyOutlined, RedoOutlined },
-    setup() {
   const permissionStore = usePermissionStore();
   const { prefixCls } = useDesign('setting-footer');
   const { t } = useI18n();
@@ -76,15 +74,6 @@
     userStore.resetState();
     location.reload();
   }
-      return {
-        prefixCls,
-        t,
-        handleCopy,
-        handleResetSetting,
-        handleClearAndRedo,
-      };
-    },
-  });
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-setting-footer';

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

@@ -10,19 +10,18 @@
     />
   </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: {
+  defineOptions({ name: 'SwitchItem' });
+
+  const props = defineProps({
     event: {
       type: Number as PropType<HandlerEnum>,
     },
@@ -35,8 +34,8 @@
     def: {
       type: Boolean,
     },
-    },
-    setup(props) {
+  });
+
   const { prefixCls } = useDesign('setting-switch-item');
   const { t } = useI18n();
 
@@ -47,15 +46,6 @@
   const handleChange: SwitchProps['onChange'] = (val) => {
     props.event && baseHandler(props.event, val);
   };
-
-      return {
-        prefixCls,
-        t,
-        handleChange,
-        getBindValue,
-      };
-    },
-  });
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-setting-switch-item';

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

@@ -16,19 +16,18 @@
     </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: {
+  defineOptions({ name: 'ThemeColorPicker' });
+
+  const props = defineProps({
     colorList: {
       type: Array as PropType<string[]>,
       default: () => [],
@@ -39,19 +38,13 @@
     def: {
       type: String,
     },
-    },
-    setup(props) {
+  });
+
   const { prefixCls } = useDesign('setting-theme-picker');
 
   function handleClick(color: string) {
     props.event && baseHandler(props.event, color);
   }
-      return {
-        prefixCls,
-        handleClick,
-      };
-    },
-  });
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-setting-theme-picker';

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

@@ -18,20 +18,19 @@
     </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 { useDesign } from '@/hooks/web/useDesign';
 
-  import { menuTypeList } from '../enum';
+  import { menuTypeListEnum } from '../enum';
 
-  export default defineComponent({
-    name: 'MenuTypePicker',
-    components: { Tooltip },
-    props: {
+  defineOptions({ name: 'MenuTypePicker' });
+
+  defineProps({
     menuTypeList: {
-        type: Array as PropType<typeof menuTypeList>,
+      type: Array as PropType<typeof menuTypeListEnum>,
       default: () => [],
     },
     handler: {
@@ -42,15 +41,9 @@
       type: String,
       default: '',
     },
-    },
-    setup() {
-      const { prefixCls } = useDesign('setting-menu-type-picker');
-
-      return {
-        prefixCls,
-      };
-    },
   });
+
+  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';
+
+  defineOptions({ name: 'SettingButton' });
 
-  export default defineComponent({
-    name: 'SettingButton',
-    components: { SettingDrawer, Icon },
-    setup() {
   const [register, { openDrawer }] = useDrawer();
-
-      return {
-        register,
-        openDrawer,
-      };
-    },
-  });
 </script>

src/layouts/default/sider/DragBar.vue

@@ -1,18 +1,18 @@
 <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: {
+  defineOptions({ name: 'DargBar' });
+
+  const props = defineProps({
     mobile: Boolean,
-    },
-    setup(props) {
+  });
+
   const { getMiniWidthNumber, getCollapsed, getCanDrag } = useMenuSetting();
 
   const { prefixCls } = useDesign('darg-bar');
@@ -31,14 +31,6 @@
       },
     ];
   });
-
-      return {
-        prefixCls,
-        getDragBarStyle,
-        getClass,
-      };
-    },
-  });
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-darg-bar';

src/layouts/default/sider/MixSider.vue

@@ -83,45 +83,35 @@
     </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';
+  import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
+
+  const SimpleMenuTag = createAsyncComponent(
+    () => import('@/components/SimpleMenu/src/SimpleMenuTag.vue'),
+  );
+
+  defineOptions({ name: 'LayoutMixSider' });
 
-  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[]>([]);
@@ -323,33 +313,6 @@
       openMenu.value = false;
     }
   }
-
-      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,
-      };
-    },
-  });
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-layout-mix-sider';

src/layouts/default/sider/index.vue

@@ -14,21 +14,17 @@
   <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';
+
+  defineOptions({ name: 'SiderWrapper' });
 
-  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();
@@ -38,10 +34,6 @@
       collapsed: true,
     });
   }
-
-      return { prefixCls, getIsMobile, getCollapsed, handleClose, getMenuWidth, getIsMixSidebar };
-    },
-  });
 </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,19 +3,17 @@
     <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';
+
+  defineOptions({ name: 'FoldButton' });
 
-  export default defineComponent({
-    name: 'FoldButton',
-    components: { Icon },
-    setup() {
   const { prefixCls } = useDesign('multiple-tabs-content');
   const { getShowMenu, setMenuSetting } = useMenuSetting();
   const { getShowHeader, setHeaderSetting } = useHeaderSetting();
@@ -35,8 +33,4 @@
     setHeaderSetting({ show: isUnFold });
     triggerWindowResize();
   }
-
-      return { prefixCls, getIcon, handleFold };
-    },
-  });
 </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';
+
+  defineOptions({ name: 'SettingButton' });
 
-  export default defineComponent({
-    name: 'SettingButton',
-    components: { SettingDrawer, Icon },
-    setup() {
   const [register, { openDrawer }] = useDrawer();
   const { prefixCls } = useDesign('multiple-tabs-content');
-
-      return {
-        register,
-        openDrawer,
-        prefixCls,
-      };
-    },
-  });
 </script>

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

@@ -14,31 +14,30 @@
     </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: {
+  defineOptions({ name: 'TabContent' });
+
+  const props = defineProps({
     tabItem: {
       type: Object as PropType<RouteLocationNormalized>,
       default: null,
     },
     isExtra: Boolean,
-    },
-    setup(props) {
+  });
+
   const { prefixCls } = useDesign('multiple-tabs-content');
   const { t } = useI18n();
 
@@ -61,16 +60,4 @@
   function handleContext(e) {
     props.tabItem && handleContextMenu(props.tabItem)(e);
   }
-
-      return {
-        prefixCls,
-        getDropMenuList,
-        handleMenuEvent,
-        handleContext,
-        getTrigger,
-        getIsTabs,
-        getTitle,
-      };
-    },
-  });
 </script>

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

@@ -3,17 +3,14 @@
     <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 { prefixCls } = useDesign('multiple-tabs-content');
@@ -27,9 +24,6 @@
       // Animation execution time
     }, 1200);
   }
-      return { prefixCls, handleRedo, loading };
-    },
-  });
 </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,48 +27,39 @@
     </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';
+  import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
+  import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+
+  defineOptions({ name: 'MultipleTabs' });
 
-  export default defineComponent({
-    name: 'MultipleTabs',
-    components: {
-      TabRedo,
-      FoldButton,
-      Tabs,
-      TabPane: Tabs.TabPane,
-      TabContent,
-      SettingButton,
-    },
-    setup() {
   const affixTextList = initAffixTabs();
   const activeKeyRef = ref('');
 
@@ -118,9 +109,7 @@
     }
 
     if (isHide) {
-          const findParentRoute = router
-            .getRoutes()
-            .find((item) => item.path === currentActiveMenu);
+      const findParentRoute = router.getRoutes().find((item) => item.path === currentActiveMenu);
 
       findParentRoute && tabStore.addTab(findParentRoute as unknown as RouteLocationNormalized);
     } else {
@@ -142,20 +131,6 @@
 
     tabStore.closeTabByKey(targetKey, router);
   }
-      return {
-        getWrapClass,
-        handleEdit,
-        handleChange,
-        activeKeyRef,
-        getTabsState,
-        getShowQuick,
-        getShowRedo,
-        getShowFold,
-        getIsUnFold,
-        getShowHeader,
-      };
-    },
-  });
 </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() {
+  defineOptions({ name: 'FrameLayout' });
+
   const { getFramePages, hasRenderFrame, showIframe } = useFrameKeepAlive();
 
   const showFrame = computed(() => unref(getFramePages).length > 0);
-
-      return { getFramePages, hasRenderFrame, showIframe, showFrame };
-    },
-  });
 </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,23 +24,21 @@
   <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';
+
+  defineOptions({ name: 'PageLayout' });
 
-  export default defineComponent({
-    name: 'PageLayout',
-    components: { FrameLayout },
-    setup() {
   const { getShowMultipleTab } = useMultipleTabSetting();
   const tabStore = useMultipleTabStore();
 
@@ -56,15 +54,4 @@
     }
     return tabStore.getCachedTabList;
   });
-
-      return {
-        getTransitionName,
-        openCache,
-        getEnableTransition,
-        getBasicTransition,
-        getCaches,
-        getCanEmbedIFramePage,
-      };
-    },
-  });
 </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>