diff --git a/src/components/Application/src/search/AppSearchModal.vue b/src/components/Application/src/search/AppSearchModal.vue
index f50b419337a3b7dd3b6511597126217cce21ffba..1540ac6e3d05cc25aded7702d46f86cb34dc78c6 100644
--- a/src/components/Application/src/search/AppSearchModal.vue
+++ b/src/components/Application/src/search/AppSearchModal.vue
@@ -61,7 +61,8 @@
   import { computed, unref, ref, watch, nextTick } from 'vue';
   import { SearchOutlined } from '@ant-design/icons-vue';
   import AppSearchFooter from './AppSearchFooter.vue';
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon';
+  // @ts-ignore
   import vClickOutside from '/@/directives/clickOutside';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useRefs } from '@vben/hooks';
diff --git a/src/components/ClickOutSide/src/ClickOutSide.vue b/src/components/ClickOutSide/src/ClickOutSide.vue
index 829129d50e98aef22642fb22215755a1f48f2713..901a5084d78f3cce2dcb2f3f06f390f64f810e7a 100644
--- a/src/components/ClickOutSide/src/ClickOutSide.vue
+++ b/src/components/ClickOutSide/src/ClickOutSide.vue
@@ -8,7 +8,7 @@
   import { onClickOutside } from '@vueuse/core';
 
   const emit = defineEmits(['mounted', 'clickOutside']);
