diff --git a/apps/web-antd/src/views/pay/order/data.ts b/apps/web-antd/src/views/pay/order/data.ts
index 5f69fc3b3..b3455ee8a 100644
--- a/apps/web-antd/src/views/pay/order/data.ts
+++ b/apps/web-antd/src/views/pay/order/data.ts
@@ -1,6 +1,14 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
 
+import { h } from 'vue';
+
+import { floatToFixed2, formatDateTime } from '@vben/utils';
+
+import { Tag } from 'ant-design-vue';
+
+import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE, getDictOptions } from '#/utils';
 
 /** 列表的搜索表单 */
@@ -134,3 +142,113 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
   ];
 }
+
+/** 详情的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'merchantOrderId',
+      label: '商户单号',
+    },
+    {
+      field: 'no',
+      label: '支付单号',
+    },
+    {
+      field: 'appId',
+      label: '应用编号',
+    },
+    {
+      field: 'appName',
+      label: '应用名称',
+    },
+    {
+      field: 'status',
+      label: '支付状态',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_ORDER_STATUS,
+          value: data?.status,
+        }),
+    },
+    {
+      field: 'price',
+      label: '支付金额',
+      content: (data) => `￥${floatToFixed2(data?.price)}`,
+    },
+    {
+      field: 'channelFeePrice',
+      label: '手续费',
+      content: (data) => `￥${floatToFixed2(data?.channelFeePrice)}`,
+    },
+    {
+      field: 'channelFeeRate',
+      label: '手续费比例',
+      content: (data) => `${floatToFixed2(data?.channelFeeRate)}%`,
+    },
+    {
+      field: 'successTime',
+      label: '支付时间',
+      content: (data) => formatDateTime(data?.successTime) as string,
+    },
+    {
+      field: 'expireTime',
+      label: '失效时间',
+      content: (data) => formatDateTime(data?.expireTime) as string,
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      content: (data) => formatDateTime(data?.createTime) as string,
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      content: (data) => formatDateTime(data?.updateTime) as string,
+    },
+    {
+      field: 'subject',
+      label: '商品标题',
+    },
+    {
+      field: 'body',
+      label: '商品描述',
+    },
+    {
+      field: 'channelCode',
+      label: '支付渠道',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.PAY_CHANNEL_CODE,
+          value: data?.channelCode,
+        }),
+    },
+    {
+      field: 'userIp',
+      label: '支付 IP',
+    },
+    {
+      field: 'channelOrderNo',
+      label: '渠道单号',
+      content: (data) =>
+        h(Tag, { color: 'green' }, () => data?.channelOrderNo || ''),
+    },
+    {
+      field: 'channelUserId',
+      label: '渠道用户',
+    },
+    {
+      field: 'refundPrice',
+      label: '退款金额',
+      content: (data) => `￥${floatToFixed2(data?.refundPrice)}`,
+    },
+    {
+      field: 'notifyUrl',
+      label: '通知 URL',
+    },
+    {
+      field: 'channelNotifyData',
+      label: '支付通道异步回调内容',
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/pay/order/modules/detail.vue b/apps/web-antd/src/views/pay/order/modules/detail.vue
index a7b604fe0..3ae087426 100644
--- a/apps/web-antd/src/views/pay/order/modules/detail.vue
+++ b/apps/web-antd/src/views/pay/order/modules/detail.vue
@@ -4,16 +4,23 @@ import type { PayOrderApi } from '#/api/pay/order';
 import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
-import { floatToFixed2, formatDateTime } from '@vben/utils';
-
-import { Descriptions, Divider, Tag } from 'ant-design-vue';
 
 import { getOrder } from '#/api/pay/order';
-import { DictTag } from '#/components/dict-tag';
-import { DICT_TYPE } from '#/utils';
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
 
 const detailData = ref<PayOrderApi.Order>();
 
+const [Description] = useDescription({
+  componentProps: {
+    bordered: false,
+    column: 2,
+    class: 'mx-4',
+  },
+  schema: useDetailSchema(),
+});
+
 const [Modal, modalApi] = useVbenModal({
   onOpenChange: async (isOpen) => {
     if (!isOpen) {
@@ -41,92 +48,6 @@ const [Modal, modalApi] = useVbenModal({
     :show-cancel-button="false"
     :show-confirm-button="false"
   >
-    <Descriptions :column="2">
-      <Descriptions.Item label="商户单号">
-        {{ detailData?.merchantOrderId }}
-      </Descriptions.Item>
-      <Descriptions.Item label="支付单号">
-        {{ detailData?.no }}
-      </Descriptions.Item>
-      <Descriptions.Item label="应用编号">
-        {{ detailData?.appId }}
-      </Descriptions.Item>
-      <Descriptions.Item label="应用名称">
-        {{ detailData?.appName }}
-      </Descriptions.Item>
-      <Descriptions.Item label="支付状态">
-        <DictTag
-          size="small"
-          :type="DICT_TYPE.PAY_ORDER_STATUS"
-          :value="detailData?.status"
-        />
-      </Descriptions.Item>
-      <Descriptions.Item label="支付金额">
-        <Tag color="green" size="small">
-          ￥{{ floatToFixed2(detailData?.price) }}
-        </Tag>
-      </Descriptions.Item>
-      <Descriptions.Item label="手续费">
-        <Tag color="orange" size="small">
-          ￥{{ floatToFixed2(detailData?.channelFeePrice) }}
-        </Tag>
-      </Descriptions.Item>
-      <Descriptions.Item label="手续费比例">
-        {{ floatToFixed2(detailData?.channelFeeRate) }}%
-      </Descriptions.Item>
-      <Descriptions.Item label="支付时间">
-        {{ formatDateTime(detailData?.successTime) }}
-      </Descriptions.Item>
-      <Descriptions.Item label="失效时间">
-        {{ formatDateTime(detailData?.expireTime) }}
-      </Descriptions.Item>
-      <Descriptions.Item label="创建时间">
-        {{ formatDateTime(detailData?.createTime) }}
-      </Descriptions.Item>
-      <Descriptions.Item label="更新时间">
-        {{ formatDateTime(detailData?.updateTime) }}
-      </Descriptions.Item>
-    </Descriptions>
-    <Divider />
-    <Descriptions :column="2">
-      <Descriptions.Item label="商品标题">
-        {{ detailData?.subject }}
-      </Descriptions.Item>
-      <Descriptions.Item label="商品描述">
-        {{ detailData?.body }}
-      </Descriptions.Item>
-      <Descriptions.Item label="支付渠道">
-        <DictTag
-          size="small"
-          :type="DICT_TYPE.PAY_CHANNEL_CODE"
-          :value="detailData?.channelCode"
-        />
-      </Descriptions.Item>
-      <Descriptions.Item label="支付 IP">
-        {{ detailData?.userIp }}
-      </Descriptions.Item>
-      <Descriptions.Item label="渠道单号">
-        <Tag size="small" color="green" v-if="detailData?.channelOrderNo">
-          {{ detailData?.channelOrderNo }}
-        </Tag>
-      </Descriptions.Item>
-      <Descriptions.Item label="渠道用户">
-        {{ detailData?.channelUserId }}
-      </Descriptions.Item>
-      <Descriptions.Item label="退款金额" :span="2">
-        <Tag size="small" color="red">
-          ￥{{ floatToFixed2(detailData?.refundPrice) }}
-        </Tag>
-      </Descriptions.Item>
-      <Descriptions.Item label="通知 URL">
-        {{ detailData?.notifyUrl }}
-      </Descriptions.Item>
-    </Descriptions>
-    <Divider />
-    <Descriptions :column="1">
-      <Descriptions.Item label="支付通道异步回调内容">
-        {{ detailData?.channelNotifyData }}
-      </Descriptions.Item>
-    </Descriptions>
+    <Description :data="detailData" />
   </Modal>
 </template>