diff --git a/apps/web-antd/src/api/infra/file/index.ts b/apps/web-antd/src/api/infra/file/index.ts
index 5f352432f..aac65cf99 100644
--- a/apps/web-antd/src/api/infra/file/index.ts
+++ b/apps/web-antd/src/api/infra/file/index.ts
@@ -46,12 +46,9 @@ export function deleteFile(id: number) {
 
 /** 获取文件预签名地址 */
 export function getFilePresignedUrl(path: string) {
-  return requestClient.get<InfraFileApi.FilePresignedUrlRespVO>(
-    '/infra/file/presigned-url',
-    {
-      params: { path },
-    },
-  );
+  return requestClient.get<InfraFileApi.FilePresignedUrlRespVO>('/infra/file/presigned-url', {
+    params: { path },
+  });
 }
 
 /** 创建文件 */
@@ -60,9 +57,6 @@ export function createFile(data: InfraFileApi.File) {
 }
 
 /** 上传文件 */
-export function uploadFile(
-  data: InfraFileApi.FileUploadReqVO,
-  onUploadProgress?: AxiosProgressEvent,
-) {
+export function uploadFile(data: InfraFileApi.FileUploadReqVO, onUploadProgress?: AxiosProgressEvent) {
   return requestClient.upload('/infra/file/upload', data, { onUploadProgress });
 }
diff --git a/apps/web-antd/src/components/description/description.vue b/apps/web-antd/src/components/description/description.vue
new file mode 100644
index 000000000..54be93730
--- /dev/null
+++ b/apps/web-antd/src/components/description/description.vue
@@ -0,0 +1,71 @@
+<script lang="tsx">
+import type { DescriptionItemSchema, DescriptionProps } from './typing';
+import type { DescriptionsProps } from 'ant-design-vue';
+import type { PropType } from 'vue';
+
+import { Descriptions, DescriptionsItem } from 'ant-design-vue';
+
+import { defineComponent } from 'vue';
+
+/** 对 Descriptions 进行二次封装 */
+const Description = defineComponent({
+  name: 'Description',
+  props: {
+    data: {
+      type: Object as PropType<Record<string, any>>,
+      default: () => ({}),
+    },
+    schema: {
+      type: Array as PropType<DescriptionItemSchema[]>,
+      default: () => [],
+    },
+    /** 原生 Descriptions 的参数 */
+    descriptionsProps: {
+      type: Object as PropType<DescriptionsProps>,
+      default: () => ({}),
+    },
+  },
+
+  setup(props: DescriptionProps) {
+    /** 过滤掉不需要展示的 */
+    const shouldShowItem = (item: DescriptionItemSchema) => {
+      if (item.hidden === undefined) return true;
+      return typeof item.hidden === 'function' ? !item.hidden(props.data) : !item.hidden;
+    };
+    /** 渲染内容 */
+    const renderContent = (item: DescriptionItemSchema) => {
+      if (item.content) {
+        return typeof item.content === 'function' ? item.content(props.data) : item.content;
+      }
+      return item.field ? props.data?.[item.field] : null;
+    };
+
+    return () => (
+      <Descriptions
+        {...props}
+        bordered={props.descriptionsProps?.bordered}
+        colon={props.descriptionsProps?.colon}
+        column={props.descriptionsProps?.column}
+        extra={props.descriptionsProps?.extra}
+        layout={props.descriptionsProps?.layout}
+        size={props.descriptionsProps?.size}
+        title={props.descriptionsProps?.title}
+      >
+        {props.schema?.filter(shouldShowItem).map((item) => (
+          <DescriptionsItem
+            contentStyle={item.contentStyle}
+            key={item.field || String(item.label)}
+            label={item.label}
+            labelStyle={item.labelStyle}
+            span={item.span}
+          >
+            {renderContent(item)}
+          </DescriptionsItem>
+        ))}
+      </Descriptions>
+    );
+  },
+});
+
+export default Description;
+</script>
diff --git a/apps/web-antd/src/components/description/index.ts b/apps/web-antd/src/components/description/index.ts
new file mode 100644
index 000000000..a707c4865
--- /dev/null
+++ b/apps/web-antd/src/components/description/index.ts
@@ -0,0 +1,3 @@
+export { default as Description } from './description.vue';
+export * from './typing';
+export { useDescription } from './use-description';
diff --git a/apps/web-antd/src/components/description/typing.ts b/apps/web-antd/src/components/description/typing.ts
new file mode 100644
index 000000000..76ae9cb99
--- /dev/null
+++ b/apps/web-antd/src/components/description/typing.ts
@@ -0,0 +1,18 @@
+import type { DescriptionsProps } from 'ant-design-vue';
+import type { CSSProperties, VNode } from 'vue';
+
+export interface DescriptionItemSchema {
+  label: string | VNode; // 内容的描述
+  field?: string; // 对应 data 中的字段名
+  content?: ((data: any) => string | VNode) | string | VNode; // 自定义需要展示的内容，比如说 dict-tag
+  span?: number; // 包含列的数量
+  labelStyle?: CSSProperties; // 自定义标签样式
+  contentStyle?: CSSProperties; // 自定义内容样式
+  hidden?: ((data: any) => boolean) | boolean; // 是否显示
+}
+
+export interface DescriptionProps {
+  data?: Record<string, any>; // 数据
+  schema?: DescriptionItemSchema[]; // 描述项配置
+  descriptionsProps?: DescriptionsProps; // 原生 Descriptions 的参数
+}
diff --git a/apps/web-antd/src/components/description/use-description.ts b/apps/web-antd/src/components/description/use-description.ts
new file mode 100644
index 000000000..fbef6616b
--- /dev/null
+++ b/apps/web-antd/src/components/description/use-description.ts
@@ -0,0 +1,70 @@
+import type { DescriptionProps } from './typing';
+
+import { defineComponent, h, isReactive, reactive, watch } from 'vue';
+
+import { Description } from './index';
+
+/** 描述列表 api 定义 */
+class DescriptionApi {
+  private state = reactive<Record<string, any>>({});
+
+  constructor(options: DescriptionProps) {
+    this.state = { ...options };
+  }
+
+  getState(): DescriptionProps {
+    return this.state as DescriptionProps;
+  }
+
+  setState(newState: Partial<DescriptionProps>) {
+    this.state = { ...this.state, ...newState };
+  }
+}
+
+export type ExtendedDescriptionApi = DescriptionApi;
+
+export function useDescription(options: DescriptionProps) {
+  const IS_REACTIVE = isReactive(options);
+  const api = new DescriptionApi(options);
+  // 扩展API
+  const extendedApi: ExtendedDescriptionApi = api as never;
+  const Desc = defineComponent({
+    name: 'UseDescription',
+    inheritAttrs: false,
+    setup(_, { attrs, slots }) {
+      // 合并props和attrs到state
+      api.setState({ ...attrs });
+
+      return () =>
+        h(
+          Description,
+          {
+            ...api.getState(),
+            ...attrs,
+          },
+          slots,
+        );
+    },
+  });
+
+  // 响应式支持
+  if (IS_REACTIVE) {
+    watch(
+      () => options.schema,
+      (newSchema) => {
+        api.setState({ schema: newSchema });
+      },
+      { immediate: true, deep: true },
+    );
+
+    watch(
+      () => options.data,
+      (newData) => {
+        api.setState({ data: newData });
+      },
+      { immediate: true, deep: true },
+    );
+  }
+
+  return [Desc, extendedApi] as const;
+}
diff --git a/apps/web-antd/src/components/upload/use-upload.ts b/apps/web-antd/src/components/upload/use-upload.ts
index 94e238d1c..81aa22076 100644
--- a/apps/web-antd/src/components/upload/use-upload.ts
+++ b/apps/web-antd/src/components/upload/use-upload.ts
@@ -1,17 +1,14 @@
+import type { AxiosProgressEvent, InfraFileApi } from '#/api/infra/file';
 import type { Ref } from 'vue';
 
-import type { AxiosProgressEvent, InfraFileApi } from '#/api/infra/file';
-
+import { createFile, getFilePresignedUrl, uploadFile } from '#/api/infra/file';
+import { baseRequestClient } from '#/api/request';
 import { computed, unref } from 'vue';
 
 import { useAppConfig } from '@vben/hooks';
 import { $t } from '@vben/locales';
-
 import CryptoJS from 'crypto-js';
 
-import { createFile, getFilePresignedUrl, uploadFile } from '#/api/infra/file';
-import { baseRequestClient } from '#/api/request';
-
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
 
 /**
@@ -46,9 +43,7 @@ export function useUploadType({
   const getStringAccept = computed(() => {
     return unref(getAccept)
       .map((item) => {
-        return item.indexOf('/') > 0 || item.startsWith('.')
-          ? item
-          : `.${item}`;
+        return item.indexOf('/') > 0 || item.startsWith('.') ? item : `.${item}`;
       })
       .join(',');
   });
@@ -85,13 +80,9 @@ export const useUpload = () => {
   // 后端上传地址
   const uploadUrl = getUploadUrl();
   // 是否使用前端直连上传
-  const isClientUpload =
-    UPLOAD_TYPE.CLIENT === import.meta.env.VITE_UPLOAD_TYPE;
+  const isClientUpload = UPLOAD_TYPE.CLIENT === import.meta.env.VITE_UPLOAD_TYPE;
   // 重写ElUpload上传方法
-  const httpRequest = async (
-    file: File,
-    onUploadProgress?: AxiosProgressEvent,
-  ) => {
+  const httpRequest = async (file: File, onUploadProgress?: AxiosProgressEvent) => {
     // 模式一：前端上传
     if (isClientUpload) {
       // 1.1 生成文件名称
@@ -137,11 +128,7 @@ export const getUploadUrl = (): string => {
  * @param name 文件名称
  * @param file 文件
  */
-function createFile0(
-  vo: InfraFileApi.FilePresignedUrlRespVO,
-  name: string,
-  file: File,
-) {
+function createFile0(vo: InfraFileApi.FilePresignedUrlRespVO, name: string, file: File) {
   const fileVO = {
     configId: vo.configId,
     url: vo.url,
diff --git a/apps/web-antd/src/router/access.ts b/apps/web-antd/src/router/access.ts
index c4b161a5d..ecb000a4e 100644
--- a/apps/web-antd/src/router/access.ts
+++ b/apps/web-antd/src/router/access.ts
@@ -1,8 +1,4 @@
-import type {
-  AppRouteRecordRaw,
-  ComponentRecordType,
-  GenerateMenuAndRoutesOptions,
-} from '@vben/types';
+import type { AppRouteRecordRaw, ComponentRecordType, GenerateMenuAndRoutesOptions } from '@vben/types';
 
 import { generateAccessible } from '@vben/access';
 import { preferences } from '@vben/preferences';
diff --git a/apps/web-antd/src/views/_core/profile/modules/profile-user.vue b/apps/web-antd/src/views/_core/profile/modules/profile-user.vue
index b205991c9..bf0f444cc 100644
--- a/apps/web-antd/src/views/_core/profile/modules/profile-user.vue
+++ b/apps/web-antd/src/views/_core/profile/modules/profile-user.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
 import type { SystemUserProfileApi } from '#/api/system/user/profile';
 
-import { computed } from 'vue';
-
+import { CropperAvatar } from '#/components/cropper';
+import { useUpload } from '#/components/upload/use-upload';
 import { IconifyIcon } from '@vben/icons';
-import { preferences } from '@vben/preferences';
-import { formatDateTime } from '@vben/utils';
-
 import { Descriptions, DescriptionsItem, Tooltip } from 'ant-design-vue';
 
 import { updateUserProfile } from '#/api/system/user/profile';
-import { CropperAvatar } from '#/components/cropper';
-import { useUpload } from '#/components/upload/use-upload';
+import { computed } from 'vue';
+
+import { preferences } from '@vben/preferences';
+import { formatDateTime } from '@vben/utils';
 
 const props = defineProps<{
   profile?: SystemUserProfileApi.UserProfileRespVO;
@@ -21,17 +20,9 @@ const emit = defineEmits<{
   (e: 'success'): void;
 }>();
 
-const avatar = computed(
-  () => props.profile?.avatar || preferences.app.defaultAvatar,
-);
+const avatar = computed(() => props.profile?.avatar || preferences.app.defaultAvatar);
 
-async function handelUpload({
-  file,
-  filename,
-}: {
-  file: Blob;
-  filename: string;
-}) {
+async function handelUpload({ file, filename }: { file: Blob; filename: string }) {
   // 1. 上传头像，获取 URL
   const { httpRequest } = useUpload();
   // 将 Blob 转换为 File
@@ -69,10 +60,7 @@ async function handelUpload({
         <DescriptionsItem>
           <template #label>
             <div class="flex items-center">
-              <IconifyIcon
-                icon="ant-design:user-switch-outlined"
-                class="mr-1"
-              />
+              <IconifyIcon icon="ant-design:user-switch-outlined" class="mr-1" />
               所属角色
             </div>
           </template>
@@ -108,10 +96,7 @@ async function handelUpload({
         <DescriptionsItem>
           <template #label>
             <div class="flex items-center">
-              <IconifyIcon
-                icon="ant-design:usergroup-add-outlined"
-                class="mr-1"
-              />
+              <IconifyIcon icon="ant-design:usergroup-add-outlined" class="mr-1" />
               所属岗位
             </div>
           </template>
@@ -120,10 +105,7 @@ async function handelUpload({
         <DescriptionsItem>
           <template #label>
             <div class="flex items-center">
-              <IconifyIcon
-                icon="ant-design:clock-circle-outlined"
-                class="mr-1"
-              />
+              <IconifyIcon icon="ant-design:clock-circle-outlined" class="mr-1" />
               创建时间
             </div>
           </template>
diff --git a/apps/web-antd/src/views/bpm/model/index.vue b/apps/web-antd/src/views/bpm/model/index.vue
index c7d4938c1..60caf9d31 100644
--- a/apps/web-antd/src/views/bpm/model/index.vue
+++ b/apps/web-antd/src/views/bpm/model/index.vue
@@ -1,17 +1,11 @@
 <script lang="ts" setup>
 import { Page } from '@vben/common-ui';
-
 import { Button } from 'ant-design-vue';
 </script>
 
 <template>
   <Page>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
+    <Button danger type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
       该功能支持 Vue3 + element-plus 版本！
     </Button>
     <br />
@@ -20,9 +14,8 @@ import { Button } from 'ant-design-vue';
       target="_blank"
       href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/model/index"
     >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/model/index
-      代码，pull request 贡献给我们！
+      可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/model/index 代码，pull request
+      贡献给我们！
     </Button>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/bpm/processInstance/create/index.vue b/apps/web-antd/src/views/bpm/processInstance/create/index.vue
index 3a439c08e..278a8387d 100644
--- a/apps/web-antd/src/views/bpm/processInstance/create/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/create/index.vue
@@ -1,17 +1,11 @@
 <script lang="ts" setup>
 import { Page } from '@vben/common-ui';
-
 import { Button } from 'ant-design-vue';
 </script>
 
 <template>
   <Page>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
+    <Button danger type="link" target="_blank" href="https://github.com/yudaocode/yudao-ui-admin-vue3">
       该功能支持 Vue3 + element-plus 版本！
     </Button>
     <br />
@@ -20,8 +14,7 @@ import { Button } from 'ant-design-vue';
       target="_blank"
       href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processInstance/create/index"
     >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processInstance/create/index
+      可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processInstance/create/index
       代码，pull request 贡献给我们！
     </Button>
   </Page>
diff --git a/apps/web-antd/src/views/infra/apiAccessLog/modules/detail.vue b/apps/web-antd/src/views/infra/apiAccessLog/modules/detail.vue
index 93828c113..2e773396f 100644
--- a/apps/web-antd/src/views/infra/apiAccessLog/modules/detail.vue
+++ b/apps/web-antd/src/views/infra/apiAccessLog/modules/detail.vue
@@ -1,15 +1,14 @@
 <script lang="ts" setup>
 import type { InfraApiAccessLogApi } from '#/api/infra/api-access-log';
 
-import { ref } from 'vue';
-
+import { DictTag } from '#/components/dict-tag';
 import { useVbenModal } from '@vben/common-ui';
-import { formatDateTime } from '@vben/utils';
-
 import { Descriptions } from 'ant-design-vue';
 
-import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE } from '#/utils/dict';
+import { ref } from 'vue';
+
+import { formatDateTime } from '@vben/utils';
 
 const formData = ref<InfraApiAccessLogApi.ApiAccessLog>();
 
@@ -34,19 +33,8 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal
-    title="API 访问日志详情"
-    class="w-1/2"
-    :show-cancel-button="false"
-    :show-confirm-button="false"
-  >
-    <Descriptions
-      bordered
-      :column="1"
-      size="middle"
-      class="mx-4"
-      :label-style="{ width: '110px' }"
-    >
+  <Modal title="API 访问日志详情" class="w-1/2" :show-cancel-button="false" :show-confirm-button="false">
+    <Descriptions bordered :column="1" size="middle" class="mx-4" :label-style="{ width: '110px' }">
       <Descriptions.Item label="日志编号">
         {{ formData?.id }}
       </Descriptions.Item>
@@ -66,9 +54,7 @@ const [Modal, modalApi] = useVbenModal({
       <Descriptions.Item label="用户UA">
         {{ formData?.userAgent }}
       </Descriptions.Item>
-      <Descriptions.Item label="请求信息">
-        {{ formData?.requestMethod }} {{ formData?.requestUrl }}
-      </Descriptions.Item>
+      <Descriptions.Item label="请求信息"> {{ formData?.requestMethod }} {{ formData?.requestUrl }} </Descriptions.Item>
       <Descriptions.Item label="请求参数">
         {{ formData?.requestParams }}
       </Descriptions.Item>
@@ -79,9 +65,7 @@ const [Modal, modalApi] = useVbenModal({
         {{ formatDateTime(formData?.beginTime || '') }} ~
         {{ formatDateTime(formData?.endTime || '') }}
       </Descriptions.Item>
-      <Descriptions.Item label="请求耗时">
-        {{ formData?.duration }} ms
-      </Descriptions.Item>
+      <Descriptions.Item label="请求耗时"> {{ formData?.duration }} ms </Descriptions.Item>
       <Descriptions.Item label="操作结果">
         <div v-if="formData?.resultCode === 0">正常</div>
         <div v-else-if="formData && formData?.resultCode > 0">
@@ -95,10 +79,7 @@ const [Modal, modalApi] = useVbenModal({
         {{ formData?.operateName }}
       </Descriptions.Item>
       <Descriptions.Item label="操作类型">
-        <DictTag
-          :type="DICT_TYPE.INFRA_OPERATE_TYPE"
-          :value="formData?.operateType"
-        />
+        <DictTag :type="DICT_TYPE.INFRA_OPERATE_TYPE" :value="formData?.operateType" />
       </Descriptions.Item>
     </Descriptions>
   </Modal>
diff --git a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/form.vue b/apps/web-antd/src/views/infra/demo/demo03/inner/modules/form.vue
index c834daee7..490a64c17 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/inner/modules/form.vue
@@ -1,19 +1,13 @@
 <script lang="ts" setup>
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
 
-import { computed, ref } from 'vue';
-
 import { useVbenModal } from '@vben/common-ui';
-
 import { message, Tabs } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import {
-  createDemo03Student,
-  getDemo03Student,
-  updateDemo03Student,
-} from '#/api/infra/demo/demo03/inner';
+import { createDemo03Student, getDemo03Student, updateDemo03Student } from '#/api/infra/demo/demo03/inner';
 import { $t } from '#/locales';
+import { computed, ref } from 'vue';
 
 import { useFormSchema } from '../data';
 import Demo03CourseForm from './demo03-course-form.vue';
@@ -22,9 +16,7 @@ import Demo03GradeForm from './demo03-grade-form.vue';
 const emit = defineEmits(['success']);
 const formData = ref<Demo03StudentApi.Demo03Student>();
 const getTitle = computed(() => {
-  return formData.value?.id
-    ? $t('ui.actionTitle.edit', ['学生'])
-    : $t('ui.actionTitle.create', ['学生']);
+  return formData.value?.id ? $t('ui.actionTitle.edit', ['学生']) : $t('ui.actionTitle.create', ['学生']);
 });
 
 /** 子表的表单 */
@@ -58,9 +50,7 @@ const [Modal, modalApi] = useVbenModal({
     data.demo03Courses = demo03CourseFormRef.value?.getData();
     data.demo03Grade = await demo03GradeFormRef.value?.getValues();
     try {
-      await (formData.value?.id
-        ? updateDemo03Student(data)
-        : createDemo03Student(data));
+      await (formData.value?.id ? updateDemo03Student(data) : createDemo03Student(data));
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -104,10 +94,7 @@ const [Modal, modalApi] = useVbenModal({
     <!-- 子表的表单 -->
     <Tabs v-model:active-key="subTabsName">
       <Tabs.TabPane key="demo03Course" tab="学生课程" force-render>
-        <Demo03CourseForm
-          ref="demo03CourseFormRef"
-          :student-id="formData?.id"
-        />
+        <Demo03CourseForm ref="demo03CourseFormRef" :student-id="formData?.id" />
       </Tabs.TabPane>
       <Tabs.TabPane key="demo03Grade" tab="学生班级" force-render>
         <Demo03GradeForm ref="demo03GradeFormRef" :student-id="formData?.id" />
diff --git a/apps/web-antd/src/views/system/dict/data.ts b/apps/web-antd/src/views/system/dict/data.ts
index 847071eeb..c8160f6e7 100644
--- a/apps/web-antd/src/views/system/dict/data.ts
+++ b/apps/web-antd/src/views/system/dict/data.ts
@@ -3,13 +3,13 @@ import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemDictDataApi } from '#/api/system/dict/data';
 import type { SystemDictTypeApi } from '#/api/system/dict/type';
 
-import { useAccess } from '@vben/access';
-
 import { z } from '#/adapter/form';
 import { getSimpleDictTypeList } from '#/api/system/dict/type';
 import { CommonStatusEnum } from '#/utils/constants';
 import { DICT_TYPE, getDictOptions } from '#/utils/dict';
 
+import { useAccess } from '@vben/access';
+
 const { hasAccessByCodes } = useAccess();
 
 // ============================== 字典类型 ==============================
diff --git a/apps/web-antd/src/views/system/dict/modules/data-grid.vue b/apps/web-antd/src/views/system/dict/modules/data-grid.vue
index ff9f34214..232b5bab2 100644
--- a/apps/web-antd/src/views/system/dict/modules/data-grid.vue
+++ b/apps/web-antd/src/views/system/dict/modules/data-grid.vue
@@ -1,25 +1,16 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemDictDataApi } from '#/api/system/dict/data';
 
-import { watch } from 'vue';
-
 import { useVbenModal } from '@vben/common-ui';
 import { Download, Plus } from '@vben/icons';
-
 import { Button, message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import {
-  deleteDictData,
-  exportDictData,
-  getDictDataPage,
-} from '#/api/system/dict/data';
+import { deleteDictData, exportDictData, getDictDataPage } from '#/api/system/dict/data';
 import { $t } from '#/locales';
 import { downloadByData } from '#/utils/download';
+import { watch } from 'vue';
 
 import { useDataGridColumns, useDataGridFormSchema } from '../data';
 import DataForm from './data-form.vue';
@@ -137,20 +128,11 @@ watch(
 
     <Grid table-title="字典数据列表">
       <template #toolbar-tools>
-        <Button
-          type="primary"
-          @click="onCreate"
-          v-access:code="['system:dict:create']"
-        >
+        <Button type="primary" @click="onCreate" v-access:code="['system:dict:create']">
           <Plus class="size-5" />
           {{ $t('ui.actionTitle.create', ['字典数据']) }}
         </Button>
-        <Button
-          type="primary"
-          class="ml-2"
-          @click="onExport"
-          v-access:code="['system:dict:export']"
-        >
+        <Button type="primary" class="ml-2" @click="onExport" v-access:code="['system:dict:export']">
           <Download class="size-5" />
           {{ $t('ui.actionTitle.export') }}
         </Button>
diff --git a/apps/web-antd/src/views/system/dict/modules/type-grid.vue b/apps/web-antd/src/views/system/dict/modules/type-grid.vue
index 3de93c666..0e2ceddc6 100644
--- a/apps/web-antd/src/views/system/dict/modules/type-grid.vue
+++ b/apps/web-antd/src/views/system/dict/modules/type-grid.vue
@@ -1,22 +1,13 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeGridListeners,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { OnActionClickParams, VxeGridListeners, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemDictTypeApi } from '#/api/system/dict/type';
 
 import { useVbenModal } from '@vben/common-ui';
 import { Download, Plus } from '@vben/icons';
-
 import { Button, message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import {
-  deleteDictType,
-  exportDictType,
-  getDictTypePage,
-} from '#/api/system/dict/type';
+import { deleteDictType, exportDictType, getDictTypePage } from '#/api/system/dict/type';
 import { $t } from '#/locales';
 import { downloadByData } from '#/utils/download';
 
@@ -71,10 +62,7 @@ async function onDelete(row: SystemDictTypeApi.DictType) {
 }
 
 /** 表格操作按钮回调 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<SystemDictTypeApi.DictType>) {
+function onActionClick({ code, row }: OnActionClickParams<SystemDictTypeApi.DictType>) {
   switch (code) {
     case 'delete': {
       onDelete(row);
@@ -132,20 +120,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <Grid table-title="字典类型列表">
       <template #toolbar-tools>
-        <Button
-          type="primary"
-          @click="onCreate"
-          v-access:code="['system:dict:create']"
-        >
+        <Button type="primary" @click="onCreate" v-access:code="['system:dict:create']">
           <Plus class="size-5" />
           {{ $t('ui.actionTitle.create', ['字典类型']) }}
         </Button>
-        <Button
-          type="primary"
-          class="ml-2"
-          @click="onExport"
-          v-access:code="['system:dict:export']"
-        >
+        <Button type="primary" class="ml-2" @click="onExport" v-access:code="['system:dict:export']">
           <Download class="size-5" />
           {{ $t('ui.actionTitle.export') }}
         </Button>
diff --git a/apps/web-antd/src/views/system/notify/my/modules/detail.vue b/apps/web-antd/src/views/system/notify/my/modules/detail.vue
index 5f1c124a9..585833e9d 100644
--- a/apps/web-antd/src/views/system/notify/my/modules/detail.vue
+++ b/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({
+  descriptionsProps: {
+    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) {
@@ -26,6 +64,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     try {
       formData.value = data;
+      descApi.setState({ data });
     } finally {
       modalApi.lock(false);
     }
@@ -34,36 +73,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>
diff --git a/packages/@core/base/shared/src/utils/date.ts b/packages/@core/base/shared/src/utils/date.ts
index ad200bd46..158453b85 100644
--- a/packages/@core/base/shared/src/utils/date.ts
+++ b/packages/@core/base/shared/src/utils/date.ts
@@ -1,9 +1,6 @@
 import dayjs from 'dayjs';
 
-export function formatDate(
-  time: Date | number | string | undefined,
-  format = 'YYYY-MM-DD',
-) {
+export function formatDate(time: Date | number | string | undefined, format = 'YYYY-MM-DD') {
   if (!time) {
     return time;
   }
diff --git a/packages/effects/common-ui/src/components/captcha/verification/Verify/VerifyPoints.vue b/packages/effects/common-ui/src/components/captcha/verification/Verify/VerifyPoints.vue
index 498d7ada6..6006bb3f0 100644
--- a/packages/effects/common-ui/src/components/captcha/verification/Verify/VerifyPoints.vue
+++ b/packages/effects/common-ui/src/components/captcha/verification/Verify/VerifyPoints.vue
@@ -1,16 +1,8 @@
 <script lang="ts" setup>
+import type { VerificationProps } from '../types';
 import type { ComponentInternalInstance } from 'vue';
 
-import type { VerificationProps } from '../types';
-
-import {
-  getCurrentInstance,
-  nextTick,
-  onMounted,
-  reactive,
-  ref,
-  toRefs,
-} from 'vue';
+import { getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs } from 'vue';
 
 import { $t } from '@vben/locales';
 
@@ -174,10 +166,7 @@ function canvasClick(e: any) {
       // var flag = this.comparePos(this.fontPos, this.checkPosArr);
       // 发送后端请求
       const captchaVerification = secretKey.value
-        ? aesEncrypt(
-            `${backToken.value}---${JSON.stringify(checkPosArr)}`,
-            secretKey.value,
-          )
+        ? aesEncrypt(`${backToken.value}---${JSON.stringify(checkPosArr)}`, secretKey.value)
         : `${backToken.value}---${JSON.stringify(checkPosArr)}`;
       const data = {
         captchaType: captchaType.value,
@@ -212,8 +201,7 @@ function canvasClick(e: any) {
       });
     }, 400);
   }
-  if (num.value < checkNum.value)
-    num.value = createPoint(getMousePos(canvas, e));
+  if (num.value < checkNum.value) num.value = createPoint(getMousePos(canvas, e));
 }
 
 // 请求背景图片和验证图片
@@ -251,12 +239,7 @@ defineExpose({
         }"
         class="verify-img-panel"
       >
-        <div
-          v-show="showRefresh"
-          class="verify-refresh"
-          style="z-index: 3"
-          @click="refresh"
-        >
+        <div v-show="showRefresh" class="verify-refresh" style="z-index: 3" @click="refresh">
           <i class="iconfont icon-refresh"></i>
         </div>
         <img
diff --git a/packages/effects/plugins/src/vxe-table/extends.ts b/packages/effects/plugins/src/vxe-table/extends.ts
index ff5fe2742..44d498ad3 100644
--- a/packages/effects/plugins/src/vxe-table/extends.ts
+++ b/packages/effects/plugins/src/vxe-table/extends.ts
@@ -1,45 +1,23 @@
-import type { VxeGridProps, VxeUIExport } from 'vxe-table';
-
-import type { Recordable } from '@vben/types';
-
 import type { VxeGridApi } from './api';
+import type { Recordable } from '@vben/types';
+import type { VxeGridProps, VxeUIExport } from 'vxe-table';
 
 import { formatDate, formatDateTime, isFunction } from '@vben/utils';
 
-export function extendProxyOptions(
-  api: VxeGridApi,
-  options: VxeGridProps,
-  getFormValues: () => Recordable<any>,
-) {
-  [
-    'query',
-    'querySuccess',
-    'queryError',
-    'queryAll',
-    'queryAllSuccess',
-    'queryAllError',
-  ].forEach((key) => {
+export function extendProxyOptions(api: VxeGridApi, options: VxeGridProps, getFormValues: () => Recordable<any>) {
+  ['query', 'querySuccess', 'queryError', 'queryAll', 'queryAllSuccess', 'queryAllError'].forEach((key) => {
     extendProxyOption(key, api, options, getFormValues);
   });
 }
 
-function extendProxyOption(
-  key: string,
-  api: VxeGridApi,
-  options: VxeGridProps,
-  getFormValues: () => Recordable<any>,
-) {
+function extendProxyOption(key: string, api: VxeGridApi, options: VxeGridProps, getFormValues: () => Recordable<any>) {
   const { proxyConfig } = options;
   const configFn = (proxyConfig?.ajax as Recordable<any>)?.[key];
   if (!isFunction(configFn)) {
     return options;
   }
 
-  const wrapperFn = async (
-    params: Recordable<any>,
-    customValues: Recordable<any>,
-    ...args: Recordable<any>[]
-  ) => {
+  const wrapperFn = async (params: Recordable<any>, customValues: Recordable<any>, ...args: Recordable<any>[]) => {
     const formValues = getFormValues();
     const data = await configFn(
       params,