feat: 新增支持 schema 模式的描述列表组件

apps/web-antd/src/views/system/notify/my/modules/detail.vue

@@ -1,18 +1,56 @@
 <script lang="ts" setup>
 import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 
-import { ref } from 'vue';
-
+import { useDescription } from '#/components/description';
+import { DictTag } from '#/components/dict-tag';
 import { useVbenModal } from '@vben/common-ui';
+
+import { DICT_TYPE } from '#/utils/dict';
+import { h, ref } from 'vue';
+
 import { formatDateTime } from '@vben/utils';
 
-import { Descriptions } from 'ant-design-vue';
-
-import { DictTag } from '#/components/dict-tag';
-import { DICT_TYPE } from '#/utils/dict';
-
 const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
 
+const [Description, descApi] = useDescription({
+  componentProps: {
+    bordered: true,
+    column: 1,
+    size: 'middle',
+    class: 'mx-4',
+  },
+  schema: [
+    {
+      field: 'templateNickname',
+      label: '发送人',
+    },
+    {
+      field: 'createTime',
+      label: '发送时间',
+      content: (data) => formatDateTime(data?.createTime) as string,
+    },
+    {
+      field: 'templateType',
+      label: '消息类型',
+      content: (data) => h(DictTag, { type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE, value: data?.templateType }),
+    },
+    {
+      field: 'readStatus',
+      label: '是否已读',
+      content: (data) => h(DictTag, { type: DICT_TYPE.INFRA_BOOLEAN_STRING, value: data?.readStatus }),
+    },
+    {
+      field: 'readTime',
+      label: '阅读时间',
+      content: (data) => formatDateTime(data?.readTime) as string,
+    },
+    {
+      field: 'templateContent',
+      label: '消息内容',
+    },
+  ],
+});
+
 const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
@@ -27,6 +65,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     try {
       formData.value = data;
+      descApi.setState({ data });
     } finally {
       modalApi.lock(false);
     }
@@ -35,36 +74,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal
-    title="消息详情"
-    :show-cancel-button="false"
-    :show-confirm-button="false"
-  >
-    <Descriptions bordered :column="1" size="middle" class="mx-4">
-      <Descriptions.Item label="发送人">
-        {{ formData?.templateNickname }}
-      </Descriptions.Item>
-      <Descriptions.Item label="发送时间">
-        {{ formatDateTime(formData?.createTime) }}
-      </Descriptions.Item>
-      <Descriptions.Item label="消息类型">
-        <DictTag
-          :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE"
-          :value="formData?.templateType"
-        />
-      </Descriptions.Item>
-      <Descriptions.Item label="是否已读">
-        <DictTag
-          :type="DICT_TYPE.INFRA_BOOLEAN_STRING"
-          :value="formData?.readStatus"
-        />
-      </Descriptions.Item>
-      <Descriptions.Item label="阅读时间">
-        {{ formatDateTime(formData?.readTime || '') }}
-      </Descriptions.Item>
-      <Descriptions.Item label="消息内容">
-        {{ formData?.templateContent }}
-      </Descriptions.Item>
-    </Descriptions>
+  <Modal title="消息详情" :show-cancel-button="false" :show-confirm-button="false">
+    <Description />
   </Modal>
 </template>