antdv升级到4.x版本 (#3006)

* fix(ApiTreeSelect):  ApiTreeSelect组件首次调用会重复请求(#2940)

由于watchEffect，onMounted会立即执行，所以导致重复请求。
并且 watch函数和watchEffect监听的依赖重复了，故删去

* chore: update ant design npm version

* chore: 修改antd的css引用路径

* style(layout):  替换sider header组件传参属性，适配原有组件的样式

* style(Menu): 去除气泡卡片的背景

* chore: typo

* typo(Modal): 将visible替换成open

* typo：修改modal弹窗的绑定函数名称

* style(Modal): 为了解决直接引用 Modal 组件时关闭按钮样式的问题，增加一个名为 "vben-basic-modal" 的类名，以实现样式隔离。

* Update package.json

* typo(Drawer): Drawer 组件 visible 变为 open

* typo(Table): Table 组件 filterDropdownVisible 变为 filterDropdownOpen。

* typo(TreeSelect): 组件弹框的 classname API 统一为 popupClassName，dropdownClassName

package.json

@@ -76,7 +76,7 @@
     "@vueuse/core": "^10.2.1",
     "@vueuse/shared": "^10.2.1",
     "@zxcvbn-ts/core": "^3.0.2",
-    "ant-design-vue": "^3.2.20",
+    "ant-design-vue": "^4.0.2",
     "axios": "^1.4.0",
     "codemirror": "^5.65.12",
     "cropperjs": "^1.5.13",

src/components/Drawer/src/BasicDrawer.vue

@@ -58,9 +58,9 @@
     components: { Drawer, ScrollContainer, DrawerFooter, DrawerHeader },
     inheritAttrs: false,
     props: basicProps,
-    emits: ['visible-change', 'ok', 'close', 'register'],
+    emits: ['open-change', 'ok', 'close', 'register'],
     setup(props, { emit }) {
-      const visibleRef = ref(false);
+      const openRef = ref(false);
       const attrs = useAttrs();
       const propsRef = ref<Partial<DrawerProps | null>>(null);
 
@@ -69,7 +69,7 @@
 
       const drawerInstance: DrawerInstance = {
         setDrawerProps: setDrawerProps as any,
-        emitVisible: undefined,
+        emitOpen: undefined,
       };
 
       const instance = getCurrentInstance();
@@ -85,7 +85,7 @@
           placement: 'right',
           ...unref(attrs),
           ...unref(getMergeProps),
-          visible: unref(visibleRef),
+          open: unref(openRef),
         };
         opt.title = undefined;
         const { isDetail, width, wrapClassName, getContainer } = opt;
@@ -135,19 +135,19 @@
       });
 
       watch(
-        () => props.visible,
+        () => props.open,
         (newVal, oldVal) => {
-          if (newVal !== oldVal) visibleRef.value = newVal;
+          if (newVal !== oldVal) openRef.value = newVal;
         },
         { deep: true },
       );
 
       watch(
-        () => visibleRef.value,
-        (visible) => {
+        () => openRef.value,
+        (open) => {
           nextTick(() => {
-            emit('visible-change', visible);
-            instance && drawerInstance.emitVisible?.(visible, instance.uid);
+            emit('open-change', open);
+            instance && drawerInstance.emitOpen?.(open, instance.uid);
           });
         },
       );
@@ -158,18 +158,18 @@
         emit('close', e);
         if (closeFunc && isFunction(closeFunc)) {
           const res = await closeFunc();
-          visibleRef.value = !res;
+          openRef.value = !res;
           return;
         }
-        visibleRef.value = false;
+        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, 'visible')) {
-          visibleRef.value = !!props.visible;
+        if (Reflect.has(props, 'open')) {
+          openRef.value = !!props.open;
         }
       }
 

src/components/Drawer/src/props.ts

