refactor: playground use antdv-next

master^2
xingyu4j 2026-05-18 16:18:46 +08:00
parent 1ec058cbe3
commit 350d5ee60e
89 changed files with 191 additions and 186 deletions

View File

@ -136,8 +136,8 @@ const PreviewGroup = defineAsyncComponent(() =>
import('antdv-next/dist/image/index').then((res) => res.ImagePreviewGroup),
);
const withDefaultPlaceholder = <T extends Component>(
component: T,
const withDefaultPlaceholder = (
component: Component,
type: 'input' | 'select',
componentProps: Recordable<any> = {},
) => {

View File

@ -48,7 +48,7 @@
"@vben/types": "workspace:*",
"@vben/utils": "workspace:*",
"@vueuse/core": "catalog:",
"ant-design-vue": "catalog:",
"antdv-next": "catalog:",
"dayjs": "catalog:",
"json-bigint": "catalog:",
"pinia": "catalog:",

View File

@ -18,6 +18,7 @@ import type {
MentionsProps,
RadioGroupProps,
RadioProps,
RangePickerProps,
RateProps,
SelectProps,
SpaceProps,
@ -28,8 +29,7 @@ import type {
UploadChangeParam,
UploadFile,
UploadProps,
} from 'ant-design-vue';
import type { RangePickerProps } from 'ant-design-vue/es/date-picker';
} from 'antdv-next';
import type { Component, Ref } from 'vue';
@ -72,7 +72,7 @@ import { isEmpty } from '@vben/utils';
import { VbenCollapsibleParams } from '@vben-core/shadcn-ui';
import { message, Modal, notification } from 'ant-design-vue';
import { message, Modal, notification } from 'antdv-next';
import { upload_file } from '#/api/examples/upload';
type AdapterUploadProps = UploadProps & {
@ -86,60 +86,72 @@ type AdapterUploadProps = UploadProps & {
};
const AutoComplete = defineAsyncComponent(
() => import('ant-design-vue/es/auto-complete'),
() => import('antdv-next/dist/auto-complete/index'),
);
const Button = defineAsyncComponent(
() => import('antdv-next/dist/button/index'),
);
const Button = defineAsyncComponent(() => import('ant-design-vue/es/button'));
const Checkbox = defineAsyncComponent(
() => import('ant-design-vue/es/checkbox'),
() => import('antdv-next/dist/checkbox/index'),
);
const CheckboxGroup = defineAsyncComponent(() =>
import('ant-design-vue/es/checkbox').then((res) => res.CheckboxGroup),
import('antdv-next/dist/checkbox/index').then((res) => res.CheckboxGroup),
);
const DatePicker = defineAsyncComponent(
() => import('ant-design-vue/es/date-picker'),
() => import('antdv-next/dist/date-picker/index'),
);
const Divider = defineAsyncComponent(() => import('ant-design-vue/es/divider'));
const Input = defineAsyncComponent(() => import('ant-design-vue/es/input'));
const Divider = defineAsyncComponent(
() => import('antdv-next/dist/divider/index'),
);
const Input = defineAsyncComponent(() => import('antdv-next/dist/input/index'));
const InputNumber = defineAsyncComponent(
() => import('ant-design-vue/es/input-number'),
() => import('antdv-next/dist/input-number/index'),
);
const InputPassword = defineAsyncComponent(() =>
import('ant-design-vue/es/input').then((res) => res.InputPassword),
import('antdv-next/dist/input/index').then((res) => res.InputPassword),
);
const Mentions = defineAsyncComponent(
() => import('ant-design-vue/es/mentions'),
() => import('antdv-next/dist/mentions/index'),
);
const Radio = defineAsyncComponent(() => import('ant-design-vue/es/radio'));
const Radio = defineAsyncComponent(() => import('antdv-next/dist/radio/index'));
const RadioGroup = defineAsyncComponent(() =>
import('ant-design-vue/es/radio').then((res) => res.RadioGroup),
import('antdv-next/dist/radio/index').then((res) => res.RadioGroup),
);
const RangePicker = defineAsyncComponent(() =>
import('ant-design-vue/es/date-picker').then((res) => res.RangePicker),
import('antdv-next/dist/date-picker/index').then(
(res) => res.DateRangePicker,
),
);
const Rate = defineAsyncComponent(() => import('ant-design-vue/es/rate'));
const Select = defineAsyncComponent(() => import('ant-design-vue/es/select'));
const Space = defineAsyncComponent(() => import('ant-design-vue/es/space'));
const Switch = defineAsyncComponent(() => import('ant-design-vue/es/switch'));
const Textarea = defineAsyncComponent(() =>
import('ant-design-vue/es/input').then((res) => res.Textarea),
const Rate = defineAsyncComponent(() => import('antdv-next/dist/rate/index'));
const Select = defineAsyncComponent(
() => import('antdv-next/dist/select/index'),
);
const Space = defineAsyncComponent(() => import('antdv-next/dist/space/index'));
const Switch = defineAsyncComponent(
() => import('antdv-next/dist/switch/index'),
);
const Textarea = defineAsyncComponent(
() => import('antdv-next/dist/input/TextArea'),
);
const TimePicker = defineAsyncComponent(
() => import('ant-design-vue/es/time-picker'),
() => import('antdv-next/dist/time-picker/index'),
);
const TreeSelect = defineAsyncComponent(
() => import('ant-design-vue/es/tree-select'),
() => import('antdv-next/dist/tree-select/index'),
);
const Cascader = defineAsyncComponent(
() => import('ant-design-vue/es/cascader'),
() => import('antdv-next/dist/cascader/index'),
);
const Upload = defineAsyncComponent(() => import('ant-design-vue/es/upload'));
const Image = defineAsyncComponent(() => import('ant-design-vue/es/image'));
const Upload = defineAsyncComponent(
() => import('antdv-next/dist/upload/index'),
);
const Image = defineAsyncComponent(() => import('antdv-next/dist/image/index'));
const PreviewGroup = defineAsyncComponent(() =>
import('ant-design-vue/es/image').then((res) => res.ImagePreviewGroup),
import('antdv-next/dist/image/index').then((res) => res.ImagePreviewGroup),
);
const withDefaultPlaceholder = <T extends Component>(
component: T,
const withDefaultPlaceholder = (
component: Component,
type: 'input' | 'select',
componentProps: Recordable<any> = {},
) => {
@ -242,7 +254,7 @@ function getBase64(file: File): Promise<string> {
*/
async function previewImage(
file: UploadFile,
visible: Ref<boolean>,
open: Ref<boolean>,
fileList: Ref<UploadProps['fileList']>,
) {
// 非图片文件直接打开链接
@ -250,6 +262,8 @@ async function previewImage(
const url = file.url || file.preview;
if (url) {
window.open(url, '_blank');
} else if (file.preview) {
window.open(file.preview, '_blank');
} else {
message.error($t('ui.formRules.previewWarning'));
}
@ -285,10 +299,10 @@ async function previewImage(
{
class: 'hidden',
preview: {
visible: visible.value,
open: open.value,
current: currentIndex,
onVisibleChange: (value: boolean) => {
visible.value = value;
onOpenChange: (value: boolean) => {
open.value = value;
if (!value) {
setTimeout(() => {
if (!isUnmounted && container) {
@ -330,7 +344,7 @@ function cropImage(file: File, aspectRatio: string | undefined) {
const open = ref<boolean>(true);
const cropperRef = ref<InstanceType<typeof VCropper> | null>(null);
const closeModal = () => {
function closeModal() {
open.value = false;
setTimeout(() => {
if (!isUnmounted && container) {
@ -342,7 +356,7 @@ function cropImage(file: File, aspectRatio: string | undefined) {
container.remove();
}
}, 300);
};
}
const CropperWrapper = {
setup() {
@ -416,7 +430,7 @@ function cropImage(file: File, aspectRatio: string | undefined) {
/**
*
*/
const withPreviewUpload = () => {
function withPreviewUpload() {
return defineComponent({
name: Upload.name,
emits: ['update:modelValue'],
@ -436,10 +450,10 @@ const withPreviewUpload = () => {
() => attrs?.aspectRatio ?? attrs?.['aspect-ratio'],
);
const handleBeforeUpload = async (
async function handleBeforeUpload(
file: UploadFile,
originFileList: Array<File>,
) => {
) {
// 文件大小限制
if (maxSize.value && (file.size || 0) / 1024 / 1024 > maxSize.value) {
message.error($t('ui.formRules.sizeLimit', [maxSize.value]));
@ -463,9 +477,9 @@ const withPreviewUpload = () => {
}
return attrs.beforeUpload?.(file) ?? true;
};
}
const handleChange = (event: UploadChangeParam) => {
function handleChange(event: UploadChangeParam) {
try {
attrs.handleChange?.(event);
attrs.onHandleChange?.(event);
@ -479,19 +493,19 @@ const withPreviewUpload = () => {
'update:modelValue',
event.fileList?.length ? fileList.value : undefined,
);
};
}
const handlePreview = async (file: UploadFile) => {
function handlePreview(file: UploadFile) {
previewVisible.value = true;
await previewImage(file, previewVisible, fileList);
};
return previewImage(file, previewVisible, fileList);
}
const renderUploadButton = () => {
function renderUploadButton() {
if (attrs.disabled) return null;
return isEmpty(slots)
? createDefaultUploadSlots(listType, placeholder)
: slots;
};
}
// 拖拽排序
const draggable = computed(
@ -600,7 +614,7 @@ const withPreviewUpload = () => {
);
},
});
};
}
// 这里需要自行根据业务组件库进行适配,需要用到的组件都需要在这里类型说明
export type ComponentType =
@ -681,13 +695,13 @@ async function initComponentAdapter() {
fieldNames: { label: 'label', value: 'value', children: 'children' },
loadingSlot: 'suffixIcon',
modelPropName: 'value',
visibleEvent: 'onVisibleChange',
visibleEvent: 'onOpenChange',
}),
ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', {
component: Select,
loadingSlot: 'suffixIcon',
modelPropName: 'value',
visibleEvent: 'onVisibleChange',
visibleEvent: 'onOpenChange',
}),
ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', {
component: TreeSelect,
@ -695,7 +709,7 @@ async function initComponentAdapter() {
loadingSlot: 'suffixIcon',
modelPropName: 'value',
optionsPropName: 'treeData',
visibleEvent: 'onVisibleChange',
visibleEvent: 'onOpenChange',
}),
AutoComplete,
Cascader,
@ -764,7 +778,7 @@ async function initComponentAdapter() {
copyPreferencesSuccess: (title, content) => {
notification.success({
description: content,
message: title,
title,
placement: 'bottomRight',
});
},

View File

@ -14,7 +14,7 @@ import {
import { get, isFunction, isString } from '@vben/utils';
import { objectOmit } from '@vueuse/core';
import { Button, Image, Popconfirm, Switch, Tag } from 'ant-design-vue';
import { Button, Image, Popconfirm, Switch, Tag } from 'antdv-next';
import { $t } from '#/locales';

View File

@ -14,7 +14,7 @@ import {
import { useAccessStore } from '@vben/stores';
import { cloneDeep } from '@vben/utils';
import { message } from 'ant-design-vue';
import { message } from 'antdv-next';
import JSONBigInt from 'json-bigint';
import { useAuthStore } from '#/store';

View File

@ -1,10 +1,10 @@
<script lang="ts" setup>
import { computed } from 'vue';
import { computed, watch } from 'vue';
import { useAntdDesignTokens } from '@vben/hooks';
import { preferences, usePreferences } from '@vben/preferences';
import { App, ConfigProvider, theme } from 'ant-design-vue';
import { App, ConfigProvider, theme } from 'antdv-next';
import { antdLocale } from '#/locales';
@ -28,6 +28,14 @@ const tokenTheme = computed(() => {
token: tokens,
};
});
watch(
tokenTheme,
(themeConfig) => {
ConfigProvider.config({ theme: themeConfig });
},
{ immediate: true },
);
</script>
<template>

View File

@ -1,4 +1,4 @@
import type { Locale } from 'ant-design-vue/es/locale';
import type { Locale } from 'antdv-next/dist/locale/index';
import type { App } from 'vue';
@ -13,8 +13,8 @@ import {
} from '@vben/locales';
import { preferences } from '@vben/preferences';
import antdEnLocale from 'ant-design-vue/es/locale/en_US';
import antdDefaultLocale from 'ant-design-vue/es/locale/zh_CN';
import antdEnLocale from 'antdv-next/dist/locale/en_US';
import antdDefaultLocale from 'antdv-next/dist/locale/zh_CN';
import dayjs from 'dayjs';
const antdLocale = ref<Locale>(antdDefaultLocale);

View File

@ -29,4 +29,4 @@ async function initApplication() {
unmountGlobalLoading();
}
initApplication();
void initApplication();

View File

@ -6,7 +6,7 @@ import type {
import { generateAccessible } from '@vben/access';
import { preferences } from '@vben/preferences';
import { message } from 'ant-design-vue';
import { message } from 'antdv-next';
import { getAllMenusApi } from '#/api';
import { BasicLayout, IFrameView } from '#/layouts';

View File

@ -7,7 +7,7 @@ import { LOGIN_PATH } from '@vben/constants';
import { preferences } from '@vben/preferences';
import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores';
import { notification } from 'ant-design-vue';
import { notification } from 'antdv-next';
import { defineStore } from 'pinia';
import { getAccessCodesApi, getUserInfoApi, loginApi, logoutApi } from '#/api';
@ -65,7 +65,7 @@ export const useAuthStore = defineStore('auth', () => {
notification.success({
description: `${$t('authentication.loginSuccessDesc')}:${userInfo?.realName}`,
duration: 3,
message: $t('authentication.loginSuccess'),
title: $t('authentication.loginSuccess'),
});
}
}

View File

@ -7,7 +7,7 @@ import { computed, ref, useTemplateRef } from 'vue';
import { AuthenticationCodeLogin, z } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { message } from 'ant-design-vue';
import { message } from 'antdv-next';
defineOptions({ name: 'CodeLogin' });

View File

@ -5,7 +5,7 @@ import { computed } from 'vue';
import { ProfilePasswordSetting, z } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { message } from 'antdv-next';
const formSchema = computed((): VbenFormSchema[] => {
return [

View File

@ -7,7 +7,7 @@ import { AccessControl, useAccess } from '@vben/access';
import { Page } from '@vben/common-ui';
import { resetAllStores, useUserStore } from '@vben/stores';
import { Button, Card } from 'ant-design-vue';
import { Button, Card } from 'antdv-next';
import { useAuthStore } from '#/store';

View File

@ -7,7 +7,7 @@ import { useAccess } from '@vben/access';
import { Page } from '@vben/common-ui';
import { resetAllStores, useUserStore } from '@vben/stores';
import { Button, Card } from 'ant-design-vue';
import { Button, Card } from 'antdv-next';
import { useAuthStore } from '#/store';

View File

@ -7,7 +7,7 @@ import { useAccessStore } from '@vben/stores';
import { MenuBadge } from '@vben-core/menu-ui';
import { Button, Card, Radio, RadioGroup } from 'ant-design-vue';
import { Button, Card, Radio, RadioGroup } from 'antdv-next';
import { useVbenForm } from '#/adapter/form';

View File

@ -3,7 +3,7 @@ import { useRouter } from 'vue-router';
import { Fallback } from '@vben/common-ui';
import { Button } from 'ant-design-vue';
import { Button } from 'antdv-next';
const router = useRouter();
</script>

View File

@ -3,7 +3,7 @@ import { useRouter } from 'vue-router';
import { Fallback } from '@vben/common-ui';
import { Button } from 'ant-design-vue';
import { Button } from 'antdv-next';
const router = useRouter();

View File

@ -4,7 +4,7 @@ import { ref } from 'vue';
import { Page } from '@vben/common-ui';
import { useClipboard } from '@vueuse/core';
import { Button, Card, Input } from 'ant-design-vue';
import { Button, Card, Input } from 'antdv-next';
const source = ref('Hello');
const { copy, text } = useClipboard({ legacy: true, source });

View File

@ -9,7 +9,7 @@ import {
downloadFileFromUrl,
} from '@vben/utils';
import { Button, Card } from 'ant-design-vue';
import { Button, Card } from 'antdv-next';
import { downloadFile1, downloadFile2 } from '#/api/examples/download';

View File

@ -4,7 +4,7 @@ import { ref } from 'vue';
import { Page } from '@vben/common-ui';
import { useFullscreen } from '@vueuse/core';
import { Button, Card } from 'ant-design-vue';
import { Button, Card } from 'antdv-next';
const domRef = ref<HTMLElement>();

View File

@ -18,7 +18,7 @@ import {
SvgWeChatIcon,
} from '@vben/icons';
import { Card, Input } from 'ant-design-vue';
import { Card, Input } from 'antdv-next';
const iconValue1 = ref('ant-design:trademark-outlined');
const iconValue2 = ref('svg:avatar-1');

View File

@ -3,7 +3,7 @@ import { ref } from 'vue';
import { Page } from '@vben/common-ui';
import { Alert, Button, Card } from 'ant-design-vue';
import { Alert, Button, Card } from 'antdv-next';
import { getBigIntData } from '#/api/examples/json-bigint';

View File

@ -4,7 +4,7 @@ import type { LoginExpiredModeType } from '@vben/types';
import { Page } from '@vben/common-ui';
import { preferences, updatePreferences } from '@vben/preferences';
import { Button, Card } from 'ant-design-vue';
import { Button, Card } from 'antdv-next';
import { getMockStatusApi } from '#/api';

View File

@ -9,7 +9,7 @@ import {
updateCustomPreferences,
} from '@vben/preferences';
import { Alert, Button, Card, Space, Tag } from 'ant-design-vue';
import { Alert, Button, Card, Space, Tag } from 'antdv-next';
import { $t } from '#/locales';

View File

@ -3,7 +3,7 @@ import { computed, ref, watchEffect } from 'vue';
import { Page } from '@vben/common-ui';
import { Card, Radio, RadioGroup } from 'ant-design-vue';
import { Card, Radio, RadioGroup } from 'antdv-next';
import { getParamsData } from '#/api/examples/params';

View File

@ -5,7 +5,7 @@ import { useRouter } from 'vue-router';
import { Page } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';
import { Button, Card, Input } from 'ant-design-vue';
import { Button, Card, Input } from 'antdv-next';
const router = useRouter();
const newTabTitle = ref('');

View File

@ -2,7 +2,7 @@
import { Page } from '@vben/common-ui';
import { refAutoReset } from '@vueuse/core';
import { Button, Card, Empty } from 'ant-design-vue';
import { Button, Card, Empty } from 'antdv-next';
import ConcurrencyCaching from './concurrency-caching.vue';
import InfiniteQueries from './infinite-queries.vue';

View File

@ -2,7 +2,7 @@
import type { IProducts } from './typing';
import { useInfiniteQuery } from '@tanstack/vue-query';
import { Button } from 'ant-design-vue';
import { Button } from 'antdv-next';
const LIMIT = 10;
const fetchProducts = async ({ pageParam = 0 }): Promise<IProducts> => {

View File

@ -6,7 +6,7 @@ import type { IProducts } from './typing';
import { ref } from 'vue';
import { keepPreviousData, useQuery } from '@tanstack/vue-query';
import { Button } from 'ant-design-vue';
import { Button } from 'antdv-next';
const LIMIT = 10;
const fetcher = async (page: Ref<number>): Promise<IProducts> => {

View File

@ -2,7 +2,7 @@
import { ref } from 'vue';
import { useQuery } from '@tanstack/vue-query';
import { Button } from 'ant-design-vue';
import { Button } from 'antdv-next';
const count = ref(-1);
async function fetchApi() {

View File

@ -2,7 +2,7 @@
import { Page } from '@vben/common-ui';
import { useWatermark } from '@vben/hooks';
import { Button, Card } from 'ant-design-vue';
import { Button, Card } from 'antdv-next';
const { destroyWatermark, updateWatermark, watermark } = useWatermark();

View File

@ -11,7 +11,7 @@ import {
} from '@vben/common-ui';
import { LoaderCircle, Square, SquareCheckBig } from '@vben/icons';
import { Button, Card, message } from 'ant-design-vue';
import { Button, Card, message } from 'antdv-next';
import { useVbenForm } from '#/adapter/form';

View File

@ -5,7 +5,7 @@ import { reactive, ref } from 'vue';
import { Page, PointSelectionCaptcha } from '@vben/common-ui';
import { Card, Input, InputNumber, message, Switch } from 'ant-design-vue';
import { Card, Input, InputNumber, message, Switch } from 'antdv-next';
import { $t } from '#/locales';

View File

@ -9,7 +9,7 @@ import { ref } from 'vue';
import { Page, SliderCaptcha } from '@vben/common-ui';
import { Bell, Sun } from '@vben/icons';
import { Button, Card, message } from 'ant-design-vue';
import { Button, Card, message } from 'antdv-next';
function handleSuccess(data: CaptchaVerifyPassingData) {
const { time } = data;

View File

@ -5,7 +5,7 @@ import { Page, SliderRotateCaptcha } from '@vben/common-ui';
import { preferences } from '@vben/preferences';
import { useUserStore } from '@vben/stores';
import { Card, message } from 'ant-design-vue';
import { Card, message } from 'antdv-next';
const userStore = useUserStore();
function handleSuccess() {

View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import { Page, SliderTranslateCaptcha } from '@vben/common-ui';
import { Card, message } from 'ant-design-vue';
import { Card, message } from 'antdv-next';
function handleSuccess() {
message.success('success!');

View File

@ -3,7 +3,7 @@ import { Page } from '@vben/common-ui';
import { VbenContextMenu } from '@vben-core/shadcn-ui';
import { Button, Card, message } from 'ant-design-vue';
import { Button, Card, message } from 'antdv-next';
const needHidden = (role: string) => {
return role === 'user';

View File

@ -18,7 +18,7 @@ import {
Row,
Select,
Switch,
} from 'ant-design-vue';
} from 'antdv-next';
const props = reactive<CountToProps & { transition: TransitionPresets }>({
decimal: '.',
@ -150,15 +150,10 @@ function onFinished() {
</Col>
<Col :span="8">
<FormItem label="动画" name="transition">
<Select v-model:value="props.transition">
<Select.Option
v-for="preset in TransitionPresetsKeys"
:key="preset"
:value="preset"
>
{{ preset }}
</Select.Option>
</Select>
<Select
v-model:value="props.transition"
:options="TransitionPresetsKeys.map((p) => ({ label: p, value: p }))"
/>
</FormItem>
</Col>
<Col :span="8">

View File

@ -1,11 +1,11 @@
<script lang="ts" setup>
import type { UploadChangeParam } from 'ant-design-vue';
import type { UploadChangeParam } from 'antdv-next';
import { ref } from 'vue';
import { Page, VCropper } from '@vben/common-ui';
import { Button, Card, Select, Upload } from 'ant-design-vue';
import { Button, Card, Select, Upload } from 'antdv-next';
const options = [
{ label: '1:1', value: '1:1' },

View File

@ -2,7 +2,7 @@
import { VBEN_DOC_URL } from '@vben/constants';
import { openWindow } from '@vben/utils';
import { Button } from 'ant-design-vue';
import { Button } from 'antdv-next';
const props = defineProps<{ path: string }>();

View File

@ -3,7 +3,7 @@ import { ref } from 'vue';
import { useVbenDrawer } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Button, message } from 'antdv-next';
const list = ref<number[]>([]);

View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
import { useVbenDrawer } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Button, message } from 'antdv-next';
const [Drawer, drawerApi] = useVbenDrawer({
onCancel() {

View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
import { useVbenDrawer } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Button, message } from 'antdv-next';
const [Drawer, drawerApi] = useVbenDrawer({
onCancel() {

View File

@ -3,7 +3,7 @@ import { ref } from 'vue';
import { useVbenDrawer } from '@vben/common-ui';
import { Input, message } from 'ant-design-vue';
import { Input, message } from 'antdv-next';
import { useVbenForm } from '#/adapter/form';

View File

@ -3,7 +3,7 @@ import type { DrawerPlacement, DrawerState } from '@vben/common-ui';
import { Page, useVbenDrawer } from '@vben/common-ui';
import { Button, Card } from 'ant-design-vue';
import { Button, Card } from 'antdv-next';
import DocButton from '../doc-button.vue';
import AutoHeightDemo from './auto-height-demo.vue';

View File

@ -3,7 +3,7 @@ import { ref } from 'vue';
import { useVbenDrawer } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { message } from 'antdv-next';
const data = ref();

View File

@ -3,7 +3,7 @@ import { ref } from 'vue';
import { EllipsisText, Page } from '@vben/common-ui';
import { Card } from 'ant-design-vue';
import { Card } from 'antdv-next';
import DocButton from '../doc-button.vue';

View File

@ -1,11 +1,9 @@
<script lang="ts" setup>
import type { RefSelectProps } from 'ant-design-vue/es/select';
import { ref } from 'vue';
import { Page } from '@vben/common-ui';
import { Button, Card, message, Space } from 'ant-design-vue';
import { Button, Card, message, Space } from 'antdv-next';
import { useVbenForm } from '#/adapter/form';
@ -134,7 +132,9 @@ function handleClick(
}
case 'componentRef': {
// focus
formApi.getFieldComponentRef<RefSelectProps>('fieldOptions')?.focus?.();
formApi
.getFieldComponentRef<{ focus?: () => void }>('fieldOptions')
?.focus?.();
break;
}
case 'disabled': {

View File

@ -1,12 +1,12 @@
<script lang="ts" setup>
import type { UploadFile } from 'ant-design-vue';
import type { UploadFile } from 'antdv-next';
import { h, ref, toRaw } from 'vue';
import { Page } from '@vben/common-ui';
import { useDebounceFn } from '@vueuse/core';
import { Button, Card, message, Spin, Tag } from 'ant-design-vue';
import { Button, Card, message, Spin, Tag } from 'antdv-next';
import dayjs from 'dayjs';
import { useVbenForm, z } from '#/adapter/form';

View File

@ -1,5 +1,5 @@
<script lang="ts" setup>
import type { RadioGroupProps } from 'ant-design-vue';
import type { RadioGroupProps } from 'antdv-next';
import type { FormLayout } from '@vben/common-ui';
@ -11,7 +11,7 @@ import { Page } from '@vben/common-ui';
import { VbenCollapsibleParams } from '@vben-core/shadcn-ui';
import { Button, Card, message, RadioGroup } from 'ant-design-vue';
import { Button, Card, message, RadioGroup } from 'antdv-next';
import { useVbenForm, z } from '#/adapter/form';

View File

@ -3,7 +3,7 @@ import { h } from 'vue';
import { Page } from '@vben/common-ui';
import { Card } from 'ant-design-vue';
import { Card } from 'antdv-next';
import { useVbenForm } from '#/adapter/form';

View File

@ -3,7 +3,7 @@ import { h, markRaw } from 'vue';
import { Page } from '@vben/common-ui';
import { Card, Input, message } from 'ant-design-vue';
import { Card, Input, message } from 'antdv-next';
import { useVbenForm, z } from '#/adapter/form';

View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { Button, Card, message } from 'ant-design-vue';
import { Button, Card, message } from 'antdv-next';
import { useVbenForm } from '#/adapter/form';

View File

@ -1,9 +1,11 @@
<script lang="ts" setup>
import type { StepItem } from 'antdv-next';
import { ref } from 'vue';
import { Page } from '@vben/common-ui';
import { Button, Card, message, Step, Steps, Switch } from 'ant-design-vue';
import { Button, Card, message, Steps, Switch } from 'antdv-next';
import { useVbenForm } from '#/adapter/form';
@ -75,6 +77,7 @@ const [SecondForm, secondFormApi] = useVbenForm({
],
wrapperClass: 'grid-cols-1 md:grid-cols-1 lg:grid-cols-1',
});
const stepsItems: StepItem[] = [{ title: '表单1' }, { title: '表单2' }];
const needMerge = ref(true);
async function handleMergeSubmit() {
const values = await firstFormApi
@ -102,10 +105,7 @@ async function handleMergeSubmit() {
<Button type="primary" @click="handleMergeSubmit"></Button>
</template>
<div class="mx-auto max-w-lg">
<Steps :current="currentTab" class="steps">
<Step title="表单1" />
<Step title="表单2" />
</Steps>
<Steps :current="currentTab" :items="stepsItems" class="steps" />
<div class="p-20">
<FirstForm v-show="currentTab === 0" />
<SecondForm v-show="currentTab === 1" />

View File

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Input, Select } from 'ant-design-vue';
import { Input, Select } from 'antdv-next';
const emit = defineEmits(['blur', 'change']);

View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { Card, message } from 'ant-design-vue';
import { Card, message } from 'antdv-next';
import { useVbenForm } from '#/adapter/form';

View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { Button, Card, message } from 'ant-design-vue';
import { Button, Card, message } from 'antdv-next';
import { useVbenForm, z } from '#/adapter/form';

View File

@ -3,7 +3,7 @@ import { ref } from 'vue';
import { Page } from '@vben/common-ui';
import { Button, Card, Switch } from 'ant-design-vue';
import { Button, Card, Switch } from 'antdv-next';
import { useVbenForm } from '#/adapter/form';

View File

@ -3,7 +3,7 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue';
import { Page } from '@vben/common-ui';
import { Button, Card, message, Space, Tag } from 'ant-design-vue';
import { Button, Card, message, Space, Tag } from 'antdv-next';
import dayjs from 'dayjs';
import { useVbenForm } from '#/adapter/form';

View File

@ -3,7 +3,7 @@ import type { JsonViewerAction, JsonViewerValue } from '@vben/common-ui';
import { JsonViewer, Page } from '@vben/common-ui';
import { Card, message } from 'ant-design-vue';
import { Card, message } from 'antdv-next';
import { json1, json2 } from './data';

View File

@ -12,7 +12,7 @@ import {
Slider,
Tag,
Tooltip,
} from 'ant-design-vue';
} from 'antdv-next';
const props = reactive({
leftCollapsedWidth: 5,

View File

@ -3,7 +3,7 @@ import { Loading, Page, Spinner } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { refAutoReset } from '@vueuse/core';
import { Button, Card, Spin } from 'ant-design-vue';
import { Button, Card, Spin } from 'antdv-next';
const spinning = refAutoReset(false, 3000);
const loading = refAutoReset(false, 3000);

View File

@ -3,7 +3,7 @@ import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Button, message } from 'antdv-next';
const list = ref<number[]>([]);

View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
import { useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Button, message } from 'antdv-next';
const [Modal, modalApi] = useVbenModal({
onCancel() {

View File

@ -3,7 +3,7 @@ import { ref, watch } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Slider } from 'ant-design-vue';
import { Slider } from 'antdv-next';
const blur = ref(5);
const [Modal, modalApi] = useVbenModal({

View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { message } from 'antdv-next';
const [Modal, modalApi] = useVbenModal({
draggable: true,

View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
import { useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Button, message } from 'antdv-next';
const [Modal, modalApi] = useVbenModal({
draggable: true,

View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { message } from 'antdv-next';
import { useVbenForm } from '#/adapter/form';

View File

@ -3,7 +3,7 @@ import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Input, message } from 'ant-design-vue';
import { Input, message } from 'antdv-next';
const [Modal, modalApi] = useVbenModal({
destroyOnClose: false,

View File

@ -10,7 +10,7 @@ import {
useVbenModal,
} from '@vben/common-ui';
import { Button, Card, Flex, message } from 'ant-design-vue';
import { Button, Card, Flex, message } from 'antdv-next';
import DocButton from '../doc-button.vue';
import AutoHeightDemo from './auto-height-demo.vue';

View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
import { useVbenModal } from '@vben/common-ui';
import { Button } from 'ant-design-vue';
import { Button } from 'antdv-next';
import DragDemo from './drag-demo.vue';

View File

@ -3,7 +3,7 @@ import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { message } from 'antdv-next';
const data = ref();

View File

@ -14,7 +14,7 @@ import {
InputNumber,
Row,
Select,
} from 'ant-design-vue';
} from 'antdv-next';
// visibleVisibleOnceVisible
const presets = MotionPresets.filter((v) => !v.includes('Visible'));
const showCard1 = refAutoReset(true, 100);
@ -114,15 +114,10 @@ function openDocPage() {
<Row>
<Col :span="8">
<FormItem prop="preset" label="动画效果">
<Select v-model:value="motionProps.preset">
<Select.Option
:value="preset"
v-for="preset in presets"
:key="preset"
>
{{ preset }}
</Select.Option>
</Select>
<Select
v-model:value="motionProps.preset"
:options="presets.map((p) => ({ label: p, value: p }))"
/>
</FormItem>
</Col>
<Col :span="8">
@ -168,15 +163,10 @@ function openDocPage() {
<Row>
<Col :span="8">
<FormItem prop="preset" label="动画效果">
<Select v-model:value="motionGroupProps.preset">
<Select.Option
:value="preset"
v-for="preset in presets"
:key="preset"
>
{{ preset }}
</Select.Option>
</Select>
<Select
v-model:value="motionGroupProps.preset"
:options="presets.map((p) => ({ label: p, value: p }))"
/>
</FormItem>
</Col>
<Col :span="8">

View File

@ -5,7 +5,7 @@ import { reactive } from 'vue';
import { Page, Tippy } from '@vben/common-ui';
import { Button, Card, Flex } from 'ant-design-vue';
import { Button, Card, Flex } from 'antdv-next';
import { useVbenForm } from '#/adapter/form';

View File

@ -6,7 +6,7 @@ import { computed, ref } from 'vue';
import { Page } from '@vben/common-ui';
import { VbenTiptap, VbenTiptapPreview } from '@vben/plugins/tiptap';
import { Card, Switch } from 'ant-design-vue';
import { Card, Switch } from 'antdv-next';
const content = ref(`
<h1>Vben Tiptap</h1>
<p>这个编辑器已经被封装在 <code>packages/effects/plugins/src/tiptap</code> </p>

View File

@ -3,7 +3,7 @@ import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';
import { Page } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Button, message } from 'antdv-next';
import { useVbenVxeGrid } from '#/adapter/vxe-table';

View File

@ -3,7 +3,7 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
import { Page } from '@vben/common-ui';
import { Button, Image, Switch, Tag } from 'ant-design-vue';
import { Button, Image, Switch, Tag } from 'antdv-next';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getExampleTableApi } from '#/api';

View File

@ -3,7 +3,7 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
import { Page } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Button, message } from 'antdv-next';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getExampleTableApi } from '#/api';

View File

@ -3,7 +3,7 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
import { Page } from '@vben/common-ui';
import { Button } from 'ant-design-vue';
import { Button } from 'antdv-next';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getExampleTableApi } from '#/api';

View File

@ -4,7 +4,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { Page } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { message } from 'antdv-next';
import dayjs from 'dayjs';
import { useVbenVxeGrid } from '#/adapter/vxe-table';

View File

@ -3,7 +3,7 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
import { Page } from '@vben/common-ui';
import { Button } from 'ant-design-vue';
import { Button } from 'antdv-next';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getExampleTableApi } from '#/api';

View File

@ -3,7 +3,7 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
import { Page } from '@vben/common-ui';
import { Button } from 'ant-design-vue';
import { Button } from 'antdv-next';
import { useVbenVxeGrid } from '#/adapter/vxe-table';

View File

@ -8,7 +8,7 @@ import type { SystemDeptApi } from '#/api/system/dept';
import { Page, useVbenModal } from '@vben/common-ui';
import { Plus } from '@vben/icons';
import { Button, message } from 'ant-design-vue';
import { Button, message } from 'antdv-next';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteDept, getDeptList } from '#/api/system/dept';

View File

@ -5,7 +5,7 @@ import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Button } from 'ant-design-vue';
import { Button } from 'antdv-next';
import { useVbenForm } from '#/adapter/form';
import { createDept, updateDept } from '#/api/system/dept';

View File

@ -10,7 +10,7 @@ import { $t } from '@vben/locales';
import { MenuBadge } from '@vben-core/menu-ui';
import { Button, message } from 'ant-design-vue';
import { Button, message } from 'antdv-next';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteMenu, getMenuList, SystemMenuApi } from '#/api/system/menu';

View File

@ -1,6 +1,4 @@
<script lang="ts" setup>
import type { ChangeEvent } from 'ant-design-vue/es/_util/EventInterface';
import type { Recordable } from '@vben/types';
import type { VbenFormSchema } from '#/adapter/form';
@ -108,7 +106,7 @@ const schema: VbenFormSchema[] = [
//
return {
...(titleSuffix.value && { addonAfter: titleSuffix.value }),
onChange({ target: { value } }: ChangeEvent) {
onChange({ target: { value } }: { target: { value: string } }) {
titleSuffix.value = value && $te(value) ? $t(value) : undefined;
},
};

View File

@ -10,7 +10,7 @@ import type { SystemRoleApi } from '#/api';
import { Page, useVbenDrawer } from '@vben/common-ui';
import { Plus } from '@vben/icons';
import { Button, message, Modal } from 'ant-design-vue';
import { Button, message, Modal } from 'antdv-next';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteRole, getRoleList, updateRole } from '#/api';

View File

@ -1,5 +1,5 @@
<script lang="ts" setup>
import type { DataNode } from 'ant-design-vue/es/tree';
import type { DataNode } from 'antdv-next/dist/tree';
import type { Recordable } from '@vben/types';
@ -10,7 +10,7 @@ import { computed, nextTick, ref } from 'vue';
import { Tree, useVbenDrawer } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { Spin } from 'ant-design-vue';
import { Spin } from 'antdv-next';
import { useVbenForm } from '#/adapter/form';
import { getMenuList } from '#/api/system/menu';

View File

@ -2060,9 +2060,9 @@ importers:
'@vueuse/core':
specifier: 'catalog:'
version: 14.3.0(vue@3.5.34(typescript@6.0.3))
ant-design-vue:
antdv-next:
specifier: 'catalog:'
version: 4.2.6(vue@3.5.34(typescript@6.0.3))
version: 1.3.0(date-fns@4.1.0)(vue@3.5.34(typescript@6.0.3))
dayjs:
specifier: 'catalog:'
version: 1.11.20