-  const wrap = ref<ElRef>(null);
+  const wrap = ref(null);
 
   onClickOutside(wrap, () => {
     emit('clickOutside');
diff --git a/src/components/ContextMenu/src/ContextMenu.vue b/src/components/ContextMenu/src/ContextMenu.vue
index 078077bb4f78681395ac10b127faf26ae7eaabfe..a2028f5c5c638ef369139b1ab08b0ce38962c9ae 100644
--- a/src/components/ContextMenu/src/ContextMenu.vue
+++ b/src/components/ContextMenu/src/ContextMenu.vue
@@ -2,7 +2,7 @@
   import type { ContextMenuItem, ItemContentProps, Axis } from './typing';
   import type { FunctionalComponent, CSSProperties, PropType } from 'vue';
   import { defineComponent, nextTick, onMounted, computed, ref, unref, onUnmounted } from 'vue';
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon';
   import { Menu, Divider } from 'ant-design-vue';
 
   const prefixCls = 'context-menu';
diff --git a/src/components/Cropper/src/CropperAvatar.vue b/src/components/Cropper/src/CropperAvatar.vue
index 8c4aae863b6f3dbcc5d176ab4721eae70c9332d4..9f14bc497f699760e6a387b752a64f832bcd4ce5 100644
--- a/src/components/Cropper/src/CropperAvatar.vue
+++ b/src/components/Cropper/src/CropperAvatar.vue
@@ -45,7 +45,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useI18n } from '/@/hooks/web/useI18n';
   import type { ButtonProps } from '/@/components/Button';
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon';
 
   const props = {
     width: { type: [String, Number], default: '200px' },
diff --git a/src/components/Form/src/components/ApiCascader.vue b/src/components/Form/src/components/ApiCascader.vue
index af00cb0b509e0d29a842634e1a973e74e7ec1eb7..cc400b1523d9d2d1ad034ecf87a0792af5900c02 100644
--- a/src/components/Form/src/components/ApiCascader.vue
+++ b/src/components/Form/src/components/ApiCascader.vue
@@ -19,6 +19,7 @@
   </a-cascader>
 </template>
 <script lang="ts">
+  import { type Recordable } from '@vben/types';
   import { defineComponent, PropType, ref, unref, watch, watchEffect } from 'vue';
   import { Cascader } from 'ant-design-vue';
   import { propTypes } from '/@/utils/propTypes';
@@ -46,7 +47,7 @@
         type: Array,
       },
       api: {
-        type: Function as PropType<(arg?: Recordable) => Promise<Option[]>>,
+        type: Function as PropType<(arg?: Recordable<any>) => Promise<Option[]>>,
         default: null,
       },
       numberToString: propTypes.bool,
@@ -58,12 +59,12 @@
       immediate: propTypes.bool.def(true),
       // init fetch params
       initFetchParams: {
-        type: Object as PropType<Recordable>,
+        type: Object as PropType<Recordable<any>>,
         default: () => ({}),
       },
       // 是否有下级，默认是
       isLeaf: {
-        type: Function as PropType<(arg: Recordable) => boolean>,
+        type: Function as PropType<(arg: Recordable<any>) => boolean>,
         default: null,
       },
       displayRenderArray: {
@@ -92,7 +93,7 @@
 
       function generatorOptions(options: any[]): Option[] {
         const { labelField, valueField, numberToString, childrenField, isLeaf } = props;
-        return options.reduce((prev, next: Recordable) => {
+        return options.reduce((prev, next: Recordable<any>) => {
           if (next) {
             const value = next[valueField];
             const item = {
diff --git a/src/components/Form/src/components/ApiTree.vue b/src/components/Form/src/components/ApiTree.vue
index 61cc4380ec5b855e098977a7fb0196e3f1a7e26a..41a7413dbff3523a4d50059559a62384432ef5eb 100644
--- a/src/components/Form/src/components/ApiTree.vue
+++ b/src/components/Form/src/components/ApiTree.vue
@@ -10,7 +10,8 @@
 </template>
 
 <script lang="ts">
-  import { computed, defineComponent, watch, ref, onMounted, unref } from 'vue';
+  import { type Recordable, type AnyFunction } from '@vben/types';
+  import { type PropType, computed, defineComponent, watch, ref, onMounted, unref } from 'vue';
   import { Tree } from 'ant-design-vue';
   import { isArray, isFunction } from '/@/utils/is';
   import { get } from 'lodash-es';
@@ -21,15 +22,15 @@
     name: 'ApiTree',
     components: { ATree: Tree, LoadingOutlined },
     props: {
-      api: { type: Function as PropType<(arg?: Recordable) => Promise<Recordable>> },
+      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<Fn> },
+      afterFetch: { type: Function as PropType<AnyFunction> },
     },
     emits: ['options-change', 'change'],
     setup(props, { attrs, emit }) {
-      const treeData = ref<Recordable[]>([]);
+      const treeData = ref<Recordable<any>[]>([]);
       const isFirstLoaded = ref<Boolean>(false);
       const loading = ref(false);
       const getAttrs = computed(() => {
@@ -81,7 +82,7 @@
         if (!isArray(result)) {
           result = get(result, props.resultField);
         }
-        treeData.value = (result as Recordable[]) || [];
+        treeData.value = (result as Recordable<any>[]) || [];
         isFirstLoaded.value = true;
         emit('options-change', treeData.value);
       }
diff --git a/src/components/Form/src/components/ApiTreeSelect.vue b/src/components/Form/src/components/ApiTreeSelect.vue
index 35c6c3a8686c70b070f46479bd19babca95eae9e..1e8b04c2e2902815644dbc578b93303f6e502279 100644
--- a/src/components/Form/src/components/ApiTreeSelect.vue
+++ b/src/components/Form/src/components/ApiTreeSelect.vue
@@ -10,7 +10,8 @@
 </template>
 
 <script lang="ts">
-  import { computed, defineComponent, watch, ref, onMounted, unref } from 'vue';
+  import { type Recordable } from '@vben/types';
+  import { type PropType, computed, defineComponent, watch, ref, onMounted, unref } from 'vue';
   import { TreeSelect } from 'ant-design-vue';
   import { isArray, isFunction } from '/@/utils/is';
   import { get } from 'lodash-es';
@@ -21,14 +22,14 @@
     name: 'ApiTreeSelect',
     components: { ATreeSelect: TreeSelect, LoadingOutlined },
     props: {
-      api: { type: Function as PropType<(arg?: Recordable) => Promise<Recordable>> },
+      api: { type: Function as PropType<(arg?: Recordable<any>) => Promise<Recordable<any>>> },
       params: { type: Object },
       immediate: { type: Boolean, default: true },
       resultField: propTypes.string.def(''),
     },
     emits: ['options-change', 'change'],
     setup(props, { attrs, emit }) {
-      const treeData = ref<Recordable[]>([]);
+      const treeData = ref<Recordable<any>[]>([]);
       const isFirstLoaded = ref<Boolean>(false);
       const loading = ref(false);
       const getAttrs = computed(() => {
@@ -77,7 +78,7 @@
         if (!isArray(result)) {
           result = get(result, props.resultField);
         }
-        treeData.value = (result as Recordable[]) || [];
+        treeData.value = (result as Recordable<any>[]) || [];
         isFirstLoaded.value = true;
         emit('options-change', treeData.value);
       }
diff --git a/src/components/Form/src/components/FormItem.vue b/src/components/Form/src/components/FormItem.vue
index 37e684d3723859d060146f93a27fde3c9b09f09b..9e598ca94647dce8b9ec545d2a2e8c7002d6366b 100644
--- a/src/components/Form/src/components/FormItem.vue
+++ b/src/components/Form/src/components/FormItem.vue
@@ -1,8 +1,9 @@
 <script lang="tsx">
+  import { type Recordable, type Nullable } from '@vben/types';
   import type { PropType, Ref } from 'vue';
   import { computed, defineComponent, toRefs, unref } from 'vue';
   import type { FormActionType, FormProps, FormSchema } from '../types/form';
-  import type { Rule } from 'ant-design-vue/lib/form';
+  import type { ValidationRule } from 'ant-design-vue/lib/form/Form';
   import type { TableActionType } from '/@/components/Table';
   import { Col, Divider, Form } from 'ant-design-vue';
   import { componentMap } from '../componentMap';
@@ -31,11 +32,11 @@
         default: () => ({}),
       },
       allDefaultValues: {
-        type: Object as PropType<Recordable>,
+        type: Object as PropType<Recordable<any>>,
         default: () => ({}),
       },
       formModel: {
-        type: Object as PropType<Recordable>,
+        type: Object as PropType<Recordable<any>>,
         default: () => ({}),
       },
       setFormModel: {
@@ -72,7 +73,7 @@
             ...mergeDynamicData,
             ...allDefaultValues,
             ...formModel,
-          } as Recordable,
+          } as Recordable<any>,
           schema: schema,
         };
       });
@@ -93,7 +94,7 @@
             componentProps,
           );
         }
-        return componentProps as Recordable;
+        return componentProps as Recordable<any>;
       });
 
       const getDisable = computed(() => {
@@ -138,7 +139,7 @@
         return { isShow, isIfShow };
       }
 
-      function handleRules(): Rule[] {
+      function handleRules(): ValidationRule[] {
         const {
           rules: defRules = [],
           component,
@@ -149,10 +150,10 @@
         } = props.schema;
 
         if (isFunction(dynamicRules)) {
-          return dynamicRules(unref(getValues)) as Rule[];
+          return dynamicRules(unref(getValues)) as ValidationRule[];
         }
 
-        let rules: Rule[] = cloneDeep(defRules) as Rule[];
+        let rules: ValidationRule[] = cloneDeep(defRules) as ValidationRule[];
         const { rulesMessageJoinLabel: globalRulesMessageJoinLabel } = props.formProps;
 
         const joinLabel = Reflect.has(props.schema, 'rulesMessageJoinLabel')
@@ -235,7 +236,7 @@
         if (characterInx !== -1 && !rules[characterInx].validator) {
           rules[characterInx].message =
             rules[characterInx].message ||
-            t('component.form.maxTip', [rules[characterInx].max] as Recordable);
+            t('component.form.maxTip', [rules[characterInx].max] as Recordable<any>);
         }
         return rules;
       }
@@ -254,7 +255,7 @@
         const eventKey = `on${upperFirst(changeEvent)}`;
 
         const on = {
-          [eventKey]: (...args: Nullable<Recordable>[]) => {
+          [eventKey]: (...args: Nullable<Recordable<any>>[]) => {
             const [e] = args;
             if (propsData[eventKey]) {
               propsData[eventKey](...args);
@@ -267,7 +268,7 @@
         const Comp = componentMap.get(component) as ReturnType<typeof defineComponent>;
 
         const { autoSetPlaceHolder, size } = props.formProps;
-        const propsData: Recordable = {
+        const propsData: Recordable<any> = {
           allowClear: true,
           getPopupContainer: (trigger: Element) => trigger.parentNode,
           size,
@@ -284,11 +285,11 @@
         propsData.codeField = field;
         propsData.formValues = unref(getValues);
 
-        const bindValue: Recordable = {
+        const bindValue: Recordable<any> = {
           [valueField || (isCheck ? 'checked' : 'value')]: props.formModel[field],
         };
 
-        const compAttr: Recordable = {
+        const compAttr: Recordable<any> = {
           ...propsData,
           ...on,
           ...bindValue,
@@ -365,7 +366,7 @@
               name={field}
               colon={colon}
               class={{ 'suffix-item': showSuffix }}
-              {...(itemProps as Recordable)}
+              {...(itemProps as Recordable<any>)}
               label={renderLabelHelpMessage()}
               rules={handleRules()}
               labelCol={labelCol}
diff --git a/src/components/Icon/index.ts b/src/components/Icon/index.ts
index 69dc2b5863913ccf8c4182f99c770444b4f04d9a..01e7d2361c39fe04c7c564ef8a7ce4b5ac74875f 100644
--- a/src/components/Icon/index.ts
+++ b/src/components/Icon/index.ts
@@ -4,4 +4,4 @@ import IconPicker from './src/IconPicker.vue';
 
 export { Icon, IconPicker, SvgIcon };
 
-// export default Icon;
+export default Icon;
diff --git a/src/components/Menu/src/components/MenuItemContent.vue b/src/components/Menu/src/components/MenuItemContent.vue
index a1293c3deb74203022fb1e3791102028ed82dfab..99a835db63c696889d01f5b3a7b2f4d2fd2c590c 100644
--- a/src/components/Menu/src/components/MenuItemContent.vue
+++ b/src/components/Menu/src/components/MenuItemContent.vue
@@ -7,7 +7,7 @@
 <script lang="ts">
   import { computed, defineComponent } from 'vue';
 
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon/index';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { contentProps } from '../props';
diff --git a/src/components/Modal/src/components/ModalFooter.vue b/src/components/Modal/src/components/ModalFooter.vue
index 30fefc629b4ae1d2089a26787b5ff3c351b3cd6f..7ea98dd28cd82dcdb5bd63a5745a32d58223f4a7 100644
--- a/src/components/Modal/src/components/ModalFooter.vue
+++ b/src/components/Modal/src/components/ModalFooter.vue
@@ -19,6 +19,7 @@
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
+
   import { basicProps } from '../props';
 
   export default defineComponent({
diff --git a/src/components/Page/src/PageWrapper.vue b/src/components/Page/src/PageWrapper.vue
index ec406040ffa4fe5666c96628767344cfc7eec80a..1de120542e0493c2562289fe890307e4d8166f3f 100644
--- a/src/components/Page/src/PageWrapper.vue
+++ b/src/components/Page/src/PageWrapper.vue
@@ -33,9 +33,17 @@
   </div>
 </template>
 <script lang="ts">
-  import type { CSSProperties, PropType, provide } from 'vue';
+  import {
+    CSSProperties,
+    PropType,
+    provide,
+    defineComponent,
+    computed,
+    watch,
+    ref,
+    unref,
+  } from 'vue';
 
-  import { defineComponent, computed, watch, ref, unref } from 'vue';
   import PageFooter from './PageFooter.vue';
 
   import { useDesign } from '/@/hooks/web/useDesign';
diff --git a/src/components/SimpleMenu/src/SimpleSubMenu.vue b/src/components/SimpleMenu/src/SimpleSubMenu.vue
index 5e2a3d3f4b18ddf4c31e7f310f8391fba1571158..5c66a2dabd8b8602e0dba9699784c6555073af35 100644
--- a/src/components/SimpleMenu/src/SimpleSubMenu.vue
+++ b/src/components/SimpleMenu/src/SimpleSubMenu.vue
@@ -48,7 +48,7 @@
 
   import { defineComponent, computed } from 'vue';
   import { useDesign } from '/@/hooks/web/useDesign';
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon/index';
 
   import MenuItem from './components/MenuItem.vue';
   import SubMenu from './components/SubMenuItem.vue';
diff --git a/src/components/SimpleMenu/src/components/MenuItem.vue b/src/components/SimpleMenu/src/components/MenuItem.vue
index faf5ea40798feef97a4def0065c32e15cd297705..3a99796c752a01e751ca57f935c91a02e1973687 100644
--- a/src/components/SimpleMenu/src/components/MenuItem.vue
+++ b/src/components/SimpleMenu/src/components/MenuItem.vue
@@ -17,8 +17,7 @@
 </template>
 
 <script lang="ts">
-  import type { PropType } from 'vue';
-  import { defineComponent, ref, computed, unref, getCurrentInstance, watch } from 'vue';
+  import { PropType, defineComponent, ref, computed, unref, getCurrentInstance, watch } from 'vue';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { propTypes } from '/@/utils/propTypes';
   import { useMenuItem } from './useMenu';
diff --git a/src/components/SimpleMenu/src/components/SubMenuItem.vue b/src/components/SimpleMenu/src/components/SubMenuItem.vue
index e58b0b715bdf112c50a138eefeaccfa18a9e6bd6..2777726deb9ae5b4d6a19af8d653ca69b739d51d 100644
--- a/src/components/SimpleMenu/src/components/SubMenuItem.vue
+++ b/src/components/SimpleMenu/src/components/SubMenuItem.vue
@@ -75,7 +75,7 @@
   import { useMenuItem } from './useMenu';
   import { useSimpleRootMenuContext } from './useSimpleMenuContext';
   import { CollapseTransition } from '/@/components/Transition';
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon';
   import { Popover } from 'ant-design-vue';
   import { isBoolean, isObject } from '/@/utils/is';
   import { mitt } from '/@/utils/mitt';
diff --git a/src/components/Table/src/components/TableAction.vue b/src/components/Table/src/components/TableAction.vue
index 2fea63eb0b769400e25b7c2c5694f54273e47c05..99425f9da7e6b08b2282cdf738c04098b3332ff9 100644
--- a/src/components/Table/src/components/TableAction.vue
+++ b/src/components/Table/src/components/TableAction.vue
@@ -34,7 +34,7 @@
   import { defineComponent, 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';
+  import Icon from '/@/components/Icon/index';
   import { ActionItem, TableActionType } from '/@/components/Table';
   import { PopConfirmButton } from '/@/components/Button';
   import { Dropdown } from '/@/components/Dropdown';
diff --git a/src/layouts/default/header/components/Breadcrumb.vue b/src/layouts/default/header/components/Breadcrumb.vue
index ac389ab933529260d16804026f291e5a6c34f4d9..6aba97d89f7772390fad08f309cf7bc94974e2ec 100644
--- a/src/layouts/default/header/components/Breadcrumb.vue
+++ b/src/layouts/default/header/components/Breadcrumb.vue
@@ -21,7 +21,7 @@
   import { defineComponent, ref, watchEffect } from 'vue';
 
   import { Breadcrumb } from 'ant-design-vue';
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon';
 
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
diff --git a/src/layouts/default/header/components/ErrorAction.vue b/src/layouts/default/header/components/ErrorAction.vue
index add0d067463f28d44e44210c70259b0798e5b0a4..243e587000a6215221eb2b068a42910647e77b79 100644
--- a/src/layouts/default/header/components/ErrorAction.vue
+++ b/src/layouts/default/header/components/ErrorAction.vue
@@ -13,7 +13,7 @@
 <script lang="ts">
   import { defineComponent, computed } from 'vue';
   import { Tooltip, Badge } from 'ant-design-vue';
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon';
 
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useErrorLogStore } from '/@/store/modules/errorLog';
diff --git a/src/layouts/default/header/components/user-dropdown/DropMenuItem.vue b/src/layouts/default/header/components/user-dropdown/DropMenuItem.vue
index 031455cbfe99900587b710d98c9323fd194688a1..987af275636fc0181c065fec391b63731b78417d 100644
--- a/src/layouts/default/header/components/user-dropdown/DropMenuItem.vue
+++ b/src/layouts/default/header/components/user-dropdown/DropMenuItem.vue
@@ -11,7 +11,7 @@
 
   import { computed, defineComponent, getCurrentInstance } from 'vue';
 
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon/index';
   import { propTypes } from '/@/utils/propTypes';
 
   export default defineComponent({
diff --git a/src/layouts/default/setting/index.vue b/src/layouts/default/setting/index.vue
index f959366ef972bc65224d2b62e3fd82ec94c941f4..9c5bb87f4f175348d2aecfd519d99bb36a42a25e 100644
--- a/src/layouts/default/setting/index.vue
+++ b/src/layouts/default/setting/index.vue
@@ -7,7 +7,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import SettingDrawer from './SettingDrawer';
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon';
 
   import { useDrawer } from '/@/components/Drawer';
 
diff --git a/src/views/demo/page/account/center/Application.vue b/src/views/demo/page/account/center/Application.vue
index 567ac4c08167504dd549b4b8592c99b5f7ae79f7..640fe1b91d0b5c912a94a60c49540b5d913d8e52 100644
--- a/src/views/demo/page/account/center/Application.vue
+++ b/src/views/demo/page/account/center/Application.vue
@@ -30,7 +30,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { List, Card, Row, Col } from 'ant-design-vue';
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon/index';
   import { applicationList } from './data';
 
   export default defineComponent({
diff --git a/src/views/demo/page/account/center/Article.vue b/src/views/demo/page/account/center/Article.vue
index 7edddc58f5fba40772b9360ca3486ad4d4afd15b..bb71cc9138e572cc67ca0c2e7aa83519e5b6b46d 100644
--- a/src/views/demo/page/account/center/Article.vue
+++ b/src/views/demo/page/account/center/Article.vue
@@ -42,7 +42,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { List, Tag } from 'ant-design-vue';
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon/index';
   import { actions, articleList } from './data';
 
   export default defineComponent({
diff --git a/src/views/demo/page/account/center/index.vue b/src/views/demo/page/account/center/index.vue
index 400a7a21e263c5abdca2293bc61cea55a3aedee9..430c5392425f86cde4f358e83363b126991a3946 100644
--- a/src/views/demo/page/account/center/index.vue
+++ b/src/views/demo/page/account/center/index.vue
@@ -56,7 +56,7 @@
   import { Tag, Tabs, Row, Col } from 'ant-design-vue';
   import { defineComponent, computed } from 'vue';
   import { CollapseContainer } from '/@/components/Container/index';
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon/index';
   import Article from './Article.vue';
   import Application from './Application.vue';
   import Project from './Project.vue';
diff --git a/src/views/demo/page/account/setting/AccountBind.vue b/src/views/demo/page/account/setting/AccountBind.vue
index 9d595d10c165144bea48846a96f88aa41526875a..d3b1a7b4c47dd51b43a3dc8320fc85b8e4b1c0bc 100644
--- a/src/views/demo/page/account/setting/AccountBind.vue
+++ b/src/views/demo/page/account/setting/AccountBind.vue
@@ -26,7 +26,7 @@
   import { List } from 'ant-design-vue';
   import { defineComponent } from 'vue';
   import { CollapseContainer } from '/@/components/Container/index';
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon/index';
 
   import { accountBindList } from './data';
 
diff --git a/src/views/demo/page/list/basic/index.vue b/src/views/demo/page/list/basic/index.vue
index 3a4ce82b66afd6589da9791eabb559d2ffd158d1..2bde229756c5356b08fb7496b66f16dc08030a58 100644
--- a/src/views/demo/page/list/basic/index.vue
+++ b/src/views/demo/page/list/basic/index.vue
@@ -51,12 +51,11 @@
   </PageWrapper>
 </template>
 <script lang="ts">
-  import { Progress, Row, Col } from 'ant-design-vue';
+  import { Progress, Row, Col, List } from 'ant-design-vue';
   import { defineComponent } from 'vue';
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon/index';
   import { cardList } from './data';
   import { PageWrapper } from '/@/components/Page';
-  import { List } from 'ant-design-vue';
 
   export default defineComponent({
     components: {
diff --git a/src/views/demo/page/list/card/index.vue b/src/views/demo/page/list/card/index.vue
index d218825d5e97775d847eb521d886f435fce14ab2..cb960f2786bced2d1c7f58974a04ba32141dd51a 100644
--- a/src/views/demo/page/list/card/index.vue
+++ b/src/views/demo/page/list/card/index.vue
@@ -34,7 +34,7 @@
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon/index';
   import { cardList } from './data';
   import { PageWrapper } from '/@/components/Page';
   import { Card, Row, Col, List } from 'ant-design-vue';
diff --git a/src/views/demo/page/list/search/index.vue b/src/views/demo/page/list/search/index.vue
index 2f85d9e0fe4daf5a9522310d3e2a8276ecd189a5..ca018e4ad6e638be8ed1c24943d748bcc2334d90 100644
--- a/src/views/demo/page/list/search/index.vue
+++ b/src/views/demo/page/list/search/index.vue
@@ -55,7 +55,7 @@
 <script lang="ts">
   import { Tag, List } from 'ant-design-vue';
   import { defineComponent } from 'vue';
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon/index';
   import { BasicForm } from '/@/components/Form/index';
   import { actions, searchList, schemas } from './data';
   import { PageWrapper } from '/@/components/Page';
diff --git a/src/views/form-design/components/VFormDesign/components/FormNodeOperate.vue b/src/views/form-design/components/VFormDesign/components/FormNodeOperate.vue
index 22c1f3d919a9d2be6be5424b157beed310985823..5a786e7980a9b8b75392a6ffc0d2b1921d8c47b4 100644
--- a/src/views/form-design/components/VFormDesign/components/FormNodeOperate.vue
+++ b/src/views/form-design/components/VFormDesign/components/FormNodeOperate.vue
@@ -17,7 +17,7 @@
   import { IVFormComponent } from '../../../typings/v-form-component';
   import { remove } from '../../../utils';
   import { useFormDesignState } from '../../../hooks/useFormDesignState';
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon/index';
 
   export default defineComponent({
     name: 'FormNodeOperate',
diff --git a/src/views/form-design/components/VFormDesign/components/FormOptions.vue b/src/views/form-design/components/VFormDesign/components/FormOptions.vue
index 860784f00090eec056529226cff58dbd6829ffb6..6cee95159b97f627bd2350337dd4e840d95ce6a0 100644
--- a/src/views/form-design/components/VFormDesign/components/FormOptions.vue
+++ b/src/views/form-design/components/VFormDesign/components/FormOptions.vue
@@ -38,7 +38,7 @@
   import { remove } from '../../../utils';
   import message from '../../../utils/message';
   import { Input } from 'ant-design-vue';
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon/index';
 
   export default defineComponent({
     name: 'FormOptions',
diff --git a/src/views/form-design/components/VFormDesign/components/RuleProps.vue b/src/views/form-design/components/VFormDesign/components/RuleProps.vue
index f22361fb82ad2ad5644498a4e9c95c48c3012c86..47022daab24e9f98882679ea03fea95a02281956 100644
--- a/src/views/form-design/components/VFormDesign/components/RuleProps.vue
+++ b/src/views/form-design/components/VFormDesign/components/RuleProps.vue
@@ -38,7 +38,7 @@
   import { useFormDesignState } from '../../../hooks/useFormDesignState';
   import { isArray } from 'lodash-es';
   import { Form, FormItem, AutoComplete, Input } from 'ant-design-vue';
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon';
 
   export default defineComponent({
     name: 'RuleProps',
diff --git a/src/views/form-design/components/VFormDesign/modules/Toolbar.vue b/src/views/form-design/components/VFormDesign/modules/Toolbar.vue
index 55be6920e6aaaef4300affbce6e640ab3a8b86ba..cfd9192d6e46902c2e96bb22f0c0055b4fb59f18 100644
--- a/src/views/form-design/components/VFormDesign/modules/Toolbar.vue
+++ b/src/views/form-design/components/VFormDesign/modules/Toolbar.vue
@@ -31,7 +31,7 @@
   import { UseRefHistoryReturn } from '@vueuse/core';
   import { IFormConfig } from '../../../typings/v-form-component';
   import { Tooltip, Divider } from 'ant-design-vue';
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon/index';
 
   interface IToolbarsConfig {
     type: string;
diff --git a/src/views/form-design/components/VFormItem/index.vue b/src/views/form-design/components/VFormItem/index.vue
index 152a389af38756996c27320c4a012dcd3b98df4f..b30d298c60415dde901f58469d06718aab55d0b0 100644
--- a/src/views/form-design/components/VFormItem/index.vue
+++ b/src/views/form-design/components/VFormItem/index.vue
@@ -46,8 +46,8 @@
   import { asyncComputed } from '@vueuse/core';
   import { handleAsyncOptions } from '../../utils';
   import { omit } from 'lodash-es';
+  import { type Recordable } from '@vben/types';
   import { Tooltip, FormItem, Divider, Col } from 'ant-design-vue';
-  // import FormItem from '/@/components/Form/src/components/FormItem.vue';
   import { Icon } from '/@/components/Icon';
   import { useFormModelState } from '../../hooks/useFormDesignState';
 
@@ -142,7 +142,7 @@
           newConfig.rules = rules;
         }
         return newConfig;
-      }) as Recordable;
+      }) as Recordable<any>;
 
       const componentItem = computed(() => componentMap.get(props.schema.component as string));