@@ -30,7 +30,7 @@ export const basicProps = {
   title: { type: String, default: '' },
   loadingText: { type: String },
   showDetailBack: { type: Boolean, default: true },
-  visible: { type: Boolean },
+  open: { type: Boolean },
   loading: { type: Boolean },
   maskClosable: { type: Boolean, default: true },
   getContainer: {

src/components/Drawer/src/typing.ts

@@ -4,13 +4,13 @@ import type { ScrollContainerOptions } from '/@/components/Container/index';
 
 export interface DrawerInstance {
   setDrawerProps: (props: Partial<DrawerProps> | boolean) => void;
-  emitVisible?: (visible: boolean, uid: number) => void;
+  emitOpen?: (open: boolean, uid: number) => void;
 }
 
 export interface ReturnMethods extends DrawerInstance {
-  openDrawer: <T = any>(visible?: boolean, data?: T, openOnSet?: boolean) => void;
+  openDrawer: <T = any>(open?: boolean, data?: T, openOnSet?: boolean) => void;
   closeDrawer: () => void;
-  getVisible?: ComputedRef<boolean>;
+  getOpen?: ComputedRef<boolean>;
 }
 
 export type RegisterFn = (drawerInstance: DrawerInstance, uuid?: string) => void;
@@ -19,7 +19,7 @@ export interface ReturnInnerMethods extends DrawerInstance {
   closeDrawer: () => void;
   changeLoading: (loading: boolean) => void;
   changeOkLoading: (loading: boolean) => void;
-  getVisible?: ComputedRef<boolean>;
+  getOpen?: ComputedRef<boolean>;
 }
 
 export type UseDrawerReturnType = [RegisterFn, ReturnMethods];
@@ -73,7 +73,7 @@ export interface DrawerProps extends DrawerFooterProps {
   isDetail?: boolean;
   loading?: boolean;
   showDetailBack?: boolean;
-  visible?: boolean;
+  open?: boolean;
   /**
    * Built-in ScrollContainer component configuration
    * @type ScrollContainerOptions
@@ -179,7 +179,7 @@ export interface DrawerProps extends DrawerFooterProps {
    * @type string
    */
   placement?: 'top' | 'right' | 'bottom' | 'left';
-  afterVisibleChange?: (visible?: boolean) => void;
+  afterOpenChange?: (open?: boolean) => void;
   keyboard?: boolean;
   /**
    * Specify a callback that will be called when a user clicks mask, close button or Cancel button.

src/components/Drawer/src/useDrawer.ts

@@ -23,7 +23,7 @@ import { error } from '/@/utils/log';
 
 const dataTransferRef = reactive<any>({});
 
-const visibleData = reactive<{ [key: number]: boolean }>({});
+const openData = reactive<{ [key: number]: boolean }>({});
 
 /**
  * @description: Applicable to separate drawer and call outside
@@ -51,8 +51,8 @@ export function useDrawer(): UseDrawerReturnType {
     drawer.value = drawerInstance;
     loaded.value = true;
 
-    drawerInstance.emitVisible = (visible: boolean, uid: number) => {
-      visibleData[uid] = visible;
+    drawerInstance.emitOpen = (open: boolean, uid: number) => {
+      openData[uid] = open;
     };
   }
 
@@ -69,13 +69,13 @@ export function useDrawer(): UseDrawerReturnType {
       getInstance()?.setDrawerProps(props);
     },
 
-    getVisible: computed((): boolean => {
-      return visibleData[~~unref(uid)];
+    getOpen: computed((): boolean => {
+      return openData[~~unref(uid)];
     }),
 
-    openDrawer: <T = any>(visible = true, data?: T, openOnSet = true): void => {
+    openDrawer: <T = any>(open = true, data?: T, openOnSet = true): void => {
       getInstance()?.setDrawerProps({
-        visible: visible,
+        open,
       });
       if (!data) return;
 
@@ -90,7 +90,7 @@ export function useDrawer(): UseDrawerReturnType {
       }
     },
     closeDrawer: () => {
-      getInstance()?.setDrawerProps({ visible: false });
+      getInstance()?.setDrawerProps({ open: false });
     },
   };
 
@@ -145,15 +145,15 @@ export const useDrawerInner = (callbackFn?: Fn): UseDrawerInnerReturnType => {
       changeOkLoading: (loading = true) => {
         getInstance()?.setDrawerProps({ confirmLoading: loading });
       },
-      getVisible: computed((): boolean => {
-        return visibleData[~~unref(uidRef)];
+      getOpen: computed((): boolean => {
+        return openData[~~unref(uidRef)];
       }),
 
       closeDrawer: () => {
-        getInstance()?.setDrawerProps({ visible: false });
+        getInstance()?.setDrawerProps({ open: false });
       },
 
-      setDrawerProps: (props: Partial<DrawerProps>) => {
+      setDrawerProps: (props: Partial<DrawerProps> | boolean) => {
         getInstance()?.setDrawerProps(props);
       },
     },

src/components/Modal/src/BasicModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal v-bind="getBindValue" @cancel="handleCancel">
+  <Modal v-bind="getBindValue" @cancel="handleCancel" wrapClassName="vben-basic-modal">
     <template #closeIcon v-if="!$slots.closeIcon">
       <ModalClose
         :canFullscreen="getProps.canFullscreen"
@@ -34,9 +34,9 @@
       :loading-tip="getProps.loadingTip"
       :minHeight="getProps.minHeight"
       :height="getWrapperHeight"
-      :visible="visibleRef"
+      :open="openRef"
       :modalFooterHeight="footer !== undefined && !footer ? 0 : undefined"
-      v-bind="omit(getProps.wrapperProps, 'visible', 'height', 'modalFooterHeight')"
+      v-bind="omit(getProps.wrapperProps, 'open', 'height', 'modalFooterHeight')"
       @ext-height="handleExtHeight"
       @height-change="handleHeightChange"
     >
@@ -79,9 +79,9 @@
     components: { Modal, ModalWrapper, ModalClose, ModalFooter, ModalHeader },
     inheritAttrs: false,
     props: basicProps,
-    emits: ['visible-change', 'height-change', 'cancel', 'ok', 'register', 'update:visible'],
+    emits: ['open-change', 'height-change', 'cancel', 'ok', 'register', 'update:open'],
     setup(props, { emit, attrs }) {
-      const visibleRef = ref(false);
+      const openRef = ref(false);
       const propsRef = ref<Partial<ModalProps> | null>(null);
       const modalWrapperRef = ref<any>(null);
       const { prefixCls } = useDesign('basic-modal');
@@ -90,7 +90,7 @@
       const extHeightRef = ref(0);
       const modalMethods: ModalMethods = {
         setModalProps,
-        emitVisible: undefined,
+        emitOpen: undefined,
         redoModalHeight: () => {
           nextTick(() => {
             if (unref(modalWrapperRef)) {
@@ -123,7 +123,7 @@
       const getProps = computed((): Recordable => {
         const opt = {
           ...unref(getMergeProps),
-          visible: unref(visibleRef),
+          open: unref(openRef),
           okButtonProps: undefined,
           cancelButtonProps: undefined,
           title: undefined,
@@ -138,7 +138,7 @@
         const attr = {
           ...attrs,
           ...unref(getMergeProps),
-          visible: unref(visibleRef),
+          open: unref(openRef),
         };
         attr['wrapClassName'] = `${attr?.['wrapClassName'] || ''} ${unref(getWrapClassName)}`;
 
@@ -154,16 +154,16 @@
       });
 
       watchEffect(() => {
-        visibleRef.value = !!props.visible;
+        openRef.value = !!props.open;
         fullScreenRef.value = !!props.defaultFullscreen;
       });
 
       watch(
-        () => unref(visibleRef),
+        () => unref(openRef),
         (v) => {
-          emit('visible-change', v);
-          emit('update:visible', v);
-          instance && modalMethods.emitVisible?.(v, instance.uid);
+          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();
@@ -182,11 +182,11 @@
         if ((e.target as HTMLElement)?.classList?.contains(prefixCls + '-close--custom')) return;
         if (props.closeFunc && isFunction(props.closeFunc)) {
           const isClose: boolean = await props.closeFunc();
-          visibleRef.value = !isClose;
+          openRef.value = !isClose;
           return;
         }
 
-        visibleRef.value = false;
+        openRef.value = false;
         emit('cancel', e);
       }
 
@@ -196,8 +196,8 @@
       function setModalProps(props: Partial<ModalProps>): void {
         // Keep the last setModalProps
         propsRef.value = deepMerge(unref(propsRef) || ({} as any), props);
-        if (Reflect.has(props, 'visible')) {
-          visibleRef.value = !!props.visible;
+        if (Reflect.has(props, 'open')) {
+          openRef.value = !!props.open;
         }
         if (Reflect.has(props, 'defaultFullscreen')) {
           fullScreenRef.value = !!props.defaultFullscreen;
@@ -230,7 +230,7 @@
         fullScreenRef,
         getMergeProps,
         handleOk,
-        visibleRef,
+        openRef,
         omit,
         modalWrapperRef,
         handleExtHeight,

src/components/Modal/src/components/Modal.tsx

@@ -11,10 +11,10 @@ export default defineComponent({
   props: basicProps as any,
   emits: ['cancel'],
   setup(props, { slots, emit }) {
-    const { visible, draggable, destroyOnClose } = toRefs(props);
+    const { open, draggable, destroyOnClose } = toRefs(props);
     const attrs = useAttrs();
     useModalDragMove({
-      visible,
+      open,
       destroyOnClose,
       draggable,
     });

src/components/Modal/src/components/ModalWrapper.vue

@@ -32,7 +32,7 @@
     minHeight: { type: Number, default: 200 },
     height: { type: Number },
     footerOffset: { type: Number, default: 0 },
-    visible: { type: Boolean },
+    open: { type: Boolean },
     fullScreen: { type: Boolean },
     loadingTip: { type: String },
   };
@@ -112,8 +112,8 @@
 
       async function setModalHeight() {
         // 解决在弹窗关闭的时候监听还存在,导致再次打开弹窗没有高度
-        // 加上这个,就必须在使用的时候传递父级的visible
-        if (!props.visible) return;
+        // 加上这个,就必须在使用的时候传递父级的open
+        if (!props.open) return;
         const wrapperRefDom = unref(wrapperRef);
         if (!wrapperRefDom) return;
 

src/components/Modal/src/hooks/useModal.ts

@@ -24,7 +24,7 @@ import { error } from '/@/utils/log';
 
 const dataTransfer = reactive<any>({});
 
-const visibleData = reactive<{ [key: number]: boolean }>({});
+const openData = reactive<{ [key: number]: boolean }>({});
 
 /**
  * @description: Applicable to independent modal and call outside
@@ -49,8 +49,8 @@ export function useModal(): UseModalReturnType {
 
     modal.value = modalMethod;
     loaded.value = true;
-    modalMethod.emitVisible = (visible: boolean, uid: number) => {
-      visibleData[uid] = visible;
+    modalMethod.emitOpen = (open: boolean, uid: number) => {
+      openData[uid] = open;
     };
   }
 
@@ -67,17 +67,17 @@ export function useModal(): UseModalReturnType {
       getInstance()?.setModalProps(props);
     },
 
-    getVisible: computed((): boolean => {
-      return visibleData[~~unref(uid)];
+    getOpen: computed((): boolean => {
+      return openData[~~unref(uid)];
     }),
 
     redoModalHeight: () => {
       getInstance()?.redoModalHeight?.();
     },
 
-    openModal: <T = any>(visible = true, data?: T, openOnSet = true): void => {
+    openModal: <T = any>(open = true, data?: T, openOnSet = true): void => {
       getInstance()?.setModalProps({
-        visible: visible,
+        open,
       });
 
       if (!data) return;
@@ -94,7 +94,7 @@ export function useModal(): UseModalReturnType {
     },
 
     closeModal: () => {
-      getInstance()?.setModalProps({ visible: false });
+      getInstance()?.setModalProps({ open: false });
     },
   };
   return [register, methods];
@@ -138,8 +138,8 @@ export const useModalInner = (callbackFn?: Fn): UseModalInnerReturnType => {
       changeLoading: (loading = true) => {
         getInstance()?.setModalProps({ loading });
       },
-      getVisible: computed((): boolean => {
-        return visibleData[~~unref(uidRef)];
+      getOpen: computed((): boolean => {
+        return openData[~~unref(uidRef)];
       }),
 
       changeOkLoading: (loading = true) => {
@@ -147,7 +147,7 @@ export const useModalInner = (callbackFn?: Fn): UseModalInnerReturnType => {
       },
 
       closeModal: () => {
-        getInstance()?.setModalProps({ visible: false });
+        getInstance()?.setModalProps({ open: false });
       },
 
       setModalProps: (props: Partial<ModalProps>) => {

src/components/Modal/src/hooks/useModalDrag.ts

@@ -4,7 +4,7 @@ import { useTimeoutFn } from '@vben/hooks';
 export interface UseModalDragMoveContext {
   draggable: Ref<boolean>;
   destroyOnClose: Ref<boolean | undefined> | undefined;
-  visible: Ref<boolean>;
+  open: Ref<boolean>;
 }
 
 export function useModalDragMove(context: UseModalDragMoveContext) {
@@ -97,7 +97,7 @@ export function useModalDragMove(context: UseModalDragMoveContext) {
   };
 
   watchEffect(() => {
-    if (!unref(context.visible) || !unref(context.draggable)) {
+    if (!unref(context.open) || !unref(context.draggable)) {
       return;
     }
     useTimeoutFn(() => {

src/components/Modal/src/index.less

@@ -13,7 +13,7 @@
   }
 }
 
-.ant-modal {
+.vben-basic-modal .ant-modal {
   width: 520px;
   padding-bottom: 0;
 
@@ -51,6 +51,7 @@
   }
 
   &-content {
+    padding: 12px 8px !important;
     box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
   }
 
@@ -61,7 +62,9 @@
   }
 
   &-close {
+    width: auto !important;
     outline: none;
+    background: #fff !important;
     font-weight: normal;
   }
 

src/components/Modal/src/props.ts

@@ -6,7 +6,7 @@ import { useI18n } from '/@/hooks/web/useI18n';
 const { t } = useI18n();
 
 export const modalProps = {
-  visible: { type: Boolean },
+  open: { type: Boolean },
   scrollTop: { type: Boolean, default: true },
   height: { type: Number },
   minHeight: { type: Number },
@@ -73,7 +73,7 @@ export const basicProps = Object.assign({}, modalProps, {
 
   title: { type: String },
 
-  visible: { type: Boolean },
+  open: { type: Boolean },
 
   width: [String, Number] as PropType<string | number>,
 

src/components/Modal/src/typing.ts

@@ -5,7 +5,7 @@ import type { CSSProperties, VNodeChild, ComputedRef } from 'vue';
  */
 export interface ModalMethods {
   setModalProps: (props: Partial<ModalProps>) => void;
-  emitVisible?: (visible: boolean, uid: number) => void;
+  emitOpen?: (open: boolean, uid: number) => void;
   redoModalHeight?: () => void;
 }
 
@@ -14,7 +14,7 @@ export type RegisterFn = (modalMethods: ModalMethods, uuid?: string) => void;
 export interface ReturnMethods extends ModalMethods {
   openModal: <T = any>(props?: boolean, data?: T, openOnSet?: boolean) => void;
   closeModal: () => void;
-  getVisible?: ComputedRef<boolean>;
+  getOpen?: ComputedRef<boolean>;
 }
 
 export type UseModalReturnType = [RegisterFn, ReturnMethods];
@@ -23,7 +23,7 @@ export interface ReturnInnerMethods extends ModalMethods {
   closeModal: () => void;
   changeLoading: (loading: boolean) => void;
   changeOkLoading: (loading: boolean) => void;
-  getVisible?: ComputedRef<boolean>;
+  getOpen?: ComputedRef<boolean>;
   redoModalHeight: () => void;
 }
 
@@ -40,7 +40,7 @@ export interface ModalProps {
   // 是否可以进行全屏
   canFullscreen?: boolean;
   defaultFullscreen?: boolean;
-  visible?: boolean;
+  open?: boolean;
   // 温馨提醒信息
   helpMessage: string | string[];
 
@@ -203,7 +203,7 @@ export interface ModalWrapperProps {
   modalFooterHeight: number;
   minHeight: number;
   height: number;
-  visible: boolean;
+  open: boolean;
   fullScreen: boolean;
   useWrapper: boolean;
 }

src/components/Prompt/dialog.vue

@@ -1,6 +1,6 @@
 <template>
   <Modal
-    v-model:visible="visible"
+    v-model:open="open"
     :title="title"
     @ok="handleSubmit"
     :destroyOnClose="true"
@@ -20,7 +20,7 @@
   import { FormSchema } from '/@/components/Form';
   import { BasicForm, useForm } from '/@/components/Form/index';
 
-  const visible = ref<boolean>(true);
+  const open = ref<boolean>(true);
   const props = defineProps<{
     title: string;
     addFormSchemas: FormSchema[];
@@ -42,7 +42,7 @@
     if (props.onOK) {
       await props.onOK(row.txt);
     }
-    visible.value = false;
+    open.value = false;
   }
 </script>
 

src/components/SimpleMenu/src/components/SubMenuItem.vue

@@ -20,9 +20,10 @@
       placement="right"
       :overlayClassName="`${prefixCls}-menu-popover`"
       v-else
-      :visible="getIsOpend"
-      @visible-change="handleVisibleChange"
+      :open="getIsOpend"
+      @on-open-change="handleVisibleChange"
       :overlayStyle="getOverlayStyle"
+      :overlayInnerStyle="{ padding: 0 }"
       :align="{ offset: [0, 0] }"
     >
       <div :class="getSubClass" v-bind="getEvents(false)">

src/components/Table/src/types/column.ts

@@ -80,7 +80,7 @@ export interface ColumnProps<T> {
    * Whether filterDropdown is visible
    * @type boolean
    */
-  filterDropdownVisible?: boolean;
+  filterDropdownOpen?: boolean;
 
   /**
    * Whether the dataSource is filtered

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

@@ -3,7 +3,7 @@
     <span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
       <img :class="`${prefixCls}__header`" :src="getUserInfo.avatar" />
       <span :class="`${prefixCls}__info hidden md:block`">
-        <span :class="`${prefixCls}__name  `" class="truncate">
+        <span :class="`${prefixCls}__name`" class="truncate">
           {{ getUserInfo.realName }}
         </span>
       </span>

src/layouts/default/header/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Header :class="getHeaderClass">
+  <Layout.Header :class="getHeaderClass" style="height: auto; padding-inline: 0">
     <!-- left start -->
     <div :class="`${prefixCls}-left`">
       <!-- logo -->
@@ -21,7 +21,7 @@
     <!-- left end -->
 
     <!-- menu start -->
-    <div :class="`${prefixCls}-menu`" v-if="getShowTopMenu && !getIsMobile">
+    <div v-if="getShowTopMenu && !getIsMobile" :class="`${prefixCls}-menu`">
       <LayoutMenu
         :isHorizontal="true"
         :theme="getHeaderTheme"
@@ -33,7 +33,7 @@
 
     <!-- action  -->
     <div :class="`${prefixCls}-action`">
-      <AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
+      <AppSearch v-if="getShowSearch" :class="`${prefixCls}-action__item `" />
 
       <ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
 
@@ -52,145 +52,100 @@
 
       <SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
     </div>
-  </Header>
+  </Layout.Header>
 </template>
-<script lang="ts">
-  import { defineComponent, unref, computed } from 'vue';
-
-  import { propTypes } from '/@/utils/propTypes';
-
+<script lang="ts" setup>
   import { Layout } from 'ant-design-vue';
-  import { AppLogo, AppSearch, AppLocalePicker } from '/@/components/Application';
+  import { computed, unref } from 'vue';
+
+  import { AppLocalePicker, AppLogo, AppSearch } from '@/components/Application';
+  import { SettingButtonPositionEnum } from '@/enums/appEnum';
+  import { MenuModeEnum, MenuSplitTyeEnum } from '@/enums/menuEnum';
+  import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
+  import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
+  import { useAppInject } from '@/hooks/web/useAppInject';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useLocale } from '@/locales/useLocale';
+  import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
+  import { propTypes } from '@/utils/propTypes';
+
   import LayoutMenu from '../menu/index.vue';
   import LayoutTrigger from '../trigger/index.vue';
+  import { ErrorAction, FullScreen, LayoutBreadcrumb, Notify, UserDropDown } from './components';
+
+  const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue'), {
+    loading: true,
+  });
+  defineOptions({ name: 'LayoutHeader' });
+
+  const props = defineProps({
+    fixed: propTypes.bool,
+  });
+  const { prefixCls } = useDesign('layout-header');
+  const {
+    getShowTopMenu,
+    getShowHeaderTrigger,
+    getSplit,
+    getIsMixMode,
+    getMenuWidth,
+    getIsMixSidebar,
+  } = useMenuSetting();
+  const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
+
+  const {
+    getHeaderTheme,
+    getShowFullScreen,
+    getShowNotice,
+    getShowContent,
+    getShowBread,
+    getShowHeaderLogo,
+    getShowHeader,
+    getShowSearch,
+  } = useHeaderSetting();
+
+  const { getShowLocalePicker } = useLocale();
+
+  const { getIsMobile } = useAppInject();
+
+  const getHeaderClass = computed(() => {
+    const theme = unref(getHeaderTheme);
+    return [
+      prefixCls,
+      {
+        [`${prefixCls}--fixed`]: props.fixed,
+        [`${prefixCls}--mobile`]: unref(getIsMobile),
+        [`${prefixCls}--${theme}`]: theme,
+      },
+    ];
+  });
+
+  const getShowSetting = computed(() => {
+    if (!unref(getShowSettingButton)) {
+      return false;
+    }
+    const settingButtonPosition = unref(getSettingButtonPosition);
+
+    if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
+      return unref(getShowHeader);
+    }
+    return settingButtonPosition === SettingButtonPositionEnum.HEADER;
+  });
+
+  const getLogoWidth = computed(() => {
+    if (!unref(getIsMixMode) || unref(getIsMobile)) {
+      return {};
+    }
+    const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
+    return { width: `${width}px` };
+  });
+
+  const getSplitType = computed(() => {
+    return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
+  });
 
-  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-
-  import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
-  import { SettingButtonPositionEnum } from '/@/enums/appEnum';
-
-  import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction } from './components';
-  import { useAppInject } from '/@/hooks/web/useAppInject';
-  import { useDesign } from '/@/hooks/web/useDesign';
-
-  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
-  import { useLocale } from '/@/locales/useLocale';
-
-  export default defineComponent({
-    name: 'LayoutHeader',
-    components: {
-      Header: Layout.Header,
-      AppLogo,
-      LayoutTrigger,
-      LayoutBreadcrumb,
-      LayoutMenu,
-      UserDropDown,
-      AppLocalePicker,
-      FullScreen,
-      Notify,
-      AppSearch,
-      ErrorAction,
-      SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
-        loading: true,
-      }),
-    },
-    props: {
-      fixed: propTypes.bool,
-    },
-    setup(props) {
-      const { prefixCls } = useDesign('layout-header');
-      const {
-        getShowTopMenu,
-        getShowHeaderTrigger,
-        getSplit,
-        getIsMixMode,
-        getMenuWidth,
-        getIsMixSidebar,
-      } = useMenuSetting();
-      const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } =
-        useRootSetting();
-
-      const {
-        getHeaderTheme,
-        getShowFullScreen,
-        getShowNotice,
-        getShowContent,
-        getShowBread,
-        getShowHeaderLogo,
-        getShowHeader,
-        getShowSearch,
-      } = useHeaderSetting();
-
-      const { getShowLocalePicker } = useLocale();
-
-      const { getIsMobile } = useAppInject();
-
-      const getHeaderClass = computed(() => {
-        const theme = unref(getHeaderTheme);
-        return [
-          prefixCls,
-          {
-            [`${prefixCls}--fixed`]: props.fixed,
-            [`${prefixCls}--mobile`]: unref(getIsMobile),
-            [`${prefixCls}--${theme}`]: theme,
-          },
-        ];
-      });
-
-      const getShowSetting = computed(() => {
-        if (!unref(getShowSettingButton)) {
-          return false;
-        }
-        const settingButtonPosition = unref(getSettingButtonPosition);
-
-        if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
-          return unref(getShowHeader);
-        }
-        return settingButtonPosition === SettingButtonPositionEnum.HEADER;
-      });
-
-      const getLogoWidth = computed(() => {
-        if (!unref(getIsMixMode) || unref(getIsMobile)) {
-          return {};
-        }
-        const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
-        return { width: `${width}px` };
-      });
-
-      const getSplitType = computed(() => {
-        return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
-      });
-
-      const getMenuMode = computed(() => {
-        return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
-      });
-
-      return {
-        prefixCls,
-        getHeaderClass,
-        getShowHeaderLogo,
-        getHeaderTheme,
-        getShowHeaderTrigger,
-        getIsMobile,
-        getShowBread,
-        getShowContent,
-        getSplitType,
-        getSplit,
-        getMenuMode,
-        getShowTopMenu,
-        getShowLocalePicker,
-        getShowFullScreen,
-        getShowNotice,
-        getUseErrorHandle,
-        getLogoWidth,
-        getIsMixSidebar,
-        getShowSettingButton,
-        getShowSetting,
-        getShowSearch,
-      };
-    },
+  const getMenuMode = computed(() => {
+    return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
   });
 </script>
 <style lang="less">

src/layouts/default/sider/LayoutSider.vue

@@ -1,10 +1,10 @@
 <template>
   <div
     v-if="getMenuFixed && !getIsMobile"
-    :style="getHiddenDomStyle"
     v-show="showClassSideBarRef"
+    :style="getHiddenDomStyle"
   ></div>
-  <Sider
+  <Layout.Sider
     v-show="showClassSideBarRef"
     ref="sideRef"
     breakpoint="lg"
@@ -14,120 +14,94 @@
     :collapsed="getCollapsed"
     :collapsedWidth="getCollapsedWidth"
     :theme="getMenuTheme"
-    @breakpoint="onBreakpointChange"
     :trigger="getTrigger"
     v-bind="getTriggerAttr"
+    @breakpoint="onBreakpointChange"
   >
-    <template #trigger v-if="getShowTrigger">
+    <template v-if="getShowTrigger" #trigger>
       <LayoutTrigger />
     </template>
     <LayoutMenu :theme="getMenuTheme" :menuMode="getMode" :splitType="getSplitType" />
     <DragBar ref="dragBarRef" />
-  </Sider>
+  </Layout.Sider>
 </template>
-<script lang="ts">
-  import { computed, defineComponent, ref, unref, CSSProperties, h } from 'vue';
-
+<script lang="ts" setup>
   import { Layout } from 'ant-design-vue';
+  import { computed, CSSProperties, h, ref, unref } from 'vue';
+
+  import { MenuModeEnum, MenuSplitTyeEnum } from '@/enums/menuEnum';
+  import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+  import { useAppInject } from '@/hooks/web/useAppInject';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import LayoutTrigger from '@/layouts/default/trigger/index.vue';
+
   import LayoutMenu from '../menu/index.vue';
-  import LayoutTrigger from '/@/layouts/default/trigger/index.vue';
-  import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-  import { useTrigger, useDragLine, useSiderEvent } from './useLayoutSider';
-  import { useAppInject } from '/@/hooks/web/useAppInject';
-  import { useDesign } from '/@/hooks/web/useDesign';
   import DragBar from './DragBar.vue';
+  import { useDragLine, useSiderEvent, useTrigger } from './useLayoutSider';
+
+  defineOptions({ name: 'LayoutSideBar' });
+
+  const dragBarRef = ref(null);
+  const sideRef = ref(null);
+
+  const {
+    getCollapsed,
+    getMenuWidth,
+    getSplit,
+    getMenuTheme,
+    getRealWidth,
+    getMenuHidden,
+    getMenuFixed,
+    getIsMixMode,
+  } = useMenuSetting();
+
+  const { prefixCls } = useDesign('layout-sideBar');
+
+  const { getIsMobile } = useAppInject();
 
-  export default defineComponent({
-    name: 'LayoutSideBar',
-    components: { Sider: Layout.Sider, LayoutMenu, DragBar, LayoutTrigger },
-    setup() {
-      const dragBarRef = ref(null);
-      const sideRef = ref(null);
-
-      const {
-        getCollapsed,
-        getMenuWidth,
-        getSplit,
-        getMenuTheme,
-        getRealWidth,
-        getMenuHidden,
-        getMenuFixed,
-        getIsMixMode,
-        toggleCollapsed,
-      } = useMenuSetting();
-
-      const { prefixCls } = useDesign('layout-sideBar');
-
-      const { getIsMobile } = useAppInject();
-
-      const { getTriggerAttr, getShowTrigger } = useTrigger(getIsMobile);
-
-      useDragLine(sideRef, dragBarRef);
-
-      const { getCollapsedWidth, onBreakpointChange } = useSiderEvent();
-
-      const getMode = computed(() => {
-        return unref(getSplit) ? MenuModeEnum.INLINE : null;
-      });
-
-      const getSplitType = computed(() => {
-        return unref(getSplit) ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE;
-      });
-
-      const showClassSideBarRef = computed(() => {
-        return unref(getSplit) ? !unref(getMenuHidden) : true;
-      });
-
-      const getSiderClass = computed(() => {
-        return [
-          prefixCls,
-          {
-            [`${prefixCls}--fixed`]: unref(getMenuFixed),
-            [`${prefixCls}--mix`]: unref(getIsMixMode) && !unref(getIsMobile),
-          },
-        ];
-      });
-
-      const getHiddenDomStyle = computed((): CSSProperties => {
-        const width = `${unref(getRealWidth)}px`;
-        return {
-          width: width,
-          overflow: 'hidden',
-          flex: `0 0 ${width}`,
-          maxWidth: width,
-          minWidth: width,
-          transition: 'all 0.2s',
-        };
-      });
-
-      // 在此处使用计算量可能会导致sider异常
-      // andv 更新后，如果trigger插槽可用，则此处代码可废弃
-      const getTrigger = h(LayoutTrigger);
-
-      return {
-        prefixCls,
-        sideRef,
-        dragBarRef,
-        getIsMobile,
-        getHiddenDomStyle,
-        getSiderClass,
-        getTrigger,
-        getTriggerAttr,
-        getCollapsedWidth,
-        getMenuFixed,
-        showClassSideBarRef,
-        getMenuWidth,
-        getCollapsed,
-        getMenuTheme,
-        onBreakpointChange,
-        getMode,
-        getSplitType,
-        getShowTrigger,
-        toggleCollapsed,
-      };
-    },
+  const { getTriggerAttr, getShowTrigger } = useTrigger(getIsMobile);
+
+  useDragLine(sideRef, dragBarRef);
+
+  const { getCollapsedWidth, onBreakpointChange } = useSiderEvent();
+
+  const getMode = computed(() => {
+    return unref(getSplit) ? MenuModeEnum.INLINE : null;
+  });
+
+  const getSplitType = computed(() => {
+    return unref(getSplit) ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE;
+  });
+
+  const showClassSideBarRef = computed(() => {
+    return unref(getSplit) ? !unref(getMenuHidden) : true;
+  });
+
+  const getSiderClass = computed(() => {
+    return [
+      prefixCls,
+      {
+        [`${prefixCls}--fixed`]: unref(getMenuFixed),
+        [`${prefixCls}--mix`]: unref(getIsMixMode) && !unref(getIsMobile),
+      },
+    ];
   });
+
+  const getHiddenDomStyle = computed((): CSSProperties => {
+    const width = `${unref(getRealWidth)}px`;
+    return {
+      width,
+      overflow: 'hidden',
+      flex: `0 0 ${width}`,
+      maxWidth: width,
+      minWidth: width,
+      transition: 'all 0.2s',
+    };
+  });
+
+  // 在此处使用计算量可能会导致sider异常
+  // andv 更新后，如果trigger插槽可用，则此处代码可废弃
+  const getTrigger = h(LayoutTrigger);
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-layout-sideBar';
@@ -136,7 +110,7 @@
     z-index: @layout-sider-fixed-z-index;
 
     &--fixed {
-      position: fixed;
+      position: fixed !important;
       top: 0;
       left: 0;
       height: 100%;

src/layouts/default/sider/index.vue

@@ -4,8 +4,8 @@
     placement="left"
     :class="prefixCls"
     :width="getMenuWidth"
-    :getContainer="null"
-    :visible="!getCollapsed"
+    :getContainer="false"
+    :open="!getCollapsed"
     @close="handleClose"
   >
     <Sider />
@@ -13,6 +13,7 @@
   <MixSider v-else-if="getIsMixSidebar" />
   <Sider v-else />
 </template>
+
 <script lang="ts">
   import { defineComponent } from 'vue';
 

src/main.ts

@@ -1,7 +1,7 @@
 import 'uno.css';
 import '@/design/index.less';
 import '@/components/VxeTable/src/css/index.scss';
-import 'ant-design-vue/dist/antd.less';
+import 'ant-design-vue/dist/reset.css';
 // Register icon sprite
 import 'virtual:svg-icons-register';
 

src/views/demo/comp/modal/Modal1.vue

@@ -5,7 +5,7 @@
     @register="register"
     title="Modal Title"
     :helpMessage="['提示1', '提示2']"
-    @visible-change="handleShow"
+    @open-change="handleShow"
   >
     <template #insertFooter>
       <a-button type="primary" danger @click="setLines" :disabled="loading">点我更新内容</a-button>
@@ -38,8 +38,8 @@
         },
       );
 
-      function handleShow(visible: boolean) {
-        if (visible) {
+      function handleShow(open: boolean) {
+        if (open) {
           loading.value = true;
           setModalProps({ loading: true, confirmLoading: true });
           setTimeout(() => {

src/views/demo/comp/modal/index.vue

@@ -31,7 +31,7 @@
     />
     <a-button type="primary" class="my-4" @click="handleCreatePrompt"> Prompt </a-button>
 
-    <component :is="currentModal" v-model:visible="modalVisible" :userData="userData" />
+    <component :is="currentModal" v-model:open="modalOpen" :userData="userData" />
 
     <Modal1 @register="register1" :minHeight="100" />
     <Modal2 @register="register2" />
@@ -59,7 +59,7 @@
       const [register2, { openModal: openModal2 }] = useModal();
       const [register3, { openModal: openModal3 }] = useModal();
       const [register4, { openModal: openModal4 }] = useModal();
-      const modalVisible = ref<Boolean>(false);
+      const modalOpen = ref<Boolean>(false);
       const userData = ref<any>(null);
 
       function send() {
@@ -96,7 +96,7 @@
           // passing data through `userData` prop
           userData.value = { data: Math.random(), info: 'Info222' };
           // open the target modal
-          modalVisible.value = true;
+          modalOpen.value = true;
         });
       }
 
@@ -122,7 +122,7 @@
         openModal3,
         register4,
         openModal4,
-        modalVisible,
+        modalOpen,
         userData,
         openTargetModal,
         send,

src/views/form-design/components/VFormDesign/config/componentPropsConfig.ts

@@ -907,7 +907,7 @@ const componentAttrs: IBaseComponentProps = {
       },
     },
     {
-      name: 'dropdownClassName',
+      name: 'popupClassName',
       label: '下拉菜单的 className 属性',
       component: 'Input',
       componentProps: {