diff --git a/docs/src/components/common-ui/vben-modal.md b/docs/src/components/common-ui/vben-modal.md index 3c8200f9..fc714e27 100644 --- a/docs/src/components/common-ui/vben-modal.md +++ b/docs/src/components/common-ui/vben-modal.md @@ -56,6 +56,15 @@ Modal 内的内容一般业务中,会比较复杂,所以我们可以将 moda +## 动画类型 + +通过 `animationType` 属性可以控制弹窗的动画效果: + +- `slide`(默认):从顶部向下滑动进入/退出 +- `scale`:缩放淡入/淡出效果 + + + ::: info 注意 - `VbenModal` 组件对与参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenModal参数)。如果你已经传入了 `slot` 或者 `props`,那么 `setState` 将不会生效,这种情况下你可以通过 `slot` 或者 `props` 来更新状态。 @@ -112,6 +121,7 @@ const [Modal, modalApi] = useVbenModal({ | bordered | 是否显示border | `boolean` | `false` | | zIndex | 弹窗的ZIndex层级 | `number` | `1000` | | overlayBlur | 遮罩模糊度 | `number` | - | +| animationType | 动画类型 | `'slide' \| 'scale'` | `'slide'` | | submitting | 标记为提交中,锁定弹窗当前状态 | `boolean` | `false` | ::: info appendToMain diff --git a/docs/src/demos/vben-modal/animation-type/index.vue b/docs/src/demos/vben-modal/animation-type/index.vue new file mode 100644 index 00000000..79ba9d33 --- /dev/null +++ b/docs/src/demos/vben-modal/animation-type/index.vue @@ -0,0 +1,36 @@ + + + + + + 滑动动画 + 缩放动画 + + + + 这是使用滑动动画的弹窗,从顶部向下滑动进入。 + + + + 这是使用缩放动画的弹窗,以缩放淡入淡出的方式显示。 + + + diff --git a/packages/@core/base/shared/src/utils/__tests__/resources.test.ts b/packages/@core/base/shared/src/utils/__tests__/resources.test.ts new file mode 100644 index 00000000..f14ff896 --- /dev/null +++ b/packages/@core/base/shared/src/utils/__tests__/resources.test.ts @@ -0,0 +1,82 @@ +import { beforeEach, describe, expect, it } from 'vitest'; + +import { loadScript } from '../resources'; + +const testJsPath = + 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'; + +describe('loadScript', () => { + beforeEach(() => { + // 每个测试前清空 head,保证环境干净 + document.head.innerHTML = ''; + }); + + it('should resolve when the script loads successfully', async () => { + const promise = loadScript(testJsPath); + + // 此时脚本元素已被创建并插入 + const script = document.querySelector( + `script[src="${testJsPath}"]`, + ) as HTMLScriptElement; + expect(script).toBeTruthy(); + + // 模拟加载成功 + script.dispatchEvent(new Event('load')); + + // 等待 promise resolve + await expect(promise).resolves.toBeUndefined(); + }); + + it('should not insert duplicate script and resolve immediately if already loaded', async () => { + // 先手动插入一个相同 src 的 script + const existing = document.createElement('script'); + existing.src = 'bar.js'; + document.head.append(existing); + + // 再次调用 + const promise = loadScript('bar.js'); + + // 立即 resolve + await expect(promise).resolves.toBeUndefined(); + + // head 中只保留一个 + const scripts = document.head.querySelectorAll('script[src="bar.js"]'); + expect(scripts).toHaveLength(1); + }); + + it('should reject when the script fails to load', async () => { + const promise = loadScript('error.js'); + + const script = document.querySelector( + 'script[src="error.js"]', + ) as HTMLScriptElement; + expect(script).toBeTruthy(); + + // 模拟加载失败 + script.dispatchEvent(new Event('error')); + + await expect(promise).rejects.toThrow('Failed to load script: error.js'); + }); + + it('should handle multiple concurrent calls and only insert one script tag', async () => { + const p1 = loadScript(testJsPath); + const p2 = loadScript(testJsPath); + + const script = document.querySelector( + `script[src="${testJsPath}"]`, + ) as HTMLScriptElement; + expect(script).toBeTruthy(); + + // 触发一次 load,两个 promise 都应该 resolve + script.dispatchEvent(new Event('load')); + + await expect(p1).resolves.toBeUndefined(); + await expect(p2).resolves.toBeUndefined(); + + // 只插入一次 + const scripts = document.head.querySelectorAll( + `script[src="${testJsPath}"]`, + ); + expect(scripts).toHaveLength(1); + }); +}); diff --git a/packages/@core/base/shared/src/utils/index.ts b/packages/@core/base/shared/src/utils/index.ts index 925af1c1..c067c731 100644 --- a/packages/@core/base/shared/src/utils/index.ts +++ b/packages/@core/base/shared/src/utils/index.ts @@ -7,6 +7,7 @@ export * from './inference'; export * from './letter'; export * from './merge'; export * from './nprogress'; +export * from './resources'; export * from './state-handler'; export * from './to'; export * from './tree'; diff --git a/packages/@core/base/shared/src/utils/resources.ts b/packages/@core/base/shared/src/utils/resources.ts new file mode 100644 index 00000000..c5afa7f1 --- /dev/null +++ b/packages/@core/base/shared/src/utils/resources.ts @@ -0,0 +1,21 @@ +/** + * 加载js文件 + * @param src js文件地址 + */ +function loadScript(src: string) { + return new Promise((resolve, reject) => { + if (document.querySelector(`script[src="${src}"]`)) { + // 如果已经加载过,直接 resolve + return resolve(); + } + const script = document.createElement('script'); + script.src = src; + script.addEventListener('load', () => resolve()); + script.addEventListener('error', () => + reject(new Error(`Failed to load script: ${src}`)), + ); + document.head.append(script); + }); +} + +export { loadScript }; diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts b/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts index d04d4875..1d5b4c26 100644 --- a/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts +++ b/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts @@ -59,6 +59,7 @@ export class ModalApi { showCancelButton: true, showConfirmButton: true, title: '', + animationType: 'slide', }; this.store = new Store( diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.ts b/packages/@core/ui-kit/popup-ui/src/modal/modal.ts index 2dbab9e4..fa41344e 100644 --- a/packages/@core/ui-kit/popup-ui/src/modal/modal.ts +++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.ts @@ -5,6 +5,11 @@ import type { MaybePromise } from '@vben-core/typings'; import type { ModalApi } from './modal-api'; export interface ModalProps { + /** + * 动画类型 + * @default 'slide' + */ + animationType?: 'scale' | 'slide'; /** * 是否要挂载到内容区域 * @default false diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue index b3fdf3fb..89184750 100644 --- a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue +++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue @@ -94,12 +94,11 @@ const { submitting, title, titleTooltip, + animationType, zIndex, } = usePriorityValues(props, state); -const shouldFullscreen = computed( - () => (fullscreen.value && header.value) || isMobile.value, -); +const shouldFullscreen = computed(() => fullscreen.value || isMobile.value); const shouldDraggable = computed( () => draggable.value && !shouldFullscreen.value && header.value, @@ -244,6 +243,7 @@ function handleClosed() { :modal="modal" :open="state?.isOpen" :show-close="closable" + :animation-type="animationType" :z-index="zIndex" :overlay-blur="overlayBlur" close-class="top-3" diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue index 9f078987..22ed845a 100644 --- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue +++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue @@ -20,6 +20,7 @@ import DialogOverlay from './DialogOverlay.vue'; const props = withDefaults( defineProps< DialogContentProps & { + animationType?: 'scale' | 'slide'; appendTo?: HTMLElement | string; class?: ClassType; closeClass?: ClassType; @@ -31,7 +32,12 @@ const props = withDefaults( zIndex?: number; } >(), - { appendTo: 'body', closeDisabled: false, showClose: true }, + { + appendTo: 'body', + animationType: 'slide', + closeDisabled: false, + showClose: true, + }, ); const emits = defineEmits< DialogContentEmits & { close: []; closed: []; opened: [] } @@ -43,6 +49,7 @@ const delegatedProps = computed(() => { modal: _modal, open: _open, showClose: __, + animationType: ___, ...delegated } = props; @@ -100,7 +107,11 @@ defineExpose({ v-bind="forwarded" :class=" cn( - 'z-popup bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%] w-full p-6 shadow-lg outline-none sm:rounded-xl', + 'z-popup bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 w-full p-6 shadow-lg outline-none sm:rounded-xl', + { + 'data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]': + animationType === 'slide', + }, props.class, ) " diff --git a/packages/effects/common-ui/src/ui/authentication/dingding-login.vue b/packages/effects/common-ui/src/ui/authentication/dingding-login.vue new file mode 100644 index 00000000..4c63301e --- /dev/null +++ b/packages/effects/common-ui/src/ui/authentication/dingding-login.vue @@ -0,0 +1,113 @@ + + + + + + + + + + + + + + diff --git a/packages/effects/common-ui/src/ui/authentication/third-party-login.vue b/packages/effects/common-ui/src/ui/authentication/third-party-login.vue index 98afc9a8..752e59c6 100644 --- a/packages/effects/common-ui/src/ui/authentication/third-party-login.vue +++ b/packages/effects/common-ui/src/ui/authentication/third-party-login.vue @@ -1,6 +1,7 @@ - +
这是使用滑动动画的弹窗,从顶部向下滑动进入。
这是使用缩放动画的弹窗,以缩放淡入淡出的方式显示。