From bab28af986e09d7c27f3ef647e18993c7cfc54e0 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Mon, 20 Nov 2023 12:27:11 +0800
Subject: [PATCH] refactor: components use setup (#3299)

* refactor: /@/ => @/

* refactor: table demo use script setup

* refactor: change /@/ to @/
---
 .vscode/settings.json                         |  52 +-
 src/components/Application/index.ts           |   2 +-
 .../Application/src/AppDarkModeToggle.vue     |  16 +-
 .../Application/src/AppLocalePicker.vue       |   8 +-
 src/components/Application/src/AppLogo.vue    |  12 +-
 .../Application/src/AppProvider.vue           |   8 +-
 .../Application/src/search/AppSearch.vue      |   2 +-
 .../src/search/AppSearchFooter.vue            |   8 +-
 .../Application/src/search/AppSearchModal.vue |   8 +-
 .../Application/src/search/useMenuSearch.ts   |  10 +-
 .../Application/src/useAppContext.ts          |   2 +-
 src/components/Authority/index.ts             |   2 +-
 src/components/Authority/src/Authority.vue    |   6 +-
 src/components/Basic/index.ts                 |   2 +-
 src/components/Basic/src/BasicArrow.vue       |   2 +-
 src/components/Basic/src/BasicHelp.vue        |   8 +-
 src/components/Basic/src/BasicTitle.vue       |   2 +-
 src/components/Button/index.ts                |   2 +-
 .../Button/src/PopConfirmButton.vue           |   4 +-
 src/components/CardList/index.ts              |   2 +-
 src/components/CardList/src/CardList.vue      |  24 +-
 src/components/ClickOutSide/index.ts          |   2 +-
 src/components/CodeEditor/index.ts            |   2 +-
 src/components/CodeEditor/src/CodeEditor.vue  |   2 +-
 .../CodeEditor/src/codemirror/CodeMirror.vue  |   2 +-
 src/components/Container/index.ts             |   2 +-
 .../Container/src/ScrollContainer.vue         | 119 ++--
 .../src/collapse/CollapseContainer.vue        |   6 +-
 .../Container/src/collapse/CollapseHeader.vue |   4 +-
 .../ContextMenu/src/createContextMenu.ts      |   2 +-
 src/components/CountDown/index.ts             |   2 +-
 src/components/CountDown/src/CountButton.vue  |  85 ++-
 .../CountDown/src/CountdownInput.vue          |  30 +-
 src/components/CountTo/index.ts               |   2 +-
 src/components/CountTo/src/CountTo.vue        | 145 +++--
 src/components/Cropper/index.ts               |   2 +-
 src/components/Cropper/src/Cropper.vue        | 240 ++++---
 src/components/Cropper/src/CropperAvatar.vue  | 126 ++--
 src/components/Cropper/src/CropperModal.vue   | 563 ++++++++---------
 src/components/Description/index.ts           |   2 +-
 .../Description/src/Description.vue           |  14 +-
 src/components/Description/src/typing.ts      |   4 +-
 .../Description/src/useDescription.ts         |   2 +-
 src/components/Drawer/index.ts                |   2 +-
 src/components/Drawer/src/BasicDrawer.vue     | 264 ++++----
 .../Drawer/src/components/DrawerFooter.vue    |  61 +-
 .../Drawer/src/components/DrawerHeader.vue    |  41 +-
 src/components/Drawer/src/props.ts            |   2 +-
 src/components/Drawer/src/typing.ts           |   2 +-
 src/components/Drawer/src/useDrawer.ts        |   6 +-
 src/components/Dropdown/index.ts              |   2 +-
 src/components/Excel/index.ts                 |   2 +-
 src/components/Excel/src/ExportExcelModal.vue |  46 +-
 src/components/Excel/src/ImportExcel.vue      | 404 ++++++------
 src/components/FlowChart/index.ts             |   2 +-
 src/components/FlowChart/src/FlowChart.vue    | 251 ++++----
 .../FlowChart/src/FlowChartToolbar.vue        | 211 ++++---
 src/components/Form/src/BasicForm.vue         | 463 +++++++-------
 src/components/Form/src/componentMap.ts       |  10 +-
 .../Form/src/components/ApiCascader.vue       | 316 +++++-----
 .../Form/src/components/ApiRadioGroup.vue     | 208 +++----
 .../Form/src/components/ApiSelect.vue         | 237 ++++---
 .../Form/src/components/ApiTransfer.vue       | 215 +++----
 .../Form/src/components/ApiTree.vue           | 166 +++--
 .../Form/src/components/ApiTreeSelect.vue     | 178 +++---
 .../Form/src/components/FormAction.vue        | 157 +++--
 .../Form/src/components/FormItem.vue          |  10 +-
 .../Form/src/components/RadioButtonGroup.vue  |  83 ++-
 src/components/Form/src/helper.ts             |   8 +-
 src/components/Form/src/hooks/useAdvanced.ts  |   4 +-
 .../Form/src/hooks/useComponentRegister.ts    |   2 +-
 src/components/Form/src/hooks/useForm.ts      |   6 +-
 .../Form/src/hooks/useFormContext.ts          |   2 +-
 .../Form/src/hooks/useFormEvents.ts           |   8 +-
 .../Form/src/hooks/useFormValues.ts           |   4 +-
 .../Form/src/hooks/useLabelWidth.ts           |   2 +-
 src/components/Form/src/props.ts              |   4 +-
 src/components/Form/src/types/form.ts         |   6 +-
 src/components/Icon/Icon.vue                  | 143 ++---
 src/components/Icon/src/IconPicker.vue        |  33 +-
 src/components/Icon/src/SvgIcon.vue           |  69 +--
 src/components/Loading/src/Loading.vue        |  60 +-
 src/components/Loading/src/typing.ts          |   2 +-
 src/components/Markdown/index.ts              |   2 +-
 src/components/Markdown/src/Markdown.vue      | 269 ++++----
 .../Markdown/src/MarkdownViewer.vue           |   2 +-
 src/components/Menu/src/BasicMenu.vue         | 247 ++++----
 .../Menu/src/components/BasicMenuItem.vue     |  19 +-
 .../Menu/src/components/BasicSubMenuItem.vue  |  50 +-
 .../Menu/src/components/MenuItemContent.vue   |  36 +-
 src/components/Menu/src/props.ts              |   8 +-
 src/components/Menu/src/useOpenKeys.ts        |   6 +-
 src/components/Modal/index.ts                 |   2 +-
 src/components/Modal/src/BasicModal.vue       | 315 +++++-----
 src/components/Modal/src/components/Modal.tsx |   2 +-
 .../Modal/src/components/ModalClose.vue       |  76 +--
 .../Modal/src/components/ModalFooter.vue      |  29 +-
 .../Modal/src/components/ModalHeader.vue      |  19 +-
 .../Modal/src/components/ModalWrapper.vue     | 274 ++++----
 src/components/Modal/src/hooks/useModal.ts    |   6 +-
 .../Modal/src/hooks/useModalContext.ts        |   2 +-
 src/components/Modal/src/index.less           |   1 -
 src/components/Modal/src/props.ts             |   2 +-
 src/components/Page/index.ts                  |   2 +-
 src/components/Page/src/PageFooter.vue        |   8 +-
 src/components/Page/src/PageWrapper.vue       |  12 +-
 src/components/Preview/src/Functional.vue     |  10 +-
 src/components/Preview/src/Preview.vue        |  67 +-
 src/components/Preview/src/functional.ts      |   2 +-
 src/components/Prompt/dialog.vue              |   6 +-
 src/components/Prompt/state.ts                |   2 +-
 src/components/Qrcode/index.ts                |   2 +-
 src/components/Qrcode/src/Qrcode.vue          | 200 +++---
 src/components/Qrcode/src/drawLogo.ts         |   2 +-
 src/components/Scrollbar/index.ts             |   1 -
 src/components/Scrollbar/src/Scrollbar.vue    | 192 +++---
 src/components/Scrollbar/src/bar.ts           |   4 +-
 src/components/Scrollbar/src/util.ts          |   3 +-
 src/components/SimpleMenu/src/SimpleMenu.vue  | 247 ++++----
 .../SimpleMenu/src/SimpleMenuTag.vue          | 109 ++--
 .../SimpleMenu/src/SimpleSubMenu.vue          | 110 ++--
 .../SimpleMenu/src/components/Menu.vue        | 241 ++++----
 .../src/components/MenuCollapseTransition.vue | 128 ++--
 .../SimpleMenu/src/components/MenuItem.vue    | 162 +++--
 .../SimpleMenu/src/components/SubMenuItem.vue | 443 +++++++------
 .../src/components/useSimpleMenuContext.ts    |   4 +-
 src/components/SimpleMenu/src/useOpenKeys.ts  |   4 +-
 src/components/StrengthMeter/index.ts         |   2 +-
 .../StrengthMeter/src/StrengthMeter.vue       |  95 ++-
 src/components/Table/index.ts                 |   2 +-
 src/components/Table/src/BasicTable.vue       | 503 +++++++--------
 src/components/Table/src/componentMap.ts      |   2 +-
 .../src/components/EditTableHeaderIcon.vue    |  11 +-
 .../Table/src/components/HeaderCell.vue       |   4 +-
 .../Table/src/components/TableAction.vue      | 195 +++---
 .../Table/src/components/TableFooter.vue      | 132 ++--
 .../Table/src/components/TableHeader.vue      |  53 +-
 .../Table/src/components/TableImg.vue         |  72 +--
 .../Table/src/components/TableTitle.vue       |  59 +-
 .../src/components/editable/CellComponent.ts  |   2 +-
 .../src/components/editable/EditableCell.vue  |  10 +-
 .../Table/src/components/editable/helper.ts   |   2 +-
 .../Table/src/components/editable/index.ts    |   4 +-
 .../src/components/settings/ColumnSetting.vue | 584 ++++++++----------
 .../components/settings/FullScreenSetting.vue |  28 +-
 .../src/components/settings/RedoSetting.vue   |  26 +-
 .../src/components/settings/SizeSetting.vue   |  57 +-
 .../Table/src/components/settings/index.vue   |  69 +--
 src/components/Table/src/const.ts             |   2 +-
 src/components/Table/src/hooks/useColumns.ts  |   8 +-
 .../Table/src/hooks/useCustomRow.ts           |   2 +-
 .../Table/src/hooks/useDataSource.ts          |   4 +-
 .../Table/src/hooks/usePagination.tsx         |   4 +-
 .../Table/src/hooks/useRowSelection.ts        |   4 +-
 src/components/Table/src/hooks/useScrollTo.ts |   2 +-
 src/components/Table/src/hooks/useTable.ts    |   8 +-
 .../Table/src/hooks/useTableFooter.ts         |   2 +-
 .../Table/src/hooks/useTableForm.ts           |   4 +-
 .../Table/src/hooks/useTableHeader.ts         |   4 +-
 .../Table/src/hooks/useTableScroll.ts         |   6 +-
 .../Table/src/hooks/useTableStyle.ts          |   2 +-
 src/components/Table/src/props.ts             |   4 +-
 src/components/Table/src/types/table.ts       |   6 +-
 src/components/Table/src/types/tableAction.ts |   2 +-
 src/components/Time/index.ts                  |   2 +-
 src/components/Time/src/Time.vue              | 172 +++---
 src/components/Tinymce/index.ts               |   2 +-
 src/components/Tinymce/src/Editor.vue         | 442 +++++++------
 src/components/Tinymce/src/ImgUpload.vue      | 106 ++--
 .../Transition/src/CollapseTransition.vue     | 128 ++--
 .../Transition/src/CreateTransition.tsx       |   2 +-
 src/components/Tree/index.ts                  |   2 +-
 src/components/Tree/src/BasicTree.vue         |  14 +-
 .../Tree/src/components/TreeHeader.vue        |   6 +-
 src/components/Tree/src/hooks/useTree.ts      |   2 +-
 src/components/Tree/src/types/tree.ts         |   2 +-
 src/components/Upload/index.ts                |   2 +-
 src/components/Upload/src/BasicUpload.vue     | 125 ++--
 .../Upload/src/components/FileList.vue        |   6 +-
 .../Upload/src/components/ImageUpload.vue     |   4 +-
 .../Upload/src/components/ThumbUrl.vue        |  14 +-
 .../Upload/src/components/UploadModal.vue     | 438 ++++++-------
 .../src/components/UploadPreviewModal.vue     | 103 ++-
 src/components/Upload/src/components/data.tsx |   6 +-
 src/components/Upload/src/hooks/useUpload.ts  |   2 +-
 src/components/Upload/src/props.ts            |   2 +-
 src/components/Upload/src/types/typing.ts     |   4 +-
 src/components/Verify/index.ts                |   2 +-
 src/components/Verify/src/DragVerify.vue      |   4 +-
 src/components/Verify/src/ImgRotate.vue       |   4 +-
 src/components/Verify/src/props.ts            |   2 +-
 src/components/VirtualScroll/index.ts         |   2 +-
 .../VirtualScroll/src/VirtualScroll.vue       |   4 +-
 src/components/VxeTable/index.ts              |   2 +-
 src/components/VxeTable/src/VxeBasicTable.tsx |   2 +-
 src/components/VxeTable/src/componentMap.ts   |   4 +-
 src/components/VxeTable/src/helper.ts         |   2 +-
 src/components/VxeTable/src/setting.ts        |   2 +-
 src/hooks/component/usePageContext.ts         |   2 +-
 src/hooks/event/useBreakpoint.ts              |   4 +-
 src/hooks/event/useScroll.ts                  |   2 +-
 src/hooks/setting/index.ts                    |   2 +-
 src/hooks/setting/useDarkModeTheme.ts         |   4 +-
 src/hooks/setting/useHeaderSetting.ts         |  10 +-
 src/hooks/setting/useMenuSetting.ts           |   8 +-
 src/hooks/setting/useMultipleTabSetting.ts    |   2 +-
 src/hooks/setting/useRootSetting.ts           |   4 +-
 src/hooks/setting/useTransitionSetting.ts     |   2 +-
 src/hooks/web/useAppInject.ts                 |   2 +-
 src/hooks/web/useContentHeight.ts             |   6 +-
 src/hooks/web/useContextMenu.ts               |   4 +-
 src/hooks/web/useDesign.ts                    |   2 +-
 src/hooks/web/useECharts.ts                   |  10 +-
 src/hooks/web/useFullContent.ts               |   2 +-
 src/hooks/web/useI18n.ts                      |   2 +-
 src/hooks/web/useLockPage.ts                  |  15 +-
 src/hooks/web/useMessage.tsx                  |   2 +-
 src/hooks/web/usePage.ts                      |   4 +-
 src/hooks/web/usePermission.ts                |  20 +-
 src/hooks/web/useTabs.ts                      |   4 +-
 src/hooks/web/useTitle.ts                     |   8 +-
 src/hooks/web/useWatermark.ts                 |   6 +-
 src/views/demo/comp/count-to/index.vue        |   2 +-
 src/views/demo/comp/modal/Modal4.vue          |   4 +-
 src/views/demo/comp/scroll/Action.vue         |   4 +-
 src/views/demo/comp/scroll/VirtualScroll.vue  |   2 +-
 src/views/demo/comp/scroll/index.vue          |   2 +-
 src/views/demo/feat/copy/index.vue            |   2 +-
 src/views/demo/form/RefForm.vue               |  10 +-
 src/views/demo/system/menu/MenuDrawer.vue     |   2 +-
 src/views/demo/tree/ActionTree.vue            |   2 +-
 231 files changed, 5790 insertions(+), 6519 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 2b4290e53..b7c75fb14 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -104,38 +104,36 @@
   "i18n-ally.displayLanguage": "zh-CN",
   "i18n-ally.enabledFrameworks": ["vue", "react"],
   "cSpell.words": [
-    "vben",
-    "browserslist",
-    "tailwindcss",
-    "esnext",
+    "antd",
     "antv",
-    "tinymce",
+    "brotli",
+    "browserslist",
+    "codemirror",
+    "commitlint",
+    "cropperjs",
+    "echarts",
+    "esnext",
+    "esno",
+    "iconify",
+    "INTLIFY",
+    "lintstagedrc",
+    "logicflow",
+    "mockjs",
+    "nprogress",
+    "pinia",
+    "pnpm",
     "qrcode",
     "sider",
-    "pinia",
-    "sider",
-    "nprogress",
-    "INTLIFY",
-    "stylelint",
-    "esno",
-    "vitejs",
     "sortablejs",
-    "mockjs",
-    "codemirror",
-    "iconify",
-    "commitlint",
-    "vditor",
-    "echarts",
-    "cropperjs",
-    "logicflow",
-    "vueuse",
-    "zxcvbn",
-    "lintstagedrc",
-    "brotli",
+    "stylelint",
     "tailwindcss",
-    "sider",
-    "pnpm",
-    "antd"
+    "tinymce",
+    "unref",
+    "vben",
+    "vditor",
+    "vitejs",
+    "vueuse",
+    "zxcvbn"
   ],
   "vetur.format.scriptInitialIndent": true,
   "vetur.format.styleInitialIndent": true,
diff --git a/src/components/Application/index.ts b/src/components/Application/index.ts
index d7c513306..e97d33e67 100644
--- a/src/components/Application/index.ts
+++ b/src/components/Application/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 
 import appLogo from './src/AppLogo.vue';
 import appProvider from './src/AppProvider.vue';
diff --git a/src/components/Application/src/AppDarkModeToggle.vue b/src/components/Application/src/AppDarkModeToggle.vue
index 05d6ee817..6b912f1e6 100644
--- a/src/components/Application/src/AppDarkModeToggle.vue
+++ b/src/components/Application/src/AppDarkModeToggle.vue
@@ -7,12 +7,12 @@
 </template>
 <script lang="ts" setup>
   import { computed, unref } from 'vue';
-  import { SvgIcon } from '/@/components/Icon';
-  import { ThemeEnum } from '/@/enums/appEnum';
-  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { updateDarkTheme } from '/@/logics/theme/dark';
-  import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
+  import { SvgIcon } from '@/components/Icon';
+  import { ThemeEnum } from '@/enums/appEnum';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { updateDarkTheme } from '@/logics/theme/dark';
+  import { updateHeaderBgColor, updateSidebarBgColor } from '@/logics/theme/updateBackground';
 
   const { prefixCls } = useDesign('dark-switch');
   const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
@@ -61,7 +61,9 @@
       z-index: 1;
       width: 18px;
       height: 18px;
-      transition: transform 0.5s, background-color 0.5s;
+      transition:
+        transform 0.5s,
+        background-color 0.5s;
       border-radius: 50%;
       background-color: #fff;
       will-change: transform;
diff --git a/src/components/Application/src/AppLocalePicker.vue b/src/components/Application/src/AppLocalePicker.vue
index 51852f326..8e3e68f9d 100644
--- a/src/components/Application/src/AppLocalePicker.vue
+++ b/src/components/Application/src/AppLocalePicker.vue
@@ -19,12 +19,12 @@
 </template>
 <script lang="ts" setup>
   import type { LocaleType } from '/#/config';
-  import type { DropMenu } from '/@/components/Dropdown';
+  import type { DropMenu } from '@/components/Dropdown';
   import { ref, watchEffect, unref, computed } from 'vue';
-  import { Dropdown } from '/@/components/Dropdown';
+  import { Dropdown } from '@/components/Dropdown';
   import Icon from '@/components/Icon/Icon.vue';
-  import { useLocale } from '/@/locales/useLocale';
-  import { localeList } from '/@/settings/localeSetting';
+  import { useLocale } from '@/locales/useLocale';
+  import { localeList } from '@/settings/localeSetting';
 
   const props = defineProps({
     /**
diff --git a/src/components/Application/src/AppLogo.vue b/src/components/Application/src/AppLogo.vue
index c9d992875..73e48acde 100644
--- a/src/components/Application/src/AppLogo.vue
+++ b/src/components/Application/src/AppLogo.vue
@@ -12,12 +12,12 @@
 </template>
 <script lang="ts" setup>
   import { computed, unref } from 'vue';
-  import { useGlobSetting } from '/@/hooks/setting';
-  import { useGo } from '/@/hooks/web/usePage';
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { PageEnum } from '/@/enums/pageEnum';
-  import { useUserStore } from '/@/store/modules/user';
+  import { useGlobSetting } from '@/hooks/setting';
+  import { useGo } from '@/hooks/web/usePage';
+  import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { PageEnum } from '@/enums/pageEnum';
+  import { useUserStore } from '@/store/modules/user';
 
   const props = defineProps({
     /**
diff --git a/src/components/Application/src/AppProvider.vue b/src/components/Application/src/AppProvider.vue
index fe19a8000..54818028c 100644
--- a/src/components/Application/src/AppProvider.vue
+++ b/src/components/Application/src/AppProvider.vue
@@ -1,10 +1,10 @@
 <script lang="ts">
   import { defineComponent, toRefs, ref, unref } from 'vue';
   import { createAppProviderContext } from './useAppContext';
-  import { createBreakpointListen } from '/@/hooks/event/useBreakpoint';
-  import { prefixCls } from '/@/settings/designSetting';
-  import { useAppStore } from '/@/store/modules/app';
-  import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
+  import { createBreakpointListen } from '@/hooks/event/useBreakpoint';
+  import { prefixCls } from '@/settings/designSetting';
+  import { useAppStore } from '@/store/modules/app';
+  import { MenuModeEnum, MenuTypeEnum } from '@/enums/menuEnum';
 
   const props = {
     /**
diff --git a/src/components/Application/src/search/AppSearch.vue b/src/components/Application/src/search/AppSearch.vue
index 63d346ee3..e017f42bf 100644
--- a/src/components/Application/src/search/AppSearch.vue
+++ b/src/components/Application/src/search/AppSearch.vue
@@ -3,7 +3,7 @@
   import { Tooltip } from 'ant-design-vue';
   import { SearchOutlined } from '@ant-design/icons-vue';
   import AppSearchModal from './AppSearchModal.vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
 
   export default defineComponent({
     name: 'AppSearch',
diff --git a/src/components/Application/src/search/AppSearchFooter.vue b/src/components/Application/src/search/AppSearchFooter.vue
index 6c3993854..7c92c7b38 100644
--- a/src/components/Application/src/search/AppSearchFooter.vue
+++ b/src/components/Application/src/search/AppSearchFooter.vue
@@ -12,8 +12,8 @@
 
 <script lang="ts" setup>
   import AppSearchKeyItem from './AppSearchKeyItem.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';
 
   const { prefixCls } = useDesign('app-search-footer');
   const { t } = useI18n();
@@ -44,7 +44,9 @@
       padding-bottom: 2px;
       border-radius: 2px;
       background-color: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
-      box-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
+      box-shadow:
+        inset 0 -2px 0 0 #cdcde6,
+        inset 0 0 1px 1px #fff,
         0 1px 2px 1px rgb(30 35 90 / 40%);
 
       &:nth-child(2),
diff --git a/src/components/Application/src/search/AppSearchModal.vue b/src/components/Application/src/search/AppSearchModal.vue
index 612b372d7..daccd14f6 100644
--- a/src/components/Application/src/search/AppSearchModal.vue
+++ b/src/components/Application/src/search/AppSearchModal.vue
@@ -63,12 +63,12 @@
   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 vClickOutside from '@/directives/clickOutside';
+  import { useDesign } from '@/hooks/web/useDesign';
   import { useRefs } from '@vben/hooks';
   import { useMenuSearch } from './useMenuSearch';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { useAppInject } from '/@/hooks/web/useAppInject';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { useAppInject } from '@/hooks/web/useAppInject';
 
   const props = defineProps({
     visible: { type: Boolean },
diff --git a/src/components/Application/src/search/useMenuSearch.ts b/src/components/Application/src/search/useMenuSearch.ts
index c93879230..5f29c2b8b 100644
--- a/src/components/Application/src/search/useMenuSearch.ts
+++ b/src/components/Application/src/search/useMenuSearch.ts
@@ -1,13 +1,13 @@
-import { type Menu } from '/@/router/types';
+import { type Menu } from '@/router/types';
 import { type AnyFunction } from '@vben/types';
 import { ref, onBeforeMount, unref, Ref, nextTick } from 'vue';
-import { getMenus } from '/@/router/menus';
+import { getMenus } from '@/router/menus';
 import { cloneDeep } from 'lodash-es';
-import { filter, forEach } from '/@/utils/helper/treeHelper';
-import { useGo } from '/@/hooks/web/usePage';
+import { filter, forEach } from '@/utils/helper/treeHelper';
+import { useGo } from '@/hooks/web/usePage';
 import { useScrollTo } from '@vben/hooks';
 import { onKeyStroke, useDebounceFn } from '@vueuse/core';
-import { useI18n } from '/@/hooks/web/useI18n';
+import { useI18n } from '@/hooks/web/useI18n';
 
 export interface SearchResult {
   name: string;
diff --git a/src/components/Application/src/useAppContext.ts b/src/components/Application/src/useAppContext.ts
index 8bdfb4f88..5356cdbdf 100644
--- a/src/components/Application/src/useAppContext.ts
+++ b/src/components/Application/src/useAppContext.ts
@@ -1,5 +1,5 @@
 import { InjectionKey, Ref } from 'vue';
-import { createContext, useContext } from '/@/hooks/core/useContext';
+import { createContext, useContext } from '@/hooks/core/useContext';
 
 export interface AppProviderContextProps {
   prefixCls: Ref<string>;
diff --git a/src/components/Authority/index.ts b/src/components/Authority/index.ts
index 2f0eab7f2..7a862356c 100644
--- a/src/components/Authority/index.ts
+++ b/src/components/Authority/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 import authority from './src/Authority.vue';
 
 export const Authority = withInstall(authority);
diff --git a/src/components/Authority/src/Authority.vue b/src/components/Authority/src/Authority.vue
index 0d3593827..2cfe65788 100644
--- a/src/components/Authority/src/Authority.vue
+++ b/src/components/Authority/src/Authority.vue
@@ -4,9 +4,9 @@
 <script lang="ts">
   import type { PropType } from 'vue';
   import { defineComponent } from 'vue';
-  import { RoleEnum } from '/@/enums/roleEnum';
-  import { usePermission } from '/@/hooks/web/usePermission';
-  import { getSlot } from '/@/utils/helper/tsxHelper';
+  import { RoleEnum } from '@/enums/roleEnum';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { getSlot } from '@/utils/helper/tsxHelper';
 
   export default defineComponent({
     name: 'Authority',
diff --git a/src/components/Basic/index.ts b/src/components/Basic/index.ts
index 97a53a101..3fad74cb1 100644
--- a/src/components/Basic/index.ts
+++ b/src/components/Basic/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 import basicArrow from './src/BasicArrow.vue';
 import basicTitle from './src/BasicTitle.vue';
 import basicHelp from './src/BasicHelp.vue';
diff --git a/src/components/Basic/src/BasicArrow.vue b/src/components/Basic/src/BasicArrow.vue
index 1c3665615..400e3daf2 100644
--- a/src/components/Basic/src/BasicArrow.vue
+++ b/src/components/Basic/src/BasicArrow.vue
@@ -10,7 +10,7 @@
 <script lang="ts" setup>
   import { computed } from 'vue';
   import Icon from '@/components/Icon/Icon.vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDesign } from '@/hooks/web/useDesign';
 
   const props = defineProps({
     /**
diff --git a/src/components/Basic/src/BasicHelp.vue b/src/components/Basic/src/BasicHelp.vue
index 8125844ac..67c5c05e1 100644
--- a/src/components/Basic/src/BasicHelp.vue
+++ b/src/components/Basic/src/BasicHelp.vue
@@ -3,10 +3,10 @@
   import { defineComponent, computed, unref } from 'vue';
   import { Tooltip } from 'ant-design-vue';
   import { InfoCircleOutlined } from '@ant-design/icons-vue';
-  import { getPopupContainer } from '/@/utils';
-  import { isString, isArray } from '/@/utils/is';
-  import { getSlot } from '/@/utils/helper/tsxHelper';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { getPopupContainer } from '@/utils';
+  import { isString, isArray } from '@/utils/is';
+  import { getSlot } from '@/utils/helper/tsxHelper';
+  import { useDesign } from '@/hooks/web/useDesign';
 
   const props = {
     /**
diff --git a/src/components/Basic/src/BasicTitle.vue b/src/components/Basic/src/BasicTitle.vue
index 8ad399f67..06ca7ef7a 100644
--- a/src/components/Basic/src/BasicTitle.vue
+++ b/src/components/Basic/src/BasicTitle.vue
@@ -8,7 +8,7 @@
   import type { PropType } from 'vue';
   import { useSlots, computed } from 'vue';
   import BasicHelp from './BasicHelp.vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDesign } from '@/hooks/web/useDesign';
 
   const props = defineProps({
     /**
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
index 98add5c30..49ad67a8f 100644
--- a/src/components/Button/index.ts
+++ b/src/components/Button/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 import type { ExtractPropTypes } from 'vue';
 import button from './src/BasicButton.vue';
 import popConfirmButton from './src/PopConfirmButton.vue';
diff --git a/src/components/Button/src/PopConfirmButton.vue b/src/components/Button/src/PopConfirmButton.vue
index 4c90ace66..1e33889f4 100644
--- a/src/components/Button/src/PopConfirmButton.vue
+++ b/src/components/Button/src/PopConfirmButton.vue
@@ -2,10 +2,10 @@
   import { computed, defineComponent, h, unref } from 'vue';
   import BasicButton from './BasicButton.vue';
   import { Popconfirm } from 'ant-design-vue';
-  import { extendSlots } from '/@/utils/helper/tsxHelper';
+  import { extendSlots } from '@/utils/helper/tsxHelper';
   import { omit } from 'lodash-es';
   import { useAttrs } from '@vben/hooks';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
 
   const props = {
     /**
diff --git a/src/components/CardList/index.ts b/src/components/CardList/index.ts
index b977c1b16..e4c6a2136 100644
--- a/src/components/CardList/index.ts
+++ b/src/components/CardList/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 import cardList from './src/CardList.vue';
 
 export const CardList = withInstall(cardList);
diff --git a/src/components/CardList/src/CardList.vue b/src/components/CardList/src/CardList.vue
index efa8e4305..f2cbe4e01 100644
--- a/src/components/CardList/src/CardList.vue
+++ b/src/components/CardList/src/CardList.vue
@@ -10,22 +10,23 @@
         :pagination="paginationProp"
       >
         <template #header>
-          <div class="flex justify-end space-x-2"
-            ><slot name="header"></slot>
+          <div class="flex justify-end space-x-2">
+            <slot name="header"> </slot>
             <Tooltip>
               <template #title>
-                <div class="w-50">每行显示数量</div
-                ><Slider
+                <div class="w-50">每行显示数量</div>
+                <Slider
                   id="slider"
                   v-bind="sliderProp"
                   v-model:value="grid"
                   @change="sliderChange"
-              /></template>
-              <Button><TableOutlined /></Button>
+                />
+              </template>
+              <a-button><TableOutlined /></a-button>
             </Tooltip>
             <Tooltip @click="fetch">
               <template #title>刷新</template>
-              <Button><RedoOutlined /></Button>
+              <a-button><RedoOutlined /></a-button>
             </Tooltip>
           </div>
         </template>
@@ -83,11 +84,10 @@
     TableOutlined,
   } from '@ant-design/icons-vue';
   import { List, Card, Image, Typography, Tooltip, Slider, Avatar } from 'ant-design-vue';
-  import { Dropdown } from '/@/components/Dropdown';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { propTypes } from '/@/utils/propTypes';
-  import { Button } from '/@/components/Button';
-  import { isFunction } from '/@/utils/is';
+  import { Dropdown } from '@/components/Dropdown';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { propTypes } from '@/utils/propTypes';
+  import { isFunction } from '@/utils/is';
   import { useSlider, grid } from './data';
 
   const ListItem = List.Item;
diff --git a/src/components/ClickOutSide/index.ts b/src/components/ClickOutSide/index.ts
index 5e7dd2d33..19c90333b 100644
--- a/src/components/ClickOutSide/index.ts
+++ b/src/components/ClickOutSide/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 import clickOutSide from './src/ClickOutSide.vue';
 
 export const ClickOutSide = withInstall(clickOutSide);
diff --git a/src/components/CodeEditor/index.ts b/src/components/CodeEditor/index.ts
index 872bfedf9..996eae1f0 100644
--- a/src/components/CodeEditor/index.ts
+++ b/src/components/CodeEditor/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 import codeEditor from './src/CodeEditor.vue';
 import jsonPreview from './src/json-preview/JsonPreview.vue';
 
diff --git a/src/components/CodeEditor/src/CodeEditor.vue b/src/components/CodeEditor/src/CodeEditor.vue
index 37ab7db26..6416663c8 100644
--- a/src/components/CodeEditor/src/CodeEditor.vue
+++ b/src/components/CodeEditor/src/CodeEditor.vue
@@ -12,7 +12,7 @@
 <script lang="ts" setup>
   import { computed } from 'vue';
   import CodeMirrorEditor from './codemirror/CodeMirror.vue';
-  import { isString } from '/@/utils/is';
+  import { isString } from '@/utils/is';
   import { MODE } from './typing';
 
   const props = defineProps({
diff --git a/src/components/CodeEditor/src/codemirror/CodeMirror.vue b/src/components/CodeEditor/src/codemirror/CodeMirror.vue
index f7c575019..796bdc4db 100644
--- a/src/components/CodeEditor/src/codemirror/CodeMirror.vue
+++ b/src/components/CodeEditor/src/codemirror/CodeMirror.vue
@@ -20,7 +20,7 @@
   import type { Nullable } from '@vben/types';
   import { useWindowSizeFn } from '@vben/hooks';
   import { useDebounceFn } from '@vueuse/core';
-  import { useAppStore } from '/@/store/modules/app';
+  import { useAppStore } from '@/store/modules/app';
   import CodeMirror from 'codemirror';
   import { MODE } from './../typing';
   // css
diff --git a/src/components/Container/index.ts b/src/components/Container/index.ts
index 502a0dd24..4a90c3df7 100644
--- a/src/components/Container/index.ts
+++ b/src/components/Container/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 import collapseContainer from './src/collapse/CollapseContainer.vue';
 import scrollContainer from './src/ScrollContainer.vue';
 
diff --git a/src/components/Container/src/ScrollContainer.vue b/src/components/Container/src/ScrollContainer.vue
index 2580eec9a..489b67349 100644
--- a/src/components/Container/src/ScrollContainer.vue
+++ b/src/components/Container/src/ScrollContainer.vue
@@ -9,80 +9,69 @@
   </Scrollbar>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref, unref, nextTick } from 'vue';
-  import { Scrollbar, ScrollbarType } from '/@/components/Scrollbar';
+<script lang="ts" setup>
+  import { ref, unref, nextTick } from 'vue';
+  import { Scrollbar, ScrollbarType } from '@/components/Scrollbar';
   import { useScrollTo } from '@vben/hooks';
   import { type Nullable } from '@vben/types';
 
-  export default defineComponent({
-    name: 'ScrollContainer',
-    components: { Scrollbar },
-    props: {
-      scrollHeight: { type: Number },
+  defineOptions({ name: 'ScrollContainer' });
+
+  defineProps({
+    scrollHeight: {
+      type: Number,
     },
-    setup() {
-      const scrollbarRef = ref<Nullable<ScrollbarType>>(null);
+  });
 
-      /**
-       * Scroll to the specified position
-       */
-      function scrollTo(to: number, duration = 500) {
-        const scrollbar = unref(scrollbarRef);
-        if (!scrollbar) {
-          return;
-        }
-        nextTick(() => {
-          const wrap = unref(scrollbar.wrap);
-          if (!wrap) {
-            return;
-          }
-          const { start } = useScrollTo({
-            el: wrap,
-            to,
-            duration,
-          });
-          start();
-        });
+  const scrollbarRef = ref<Nullable<ScrollbarType>>(null);
+
+  function getScrollWrap() {
+    const scrollbar = unref(scrollbarRef);
+    if (!scrollbar) {
+      return null;
+    }
+    return scrollbar.wrap;
+  }
+
+  /**
+   * Scroll to the specified position
+   */
+  function scrollTo(to: number, duration = 500) {
+    const wrap = unref(getScrollWrap());
+    nextTick(() => {
+      if (!wrap) {
+        return;
       }
+      const { start } = useScrollTo({
+        el: wrap,
+        to,
+        duration,
+      });
+      start();
+    });
+  }
 
-      function getScrollWrap() {
-        const scrollbar = unref(scrollbarRef);
-        if (!scrollbar) {
-          return null;
-        }
-        return scrollbar.wrap;
+  /**
+   * Scroll to the bottom
+   */
+  function scrollBottom() {
+    const wrap = unref(getScrollWrap());
+    nextTick(() => {
+      if (!wrap) {
+        return;
       }
+      const scrollHeight = wrap.scrollHeight as number;
+      const { start } = useScrollTo({
+        el: wrap,
+        to: scrollHeight,
+      });
+      start();
+    });
+  }
 
-      /**
-       * Scroll to the bottom
-       */
-      function scrollBottom() {
-        const scrollbar = unref(scrollbarRef);
-        if (!scrollbar) {
-          return;
-        }
-        nextTick(() => {
-          const wrap = unref(scrollbar.wrap) as any;
-          if (!wrap) {
-            return;
-          }
-          const scrollHeight = wrap.scrollHeight as number;
-          const { start } = useScrollTo({
-            el: wrap,
-            to: scrollHeight,
-          });
-          start();
-        });
-      }
-
-      return {
-        scrollbarRef,
-        scrollTo,
-        scrollBottom,
-        getScrollWrap,
-      };
-    },
+  defineExpose({
+    scrollTo,
+    scrollBottom,
   });
 </script>
 <style lang="less">
diff --git a/src/components/Container/src/collapse/CollapseContainer.vue b/src/components/Container/src/collapse/CollapseContainer.vue
index c9128b0da..c3a43c88c 100644
--- a/src/components/Container/src/collapse/CollapseContainer.vue
+++ b/src/components/Container/src/collapse/CollapseContainer.vue
@@ -3,10 +3,10 @@
   import { isNil } from 'lodash-es';
   import { Skeleton } from 'ant-design-vue';
   import { useTimeoutFn } from '@vben/hooks';
-  import { CollapseTransition } from '/@/components/Transition';
+  import { CollapseTransition } from '@/components/Transition';
   import CollapseHeader from './CollapseHeader.vue';
-  import { triggerWindowResize } from '/@/utils/event';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { triggerWindowResize } from '@/utils/event';
+  import { useDesign } from '@/hooks/web/useDesign';
 
   const collapseContainerProps = {
     title: { type: String, default: '' },
diff --git a/src/components/Container/src/collapse/CollapseHeader.vue b/src/components/Container/src/collapse/CollapseHeader.vue
index 8b80cf8ce..b49bb2a0b 100644
--- a/src/components/Container/src/collapse/CollapseHeader.vue
+++ b/src/components/Container/src/collapse/CollapseHeader.vue
@@ -1,7 +1,7 @@
 <script lang="tsx">
   import { defineComponent, computed, unref, type ExtractPropTypes, PropType } from 'vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { BasicArrow, BasicTitle } from '/@/components/Basic';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { BasicArrow, BasicTitle } from '@/components/Basic';
 
   const collapseHeaderProps = {
     prefixCls: String,
diff --git a/src/components/ContextMenu/src/createContextMenu.ts b/src/components/ContextMenu/src/createContextMenu.ts
index 0d93290bc..e5bd2cf99 100644
--- a/src/components/ContextMenu/src/createContextMenu.ts
+++ b/src/components/ContextMenu/src/createContextMenu.ts
@@ -1,5 +1,5 @@
 import contextMenuVue from './ContextMenu.vue';
-import { isClient } from '/@/utils/is';
+import { isClient } from '@/utils/is';
 import { CreateContextOptions, ContextMenuProps } from './typing';
 import { createVNode, render } from 'vue';
 
diff --git a/src/components/CountDown/index.ts b/src/components/CountDown/index.ts
index 980941694..0da9d31aa 100644
--- a/src/components/CountDown/index.ts
+++ b/src/components/CountDown/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 import countButton from './src/CountButton.vue';
 import countdownInput from './src/CountdownInput.vue';
 
diff --git a/src/components/CountDown/src/CountButton.vue b/src/components/CountDown/src/CountButton.vue
index 1ef520ede..74e45ccd7 100644
--- a/src/components/CountDown/src/CountButton.vue
+++ b/src/components/CountDown/src/CountButton.vue
@@ -3,60 +3,53 @@
     {{ getButtonText }}
   </Button>
 </template>
-<script lang="ts">
-  import { defineComponent, ref, watchEffect, computed, unref } from 'vue';
+<script lang="ts" setup>
+  import { ref, watchEffect, computed, unref } from 'vue';
   import { Button } from 'ant-design-vue';
   import { useCountdown } from './useCountdown';
-  import { isFunction } from '/@/utils/is';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { isFunction } from '@/utils/is';
+  import { useI18n } from '@/hooks/web/useI18n';
 
-  const props = {
+  defineOptions({ name: 'CountButton' });
+
+  const props = defineProps({
     value: { type: [Object, Number, String, Array] },
     count: { type: Number, default: 60 },
     beforeStartFunc: {
       type: Function as PropType<() => Promise<boolean>>,
       default: null,
     },
-  };
-
-  export default defineComponent({
-    name: 'CountButton',
-    components: { Button },
-    props,
-    setup(props) {
-      const loading = ref(false);
-
-      const { currentCount, isStart, start, reset } = useCountdown(props.count);
-      const { t } = useI18n();
-
-      const getButtonText = computed(() => {
-        return !unref(isStart)
-          ? t('component.countdown.normalText')
-          : t('component.countdown.sendText', [unref(currentCount)]);
-      });
-
-      watchEffect(() => {
-        props.value === undefined && reset();
-      });
-
-      /**
-       * @description: Judge whether there is an external function before execution, and decide whether to start after execution
-       */
-      async function handleStart() {
-        const { beforeStartFunc } = props;
-        if (beforeStartFunc && isFunction(beforeStartFunc)) {
-          loading.value = true;
-          try {
-            const canStart = await beforeStartFunc();
-            canStart && start();
-          } finally {
-            loading.value = false;
-          }
-        } else {
-          start();
-        }
-      }
-      return { handleStart, currentCount, loading, getButtonText, isStart };
-    },
   });
+
+  const { t } = useI18n();
+  const loading = ref(false);
+  const { currentCount, isStart, start, reset } = useCountdown(props.count);
+
+  const getButtonText = computed(() => {
+    return !unref(isStart)
+      ? t('component.countdown.normalText')
+      : t('component.countdown.sendText', [unref(currentCount)]);
+  });
+
+  watchEffect(() => {
+    props.value === undefined && reset();
+  });
+
+  /**
+   * @description: Judge whether there is an external function before execution, and decide whether to start after execution
+   */
+  async function handleStart() {
+    const { beforeStartFunc } = props;
+    if (beforeStartFunc && isFunction(beforeStartFunc)) {
+      loading.value = true;
+      try {
+        const canStart = await beforeStartFunc();
+        canStart && start();
+      } finally {
+        loading.value = false;
+      }
+    } else {
+      start();
+    }
+  }
 </script>
diff --git a/src/components/CountDown/src/CountdownInput.vue b/src/components/CountDown/src/CountdownInput.vue
index 5cd939d85..8c3821ffd 100644
--- a/src/components/CountDown/src/CountdownInput.vue
+++ b/src/components/CountDown/src/CountdownInput.vue
@@ -8,34 +8,26 @@
     </template>
   </a-input>
 </template>
-<script lang="ts">
-  import { defineComponent, PropType } from 'vue';
+<script lang="ts" setup>
+  import { PropType } from 'vue';
   import CountButton from './CountButton.vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useRuleFormItem } from '@/hooks/component/useFormItem';
 
-  const props = {
+  defineOptions({ name: 'CountDownInput', inheritAttrs: false });
+
+  const props = defineProps({
     value: { type: String },
-    size: { type: String, validator: (v) => ['default', 'large', 'small'].includes(v) },
+    size: { type: String, validator: (v: string) => ['default', 'large', 'small'].includes(v) },
     count: { type: Number, default: 60 },
     sendCodeApi: {
       type: Function as PropType<() => Promise<boolean>>,
       default: null,
     },
-  };
-
-  export default defineComponent({
-    name: 'CountDownInput',
-    components: { CountButton },
-    inheritAttrs: false,
-    props,
-    setup(props) {
-      const { prefixCls } = useDesign('countdown-input');
-      const [state] = useRuleFormItem(props);
-
-      return { prefixCls, state };
-    },
   });
+
+  const { prefixCls } = useDesign('countdown-input');
+  const [state] = useRuleFormItem(props);
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-countdown-input';
diff --git a/src/components/CountTo/index.ts b/src/components/CountTo/index.ts
index 36a4e65a3..0c4194132 100644
--- a/src/components/CountTo/index.ts
+++ b/src/components/CountTo/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 import countTo from './src/CountTo.vue';
 
 export const CountTo = withInstall(countTo);
diff --git a/src/components/CountTo/src/CountTo.vue b/src/components/CountTo/src/CountTo.vue
index 7de336165..98684a4ec 100644
--- a/src/components/CountTo/src/CountTo.vue
+++ b/src/components/CountTo/src/CountTo.vue
@@ -3,12 +3,14 @@
     {{ value }}
   </span>
 </template>
-<script lang="ts">
-  import { defineComponent, ref, computed, watchEffect, unref, onMounted, watch } from 'vue';
+<script lang="ts" setup>
+  import { ref, computed, watchEffect, unref, onMounted, watch } from 'vue';
   import { useTransition, TransitionPresets } from '@vueuse/core';
-  import { isNumber } from '/@/utils/is';
+  import { isNumber } from '@/utils/is';
 
-  const props = {
+  defineOptions({ name: 'CountTo' });
+
+  const props = defineProps({
     startVal: { type: Number, default: 0 },
     endVal: { type: Number, default: 2021 },
     duration: { type: Number, default: 1500 },
@@ -36,75 +38,70 @@
      * Digital animation
      */
     transition: { type: String, default: 'linear' },
-  };
-
-  export default defineComponent({
-    name: 'CountTo',
-    props,
-    emits: ['onStarted', 'onFinished'],
-    setup(props, { emit }) {
-      const source = ref(props.startVal);
-      const disabled = ref(false);
-      let outputValue = useTransition(source);
-
-      const value = computed(() => formatNumber(unref(outputValue)));
-
-      watchEffect(() => {
-        source.value = props.startVal;
-      });
-
-      watch([() => props.startVal, () => props.endVal], () => {
-        if (props.autoplay) {
-          start();
-        }
-      });
-
-      onMounted(() => {
-        props.autoplay && start();
-      });
-
-      function start() {
-        run();
-        source.value = props.endVal;
-      }
-
-      function reset() {
-        source.value = props.startVal;
-        run();
-      }
-
-      function run() {
-        outputValue = useTransition(source, {
-          disabled,
-          duration: props.duration,
-          onFinished: () => emit('onFinished'),
-          onStarted: () => emit('onStarted'),
-          ...(props.useEasing ? { transition: TransitionPresets[props.transition] } : {}),
-        });
-      }
-
-      function formatNumber(num: number | string) {
-        if (!num && num !== 0) {
-          return '';
-        }
-        const { decimals, decimal, separator, suffix, prefix } = props;
-        num = Number(num).toFixed(decimals);
-        num += '';
-
-        const x = num.split('.');
-        let x1 = x[0];
-        const x2 = x.length > 1 ? decimal + x[1] : '';
-
-        const rgx = /(\d+)(\d{3})/;
-        if (separator && !isNumber(separator)) {
-          while (rgx.test(x1)) {
-            x1 = x1.replace(rgx, '$1' + separator + '$2');
-          }
-        }
-        return prefix + x1 + x2 + suffix;
-      }
-
-      return { value, start, reset };
-    },
   });
+
+  const emit = defineEmits(['onStarted', 'onFinished']);
+
+  const source = ref(props.startVal);
+  const disabled = ref(false);
+  let outputValue = useTransition(source);
+
+  const value = computed(() => formatNumber(unref(outputValue)));
+
+  watchEffect(() => {
+    source.value = props.startVal;
+  });
+
+  watch([() => props.startVal, () => props.endVal], () => {
+    if (props.autoplay) {
+      start();
+    }
+  });
+
+  onMounted(() => {
+    props.autoplay && start();
+  });
+
+  function start() {
+    run();
+    source.value = props.endVal;
+  }
+
+  function reset() {
+    source.value = props.startVal;
+    run();
+  }
+
+  function run() {
+    outputValue = useTransition(source, {
+      disabled,
+      duration: props.duration,
+      onFinished: () => emit('onFinished'),
+      onStarted: () => emit('onStarted'),
+      ...(props.useEasing ? { transition: TransitionPresets[props.transition] } : {}),
+    });
+  }
+
+  function formatNumber(num: number | string) {
+    if (!num && num !== 0) {
+      return '';
+    }
+    const { decimals, decimal, separator, suffix, prefix } = props;
+    num = Number(num).toFixed(decimals);
+    num += '';
+
+    const x = num.split('.');
+    let x1 = x[0];
+    const x2 = x.length > 1 ? decimal + x[1] : '';
+
+    const rgx = /(\d+)(\d{3})/;
+    if (separator && !isNumber(separator)) {
+      while (rgx.test(x1)) {
+        x1 = x1.replace(rgx, '$1' + separator + '$2');
+      }
+    }
+    return prefix + x1 + x2 + suffix;
+  }
+
+  defineExpose({ reset });
 </script>
diff --git a/src/components/Cropper/index.ts b/src/components/Cropper/index.ts
index 88d6d1d53..df20be08f 100644
--- a/src/components/Cropper/index.ts
+++ b/src/components/Cropper/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 import cropperImage from './src/Cropper.vue';
 import avatarCropper from './src/CropperAvatar.vue';
 
diff --git a/src/components/Cropper/src/Cropper.vue b/src/components/Cropper/src/Cropper.vue
index 4523ad434..2cd5809c3 100644
--- a/src/components/Cropper/src/Cropper.vue
+++ b/src/components/Cropper/src/Cropper.vue
@@ -10,13 +10,14 @@
     />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { CSSProperties } from 'vue';
-  import { defineComponent, onMounted, ref, unref, computed, onUnmounted } from 'vue';
+  import { onMounted, ref, unref, computed, onUnmounted } from 'vue';
   import Cropper from 'cropperjs';
   import 'cropperjs/dist/cropper.css';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDesign } from '@/hooks/web/useDesign';
   import { useDebounceFn } from '@vueuse/shared';
+  import { useAttrs } from '@vben/hooks';
 
   type Options = Cropper.Options;
 
@@ -43,7 +44,9 @@
     rotatable: true,
   };
 
-  const props = {
+  defineOptions({ name: 'CropperImage' });
+
+  const props = defineProps({
     src: { type: String, required: true },
     alt: { type: String },
     circled: { type: Boolean, default: false },
@@ -55,124 +58,119 @@
     },
     imageStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
     options: { type: Object as PropType<Options>, default: () => ({}) },
-  };
-
-  export default defineComponent({
-    name: 'CropperImage',
-    props,
-    emits: ['cropend', 'ready', 'cropendError'],
-    setup(props, { attrs, emit }) {
-      const imgElRef = ref<ElRef<HTMLImageElement>>();
-      const cropper = ref<Nullable<Cropper>>();
-      const isReady = ref(false);
-
-      const { prefixCls } = useDesign('cropper-image');
-      const debounceRealTimeCroppered = useDebounceFn(realTimeCroppered, 80);
-
-      const getImageStyle = computed((): CSSProperties => {
-        return {
-          height: props.height,
-          maxWidth: '100%',
-          ...props.imageStyle,
-        };
-      });
-
-      const getClass = computed(() => {
-        return [
-          prefixCls,
-          attrs.class,
-          {
-            [`${prefixCls}--circled`]: props.circled,
-          },
-        ];
-      });
-
-      const getWrapperStyle = computed((): CSSProperties => {
-        return { height: `${props.height}`.replace(/px/, '') + 'px' };
-      });
-
-      onMounted(init);
-
-      onUnmounted(() => {
-        cropper.value?.destroy();
-      });
-
-      async function init() {
-        const imgEl = unref(imgElRef);
-        if (!imgEl) {
-          return;
-        }
-        cropper.value = new Cropper(imgEl, {
-          ...defaultOptions,
-          ready: () => {
-            isReady.value = true;
-            realTimeCroppered();
-            emit('ready', cropper.value);
-          },
-          crop() {
-            debounceRealTimeCroppered();
-          },
-          zoom() {
-            debounceRealTimeCroppered();
-          },
-          cropmove() {
-            debounceRealTimeCroppered();
-          },
-          ...props.options,
-        });
-      }
-
-      // Real-time display preview
-      function realTimeCroppered() {
-        props.realTimePreview && croppered();
-      }
-
-      // event: return base64 and width and height information after cropping
-      function croppered() {
-        if (!cropper.value) {
-          return;
-        }
-        let imgInfo = cropper.value.getData();
-        const canvas = props.circled ? getRoundedCanvas() : cropper.value.getCroppedCanvas();
-        canvas.toBlob((blob) => {
-          if (!blob) {
-            return;
-          }
-          let fileReader: FileReader = new FileReader();
-          fileReader.readAsDataURL(blob);
-          fileReader.onloadend = (e) => {
-            emit('cropend', {
-              imgBase64: e.target?.result ?? '',
-              imgInfo,
-            });
-          };
-          fileReader.onerror = () => {
-            emit('cropendError');
-          };
-        }, 'image/png');
-      }
-
-      // Get a circular picture canvas
-      function getRoundedCanvas() {
-        const sourceCanvas = cropper.value!.getCroppedCanvas();
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d')!;
-        const width = sourceCanvas.width;
-        const height = sourceCanvas.height;
-        canvas.width = width;
-        canvas.height = height;
-        context.imageSmoothingEnabled = true;
-        context.drawImage(sourceCanvas, 0, 0, width, height);
-        context.globalCompositeOperation = 'destination-in';
-        context.beginPath();
-        context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
-        context.fill();
-        return canvas;
-      }
-
-      return { getClass, imgElRef, getWrapperStyle, getImageStyle, isReady, croppered };
-    },
   });
+
+  const emit = defineEmits(['cropend', 'ready', 'cropendError']);
+
+  const attrs = useAttrs();
+
+  const imgElRef = ref<ElRef<HTMLImageElement>>();
+  const cropper = ref<Nullable<Cropper>>();
+  const isReady = ref(false);
+
+  const { prefixCls } = useDesign('cropper-image');
+  const debounceRealTimeCroppered = useDebounceFn(realTimeCroppered, 80);
+
+  const getImageStyle = computed((): CSSProperties => {
+    return {
+      height: props.height,
+      maxWidth: '100%',
+      ...props.imageStyle,
+    };
+  });
+
+  const getClass = computed(() => {
+    return [
+      prefixCls,
+      attrs.class,
+      {
+        [`${prefixCls}--circled`]: props.circled,
+      },
+    ];
+  });
+
+  const getWrapperStyle = computed((): CSSProperties => {
+    return { height: `${props.height}`.replace(/px/, '') + 'px' };
+  });
+
+  onMounted(init);
+
+  onUnmounted(() => {
+    cropper.value?.destroy();
+  });
+
+  async function init() {
+    const imgEl = unref(imgElRef);
+    if (!imgEl) {
+      return;
+    }
+    cropper.value = new Cropper(imgEl, {
+      ...defaultOptions,
+      ready: () => {
+        isReady.value = true;
+        realTimeCroppered();
+        emit('ready', cropper.value);
+      },
+      crop() {
+        debounceRealTimeCroppered();
+      },
+      zoom() {
+        debounceRealTimeCroppered();
+      },
+      cropmove() {
+        debounceRealTimeCroppered();
+      },
+      ...props.options,
+    });
+  }
+
+  // Real-time display preview
+  function realTimeCroppered() {
+    props.realTimePreview && croppered();
+  }
+
+  // event: return base64 and width and height information after cropping
+  function croppered() {
+    if (!cropper.value) {
+      return;
+    }
+    let imgInfo = cropper.value.getData();
+    const canvas = props.circled ? getRoundedCanvas() : cropper.value.getCroppedCanvas();
+    canvas.toBlob((blob) => {
+      if (!blob) {
+        return;
+      }
+      let fileReader: FileReader = new FileReader();
+      fileReader.readAsDataURL(blob);
+      fileReader.onloadend = (e) => {
+        emit('cropend', {
+          imgBase64: e.target?.result ?? '',
+          imgInfo,
+        });
+      };
+      fileReader.onerror = () => {
+        emit('cropendError');
+      };
+    }, 'image/png');
+  }
+
+  // Get a circular picture canvas
+  function getRoundedCanvas() {
+    const sourceCanvas = cropper.value!.getCroppedCanvas();
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d')!;
+    const width = sourceCanvas.width;
+    const height = sourceCanvas.height;
+    canvas.width = width;
+    canvas.height = height;
+    context.imageSmoothingEnabled = true;
+    context.drawImage(sourceCanvas, 0, 0, width, height);
+    context.globalCompositeOperation = 'destination-in';
+    context.beginPath();
+    context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
+    context.fill();
+    return canvas;
+  }
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-cropper-image';
diff --git a/src/components/Cropper/src/CropperAvatar.vue b/src/components/Cropper/src/CropperAvatar.vue
index ee1575745..b5bdb238c 100644
--- a/src/components/Cropper/src/CropperAvatar.vue
+++ b/src/components/Cropper/src/CropperAvatar.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="getClass" :style="getStyle">
-    <div :class="`${prefixCls}-image-wrapper`" :style="getImageWrapperStyle" @click="openModal">
+    <div :class="`${prefixCls}-image-wrapper`" :style="getImageWrapperStyle" @click="openModal()">
       <div :class="`${prefixCls}-image-mask`" :style="getImageWrapperStyle">
         <Icon
           icon="ant-design:cloud-upload-outlined"
@@ -29,26 +29,19 @@
     />
   </div>
 </template>
-<script lang="ts">
-  import {
-    defineComponent,
-    computed,
-    CSSProperties,
-    unref,
-    ref,
-    watchEffect,
-    watch,
-    PropType,
-  } from 'vue';
+<script lang="ts" setup>
+  import { computed, CSSProperties, unref, ref, watchEffect, watch, PropType } from 'vue';
   import CropperModal from './CropperModal.vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useModal } from '/@/components/Modal';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import type { ButtonProps } from '/@/components/Button';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useModal } from '@/components/Modal';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import type { ButtonProps } from '@/components/Button';
   import Icon from '@/components/Icon/Icon.vue';
 
-  const props = {
+  defineOptions({ name: 'CropperAvatar' });
+
+  const props = defineProps({
     width: { type: [String, Number], default: '200px' },
     value: { type: String },
     showBtn: { type: Boolean, default: true },
@@ -59,65 +52,46 @@
     },
 
     size: { type: Number, default: 5 },
-  };
-
-  export default defineComponent({
-    name: 'CropperAvatar',
-    components: { CropperModal, Icon },
-    props,
-    emits: ['update:value', 'change'],
-    setup(props, { emit, expose }) {
-      const sourceValue = ref(props.value || '');
-      const { prefixCls } = useDesign('cropper-avatar');
-      const [register, { openModal, closeModal }] = useModal();
-      const { createMessage } = useMessage();
-      const { t } = useI18n();
-
-      const getClass = computed(() => [prefixCls]);
-
-      const getWidth = computed(() => `${props.width}`.replace(/px/, '') + 'px');
-
-      const getIconWidth = computed(() => parseInt(`${props.width}`.replace(/px/, '')) / 2 + 'px');
-
-      const getStyle = computed((): CSSProperties => ({ width: unref(getWidth) }));
-
-      const getImageWrapperStyle = computed(
-        (): CSSProperties => ({ width: unref(getWidth), height: unref(getWidth) }),
-      );
-
-      watchEffect(() => {
-        sourceValue.value = props.value || '';
-      });
-
-      watch(
-        () => sourceValue.value,
-        (v: string) => {
-          emit('update:value', v);
-        },
-      );
-
-      function handleUploadSuccess({ source, data }) {
-        sourceValue.value = source;
-        emit('change', { source, data });
-        createMessage.success(t('component.cropper.uploadSuccess'));
-      }
-
-      expose({ openModal: openModal.bind(null, true), closeModal });
-
-      return {
-        t,
-        prefixCls,
-        register,
-        openModal: openModal as any,
-        getIconWidth,
-        sourceValue,
-        getClass,
-        getImageWrapperStyle,
-        getStyle,
-        handleUploadSuccess,
-      };
-    },
   });
+
+  const emit = defineEmits(['update:value', 'change']);
+
+  const sourceValue = ref(props.value || '');
+  const { prefixCls } = useDesign('cropper-avatar');
+  const [register, { openModal, closeModal }] = useModal();
+  const { createMessage } = useMessage();
+  const { t } = useI18n();
+
+  const getClass = computed(() => [prefixCls]);
+
+  const getWidth = computed(() => `${props.width}`.replace(/px/, '') + 'px');
+
+  const getIconWidth = computed(() => parseInt(`${props.width}`.replace(/px/, '')) / 2 + 'px');
+
+  const getStyle = computed((): CSSProperties => ({ width: unref(getWidth) }));
+
+  const getImageWrapperStyle = computed(
+    (): CSSProperties => ({ width: unref(getWidth), height: unref(getWidth) }),
+  );
+
+  watchEffect(() => {
+    sourceValue.value = props.value || '';
+  });
+
+  watch(
+    () => sourceValue.value,
+    (v: string) => {
+      emit('update:value', v);
+    },
+  );
+
+  function handleUploadSuccess({ source, data }) {
+    sourceValue.value = source;
+    emit('change', { source, data });
+    createMessage.success(t('component.cropper.uploadSuccess'));
+  }
+
+  defineExpose({ openModal: openModal.bind(null, true), closeModal });
 </script>
 
 <style lang="less" scoped>
diff --git a/src/components/Cropper/src/CropperModal.vue b/src/components/Cropper/src/CropperModal.vue
index 311a46e4b..cf0f5651d 100644
--- a/src/components/Cropper/src/CropperModal.vue
+++ b/src/components/Cropper/src/CropperModal.vue
@@ -1,289 +1,274 @@
-<template>
-  <BasicModal
-    v-bind="$attrs"
-    @register="register"
-    :title="t('component.cropper.modalTitle')"
-    width="800px"
-    :canFullscreen="false"
-    @ok="handleOk"
-    :okText="t('component.cropper.okText')"
-  >
-    <div :class="prefixCls">
-      <div :class="`${prefixCls}-left`">
-        <div :class="`${prefixCls}-cropper`">
-          <CropperImage
-            v-if="src"
-            :src="src"
-            height="300px"
-            :circled="circled"
-            @cropend="handleCropend"
-            @ready="handleReady"
-          />
-        </div>
-
-        <div :class="`${prefixCls}-toolbar`">
-          <Upload :fileList="[]" accept="image/*" :beforeUpload="handleBeforeUpload">
-            <Tooltip :title="t('component.cropper.selectImage')" placement="bottom">
-              <a-button size="small" preIcon="ant-design:upload-outlined" type="primary" />
-            </Tooltip>
-          </Upload>
-          <Space>
-            <Tooltip :title="t('component.cropper.btn_reset')" placement="bottom">
-              <a-button
-                type="primary"
-                preIcon="ant-design:reload-outlined"
-                size="small"
-                :disabled="!src"
-                @click="handlerToolbar('reset')"
-              />
-            </Tooltip>
-            <Tooltip :title="t('component.cropper.btn_rotate_left')" placement="bottom">
-              <a-button
-                type="primary"
-                preIcon="ant-design:rotate-left-outlined"
-                size="small"
-                :disabled="!src"
-                @click="handlerToolbar('rotate', -45)"
-              />
-            </Tooltip>
-            <Tooltip :title="t('component.cropper.btn_rotate_right')" placement="bottom">
-              <a-button
-                type="primary"
-                preIcon="ant-design:rotate-right-outlined"
-                size="small"
-                :disabled="!src"
-                @click="handlerToolbar('rotate', 45)"
-              />
-            </Tooltip>
-            <Tooltip :title="t('component.cropper.btn_scale_x')" placement="bottom">
-              <a-button
-                type="primary"
-                preIcon="vaadin:arrows-long-h"
-                size="small"
-                :disabled="!src"
-                @click="handlerToolbar('scaleX')"
-              />
-            </Tooltip>
-            <Tooltip :title="t('component.cropper.btn_scale_y')" placement="bottom">
-              <a-button
-                type="primary"
-                preIcon="vaadin:arrows-long-v"
-                size="small"
-                :disabled="!src"
-                @click="handlerToolbar('scaleY')"
-              />
-            </Tooltip>
-            <Tooltip :title="t('component.cropper.btn_zoom_in')" placement="bottom">
-              <a-button
-                type="primary"
-                preIcon="ant-design:zoom-in-outlined"
-                size="small"
-                :disabled="!src"
-                @click="handlerToolbar('zoom', 0.1)"
-              />
-            </Tooltip>
-            <Tooltip :title="t('component.cropper.btn_zoom_out')" placement="bottom">
-              <a-button
-                type="primary"
-                preIcon="ant-design:zoom-out-outlined"
-                size="small"
-                :disabled="!src"
-                @click="handlerToolbar('zoom', -0.1)"
-              />
-            </Tooltip>
-          </Space>
-        </div>
-      </div>
-      <div :class="`${prefixCls}-right`">
-        <div :class="`${prefixCls}-preview`">
-          <img :src="previewSource" v-if="previewSource" :alt="t('component.cropper.preview')" />
-        </div>
-        <template v-if="previewSource">
-          <div :class="`${prefixCls}-group`">
-            <Avatar :src="previewSource" size="large" />
-            <Avatar :src="previewSource" :size="48" />
-            <Avatar :src="previewSource" :size="64" />
-            <Avatar :src="previewSource" :size="80" />
-          </div>
-        </template>
-      </div>
-    </div>
-  </BasicModal>
-</template>
-<script lang="ts">
-  import type { CropendResult, Cropper } from './typing';
-
-  import { defineComponent, ref, PropType } from 'vue';
-  import CropperImage from './Cropper.vue';
-  import { Space, Upload, Avatar, Tooltip } from 'ant-design-vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { dataURLtoBlob } from '/@/utils/file/base64Conver';
-  import { isFunction } from '/@/utils/is';
-  import { useI18n } from '/@/hooks/web/useI18n';
-
-  type apiFunParams = { file: Blob; name: string; filename: string };
-
-  const props = {
-    circled: { type: Boolean, default: true },
-    uploadApi: {
-      type: Function as PropType<(params: apiFunParams) => Promise<any>>,
-    },
-    src: { type: String },
-    size: { type: Number },
-  };
-
-  export default defineComponent({
-    name: 'CropperModal',
-    components: { BasicModal, Space, CropperImage, Upload, Avatar, Tooltip },
-    props,
-    emits: ['uploadSuccess', 'uploadError', 'register'],
-    setup(props, { emit }) {
-      let filename = '';
-      const src = ref(props.src || '');
-      const previewSource = ref('');
-      const cropper = ref<Cropper>();
-      let scaleX = 1;
-      let scaleY = 1;
-
-      const { prefixCls } = useDesign('cropper-am');
-      const [register, { closeModal, setModalProps }] = useModalInner();
-      const { t } = useI18n();
-
-      // Block upload
-      function handleBeforeUpload(file: File) {
-        if (props.size && file.size > 1024 * 1024 * props.size) {
-          emit('uploadError', { msg: t('component.cropper.imageTooBig') });
-          return;
-        }
-        const reader = new FileReader();
-        reader.readAsDataURL(file);
-        src.value = '';
-        previewSource.value = '';
-        reader.onload = function (e) {
-          src.value = (e.target?.result as string) ?? '';
-          filename = file.name;
-        };
-        return false;
-      }
-
-      function handleCropend({ imgBase64 }: CropendResult) {
-        previewSource.value = imgBase64;
-      }
-
-      function handleReady(cropperInstance: Cropper) {
-        cropper.value = cropperInstance;
-      }
-
-      function handlerToolbar(event: string, arg?: number) {
-        if (event === 'scaleX') {
-          scaleX = arg = scaleX === -1 ? 1 : -1;
-        }
-        if (event === 'scaleY') {
-          scaleY = arg = scaleY === -1 ? 1 : -1;
-        }
-        cropper?.value?.[event]?.(arg);
-      }
-
-      async function handleOk() {
-        const uploadApi = props.uploadApi;
-        if (uploadApi && isFunction(uploadApi)) {
-          const blob = dataURLtoBlob(previewSource.value);
-          try {
-            setModalProps({ confirmLoading: true });
-            const result = await uploadApi({ name: 'file', file: blob, filename });
-            emit('uploadSuccess', { source: previewSource.value, data: result.url });
-            closeModal();
-          } finally {
-            setModalProps({ confirmLoading: false });
-          }
-        }
-      }
-
-      return {
-        t,
-        prefixCls,
-        src,
-        register,
-        previewSource,
-        handleBeforeUpload,
-        handleCropend,
-        handleReady,
-        handlerToolbar,
-        handleOk,
-      };
-    },
-  });
-</script>
-
-<style lang="less">
-  @prefix-cls: ~'@{namespace}-cropper-am';
-
-  .@{prefix-cls} {
-    display: flex;
-
-    &-left,
-    &-right {
-      height: 340px;
-    }
-
-    &-left {
-      width: 55%;
-    }
-
-    &-right {
-      width: 45%;
-    }
-
-    &-cropper {
-      height: 300px;
-      background: #eee;
-      background-image: linear-gradient(
-          45deg,
-          rgb(0 0 0 / 25%) 25%,
-          transparent 0,
-          transparent 75%,
-          rgb(0 0 0 / 25%) 0
-        ),
-        linear-gradient(
-          45deg,
-          rgb(0 0 0 / 25%) 25%,
-          transparent 0,
-          transparent 75%,
-          rgb(0 0 0 / 25%) 0
-        );
-      background-position: 0 0, 12px 12px;
-      background-size: 24px 24px;
-    }
-
-    &-toolbar {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-top: 10px;
-    }
-
-    &-preview {
-      width: 220px;
-      height: 220px;
-      margin: 0 auto;
-      overflow: hidden;
-      border: 1px solid @border-color-base;
-      border-radius: 50%;
-
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    &-group {
-      display: flex;
-      align-items: center;
-      justify-content: space-around;
-      margin-top: 8px;
-      padding-top: 8px;
-      border-top: 1px solid @border-color-base;
-    }
-  }
-</style>
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    :title="t('component.cropper.modalTitle')"
+    width="800px"
+    :canFullscreen="false"
+    @ok="handleOk"
+    :okText="t('component.cropper.okText')"
+  >
+    <div :class="prefixCls">
+      <div :class="`${prefixCls}-left`">
+        <div :class="`${prefixCls}-cropper`">
+          <CropperImage
+            v-if="src"
+            :src="src"
+            height="300px"
+            :circled="circled"
+            @cropend="handleCropend"
+            @ready="handleReady"
+          />
+        </div>
+
+        <div :class="`${prefixCls}-toolbar`">
+          <Upload :fileList="[]" accept="image/*" :beforeUpload="handleBeforeUpload">
+            <Tooltip :title="t('component.cropper.selectImage')" placement="bottom">
+              <a-button size="small" preIcon="ant-design:upload-outlined" type="primary" />
+            </Tooltip>
+          </Upload>
+          <Space>
+            <Tooltip :title="t('component.cropper.btn_reset')" placement="bottom">
+              <a-button
+                type="primary"
+                preIcon="ant-design:reload-outlined"
+                size="small"
+                :disabled="!src"
+                @click="handlerToolbar('reset')"
+              />
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_rotate_left')" placement="bottom">
+              <a-button
+                type="primary"
+                preIcon="ant-design:rotate-left-outlined"
+                size="small"
+                :disabled="!src"
+                @click="handlerToolbar('rotate', -45)"
+              />
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_rotate_right')" placement="bottom">
+              <a-button
+                type="primary"
+                preIcon="ant-design:rotate-right-outlined"
+                size="small"
+                :disabled="!src"
+                @click="handlerToolbar('rotate', 45)"
+              />
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_scale_x')" placement="bottom">
+              <a-button
+                type="primary"
+                preIcon="vaadin:arrows-long-h"
+                size="small"
+                :disabled="!src"
+                @click="handlerToolbar('scaleX')"
+              />
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_scale_y')" placement="bottom">
+              <a-button
+                type="primary"
+                preIcon="vaadin:arrows-long-v"
+                size="small"
+                :disabled="!src"
+                @click="handlerToolbar('scaleY')"
+              />
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_zoom_in')" placement="bottom">
+              <a-button
+                type="primary"
+                preIcon="ant-design:zoom-in-outlined"
+                size="small"
+                :disabled="!src"
+                @click="handlerToolbar('zoom', 0.1)"
+              />
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_zoom_out')" placement="bottom">
+              <a-button
+                type="primary"
+                preIcon="ant-design:zoom-out-outlined"
+                size="small"
+                :disabled="!src"
+                @click="handlerToolbar('zoom', -0.1)"
+              />
+            </Tooltip>
+          </Space>
+        </div>
+      </div>
+      <div :class="`${prefixCls}-right`">
+        <div :class="`${prefixCls}-preview`">
+          <img :src="previewSource" v-if="previewSource" :alt="t('component.cropper.preview')" />
+        </div>
+        <template v-if="previewSource">
+          <div :class="`${prefixCls}-group`">
+            <Avatar :src="previewSource" size="large" />
+            <Avatar :src="previewSource" :size="48" />
+            <Avatar :src="previewSource" :size="64" />
+            <Avatar :src="previewSource" :size="80" />
+          </div>
+        </template>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import type { CropendResult, Cropper } from './typing';
+
+  import { ref, PropType } from 'vue';
+  import CropperImage from './Cropper.vue';
+  import { Space, Upload, Avatar, Tooltip } from 'ant-design-vue';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { dataURLtoBlob } from '@/utils/file/base64Conver';
+  import { isFunction } from '@/utils/is';
+  import { useI18n } from '@/hooks/web/useI18n';
+
+  type apiFunParams = { file: Blob; name: string; filename: string };
+
+  defineOptions({ name: 'CropperModal' });
+
+  const props = defineProps({
+    circled: { type: Boolean, default: true },
+    uploadApi: {
+      type: Function as PropType<(params: apiFunParams) => Promise<any>>,
+    },
+    src: { type: String },
+    size: { type: Number },
+  });
+
+  const emit = defineEmits(['uploadSuccess', 'uploadError', 'register']);
+
+  let filename = '';
+  const src = ref(props.src || '');
+  const previewSource = ref('');
+  const cropper = ref<Cropper>();
+  let scaleX = 1;
+  let scaleY = 1;
+
+  const { prefixCls } = useDesign('cropper-am');
+  const [register, { closeModal, setModalProps }] = useModalInner();
+  const { t } = useI18n();
+
+  // Block upload
+  function handleBeforeUpload(file: File) {
+    if (props.size && file.size > 1024 * 1024 * props.size) {
+      emit('uploadError', { msg: t('component.cropper.imageTooBig') });
+      return;
+    }
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    src.value = '';
+    previewSource.value = '';
+    reader.onload = function (e) {
+      src.value = (e.target?.result as string) ?? '';
+      filename = file.name;
+    };
+    return false;
+  }
+
+  function handleCropend({ imgBase64 }: CropendResult) {
+    previewSource.value = imgBase64;
+  }
+
+  function handleReady(cropperInstance: Cropper) {
+    cropper.value = cropperInstance;
+  }
+
+  function handlerToolbar(event: string, arg?: number) {
+    if (event === 'scaleX') {
+      scaleX = arg = scaleX === -1 ? 1 : -1;
+    }
+    if (event === 'scaleY') {
+      scaleY = arg = scaleY === -1 ? 1 : -1;
+    }
+    cropper?.value?.[event]?.(arg);
+  }
+
+  async function handleOk() {
+    const uploadApi = props.uploadApi;
+    if (uploadApi && isFunction(uploadApi)) {
+      const blob = dataURLtoBlob(previewSource.value);
+      try {
+        setModalProps({ confirmLoading: true });
+        const result = await uploadApi({ name: 'file', file: blob, filename });
+        emit('uploadSuccess', { source: previewSource.value, data: result.url });
+        closeModal();
+      } finally {
+        setModalProps({ confirmLoading: false });
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-cropper-am';
+
+  .@{prefix-cls} {
+    display: flex;
+
+    &-left,
+    &-right {
+      height: 340px;
+    }
+
+    &-left {
+      width: 55%;
+    }
+
+    &-right {
+      width: 45%;
+    }
+
+    &-cropper {
+      height: 300px;
+      background: #eee;
+      background-image: linear-gradient(
+          45deg,
+          rgb(0 0 0 / 25%) 25%,
+          transparent 0,
+          transparent 75%,
+          rgb(0 0 0 / 25%) 0
+        ),
+        linear-gradient(
+          45deg,
+          rgb(0 0 0 / 25%) 25%,
+          transparent 0,
+          transparent 75%,
+          rgb(0 0 0 / 25%) 0
+        );
+      background-position:
+        0 0,
+        12px 12px;
+      background-size: 24px 24px;
+    }
+
+    &-toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 10px;
+    }
+
+    &-preview {
+      width: 220px;
+      height: 220px;
+      margin: 0 auto;
+      overflow: hidden;
+      border: 1px solid @border-color-base;
+      border-radius: 50%;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &-group {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      margin-top: 8px;
+      padding-top: 8px;
+      border-top: 1px solid @border-color-base;
+    }
+  }
+</style>
diff --git a/src/components/Description/index.ts b/src/components/Description/index.ts
index 58277d063..c75c4dbdb 100644
--- a/src/components/Description/index.ts
+++ b/src/components/Description/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 import description from './src/Description.vue';
 
 export * from './src/typing';
diff --git a/src/components/Description/src/Description.vue b/src/components/Description/src/Description.vue
index d24b381aa..bcca79989 100644
--- a/src/components/Description/src/Description.vue
+++ b/src/components/Description/src/Description.vue
@@ -1,7 +1,7 @@
 <script lang="tsx">
   import type { DescriptionProps, DescInstance, DescItem } from './typing';
-  import type { DescriptionsProps } from 'ant-design-vue/es/descriptions/index';
-  import type { CollapseContainerOptions } from '/@/components/Container/index';
+  import type { DescriptionsProps } from 'ant-design-vue/es/descriptions';
+  import type { CollapseContainerOptions } from '@/components/Container';
   import {
     type CSSProperties,
     type PropType,
@@ -13,10 +13,10 @@
   } from 'vue';
   import { get } from 'lodash-es';
   import { Descriptions } from 'ant-design-vue';
-  import { CollapseContainer } from '/@/components/Container/index';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { isFunction } from '/@/utils/is';
-  import { getSlot } from '/@/utils/helper/tsxHelper';
+  import { CollapseContainer } from '@/components/Container';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { isFunction } from '@/utils/is';
+  import { getSlot } from '@/utils/helper/tsxHelper';
   import { useAttrs } from '@vben/hooks';
 
   const props = {
@@ -24,7 +24,7 @@
     title: { type: String, default: '' },
     size: {
       type: String,
-      validator: (v) => ['small', 'default', 'middle', undefined].includes(v),
+      validator: (v: string) => ['small', 'default', 'middle', undefined].includes(v),
       default: 'small',
     },
     bordered: { type: Boolean, default: true },
diff --git a/src/components/Description/src/typing.ts b/src/components/Description/src/typing.ts
index ee96084b3..32278cd48 100644
--- a/src/components/Description/src/typing.ts
+++ b/src/components/Description/src/typing.ts
@@ -1,6 +1,6 @@
 import type { VNode, CSSProperties } from 'vue';
-import type { CollapseContainerOptions } from '/@/components/Container/index';
-import type { DescriptionsProps } from 'ant-design-vue/es/descriptions/index';
+import type { CollapseContainerOptions } from '@/components/Container';
+import type { DescriptionsProps } from 'ant-design-vue/es/descriptions';
 
 export interface DescItem {
   labelMinWidth?: number;
diff --git a/src/components/Description/src/useDescription.ts b/src/components/Description/src/useDescription.ts
index d1037d065..062f53ca2 100644
--- a/src/components/Description/src/useDescription.ts
+++ b/src/components/Description/src/useDescription.ts
@@ -1,6 +1,6 @@
 import type { DescriptionProps, DescInstance, UseDescReturnType } from './typing';
 import { ref, getCurrentInstance, unref } from 'vue';
-import { isProdMode } from '/@/utils/env';
+import { isProdMode } from '@/utils/env';
 
 export function useDescription(props?: Partial<DescriptionProps>): UseDescReturnType {
   if (!getCurrentInstance()) {
diff --git a/src/components/Drawer/index.ts b/src/components/Drawer/index.ts
index 820ade569..0eb1a16ec 100644
--- a/src/components/Drawer/index.ts
+++ b/src/components/Drawer/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 import basicDrawer from './src/BasicDrawer.vue';
 
 export const BasicDrawer = withInstall(basicDrawer);
diff --git a/src/components/Drawer/src/BasicDrawer.vue b/src/components/Drawer/src/BasicDrawer.vue
index 29e5dd085..e2594c7cf 100644
--- a/src/components/Drawer/src/BasicDrawer.vue
+++ b/src/components/Drawer/src/BasicDrawer.vue
@@ -2,7 +2,7 @@
   <Drawer v-bind="getBindValues" :class="prefixCls" @close="onClose">
     <template #title v-if="!$slots.title">
       <DrawerHeader
-        :title="getMergeProps.title"
+        :title="mergeProps.title"
         :isDetail="isDetail"
         :showDetailBack="showDetailBack"
         @close="onClose"
@@ -30,166 +30,142 @@
     </DrawerFooter>
   </Drawer>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { DrawerInstance, DrawerProps } from './typing';
   import type { CSSProperties } from 'vue';
-  import {
-    defineComponent,
-    ref,
-    computed,
-    watch,
-    unref,
-    nextTick,
-    toRaw,
-    getCurrentInstance,
-  } from 'vue';
+  import { ref, computed, watch, unref, nextTick, toRaw, getCurrentInstance } from 'vue';
   import { Drawer } from 'ant-design-vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { isFunction, isNumber } from '/@/utils/is';
-  import { deepMerge } from '/@/utils';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { isFunction, isNumber } from '@/utils/is';
+  import { deepMerge } from '@/utils';
   import DrawerFooter from './components/DrawerFooter.vue';
   import DrawerHeader from './components/DrawerHeader.vue';
-  import { ScrollContainer } from '/@/components/Container';
+  import { ScrollContainer } from '@/components/Container';
   import { basicProps } from './props';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDesign } from '@/hooks/web/useDesign';
   import { useAttrs } from '@vben/hooks';
 
-  export default defineComponent({
-    components: { Drawer, ScrollContainer, DrawerFooter, DrawerHeader },
-    inheritAttrs: false,
-    props: basicProps,
-    emits: ['open-change', 'ok', 'close', 'register'],
-    setup(props, { emit }) {
-      const openRef = ref(false);
-      const attrs = useAttrs();
-      const propsRef = ref<Partial<DrawerProps | null>>(null);
+  defineOptions({ inheritAttrs: false });
 
-      const { t } = useI18n();
-      const { prefixVar, prefixCls } = useDesign('basic-drawer');
+  const props = defineProps(basicProps);
 
-      const drawerInstance: DrawerInstance = {
-        setDrawerProps: setDrawerProps as any,
-        emitOpen: undefined,
-      };
+  const emit = defineEmits(['open-change', 'ok', 'close', 'register']);
 
-      const instance = getCurrentInstance();
+  const openRef = ref(false);
+  const attrs = useAttrs();
+  const propsRef = ref<Partial<DrawerProps | null>>(null);
 
-      instance && emit('register', drawerInstance, instance.uid);
+  const { t } = useI18n();
+  const { prefixVar, prefixCls } = useDesign('basic-drawer');
 
-      const getMergeProps = computed((): DrawerProps => {
-        return deepMerge(toRaw(props), unref(propsRef)) as any;
-      });
+  const drawerInstance: DrawerInstance = {
+    setDrawerProps: setDrawerProps as any,
+    emitOpen: undefined,
+  };
 
-      const getProps = computed((): DrawerProps => {
-        const opt = {
-          placement: 'right',
-          ...unref(attrs),
-          ...unref(getMergeProps),
-          open: unref(openRef),
-        };
-        opt.title = undefined;
-        const { isDetail, width, wrapClassName, getContainer } = opt;
-        if (isDetail) {
-          if (!width) {
-            opt.width = '100%';
-          }
-          const detailCls = `${prefixCls}__detail`;
-          opt.rootClassName = wrapClassName ? `${wrapClassName} ${detailCls}` : detailCls;
+  const instance = getCurrentInstance();
 
-          if (!getContainer) {
-            opt.getContainer = `.${prefixVar}-layout-content`;
-          }
-        }
-        return opt as DrawerProps;
-      });
+  instance && emit('register', drawerInstance, instance.uid);
 
-      const getBindValues = computed((): DrawerProps => {
-        return {
-          ...attrs,
-          ...unref(getProps),
-        };
-      });
-
-      // Custom implementation of the bottom button,
-      const getFooterHeight = computed(() => {
-        const { footerHeight, showFooter } = unref(getProps);
-        if (showFooter && footerHeight) {
-          return isNumber(footerHeight)
-            ? `${footerHeight}px`
-            : `${footerHeight.replace('px', '')}px`;
-        }
-        return `0px`;
-      });
-
-      const getScrollContentStyle = computed((): CSSProperties => {
-        const footerHeight = unref(getFooterHeight);
-        return {
-          position: 'relative',
-          height: `calc(100% - ${footerHeight})`,
-        };
-      });
-
-      const getLoading = computed(() => {
-        return !!unref(getProps)?.loading;
-      });
-
-      watch(
-        () => props.open,
-        (newVal, oldVal) => {
-          if (newVal !== oldVal) openRef.value = newVal;
-        },
-        { deep: true },
-      );
-
-      watch(
-        () => openRef.value,
-        (open) => {
-          nextTick(() => {
-            emit('open-change', open);
-            instance && drawerInstance.emitOpen?.(open, instance.uid);
-          });
-        },
-      );
-
-      // Cancel event
-      async function onClose(e) {
-        const { closeFunc } = unref(getProps);
-        emit('close', e);
-        if (closeFunc && isFunction(closeFunc)) {
-          const res = await closeFunc();
-          openRef.value = !res;
-          return;
-        }
-        openRef.value = false;
-      }
-
-      function setDrawerProps(props: Partial<DrawerProps>): void {
-        // Keep the last setDrawerProps
-        propsRef.value = deepMerge(unref(propsRef) || ({} as any), props);
-
-        if (Reflect.has(props, 'open')) {
-          openRef.value = !!props.open;
-        }
-      }
-
-      function handleOk() {
-        emit('ok');
-      }
-
-      return {
-        onClose,
-        t,
-        prefixCls,
-        getMergeProps: getMergeProps as any,
-        getScrollContentStyle,
-        getProps: getProps as any,
-        getLoading,
-        getBindValues,
-        getFooterHeight,
-        handleOk,
-      };
-    },
+  const getMergeProps = computed((): DrawerProps => {
+    return deepMerge(toRaw(props), unref(propsRef)) as any;
   });
+
+  const getProps = computed((): DrawerProps => {
+    const opt = {
+      placement: 'right',
+      ...unref(attrs),
+      ...unref(getMergeProps),
+      open: unref(openRef),
+    };
+    opt.title = undefined;
+    const { isDetail, width, wrapClassName, getContainer } = opt;
+    if (isDetail) {
+      if (!width) {
+        opt.width = '100%';
+      }
+      const detailCls = `${prefixCls}__detail`;
+      opt.rootClassName = wrapClassName ? `${wrapClassName} ${detailCls}` : detailCls;
+
+      if (!getContainer) {
+        opt.getContainer = `.${prefixVar}-layout-content`;
+      }
+    }
+    return opt as DrawerProps;
+  });
+
+  const getBindValues = computed((): DrawerProps => {
+    return {
+      ...attrs,
+      ...unref(getProps),
+    };
+  });
+
+  // Custom implementation of the bottom button,
+  const getFooterHeight = computed(() => {
+    const { footerHeight, showFooter } = unref(getProps);
+    if (showFooter && footerHeight) {
+      return isNumber(footerHeight) ? `${footerHeight}px` : `${footerHeight.replace('px', '')}px`;
+    }
+    return `0px`;
+  });
+
+  const getScrollContentStyle = computed((): CSSProperties => {
+    const footerHeight = unref(getFooterHeight);
+    return {
+      position: 'relative',
+      height: `calc(100% - ${footerHeight})`,
+    };
+  });
+
+  const getLoading = computed(() => {
+    return !!unref(getProps)?.loading;
+  });
+
+  watch(
+    () => props.open,
+    (newVal, oldVal) => {
+      if (newVal !== oldVal) openRef.value = newVal;
+    },
+    { deep: true },
+  );
+
+  watch(
+    () => openRef.value,
+    (open) => {
+      nextTick(() => {
+        emit('open-change', open);
+        instance && drawerInstance.emitOpen?.(open, instance.uid);
+      });
+    },
+  );
+
+  // Cancel event
+  async function onClose(e) {
+    const { closeFunc } = unref(getProps);
+    emit('close', e);
+    if (closeFunc && isFunction(closeFunc)) {
+      const res = await closeFunc();
+      openRef.value = !res;
+      return;
+    }
+    openRef.value = false;
+  }
+
+  function setDrawerProps(props: Partial<DrawerProps>): void {
+    // Keep the last setDrawerProps
+    propsRef.value = deepMerge(unref(propsRef) || ({} as any), props);
+
+    if (Reflect.has(props, 'open')) {
+      openRef.value = !!props.open;
+    }
+  }
+
+  function handleOk() {
+    emit('ok');
+  }
+
+  const mergeProps = getMergeProps as any;
 </script>
 <style lang="less">
   @header-height: 60px;
diff --git a/src/components/Drawer/src/components/DrawerFooter.vue b/src/components/Drawer/src/components/DrawerFooter.vue
index b39d4179e..6093fcf25 100644
--- a/src/components/Drawer/src/components/DrawerFooter.vue
+++ b/src/components/Drawer/src/components/DrawerFooter.vue
@@ -24,44 +24,41 @@
     </template>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { CSSProperties } from 'vue';
-  import { defineComponent, computed } from 'vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-
+  import { computed } from 'vue';
+  import { useDesign } from '@/hooks/web/useDesign';
   import { footerProps } from '../props';
 
-  export default defineComponent({
-    name: 'BasicDrawerFooter',
-    props: {
-      ...footerProps,
-      height: {
-        type: String,
-        default: '60px',
-      },
-    },
-    emits: ['ok', 'close'],
-    setup(props, { emit }) {
-      const { prefixCls } = useDesign('basic-drawer-footer');
+  defineOptions({ name: 'BasicDrawerFooter' });
 
-      const getStyle = computed((): CSSProperties => {
-        const heightStr = `${props.height}`;
-        return {
-          height: heightStr,
-          lineHeight: `calc(${heightStr} - 1px)`,
-        };
-      });
-
-      function handleOk() {
-        emit('ok');
-      }
-
-      function handleClose() {
-        emit('close');
-      }
-      return { handleOk, prefixCls, handleClose, getStyle };
+  const props = defineProps({
+    ...footerProps,
+    height: {
+      type: String,
+      default: '60px',
     },
   });
+
+  const emit = defineEmits(['ok', 'close']);
+
+  const { prefixCls } = useDesign('basic-drawer-footer');
+
+  const getStyle = computed((): CSSProperties => {
+    const heightStr = `${props.height}`;
+    return {
+      height: heightStr,
+      lineHeight: `calc(${heightStr} - 1px)`,
+    };
+  });
+
+  function handleOk() {
+    emit('ok');
+  }
+
+  function handleClose() {
+    emit('close');
+  }
 </script>
 
 <style lang="less">
diff --git a/src/components/Drawer/src/components/DrawerHeader.vue b/src/components/Drawer/src/components/DrawerHeader.vue
index 09a3ad040..c7cac4a8b 100644
--- a/src/components/Drawer/src/components/DrawerHeader.vue
+++ b/src/components/Drawer/src/components/DrawerHeader.vue
@@ -17,34 +17,27 @@
     </span>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicTitle } from '/@/components/Basic';
+<script lang="ts" setup>
+  import { BasicTitle } from '@/components/Basic';
   import { ArrowLeftOutlined } from '@ant-design/icons-vue';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { propTypes } from '@/utils/propTypes';
 
-  import { useDesign } from '/@/hooks/web/useDesign';
+  defineOptions({ name: 'BasicDrawerHeader' });
 
-  import { propTypes } from '/@/utils/propTypes';
-
-  export default defineComponent({
-    name: 'BasicDrawerHeader',
-    components: { BasicTitle, ArrowLeftOutlined },
-    props: {
-      isDetail: propTypes.bool,
-      showDetailBack: propTypes.bool,
-      title: propTypes.string,
-    },
-    emits: ['close'],
-    setup(_, { emit }) {
-      const { prefixCls } = useDesign('basic-drawer-header');
-
-      function handleClose() {
-        emit('close');
-      }
-
-      return { prefixCls, handleClose };
-    },
+  defineProps({
+    isDetail: propTypes.bool,
+    showDetailBack: propTypes.bool,
+    title: propTypes.string,
   });
+
+  const emit = defineEmits(['close']);
+
+  const { prefixCls } = useDesign('basic-drawer-header');
+
+  function handleClose() {
+    emit('close');
+  }
 </script>
 
 <style lang="less">
diff --git a/src/components/Drawer/src/props.ts b/src/components/Drawer/src/props.ts
index 824ec6759..30a624d50 100644
--- a/src/components/Drawer/src/props.ts
+++ b/src/components/Drawer/src/props.ts
@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 
-import { useI18n } from '/@/hooks/web/useI18n';
+import { useI18n } from '@/hooks/web/useI18n';
 
 const { t } = useI18n();
 
diff --git a/src/components/Drawer/src/typing.ts b/src/components/Drawer/src/typing.ts
index 6880aff7f..9789a5036 100644
--- a/src/components/Drawer/src/typing.ts
+++ b/src/components/Drawer/src/typing.ts
@@ -1,6 +1,6 @@
 import type { ButtonProps } from 'ant-design-vue/lib/button/buttonTypes';
 import type { CSSProperties, VNodeChild, ComputedRef } from 'vue';
-import type { ScrollContainerOptions } from '/@/components/Container/index';
+import type { ScrollContainerOptions } from '@/components/Container';
 
 export interface DrawerInstance {
   setDrawerProps: (props: Partial<DrawerProps>) => void;
diff --git a/src/components/Drawer/src/useDrawer.ts b/src/components/Drawer/src/useDrawer.ts
index b640b681c..22db76890 100644
--- a/src/components/Drawer/src/useDrawer.ts
+++ b/src/components/Drawer/src/useDrawer.ts
@@ -15,11 +15,11 @@ import {
   toRaw,
   computed,
 } from 'vue';
-import { isProdMode } from '/@/utils/env';
-import { isFunction } from '/@/utils/is';
+import { isProdMode } from '@/utils/env';
+import { isFunction } from '@/utils/is';
 import { tryOnUnmounted } from '@vueuse/core';
 import { isEqual } from 'lodash-es';
-import { error } from '/@/utils/log';
+import { error } from '@/utils/log';
 
 const dataTransferRef = reactive<any>({});
 
diff --git a/src/components/Dropdown/index.ts b/src/components/Dropdown/index.ts
index 80439e50e..98b3041e1 100644
--- a/src/components/Dropdown/index.ts
+++ b/src/components/Dropdown/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 import dropdown from './src/Dropdown.vue';
 
 export * from './src/typing';
diff --git a/src/components/Excel/index.ts b/src/components/Excel/index.ts
index cece07c4d..73228babd 100644
--- a/src/components/Excel/index.ts
+++ b/src/components/Excel/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 import impExcel from './src/ImportExcel.vue';
 import expExcelModal from './src/ExportExcelModal.vue';
 
diff --git a/src/components/Excel/src/ExportExcelModal.vue b/src/components/Excel/src/ExportExcelModal.vue
index aeddcbb41..cc8b7ae4e 100644
--- a/src/components/Excel/src/ExportExcelModal.vue
+++ b/src/components/Excel/src/ExportExcelModal.vue
@@ -13,13 +13,12 @@
     />
   </BasicModal>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { ExportModalResult } from './typing';
-  import { defineComponent } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form';
 
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
 
   const { t } = useI18n();
 
@@ -62,30 +61,19 @@
       },
     },
   ];
-  export default defineComponent({
-    components: { BasicModal, BasicForm },
-    emits: ['success', 'register'],
-    setup(_, { emit }) {
-      const [registerForm, { validate }] = useForm();
-      const [registerModal, { closeModal }] = useModalInner();
 
-      const handleOk = async () => {
-        const res = await validate<ExportModalResult>();
-        const { filename, bookType } = res;
-        emit('success', {
-          filename: `${filename.split('.').shift()}.${bookType}`,
-          bookType,
-        });
-        closeModal();
-      };
+  const emit = defineEmits(['success', 'register']);
 
-      return {
-        schemas,
-        handleOk,
-        registerForm,
-        registerModal,
-        t,
-      };
-    },
-  });
+  const [registerForm, { validate }] = useForm();
+  const [registerModal, { closeModal }] = useModalInner();
+
+  const handleOk = async () => {
+    const res = await validate<ExportModalResult>();
+    const { filename, bookType } = res;
+    emit('success', {
+      filename: `${filename.split('.').shift()}.${bookType}`,
+      bookType,
+    });
+    closeModal();
+  };
 </script>
diff --git a/src/components/Excel/src/ImportExcel.vue b/src/components/Excel/src/ImportExcel.vue
index 99217a29d..c8a789439 100644
--- a/src/components/Excel/src/ImportExcel.vue
+++ b/src/components/Excel/src/ImportExcel.vue
@@ -12,214 +12,210 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, ref, unref } from 'vue';
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
   import * as XLSX from 'xlsx';
-  import { dateUtil } from '/@/utils/dateUtil';
-
+  import { dateUtil } from '@/utils/dateUtil';
   import type { ExcelData } from './typing';
 
-  export default defineComponent({
-    name: 'ImportExcel',
-    props: {
-      // 日期时间格式。如果不提供或者提供空值，将返回原始Date对象
-      dateFormat: {
-        type: String,
-      },
-      // 时区调整。实验性功能，仅为了解决读取日期时间值有偏差的问题。目前仅提供了+08:00时区的偏差修正值
-      // https://github.com/SheetJS/sheetjs/issues/1470#issuecomment-501108554
-      timeZone: {
-        type: Number,
-        default: 8,
-      },
-      // 是否直接返回选中文件
-      isReturnFile: {
-        type: Boolean,
-        default: false,
-      },
+  defineOptions({ name: 'ImportExcel' });
+
+  const props = defineProps({
+    // 日期时间格式。如果不提供或者提供空值，将返回原始Date对象
+    dateFormat: {
+      type: String,
     },
-    emits: ['success', 'error', 'cancel'],
-    setup(props, { emit }) {
-      const inputRef = ref<HTMLInputElement | null>(null);
-      const loadingRef = ref<Boolean>(false);
-      const cancelRef = ref<Boolean>(true);
-
-      function shapeWorkSheel(sheet: XLSX.WorkSheet, range: XLSX.Range) {
-        let str = ' ',
-          char = 65,
-          customWorkSheet = {
-            t: 's',
-            v: str,
-            r: '<t> </t><phoneticPr fontId="1" type="noConversion"/>',
-            h: str,
-            w: str,
-          };
-        if (!sheet || !sheet['!ref']) return [];
-        let c = 0,
-          r = 1;
-        while (c < range.e.c + 1) {
-          while (r < range.e.r + 1) {
-            if (!sheet[String.fromCharCode(char) + r]) {
-              sheet[String.fromCharCode(char) + r] = customWorkSheet;
-            }
-            r++;
-          }
-          r = 1;
-          str += ' ';
-          customWorkSheet = {
-            t: 's',
-            v: str,
-            r: '<t> </t><phoneticPr fontId="1" type="noConversion"/>',
-            h: str,
-            w: str,
-          };
-          c++;
-          char++;
-        }
-      }
-
-      /**
-       * @description: 第一行作为头部
-       */
-      function getHeaderRow(sheet: XLSX.WorkSheet) {
-        if (!sheet || !sheet['!ref']) return [];
-        const headers: string[] = [];
-        // A3:B7=>{s:{c:0, r:2}, e:{c:1, r:6}}
-        const range: XLSX.Range = XLSX.utils.decode_range(sheet['!ref']);
-        shapeWorkSheel(sheet, range);
-        const R = range.s.r;
-        /* start in the first row */
-        for (let C = range.s.c; C <= range.e.c; ++C) {
-          /* walk every column in the range */
-          const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
-          /* find the cell in the first row */
-          let hdr = 'UNKNOWN ' + C; // <-- replace with your desired default
-          if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
-          headers.push(hdr);
-        }
-        return headers;
-      }
-
-      /**
-       * @description: 获得excel数据
-       */
-      function getExcelData(workbook: XLSX.WorkBook) {
-        const excelData: ExcelData[] = [];
-        const { dateFormat, timeZone } = props;
-        for (const sheetName of workbook.SheetNames) {
-          const worksheet = workbook.Sheets[sheetName];
-          const header: string[] = getHeaderRow(worksheet);
-          let results = XLSX.utils.sheet_to_json(worksheet, {
-            raw: true,
-            dateNF: dateFormat, //Not worked
-          }) as object[];
-          results = results.map((row: object) => {
-            for (let field in row) {
-              if (row[field] instanceof Date) {
-                if (timeZone === 8) {
-                  row[field].setSeconds(row[field].getSeconds() + 43);
-                }
-                if (dateFormat) {
-                  row[field] = dateUtil(row[field]).format(dateFormat);
-                }
-              }
-            }
-            return row;
-          });
-
-          excelData.push({
-            header,
-            results,
-            meta: {
-              sheetName,
-            },
-          });
-        }
-        return excelData;
-      }
-
-      /**
-       * @description: 读取excel数据
-       */
-      function readerData(rawFile: File) {
-        loadingRef.value = true;
-        return new Promise((resolve, reject) => {
-          const reader = new FileReader();
-          reader.onload = async (e) => {
-            try {
-              const data = e.target && e.target.result;
-              const workbook = XLSX.read(data, { type: 'array', cellDates: true });
-              // console.log(workbook);
-              /* DO SOMETHING WITH workbook HERE */
-              const excelData = getExcelData(workbook);
-              emit('success', excelData);
-              resolve('');
-            } catch (error) {
-              reject(error);
-              emit('error');
-            } finally {
-              loadingRef.value = false;
-            }
-          };
-          reader.readAsArrayBuffer(rawFile);
-        });
-      }
-
-      async function upload(rawFile: File) {
-        const inputRefDom = unref(inputRef);
-        if (inputRefDom) {
-          // fix can't select the same excel
-          inputRefDom.value = '';
-        }
-        await readerData(rawFile);
-      }
-
-      /**
-       * @description: 触发选择文件管理器
-       */
-      function handleInputClick(e: Event) {
-        const target = e && (e.target as HTMLInputElement);
-        const files = target?.files;
-        const rawFile = files && files[0]; // only setting files[0]
-
-        target.value = '';
-
-        if (!rawFile) return;
-
-        cancelRef.value = false;
-        if (props.isReturnFile) {
-          emit('success', rawFile);
-          return;
-        }
-        upload(rawFile);
-      }
-
-      /**
-       * @description 文件选择器关闭后,判断取消状态
-       */
-      function handleFocusChange() {
-        const timeId = setInterval(() => {
-          if (cancelRef.value === true) {
-            emit('cancel');
-          }
-          clearInterval(timeId);
-          window.removeEventListener('focus', handleFocusChange);
-        }, 1000);
-      }
-
-      /**
-       * @description: 点击上传按钮
-       */
-      function handleUpload() {
-        const inputRefDom = unref(inputRef);
-        if (inputRefDom) {
-          cancelRef.value = true;
-          inputRefDom.click();
-          window.addEventListener('focus', handleFocusChange);
-        }
-      }
-
-      return { handleUpload, handleInputClick, inputRef };
+    // 时区调整。实验性功能，仅为了解决读取日期时间值有偏差的问题。目前仅提供了+08:00时区的偏差修正值
+    // https://github.com/SheetJS/sheetjs/issues/1470#issuecomment-501108554
+    timeZone: {
+      type: Number,
+      default: 8,
+    },
+    // 是否直接返回选中文件
+    isReturnFile: {
+      type: Boolean,
+      default: false,
     },
   });
+
+  const emit = defineEmits(['success', 'error', 'cancel']);
+
+  const inputRef = ref<HTMLInputElement | null>(null);
+  const loadingRef = ref<Boolean>(false);
+  const cancelRef = ref<Boolean>(true);
+
+  function shapeWorkSheel(sheet: XLSX.WorkSheet, range: XLSX.Range) {
+    let str = ' ',
+      char = 65,
+      customWorkSheet = {
+        t: 's',
+        v: str,
+        r: '<t> </t><phoneticPr fontId="1" type="noConversion"/>',
+        h: str,
+        w: str,
+      };
+    if (!sheet || !sheet['!ref']) return [];
+    let c = 0,
+      r = 1;
+    while (c < range.e.c + 1) {
+      while (r < range.e.r + 1) {
+        if (!sheet[String.fromCharCode(char) + r]) {
+          sheet[String.fromCharCode(char) + r] = customWorkSheet;
+        }
+        r++;
+      }
+      r = 1;
+      str += ' ';
+      customWorkSheet = {
+        t: 's',
+        v: str,
+        r: '<t> </t><phoneticPr fontId="1" type="noConversion"/>',
+        h: str,
+        w: str,
+      };
+      c++;
+      char++;
+    }
+  }
+
+  /**
+   * @description: 第一行作为头部
+   */
+  function getHeaderRow(sheet: XLSX.WorkSheet) {
+    if (!sheet || !sheet['!ref']) return [];
+    const headers: string[] = [];
+    // A3:B7=>{s:{c:0, r:2}, e:{c:1, r:6}}
+    const range: XLSX.Range = XLSX.utils.decode_range(sheet['!ref']);
+    shapeWorkSheel(sheet, range);
+    const R = range.s.r;
+    /* start in the first row */
+    for (let C = range.s.c; C <= range.e.c; ++C) {
+      /* walk every column in the range */
+      const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
+      /* find the cell in the first row */
+      let hdr = 'UNKNOWN ' + C; // <-- replace with your desired default
+      if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
+      headers.push(hdr);
+    }
+    return headers;
+  }
+
+  /**
+   * @description: 获得excel数据
+   */
+  function getExcelData(workbook: XLSX.WorkBook) {
+    const excelData: ExcelData[] = [];
+    const { dateFormat, timeZone } = props;
+    for (const sheetName of workbook.SheetNames) {
+      const worksheet = workbook.Sheets[sheetName];
+      const header: string[] = getHeaderRow(worksheet);
+      let results = XLSX.utils.sheet_to_json(worksheet, {
+        raw: true,
+        dateNF: dateFormat, //Not worked
+      }) as object[];
+      results = results.map((row: object) => {
+        for (let field in row) {
+          if (row[field] instanceof Date) {
+            if (timeZone === 8) {
+              row[field].setSeconds(row[field].getSeconds() + 43);
+            }
+            if (dateFormat) {
+              row[field] = dateUtil(row[field]).format(dateFormat);
+            }
+          }
+        }
+        return row;
+      });
+
+      excelData.push({
+        header,
+        results,
+        meta: {
+          sheetName,
+        },
+      });
+    }
+    return excelData;
+  }
+
+  /**
+   * @description: 读取excel数据
+   */
+  function readerData(rawFile: File) {
+    loadingRef.value = true;
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = async (e) => {
+        try {
+          const data = e.target && e.target.result;
+          const workbook = XLSX.read(data, { type: 'array', cellDates: true });
+          // console.log(workbook);
+          /* DO SOMETHING WITH workbook HERE */
+          const excelData = getExcelData(workbook);
+          emit('success', excelData);
+          resolve('');
+        } catch (error) {
+          reject(error);
+          emit('error');
+        } finally {
+          loadingRef.value = false;
+        }
+      };
+      reader.readAsArrayBuffer(rawFile);
+    });
+  }
+
+  async function upload(rawFile: File) {
+    const inputRefDom = unref(inputRef);
+    if (inputRefDom) {
+      // fix can't select the same excel
+      inputRefDom.value = '';
+    }
+    await readerData(rawFile);
+  }
+
+  /**
+   * @description: 触发选择文件管理器
+   */
+  function handleInputClick(e: Event) {
+    const target = e && (e.target as HTMLInputElement);
+    const files = target?.files;
+    const rawFile = files && files[0]; // only setting files[0]
+
+    target.value = '';
+
+    if (!rawFile) return;
+
+    cancelRef.value = false;
+    if (props.isReturnFile) {
+      emit('success', rawFile);
+      return;
+    }
+    upload(rawFile);
+  }
+
+  /**
+   * @description 文件选择器关闭后,判断取消状态
+   */
+  function handleFocusChange() {
+    const timeId = setInterval(() => {
+      if (cancelRef.value === true) {
+        emit('cancel');
+      }
+      clearInterval(timeId);
+      window.removeEventListener('focus', handleFocusChange);
+    }, 1000);
+  }
+
+  /**
+   * @description: 点击上传按钮
+   */
+  function handleUpload() {
+    const inputRefDom = unref(inputRef);
+    if (inputRefDom) {
+      cancelRef.value = true;
+      inputRefDom.click();
+      window.addEventListener('focus', handleFocusChange);
+    }
+  }
 </script>
diff --git a/src/components/FlowChart/index.ts b/src/components/FlowChart/index.ts
index edbeb5591..bad85db3f 100644
--- a/src/components/FlowChart/index.ts
+++ b/src/components/FlowChart/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 import flowChart from './src/FlowChart.vue';
 
 export const FlowChart = withInstall(flowChart);
diff --git a/src/components/FlowChart/src/FlowChart.vue b/src/components/FlowChart/src/FlowChart.vue
index 419b0fea7..cf7097aea 100644
--- a/src/components/FlowChart/src/FlowChart.vue
+++ b/src/components/FlowChart/src/FlowChart.vue
@@ -7,152 +7,141 @@
     </BasicModal>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { Ref } from 'vue';
   import type { Definition } from '@logicflow/core';
-  import { defineComponent, ref, onMounted, unref, nextTick, computed, watch } from 'vue';
+  import { ref, onMounted, unref, nextTick, computed, watch } from 'vue';
   import FlowChartToolbar from './FlowChartToolbar.vue';
   import LogicFlow from '@logicflow/core';
   import { Snapshot, BpmnElement, Menu, DndPanel, SelectionSelect } from '@logicflow/extension';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useAppStore } from '/@/store/modules/app';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useAppStore } from '@/store/modules/app';
   import { createFlowChartContext } from './useFlowContext';
   import { toLogicFlowData } from './adpterForTurbo';
-  import { useModal, BasicModal } from '/@/components/Modal';
-  import { JsonPreview } from '/@/components/CodeEditor';
+  import { useModal, BasicModal } from '@/components/Modal';
+  import { JsonPreview } from '@/components/CodeEditor';
   import { configDefaultDndPanel } from './config';
   import '@logicflow/core/dist/style/index.css';
   import '@logicflow/extension/lib/style/index.css';
 
-  export default defineComponent({
-    name: 'FlowChart',
-    components: { BasicModal, FlowChartToolbar, JsonPreview },
-    props: {
-      flowOptions: {
-        type: Object as PropType<Definition>,
-        default: () => ({}),
-      },
+  defineOptions({ name: 'FlowChart' });
 
-      data: {
-        type: Object as PropType<any>,
-        default: () => ({}),
-      },
-
-      toolbar: {
-        type: Boolean,
-        default: true,
-      },
-      patternItems: {
-        type: Array,
-      },
+  const props = defineProps({
+    flowOptions: {
+      type: Object as PropType<Definition>,
+      default: () => ({}),
     },
-    setup(props) {
-      const lfElRef = ref(null);
-      const graphData = ref({});
 
-      const lfInstance = ref(null) as Ref<LogicFlow | null>;
+    data: {
+      type: Object as PropType<any>,
+      default: () => ({}),
+    },
 
-      const { prefixCls } = useDesign('flow-chart');
-      const appStore = useAppStore();
-      const [register, { openModal }] = useModal();
-      createFlowChartContext({
-        logicFlow: lfInstance as unknown as LogicFlow,
-      });
-
-      const getFlowOptions = computed(() => {
-        const { flowOptions } = props;
-
-        const defaultOptions: Partial<Definition> = {
-          grid: true,
-          background: {
-            color: appStore.getDarkMode === 'light' ? '#f7f9ff' : '#151515',
-          },
-          keyboard: {
-            enabled: true,
-          },
-          ...flowOptions,
-        };
-        return defaultOptions as Definition;
-      });
-
-      watch(
-        () => props.data,
-        () => {
-          onRender();
-        },
-      );
-
-      // TODO
-      // watch(
-      //   () => appStore.getDarkMode,
-      //   () => {
-      //     init();
-      //   }
-      // );
-
-      watch(
-        () => unref(getFlowOptions),
-        (options) => {
-          unref(lfInstance)?.updateEditConfig(options);
-        },
-      );
-
-      // init logicFlow
-      async function init() {
-        await nextTick();
-
-        const lfEl = unref(lfElRef);
-        if (!lfEl) {
-          return;
-        }
-        LogicFlow.use(DndPanel);
-
-        // Canvas configuration
-        LogicFlow.use(Snapshot);
-        // Use the bpmn plug-in to introduce bpmn elements, which can be used after conversion in turbo
-        LogicFlow.use(BpmnElement);
-        // Start the right-click menu
-        LogicFlow.use(Menu);
-        LogicFlow.use(SelectionSelect);
-
-        lfInstance.value = new LogicFlow({
-          ...unref(getFlowOptions),
-          container: lfEl,
-        });
-        const lf = unref(lfInstance)!;
-        lf?.setDefaultEdgeType('line');
-        onRender();
-        lf?.setPatternItems(props.patternItems || configDefaultDndPanel(lf));
-      }
-
-      async function onRender() {
-        await nextTick();
-        const lf = unref(lfInstance);
-        if (!lf) {
-          return;
-        }
-        const lFData = toLogicFlowData(props.data);
-        lf.render(lFData);
-      }
-
-      function handlePreview() {
-        const lf = unref(lfInstance);
-        if (!lf) {
-          return;
-        }
-        graphData.value = unref(lf).getGraphData();
-        openModal();
-      }
-
-      onMounted(init);
-
-      return {
-        register,
-        prefixCls,
-        lfElRef,
-        handlePreview,
-        graphData,
-      };
+    toolbar: {
+      type: Boolean,
+      default: true,
+    },
+    patternItems: {
+      type: Array,
     },
   });
+
+  const lfElRef = ref(null);
+  const graphData = ref({});
+
+  const lfInstance = ref(null) as Ref<LogicFlow | null>;
+
+  const { prefixCls } = useDesign('flow-chart');
+  const appStore = useAppStore();
+  const [register, { openModal }] = useModal();
+  createFlowChartContext({
+    logicFlow: lfInstance as unknown as LogicFlow,
+  });
+
+  const getFlowOptions = computed(() => {
+    const { flowOptions } = props;
+
+    const defaultOptions: Partial<Definition> = {
+      grid: true,
+      background: {
+        color: appStore.getDarkMode === 'light' ? '#f7f9ff' : '#151515',
+      },
+      keyboard: {
+        enabled: true,
+      },
+      ...flowOptions,
+    };
+    return defaultOptions as Definition;
+  });
+
+  watch(
+    () => props.data,
+    () => {
+      onRender();
+    },
+  );
+
+  // TODO
+  // watch(
+  //   () => appStore.getDarkMode,
+  //   () => {
+  //     init();
+  //   }
+  // );
+
+  watch(
+    () => unref(getFlowOptions),
+    (options) => {
+      unref(lfInstance)?.updateEditConfig(options);
+    },
+  );
+
+  // init logicFlow
+  async function init() {
+    await nextTick();
+
+    const lfEl = unref(lfElRef);
+    if (!lfEl) {
+      return;
+    }
+    LogicFlow.use(DndPanel);
+
+    // Canvas configuration
+    LogicFlow.use(Snapshot);
+    // Use the bpmn plug-in to introduce bpmn elements, which can be used after conversion in turbo
+    LogicFlow.use(BpmnElement);
+    // Start the right-click menu
+    LogicFlow.use(Menu);
+    LogicFlow.use(SelectionSelect);
+
+    lfInstance.value = new LogicFlow({
+      ...unref(getFlowOptions),
+      container: lfEl,
+    });
+    const lf = unref(lfInstance)!;
+    lf?.setDefaultEdgeType('line');
+    onRender();
+    lf?.setPatternItems(props.patternItems || configDefaultDndPanel(lf));
+  }
+
+  async function onRender() {
+    await nextTick();
+    const lf = unref(lfInstance);
+    if (!lf) {
+      return;
+    }
+    const lFData = toLogicFlowData(props.data);
+    lf.render(lFData);
+  }
+
+  function handlePreview() {
+    const lf = unref(lfInstance);
+    if (!lf) {
+      return;
+    }
+    graphData.value = unref(lf).getGraphData();
+    openModal();
+  }
+
+  onMounted(init);
 </script>
diff --git a/src/components/FlowChart/src/FlowChartToolbar.vue b/src/components/FlowChart/src/FlowChartToolbar.vue
index e2d05c498..b0f922755 100644
--- a/src/components/FlowChart/src/FlowChartToolbar.vue
+++ b/src/components/FlowChart/src/FlowChartToolbar.vue
@@ -6,7 +6,7 @@
         <span :class="`${prefixCls}-toolbar__icon`" v-if="item.icon" @click="onControl(item)">
           <Icon
             :icon="item.icon"
-            :class="item.disabled ? 'cursor-not-allowed disabeld' : 'cursor-pointer'"
+            :class="item.disabled ? 'cursor-not-allowed disabled' : 'cursor-pointer'"
           />
         </span>
       </Tooltip>
@@ -14,122 +14,119 @@
     </template>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { ToolbarConfig } from './types';
 
-  import { defineComponent, ref, onUnmounted, unref, nextTick, watchEffect } from 'vue';
+  import { ref, onUnmounted, unref, nextTick, watchEffect } from 'vue';
   import { Divider, Tooltip } from 'ant-design-vue';
   import Icon from '@/components/Icon/Icon.vue';
 
   import { useFlowChartContext } from './useFlowContext';
   import { ToolbarTypeEnum } from './enum';
 
-  export default defineComponent({
-    name: 'FlowChartToolbar',
-    components: { Icon, Divider, Tooltip },
-    props: {
-      prefixCls: String,
+  defineOptions({ name: 'FlowChartToolbar' });
+
+  defineProps({
+    prefixCls: String,
+  });
+
+  const emit = defineEmits(['view-data']);
+
+  const toolbarItemList = ref<ToolbarConfig[]>([
+    {
+      type: ToolbarTypeEnum.ZOOM_IN,
+      icon: 'codicon:zoom-out',
+      tooltip: '缩小',
     },
-    emits: ['view-data'],
-    setup(_, { emit }) {
-      const toolbarItemList = ref<ToolbarConfig[]>([
-        {
-          type: ToolbarTypeEnum.ZOOM_IN,
-          icon: 'codicon:zoom-out',
-          tooltip: '缩小',
-        },
-        {
-          type: ToolbarTypeEnum.ZOOM_OUT,
-          icon: 'codicon:zoom-in',
-          tooltip: '放大',
-        },
-        {
-          type: ToolbarTypeEnum.RESET_ZOOM,
-          icon: 'codicon:screen-normal',
-          tooltip: '重置比例',
-        },
-        { separate: true },
-        {
-          type: ToolbarTypeEnum.UNDO,
-          icon: 'ion:arrow-undo-outline',
-          tooltip: '后退',
-          disabled: true,
-        },
-        {
-          type: ToolbarTypeEnum.REDO,
-          icon: 'ion:arrow-redo-outline',
-          tooltip: '前进',
-          disabled: true,
-        },
-        { separate: true },
-        {
-          type: ToolbarTypeEnum.SNAPSHOT,
-          icon: 'ion:download-outline',
-          tooltip: '下载',
-        },
-        {
-          type: ToolbarTypeEnum.VIEW_DATA,
-          icon: 'carbon:document-view',
-          tooltip: '查看数据',
-        },
-      ]);
-
-      const { logicFlow } = useFlowChartContext();
-
-      function onHistoryChange({ data: { undoAble, redoAble } }) {
-        const itemsList = unref(toolbarItemList);
-        const undoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.UNDO);
-        const redoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.REDO);
-        if (undoIndex !== -1) {
-          unref(toolbarItemList)[undoIndex].disabled = !undoAble;
-        }
-        if (redoIndex !== -1) {
-          unref(toolbarItemList)[redoIndex].disabled = !redoAble;
-        }
-      }
-
-      const onControl = (item) => {
-        const lf = unref(logicFlow);
-        if (!lf) {
-          return;
-        }
-        switch (item.type) {
-          case ToolbarTypeEnum.ZOOM_IN:
-            lf.zoom();
-            break;
-          case ToolbarTypeEnum.ZOOM_OUT:
-            lf.zoom(true);
-            break;
-          case ToolbarTypeEnum.RESET_ZOOM:
-            lf.resetZoom();
-            break;
-          case ToolbarTypeEnum.UNDO:
-            lf.undo();
-            break;
-          case ToolbarTypeEnum.REDO:
-            lf.redo();
-            break;
-          case ToolbarTypeEnum.SNAPSHOT:
-            lf.getSnapshot();
-            break;
-          case ToolbarTypeEnum.VIEW_DATA:
-            emit('view-data');
-            break;
-        }
-      };
-
-      watchEffect(async () => {
-        if (unref(logicFlow)) {
-          await nextTick();
-          unref(logicFlow)?.on('history:change', onHistoryChange);
-        }
-      });
-
-      onUnmounted(() => {
-        unref(logicFlow)?.off('history:change', onHistoryChange);
-      });
-      return { toolbarItemList, onControl };
+    {
+      type: ToolbarTypeEnum.ZOOM_OUT,
+      icon: 'codicon:zoom-in',
+      tooltip: '放大',
     },
+    {
+      type: ToolbarTypeEnum.RESET_ZOOM,
+      icon: 'codicon:screen-normal',
+      tooltip: '重置比例',
+    },
+    { separate: true },
+    {
+      type: ToolbarTypeEnum.UNDO,
+      icon: 'ion:arrow-undo-outline',
+      tooltip: '后退',
+      disabled: true,
+    },
+    {
+      type: ToolbarTypeEnum.REDO,
+      icon: 'ion:arrow-redo-outline',
+      tooltip: '前进',
+      disabled: true,
+    },
+    { separate: true },
+    {
+      type: ToolbarTypeEnum.SNAPSHOT,
+      icon: 'ion:download-outline',
+      tooltip: '下载',
+    },
+    {
+      type: ToolbarTypeEnum.VIEW_DATA,
+      icon: 'carbon:document-view',
+      tooltip: '查看数据',
+    },
+  ]);
+
+  const { logicFlow } = useFlowChartContext();
+
+  function onHistoryChange({ data: { undoAble, redoAble } }) {
+    const itemsList = unref(toolbarItemList);
+    const undoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.UNDO);
+    const redoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.REDO);
+    if (undoIndex !== -1) {
+      unref(toolbarItemList)[undoIndex].disabled = !undoAble;
+    }
+    if (redoIndex !== -1) {
+      unref(toolbarItemList)[redoIndex].disabled = !redoAble;
+    }
+  }
+
+  const onControl = (item) => {
+    const lf = unref(logicFlow);
+    if (!lf) {
+      return;
+    }
+    switch (item.type) {
+      case ToolbarTypeEnum.ZOOM_IN:
+        lf.zoom();
+        break;
+      case ToolbarTypeEnum.ZOOM_OUT:
+        lf.zoom(true);
+        break;
+      case ToolbarTypeEnum.RESET_ZOOM:
+        lf.resetZoom();
+        break;
+      case ToolbarTypeEnum.UNDO:
+        lf.undo();
+        break;
+      case ToolbarTypeEnum.REDO:
+        lf.redo();
+        break;
+      case ToolbarTypeEnum.SNAPSHOT:
+        lf.getSnapshot();
+        break;
+      case ToolbarTypeEnum.VIEW_DATA:
+        emit('view-data');
+        break;
+    }
+  };
+
+  watchEffect(async () => {
+    if (unref(logicFlow)) {
+      await nextTick();
+      unref(logicFlow)?.on('history:change', onHistoryChange);
+    }
+  });
+
+  onUnmounted(() => {
+    unref(logicFlow)?.off('history:change', onHistoryChange);
   });
 </script>
 <style lang="less">
diff --git a/src/components/Form/src/BasicForm.vue b/src/components/Form/src/BasicForm.vue
index 1bc7935ae..64cff0f49 100644
--- a/src/components/Form/src/BasicForm.vue
+++ b/src/components/Form/src/BasicForm.vue
@@ -37,286 +37,265 @@
     </Row>
   </Form>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { FormActionType, FormProps, FormSchemaInner as FormSchema } from './types/form';
   import type { AdvanceState } from './types/hooks';
   import type { Ref } from 'vue';
 
-  import { defineComponent, reactive, ref, computed, unref, onMounted, watch, nextTick } from 'vue';
+  import { reactive, ref, computed, unref, onMounted, watch, nextTick, useAttrs } from 'vue';
   import { Form, Row, type FormProps as AntFormProps } from 'ant-design-vue';
   import FormItem from './components/FormItem.vue';
   import FormAction from './components/FormAction.vue';
 
   import { dateItemType } from './helper';
-  import { dateUtil } from '/@/utils/dateUtil';
+  import { dateUtil } from '@/utils/dateUtil';
 
-  import { deepMerge } from '/@/utils';
+  import { deepMerge } from '@/utils';
 
   import { useFormValues } from './hooks/useFormValues';
   import useAdvanced from './hooks/useAdvanced';
   import { useFormEvents } from './hooks/useFormEvents';
   import { createFormContext } from './hooks/useFormContext';
   import { useAutoFocus } from './hooks/useAutoFocus';
-  import { useModalContext } from '/@/components/Modal';
+  import { useModalContext } from '@/components/Modal';
   import { useDebounceFn } from '@vueuse/core';
 
   import { basicProps } from './props';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDesign } from '@/hooks/web/useDesign';
   import { cloneDeep } from 'lodash-es';
 
-  export default defineComponent({
-    name: 'BasicForm',
-    components: { FormItem, Form, Row, FormAction },
-    props: basicProps,
-    emits: ['advanced-change', 'reset', 'submit', 'register', 'field-value-change'],
-    setup(props, { emit, attrs }) {
-      const formModel = reactive({});
-      const modalFn = useModalContext();
+  defineOptions({ name: 'BasicForm' });
 
-      const advanceState = reactive<AdvanceState>({
-        isAdvanced: true,
-        hideAdvanceBtn: false,
-        isLoad: false,
-        actionSpan: 6,
-      });
+  const props = defineProps(basicProps);
 
-      const defaultValueRef = ref({});
-      const isInitedDefaultRef = ref(false);
-      const propsRef = ref<Partial<FormProps>>();
-      const schemaRef = ref<FormSchema[] | null>(null);
-      const formElRef = ref<FormActionType | null>(null);
+  const emit = defineEmits([
+    'advanced-change',
+    'reset',
+    'submit',
+    'register',
+    'field-value-change',
+  ]);
 
-      const { prefixCls } = useDesign('basic-form');
+  const attrs = useAttrs();
 
-      // Get the basic configuration of the form
-      const getProps = computed(() => {
-        return { ...props, ...unref(propsRef) } as FormProps;
-      });
+  const formModel = reactive({});
+  const modalFn = useModalContext();
 
-      const getFormClass = computed(() => {
-        return [
-          prefixCls,
-          {
-            [`${prefixCls}--compact`]: unref(getProps).compact,
-          },
-        ];
-      });
+  const advanceState = reactive<AdvanceState>({
+    isAdvanced: true,
+    hideAdvanceBtn: false,
+    isLoad: false,
+    actionSpan: 6,
+  });
 
-      // Get uniform row style and Row configuration for the entire form
-      const getRow = computed(() => {
-        const { baseRowStyle = {}, rowProps } = unref(getProps);
-        return {
-          style: baseRowStyle,
-          ...rowProps,
-        };
-      });
+  const defaultValueRef = ref({});
+  const isInitedDefaultRef = ref(false);
+  const propsRef = ref<Partial<FormProps>>();
+  const schemaRef = ref<FormSchema[] | null>(null);
+  const formElRef = ref<FormActionType | null>(null);
 
-      const getBindValue = computed(
-        () => ({ ...attrs, ...props, ...unref(getProps) }) as AntFormProps,
-      );
+  const { prefixCls } = useDesign('basic-form');
 
-      const getSchema = computed((): FormSchema[] => {
-        const schemas: FormSchema[] = unref(schemaRef) || (unref(getProps).schemas as any);
-        for (const schema of schemas) {
-          const {
-            defaultValue,
-            component,
-            componentProps,
-            isHandleDateDefaultValue = true,
-          } = schema;
-          // handle date type
-          if (
-            isHandleDateDefaultValue &&
-            defaultValue &&
-            component &&
-            dateItemType.includes(component)
-          ) {
-            const valueFormat = componentProps ? componentProps['valueFormat'] : null;
-            if (!Array.isArray(defaultValue)) {
-              schema.defaultValue = valueFormat
-                ? dateUtil(defaultValue).format(valueFormat)
-                : dateUtil(defaultValue);
-            } else {
-              const def: any[] = [];
-              defaultValue.forEach((item) => {
-                def.push(valueFormat ? dateUtil(item).format(valueFormat) : dateUtil(item));
-              });
-              schema.defaultValue = def;
-            }
-          }
-        }
-        if (unref(getProps).showAdvancedButton) {
-          return cloneDeep(
-            schemas.filter((schema) => schema.component !== 'Divider') as FormSchema[],
-          );
+  // Get the basic configuration of the form
+  const getProps = computed(() => {
+    return { ...props, ...unref(propsRef) } as FormProps;
+  });
+
+  const getFormClass = computed(() => {
+    return [
+      prefixCls,
+      {
+        [`${prefixCls}--compact`]: unref(getProps).compact,
+      },
+    ];
+  });
+
+  // Get uniform row style and Row configuration for the entire form
+  const getRow = computed(() => {
+    const { baseRowStyle = {}, rowProps } = unref(getProps);
+    return {
+      style: baseRowStyle,
+      ...rowProps,
+    };
+  });
+
+  const getBindValue = computed(() => ({ ...attrs, ...props, ...unref(getProps) }) as AntFormProps);
+
+  const getSchema = computed((): FormSchema[] => {
+    const schemas: FormSchema[] = unref(schemaRef) || (unref(getProps).schemas as any);
+    for (const schema of schemas) {
+      const { defaultValue, component, componentProps, isHandleDateDefaultValue = true } = schema;
+      // handle date type
+      if (
+        isHandleDateDefaultValue &&
+        defaultValue &&
+        component &&
+        dateItemType.includes(component)
+      ) {
+        const valueFormat = componentProps ? componentProps['valueFormat'] : null;
+        if (!Array.isArray(defaultValue)) {
+          schema.defaultValue = valueFormat
+            ? dateUtil(defaultValue).format(valueFormat)
+            : dateUtil(defaultValue);
         } else {
-          return cloneDeep(schemas as FormSchema[]);
-        }
-      });
-
-      const { handleToggleAdvanced, fieldsIsAdvancedMap } = useAdvanced({
-        advanceState,
-        emit,
-        getProps,
-        getSchema,
-        formModel,
-        defaultValueRef,
-      });
-
-      const { handleFormValues, initDefault } = useFormValues({
-        getProps,
-        defaultValueRef,
-        getSchema,
-        formModel,
-      });
-
-      useAutoFocus({
-        getSchema,
-        getProps,
-        isInitedDefault: isInitedDefaultRef,
-        formElRef: formElRef as Ref<FormActionType>,
-      });
-
-      const {
-        handleSubmit,
-        setFieldsValue,
-        clearValidate,
-        validate,
-        validateFields,
-        getFieldsValue,
-        updateSchema,
-        resetSchema,
-        appendSchemaByField,
-        removeSchemaByField,
-        resetFields,
-        scrollToField,
-      } = useFormEvents({
-        emit,
-        getProps,
-        formModel,
-        getSchema,
-        defaultValueRef,
-        formElRef: formElRef as Ref<FormActionType>,
-        schemaRef: schemaRef as Ref<FormSchema[]>,
-        handleFormValues,
-      });
-
-      createFormContext({
-        resetAction: resetFields,
-        submitAction: handleSubmit,
-      });
-
-      watch(
-        () => unref(getProps).model,
-        () => {
-          const { model } = unref(getProps);
-          if (!model) return;
-          setFieldsValue(model);
-        },
-        {
-          immediate: true,
-        },
-      );
-
-      watch(
-        () => unref(getProps).schemas,
-        (schemas) => {
-          resetSchema(schemas ?? []);
-        },
-      );
-
-      watch(
-        () => getSchema.value,
-        (schema) => {
-          nextTick(() => {
-            //  Solve the problem of modal adaptive height calculation when the form is placed in the modal
-            modalFn?.redoModalHeight?.();
+          const def: any[] = [];
+          defaultValue.forEach((item) => {
+            def.push(valueFormat ? dateUtil(item).format(valueFormat) : dateUtil(item));
           });
-          if (unref(isInitedDefaultRef)) {
-            return;
-          }
-          if (schema?.length) {
-            initDefault();
-            isInitedDefaultRef.value = true;
-          }
-        },
-      );
-
-      watch(
-        () => formModel,
-        useDebounceFn(() => {
-          unref(getProps).submitOnChange && handleSubmit();
-        }, 300),
-        { deep: true },
-      );
-
-      async function setProps(formProps: Partial<FormProps>): Promise<void> {
-        propsRef.value = deepMerge(unref(propsRef) || {}, formProps);
-      }
-
-      function setFormModel(key: string, value: any, schema: FormSchema) {
-        formModel[key] = value;
-        emit('field-value-change', key, value);
-        // TODO 优化验证，这里如果是autoLink=false手动关联的情况下才会再次触发此函数
-        if (schema && schema.itemProps && !schema.itemProps.autoLink) {
-          validateFields([key]).catch((_) => {});
+          schema.defaultValue = def;
         }
       }
+    }
+    if (unref(getProps).showAdvancedButton) {
+      return cloneDeep(schemas.filter((schema) => schema.component !== 'Divider') as FormSchema[]);
+    } else {
+      return cloneDeep(schemas as FormSchema[]);
+    }
+  });
 
-      function handleEnterPress(e: KeyboardEvent) {
-        const { autoSubmitOnEnter } = unref(getProps);
-        if (!autoSubmitOnEnter) return;
-        if (e.key === 'Enter' && e.target && e.target instanceof HTMLElement) {
-          const target: HTMLElement = e.target as HTMLElement;
-          if (target && target.tagName && target.tagName.toUpperCase() == 'INPUT') {
-            handleSubmit();
-          }
-        }
-      }
+  const { handleToggleAdvanced, fieldsIsAdvancedMap } = useAdvanced({
+    advanceState,
+    emit,
+    getProps,
+    getSchema,
+    formModel,
+    defaultValueRef,
+  });
 
-      const formActionType: Partial<FormActionType> = {
-        getFieldsValue,
-        setFieldsValue,
-        resetFields,
-        updateSchema,
-        resetSchema,
-        setProps,
-        removeSchemaByField,
-        appendSchemaByField,
-        clearValidate,
-        validateFields,
-        validate,
-        submit: handleSubmit,
-        scrollToField: scrollToField,
-      };
+  const { handleFormValues, initDefault } = useFormValues({
+    getProps,
+    defaultValueRef,
+    getSchema,
+    formModel,
+  });
 
-      onMounted(() => {
-        initDefault();
-        emit('register', formActionType);
-      });
+  useAutoFocus({
+    getSchema,
+    getProps,
+    isInitedDefault: isInitedDefaultRef,
+    formElRef: formElRef as Ref<FormActionType>,
+  });
 
-      return {
-        getBindValue,
-        handleToggleAdvanced,
-        handleEnterPress,
-        formModel,
-        defaultValueRef,
-        advanceState,
-        getRow,
-        getProps,
-        formElRef,
-        getSchema,
-        formActionType: formActionType as any,
-        setFormModel,
-        getFormClass,
-        getFormActionBindProps: computed(
-          () =>
-            ({ ...getProps.value, ...advanceState }) as InstanceType<typeof FormAction>['$props'],
-        ),
-        fieldsIsAdvancedMap,
-        ...formActionType,
-      };
+  const {
+    handleSubmit,
+    setFieldsValue,
+    clearValidate,
+    validate,
+    validateFields,
+    getFieldsValue,
+    updateSchema,
+    resetSchema,
+    appendSchemaByField,
+    removeSchemaByField,
+    resetFields,
+    scrollToField,
+  } = useFormEvents({
+    emit,
+    getProps,
+    formModel,
+    getSchema,
+    defaultValueRef,
+    formElRef: formElRef as Ref<FormActionType>,
+    schemaRef: schemaRef as Ref<FormSchema[]>,
+    handleFormValues,
+  });
+
+  createFormContext({
+    resetAction: resetFields,
+    submitAction: handleSubmit,
+  });
+
+  watch(
+    () => unref(getProps).model,
+    () => {
+      const { model } = unref(getProps);
+      if (!model) return;
+      setFieldsValue(model);
     },
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    () => unref(getProps).schemas,
+    (schemas) => {
+      resetSchema(schemas ?? []);
+    },
+  );
+
+  watch(
+    () => getSchema.value,
+    (schema) => {
+      nextTick(() => {
+        //  Solve the problem of modal adaptive height calculation when the form is placed in the modal
+        modalFn?.redoModalHeight?.();
+      });
+      if (unref(isInitedDefaultRef)) {
+        return;
+      }
+      if (schema?.length) {
+        initDefault();
+        isInitedDefaultRef.value = true;
+      }
+    },
+  );
+
+  watch(
+    () => formModel,
+    useDebounceFn(() => {
+      unref(getProps).submitOnChange && handleSubmit();
+    }, 300),
+    { deep: true },
+  );
+
+  async function setProps(formProps: Partial<FormProps>): Promise<void> {
+    propsRef.value = deepMerge(unref(propsRef) || {}, formProps);
+  }
+
+  function setFormModel(key: string, value: any, schema: FormSchema) {
+    formModel[key] = value;
+    emit('field-value-change', key, value);
+    // TODO 优化验证，这里如果是autoLink=false手动关联的情况下才会再次触发此函数
+    if (schema && schema.itemProps && !schema.itemProps.autoLink) {
+      validateFields([key]).catch((_) => {});
+    }
+  }
+
+  function handleEnterPress(e: KeyboardEvent) {
+    const { autoSubmitOnEnter } = unref(getProps);
+    if (!autoSubmitOnEnter) return;
+    if (e.key === 'Enter' && e.target && e.target instanceof HTMLElement) {
+      const target: HTMLElement = e.target as HTMLElement;
+      if (target && target.tagName && target.tagName.toUpperCase() == 'INPUT') {
+        handleSubmit();
+      }
+    }
+  }
+
+  const formActionType: Partial<FormActionType> = {
+    getFieldsValue,
+    setFieldsValue,
+    resetFields,
+    updateSchema,
+    resetSchema,
+    setProps,
+    removeSchemaByField,
+    appendSchemaByField,
+    clearValidate,
+    validateFields,
+    validate,
+    submit: handleSubmit,
+    scrollToField: scrollToField,
+  };
+
+  const getFormActionBindProps = computed(
+    () => ({ ...getProps.value, ...advanceState }) as InstanceType<typeof FormAction>['$props'],
+  );
+
+  onMounted(() => {
+    initDefault();
+    emit('register', formActionType);
   });
 </script>
 <style lang="less">
diff --git a/src/components/Form/src/componentMap.ts b/src/components/Form/src/componentMap.ts
index 3168bb28f..8da9721d7 100644
--- a/src/components/Form/src/componentMap.ts
+++ b/src/components/Form/src/componentMap.ts
@@ -1,5 +1,5 @@
 import type { Component } from 'vue';
-import type { ComponentType } from './types/index';
+import type { ComponentType } from './types';
 
 /**
  * Component list, register here to setting it in the form
@@ -27,10 +27,10 @@ import ApiTree from './components/ApiTree.vue';
 import ApiTreeSelect from './components/ApiTreeSelect.vue';
 import ApiCascader from './components/ApiCascader.vue';
 import ApiTransfer from './components/ApiTransfer.vue';
-import { BasicUpload, ImageUpload } from '/@/components/Upload';
-import { StrengthMeter } from '/@/components/StrengthMeter';
-import { IconPicker } from '/@/components/Icon';
-import { CountdownInput } from '/@/components/CountDown';
+import { BasicUpload, ImageUpload } from '@/components/Upload';
+import { StrengthMeter } from '@/components/StrengthMeter';
+import { IconPicker } from '@/components/Icon';
+import { CountdownInput } from '@/components/CountDown';
 
 const componentMap = new Map<ComponentType, Component>();
 
diff --git a/src/components/Form/src/components/ApiCascader.vue b/src/components/Form/src/components/ApiCascader.vue
index bed5c8a8b..f740b8e81 100644
--- a/src/components/Form/src/components/ApiCascader.vue
+++ b/src/components/Form/src/components/ApiCascader.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-cascader
+  <Cascader
     v-model:value="state"
     :options="options"
     :load-data="loadData"
@@ -16,18 +16,18 @@
         {{ t('component.form.apiSelectNotFound') }}
       </span>
     </template>
-  </a-cascader>
+  </Cascader>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import { type Recordable } from '@vben/types';
-  import { defineComponent, PropType, ref, unref, watch, watchEffect } from 'vue';
+  import { PropType, ref, unref, watch, watchEffect } from 'vue';
   import { Cascader } from 'ant-design-vue';
-  import { propTypes } from '/@/utils/propTypes';
-  import { isFunction } from '/@/utils/is';
+  import { propTypes } from '@/utils/propTypes';
+  import { isFunction } from '@/utils/is';
   import { get, omit } from 'lodash-es';
-  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { useRuleFormItem } from '@/hooks/component/useFormItem';
   import { LoadingOutlined } from '@ant-design/icons-vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
 
   interface Option {
     value: string;
@@ -36,165 +36,151 @@
     isLeaf?: boolean;
     children?: Option[];
   }
-  export default defineComponent({
-    name: 'ApiCascader',
-    components: {
-      LoadingOutlined,
-      [Cascader.name]: Cascader,
+
+  defineOptions({ name: 'ApiCascader' });
+
+  const props = defineProps({
+    value: {
+      type: Array,
     },
-    props: {
-      value: {
-        type: Array,
-      },
-      api: {
-        type: Function as PropType<(arg?: Recordable<any>) => Promise<Option[]>>,
-        default: null,
-      },
-      numberToString: propTypes.bool,
-      resultField: propTypes.string.def(''),
-      labelField: propTypes.string.def('label'),
-      valueField: propTypes.string.def('value'),
-      childrenField: propTypes.string.def('children'),
-      apiParamKey: propTypes.string.def('parentCode'),
-      immediate: propTypes.bool.def(true),
-      // init fetch params
-      initFetchParams: {
-        type: Object as PropType<Recordable<any>>,
-        default: () => ({}),
-      },
-      // 是否有下级，默认是
-      isLeaf: {
-        type: Function as PropType<(arg: Recordable<any>) => boolean>,
-        default: null,
-      },
-      displayRenderArray: {
-        type: Array,
-      },
+    api: {
+      type: Function as PropType<(arg?: Recordable<any>) => Promise<Option[]>>,
+      default: null,
     },
-    emits: ['change', 'defaultChange'],
-    setup(props, { emit }) {
-      const apiData = ref<any[]>([]);
-      const options = ref<Option[]>([]);
-      const loading = ref<boolean>(false);
-      const emitData = ref<any[]>([]);
-      const isFirstLoad = ref(true);
-      const { t } = useI18n();
-      // Embedded in the form, just use the hook binding to perform form verification
-      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
-
-      watch(
-        apiData,
-        (data) => {
-          const opts = generatorOptions(data);
-          options.value = opts;
-        },
-        { deep: true },
-      );
-
-      function generatorOptions(options: any[]): Option[] {
-        const { labelField, valueField, numberToString, childrenField, isLeaf } = props;
-        return options.reduce((prev, next: Recordable<any>) => {
-          if (next) {
-            const value = next[valueField];
-            const item = {
-              ...omit(next, [labelField, valueField]),
-              label: next[labelField],
-              value: numberToString ? `${value}` : value,
-              isLeaf: isLeaf && typeof isLeaf === 'function' ? isLeaf(next) : false,
-            };
-            const children = Reflect.get(next, childrenField);
-            if (children) {
-              Reflect.set(item, childrenField, generatorOptions(children));
-            }
-            prev.push(item);
-          }
-          return prev;
-        }, [] as Option[]);
-      }
-
-      async function initialFetch() {
-        const api = props.api;
-        if (!api || !isFunction(api)) return;
-        apiData.value = [];
-        loading.value = true;
-        try {
-          const res = await api(props.initFetchParams);
-          if (Array.isArray(res)) {
-            apiData.value = res;
-            return;
-          }
-          if (props.resultField) {
-            apiData.value = get(res, props.resultField) || [];
-          }
-        } catch (error) {
-          console.warn(error);
-        } finally {
-          loading.value = false;
-        }
-      }
-
-      async function loadData(selectedOptions: Option[]) {
-        const targetOption = selectedOptions[selectedOptions.length - 1];
-        targetOption.loading = true;
-
-        const api = props.api;
-        if (!api || !isFunction(api)) return;
-        try {
-          const res = await api({
-            [props.apiParamKey]: Reflect.get(targetOption, 'value'),
-          });
-          if (Array.isArray(res)) {
-            const children = generatorOptions(res);
-            targetOption.children = children;
-            return;
-          }
-          if (props.resultField) {
-            const children = generatorOptions(get(res, props.resultField) || []);
-            targetOption.children = children;
-          }
-        } catch (e) {
-          console.error(e);
-        } finally {
-          targetOption.loading = false;
-        }
-      }
-
-      watchEffect(() => {
-        props.immediate && initialFetch();
-      });
-
-      watch(
-        () => props.initFetchParams,
-        () => {
-          !unref(isFirstLoad) && initialFetch();
-        },
-        { deep: true },
-      );
-
-      function handleChange(keys, args) {
-        emitData.value = args;
-        emit('defaultChange', keys, args);
-      }
-
-      function handleRenderDisplay({ labels, selectedOptions }) {
-        if (unref(emitData).length === selectedOptions.length) {
-          return labels.join(' / ');
-        }
-        if (props.displayRenderArray) {
-          return props.displayRenderArray.join(' / ');
-        }
-        return '';
-      }
-
-      return {
-        state,
-        options,
-        loading,
-        t,
-        handleChange,
-        loadData,
-        handleRenderDisplay,
-      };
+    numberToString: propTypes.bool,
+    resultField: propTypes.string.def(''),
+    labelField: propTypes.string.def('label'),
+    valueField: propTypes.string.def('value'),
+    childrenField: propTypes.string.def('children'),
+    apiParamKey: propTypes.string.def('parentCode'),
+    immediate: propTypes.bool.def(true),
+    // init fetch params
+    initFetchParams: {
+      type: Object as PropType<Recordable<any>>,
+      default: () => ({}),
+    },
+    // 是否有下级，默认是
+    isLeaf: {
+      type: Function as PropType<(arg: Recordable<any>) => boolean>,
+      default: null,
+    },
+    displayRenderArray: {
+      type: Array,
     },
   });
+
+  const emit = defineEmits(['change', 'defaultChange']);
+
+  const apiData = ref<any[]>([]);
+  const options = ref<Option[]>([]);
+  const loading = ref<boolean>(false);
+  const emitData = ref<any[]>([]);
+  const isFirstLoad = ref(true);
+  const { t } = useI18n();
+  // Embedded in the form, just use the hook binding to perform form verification
+  const [state]: any = useRuleFormItem(props, 'value', 'change', emitData);
+
+  watch(
+    apiData,
+    (data) => {
+      const opts = generatorOptions(data);
+      options.value = opts;
+    },
+    { deep: true },
+  );
+
+  function generatorOptions(options: any[]): Option[] {
+    const { labelField, valueField, numberToString, childrenField, isLeaf } = props;
+    return options.reduce((prev, next: Recordable<any>) => {
+      if (next) {
+        const value = next[valueField];
+        const item = {
+          ...omit(next, [labelField, valueField]),
+          label: next[labelField],
+          value: numberToString ? `${value}` : value,
+          isLeaf: isLeaf && typeof isLeaf === 'function' ? isLeaf(next) : false,
+        };
+        const children = Reflect.get(next, childrenField);
+        if (children) {
+          Reflect.set(item, childrenField, generatorOptions(children));
+        }
+        prev.push(item);
+      }
+      return prev;
+    }, [] as Option[]);
+  }
+
+  async function initialFetch() {
+    const api = props.api;
+    if (!api || !isFunction(api)) return;
+    apiData.value = [];
+    loading.value = true;
+    try {
+      const res = await api(props.initFetchParams);
+      if (Array.isArray(res)) {
+        apiData.value = res;
+        return;
+      }
+      if (props.resultField) {
+        apiData.value = get(res, props.resultField) || [];
+      }
+    } catch (error) {
+      console.warn(error);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function loadData(selectedOptions: Option[]) {
+    const targetOption = selectedOptions[selectedOptions.length - 1];
+    targetOption.loading = true;
+
+    const api = props.api;
+    if (!api || !isFunction(api)) return;
+    try {
+      const res = await api({
+        [props.apiParamKey]: Reflect.get(targetOption, 'value'),
+      });
+      if (Array.isArray(res)) {
+        const children = generatorOptions(res);
+        targetOption.children = children;
+        return;
+      }
+      if (props.resultField) {
+        const children = generatorOptions(get(res, props.resultField) || []);
+        targetOption.children = children;
+      }
+    } catch (e) {
+      console.error(e);
+    } finally {
+      targetOption.loading = false;
+    }
+  }
+
+  watchEffect(() => {
+    props.immediate && initialFetch();
+  });
+
+  watch(
+    () => props.initFetchParams,
+    () => {
+      !unref(isFirstLoad) && initialFetch();
+    },
+    { deep: true },
+  );
+
+  function handleChange(keys, args) {
+    emitData.value = args;
+    emit('defaultChange', keys, args);
+  }
+
+  function handleRenderDisplay({ labels, selectedOptions }) {
+    if (unref(emitData).length === selectedOptions.length) {
+      return labels.join(' / ');
+    }
+    if (props.displayRenderArray) {
+      return props.displayRenderArray.join(' / ');
+    }
+    return '';
+  }
 </script>
diff --git a/src/components/Form/src/components/ApiRadioGroup.vue b/src/components/Form/src/components/ApiRadioGroup.vue
index 8285cdff1..409570455 100644
--- a/src/components/Form/src/components/ApiRadioGroup.vue
+++ b/src/components/Form/src/components/ApiRadioGroup.vue
@@ -2,135 +2,125 @@
  * @Description:It is troublesome to implement radio button group in the form. So it is extracted independently as a separate component
 -->
 <template>
-  <RadioGroup v-bind="attrs" v-model:value="state" button-style="solid">
+  <Radio.Group v-bind="attrs" v-model:value="state" button-style="solid">
     <template v-for="item in getOptions" :key="`${item.value}`">
-      <RadioButton
+      <Radio.Button
         v-if="props.isBtn"
         :value="item.value"
         :disabled="item.disabled"
         @click="handleClick(item)"
       >
         {{ item.label }}
-      </RadioButton>
+      </Radio.Button>
       <Radio v-else :value="item.value" :disabled="item.disabled" @click="handleClick(item)">
         {{ item.label }}
       </Radio>
     </template>
-  </RadioGroup>
+  </Radio.Group>
 </template>
-<script lang="ts">
-  import { defineComponent, type PropType, ref, watchEffect, computed, unref, watch } from 'vue';
+<script lang="ts" setup>
+  import { type PropType, ref, watchEffect, computed, unref, watch } from 'vue';
   import { Radio } from 'ant-design-vue';
-  import { isFunction } from '/@/utils/is';
-  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { isFunction } from '@/utils/is';
+  import { useRuleFormItem } from '@/hooks/component/useFormItem';
   import { useAttrs } from '@vben/hooks';
-  import { propTypes } from '/@/utils/propTypes';
+  import { propTypes } from '@/utils/propTypes';
   import { get, omit } from 'lodash-es';
-  import { useI18n } from '/@/hooks/web/useI18n';
 
   type OptionsItem = { label: string; value: string | number | boolean; disabled?: boolean };
 
-  export default defineComponent({
-    name: 'ApiRadioGroup',
-    components: {
-      RadioGroup: Radio.Group,
-      RadioButton: Radio.Button,
-      Radio,
+  defineOptions({ name: 'ApiRadioGroup' });
+
+  const props = defineProps({
+    api: {
+      type: Function as PropType<(arg?: any | string) => Promise<OptionsItem[]>>,
+      default: null,
     },
-    props: {
-      api: {
-        type: Function as PropType<(arg?: any | string) => Promise<OptionsItem[]>>,
-        default: null,
-      },
-      params: {
-        type: [Object, String] as PropType<any | string>,
-        default: () => ({}),
-      },
-      value: {
-        type: [String, Number, Boolean] as PropType<string | number | boolean>,
-      },
-      isBtn: {
-        type: [Boolean] as PropType<boolean>,
-        default: false,
-      },
-      numberToString: propTypes.bool,
-      resultField: propTypes.string.def(''),
-      labelField: propTypes.string.def('label'),
-      valueField: propTypes.string.def('value'),
-      immediate: propTypes.bool.def(true),
+    params: {
+      type: [Object, String] as PropType<any | string>,
+      default: () => ({}),
     },
-    emits: ['options-change', 'change'],
-    setup(props, { emit }) {
-      const options = ref<OptionsItem[]>([]);
-      const loading = ref(false);
-      const isFirstLoad = ref(true);
-      const emitData = ref<any[]>([]);
-      const attrs = useAttrs();
-      const { t } = useI18n();
-      // Embedded in the form, just use the hook binding to perform form verification
-      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
-
-      // Processing options value
-      const getOptions = computed(() => {
-        const { labelField, valueField, numberToString } = props;
-
-        return unref(options).reduce((prev, next: any) => {
-          if (next) {
-            const value = next[valueField];
-            prev.push({
-              label: next[labelField],
-              value: numberToString ? `${value}` : value,
-              ...omit(next, [labelField, valueField]),
-            });
-          }
-          return prev;
-        }, [] as OptionsItem[]);
-      });
-
-      watchEffect(() => {
-        props.immediate && fetch();
-      });
-
-      watch(
-        () => props.params,
-        () => {
-          !unref(isFirstLoad) && fetch();
-        },
-        { deep: true },
-      );
-
-      async function fetch() {
-        const api = props.api;
-        if (!api || !isFunction(api)) return;
-        options.value = [];
-        try {
-          loading.value = true;
-          const res = await api(props.params);
-          if (Array.isArray(res)) {
-            options.value = res;
-            emitChange();
-            return;
-          }
-          if (props.resultField) {
-            options.value = get(res, props.resultField) || [];
-          }
-          emitChange();
-        } catch (error) {
-          console.warn(error);
-        } finally {
-          loading.value = false;
-        }
-      }
-
-      function emitChange() {
-        emit('options-change', unref(getOptions));
-      }
-
-      function handleClick(...args) {
-        emitData.value = args;
-      }
-
-      return { state, getOptions, attrs, loading, t, handleClick, props };
+    value: {
+      type: [String, Number, Boolean] as PropType<string | number | boolean>,
     },
+    isBtn: {
+      type: [Boolean] as PropType<boolean>,
+      default: false,
+    },
+    numberToString: propTypes.bool,
+    resultField: propTypes.string.def(''),
+    labelField: propTypes.string.def('label'),
+    valueField: propTypes.string.def('value'),
+    immediate: propTypes.bool.def(true),
   });
+
+  const emit = defineEmits(['options-change', 'change']);
+
+  const options = ref<OptionsItem[]>([]);
+  const loading = ref(false);
+  const isFirstLoad = ref(true);
+  const emitData = ref<any[]>([]);
+  const attrs = useAttrs();
+  // Embedded in the form, just use the hook binding to perform form verification
+  const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+
+  // Processing options value
+  const getOptions = computed(() => {
+    const { labelField, valueField, numberToString } = props;
+
+    return unref(options).reduce((prev, next: any) => {
+      if (next) {
+        const value = next[valueField];
+        prev.push({
+          label: next[labelField],
+          value: numberToString ? `${value}` : value,
+          ...omit(next, [labelField, valueField]),
+        });
+      }
+      return prev;
+    }, [] as OptionsItem[]);
+  });
+
+  watchEffect(() => {
+    props.immediate && fetch();
+  });
+
+  watch(
+    () => props.params,
+    () => {
+      !unref(isFirstLoad) && fetch();
+    },
+    { deep: true },
+  );
+
+  async function fetch() {
+    const api = props.api;
+    if (!api || !isFunction(api)) return;
+    options.value = [];
+    try {
+      loading.value = true;
+      const res = await api(props.params);
+      if (Array.isArray(res)) {
+        options.value = res;
+        emitChange();
+        return;
+      }
+      if (props.resultField) {
+        options.value = get(res, props.resultField) || [];
+      }
+      emitChange();
+    } catch (error) {
+      console.warn(error);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function emitChange() {
+    emit('options-change', unref(getOptions));
+  }
+
+  function handleClick(...args) {
+    emitData.value = args;
+  }
 </script>
diff --git a/src/components/Form/src/components/ApiSelect.vue b/src/components/Form/src/components/ApiSelect.vue
index c7c9b3dd2..a7b0cba79 100644
--- a/src/components/Form/src/components/ApiSelect.vue
+++ b/src/components/Form/src/components/ApiSelect.vue
@@ -20,137 +20,128 @@
     </template>
   </Select>
 </template>
-<script lang="ts">
-  import { defineComponent, PropType, ref, computed, unref, watch } from 'vue';
+<script lang="ts" setup>
+  import { PropType, ref, computed, unref, watch } from 'vue';
   import { Select } from 'ant-design-vue';
   import type { SelectValue } from 'ant-design-vue/es/select';
-  import { isFunction } from '/@/utils/is';
-  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
-  import { useAttrs } from '@vben/hooks';
+  import { isFunction } from '@/utils/is';
+  import { useRuleFormItem } from '@/hooks/component/useFormItem';
   import { get, omit } from 'lodash-es';
   import { LoadingOutlined } from '@ant-design/icons-vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { propTypes } from '/@/utils/propTypes';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { propTypes } from '@/utils/propTypes';
 
   type OptionsItem = { label?: string; value?: string; disabled?: boolean; [name: string]: any };
 
-  export default defineComponent({
-    name: 'ApiSelect',
-    components: {
-      Select,
-      LoadingOutlined,
+  defineOptions({ name: 'ApiSelect', inheritAttrs: false });
+
+  const props = defineProps({
+    value: { type: [Array, Object, String, Number] as PropType<SelectValue> },
+    numberToString: propTypes.bool,
+    api: {
+      type: Function as PropType<(arg?: any) => Promise<OptionsItem[]>>,
+      default: null,
     },
-    inheritAttrs: false,
-    props: {
-      value: { type: [Array, Object, String, Number] as PropType<SelectValue> },
-      numberToString: propTypes.bool,
-      api: {
-        type: Function as PropType<(arg?: any) => Promise<OptionsItem[]>>,
-        default: null,
-      },
-      // api params
-      params: propTypes.any.def({}),
-      // support xxx.xxx.xx
-      resultField: propTypes.string.def(''),
-      labelField: propTypes.string.def('label'),
-      valueField: propTypes.string.def('value'),
-      immediate: propTypes.bool.def(true),
-      alwaysLoad: propTypes.bool.def(false),
-      options: {
-        type: Array<OptionsItem>,
-        default: [],
-      },
-    },
-    emits: ['options-change', 'change', 'update:value'],
-    setup(props, { emit }) {
-      const options = ref<OptionsItem[]>([]);
-      const loading = ref(false);
-      // 首次是否加载过了
-      const isFirstLoaded = ref(false);
-      const emitData = ref<OptionsItem[]>([]);
-      const attrs = useAttrs();
-      const { t } = useI18n();
-
-      // Embedded in the form, just use the hook binding to perform form verification
-      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
-
-      const getOptions = computed(() => {
-        const { labelField, valueField, numberToString } = props;
-
-        let data = unref(options).reduce((prev, next: any) => {
-          if (next) {
-            const value = get(next, valueField);
-            prev.push({
-              ...omit(next, [labelField, valueField]),
-              label: get(next, labelField),
-              value: numberToString ? `${value}` : value,
-            });
-          }
-          return prev;
-        }, [] as OptionsItem[]);
-        return data.length > 0 ? data : props.options;
-      });
-
-      watch(
-        () => state.value,
-        (v) => {
-          emit('update:value', v);
-        },
-      );
-
-      watch(
-        () => props.params,
-        () => {
-          !unref(isFirstLoaded) && fetch();
-        },
-        { deep: true, immediate: props.immediate },
-      );
-
-      async function fetch() {
-        const api = props.api;
-        if (!api || !isFunction(api) || loading.value) return;
-        options.value = [];
-        try {
-          loading.value = true;
-          const res = await api(props.params);
-          isFirstLoaded.value = true;
-          if (Array.isArray(res)) {
-            options.value = res;
-            emitChange();
-            return;
-          }
-          if (props.resultField) {
-            options.value = get(res, props.resultField) || [];
-          }
-          emitChange();
-        } catch (error) {
-          console.warn(error);
-        } finally {
-          loading.value = false;
-          // reset status
-          isFirstLoaded.value = false;
-        }
-      }
-
-      async function handleFetch(visible: boolean) {
-        if (visible) {
-          if (props.alwaysLoad) {
-            await fetch();
-          } else if (!props.immediate && !unref(isFirstLoaded)) {
-            await fetch();
-          }
-        }
-      }
-
-      function emitChange() {
-        emit('options-change', unref(getOptions));
-      }
-
-      function handleChange(_, ...args) {
-        emitData.value = args;
-      }
-
-      return { state, attrs, getOptions, loading, t, handleFetch, handleChange };
+    // api params
+    params: propTypes.any.def({}),
+    // support xxx.xxx.xx
+    resultField: propTypes.string.def(''),
+    labelField: propTypes.string.def('label'),
+    valueField: propTypes.string.def('value'),
+    immediate: propTypes.bool.def(true),
+    alwaysLoad: propTypes.bool.def(false),
+    options: {
+      type: Array<OptionsItem>,
+      default: [],
     },
   });
+
+  const emit = defineEmits(['options-change', 'change', 'update:value']);
+
+  const optionsRef = ref<OptionsItem[]>([]);
+
+  const loading = ref(false);
+  // 首次是否加载过了
+  const isFirstLoaded = ref(false);
+  const emitData = ref<OptionsItem[]>([]);
+  const { t } = useI18n();
+
+  // Embedded in the form, just use the hook binding to perform form verification
+  const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+
+  const getOptions = computed(() => {
+    const { labelField, valueField, numberToString } = props;
+
+    let data = unref(optionsRef).reduce((prev, next: any) => {
+      if (next) {
+        const value = get(next, valueField);
+        prev.push({
+          ...omit(next, [labelField, valueField]),
+          label: get(next, labelField),
+          value: numberToString ? `${value}` : value,
+        });
+      }
+      return prev;
+    }, [] as OptionsItem[]);
+    return data.length > 0 ? data : props.options;
+  });
+
+  watch(
+    () => state.value,
+    (v) => {
+      emit('update:value', v);
+    },
+  );
+
+  watch(
+    () => props.params,
+    () => {
+      !unref(isFirstLoaded) && fetch();
+    },
+    { deep: true, immediate: props.immediate },
+  );
+
+  async function fetch() {
+    const api = props.api;
+    if (!api || !isFunction(api) || loading.value) return;
+    optionsRef.value = [];
+    try {
+      loading.value = true;
+      const res = await api(props.params);
+      isFirstLoaded.value = true;
+      if (Array.isArray(res)) {
+        optionsRef.value = res;
+        emitChange();
+        return;
+      }
+      if (props.resultField) {
+        optionsRef.value = get(res, props.resultField) || [];
+      }
+      emitChange();
+    } catch (error) {
+      console.warn(error);
+    } finally {
+      loading.value = false;
+      // reset status
+      isFirstLoaded.value = false;
+    }
+  }
+
+  async function handleFetch(visible: boolean) {
+    if (visible) {
+      if (props.alwaysLoad) {
+        await fetch();
+      } else if (!props.immediate && !unref(isFirstLoaded)) {
+        await fetch();
+      }
+    }
+  }
+
+  function emitChange() {
+    emit('options-change', unref(getOptions));
+  }
+
+  function handleChange(_, ...args) {
+    emitData.value = args;
+  }
 </script>
diff --git a/src/components/Form/src/components/ApiTransfer.vue b/src/components/Form/src/components/ApiTransfer.vue
index 73516ff16..1db2e0711 100644
--- a/src/components/Form/src/components/ApiTransfer.vue
+++ b/src/components/Form/src/components/ApiTransfer.vue
@@ -12,127 +12,116 @@
   />
 </template>
 
-<script lang="ts">
-  import { computed, defineComponent, watch, ref, unref, watchEffect, PropType } from 'vue';
+<script lang="ts" setup>
+  import { computed, watch, ref, unref, watchEffect, PropType } from 'vue';
   import { Transfer } from 'ant-design-vue';
-  import { isFunction } from '/@/utils/is';
+  import { isFunction } from '@/utils/is';
   import { get, omit } from 'lodash-es';
-  import { propTypes } from '/@/utils/propTypes';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { propTypes } from '@/utils/propTypes';
   import { TransferDirection, TransferItem } from 'ant-design-vue/lib/transfer';
 
-  export default defineComponent({
-    name: 'ApiTransfer',
-    components: { Transfer },
-    props: {
-      value: { type: Array as PropType<Array<string>> },
-      api: {
-        type: Function as PropType<(arg) => Promise<TransferItem[]>>,
-        default: null,
-      },
-      params: { type: Object },
-      dataSource: { type: Array as PropType<Array<TransferItem>> },
-      immediate: propTypes.bool.def(true),
-      alwaysLoad: propTypes.bool.def(false),
-      afterFetch: { type: Function },
-      resultField: propTypes.string.def(''),
-      labelField: propTypes.string.def('title'),
-      valueField: propTypes.string.def('key'),
-      showSearch: { type: Boolean, default: false },
-      disabled: { type: Boolean, default: false },
-      filterOption: {
-        type: Function as PropType<(inputValue: string, item: TransferItem) => boolean>,
-      },
-      selectedKeys: { type: Array as PropType<Array<string>> },
-      showSelectAll: { type: Boolean, default: false },
-      targetKeys: { type: Array as PropType<Array<string>> },
+  defineOptions({ name: 'ApiTransfer' });
+
+  const props = defineProps({
+    value: { type: Array as PropType<Array<string>> },
+    api: {
+      type: Function as PropType<(arg) => Promise<TransferItem[]>>,
+      default: null,
     },
-    emits: ['options-change', 'change'],
-    setup(props, { attrs, emit }) {
-      const _dataSource = ref<TransferItem[]>([]);
-      const _targetKeys = ref<string[]>([]);
-      const { t } = useI18n();
+    params: { type: Object },
+    dataSource: { type: Array as PropType<Array<TransferItem>> },
+    immediate: propTypes.bool.def(true),
+    alwaysLoad: propTypes.bool.def(false),
+    afterFetch: { type: Function },
+    resultField: propTypes.string.def(''),
+    labelField: propTypes.string.def('title'),
+    valueField: propTypes.string.def('key'),
+    showSearch: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    filterOption: {
+      type: Function as PropType<(inputValue: string, item: TransferItem) => boolean>,
+    },
+    selectedKeys: { type: Array as PropType<Array<string>> },
+    showSelectAll: { type: Boolean, default: false },
+    targetKeys: { type: Array as PropType<Array<string>> },
+  });
 
-      const getAttrs = computed(() => {
-        return {
-          ...(!props.api ? { dataSource: unref(_dataSource) } : {}),
-          ...attrs,
-        };
-      });
-      const getdataSource = computed(() => {
-        const { labelField, valueField } = props;
+  const emit = defineEmits(['options-change', 'change']);
 
-        return unref(_dataSource).reduce((prev, next) => {
-          if (next) {
-            prev.push({
-              ...omit(next, [labelField, valueField]),
-              title: next[labelField],
-              key: next[valueField],
-            });
-          }
-          return prev;
-        }, [] as TransferItem[]);
-      });
-      const getTargetKeys = computed<string[]>(() => {
-        /* if (unref(_targetKeys).length > 0) {
+  const _dataSource = ref<TransferItem[]>([]);
+  const _targetKeys = ref<string[]>([]);
+
+  const getdataSource = computed(() => {
+    const { labelField, valueField } = props;
+
+    return unref(_dataSource).reduce((prev, next) => {
+      if (next) {
+        prev.push({
+          ...omit(next, [labelField, valueField]),
+          title: next[labelField],
+          key: next[valueField],
+        });
+      }
+      return prev;
+    }, [] as TransferItem[]);
+  });
+  const getTargetKeys = computed<string[]>(() => {
+    /* if (unref(_targetKeys).length > 0) {
           return unref(_targetKeys);
         } */
-        if (Array.isArray(props.value)) {
-          return props.value;
-        }
-        if (Array.isArray(props.targetKeys)) {
-          return props.targetKeys;
-        }
-        return [];
-      });
-
-      function handleChange(keys: string[], direction: TransferDirection, moveKeys: string[]) {
-        _targetKeys.value = keys;
-        console.log(direction);
-        console.log(moveKeys);
-        emit('change', keys);
-      }
-
-      watchEffect(() => {
-        props.immediate && !props.alwaysLoad && fetch();
-      });
-
-      watch(
-        () => props.params,
-        () => {
-          fetch();
-        },
-        { deep: true },
-      );
-
-      async function fetch() {
-        const api = props.api;
-        if (!api || !isFunction(api)) {
-          if (Array.isArray(props.dataSource)) {
-            _dataSource.value = props.dataSource;
-          }
-          return;
-        }
-        _dataSource.value = [];
-        try {
-          const res = await api(props.params);
-          if (Array.isArray(res)) {
-            _dataSource.value = res;
-            emitChange();
-            return;
-          }
-          if (props.resultField) {
-            _dataSource.value = get(res, props.resultField) || [];
-          }
-          emitChange();
-        } catch (error) {
-          console.warn(error);
-        }
-      }
-      function emitChange() {
-        emit('options-change', unref(getdataSource));
-      }
-      return { getTargetKeys, getdataSource, t, getAttrs, handleChange };
-    },
+    if (Array.isArray(props.value)) {
+      return props.value;
+    }
+    if (Array.isArray(props.targetKeys)) {
+      return props.targetKeys;
+    }
+    return [];
   });
+
+  function handleChange(keys: string[], direction: TransferDirection, moveKeys: string[]) {
+    _targetKeys.value = keys;
+    console.log(direction);
+    console.log(moveKeys);
+    emit('change', keys);
+  }
+
+  watchEffect(() => {
+    props.immediate && !props.alwaysLoad && fetch();
+  });
+
+  watch(
+    () => props.params,
+    () => {
+      fetch();
+    },
+    { deep: true },
+  );
+
+  async function fetch() {
+    const api = props.api;
+    if (!api || !isFunction(api)) {
+      if (Array.isArray(props.dataSource)) {
+        _dataSource.value = props.dataSource;
+      }
+      return;
+    }
+    _dataSource.value = [];
+    try {
+      const res = await api(props.params);
+      if (Array.isArray(res)) {
+        _dataSource.value = res;
+        emitChange();
+        return;
+      }
+      if (props.resultField) {
+        _dataSource.value = get(res, props.resultField) || [];
+      }
+      emitChange();
+    } catch (error) {
+      console.warn(error);
+    }
+  }
+  function emitChange() {
+    emit('options-change', unref(getdataSource));
+  }
 </script>
diff --git a/src/components/Form/src/components/ApiTree.vue b/src/components/Form/src/components/ApiTree.vue
index f2b9cdde1..5a476b4b4 100644
--- a/src/components/Form/src/components/ApiTree.vue
+++ b/src/components/Form/src/components/ApiTree.vue
@@ -1,99 +1,97 @@
 <template>
-  <a-tree v-bind="getAttrs" v-model:selectedKeys="state">
+  <Tree v-bind="getAttrs" v-model:selectedKeys="state">
     <template #[item]="data" v-for="item in Object.keys($slots)">
       <slot :name="item" v-bind="data || {}"></slot>
     </template>
-  </a-tree>
+  </Tree>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { type Recordable, type AnyFunction } from '@vben/types';
-  import { type PropType, computed, defineComponent, watch, ref, onMounted, unref } from 'vue';
+  import { type PropType, computed, watch, ref, onMounted, unref, useAttrs } from 'vue';
   import { Tree, TreeProps } from 'ant-design-vue';
-  import { isArray, isFunction } from '/@/utils/is';
+  import { isArray, isFunction } from '@/utils/is';
   import { get } from 'lodash-es';
-  import { propTypes } from '/@/utils/propTypes';
   import { DataNode } from 'ant-design-vue/es/tree';
-  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { useRuleFormItem } from '@/hooks/component/useFormItem';
 
-  export default defineComponent({
-    name: 'ApiTree',
-    components: { ATree: Tree },
-    props: {
-      api: { type: Function as PropType<(arg?: Recordable<any>) => Promise<Recordable<any>>> },
-      params: { type: Object },
-      immediate: { type: Boolean, default: true },
-      resultField: propTypes.string.def(''),
-      afterFetch: { type: Function as PropType<AnyFunction> },
-      value: {
-        type: Array as PropType<TreeProps['selectedKeys']>,
-      },
-    },
-    emits: ['options-change', 'change', 'update:value'],
-    setup(props, { attrs, emit }) {
-      const treeData = ref<DataNode[]>([]);
-      const isFirstLoaded = ref<Boolean>(false);
-      const loading = ref(false);
-      const emitData = ref<any[]>([]);
+  defineOptions({ name: 'ApiTree' });
 
-      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
-      const getAttrs = computed(() => {
-        return {
-          ...(props.api ? { treeData: unref(treeData) } : {}),
-          ...attrs,
-        };
-      });
-
-      watch(
-        () => state.value,
-        (v) => {
-          emit('update:value', v);
-        },
-      );
-
-      watch(
-        () => props.params,
-        () => {
-          !unref(isFirstLoaded) && fetch();
-        },
-        { deep: true },
-      );
-
-      watch(
-        () => props.immediate,
-        (v) => {
-          v && !isFirstLoaded.value && fetch();
-        },
-      );
-
-      onMounted(() => {
-        props.immediate && fetch();
-      });
-
-      async function fetch() {
-        const { api, afterFetch } = props;
-        if (!api || !isFunction(api)) return;
-        loading.value = true;
-        treeData.value = [];
-        let result;
-        try {
-          result = await api(props.params);
-        } catch (e) {
-          console.error(e);
-        }
-        if (afterFetch && isFunction(afterFetch)) {
-          result = afterFetch(result);
-        }
-        loading.value = false;
-        if (!result) return;
-        if (!isArray(result)) {
-          result = get(result, props.resultField);
-        }
-        treeData.value = (result as (Recordable & { key: string | number })[]) || [];
-        isFirstLoaded.value = true;
-        emit('options-change', treeData.value);
-      }
-      return { getAttrs, loading, state };
+  const props = defineProps({
+    api: { type: Function as PropType<(arg?: Recordable<any>) => Promise<Recordable<any>>> },
+    params: { type: Object },
+    immediate: { type: Boolean, default: true },
+    resultField: { type: String, default: '' },
+    afterFetch: { type: Function as PropType<AnyFunction> },
+    value: {
+      type: Array as PropType<TreeProps['selectedKeys']>,
     },
   });
+
+  const emit = defineEmits(['options-change', 'change', 'update:value']);
+
+  const attrs = useAttrs();
+
+  const treeData = ref<DataNode[]>([]);
+  const isFirstLoaded = ref<Boolean>(false);
+  const loading = ref(false);
+  const emitData = ref<any[]>([]);
+
+  const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+  const getAttrs = computed(() => {
+    return {
+      ...(props.api ? { treeData: unref(treeData) } : {}),
+      ...attrs,
+    };
+  });
+
+  watch(
+    () => state.value,
+    (v) => {
+      emit('update:value', v);
+    },
+  );
+
+  watch(
+    () => props.params,
+    () => {
+      !unref(isFirstLoaded) && fetch();
+    },
+    { deep: true },
+  );
+
+  watch(
+    () => props.immediate,
+    (v) => {
+      v && !isFirstLoaded.value && fetch();
+    },
+  );
+
+  onMounted(() => {
+    props.immediate && fetch();
+  });
+
+  async function fetch() {
+    const { api, afterFetch } = props;
+    if (!api || !isFunction(api)) return;
+    loading.value = true;
+    treeData.value = [];
+    let result;
+    try {
+      result = await api(props.params);
+    } catch (e) {
+      console.error(e);
+    }
+    if (afterFetch && isFunction(afterFetch)) {
+      result = afterFetch(result);
+    }
+    loading.value = false;
+    if (!result) return;
+    if (!isArray(result)) {
+      result = get(result, props.resultField);
+    }
+    treeData.value = (result as (Recordable & { key: string | number })[]) || [];
+    isFirstLoaded.value = true;
+    emit('options-change', treeData.value);
+  }
 </script>
diff --git a/src/components/Form/src/components/ApiTreeSelect.vue b/src/components/Form/src/components/ApiTreeSelect.vue
index 4a33a54bc..de45477af 100644
--- a/src/components/Form/src/components/ApiTreeSelect.vue
+++ b/src/components/Form/src/components/ApiTreeSelect.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-tree-select
+  <TreeSelect
     v-bind="getAttrs"
     @change="handleChange"
     :field-names="fieldNames"
@@ -11,102 +11,100 @@
     <template #suffixIcon v-if="loading">
       <LoadingOutlined spin />
     </template>
-  </a-tree-select>
+  </TreeSelect>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { type Recordable } from '@vben/types';
-  import { type PropType, computed, defineComponent, watch, ref, onMounted, unref } from 'vue';
+  import { type PropType, computed, watch, ref, onMounted, unref, useAttrs } from 'vue';
   import { TreeSelect } from 'ant-design-vue';
-  import { isArray, isFunction } from '/@/utils/is';
+  import { isArray, isFunction } from '@/utils/is';
   import { get } from 'lodash-es';
-  import { propTypes } from '/@/utils/propTypes';
+  import { propTypes } from '@/utils/propTypes';
   import { LoadingOutlined } from '@ant-design/icons-vue';
 
-  export default defineComponent({
-    name: 'ApiTreeSelect',
-    components: { ATreeSelect: TreeSelect, LoadingOutlined },
-    props: {
-      api: { type: Function as PropType<(arg?: Recordable<any>) => Promise<Recordable<any>>> },
-      params: { type: Object },
-      immediate: { type: Boolean, default: true },
-      async: { type: Boolean, default: false },
-      resultField: propTypes.string.def(''),
-      labelField: propTypes.string.def('title'),
-      valueField: propTypes.string.def('value'),
-      childrenField: propTypes.string.def('children'),
-    },
-    emits: ['options-change', 'change', 'load-data'],
-    setup(props, { attrs, emit }) {
-      const treeData = ref<Recordable<any>[]>([]);
-      const isFirstLoaded = ref<Boolean>(false);
-      const loading = ref(false);
-      const getAttrs = computed(() => {
-        return {
-          ...(props.api ? { treeData: unref(treeData) } : {}),
-          ...attrs,
-        };
-      });
-      const fieldNames = {
-        children: props.childrenField,
-        value: props.valueField,
-        label: props.labelField,
-      };
+  defineOptions({ name: 'ApiTreeSelect' });
 
-      function handleChange(...args) {
-        emit('change', ...args);
-      }
-
-      watch(
-        () => props.params,
-        () => {
-          !unref(isFirstLoaded) && fetch();
-        },
-        { deep: true },
-      );
-
-      watch(
-        () => props.immediate,
-        (v) => {
-          v && !isFirstLoaded.value && fetch();
-        },
-      );
-
-      onMounted(() => {
-        props.immediate && fetch();
-      });
-
-      function onLoadData(treeNode) {
-        return new Promise((resolve: (value?: unknown) => void) => {
-          if (isArray(treeNode.children) && treeNode.children.length > 0) {
-            resolve();
-            return;
-          }
-          emit('load-data', { treeData, treeNode, resolve });
-        });
-      }
-
-      async function fetch() {
-        const { api } = props;
-        if (!api || !isFunction(api) || loading.value) return;
-        loading.value = true;
-        treeData.value = [];
-        let result;
-        try {
-          result = await api(props.params);
-        } catch (e) {
-          console.error(e);
-        }
-        loading.value = false;
-        if (!result) return;
-        if (!isArray(result)) {
-          result = get(result, props.resultField);
-        }
-        treeData.value = (result as Recordable<any>[]) || [];
-        isFirstLoaded.value = true;
-        emit('options-change', treeData.value);
-      }
-      return { getAttrs, loading, handleChange, fieldNames, onLoadData };
-    },
+  const props = defineProps({
+    api: { type: Function as PropType<(arg?: Recordable<any>) => Promise<Recordable<any>>> },
+    params: { type: Object },
+    immediate: { type: Boolean, default: true },
+    async: { type: Boolean, default: false },
+    resultField: propTypes.string.def(''),
+    labelField: propTypes.string.def('title'),
+    valueField: propTypes.string.def('value'),
+    childrenField: propTypes.string.def('children'),
   });
+
+  const emit = defineEmits(['options-change', 'change', 'load-data']);
+
+  const attrs = useAttrs();
+  const treeData = ref<Recordable<any>[]>([]);
+  const isFirstLoaded = ref<Boolean>(false);
+  const loading = ref(false);
+  const getAttrs = computed(() => {
+    return {
+      ...(props.api ? { treeData: unref(treeData) } : {}),
+      ...attrs,
+    };
+  });
+  const fieldNames = {
+    children: props.childrenField,
+    value: props.valueField,
+    label: props.labelField,
+  };
+
+  function handleChange(...args) {
+    emit('change', ...args);
+  }
+
+  watch(
+    () => props.params,
+    () => {
+      !unref(isFirstLoaded) && fetch();
+    },
+    { deep: true },
+  );
+
+  watch(
+    () => props.immediate,
+    (v) => {
+      v && !isFirstLoaded.value && fetch();
+    },
+  );
+
+  onMounted(() => {
+    props.immediate && fetch();
+  });
+
+  function onLoadData(treeNode) {
+    return new Promise((resolve: (value?: unknown) => void) => {
+      if (isArray(treeNode.children) && treeNode.children.length > 0) {
+        resolve();
+        return;
+      }
+      emit('load-data', { treeData, treeNode, resolve });
+    });
+  }
+
+  async function fetch() {
+    const { api } = props;
+    if (!api || !isFunction(api) || loading.value) return;
+    loading.value = true;
+    treeData.value = [];
+    let result;
+    try {
+      result = await api(props.params);
+    } catch (e) {
+      console.error(e);
+    }
+    loading.value = false;
+    if (!result) return;
+    if (!isArray(result)) {
+      result = get(result, props.resultField);
+    }
+    treeData.value = (result as Recordable<any>[]) || [];
+    isFirstLoaded.value = true;
+    emit('options-change', treeData.value);
+  }
 </script>
diff --git a/src/components/Form/src/components/FormAction.vue b/src/components/Form/src/components/FormAction.vue
index 3f0267563..cd3700dc5 100644
--- a/src/components/Form/src/components/FormAction.vue
+++ b/src/components/Form/src/components/FormAction.vue
@@ -1,7 +1,7 @@
 <template>
-  <a-col v-bind="actionColOpt" v-if="showActionButtonGroup">
+  <Col v-bind="actionColOpt" v-if="showActionButtonGroup">
     <div style="width: 100%" :style="{ textAlign: actionColOpt.style.textAlign }">
-      <FormItem>
+      <Form.Item>
         <slot name="resetBefore"></slot>
         <Button
           type="default"
@@ -35,100 +35,83 @@
           <BasicArrow class="ml-1" :expand="!isAdvanced" up />
         </Button>
         <slot name="advanceAfter"></slot>
-      </FormItem>
+      </Form.Item>
     </div>
-  </a-col>
+  </Col>
 </template>
-<script lang="ts">
-  import type { ColEx } from '../types/index';
-  import { defineComponent, computed, PropType } from 'vue';
+<script lang="ts" setup>
+  import type { ColEx } from '../types';
+  import { computed, PropType } from 'vue';
   import { Form, Col } from 'ant-design-vue';
-  import { Button, ButtonProps } from '/@/components/Button';
-  import { BasicArrow } from '/@/components/Basic';
+  import { Button, ButtonProps } from '@/components/Button';
+  import { BasicArrow } from '@/components/Basic';
   import { useFormContext } from '../hooks/useFormContext';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { propTypes } from '/@/utils/propTypes';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { propTypes } from '@/utils/propTypes';
 
   type ButtonOptions = Partial<ButtonProps> & { text: string };
 
-  export default defineComponent({
-    name: 'BasicFormAction',
-    components: {
-      FormItem: Form.Item,
-      Button,
-      BasicArrow,
-      [Col.name]: Col,
+  defineOptions({ name: 'BasicFormAction' });
+
+  const props = defineProps({
+    showActionButtonGroup: propTypes.bool.def(true),
+    showResetButton: propTypes.bool.def(true),
+    showSubmitButton: propTypes.bool.def(true),
+    showAdvancedButton: propTypes.bool.def(true),
+    resetButtonOptions: {
+      type: Object as PropType<ButtonOptions>,
+      default: () => ({}),
     },
-    props: {
-      showActionButtonGroup: propTypes.bool.def(true),
-      showResetButton: propTypes.bool.def(true),
-      showSubmitButton: propTypes.bool.def(true),
-      showAdvancedButton: propTypes.bool.def(true),
-      resetButtonOptions: {
-        type: Object as PropType<ButtonOptions>,
-        default: () => ({}),
-      },
-      submitButtonOptions: {
-        type: Object as PropType<ButtonOptions>,
-        default: () => ({}),
-      },
-      actionColOptions: {
-        type: Object as PropType<Partial<ColEx>>,
-        default: () => ({}),
-      },
-      actionSpan: propTypes.number.def(6),
-      isAdvanced: propTypes.bool,
-      hideAdvanceBtn: propTypes.bool,
+    submitButtonOptions: {
+      type: Object as PropType<ButtonOptions>,
+      default: () => ({}),
     },
-    emits: ['toggle-advanced'],
-    setup(props, { emit }) {
-      const { t } = useI18n();
-
-      const actionColOpt = computed(() => {
-        const { showAdvancedButton, actionSpan: span, actionColOptions } = props;
-        const actionSpan = 24 - span;
-        const advancedSpanObj = showAdvancedButton
-          ? { span: actionSpan < 6 ? 24 : actionSpan }
-          : {};
-        const actionColOpt: Partial<ColEx> = {
-          style: { textAlign: 'right' },
-          span: showAdvancedButton ? 6 : 4,
-          ...advancedSpanObj,
-          ...actionColOptions,
-        };
-        return actionColOpt;
-      });
-
-      const getResetBtnOptions = computed((): ButtonOptions => {
-        return Object.assign(
-          {
-            text: t('common.resetText'),
-          },
-          props.resetButtonOptions,
-        );
-      });
-
-      const getSubmitBtnOptions = computed(() => {
-        return Object.assign(
-          {
-            text: t('common.queryText'),
-          },
-          props.submitButtonOptions,
-        );
-      });
-
-      function toggleAdvanced() {
-        emit('toggle-advanced');
-      }
-
-      return {
-        t,
-        actionColOpt,
-        getResetBtnOptions,
-        getSubmitBtnOptions,
-        toggleAdvanced,
-        ...useFormContext(),
-      };
+    actionColOptions: {
+      type: Object as PropType<Partial<ColEx>>,
+      default: () => ({}),
     },
+    actionSpan: propTypes.number.def(6),
+    isAdvanced: propTypes.bool,
+    hideAdvanceBtn: propTypes.bool,
   });
+
+  const emit = defineEmits(['toggle-advanced']);
+
+  const { t } = useI18n();
+  const { resetAction, submitAction } = useFormContext();
+
+  const actionColOpt = computed(() => {
+    const { showAdvancedButton, actionSpan: span, actionColOptions } = props;
+    const actionSpan = 24 - span;
+    const advancedSpanObj = showAdvancedButton ? { span: actionSpan < 6 ? 24 : actionSpan } : {};
+    const actionColOpt: Partial<ColEx> = {
+      style: { textAlign: 'right' },
+      span: showAdvancedButton ? 6 : 4,
+      ...advancedSpanObj,
+      ...actionColOptions,
+    };
+    return actionColOpt;
+  });
+
+  const getResetBtnOptions = computed((): ButtonOptions => {
+    return Object.assign(
+      {
+        text: t('common.resetText'),
+      },
+      props.resetButtonOptions,
+    );
+  });
+
+  const getSubmitBtnOptions = computed(() => {
+    return Object.assign(
+      {
+        text: t('common.queryText'),
+      },
+      props.submitButtonOptions,
+    );
+  });
+
+  function toggleAdvanced() {
+    emit('toggle-advanced');
+  }
 </script>
diff --git a/src/components/Form/src/components/FormItem.vue b/src/components/Form/src/components/FormItem.vue
index dc71caf56..e6fc845f3 100644
--- a/src/components/Form/src/components/FormItem.vue
+++ b/src/components/Form/src/components/FormItem.vue
@@ -9,12 +9,12 @@
     type FormSchemaInner as FormSchema,
   } from '../types/form';
   import type { Rule as ValidationRule } from 'ant-design-vue/lib/form/interface';
-  import type { TableActionType } from '/@/components/Table';
+  import type { TableActionType } from '@/components/Table';
   import { Col, Divider, Form } from 'ant-design-vue';
   import { componentMap } from '../componentMap';
-  import { BasicHelp } from '/@/components/Basic';
-  import { isBoolean, isFunction, isNull } from '/@/utils/is';
-  import { getSlot } from '/@/utils/helper/tsxHelper';
+  import { BasicHelp } from '@/components/Basic';
+  import { isBoolean, isFunction, isNull } from '@/utils/is';
+  import { getSlot } from '@/utils/helper/tsxHelper';
   import {
     createPlaceholderMessage,
     NO_AUTO_LINK_COMPONENTS,
@@ -22,7 +22,7 @@
   } from '../helper';
   import { cloneDeep, upperFirst } from 'lodash-es';
   import { useItemLabelWidth } from '../hooks/useLabelWidth';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
 
   export default defineComponent({
     name: 'BasicFormItem',
diff --git a/src/components/Form/src/components/RadioButtonGroup.vue b/src/components/Form/src/components/RadioButtonGroup.vue
index 698635e6c..fe9a12c32 100644
--- a/src/components/Form/src/components/RadioButtonGroup.vue
+++ b/src/components/Form/src/components/RadioButtonGroup.vue
@@ -2,62 +2,55 @@
  * @Description:It is troublesome to implement radio button group in the form. So it is extracted independently as a separate component
 -->
 <template>
-  <RadioGroup v-bind="attrs" v-model:value="state" button-style="solid">
+  <Radio.Group v-bind="attrs" v-model:value="state" button-style="solid">
     <template v-for="item in getOptions" :key="`${item.value}`">
-      <RadioButton :value="item.value" :disabled="item.disabled" @click="handleClick(item)">
+      <Radio.Button :value="item.value" :disabled="item.disabled" @click="handleClick(item)">
         {{ item.label }}
-      </RadioButton>
+      </Radio.Button>
     </template>
-  </RadioGroup>
+  </Radio.Group>
 </template>
-<script lang="ts">
-  import { defineComponent, PropType, computed, ref } from 'vue';
+<script lang="ts" setup>
+  import { PropType, computed, ref } from 'vue';
   import { Radio } from 'ant-design-vue';
-  import { isString } from '/@/utils/is';
-  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { isString } from '@/utils/is';
+  import { useRuleFormItem } from '@/hooks/component/useFormItem';
   import { useAttrs } from '@vben/hooks';
 
   type OptionsItem = { label: string; value: string | number | boolean; disabled?: boolean };
   type RadioItem = string | OptionsItem;
 
-  export default defineComponent({
-    name: 'RadioButtonGroup',
-    components: {
-      RadioGroup: Radio.Group,
-      RadioButton: Radio.Button,
+  defineOptions({ name: 'RadioButtonGroup' });
+
+  const props = defineProps({
+    value: {
+      type: [String, Number, Boolean] as PropType<string | number | boolean>,
     },
-    props: {
-      value: {
-        type: [String, Number, Boolean] as PropType<string | number | boolean>,
-      },
-      options: {
-        type: Array as PropType<RadioItem[]>,
-        default: () => [],
-      },
-    },
-    emits: ['change'],
-    setup(props) {
-      const attrs = useAttrs();
-      const emitData = ref<any[]>([]);
-      // Embedded in the form, just use the hook binding to perform form verification
-      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
-
-      // Processing options value
-      const getOptions = computed((): OptionsItem[] => {
-        const { options } = props;
-        if (!options || options?.length === 0) return [];
-
-        const isStringArr = options.some((item) => isString(item));
-        if (!isStringArr) return options as OptionsItem[];
-
-        return options.map((item) => ({ label: item, value: item })) as OptionsItem[];
-      });
-
-      function handleClick(...args) {
-        emitData.value = args;
-      }
-
-      return { state, getOptions, attrs, handleClick };
+    options: {
+      type: Array as PropType<RadioItem[]>,
+      default: () => [],
     },
   });
+
+  // const emit = defineEmits(['change']);
+
+  const attrs = useAttrs();
+  const emitData = ref<any[]>([]);
+  // Embedded in the form, just use the hook binding to perform form verification
+  const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+
+  // Processing options value
+  const getOptions = computed((): OptionsItem[] => {
+    const { options } = props;
+    if (!options || options?.length === 0) return [];
+
+    const isStringArr = options.some((item) => isString(item));
+    if (!isStringArr) return options as OptionsItem[];
+
+    return options.map((item) => ({ label: item, value: item })) as OptionsItem[];
+  });
+
+  function handleClick(...args) {
+    emitData.value = args;
+  }
 </script>
diff --git a/src/components/Form/src/helper.ts b/src/components/Form/src/helper.ts
index 18d9f5b1f..77e9fbf6f 100644
--- a/src/components/Form/src/helper.ts
+++ b/src/components/Form/src/helper.ts
@@ -1,8 +1,8 @@
 import type { Rule as ValidationRule } from 'ant-design-vue/lib/form/interface';
-import type { ComponentType } from './types/index';
-import { useI18n } from '/@/hooks/web/useI18n';
-import { dateUtil } from '/@/utils/dateUtil';
-import { isNumber, isObject } from '/@/utils/is';
+import type { ComponentType } from './types';
+import { useI18n } from '@/hooks/web/useI18n';
+import { dateUtil } from '@/utils/dateUtil';
+import { isNumber, isObject } from '@/utils/is';
 
 const { t } = useI18n();
 
diff --git a/src/components/Form/src/hooks/useAdvanced.ts b/src/components/Form/src/hooks/useAdvanced.ts
index 70d4c733c..5f54dd422 100644
--- a/src/components/Form/src/hooks/useAdvanced.ts
+++ b/src/components/Form/src/hooks/useAdvanced.ts
@@ -2,8 +2,8 @@ import type { ColEx } from '../types';
 import type { AdvanceState } from '../types/hooks';
 import { ComputedRef, getCurrentInstance, Ref, shallowReactive, computed, unref, watch } from 'vue';
 import type { FormProps, FormSchemaInner as FormSchema } from '../types/form';
-import { isBoolean, isFunction, isNumber, isObject } from '/@/utils/is';
-import { useBreakpoint } from '/@/hooks/event/useBreakpoint';
+import { isBoolean, isFunction, isNumber, isObject } from '@/utils/is';
+import { useBreakpoint } from '@/hooks/event/useBreakpoint';
 import { useDebounceFn } from '@vueuse/core';
 
 const BASIC_COL_LEN = 24;
diff --git a/src/components/Form/src/hooks/useComponentRegister.ts b/src/components/Form/src/hooks/useComponentRegister.ts
index 218aaa9b2..e60d980cc 100644
--- a/src/components/Form/src/hooks/useComponentRegister.ts
+++ b/src/components/Form/src/hooks/useComponentRegister.ts
@@ -1,4 +1,4 @@
-import type { ComponentType } from '../types/index';
+import type { ComponentType } from '../types';
 import { tryOnUnmounted } from '@vueuse/core';
 import { add, del } from '../componentMap';
 import type { Component } from 'vue';
diff --git a/src/components/Form/src/hooks/useForm.ts b/src/components/Form/src/hooks/useForm.ts
index fd4242e6a..6b864919d 100644
--- a/src/components/Form/src/hooks/useForm.ts
+++ b/src/components/Form/src/hooks/useForm.ts
@@ -7,9 +7,9 @@ import type {
 import type { NamePath } from 'ant-design-vue/lib/form/interface';
 import type { DynamicProps } from '/#/utils';
 import { ref, onUnmounted, unref, nextTick, watch } from 'vue';
-import { isProdMode } from '/@/utils/env';
-import { error } from '/@/utils/log';
-import { getDynamicProps } from '/@/utils';
+import { isProdMode } from '@/utils/env';
+import { error } from '@/utils/log';
+import { getDynamicProps } from '@/utils';
 
 export declare type ValidateFields = (nameList?: NamePath[]) => Promise<Recordable>;
 
diff --git a/src/components/Form/src/hooks/useFormContext.ts b/src/components/Form/src/hooks/useFormContext.ts
index 01dfadd76..099613260 100644
--- a/src/components/Form/src/hooks/useFormContext.ts
+++ b/src/components/Form/src/hooks/useFormContext.ts
@@ -1,5 +1,5 @@
 import type { InjectionKey } from 'vue';
-import { createContext, useContext } from '/@/hooks/core/useContext';
+import { createContext, useContext } from '@/hooks/core/useContext';
 
 export interface FormContextProps {
   resetAction: () => Promise<void>;
diff --git a/src/components/Form/src/hooks/useFormEvents.ts b/src/components/Form/src/hooks/useFormEvents.ts
index a6791376a..38517419a 100644
--- a/src/components/Form/src/hooks/useFormEvents.ts
+++ b/src/components/Form/src/hooks/useFormEvents.ts
@@ -2,12 +2,12 @@ import type { ComputedRef, Ref } from 'vue';
 import type { FormProps, FormSchemaInner as FormSchema, FormActionType } from '../types/form';
 import type { NamePath } from 'ant-design-vue/lib/form/interface';
 import { unref, toRaw, nextTick } from 'vue';
-import { isArray, isFunction, isObject, isString, isDef, isNil } from '/@/utils/is';
-import { deepMerge } from '/@/utils';
+import { isArray, isFunction, isObject, isString, isDef, isNil } from '@/utils/is';
+import { deepMerge } from '@/utils';
 import { dateItemType, handleInputNumberValue, defaultValueComponents } from '../helper';
-import { dateUtil } from '/@/utils/dateUtil';
+import { dateUtil } from '@/utils/dateUtil';
 import { cloneDeep, set, uniqBy, get } from 'lodash-es';
-import { error } from '/@/utils/log';
+import { error } from '@/utils/log';
 
 interface UseFormActionContext {
   emit: EmitType;
diff --git a/src/components/Form/src/hooks/useFormValues.ts b/src/components/Form/src/hooks/useFormValues.ts
index 45c477771..567b9256c 100644
--- a/src/components/Form/src/hooks/useFormValues.ts
+++ b/src/components/Form/src/hooks/useFormValues.ts
@@ -1,5 +1,5 @@
-import { isArray, isFunction, isEmpty, isObject, isString, isNil } from '/@/utils/is';
-import { dateUtil } from '/@/utils/dateUtil';
+import { isArray, isFunction, isEmpty, isObject, isString, isNil } from '@/utils/is';
+import { dateUtil } from '@/utils/dateUtil';
 import { unref } from 'vue';
 import type { Ref, ComputedRef } from 'vue';
 import type { FormProps, FormSchemaInner as FormSchema } from '../types/form';
diff --git a/src/components/Form/src/hooks/useLabelWidth.ts b/src/components/Form/src/hooks/useLabelWidth.ts
index 28a63e77f..511ba42c2 100644
--- a/src/components/Form/src/hooks/useLabelWidth.ts
+++ b/src/components/Form/src/hooks/useLabelWidth.ts
@@ -1,7 +1,7 @@
 import type { Ref } from 'vue';
 import { computed, unref } from 'vue';
 import type { FormProps, FormSchemaInner as FormSchema } from '../types/form';
-import { isNumber } from '/@/utils/is';
+import { isNumber } from '@/utils/is';
 
 export function useItemLabelWidth(schemaItemRef: Ref<FormSchema>, propsRef: Ref<FormProps>) {
   return computed(() => {
diff --git a/src/components/Form/src/props.ts b/src/components/Form/src/props.ts
index f3f6a2e4f..fb96e471e 100644
--- a/src/components/Form/src/props.ts
+++ b/src/components/Form/src/props.ts
@@ -1,10 +1,10 @@
 import type { FieldMapToTime, FormSchema } from './types/form';
 import type { CSSProperties, PropType } from 'vue';
 import type { ColEx } from './types';
-import type { TableActionType } from '/@/components/Table';
+import type { TableActionType } from '@/components/Table';
 import type { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
 import type { RowProps } from 'ant-design-vue/lib/grid/Row';
-import { propTypes } from '/@/utils/propTypes';
+import { propTypes } from '@/utils/propTypes';
 
 export const basicProps = {
   model: {
diff --git a/src/components/Form/src/types/form.ts b/src/components/Form/src/types/form.ts
index 4df34d561..3f9fe157d 100644
--- a/src/components/Form/src/types/form.ts
+++ b/src/components/Form/src/types/form.ts
@@ -1,9 +1,9 @@
 import type { NamePath, RuleObject } from 'ant-design-vue/lib/form/interface';
 import type { VNode, CSSProperties } from 'vue';
-import type { ButtonProps as AntdButtonProps } from '/@/components/Button';
+import type { ButtonProps as AntdButtonProps } from '@/components/Button';
 import type { FormItem } from './formItem';
-import type { ColEx, ComponentType } from './index';
-import type { TableActionType } from '/@/components/Table/src/types/table';
+import type { ColEx, ComponentType } from './';
+import type { TableActionType } from '@/components/Table/src/types/table';
 import type { RowProps } from 'ant-design-vue/lib/grid/Row';
 
 export type FieldMapToTime = [string, [string, string], (string | [string, string])?][];
diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
index 58b970ed0..e05c70542 100644
--- a/src/components/Icon/Icon.vue
+++ b/src/components/Icon/Icon.vue
@@ -13,91 +13,78 @@
     :style="getWrapStyle"
   ></span>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { PropType } from 'vue';
-  import {
-    defineComponent,
-    ref,
-    watch,
-    onMounted,
-    nextTick,
-    unref,
-    computed,
-    CSSProperties,
-  } from 'vue';
+  import { ref, watch, onMounted, nextTick, unref, computed, CSSProperties } from 'vue';
   import SvgIcon from './src/SvgIcon.vue';
   import Iconify from '@purge-icons/generated';
-  import { isString } from '/@/utils/is';
-  import { propTypes } from '/@/utils/propTypes';
+  import { isString } from '@/utils/is';
+  import { propTypes } from '@/utils/propTypes';
 
   const SVG_END_WITH_FLAG = '|svg';
-  export default defineComponent({
-    name: 'Icon',
-    components: { SvgIcon },
-    props: {
-      // icon name
-      icon: propTypes.string,
-      // icon color
-      color: propTypes.string,
-      // icon size
-      size: {
-        type: [String, Number] as PropType<string | number>,
-        default: 16,
-      },
-      spin: propTypes.bool.def(false),
-      prefix: propTypes.string.def(''),
-    },
-    setup(props) {
-      const elRef = ref(null);
-
-      const isSvgIcon = computed(() => props.icon?.endsWith(SVG_END_WITH_FLAG));
-      const getSvgIcon = computed(() => props.icon.replace(SVG_END_WITH_FLAG, ''));
-      const getIconRef = computed(() => `${props.prefix ? props.prefix + ':' : ''}${props.icon}`);
-
-      const update = async () => {
-        if (unref(isSvgIcon)) return;
-
-        const el: any = unref(elRef);
-        if (!el) return;
-
-        await nextTick();
-        const icon = unref(getIconRef);
-        if (!icon) return;
-
-        const svg = Iconify.renderSVG(icon, {});
-        if (svg) {
-          el.textContent = '';
-          el.appendChild(svg);
-        } else {
-          const span = document.createElement('span');
-          span.className = 'iconify';
-          span.dataset.icon = icon;
-          el.textContent = '';
-          el.appendChild(span);
-        }
-      };
-
-      const getWrapStyle = computed((): CSSProperties => {
-        const { size, color } = props;
-        let fs = size;
-        if (isString(size)) {
-          fs = parseInt(size, 10);
-        }
-
-        return {
-          fontSize: `${fs}px`,
-          color: color,
-          display: 'inline-flex',
-        };
-      });
-
-      watch(() => props.icon, update, { flush: 'post' });
-
-      onMounted(update);
-
-      return { elRef, getWrapStyle, isSvgIcon, getSvgIcon };
+
+  defineOptions({ name: 'Icon' });
+
+  const props = defineProps({
+    // icon name
+    icon: propTypes.string,
+    // icon color
+    color: propTypes.string,
+    // icon size
+    size: {
+      type: [String, Number] as PropType<string | number>,
+      default: 16,
     },
+    spin: propTypes.bool.def(false),
+    prefix: propTypes.string.def(''),
   });
+
+  const elRef = ref(null);
+
+  const isSvgIcon = computed(() => props.icon?.endsWith(SVG_END_WITH_FLAG));
+  const getSvgIcon = computed(() => props.icon.replace(SVG_END_WITH_FLAG, ''));
+  const getIconRef = computed(() => `${props.prefix ? props.prefix + ':' : ''}${props.icon}`);
+
+  const update = async () => {
+    if (unref(isSvgIcon)) return;
+
+    const el: any = unref(elRef);
+    if (!el) return;
+
+    await nextTick();
+    const icon = unref(getIconRef);
+    if (!icon) return;
+
+    const svg = Iconify.renderSVG(icon, {});
+    if (svg) {
+      el.textContent = '';
+      el.appendChild(svg);
+    } else {
+      const span = document.createElement('span');
+      span.className = 'iconify';
+      span.dataset.icon = icon;
+      el.textContent = '';
+      el.appendChild(span);
+    }
+  };
+
+  const getWrapStyle = computed((): CSSProperties => {
+    const { size, color } = props;
+    let fs = size;
+    if (isString(size)) {
+      fs = parseInt(size, 10);
+    }
+
+    return {
+      fontSize: `${fs}px`,
+      color: color,
+      display: 'inline-flex',
+    };
+  });
+
+  watch(() => props.icon, update, { flush: 'post' });
+
+  onMounted(update);
 </script>
 <style lang="less">
   .app-iconify {
diff --git a/src/components/Icon/src/IconPicker.vue b/src/components/Icon/src/IconPicker.vue
index b7b7fc692..92fa68521 100644
--- a/src/components/Icon/src/IconPicker.vue
+++ b/src/components/Icon/src/IconPicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-input
+  <Input
     readonly
     :style="{ width }"
     :placeholder="t('component.icon.placeholder')"
@@ -8,7 +8,7 @@
     @click="triggerPopover"
   >
     <template #addonAfter>
-      <a-popover
+      <Popover
         placement="bottomLeft"
         trigger="click"
         v-model="visible"
@@ -16,7 +16,7 @@
       >
         <template #title>
           <div class="flex justify-between">
-            <a-input
+            <Input
               :placeholder="t('component.icon.search')"
               @change="debounceHandleSearchChange"
               allowClear
@@ -36,14 +36,13 @@
                   @click="handleClick(icon)"
                   :title="icon"
                 >
-                  <!-- <Icon :icon="icon" :prefix="prefix" /> -->
                   <SvgIcon v-if="isSvgMode" :name="icon" />
                   <Icon :icon="icon" v-else />
                 </li>
               </ul>
             </ScrollContainer>
             <div class="flex py-2 items-center justify-center" v-if="getTotal >= pageSize">
-              <a-pagination
+              <Pagination
                 showLessItems
                 size="small"
                 :pageSize="pageSize"
@@ -52,8 +51,8 @@
               />
             </div>
           </div>
-          <template v-else
-            ><div class="p-5"><a-empty /></div>
+          <template v-else>
+            <div class="p-5"><Empty /> </div>
           </template>
         </template>
 
@@ -70,30 +69,24 @@
             v-else
           />
         </div>
-      </a-popover>
+      </Popover>
     </template>
-  </a-input>
+  </Input>
 </template>
 <script lang="ts" setup>
   import { ref, watchEffect, watch } from 'vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { ScrollContainer } from '/@/components/Container';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { ScrollContainer } from '@/components/Container';
   import { Input, Popover, Pagination, Empty } from 'ant-design-vue';
   import Icon from '../Icon.vue';
   import SvgIcon from './SvgIcon.vue';
 
   import iconsData from '../data/icons.data';
-  import { usePagination } from '/@/hooks/web/usePagination';
+  import { usePagination } from '@/hooks/web/usePagination';
   import { useDebounceFn } from '@vueuse/core';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
   import svgIcons from 'virtual:svg-icons-names';
-  import { copyText } from '/@/utils/copyTextToClipboard';
-
-  // 没有使用别名引入，是因为WebStorm当前版本还不能正确识别，会报unused警告
-  const AInput = Input;
-  const APopover = Popover;
-  const APagination = Pagination;
-  const AEmpty = Empty;
+  import { copyText } from '@/utils/copyTextToClipboard';
 
   function getIcons() {
     const prefix = iconsData.prefix;
diff --git a/src/components/Icon/src/SvgIcon.vue b/src/components/Icon/src/SvgIcon.vue
index c79c6444e..e1ff0c240 100644
--- a/src/components/Icon/src/SvgIcon.vue
+++ b/src/components/Icon/src/SvgIcon.vue
@@ -7,46 +7,43 @@
     <use :xlink:href="symbolId" />
   </svg>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { CSSProperties } from 'vue';
-  import { defineComponent, computed } from 'vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { computed } from 'vue';
+  import { useDesign } from '@/hooks/web/useDesign';
 
-  export default defineComponent({
-    name: 'SvgIcon',
-    props: {
-      prefix: {
-        type: String,
-        default: 'icon',
-      },
-      name: {
-        type: String,
-        required: true,
-      },
-      size: {
-        type: [Number, String],
-        default: 16,
-      },
-      spin: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    setup(props) {
-      const { prefixCls } = useDesign('svg-icon');
-      const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+  defineOptions({ name: 'SvgIcon' });
 
-      const getStyle = computed((): CSSProperties => {
-        const { size } = props;
-        let s = `${size}`;
-        s = `${s.replace('px', '')}px`;
-        return {
-          width: s,
-          height: s,
-        };
-      });
-      return { symbolId, prefixCls, getStyle };
+  const props = defineProps({
+    prefix: {
+      type: String,
+      default: 'icon',
     },
+    name: {
+      type: String,
+      required: true,
+    },
+    size: {
+      type: [Number, String],
+      default: 16,
+    },
+    spin: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  const { prefixCls } = useDesign('svg-icon');
+  const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+
+  const getStyle = computed((): CSSProperties => {
+    const { size } = props;
+    let s = `${size}`;
+    s = `${s.replace('px', '')}px`;
+    return {
+      width: s,
+      height: s,
+    };
   });
 </script>
 <style lang="less" scoped>
diff --git a/src/components/Loading/src/Loading.vue b/src/components/Loading/src/Loading.vue
index d5e9383ef..734974eff 100644
--- a/src/components/Loading/src/Loading.vue
+++ b/src/components/Loading/src/Loading.vue
@@ -8,41 +8,39 @@
     <Spin v-bind="$attrs" :tip="tip" :size="size" :spinning="loading" />
   </section>
 </template>
-<script lang="ts">
-  import { PropType, defineComponent } from 'vue';
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
   import { Spin } from 'ant-design-vue';
-  import { SizeEnum } from '/@/enums/sizeEnum';
+  import { SizeEnum } from '@/enums/sizeEnum';
 
-  export default defineComponent({
-    name: 'Loading',
-    components: { Spin },
-    props: {
-      tip: {
-        type: String as PropType<string>,
-        default: '',
-      },
-      size: {
-        type: String as PropType<SizeEnum>,
-        default: SizeEnum.LARGE,
-        validator: (v: SizeEnum): boolean => {
-          return [SizeEnum.DEFAULT, SizeEnum.SMALL, SizeEnum.LARGE].includes(v);
-        },
-      },
-      absolute: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-      },
-      loading: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-      },
-      background: {
-        type: String as PropType<string>,
-      },
-      theme: {
-        type: String as PropType<'dark' | 'light'>,
+  defineOptions({ name: 'Loading' });
+
+  defineProps({
+    tip: {
+      type: String as PropType<string>,
+      default: '',
+    },
+    size: {
+      type: String as PropType<SizeEnum>,
+      default: SizeEnum.LARGE,
+      validator: (v: SizeEnum): boolean => {
+        return [SizeEnum.DEFAULT, SizeEnum.SMALL, SizeEnum.LARGE].includes(v);
       },
     },
+    absolute: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+    loading: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+    background: {
+      type: String as PropType<string>,
+    },
+    theme: {
+      type: String as PropType<'dark' | 'light'>,
+    },
   });
 </script>
 <style lang="less" scoped>
diff --git a/src/components/Loading/src/typing.ts b/src/components/Loading/src/typing.ts
index 9af60e612..619645250 100644
--- a/src/components/Loading/src/typing.ts
+++ b/src/components/Loading/src/typing.ts
@@ -1,4 +1,4 @@
-import { SizeEnum } from '/@/enums/sizeEnum';
+import { SizeEnum } from '@/enums/sizeEnum';
 
 export interface LoadingProps {
   tip: string;
diff --git a/src/components/Markdown/index.ts b/src/components/Markdown/index.ts
index d337681ff..4dd7d185e 100644
--- a/src/components/Markdown/index.ts
+++ b/src/components/Markdown/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 import markDown from './src/Markdown.vue';
 import markDownViewer from './src/MarkdownViewer.vue';
 
diff --git a/src/components/Markdown/src/Markdown.vue b/src/components/Markdown/src/Markdown.vue
index 0843abef9..38f473a04 100644
--- a/src/components/Markdown/src/Markdown.vue
+++ b/src/components/Markdown/src/Markdown.vue
@@ -1,10 +1,9 @@
 <template>
   <div ref="wrapRef"></div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { Ref } from 'vue';
   import {
-    defineComponent,
     ref,
     unref,
     nextTick,
@@ -12,149 +11,147 @@
     watch,
     onBeforeUnmount,
     onDeactivated,
+    useAttrs,
   } from 'vue';
   import Vditor from 'vditor';
   import 'vditor/dist/index.css';
-  import { useLocale } from '/@/locales/useLocale';
+  import { useLocale } from '@/locales/useLocale';
   import { useModalContext } from '../../Modal';
-  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
   import { onMountedOrActivated } from '@vben/hooks';
   import { getTheme } from './getTheme';
 
   type Lang = 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' | undefined;
 
-  export default defineComponent({
-    inheritAttrs: false,
-    props: {
-      height: { type: Number, default: 360 },
-      value: { type: String, default: '' },
-    },
-    emits: ['change', 'get', 'update:value'],
-    setup(props, { attrs, emit }) {
-      const wrapRef = ref(null);
-      const vditorRef = ref(null) as Ref<Vditor | null>;
-      const initedRef = ref(false);
+  defineOptions({ inheritAttrs: false });
 
-      const modalFn = useModalContext();
-
-      const { getLocale } = useLocale();
-      const { getDarkMode } = useRootSetting();
-      const valueRef = ref(props.value || '');
-
-      watch(
-        [() => getDarkMode.value, () => initedRef.value],
-        ([val, inited]) => {
-          if (!inited) {
-            return;
-          }
-          instance
-            .getVditor()
-            ?.setTheme(getTheme(val) as any, getTheme(val, 'content'), getTheme(val, 'code'));
-        },
-        {
-          immediate: true,
-          flush: 'post',
-        },
-      );
-
-      watch(
-        () => props.value,
-        (v) => {
-          if (v !== valueRef.value) {
-            instance.getVditor()?.setValue(v);
-          }
-          valueRef.value = v;
-        },
-      );
-
-      const getCurrentLang = computed((): 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' => {
-        let lang: Lang;
-        switch (unref(getLocale)) {
-          case 'en':
-            lang = 'en_US';
-            break;
-          case 'ja':
-            lang = 'ja_JP';
-            break;
-          case 'ko':
-            lang = 'ko_KR';
-            break;
-          default:
-            lang = 'zh_CN';
-        }
-        return lang;
-      });
-      function init() {
-        const wrapEl = unref(wrapRef);
-        if (!wrapEl) return;
-        const bindValue = { ...attrs, ...props };
-        const insEditor = new Vditor(wrapEl, {
-          // 设置外观主题
-          theme: getTheme(getDarkMode.value) as any,
-          lang: unref(getCurrentLang),
-          mode: 'sv',
-          fullscreen: {
-            index: 520,
-          },
-          preview: {
-            theme: {
-              // 设置内容主题
-              current: getTheme(getDarkMode.value, 'content'),
-            },
-            hljs: {
-              // 设置代码块主题
-              style: getTheme(getDarkMode.value, 'code'),
-            },
-            actions: [],
-          },
-          input: (v) => {
-            valueRef.value = v;
-            emit('update:value', v);
-            emit('change', v);
-          },
-          after: () => {
-            nextTick(() => {
-              modalFn?.redoModalHeight?.();
-              insEditor.setValue(valueRef.value);
-              vditorRef.value = insEditor;
-              initedRef.value = true;
-              emit('get', instance);
-            });
-          },
-          blur: () => {
-            //unref(vditorRef)?.setValue(props.value);
-          },
-          ...bindValue,
-          cache: {
-            enable: false,
-          },
-        });
-      }
-
-      const instance = {
-        getVditor: (): Vditor => vditorRef.value!,
-      };
-
-      function destroy() {
-        const vditorInstance = unref(vditorRef);
-        if (!vditorInstance) return;
-        try {
-          vditorInstance?.destroy?.();
-        } catch (error) {
-          //
-        }
-        vditorRef.value = null;
-        initedRef.value = false;
-      }
-
-      onMountedOrActivated(init);
-
-      onBeforeUnmount(destroy);
-      onDeactivated(destroy);
-      return {
-        wrapRef,
-        ...instance,
-      };
-    },
+  const props = defineProps({
+    height: { type: Number, default: 360 },
+    value: { type: String, default: '' },
   });
+
+  const emit = defineEmits(['change', 'get', 'update:value']);
+
+  const attrs = useAttrs();
+
+  const wrapRef = ref(null);
+  const vditorRef = ref(null) as Ref<Vditor | null>;
+  const initedRef = ref(false);
+
+  const modalFn = useModalContext();
+
+  const { getLocale } = useLocale();
+  const { getDarkMode } = useRootSetting();
+  const valueRef = ref(props.value || '');
+
+  watch(
+    [() => getDarkMode.value, () => initedRef.value],
+    ([val, inited]) => {
+      if (!inited) {
+        return;
+      }
+      instance
+        .getVditor()
+        ?.setTheme(getTheme(val) as any, getTheme(val, 'content'), getTheme(val, 'code'));
+    },
+    {
+      immediate: true,
+      flush: 'post',
+    },
+  );
+
+  watch(
+    () => props.value,
+    (v) => {
+      if (v !== valueRef.value) {
+        instance.getVditor()?.setValue(v);
+      }
+      valueRef.value = v;
+    },
+  );
+
+  const getCurrentLang = computed((): 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' => {
+    let lang: Lang;
+    switch (unref(getLocale)) {
+      case 'en':
+        lang = 'en_US';
+        break;
+      case 'ja':
+        lang = 'ja_JP';
+        break;
+      case 'ko':
+        lang = 'ko_KR';
+        break;
+      default:
+        lang = 'zh_CN';
+    }
+    return lang;
+  });
+  function init() {
+    const wrapEl = unref(wrapRef);
+    if (!wrapEl) return;
+    const bindValue = { ...attrs, ...props };
+    const insEditor = new Vditor(wrapEl, {
+      // 设置外观主题
+      theme: getTheme(getDarkMode.value) as any,
+      lang: unref(getCurrentLang),
+      mode: 'sv',
+      fullscreen: {
+        index: 520,
+      },
+      preview: {
+        theme: {
+          // 设置内容主题
+          current: getTheme(getDarkMode.value, 'content'),
+        },
+        hljs: {
+          // 设置代码块主题
+          style: getTheme(getDarkMode.value, 'code'),
+        },
+        actions: [],
+      },
+      input: (v) => {
+        valueRef.value = v;
+        emit('update:value', v);
+        emit('change', v);
+      },
+      after: () => {
+        nextTick(() => {
+          modalFn?.redoModalHeight?.();
+          insEditor.setValue(valueRef.value);
+          vditorRef.value = insEditor;
+          initedRef.value = true;
+          emit('get', instance);
+        });
+      },
+      blur: () => {
+        //unref(vditorRef)?.setValue(props.value);
+      },
+      ...bindValue,
+      cache: {
+        enable: false,
+      },
+    });
+  }
+
+  const instance = {
+    getVditor: (): Vditor => vditorRef.value!,
+  };
+
+  function destroy() {
+    const vditorInstance = unref(vditorRef);
+    if (!vditorInstance) return;
+    try {
+      vditorInstance?.destroy?.();
+    } catch (error) {
+      //
+    }
+    vditorRef.value = null;
+    initedRef.value = false;
+  }
+
+  onMountedOrActivated(init);
+
+  onBeforeUnmount(destroy);
+  onDeactivated(destroy);
 </script>
diff --git a/src/components/Markdown/src/MarkdownViewer.vue b/src/components/Markdown/src/MarkdownViewer.vue
index 3c9cb174b..1f4e90267 100644
--- a/src/components/Markdown/src/MarkdownViewer.vue
+++ b/src/components/Markdown/src/MarkdownViewer.vue
@@ -6,7 +6,7 @@
   import { onBeforeUnmount, onDeactivated, Ref, ref, unref, watch } from 'vue';
   import VditorPreview from 'vditor/dist/method.min';
   import { onMountedOrActivated } from '@vben/hooks';
-  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
   import { getTheme } from './getTheme';
 
   const props = defineProps({
diff --git a/src/components/Menu/src/BasicMenu.vue b/src/components/Menu/src/BasicMenu.vue
index 81d340fbe..03bffc767 100644
--- a/src/components/Menu/src/BasicMenu.vue
+++ b/src/components/Menu/src/BasicMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <Menu
-    :selectedKeys="selectedKeys"
-    :defaultSelectedKeys="defaultSelectedKeys"
+    :selectedKeys="menuState.selectedKeys"
+    :defaultSelectedKeys="menuState.defaultSelectedKeys"
     :mode="mode"
     :openKeys="getOpenKeys"
     :inlineIndent="inlineIndent"
@@ -17,147 +17,132 @@
     </template>
   </Menu>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { MenuState } from './types';
-  import { computed, defineComponent, unref, reactive, watch, toRefs, ref } from 'vue';
+  import { computed, unref, reactive, watch, toRefs, ref } from 'vue';
   import { Menu, MenuProps } from 'ant-design-vue';
   import BasicSubMenuItem from './components/BasicSubMenuItem.vue';
-  import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
+  import { MenuModeEnum, MenuTypeEnum } from '@/enums/menuEnum';
   import { useOpenKeys } from './useOpenKeys';
   import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router';
-  import { isFunction } from '/@/utils/is';
+  import { isFunction } from '@/utils/is';
   import { basicProps } from './props';
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-  import { REDIRECT_NAME } from '/@/router/constant';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { getCurrentParentPath } from '/@/router/menus';
-  import { listenerRouteChange } from '/@/logics/mitt/routeChange';
-  import { getAllParentPath } from '/@/router/helper/menuHelper';
+  import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+  import { REDIRECT_NAME } from '@/router/constant';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { getCurrentParentPath } from '@/router/menus';
+  import { listenerRouteChange } from '@/logics/mitt/routeChange';
+  import { getAllParentPath } from '@/router/helper/menuHelper';
 
-  export default defineComponent({
-    name: 'BasicMenu',
-    components: {
-      Menu,
-      BasicSubMenuItem,
-    },
-    props: basicProps,
-    emits: ['menuClick'],
-    setup(props, { emit }) {
-      const isClickGo = ref(false);
-      const currentActiveMenu = ref('');
+  defineOptions({ name: 'BasicMenu' });
 
-      const menuState = reactive<MenuState>({
-        defaultSelectedKeys: [],
-        openKeys: [],
-        selectedKeys: [],
-        collapsedOpenKeys: [],
-      });
+  const props = defineProps(basicProps);
 
-      const { prefixCls } = useDesign('basic-menu');
-      const { items, mode, accordion } = toRefs(props);
+  const emit = defineEmits(['menuClick']);
 
-      const { getCollapsed, getTopMenuAlign, getSplit } = useMenuSetting();
+  const isClickGo = ref(false);
+  const currentActiveMenu = ref('');
 
-      const { currentRoute } = useRouter();
-
-      const { handleOpenChange, setOpenKeys, getOpenKeys } = useOpenKeys(
-        menuState,
-        items,
-        mode as any,
-        accordion,
-      );
-
-      const getIsTopMenu = computed(() => {
-        const { type, mode } = props;
-
-        return (
-          (type === MenuTypeEnum.TOP_MENU && mode === MenuModeEnum.HORIZONTAL) ||
-          (props.isHorizontal && unref(getSplit))
-        );
-      });
-
-      const getMenuClass = computed(() => {
-        const align = props.isHorizontal && unref(getSplit) ? 'start' : unref(getTopMenuAlign);
-        return [
-          prefixCls,
-          `justify-${align}`,
-          {
-            [`${prefixCls}__second`]: !props.isHorizontal && unref(getSplit),
-            [`${prefixCls}__sidebar-hor`]: unref(getIsTopMenu),
-          },
-        ];
-      });
-
-      const getInlineCollapseOptions = computed(() => {
-        const isInline = props.mode === MenuModeEnum.INLINE;
-
-        const inlineCollapseOptions: { inlineCollapsed?: boolean } = {};
-        if (isInline) {
-          inlineCollapseOptions.inlineCollapsed = props.mixSider ? false : unref(getCollapsed);
-        }
-        return inlineCollapseOptions;
-      });
-
-      listenerRouteChange((route) => {
-        if (route.name === REDIRECT_NAME) return;
-        handleMenuChange(route);
-        currentActiveMenu.value = route.meta?.currentActiveMenu as string;
-
-        if (unref(currentActiveMenu)) {
-          menuState.selectedKeys = [unref(currentActiveMenu)];
-          setOpenKeys(unref(currentActiveMenu));
-        }
-      });
-
-      !props.mixSider &&
-        watch(
-          () => props.items,
-          () => {
-            handleMenuChange();
-          },
-        );
-
-      const handleMenuClick: MenuProps['onClick'] = async ({ key }) => {
-        const { beforeClickFn } = props;
-        if (beforeClickFn && isFunction(beforeClickFn)) {
-          const flag = await beforeClickFn(key);
-          if (!flag) return;
-        }
-        emit('menuClick', key);
-
-        isClickGo.value = true;
-        menuState.selectedKeys = [key];
-      };
-
-      async function handleMenuChange(route?: RouteLocationNormalizedLoaded) {
-        if (unref(isClickGo)) {
-          isClickGo.value = false;
-          return;
-        }
-        const path =
-          (route || unref(currentRoute)).meta?.currentActiveMenu ||
-          (route || unref(currentRoute)).path;
-        setOpenKeys(path);
-        if (unref(currentActiveMenu)) return;
-        if (props.isHorizontal && unref(getSplit)) {
-          const parentPath = await getCurrentParentPath(path);
-          menuState.selectedKeys = [parentPath];
-        } else {
-          const parentPaths = await getAllParentPath(props.items, path);
-          menuState.selectedKeys = parentPaths;
-        }
-      }
-
-      return {
-        handleMenuClick,
-        getInlineCollapseOptions,
-        getMenuClass,
-        handleOpenChange,
-        getOpenKeys,
-        ...toRefs(menuState),
-      };
-    },
+  const menuState = reactive<MenuState>({
+    defaultSelectedKeys: [],
+    openKeys: [],
+    selectedKeys: [],
+    collapsedOpenKeys: [],
   });
+
+  const { prefixCls } = useDesign('basic-menu');
+  const { items, mode, accordion } = toRefs(props);
+
+  const { getCollapsed, getTopMenuAlign, getSplit } = useMenuSetting();
+
+  const { currentRoute } = useRouter();
+
+  const { handleOpenChange, setOpenKeys, getOpenKeys } = useOpenKeys(
+    menuState,
+    items,
+    mode as any,
+    accordion,
+  );
+
+  const getIsTopMenu = computed(() => {
+    const { type, mode } = props;
+
+    return (
+      (type === MenuTypeEnum.TOP_MENU && mode === MenuModeEnum.HORIZONTAL) ||
+      (props.isHorizontal && unref(getSplit))
+    );
+  });
+
+  const getMenuClass = computed(() => {
+    const align = props.isHorizontal && unref(getSplit) ? 'start' : unref(getTopMenuAlign);
+    return [
+      prefixCls,
+      `justify-${align}`,
+      {
+        [`${prefixCls}__second`]: !props.isHorizontal && unref(getSplit),
+        [`${prefixCls}__sidebar-hor`]: unref(getIsTopMenu),
+      },
+    ];
+  });
+
+  const getInlineCollapseOptions = computed(() => {
+    const isInline = props.mode === MenuModeEnum.INLINE;
+
+    const inlineCollapseOptions: { inlineCollapsed?: boolean } = {};
+    if (isInline) {
+      inlineCollapseOptions.inlineCollapsed = props.mixSider ? false : unref(getCollapsed);
+    }
+    return inlineCollapseOptions;
+  });
+
+  listenerRouteChange((route) => {
+    if (route.name === REDIRECT_NAME) return;
+    handleMenuChange(route);
+    currentActiveMenu.value = route.meta?.currentActiveMenu as string;
+
+    if (unref(currentActiveMenu)) {
+      menuState.selectedKeys = [unref(currentActiveMenu)];
+      setOpenKeys(unref(currentActiveMenu));
+    }
+  });
+
+  !props.mixSider &&
+    watch(
+      () => props.items,
+      () => {
+        handleMenuChange();
+      },
+    );
+
+  const handleMenuClick: MenuProps['onClick'] = async ({ key }) => {
+    const { beforeClickFn } = props;
+    if (beforeClickFn && isFunction(beforeClickFn)) {
+      const flag = await beforeClickFn(key);
+      if (!flag) return;
+    }
+    emit('menuClick', key);
+
+    isClickGo.value = true;
+    menuState.selectedKeys = [key];
+  };
+
+  async function handleMenuChange(route?: RouteLocationNormalizedLoaded) {
+    if (unref(isClickGo)) {
+      isClickGo.value = false;
+      return;
+    }
+    const path =
+      (route || unref(currentRoute)).meta?.currentActiveMenu || (route || unref(currentRoute)).path;
+    setOpenKeys(path);
+    if (unref(currentActiveMenu)) return;
+    if (props.isHorizontal && unref(getSplit)) {
+      const parentPath = await getCurrentParentPath(path);
+      menuState.selectedKeys = [parentPath];
+    } else {
+      const parentPaths = await getAllParentPath(props.items, path);
+      menuState.selectedKeys = parentPaths;
+    }
+  }
 </script>
 <style lang="less">
   @import url('./index.less');
diff --git a/src/components/Menu/src/components/BasicMenuItem.vue b/src/components/Menu/src/components/BasicMenuItem.vue
index 4d483624b..3ba59f91d 100644
--- a/src/components/Menu/src/components/BasicMenuItem.vue
+++ b/src/components/Menu/src/components/BasicMenuItem.vue
@@ -1,21 +1,14 @@
 <template>
-  <MenuItem :key="item.path">
+  <Menu.Item :key="item.path">
     <MenuItemContent v-bind="$props" :item="item" />
-  </MenuItem>
+  </Menu.Item>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { Menu } from 'ant-design-vue';
   import { itemProps } from '../props';
-
   import MenuItemContent from './MenuItemContent.vue';
 
-  export default defineComponent({
-    name: 'BasicMenuItem',
-    components: { MenuItem: Menu.Item, MenuItemContent },
-    props: itemProps,
-    setup() {
-      return {};
-    },
-  });
+  defineOptions({ name: 'BasicMenuItem' });
+
+  defineProps(itemProps);
 </script>
diff --git a/src/components/Menu/src/components/BasicSubMenuItem.vue b/src/components/Menu/src/components/BasicSubMenuItem.vue
index d5139fce3..e3e15f7c4 100644
--- a/src/components/Menu/src/components/BasicSubMenuItem.vue
+++ b/src/components/Menu/src/components/BasicSubMenuItem.vue
@@ -1,6 +1,6 @@
 <template>
   <BasicMenuItem v-if="!menuHasChildren(item) && getShowMenu" v-bind="$props" />
-  <SubMenu
+  <Menu.SubMenu
     v-if="menuHasChildren(item) && getShowMenu"
     :class="[theme]"
     :key="`submenu-${item.path}`"
@@ -13,43 +13,27 @@
     <template v-for="childrenItem in item.children || []" :key="childrenItem.path">
       <BasicSubMenuItem v-bind="$props" :item="childrenItem" />
     </template>
-  </SubMenu>
+  </Menu.SubMenu>
 </template>
-<script lang="ts">
-  import type { Menu as MenuType } from '/@/router/types';
-  import { defineComponent, computed } from 'vue';
+<script lang="ts" setup>
+  import type { Menu as MenuType } from '@/router/types';
+  import { computed } from 'vue';
   import { Menu } from 'ant-design-vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
   import { itemProps } from '../props';
   import BasicMenuItem from './BasicMenuItem.vue';
   import MenuItemContent from './MenuItemContent.vue';
 
-  export default defineComponent({
-    name: 'BasicSubMenuItem',
-    isSubMenu: true,
-    components: {
-      BasicMenuItem,
-      SubMenu: Menu.SubMenu,
-      MenuItemContent,
-    },
-    props: itemProps,
-    setup(props) {
-      const { prefixCls } = useDesign('basic-menu-item');
+  defineOptions({ name: 'BasicSubMenuItem', isSubMenu: true });
 
-      const getShowMenu = computed(() => !props.item.meta?.hideMenu);
-      function menuHasChildren(menuTreeItem: MenuType): boolean {
-        return (
-          !menuTreeItem.meta?.hideChildrenInMenu &&
-          Reflect.has(menuTreeItem, 'children') &&
-          !!menuTreeItem.children &&
-          menuTreeItem.children.length > 0
-        );
-      }
-      return {
-        prefixCls,
-        menuHasChildren,
-        getShowMenu,
-      };
-    },
-  });
+  const props = defineProps(itemProps);
+
+  const getShowMenu = computed(() => !props.item.meta?.hideMenu);
+  function menuHasChildren(menuTreeItem: MenuType): boolean {
+    return (
+      !menuTreeItem.meta?.hideChildrenInMenu &&
+      Reflect.has(menuTreeItem, 'children') &&
+      !!menuTreeItem.children &&
+      menuTreeItem.children.length > 0
+    );
+  }
 </script>
diff --git a/src/components/Menu/src/components/MenuItemContent.vue b/src/components/Menu/src/components/MenuItemContent.vue
index ccf65bede..54e104efe 100644
--- a/src/components/Menu/src/components/MenuItemContent.vue
+++ b/src/components/Menu/src/components/MenuItemContent.vue
@@ -5,33 +5,21 @@
     {{ getI18nName }}
   </span>
 </template>
-<script lang="ts">
-  import { computed, defineComponent } from 'vue';
+<script lang="ts" setup>
+  import { computed } from 'vue';
   import Icon from '@/components/Icon/Icon.vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { useDesign } from '@/hooks/web/useDesign';
   import { contentProps } from '../props';
 
+  defineOptions({ name: 'MenuItemContent' });
+
+  const props = defineProps(contentProps);
+
   const { t } = useI18n();
+  const { prefixCls } = useDesign('basic-menu-item-content');
 
-  export default defineComponent({
-    name: 'MenuItemContent',
-    components: {
-      Icon,
-    },
-    props: contentProps,
-    setup(props) {
-      const { prefixCls } = useDesign('basic-menu-item-content');
-      const getI18nName = computed(() => t(props.item?.name));
-      const getIcon = computed(() => (props.item?.img ? undefined : props.item?.icon));
-      const getImg = computed(() => props.item?.img);
-
-      return {
-        prefixCls,
-        getI18nName,
-        getIcon,
-        getImg,
-      };
-    },
-  });
+  const getI18nName = computed(() => t(props.item?.name));
+  const getIcon = computed(() => (props.item?.img ? undefined : props.item?.icon));
+  const getImg = computed(() => props.item?.img);
 </script>
diff --git a/src/components/Menu/src/props.ts b/src/components/Menu/src/props.ts
index b9561c7c8..526df9e1d 100644
--- a/src/components/Menu/src/props.ts
+++ b/src/components/Menu/src/props.ts
@@ -1,9 +1,9 @@
-import type { Menu } from '/@/router/types';
+import type { Menu } from '@/router/types';
 import type { PropType } from 'vue';
 
-import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
-import { ThemeEnum } from '/@/enums/appEnum';
-import { propTypes } from '/@/utils/propTypes';
+import { MenuModeEnum, MenuTypeEnum } from '@/enums/menuEnum';
+import { ThemeEnum } from '@/enums/appEnum';
+import { propTypes } from '@/utils/propTypes';
 import type { Key } from './types';
 import type { MenuTheme } from 'ant-design-vue';
 import type { MenuMode } from 'ant-design-vue/lib/menu/src/interface';
diff --git a/src/components/Menu/src/useOpenKeys.ts b/src/components/Menu/src/useOpenKeys.ts
index 14793c085..1208e26d4 100644
--- a/src/components/Menu/src/useOpenKeys.ts
+++ b/src/components/Menu/src/useOpenKeys.ts
@@ -1,11 +1,11 @@
-import { MenuModeEnum } from '/@/enums/menuEnum';
+import { MenuModeEnum } from '@/enums/menuEnum';
 import type { Menu as MenuType } from '/@/router/types';
 import type { MenuState, Key } from './types';
 import { computed, Ref, toRaw, unref } from 'vue';
 import { useTimeoutFn } from '@vben/hooks';
 import { uniq } from 'lodash-es';
-import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-import { getAllParentPath } from '/@/router/helper/menuHelper';
+import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+import { getAllParentPath } from '@/router/helper/menuHelper';
 
 export function useOpenKeys(
   menuState: MenuState,
diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts
index 6188c5cb5..ff3862ae2 100644
--- a/src/components/Modal/index.ts
+++ b/src/components/Modal/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 import './src/index.less';
 import basicModal from './src/BasicModal.vue';
 
diff --git a/src/components/Modal/src/BasicModal.vue b/src/components/Modal/src/BasicModal.vue
index 39288c272..5dbfc1310 100644
--- a/src/components/Modal/src/BasicModal.vue
+++ b/src/components/Modal/src/BasicModal.vue
@@ -48,11 +48,9 @@
     </template>
   </Modal>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { ModalProps, ModalMethods } from './typing';
-
   import {
-    defineComponent,
     computed,
     ref,
     watch,
@@ -61,183 +59,172 @@
     toRef,
     getCurrentInstance,
     nextTick,
+    useAttrs,
   } from 'vue';
   import Modal from './components/Modal';
   import ModalWrapper from './components/ModalWrapper.vue';
   import ModalClose from './components/ModalClose.vue';
   import ModalFooter from './components/ModalFooter.vue';
   import ModalHeader from './components/ModalHeader.vue';
-  import { isFunction } from '/@/utils/is';
-  import { deepMerge } from '/@/utils';
+  import { isFunction } from '@/utils/is';
+  import { deepMerge } from '@/utils';
   import { basicProps } from './props';
   import { useFullScreen } from './hooks/useModalFullScreen';
   import { omit } from 'lodash-es';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDesign } from '@/hooks/web/useDesign';
 
-  export default defineComponent({
-    name: 'BasicModal',
-    components: { Modal, ModalWrapper, ModalClose, ModalFooter, ModalHeader },
-    inheritAttrs: false,
-    props: basicProps,
-    emits: ['open-change', 'height-change', 'cancel', 'ok', 'register', 'update:open'],
-    setup(props, { emit, attrs }) {
-      const openRef = ref(false);
-      const propsRef = ref<Partial<ModalProps> | null>(null);
-      const modalWrapperRef = ref<any>(null);
-      const { prefixCls } = useDesign('basic-modal');
+  defineOptions({ name: 'BasicModal', inheritAttrs: false });
 
-      // modal   Bottom and top height
-      const extHeightRef = ref(0);
-      const modalMethods: ModalMethods = {
-        setModalProps,
-        emitOpen: undefined,
-        redoModalHeight: () => {
-          nextTick(() => {
-            if (unref(modalWrapperRef)) {
-              (unref(modalWrapperRef) as any).setModalHeight();
-            }
-          });
-        },
-      };
+  const props = defineProps(basicProps);
 
-      const instance = getCurrentInstance();
-      if (instance) {
-        emit('register', modalMethods, instance.uid);
-      }
+  const emit = defineEmits([
+    'open-change',
+    'height-change',
+    'cancel',
+    'ok',
+    'register',
+    'update:open',
+  ]);
 
-      // Custom title component: get title
-      const getMergeProps = computed((): Recordable => {
-        return {
-          ...props,
-          ...(unref(propsRef) as any),
-        };
-      });
+  const attrs = useAttrs();
+  const openRef = ref(false);
+  const propsRef = ref<Partial<ModalProps> | null>(null);
+  const modalWrapperRef = ref<any>(null);
+  const { prefixCls } = useDesign('basic-modal');
 
-      const { handleFullScreen, getWrapClassName, fullScreenRef } = useFullScreen({
-        modalWrapperRef,
-        extHeightRef,
-        wrapClassName: toRef(getMergeProps.value, 'wrapClassName'),
-      });
-
-      // modal component does not need title and origin buttons
-      const getProps = computed((): Recordable => {
-        const opt = {
-          ...unref(getMergeProps),
-          open: unref(openRef),
-          okButtonProps: undefined,
-          cancelButtonProps: undefined,
-          title: undefined,
-        };
-        return {
-          ...opt,
-          wrapClassName: unref(getWrapClassName),
-        };
-      });
-
-      const getBindValue = computed((): Recordable => {
-        const attr = {
-          ...attrs,
-          ...unref(getMergeProps),
-          open: unref(openRef),
-        };
-        attr['wrapClassName'] =
-          `${attr?.['wrapClassName'] || ''} ${unref(getWrapClassName)}` + 'vben-basic-modal-wrap';
-        if (unref(fullScreenRef)) {
-          return omit(attr, ['height', 'title']);
+  // modal   Bottom and top height
+  const extHeightRef = ref(0);
+  const modalMethods: ModalMethods = {
+    setModalProps,
+    emitOpen: undefined,
+    redoModalHeight: () => {
+      nextTick(() => {
+        if (unref(modalWrapperRef)) {
+          (unref(modalWrapperRef) as any).setModalHeight();
         }
-        return omit(attr, 'title');
       });
-
-      const getWrapperHeight = computed(() => {
-        if (unref(fullScreenRef)) return undefined;
-        return unref(getProps).height;
-      });
-
-      watchEffect(() => {
-        openRef.value = !!props.open;
-        fullScreenRef.value = !!props.defaultFullscreen;
-      });
-
-      watch(
-        () => unref(openRef),
-        (v) => {
-          emit('open-change', v);
-          emit('update:open', v);
-          instance && modalMethods.emitOpen?.(v, instance.uid);
-          nextTick(() => {
-            if (props.scrollTop && v && unref(modalWrapperRef)) {
-              (unref(modalWrapperRef) as any).scrollTop();
-            }
-          });
-        },
-        {
-          immediate: false,
-        },
-      );
-
-      // 取消事件
-      async function handleCancel(e: Event) {
-        e?.stopPropagation();
-        // 过滤自定义关闭按钮的空白区域
-        if ((e.target as HTMLElement)?.classList?.contains(prefixCls + '-close--custom')) return;
-        if (props.closeFunc && isFunction(props.closeFunc)) {
-          const isClose: boolean = await props.closeFunc();
-          openRef.value = !isClose;
-          return;
-        }
-
-        openRef.value = false;
-        emit('cancel', e);
-      }
-
-      /**
-       * @description: 设置modal参数
-       */
-      function setModalProps(props: Partial<ModalProps>): void {
-        // Keep the last setModalProps
-        propsRef.value = deepMerge(unref(propsRef) || ({} as any), props);
-        if (Reflect.has(props, 'open')) {
-          openRef.value = !!props.open;
-        }
-        if (Reflect.has(props, 'defaultFullscreen')) {
-          fullScreenRef.value = !!props.defaultFullscreen;
-        }
-      }
-
-      function handleOk(e: Event) {
-        emit('ok', e);
-      }
-
-      function handleHeightChange(height: string) {
-        emit('height-change', height);
-      }
-
-      function handleExtHeight(height: number) {
-        extHeightRef.value = height;
-      }
-
-      function handleTitleDbClick(e) {
-        if (!props.canFullscreen) return;
-        e.stopPropagation();
-        handleFullScreen(e);
-      }
-
-      return {
-        handleCancel,
-        getBindValue,
-        getProps,
-        handleFullScreen,
-        fullScreenRef,
-        getMergeProps,
-        handleOk,
-        openRef,
-        omit,
-        modalWrapperRef,
-        handleExtHeight,
-        handleHeightChange,
-        handleTitleDbClick,
-        getWrapperHeight,
-      };
     },
+  };
+
+  const instance = getCurrentInstance();
+  if (instance) {
+    emit('register', modalMethods, instance.uid);
+  }
+
+  // Custom title component: get title
+  const getMergeProps = computed((): Recordable => {
+    return {
+      ...props,
+      ...(unref(propsRef) as any),
+    };
   });
+
+  const { handleFullScreen, getWrapClassName, fullScreenRef } = useFullScreen({
+    modalWrapperRef,
+    extHeightRef,
+    wrapClassName: toRef(getMergeProps.value, 'wrapClassName'),
+  });
+
+  // modal component does not need title and origin buttons
+  const getProps = computed((): Recordable => {
+    const opt = {
+      ...unref(getMergeProps),
+      open: unref(openRef),
+      okButtonProps: undefined,
+      cancelButtonProps: undefined,
+      title: undefined,
+    };
+    return {
+      ...opt,
+      wrapClassName: unref(getWrapClassName),
+    };
+  });
+
+  const getBindValue = computed((): Recordable => {
+    const attr = {
+      ...attrs,
+      ...unref(getMergeProps),
+      open: unref(openRef),
+    };
+    attr['wrapClassName'] =
+      `${attr?.['wrapClassName'] || ''} ${unref(getWrapClassName)}` + 'vben-basic-modal-wrap';
+    if (unref(fullScreenRef)) {
+      return omit(attr, ['height', 'title']);
+    }
+    return omit(attr, 'title');
+  });
+
+  const getWrapperHeight = computed(() => {
+    if (unref(fullScreenRef)) return undefined;
+    return unref(getProps).height;
+  });
+
+  watchEffect(() => {
+    openRef.value = !!props.open;
+    fullScreenRef.value = !!props.defaultFullscreen;
+  });
+
+  watch(
+    () => unref(openRef),
+    (v) => {
+      emit('open-change', v);
+      emit('update:open', v);
+      instance && modalMethods.emitOpen?.(v, instance.uid);
+      nextTick(() => {
+        if (props.scrollTop && v && unref(modalWrapperRef)) {
+          (unref(modalWrapperRef) as any).scrollTop();
+        }
+      });
+    },
+    {
+      immediate: false,
+    },
+  );
+
+  // 取消事件
+  async function handleCancel(e: Event) {
+    e?.stopPropagation();
+    // 过滤自定义关闭按钮的空白区域
+    if ((e.target as HTMLElement)?.classList?.contains(prefixCls + '-close--custom')) return;
+    if (props.closeFunc && isFunction(props.closeFunc)) {
+      const isClose: boolean = await props.closeFunc();
+      openRef.value = !isClose;
+      return;
+    }
+
+    openRef.value = false;
+    emit('cancel', e);
+  }
+
+  /**
+   * @description: 设置modal参数
+   */
+  function setModalProps(props: Partial<ModalProps>): void {
+    // Keep the last setModalProps
+    propsRef.value = deepMerge(unref(propsRef) || ({} as any), props);
+    if (Reflect.has(props, 'open')) {
+      openRef.value = !!props.open;
+    }
+    if (Reflect.has(props, 'defaultFullscreen')) {
+      fullScreenRef.value = !!props.defaultFullscreen;
+    }
+  }
+
+  function handleOk(e: Event) {
+    emit('ok', e);
+  }
+
+  function handleHeightChange(height: string) {
+    emit('height-change', height);
+  }
+
+  function handleExtHeight(height: number) {
+    extHeightRef.value = height;
+  }
+
+  function handleTitleDbClick(e) {
+    if (!props.canFullscreen) return;
+    e.stopPropagation();
+    handleFullScreen(e);
+  }
 </script>
diff --git a/src/components/Modal/src/components/Modal.tsx b/src/components/Modal/src/components/Modal.tsx
index 3b3a50d4f..c68e10728 100644
--- a/src/components/Modal/src/components/Modal.tsx
+++ b/src/components/Modal/src/components/Modal.tsx
@@ -3,7 +3,7 @@ import { defineComponent, toRefs, unref } from 'vue';
 import { basicProps } from '../props';
 import { useModalDragMove } from '../hooks/useModalDrag';
 import { useAttrs } from '@vben/hooks';
-import { extendSlots } from '/@/utils/helper/tsxHelper';
+import { extendSlots } from '@/utils/helper/tsxHelper';
 
 export default defineComponent({
   name: 'Modal',
diff --git a/src/components/Modal/src/components/ModalClose.vue b/src/components/Modal/src/components/ModalClose.vue
index 6dbf2c0e7..32accbb28 100644
--- a/src/components/Modal/src/components/ModalClose.vue
+++ b/src/components/Modal/src/components/ModalClose.vue
@@ -13,54 +13,44 @@
     </Tooltip>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, computed } from 'vue';
+<script lang="ts" setup>
+  import { computed } from 'vue';
   import { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined } from '@ant-design/icons-vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
   import { Tooltip } from 'ant-design-vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useI18n } from '@/hooks/web/useI18n';
 
-  export default defineComponent({
-    name: 'ModalClose',
-    components: { Tooltip, FullscreenExitOutlined, FullscreenOutlined, CloseOutlined },
-    props: {
-      canFullscreen: { type: Boolean, default: true },
-      fullScreen: { type: Boolean },
-    },
-    emits: ['cancel', 'fullscreen'],
-    setup(props, { emit }) {
-      const { prefixCls } = useDesign('basic-modal-close');
-      const { t } = useI18n();
+  defineOptions({ name: 'ModalClose' });
 
-      const getClass = computed(() => {
-        return [
-          prefixCls,
-          `${prefixCls}--custom`,
-          {
-            [`${prefixCls}--can-full`]: props.canFullscreen,
-          },
-        ];
-      });
-
-      function handleCancel(e: Event) {
-        emit('cancel', e);
-      }
-
-      function handleFullScreen(e: Event) {
-        e?.stopPropagation();
-        e?.preventDefault();
-        emit('fullscreen');
-      }
-
-      return {
-        t,
-        getClass,
-        prefixCls,
-        handleCancel,
-        handleFullScreen,
-      };
-    },
+  const props = defineProps({
+    canFullscreen: { type: Boolean, default: true },
+    fullScreen: { type: Boolean },
   });
+
+  const emit = defineEmits(['cancel', 'fullscreen']);
+
+  const { prefixCls } = useDesign('basic-modal-close');
+  const { t } = useI18n();
+
+  const getClass = computed(() => {
+    return [
+      prefixCls,
+      `${prefixCls}--custom`,
+      {
+        [`${prefixCls}--can-full`]: props.canFullscreen,
+      },
+    ];
+  });
+
+  function handleCancel(e: Event) {
+    emit('cancel', e);
+  }
+
+  function handleFullScreen(e: Event) {
+    e?.stopPropagation();
+    e?.preventDefault();
+    emit('fullscreen');
+  }
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-basic-modal-close';
diff --git a/src/components/Modal/src/components/ModalFooter.vue b/src/components/Modal/src/components/ModalFooter.vue
index 7ea98dd28..5fb7d8c76 100644
--- a/src/components/Modal/src/components/ModalFooter.vue
+++ b/src/components/Modal/src/components/ModalFooter.vue
@@ -17,25 +17,20 @@
     <slot name="appendFooter"></slot>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
+<script lang="ts" setup>
   import { basicProps } from '../props';
 
-  export default defineComponent({
-    name: 'BasicModalFooter',
-    props: basicProps,
-    emits: ['ok', 'cancel'],
-    setup(_, { emit }) {
-      function handleOk(e: Event) {
-        emit('ok', e);
-      }
+  defineOptions({ name: 'BasicModalFooter' });
 
-      function handleCancel(e: Event) {
-        emit('cancel', e);
-      }
+  defineProps(basicProps);
 
-      return { handleOk, handleCancel };
-    },
-  });
+  const emit = defineEmits(['ok', 'cancel']);
+
+  function handleOk(e: Event) {
+    emit('ok', e);
+  }
+
+  function handleCancel(e: Event) {
+    emit('cancel', e);
+  }
 </script>
diff --git a/src/components/Modal/src/components/ModalHeader.vue b/src/components/Modal/src/components/ModalHeader.vue
index ac0b2b1d5..ea41e794c 100644
--- a/src/components/Modal/src/components/ModalHeader.vue
+++ b/src/components/Modal/src/components/ModalHeader.vue
@@ -3,19 +3,16 @@
     {{ title }}
   </BasicTitle>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { PropType } from 'vue';
-  import { defineComponent } from 'vue';
-  import { BasicTitle } from '/@/components/Basic';
+  import { BasicTitle } from '@/components/Basic';
 
-  export default defineComponent({
-    name: 'BasicModalHeader',
-    components: { BasicTitle },
-    props: {
-      helpMessage: {
-        type: [String, Array] as PropType<string | string[]>,
-      },
-      title: { type: String },
+  defineOptions({ name: 'BasicModalHeader' });
+
+  defineProps({
+    helpMessage: {
+      type: [String, Array] as PropType<string | string[]>,
     },
+    title: { type: String },
   });
 </script>
diff --git a/src/components/Modal/src/components/ModalWrapper.vue b/src/components/Modal/src/components/ModalWrapper.vue
index 9c5ad687a..392fc10d4 100644
--- a/src/components/Modal/src/components/ModalWrapper.vue
+++ b/src/components/Modal/src/components/ModalWrapper.vue
@@ -5,26 +5,18 @@
     </div>
   </ScrollContainer>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { CSSProperties } from 'vue';
-  import {
-    defineComponent,
-    computed,
-    ref,
-    watchEffect,
-    unref,
-    watch,
-    onMounted,
-    nextTick,
-    onUnmounted,
-  } from 'vue';
+  import { computed, ref, watchEffect, unref, watch, onMounted, nextTick, onUnmounted } from 'vue';
   import { useWindowSizeFn } from '@vben/hooks';
   import { type AnyFunction } from '@vben/types';
-  import { ScrollContainer } from '/@/components/Container';
+  import { ScrollContainer } from '@/components/Container';
   import { createModalContext } from '../hooks/useModalContext';
   import { useMutationObserver } from '@vueuse/core';
 
-  const props = {
+  defineOptions({ name: 'ModalWrapper', inheritAttrs: false });
+
+  const props = defineProps({
     loading: { type: Boolean },
     useWrapper: { type: Boolean, default: true },
     modalHeaderHeight: { type: Number, default: 57 },
@@ -35,136 +27,128 @@
     open: { type: Boolean },
     fullScreen: { type: Boolean },
     loadingTip: { type: String },
-  };
-
-  export default defineComponent({
-    name: 'ModalWrapper',
-    components: { ScrollContainer },
-    inheritAttrs: false,
-    props,
-    emits: ['height-change', 'ext-height'],
-    setup(props, { emit }) {
-      const wrapperRef = ref(null);
-      const spinRef = ref(null);
-      const realHeightRef = ref(0);
-      const minRealHeightRef = ref(0);
-
-      const realHeight = ref(0);
-
-      let stopElResizeFn: AnyFunction = () => {};
-
-      useWindowSizeFn(setModalHeight.bind(null));
-
-      useMutationObserver(
-        spinRef,
-        () => {
-          setModalHeight();
-        },
-        {
-          attributes: true,
-          subtree: true,
-        },
-      );
-
-      createModalContext({
-        redoModalHeight: setModalHeight,
-      });
-
-      const spinStyle = computed((): CSSProperties => {
-        return {
-          minHeight: `${props.minHeight}px`,
-          [props.fullScreen ? 'height' : 'maxHeight']: `${unref(realHeightRef)}px`,
-        };
-      });
-
-      watchEffect(() => {
-        props.useWrapper && setModalHeight();
-      });
-
-      watch(
-        () => props.fullScreen,
-        (v) => {
-          setModalHeight();
-          if (!v) {
-            realHeightRef.value = minRealHeightRef.value;
-          } else {
-            minRealHeightRef.value = realHeightRef.value;
-          }
-        },
-      );
-
-      onMounted(() => {
-        const { modalHeaderHeight, modalFooterHeight } = props;
-        emit('ext-height', modalHeaderHeight + modalFooterHeight);
-      });
-
-      onUnmounted(() => {
-        stopElResizeFn && stopElResizeFn();
-      });
-
-      async function scrollTop() {
-        nextTick(() => {
-          const wrapperRefDom = unref(wrapperRef);
-          if (!wrapperRefDom) return;
-          (wrapperRefDom as any)?.scrollTo?.(0);
-        });
-      }
-
-      async function setModalHeight() {
-        // 解决在弹窗关闭的时候监听还存在,导致再次打开弹窗没有高度
-        // 加上这个,就必须在使用的时候传递父级的open
-        if (!props.open) return;
-        const wrapperRefDom = unref(wrapperRef);
-        if (!wrapperRefDom) return;
-
-        const bodyDom = (wrapperRefDom as any).$el.parentElement;
-        if (!bodyDom) return;
-        bodyDom.style.padding = '0';
-        await nextTick();
-
-        try {
-          const modalDom = bodyDom.parentElement && bodyDom.parentElement.parentElement;
-          if (!modalDom) return;
-
-          const modalRect = getComputedStyle(modalDom as Element).top;
-          const modalTop = Number.parseInt(modalRect);
-          let maxHeight =
-            window.innerHeight -
-            modalTop * 2 +
-            (props.footerOffset! || 0) -
-            props.modalFooterHeight -
-            props.modalHeaderHeight;
-
-          // 距离顶部过进会出现滚动条
-          if (modalTop < 40) {
-            maxHeight -= 26;
-          }
-          await nextTick();
-          const spinEl: any = unref(spinRef);
-
-          if (!spinEl) return;
-          await nextTick();
-          // if (!realHeight) {
-          realHeight.value = spinEl.scrollHeight;
-          // }
-
-          if (props.fullScreen) {
-            realHeightRef.value =
-              window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight - 28;
-          } else {
-            realHeightRef.value = props.height
-              ? props.height
-              : realHeight.value > maxHeight
-              ? maxHeight
-              : realHeight.value;
-          }
-          emit('height-change', unref(realHeightRef));
-        } catch (error) {
-          console.log(error);
-        }
-      }
-
-      return { wrapperRef, spinRef, spinStyle, scrollTop, setModalHeight, realHeight };
-    },
   });
+
+  const emit = defineEmits(['height-change', 'ext-height']);
+
+  const wrapperRef = ref(null);
+  const spinRef = ref(null);
+  const realHeightRef = ref(0);
+  const minRealHeightRef = ref(0);
+  const realHeight = ref(0);
+
+  let stopElResizeFn: AnyFunction = () => {};
+
+  useWindowSizeFn(setModalHeight.bind(null));
+
+  useMutationObserver(
+    spinRef,
+    () => {
+      setModalHeight();
+    },
+    {
+      attributes: true,
+      subtree: true,
+    },
+  );
+
+  createModalContext({
+    redoModalHeight: setModalHeight,
+  });
+
+  const spinStyle = computed((): CSSProperties => {
+    return {
+      minHeight: `${props.minHeight}px`,
+      [props.fullScreen ? 'height' : 'maxHeight']: `${unref(realHeightRef)}px`,
+    };
+  });
+
+  watchEffect(() => {
+    props.useWrapper && setModalHeight();
+  });
+
+  watch(
+    () => props.fullScreen,
+    (v) => {
+      setModalHeight();
+      if (!v) {
+        realHeightRef.value = minRealHeightRef.value;
+      } else {
+        minRealHeightRef.value = realHeightRef.value;
+      }
+    },
+  );
+
+  onMounted(() => {
+    const { modalHeaderHeight, modalFooterHeight } = props;
+    emit('ext-height', modalHeaderHeight + modalFooterHeight);
+  });
+
+  onUnmounted(() => {
+    stopElResizeFn && stopElResizeFn();
+  });
+
+  async function scrollTop() {
+    nextTick(() => {
+      const wrapperRefDom = unref(wrapperRef);
+      if (!wrapperRefDom) return;
+      (wrapperRefDom as any)?.scrollTo?.(0);
+    });
+  }
+
+  async function setModalHeight() {
+    // 解决在弹窗关闭的时候监听还存在,导致再次打开弹窗没有高度
+    // 加上这个,就必须在使用的时候传递父级的open
+    if (!props.open) return;
+    const wrapperRefDom = unref(wrapperRef);
+    if (!wrapperRefDom) return;
+
+    const bodyDom = (wrapperRefDom as any).$el.parentElement;
+    if (!bodyDom) return;
+    bodyDom.style.padding = '0';
+    await nextTick();
+
+    try {
+      const modalDom = bodyDom.parentElement && bodyDom.parentElement.parentElement;
+      if (!modalDom) return;
+
+      const modalRect = getComputedStyle(modalDom as Element).top;
+      const modalTop = Number.parseInt(modalRect);
+      let maxHeight =
+        window.innerHeight -
+        modalTop * 2 +
+        (props.footerOffset! || 0) -
+        props.modalFooterHeight -
+        props.modalHeaderHeight;
+
+      // 距离顶部过进会出现滚动条
+      if (modalTop < 40) {
+        maxHeight -= 26;
+      }
+      await nextTick();
+      const spinEl: any = unref(spinRef);
+
+      if (!spinEl) return;
+      await nextTick();
+      // if (!realHeight) {
+      realHeight.value = spinEl.scrollHeight;
+      // }
+
+      if (props.fullScreen) {
+        realHeightRef.value =
+          window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight - 28;
+      } else {
+        realHeightRef.value = props.height
+          ? props.height
+          : realHeight.value > maxHeight
+          ? maxHeight
+          : realHeight.value;
+      }
+      emit('height-change', unref(realHeightRef));
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  defineExpose({ scrollTop });
 </script>
diff --git a/src/components/Modal/src/hooks/useModal.ts b/src/components/Modal/src/hooks/useModal.ts
index f2e4fd803..09dfcb147 100644
--- a/src/components/Modal/src/hooks/useModal.ts
+++ b/src/components/Modal/src/hooks/useModal.ts
@@ -16,11 +16,11 @@ import {
   toRaw,
   computed,
 } from 'vue';
-import { isProdMode } from '/@/utils/env';
-import { isFunction } from '/@/utils/is';
+import { isProdMode } from '@/utils/env';
+import { isFunction } from '@/utils/is';
 import { isEqual } from 'lodash-es';
 import { tryOnUnmounted } from '@vueuse/core';
-import { error } from '/@/utils/log';
+import { error } from '@/utils/log';
 
 const dataTransfer = reactive<any>({});
 
diff --git a/src/components/Modal/src/hooks/useModalContext.ts b/src/components/Modal/src/hooks/useModalContext.ts
index 94d4c4ee8..9f3f84b8b 100644
--- a/src/components/Modal/src/hooks/useModalContext.ts
+++ b/src/components/Modal/src/hooks/useModalContext.ts
@@ -1,5 +1,5 @@
 import { InjectionKey } from 'vue';
-import { createContext, useContext } from '/@/hooks/core/useContext';
+import { createContext, useContext } from '@/hooks/core/useContext';
 
 export interface ModalContextProps {
   redoModalHeight: () => void;
diff --git a/src/components/Modal/src/index.less b/src/components/Modal/src/index.less
index 5071f9556..0606feae3 100644
--- a/src/components/Modal/src/index.less
+++ b/src/components/Modal/src/index.less
@@ -1,4 +1,3 @@
-/* stylelint-disable media-feature-range-notation */
 .fullscreen-modal {
   overflow: hidden;
 
diff --git a/src/components/Modal/src/props.ts b/src/components/Modal/src/props.ts
index 209cfe3e4..e3678d224 100644
--- a/src/components/Modal/src/props.ts
+++ b/src/components/Modal/src/props.ts
@@ -1,7 +1,7 @@
 import type { PropType, CSSProperties } from 'vue';
 import type { ModalWrapperProps } from './typing';
 import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
-import { useI18n } from '/@/hooks/web/useI18n';
+import { useI18n } from '@/hooks/web/useI18n';
 
 const { t } = useI18n();
 
diff --git a/src/components/Page/index.ts b/src/components/Page/index.ts
index d09626405..aa5f85df0 100644
--- a/src/components/Page/index.ts
+++ b/src/components/Page/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 
 import pageFooter from './src/PageFooter.vue';
 import pageWrapper from './src/PageWrapper.vue';
diff --git a/src/components/Page/src/PageFooter.vue b/src/components/Page/src/PageFooter.vue
index 8d45fb6d9..91797d7ad 100644
--- a/src/components/Page/src/PageFooter.vue
+++ b/src/components/Page/src/PageFooter.vue
@@ -10,8 +10,8 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+  import { useDesign } from '@/hooks/web/useDesign';
 
   defineOptions({
     name: 'PageFooter',
@@ -36,7 +36,9 @@
     transition: width 0.2s;
     border-top: 1px solid @border-color-base;
     background-color: @component-background;
-    box-shadow: 0 -6px 16px -8px rgb(0 0 0 / 8%), 0 -9px 28px 0 rgb(0 0 0 / 5%),
+    box-shadow:
+      0 -6px 16px -8px rgb(0 0 0 / 8%),
+      0 -9px 28px 0 rgb(0 0 0 / 5%),
       0 -12px 48px 16px rgb(0 0 0 / 3%);
     line-height: 44px;
 
diff --git a/src/components/Page/src/PageWrapper.vue b/src/components/Page/src/PageWrapper.vue
index fc3024f61..48ced6fba 100644
--- a/src/components/Page/src/PageWrapper.vue
+++ b/src/components/Page/src/PageWrapper.vue
@@ -45,16 +45,14 @@
     useAttrs,
     useSlots,
   } from 'vue';
-
   import PageFooter from './PageFooter.vue';
-
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { propTypes } from '/@/utils/propTypes';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { propTypes } from '@/utils/propTypes';
   import { omit } from 'lodash-es';
   import { PageHeader } from 'ant-design-vue';
-  import { useContentHeight } from '/@/hooks/web/useContentHeight';
-  import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';
-  import { PageWrapperFixedHeightKey } from '/@/enums/pageEnum';
+  import { useContentHeight } from '@/hooks/web/useContentHeight';
+  import { useLayoutHeight } from '@/layouts/default/content/useContentViewHeight';
+  import { PageWrapperFixedHeightKey } from '@/enums/pageEnum';
 
   defineOptions({
     name: 'PageWrapper',
diff --git a/src/components/Preview/src/Functional.vue b/src/components/Preview/src/Functional.vue
index b7983813e..a612c42f6 100644
--- a/src/components/Preview/src/Functional.vue
+++ b/src/components/Preview/src/Functional.vue
@@ -1,11 +1,11 @@
 <script lang="tsx">
   import { defineComponent, ref, unref, computed, reactive, watchEffect, PropType } from 'vue';
   import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
-  import resumeSvg from '/@/assets/svg/preview/resume.svg';
-  import rotateSvg from '/@/assets/svg/preview/p-rotate.svg';
-  import scaleSvg from '/@/assets/svg/preview/scale.svg';
-  import unScaleSvg from '/@/assets/svg/preview/unscale.svg';
-  import unRotateSvg from '/@/assets/svg/preview/unrotate.svg';
+  import resumeSvg from '@/assets/svg/preview/resume.svg';
+  import rotateSvg from '@/assets/svg/preview/p-rotate.svg';
+  import scaleSvg from '@/assets/svg/preview/scale.svg';
+  import unScaleSvg from '@/assets/svg/preview/unscale.svg';
+  import unRotateSvg from '@/assets/svg/preview/unrotate.svg';
 
   enum StatueEnum {
     LOADING,
diff --git a/src/components/Preview/src/Preview.vue b/src/components/Preview/src/Preview.vue
index 9996d0b7b..3c32043d2 100644
--- a/src/components/Preview/src/Preview.vue
+++ b/src/components/Preview/src/Preview.vue
@@ -14,14 +14,14 @@
     </PreviewGroup>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { PropType } from 'vue';
-  import { defineComponent, computed } from 'vue';
+  import { computed } from 'vue';
 
   import { Image } from 'ant-design-vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { propTypes } from '/@/utils/propTypes';
-  import { isString } from '/@/utils/is';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { propTypes } from '@/utils/propTypes';
+  import { isString } from '@/utils/is';
 
   interface ImageProps {
     alt?: string;
@@ -41,43 +41,34 @@
 
   type ImageItem = string | ImageProps;
 
-  export default defineComponent({
-    name: 'ImagePreview',
-    components: {
-      Image,
-      PreviewGroup: Image.PreviewGroup,
-    },
-    props: {
-      functional: propTypes.bool,
-      imageList: {
-        type: Array as PropType<ImageItem[]>,
-      },
-    },
-    setup(props) {
-      const { prefixCls } = useDesign('image-preview');
+  const PreviewGroup = Image.PreviewGroup;
 
-      const getImageList = computed((): any[] => {
-        const { imageList } = props;
-        if (!imageList) {
-          return [];
-        }
-        return imageList.map((item) => {
-          if (isString(item)) {
-            return {
-              src: item,
-              placeholder: false,
-            };
-          }
-          return item;
-        });
-      });
+  defineOptions({ name: 'ImagePreview' });
 
-      return {
-        prefixCls,
-        getImageList,
-      };
+  const props = defineProps({
+    functional: propTypes.bool,
+    imageList: {
+      type: Array as PropType<ImageItem[]>,
     },
   });
+
+  const { prefixCls } = useDesign('image-preview');
+
+  const getImageList = computed((): any[] => {
+    const { imageList } = props;
+    if (!imageList) {
+      return [];
+    }
+    return imageList.map((item) => {
+      if (isString(item)) {
+        return {
+          src: item,
+          placeholder: false,
+        };
+      }
+      return item;
+    });
+  });
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-image-preview';
diff --git a/src/components/Preview/src/functional.ts b/src/components/Preview/src/functional.ts
index 74073a20e..c3ee2bff0 100644
--- a/src/components/Preview/src/functional.ts
+++ b/src/components/Preview/src/functional.ts
@@ -1,6 +1,6 @@
 import type { Options, Props } from './typing';
 import ImgPreview from './Functional.vue';
-import { isClient } from '/@/utils/is';
+import { isClient } from '@/utils/is';
 import { createVNode, render } from 'vue';
 
 let instance: ReturnType<typeof createVNode> | null = null;
diff --git a/src/components/Prompt/dialog.vue b/src/components/Prompt/dialog.vue
index 36413b048..44fde1f63 100644
--- a/src/components/Prompt/dialog.vue
+++ b/src/components/Prompt/dialog.vue
@@ -17,10 +17,8 @@
 <script setup lang="ts">
   import { ref } from 'vue';
   import { Modal } from 'ant-design-vue';
-  import { FormSchema } from '/@/components/Form';
-  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { FormSchema, BasicForm, useForm } from '@/components/Form';
 
-  const open = ref<boolean>(true);
   const props = defineProps<{
     title: string;
     addFormSchemas: FormSchema[];
@@ -30,6 +28,8 @@
     layout?: 'horizontal' | 'vertical' | 'inline';
   }>();
 
+  const open = ref<boolean>(true);
+
   const [register, { validate }] = useForm({
     schemas: props.addFormSchemas,
     showActionButtonGroup: false,
diff --git a/src/components/Prompt/state.ts b/src/components/Prompt/state.ts
index c90079de4..814a12b95 100644
--- a/src/components/Prompt/state.ts
+++ b/src/components/Prompt/state.ts
@@ -1,4 +1,4 @@
-import { FormSchema } from '/@/components/Form';
+import { FormSchema } from '@/components/Form';
 
 type InputType = 'InputTextArea' | 'InputNumber' | 'Input';
 export interface PromptProps {
diff --git a/src/components/Qrcode/index.ts b/src/components/Qrcode/index.ts
index 16a2f4087..9f18e0f11 100644
--- a/src/components/Qrcode/index.ts
+++ b/src/components/Qrcode/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 import qrCode from './src/Qrcode.vue';
 
 export const QrCode = withInstall(qrCode);
diff --git a/src/components/Qrcode/src/Qrcode.vue b/src/components/Qrcode/src/Qrcode.vue
index 81194e141..779caee1b 100644
--- a/src/components/Qrcode/src/Qrcode.vue
+++ b/src/components/Qrcode/src/Qrcode.vue
@@ -3,110 +3,112 @@
     <component :is="tag" ref="wrapRef" />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, watch, PropType, ref, unref, onMounted } from 'vue';
+<script lang="ts" setup>
+  import { watch, PropType, ref, unref, onMounted } from 'vue';
   import { toCanvas, QRCodeRenderersOptions, LogoType } from './qrcodePlus';
   import { toDataURL } from 'qrcode';
-  import { downloadByUrl } from '/@/utils/file/download';
+  import { downloadByUrl } from '@/utils/file/download';
   import { QrcodeDoneEventParams } from './typing';
 
-  export default defineComponent({
-    name: 'QrCode',
-    props: {
-      value: {
-        type: [String, Array] as PropType<string | any[]>,
-        default: null,
-      },
-      // 参数
-      options: {
-        type: Object as PropType<QRCodeRenderersOptions>,
-        default: null,
-      },
-      // 宽度
-      width: {
-        type: Number as PropType<number>,
-        default: 200,
-      },
-      // 中间logo图标
-      logo: {
-        type: [String, Object] as PropType<Partial<LogoType> | string>,
-        default: '',
-      },
-      // img 不支持内嵌logo
-      tag: {
-        type: String as PropType<'canvas' | 'img'>,
-        default: 'canvas',
-        validator: (v: string) => ['canvas', 'img'].includes(v),
-      },
+  defineOptions({ name: 'QrCode' });
+
+  const props = defineProps({
+    value: {
+      type: [String, Array] as PropType<string | any[]>,
+      default: null,
     },
-    emits: { done: (data: QrcodeDoneEventParams) => !!data, error: (error: any) => !!error },
-    setup(props, { emit }) {
-      const wrapRef = ref<HTMLCanvasElement | HTMLImageElement | null>(null);
-      async function createQrcode() {
-        try {
-          const { tag, value, options = {}, width, logo } = props;
-          const renderValue = String(value);
-          const wrapEl = unref(wrapRef);
-
-          if (!wrapEl) return;
-
-          if (tag === 'canvas') {
-            const url: string = await toCanvas({
-              canvas: wrapEl,
-              width,
-              logo: logo as any,
-              content: renderValue,
-              options: options || {},
-            });
-            emit('done', { url, ctx: (wrapEl as HTMLCanvasElement).getContext('2d') });
-            return;
-          }
-
-          if (tag === 'img') {
-            const url = await toDataURL(renderValue, {
-              errorCorrectionLevel: 'H',
-              width,
-              ...options,
-            });
-            (unref(wrapRef) as HTMLImageElement).src = url;
-            emit('done', { url });
-          }
-        } catch (error) {
-          emit('error', error);
-        }
-      }
-      /**
-       * file download
-       */
-      function download(fileName?: string) {
-        let url = '';
-        const wrapEl = unref(wrapRef);
-        if (wrapEl instanceof HTMLCanvasElement) {
-          url = wrapEl.toDataURL();
-        } else if (wrapEl instanceof HTMLImageElement) {
-          url = wrapEl.src;
-        }
-        if (!url) return;
-        downloadByUrl({
-          url,
-          fileName,
-        });
-      }
-
-      onMounted(createQrcode);
-
-      // 监听参数变化重新生成二维码
-      watch(
-        props,
-        () => {
-          createQrcode();
-        },
-        {
-          deep: true,
-        },
-      );
-
-      return { wrapRef, download };
+    // 参数
+    options: {
+      type: Object as PropType<QRCodeRenderersOptions>,
+      default: null,
+    },
+    // 宽度
+    width: {
+      type: Number as PropType<number>,
+      default: 200,
+    },
+    // 中间logo图标
+    logo: {
+      type: [String, Object] as PropType<Partial<LogoType> | string>,
+      default: '',
+    },
+    // img 不支持内嵌logo
+    tag: {
+      type: String as PropType<'canvas' | 'img'>,
+      default: 'canvas',
+      validator: (v: string) => ['canvas', 'img'].includes(v),
     },
   });
+
+  const emit = defineEmits({
+    done: (data: QrcodeDoneEventParams) => !!data,
+    error: (error: any) => !!error,
+  });
+
+  const wrapRef = ref<HTMLCanvasElement | HTMLImageElement | null>(null);
+  async function createQrcode() {
+    try {
+      const { tag, value, options = {}, width, logo } = props;
+      const renderValue = String(value);
+      const wrapEl = unref(wrapRef);
+
+      if (!wrapEl) return;
+
+      if (tag === 'canvas') {
+        const url: string = await toCanvas({
+          canvas: wrapEl,
+          width,
+          logo: logo as any,
+          content: renderValue,
+          options: options || {},
+        });
+        emit('done', { url, ctx: (wrapEl as HTMLCanvasElement).getContext('2d') });
+        return;
+      }
+
+      if (tag === 'img') {
+        const url = await toDataURL(renderValue, {
+          errorCorrectionLevel: 'H',
+          width,
+          ...options,
+        });
+        (unref(wrapRef) as HTMLImageElement).src = url;
+        emit('done', { url });
+      }
+    } catch (error) {
+      emit('error', error);
+    }
+  }
+  /**
+   * file download
+   */
+  function download(fileName?: string) {
+    let url = '';
+    const wrapEl = unref(wrapRef);
+    if (wrapEl instanceof HTMLCanvasElement) {
+      url = wrapEl.toDataURL();
+    } else if (wrapEl instanceof HTMLImageElement) {
+      url = wrapEl.src;
+    }
+    if (!url) return;
+    downloadByUrl({
+      url,
+      fileName,
+    });
+  }
+
+  onMounted(createQrcode);
+
+  // 监听参数变化重新生成二维码
+  watch(
+    props,
+    () => {
+      createQrcode();
+    },
+    {
+      deep: true,
+    },
+  );
+
+  defineExpose({ download });
 </script>
diff --git a/src/components/Qrcode/src/drawLogo.ts b/src/components/Qrcode/src/drawLogo.ts
index 82df27819..668eeb487 100644
--- a/src/components/Qrcode/src/drawLogo.ts
+++ b/src/components/Qrcode/src/drawLogo.ts
@@ -1,4 +1,4 @@
-import { isString } from '/@/utils/is';
+import { isString } from '@/utils/is';
 import { RenderQrCodeParams, LogoType } from './typing';
 
 export const drawLogo = ({ canvas, logo }: RenderQrCodeParams) => {
diff --git a/src/components/Scrollbar/index.ts b/src/components/Scrollbar/index.ts
index e5b2cb245..3711e649b 100644
--- a/src/components/Scrollbar/index.ts
+++ b/src/components/Scrollbar/index.ts
@@ -1,7 +1,6 @@
 /**
  * copy from element-ui
  */
-
 import Scrollbar from './src/Scrollbar.vue';
 
 export { Scrollbar };
diff --git a/src/components/Scrollbar/src/Scrollbar.vue b/src/components/Scrollbar/src/Scrollbar.vue
index 0e6a5b258..1926ed9b1 100644
--- a/src/components/Scrollbar/src/Scrollbar.vue
+++ b/src/components/Scrollbar/src/Scrollbar.vue
@@ -16,11 +16,8 @@
     </template>
   </div>
 </template>
-<script lang="ts">
-  import { addResizeListener, removeResizeListener } from '/@/utils/event';
-  import componentSetting from '/@/settings/componentSetting';
+<script lang="ts" setup>
   import {
-    defineComponent,
     ref,
     onMounted,
     onBeforeUnmount,
@@ -30,112 +27,97 @@
     watch,
     type PropType,
   } from 'vue';
-  import type { StyleValue } from '/@/utils/types';
+  import type { StyleValue } from '@/utils/types';
+  import { addResizeListener, removeResizeListener } from '@/utils/event';
+  import componentSetting from '@/settings/componentSetting';
   import Bar from './bar';
 
-  const { scrollbar } = componentSetting;
+  defineOptions({ name: 'Scrollbar' });
 
-  export default defineComponent({
-    name: 'Scrollbar',
-    // inheritAttrs: false,
-    components: { Bar },
-    props: {
-      native: {
-        type: Boolean,
-        default: scrollbar?.native ?? false,
-      },
-      wrapStyle: {
-        type: [String, Array, Object] as PropType<StyleValue>,
-        default: '',
-      },
-      wrapClass: {
-        type: [String, Array],
-        default: '',
-      },
-      viewClass: {
-        type: [String, Array],
-        default: '',
-      },
-      viewStyle: {
-        type: [String, Array],
-        default: '',
-      },
-      noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
-      tag: {
-        type: String,
-        default: 'div',
-      },
-      scrollHeight: {
-        // 用于监控内部scrollHeight的变化
-        type: Number,
-        default: 0,
-      },
+  const props = defineProps({
+    native: {
+      type: Boolean,
+      default: componentSetting.scrollbar?.native ?? false,
     },
-    setup(props) {
-      const sizeWidth = ref('0');
-      const sizeHeight = ref('0');
-      const moveX = ref(0);
-      const moveY = ref(0);
-      const wrap = ref();
-      const resize = ref();
-
-      provide('scroll-bar-wrap', wrap);
-
-      const handleScroll = () => {
-        if (!props.native) {
-          moveY.value = (unref(wrap).scrollTop * 100) / unref(wrap).clientHeight;
-          moveX.value = (unref(wrap).scrollLeft * 100) / unref(wrap).clientWidth;
-        }
-      };
-
-      const update = () => {
-        if (!unref(wrap)) return;
-
-        const heightPercentage = (unref(wrap).clientHeight * 100) / unref(wrap).scrollHeight;
-        const widthPercentage = (unref(wrap).clientWidth * 100) / unref(wrap).scrollWidth;
-
-        sizeHeight.value = heightPercentage < 100 ? heightPercentage + '%' : '';
-        sizeWidth.value = widthPercentage < 100 ? widthPercentage + '%' : '';
-      };
-
-      watch(
-        () => props.scrollHeight,
-        () => {
-          if (props.native) return;
-          update();
-        },
-      );
-
-      onMounted(() => {
-        if (props.native) return;
-        nextTick(update);
-        if (!props.noresize) {
-          addResizeListener(unref(resize), update);
-          addResizeListener(unref(wrap), update);
-          addEventListener('resize', update);
-        }
-      });
-
-      onBeforeUnmount(() => {
-        if (props.native) return;
-        if (!props.noresize) {
-          removeResizeListener(unref(resize), update);
-          removeResizeListener(unref(wrap), update);
-          removeEventListener('resize', update);
-        }
-      });
-
-      return {
-        moveX,
-        moveY,
-        sizeWidth,
-        sizeHeight,
-        wrap,
-        resize,
-        update,
-        handleScroll,
-      };
+    wrapStyle: {
+      type: [String, Array, Object] as PropType<StyleValue>,
+      default: '',
     },
+    wrapClass: {
+      type: [String, Array],
+      default: '',
+    },
+    viewClass: {
+      type: [String, Array],
+      default: '',
+    },
+    viewStyle: {
+      type: [String, Array],
+      default: '',
+    },
+    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    scrollHeight: {
+      // 用于监控内部scrollHeight的变化
+      type: Number,
+      default: 0,
+    },
+  });
+
+  const sizeWidth = ref('0');
+  const sizeHeight = ref('0');
+  const moveX = ref(0);
+  const moveY = ref(0);
+  const wrap = ref();
+  const resize = ref();
+
+  provide('scroll-bar-wrap', wrap);
+
+  const handleScroll = () => {
+    if (!props.native) {
+      moveY.value = (unref(wrap).scrollTop * 100) / unref(wrap).clientHeight;
+      moveX.value = (unref(wrap).scrollLeft * 100) / unref(wrap).clientWidth;
+    }
+  };
+
+  const update = () => {
+    if (!unref(wrap)) return;
+
+    const heightPercentage = (unref(wrap).clientHeight * 100) / unref(wrap).scrollHeight;
+    const widthPercentage = (unref(wrap).clientWidth * 100) / unref(wrap).scrollWidth;
+
+    sizeHeight.value = heightPercentage < 100 ? heightPercentage + '%' : '';
+    sizeWidth.value = widthPercentage < 100 ? widthPercentage + '%' : '';
+  };
+
+  watch(
+    () => props.scrollHeight,
+    () => {
+      if (props.native) return;
+      update();
+    },
+  );
+
+  onMounted(() => {
+    if (props.native) return;
+    nextTick(update);
+    if (!props.noresize) {
+      addResizeListener(unref(resize), update);
+      addResizeListener(unref(wrap), update);
+      addEventListener('resize', update);
+    }
+  });
+
+  onBeforeUnmount(() => {
+    if (props.native) return;
+    if (!props.noresize) {
+      removeResizeListener(unref(resize), update);
+      removeResizeListener(unref(wrap), update);
+      removeEventListener('resize', update);
+    }
   });
 </script>
 <style lang="less">
diff --git a/src/components/Scrollbar/src/bar.ts b/src/components/Scrollbar/src/bar.ts
index 64bd28962..f1832803d 100644
--- a/src/components/Scrollbar/src/bar.ts
+++ b/src/components/Scrollbar/src/bar.ts
@@ -8,13 +8,11 @@ import {
   inject,
   Ref,
 } from 'vue';
-import { on, off } from '/@/utils/domUtils';
-
+import { on, off } from '@/utils/domUtils';
 import { renderThumbStyle, BAR_MAP } from './util';
 
 export default defineComponent({
   name: 'Bar',
-
   props: {
     vertical: Boolean,
     size: String,
diff --git a/src/components/Scrollbar/src/util.ts b/src/components/Scrollbar/src/util.ts
index c6b689a62..6dfee84b5 100644
--- a/src/components/Scrollbar/src/util.ts
+++ b/src/components/Scrollbar/src/util.ts
@@ -1,5 +1,5 @@
 import type { BarMap } from './types';
-import type { MergeAll } from '/@/utils/types';
+import type { MergeAll } from '@/utils/types';
 
 export const BAR_MAP: BarMap = {
   vertical: {
@@ -24,7 +24,6 @@ export const BAR_MAP: BarMap = {
   },
 };
 
-// @ts-ignore
 export function renderThumbStyle({ move, size, bar }) {
   const style = {} as any;
   const translate = `translate${bar.axis}(${move}%)`;
diff --git a/src/components/SimpleMenu/src/SimpleMenu.vue b/src/components/SimpleMenu/src/SimpleMenu.vue
index 6fab44116..d2e76f117 100644
--- a/src/components/SimpleMenu/src/SimpleMenu.vue
+++ b/src/components/SimpleMenu/src/SimpleMenu.vue
@@ -1,10 +1,10 @@
 <template>
   <Menu
     v-bind="getBindValues"
-    :activeName="activeName"
+    :activeName="menuState.activeName"
     :openNames="getOpenKeys"
     :class="prefixCls"
-    :activeSubMenuNames="activeSubMenuNames"
+    :activeSubMenuNames="menuState.activeSubMenuNames"
     @select="handleSelect"
   >
     <template v-for="item in items" :key="item.path">
@@ -17,144 +17,131 @@
     </template>
   </Menu>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { MenuState } from './types';
-  import type { Menu as MenuType } from '/@/router/types';
+  import type { Menu as MenuType } from '@/router/types';
   import type { RouteLocationNormalizedLoaded } from 'vue-router';
-  import { defineComponent, computed, ref, unref, reactive, toRefs, watch, PropType } from 'vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { computed, ref, unref, reactive, toRefs, watch, PropType, useAttrs } from 'vue';
+  import { useDesign } from '@/hooks/web/useDesign';
   import Menu from './components/Menu.vue';
   import SimpleSubMenu from './SimpleSubMenu.vue';
-  import { listenerRouteChange } from '/@/logics/mitt/routeChange';
-  import { propTypes } from '/@/utils/propTypes';
-  import { REDIRECT_NAME } from '/@/router/constant';
+  import { listenerRouteChange } from '@/logics/mitt/routeChange';
+  import { propTypes } from '@/utils/propTypes';
+  import { REDIRECT_NAME } from '@/router/constant';
   import { useRouter } from 'vue-router';
-  import { isFunction, isHttpUrl } from '/@/utils/is';
-  import { openWindow } from '/@/utils';
-
+  import { isFunction, isHttpUrl } from '@/utils/is';
+  import { openWindow } from '@/utils';
   import { useOpenKeys } from './useOpenKeys';
 
-  export default defineComponent({
-    name: 'SimpleMenu',
-    components: {
-      Menu,
-      SimpleSubMenu,
+  defineOptions({ name: 'SimpleMenu', inheritAttrs: false });
+
+  const props = defineProps({
+    items: {
+      type: Array as PropType<MenuType[]>,
+      default: () => [],
     },
-    inheritAttrs: false,
-    props: {
-      items: {
-        type: Array as PropType<MenuType[]>,
-        default: () => [],
-      },
-      collapse: propTypes.bool,
-      mixSider: propTypes.bool,
-      theme: propTypes.string,
-      accordion: propTypes.bool.def(true),
-      collapsedShowTitle: propTypes.bool,
-      beforeClickFn: {
-        type: Function as PropType<(key: string) => Promise<boolean>>,
-      },
-      isSplitMenu: propTypes.bool,
-    },
-    emits: ['menuClick'],
-    setup(props, { attrs, emit }) {
-      const currentActiveMenu = ref('');
-      const isClickGo = ref(false);
-
-      const menuState = reactive<MenuState>({
-        activeName: '',
-        openNames: [],
-        activeSubMenuNames: [],
-      });
-
-      const { currentRoute } = useRouter();
-      const { prefixCls } = useDesign('simple-menu');
-      const { items, accordion, mixSider, collapse } = toRefs(props);
-
-      const { setOpenKeys, getOpenKeys } = useOpenKeys(
-        menuState,
-        items,
-        accordion,
-        mixSider as any,
-        collapse as any,
-      );
-
-      const getBindValues = computed(() => ({ ...attrs, ...props }));
-
-      watch(
-        () => props.collapse,
-        (collapse) => {
-          if (collapse) {
-            menuState.openNames = [];
-          } else {
-            setOpenKeys(currentRoute.value.path);
-          }
-        },
-        { immediate: true },
-      );
-
-      watch(
-        () => props.items,
-        () => {
-          if (!props.isSplitMenu) {
-            return;
-          }
-          setOpenKeys(currentRoute.value.path);
-        },
-        { flush: 'post' },
-      );
-
-      listenerRouteChange((route) => {
-        if (route.name === REDIRECT_NAME) return;
-
-        currentActiveMenu.value = route.meta?.currentActiveMenu as string;
-        handleMenuChange(route);
-
-        if (unref(currentActiveMenu)) {
-          menuState.activeName = unref(currentActiveMenu);
-          setOpenKeys(unref(currentActiveMenu));
-        }
-      });
-
-      async function handleMenuChange(route?: RouteLocationNormalizedLoaded) {
-        if (unref(isClickGo)) {
-          isClickGo.value = false;
-          return;
-        }
-        const path = (route || unref(currentRoute)).path;
-
-        menuState.activeName = path;
-
-        setOpenKeys(path);
-      }
-
-      async function handleSelect(key: string) {
-        if (isHttpUrl(key)) {
-          openWindow(key);
-          return;
-        }
-        const { beforeClickFn } = props;
-        if (beforeClickFn && isFunction(beforeClickFn)) {
-          const flag = await beforeClickFn(key);
-          if (!flag) return;
-        }
-
-        emit('menuClick', key);
-
-        isClickGo.value = true;
-        setOpenKeys(key);
-        menuState.activeName = key;
-      }
-
-      return {
-        prefixCls,
-        getBindValues,
-        handleSelect,
-        getOpenKeys,
-        ...toRefs(menuState),
-      };
+    collapse: propTypes.bool,
+    mixSider: propTypes.bool,
+    theme: propTypes.string,
+    accordion: propTypes.bool.def(true),
+    collapsedShowTitle: propTypes.bool,
+    beforeClickFn: {
+      type: Function as PropType<(key: string) => Promise<boolean>>,
     },
+    isSplitMenu: propTypes.bool,
   });
+
+  const emit = defineEmits(['menuClick']);
+
+  const attrs = useAttrs();
+
+  const currentActiveMenu = ref('');
+  const isClickGo = ref(false);
+
+  const menuState = reactive<MenuState>({
+    activeName: '',
+    openNames: [],
+    activeSubMenuNames: [],
+  });
+
+  const { currentRoute } = useRouter();
+  const { prefixCls } = useDesign('simple-menu');
+  const { items, accordion, mixSider, collapse } = toRefs(props);
+
+  const { setOpenKeys, getOpenKeys } = useOpenKeys(
+    menuState,
+    items,
+    accordion,
+    mixSider as any,
+    collapse as any,
+  );
+
+  const getBindValues = computed(() => ({ ...attrs, ...props }));
+
+  watch(
+    () => props.collapse,
+    (collapse) => {
+      if (collapse) {
+        menuState.openNames = [];
+      } else {
+        setOpenKeys(currentRoute.value.path);
+      }
+    },
+    { immediate: true },
+  );
+
+  watch(
+    () => props.items,
+    () => {
+      if (!props.isSplitMenu) {
+        return;
+      }
+      setOpenKeys(currentRoute.value.path);
+    },
+    { flush: 'post' },
+  );
+
+  listenerRouteChange((route) => {
+    if (route.name === REDIRECT_NAME) return;
+
+    currentActiveMenu.value = route.meta?.currentActiveMenu as string;
+    handleMenuChange(route);
+
+    if (unref(currentActiveMenu)) {
+      menuState.activeName = unref(currentActiveMenu);
+      setOpenKeys(unref(currentActiveMenu));
+    }
+  });
+
+  async function handleMenuChange(route?: RouteLocationNormalizedLoaded) {
+    if (unref(isClickGo)) {
+      isClickGo.value = false;
+      return;
+    }
+    const path = (route || unref(currentRoute)).path;
+
+    menuState.activeName = path;
+
+    setOpenKeys(path);
+  }
+
+  async function handleSelect(key: string) {
+    if (isHttpUrl(key)) {
+      openWindow(key);
+      return;
+    }
+    const { beforeClickFn } = props;
+    if (beforeClickFn && isFunction(beforeClickFn)) {
+      const flag = await beforeClickFn(key);
+      if (!flag) return;
+    }
+
+    emit('menuClick', key);
+
+    isClickGo.value = true;
+    setOpenKeys(key);
+    menuState.activeName = key;
+  }
 </script>
 <style lang="less">
   @import url('./index.less');
diff --git a/src/components/SimpleMenu/src/SimpleMenuTag.vue b/src/components/SimpleMenu/src/SimpleMenuTag.vue
index b7d3cb366..323a7774d 100644
--- a/src/components/SimpleMenu/src/SimpleMenuTag.vue
+++ b/src/components/SimpleMenu/src/SimpleMenuTag.vue
@@ -1,68 +1,59 @@
 <template>
   <span :class="getTagClass" v-if="getShowTag">{{ getContent }}</span>
 </template>
-<script lang="ts">
-  import type { Menu } from '/@/router/types';
+<script lang="ts" setup>
+  import type { Menu } from '@/router/types';
+  import { computed } from 'vue';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { propTypes } from '@/utils/propTypes';
 
-  import { defineComponent, computed } from 'vue';
+  defineOptions({ name: 'SimpleMenuTag' });
 
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { propTypes } from '/@/utils/propTypes';
+  const props = defineProps({
+    item: {
+      type: Object as PropType<Menu>,
+      default: () => ({}),
+    },
+    dot: propTypes.bool,
+    collapseParent: propTypes.bool,
+  });
 
-  export default defineComponent({
-    name: 'SimpleMenuTag',
-    props: {
-      item: {
-        type: Object as PropType<Menu>,
-        default: () => ({}),
+  const { prefixCls } = useDesign('simple-menu');
+
+  const getShowTag = computed(() => {
+    const { item } = props;
+
+    if (!item) return false;
+
+    const { tag } = item;
+    if (!tag) return false;
+
+    const { dot, content } = tag;
+    if (!dot && !content) return false;
+    return true;
+  });
+
+  const getContent = computed(() => {
+    if (!getShowTag.value) return '';
+    const { item, collapseParent } = props;
+    const { tag } = item;
+    const { dot, content } = tag!;
+    return dot || collapseParent ? '' : content;
+  });
+
+  const getTagClass = computed(() => {
+    const { item, collapseParent } = props;
+    const { tag = {} } = item || {};
+    const { dot, type = 'error' } = tag;
+    const tagCls = `${prefixCls}-tag`;
+    return [
+      tagCls,
+
+      [`${tagCls}--${type}`],
+      {
+        [`${tagCls}--collapse`]: collapseParent,
+        [`${tagCls}--dot`]: dot || props.dot,
       },
-      dot: propTypes.bool,
-      collapseParent: propTypes.bool,
-    },
-    setup(props) {
-      const { prefixCls } = useDesign('simple-menu');
-
-      const getShowTag = computed(() => {
-        const { item } = props;
-
-        if (!item) return false;
-
-        const { tag } = item;
-        if (!tag) return false;
-
-        const { dot, content } = tag;
-        if (!dot && !content) return false;
-        return true;
-      });
-
-      const getContent = computed(() => {
-        if (!getShowTag.value) return '';
-        const { item, collapseParent } = props;
-        const { tag } = item;
-        const { dot, content } = tag!;
-        return dot || collapseParent ? '' : content;
-      });
-
-      const getTagClass = computed(() => {
-        const { item, collapseParent } = props;
-        const { tag = {} } = item || {};
-        const { dot, type = 'error' } = tag;
-        const tagCls = `${prefixCls}-tag`;
-        return [
-          tagCls,
-
-          [`${tagCls}--${type}`],
-          {
-            [`${tagCls}--collapse`]: collapseParent,
-            [`${tagCls}--dot`]: dot || props.dot,
-          },
-        ];
-      });
-      return {
-        getTagClass,
-        getShowTag,
-        getContent,
-      };
-    },
+    ];
   });
 </script>
diff --git a/src/components/SimpleMenu/src/SimpleSubMenu.vue b/src/components/SimpleMenu/src/SimpleSubMenu.vue
index b60e257f1..c0e1b592a 100644
--- a/src/components/SimpleMenu/src/SimpleSubMenu.vue
+++ b/src/components/SimpleMenu/src/SimpleSubMenu.vue
@@ -44,77 +44,59 @@
     </template>
   </SubMenu>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { PropType } from 'vue';
-  import type { Menu } from '/@/router/types';
+  import type { Menu } from '@/router/types';
 
-  import { defineComponent, computed } from 'vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { computed } from 'vue';
+  import { useDesign } from '@/hooks/web/useDesign';
   import Icon from '@/components/Icon/Icon.vue';
 
   import MenuItem from './components/MenuItem.vue';
   import SubMenu from './components/SubMenuItem.vue';
-  import { propTypes } from '/@/utils/propTypes';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import { propTypes } from '@/utils/propTypes';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
 
-  export default defineComponent({
-    name: 'SimpleSubMenu',
-    components: {
-      SubMenu,
-      MenuItem,
-      SimpleMenuTag: createAsyncComponent(() => import('./SimpleMenuTag.vue')),
-      Icon,
-    },
-    props: {
-      item: {
-        type: Object as PropType<Menu>,
-        default: () => ({}),
-      },
-      parent: propTypes.bool,
-      collapsedShowTitle: propTypes.bool,
-      collapse: propTypes.bool,
-      theme: propTypes.oneOf(['dark', 'light']),
-    },
-    setup(props) {
-      const { t } = useI18n();
-      const { prefixCls } = useDesign('simple-menu');
-
-      const getShowMenu = computed(() => !props.item?.meta?.hideMenu);
-      const getIcon = computed(() => (props.item?.img ? undefined : props.item?.icon));
-      const getImg = computed(() => props.item?.img);
-      const getI18nName = computed(() => t(props.item?.name));
-      const getShowSubTitle = computed(() => !props.collapse || !props.parent);
-      const getIsCollapseParent = computed(() => !!props.collapse && !!props.parent);
-      const getLevelClass = computed(() => {
-        return [
-          {
-            [`${prefixCls}__parent`]: props.parent,
-            [`${prefixCls}__children`]: !props.parent,
-          },
-        ];
-      });
-
-      function menuHasChildren(menuTreeItem: Menu): boolean {
-        return (
-          !menuTreeItem.meta?.hideChildrenInMenu &&
-          Reflect.has(menuTreeItem, 'children') &&
-          !!menuTreeItem.children &&
-          menuTreeItem.children.length > 0
-        );
-      }
-
-      return {
-        prefixCls,
-        menuHasChildren,
-        getShowMenu,
-        getIcon,
-        getImg,
-        getI18nName,
-        getShowSubTitle,
-        getLevelClass,
-        getIsCollapseParent,
-      };
+  const SimpleMenuTag = createAsyncComponent(() => import('./SimpleMenuTag.vue'));
+
+  defineOptions({ name: 'SimpleSubMenu' });
+
+  const props = defineProps({
+    item: {
+      type: Object as PropType<Menu>,
+      default: () => ({}),
     },
+    parent: propTypes.bool,
+    collapsedShowTitle: propTypes.bool,
+    collapse: propTypes.bool,
+    theme: propTypes.oneOf(['dark', 'light']),
   });
+
+  const { t } = useI18n();
+  const { prefixCls } = useDesign('simple-menu');
+
+  const getShowMenu = computed(() => !props.item?.meta?.hideMenu);
+  const getIcon = computed(() => (props.item?.img ? undefined : props.item?.icon));
+  const getImg = computed(() => props.item?.img);
+  const getI18nName = computed(() => t(props.item?.name));
+  const getShowSubTitle = computed(() => !props.collapse || !props.parent);
+  const getIsCollapseParent = computed(() => !!props.collapse && !!props.parent);
+  const getLevelClass = computed(() => {
+    return [
+      {
+        [`${prefixCls}__parent`]: props.parent,
+        [`${prefixCls}__children`]: !props.parent,
+      },
+    ];
+  });
+
+  function menuHasChildren(menuTreeItem: Menu): boolean {
+    return (
+      !menuTreeItem.meta?.hideChildrenInMenu &&
+      Reflect.has(menuTreeItem, 'children') &&
+      !!menuTreeItem.children &&
+      menuTreeItem.children.length > 0
+    );
+  }
 </script>
diff --git a/src/components/SimpleMenu/src/components/Menu.vue b/src/components/SimpleMenu/src/components/Menu.vue
index 7616a7c3e..596fdef91 100644
--- a/src/components/SimpleMenu/src/components/Menu.vue
+++ b/src/components/SimpleMenu/src/components/Menu.vue
@@ -4,11 +4,10 @@
   </ul>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import type { PropType } from 'vue';
   import type { SubMenuProvider } from './types';
   import {
-    defineComponent,
     ref,
     computed,
     onMounted,
@@ -18,140 +17,136 @@
     getCurrentInstance,
     provide,
   } from 'vue';
-
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { propTypes } from '/@/utils/propTypes';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { propTypes } from '@/utils/propTypes';
   import { createSimpleRootMenuContext, type MenuEmitterEvents } from './useSimpleMenuContext';
-  import { mitt } from '/@/utils/mitt';
+  import { mitt } from '@/utils/mitt';
 
-  export default defineComponent({
-    name: 'Menu',
-    props: {
-      theme: propTypes.oneOf(['light', 'dark']).def('light'),
-      activeName: propTypes.oneOfType([propTypes.string, propTypes.number]),
-      openNames: {
-        type: Array as PropType<string[]>,
-        default: () => [],
-      },
-      accordion: propTypes.bool.def(true),
-      width: propTypes.string.def('100%'),
-      collapsedWidth: propTypes.string.def('48px'),
-      indentSize: propTypes.number.def(16),
-      collapse: propTypes.bool.def(true),
-      activeSubMenuNames: {
-        type: Array as PropType<(string | number)[]>,
-        default: () => [],
-      },
+  defineOptions({ name: 'Menu' });
+
+  const props = defineProps({
+    theme: propTypes.oneOf(['light', 'dark']).def('light'),
+    activeName: propTypes.oneOfType([propTypes.string, propTypes.number]),
+    openNames: {
+      type: Array as PropType<string[]>,
+      default: () => [],
     },
-    emits: ['select', 'open-change'],
-    setup(props, { emit }) {
-      const rootMenuEmitter = mitt<MenuEmitterEvents>();
-      const instance = getCurrentInstance();
+    accordion: propTypes.bool.def(true),
+    width: propTypes.string.def('100%'),
+    collapsedWidth: propTypes.string.def('48px'),
+    indentSize: propTypes.number.def(16),
+    collapse: propTypes.bool.def(true),
+    activeSubMenuNames: {
+      type: Array as PropType<(string | number)[]>,
+      default: () => [],
+    },
+  });
 
-      const currentActiveName = ref<string | number>('');
-      const openedNames = ref<(string | number)[]>([]);
+  const emit = defineEmits(['select', 'open-change']);
 
-      const { prefixCls } = useDesign('menu');
+  const rootMenuEmitter = mitt<MenuEmitterEvents>();
+  const instance = getCurrentInstance();
 
-      const isRemoveAllPopup = ref(false);
+  const currentActiveName = ref<string | number>('');
+  const openedNames = ref<(string | number)[]>([]);
 
-      createSimpleRootMenuContext({
-        rootMenuEmitter: rootMenuEmitter,
-        activeName: currentActiveName,
+  const { prefixCls } = useDesign('menu');
+
+  const isRemoveAllPopup = ref(false);
+
+  createSimpleRootMenuContext({
+    rootMenuEmitter: rootMenuEmitter,
+    activeName: currentActiveName,
+  });
+
+  const getClass = computed(() => {
+    const { theme } = props;
+    return [
+      prefixCls,
+      `${prefixCls}-${theme}`,
+      `${prefixCls}-vertical`,
+      {
+        [`${prefixCls}-collapse`]: props.collapse,
+      },
+    ];
+  });
+
+  watchEffect(() => {
+    openedNames.value = props.openNames;
+  });
+
+  watchEffect(() => {
+    if (props.activeName) {
+      currentActiveName.value = props.activeName;
+    }
+  });
+
+  watch(
+    () => props.openNames,
+    () => {
+      nextTick(() => {
+        updateOpened();
       });
+    },
+  );
 
-      const getClass = computed(() => {
-        const { theme } = props;
-        return [
-          prefixCls,
-          `${prefixCls}-${theme}`,
-          `${prefixCls}-vertical`,
-          {
-            [`${prefixCls}-collapse`]: props.collapse,
-          },
-        ];
+  function updateOpened() {
+    rootMenuEmitter.emit('on-update-opened', openedNames.value);
+  }
+
+  function addSubMenu(name: string | number) {
+    if (openedNames.value.includes(name)) return;
+    openedNames.value.push(name);
+    updateOpened();
+  }
+
+  function removeSubMenu(name: string | number) {
+    openedNames.value = openedNames.value.filter((item) => item !== name);
+    updateOpened();
+  }
+
+  function removeAll() {
+    openedNames.value = [];
+    updateOpened();
+  }
+
+  function sliceIndex(index: number) {
+    if (index === -1) return;
+    openedNames.value = openedNames.value.slice(0, index + 1);
+    updateOpened();
+  }
+
+  provide<SubMenuProvider>(`subMenu:${instance?.uid}`, {
+    addSubMenu,
+    removeSubMenu,
+    getOpenNames: () => openedNames.value,
+    removeAll,
+    isRemoveAllPopup,
+    sliceIndex,
+    level: 0,
+    props: props as any,
+  });
+
+  onMounted(() => {
+    openedNames.value = !props.collapse ? [...props.openNames] : [];
+    updateOpened();
+    rootMenuEmitter.on('on-menu-item-select', (name: string | number) => {
+      currentActiveName.value = name;
+
+      nextTick(() => {
+        props.collapse && removeAll();
       });
+      emit('select', name);
+    });
 
-      watchEffect(() => {
-        openedNames.value = props.openNames;
-      });
-
-      watchEffect(() => {
-        if (props.activeName) {
-          currentActiveName.value = props.activeName;
-        }
-      });
-
-      watch(
-        () => props.openNames,
-        () => {
-          nextTick(() => {
-            updateOpened();
-          });
-        },
-      );
-
-      function updateOpened() {
-        rootMenuEmitter.emit('on-update-opened', openedNames.value);
-      }
-
-      function addSubMenu(name: string | number) {
-        if (openedNames.value.includes(name)) return;
+    rootMenuEmitter.on('open-name-change', ({ name, opened }) => {
+      if (opened && !openedNames.value.includes(name)) {
         openedNames.value.push(name);
-        updateOpened();
+      } else if (!opened) {
+        const index = openedNames.value.findIndex((item) => item === name);
+        index !== -1 && openedNames.value.splice(index, 1);
       }
-
-      function removeSubMenu(name: string | number) {
-        openedNames.value = openedNames.value.filter((item) => item !== name);
-        updateOpened();
-      }
-
-      function removeAll() {
-        openedNames.value = [];
-        updateOpened();
-      }
-
-      function sliceIndex(index: number) {
-        if (index === -1) return;
-        openedNames.value = openedNames.value.slice(0, index + 1);
-        updateOpened();
-      }
-
-      provide<SubMenuProvider>(`subMenu:${instance?.uid}`, {
-        addSubMenu,
-        removeSubMenu,
-        getOpenNames: () => openedNames.value,
-        removeAll,
-        isRemoveAllPopup,
-        sliceIndex,
-        level: 0,
-        props: props as any,
-      });
-
-      onMounted(() => {
-        openedNames.value = !props.collapse ? [...props.openNames] : [];
-        updateOpened();
-        rootMenuEmitter.on('on-menu-item-select', (name: string | number) => {
-          currentActiveName.value = name;
-
-          nextTick(() => {
-            props.collapse && removeAll();
-          });
-          emit('select', name);
-        });
-
-        rootMenuEmitter.on('open-name-change', ({ name, opened }) => {
-          if (opened && !openedNames.value.includes(name)) {
-            openedNames.value.push(name);
-          } else if (!opened) {
-            const index = openedNames.value.findIndex((item) => item === name);
-            index !== -1 && openedNames.value.splice(index, 1);
-          }
-        });
-      });
-
-      return { getClass, openedNames };
-    },
+    });
   });
 </script>
 <style lang="less">
diff --git a/src/components/SimpleMenu/src/components/MenuCollapseTransition.vue b/src/components/SimpleMenu/src/components/MenuCollapseTransition.vue
index 5295439a7..0b9759c5b 100644
--- a/src/components/SimpleMenu/src/components/MenuCollapseTransition.vue
+++ b/src/components/SimpleMenu/src/components/MenuCollapseTransition.vue
@@ -3,76 +3,70 @@
     <slot></slot>
   </transition>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { addClass, removeClass } from '/@/utils/domUtils';
+<script lang="ts" setup>
+  import { addClass, removeClass } from '@/utils/domUtils';
 
-  export default defineComponent({
-    name: 'MenuCollapseTransition',
-    setup() {
-      return {
-        on: {
-          beforeEnter(el) {
-            addClass(el, 'collapse-transition');
-            if (!el.dataset) el.dataset = {};
+  defineOptions({ name: 'MenuCollapseTransition' });
 
-            el.dataset.oldPaddingTop = el.style.paddingTop;
-            el.dataset.oldPaddingBottom = el.style.paddingBottom;
+  const on = {
+    beforeEnter(el) {
+      addClass(el, 'collapse-transition');
+      if (!el.dataset) el.dataset = {};
 
-            el.style.height = '0';
-            el.style.paddingTop = 0;
-            el.style.paddingBottom = 0;
-          },
+      el.dataset.oldPaddingTop = el.style.paddingTop;
+      el.dataset.oldPaddingBottom = el.style.paddingBottom;
 
-          enter(el) {
-            el.dataset.oldOverflow = el.style.overflow;
-            if (el.scrollHeight !== 0) {
-              el.style.height = el.scrollHeight + 'px';
-              el.style.paddingTop = el.dataset.oldPaddingTop;
-              el.style.paddingBottom = el.dataset.oldPaddingBottom;
-            } else {
-              el.style.height = '';
-              el.style.paddingTop = el.dataset.oldPaddingTop;
-              el.style.paddingBottom = el.dataset.oldPaddingBottom;
-            }
-
-            el.style.overflow = 'hidden';
-          },
-
-          afterEnter(el) {
-            removeClass(el, 'collapse-transition');
-            el.style.height = '';
-            el.style.overflow = el.dataset.oldOverflow;
-          },
-
-          beforeLeave(el) {
-            if (!el.dataset) el.dataset = {};
-            el.dataset.oldPaddingTop = el.style.paddingTop;
-            el.dataset.oldPaddingBottom = el.style.paddingBottom;
-            el.dataset.oldOverflow = el.style.overflow;
-
-            el.style.height = el.scrollHeight + 'px';
-            el.style.overflow = 'hidden';
-          },
-
-          leave(el) {
-            if (el.scrollHeight !== 0) {
-              addClass(el, 'collapse-transition');
-              el.style.height = 0;
-              el.style.paddingTop = 0;
-              el.style.paddingBottom = 0;
-            }
-          },
-
-          afterLeave(el) {
-            removeClass(el, 'collapse-transition');
-            el.style.height = '';
-            el.style.overflow = el.dataset.oldOverflow;
-            el.style.paddingTop = el.dataset.oldPaddingTop;
-            el.style.paddingBottom = el.dataset.oldPaddingBottom;
-          },
-        },
-      };
+      el.style.height = '0';
+      el.style.paddingTop = 0;
+      el.style.paddingBottom = 0;
     },
-  });
+
+    enter(el) {
+      el.dataset.oldOverflow = el.style.overflow;
+      if (el.scrollHeight !== 0) {
+        el.style.height = el.scrollHeight + 'px';
+        el.style.paddingTop = el.dataset.oldPaddingTop;
+        el.style.paddingBottom = el.dataset.oldPaddingBottom;
+      } else {
+        el.style.height = '';
+        el.style.paddingTop = el.dataset.oldPaddingTop;
+        el.style.paddingBottom = el.dataset.oldPaddingBottom;
+      }
+
+      el.style.overflow = 'hidden';
+    },
+
+    afterEnter(el) {
+      removeClass(el, 'collapse-transition');
+      el.style.height = '';
+      el.style.overflow = el.dataset.oldOverflow;
+    },
+
+    beforeLeave(el) {
+      if (!el.dataset) el.dataset = {};
+      el.dataset.oldPaddingTop = el.style.paddingTop;
+      el.dataset.oldPaddingBottom = el.style.paddingBottom;
+      el.dataset.oldOverflow = el.style.overflow;
+
+      el.style.height = el.scrollHeight + 'px';
+      el.style.overflow = 'hidden';
+    },
+
+    leave(el) {
+      if (el.scrollHeight !== 0) {
+        addClass(el, 'collapse-transition');
+        el.style.height = 0;
+        el.style.paddingTop = 0;
+        el.style.paddingBottom = 0;
+      }
+    },
+
+    afterLeave(el) {
+      removeClass(el, 'collapse-transition');
+      el.style.height = '';
+      el.style.overflow = el.dataset.oldOverflow;
+      el.style.paddingTop = el.dataset.oldPaddingTop;
+      el.style.paddingBottom = el.dataset.oldPaddingBottom;
+    },
+  };
 </script>
diff --git a/src/components/SimpleMenu/src/components/MenuItem.vue b/src/components/SimpleMenu/src/components/MenuItem.vue
index feb3d6a5b..27c97f430 100644
--- a/src/components/SimpleMenu/src/components/MenuItem.vue
+++ b/src/components/SimpleMenu/src/components/MenuItem.vue
@@ -1,6 +1,6 @@
 <template>
   <li :class="getClass" @click.stop="handleClickItem" :style="getCollapse ? {} : getItemStyle">
-    <Tooltip placement="right" v-if="showTooptip">
+    <Tooltip placement="right" v-if="showTooltip">
       <template #title>
         <slot name="title"></slot>
       </template>
@@ -16,92 +16,88 @@
   </li>
 </template>
 
-<script lang="ts">
-  import { PropType, defineComponent, ref, computed, unref, getCurrentInstance, watch } from 'vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { propTypes } from '/@/utils/propTypes';
+<script lang="ts" setup>
+  import { PropType, ref, computed, unref, getCurrentInstance, watch, useSlots } from 'vue';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { propTypes } from '@/utils/propTypes';
   import { useMenuItem } from './useMenu';
   import { Tooltip } from 'ant-design-vue';
   import { useSimpleRootMenuContext } from './useSimpleMenuContext';
 
-  export default defineComponent({
-    name: 'MenuItem',
-    components: { Tooltip },
-    props: {
-      name: {
-        type: [String, Number] as PropType<string | number>,
-        required: true,
-      },
-      disabled: propTypes.bool,
-    },
-    setup(props, { slots }) {
-      const instance = getCurrentInstance();
-
-      const active = ref(false);
-
-      const { getItemStyle, getParentList, getParentMenu, getParentRootMenu } =
-        useMenuItem(instance);
-
-      const { prefixCls } = useDesign('menu');
-
-      const { rootMenuEmitter, activeName } = useSimpleRootMenuContext();
-
-      const getClass = computed(() => {
-        return [
-          `${prefixCls}-item`,
-          {
-            [`${prefixCls}-item-active`]: unref(active),
-            [`${prefixCls}-item-selected`]: unref(active),
-            [`${prefixCls}-item-disabled`]: !!props.disabled,
-          },
-        ];
-      });
-
-      const getCollapse = computed(() => unref(getParentRootMenu)?.props.collapse);
-
-      const showTooptip = computed(() => {
-        return unref(getParentMenu)?.type.name === 'Menu' && unref(getCollapse) && slots.title;
-      });
-
-      function handleClickItem() {
-        const { disabled } = props;
-        if (disabled) {
-          return;
-        }
-
-        rootMenuEmitter.emit('on-menu-item-select', props.name);
-        if (unref(getCollapse)) {
-          return;
-        }
-        const { uidList } = getParentList();
-
-        rootMenuEmitter.emit('on-update-opened', {
-          opend: false,
-          parent: instance?.parent,
-          uidList: uidList,
-        });
-      }
-      watch(
-        () => activeName.value,
-        (name: string | number) => {
-          if (name === props.name) {
-            const { list, uidList } = getParentList();
-            active.value = true;
-            list.forEach((item) => {
-              if (item.proxy) {
-                (item.proxy as any).active = true;
-              }
-            });
-
-            rootMenuEmitter.emit('on-update-active-name:submenu', uidList);
-          } else {
-            active.value = false;
-          }
-        },
-        { immediate: true },
-      );
-
-      return { getClass, prefixCls, getItemStyle, getCollapse, handleClickItem, showTooptip };
+  defineOptions({ name: 'MenuItem' });
+
+  const props = defineProps({
+    name: {
+      type: [String, Number] as PropType<string | number>,
+      required: true,
     },
+    disabled: propTypes.bool,
   });
+
+  const slots = useSlots();
+
+  const instance = getCurrentInstance();
+
+  const active = ref(false);
+
+  const { getItemStyle, getParentList, getParentMenu, getParentRootMenu } = useMenuItem(instance);
+
+  const { prefixCls } = useDesign('menu');
+
+  const { rootMenuEmitter, activeName } = useSimpleRootMenuContext();
+
+  const getClass = computed(() => {
+    return [
+      `${prefixCls}-item`,
+      {
+        [`${prefixCls}-item-active`]: unref(active),
+        [`${prefixCls}-item-selected`]: unref(active),
+        [`${prefixCls}-item-disabled`]: !!props.disabled,
+      },
+    ];
+  });
+
+  const getCollapse = computed(() => unref(getParentRootMenu)?.props.collapse);
+
+  const showTooltip = computed(() => {
+    return unref(getParentMenu)?.type.name === 'Menu' && unref(getCollapse) && slots.title;
+  });
+
+  function handleClickItem() {
+    const { disabled } = props;
+    if (disabled) {
+      return;
+    }
+
+    rootMenuEmitter.emit('on-menu-item-select', props.name);
+    if (unref(getCollapse)) {
+      return;
+    }
+    const { uidList } = getParentList();
+
+    rootMenuEmitter.emit('on-update-opened', {
+      opend: false,
+      parent: instance?.parent,
+      uidList: uidList,
+    });
+  }
+  watch(
+    () => activeName.value,
+    (name: string | number) => {
+      if (name === props.name) {
+        const { list, uidList } = getParentList();
+        active.value = true;
+        list.forEach((item) => {
+          if (item.proxy) {
+            (item.proxy as any).active = true;
+          }
+        });
+
+        rootMenuEmitter.emit('on-update-active-name:submenu', uidList);
+      } else {
+        active.value = false;
+      }
+    },
+    { immediate: true },
+  );
 </script>
diff --git a/src/components/SimpleMenu/src/components/SubMenuItem.vue b/src/components/SimpleMenu/src/components/SubMenuItem.vue
index a355775c6..bae2f1565 100644
--- a/src/components/SimpleMenu/src/components/SubMenuItem.vue
+++ b/src/components/SimpleMenu/src/components/SubMenuItem.vue
@@ -10,7 +10,7 @@
         />
       </div>
       <CollapseTransition>
-        <ul :class="prefixCls" v-show="opened">
+        <ul :class="prefixCls" v-show="state.opened">
           <slot></slot>
         </ul>
       </CollapseTransition>
@@ -45,7 +45,7 @@
         />
       </div>
       <!-- eslint-disable-next-line -->
-      <template #content v-show="opened">
+      <template #content v-show="state.opened">
         <div v-bind="getEvents(true)">
           <ul :class="[prefixCls, `${prefixCls}-${getTheme}`, `${prefixCls}-popup`]">
             <slot></slot>
@@ -56,280 +56,253 @@
   </li>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { type TimeoutHandle, type Recordable } from '@vben/types';
   import type { CSSProperties, PropType } from 'vue';
   import type { SubMenuProvider } from './types';
   import {
-    defineComponent,
     computed,
     unref,
     getCurrentInstance,
-    toRefs,
     reactive,
     provide,
     onBeforeMount,
     inject,
   } from 'vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { propTypes } from '/@/utils/propTypes';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { propTypes } from '@/utils/propTypes';
   import { useMenuItem } from './useMenu';
   import { useSimpleRootMenuContext } from './useSimpleMenuContext';
-  import { CollapseTransition } from '/@/components/Transition';
+  import { CollapseTransition } from '@/components/Transition';
   import Icon from '@/components/Icon/Icon.vue';
   import { Popover } from 'ant-design-vue';
   import { isBoolean, isObject } from '/@/utils/is';
-  import { mitt } from '/@/utils/mitt';
+  import { mitt } from '@/utils/mitt';
+
+  defineOptions({ name: 'SubMenu' });
+
+  const props = defineProps({
+    name: {
+      type: [String, Number] as PropType<string | number>,
+      required: true,
+    },
+    disabled: propTypes.bool,
+    collapsedShowTitle: propTypes.bool,
+  });
 
   const DELAY = 200;
-  export default defineComponent({
-    name: 'SubMenu',
-    components: {
-      Icon,
-      CollapseTransition,
-      Popover,
-    },
-    props: {
-      name: {
-        type: [String, Number] as PropType<string | number>,
-        required: true,
+  const instance = getCurrentInstance();
+
+  const state = reactive({
+    active: false,
+    opened: false,
+  });
+
+  const data = reactive({
+    timeout: null as TimeoutHandle | null,
+    mouseInChild: false,
+    isChild: false,
+  });
+
+  const { getParentSubMenu, getItemStyle, getParentMenu, getParentList } = useMenuItem(instance);
+
+  const { prefixCls } = useDesign('menu');
+
+  const subMenuEmitter = mitt();
+
+  const { rootMenuEmitter } = useSimpleRootMenuContext();
+
+  const {
+    addSubMenu: parentAddSubmenu,
+    removeSubMenu: parentRemoveSubmenu,
+    removeAll: parentRemoveAll,
+    getOpenNames: parentGetOpenNames,
+    isRemoveAllPopup,
+    sliceIndex,
+    level,
+    props: rootProps,
+    handleMouseleave: parentHandleMouseleave,
+  } = inject<SubMenuProvider>(`subMenu:${getParentMenu.value?.uid}`)!;
+
+  const getClass = computed(() => {
+    return [
+      `${prefixCls}-submenu`,
+      {
+        [`${prefixCls}-opened`]: state.opened,
+        [`${prefixCls}-submenu-disabled`]: props.disabled,
+        [`${prefixCls}-submenu-has-parent-submenu`]: unref(getParentSubMenu),
+        [`${prefixCls}-child-item-active`]: state.active,
       },
-      disabled: propTypes.bool,
-      collapsedShowTitle: propTypes.bool,
-    },
-    setup(props) {
-      const instance = getCurrentInstance();
+    ];
+  });
 
-      const state = reactive({
-        active: false,
-        opened: false,
+  const getAccordion = computed(() => rootProps.accordion);
+  const getCollapse = computed(() => rootProps.collapse);
+  const getTheme = computed(() => rootProps.theme);
+
+  const getOverlayStyle = computed((): CSSProperties => {
+    return {
+      minWidth: '200px',
+    };
+  });
+
+  const getIsOpend = computed(() => {
+    const name = props.name;
+    if (unref(getCollapse)) {
+      return parentGetOpenNames().includes(name);
+    }
+    return state.opened;
+  });
+
+  const getSubClass = computed(() => {
+    const isActive = rootProps.activeSubMenuNames.includes(props.name);
+    return [
+      `${prefixCls}-submenu-title`,
+      {
+        [`${prefixCls}-submenu-active`]: isActive,
+        [`${prefixCls}-submenu-active-border`]: isActive && level === 0,
+        [`${prefixCls}-submenu-collapse`]: unref(getCollapse) && level === 0,
+      },
+    ];
+  });
+
+  function getEvents(deep: boolean) {
+    if (!unref(getCollapse)) {
+      return {};
+    }
+    return {
+      onMouseenter: handleMouseenter,
+      onMouseleave: () => handleMouseleave(deep),
+    };
+  }
+
+  function handleClick() {
+    const { disabled } = props;
+    if (disabled || unref(getCollapse)) return;
+    const opened = state.opened;
+
+    if (unref(getAccordion)) {
+      const { uidList } = getParentList();
+      rootMenuEmitter.emit('on-update-opened', {
+        opend: false,
+        parent: instance?.parent,
+        uidList: uidList,
       });
-
-      const data = reactive({
-        timeout: null as TimeoutHandle | null,
-        mouseInChild: false,
-        isChild: false,
+    } else {
+      rootMenuEmitter.emit('open-name-change', {
+        name: props.name,
+        opened: !opened,
       });
+    }
+    state.opened = !opened;
+  }
 
-      const { getParentSubMenu, getItemStyle, getParentMenu, getParentList } =
-        useMenuItem(instance);
+  function handleMouseenter() {
+    const disabled = props.disabled;
+    if (disabled) return;
 
-      const { prefixCls } = useDesign('menu');
+    subMenuEmitter.emit('submenu:mouse-enter-child');
 
-      const subMenuEmitter = mitt();
+    const index = parentGetOpenNames().findIndex((item) => item === props.name);
 
-      const { rootMenuEmitter } = useSimpleRootMenuContext();
+    sliceIndex(index);
 
-      const {
-        addSubMenu: parentAddSubmenu,
-        removeSubMenu: parentRemoveSubmenu,
-        removeAll: parentRemoveAll,
-        getOpenNames: parentGetOpenNames,
-        isRemoveAllPopup,
-        sliceIndex,
-        level,
-        props: rootProps,
-        handleMouseleave: parentHandleMouseleave,
-      } = inject<SubMenuProvider>(`subMenu:${getParentMenu.value?.uid}`)!;
+    const isRoot = level === 0 && parentGetOpenNames().length === 2;
+    if (isRoot) {
+      parentRemoveAll();
+    }
+    data.isChild = parentGetOpenNames().includes(props.name);
+    clearTimeout(data.timeout!);
+    data.timeout = setTimeout(() => {
+      parentAddSubmenu(props.name);
+    }, DELAY);
+  }
 
-      const getClass = computed(() => {
-        return [
-          `${prefixCls}-submenu`,
-          {
-            [`${prefixCls}-opened`]: state.opened,
-            [`${prefixCls}-submenu-disabled`]: props.disabled,
-            [`${prefixCls}-submenu-has-parent-submenu`]: unref(getParentSubMenu),
-            [`${prefixCls}-child-item-active`]: state.active,
-          },
-        ];
-      });
+  function handleMouseleave(deepDispatch = false) {
+    const parentName = getParentMenu.value?.props.name;
+    if (!parentName) {
+      isRemoveAllPopup.value = true;
+    }
 
-      const getAccordion = computed(() => rootProps.accordion);
-      const getCollapse = computed(() => rootProps.collapse);
-      const getTheme = computed(() => rootProps.theme);
+    if (parentGetOpenNames().slice(-1)[0] === props.name) {
+      data.isChild = false;
+    }
 
-      const getOverlayStyle = computed((): CSSProperties => {
-        return {
-          minWidth: '200px',
-        };
-      });
-
-      const getIsOpend = computed(() => {
-        const name = props.name;
-        if (unref(getCollapse)) {
-          return parentGetOpenNames().includes(name);
-        }
-        return state.opened;
-      });
-
-      const getSubClass = computed(() => {
-        const isActive = rootProps.activeSubMenuNames.includes(props.name);
-        return [
-          `${prefixCls}-submenu-title`,
-          {
-            [`${prefixCls}-submenu-active`]: isActive,
-            [`${prefixCls}-submenu-active-border`]: isActive && level === 0,
-            [`${prefixCls}-submenu-collapse`]: unref(getCollapse) && level === 0,
-          },
-        ];
-      });
-
-      function getEvents(deep: boolean) {
-        if (!unref(getCollapse)) {
-          return {};
-        }
-        return {
-          onMouseenter: handleMouseenter,
-          onMouseleave: () => handleMouseleave(deep),
-        };
-      }
-
-      function handleClick() {
-        const { disabled } = props;
-        if (disabled || unref(getCollapse)) return;
-        const opened = state.opened;
-
-        if (unref(getAccordion)) {
-          const { uidList } = getParentList();
-          rootMenuEmitter.emit('on-update-opened', {
-            opend: false,
-            parent: instance?.parent,
-            uidList: uidList,
-          });
-        } else {
-          rootMenuEmitter.emit('open-name-change', {
-            name: props.name,
-            opened: !opened,
-          });
-        }
-        state.opened = !opened;
-      }
-
-      function handleMouseenter() {
-        const disabled = props.disabled;
-        if (disabled) return;
-
-        subMenuEmitter.emit('submenu:mouse-enter-child');
-
-        const index = parentGetOpenNames().findIndex((item) => item === props.name);
-
-        sliceIndex(index);
-
-        const isRoot = level === 0 && parentGetOpenNames().length === 2;
-        if (isRoot) {
+    subMenuEmitter.emit('submenu:mouse-leave-child');
+    if (data.timeout) {
+      clearTimeout(data.timeout!);
+      data.timeout = setTimeout(() => {
+        if (isRemoveAllPopup.value) {
           parentRemoveAll();
+        } else if (!data.mouseInChild) {
+          parentRemoveSubmenu(props.name);
         }
-        data.isChild = parentGetOpenNames().includes(props.name);
-        clearTimeout(data.timeout!);
-        data.timeout = setTimeout(() => {
-          parentAddSubmenu(props.name);
-        }, DELAY);
+      }, DELAY);
+    }
+    if (deepDispatch) {
+      if (getParentSubMenu.value) {
+        parentHandleMouseleave?.(true);
       }
+    }
+  }
 
-      function handleMouseleave(deepDispatch = false) {
-        const parentName = getParentMenu.value?.props.name;
-        if (!parentName) {
-          isRemoveAllPopup.value = true;
-        }
+  onBeforeMount(() => {
+    subMenuEmitter.on('submenu:mouse-enter-child', () => {
+      data.mouseInChild = true;
+      isRemoveAllPopup.value = false;
+      clearTimeout(data.timeout!);
+    });
+    subMenuEmitter.on('submenu:mouse-leave-child', () => {
+      if (data.isChild) return;
+      data.mouseInChild = false;
+      clearTimeout(data.timeout!);
+    });
 
-        if (parentGetOpenNames().slice(-1)[0] === props.name) {
-          data.isChild = false;
+    rootMenuEmitter.on(
+      'on-update-opened',
+      (data: boolean | (string | number)[] | Recordable<any>) => {
+        if (unref(getCollapse)) return;
+        if (isBoolean(data)) {
+          state.opened = data;
+          return;
         }
-
-        subMenuEmitter.emit('submenu:mouse-leave-child');
-        if (data.timeout) {
-          clearTimeout(data.timeout!);
-          data.timeout = setTimeout(() => {
-            if (isRemoveAllPopup.value) {
-              parentRemoveAll();
-            } else if (!data.mouseInChild) {
-              parentRemoveSubmenu(props.name);
-            }
-          }, DELAY);
-        }
-        if (deepDispatch) {
-          if (getParentSubMenu.value) {
-            parentHandleMouseleave?.(true);
+        if (isObject(data) && rootProps.accordion) {
+          const { opend, parent, uidList } = data as Recordable<any>;
+          if (parent === instance?.parent) {
+            state.opened = opend;
+          } else if (!uidList.includes(instance?.uid)) {
+            state.opened = false;
           }
+          return;
         }
+
+        if (props.name && Array.isArray(data)) {
+          state.opened = (data as (string | number)[]).includes(props.name);
+        }
+      },
+    );
+
+    rootMenuEmitter.on('on-update-active-name:submenu', (data: number[]) => {
+      if (instance?.uid) {
+        state.active = data.includes(instance?.uid);
       }
+    });
+  });
 
-      onBeforeMount(() => {
-        subMenuEmitter.on('submenu:mouse-enter-child', () => {
-          data.mouseInChild = true;
-          isRemoveAllPopup.value = false;
-          clearTimeout(data.timeout!);
-        });
-        subMenuEmitter.on('submenu:mouse-leave-child', () => {
-          if (data.isChild) return;
-          data.mouseInChild = false;
-          clearTimeout(data.timeout!);
-        });
+  function handleVisibleChange(visible: boolean) {
+    state.opened = visible;
+  }
 
-        rootMenuEmitter.on(
-          'on-update-opened',
-          (data: boolean | (string | number)[] | Recordable<any>) => {
-            if (unref(getCollapse)) return;
-            if (isBoolean(data)) {
-              state.opened = data;
-              return;
-            }
-            if (isObject(data) && rootProps.accordion) {
-              const { opend, parent, uidList } = data as Recordable<any>;
-              if (parent === instance?.parent) {
-                state.opened = opend;
-              } else if (!uidList.includes(instance?.uid)) {
-                state.opened = false;
-              }
-              return;
-            }
-
-            if (props.name && Array.isArray(data)) {
-              state.opened = (data as (string | number)[]).includes(props.name);
-            }
-          },
-        );
-
-        rootMenuEmitter.on('on-update-active-name:submenu', (data: number[]) => {
-          if (instance?.uid) {
-            state.active = data.includes(instance?.uid);
-          }
-        });
-      });
-
-      function handleVisibleChange(visible: boolean) {
-        state.opened = visible;
-      }
-
-      // provide
-      provide<SubMenuProvider>(`subMenu:${instance?.uid}`, {
-        addSubMenu: parentAddSubmenu,
-        removeSubMenu: parentRemoveSubmenu,
-        getOpenNames: parentGetOpenNames,
-        removeAll: parentRemoveAll,
-        isRemoveAllPopup,
-        sliceIndex,
-        level: level + 1,
-        handleMouseleave,
-        props: rootProps,
-      });
-
-      return {
-        getClass,
-        prefixCls,
-        getCollapse,
-        getItemStyle,
-        handleClick,
-        handleVisibleChange,
-        getParentSubMenu,
-        getOverlayStyle,
-        getTheme,
-        getIsOpend,
-        getEvents,
-        getSubClass,
-        ...toRefs(state),
-        ...toRefs(data),
-      };
-    },
+  // provide
+  provide<SubMenuProvider>(`subMenu:${instance?.uid}`, {
+    addSubMenu: parentAddSubmenu,
+    removeSubMenu: parentRemoveSubmenu,
+    getOpenNames: parentGetOpenNames,
+    removeAll: parentRemoveAll,
+    isRemoveAllPopup,
+    sliceIndex,
+    level: level + 1,
+    handleMouseleave,
+    props: rootProps,
   });
 </script>
diff --git a/src/components/SimpleMenu/src/components/useSimpleMenuContext.ts b/src/components/SimpleMenu/src/components/useSimpleMenuContext.ts
index 4338ba3bd..0ff5bdcc1 100644
--- a/src/components/SimpleMenu/src/components/useSimpleMenuContext.ts
+++ b/src/components/SimpleMenu/src/components/useSimpleMenuContext.ts
@@ -1,6 +1,6 @@
 import type { InjectionKey, Ref, ComponentInternalInstance } from 'vue';
-import type { Emitter } from '/@/utils/mitt';
-import { createContext, useContext } from '/@/hooks/core/useContext';
+import type { Emitter } from '@/utils/mitt';
+import { createContext, useContext } from '@/hooks/core/useContext';
 
 export type MenuEmitterEvents = {
   'on-update-opened':
diff --git a/src/components/SimpleMenu/src/useOpenKeys.ts b/src/components/SimpleMenu/src/useOpenKeys.ts
index 1028f9744..63c8dd855 100644
--- a/src/components/SimpleMenu/src/useOpenKeys.ts
+++ b/src/components/SimpleMenu/src/useOpenKeys.ts
@@ -1,8 +1,8 @@
-import type { Menu as MenuType } from '/@/router/types';
+import type { Menu as MenuType } from '@/router/types';
 import type { MenuState } from './types';
 import { computed, Ref, toRaw, unref } from 'vue';
 import { uniq } from 'lodash-es';
-import { getAllParentPath } from '/@/router/helper/menuHelper';
+import { getAllParentPath } from '@/router/helper/menuHelper';
 import { useTimeoutFn } from '@vben/hooks';
 import { useDebounceFn } from '@vueuse/core';
 
diff --git a/src/components/StrengthMeter/index.ts b/src/components/StrengthMeter/index.ts
index 9763afab2..d7049b3e6 100644
--- a/src/components/StrengthMeter/index.ts
+++ b/src/components/StrengthMeter/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 import strengthMeter from './src/StrengthMeter.vue';
 
 export const StrengthMeter = withInstall(strengthMeter);
diff --git a/src/components/StrengthMeter/src/StrengthMeter.vue b/src/components/StrengthMeter/src/StrengthMeter.vue
index 9341bbcc1..2db11e04d 100644
--- a/src/components/StrengthMeter/src/StrengthMeter.vue
+++ b/src/components/StrengthMeter/src/StrengthMeter.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="prefixCls" class="relative">
-    <InputPassword
+    <Input.Password
       v-if="showInput"
       v-bind="$attrs"
       allowClear
@@ -11,66 +11,57 @@
       <template #[item]="data" v-for="item in Object.keys($slots)">
         <slot :name="item" v-bind="data || {}"></slot>
       </template>
-    </InputPassword>
+    </Input.Password>
     <div :class="`${prefixCls}-bar`">
       <div :class="`${prefixCls}-bar--fill`" :data-score="getPasswordStrength"></div>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, computed, ref, watch, unref, watchEffect } from 'vue';
+<script lang="ts" setup>
+  import { computed, ref, watch, unref, watchEffect } from 'vue';
   import { Input } from 'ant-design-vue';
   import { zxcvbn } from '@zxcvbn-ts/core';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { propTypes } from '/@/utils/propTypes';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { propTypes } from '@/utils/propTypes';
 
-  export default defineComponent({
-    name: 'StrengthMeter',
-    components: { InputPassword: Input.Password },
-    props: {
-      value: propTypes.string,
-      showInput: propTypes.bool.def(true),
-      disabled: propTypes.bool,
-    },
-    emits: ['score-change', 'change'],
-    setup(props, { emit }) {
-      const innerValueRef = ref('');
-      const { prefixCls } = useDesign('strength-meter');
+  defineOptions({ name: 'StrengthMeter' });
 
-      const getPasswordStrength = computed(() => {
-        const { disabled } = props;
-        if (disabled) return -1;
-        const innerValue = unref(innerValueRef);
-        const score = innerValue ? zxcvbn(unref(innerValueRef)).score : -1;
-        emit('score-change', score);
-        return score;
-      });
-
-      function handleChange(e) {
-        emit('change', e.target.value);
-        innerValueRef.value = e.target.value;
-      }
-
-      watchEffect(() => {
-        innerValueRef.value = props.value || '';
-      });
-
-      watch(
-        () => unref(innerValueRef),
-        (val) => {
-          emit('change', val);
-        },
-      );
-
-      return {
-        getPasswordStrength,
-        handleChange,
-        prefixCls,
-        innerValueRef,
-      };
-    },
+  const props = defineProps({
+    value: propTypes.string,
+    showInput: propTypes.bool.def(true),
+    disabled: propTypes.bool,
   });
+
+  const emit = defineEmits(['score-change', 'change']);
+
+  const innerValueRef = ref('');
+  const { prefixCls } = useDesign('strength-meter');
+
+  const getPasswordStrength = computed(() => {
+    const { disabled } = props;
+    if (disabled) return -1;
+    const innerValue = unref(innerValueRef);
+    const score = innerValue ? zxcvbn(unref(innerValueRef)).score : -1;
+    emit('score-change', score);
+    return score;
+  });
+
+  function handleChange(e) {
+    emit('change', e.target.value);
+    innerValueRef.value = e.target.value;
+  }
+
+  watchEffect(() => {
+    innerValueRef.value = props.value || '';
+  });
+
+  watch(
+    () => unref(innerValueRef),
+    (val) => {
+      emit('change', val);
+    },
+  );
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-strength-meter';
@@ -109,7 +100,9 @@
         position: absolute;
         width: 0;
         height: inherit;
-        transition: width 0.5s ease-in-out, background 0.25s;
+        transition:
+          width 0.5s ease-in-out,
+          background 0.25s;
         border-radius: inherit;
         background-color: transparent;
 
diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts
index 1ec9568bf..37c9d5e73 100644
--- a/src/components/Table/index.ts
+++ b/src/components/Table/index.ts
@@ -7,5 +7,5 @@ export * from './src/types/table';
 export * from './src/types/pagination';
 export * from './src/types/tableAction';
 export { useTable } from './src/hooks/useTable';
-export type { FormSchema, FormProps } from '/@/components/Form/src/types/form';
+export type { FormSchema, FormProps } from '@/components/Form/src/types/form';
 export type { EditRecordRow } from './src/components/editable';
diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
index 41136007a..428dd6078 100644
--- a/src/components/Table/src/BasicTable.vue
+++ b/src/components/Table/src/BasicTable.vue
@@ -41,21 +41,19 @@
     </Table>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type {
     BasicTableProps,
     TableActionType,
     SizeType,
     ColumnChangeParam,
   } from './types/table';
-
-  import { defineComponent, ref, computed, unref, toRaw, inject, watchEffect } from 'vue';
+  import { ref, computed, unref, toRaw, inject, watchEffect, useAttrs, useSlots } from 'vue';
   import { Table } from 'ant-design-vue';
-  import { BasicForm, useForm } from '/@/components/Form/index';
-  import { PageWrapperFixedHeightKey } from '/@/enums/pageEnum';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { PageWrapperFixedHeightKey } from '@/enums/pageEnum';
   import HeaderCell from './components/HeaderCell.vue';
   import { InnerHandlers } from './types/table';
-
   import { usePagination } from './hooks/usePagination';
   import { useColumns } from './hooks/useColumns';
   import { useDataSource } from './hooks/useDataSource';
@@ -70,14 +68,17 @@
   import { createTableContext } from './hooks/useTableContext';
   import { useTableFooter } from './hooks/useTableFooter';
   import { useTableForm } from './hooks/useTableForm';
-  import { useDesign } from '/@/hooks/web/useDesign';
-
+  import { useDesign } from '@/hooks/web/useDesign';
   import { omit } from 'lodash-es';
   import { basicProps } from './props';
-  import { isFunction } from '/@/utils/is';
-  import { warn } from '/@/utils/log';
+  import { isFunction } from '@/utils/is';
+  import { warn } from '@/utils/log';
 
-  const events = [
+  defineOptions({ name: 'BasicTable' });
+
+  const props = defineProps(basicProps);
+
+  const emit = defineEmits([
     'fetch-success',
     'fetch-error',
     'selection-change',
@@ -94,272 +95,232 @@
     'expanded-rows-change',
     'change',
     'columns-change',
-  ];
+  ]);
 
-  export default defineComponent({
-    name: 'BasicTable',
-    components: {
-      Table,
-      BasicForm,
-      HeaderCell,
-    },
-    props: basicProps,
-    emits: events,
-    setup(props, { attrs, emit, slots, expose }) {
-      const tableElRef = ref(null);
-      const tableData = ref([]);
+  const attrs = useAttrs();
+  const slots = useSlots();
 
-      const wrapRef = ref(null);
-      const formRef = ref(null);
-      const innerPropsRef = ref<Partial<BasicTableProps>>();
+  const tableElRef = ref(null);
+  const tableData = ref([]);
 
-      const { prefixCls } = useDesign('basic-table');
-      const [registerForm, formActions] = useForm();
+  const wrapRef = ref(null);
+  const formRef = ref(null);
+  const innerPropsRef = ref<Partial<BasicTableProps>>();
 
-      const getProps = computed(() => {
-        return { ...props, ...unref(innerPropsRef) } as BasicTableProps;
-      });
+  const { prefixCls } = useDesign('basic-table');
+  const [registerForm, formActions] = useForm();
 
-      const isFixedHeightPage = inject(PageWrapperFixedHeightKey, false);
-      watchEffect(() => {
-        unref(isFixedHeightPage) &&
-          props.canResize &&
-          warn(
-            "'canResize' of BasicTable may not work in PageWrapper with 'fixedHeight' (especially in hot updates)",
-          );
-      });
-
-      const { getLoading, setLoading } = useLoading(getProps);
-      const {
-        getPaginationInfo,
-        getPagination,
-        setPagination,
-        setShowPagination,
-        getShowPagination,
-      } = usePagination(getProps);
-
-      const {
-        getRowSelection,
-        getRowSelectionRef,
-        getSelectRows,
-        setSelectedRows,
-        clearSelectedRowKeys,
-        getSelectRowKeys,
-        deleteSelectRowByKey,
-        setSelectedRowKeys,
-      } = useRowSelection(getProps, tableData, emit);
-
-      const {
-        handleTableChange: onTableChange,
-        getDataSourceRef,
-        getDataSource,
-        getRawDataSource,
-        setTableData,
-        updateTableDataRecord,
-        deleteTableDataRecord,
-        insertTableDataRecord,
-        findTableDataRecord,
-        fetch,
-        getRowKey,
-        reload,
-        getAutoCreateKey,
-        updateTableData,
-      } = useDataSource(
-        getProps,
-        {
-          tableData,
-          getPaginationInfo,
-          setLoading,
-          setPagination,
-          getFieldsValue: formActions.getFieldsValue,
-          clearSelectedRowKeys,
-        },
-        emit,
-      );
-
-      function handleTableChange(pagination: any, filters: any, sorter: any, extra: any) {
-        onTableChange(pagination, filters, sorter);
-        emit('change', pagination, filters, sorter);
-        // 解决通过useTable注册onChange时不起作用的问题
-        const { onChange } = unref(getProps);
-        onChange && isFunction(onChange) && onChange(pagination, filters, sorter, extra);
-      }
-
-      const {
-        getViewColumns,
-        getColumns,
-        setCacheColumnsByField,
-        setCacheColumns,
-        setColumnWidth,
-        setColumns,
-        getColumnsRef,
-        getCacheColumns,
-      } = useColumns(getProps, getPaginationInfo);
-
-      const { getScrollRef, redoHeight } = useTableScroll(
-        getProps,
-        tableElRef,
-        getColumnsRef,
-        getRowSelectionRef,
-        getDataSourceRef,
-        wrapRef,
-        formRef,
-      );
-
-      const { scrollTo } = useTableScrollTo(tableElRef, getDataSourceRef);
-
-      const { customRow } = useCustomRow(getProps, {
-        setSelectedRowKeys,
-        getSelectRowKeys,
-        clearSelectedRowKeys,
-        getAutoCreateKey,
-        emit,
-      });
-
-      const { getRowClassName } = useTableStyle(getProps, prefixCls);
-
-      const { getExpandOption, expandAll, expandRows, collapseAll } = useTableExpand(
-        getProps,
-        tableData,
-        emit,
-      );
-
-      const handlers: InnerHandlers = {
-        onColumnsChange: (data: ColumnChangeParam[]) => {
-          emit('columns-change', data);
-          // support useTable
-          unref(getProps).onColumnsChange?.(data);
-        },
-      };
-
-      const { getHeaderProps } = useTableHeader(getProps, slots, handlers);
-
-      const { getFooterProps } = useTableFooter(
-        getProps,
-        getScrollRef,
-        tableElRef,
-        getDataSourceRef,
-      );
-
-      const { getFormProps, replaceFormSlotKey, getFormSlotKeys, handleSearchInfoChange } =
-        useTableForm(getProps, slots, fetch, getLoading);
-
-      const getBindValues = computed(() => {
-        const dataSource = unref(getDataSourceRef);
-        let propsData: any = {
-          ...attrs,
-          customRow,
-          ...unref(getProps),
-          ...unref(getHeaderProps),
-          scroll: unref(getScrollRef),
-          loading: unref(getLoading),
-          tableLayout: 'fixed',
-          rowSelection: unref(getRowSelectionRef),
-          rowKey: unref(getRowKey),
-          columns: toRaw(unref(getViewColumns)),
-          pagination: toRaw(unref(getPaginationInfo)),
-          dataSource,
-          footer: unref(getFooterProps),
-          ...unref(getExpandOption),
-        };
-        // if (slots.expandedRowRender) {
-        //   propsData = omit(propsData, 'scroll');
-        // }
-
-        propsData = omit(propsData, ['class', 'onChange']);
-        return propsData;
-      });
-
-      const getWrapperClass = computed(() => {
-        const values = unref(getBindValues);
-        return [
-          prefixCls,
-          attrs.class,
-          {
-            [`${prefixCls}-form-container`]: values.useSearchForm,
-            [`${prefixCls}--inset`]: values.inset,
-          },
-        ];
-      });
-
-      const getEmptyDataIsShowTable = computed(() => {
-        const { emptyDataIsShowTable, useSearchForm } = unref(getProps);
-        if (emptyDataIsShowTable || !useSearchForm) {
-          return true;
-        }
-        return !!unref(getDataSourceRef).length;
-      });
-
-      function setProps(props: Partial<BasicTableProps>) {
-        innerPropsRef.value = { ...unref(innerPropsRef), ...props };
-      }
-
-      const tableAction: TableActionType = {
-        reload,
-        getSelectRows,
-        setSelectedRows,
-        clearSelectedRowKeys,
-        getSelectRowKeys,
-        deleteSelectRowByKey,
-        setPagination,
-        setTableData,
-        updateTableDataRecord,
-        deleteTableDataRecord,
-        insertTableDataRecord,
-        findTableDataRecord,
-        redoHeight,
-        setSelectedRowKeys,
-        setColumns,
-        setLoading,
-        getDataSource,
-        getRawDataSource,
-        setProps,
-        getRowSelection,
-        getPaginationRef: getPagination,
-        getColumns,
-        getCacheColumns,
-        emit,
-        updateTableData,
-        setShowPagination,
-        getShowPagination,
-        setCacheColumnsByField,
-        expandAll,
-        expandRows,
-        collapseAll,
-        scrollTo,
-        getSize: () => {
-          return unref(getBindValues).size as SizeType;
-        },
-        setCacheColumns,
-      };
-      createTableContext({ ...tableAction, wrapRef, getBindValues });
-
-      expose(tableAction);
-
-      emit('register', tableAction, formActions);
-
-      return {
-        formRef,
-        tableElRef,
-        getBindValues,
-        getLoading,
-        registerForm,
-        handleSearchInfoChange,
-        getEmptyDataIsShowTable,
-        handleTableChange,
-        setColumnWidth,
-        getRowClassName,
-        wrapRef,
-        tableAction,
-        redoHeight,
-        getFormProps: getFormProps as any,
-        replaceFormSlotKey,
-        getFormSlotKeys,
-        getWrapperClass,
-        columns: getViewColumns,
-      };
-    },
+  const getProps = computed(() => {
+    return { ...props, ...unref(innerPropsRef) } as BasicTableProps;
   });
+
+  const isFixedHeightPage = inject(PageWrapperFixedHeightKey, false);
+  watchEffect(() => {
+    unref(isFixedHeightPage) &&
+      props.canResize &&
+      warn(
+        "'canResize' of BasicTable may not work in PageWrapper with 'fixedHeight' (especially in hot updates)",
+      );
+  });
+
+  const { getLoading, setLoading } = useLoading(getProps);
+  const { getPaginationInfo, getPagination, setPagination, setShowPagination, getShowPagination } =
+    usePagination(getProps);
+
+  const {
+    getRowSelection,
+    getRowSelectionRef,
+    getSelectRows,
+    setSelectedRows,
+    clearSelectedRowKeys,
+    getSelectRowKeys,
+    deleteSelectRowByKey,
+    setSelectedRowKeys,
+  } = useRowSelection(getProps, tableData, emit);
+
+  const {
+    handleTableChange: onTableChange,
+    getDataSourceRef,
+    getDataSource,
+    getRawDataSource,
+    setTableData,
+    updateTableDataRecord,
+    deleteTableDataRecord,
+    insertTableDataRecord,
+    findTableDataRecord,
+    fetch,
+    getRowKey,
+    reload,
+    getAutoCreateKey,
+    updateTableData,
+  } = useDataSource(
+    getProps,
+    {
+      tableData,
+      getPaginationInfo,
+      setLoading,
+      setPagination,
+      getFieldsValue: formActions.getFieldsValue,
+      clearSelectedRowKeys,
+    },
+    emit,
+  );
+
+  function handleTableChange(pagination: any, filters: any, sorter: any, extra: any) {
+    onTableChange(pagination, filters, sorter);
+    emit('change', pagination, filters, sorter);
+    // 解决通过useTable注册onChange时不起作用的问题
+    const { onChange } = unref(getProps);
+    onChange && isFunction(onChange) && onChange(pagination, filters, sorter, extra);
+  }
+
+  const {
+    getViewColumns,
+    getColumns,
+    setCacheColumnsByField,
+    setCacheColumns,
+    setColumnWidth,
+    setColumns,
+    getColumnsRef,
+    getCacheColumns,
+  } = useColumns(getProps, getPaginationInfo);
+
+  const { getScrollRef, redoHeight } = useTableScroll(
+    getProps,
+    tableElRef,
+    getColumnsRef,
+    getRowSelectionRef,
+    getDataSourceRef,
+    wrapRef,
+    formRef,
+  );
+
+  const { scrollTo } = useTableScrollTo(tableElRef, getDataSourceRef);
+
+  const { customRow } = useCustomRow(getProps, {
+    setSelectedRowKeys,
+    getSelectRowKeys,
+    clearSelectedRowKeys,
+    getAutoCreateKey,
+    emit,
+  });
+
+  const { getRowClassName } = useTableStyle(getProps, prefixCls);
+
+  const { getExpandOption, expandAll, expandRows, collapseAll } = useTableExpand(
+    getProps,
+    tableData,
+    emit,
+  );
+
+  const handlers: InnerHandlers = {
+    onColumnsChange: (data: ColumnChangeParam[]) => {
+      emit('columns-change', data);
+      // support useTable
+      unref(getProps).onColumnsChange?.(data);
+    },
+  };
+
+  const { getHeaderProps } = useTableHeader(getProps, slots, handlers);
+
+  const { getFooterProps } = useTableFooter(getProps, getScrollRef, tableElRef, getDataSourceRef);
+
+  const { getFormProps, replaceFormSlotKey, getFormSlotKeys, handleSearchInfoChange } =
+    useTableForm(getProps, slots, fetch, getLoading);
+
+  const getBindValues = computed(() => {
+    const dataSource = unref(getDataSourceRef);
+    let propsData: any = {
+      ...attrs,
+      customRow,
+      ...unref(getProps),
+      ...unref(getHeaderProps),
+      scroll: unref(getScrollRef),
+      loading: unref(getLoading),
+      tableLayout: 'fixed',
+      rowSelection: unref(getRowSelectionRef),
+      rowKey: unref(getRowKey),
+      columns: toRaw(unref(getViewColumns)),
+      pagination: toRaw(unref(getPaginationInfo)),
+      dataSource,
+      footer: unref(getFooterProps),
+      ...unref(getExpandOption),
+    };
+    // if (slots.expandedRowRender) {
+    //   propsData = omit(propsData, 'scroll');
+    // }
+
+    propsData = omit(propsData, ['class', 'onChange']);
+    return propsData;
+  });
+
+  const getWrapperClass = computed(() => {
+    const values = unref(getBindValues);
+    return [
+      prefixCls,
+      attrs.class,
+      {
+        [`${prefixCls}-form-container`]: values.useSearchForm,
+        [`${prefixCls}--inset`]: values.inset,
+      },
+    ];
+  });
+
+  const getEmptyDataIsShowTable = computed(() => {
+    const { emptyDataIsShowTable, useSearchForm } = unref(getProps);
+    if (emptyDataIsShowTable || !useSearchForm) {
+      return true;
+    }
+    return !!unref(getDataSourceRef).length;
+  });
+
+  function setProps(props: Partial<BasicTableProps>) {
+    innerPropsRef.value = { ...unref(innerPropsRef), ...props };
+  }
+
+  const tableAction: TableActionType = {
+    reload,
+    getSelectRows,
+    setSelectedRows,
+    clearSelectedRowKeys,
+    getSelectRowKeys,
+    deleteSelectRowByKey,
+    setPagination,
+    setTableData,
+    updateTableDataRecord,
+    deleteTableDataRecord,
+    insertTableDataRecord,
+    findTableDataRecord,
+    redoHeight,
+    setSelectedRowKeys,
+    setColumns,
+    setLoading,
+    getDataSource,
+    getRawDataSource,
+    setProps,
+    getRowSelection,
+    getPaginationRef: getPagination,
+    getColumns,
+    getCacheColumns,
+    emit,
+    updateTableData,
+    setShowPagination,
+    getShowPagination,
+    setCacheColumnsByField,
+    expandAll,
+    expandRows,
+    collapseAll,
+    scrollTo,
+    getSize: () => {
+      return unref(getBindValues).size as SizeType;
+    },
+    setCacheColumns,
+  };
+  createTableContext({ ...tableAction, wrapRef, getBindValues });
+
+  emit('register', tableAction, formActions);
+
+  defineExpose({ tableAction });
 </script>
 <style lang="less">
   @border-color: #cecece4d;
diff --git a/src/components/Table/src/componentMap.ts b/src/components/Table/src/componentMap.ts
index ace83f5e5..e9e9cdc17 100644
--- a/src/components/Table/src/componentMap.ts
+++ b/src/components/Table/src/componentMap.ts
@@ -11,7 +11,7 @@ import {
   Radio,
 } from 'ant-design-vue';
 import type { ComponentType } from './types/componentType';
-import { ApiSelect, ApiTreeSelect, RadioButtonGroup, ApiRadioGroup } from '/@/components/Form';
+import { ApiSelect, ApiTreeSelect, RadioButtonGroup, ApiRadioGroup } from '@/components/Form';
 
 const componentMap = new Map<ComponentType, Component>();
 
diff --git a/src/components/Table/src/components/EditTableHeaderIcon.vue b/src/components/Table/src/components/EditTableHeaderIcon.vue
index ed05c31fc..a29dc927e 100644
--- a/src/components/Table/src/components/EditTableHeaderIcon.vue
+++ b/src/components/Table/src/components/EditTableHeaderIcon.vue
@@ -5,13 +5,12 @@
     <FormOutlined />
   </span>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { FormOutlined } from '@ant-design/icons-vue';
 
-  export default defineComponent({
-    name: 'EditTableHeaderIcon',
-    components: { FormOutlined },
-    props: { title: { type: String, default: '' } },
+  defineOptions({ name: 'EditTableHeaderIcon' });
+
+  defineProps({
+    title: { type: String, default: '' },
   });
 </script>
diff --git a/src/components/Table/src/components/HeaderCell.vue b/src/components/Table/src/components/HeaderCell.vue
index 22ada922a..ffecb2b04 100644
--- a/src/components/Table/src/components/HeaderCell.vue
+++ b/src/components/Table/src/components/HeaderCell.vue
@@ -2,9 +2,9 @@
   import type { PropType } from 'vue';
   import type { BasicColumn } from '../types/table';
   import { defineComponent, computed } from 'vue';
-  import BasicHelp from '/@/components/Basic/src/BasicHelp.vue';
+  import BasicHelp from '@/components/Basic/src/BasicHelp.vue';
   import EditTableHeaderCell from './EditTableHeaderIcon.vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDesign } from '@/hooks/web/useDesign';
   import { ColumnType } from 'ant-design-vue/lib/table/interface';
 
   export default defineComponent({
diff --git a/src/components/Table/src/components/TableAction.vue b/src/components/Table/src/components/TableAction.vue
index 73bf691a9..c46e920c6 100644
--- a/src/components/Table/src/components/TableAction.vue
+++ b/src/components/Table/src/components/TableAction.vue
@@ -30,122 +30,117 @@
     </Dropdown>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, PropType, computed, toRaw, unref } from 'vue';
+<script lang="ts" setup>
+  import { PropType, computed, toRaw, unref } from 'vue';
   import { MoreOutlined } from '@ant-design/icons-vue';
   import { Divider, Tooltip, TooltipProps } from 'ant-design-vue';
   import Icon from '@/components/Icon/Icon.vue';
-  import { ActionItem, TableActionType } from '/@/components/Table';
-  import { PopConfirmButton } from '/@/components/Button';
-  import { Dropdown } from '/@/components/Dropdown';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { ActionItem, TableActionType } from '@/components/Table';
+  import { PopConfirmButton } from '@/components/Button';
+  import { Dropdown } from '@/components/Dropdown';
+  import { useDesign } from '@/hooks/web/useDesign';
   import { useTableContext } from '../hooks/useTableContext';
-  import { usePermission } from '/@/hooks/web/usePermission';
-  import { isBoolean, isFunction, isString } from '/@/utils/is';
-  import { propTypes } from '/@/utils/propTypes';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { isBoolean, isFunction, isString } from '@/utils/is';
+  import { propTypes } from '@/utils/propTypes';
   import { ACTION_COLUMN_FLAG } from '../const';
 
-  export default defineComponent({
-    name: 'TableAction',
-    components: { Icon, PopConfirmButton, Divider, Dropdown, MoreOutlined, Tooltip },
-    props: {
-      actions: {
-        type: Array as PropType<ActionItem[]>,
-        default: null,
-      },
-      dropDownActions: {
-        type: Array as PropType<ActionItem[]>,
-        default: null,
-      },
-      divider: propTypes.bool.def(true),
-      outside: propTypes.bool,
-      stopButtonPropagation: propTypes.bool.def(false),
+  defineOptions({ name: 'TableAction' });
+
+  const props = defineProps({
+    actions: {
+      type: Array as PropType<ActionItem[]>,
+      default: null,
     },
-    setup(props) {
-      const { prefixCls } = useDesign('basic-table-action');
-      let table: Partial<TableActionType> = {};
-      if (!props.outside) {
-        table = useTableContext();
-      }
+    dropDownActions: {
+      type: Array as PropType<ActionItem[]>,
+      default: null,
+    },
+    divider: propTypes.bool.def(true),
+    outside: propTypes.bool,
+    stopButtonPropagation: propTypes.bool.def(false),
+  });
 
-      const { hasPermission } = usePermission();
-      function isIfShow(action: ActionItem): boolean {
-        const ifShow = action.ifShow;
+  const { prefixCls } = useDesign('basic-table-action');
+  let table: Partial<TableActionType> = {};
+  if (!props.outside) {
+    table = useTableContext();
+  }
 
-        let isIfShow = true;
+  const { hasPermission } = usePermission();
+  function isIfShow(action: ActionItem): boolean {
+    const ifShow = action.ifShow;
 
-        if (isBoolean(ifShow)) {
-          isIfShow = ifShow;
-        }
-        if (isFunction(ifShow)) {
-          isIfShow = ifShow(action);
-        }
-        return isIfShow;
-      }
+    let isIfShow = true;
 
-      const getActions = computed(() => {
-        return (toRaw(props.actions) || [])
-          .filter((action) => {
-            return hasPermission(action.auth) && isIfShow(action);
-          })
-          .map((action) => {
-            const { popConfirm } = action;
-            return {
-              getPopupContainer: () => unref((table as any)?.wrapRef) ?? document.body,
-              type: 'link',
-              size: 'small',
-              ...action,
-              ...(popConfirm || {}),
-              onConfirm: popConfirm?.confirm,
-              onCancel: popConfirm?.cancel,
-              enable: !!popConfirm,
-            };
-          });
-      });
+    if (isBoolean(ifShow)) {
+      isIfShow = ifShow;
+    }
+    if (isFunction(ifShow)) {
+      isIfShow = ifShow(action);
+    }
+    return isIfShow;
+  }
 
-      const getDropdownList = computed((): any[] => {
-        const list = (toRaw(props.dropDownActions) || []).filter((action) => {
-          return hasPermission(action.auth) && isIfShow(action);
-        });
-        return list.map((action, index) => {
-          const { label, popConfirm } = action;
-          return {
-            ...action,
-            ...popConfirm,
-            onConfirm: popConfirm?.confirm,
-            onCancel: popConfirm?.cancel,
-            text: label,
-            divider: index < list.length - 1 ? props.divider : false,
-          };
-        });
-      });
-
-      const getAlign = computed(() => {
-        const columns = (table as TableActionType)?.getColumns?.() || [];
-        const actionColumn = columns.find((item) => item.flag === ACTION_COLUMN_FLAG);
-        return actionColumn?.align ?? 'left';
-      });
-
-      function getTooltip(data: string | TooltipProps): TooltipProps {
+  const getActions = computed(() => {
+    return (toRaw(props.actions) || [])
+      .filter((action) => {
+        return hasPermission(action.auth) && isIfShow(action);
+      })
+      .map((action) => {
+        const { popConfirm } = action;
         return {
           getPopupContainer: () => unref((table as any)?.wrapRef) ?? document.body,
-          placement: 'bottom',
-          ...(isString(data) ? { title: data } : data),
+          type: 'link',
+          size: 'small',
+          ...action,
+          ...(popConfirm || {}),
+          onConfirm: popConfirm?.confirm,
+          onCancel: popConfirm?.cancel,
+          enable: !!popConfirm,
         };
-      }
-
-      function onCellClick(e: MouseEvent) {
-        if (!props.stopButtonPropagation) return;
-        const path = e.composedPath() as HTMLElement[];
-        const isInButton = path.find((ele) => {
-          return ele.tagName?.toUpperCase() === 'BUTTON';
-        });
-        isInButton && e.stopPropagation();
-      }
-
-      return { prefixCls, getActions, getDropdownList, getAlign, onCellClick, getTooltip };
-    },
+      });
   });
+
+  const getDropdownList = computed((): any[] => {
+    const list = (toRaw(props.dropDownActions) || []).filter((action) => {
+      return hasPermission(action.auth) && isIfShow(action);
+    });
+    return list.map((action, index) => {
+      const { label, popConfirm } = action;
+      return {
+        ...action,
+        ...popConfirm,
+        onConfirm: popConfirm?.confirm,
+        onCancel: popConfirm?.cancel,
+        text: label,
+        divider: index < list.length - 1 ? props.divider : false,
+      };
+    });
+  });
+
+  const getAlign = computed(() => {
+    const columns = (table as TableActionType)?.getColumns?.() || [];
+    const actionColumn = columns.find((item) => item.flag === ACTION_COLUMN_FLAG);
+    return actionColumn?.align ?? 'left';
+  });
+
+  function getTooltip(data: string | TooltipProps): TooltipProps {
+    return {
+      getPopupContainer: () => unref((table as any)?.wrapRef) ?? document.body,
+      placement: 'bottom',
+      ...(isString(data) ? { title: data } : data),
+    };
+  }
+
+  function onCellClick(e: MouseEvent) {
+    if (!props.stopButtonPropagation) return;
+    const path = e.composedPath() as HTMLElement[];
+    const isInButton = path.find((ele) => {
+      return ele.tagName?.toUpperCase() === 'BUTTON';
+    });
+    isInButton && e.stopPropagation();
+  }
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-basic-table-action';
diff --git a/src/components/Table/src/components/TableFooter.vue b/src/components/Table/src/components/TableFooter.vue
index b72e5b0c3..71c10bb19 100644
--- a/src/components/Table/src/components/TableFooter.vue
+++ b/src/components/Table/src/components/TableFooter.vue
@@ -11,85 +11,81 @@
     :scroll="scroll"
   />
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { PropType } from 'vue';
-  import { defineComponent, unref, computed, toRaw } from 'vue';
+  import { unref, computed, toRaw } from 'vue';
   import { Table } from 'ant-design-vue';
   import { cloneDeep } from 'lodash-es';
-  import { isFunction } from '/@/utils/is';
+  import { isFunction } from '@/utils/is';
   import type { BasicColumn } from '../types/table';
   import { INDEX_COLUMN_FLAG } from '../const';
-  import { propTypes } from '/@/utils/propTypes';
+  import { propTypes } from '@/utils/propTypes';
   import { useTableContext } from '../hooks/useTableContext';
   import { ColumnType } from 'ant-design-vue/es/table/interface';
 
+  defineOptions({ name: 'BasicTableFooter' });
+
+  const props = defineProps({
+    summaryFunc: {
+      type: Function as PropType<Fn>,
+    },
+    summaryData: {
+      type: Array as PropType<Recordable[]>,
+    },
+    scroll: {
+      type: Object as PropType<Recordable>,
+    },
+    rowKey: propTypes.string.def('key'),
+  });
+
   const SUMMARY_ROW_KEY = '_row';
   const SUMMARY_INDEX_KEY = '_index';
-  export default defineComponent({
-    name: 'BasicTableFooter',
-    components: { Table },
-    props: {
-      summaryFunc: {
-        type: Function as PropType<Fn>,
-      },
-      summaryData: {
-        type: Array as PropType<Recordable[]>,
-      },
-      scroll: {
-        type: Object as PropType<Recordable>,
-      },
-      rowKey: propTypes.string.def('key'),
-    },
-    setup(props) {
-      const table = useTableContext();
+  const table = useTableContext();
 
-      const getDataSource = computed((): Recordable[] => {
-        const { summaryFunc, summaryData } = props;
-        if (summaryData?.length) {
-          summaryData.forEach((item, i) => (item[props.rowKey] = `${i}`));
-          return summaryData;
-        }
-        if (!isFunction(summaryFunc)) {
-          return [];
-        }
-        let dataSource = toRaw(unref(table.getDataSource()));
-        dataSource = summaryFunc(dataSource);
-        dataSource.forEach((item, i) => {
-          item[props.rowKey] = `${i}`;
-        });
-        return dataSource;
+  const getDataSource = computed((): Recordable[] => {
+    const { summaryFunc, summaryData } = props;
+    if (summaryData?.length) {
+      summaryData.forEach((item, i) => (item[props.rowKey] = `${i}`));
+      return summaryData;
+    }
+    if (!isFunction(summaryFunc)) {
+      return [];
+    }
+    let dataSource = toRaw(unref(table.getDataSource()));
+    dataSource = summaryFunc(dataSource);
+    dataSource.forEach((item, i) => {
+      item[props.rowKey] = `${i}`;
+    });
+    return dataSource;
+  });
+
+  const getColumns = computed(() => {
+    const dataSource = unref(getDataSource);
+    const columns: BasicColumn[] = cloneDeep(table.getColumns());
+    const index = columns.findIndex((item) => item.flag === INDEX_COLUMN_FLAG);
+    const hasRowSummary = dataSource.some((item) => Reflect.has(item, SUMMARY_ROW_KEY));
+    const hasIndexSummary = dataSource.some((item) => Reflect.has(item, SUMMARY_INDEX_KEY));
+
+    if (index !== -1) {
+      if (hasIndexSummary) {
+        columns[index].customRender = ({ record }) => record[SUMMARY_INDEX_KEY];
+        columns[index].ellipsis = false;
+      } else {
+        Reflect.deleteProperty(columns[index], 'customRender');
+      }
+    }
+
+    if (table.getRowSelection() && hasRowSummary) {
+      const isFixed = columns.some((col) => col.fixed === 'left');
+      columns.unshift({
+        width: 60,
+        title: 'selection',
+        key: 'selectionKey',
+        align: 'center',
+        ...(isFixed ? { fixed: 'left' } : {}),
+        customRender: ({ record }) => record[SUMMARY_ROW_KEY],
       });
-
-      const getColumns = computed(() => {
-        const dataSource = unref(getDataSource);
-        const columns: BasicColumn[] = cloneDeep(table.getColumns());
-        const index = columns.findIndex((item) => item.flag === INDEX_COLUMN_FLAG);
-        const hasRowSummary = dataSource.some((item) => Reflect.has(item, SUMMARY_ROW_KEY));
-        const hasIndexSummary = dataSource.some((item) => Reflect.has(item, SUMMARY_INDEX_KEY));
-
-        if (index !== -1) {
-          if (hasIndexSummary) {
-            columns[index].customRender = ({ record }) => record[SUMMARY_INDEX_KEY];
-            columns[index].ellipsis = false;
-          } else {
-            Reflect.deleteProperty(columns[index], 'customRender');
-          }
-        }
-
-        if (table.getRowSelection() && hasRowSummary) {
-          const isFixed = columns.some((col) => col.fixed === 'left');
-          columns.unshift({
-            width: 60,
-            title: 'selection',
-            key: 'selectionKey',
-            align: 'center',
-            ...(isFixed ? { fixed: 'left' } : {}),
-            customRender: ({ record }) => record[SUMMARY_ROW_KEY],
-          });
-        }
-        return columns as unknown as ColumnType[];
-      });
-      return { getColumns, getDataSource };
-    },
+    }
+    return columns as unknown as ColumnType[];
   });
 </script>
diff --git a/src/components/Table/src/components/TableHeader.vue b/src/components/Table/src/components/TableHeader.vue
index cfcd090bf..45d8886b5 100644
--- a/src/components/Table/src/components/TableHeader.vue
+++ b/src/components/Table/src/components/TableHeader.vue
@@ -13,7 +13,7 @@
       <div :class="`${prefixCls}__toolbar`">
         <slot name="toolbar"></slot>
         <Divider type="vertical" v-if="$slots.toolbar && showTableSetting" />
-        <TableSetting
+        <TableSettingComponent
           :setting="tableSetting"
           v-if="showTableSetting"
           @columns-change="handleColumnChange"
@@ -22,46 +22,37 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { TableSetting, ColumnChangeParam } from '../types/table';
   import type { PropType } from 'vue';
-  import { defineComponent } from 'vue';
   import { Divider } from 'ant-design-vue';
   import TableSettingComponent from './settings/index.vue';
   import TableTitle from './TableTitle.vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDesign } from '@/hooks/web/useDesign';
 
-  export default defineComponent({
-    name: 'BasicTableHeader',
-    components: {
-      Divider,
-      TableTitle,
-      TableSetting: TableSettingComponent,
+  defineOptions({ name: 'BasicTableHeader' });
+
+  defineProps({
+    title: {
+      type: [Function, String] as PropType<string | ((data) => string)>,
     },
-    props: {
-      title: {
-        type: [Function, String] as PropType<string | ((data) => string)>,
-      },
-      tableSetting: {
-        type: Object as PropType<TableSetting>,
-      },
-      showTableSetting: {
-        type: Boolean,
-      },
-      titleHelpMessage: {
-        type: [String, Array] as PropType<string | string[]>,
-        default: '',
-      },
+    tableSetting: {
+      type: Object as PropType<TableSetting>,
     },
-    emits: ['columns-change'],
-    setup(_, { emit }) {
-      const { prefixCls } = useDesign('basic-table-header');
-      function handleColumnChange(data: ColumnChangeParam[]) {
-        emit('columns-change', data);
-      }
-      return { prefixCls, handleColumnChange };
+    showTableSetting: {
+      type: Boolean,
+    },
+    titleHelpMessage: {
+      type: [String, Array] as PropType<string | string[]>,
+      default: '',
     },
   });
+
+  const emit = defineEmits(['columns-change']);
+  const { prefixCls } = useDesign('basic-table-header');
+  function handleColumnChange(data: ColumnChangeParam[]) {
+    emit('columns-change', data);
+  }
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-basic-table-header';
diff --git a/src/components/Table/src/components/TableImg.vue b/src/components/Table/src/components/TableImg.vue
index c02768c68..fdd221ec7 100644
--- a/src/components/Table/src/components/TableImg.vue
+++ b/src/components/Table/src/components/TableImg.vue
@@ -7,9 +7,9 @@
   >
     <Badge :count="!showBadge || imgList.length == 1 ? 0 : imgList.length" v-if="simpleShow">
       <div class="img-div">
-        <PreviewGroup>
+        <Image.PreviewGroup>
           <template v-for="(img, index) in imgList" :key="img">
-            <AImage
+            <Image
               :width="size"
               :style="{
                 display: index === 0 ? '' : 'none !important',
@@ -18,58 +18,53 @@
               :fallback="fallback"
             />
           </template>
-        </PreviewGroup>
+        </Image.PreviewGroup>
       </div>
     </Badge>
-    <PreviewGroup v-else>
+    <Image.PreviewGroup v-else>
       <template v-for="(img, index) in imgList" :key="img">
-        <AImage
+        <Image
           :width="size"
           :style="{ marginLeft: index === 0 ? 0 : margin + 'px' }"
           :src="srcPrefix + img"
           :fallback="fallback"
         />
       </template>
-    </PreviewGroup>
+    </Image.PreviewGroup>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { CSSProperties } from 'vue';
-  import { defineComponent, computed } from 'vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { computed } from 'vue';
+  import { useDesign } from '@/hooks/web/useDesign';
   import { Image, Badge } from 'ant-design-vue';
-  import { propTypes } from '/@/utils/propTypes';
+  import { propTypes } from '@/utils/propTypes';
 
-  export default defineComponent({
-    name: 'TableImage',
-    components: { AImage: Image, PreviewGroup: Image.PreviewGroup, Badge },
-    props: {
-      imgList: propTypes.arrayOf(propTypes.string),
-      size: propTypes.number.def(40),
-      // 是否简单显示（只显示第一张图片）
-      simpleShow: propTypes.bool,
-      // 简单模式下是否显示图片数量的badge
-      showBadge: propTypes.bool.def(true),
-      // 图片间距
-      margin: propTypes.number.def(4),
-      // src前缀，将会附加在imgList中每一项之前
-      srcPrefix: propTypes.string.def(''),
-      // fallback,加载失败显示图像占位符。
-      fallback: propTypes.string.def(
-        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==',
-      ),
-    },
-    setup(props) {
-      const getWrapStyle = computed((): CSSProperties => {
-        const { size } = props;
-        const s = `${size}px`;
-        return { height: s, width: s };
-      });
+  defineOptions({ name: 'TableImage' });
 
-      const { prefixCls } = useDesign('basic-table-img');
-      return { prefixCls, getWrapStyle };
-    },
+  const props = defineProps({
+    imgList: propTypes.arrayOf(propTypes.string),
+    size: propTypes.number.def(40),
+    // 是否简单显示（只显示第一张图片）
+    simpleShow: propTypes.bool,
+    // 简单模式下是否显示图片数量的badge
+    showBadge: propTypes.bool.def(true),
+    // 图片间距
+    margin: propTypes.number.def(4),
+    // src前缀，将会附加在imgList中每一项之前
+    srcPrefix: propTypes.string.def(''),
+    // fallback,加载失败显示图像占位符。
+    fallback: propTypes.string.def(
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==',
+    ),
   });
+  const getWrapStyle = computed((): CSSProperties => {
+    const { size } = props;
+    const s = `${size}px`;
+    return { height: s, width: s };
+  });
+
+  const { prefixCls } = useDesign('basic-table-img');
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-basic-table-img';
@@ -86,6 +81,7 @@
 
     .img-div {
       display: inline-grid;
+
       > .ant-image:nth-of-type(n + 2) {
         display: none;
       }
diff --git a/src/components/Table/src/components/TableTitle.vue b/src/components/Table/src/components/TableTitle.vue
index 0f7417baf..ea92086ad 100644
--- a/src/components/Table/src/components/TableTitle.vue
+++ b/src/components/Table/src/components/TableTitle.vue
@@ -3,43 +3,38 @@
     {{ getTitle }}
   </BasicTitle>
 </template>
-<script lang="ts">
-  import { computed, defineComponent, PropType } from 'vue';
-  import { BasicTitle } from '/@/components/Basic/index';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { isFunction } from '/@/utils/is';
+<script lang="ts" setup>
+  import { computed, PropType } from 'vue';
+  import { BasicTitle } from '@/components/Basic';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { isFunction } from '@/utils/is';
 
-  export default defineComponent({
-    name: 'BasicTableTitle',
-    components: { BasicTitle },
-    props: {
-      title: {
-        type: [Function, String] as PropType<string | ((data) => string)>,
-      },
-      getSelectRows: {
-        type: Function as PropType<() => any[]>,
-      },
-      helpMessage: {
-        type: [String, Array] as PropType<string | string[]>,
-      },
+  defineOptions({ name: 'BasicTableTitle' });
+
+  const props = defineProps({
+    title: {
+      type: [Function, String] as PropType<string | ((data) => string)>,
     },
-    setup(props) {
-      const { prefixCls } = useDesign('basic-table-title');
+    getSelectRows: {
+      type: Function as PropType<() => any[]>,
+    },
+    helpMessage: {
+      type: [String, Array] as PropType<string | string[]>,
+    },
+  });
 
-      const getTitle = computed(() => {
-        const { title, getSelectRows = () => {} } = props;
-        let tit = title;
+  const { prefixCls } = useDesign('basic-table-title');
 
-        if (isFunction(title)) {
-          tit = title({
-            selectRows: getSelectRows(),
-          });
-        }
-        return tit;
+  const getTitle = computed(() => {
+    const { title, getSelectRows = () => {} } = props;
+    let tit = title;
+
+    if (isFunction(title)) {
+      tit = title({
+        selectRows: getSelectRows(),
       });
-
-      return { getTitle, prefixCls };
-    },
+    }
+    return tit;
   });
 </script>
 <style lang="less">
diff --git a/src/components/Table/src/components/editable/CellComponent.ts b/src/components/Table/src/components/editable/CellComponent.ts
index 934b479e4..abcebcf80 100644
--- a/src/components/Table/src/components/editable/CellComponent.ts
+++ b/src/components/Table/src/components/editable/CellComponent.ts
@@ -1,6 +1,6 @@
 import type { defineComponent } from 'vue';
 import type { ComponentType } from '../../types/componentType';
-import { componentMap } from '/@/components/Table/src/componentMap';
+import { componentMap } from '@/components/Table/src/componentMap';
 
 import { Popover } from 'ant-design-vue';
 import { h } from 'vue';
diff --git a/src/components/Table/src/components/editable/EditableCell.vue b/src/components/Table/src/components/editable/EditableCell.vue
index bf7936abe..72bca4b6d 100644
--- a/src/components/Table/src/components/editable/EditableCell.vue
+++ b/src/components/Table/src/components/editable/EditableCell.vue
@@ -5,16 +5,16 @@
   import { CheckOutlined, CloseOutlined, FormOutlined } from '@ant-design/icons-vue';
   import { CellComponent } from './CellComponent';
 
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDesign } from '@/hooks/web/useDesign';
   import { useTableContext } from '../../hooks/useTableContext';
 
-  import clickOutside from '/@/directives/clickOutside';
+  import clickOutside from '@/directives/clickOutside';
 
-  import { propTypes } from '/@/utils/propTypes';
-  import { isArray, isBoolean, isFunction, isNumber, isString } from '/@/utils/is';
+  import { propTypes } from '@/utils/propTypes';
+  import { isArray, isBoolean, isFunction, isNumber, isString } from '@/utils/is';
   import { createPlaceholderMessage } from './helper';
   import { pick, set } from 'lodash-es';
-  import { treeToList } from '/@/utils/helper/treeHelper';
+  import { treeToList } from '@/utils/helper/treeHelper';
   import { Spin } from 'ant-design-vue';
 
   export default defineComponent({
diff --git a/src/components/Table/src/components/editable/helper.ts b/src/components/Table/src/components/editable/helper.ts
index 9c600c9f1..b5d66a8f2 100644
--- a/src/components/Table/src/components/editable/helper.ts
+++ b/src/components/Table/src/components/editable/helper.ts
@@ -1,5 +1,5 @@
 import { ComponentType } from '../../types/componentType';
-import { useI18n } from '/@/hooks/web/useI18n';
+import { useI18n } from '@/hooks/web/useI18n';
 
 const { t } = useI18n();
 
diff --git a/src/components/Table/src/components/editable/index.ts b/src/components/Table/src/components/editable/index.ts
index 548c9e4b1..75b4ebf7a 100644
--- a/src/components/Table/src/components/editable/index.ts
+++ b/src/components/Table/src/components/editable/index.ts
@@ -1,9 +1,9 @@
-import type { BasicColumn } from '/@/components/Table/src/types/table';
+import type { BasicColumn } from '@/components/Table/src/types/table';
 
 import { h, Ref, toRaw } from 'vue';
 
 import EditableCell from './EditableCell.vue';
-import { isArray } from '/@/utils/is';
+import { isArray } from '@/utils/is';
 
 interface Params {
   text: string;
diff --git a/src/components/Table/src/components/settings/ColumnSetting.vue b/src/components/Table/src/components/settings/ColumnSetting.vue
index 5a8999c81..b767c0bad 100644
--- a/src/components/Table/src/components/settings/ColumnSetting.vue
+++ b/src/components/Table/src/components/settings/ColumnSetting.vue
@@ -7,14 +7,14 @@
       placement="bottomLeft"
       trigger="click"
       @open-change="handleVisibleChange"
-      :overlayClassName="`${prefixCls}__cloumn-list`"
+      :overlayClassName="`${prefixCls}__column-list`"
       :getPopupContainer="getPopupContainer"
     >
       <template #title>
         <div :class="`${prefixCls}__popover-title`">
           <Checkbox
             :indeterminate="indeterminate"
-            v-model:checked="checkAll"
+            v-model:checked="state.checkAll"
             @change="onCheckAllChange"
           >
             {{ t('component.table.settingColumnShow') }}
@@ -40,7 +40,7 @@
 
       <template #content>
         <ScrollContainer>
-          <CheckboxGroup v-model:value="checkedList" @change="onChange" ref="columnListRef">
+          <Checkbox.Group v-model:value="state.checkedList" @change="onChange" ref="columnListRef">
             <template v-for="item in plainOptions" :key="item.value">
               <div :class="`${prefixCls}__check-item`" v-if="!('ifShow' in item && !item.ifShow)">
                 <DragOutlined class="table-column-drag-icon" />
@@ -62,7 +62,7 @@
                       `${prefixCls}__fixed-left`,
                       {
                         active: item.fixed === 'left',
-                        disabled: !checkedList.includes(item.value),
+                        disabled: !state.checkedList.includes(item.value),
                       },
                     ]"
                     @click="handleColumnFixed(item, 'left')"
@@ -83,7 +83,7 @@
                       `${prefixCls}__fixed-right`,
                       {
                         active: item.fixed === 'right',
-                        disabled: !checkedList.includes(item.value),
+                        disabled: !state.checkedList.includes(item.value),
                       },
                     ]"
                     @click="handleColumnFixed(item, 'right')"
@@ -91,25 +91,16 @@
                 </Tooltip>
               </div>
             </template>
-          </CheckboxGroup>
+          </Checkbox.Group>
         </ScrollContainer>
       </template>
       <SettingOutlined />
     </Popover>
   </Tooltip>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { BasicColumn, BasicTableProps, ColumnChangeParam } from '../../types/table';
-  import {
-    defineComponent,
-    ref,
-    reactive,
-    toRefs,
-    watchEffect,
-    nextTick,
-    unref,
-    computed,
-  } from 'vue';
+  import { ref, reactive, watchEffect, nextTick, unref, computed, useAttrs } from 'vue';
   import { Tooltip, Popover, Checkbox, Divider } from 'ant-design-vue';
   import type {
     CheckboxChangeEvent,
@@ -117,13 +108,13 @@
   } from 'ant-design-vue/lib/checkbox/interface';
   import { SettingOutlined, DragOutlined } from '@ant-design/icons-vue';
   import Icon from '@/components/Icon/Icon.vue';
-  import { ScrollContainer } from '/@/components/Container';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { ScrollContainer } from '@/components/Container';
+  import { useI18n } from '@/hooks/web/useI18n';
   import { useTableContext } from '../../hooks/useTableContext';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  // import { useSortable } from '/@/hooks/web/useSortable';
-  import { isFunction, isNil } from '/@/utils/is';
-  import { getPopupContainer as getParentContainer } from '/@/utils';
+  import { useDesign } from '@/hooks/web/useDesign';
+  // import { useSortable } from '@/hooks/web/useSortable';
+  import { isFunction, isNil } from '@/utils/is';
+  import { getPopupContainer as getParentContainer } from '@/utils';
   import { cloneDeep, omit } from 'lodash-es';
   import Sortablejs from 'sortablejs';
   import type Sortable from 'sortablejs';
@@ -141,304 +132,269 @@
     fixed?: boolean | 'left' | 'right';
   }
 
-  export default defineComponent({
-    name: 'ColumnSetting',
-    components: {
-      SettingOutlined,
-      Popover,
-      Tooltip,
-      Checkbox,
-      CheckboxGroup: Checkbox.Group,
-      DragOutlined,
-      ScrollContainer,
-      Divider,
-      Icon,
-    },
-    emits: ['columns-change'],
+  defineOptions({ name: 'ColumnSetting' });
 
-    setup(_, { emit, attrs }) {
-      const { t } = useI18n();
-      const table = useTableContext();
+  const emit = defineEmits(['columns-change']);
 
-      const defaultRowSelection = omit(table.getRowSelection(), 'selectedRowKeys');
-      let inited = false;
-      // 是否当前的setColums触发的
-      let isSetColumnsFromThis = false;
-      // 是否当前组件触发的setProps
-      let isSetPropsFromThis = false;
+  const attrs = useAttrs();
+  const { t } = useI18n();
+  const table = useTableContext();
 
-      const cachePlainOptions = ref<Options[]>([]);
-      const plainOptions = ref<Options[] | any>([]);
+  const defaultRowSelection = omit(table.getRowSelection(), 'selectedRowKeys');
+  let inited = false;
+  // 是否当前的setColumns触发的
+  let isSetColumnsFromThis = false;
+  // 是否当前组件触发的setProps
+  let isSetPropsFromThis = false;
 
-      const plainSortOptions = ref<Options[]>([]);
+  const cachePlainOptions = ref<Options[]>([]);
+  const plainOptions = ref<Options[] | any>([]);
 
-      const columnListRef = ref(null);
+  const plainSortOptions = ref<Options[]>([]);
 
-      const state = reactive<State>({
-        checkAll: true,
-        checkedList: [],
-        defaultCheckList: [],
-      });
-      /** 缓存初始化props */
-      let cacheTableProps: Partial<BasicTableProps<any>> = {};
-      const checkIndex = ref(false);
-      const checkSelect = ref(false);
+  const columnListRef = ref(null);
 
-      const { prefixCls } = useDesign('basic-column-setting');
-
-      const getValues = computed(() => {
-        return unref(table?.getBindValues) || {};
-      });
-
-      watchEffect(() => {
-        const columns = table.getColumns();
-        setTimeout(() => {
-          if (isSetColumnsFromThis) {
-            isSetColumnsFromThis = false;
-          } else if (columns.length) {
-            init();
-          }
-        }, 0);
-      });
-
-      watchEffect(() => {
-        const values = unref(getValues);
-        if (isSetPropsFromThis) {
-          isSetPropsFromThis = false;
-        } else {
-          cacheTableProps = cloneDeep(values);
-        }
-        checkIndex.value = !!values.showIndexColumn;
-        checkSelect.value = !!values.rowSelection;
-      });
-
-      function getColumns() {
-        const ret: Options[] = [];
-        table.getColumns({ ignoreIndex: true, ignoreAction: true }).forEach((item) => {
-          ret.push({
-            label: (item.title as string) || (item.customTitle as string),
-            value: (item.dataIndex || item.title) as string,
-            ...item,
-          });
-        });
-        return ret;
-      }
-
-      async function init(isReset = false) {
-        // Sortablejs存在bug，不知道在哪个步骤中会向el append了一个childNode，因此这里先清空childNode
-        // 有可能复现上述问题的操作：拖拽一个元素，快速的上下移动，最后放到最后的位置中松手
-        plainOptions.value = [];
-        const columnListEl = unref(columnListRef);
-        if (columnListEl && (columnListEl as any).$el) {
-          const el = (columnListEl as any).$el as Element;
-          Array.from(el.children).forEach((item) => el.removeChild(item));
-        }
-        await nextTick();
-        const columns = isReset ? cloneDeep(cachePlainOptions.value) : getColumns();
-
-        const checkList = table
-          .getColumns({ ignoreAction: true, ignoreIndex: true })
-          .map((item) => {
-            if (item.defaultHidden) {
-              return '';
-            }
-            return item.dataIndex || item.title;
-          })
-          .filter(Boolean) as string[];
-        plainOptions.value = columns;
-        plainSortOptions.value = columns;
-        // 更新缓存配置
-        table.setCacheColumns?.(columns);
-        !isReset && (cachePlainOptions.value = cloneDeep(columns));
-        state.defaultCheckList = checkList;
-        state.checkedList = checkList;
-        // 是否列展示全选
-        state.checkAll = checkList.length === columns.length;
-        inited = false;
-        handleVisibleChange();
-      }
-
-      // checkAll change
-      function onCheckAllChange(e: CheckboxChangeEvent) {
-        const checkList = plainSortOptions.value.map((item) => item.value);
-        plainSortOptions.value.forEach(
-          (item) => ((item as BasicColumn).defaultHidden = !e.target.checked),
-        );
-        if (e.target.checked) {
-          state.checkedList = checkList;
-          setColumns(checkList);
-        } else {
-          state.checkedList = [];
-          setColumns([]);
-        }
-      }
-
-      const indeterminate = computed(() => {
-        const len = plainOptions.value.length;
-        let checkedLen = state.checkedList.length;
-        // unref(checkIndex) && checkedLen--;
-        return checkedLen > 0 && checkedLen < len;
-      });
-
-      // Trigger when check/uncheck a column
-      function onChange(checkedList: CheckboxValueType[]) {
-        const len = plainSortOptions.value.length;
-        state.checkAll = checkedList.length === len;
-        const sortList = unref(plainSortOptions).map((item) => item.value);
-        checkedList.sort((prev, next) => {
-          return sortList.indexOf(String(prev)) - sortList.indexOf(String(next));
-        });
-        unref(plainSortOptions).forEach((item) => {
-          (item as BasicColumn).defaultHidden = !checkedList.includes(item.value);
-        });
-        setColumns(checkedList as string[]);
-      }
-
-      let sortable: Sortable;
-      let sortableOrder: string[] = [];
-      // reset columns
-      function reset() {
-        setColumns(cachePlainOptions.value);
-        init(true);
-        checkIndex.value = !!cacheTableProps.showIndexColumn;
-        checkSelect.value = !!cacheTableProps.rowSelection;
-        table.setProps({
-          showIndexColumn: checkIndex.value,
-          rowSelection: checkSelect.value ? defaultRowSelection : undefined,
-        });
-        sortable.sort(sortableOrder);
-      }
-
-      // Open the pop-up window for drag and drop initialization
-      function handleVisibleChange() {
-        if (inited) return;
-        nextTick(() => {
-          const columnListEl = unref(columnListRef);
-          if (!columnListEl) return;
-          const el = (columnListEl as any).$el;
-          if (!el) return;
-          // Drag and drop sort
-          sortable = Sortablejs.create(unref(el), {
-            animation: 500,
-            delay: 400,
-            delayOnTouchOnly: true,
-            handle: '.table-column-drag-icon ',
-            onEnd: (evt) => {
-              const { oldIndex, newIndex } = evt;
-              if (isNil(oldIndex) || isNil(newIndex) || oldIndex === newIndex) {
-                return;
-              }
-              // Sort column
-              const columns = cloneDeep(plainSortOptions.value);
-
-              if (oldIndex > newIndex) {
-                columns.splice(newIndex, 0, columns[oldIndex]);
-                columns.splice(oldIndex + 1, 1);
-              } else {
-                columns.splice(newIndex + 1, 0, columns[oldIndex]);
-                columns.splice(oldIndex, 1);
-              }
-
-              plainSortOptions.value = columns;
-              setColumns(columns.filter((item) => state.checkedList.includes(item.value)));
-            },
-          });
-          // 记录原始order 序列
-          sortableOrder = sortable.toArray();
-          inited = true;
-        });
-      }
-
-      // Control whether the serial number column is displayed
-      function handleIndexCheckChange(e: CheckboxChangeEvent) {
-        isSetPropsFromThis = true;
-        isSetColumnsFromThis = true;
-        table.setProps({
-          showIndexColumn: e.target.checked,
-        });
-      }
-
-      // Control whether the check box is displayed
-      function handleSelectCheckChange(e: CheckboxChangeEvent) {
-        isSetPropsFromThis = true;
-        isSetColumnsFromThis = true;
-        table.setProps({
-          rowSelection: e.target.checked ? defaultRowSelection : undefined,
-        });
-      }
-
-      function handleColumnFixed(item: BasicColumn, fixed?: 'left' | 'right') {
-        if (!state.checkedList.includes(item.dataIndex as string)) return;
-
-        const columns = getColumns().filter((c: BasicColumn) =>
-          state.checkedList.includes(c.dataIndex as string),
-        ) as BasicColumn[];
-        const isFixed = item.fixed === fixed ? false : fixed;
-        const index = columns.findIndex((col) => col.dataIndex === item.dataIndex);
-        if (index !== -1) {
-          columns[index].fixed = isFixed;
-        }
-        item.fixed = isFixed;
-
-        if (isFixed && !item.width) {
-          item.width = 100;
-        }
-        updateSortOption(item);
-        table.setCacheColumnsByField?.(item.dataIndex as string, { fixed: isFixed });
-        setColumns(columns);
-      }
-
-      function setColumns(columns: BasicColumn[] | string[]) {
-        isSetPropsFromThis = true;
-        isSetColumnsFromThis = true;
-        table.setColumns(columns);
-        const data: ColumnChangeParam[] = unref(plainSortOptions).map((col) => {
-          const visible =
-            columns.findIndex(
-              (c: BasicColumn | string) =>
-                c === col.value || (typeof c !== 'string' && c.dataIndex === col.value),
-            ) !== -1;
-          return { dataIndex: col.value, fixed: col.fixed, visible };
-        });
-
-        emit('columns-change', data);
-      }
-
-      function getPopupContainer() {
-        return isFunction(attrs.getPopupContainer)
-          ? attrs.getPopupContainer()
-          : getParentContainer();
-      }
-
-      function updateSortOption(column: BasicColumn) {
-        plainSortOptions.value.forEach((item) => {
-          if (item.value === column.dataIndex) {
-            Object.assign(item, column);
-          }
-        });
-      }
-
-      return {
-        t,
-        ...toRefs(state),
-        indeterminate,
-        onCheckAllChange,
-        onChange,
-        plainOptions,
-        reset,
-        prefixCls,
-        columnListRef,
-        handleVisibleChange,
-        checkIndex,
-        checkSelect,
-        handleIndexCheckChange,
-        handleSelectCheckChange,
-        defaultRowSelection,
-        handleColumnFixed,
-        getPopupContainer,
-      };
-    },
+  const state = reactive<State>({
+    checkAll: true,
+    checkedList: [],
+    defaultCheckList: [],
   });
+  /** 缓存初始化props */
+  let cacheTableProps: Partial<BasicTableProps<any>> = {};
+  const checkIndex = ref(false);
+  const checkSelect = ref(false);
+
+  const { prefixCls } = useDesign('basic-column-setting');
+
+  const getValues = computed(() => {
+    return unref(table?.getBindValues) || {};
+  });
+
+  watchEffect(() => {
+    const columns = table.getColumns();
+    setTimeout(() => {
+      if (isSetColumnsFromThis) {
+        isSetColumnsFromThis = false;
+      } else if (columns.length) {
+        init();
+      }
+    }, 0);
+  });
+
+  watchEffect(() => {
+    const values = unref(getValues);
+    if (isSetPropsFromThis) {
+      isSetPropsFromThis = false;
+    } else {
+      cacheTableProps = cloneDeep(values);
+    }
+    checkIndex.value = !!values.showIndexColumn;
+    checkSelect.value = !!values.rowSelection;
+  });
+
+  function getColumns() {
+    const ret: Options[] = [];
+    table.getColumns({ ignoreIndex: true, ignoreAction: true }).forEach((item) => {
+      ret.push({
+        label: (item.title as string) || (item.customTitle as string),
+        value: (item.dataIndex || item.title) as string,
+        ...item,
+      });
+    });
+    return ret;
+  }
+
+  async function init(isReset = false) {
+    // Sortablejs存在bug，不知道在哪个步骤中会向el append了一个childNode，因此这里先清空childNode
+    // 有可能复现上述问题的操作：拖拽一个元素，快速的上下移动，最后放到最后的位置中松手
+    plainOptions.value = [];
+    const columnListEl = unref(columnListRef);
+    if (columnListEl && (columnListEl as any).$el) {
+      const el = (columnListEl as any).$el as Element;
+      Array.from(el.children).forEach((item) => el.removeChild(item));
+    }
+    await nextTick();
+    const columns = isReset ? cloneDeep(cachePlainOptions.value) : getColumns();
+
+    const checkList = table
+      .getColumns({ ignoreAction: true, ignoreIndex: true })
+      .map((item) => {
+        if (item.defaultHidden) {
+          return '';
+        }
+        return item.dataIndex || item.title;
+      })
+      .filter(Boolean) as string[];
+    plainOptions.value = columns;
+    plainSortOptions.value = columns;
+    // 更新缓存配置
+    table.setCacheColumns?.(columns);
+    !isReset && (cachePlainOptions.value = cloneDeep(columns));
+    state.defaultCheckList = checkList;
+    state.checkedList = checkList;
+    // 是否列展示全选
+    state.checkAll = checkList.length === columns.length;
+    inited = false;
+    handleVisibleChange();
+  }
+
+  // checkAll change
+  function onCheckAllChange(e: CheckboxChangeEvent) {
+    const checkList = plainSortOptions.value.map((item) => item.value);
+    plainSortOptions.value.forEach(
+      (item) => ((item as BasicColumn).defaultHidden = !e.target.checked),
+    );
+    if (e.target.checked) {
+      state.checkedList = checkList;
+      setColumns(checkList);
+    } else {
+      state.checkedList = [];
+      setColumns([]);
+    }
+  }
+
+  const indeterminate = computed(() => {
+    const len = plainOptions.value.length;
+    let checkedLen = state.checkedList.length;
+    // unref(checkIndex) && checkedLen--;
+    return checkedLen > 0 && checkedLen < len;
+  });
+
+  // Trigger when check/uncheck a column
+  function onChange(checkedList: CheckboxValueType[]) {
+    const len = plainSortOptions.value.length;
+    state.checkAll = checkedList.length === len;
+    const sortList = unref(plainSortOptions).map((item) => item.value);
+    checkedList.sort((prev, next) => {
+      return sortList.indexOf(String(prev)) - sortList.indexOf(String(next));
+    });
+    unref(plainSortOptions).forEach((item) => {
+      (item as BasicColumn).defaultHidden = !checkedList.includes(item.value);
+    });
+    setColumns(checkedList as string[]);
+  }
+
+  let sortable: Sortable;
+  let sortableOrder: string[] = [];
+  // reset columns
+  function reset() {
+    setColumns(cachePlainOptions.value);
+    init(true);
+    checkIndex.value = !!cacheTableProps.showIndexColumn;
+    checkSelect.value = !!cacheTableProps.rowSelection;
+    table.setProps({
+      showIndexColumn: checkIndex.value,
+      rowSelection: checkSelect.value ? defaultRowSelection : undefined,
+    });
+    sortable.sort(sortableOrder);
+  }
+
+  // Open the pop-up window for drag and drop initialization
+  function handleVisibleChange() {
+    if (inited) return;
+    nextTick(() => {
+      const columnListEl = unref(columnListRef);
+      if (!columnListEl) return;
+      const el = (columnListEl as any).$el;
+      if (!el) return;
+      // Drag and drop sort
+      sortable = Sortablejs.create(unref(el), {
+        animation: 500,
+        delay: 400,
+        delayOnTouchOnly: true,
+        handle: '.table-column-drag-icon ',
+        onEnd: (evt) => {
+          const { oldIndex, newIndex } = evt;
+          if (isNil(oldIndex) || isNil(newIndex) || oldIndex === newIndex) {
+            return;
+          }
+          // Sort column
+          const columns = cloneDeep(plainSortOptions.value);
+
+          if (oldIndex > newIndex) {
+            columns.splice(newIndex, 0, columns[oldIndex]);
+            columns.splice(oldIndex + 1, 1);
+          } else {
+            columns.splice(newIndex + 1, 0, columns[oldIndex]);
+            columns.splice(oldIndex, 1);
+          }
+
+          plainSortOptions.value = columns;
+          setColumns(columns.filter((item) => state.checkedList.includes(item.value)));
+        },
+      });
+      // 记录原始order 序列
+      sortableOrder = sortable.toArray();
+      inited = true;
+    });
+  }
+
+  // Control whether the serial number column is displayed
+  function handleIndexCheckChange(e: CheckboxChangeEvent) {
+    isSetPropsFromThis = true;
+    isSetColumnsFromThis = true;
+    table.setProps({
+      showIndexColumn: e.target.checked,
+    });
+  }
+
+  // Control whether the check box is displayed
+  function handleSelectCheckChange(e: CheckboxChangeEvent) {
+    isSetPropsFromThis = true;
+    isSetColumnsFromThis = true;
+    table.setProps({
+      rowSelection: e.target.checked ? defaultRowSelection : undefined,
+    });
+  }
+
+  function handleColumnFixed(item: BasicColumn, fixed?: 'left' | 'right') {
+    if (!state.checkedList.includes(item.dataIndex as string)) return;
+
+    const columns = getColumns().filter((c: BasicColumn) =>
+      state.checkedList.includes(c.dataIndex as string),
+    ) as BasicColumn[];
+    const isFixed = item.fixed === fixed ? false : fixed;
+    const index = columns.findIndex((col) => col.dataIndex === item.dataIndex);
+    if (index !== -1) {
+      columns[index].fixed = isFixed;
+    }
+    item.fixed = isFixed;
+
+    if (isFixed && !item.width) {
+      item.width = 100;
+    }
+    updateSortOption(item);
+    table.setCacheColumnsByField?.(item.dataIndex as string, { fixed: isFixed });
+    setColumns(columns);
+  }
+
+  function setColumns(columns: BasicColumn[] | string[]) {
+    isSetPropsFromThis = true;
+    isSetColumnsFromThis = true;
+    table.setColumns(columns);
+    const data: ColumnChangeParam[] = unref(plainSortOptions).map((col) => {
+      const visible =
+        columns.findIndex(
+          (c: BasicColumn | string) =>
+            c === col.value || (typeof c !== 'string' && c.dataIndex === col.value),
+        ) !== -1;
+      return { dataIndex: col.value, fixed: col.fixed, visible };
+    });
+
+    emit('columns-change', data);
+  }
+
+  function getPopupContainer() {
+    return isFunction(attrs.getPopupContainer) ? attrs.getPopupContainer() : getParentContainer();
+  }
+
+  function updateSortOption(column: BasicColumn) {
+    plainSortOptions.value.forEach((item) => {
+      if (item.value === column.dataIndex) {
+        Object.assign(item, column);
+      }
+    });
+  }
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-basic-column-setting';
@@ -491,7 +447,7 @@
       transform: rotate(180deg);
     }
 
-    &__cloumn-list {
+    &__column-list {
       svg {
         width: 1em !important;
         height: 1em !important;
diff --git a/src/components/Table/src/components/settings/FullScreenSetting.vue b/src/components/Table/src/components/settings/FullScreenSetting.vue
index af07f84cb..feb9b5c71 100644
--- a/src/components/Table/src/components/settings/FullScreenSetting.vue
+++ b/src/components/Table/src/components/settings/FullScreenSetting.vue
@@ -7,32 +7,16 @@
     <FullscreenExitOutlined @click="toggle" v-else />
   </Tooltip>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { Tooltip } from 'ant-design-vue';
   import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue';
   import { useFullscreen } from '@vueuse/core';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
   import { useTableContext } from '../../hooks/useTableContext';
 
-  export default defineComponent({
-    name: 'FullScreenSetting',
-    components: {
-      FullscreenExitOutlined,
-      FullscreenOutlined,
-      Tooltip,
-    },
+  defineOptions({ name: 'FullScreenSetting' });
 
-    setup() {
-      const table = useTableContext();
-      const { t } = useI18n();
-      const { toggle, isFullscreen } = useFullscreen(table.wrapRef);
-
-      return {
-        toggle,
-        isFullscreen,
-        t,
-      };
-    },
-  });
+  const table = useTableContext();
+  const { t } = useI18n();
+  const { toggle, isFullscreen } = useFullscreen(table.wrapRef);
 </script>
diff --git a/src/components/Table/src/components/settings/RedoSetting.vue b/src/components/Table/src/components/settings/RedoSetting.vue
index 81829a17d..a2f1c05f1 100644
--- a/src/components/Table/src/components/settings/RedoSetting.vue
+++ b/src/components/Table/src/components/settings/RedoSetting.vue
@@ -6,28 +6,18 @@
     <RedoOutlined @click="redo" />
   </Tooltip>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { Tooltip } from 'ant-design-vue';
   import { RedoOutlined } from '@ant-design/icons-vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
   import { useTableContext } from '../../hooks/useTableContext';
 
-  export default defineComponent({
-    name: 'RedoSetting',
-    components: {
-      RedoOutlined,
-      Tooltip,
-    },
-    setup() {
-      const table = useTableContext();
-      const { t } = useI18n();
+  defineOptions({ name: 'RedoSetting' });
 
-      function redo() {
-        table.reload();
-      }
+  const table = useTableContext();
+  const { t } = useI18n();
 
-      return { redo, t };
-    },
-  });
+  function redo() {
+    table.reload();
+  }
 </script>
diff --git a/src/components/Table/src/components/settings/SizeSetting.vue b/src/components/Table/src/components/settings/SizeSetting.vue
index d443af00a..4c03f6c03 100644
--- a/src/components/Table/src/components/settings/SizeSetting.vue
+++ b/src/components/Table/src/components/settings/SizeSetting.vue
@@ -8,57 +8,40 @@
       <ColumnHeightOutlined />
       <template #overlay>
         <Menu @click="handleTitleClick" selectable v-model:selectedKeys="selectedKeysRef">
-          <MenuItem key="default">
+          <Menu.Item key="default">
             <span>{{ t('component.table.settingDensDefault') }}</span>
-          </MenuItem>
-          <MenuItem key="middle">
+          </Menu.Item>
+          <Menu.Item key="middle">
             <span>{{ t('component.table.settingDensMiddle') }}</span>
-          </MenuItem>
-          <MenuItem key="small">
+          </Menu.Item>
+          <Menu.Item key="small">
             <span>{{ t('component.table.settingDensSmall') }}</span>
-          </MenuItem>
+          </Menu.Item>
         </Menu>
       </template>
     </Dropdown>
   </Tooltip>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { SizeType } from '../../types/table';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
   import { Tooltip, Dropdown, Menu, type MenuProps } from 'ant-design-vue';
   import { ColumnHeightOutlined } from '@ant-design/icons-vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
   import { useTableContext } from '../../hooks/useTableContext';
-  import { getPopupContainer } from '/@/utils';
+  import { getPopupContainer } from '@/utils';
 
-  export default defineComponent({
-    name: 'SizeSetting',
-    components: {
-      ColumnHeightOutlined,
-      Tooltip,
-      Dropdown,
-      Menu,
-      MenuItem: Menu.Item,
-    },
-    setup() {
-      const table = useTableContext();
-      const { t } = useI18n();
+  defineOptions({ name: 'SizeSetting' });
 
-      const selectedKeysRef = ref<SizeType[]>([table.getSize()]);
+  const table = useTableContext();
+  const { t } = useI18n();
 
-      const handleTitleClick: MenuProps['onClick'] = ({ key }) => {
-        selectedKeysRef.value = [key as SizeType];
-        table.setProps({
-          size: key as SizeType,
-        });
-      };
+  const selectedKeysRef = ref<SizeType[]>([table.getSize()]);
 
-      return {
-        handleTitleClick,
-        selectedKeysRef,
-        getPopupContainer,
-        t,
-      };
-    },
-  });
+  const handleTitleClick: MenuProps['onClick'] = ({ key }) => {
+    selectedKeysRef.value = [key as SizeType];
+    table.setProps({
+      size: key as SizeType,
+    });
+  };
 </script>
diff --git a/src/components/Table/src/components/settings/index.vue b/src/components/Table/src/components/settings/index.vue
index ab03cb22b..f60e646bf 100644
--- a/src/components/Table/src/components/settings/index.vue
+++ b/src/components/Table/src/components/settings/index.vue
@@ -10,57 +10,46 @@
     <FullScreenSetting v-if="getSetting.fullScreen" :getPopupContainer="getTableContainer" />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { PropType } from 'vue';
   import type { TableSetting, ColumnChangeParam } from '../../types/table';
-  import { defineComponent, computed, unref } from 'vue';
+  import { computed, unref } from 'vue';
   import ColumnSetting from './ColumnSetting.vue';
   import SizeSetting from './SizeSetting.vue';
   import RedoSetting from './RedoSetting.vue';
   import FullScreenSetting from './FullScreenSetting.vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
   import { useTableContext } from '../../hooks/useTableContext';
 
-  export default defineComponent({
-    name: 'TableSetting',
-    components: {
-      ColumnSetting,
-      SizeSetting,
-      RedoSetting,
-      FullScreenSetting,
-    },
-    props: {
-      setting: {
-        type: Object as PropType<TableSetting>,
-        default: () => ({}),
-      },
-    },
-    emits: ['columns-change'],
-    setup(props, { emit }) {
-      const { t } = useI18n();
-      const table = useTableContext();
+  defineOptions({ name: 'TableSetting' });
 
-      const getSetting = computed((): TableSetting => {
-        return {
-          redo: true,
-          size: true,
-          setting: true,
-          fullScreen: false,
-          ...props.setting,
-        };
-      });
-
-      function handleColumnChange(data: ColumnChangeParam[]) {
-        emit('columns-change', data);
-      }
-
-      function getTableContainer() {
-        return table ? unref(table.wrapRef) : document.body;
-      }
-
-      return { getSetting, t, handleColumnChange, getTableContainer };
+  const props = defineProps({
+    setting: {
+      type: Object as PropType<TableSetting>,
+      default: () => ({}),
     },
   });
+
+  const emit = defineEmits(['columns-change']);
+
+  const table = useTableContext();
+
+  const getSetting = computed((): TableSetting => {
+    return {
+      redo: true,
+      size: true,
+      setting: true,
+      fullScreen: false,
+      ...props.setting,
+    };
+  });
+
+  function handleColumnChange(data: ColumnChangeParam[]) {
+    emit('columns-change', data);
+  }
+
+  function getTableContainer() {
+    return table ? unref(table.wrapRef) : document.body;
+  }
 </script>
 <style lang="less">
   .table-settings {
diff --git a/src/components/Table/src/const.ts b/src/components/Table/src/const.ts
index 2a45fac7a..b1850b1b9 100644
--- a/src/components/Table/src/const.ts
+++ b/src/components/Table/src/const.ts
@@ -1,4 +1,4 @@
-import componentSetting from '/@/settings/componentSetting';
+import componentSetting from '@/settings/componentSetting';
 
 const { table } = componentSetting;
 
diff --git a/src/components/Table/src/hooks/useColumns.ts b/src/components/Table/src/hooks/useColumns.ts
index 80d946cd1..33986d31c 100644
--- a/src/components/Table/src/hooks/useColumns.ts
+++ b/src/components/Table/src/hooks/useColumns.ts
@@ -3,11 +3,11 @@ import type { PaginationProps } from '../types/pagination';
 import type { ComputedRef } from 'vue';
 import { computed, Ref, ref, reactive, toRaw, unref, watch } from 'vue';
 import { renderEditCell } from '../components/editable';
-import { usePermission } from '/@/hooks/web/usePermission';
-import { useI18n } from '/@/hooks/web/useI18n';
-import { isArray, isBoolean, isFunction, isMap, isString } from '/@/utils/is';
+import { usePermission } from '@/hooks/web/usePermission';
+import { useI18n } from '@/hooks/web/useI18n';
+import { isArray, isBoolean, isFunction, isMap, isString } from '@/utils/is';
 import { cloneDeep, isEqual } from 'lodash-es';
-import { formatToDate } from '/@/utils/dateUtil';
+import { formatToDate } from '@/utils/dateUtil';
 import { ACTION_COLUMN_FLAG, DEFAULT_ALIGN, INDEX_COLUMN_FLAG, PAGE_SIZE } from '../const';
 import { ColumnType } from 'ant-design-vue/es/table';
 
diff --git a/src/components/Table/src/hooks/useCustomRow.ts b/src/components/Table/src/hooks/useCustomRow.ts
index 05d4ce9d8..a1620d7b5 100644
--- a/src/components/Table/src/hooks/useCustomRow.ts
+++ b/src/components/Table/src/hooks/useCustomRow.ts
@@ -2,7 +2,7 @@ import type { ComputedRef } from 'vue';
 import type { BasicTableProps } from '../types/table';
 import { unref } from 'vue';
 import { ROW_KEY } from '../const';
-import { isString, isFunction } from '/@/utils/is';
+import { isString, isFunction } from '@/utils/is';
 import type { Key } from 'ant-design-vue/lib/table/interface';
 
 interface Options {
diff --git a/src/components/Table/src/hooks/useDataSource.ts b/src/components/Table/src/hooks/useDataSource.ts
index c051cf38f..dcb45298d 100644
--- a/src/components/Table/src/hooks/useDataSource.ts
+++ b/src/components/Table/src/hooks/useDataSource.ts
@@ -12,8 +12,8 @@ import {
   watchEffect,
 } from 'vue';
 import { useTimeoutFn } from '@vben/hooks';
-import { buildUUID } from '/@/utils/uuid';
-import { isFunction, isBoolean, isObject } from '/@/utils/is';
+import { buildUUID } from '@/utils/uuid';
+import { isFunction, isBoolean, isObject } from '@/utils/is';
 import { get, cloneDeep, merge } from 'lodash-es';
 import { FETCH_SETTING, ROW_KEY, PAGE_SIZE } from '../const';
 
diff --git a/src/components/Table/src/hooks/usePagination.tsx b/src/components/Table/src/hooks/usePagination.tsx
index 1ace59093..90bf2fc75 100644
--- a/src/components/Table/src/hooks/usePagination.tsx
+++ b/src/components/Table/src/hooks/usePagination.tsx
@@ -2,9 +2,9 @@ import type { PaginationProps } from '../types/pagination';
 import type { BasicTableProps } from '../types/table';
 import { computed, unref, ref, ComputedRef, watch } from 'vue';
 import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
-import { isBoolean } from '/@/utils/is';
+import { isBoolean } from '@/utils/is';
 import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '../const';
-import { useI18n } from '/@/hooks/web/useI18n';
+import { useI18n } from '@/hooks/web/useI18n';
 
 interface ItemRender {
   page: number;
diff --git a/src/components/Table/src/hooks/useRowSelection.ts b/src/components/Table/src/hooks/useRowSelection.ts
index e87c3dfb5..1357dc361 100644
--- a/src/components/Table/src/hooks/useRowSelection.ts
+++ b/src/components/Table/src/hooks/useRowSelection.ts
@@ -1,9 +1,9 @@
-import { isFunction } from '/@/utils/is';
+import { isFunction } from '@/utils/is';
 import type { BasicTableProps, TableRowSelection } from '../types/table';
 import { computed, ComputedRef, nextTick, Ref, ref, toRaw, unref, watch } from 'vue';
 import { ROW_KEY } from '../const';
 import { omit } from 'lodash-es';
-import { findNodeAll } from '/@/utils/helper/treeHelper';
+import { findNodeAll } from '@/utils/helper/treeHelper';
 import type { Key } from 'ant-design-vue/lib/table/interface';
 
 export function useRowSelection(
diff --git a/src/components/Table/src/hooks/useScrollTo.ts b/src/components/Table/src/hooks/useScrollTo.ts
index b368f81b0..d8bab1b14 100644
--- a/src/components/Table/src/hooks/useScrollTo.ts
+++ b/src/components/Table/src/hooks/useScrollTo.ts
@@ -1,6 +1,6 @@
 import type { ComputedRef, Ref } from 'vue';
 import { nextTick, unref } from 'vue';
-import { warn } from '/@/utils/log';
+import { warn } from '@/utils/log';
 
 export function useTableScrollTo(
   tableElRef: Ref<ComponentRef>,
diff --git a/src/components/Table/src/hooks/useTable.ts b/src/components/Table/src/hooks/useTable.ts
index f7f29df76..82791ea3b 100644
--- a/src/components/Table/src/hooks/useTable.ts
+++ b/src/components/Table/src/hooks/useTable.ts
@@ -1,12 +1,12 @@
 import type { BasicTableProps, TableActionType, FetchParams, BasicColumn } from '../types/table';
 import type { PaginationProps } from '../types/pagination';
 import type { DynamicProps } from '/#/utils';
-import type { FormActionType } from '/@/components/Form';
+import type { FormActionType } from '@/components/Form';
 import type { WatchStopHandle } from 'vue';
-import { getDynamicProps } from '/@/utils';
+import { getDynamicProps } from '@/utils';
 import { ref, onUnmounted, unref, watch, toRaw } from 'vue';
-import { isProdMode } from '/@/utils/env';
-import { error } from '/@/utils/log';
+import { isProdMode } from '@/utils/env';
+import { error } from '@/utils/log';
 import type { Key } from 'ant-design-vue/lib/table/interface';
 
 type Props = Partial<DynamicProps<BasicTableProps>>;
diff --git a/src/components/Table/src/hooks/useTableFooter.ts b/src/components/Table/src/hooks/useTableFooter.ts
index 6a3aa580a..2e187d8f0 100644
--- a/src/components/Table/src/hooks/useTableFooter.ts
+++ b/src/components/Table/src/hooks/useTableFooter.ts
@@ -2,7 +2,7 @@ import type { ComputedRef, Ref } from 'vue';
 import type { BasicTableProps } from '../types/table';
 import { unref, computed, h, nextTick, watchEffect } from 'vue';
 import TableFooter from '../components/TableFooter.vue';
-import { useEventListener } from '/@/hooks/event/useEventListener';
+import { useEventListener } from '@/hooks/event/useEventListener';
 
 export function useTableFooter(
   propsRef: ComputedRef<BasicTableProps>,
diff --git a/src/components/Table/src/hooks/useTableForm.ts b/src/components/Table/src/hooks/useTableForm.ts
index 9d5712d5e..f0474e681 100644
--- a/src/components/Table/src/hooks/useTableForm.ts
+++ b/src/components/Table/src/hooks/useTableForm.ts
@@ -1,8 +1,8 @@
 import type { ComputedRef, Slots } from 'vue';
 import type { BasicTableProps, FetchParams } from '../types/table';
 import { unref, computed } from 'vue';
-import type { FormProps } from '/@/components/Form';
-import { isFunction } from '/@/utils/is';
+import type { FormProps } from '@/components/Form';
+import { isFunction } from '@/utils/is';
 
 export function useTableForm(
   propsRef: ComputedRef<BasicTableProps>,
diff --git a/src/components/Table/src/hooks/useTableHeader.ts b/src/components/Table/src/hooks/useTableHeader.ts
index e72820755..b230437d4 100644
--- a/src/components/Table/src/hooks/useTableHeader.ts
+++ b/src/components/Table/src/hooks/useTableHeader.ts
@@ -2,8 +2,8 @@ import type { ComputedRef, Slots } from 'vue';
 import type { BasicTableProps, InnerHandlers } from '../types/table';
 import { unref, computed, h } from 'vue';
 import TableHeader from '../components/TableHeader.vue';
-import { isString } from '/@/utils/is';
-import { getSlot } from '/@/utils/helper/tsxHelper';
+import { isString } from '@/utils/is';
+import { getSlot } from '@/utils/helper/tsxHelper';
 
 export function useTableHeader(
   propsRef: ComputedRef<BasicTableProps>,
diff --git a/src/components/Table/src/hooks/useTableScroll.ts b/src/components/Table/src/hooks/useTableScroll.ts
index 95f3a9127..8ea383c74 100644
--- a/src/components/Table/src/hooks/useTableScroll.ts
+++ b/src/components/Table/src/hooks/useTableScroll.ts
@@ -1,9 +1,9 @@
 import type { BasicTableProps, TableRowSelection, BasicColumn } from '../types/table';
 import { Ref, ComputedRef, ref, computed, unref, nextTick, watch } from 'vue';
-import { getViewportOffset } from '/@/utils/domUtils';
-import { isBoolean } from '/@/utils/is';
+import { getViewportOffset } from '@/utils/domUtils';
+import { isBoolean } from '@/utils/is';
 import { useWindowSizeFn, onMountedOrActivated } from '@vben/hooks';
-import { useModalContext } from '/@/components/Modal';
+import { useModalContext } from '@/components/Modal';
 import { useDebounceFn } from '@vueuse/core';
 
 export function useTableScroll(
diff --git a/src/components/Table/src/hooks/useTableStyle.ts b/src/components/Table/src/hooks/useTableStyle.ts
index 292187d88..f5f896a8a 100644
--- a/src/components/Table/src/hooks/useTableStyle.ts
+++ b/src/components/Table/src/hooks/useTableStyle.ts
@@ -1,7 +1,7 @@
 import type { ComputedRef } from 'vue';
 import type { BasicTableProps, TableCustomRecord } from '../types/table';
 import { unref } from 'vue';
-import { isFunction } from '/@/utils/is';
+import { isFunction } from '@/utils/is';
 
 export function useTableStyle(propsRef: ComputedRef<BasicTableProps>, prefixCls: string) {
   function getRowClassName(record: TableCustomRecord, index: number) {
diff --git a/src/components/Table/src/props.ts b/src/components/Table/src/props.ts
index 888cd9f6e..761fcbc88 100644
--- a/src/components/Table/src/props.ts
+++ b/src/components/Table/src/props.ts
@@ -9,10 +9,10 @@ import type {
   TableRowSelection,
   SizeType,
 } from './types/table';
-import type { FormProps } from '/@/components/Form';
+import type { FormProps } from '@/components/Form';
 
 import { DEFAULT_FILTER_FN, DEFAULT_SORT_FN, FETCH_SETTING, DEFAULT_SIZE } from './const';
-import { propTypes } from '/@/utils/propTypes';
+import { propTypes } from '@/utils/propTypes';
 
 export const basicProps = {
   clickToRowSelect: { type: Boolean, default: true },
diff --git a/src/components/Table/src/types/table.ts b/src/components/Table/src/types/table.ts
index 0819a521b..e0a3c0e9b 100644
--- a/src/components/Table/src/types/table.ts
+++ b/src/components/Table/src/types/table.ts
@@ -1,6 +1,6 @@
 import type { VNodeChild } from 'vue';
 import type { PaginationProps } from './pagination';
-import type { FormProps } from '/@/components/Form';
+import type { FormProps } from '@/components/Form';
 import type {
   TableRowSelection as ITableRowSelection,
   Key,
@@ -9,8 +9,8 @@ import type {
 import type { ColumnProps } from 'ant-design-vue/lib/table';
 
 import { ComponentType } from './componentType';
-import { VueNode } from '/@/utils/propTypes';
-import { RoleEnum } from '/@/enums/roleEnum';
+import { VueNode } from '@/utils/propTypes';
+import { RoleEnum } from '@/enums/roleEnum';
 
 export declare type SortOrder = 'ascend' | 'descend';
 
diff --git a/src/components/Table/src/types/tableAction.ts b/src/components/Table/src/types/tableAction.ts
index d84770762..30df89893 100644
--- a/src/components/Table/src/types/tableAction.ts
+++ b/src/components/Table/src/types/tableAction.ts
@@ -1,6 +1,6 @@
 import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
 import { TooltipProps } from 'ant-design-vue/es/tooltip/Tooltip';
-import { RoleEnum } from '/@/enums/roleEnum';
+import { RoleEnum } from '@/enums/roleEnum';
 
 export interface ActionItem extends ButtonProps {
   onClick?: Fn;
diff --git a/src/components/Time/index.ts b/src/components/Time/index.ts
index 7e2f4c02d..e9ace01cd 100644
--- a/src/components/Time/index.ts
+++ b/src/components/Time/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils/index';
+import { withInstall } from '@/utils';
 import time from './src/Time.vue';
 
 export const Time = withInstall(time);
diff --git a/src/components/Time/src/Time.vue b/src/components/Time/src/Time.vue
index 278936881..ed735e962 100644
--- a/src/components/Time/src/Time.vue
+++ b/src/components/Time/src/Time.vue
@@ -1,108 +1,104 @@
 <template>
   <span>{{ date }}</span>
 </template>
-<script lang="ts">
-  import { defineComponent, ref, watch } from 'vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { useI18n } from '@/hooks/web/useI18n';
   import { useIntervalFn } from '@vueuse/core';
-  import { formatToDateTime, formatToDate, dateUtil } from '/@/utils/dateUtil';
-  import { isNumber, isObject, isString } from '/@/utils/is';
-  import { propTypes } from '/@/utils/propTypes';
+  import { formatToDateTime, formatToDate, dateUtil } from '@/utils/dateUtil';
+  import { isNumber, isObject, isString } from '@/utils/is';
+  import { propTypes } from '@/utils/propTypes';
+
+  defineOptions({ name: 'Time' });
+
+  const props = defineProps({
+    value: propTypes.oneOfType([propTypes.number, propTypes.instanceOf(Date), propTypes.string])
+      .isRequired,
+    step: propTypes.number.def(60),
+    mode: propTypes.oneOf(['date', 'datetime', 'relative']).def('relative'),
+  });
 
   const ONE_SECONDS = 1000;
   const ONE_MINUTES = ONE_SECONDS * 60;
   const ONE_HOUR = ONE_MINUTES * 60;
   const ONE_DAY = ONE_HOUR * 24;
 
-  export default defineComponent({
-    name: 'Time',
-    props: {
-      value: propTypes.oneOfType([propTypes.number, propTypes.instanceOf(Date), propTypes.string])
-        .isRequired,
-      step: propTypes.number.def(60),
-      mode: propTypes.oneOf(['date', 'datetime', 'relative']).def('relative'),
+  const date = ref('');
+
+  const { t } = useI18n();
+
+  useIntervalFn(setTime, props.step * ONE_SECONDS);
+
+  watch(
+    () => props.value,
+    () => {
+      setTime();
     },
-    setup(props) {
-      const date = ref('');
+    { immediate: true },
+  );
 
-      const { t } = useI18n();
+  function getTime() {
+    const { value } = props;
+    let time = 0;
+    if (isNumber(value)) {
+      const timestamp = value.toString().length > 10 ? value : value * 1000;
+      time = new Date(timestamp).getTime();
+    } else if (isString(value)) {
+      time = new Date(value).getTime();
+    } else if (isObject(value)) {
+      time = value.getTime();
+    }
+    return time;
+  }
 
-      useIntervalFn(setTime, props.step * ONE_SECONDS);
-
-      watch(
-        () => props.value,
-        () => {
-          setTime();
-        },
-        { immediate: true },
-      );
-
-      function getTime() {
-        const { value } = props;
-        let time = 0;
-        if (isNumber(value)) {
-          const timestamp = value.toString().length > 10 ? value : value * 1000;
-          time = new Date(timestamp).getTime();
-        } else if (isString(value)) {
-          time = new Date(value).getTime();
-        } else if (isObject(value)) {
-          time = value.getTime();
-        }
-        return time;
+  function setTime() {
+    const { mode, value } = props;
+    const time = getTime();
+    if (mode === 'relative') {
+      date.value = getRelativeTime(time);
+    } else {
+      if (mode === 'datetime') {
+        date.value = formatToDateTime(value);
+      } else if (mode === 'date') {
+        date.value = formatToDate(value);
       }
+    }
+  }
 
-      function setTime() {
-        const { mode, value } = props;
-        const time = getTime();
-        if (mode === 'relative') {
-          date.value = getRelativeTime(time);
-        } else {
-          if (mode === 'datetime') {
-            date.value = formatToDateTime(value);
-          } else if (mode === 'date') {
-            date.value = formatToDate(value);
-          }
-        }
-      }
+  function getRelativeTime(timeStamp: number) {
+    const currentTime = new Date().getTime();
 
-      function getRelativeTime(timeStamp: number) {
-        const currentTime = new Date().getTime();
+    // Determine whether the incoming timestamp is earlier than the current timestamp
+    const isBefore = dateUtil(timeStamp).isBefore(currentTime);
 
-        // Determine whether the incoming timestamp is earlier than the current timestamp
-        const isBefore = dateUtil(timeStamp).isBefore(currentTime);
+    let diff = currentTime - timeStamp;
+    if (!isBefore) {
+      diff = -diff;
+    }
 
-        let diff = currentTime - timeStamp;
-        if (!isBefore) {
-          diff = -diff;
-        }
+    let resStr = '';
+    let dirStr = isBefore ? t('component.time.before') : t('component.time.after');
 
-        let resStr = '';
-        let dirStr = isBefore ? t('component.time.before') : t('component.time.after');
-
-        if (diff < ONE_SECONDS) {
-          resStr = t('component.time.just');
-          // Less than or equal to 59 seconds
-        } else if (diff < ONE_MINUTES) {
-          resStr = parseInt(diff / ONE_SECONDS) + t('component.time.seconds') + dirStr;
-          // More than 59 seconds, less than or equal to 59 minutes and 59 seconds
-        } else if (diff >= ONE_MINUTES && diff < ONE_HOUR) {
-          resStr = Math.floor(diff / ONE_MINUTES) + t('component.time.minutes') + dirStr;
-          // More than 59 minutes and 59 seconds, less than or equal to 23 hours, 59 minutes and 59 seconds
-        } else if (diff >= ONE_HOUR && diff < ONE_DAY) {
-          resStr = Math.floor(diff / ONE_HOUR) + t('component.time.hours') + dirStr;
-          // More than 23 hours, 59 minutes and 59 seconds, less than or equal to 29 days, 59 minutes and 59 seconds
-        } else if (diff >= ONE_DAY && diff < 2623860000) {
-          resStr = Math.floor(diff / ONE_DAY) + t('component.time.days') + dirStr;
-          // More than 29 days, 59 minutes, 59 seconds, less than 364 days, 23 hours, 59 minutes, 59 seconds, and the incoming timestamp is earlier than the current
-        } else if (diff >= 2623860000 && diff <= 31567860000 && isBefore) {
-          resStr = dateUtil(timeStamp).format('MM-DD-HH-mm');
-        } else {
-          resStr = dateUtil(timeStamp).format('YYYY');
-        }
-        return resStr;
-      }
-
-      return { date };
-    },
-  });
+    if (diff < ONE_SECONDS) {
+      resStr = t('component.time.just');
+      // Less than or equal to 59 seconds
+    } else if (diff < ONE_MINUTES) {
+      resStr = parseInt(diff / ONE_SECONDS) + t('component.time.seconds') + dirStr;
+      // More than 59 seconds, less than or equal to 59 minutes and 59 seconds
+    } else if (diff >= ONE_MINUTES && diff < ONE_HOUR) {
+      resStr = Math.floor(diff / ONE_MINUTES) + t('component.time.minutes') + dirStr;
+      // More than 59 minutes and 59 seconds, less than or equal to 23 hours, 59 minutes and 59 seconds
+    } else if (diff >= ONE_HOUR && diff < ONE_DAY) {
+      resStr = Math.floor(diff / ONE_HOUR) + t('component.time.hours') + dirStr;
+      // More than 23 hours, 59 minutes and 59 seconds, less than or equal to 29 days, 59 minutes and 59 seconds
+    } else if (diff >= ONE_DAY && diff < 2623860000) {
+      resStr = Math.floor(diff / ONE_DAY) + t('component.time.days') + dirStr;
+      // More than 29 days, 59 minutes, 59 seconds, less than 364 days, 23 hours, 59 minutes, 59 seconds, and the incoming timestamp is earlier than the current
+    } else if (diff >= 2623860000 && diff <= 31567860000 && isBefore) {
+      resStr = dateUtil(timeStamp).format('MM-DD-HH-mm');
+    } else {
+      resStr = dateUtil(timeStamp).format('YYYY');
+    }
+    return resStr;
+  }
 </script>
diff --git a/src/components/Tinymce/index.ts b/src/components/Tinymce/index.ts
index ce07f95e3..dca44f1b1 100644
--- a/src/components/Tinymce/index.ts
+++ b/src/components/Tinymce/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils/index';
+import { withInstall } from '@/utils';
 import tinymce from './src/Editor.vue';
 
 export const Tinymce = withInstall(tinymce);
diff --git a/src/components/Tinymce/src/Editor.vue b/src/components/Tinymce/src/Editor.vue
index a569b76ae..53a4e82c7 100644
--- a/src/components/Tinymce/src/Editor.vue
+++ b/src/components/Tinymce/src/Editor.vue
@@ -18,7 +18,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import type { Editor, RawEditorSettings } from 'tinymce';
   import tinymce from 'tinymce/tinymce';
   import 'tinymce/themes/silver';
@@ -54,7 +54,6 @@
   import 'tinymce/plugins/wordcount';
 
   import {
-    defineComponent,
     computed,
     nextTick,
     ref,
@@ -63,18 +62,21 @@
     onDeactivated,
     onBeforeUnmount,
     PropType,
+    useAttrs,
   } from 'vue';
   import ImgUpload from './ImgUpload.vue';
-  import { toolbar, plugins } from './tinymce';
-  import { buildShortUUID } from '/@/utils/uuid';
+  import { plugins as defaultPlugins, toolbar as defaultToolbar } from './tinymce';
+  import { buildShortUUID } from '@/utils/uuid';
   import { bindHandlers } from './helper';
   import { onMountedOrActivated } from '@vben/hooks';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { isNumber } from '/@/utils/is';
-  import { useLocale } from '/@/locales/useLocale';
-  import { useAppStore } from '/@/store/modules/app';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { isNumber } from '@/utils/is';
+  import { useLocale } from '@/locales/useLocale';
+  import { useAppStore } from '@/store/modules/app';
 
-  const tinymceProps = {
+  defineOptions({ name: 'Tinymce', inheritAttrs: false });
+
+  const props = defineProps({
     options: {
       type: Object as PropType<Partial<RawEditorSettings>>,
       default: () => ({}),
@@ -85,11 +87,11 @@
 
     toolbar: {
       type: Array as PropType<string[]>,
-      default: toolbar,
+      default: defaultToolbar,
     },
     plugins: {
       type: Array as PropType<string[]>,
-      default: plugins,
+      default: defaultPlugins,
     },
     modelValue: {
       type: String,
@@ -108,230 +110,204 @@
       type: Boolean,
       default: true,
     },
-  };
-
-  export default defineComponent({
-    name: 'Tinymce',
-    components: { ImgUpload },
-    inheritAttrs: false,
-    props: tinymceProps,
-    emits: ['change', 'update:modelValue', 'inited', 'init-error'],
-    setup(props, { emit, attrs }) {
-      const editorRef = ref<Editor | null>(null);
-      const fullscreen = ref(false);
-      const tinymceId = ref<string>(buildShortUUID('tiny-vue'));
-      const elRef = ref<HTMLElement | null>(null);
-
-      const { prefixCls } = useDesign('tinymce-container');
-
-      const appStore = useAppStore();
-
-      const tinymceContent = computed(() => props.modelValue);
-
-      const containerWidth = computed(() => {
-        const width = props.width;
-        if (isNumber(width)) {
-          return `${width}px`;
-        }
-        return width;
-      });
-
-      const skinName = computed(() => {
-        return appStore.getDarkMode === 'light' ? 'oxide' : 'oxide-dark';
-      });
-
-      const langName = computed(() => {
-        const lang = useLocale().getLocale.value;
-        return ['zh_CN', 'en'].includes(lang) ? lang : 'zh_CN';
-      });
-
-      const initOptions = computed((): RawEditorSettings => {
-        const { height, options, toolbar, plugins } = props;
-        const publicPath = import.meta.env.VITE_PUBLIC_PATH || '/';
-        return {
-          selector: `#${unref(tinymceId)}`,
-          height,
-          toolbar,
-          menubar: 'file edit insert view format table',
-          plugins,
-          language_url: publicPath + 'resource/tinymce/langs/' + langName.value + '.js',
-          language: langName.value,
-          branding: false,
-          default_link_target: '_blank',
-          link_title: false,
-          object_resizing: false,
-          auto_focus: true,
-          skin: skinName.value,
-          skin_url: publicPath + 'resource/tinymce/skins/ui/' + skinName.value,
-          content_css:
-            publicPath + 'resource/tinymce/skins/ui/' + skinName.value + '/content.min.css',
-          ...options,
-          setup: (editor: Editor) => {
-            editorRef.value = editor;
-            editor.on('init', (e) => initSetup(e));
-          },
-        };
-      });
-
-      const disabled = computed(() => {
-        const { options } = props;
-        const getdDisabled = options && Reflect.get(options, 'readonly');
-        const editor = unref(editorRef);
-        if (editor) {
-          editor.setMode(getdDisabled ? 'readonly' : 'design');
-        }
-        return getdDisabled ?? false;
-      });
-
-      watch(
-        () => attrs.disabled,
-        () => {
-          const editor = unref(editorRef);
-          if (!editor) {
-            return;
-          }
-          editor.setMode(attrs.disabled ? 'readonly' : 'design');
-        },
-      );
-
-      onMountedOrActivated(() => {
-        if (!initOptions.value.inline) {
-          tinymceId.value = buildShortUUID('tiny-vue');
-        }
-        nextTick(() => {
-          setTimeout(() => {
-            initEditor();
-          }, 30);
-        });
-      });
-
-      onBeforeUnmount(() => {
-        destory();
-      });
-
-      onDeactivated(() => {
-        destory();
-      });
-
-      function destory() {
-        if (tinymce !== null) {
-          tinymce?.remove?.(unref(initOptions).selector!);
-        }
-      }
-
-      function initEditor() {
-        const el = unref(elRef);
-        if (el) {
-          el.style.visibility = '';
-        }
-        tinymce
-          .init(unref(initOptions))
-          .then((editor) => {
-            emit('inited', editor);
-          })
-          .catch((err) => {
-            emit('init-error', err);
-          });
-      }
-
-      function initSetup(e) {
-        const editor = unref(editorRef);
-        if (!editor) {
-          return;
-        }
-        const value = props.modelValue || '';
-
-        editor.setContent(value);
-        bindModelHandlers(editor);
-        bindHandlers(e, attrs, unref(editorRef));
-      }
-
-      function setValue(editor: Record<string, any>, val?: string, prevVal?: string) {
-        if (
-          editor &&
-          typeof val === 'string' &&
-          val !== prevVal &&
-          val !== editor.getContent({ format: attrs.outputFormat })
-        ) {
-          editor.setContent(val);
-        }
-      }
-
-      function bindModelHandlers(editor: any) {
-        const modelEvents = attrs.modelEvents ? attrs.modelEvents : null;
-        const normalizedEvents = Array.isArray(modelEvents) ? modelEvents.join(' ') : modelEvents;
-
-        watch(
-          () => props.modelValue,
-          (val, prevVal) => {
-            setValue(editor, val, prevVal);
-          },
-        );
-
-        watch(
-          () => props.value,
-          (val, prevVal) => {
-            setValue(editor, val, prevVal);
-          },
-          {
-            immediate: true,
-          },
-        );
-
-        editor.on(normalizedEvents ? normalizedEvents : 'change keyup undo redo', () => {
-          const content = editor.getContent({ format: attrs.outputFormat });
-          emit('update:modelValue', content);
-          emit('change', content);
-        });
-
-        editor.on('FullscreenStateChanged', (e) => {
-          fullscreen.value = e.state;
-        });
-      }
-
-      function handleImageUploading(name: string) {
-        const editor = unref(editorRef);
-        if (!editor) {
-          return;
-        }
-        editor.execCommand('mceInsertContent', false, getUploadingImgName(name));
-        const content = editor?.getContent() ?? '';
-        setValue(editor, content);
-      }
-
-      function handleDone(name: string, url: string) {
-        const editor = unref(editorRef);
-        if (!editor) {
-          return;
-        }
-        const content = editor?.getContent() ?? '';
-        const val = content?.replace(getUploadingImgName(name), `<img src="${url}"/>`) ?? '';
-        setValue(editor, val);
-      }
-
-      function getUploadingImgName(name: string) {
-        return `[uploading:${name}]`;
-      }
-
-      return {
-        prefixCls,
-        containerWidth,
-        initOptions,
-        tinymceContent,
-        elRef,
-        tinymceId,
-        handleImageUploading,
-        handleDone,
-        editorRef,
-        fullscreen,
-        disabled,
-      };
-    },
   });
+
+  const emit = defineEmits(['change', 'update:modelValue', 'inited', 'init-error']);
+
+  const attrs = useAttrs();
+  const editorRef = ref<Editor | null>(null);
+  const fullscreen = ref(false);
+  const tinymceId = ref<string>(buildShortUUID('tiny-vue'));
+  const elRef = ref<HTMLElement | null>(null);
+
+  const { prefixCls } = useDesign('tinymce-container');
+
+  const appStore = useAppStore();
+
+  const containerWidth = computed(() => {
+    const width = props.width;
+    if (isNumber(width)) {
+      return `${width}px`;
+    }
+    return width;
+  });
+
+  const skinName = computed(() => {
+    return appStore.getDarkMode === 'light' ? 'oxide' : 'oxide-dark';
+  });
+
+  const langName = computed(() => {
+    const lang = useLocale().getLocale.value;
+    return ['zh_CN', 'en'].includes(lang) ? lang : 'zh_CN';
+  });
+
+  const initOptions = computed((): RawEditorSettings => {
+    const { height, options, toolbar, plugins } = props;
+    const publicPath = import.meta.env.VITE_PUBLIC_PATH || '/';
+    return {
+      selector: `#${unref(tinymceId)}`,
+      height,
+      toolbar,
+      menubar: 'file edit insert view format table',
+      plugins,
+      language_url: publicPath + 'resource/tinymce/langs/' + langName.value + '.js',
+      language: langName.value,
+      branding: false,
+      default_link_target: '_blank',
+      link_title: false,
+      object_resizing: false,
+      auto_focus: true,
+      skin: skinName.value,
+      skin_url: publicPath + 'resource/tinymce/skins/ui/' + skinName.value,
+      content_css: publicPath + 'resource/tinymce/skins/ui/' + skinName.value + '/content.min.css',
+      ...options,
+      setup: (editor: Editor) => {
+        editorRef.value = editor;
+        editor.on('init', (e) => initSetup(e));
+      },
+    };
+  });
+
+  const disabled = computed(() => {
+    const { options } = props;
+    const getdDisabled = options && Reflect.get(options, 'readonly');
+    const editor = unref(editorRef);
+    if (editor) {
+      editor.setMode(getdDisabled ? 'readonly' : 'design');
+    }
+    return getdDisabled ?? false;
+  });
+
+  watch(
+    () => attrs.disabled,
+    () => {
+      const editor = unref(editorRef);
+      if (!editor) {
+        return;
+      }
+      editor.setMode(attrs.disabled ? 'readonly' : 'design');
+    },
+  );
+
+  onMountedOrActivated(() => {
+    if (!initOptions.value.inline) {
+      tinymceId.value = buildShortUUID('tiny-vue');
+    }
+    nextTick(() => {
+      setTimeout(() => {
+        initEditor();
+      }, 30);
+    });
+  });
+
+  onBeforeUnmount(() => {
+    destory();
+  });
+
+  onDeactivated(() => {
+    destory();
+  });
+
+  function destory() {
+    if (tinymce !== null) {
+      tinymce?.remove?.(unref(initOptions).selector!);
+    }
+  }
+
+  function initEditor() {
+    const el = unref(elRef);
+    if (el) {
+      el.style.visibility = '';
+    }
+    tinymce
+      .init(unref(initOptions))
+      .then((editor) => {
+        emit('inited', editor);
+      })
+      .catch((err) => {
+        emit('init-error', err);
+      });
+  }
+
+  function initSetup(e) {
+    const editor = unref(editorRef);
+    if (!editor) {
+      return;
+    }
+    const value = props.modelValue || '';
+
+    editor.setContent(value);
+    bindModelHandlers(editor);
+    bindHandlers(e, attrs, unref(editorRef));
+  }
+
+  function setValue(editor: Record<string, any>, val?: string, prevVal?: string) {
+    if (
+      editor &&
+      typeof val === 'string' &&
+      val !== prevVal &&
+      val !== editor.getContent({ format: attrs.outputFormat })
+    ) {
+      editor.setContent(val);
+    }
+  }
+
+  function bindModelHandlers(editor: any) {
+    const modelEvents = attrs.modelEvents ? attrs.modelEvents : null;
+    const normalizedEvents = Array.isArray(modelEvents) ? modelEvents.join(' ') : modelEvents;
+
+    watch(
+      () => props.modelValue,
+      (val, prevVal) => {
+        setValue(editor, val, prevVal);
+      },
+    );
+
+    watch(
+      () => props.value,
+      (val, prevVal) => {
+        setValue(editor, val, prevVal);
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    editor.on(normalizedEvents ? normalizedEvents : 'change keyup undo redo', () => {
+      const content = editor.getContent({ format: attrs.outputFormat });
+      emit('update:modelValue', content);
+      emit('change', content);
+    });
+
+    editor.on('FullscreenStateChanged', (e) => {
+      fullscreen.value = e.state;
+    });
+  }
+
+  function handleImageUploading(name: string) {
+    const editor = unref(editorRef);
+    if (!editor) {
+      return;
+    }
+    editor.execCommand('mceInsertContent', false, getUploadingImgName(name));
+    const content = editor?.getContent() ?? '';
+    setValue(editor, content);
+  }
+
+  function handleDone(name: string, url: string) {
+    const editor = unref(editorRef);
+    if (!editor) {
+      return;
+    }
+    const content = editor?.getContent() ?? '';
+    const val = content?.replace(getUploadingImgName(name), `<img src="${url}"/>`) ?? '';
+    setValue(editor, val);
+  }
+
+  function getUploadingImgName(name: string) {
+    return `[uploading:${name}]`;
+  }
 </script>
-
-<style lang="less" scoped></style>
-
 <style lang="less">
   @prefix-cls: ~'@{namespace}-tinymce-container';
 
diff --git a/src/components/Tinymce/src/ImgUpload.vue b/src/components/Tinymce/src/ImgUpload.vue
index 0aea88f7f..45c049b32 100644
--- a/src/components/Tinymce/src/ImgUpload.vue
+++ b/src/components/Tinymce/src/ImgUpload.vue
@@ -14,70 +14,60 @@
     </Upload>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, computed } from 'vue';
+<script lang="ts" setup>
+  import { computed } from 'vue';
 
   import { Upload } from 'ant-design-vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useGlobSetting } from '/@/hooks/setting';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useGlobSetting } from '@/hooks/setting';
+  import { useI18n } from '@/hooks/web/useI18n';
 
-  export default defineComponent({
-    name: 'TinymceImageUpload',
-    components: { Upload },
-    props: {
-      fullscreen: {
-        type: Boolean,
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
+  defineOptions({ name: 'TinymceImageUpload' });
+
+  const props = defineProps({
+    fullscreen: {
+      type: Boolean,
     },
-    emits: ['uploading', 'done', 'error'],
-    setup(props, { emit }) {
-      let uploading = false;
-
-      const { uploadUrl } = useGlobSetting();
-      const { t } = useI18n();
-      const { prefixCls } = useDesign('tinymce-img-upload');
-
-      const getButtonProps = computed(() => {
-        const { disabled } = props;
-        return {
-          disabled,
-        };
-      });
-
-      function handleChange(info: Record<string, any>) {
-        const file = info.file;
-        const status = file?.status;
-        const url = file?.response?.url;
-        const name = file?.name;
-
-        if (status === 'uploading') {
-          if (!uploading) {
-            emit('uploading', name);
-            uploading = true;
-          }
-        } else if (status === 'done') {
-          emit('done', name, url);
-          uploading = false;
-        } else if (status === 'error') {
-          emit('error');
-          uploading = false;
-        }
-      }
-
-      return {
-        prefixCls,
-        handleChange,
-        uploadUrl,
-        t,
-        getButtonProps,
-      };
+    disabled: {
+      type: Boolean,
+      default: false,
     },
   });
+
+  const emit = defineEmits(['uploading', 'done', 'error']);
+
+  let uploading = false;
+
+  const { uploadUrl } = useGlobSetting();
+  const { t } = useI18n();
+  const { prefixCls } = useDesign('tinymce-img-upload');
+
+  const getButtonProps = computed(() => {
+    const { disabled } = props;
+    return {
+      disabled,
+    };
+  });
+
+  function handleChange(info: Record<string, any>) {
+    const file = info.file;
+    const status = file?.status;
+    const url = file?.response?.url;
+    const name = file?.name;
+
+    if (status === 'uploading') {
+      if (!uploading) {
+        emit('uploading', name);
+        uploading = true;
+      }
+    } else if (status === 'done') {
+      emit('done', name, url);
+      uploading = false;
+    } else if (status === 'error') {
+      emit('error');
+      uploading = false;
+    }
+  }
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-tinymce-img-upload';
diff --git a/src/components/Transition/src/CollapseTransition.vue b/src/components/Transition/src/CollapseTransition.vue
index 6b50fa198..853465bd9 100644
--- a/src/components/Transition/src/CollapseTransition.vue
+++ b/src/components/Transition/src/CollapseTransition.vue
@@ -3,76 +3,70 @@
     <slot></slot>
   </transition>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { addClass, removeClass } from '/@/utils/domUtils';
+<script lang="ts" setup>
+  import { addClass, removeClass } from '@/utils/domUtils';
 
-  export default defineComponent({
-    name: 'CollapseTransition',
-    setup() {
-      return {
-        on: {
-          beforeEnter(el) {
-            addClass(el, 'collapse-transition');
-            if (!el.dataset) el.dataset = {};
+  defineOptions({ name: 'CollapseTransition' });
 
-            el.dataset.oldPaddingTop = el.style.paddingTop;
-            el.dataset.oldPaddingBottom = el.style.paddingBottom;
+  const on = {
+    beforeEnter(el) {
+      addClass(el, 'collapse-transition');
+      if (!el.dataset) el.dataset = {};
 
-            el.style.height = '0';
-            el.style.paddingTop = 0;
-            el.style.paddingBottom = 0;
-          },
+      el.dataset.oldPaddingTop = el.style.paddingTop;
+      el.dataset.oldPaddingBottom = el.style.paddingBottom;
 
-          enter(el) {
-            el.dataset.oldOverflow = el.style.overflow;
-            if (el.scrollHeight !== 0) {
-              el.style.height = el.scrollHeight + 'px';
-              el.style.paddingTop = el.dataset.oldPaddingTop;
-              el.style.paddingBottom = el.dataset.oldPaddingBottom;
-            } else {
-              el.style.height = '';
-              el.style.paddingTop = el.dataset.oldPaddingTop;
-              el.style.paddingBottom = el.dataset.oldPaddingBottom;
-            }
-
-            el.style.overflow = 'hidden';
-          },
-
-          afterEnter(el) {
-            removeClass(el, 'collapse-transition');
-            el.style.height = '';
-            el.style.overflow = el.dataset.oldOverflow;
-          },
-
-          beforeLeave(el) {
-            if (!el.dataset) el.dataset = {};
-            el.dataset.oldPaddingTop = el.style.paddingTop;
-            el.dataset.oldPaddingBottom = el.style.paddingBottom;
-            el.dataset.oldOverflow = el.style.overflow;
-
-            el.style.height = el.scrollHeight + 'px';
-            el.style.overflow = 'hidden';
-          },
-
-          leave(el) {
-            if (el.scrollHeight !== 0) {
-              addClass(el, 'collapse-transition');
-              el.style.height = 0;
-              el.style.paddingTop = 0;
-              el.style.paddingBottom = 0;
-            }
-          },
-
-          afterLeave(el) {
-            removeClass(el, 'collapse-transition');
-            el.style.height = '';
-            el.style.overflow = el.dataset.oldOverflow;
-            el.style.paddingTop = el.dataset.oldPaddingTop;
-            el.style.paddingBottom = el.dataset.oldPaddingBottom;
-          },
-        },
-      };
+      el.style.height = '0';
+      el.style.paddingTop = 0;
+      el.style.paddingBottom = 0;
     },
-  });
+
+    enter(el) {
+      el.dataset.oldOverflow = el.style.overflow;
+      if (el.scrollHeight !== 0) {
+        el.style.height = el.scrollHeight + 'px';
+        el.style.paddingTop = el.dataset.oldPaddingTop;
+        el.style.paddingBottom = el.dataset.oldPaddingBottom;
+      } else {
+        el.style.height = '';
+        el.style.paddingTop = el.dataset.oldPaddingTop;
+        el.style.paddingBottom = el.dataset.oldPaddingBottom;
+      }
+
+      el.style.overflow = 'hidden';
+    },
+
+    afterEnter(el) {
+      removeClass(el, 'collapse-transition');
+      el.style.height = '';
+      el.style.overflow = el.dataset.oldOverflow;
+    },
+
+    beforeLeave(el) {
+      if (!el.dataset) el.dataset = {};
+      el.dataset.oldPaddingTop = el.style.paddingTop;
+      el.dataset.oldPaddingBottom = el.style.paddingBottom;
+      el.dataset.oldOverflow = el.style.overflow;
+
+      el.style.height = el.scrollHeight + 'px';
+      el.style.overflow = 'hidden';
+    },
+
+    leave(el) {
+      if (el.scrollHeight !== 0) {
+        addClass(el, 'collapse-transition');
+        el.style.height = 0;
+        el.style.paddingTop = 0;
+        el.style.paddingBottom = 0;
+      }
+    },
+
+    afterLeave(el) {
+      removeClass(el, 'collapse-transition');
+      el.style.height = '';
+      el.style.overflow = el.dataset.oldOverflow;
+      el.style.paddingTop = el.dataset.oldPaddingTop;
+      el.style.paddingBottom = el.dataset.oldPaddingBottom;
+    },
+  };
 </script>
diff --git a/src/components/Transition/src/CreateTransition.tsx b/src/components/Transition/src/CreateTransition.tsx
index 035a34a64..99cd2a978 100644
--- a/src/components/Transition/src/CreateTransition.tsx
+++ b/src/components/Transition/src/CreateTransition.tsx
@@ -1,7 +1,7 @@
 import type { PropType } from 'vue';
 
 import { defineComponent, Transition, TransitionGroup } from 'vue';
-import { getSlot } from '/@/utils/helper/tsxHelper';
+import { getSlot } from '@/utils/helper/tsxHelper';
 
 type Mode = 'in-out' | 'out-in' | 'default' | undefined;
 
diff --git a/src/components/Tree/index.ts b/src/components/Tree/index.ts
index 169035aac..70dcb032f 100644
--- a/src/components/Tree/index.ts
+++ b/src/components/Tree/index.ts
@@ -2,5 +2,5 @@ import BasicTree from './src/BasicTree.vue';
 import './style';
 
 export { BasicTree };
-export type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
+export type { ContextMenuItem } from '@/hooks/web/useContextMenu';
 export * from './src/types/tree';
diff --git a/src/components/Tree/src/BasicTree.vue b/src/components/Tree/src/BasicTree.vue
index 73a08b5aa..5a4ad7a84 100644
--- a/src/components/Tree/src/BasicTree.vue
+++ b/src/components/Tree/src/BasicTree.vue
@@ -23,16 +23,16 @@
   import TreeHeader from './components/TreeHeader.vue';
   import { Tree, Spin, Empty } from 'ant-design-vue';
   import { TreeIcon } from './TreeIcon';
-  import { ScrollContainer } from '/@/components/Container';
+  import { ScrollContainer } from '@/components/Container';
   import { omit, get, difference, cloneDeep } from 'lodash-es';
-  import { isArray, isBoolean, isEmpty, isFunction } from '/@/utils/is';
-  import { extendSlots, getSlot } from '/@/utils/helper/tsxHelper';
-  import { filter, treeToList, eachTree } from '/@/utils/helper/treeHelper';
+  import { isArray, isBoolean, isEmpty, isFunction } from '@/utils/is';
+  import { extendSlots, getSlot } from '@/utils/helper/tsxHelper';
+  import { filter, treeToList, eachTree } from '@/utils/helper/treeHelper';
   import { useTree } from './hooks/useTree';
-  import { useContextMenu } from '/@/hooks/web/useContextMenu';
-  import { CreateContextOptions } from '/@/components/ContextMenu';
+  import { useContextMenu } from '@/hooks/web/useContextMenu';
+  import { CreateContextOptions } from '@/components/ContextMenu';
   import { treeEmits, treeProps } from './types/tree';
-  import { createBEM } from '/@/utils/bem';
+  import { createBEM } from '@/utils/bem';
   import type { TreeProps } from 'ant-design-vue/es/tree/Tree';
 
   export default defineComponent({
diff --git a/src/components/Tree/src/components/TreeHeader.vue b/src/components/Tree/src/components/TreeHeader.vue
index 1cbee0b6a..87c39752e 100644
--- a/src/components/Tree/src/components/TreeHeader.vue
+++ b/src/components/Tree/src/components/TreeHeader.vue
@@ -43,10 +43,10 @@
     type MenuProps,
   } from 'ant-design-vue';
   import Icon from '@/components/Icon/Icon.vue';
-  import { BasicTitle } from '/@/components/Basic';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { BasicTitle } from '@/components/Basic';
+  import { useI18n } from '@/hooks/web/useI18n';
   import { useDebounceFn } from '@vueuse/core';
-  import { createBEM } from '/@/utils/bem';
+  import { createBEM } from '@/utils/bem';
   import { ToolbarEnum } from '../types/tree';
 
   const searchValue = ref('');
diff --git a/src/components/Tree/src/hooks/useTree.ts b/src/components/Tree/src/hooks/useTree.ts
index c48000cc8..b7621cfdd 100644
--- a/src/components/Tree/src/hooks/useTree.ts
+++ b/src/components/Tree/src/hooks/useTree.ts
@@ -4,7 +4,7 @@ import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
 
 import { cloneDeep } from 'lodash-es';
 import { unref } from 'vue';
-import { forEach } from '/@/utils/helper/treeHelper';
+import { forEach } from '@/utils/helper/treeHelper';
 
 export function useTree(treeDataRef: Ref<TreeDataItem[]>, getFieldNames: ComputedRef<FieldNames>) {
   function getAllKeys(list?: TreeDataItem[]) {
diff --git a/src/components/Tree/src/types/tree.ts b/src/components/Tree/src/types/tree.ts
index 9b8e67cd1..0382e213d 100644
--- a/src/components/Tree/src/types/tree.ts
+++ b/src/components/Tree/src/types/tree.ts
@@ -1,7 +1,7 @@
 import type { ExtractPropTypes, Ref } from 'vue';
 import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
 
-import { buildProps } from '/@/utils/props';
+import { buildProps } from '@/utils/props';
 
 export enum ToolbarEnum {
   SELECT_ALL,
diff --git a/src/components/Upload/index.ts b/src/components/Upload/index.ts
index 325a39633..1f8569e54 100644
--- a/src/components/Upload/index.ts
+++ b/src/components/Upload/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 import basicUpload from './src/BasicUpload.vue';
 import uploadImage from './src/components/ImageUpload.vue';
 
diff --git a/src/components/Upload/src/BasicUpload.vue b/src/components/Upload/src/BasicUpload.vue
index a8d0b2fbe..25978cb1f 100644
--- a/src/components/Upload/src/BasicUpload.vue
+++ b/src/components/Upload/src/BasicUpload.vue
@@ -37,90 +37,73 @@
     />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, ref, watch, unref, computed } from 'vue';
+<script lang="ts" setup>
+  import { ref, watch, unref, computed, useAttrs } from 'vue';
   import { Recordable } from '@vben/types';
   import Icon from '@/components/Icon/Icon.vue';
   import { Tooltip, Space } from 'ant-design-vue';
-  import { useModal } from '/@/components/Modal';
+  import { useModal } from '@/components/Modal';
   import { uploadContainerProps } from './props';
   import { omit } from 'lodash-es';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { isArray } from '/@/utils/is';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { isArray } from '@/utils/is';
   import UploadModal from './components/UploadModal.vue';
   import UploadPreviewModal from './components/UploadPreviewModal.vue';
 
-  export default defineComponent({
-    name: 'BasicUpload',
-    components: { UploadModal, Space, UploadPreviewModal, Icon, Tooltip },
-    props: uploadContainerProps,
-    emits: ['change', 'delete', 'preview-delete', 'update:value'],
+  defineOptions({ name: 'BasicUpload' });
 
-    setup(props, { emit, attrs }) {
-      const { t } = useI18n();
-      // 上传modal
-      const [registerUploadModal, { openModal: openUploadModal }] = useModal();
+  const props = defineProps(uploadContainerProps);
 
-      //   预览modal
-      const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
+  const emit = defineEmits(['change', 'delete', 'preview-delete', 'update:value']);
 
-      const fileList = ref<string[]>([]);
+  const attrs = useAttrs();
+  const { t } = useI18n();
+  // 上传modal
+  const [registerUploadModal, { openModal: openUploadModal }] = useModal();
 
-      const showPreview = computed(() => {
-        const { emptyHidePreview } = props;
-        if (!emptyHidePreview) return true;
-        return emptyHidePreview ? fileList.value.length > 0 : true;
-      });
+  //   预览modal
+  const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
 
-      const bindValue = computed(() => {
-        const value = { ...attrs, ...props };
-        return omit(value, 'onChange');
-      });
+  const fileList = ref<string[]>([]);
 
-      watch(
-        () => props.value,
-        (value = []) => {
-          fileList.value = isArray(value) ? value : [];
-        },
-        { immediate: true },
-      );
-
-      // 上传modal保存操作
-      function handleChange(urls: string[]) {
-        fileList.value = [...unref(fileList), ...(urls || [])];
-        emit('update:value', fileList.value);
-        emit('change', fileList.value);
-      }
-
-      // 预览modal保存操作
-      function handlePreviewChange(urls: string[]) {
-        fileList.value = [...(urls || [])];
-        emit('update:value', fileList.value);
-        emit('change', fileList.value);
-      }
-
-      function handleDelete(record: Recordable<any>) {
-        emit('delete', record);
-      }
-
-      function handlePreviewDelete(url: string) {
-        emit('preview-delete', url);
-      }
-
-      return {
-        registerUploadModal,
-        openUploadModal,
-        handleChange,
-        handlePreviewChange,
-        registerPreviewModal,
-        openPreviewModal,
-        fileList,
-        showPreview,
-        bindValue,
-        handleDelete,
-        handlePreviewDelete,
-        t,
-      };
-    },
+  const showPreview = computed(() => {
+    const { emptyHidePreview } = props;
+    if (!emptyHidePreview) return true;
+    return emptyHidePreview ? fileList.value.length > 0 : true;
   });
+
+  const bindValue = computed(() => {
+    const value = { ...attrs, ...props };
+    return omit(value, 'onChange');
+  });
+
+  watch(
+    () => props.value,
+    (value = []) => {
+      fileList.value = isArray(value) ? value : [];
+    },
+    { immediate: true },
+  );
+
+  // 上传modal保存操作
+  function handleChange(urls: string[]) {
+    fileList.value = [...unref(fileList), ...(urls || [])];
+    emit('update:value', fileList.value);
+    emit('change', fileList.value);
+  }
+
+  // 预览modal保存操作
+  function handlePreviewChange(urls: string[]) {
+    fileList.value = [...(urls || [])];
+    emit('update:value', fileList.value);
+    emit('change', fileList.value);
+  }
+
+  function handleDelete(record: Recordable<any>) {
+    emit('delete', record);
+  }
+
+  function handlePreviewDelete(url: string) {
+    emit('preview-delete', url);
+  }
 </script>
diff --git a/src/components/Upload/src/components/FileList.vue b/src/components/Upload/src/components/FileList.vue
index 9d32018bd..4c545bfd0 100644
--- a/src/components/Upload/src/components/FileList.vue
+++ b/src/components/Upload/src/components/FileList.vue
@@ -1,8 +1,8 @@
 <script lang="tsx">
   import { fileListProps } from '../props';
-  import { isFunction, isDef } from '/@/utils/is';
-  import { useSortable } from '/@/hooks/web/useSortable';
-  import { useModalContext } from '/@/components/Modal/src/hooks/useModalContext';
+  import { isFunction, isDef } from '@/utils/is';
+  import { useSortable } from '@/hooks/web/useSortable';
+  import { useModalContext } from '@/components/Modal/src/hooks/useModalContext';
   import { defineComponent, CSSProperties, watch, nextTick, ref, onMounted } from 'vue';
 
   export default defineComponent({
diff --git a/src/components/Upload/src/components/ImageUpload.vue b/src/components/Upload/src/components/ImageUpload.vue
index fe5c340dc..f5a39268f 100644
--- a/src/components/Upload/src/components/ImageUpload.vue
+++ b/src/components/Upload/src/components/ImageUpload.vue
@@ -23,7 +23,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="ImageUpload">
+<script lang="ts" setup>
   import { ref, toRefs, watch } from 'vue';
   import { PlusOutlined } from '@ant-design/icons-vue';
   import { Upload, Modal } from 'ant-design-vue';
@@ -37,6 +37,8 @@
   import { uploadContainerProps } from '../props';
   import { isImgTypeByName } from '../helper';
 
+  defineOptions({ name: 'ImageUpload' });
+
   const emit = defineEmits(['change', 'update:value', 'delete']);
   const props = defineProps({
     ...uploadContainerProps,
diff --git a/src/components/Upload/src/components/ThumbUrl.vue b/src/components/Upload/src/components/ThumbUrl.vue
index 1b268dcf9..e4bc577d8 100644
--- a/src/components/Upload/src/components/ThumbUrl.vue
+++ b/src/components/Upload/src/components/ThumbUrl.vue
@@ -3,17 +3,13 @@
     <Image v-if="fileUrl" :src="fileUrl" :width="104" />
   </span>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { propTypes } from '/@/utils/propTypes';
+<script lang="ts" setup>
+  import { propTypes } from '@/utils/propTypes';
   import { Image } from 'ant-design-vue';
 
-  export default defineComponent({
-    components: { Image },
-    props: {
-      fileUrl: propTypes.string.def(''),
-      fileName: propTypes.string.def(''),
-    },
+  defineProps({
+    fileUrl: propTypes.string.def(''),
+    fileName: propTypes.string.def(''),
   });
 </script>
 <style lang="less">
diff --git a/src/components/Upload/src/components/UploadModal.vue b/src/components/Upload/src/components/UploadModal.vue
index f97701779..95dadc726 100644
--- a/src/components/Upload/src/components/UploadModal.vue
+++ b/src/components/Upload/src/components/UploadModal.vue
@@ -48,251 +48,225 @@
     />
   </BasicModal>
 </template>
-<script lang="ts">
-  import { defineComponent, reactive, ref, toRefs, unref, computed, PropType } from 'vue';
+<script lang="ts" setup>
+  import { ref, toRefs, unref, computed, PropType } from 'vue';
   import { Upload, Alert } from 'ant-design-vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicModal, useModalInner } from '@/components/Modal';
   // hooks
   import { useUploadType } from '../hooks/useUpload';
-  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useMessage } from '@/hooks/web/useMessage';
   //   types
   import { FileItem, UploadResultStatus } from '../types/typing';
   import { basicProps } from '../props';
   import { createTableColumns, createActionColumn } from './data';
   // utils
   import { checkImgType, getBase64WithFile } from '../helper';
-  import { buildUUID } from '/@/utils/uuid';
-  import { isFunction } from '/@/utils/is';
-  import { warn } from '/@/utils/log';
+  import { buildUUID } from '@/utils/uuid';
+  import { isFunction } from '@/utils/is';
+  import { warn } from '@/utils/log';
   import FileList from './FileList.vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
 
-  export default defineComponent({
-    components: { BasicModal, Upload, Alert, FileList },
-    props: {
-      ...basicProps,
-      previewFileList: {
-        type: Array as PropType<string[]>,
-        default: () => [],
-      },
-    },
-    emits: ['change', 'register', 'delete'],
-    setup(props, { emit }) {
-      const state = reactive<{ fileList: FileItem[] }>({
-        fileList: [],
-      });
-
-      //   是否正在上传
-      const isUploadingRef = ref(false);
-      const fileListRef = ref<FileItem[]>([]);
-      const { accept, helpText, maxNumber, maxSize } = toRefs(props);
-
-      const { t } = useI18n();
-      const [register, { closeModal }] = useModalInner();
-
-      const { getStringAccept, getHelpText } = useUploadType({
-        acceptRef: accept,
-        helpTextRef: helpText,
-        maxNumberRef: maxNumber,
-        maxSizeRef: maxSize,
-      });
-
-      const { createMessage } = useMessage();
-
-      const getIsSelectFile = computed(() => {
-        return (
-          fileListRef.value.length > 0 &&
-          !fileListRef.value.every((item) => item.status === UploadResultStatus.SUCCESS)
-        );
-      });
-
-      const getOkButtonProps = computed(() => {
-        const someSuccess = fileListRef.value.some(
-          (item) => item.status === UploadResultStatus.SUCCESS,
-        );
-        return {
-          disabled: isUploadingRef.value || fileListRef.value.length === 0 || !someSuccess,
-        };
-      });
-
-      const getUploadBtnText = computed(() => {
-        const someError = fileListRef.value.some(
-          (item) => item.status === UploadResultStatus.ERROR,
-        );
-        return isUploadingRef.value
-          ? t('component.upload.uploading')
-          : someError
-          ? t('component.upload.reUploadFailed')
-          : t('component.upload.startUpload');
-      });
-
-      // 上传前校验
-      function beforeUpload(file: File) {
-        const { size, name } = file;
-        const { maxSize } = props;
-        // 设置最大值，则判断
-        if (maxSize && file.size / 1024 / 1024 >= maxSize) {
-          createMessage.error(t('component.upload.maxSizeMultiple', [maxSize]));
-          return false;
-        }
-
-        const commonItem = {
-          uuid: buildUUID(),
-          file,
-          size,
-          name,
-          percent: 0,
-          type: name.split('.').pop(),
-        };
-        // 生成图片缩略图
-        if (checkImgType(file)) {
-          // beforeUpload，如果异步会调用自带上传方法
-          // file.thumbUrl = await getBase64(file);
-          getBase64WithFile(file).then(({ result: thumbUrl }) => {
-            fileListRef.value = [
-              ...unref(fileListRef),
-              {
-                thumbUrl,
-                ...commonItem,
-              },
-            ];
-          });
-        } else {
-          fileListRef.value = [...unref(fileListRef), commonItem];
-        }
-        return false;
-      }
-
-      // 删除
-      function handleRemove(record: FileItem) {
-        const index = fileListRef.value.findIndex((item) => item.uuid === record.uuid);
-        index !== -1 && fileListRef.value.splice(index, 1);
-        emit('delete', record);
-      }
-
-      async function uploadApiByItem(item: FileItem) {
-        const { api } = props;
-        if (!api || !isFunction(api)) {
-          return warn('upload api must exist and be a function');
-        }
-        try {
-          item.status = UploadResultStatus.UPLOADING;
-          const ret = await props.api?.(
-            {
-              data: {
-                ...(props.uploadParams || {}),
-              },
-              file: item.file,
-              name: props.name,
-              filename: props.filename,
-            },
-            function onUploadProgress(progressEvent: ProgressEvent) {
-              const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
-              item.percent = complete;
-            },
-          );
-          const { data } = ret;
-          item.status = UploadResultStatus.SUCCESS;
-          item.response = data;
-          return {
-            success: true,
-            error: null,
-          };
-        } catch (e) {
-          console.log(e);
-          item.status = UploadResultStatus.ERROR;
-          return {
-            success: false,
-            error: e,
-          };
-        }
-      }
-
-      // 点击开始上传
-      async function handleStartUpload() {
-        const { maxNumber } = props;
-        if ((fileListRef.value.length + props.previewFileList?.length ?? 0) > maxNumber) {
-          return createMessage.warning(t('component.upload.maxNumber', [maxNumber]));
-        }
-        try {
-          isUploadingRef.value = true;
-          // 只上传不是成功状态的
-          const uploadFileList =
-            fileListRef.value.filter((item) => item.status !== UploadResultStatus.SUCCESS) || [];
-          const data = await Promise.all(
-            uploadFileList.map((item) => {
-              return uploadApiByItem(item);
-            }),
-          );
-          isUploadingRef.value = false;
-          // 生产环境:抛出错误
-          const errorList = data.filter((item: any) => !item.success);
-          if (errorList.length > 0) throw errorList;
-        } catch (e) {
-          isUploadingRef.value = false;
-          throw e;
-        }
-      }
-
-      //   点击保存
-      function handleOk() {
-        const { maxNumber } = props;
-
-        if (fileListRef.value.length > maxNumber) {
-          return createMessage.warning(t('component.upload.maxNumber', [maxNumber]));
-        }
-        if (isUploadingRef.value) {
-          return createMessage.warning(t('component.upload.saveWarn'));
-        }
-        const fileList: string[] = [];
-
-        for (const item of fileListRef.value) {
-          const { status, response } = item;
-          if (status === UploadResultStatus.SUCCESS && response) {
-            fileList.push(response.url);
-          }
-        }
-        // 存在一个上传成功的即可保存
-        if (fileList.length <= 0) {
-          return createMessage.warning(t('component.upload.saveError'));
-        }
-        fileListRef.value = [];
-        closeModal();
-        emit('change', fileList);
-      }
-
-      // 点击关闭：则所有操作不保存，包括上传的
-      async function handleCloseFunc() {
-        if (!isUploadingRef.value) {
-          fileListRef.value = [];
-          return true;
-        } else {
-          createMessage.warning(t('component.upload.uploadWait'));
-          return false;
-        }
-      }
-
-      return {
-        columns: createTableColumns(),
-        actionColumn: createActionColumn(handleRemove),
-        register,
-        closeModal,
-        getHelpText,
-        getStringAccept,
-        getOkButtonProps,
-        beforeUpload,
-        fileListRef,
-        state,
-        isUploadingRef,
-        handleStartUpload,
-        handleOk,
-        handleCloseFunc,
-        getIsSelectFile,
-        getUploadBtnText,
-        t,
-      };
+  const props = defineProps({
+    ...basicProps,
+    previewFileList: {
+      type: Array as PropType<string[]>,
+      default: () => [],
     },
   });
+
+  const emit = defineEmits(['change', 'register', 'delete']);
+
+  const columns = createTableColumns();
+  const actionColumn = createActionColumn(handleRemove);
+
+  // 是否正在上传
+  const isUploadingRef = ref(false);
+  const fileListRef = ref<FileItem[]>([]);
+  const { accept, helpText, maxNumber, maxSize } = toRefs(props);
+
+  const { t } = useI18n();
+  const [register, { closeModal }] = useModalInner();
+
+  const { getStringAccept, getHelpText } = useUploadType({
+    acceptRef: accept,
+    helpTextRef: helpText,
+    maxNumberRef: maxNumber,
+    maxSizeRef: maxSize,
+  });
+
+  const { createMessage } = useMessage();
+
+  const getIsSelectFile = computed(() => {
+    return (
+      fileListRef.value.length > 0 &&
+      !fileListRef.value.every((item) => item.status === UploadResultStatus.SUCCESS)
+    );
+  });
+
+  const getOkButtonProps = computed(() => {
+    const someSuccess = fileListRef.value.some(
+      (item) => item.status === UploadResultStatus.SUCCESS,
+    );
+    return {
+      disabled: isUploadingRef.value || fileListRef.value.length === 0 || !someSuccess,
+    };
+  });
+
+  const getUploadBtnText = computed(() => {
+    const someError = fileListRef.value.some((item) => item.status === UploadResultStatus.ERROR);
+    return isUploadingRef.value
+      ? t('component.upload.uploading')
+      : someError
+      ? t('component.upload.reUploadFailed')
+      : t('component.upload.startUpload');
+  });
+
+  // 上传前校验
+  function beforeUpload(file: File) {
+    const { size, name } = file;
+    const { maxSize } = props;
+    // 设置最大值，则判断
+    if (maxSize && file.size / 1024 / 1024 >= maxSize) {
+      createMessage.error(t('component.upload.maxSizeMultiple', [maxSize]));
+      return false;
+    }
+
+    const commonItem = {
+      uuid: buildUUID(),
+      file,
+      size,
+      name,
+      percent: 0,
+      type: name.split('.').pop(),
+    };
+    // 生成图片缩略图
+    if (checkImgType(file)) {
+      // beforeUpload，如果异步会调用自带上传方法
+      // file.thumbUrl = await getBase64(file);
+      getBase64WithFile(file).then(({ result: thumbUrl }) => {
+        fileListRef.value = [
+          ...unref(fileListRef),
+          {
+            thumbUrl,
+            ...commonItem,
+          },
+        ];
+      });
+    } else {
+      fileListRef.value = [...unref(fileListRef), commonItem];
+    }
+    return false;
+  }
+
+  // 删除
+  function handleRemove(record: FileItem) {
+    const index = fileListRef.value.findIndex((item) => item.uuid === record.uuid);
+    index !== -1 && fileListRef.value.splice(index, 1);
+    emit('delete', record);
+  }
+
+  async function uploadApiByItem(item: FileItem) {
+    const { api } = props;
+    if (!api || !isFunction(api)) {
+      return warn('upload api must exist and be a function');
+    }
+    try {
+      item.status = UploadResultStatus.UPLOADING;
+      const ret = await props.api?.(
+        {
+          data: {
+            ...(props.uploadParams || {}),
+          },
+          file: item.file,
+          name: props.name,
+          filename: props.filename,
+        },
+        function onUploadProgress(progressEvent: ProgressEvent) {
+          const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
+          item.percent = complete;
+        },
+      );
+      const { data } = ret;
+      item.status = UploadResultStatus.SUCCESS;
+      item.response = data;
+      return {
+        success: true,
+        error: null,
+      };
+    } catch (e) {
+      console.log(e);
+      item.status = UploadResultStatus.ERROR;
+      return {
+        success: false,
+        error: e,
+      };
+    }
+  }
+
+  // 点击开始上传
+  async function handleStartUpload() {
+    const { maxNumber } = props;
+    if ((fileListRef.value.length + props.previewFileList?.length ?? 0) > maxNumber) {
+      return createMessage.warning(t('component.upload.maxNumber', [maxNumber]));
+    }
+    try {
+      isUploadingRef.value = true;
+      // 只上传不是成功状态的
+      const uploadFileList =
+        fileListRef.value.filter((item) => item.status !== UploadResultStatus.SUCCESS) || [];
+      const data = await Promise.all(
+        uploadFileList.map((item) => {
+          return uploadApiByItem(item);
+        }),
+      );
+      isUploadingRef.value = false;
+      // 生产环境:抛出错误
+      const errorList = data.filter((item: any) => !item.success);
+      if (errorList.length > 0) throw errorList;
+    } catch (e) {
+      isUploadingRef.value = false;
+      throw e;
+    }
+  }
+
+  //   点击保存
+  function handleOk() {
+    const { maxNumber } = props;
+
+    if (fileListRef.value.length > maxNumber) {
+      return createMessage.warning(t('component.upload.maxNumber', [maxNumber]));
+    }
+    if (isUploadingRef.value) {
+      return createMessage.warning(t('component.upload.saveWarn'));
+    }
+    const fileList: string[] = [];
+
+    for (const item of fileListRef.value) {
+      const { status, response } = item;
+      if (status === UploadResultStatus.SUCCESS && response) {
+        fileList.push(response.url);
+      }
+    }
+    // 存在一个上传成功的即可保存
+    if (fileList.length <= 0) {
+      return createMessage.warning(t('component.upload.saveError'));
+    }
+    fileListRef.value = [];
+    closeModal();
+    emit('change', fileList);
+  }
+
+  // 点击关闭：则所有操作不保存，包括上传的
+  async function handleCloseFunc() {
+    if (!isUploadingRef.value) {
+      fileListRef.value = [];
+      return true;
+    } else {
+      createMessage.warning(t('component.upload.uploadWait'));
+      return false;
+    }
+  }
 </script>
 <style lang="less">
   .upload-modal {
diff --git a/src/components/Upload/src/components/UploadPreviewModal.vue b/src/components/Upload/src/components/UploadPreviewModal.vue
index 74dcd3161..cec69fb02 100644
--- a/src/components/Upload/src/components/UploadPreviewModal.vue
+++ b/src/components/Upload/src/components/UploadPreviewModal.vue
@@ -10,72 +10,63 @@
     <FileList :dataSource="fileListRef" :columns="columns" :actionColumn="actionColumn" />
   </BasicModal>
 </template>
-<script lang="ts">
-  import { defineComponent, watch, ref } from 'vue';
+<script lang="ts" setup>
+  import { watch, ref } from 'vue';
   import FileList from './FileList.vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicModal, useModalInner } from '@/components/Modal';
   import { previewProps } from '../props';
   import { PreviewFileItem } from '../types/typing';
-  import { downloadByUrl } from '/@/utils/file/download';
+  import { downloadByUrl } from '@/utils/file/download';
   import { createPreviewColumns, createPreviewActionColumn } from './data';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { isArray } from '/@/utils/is';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { isArray } from '@/utils/is';
 
-  export default defineComponent({
-    components: { BasicModal, FileList },
-    props: previewProps,
-    emits: ['list-change', 'register', 'delete'],
-    setup(props, { emit }) {
-      const [register, { closeModal }] = useModalInner();
-      const { t } = useI18n();
+  const props = defineProps(previewProps);
 
-      const fileListRef = ref<PreviewFileItem[]>([]);
-      watch(
-        () => props.value,
-        (value) => {
-          if (!isArray(value)) value = [];
-          fileListRef.value = value
-            .filter((item) => !!item)
-            .map((item) => {
-              return {
-                url: item,
-                type: item.split('.').pop() || '',
-                name: item.split('/').pop() || '',
-              };
-            });
-        },
-        { immediate: true },
-      );
+  const emit = defineEmits(['list-change', 'register', 'delete']);
 
-      // 删除
-      function handleRemove(record: PreviewFileItem) {
-        const index = fileListRef.value.findIndex((item) => item.url === record.url);
-        if (index !== -1) {
-          const removed = fileListRef.value.splice(index, 1);
-          emit('delete', removed[0].url);
-          emit(
-            'list-change',
-            fileListRef.value.map((item) => item.url),
-          );
-        }
-      }
+  const columns = createPreviewColumns() as any[];
+  const actionColumn = createPreviewActionColumn({ handleRemove, handleDownload }) as any;
 
-      // 下载
-      function handleDownload(record: PreviewFileItem) {
-        const { url = '' } = record;
-        downloadByUrl({ url });
-      }
+  const [register] = useModalInner();
+  const { t } = useI18n();
 
-      return {
-        t,
-        register,
-        closeModal,
-        fileListRef,
-        columns: createPreviewColumns() as any[],
-        actionColumn: createPreviewActionColumn({ handleRemove, handleDownload }) as any,
-      };
+  const fileListRef = ref<PreviewFileItem[]>([]);
+  watch(
+    () => props.value,
+    (value) => {
+      if (!isArray(value)) value = [];
+      fileListRef.value = value
+        .filter((item) => !!item)
+        .map((item) => {
+          return {
+            url: item,
+            type: item.split('.').pop() || '',
+            name: item.split('/').pop() || '',
+          };
+        });
     },
-  });
+    { immediate: true },
+  );
+
+  // 删除
+  function handleRemove(record: PreviewFileItem) {
+    const index = fileListRef.value.findIndex((item) => item.url === record.url);
+    if (index !== -1) {
+      const removed = fileListRef.value.splice(index, 1);
+      emit('delete', removed[0].url);
+      emit(
+        'list-change',
+        fileListRef.value.map((item) => item.url),
+      );
+    }
+  }
+
+  // 下载
+  function handleDownload(record: PreviewFileItem) {
+    const { url = '' } = record;
+    downloadByUrl({ url });
+  }
 </script>
 <style lang="less">
   .upload-preview-modal {
diff --git a/src/components/Upload/src/components/data.tsx b/src/components/Upload/src/components/data.tsx
index e1eb80ba4..7c6415dfa 100644
--- a/src/components/Upload/src/components/data.tsx
+++ b/src/components/Upload/src/components/data.tsx
@@ -1,10 +1,10 @@
-import type { BasicColumn, ActionItem } from '/@/components/Table';
+import type { BasicColumn, ActionItem } from '@/components/Table';
 import { FileBasicColumn, FileItem, PreviewFileItem, UploadResultStatus } from '../types/typing';
 import { isImgTypeByName } from '../helper';
 import { Progress, Tag } from 'ant-design-vue';
-import TableAction from '/@/components/Table/src/components/TableAction.vue';
+import TableAction from '@/components/Table/src/components/TableAction.vue';
 import ThumbUrl from './ThumbUrl.vue';
-import { useI18n } from '/@/hooks/web/useI18n';
+import { useI18n } from '@/hooks/web/useI18n';
 
 const { t } = useI18n();
 
diff --git a/src/components/Upload/src/hooks/useUpload.ts b/src/components/Upload/src/hooks/useUpload.ts
index fb178d036..53fa38065 100644
--- a/src/components/Upload/src/hooks/useUpload.ts
+++ b/src/components/Upload/src/hooks/useUpload.ts
@@ -1,5 +1,5 @@
 import { Ref, unref, computed } from 'vue';
-import { useI18n } from '/@/hooks/web/useI18n';
+import { useI18n } from '@/hooks/web/useI18n';
 
 const { t } = useI18n();
 export function useUploadType({
diff --git a/src/components/Upload/src/props.ts b/src/components/Upload/src/props.ts
index 7a38ef707..154b654a2 100644
--- a/src/components/Upload/src/props.ts
+++ b/src/components/Upload/src/props.ts
@@ -3,7 +3,7 @@ import { FileBasicColumn } from './types/typing';
 
 import type { Options } from 'sortablejs';
 
-import { Merge } from '/@/utils/types';
+import { Merge } from '@/utils/types';
 
 type SortableOptions = Merge<
   Omit<Options, 'onEnd'>,
diff --git a/src/components/Upload/src/types/typing.ts b/src/components/Upload/src/types/typing.ts
index ab645040e..0e3c019c2 100644
--- a/src/components/Upload/src/types/typing.ts
+++ b/src/components/Upload/src/types/typing.ts
@@ -1,5 +1,5 @@
-import { BasicColumn } from '/@/components/Table';
-import { UploadApiResult } from '/@/api/sys/model/uploadModel';
+import { BasicColumn } from '@/components/Table';
+import { UploadApiResult } from '@/api/sys/model/uploadModel';
 
 export enum UploadResultStatus {
   SUCCESS = 'success',
diff --git a/src/components/Verify/index.ts b/src/components/Verify/index.ts
index 7c67101b6..13df25e02 100644
--- a/src/components/Verify/index.ts
+++ b/src/components/Verify/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils/index';
+import { withInstall } from '@/utils';
 import basicDragVerify from './src/DragVerify.vue';
 import rotateDragVerify from './src/ImgRotate.vue';
 
diff --git a/src/components/Verify/src/DragVerify.vue b/src/components/Verify/src/DragVerify.vue
index 09bbc7bc2..3b5dc04eb 100644
--- a/src/components/Verify/src/DragVerify.vue
+++ b/src/components/Verify/src/DragVerify.vue
@@ -2,9 +2,9 @@
   import type { Ref } from 'vue';
   import { defineComponent, ref, computed, unref, reactive, watch, watchEffect } from 'vue';
   import { useTimeoutFn } from '@vben/hooks';
-  import { useEventListener } from '/@/hooks/event/useEventListener';
+  import { useEventListener } from '@/hooks/event/useEventListener';
   import { basicProps } from './props';
-  import { getSlot } from '/@/utils/helper/tsxHelper';
+  import { getSlot } from '@/utils/helper/tsxHelper';
   import { CheckOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
 
   export default defineComponent({
diff --git a/src/components/Verify/src/ImgRotate.vue b/src/components/Verify/src/ImgRotate.vue
index 831429584..9e6a4f92d 100644
--- a/src/components/Verify/src/ImgRotate.vue
+++ b/src/components/Verify/src/ImgRotate.vue
@@ -3,9 +3,9 @@
   import { defineComponent, computed, unref, reactive, watch, ref } from 'vue';
   import { useTimeoutFn } from '@vben/hooks';
   import BasicDragVerify from './DragVerify.vue';
-  import { hackCss } from '/@/utils/domUtils';
+  import { hackCss } from '@/utils/domUtils';
   import { rotateProps } from './props';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
 
   export default defineComponent({
     name: 'ImgRotateDragVerify',
diff --git a/src/components/Verify/src/props.ts b/src/components/Verify/src/props.ts
index d09a57ab5..8805200c2 100644
--- a/src/components/Verify/src/props.ts
+++ b/src/components/Verify/src/props.ts
@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import { useI18n } from '/@/hooks/web/useI18n';
+import { useI18n } from '@/hooks/web/useI18n';
 
 const { t } = useI18n();
 export const basicProps = {
diff --git a/src/components/VirtualScroll/index.ts b/src/components/VirtualScroll/index.ts
index a4c608975..719abae03 100644
--- a/src/components/VirtualScroll/index.ts
+++ b/src/components/VirtualScroll/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils/index';
+import { withInstall } from '@/utils';
 import vScroll from './src/VirtualScroll.vue';
 
 export const VScroll = withInstall(vScroll);
diff --git a/src/components/VirtualScroll/src/VirtualScroll.vue b/src/components/VirtualScroll/src/VirtualScroll.vue
index 969ce13f8..255100327 100644
--- a/src/components/VirtualScroll/src/VirtualScroll.vue
+++ b/src/components/VirtualScroll/src/VirtualScroll.vue
@@ -11,8 +11,8 @@
     CSSProperties,
     PropType,
   } from 'vue';
-  import { useEventListener } from '/@/hooks/event/useEventListener';
-  import { getSlot } from '/@/utils/helper/tsxHelper';
+  import { useEventListener } from '@/hooks/event/useEventListener';
+  import { getSlot } from '@/utils/helper/tsxHelper';
 
   type NumberOrNumberString = PropType<string | number | undefined>;
 
diff --git a/src/components/VxeTable/index.ts b/src/components/VxeTable/index.ts
index bc24c3925..be1212960 100644
--- a/src/components/VxeTable/index.ts
+++ b/src/components/VxeTable/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '/@/utils';
+import { withInstall } from '@/utils';
 import vxeBasicTable from './src/VxeBasicTable';
 import { VXETable } from 'vxe-table';
 import VXETablePluginAntd from './src/components';
diff --git a/src/components/VxeTable/src/VxeBasicTable.tsx b/src/components/VxeTable/src/VxeBasicTable.tsx
index 8133142a4..e48cb10cf 100644
--- a/src/components/VxeTable/src/VxeBasicTable.tsx
+++ b/src/components/VxeTable/src/VxeBasicTable.tsx
@@ -14,7 +14,7 @@ import type {
 } from 'vxe-table';
 import { Grid as VxeGrid } from 'vxe-table';
 
-import { extendSlots } from '/@/utils/helper/tsxHelper';
+import { extendSlots } from '@/utils/helper/tsxHelper';
 import { gridComponentMethodKeys } from './methods';
 import { omit } from 'lodash-es';
 
diff --git a/src/components/VxeTable/src/componentMap.ts b/src/components/VxeTable/src/componentMap.ts
index d1ca62e0d..04a632ec7 100644
--- a/src/components/VxeTable/src/componentMap.ts
+++ b/src/components/VxeTable/src/componentMap.ts
@@ -1,7 +1,7 @@
 import type { Component } from 'vue';
 
 import type { ComponentType } from './componentType';
-import { ApiSelect, ApiTreeSelect } from '/@/components/Form';
+import { ApiSelect, ApiTreeSelect } from '@/components/Form';
 import {
   Input,
   Select,
@@ -17,7 +17,7 @@ import {
   Rate,
   Empty,
 } from 'ant-design-vue';
-import { Button } from '/@/components/Button';
+import { Button } from '@/components/Button';
 
 const componentMap = new Map<ComponentType, Component>();
 
diff --git a/src/components/VxeTable/src/helper.ts b/src/components/VxeTable/src/helper.ts
index 07aa8fded..25e16b3fc 100644
--- a/src/components/VxeTable/src/helper.ts
+++ b/src/components/VxeTable/src/helper.ts
@@ -1,5 +1,5 @@
 import { ComponentType } from './componentType';
-import { useI18n } from '/@/hooks/web/useI18n';
+import { useI18n } from '@/hooks/web/useI18n';
 
 const { t } = useI18n();
 
diff --git a/src/components/VxeTable/src/setting.ts b/src/components/VxeTable/src/setting.ts
index a1df882a9..ba3d0619e 100644
--- a/src/components/VxeTable/src/setting.ts
+++ b/src/components/VxeTable/src/setting.ts
@@ -1,4 +1,4 @@
 import { VXETable } from '..';
-import componentSetting from '/@/settings/componentSetting';
+import componentSetting from '@/settings/componentSetting';
 
 VXETable.setup(componentSetting.vxeTable);
diff --git a/src/hooks/component/usePageContext.ts b/src/hooks/component/usePageContext.ts
index 12cc16057..1e2e7158d 100644
--- a/src/hooks/component/usePageContext.ts
+++ b/src/hooks/component/usePageContext.ts
@@ -1,5 +1,5 @@
 import type { InjectionKey, ComputedRef, Ref } from 'vue';
-import { createContext, useContext } from '/@/hooks/core/useContext';
+import { createContext, useContext } from '@/hooks/core/useContext';
 
 export interface PageContextProps {
   contentHeight: ComputedRef<number>;
diff --git a/src/hooks/event/useBreakpoint.ts b/src/hooks/event/useBreakpoint.ts
index 0ca3a6b4c..b51b03ee7 100644
--- a/src/hooks/event/useBreakpoint.ts
+++ b/src/hooks/event/useBreakpoint.ts
@@ -1,6 +1,6 @@
 import { ref, computed, ComputedRef, unref } from 'vue';
-import { useEventListener } from '/@/hooks/event/useEventListener';
-import { screenMap, sizeEnum, screenEnum } from '/@/enums/breakpointEnum';
+import { useEventListener } from '@/hooks/event/useEventListener';
+import { screenMap, sizeEnum, screenEnum } from '@/enums/breakpointEnum';
 
 // 可以用这个替换，优化项
 // import { Grid } from 'ant-design-vue';
diff --git a/src/hooks/event/useScroll.ts b/src/hooks/event/useScroll.ts
index cc60f9bf5..082712074 100644
--- a/src/hooks/event/useScroll.ts
+++ b/src/hooks/event/useScroll.ts
@@ -1,7 +1,7 @@
 import type { Ref } from 'vue';
 
 import { ref, onMounted, watch, onUnmounted } from 'vue';
-import { isWindow, isObject } from '/@/utils/is';
+import { isWindow, isObject } from '@/utils/is';
 import { useThrottleFn } from '@vueuse/core';
 
 export function useScroll(
diff --git a/src/hooks/setting/index.ts b/src/hooks/setting/index.ts
index 2f0db3adc..eeb2bad4a 100644
--- a/src/hooks/setting/index.ts
+++ b/src/hooks/setting/index.ts
@@ -1,6 +1,6 @@
 import type { GlobConfig } from '/#/config';
 
-import { getAppEnvConfig } from '/@/utils/env';
+import { getAppEnvConfig } from '@/utils/env';
 
 export const useGlobSetting = (): Readonly<GlobConfig> => {
   const { VITE_GLOB_APP_TITLE, VITE_GLOB_API_URL, VITE_GLOB_API_URL_PREFIX, VITE_GLOB_UPLOAD_URL } =
diff --git a/src/hooks/setting/useDarkModeTheme.ts b/src/hooks/setting/useDarkModeTheme.ts
index cd923506c..157c4961c 100644
--- a/src/hooks/setting/useDarkModeTheme.ts
+++ b/src/hooks/setting/useDarkModeTheme.ts
@@ -1,7 +1,7 @@
 import { computed } from 'vue';
 import { theme } from 'ant-design-vue';
-import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-import { ThemeEnum } from '/@/enums/appEnum';
+import { useRootSetting } from '@/hooks/setting/useRootSetting';
+import { ThemeEnum } from '@/enums/appEnum';
 
 export function useDarkModeTheme() {
   const { getDarkMode } = useRootSetting();
diff --git a/src/hooks/setting/useHeaderSetting.ts b/src/hooks/setting/useHeaderSetting.ts
index 4ff8b18ab..d9369af99 100644
--- a/src/hooks/setting/useHeaderSetting.ts
+++ b/src/hooks/setting/useHeaderSetting.ts
@@ -2,12 +2,12 @@ import type { HeaderSetting } from '/#/config';
 
 import { computed, unref } from 'vue';
 
-import { useAppStore } from '/@/store/modules/app';
+import { useAppStore } from '@/store/modules/app';
 
-import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-import { useFullContent } from '/@/hooks/web/useFullContent';
-import { MenuModeEnum } from '/@/enums/menuEnum';
+import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+import { useRootSetting } from '@/hooks/setting/useRootSetting';
+import { useFullContent } from '@/hooks/web/useFullContent';
+import { MenuModeEnum } from '@/enums/menuEnum';
 
 export function useHeaderSetting() {
   const { getFullContent } = useFullContent();
diff --git a/src/hooks/setting/useMenuSetting.ts b/src/hooks/setting/useMenuSetting.ts
index e3c62ed6c..ed43e737e 100644
--- a/src/hooks/setting/useMenuSetting.ts
+++ b/src/hooks/setting/useMenuSetting.ts
@@ -2,11 +2,11 @@ import type { MenuSetting } from '/#/config';
 
 import { computed, unref, ref } from 'vue';
 
-import { useAppStore } from '/@/store/modules/app';
+import { useAppStore } from '@/store/modules/app';
 
-import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
-import { MenuModeEnum, MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
-import { useFullContent } from '/@/hooks/web/useFullContent';
+import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '@/enums/appEnum';
+import { MenuModeEnum, MenuTypeEnum, TriggerEnum } from '@/enums/menuEnum';
+import { useFullContent } from '@/hooks/web/useFullContent';
 
 const mixSideHasChildren = ref(false);
 
diff --git a/src/hooks/setting/useMultipleTabSetting.ts b/src/hooks/setting/useMultipleTabSetting.ts
index 5908b9c20..7843fa60b 100644
--- a/src/hooks/setting/useMultipleTabSetting.ts
+++ b/src/hooks/setting/useMultipleTabSetting.ts
@@ -2,7 +2,7 @@ import type { MultiTabsSetting } from '/#/config';
 
 import { computed } from 'vue';
 
-import { useAppStore } from '/@/store/modules/app';
+import { useAppStore } from '@/store/modules/app';
 
 export function useMultipleTabSetting() {
   const appStore = useAppStore();
diff --git a/src/hooks/setting/useRootSetting.ts b/src/hooks/setting/useRootSetting.ts
index 4976e40ac..f9b970a64 100644
--- a/src/hooks/setting/useRootSetting.ts
+++ b/src/hooks/setting/useRootSetting.ts
@@ -2,8 +2,8 @@ import type { ProjectConfig } from '/#/config';
 
 import { computed } from 'vue';
 
-import { useAppStore } from '/@/store/modules/app';
-import { ContentEnum, ThemeEnum } from '/@/enums/appEnum';
+import { useAppStore } from '@/store/modules/app';
+import { ContentEnum, ThemeEnum } from '@/enums/appEnum';
 
 type RootSetting = Omit<
   ProjectConfig,
diff --git a/src/hooks/setting/useTransitionSetting.ts b/src/hooks/setting/useTransitionSetting.ts
index b6d421afb..9ba197776 100644
--- a/src/hooks/setting/useTransitionSetting.ts
+++ b/src/hooks/setting/useTransitionSetting.ts
@@ -2,7 +2,7 @@ import type { TransitionSetting } from '/#/config';
 
 import { computed } from 'vue';
 
-import { useAppStore } from '/@/store/modules/app';
+import { useAppStore } from '@/store/modules/app';
 
 export function useTransitionSetting() {
   const appStore = useAppStore();
diff --git a/src/hooks/web/useAppInject.ts b/src/hooks/web/useAppInject.ts
index 7d6efb2b8..cc3cc1fdf 100644
--- a/src/hooks/web/useAppInject.ts
+++ b/src/hooks/web/useAppInject.ts
@@ -1,4 +1,4 @@
-import { useAppProviderContext } from '/@/components/Application';
+import { useAppProviderContext } from '@/components/Application';
 import { computed, unref } from 'vue';
 
 export function useAppInject() {
diff --git a/src/hooks/web/useContentHeight.ts b/src/hooks/web/useContentHeight.ts
index 558cd51e4..af7ff1bc0 100644
--- a/src/hooks/web/useContentHeight.ts
+++ b/src/hooks/web/useContentHeight.ts
@@ -1,8 +1,8 @@
 import { ComputedRef, isRef, nextTick, Ref, ref, unref, watch } from 'vue';
 import { onMountedOrActivated, useWindowSizeFn } from '@vben/hooks';
-import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';
-import { getViewportOffset } from '/@/utils/domUtils';
-import { isNumber, isString } from '/@/utils/is';
+import { useLayoutHeight } from '@/layouts/default/content/useContentViewHeight';
+import { getViewportOffset } from '@/utils/domUtils';
+import { isNumber, isString } from '@/utils/is';
 
 export interface CompensationHeight {
   // 使用 layout Footer 高度作为判断补偿高度的条件
diff --git a/src/hooks/web/useContextMenu.ts b/src/hooks/web/useContextMenu.ts
index 3237d35c6..72ab69682 100644
--- a/src/hooks/web/useContextMenu.ts
+++ b/src/hooks/web/useContextMenu.ts
@@ -1,6 +1,6 @@
 import { onUnmounted, getCurrentInstance } from 'vue';
-import { createContextMenu, destroyContextMenu } from '/@/components/ContextMenu';
-import type { ContextMenuItem } from '/@/components/ContextMenu';
+import { createContextMenu, destroyContextMenu } from '@/components/ContextMenu';
+import type { ContextMenuItem } from '@/components/ContextMenu';
 
 export type { ContextMenuItem };
 export function useContextMenu(authRemove = true) {
diff --git a/src/hooks/web/useDesign.ts b/src/hooks/web/useDesign.ts
index 046674b64..9f1e5b16f 100644
--- a/src/hooks/web/useDesign.ts
+++ b/src/hooks/web/useDesign.ts
@@ -1,4 +1,4 @@
-import { useAppProviderContext } from '/@/components/Application';
+import { useAppProviderContext } from '@/components/Application';
 // import { computed } from 'vue';
 // import { lowerFirst } from 'lodash-es';
 export function useDesign(scope: string) {
diff --git a/src/hooks/web/useECharts.ts b/src/hooks/web/useECharts.ts
index 643ce608f..c5478d797 100644
--- a/src/hooks/web/useECharts.ts
+++ b/src/hooks/web/useECharts.ts
@@ -3,11 +3,11 @@ import type { Ref } from 'vue';
 import { useTimeoutFn } from '@vben/hooks';
 import { tryOnUnmounted, useDebounceFn } from '@vueuse/core';
 import { unref, nextTick, watch, computed, ref } from 'vue';
-import { useEventListener } from '/@/hooks/event/useEventListener';
-import { useBreakpoint } from '/@/hooks/event/useBreakpoint';
-import echarts from '/@/utils/lib/echarts';
-import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+import { useEventListener } from '@/hooks/event/useEventListener';
+import { useBreakpoint } from '@/hooks/event/useBreakpoint';
+import echarts from '@/utils/lib/echarts';
+import { useRootSetting } from '@/hooks/setting/useRootSetting';
+import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
 
 export function useECharts(
   elRef: Ref<HTMLDivElement>,
diff --git a/src/hooks/web/useFullContent.ts b/src/hooks/web/useFullContent.ts
index 7dea07709..05285e745 100644
--- a/src/hooks/web/useFullContent.ts
+++ b/src/hooks/web/useFullContent.ts
@@ -1,6 +1,6 @@
 import { computed, unref } from 'vue';
 
-import { useAppStore } from '/@/store/modules/app';
+import { useAppStore } from '@/store/modules/app';
 
 import { useRouter } from 'vue-router';
 
diff --git a/src/hooks/web/useI18n.ts b/src/hooks/web/useI18n.ts
index 57f4b7bf3..3c553c95d 100644
--- a/src/hooks/web/useI18n.ts
+++ b/src/hooks/web/useI18n.ts
@@ -1,4 +1,4 @@
-import { i18n } from '/@/locales/setupI18n';
+import { i18n } from '@/locales/setupI18n';
 
 type I18nGlobalTranslation = {
   (key: string): string;
diff --git a/src/hooks/web/useLockPage.ts b/src/hooks/web/useLockPage.ts
index c543be954..90ce33696 100644
--- a/src/hooks/web/useLockPage.ts
+++ b/src/hooks/web/useLockPage.ts
@@ -1,10 +1,10 @@
 import { computed, onUnmounted, unref, watchEffect } from 'vue';
 import { useThrottleFn } from '@vueuse/core';
 
-import { useAppStore } from '/@/store/modules/app';
-import { useLockStore } from '/@/store/modules/lock';
+import { useAppStore } from '@/store/modules/app';
+import { useLockStore } from '@/store/modules/lock';
 
-import { useUserStore } from '/@/store/modules/user';
+import { useUserStore } from '@/store/modules/user';
 import { useRootSetting } from '../setting/useRootSetting';
 
 export function useLockPage() {
@@ -32,9 +32,12 @@ export function useLockPage() {
     }
     clear();
 
-    timeId = setTimeout(() => {
-      lockPage();
-    }, lockTime * 60 * 1000);
+    timeId = setTimeout(
+      () => {
+        lockPage();
+      },
+      lockTime * 60 * 1000,
+    );
   }
 
   function lockPage(): void {
diff --git a/src/hooks/web/useMessage.tsx b/src/hooks/web/useMessage.tsx
index 2789f06da..9806c9183 100644
--- a/src/hooks/web/useMessage.tsx
+++ b/src/hooks/web/useMessage.tsx
@@ -3,7 +3,7 @@ import { Modal, message as Message, notification } from 'ant-design-vue';
 import { InfoCircleFilled, CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons-vue';
 import { NotificationArgsProps, ConfigProps } from 'ant-design-vue/lib/notification';
 import { useI18n } from './useI18n';
-import { isString } from '/@/utils/is';
+import { isString } from '@/utils/is';
 
 export interface NotifyApi {
   info(config: NotificationArgsProps): void;
diff --git a/src/hooks/web/usePage.ts b/src/hooks/web/usePage.ts
index a4a5c73c2..1b43d59eb 100644
--- a/src/hooks/web/usePage.ts
+++ b/src/hooks/web/usePage.ts
@@ -1,10 +1,10 @@
 import type { RouteLocationRaw, Router } from 'vue-router';
 
-import { PageEnum } from '/@/enums/pageEnum';
+import { PageEnum } from '@/enums/pageEnum';
 import { unref } from 'vue';
 
 import { useRouter } from 'vue-router';
-import { REDIRECT_NAME } from '/@/router/constant';
+import { REDIRECT_NAME } from '@/router/constant';
 
 export type PathAsPageEnum<T> = T extends { path: string } ? T & { path: PageEnum } : T;
 export type RouteLocationRawEx = PathAsPageEnum<RouteLocationRaw>;
diff --git a/src/hooks/web/usePermission.ts b/src/hooks/web/usePermission.ts
index b997754fd..2ffc61eeb 100644
--- a/src/hooks/web/usePermission.ts
+++ b/src/hooks/web/usePermission.ts
@@ -1,21 +1,21 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { useAppStore } from '/@/store/modules/app';
-import { usePermissionStore } from '/@/store/modules/permission';
-import { useUserStore } from '/@/store/modules/user';
+import { useAppStore } from '@/store/modules/app';
+import { usePermissionStore } from '@/store/modules/permission';
+import { useUserStore } from '@/store/modules/user';
 
 import { useTabs } from './useTabs';
 
-import { router, resetRouter } from '/@/router';
-// import { RootRoute } from '/@/router/routes';
+import { router, resetRouter } from '@/router';
+// import { RootRoute } from '@/router/routes';
 
-import projectSetting from '/@/settings/projectSetting';
-import { PermissionModeEnum } from '/@/enums/appEnum';
-import { RoleEnum } from '/@/enums/roleEnum';
+import projectSetting from '@/settings/projectSetting';
+import { PermissionModeEnum } from '@/enums/appEnum';
+import { RoleEnum } from '@/enums/roleEnum';
 
 import { intersection } from 'lodash-es';
-import { isArray } from '/@/utils/is';
-import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+import { isArray } from '@/utils/is';
+import { useMultipleTabStore } from '@/store/modules/multipleTab';
 
 // User permissions related operations
 export function usePermission() {
diff --git a/src/hooks/web/useTabs.ts b/src/hooks/web/useTabs.ts
index 14dde2f86..ab13e459a 100644
--- a/src/hooks/web/useTabs.ts
+++ b/src/hooks/web/useTabs.ts
@@ -3,8 +3,8 @@ import type { RouteLocationNormalized, Router } from 'vue-router';
 import { useRouter } from 'vue-router';
 import { unref } from 'vue';
 
-import { useMultipleTabStore } from '/@/store/modules/multipleTab';
-import { useAppStore } from '/@/store/modules/app';
+import { useMultipleTabStore } from '@/store/modules/multipleTab';
+import { useAppStore } from '@/store/modules/app';
 
 enum TableActionEnum {
   REFRESH,
diff --git a/src/hooks/web/useTitle.ts b/src/hooks/web/useTitle.ts
index 675a5dba3..e3a7653bc 100644
--- a/src/hooks/web/useTitle.ts
+++ b/src/hooks/web/useTitle.ts
@@ -1,10 +1,10 @@
 import { watch, unref } from 'vue';
-import { useI18n } from '/@/hooks/web/useI18n';
+import { useI18n } from '@/hooks/web/useI18n';
 import { useTitle as usePageTitle } from '@vueuse/core';
-import { useGlobSetting } from '/@/hooks/setting';
+import { useGlobSetting } from '@/hooks/setting';
 import { useRouter } from 'vue-router';
-import { useLocaleStore } from '/@/store/modules/locale';
-import { REDIRECT_NAME } from '/@/router/constant';
+import { useLocaleStore } from '@/store/modules/locale';
+import { REDIRECT_NAME } from '@/router/constant';
 
 /**
  * Listening to page changes and dynamically changing site titles
diff --git a/src/hooks/web/useWatermark.ts b/src/hooks/web/useWatermark.ts
index 8674a2503..0adb0ce0d 100644
--- a/src/hooks/web/useWatermark.ts
+++ b/src/hooks/web/useWatermark.ts
@@ -1,7 +1,7 @@
 import { getCurrentInstance, onBeforeUnmount, ref, Ref, shallowRef, unref } from 'vue';
-import { useRafThrottle } from '/@/utils/domUtils';
-import { addResizeListener, removeResizeListener } from '/@/utils/event';
-import { isDef } from '/@/utils/is';
+import { useRafThrottle } from '@/utils/domUtils';
+import { addResizeListener, removeResizeListener } from '@/utils/event';
+import { isDef } from '@/utils/is';
 
 const watermarkSymbol = 'watermark-dom';
 
diff --git a/src/views/demo/comp/count-to/index.vue b/src/views/demo/comp/count-to/index.vue
index 1f5e3d91a..eb20c7342 100644
--- a/src/views/demo/comp/count-to/index.vue
+++ b/src/views/demo/comp/count-to/index.vue
@@ -37,7 +37,7 @@
 </template>
 <script lang="ts" setup>
   import { Card } from 'ant-design-vue';
-  import { CountTo } from '@/components/CountTo/index';
+  import { CountTo } from '@/components/CountTo';
   import { PageWrapper } from '@/components/Page';
 
   const CardGrid = Card.Grid;
diff --git a/src/views/demo/comp/modal/Modal4.vue b/src/views/demo/comp/modal/Modal4.vue
index c8f40515d..86dd6bb57 100644
--- a/src/views/demo/comp/modal/Modal4.vue
+++ b/src/views/demo/comp/modal/Modal4.vue
@@ -12,8 +12,8 @@
 </template>
 <script lang="ts" setup>
   import { ref, nextTick } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form';
 
   const schemas: FormSchema[] = [
     {
diff --git a/src/views/demo/comp/scroll/Action.vue b/src/views/demo/comp/scroll/Action.vue
index 7091cdee6..8bf2a4a1d 100644
--- a/src/views/demo/comp/scroll/Action.vue
+++ b/src/views/demo/comp/scroll/Action.vue
@@ -21,8 +21,8 @@
 </template>
 <script lang="ts" setup>
   import { ref, unref } from 'vue';
-  import { ScrollContainer, ScrollActionType } from '/@/components/Container/index';
-  import { PageWrapper } from '/@/components/Page';
+  import { ScrollContainer, ScrollActionType } from '@/components/Container';
+  import { PageWrapper } from '@/components/Page';
   import { type Nullable } from '@vben/types';
 
   const scrollRef = ref<Nullable<ScrollActionType>>(null);
diff --git a/src/views/demo/comp/scroll/VirtualScroll.vue b/src/views/demo/comp/scroll/VirtualScroll.vue
index e6a9df058..69697e492 100644
--- a/src/views/demo/comp/scroll/VirtualScroll.vue
+++ b/src/views/demo/comp/scroll/VirtualScroll.vue
@@ -24,7 +24,7 @@
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { VScroll } from '@/components/VirtualScroll/index';
+  import { VScroll } from '@/components/VirtualScroll';
   import { Divider } from 'ant-design-vue';
   import { PageWrapper } from '@/components/Page';
 
diff --git a/src/views/demo/comp/scroll/index.vue b/src/views/demo/comp/scroll/index.vue
index 835c271ba..f4eb8fcb1 100644
--- a/src/views/demo/comp/scroll/index.vue
+++ b/src/views/demo/comp/scroll/index.vue
@@ -14,7 +14,7 @@
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { ScrollContainer } from '@/components/Container/index';
+  import { ScrollContainer } from '@/components/Container';
   import { PageWrapper } from '@/components/Page';
 </script>
 <style lang="less" scoped>
diff --git a/src/views/demo/feat/copy/index.vue b/src/views/demo/feat/copy/index.vue
index 9f7620332..7ce8b4d4b 100644
--- a/src/views/demo/feat/copy/index.vue
+++ b/src/views/demo/feat/copy/index.vue
@@ -10,7 +10,7 @@
 </template>
 <script lang="ts" setup>
   import { unref, ref } from 'vue';
-  import { CollapseContainer } from '@/components/Container/index';
+  import { CollapseContainer } from '@/components/Container';
   import { useMessage } from '@/hooks/web/useMessage';
   import { PageWrapper } from '@/components/Page';
   import { copyText } from '@/utils/copyTextToClipboard';
diff --git a/src/views/demo/form/RefForm.vue b/src/views/demo/form/RefForm.vue
index 902f47a27..763ea0985 100644
--- a/src/views/demo/form/RefForm.vue
+++ b/src/views/demo/form/RefForm.vue
@@ -65,7 +65,7 @@
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { nextTick, ref, unref } from 'vue';
   import { BasicForm, FormSchema, FormActionType, FormProps } from '@/components/Form';
   import { CollapseContainer } from '@/components/Container';
   import { useMessage } from '@/hooks/web/useMessage';
@@ -174,9 +174,11 @@
     createMessage.success('click search,values:' + JSON.stringify(values));
   }
 
-  function setProps(props: FormProps) {
-    const formEl = formElRef.value;
+  async function setProps(props: FormProps) {
+    const formEl = unref(formElRef);
+    console.info(formEl);
     if (!formEl) return;
-    formEl.setProps(props);
+    await nextTick();
+    await formEl.setProps(props);
   }
 </script>
diff --git a/src/views/demo/system/menu/MenuDrawer.vue b/src/views/demo/system/menu/MenuDrawer.vue
index 6be12eafc..4e9bf4b40 100644
--- a/src/views/demo/system/menu/MenuDrawer.vue
+++ b/src/views/demo/system/menu/MenuDrawer.vue
@@ -12,7 +12,7 @@
 </template>
 <script lang="ts" setup>
   import { ref, computed, unref } from 'vue';
-  import { BasicForm, useForm } from '@/components/Form/index';
+  import { BasicForm, useForm } from '@/components/Form';
   import { formSchema } from './menu.data';
   import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
 
diff --git a/src/views/demo/tree/ActionTree.vue b/src/views/demo/tree/ActionTree.vue
index d3060be67..d4545556d 100644
--- a/src/views/demo/tree/ActionTree.vue
+++ b/src/views/demo/tree/ActionTree.vue
@@ -29,7 +29,7 @@
 </template>
 <script lang="ts" setup>
   import { ref, unref } from 'vue';
-  import { BasicTree, TreeActionType } from '@/components/Tree/index';
+  import { BasicTree, TreeActionType } from '@/components/Tree';
   import { treeData } from './data';
   import { useMessage } from '@/hooks/web/useMessage';
   import { PageWrapper } from '@/components/Page';