reactor:统一 Description 命名为 Descriptions

pull/211/head
YunaiV 2025-09-10 23:58:31 +08:00
parent 5ec4d8ab82
commit e3e3c2e968
24 changed files with 72 additions and 72 deletions

View File

@ -29,8 +29,8 @@ const Description = defineComponent({
}, },
setup(props: DescriptionsOptions) { setup(props: DescriptionsOptions) {
// TODO @puhui999 field slot // TODO @xingyu field slot
// TODO @puhui999from 5.0extra: () => getSlot(slots, 'extra') // TODO @xingyufrom 5.0extra: () => getSlot(slots, 'extra')
/** 过滤掉不需要展示的 */ /** 过滤掉不需要展示的 */
const shouldShowItem = (item: DescriptionItemSchema) => { const shouldShowItem = (item: DescriptionItemSchema) => {
if (item.hidden === undefined) return true; if (item.hidden === undefined) return true;
@ -75,6 +75,6 @@ const Description = defineComponent({
}, },
}); });
// TODO @puhui999from 5.0emits: ['register'] // TODO @xingyufrom 5.0emits: ['register']
export default Description; export default Description;
</script> </script>

View File

@ -2,9 +2,9 @@ import type { DescriptionsProps } from 'ant-design-vue';
import type { CSSProperties, VNode } from 'vue'; import type { CSSProperties, VNode } from 'vue';
// TODO @puhui999【content】这个纠结下1vben2.0 是 renderhttps://doc.vvbin.cn/components/desc.html#usage 2 // TODO @xingyu【content】这个纠结下1vben2.0 是 renderhttps://doc.vvbin.cn/components/desc.html#usage 2
// TODO @puhui999vben2.0 还有 sapn【done】、labelMinWidth、contentMinWidth // TODO @xingyuvben2.0 还有 sapn【done】、labelMinWidth、contentMinWidth
// TODO @puhui999【hidden】这个纠结下1vben2.0 是 show // TODO @xingyu【hidden】这个纠结下1vben2.0 是 show
export interface DescriptionItemSchema { export interface DescriptionItemSchema {
label: string | VNode; // 内容的描述 label: string | VNode; // 内容的描述
field?: string; // 对应 data 中的字段名 field?: string; // 对应 data 中的字段名
@ -15,11 +15,11 @@ export interface DescriptionItemSchema {
hidden?: ((data: any) => boolean) | boolean; // 是否显示 hidden?: ((data: any) => boolean) | boolean; // 是否显示
} }
// TODO @puhui999vben2.0 还有 title【done】、bordered【done】d、useCollapse、collapseOptions // TODO @xingyuvben2.0 还有 title【done】、bordered【done】d、useCollapse、collapseOptions
// TODO @puhui999from 5.0bordered 默认为 true // TODO @xingyufrom 5.0bordered 默认为 true
// TODO @puhui999from 5.0column 默认为 lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4 // TODO @xingyufrom 5.0column 默认为 lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4
// TODO @puhui999from 5.0size 默认为 small有 'default', 'middle', 'small', undefined // TODO @xingyufrom 5.0size 默认为 small有 'default', 'middle', 'small', undefined
// TODO @puhui999from 5.0useCollapse 默认为 true // TODO @xingyufrom 5.0useCollapse 默认为 true
export interface DescriptionsOptions { export interface DescriptionsOptions {
data?: Record<string, any>; // 数据 data?: Record<string, any>; // 数据
schema?: DescriptionItemSchema[]; // 描述项配置 schema?: DescriptionItemSchema[]; // 描述项配置

View File

@ -16,7 +16,7 @@ class DescriptionApi {
return this.state as DescriptionsOptions; return this.state as DescriptionsOptions;
} }
// TODO @puhui999【setState】纠结下1vben2.0 是 data https://doc.vvbin.cn/components/desc.html#usage // TODO @xingyu【setState】纠结下1vben2.0 是 data https://doc.vvbin.cn/components/desc.html#usage
setState(newState: Partial<DescriptionsOptions>) { setState(newState: Partial<DescriptionsOptions>) {
this.state = { ...this.state, ...newState }; this.state = { ...this.state, ...newState };
} }
@ -27,7 +27,7 @@ export type ExtendedDescriptionApi = DescriptionApi;
export function useDescription(options: DescriptionsOptions) { export function useDescription(options: DescriptionsOptions) {
const IS_REACTIVE = isReactive(options); const IS_REACTIVE = isReactive(options);
const api = new DescriptionApi(options); const api = new DescriptionApi(options);
// 扩展API // 扩展 API
const extendedApi: ExtendedDescriptionApi = api as never; const extendedApi: ExtendedDescriptionApi = api as never;
const Desc = defineComponent({ const Desc = defineComponent({
name: 'UseDescription', name: 'UseDescription',

View File

@ -12,7 +12,7 @@ defineProps<{
business: CrmBusinessApi.Business; // business: CrmBusinessApi.Business; //
}>(); }>();
const [BaseDescription] = useDescription({ const [BaseDescriptions] = useDescription({
componentProps: { componentProps: {
title: '基本信息', title: '基本信息',
bordered: false, bordered: false,
@ -22,7 +22,7 @@ const [BaseDescription] = useDescription({
schema: useDetailBaseSchema(), schema: useDetailBaseSchema(),
}); });
const [SystemDescription] = useDescription({ const [SystemDescriptions] = useDescription({
componentProps: { componentProps: {
title: '系统信息', title: '系统信息',
bordered: false, bordered: false,
@ -35,8 +35,8 @@ const [SystemDescription] = useDescription({
<template> <template>
<div class="p-4"> <div class="p-4">
<BaseDescription :data="business" /> <BaseDescriptions :data="business" />
<Divider /> <Divider />
<SystemDescription :data="business" /> <SystemDescriptions :data="business" />
</div> </div>
</template> </template>

View File

@ -40,7 +40,7 @@ const business = ref<CrmBusinessApi.Business>({} as CrmBusinessApi.Business);
const businessLogList = ref<SystemOperateLogApi.OperateLog[]>([]); const businessLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // Ref const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // Ref
const [Description] = useDescription({ const [Descriptions] = useDescription({
componentProps: { componentProps: {
bordered: false, bordered: false,
column: 4, column: 4,
@ -134,7 +134,7 @@ onMounted(() => {
</div> </div>
</template> </template>
<Card class="min-h-[10%]"> <Card class="min-h-[10%]">
<Description :data="business" /> <Descriptions :data="business" />
</Card> </Card>
<Card class="mt-4 min-h-[60%]"> <Card class="mt-4 min-h-[60%]">
<Tabs> <Tabs>

View File

@ -12,7 +12,7 @@ defineProps<{
clue: CrmClueApi.Clue; // 线 clue: CrmClueApi.Clue; // 线
}>(); }>();
const [BaseDescription] = useDescription({ const [BaseDescriptions] = useDescription({
componentProps: { componentProps: {
title: '基本信息', title: '基本信息',
bordered: false, bordered: false,
@ -22,7 +22,7 @@ const [BaseDescription] = useDescription({
schema: useDetailBaseSchema(), schema: useDetailBaseSchema(),
}); });
const [SystemDescription] = useDescription({ const [SystemDescriptions] = useDescription({
componentProps: { componentProps: {
title: '系统信息', title: '系统信息',
bordered: false, bordered: false,
@ -35,8 +35,8 @@ const [SystemDescription] = useDescription({
<template> <template>
<div class="p-4"> <div class="p-4">
<BaseDescription :data="clue" /> <BaseDescriptions :data="clue" />
<Divider /> <Divider />
<SystemDescription :data="clue" /> <SystemDescriptions :data="clue" />
</div> </div>
</template> </template>

View File

@ -42,7 +42,7 @@ const validateOwnerUser = computed(
); );
const validateWrite = computed(() => permissionListRef.value?.validateWrite); const validateWrite = computed(() => permissionListRef.value?.validateWrite);
const [Description] = useDescription({ const [Descriptions] = useDescription({
componentProps: { componentProps: {
bordered: false, bordered: false,
column: 4, column: 4,
@ -151,7 +151,7 @@ onMounted(() => {
</div> </div>
</template> </template>
<Card class="min-h-[10%]"> <Card class="min-h-[10%]">
<Description :data="clue" /> <Descriptions :data="clue" />
</Card> </Card>
<Card class="mt-4 min-h-[60%]"> <Card class="mt-4 min-h-[60%]">
<Tabs> <Tabs>

View File

@ -12,7 +12,7 @@ defineProps<{
contact: CrmContactApi.Contact; // contact: CrmContactApi.Contact; //
}>(); }>();
const [BaseDescription] = useDescription({ const [BaseDescriptions] = useDescription({
componentProps: { componentProps: {
title: '基本信息', title: '基本信息',
bordered: false, bordered: false,
@ -22,7 +22,7 @@ const [BaseDescription] = useDescription({
schema: useDetailBaseSchema(), schema: useDetailBaseSchema(),
}); });
const [SystemDescription] = useDescription({ const [SystemDescriptions] = useDescription({
componentProps: { componentProps: {
title: '系统信息', title: '系统信息',
bordered: false, bordered: false,
@ -35,8 +35,8 @@ const [SystemDescription] = useDescription({
<template> <template>
<div class="p-4"> <div class="p-4">
<BaseDescription :data="contact" /> <BaseDescriptions :data="contact" />
<Divider /> <Divider />
<SystemDescription :data="contact" /> <SystemDescriptions :data="contact" />
</div> </div>
</template> </template>

View File

@ -34,7 +34,7 @@ const contact = ref<CrmContactApi.Contact>({} as CrmContactApi.Contact);
const contactLogList = ref<SystemOperateLogApi.OperateLog[]>([]); const contactLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // Ref const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // Ref
const [Description] = useDescription({ const [Descriptions] = useDescription({
componentProps: { componentProps: {
bordered: false, bordered: false,
column: 4, column: 4,
@ -113,7 +113,7 @@ onMounted(() => {
</div> </div>
</template> </template>
<Card class="min-h-[10%]"> <Card class="min-h-[10%]">
<Description :data="contact" /> <Descriptions :data="contact" />
</Card> </Card>
<Card class="mt-4 min-h-[60%]"> <Card class="mt-4 min-h-[60%]">
<Tabs> <Tabs>

View File

@ -12,7 +12,7 @@ defineProps<{
contract: CrmContractApi.Contract; // contract: CrmContractApi.Contract; //
}>(); }>();
const [BaseDescription] = useDescription({ const [BaseDescriptions] = useDescription({
componentProps: { componentProps: {
title: '基本信息', title: '基本信息',
bordered: false, bordered: false,
@ -22,7 +22,7 @@ const [BaseDescription] = useDescription({
schema: useDetailBaseSchema(), schema: useDetailBaseSchema(),
}); });
const [SystemDescription] = useDescription({ const [SystemDescriptions] = useDescription({
componentProps: { componentProps: {
title: '系统信息', title: '系统信息',
bordered: false, bordered: false,
@ -35,8 +35,8 @@ const [SystemDescription] = useDescription({
<template> <template>
<div class="p-4"> <div class="p-4">
<BaseDescription :data="contract" /> <BaseDescriptions :data="contract" />
<Divider /> <Divider />
<SystemDescription :data="contract" /> <SystemDescriptions :data="contract" />
</div> </div>
</template> </template>

View File

@ -45,7 +45,7 @@ const validateOwnerUser = computed(
); );
const validateWrite = computed(() => permissionListRef.value?.validateWrite); const validateWrite = computed(() => permissionListRef.value?.validateWrite);
const [Description] = useDescription({ const [Descriptions] = useDescription({
componentProps: { componentProps: {
bordered: false, bordered: false,
column: 4, column: 4,
@ -125,7 +125,7 @@ onMounted(() => {
</div> </div>
</template> </template>
<Card class="min-h-[10%]"> <Card class="min-h-[10%]">
<Description :data="contract" /> <Descriptions :data="contract" />
</Card> </Card>
<Card class="mt-4 min-h-[60%]"> <Card class="mt-4 min-h-[60%]">
<Tabs> <Tabs>

View File

@ -12,7 +12,7 @@ defineProps<{
customer: CrmCustomerApi.Customer; // customer: CrmCustomerApi.Customer; //
}>(); }>();
const [BaseDescription] = useDescription({ const [BaseDescriptions] = useDescription({
componentProps: { componentProps: {
title: '基本信息', title: '基本信息',
bordered: false, bordered: false,
@ -22,7 +22,7 @@ const [BaseDescription] = useDescription({
schema: useDetailBaseSchema(), schema: useDetailBaseSchema(),
}); });
const [SystemDescription] = useDescription({ const [SystemDescriptions] = useDescription({
componentProps: { componentProps: {
title: '系统信息', title: '系统信息',
bordered: false, bordered: false,
@ -35,8 +35,8 @@ const [SystemDescription] = useDescription({
<template> <template>
<div class="p-4"> <div class="p-4">
<BaseDescription :data="customer" /> <BaseDescriptions :data="customer" />
<Divider /> <Divider />
<SystemDescription :data="customer" /> <SystemDescriptions :data="customer" />
</div> </div>
</template> </template>

View File

@ -51,7 +51,7 @@ const customer = ref<CrmCustomerApi.Customer>({} as CrmCustomerApi.Customer);
const customerLogList = ref<SystemOperateLogApi.OperateLog[]>([]); const customerLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // Ref const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // Ref
const [Description] = useDescription({ const [Descriptions] = useDescription({
componentProps: { componentProps: {
bordered: false, bordered: false,
column: 4, column: 4,
@ -269,7 +269,7 @@ onMounted(() => {
/> />
</template> </template>
<Card class="min-h-[10%]"> <Card class="min-h-[10%]">
<Description :data="customer" /> <Descriptions :data="customer" />
</Card> </Card>
<Card class="mt-4 min-h-[60%]"> <Card class="mt-4 min-h-[60%]">
<Tabs> <Tabs>

View File

@ -9,7 +9,7 @@ defineProps<{
product: CrmProductApi.Product; // product: CrmProductApi.Product; //
}>(); }>();
const [ProductDescription] = useDescription({ const [ProductDescriptions] = useDescription({
componentProps: { componentProps: {
title: '基本信息', title: '基本信息',
bordered: false, bordered: false,
@ -22,6 +22,6 @@ const [ProductDescription] = useDescription({
<template> <template>
<div class="p-4"> <div class="p-4">
<ProductDescription :data="product" /> <ProductDescriptions :data="product" />
</div> </div>
</template> </template>

View File

@ -30,7 +30,7 @@ const productId = ref(0);
const product = ref<CrmProductApi.Product>({} as CrmProductApi.Product); const product = ref<CrmProductApi.Product>({} as CrmProductApi.Product);
const productLogList = ref<SystemOperateLogApi.OperateLog[]>([]); const productLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
const [Description] = useDescription({ const [Descriptions] = useDescription({
componentProps: { componentProps: {
bordered: false, bordered: false,
column: 4, column: 4,
@ -73,7 +73,7 @@ onMounted(() => {
</div> </div>
</template> </template>
<Card class="min-h-[10%]"> <Card class="min-h-[10%]">
<Description :data="product" /> <Descriptions :data="product" />
</Card> </Card>
<Card class="mt-4 min-h-[60%]"> <Card class="mt-4 min-h-[60%]">
<Tabs> <Tabs>

View File

@ -12,7 +12,7 @@ defineProps<{
receivable: CrmReceivableApi.Receivable; // receivable: CrmReceivableApi.Receivable; //
}>(); }>();
const [BaseDescription] = useDescription({ const [BaseDescriptions] = useDescription({
componentProps: { componentProps: {
title: '基本信息', title: '基本信息',
bordered: false, bordered: false,
@ -22,7 +22,7 @@ const [BaseDescription] = useDescription({
schema: useDetailBaseSchema(), schema: useDetailBaseSchema(),
}); });
const [SystemDescription] = useDescription({ const [SystemDescriptions] = useDescription({
componentProps: { componentProps: {
title: '系统信息', title: '系统信息',
bordered: false, bordered: false,
@ -35,8 +35,8 @@ const [SystemDescription] = useDescription({
<template> <template>
<div class="p-4"> <div class="p-4">
<BaseDescription :data="receivable" /> <BaseDescriptions :data="receivable" />
<Divider /> <Divider />
<SystemDescription :data="receivable" /> <SystemDescriptions :data="receivable" />
</div> </div>
</template> </template>

View File

@ -39,7 +39,7 @@ const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队
// //
const validateWrite = computed(() => permissionListRef.value?.validateWrite); const validateWrite = computed(() => permissionListRef.value?.validateWrite);
const [Description] = useDescription({ const [Descriptions] = useDescription({
componentProps: { componentProps: {
bordered: false, bordered: false,
column: 4, column: 4,
@ -105,7 +105,7 @@ onMounted(() => {
</div> </div>
</template> </template>
<Card class="min-h-[10%]"> <Card class="min-h-[10%]">
<Description :data="receivable" /> <Descriptions :data="receivable" />
</Card> </Card>
<Card class="mt-4 min-h-[60%]"> <Card class="mt-4 min-h-[60%]">
<Tabs> <Tabs>

View File

@ -12,7 +12,7 @@ defineProps<{
receivablePlan: CrmReceivablePlanApi.Plan; // receivablePlan: CrmReceivablePlanApi.Plan; //
}>(); }>();
const [BaseDescription] = useDescription({ const [BaseDescriptions] = useDescription({
componentProps: { componentProps: {
title: '基本信息', title: '基本信息',
bordered: false, bordered: false,
@ -22,7 +22,7 @@ const [BaseDescription] = useDescription({
schema: useDetailBaseSchema(), schema: useDetailBaseSchema(),
}); });
const [SystemDescription] = useDescription({ const [SystemDescriptions] = useDescription({
componentProps: { componentProps: {
title: '系统信息', title: '系统信息',
bordered: false, bordered: false,
@ -35,8 +35,8 @@ const [SystemDescription] = useDescription({
<template> <template>
<div class="p-4"> <div class="p-4">
<BaseDescription :data="receivablePlan" /> <BaseDescriptions :data="receivablePlan" />
<Divider /> <Divider />
<SystemDescription :data="receivablePlan" /> <SystemDescriptions :data="receivablePlan" />
</div> </div>
</template> </template>

View File

@ -39,7 +39,7 @@ const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队
// //
const validateWrite = computed(() => permissionListRef.value?.validateWrite); const validateWrite = computed(() => permissionListRef.value?.validateWrite);
const [Description] = useDescription({ const [Descriptions] = useDescription({
componentProps: { componentProps: {
bordered: false, bordered: false,
column: 4, column: 4,
@ -109,7 +109,7 @@ onMounted(() => {
</div> </div>
</template> </template>
<Card class="min-h-[10%]"> <Card class="min-h-[10%]">
<Description :data="receivablePlan" /> <Descriptions :data="receivablePlan" />
</Card> </Card>
<Card class="mt-4 min-h-[60%]"> <Card class="mt-4 min-h-[60%]">
<Tabs> <Tabs>

View File

@ -19,7 +19,7 @@ withDefaults(
}, },
); );
const [Description] = useDescription({ const [Descriptions] = useDescription({
componentProps: { componentProps: {
bordered: false, bordered: false,
class: 'mx-4', class: 'mx-4',
@ -72,7 +72,7 @@ const [Description] = useDescription({
<template #extra> <template #extra>
<slot name="extra"></slot> <slot name="extra"></slot>
</template> </template>
<Description <Descriptions
:column="mode === 'member' ? 2 : 1" :column="mode === 'member' ? 2 : 1"
:data="{ :data="{
...user, ...user,

View File

@ -18,7 +18,7 @@ withDefaults(
}, },
); );
const [Description] = useDescription({ const [Descriptions] = useDescription({
componentProps: { componentProps: {
bordered: false, bordered: false,
class: 'mx-4', class: 'mx-4',
@ -85,12 +85,12 @@ const [Description] = useDescription({
<Avatar :size="140" shape="square" :src="user.avatar" /> <Avatar :size="140" shape="square" :src="user.avatar" />
</Col> </Col>
<Col :span="20"> <Col :span="20">
<Description :column="2" :data="user" /> <Descriptions :column="2" :data="user" />
</Col> </Col>
</Row> </Row>
<template v-else-if="mode === 'kefu'"> <template v-else-if="mode === 'kefu'">
<Avatar :size="140" shape="square" :src="user.avatar" /> <Avatar :size="140" shape="square" :src="user.avatar" />
<Description :column="1" :data="user" /> <Descriptions :column="1" :data="user" />
</template> </template>
</Card> </Card>
</template> </template>

View File

@ -12,7 +12,7 @@ import { useDetailSchema } from '../data';
const detailData = ref<PayOrderApi.Order>(); const detailData = ref<PayOrderApi.Order>();
const [Description] = useDescription({ const [Descriptions] = useDescription({
componentProps: { componentProps: {
bordered: false, bordered: false,
column: 2, column: 2,
@ -48,6 +48,6 @@ const [Modal, modalApi] = useVbenModal({
:show-cancel-button="false" :show-cancel-button="false"
:show-confirm-button="false" :show-confirm-button="false"
> >
<Description :data="detailData" /> <Descriptions :data="detailData" />
</Modal> </Modal>
</template> </template>

View File

@ -14,7 +14,7 @@ import { useBaseDetailSchema, useChannelDetailSchema } from '../data';
const formData = ref<PayRefundApi.Refund>(); const formData = ref<PayRefundApi.Refund>();
const [BaseDescription] = useDescription({ const [BaseDescriptions] = useDescription({
componentProps: { componentProps: {
bordered: false, bordered: false,
column: 2, column: 2,
@ -23,7 +23,7 @@ const [BaseDescription] = useDescription({
schema: useBaseDetailSchema(), schema: useBaseDetailSchema(),
}); });
const [ChannelDescription] = useDescription({ const [ChannelDescriptions] = useDescription({
componentProps: { componentProps: {
bordered: false, bordered: false,
column: 2, column: 2,
@ -60,8 +60,8 @@ const [Modal, modalApi] = useVbenModal({
:show-cancel-button="false" :show-cancel-button="false"
:show-confirm-button="false" :show-confirm-button="false"
> >
<BaseDescription :data="formData" /> <BaseDescriptions :data="formData" />
<Divider /> <Divider />
<ChannelDescription :data="formData" /> <ChannelDescriptions :data="formData" />
</Modal> </Modal>
</template> </template>

View File

@ -32,7 +32,7 @@ const [Modal, modalApi] = useVbenModal({
}, },
}); });
const [Description] = useDescription({ const [Descriptions] = useDescription({
componentProps: { componentProps: {
title: '基本信息', title: '基本信息',
bordered: false, bordered: false,
@ -50,6 +50,6 @@ const [Description] = useDescription({
:show-cancel-button="false" :show-cancel-button="false"
:show-confirm-button="false" :show-confirm-button="false"
> >
<Description :data="formData" /> <Descriptions :data="formData" />
</Modal> </Modal>
</template> </template>