github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-01-23 17:50:25 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
invalid w 2023-09-08 22:10:07 +08:00 committed by GitHub
parent 607a24632a
commit aaf2fde3cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 651 additions and 479 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

558
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

28
src/components/Drawer/src/BasicDrawer.vue
View File

@ -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;
}
}

2
src/components/Drawer/src/props.ts
View File

@ -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: {

12
src/components/Drawer/src/typing.ts
View File

@ -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.

24
src/components/Drawer/src/useDrawer.ts
View File

@ -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);
},
},

36
src/components/Modal/src/BasicModal.vue
View File

@ -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,

4
src/components/Modal/src/components/Modal.tsx
View File

@ -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,
});

6
src/components/Modal/src/components/ModalWrapper.vue
View File

@ -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;

22
src/components/Modal/src/hooks/useModal.ts
View File

@ -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>) => {

4
src/components/Modal/src/hooks/useModalDrag.ts
View File

@ -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(() => {

5
src/components/Modal/src/index.less
View File

@ -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;
}

4
src/components/Modal/src/props.ts
View File

@ -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>,

10
src/components/Modal/src/typing.ts
View File

@ -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;
}

6
src/components/Prompt/dialog.vue
View File

@ -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>

5
src/components/SimpleMenu/src/components/SubMenuItem.vue
View File

@ -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)">

2
src/components/Table/src/types/column.ts
View File

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

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

@ -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>

209
src/layouts/default/header/index.vue
View File

@ -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';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue'), {
loading: true,
});
defineOptions({ name: 'LayoutHeader' });
import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
import { SettingButtonPositionEnum } from '/@/enums/appEnum';
const props = defineProps({
fixed: propTypes.bool,
});
const { prefixCls } = useDesign('layout-header');
const {
getShowTopMenu,
getShowHeaderTrigger,
getSplit,
getIsMixMode,
getMenuWidth,
getIsMixSidebar,
} = useMenuSetting();
const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction } from './components';
import { useAppInject } from '/@/hooks/web/useAppInject';
import { useDesign } from '/@/hooks/web/useDesign';
const {
getHeaderTheme,
getShowFullScreen,
getShowNotice,
getShowContent,
getShowBread,
getShowHeaderLogo,
getShowHeader,
getShowSearch,
} = useHeaderSetting();
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { useLocale } from '/@/locales/useLocale';
const { getShowLocalePicker } = 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 { getIsMobile } = useAppInject();
const {
getHeaderTheme,
getShowFullScreen,
getShowNotice,
getShowContent,
getShowBread,
getShowHeaderLogo,
getShowHeader,
getShowSearch,
} = useHeaderSetting();
const getHeaderClass = computed(() => {
const theme = unref(getHeaderTheme);
return [
prefixCls,
{
[`${prefixCls}--fixed`]: props.fixed,
[`${prefixCls}--mobile`]: unref(getIsMobile),
[`${prefixCls}--${theme}`]: theme,
},
];
});
const { getShowLocalePicker } = useLocale();
const getShowSetting = computed(() => {
if (!unref(getShowSettingButton)) {
return false;
}
const settingButtonPosition = unref(getSettingButtonPosition);
const { getIsMobile } = useAppInject();
if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
return unref(getShowHeader);
}
return settingButtonPosition === SettingButtonPositionEnum.HEADER;
});
const getHeaderClass = computed(() => {
const theme = unref(getHeaderTheme);
return [
prefixCls,
{
[`${prefixCls}--fixed`]: props.fixed,
[`${prefixCls}--mobile`]: unref(getIsMobile),
[`${prefixCls}--${theme}`]: theme,
},
];
});
const getLogoWidth = computed(() => {
if (!unref(getIsMixMode) || unref(getIsMobile)) {
return {};
}
const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
return { width: `${width}px` };
});
const getShowSetting = computed(() => {
if (!unref(getShowSettingButton)) {
return false;
}
const settingButtonPosition = unref(getSettingButtonPosition);
const getSplitType = computed(() => {
return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
});
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">

166
src/layouts/default/sider/LayoutSider.vue
View File

@ -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';
export default defineComponent({
name: 'LayoutSideBar',
components: { Sider: Layout.Sider, LayoutMenu, DragBar, LayoutTrigger },
setup() {
const dragBarRef = ref(null);
const sideRef = ref(null);
defineOptions({ name: 'LayoutSideBar' });
const {
getCollapsed,
getMenuWidth,
getSplit,
getMenuTheme,
getRealWidth,
getMenuHidden,
getMenuFixed,
getIsMixMode,
toggleCollapsed,
} = useMenuSetting();
const dragBarRef = ref(null);
const sideRef = ref(null);
const { prefixCls } = useDesign('layout-sideBar');
const {
getCollapsed,
getMenuWidth,
getSplit,
getMenuTheme,
getRealWidth,
getMenuHidden,
getMenuFixed,
getIsMixMode,
} = useMenuSetting();
const { getIsMobile } = useAppInject();
const { prefixCls } = useDesign('layout-sideBar');
const { getTriggerAttr, getShowTrigger } = useTrigger(getIsMobile);
const { getIsMobile } = useAppInject();
useDragLine(sideRef, dragBarRef);
const { getTriggerAttr, getShowTrigger } = useTrigger(getIsMobile);
const { getCollapsedWidth, onBreakpointChange } = useSiderEvent();
useDragLine(sideRef, dragBarRef);
const getMode = computed(() => {
return unref(getSplit) ? MenuModeEnum.INLINE : null;
});
const { getCollapsedWidth, onBreakpointChange } = useSiderEvent();
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 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%;

5
src/layouts/default/sider/index.vue
View File

@ -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';

2
src/main.ts
View File

@ -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';

6
src/views/demo/comp/modal/Modal1.vue
View File

@ -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(() => {

8
src/views/demo/comp/modal/index.vue
View File

@ -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,

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

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