diff --git a/apps/web-antd/src/api/bpm/definition/index.ts b/apps/web-antd/src/api/bpm/definition/index.ts
index c7facf6ec..502d5e366 100644
--- a/apps/web-antd/src/api/bpm/definition/index.ts
+++ b/apps/web-antd/src/api/bpm/definition/index.ts
@@ -6,6 +6,7 @@ export namespace BpmProcessDefinitionApi {
   /** 流程定义 */
   export interface ProcessDefinition {
     id: string;
+    key?: string;
     version: number;
     name: string;
     description: string;
diff --git a/apps/web-antd/src/api/bpm/processInstance/index.ts b/apps/web-antd/src/api/bpm/processInstance/index.ts
index 32e0075b9..ecbc03855 100644
--- a/apps/web-antd/src/api/bpm/processInstance/index.ts
+++ b/apps/web-antd/src/api/bpm/processInstance/index.ts
@@ -15,6 +15,7 @@ export namespace BpmProcessInstanceApi {
   export interface Task {
     id: number;
     name: string;
+    assigneeUser?: User;
   }
 
   export interface User {
@@ -51,6 +52,7 @@ export namespace BpmProcessInstanceApi {
   export interface ProcessInstance {
     businessKey: string;
     category: string;
+    categoryName?: string;
     createTime: string;
     endTime: string;
     fields: string[];
@@ -64,6 +66,10 @@ export namespace BpmProcessInstanceApi {
     startTime?: Date;
     startUser?: User;
     status: number;
+    summary?: {
+      key: string;
+      value: string;
+    }[];
     tasks?: BpmProcessInstanceApi.Task[];
   }
 
diff --git a/apps/web-antd/src/api/bpm/task/index.ts b/apps/web-antd/src/api/bpm/task/index.ts
index 1ab011925..63e1af886 100644
--- a/apps/web-antd/src/api/bpm/task/index.ts
+++ b/apps/web-antd/src/api/bpm/task/index.ts
@@ -13,6 +13,7 @@ export namespace BpmTaskApi {
     status: number; // 监听器状态
     event: string; // 监听事件
     valueType: string; // 监听器值类型
+    processInstance?: BpmProcessInstanceApi.ProcessInstance; // 流程实例
   }
 
   // 流程任务
diff --git a/apps/web-antd/src/components/description/description.vue b/apps/web-antd/src/components/description/description.vue
index c3f54695f..057f9db03 100644
--- a/apps/web-antd/src/components/description/description.vue
+++ b/apps/web-antd/src/components/description/description.vue
@@ -1,82 +1,196 @@
 <script lang="tsx">
-import type { DescriptionsProps } from 'ant-design-vue';
+import type { DescriptionsProps } from 'ant-design-vue/es/descriptions';
 
-import type { PropType } from 'vue';
+import type { CSSProperties, PropType, Slots } from 'vue';
 
-import type { DescriptionItemSchema, DescriptionsOptions } from './typing';
+import type { DescriptionItemSchema, DescriptionProps } from './typing';
 
-import { defineComponent } from 'vue';
+import { computed, defineComponent, ref, unref, useAttrs } from 'vue';
 
-import { get } from '@vben/utils';
+import { get, getNestedValue, isFunction } from '@vben/utils';
 
-import { Descriptions, DescriptionsItem } from 'ant-design-vue';
+import { Card, Descriptions } from 'ant-design-vue';
 
-/** 对 Descriptions 进行二次封装 */
-const Description = defineComponent({
-  name: 'Descriptions',
-  props: {
-    data: {
-      type: Object as PropType<Record<string, any>>,
-      default: () => ({}),
-    },
-    schema: {
-      type: Array as PropType<DescriptionItemSchema[]>,
-      default: () => [],
-    },
-    // Descriptions 原生 props
-    componentProps: {
-      type: Object as PropType<DescriptionsProps>,
-      default: () => ({}),
+const props = {
+  bordered: { default: true, type: Boolean },
+  column: {
+    default: () => {
+      return { lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4 };
     },
+    type: [Number, Object],
   },
+  data: { type: Object },
+  schema: {
+    default: () => [],
+    type: Array as PropType<DescriptionItemSchema[]>,
+  },
+  size: {
+    default: 'small',
+    type: String,
+    validator: (v: string) =>
+      ['default', 'middle', 'small', undefined].includes(v),
+  },
+  title: { default: '', type: String },
+  useCard: { default: true, type: Boolean },
+};
 
-  setup(props: DescriptionsOptions) {
-    // TODO @xingyu：每个 field 的 slot 的考虑
-    // TODO @xingyu：from 5.0：extra: () => getSlot(slots, 'extra')
-    /** 过滤掉不需要展示的 */
-    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;
+function getSlot(slots: Slots, slot: string, data?: any) {
+  if (!slots || !Reflect.has(slots, slot)) {
+    return null;
+  }
+  if (!isFunction(slots[slot])) {
+    console.error(`${slot} is not a function!`);
+    return null;
+  }
+  const slotFn = slots[slot];
+  if (!slotFn) return null;
+  return slotFn({ data });
+}
+
+export default defineComponent({
+  name: 'Description',
+  props,
+  setup(props, { slots }) {
+    const propsRef = ref<null | Partial<DescriptionProps>>(null);
+
+    const prefixCls = 'description';
+    const attrs = useAttrs();
+
+    // Custom title component: get title
+    const getMergeProps = computed(() => {
+      return {
+        ...props,
+        ...(unref(propsRef) as any),
+      } as DescriptionProps;
+    });
+
+    const getProps = computed(() => {
+      const opt = {
+        ...unref(getMergeProps),
+        title: undefined,
+      };
+      return opt as DescriptionProps;
+    });
+
+    const useWrapper = computed(() => !!unref(getMergeProps).title);
+
+    const getDescriptionsProps = computed(() => {
+      return { ...unref(attrs), ...unref(getProps) } as DescriptionsProps;
+    });
+
+    // 防止换行
+    function renderLabel({
+      label,
+      labelMinWidth,
+      labelStyle,
+    }: DescriptionItemSchema) {
+      if (!labelStyle && !labelMinWidth) {
+        return label;
       }
-      return item.field ? get(props.data, item.field) : null;
-    };
 
-    return () => (
-      <Descriptions
-        {...props}
-        bordered={props.componentProps?.bordered}
-        colon={props.componentProps?.colon}
-        column={props.componentProps?.column}
-        extra={props.componentProps?.extra}
-        layout={props.componentProps?.layout}
-        size={props.componentProps?.size}
-        title={props.componentProps?.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>
-    );
+      const labelStyles: CSSProperties = {
+        ...labelStyle,
+        minWidth: `${labelMinWidth}px `,
+      };
+      return <div style={labelStyles}>{label}</div>;
+    }
+
+    function renderItem() {
+      const { data, schema } = unref(getProps);
+      return unref(schema)
+        .map((item) => {
+          const { contentMinWidth, field, render, show, span } = item;
+
+          if (show && isFunction(show) && !show(data)) {
+            return null;
+          }
+
+          function getContent() {
+            const _data = unref(getProps)?.data;
+            if (!_data) {
+              return null;
+            }
+            const getField = field.includes('.')
+              ? (getNestedValue(_data, field) ?? get(_data, field))
+              : get(_data, field);
+            // if (
+            //   getField &&
+            //   !Object.prototype.hasOwnProperty.call(toRefs(_data), field)
+            // ) {
+            //   return isFunction(render) ? render('', _data) : (getField ?? '');
+            // }
+            return isFunction(render)
+              ? render(getField, _data)
+              : (getField ?? '');
+          }
+
+          const width = contentMinWidth;
+          return (
+            <Descriptions.Item
+              key={field}
+              label={renderLabel(item)}
+              span={span}
+            >
+              {() => {
+                if (item.slot) {
+                  const slotContent = getSlot(slots, item.slot, data);
+                  return slotContent;
+                }
+                if (!contentMinWidth) {
+                  return getContent();
+                }
+                const style: CSSProperties = {
+                  minWidth: `${width}px`,
+                };
+                return <div style={style}>{getContent()}</div>;
+              }}
+            </Descriptions.Item>
+          );
+        })
+        .filter((item) => !!item);
+    }
+
+    function renderDesc() {
+      return (
+        <Descriptions
+          class={`${prefixCls}`}
+          {...(unref(getDescriptionsProps) as any)}
+        >
+          {renderItem()}
+        </Descriptions>
+      );
+    }
+
+    function renderCard() {
+      const content = props.useCard ? renderDesc() : <div>{renderDesc()}</div>;
+      // Reduce the dom level
+      if (!props.useCard) {
+        return content;
+      }
+
+      const { title } = unref(getMergeProps);
+      const extraSlot = getSlot(slots, 'extra');
+
+      return (
+        <Card
+          bodyStyle={{ padding: '8px 0' }}
+          headStyle={{
+            padding: '8px 16px',
+            fontSize: '14px',
+            minHeight: '24px',
+          }}
+          style={{ margin: 0 }}
+          title={title}
+        >
+          {{
+            default: () => content,
+            extra: () => extraSlot && <div>{extraSlot}</div>,
+          }}
+        </Card>
+      );
+    }
+
+    return () => (unref(useWrapper) ? renderCard() : renderDesc());
   },
 });
-
-// TODO @xingyu：from 5.0：emits: ['register'] 事件
-export default Description;
 </script>
diff --git a/apps/web-antd/src/components/description/typing.ts b/apps/web-antd/src/components/description/typing.ts
index a0e997770..378f4a2ad 100644
--- a/apps/web-antd/src/components/description/typing.ts
+++ b/apps/web-antd/src/components/description/typing.ts
@@ -1,27 +1,56 @@
-import type { DescriptionsProps } from 'ant-design-vue';
+import type { DescriptionsProps } from 'ant-design-vue/es/descriptions';
+import type { JSX } from 'vue/jsx-runtime';
 
 import type { CSSProperties, VNode } from 'vue';
 
-// TODO @xingyu：【content】这个纠结下；1）vben2.0 是 render；https://doc.vvbin.cn/components/desc.html#usage 2）
-// TODO @xingyu：vben2.0 还有 sapn【done】、labelMinWidth、contentMinWidth
-// TODO @xingyu：【hidden】这个纠结下；1）vben2.0 是 show；
+import type { Recordable } from '@vben/types';
+
 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; // 是否显示
+  labelMinWidth?: number;
+  contentMinWidth?: number;
+  // 自定义标签样式
+  labelStyle?: CSSProperties;
+  // 对应 data 中的字段名
+  field: string;
+  // 内容的描述
+  label: JSX.Element | string | VNode;
+  // 包含列的数量
+  span?: number;
+  // 是否显示
+  show?: (...arg: any) => boolean;
+  // 插槽名称
+  slot?: string;
+  // 自定义需要展示的内容
+  render?: (
+    val: any,
+    data?: Recordable<any>,
+  ) => Element | JSX.Element | number | string | undefined | VNode;
 }
 
-// TODO @xingyu：vben2.0 还有 title【done】、bordered【done】d、useCollapse、collapseOptions
-// TODO @xingyu：from 5.0：bordered 默认为 true
-// TODO @xingyu：from 5.0：column 默认为 lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4
-// TODO @xingyu：from 5.0：size 默认为 small；有 'default', 'middle', 'small', undefined
-// TODO @xingyu：from 5.0：useCollapse 默认为 true
-export interface DescriptionsOptions {
-  data?: Record<string, any>; // 数据
-  schema?: DescriptionItemSchema[]; // 描述项配置
-  componentProps?: DescriptionsProps; // antd Descriptions 组件参数
+export interface DescriptionProps extends DescriptionsProps {
+  // 是否包含卡片组件
+  useCard?: boolean;
+  // 描述项配置
+  schema: DescriptionItemSchema[];
+  // 数据
+  data: Recordable<any>;
+  // 标题
+  title?: string;
+  // 是否包含边框
+  bordered?: boolean;
+  // 列数
+  column?:
+    | number
+    | {
+        lg: number;
+        md: number;
+        sm: number;
+        xl: number;
+        xs: number;
+        xxl: number;
+      };
+}
+
+export interface DescInstance {
+  setDescProps(descProps: Partial<DescriptionProps>): void;
 }
diff --git a/apps/web-antd/src/components/description/use-description.ts b/apps/web-antd/src/components/description/use-description.ts
index 7f99238bf..fd24920f0 100644
--- a/apps/web-antd/src/components/description/use-description.ts
+++ b/apps/web-antd/src/components/description/use-description.ts
@@ -1,71 +1,31 @@
-import type { DescriptionsOptions } from './typing';
+import type { Component } from 'vue';
 
-import { defineComponent, h, isReactive, reactive, watch } from 'vue';
+import type { DescInstance, DescriptionProps } from './typing';
+
+import { h, reactive } from 'vue';
 
 import Description from './description.vue';
 
-/** 描述列表 api 定义 */
-class DescriptionApi {
-  private state = reactive<Record<string, any>>({});
+export function useDescription(options?: Partial<DescriptionProps>) {
+  const propsState = reactive<Partial<DescriptionProps>>(options || {});
 
-  constructor(options: DescriptionsOptions) {
-    this.state = { ...options };
-  }
+  const api: DescInstance = {
+    setDescProps: (descProps: Partial<DescriptionProps>): void => {
+      Object.assign(propsState, descProps);
+    },
+  };
 
-  getState(): DescriptionsOptions {
-    return this.state as DescriptionsOptions;
-  }
-
-  // TODO @xingyu：【setState】纠结下：1）vben2.0 是 data https://doc.vvbin.cn/components/desc.html#usage；
-  setState(newState: Partial<DescriptionsOptions>) {
-    this.state = { ...this.state, ...newState };
-  }
-}
-
-export type ExtendedDescriptionApi = DescriptionApi;
-
-export function useDescription(options: DescriptionsOptions) {
-  const IS_REACTIVE = isReactive(options);
-  const api = new DescriptionApi(options);
-  // 扩展 API
-  const extendedApi: ExtendedDescriptionApi = api as never;
-  const Desc = defineComponent({
+  // 创建一个包装组件，将 propsState 合并到 props 中
+  const DescriptionWrapper: Component = {
     name: 'UseDescription',
     inheritAttrs: false,
-    setup(_, { attrs, slots }) {
-      // 合并props和attrs到state
-      api.setState({ ...attrs });
-
-      return () =>
-        h(
-          Description,
-          {
-            ...api.getState(),
-            ...attrs,
-          },
-          slots,
-        );
+    setup(_props, { attrs, slots }) {
+      return () => {
+        // @ts-ignore - 避免类型实例化过深
+        return h(Description, { ...propsState, ...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;
+  return [DescriptionWrapper, api] as const;
 }
diff --git a/apps/web-antd/src/views/ai/chat/manager/data.ts b/apps/web-antd/src/views/ai/chat/manager/data.ts
index 5990e515e..e9379d911 100644
--- a/apps/web-antd/src/views/ai/chat/manager/data.ts
+++ b/apps/web-antd/src/views/ai/chat/manager/data.ts
@@ -109,7 +109,7 @@ export function useGridFormSchemaMessage(): VbenFormSchema[] {
       label: '用户编号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/ai/image/manager/data.ts b/apps/web-antd/src/views/ai/image/manager/data.ts
index d5e39b76b..9875ed7d7 100644
--- a/apps/web-antd/src/views/ai/image/manager/data.ts
+++ b/apps/web-antd/src/views/ai/image/manager/data.ts
@@ -15,7 +15,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '用户编号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/ai/mindmap/manager/data.ts b/apps/web-antd/src/views/ai/mindmap/manager/data.ts
index eb56c92a9..3889353cf 100644
--- a/apps/web-antd/src/views/ai/mindmap/manager/data.ts
+++ b/apps/web-antd/src/views/ai/mindmap/manager/data.ts
@@ -12,7 +12,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '用户编号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/ai/model/chatRole/data.ts b/apps/web-antd/src/views/ai/model/chatRole/data.ts
index f06a832bf..2e1bc63bf 100644
--- a/apps/web-antd/src/views/ai/model/chatRole/data.ts
+++ b/apps/web-antd/src/views/ai/model/chatRole/data.ts
@@ -93,7 +93,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         placeholder: '请选择引用知识库',
-        api: () => getSimpleKnowledgeList(),
+        api: getSimpleKnowledgeList,
         labelField: 'name',
         mode: 'multiple',
         valueField: 'id',
@@ -106,7 +106,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         placeholder: '请选择引用工具',
-        api: () => getToolSimpleList(),
+        api: getToolSimpleList,
         mode: 'multiple',
         labelField: 'name',
         valueField: 'id',
diff --git a/apps/web-antd/src/views/ai/model/model/data.ts b/apps/web-antd/src/views/ai/model/model/data.ts
index 9dfe948f4..31f3ab05b 100644
--- a/apps/web-antd/src/views/ai/model/model/data.ts
+++ b/apps/web-antd/src/views/ai/model/model/data.ts
@@ -48,7 +48,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         placeholder: '请选择API 秘钥',
-        api: () => getApiKeySimpleList(),
+        api: getApiKeySimpleList,
         labelField: 'name',
         valueField: 'id',
         allowClear: true,
diff --git a/apps/web-antd/src/views/ai/music/manager/data.ts b/apps/web-antd/src/views/ai/music/manager/data.ts
index d6468eb0d..162e7a196 100644
--- a/apps/web-antd/src/views/ai/music/manager/data.ts
+++ b/apps/web-antd/src/views/ai/music/manager/data.ts
@@ -15,7 +15,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '用户编号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/ai/write/manager/data.ts b/apps/web-antd/src/views/ai/write/manager/data.ts
index 7c1768f64..d878d28ee 100644
--- a/apps/web-antd/src/views/ai/write/manager/data.ts
+++ b/apps/web-antd/src/views/ai/write/manager/data.ts
@@ -15,7 +15,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '用户编号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/bpm/form/designer/index.vue b/apps/web-antd/src/views/bpm/form/designer/index.vue
index 266fe51e6..17bc6bd7d 100644
--- a/apps/web-antd/src/views/bpm/form/designer/index.vue
+++ b/apps/web-antd/src/views/bpm/form/designer/index.vue
@@ -138,11 +138,7 @@ onMounted(() => {
     <FormModal @success="handleBack" />
 
     <Spin :spinning="loading">
-      <FcDesigner
-        class="h-full min-h-[500px]"
-        ref="designerRef"
-        :config="designerConfig"
-      >
+      <FcDesigner ref="designerRef" height="90vh" :config="designerConfig">
         <template #handle>
           <Button size="small" type="primary" @click="handleSave">
             <IconifyIcon icon="mdi:content-save" />
diff --git a/apps/web-antd/src/views/bpm/group/data.ts b/apps/web-antd/src/views/bpm/group/data.ts
index 50c4fdfed..01cc0b23d 100644
--- a/apps/web-antd/src/views/bpm/group/data.ts
+++ b/apps/web-antd/src/views/bpm/group/data.ts
@@ -51,7 +51,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         placeholder: '请选择成员',
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         mode: 'tags',
diff --git a/apps/web-antd/src/views/bpm/oa/leave/data.ts b/apps/web-antd/src/views/bpm/oa/leave/data.ts
index e46cd1083..9dab40f88 100644
--- a/apps/web-antd/src/views/bpm/oa/leave/data.ts
+++ b/apps/web-antd/src/views/bpm/oa/leave/data.ts
@@ -179,21 +179,21 @@ export function useDetailFormSchema(): DescriptionItemSchema[] {
     {
       label: '请假类型',
       field: 'type',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.BPM_OA_LEAVE_TYPE,
-          value: data?.type,
+          value: val,
         }),
     },
     {
       label: '开始时间',
       field: 'startTime',
-      content: (data) => formatDateTime(data?.startTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       label: '结束时间',
       field: 'endTime',
-      content: (data) => formatDateTime(data?.endTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       label: '原因',
diff --git a/apps/web-antd/src/views/bpm/processExpression/index.vue b/apps/web-antd/src/views/bpm/processExpression/index.vue
index af50ff8e4..6cb421177 100644
--- a/apps/web-antd/src/views/bpm/processExpression/index.vue
+++ b/apps/web-antd/src/views/bpm/processExpression/index.vue
@@ -44,9 +44,7 @@ async function handleDelete(row: BpmProcessExpressionApi.ProcessExpression) {
   });
   try {
     await deleteProcessExpression(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -74,6 +72,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
diff --git a/apps/web-antd/src/views/bpm/processExpression/modules/form.vue b/apps/web-antd/src/views/bpm/processExpression/modules/form.vue
index 1d6d71673..a621c3cba 100644
--- a/apps/web-antd/src/views/bpm/processExpression/modules/form.vue
+++ b/apps/web-antd/src/views/bpm/processExpression/modules/form.vue
@@ -55,6 +55,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
+      formData.value = undefined;
       return;
     }
     // 加载数据
diff --git a/apps/web-antd/src/views/bpm/processInstance/data.ts b/apps/web-antd/src/views/bpm/processInstance/data.ts
index 9b4b300d5..883cc97e2 100644
--- a/apps/web-antd/src/views/bpm/processInstance/data.ts
+++ b/apps/web-antd/src/views/bpm/processInstance/data.ts
@@ -5,23 +5,12 @@ import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { getCategorySimpleList } from '#/api/bpm/category';
+import { getSimpleProcessDefinitionList } from '#/api/bpm/definition';
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
-    // {
-    //   fieldName: 'startUserId',
-    //   label: '发起人',
-    //   component: 'ApiSelect',
-    //   componentProps: {
-    //     placeholder: '请选择发起人',
-    //     allowClear: true,
-    //     api: () => getSimpleUserList(),
-    //     labelField: 'nickname',
-    //     valueField: 'id',
-    //   },
-    // },
     {
       fieldName: 'name',
       label: '流程名称',
@@ -34,13 +23,15 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'processDefinitionId',
       label: '所属流程',
-      component: 'Input',
+      component: 'ApiSelect',
       componentProps: {
-        placeholder: '请输入流程定义的编号',
+        placeholder: '请选择流程定义',
         allowClear: true,
+        api: getSimpleProcessDefinitionList,
+        labelField: 'name',
+        valueField: 'id',
       },
     },
-    // 流程分类
     {
       fieldName: 'category',
       label: '流程分类',
@@ -48,12 +39,11 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入流程分类',
         allowClear: true,
-        api: () => getCategorySimpleList(),
+        api: getCategorySimpleList,
         labelField: 'name',
         valueField: 'code',
       },
     },
-    // 流程状态
     {
       fieldName: 'status',
       label: '流程状态',
@@ -67,7 +57,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
-    // 发起时间
     {
       fieldName: 'createTime',
       label: '发起时间',
@@ -97,15 +86,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
         default: 'slot-summary',
       },
     },
-
     {
       field: 'categoryName',
       title: '流程分类',
       minWidth: 120,
       fixed: 'left',
     },
-
-    // 流程状态
     {
       field: 'status',
       title: '流程状态',
@@ -114,7 +100,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
         default: 'slot-status',
       },
     },
-
     {
       field: 'startTime',
       title: '发起时间',
diff --git a/apps/web-antd/src/views/bpm/processInstance/index.vue b/apps/web-antd/src/views/bpm/processInstance/index.vue
index bb8b1ecd1..6a7492520 100644
--- a/apps/web-antd/src/views/bpm/processInstance/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { BpmTaskApi } from '#/api/bpm/task';
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 
 import { h } from 'vue';
 
@@ -10,11 +10,13 @@ import { BpmProcessInstanceStatus, DICT_TYPE } from '@vben/constants';
 import { Button, message, Textarea } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProcessDefinition } from '#/api/bpm/definition';
 import {
   cancelProcessInstanceByStartUser,
   getProcessInstanceMyPage,
 } from '#/api/bpm/processInstance';
 import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
 import { router } from '#/router';
 
 import { useGridColumns, useGridFormSchema } from './data';
@@ -27,43 +29,53 @@ function handleRefresh() {
 }
 
 /** 查看流程实例 */
-function handleDetail(row: BpmTaskApi.Task) {
+function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) {
   router.push({
     name: 'BpmProcessInstanceDetail',
     query: { id: row.id },
   });
 }
 
+/** 重新发起流程 */
+async function handleCreate(row: BpmProcessInstanceApi.ProcessInstance) {
+  // 如果是【业务表单】，不支持重新发起
+  if (row?.id) {
+    const processDefinitionDetail = await getProcessDefinition(
+      row.processDefinitionId,
+    );
+    if (processDefinitionDetail.formType === 20) {
+      message.error(
+        '重新发起流程失败，原因：该流程使用业务表单，不支持重新发起',
+      );
+      return;
+    }
+  }
+  // 跳转发起流程界面
+  await router.push({
+    name: 'BpmProcessInstanceCreate',
+    query: { processInstanceId: row?.id },
+  });
+}
+
 /** 取消流程实例 */
-function handleCancel(row: BpmTaskApi.Task) {
+function handleCancel(row: BpmProcessInstanceApi.ProcessInstance) {
   prompt({
-    async beforeClose(scope) {
-      if (scope.isConfirm) {
-        if (scope.value) {
-          try {
-            await cancelProcessInstanceByStartUser(row.id, scope.value);
-            message.success('取消成功');
-            handleRefresh();
-          } catch {
-            return false;
-          }
-        } else {
-          message.error('请输入取消原因');
-          return false;
-        }
-      }
-    },
     component: () => {
       return h(Textarea, {
         placeholder: '请输入取消原因',
         allowClear: true,
         rows: 2,
-        rules: [{ required: true, message: '请输入取消原因' }],
       });
     },
     content: '请输入取消原因',
     title: '取消流程',
     modelPropName: 'value',
+  }).then(async (reason) => {
+    if (reason) {
+      await cancelProcessInstanceByStartUser(row.id, reason);
+      message.success('取消成功');
+      handleRefresh();
+    }
   });
 }
 
@@ -88,15 +100,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
-    cellConfig: {
-      height: 64,
-    },
-  } as VxeTableGridOptions<BpmTaskApi.Task>,
+  } as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstance>,
 });
 </script>
 
@@ -110,7 +120,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </template>
 
     <Grid table-title="流程状态">
-      <!-- 摘要 -->
       <template #slot-summary="{ row }">
         <div
           class="flex flex-col py-2"
@@ -124,31 +133,29 @@ const [Grid, gridApi] = useVbenVxeGrid({
         </div>
         <div v-else>-</div>
       </template>
-
       <template #slot-status="{ row }">
-        <!-- 审批中状态 -->
         <template
           v-if="
             row.status === BpmProcessInstanceStatus.RUNNING &&
-            row.tasks?.length > 0
+            row.tasks!.length > 0
           "
         >
           <!-- 单人审批 -->
-          <template v-if="row.tasks.length === 1">
+          <template v-if="row.tasks!.length === 1">
             <span>
               <Button type="link" @click="handleDetail(row)">
-                {{ row.tasks[0].assigneeUser?.nickname }}
+                {{ row.tasks![0]!.assigneeUser?.nickname }}
               </Button>
-              ({{ row.tasks[0].name }}) 审批中
+              ({{ row.tasks![0]!.name }}) 审批中
             </span>
           </template>
           <!-- 多人审批 -->
           <template v-else>
             <span>
               <Button type="link" @click="handleDetail(row)">
-                {{ row.tasks[0].assigneeUser?.nickname }}
+                {{ row.tasks![0]!.assigneeUser?.nickname }}
               </Button>
-              等 {{ row.tasks.length }} 人 ({{ row.tasks[0].name }})审批中
+              等 {{ row.tasks!.length }} 人 ({{ row.tasks![0]!.name }})审批中
             </span>
           </template>
         </template>
@@ -179,6 +186,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
               auth: ['bpm:process-instance:cancel'],
               onClick: handleCancel.bind(null, row),
             },
+            {
+              label: '重新发起',
+              type: 'link',
+              icon: ACTION_ICON.ADD,
+              ifShow: row.status !== BpmProcessInstanceStatus.RUNNING,
+              auth: ['bpm:process-instance:create'],
+              onClick: handleCreate.bind(null, row),
+            },
           ]"
         />
       </template>
diff --git a/apps/web-antd/src/views/bpm/processInstance/manager/data.ts b/apps/web-antd/src/views/bpm/processInstance/manager/data.ts
index 1f6e8635c..a356cd076 100644
--- a/apps/web-antd/src/views/bpm/processInstance/manager/data.ts
+++ b/apps/web-antd/src/views/bpm/processInstance/manager/data.ts
@@ -1,15 +1,11 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
-
-import { h } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
-import { Button } from 'ant-design-vue';
-
 import { getCategorySimpleList } from '#/api/bpm/category';
+import { getSimpleProcessDefinitionList } from '#/api/bpm/definition';
 import { getSimpleUserList } from '#/api/system/user';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -23,7 +19,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请选择发起人',
         allowClear: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -40,13 +36,15 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'processDefinitionId',
       label: '所属流程',
-      component: 'Input',
+      component: 'ApiSelect',
       componentProps: {
-        placeholder: '请输入流程定义的编号',
+        placeholder: '请选择流程定义',
         allowClear: true,
+        api: getSimpleProcessDefinitionList,
+        labelField: 'name',
+        valueField: 'id',
       },
     },
-    // 流程分类
     {
       fieldName: 'category',
       label: '流程分类',
@@ -54,12 +52,11 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入流程分类',
         allowClear: true,
-        api: () => getCategorySimpleList(),
+        api: getCategorySimpleList,
         labelField: 'name',
         valueField: 'code',
       },
     },
-    // 流程状态
     {
       fieldName: 'status',
       label: '流程状态',
@@ -73,7 +70,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
-    // 发起时间
     {
       fieldName: 'createTime',
       label: '发起时间',
@@ -87,9 +83,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(
-  onTaskClick: (task: BpmProcessInstanceApi.Task) => void,
-): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -103,27 +97,22 @@ export function useGridColumns(
       minWidth: 200,
       fixed: 'left',
     },
-
     {
       field: 'categoryName',
       title: '流程分类',
       minWidth: 120,
       fixed: 'left',
     },
-
     {
       field: 'startUser.nickname',
       title: '流程发起人',
       minWidth: 120,
     },
-
     {
       field: 'startUser.deptName',
       title: '发起部门',
       minWidth: 120,
     },
-
-    // 流程状态
     {
       field: 'status',
       title: '流程状态',
@@ -133,7 +122,6 @@ export function useGridColumns(
         props: { type: DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS },
       },
     },
-
     {
       field: 'startTime',
       title: '发起时间',
@@ -152,29 +140,11 @@ export function useGridColumns(
       minWidth: 180,
       formatter: 'formatPast2',
     },
-
-    // 当前审批任务 tasks
     {
       field: 'tasks',
       title: '当前审批任务',
       minWidth: 320,
-      slots: {
-        default: ({ row }) => {
-          if (!row?.tasks?.length) return '-';
-
-          return row.tasks.map((task: BpmProcessInstanceApi.Task) =>
-            h(
-              Button,
-              {
-                type: 'link',
-                size: 'small',
-                onClick: () => onTaskClick(task),
-              },
-              { default: () => task.name },
-            ),
-          );
-        },
-      },
+      slots: { default: 'tasks' },
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/bpm/processInstance/manager/index.vue b/apps/web-antd/src/views/bpm/processInstance/manager/index.vue
index 5f2abc6fe..592b7ee8c 100644
--- a/apps/web-antd/src/views/bpm/processInstance/manager/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/manager/index.vue
@@ -7,7 +7,7 @@ import { h } from 'vue';
 import { DocAlert, Page, prompt } from '@vben/common-ui';
 import { BpmProcessInstanceStatus } from '@vben/constants';
 
-import { message, Textarea } from 'ant-design-vue';
+import { Button, message, Textarea } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -26,15 +26,19 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 点击任务 */
-function onTaskClick(task: BpmProcessInstanceApi.Task) {
-  // TODO 待实现
-  console.warn(task);
+/** 查看任务详情 */
+function handleTaskDetail(
+  row: BpmProcessInstanceApi.ProcessInstance,
+  task: BpmProcessInstanceApi.Task,
+) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.id, taskId: task.id },
+  });
 }
 
 /** 查看流程实例 */
 function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) {
-  console.warn(row);
   router.push({
     name: 'BpmProcessInstanceDetail',
     query: { id: row.id },
@@ -44,36 +48,23 @@ function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) {
 /** 取消流程实例 */
 function handleCancel(row: BpmProcessInstanceApi.ProcessInstance) {
   prompt({
-    async beforeClose(scope) {
-      if (scope.isConfirm) {
-        if (scope.value) {
-          try {
-            await cancelProcessInstanceByAdmin(row.id, scope.value);
-            message.success('取消成功');
-            handleRefresh();
-          } catch {
-            return false;
-          }
-        } else {
-          message.error('请输入取消原因');
-          return false;
-        }
-      }
-    },
     component: () => {
       return h(Textarea, {
         placeholder: '请输入取消原因',
         allowClear: true,
         rows: 2,
-        rules: [{ required: true, message: '请输入取消原因' }],
       });
     },
     content: '请输入取消原因',
     title: '取消流程',
     modelPropName: 'value',
-  })
-    .then(() => {})
-    .catch(() => {});
+  }).then(async (reason) => {
+    if (reason) {
+      await cancelProcessInstanceByAdmin(row.id, reason);
+      message.success('取消成功');
+      handleRefresh();
+    }
+  });
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -81,7 +72,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onTaskClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -97,6 +88,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -113,6 +105,19 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </template>
 
     <Grid table-title="流程实例">
+      <template #tasks="{ row }">
+        <template v-if="row.tasks && row.tasks.length > 0">
+          <Button
+            v-for="task in row.tasks"
+            :key="task.id"
+            type="link"
+            @click="handleTaskDetail(row, task)"
+          >
+            {{ task.name }}
+          </Button>
+        </template>
+        <span v-else>-</span>
+      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
diff --git a/apps/web-antd/src/views/bpm/processListener/data.ts b/apps/web-antd/src/views/bpm/processListener/data.ts
index 95b7bb39b..69f7d7c89 100644
--- a/apps/web-antd/src/views/bpm/processListener/data.ts
+++ b/apps/web-antd/src/views/bpm/processListener/data.ts
@@ -64,6 +64,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.BPM_PROCESS_LISTENER_TYPE, 'string'),
+        placeholder: '请选择类型',
         allowClear: true,
       },
       rules: 'required',
@@ -74,6 +75,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: EVENT_OPTIONS,
+        placeholder: '请选择事件',
         allowClear: true,
       },
       rules: 'required',
@@ -97,6 +99,7 @@ export function useFormSchema(): VbenFormSchema[] {
           DICT_TYPE.BPM_PROCESS_LISTENER_VALUE_TYPE,
           'string',
         ),
+        placeholder: '请选择值类型',
         allowClear: true,
       },
       rules: 'required',
@@ -165,6 +168,15 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
         props: { type: DICT_TYPE.BPM_PROCESS_LISTENER_TYPE },
       },
     },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
     {
       field: 'event',
       title: '事件',
@@ -191,9 +203,8 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       formatter: 'formatDateTime',
     },
     {
-      field: 'actions',
       title: '操作',
-      minWidth: 180,
+      width: 180,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-antd/src/views/bpm/processListener/index.vue b/apps/web-antd/src/views/bpm/processListener/index.vue
index 91efc2fdf..a624f2948 100644
--- a/apps/web-antd/src/views/bpm/processListener/index.vue
+++ b/apps/web-antd/src/views/bpm/processListener/index.vue
@@ -44,11 +44,9 @@ async function handleDelete(row: BpmProcessListenerApi.ProcessListener) {
   });
   try {
     await deleteProcessListener(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
-  } catch {
+  } finally {
     hideLoading();
   }
 }
@@ -74,6 +72,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
diff --git a/apps/web-antd/src/views/bpm/processListener/modules/form.vue b/apps/web-antd/src/views/bpm/processListener/modules/form.vue
index ef56d794c..dc0cee273 100644
--- a/apps/web-antd/src/views/bpm/processListener/modules/form.vue
+++ b/apps/web-antd/src/views/bpm/processListener/modules/form.vue
@@ -55,9 +55,7 @@ const [Modal, modalApi] = useVbenModal({
       // 关闭并提示
       await modalApi.close();
       emit('success');
-      message.success({
-        content: $t('ui.actionMessage.operationSuccess'),
-      });
+      message.success($t('ui.actionMessage.operationSuccess'));
     } finally {
       modalApi.unlock();
     }
diff --git a/apps/web-antd/src/views/bpm/task/copy/data.ts b/apps/web-antd/src/views/bpm/task/copy/data.ts
index eec9bfd4d..202887d73 100644
--- a/apps/web-antd/src/views/bpm/task/copy/data.ts
+++ b/apps/web-antd/src/views/bpm/task/copy/data.ts
@@ -34,7 +34,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'processInstanceName',
       title: '流程名称',
       minWidth: 200,
-      fixed: 'left',
     },
     {
       field: 'summary',
@@ -62,12 +61,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'activityName',
       title: '抄送节点',
-      minWidth: 180,
+      minWidth: 120,
     },
     {
       field: 'createUser.nickname',
       title: '抄送人',
-      minWidth: 180,
+      minWidth: 120,
       formatter: ({ cellValue }) => {
         return cellValue || '-';
       },
diff --git a/apps/web-antd/src/views/bpm/task/copy/index.vue b/apps/web-antd/src/views/bpm/task/copy/index.vue
index 437f2551d..e13cf923c 100644
--- a/apps/web-antd/src/views/bpm/task/copy/index.vue
+++ b/apps/web-antd/src/views/bpm/task/copy/index.vue
@@ -46,14 +46,12 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
-    cellConfig: {
-      height: 64,
-    },
   } as VxeTableGridOptions<BpmProcessInstanceApi.Copy>,
 });
 </script>
diff --git a/apps/web-antd/src/views/bpm/task/done/data.ts b/apps/web-antd/src/views/bpm/task/done/data.ts
index 9491148ec..3c5e9f678 100644
--- a/apps/web-antd/src/views/bpm/task/done/data.ts
+++ b/apps/web-antd/src/views/bpm/task/done/data.ts
@@ -5,6 +5,7 @@ import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { getCategorySimpleList } from '#/api/bpm/category';
+import { getSimpleProcessDefinitionList } from '#/api/bpm/definition';
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
@@ -20,12 +21,15 @@ export function useGridFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      fieldName: 'processDefinitionId',
+      fieldName: 'processDefinitionKey',
       label: '所属流程',
-      component: 'Input',
+      component: 'ApiSelect',
       componentProps: {
-        placeholder: '请输入流程定义的编号',
+        placeholder: '请选择流程定义',
         allowClear: true,
+        api: getSimpleProcessDefinitionList,
+        labelField: 'name',
+        valueField: 'key',
       },
     },
     {
@@ -35,7 +39,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入流程分类',
         allowClear: true,
-        api: () => getCategorySimpleList(),
+        api: getCategorySimpleList,
         labelField: 'name',
         valueField: 'code',
       },
@@ -69,7 +73,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'processInstance.name',
       title: '流程',
       minWidth: 200,
-      fixed: 'left',
     },
     {
       field: 'processInstance.summary',
@@ -88,6 +91,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       title: '发起人',
       minWidth: 120,
     },
+    {
+      field: 'processInstance.createTime',
+      title: '发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
     {
       field: 'name',
       title: '当前任务',
diff --git a/apps/web-antd/src/views/bpm/task/done/index.vue b/apps/web-antd/src/views/bpm/task/done/index.vue
index abd6fcbf6..0517fa4a1 100644
--- a/apps/web-antd/src/views/bpm/task/done/index.vue
+++ b/apps/web-antd/src/views/bpm/task/done/index.vue
@@ -6,6 +6,8 @@ import { DocAlert, Page } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
+import { $t } from '#/locales';
+
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getTaskDonePage, withdrawTask } from '#/api/bpm/task';
 import { router } from '#/router';
@@ -27,10 +29,17 @@ function handleHistory(row: BpmTaskApi.TaskManager) {
 
 /** 撤回任务 */
 async function handleWithdraw(row: BpmTaskApi.TaskManager) {
-  await withdrawTask(row.id);
-  message.success('撤回成功');
-  // 刷新表格数据
-  await gridApi.query();
+  const hideLoading = message.loading({
+    content: '正在撤回中...',
+    duration: 0,
+  });
+  try {
+    await withdrawTask(row.id);
+    message.success('撤回成功');
+    await gridApi.query();
+  } finally {
+    hideLoading();
+  }
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -54,14 +63,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
-    cellConfig: {
-      height: 64,
-    },
   } as VxeTableGridOptions<BpmTaskApi.TaskManager>,
 });
 </script>
@@ -88,9 +95,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: '撤回',
               type: 'link',
-              icon: ACTION_ICON.EDIT,
-              color: 'warning',
-              onClick: handleWithdraw.bind(null, row),
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              popConfirm: {
+                title: '确定要撤回该任务吗？',
+                confirm: handleWithdraw.bind(null, row),
+              },
             },
             {
               label: '历史',
diff --git a/apps/web-antd/src/views/bpm/task/manager/data.ts b/apps/web-antd/src/views/bpm/task/manager/data.ts
index c40c6a236..947982b23 100644
--- a/apps/web-antd/src/views/bpm/task/manager/data.ts
+++ b/apps/web-antd/src/views/bpm/task/manager/data.ts
@@ -36,7 +36,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'processInstance.name',
       title: '流程',
       minWidth: 200,
-      fixed: 'left',
     },
     {
       field: 'processInstance.startUser.nickname',
diff --git a/apps/web-antd/src/views/bpm/task/manager/index.vue b/apps/web-antd/src/views/bpm/task/manager/index.vue
index dd47e9dcd..47496e1e7 100644
--- a/apps/web-antd/src/views/bpm/task/manager/index.vue
+++ b/apps/web-antd/src/views/bpm/task/manager/index.vue
@@ -43,14 +43,12 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
-    cellConfig: {
-      height: 64,
-    },
   } as VxeTableGridOptions<BpmTaskApi.TaskManager>,
 });
 </script>
@@ -60,6 +58,7 @@ const [Grid] = useVbenVxeGrid({
     <template #doc>
       <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
     </template>
+
     <Grid table-title="流程任务">
       <template #actions="{ row }">
         <TableAction
diff --git a/apps/web-antd/src/views/bpm/task/todo/data.ts b/apps/web-antd/src/views/bpm/task/todo/data.ts
index 968db6234..0b1efd71c 100644
--- a/apps/web-antd/src/views/bpm/task/todo/data.ts
+++ b/apps/web-antd/src/views/bpm/task/todo/data.ts
@@ -5,6 +5,7 @@ import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { getCategorySimpleList } from '#/api/bpm/category';
+import { getSimpleProcessDefinitionList } from '#/api/bpm/definition';
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
@@ -20,12 +21,15 @@ export function useGridFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      fieldName: 'processDefinitionId',
+      fieldName: 'processDefinitionKey',
       label: '所属流程',
-      component: 'Input',
+      component: 'ApiSelect',
       componentProps: {
-        placeholder: '请输入流程定义的编号',
+        placeholder: '请选择流程定义',
         allowClear: true,
+        api: getSimpleProcessDefinitionList,
+        labelField: 'name',
+        valueField: 'key',
       },
     },
     {
@@ -35,7 +39,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入流程分类',
         allowClear: true,
-        api: () => getCategorySimpleList(),
+        api: getCategorySimpleList,
         labelField: 'name',
         valueField: 'code',
       },
@@ -72,7 +76,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'processInstance.name',
       title: '流程',
       minWidth: 200,
-      fixed: 'left',
     },
     {
       field: 'processInstance.summary',
@@ -91,6 +94,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       title: '发起人',
       minWidth: 120,
     },
+    {
+      field: 'processInstance.createTime',
+      title: '发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
     {
       field: 'name',
       title: '当前任务',
diff --git a/apps/web-antd/src/views/bpm/task/todo/index.vue b/apps/web-antd/src/views/bpm/task/todo/index.vue
index 06fa5bcce..089e6662f 100644
--- a/apps/web-antd/src/views/bpm/task/todo/index.vue
+++ b/apps/web-antd/src/views/bpm/task/todo/index.vue
@@ -14,11 +14,10 @@ defineOptions({ name: 'BpmTodoTask' });
 
 /** 办理任务 */
 function handleAudit(row: BpmTaskApi.Task) {
-  console.warn(row);
   router.push({
     name: 'BpmProcessInstanceDetail',
     query: {
-      id: row.processInstance.id,
+      id: row.processInstance!.id,
       taskId: row.id,
     },
   });
@@ -45,14 +44,12 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
-    cellConfig: {
-      height: 64,
-    },
   } as VxeTableGridOptions<BpmTaskApi.Task>,
 });
 </script>
diff --git a/apps/web-antd/src/views/crm/business/data.ts b/apps/web-antd/src/views/crm/business/data.ts
index 6948cbf31..ab71445ec 100644
--- a/apps/web-antd/src/views/crm/business/data.ts
+++ b/apps/web-antd/src/views/crm/business/data.ts
@@ -40,7 +40,7 @@ export function useFormSchema(): VbenFormSchema[] {
         disabled: (values) => values.id,
       },
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择负责人',
@@ -54,7 +54,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '客户名称',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择客户',
@@ -80,7 +80,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '商机状态组',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getBusinessStatusTypeSimpleList(),
+        api: getBusinessStatusTypeSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择商机状态组',
diff --git a/apps/web-antd/src/views/crm/business/detail/data.ts b/apps/web-antd/src/views/crm/business/detail/data.ts
index 0600d76e5..1cb1c4949 100644
--- a/apps/web-antd/src/views/crm/business/detail/data.ts
+++ b/apps/web-antd/src/views/crm/business/detail/data.ts
@@ -21,7 +21,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'totalPrice',
       label: '商机金额（元）',
-      content: (data) => erpPriceInputFormatter(data.totalPrice),
+      render: (val) => erpPriceInputFormatter(val),
     },
     {
       field: 'statusTypeName',
@@ -34,7 +34,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data) => formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
@@ -53,17 +53,17 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'totalPrice',
       label: '商机金额（元）',
-      content: (data) => erpPriceInputFormatter(data.totalPrice),
+      render: (val) => erpPriceInputFormatter(val),
     },
     {
       field: 'dealTime',
       label: '预计成交日期',
-      content: (data) => formatDateTime(data?.dealTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'contactNextTime',
       label: '下次联系时间',
-      content: (data) => formatDateTime(data?.contactNextTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'statusTypeName',
diff --git a/apps/web-antd/src/views/crm/business/detail/index.vue b/apps/web-antd/src/views/crm/business/detail/index.vue
index 81c0d66ca..77621ad0d 100644
--- a/apps/web-antd/src/views/crm/business/detail/index.vue
+++ b/apps/web-antd/src/views/crm/business/detail/index.vue
@@ -23,9 +23,9 @@ import { PermissionList, TransferForm } from '#/views/crm/permission';
 import { ProductDetailsList } from '#/views/crm/product/components';
 
 import Form from '../modules/form.vue';
-import UpStatusForm from './modules/status-form.vue';
 import { useDetailSchema } from './data';
 import BusinessDetailsInfo from './modules/info.vue';
+import UpStatusForm from './modules/status-form.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -38,11 +38,9 @@ const logList = ref<SystemOperateLogApi.OperateLog[]>([]);
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/crm/business/detail/modules/info.vue b/apps/web-antd/src/views/crm/business/detail/modules/info.vue
index d83a78a82..2bbfe8af7 100644
--- a/apps/web-antd/src/views/crm/business/detail/modules/info.vue
+++ b/apps/web-antd/src/views/crm/business/detail/modules/info.vue
@@ -12,31 +12,27 @@ defineProps<{
   business: CrmBusinessApi.Business; // 商机信息
 }>();
 
-const [BaseDescriptions] = useDescription({
-  componentProps: {
-    title: '基本信息',
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+const [BaseDescription] = useDescription({
+  title: '基本信息',
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailBaseSchema(),
 });
 
-const [SystemDescriptions] = useDescription({
-  componentProps: {
-    title: '系统信息',
-    bordered: false,
-    column: 3,
-    class: 'mx-4',
-  },
+const [SystemDescription] = useDescription({
+  title: '系统信息',
+  bordered: false,
+  column: 3,
+  class: 'mx-4',
   schema: useFollowUpDetailSchema(),
 });
 </script>
 
 <template>
   <div class="p-4">
-    <BaseDescriptions :data="business" />
+    <BaseDescription :data="business" />
     <Divider />
-    <SystemDescriptions :data="business" />
+    <SystemDescription :data="business" />
   </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/clue/data.ts b/apps/web-antd/src/views/crm/clue/data.ts
index 5983fde7f..b19102343 100644
--- a/apps/web-antd/src/views/crm/clue/data.ts
+++ b/apps/web-antd/src/views/crm/clue/data.ts
@@ -53,7 +53,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '负责人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         allowClear: true,
@@ -121,7 +121,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '地址',
       component: 'ApiTreeSelect',
       componentProps: {
-        api: () => getAreaTree(),
+        api: getAreaTree,
         fieldNames: { label: 'name', value: 'id', children: 'children' },
         placeholder: '请选择地址',
       },
diff --git a/apps/web-antd/src/views/crm/clue/detail/data.ts b/apps/web-antd/src/views/crm/clue/detail/data.ts
index 73e905a22..9536eb79b 100644
--- a/apps/web-antd/src/views/crm/clue/detail/data.ts
+++ b/apps/web-antd/src/views/crm/clue/detail/data.ts
@@ -13,10 +13,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'source',
       label: '线索来源',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.CRM_CUSTOMER_SOURCE,
-          value: data?.source,
+          value: val,
         }),
     },
     {
@@ -30,7 +30,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data) => formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
@@ -45,10 +45,10 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'source',
       label: '客户来源',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.CRM_CUSTOMER_SOURCE,
-          value: data?.source,
+          value: val,
         }),
     },
     {
@@ -66,8 +66,8 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'areaName',
       label: '地址',
-      content: (data) => {
-        const areaName = data.areaName ?? '';
+      render: (val, data) => {
+        const areaName = val ?? '';
         const detailAddress = data?.detailAddress ?? '';
         return [areaName, detailAddress].filter((item) => !!item).join(' ');
       },
@@ -83,25 +83,25 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'industryId',
       label: '客户行业',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY,
-          value: data?.industryId,
+          value: val,
         }),
     },
     {
       field: 'level',
       label: '客户级别',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.CRM_CUSTOMER_LEVEL,
-          value: data?.level,
+          value: val,
         }),
     },
     {
       field: 'contactNextTime',
       label: '下次联系时间',
-      content: (data) => formatDateTime(data?.contactNextTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'remark',
diff --git a/apps/web-antd/src/views/crm/clue/detail/index.vue b/apps/web-antd/src/views/crm/clue/detail/index.vue
index c8d3683af..788db526f 100644
--- a/apps/web-antd/src/views/crm/clue/detail/index.vue
+++ b/apps/web-antd/src/views/crm/clue/detail/index.vue
@@ -34,11 +34,9 @@ const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/crm/clue/detail/modules/info.vue b/apps/web-antd/src/views/crm/clue/detail/modules/info.vue
index a4fe4701d..c36d44bc9 100644
--- a/apps/web-antd/src/views/crm/clue/detail/modules/info.vue
+++ b/apps/web-antd/src/views/crm/clue/detail/modules/info.vue
@@ -13,22 +13,18 @@ defineProps<{
 }>();
 
 const [BaseDescriptions] = useDescription({
-  componentProps: {
-    title: '基本信息',
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  title: '基本信息',
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailBaseSchema(),
 });
 
 const [SystemDescriptions] = useDescription({
-  componentProps: {
-    title: '系统信息',
-    bordered: false,
-    column: 3,
-    class: 'mx-4',
-  },
+  title: '系统信息',
+  bordered: false,
+  column: 3,
+  class: 'mx-4',
   schema: useFollowUpDetailSchema(),
 });
 </script>
diff --git a/apps/web-antd/src/views/crm/contact/data.ts b/apps/web-antd/src/views/crm/contact/data.ts
index 09336d478..61a68c44c 100644
--- a/apps/web-antd/src/views/crm/contact/data.ts
+++ b/apps/web-antd/src/views/crm/contact/data.ts
@@ -41,7 +41,7 @@ export function useFormSchema(): VbenFormSchema[] {
         disabled: (values) => values.id,
       },
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择负责人',
@@ -54,7 +54,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       rules: 'required',
       componentProps: {
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择客户',
@@ -134,7 +134,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '直属上级',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleContactList(),
+        api: getSimpleContactList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择直属上级',
@@ -145,7 +145,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '地址',
       component: 'ApiTreeSelect',
       componentProps: {
-        api: () => getAreaTree(),
+        api: getAreaTree,
         fieldNames: { label: 'name', value: 'id', children: 'children' },
         placeholder: '请选择地址',
       },
@@ -188,7 +188,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '客户',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择客户',
diff --git a/apps/web-antd/src/views/crm/contact/detail/data.ts b/apps/web-antd/src/views/crm/contact/detail/data.ts
index d510ba4d9..3f1019325 100644
--- a/apps/web-antd/src/views/crm/contact/detail/data.ts
+++ b/apps/web-antd/src/views/crm/contact/detail/data.ts
@@ -25,7 +25,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data) => formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
@@ -64,10 +64,10 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'areaName',
       label: '地址',
-      content: (data) => {
-        const areaName = data?.areaName ?? '';
+      render: (val, data) => {
+        const areaName = val ?? '';
         const detailAddress = data?.detailAddress ?? '';
-        return [areaName, detailAddress].filter(Boolean).join(' ');
+        return [areaName, detailAddress].filter((item) => !!item).join(' ');
       },
     },
     {
@@ -81,22 +81,22 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'master',
       label: '关键决策人',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.INFRA_BOOLEAN_STRING,
-          value: data?.master,
+          value: val,
         }),
     },
     {
       field: 'sex',
       label: '性别',
-      content: (data) =>
-        h(DictTag, { type: DICT_TYPE.SYSTEM_USER_SEX, value: data?.sex }),
+      render: (val) =>
+        h(DictTag, { type: DICT_TYPE.SYSTEM_USER_SEX, value: val }),
     },
     {
       field: 'contactNextTime',
       label: '下次联系时间',
-      content: (data) => formatDateTime(data?.contactNextTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'remark',
diff --git a/apps/web-antd/src/views/crm/contact/detail/index.vue b/apps/web-antd/src/views/crm/contact/detail/index.vue
index 5d4921248..1862598b9 100644
--- a/apps/web-antd/src/views/crm/contact/detail/index.vue
+++ b/apps/web-antd/src/views/crm/contact/detail/index.vue
@@ -36,11 +36,9 @@ const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/crm/contact/detail/modules/info.vue b/apps/web-antd/src/views/crm/contact/detail/modules/info.vue
index d0622af64..123cf2c71 100644
--- a/apps/web-antd/src/views/crm/contact/detail/modules/info.vue
+++ b/apps/web-antd/src/views/crm/contact/detail/modules/info.vue
@@ -13,22 +13,18 @@ defineProps<{
 }>();
 
 const [BaseDescriptions] = useDescription({
-  componentProps: {
-    title: '基本信息',
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  title: '基本信息',
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailBaseSchema(),
 });
 
 const [SystemDescriptions] = useDescription({
-  componentProps: {
-    title: '系统信息',
-    bordered: false,
-    column: 3,
-    class: 'mx-4',
-  },
+  title: '系统信息',
+  bordered: false,
+  column: 3,
+  class: 'mx-4',
   schema: useFollowUpDetailSchema(),
 });
 </script>
diff --git a/apps/web-antd/src/views/crm/contract/data.ts b/apps/web-antd/src/views/crm/contract/data.ts
index 36b0cecae..75900690d 100644
--- a/apps/web-antd/src/views/crm/contract/data.ts
+++ b/apps/web-antd/src/views/crm/contract/data.ts
@@ -46,7 +46,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '负责人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -63,7 +63,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       rules: 'required',
       componentProps: {
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择客户',
@@ -137,7 +137,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '公司签约人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -263,7 +263,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '客户',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择客户',
diff --git a/apps/web-antd/src/views/crm/contract/detail/data.ts b/apps/web-antd/src/views/crm/contract/detail/data.ts
index 2a00b1509..bfe7b5606 100644
--- a/apps/web-antd/src/views/crm/contract/detail/data.ts
+++ b/apps/web-antd/src/views/crm/contract/detail/data.ts
@@ -17,18 +17,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'totalPrice',
       label: '合同金额（元）',
-      content: (data) => erpPriceInputFormatter(data?.totalPrice) as string,
+      render: (val) => erpPriceInputFormatter(val) as string,
     },
     {
       field: 'orderDate',
       label: '下单时间',
-      content: (data) => formatDateTime(data?.orderDate) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'totalReceivablePrice',
       label: '回款金额（元）',
-      content: (data) =>
-        erpPriceInputFormatter(data?.totalReceivablePrice) as string,
+      render: (val) => erpPriceInputFormatter(val) as string,
     },
     {
       field: 'ownerUserName',
@@ -59,22 +58,22 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'totalPrice',
       label: '合同金额（元）',
-      content: (data) => erpPriceInputFormatter(data?.totalPrice) as string,
+      render: (val) => erpPriceInputFormatter(val) as string,
     },
     {
       field: 'orderDate',
       label: '下单时间',
-      content: (data) => formatDateTime(data?.orderDate) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'startTime',
       label: '合同开始时间',
-      content: (data) => formatDateTime(data?.startTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'endTime',
       label: '合同结束时间',
-      content: (data) => formatDateTime(data?.endTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'signContactName',
@@ -91,10 +90,10 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'auditStatus',
       label: '合同状态',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.CRM_AUDIT_STATUS,
-          value: data?.auditStatus,
+          value: val,
         }),
     },
   ];
diff --git a/apps/web-antd/src/views/crm/contract/detail/index.vue b/apps/web-antd/src/views/crm/contract/detail/index.vue
index fe263f052..d1fced792 100644
--- a/apps/web-antd/src/views/crm/contract/detail/index.vue
+++ b/apps/web-antd/src/views/crm/contract/detail/index.vue
@@ -40,11 +40,9 @@ const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/crm/contract/detail/modules/info.vue b/apps/web-antd/src/views/crm/contract/detail/modules/info.vue
index ae6b637ff..f37600412 100644
--- a/apps/web-antd/src/views/crm/contract/detail/modules/info.vue
+++ b/apps/web-antd/src/views/crm/contract/detail/modules/info.vue
@@ -13,22 +13,18 @@ defineProps<{
 }>();
 
 const [BaseDescriptions] = useDescription({
-  componentProps: {
-    title: '基本信息',
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  title: '基本信息',
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailBaseSchema(),
 });
 
 const [SystemDescriptions] = useDescription({
-  componentProps: {
-    title: '系统信息',
-    bordered: false,
-    column: 3,
-    class: 'mx-4',
-  },
+  title: '系统信息',
+  bordered: false,
+  column: 3,
+  class: 'mx-4',
   schema: useFollowUpDetailSchema(),
 });
 </script>
diff --git a/apps/web-antd/src/views/crm/customer/data.ts b/apps/web-antd/src/views/crm/customer/data.ts
index aa502383d..baabb5685 100644
--- a/apps/web-antd/src/views/crm/customer/data.ts
+++ b/apps/web-antd/src/views/crm/customer/data.ts
@@ -60,7 +60,7 @@ export function useFormSchema(): VbenFormSchema[] {
         disabled: (values) => values.id,
       },
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择负责人',
@@ -130,7 +130,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '地址',
       component: 'ApiTreeSelect',
       componentProps: {
-        api: () => getAreaTree(),
+        api: getAreaTree,
         fieldNames: { label: 'name', value: 'id', children: 'children' },
         placeholder: '请选择地址',
         allowClear: true,
@@ -220,7 +220,7 @@ export function useImportFormSchema(): VbenFormSchema[] {
       label: '负责人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择负责人',
diff --git a/apps/web-antd/src/views/crm/customer/detail/data.ts b/apps/web-antd/src/views/crm/customer/detail/data.ts
index 60e6a6bf8..9d55b4077 100644
--- a/apps/web-antd/src/views/crm/customer/detail/data.ts
+++ b/apps/web-antd/src/views/crm/customer/detail/data.ts
@@ -27,7 +27,7 @@ export function useDistributeFormSchema(): VbenFormSchema[] {
       label: '负责人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -43,13 +43,13 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'level',
       label: '客户级别',
-      content: (data) =>
-        h(DictTag, { type: DICT_TYPE.CRM_CUSTOMER_LEVEL, value: data?.level }),
+      render: (val) =>
+        h(DictTag, { type: DICT_TYPE.CRM_CUSTOMER_LEVEL, value: val }),
     },
     {
       field: 'dealStatus',
       label: '成交状态',
-      content: (data) => (data.dealStatus ? '已成交' : '未成交'),
+      render: (val) => (val ? '已成交' : '未成交'),
     },
     {
       field: 'ownerUserName',
@@ -58,7 +58,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data) => formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
@@ -73,10 +73,10 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'source',
       label: '客户来源',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.CRM_CUSTOMER_SOURCE,
-          value: data?.source,
+          value: val,
         }),
     },
     {
@@ -94,8 +94,8 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'areaName',
       label: '地址',
-      content: (data) => {
-        const areaName = data?.areaName ?? '';
+      render: (val, data) => {
+        const areaName = val ?? '';
         const detailAddress = data?.detailAddress ?? '';
         return [areaName, detailAddress].filter(Boolean).join(' ');
       },
@@ -111,16 +111,16 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'industryId',
       label: '客户行业',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY,
-          value: data?.industryId,
+          value: val,
         }),
     },
     {
       field: 'contactNextTime',
       label: '下次联系时间',
-      content: (data) => formatDateTime(data?.contactNextTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'remark',
diff --git a/apps/web-antd/src/views/crm/customer/detail/index.vue b/apps/web-antd/src/views/crm/customer/detail/index.vue
index ae0d52bcc..df959a9a0 100644
--- a/apps/web-antd/src/views/crm/customer/detail/index.vue
+++ b/apps/web-antd/src/views/crm/customer/detail/index.vue
@@ -47,11 +47,9 @@ const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/crm/customer/detail/modules/info.vue b/apps/web-antd/src/views/crm/customer/detail/modules/info.vue
index fb832274a..4e5c1e520 100644
--- a/apps/web-antd/src/views/crm/customer/detail/modules/info.vue
+++ b/apps/web-antd/src/views/crm/customer/detail/modules/info.vue
@@ -13,22 +13,18 @@ defineProps<{
 }>();
 
 const [BaseDescriptions] = useDescription({
-  componentProps: {
-    title: '基本信息',
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  title: '基本信息',
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailBaseSchema(),
 });
 
 const [SystemDescriptions] = useDescription({
-  componentProps: {
-    title: '系统信息',
-    bordered: false,
-    column: 3,
-    class: 'mx-4',
-  },
+  title: '系统信息',
+  bordered: false,
+  column: 3,
+  class: 'mx-4',
   schema: useFollowUpDetailSchema(),
 });
 </script>
diff --git a/apps/web-antd/src/views/crm/customer/limitConfig/data.ts b/apps/web-antd/src/views/crm/customer/limitConfig/data.ts
index fb079ae8a..914116b16 100644
--- a/apps/web-antd/src/views/crm/customer/limitConfig/data.ts
+++ b/apps/web-antd/src/views/crm/customer/limitConfig/data.ts
@@ -34,7 +34,7 @@ export function useFormSchema(confType: LimitConfType): VbenFormSchema[] {
       label: '规则适用人群',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         mode: 'multiple',
diff --git a/apps/web-antd/src/views/crm/followup/data.ts b/apps/web-antd/src/views/crm/followup/data.ts
index c19b02f32..0c275ae0e 100644
--- a/apps/web-antd/src/views/crm/followup/data.ts
+++ b/apps/web-antd/src/views/crm/followup/data.ts
@@ -173,7 +173,7 @@ export function useFollowUpDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'contactLastTime',
       label: '最后跟进时间',
-      content: (data) => formatDateTime(data?.contactLastTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'creatorName',
@@ -182,12 +182,12 @@ export function useFollowUpDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data) => formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'updateTime',
       label: '更新时间',
-      content: (data) => formatDateTime(data?.updateTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/permission/modules/data.ts b/apps/web-antd/src/views/crm/permission/modules/data.ts
index f2cb5a1f4..fdbe9bcbd 100644
--- a/apps/web-antd/src/views/crm/permission/modules/data.ts
+++ b/apps/web-antd/src/views/crm/permission/modules/data.ts
@@ -23,7 +23,7 @@ export function useTransferFormSchema(): VbenFormSchema[] {
       label: '选择新负责人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -116,7 +116,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '选择人员',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/crm/product/data.ts b/apps/web-antd/src/views/crm/product/data.ts
index 32dc02b9d..858b16908 100644
--- a/apps/web-antd/src/views/crm/product/data.ts
+++ b/apps/web-antd/src/views/crm/product/data.ts
@@ -42,7 +42,7 @@ export function useFormSchema(): VbenFormSchema[] {
         disabled: (values) => values.id,
       },
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择负责人',
diff --git a/apps/web-antd/src/views/crm/product/detail/data.ts b/apps/web-antd/src/views/crm/product/detail/data.ts
index 1b783fc6f..0adf792cb 100644
--- a/apps/web-antd/src/views/crm/product/detail/data.ts
+++ b/apps/web-antd/src/views/crm/product/detail/data.ts
@@ -17,13 +17,13 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'unit',
       label: '产品单位',
-      content: (data) =>
-        h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_UNIT, value: data?.unit }),
+      render: (val) =>
+        h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_UNIT, value: val }),
     },
     {
       field: 'price',
       label: '产品价格（元）',
-      content: (data) => erpPriceInputFormatter(data.price),
+      render: (val) => erpPriceInputFormatter(val),
     },
     {
       field: 'no',
@@ -46,7 +46,7 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'price',
       label: '价格（元）',
-      content: (data) => erpPriceInputFormatter(data.price),
+      render: (val) => erpPriceInputFormatter(val),
     },
     {
       field: 'description',
@@ -59,14 +59,14 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '是否上下架',
-      content: (data) =>
-        h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_STATUS, value: data?.status }),
+      render: (val) =>
+        h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_STATUS, value: val }),
     },
     {
       field: 'unit',
       label: '产品单位',
-      content: (data) =>
-        h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_UNIT, value: data?.unit }),
+      render: (val) =>
+        h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_UNIT, value: val }),
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/product/detail/index.vue b/apps/web-antd/src/views/crm/product/detail/index.vue
index 1fade4a19..1a62ff8a3 100644
--- a/apps/web-antd/src/views/crm/product/detail/index.vue
+++ b/apps/web-antd/src/views/crm/product/detail/index.vue
@@ -29,11 +29,9 @@ const product = ref<CrmProductApi.Product>({} as CrmProductApi.Product); // 产
 const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/crm/product/detail/modules/info.vue b/apps/web-antd/src/views/crm/product/detail/modules/info.vue
index 320f650b3..9fce6976a 100644
--- a/apps/web-antd/src/views/crm/product/detail/modules/info.vue
+++ b/apps/web-antd/src/views/crm/product/detail/modules/info.vue
@@ -10,12 +10,10 @@ defineProps<{
 }>();
 
 const [ProductDescriptions] = useDescription({
-  componentProps: {
-    title: '基本信息',
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  title: '基本信息',
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailBaseSchema(),
 });
 </script>
diff --git a/apps/web-antd/src/views/crm/receivable/data.ts b/apps/web-antd/src/views/crm/receivable/data.ts
index 2dfc958a5..f7f9c95d2 100644
--- a/apps/web-antd/src/views/crm/receivable/data.ts
+++ b/apps/web-antd/src/views/crm/receivable/data.ts
@@ -44,7 +44,7 @@ export function useFormSchema(): VbenFormSchema[] {
         disabled: (values) => values.id,
       },
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择负责人',
@@ -58,7 +58,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       rules: 'required',
       componentProps: {
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择客户',
@@ -188,7 +188,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '客户',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择客户',
diff --git a/apps/web-antd/src/views/crm/receivable/detail/data.ts b/apps/web-antd/src/views/crm/receivable/detail/data.ts
index 8c79dd54c..dcceec53a 100644
--- a/apps/web-antd/src/views/crm/receivable/detail/data.ts
+++ b/apps/web-antd/src/views/crm/receivable/detail/data.ts
@@ -17,18 +17,18 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'totalPrice',
       label: '合同金额（元）',
-      content: (data) =>
-        erpPriceInputFormatter(data?.contract?.totalPrice ?? data.totalPrice),
+      render: (val, data) =>
+        erpPriceInputFormatter(val ?? data?.contract?.totalPrice ?? 0),
     },
     {
       field: 'returnTime',
       label: '回款日期',
-      content: (data) => formatDateTime(data?.returnTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'price',
       label: '回款金额（元）',
-      content: (data) => erpPriceInputFormatter(data.price),
+      render: (val) => erpPriceInputFormatter(val),
     },
     {
       field: 'ownerUserName',
@@ -51,25 +51,26 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'contract',
       label: '合同编号',
-      content: (data) => data?.contract?.no,
+      render: (val, data) =>
+        val && data?.contract?.no ? data?.contract?.no : '',
     },
     {
       field: 'returnTime',
       label: '回款日期',
-      content: (data) => formatDateTime(data?.returnTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'price',
       label: '回款金额',
-      content: (data) => erpPriceInputFormatter(data.price),
+      render: (val) => erpPriceInputFormatter(val),
     },
     {
       field: 'returnType',
       label: '回款方式',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE,
-          value: data?.returnType,
+          value: val,
         }),
     },
     {
@@ -93,12 +94,12 @@ export function useDetailSystemSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data) => formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'updateTime',
       label: '更新时间',
-      content: (data) => formatDateTime(data?.updateTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/receivable/detail/index.vue b/apps/web-antd/src/views/crm/receivable/detail/index.vue
index f3ce5abb4..725e803a6 100644
--- a/apps/web-antd/src/views/crm/receivable/detail/index.vue
+++ b/apps/web-antd/src/views/crm/receivable/detail/index.vue
@@ -38,11 +38,9 @@ const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/crm/receivable/detail/modules/info.vue b/apps/web-antd/src/views/crm/receivable/detail/modules/info.vue
index dfad21c8d..1dea873ac 100644
--- a/apps/web-antd/src/views/crm/receivable/detail/modules/info.vue
+++ b/apps/web-antd/src/views/crm/receivable/detail/modules/info.vue
@@ -12,22 +12,18 @@ defineProps<{
 }>();
 
 const [BaseDescriptions] = useDescription({
-  componentProps: {
-    title: '基本信息',
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  title: '基本信息',
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailBaseSchema(),
 });
 
 const [SystemDescriptions] = useDescription({
-  componentProps: {
-    title: '系统信息',
-    bordered: false,
-    column: 3,
-    class: 'mx-4',
-  },
+  title: '系统信息',
+  bordered: false,
+  column: 3,
+  class: 'mx-4',
   schema: useDetailSystemSchema(),
 });
 </script>
diff --git a/apps/web-antd/src/views/crm/receivable/plan/data.ts b/apps/web-antd/src/views/crm/receivable/plan/data.ts
index a004a9b48..b8e848493 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/data.ts
+++ b/apps/web-antd/src/views/crm/receivable/plan/data.ts
@@ -28,7 +28,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '负责人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -45,7 +45,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       rules: 'required',
       componentProps: {
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择客户',
@@ -153,7 +153,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '客户',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择客户',
diff --git a/apps/web-antd/src/views/crm/receivable/plan/detail/data.ts b/apps/web-antd/src/views/crm/receivable/plan/detail/data.ts
index 233765322..5059f02ab 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/detail/data.ts
+++ b/apps/web-antd/src/views/crm/receivable/plan/detail/data.ts
@@ -21,17 +21,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'price',
       label: '计划回款金额',
-      content: (data) => erpPriceInputFormatter(data.price),
+      render: (val) => erpPriceInputFormatter(val),
     },
     {
       field: 'returnTime',
       label: '计划回款日期',
-      content: (data) => formatDateTime(data?.returnTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'receivable',
       label: '实际回款金额',
-      content: (data) => erpPriceInputFormatter(data?.receivable?.price ?? 0),
+      render: (val) => erpPriceInputFormatter(val?.price ?? 0),
     },
   ];
 }
@@ -54,20 +54,20 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'returnTime',
       label: '计划回款日期',
-      content: (data) => formatDateTime(data?.returnTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'price',
       label: '计划回款金额',
-      content: (data) => erpPriceInputFormatter(data.price),
+      render: (val) => erpPriceInputFormatter(val),
     },
     {
       field: 'returnType',
       label: '计划回款方式',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE,
-          value: data?.returnType,
+          value: val,
         }),
     },
     {
@@ -77,20 +77,20 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'receivable',
       label: '实际回款金额',
-      content: (data) => erpPriceInputFormatter(data?.receivable?.price ?? 0),
+      render: (val) => erpPriceInputFormatter(val ?? 0),
     },
     {
       field: 'receivableRemain',
       label: '未回款金额',
-      content: (data) => {
+      render: (val, data) => {
         const paid = data?.receivable?.price ?? 0;
-        return erpPriceInputFormatter(Math.max(data.price - paid, 0));
+        return erpPriceInputFormatter(Math.max(val - paid, 0));
       },
     },
     {
       field: 'receivable.returnTime',
       label: '实际回款日期',
-      content: (data) => formatDateTime(data?.receivable?.returnTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'remark',
@@ -113,12 +113,12 @@ export function useDetailSystemSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data) => formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'updateTime',
       label: '更新时间',
-      content: (data) => formatDateTime(data?.updateTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/receivable/plan/detail/index.vue b/apps/web-antd/src/views/crm/receivable/plan/detail/index.vue
index ba03d88bb..04372f167 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/detail/index.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/detail/index.vue
@@ -39,11 +39,9 @@ const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队
 const validateWrite = () => permissionListRef.value?.validateWrite;
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/crm/receivable/plan/detail/modules/info.vue b/apps/web-antd/src/views/crm/receivable/plan/detail/modules/info.vue
index c7c6c642c..2986ec719 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/detail/modules/info.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/detail/modules/info.vue
@@ -12,22 +12,18 @@ defineProps<{
 }>();
 
 const [BaseDescriptions] = useDescription({
-  componentProps: {
-    title: '基本信息',
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  title: '基本信息',
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailBaseSchema(),
 });
 
 const [SystemDescriptions] = useDescription({
-  componentProps: {
-    title: '系统信息',
-    bordered: false,
-    column: 3,
-    class: 'mx-4',
-  },
+  title: '系统信息',
+  bordered: false,
+  column: 3,
+  class: 'mx-4',
   schema: useDetailSystemSchema(),
 });
 </script>
diff --git a/apps/web-antd/src/views/crm/statistics/customer/data.ts b/apps/web-antd/src/views/crm/statistics/customer/data.ts
index 43cc36f63..ec37c668a 100644
--- a/apps/web-antd/src/views/crm/statistics/customer/data.ts
+++ b/apps/web-antd/src/views/crm/statistics/customer/data.ts
@@ -99,7 +99,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '员工',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择员工',
diff --git a/apps/web-antd/src/views/crm/statistics/funnel/data.ts b/apps/web-antd/src/views/crm/statistics/funnel/data.ts
index b704d1e71..87668577d 100644
--- a/apps/web-antd/src/views/crm/statistics/funnel/data.ts
+++ b/apps/web-antd/src/views/crm/statistics/funnel/data.ts
@@ -73,7 +73,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '员工',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         allowClear: true,
         labelField: 'nickname',
         valueField: 'id',
diff --git a/apps/web-antd/src/views/crm/statistics/performance/data.ts b/apps/web-antd/src/views/crm/statistics/performance/data.ts
index 964f417ed..e56c7ebf7 100644
--- a/apps/web-antd/src/views/crm/statistics/performance/data.ts
+++ b/apps/web-antd/src/views/crm/statistics/performance/data.ts
@@ -64,7 +64,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '员工',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择员工',
diff --git a/apps/web-antd/src/views/crm/statistics/portrait/data.ts b/apps/web-antd/src/views/crm/statistics/portrait/data.ts
index 3c2cc7c62..8eeff969b 100644
--- a/apps/web-antd/src/views/crm/statistics/portrait/data.ts
+++ b/apps/web-antd/src/views/crm/statistics/portrait/data.ts
@@ -68,7 +68,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '员工',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择员工',
diff --git a/apps/web-antd/src/views/erp/finance/payment/data.ts b/apps/web-antd/src/views/erp/finance/payment/data.ts
index 9cf6dfc34..804490eb7 100644
--- a/apps/web-antd/src/views/erp/finance/payment/data.ts
+++ b/apps/web-antd/src/views/erp/finance/payment/data.ts
@@ -52,7 +52,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择供应商',
         allowClear: true,
         showSearch: true,
-        api: () => getSupplierSimpleList(),
+        api: getSupplierSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -66,7 +66,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择财务人员',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -119,7 +119,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择付款账户',
         allowClear: true,
         showSearch: true,
-        api: () => getAccountSimpleList(),
+        api: getAccountSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -241,7 +241,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择供应商',
         allowClear: true,
         showSearch: true,
-        api: () => getSupplierSimpleList(),
+        api: getSupplierSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -254,7 +254,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择创建人',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -267,7 +267,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择财务人员',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -280,7 +280,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择付款账户',
         allowClear: true,
         showSearch: true,
-        api: () => getAccountSimpleList(),
+        api: getAccountSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/finance/receipt/data.ts b/apps/web-antd/src/views/erp/finance/receipt/data.ts
index 85fc55c63..6c860a5db 100644
--- a/apps/web-antd/src/views/erp/finance/receipt/data.ts
+++ b/apps/web-antd/src/views/erp/finance/receipt/data.ts
@@ -52,7 +52,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择客户',
         allowClear: true,
         showSearch: true,
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -66,7 +66,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择财务人员',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -119,7 +119,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择收款账户',
         allowClear: true,
         showSearch: true,
-        api: () => getAccountSimpleList(),
+        api: getAccountSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -241,7 +241,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择客户',
         allowClear: true,
         showSearch: true,
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -254,7 +254,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择创建人',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -267,7 +267,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择财务人员',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -280,7 +280,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择收款账户',
         allowClear: true,
         showSearch: true,
-        api: () => getAccountSimpleList(),
+        api: getAccountSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/product/product/data.ts b/apps/web-antd/src/views/erp/product/product/data.ts
index e387f9908..23664dd5e 100644
--- a/apps/web-antd/src/views/erp/product/product/data.ts
+++ b/apps/web-antd/src/views/erp/product/product/data.ts
@@ -61,7 +61,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '单位',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getProductUnitSimpleList(),
+        api: getProductUnitSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择单位',
diff --git a/apps/web-antd/src/views/erp/purchase/in/data.ts b/apps/web-antd/src/views/erp/purchase/in/data.ts
index 3853258cf..9afdb4f39 100644
--- a/apps/web-antd/src/views/erp/purchase/in/data.ts
+++ b/apps/web-antd/src/views/erp/purchase/in/data.ts
@@ -66,7 +66,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择供应商',
         allowClear: true,
         showSearch: true,
-        api: () => getSupplierSimpleList(),
+        api: getSupplierSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -174,7 +174,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择结算账户',
         allowClear: true,
         showSearch: true,
-        api: () => getAccountSimpleList(),
+        api: getAccountSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -319,7 +319,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -341,7 +341,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择供应商',
         allowClear: true,
         showSearch: true,
-        api: () => getSupplierSimpleList(),
+        api: getSupplierSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -354,7 +354,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择仓库',
         allowClear: true,
         showSearch: true,
-        api: () => getWarehouseSimpleList(),
+        api: getWarehouseSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -367,7 +367,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择创建人',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -389,7 +389,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择结算账户',
         allowClear: true,
         showSearch: true,
-        api: () => getAccountSimpleList(),
+        api: getAccountSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -530,7 +530,7 @@ export function useOrderGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/purchase/order/data.ts b/apps/web-antd/src/views/erp/purchase/order/data.ts
index f6d3760e7..254d41e87 100644
--- a/apps/web-antd/src/views/erp/purchase/order/data.ts
+++ b/apps/web-antd/src/views/erp/purchase/order/data.ts
@@ -52,7 +52,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择供应商',
         allowClear: true,
         showSearch: true,
-        api: () => getSupplierSimpleList(),
+        api: getSupplierSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -140,7 +140,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择结算账户',
         allowClear: true,
         showSearch: true,
-        api: () => getAccountSimpleList(),
+        api: getAccountSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -261,7 +261,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -283,7 +283,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择供应商',
         allowClear: true,
         showSearch: true,
-        api: () => getSupplierSimpleList(),
+        api: getSupplierSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -296,7 +296,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择创建人',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/purchase/return/data.ts b/apps/web-antd/src/views/erp/purchase/return/data.ts
index 88ec806df..61cd082f0 100644
--- a/apps/web-antd/src/views/erp/purchase/return/data.ts
+++ b/apps/web-antd/src/views/erp/purchase/return/data.ts
@@ -66,7 +66,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择供应商',
         allowClear: true,
         showSearch: true,
-        api: () => getSupplierSimpleList(),
+        api: getSupplierSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -173,7 +173,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择结算账户',
         allowClear: true,
         showSearch: true,
-        api: () => getAccountSimpleList(),
+        api: getAccountSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -319,7 +319,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -341,7 +341,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择供应商',
         allowClear: true,
         showSearch: true,
-        api: () => getSupplierSimpleList(),
+        api: getSupplierSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -354,7 +354,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择仓库',
         allowClear: true,
         showSearch: true,
-        api: () => getWarehouseSimpleList(),
+        api: getWarehouseSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -367,7 +367,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择创建人',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -516,7 +516,7 @@ export function useOrderGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/sale/order/data.ts b/apps/web-antd/src/views/erp/sale/order/data.ts
index f86880c1a..03f0686a1 100644
--- a/apps/web-antd/src/views/erp/sale/order/data.ts
+++ b/apps/web-antd/src/views/erp/sale/order/data.ts
@@ -52,7 +52,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择客户',
         allowClear: true,
         showSearch: true,
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -66,7 +66,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择销售人员',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -153,7 +153,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择结算账户',
         allowClear: true,
         showSearch: true,
-        api: () => getAccountSimpleList(),
+        api: getAccountSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -275,7 +275,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -297,7 +297,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择客户',
         allowClear: true,
         showSearch: true,
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -310,7 +310,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择创建人',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/sale/out/data.ts b/apps/web-antd/src/views/erp/sale/out/data.ts
index 3d095856c..54e0f56d0 100644
--- a/apps/web-antd/src/views/erp/sale/out/data.ts
+++ b/apps/web-antd/src/views/erp/sale/out/data.ts
@@ -544,7 +544,7 @@ export function useOrderGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/sale/return/data.ts b/apps/web-antd/src/views/erp/sale/return/data.ts
index 00501ce73..47540944f 100644
--- a/apps/web-antd/src/views/erp/sale/return/data.ts
+++ b/apps/web-antd/src/views/erp/sale/return/data.ts
@@ -66,7 +66,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择客户',
         allowClear: true,
         showSearch: true,
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -80,7 +80,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择销售人员',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -187,7 +187,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         disabled: true,
         allowClear: true,
         showSearch: true,
-        api: () => getAccountSimpleList(),
+        api: getAccountSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -333,7 +333,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -355,7 +355,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择客户',
         allowClear: true,
         showSearch: true,
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -368,7 +368,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择仓库',
         allowClear: true,
         showSearch: true,
-        api: () => getWarehouseSimpleList(),
+        api: getWarehouseSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -381,7 +381,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择创建人',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -531,7 +531,7 @@ export function useOrderGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/stock/check/data.ts b/apps/web-antd/src/views/erp/stock/check/data.ts
index 33176d8b2..91a101b5e 100644
--- a/apps/web-antd/src/views/erp/stock/check/data.ts
+++ b/apps/web-antd/src/views/erp/stock/check/data.ts
@@ -180,7 +180,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -202,7 +202,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择仓库',
         allowClear: true,
         showSearch: true,
-        api: () => getWarehouseSimpleList(),
+        api: getWarehouseSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -215,7 +215,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择创建人',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/stock/in/data.ts b/apps/web-antd/src/views/erp/stock/in/data.ts
index e2ff7117c..e5d88528a 100644
--- a/apps/web-antd/src/views/erp/stock/in/data.ts
+++ b/apps/web-antd/src/views/erp/stock/in/data.ts
@@ -50,7 +50,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择供应商',
         allowClear: true,
         showSearch: true,
-        api: () => getSupplierSimpleList(),
+        api: getSupplierSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -187,7 +187,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -209,7 +209,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择供应商',
         allowClear: true,
         showSearch: true,
-        api: () => getSupplierSimpleList(),
+        api: getSupplierSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -222,7 +222,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择仓库',
         allowClear: true,
         showSearch: true,
-        api: () => getWarehouseSimpleList(),
+        api: getWarehouseSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -235,7 +235,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择创建人',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/stock/move/data.ts b/apps/web-antd/src/views/erp/stock/move/data.ts
index fbc94a128..74c2db117 100644
--- a/apps/web-antd/src/views/erp/stock/move/data.ts
+++ b/apps/web-antd/src/views/erp/stock/move/data.ts
@@ -178,7 +178,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -200,7 +200,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择调出仓库',
         allowClear: true,
         showSearch: true,
-        api: () => getWarehouseSimpleList(),
+        api: getWarehouseSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -213,7 +213,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择调入仓库',
         allowClear: true,
         showSearch: true,
-        api: () => getWarehouseSimpleList(),
+        api: getWarehouseSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -226,7 +226,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择创建人',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/stock/record/data.ts b/apps/web-antd/src/views/erp/stock/record/data.ts
index db0548c9a..e4e3d0ecd 100644
--- a/apps/web-antd/src/views/erp/stock/record/data.ts
+++ b/apps/web-antd/src/views/erp/stock/record/data.ts
@@ -19,7 +19,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -32,7 +32,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择仓库',
         allowClear: true,
         showSearch: true,
-        api: () => getWarehouseSimpleList(),
+        api: getWarehouseSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/stock/stock/data.ts b/apps/web-antd/src/views/erp/stock/stock/data.ts
index 71c9a1549..037bb9c45 100644
--- a/apps/web-antd/src/views/erp/stock/stock/data.ts
+++ b/apps/web-antd/src/views/erp/stock/stock/data.ts
@@ -15,7 +15,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -28,7 +28,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择仓库',
         allowClear: true,
         showSearch: true,
-        api: () => getWarehouseSimpleList(),
+        api: getWarehouseSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/infra/apiAccessLog/data.ts b/apps/web-antd/src/views/infra/apiAccessLog/data.ts
index d392df16f..ce40868fb 100644
--- a/apps/web-antd/src/views/infra/apiAccessLog/data.ts
+++ b/apps/web-antd/src/views/infra/apiAccessLog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraApiAccessLogApi } from '#/api/infra/api-access-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -181,10 +180,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userType',
       label: '用户类型',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.USER_TYPE,
-          value: data.userType,
+          value: val,
         });
       },
     },
@@ -198,9 +197,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     },
     {
       label: '请求信息',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data?.requestMethod && data?.requestUrl) {
-          return `${data.requestMethod} ${data.requestUrl}`;
+      field: 'requestMethod',
+      render: (val, data) => {
+        if (val && data?.requestUrl) {
+          return `${val} ${data.requestUrl}`;
         }
         return '';
       },
@@ -208,10 +208,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'requestParams',
       label: '请求参数',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data.requestParams) {
+      render: (val) => {
+        if (val) {
           return h(JsonViewer, {
-            value: JSON.parse(data.requestParams),
+            value: JSON.parse(val),
             previewMode: true,
           });
         }
@@ -224,26 +224,29 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     },
     {
       label: '请求时间',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data?.beginTime && data?.endTime) {
-          return `${formatDateTime(data.beginTime)} ~ ${formatDateTime(data.endTime)}`;
+      field: 'beginTime',
+      render: (val, data) => {
+        if (val && data?.endTime) {
+          return `${formatDateTime(val)} ~ ${formatDateTime(data.endTime)}`;
         }
         return '';
       },
     },
     {
       label: '请求耗时',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        return data?.duration ? `${data.duration} ms` : '';
+      field: 'duration',
+      render: (val) => {
+        return val ? `${val} ms` : '';
       },
     },
     {
       label: '操作结果',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data?.resultCode === 0) {
+      field: 'resultCode',
+      render: (val, data) => {
+        if (val === 0) {
           return '正常';
-        } else if (data && data.resultCode > 0) {
-          return `失败 | ${data.resultCode} | ${data.resultMsg}`;
+        } else if (val > 0 && data?.resultMsg) {
+          return `失败 | ${val} | ${data.resultMsg}`;
         }
         return '';
       },
@@ -259,10 +262,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'operateType',
       label: '操作类型',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_OPERATE_TYPE,
-          value: data?.operateType,
+          value: val,
         });
       },
     },
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 061684f37..b3de99cc7 100644
--- a/apps/web-antd/src/views/infra/apiAccessLog/modules/detail.vue
+++ b/apps/web-antd/src/views/infra/apiAccessLog/modules/detail.vue
@@ -12,11 +12,9 @@ import { useDetailSchema } from '../data';
 const formData = ref<InfraApiAccessLogApi.ApiAccessLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    class: 'mx-4',
-  },
+  bordered: true,
+  column: 1,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/infra/apiErrorLog/data.ts b/apps/web-antd/src/views/infra/apiErrorLog/data.ts
index d716a42a7..1a8c545fe 100644
--- a/apps/web-antd/src/views/infra/apiErrorLog/data.ts
+++ b/apps/web-antd/src/views/infra/apiErrorLog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraApiErrorLogApi } from '#/api/infra/api-error-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -158,10 +157,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userType',
       label: '用户类型',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.USER_TYPE,
-          value: data.userType,
+          value: val,
         });
       },
     },
@@ -176,9 +175,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'requestMethod',
       label: '请求信息',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        if (data?.requestMethod && data?.requestUrl) {
-          return `${data.requestMethod} ${data.requestUrl}`;
+      render: (val, data) => {
+        if (val && data?.requestUrl) {
+          return `${val} ${data.requestUrl}`;
         }
         return '';
       },
@@ -186,10 +185,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'requestParams',
       label: '请求参数',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        if (data.requestParams) {
+      render: (val) => {
+        if (val) {
           return h(JsonViewer, {
-            value: JSON.parse(data.requestParams),
+            value: JSON.parse(val),
             previewMode: true,
           });
         }
@@ -199,8 +198,8 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'exceptionTime',
       label: '异常时间',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        return formatDateTime(data?.exceptionTime || '') as string;
+      render: (val) => {
+        return formatDateTime(val) as string;
       },
     },
     {
@@ -210,12 +209,11 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'exceptionStackTrace',
       label: '异常堆栈',
-      hidden: (data: InfraApiErrorLogApi.ApiErrorLog) =>
-        !data?.exceptionStackTrace,
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        if (data?.exceptionStackTrace) {
+      show: (val) => !val,
+      render: (val) => {
+        if (val) {
           return h('textarea', {
-            value: data.exceptionStackTrace,
+            value: val,
             style:
               'width: 100%; min-height: 200px; max-height: 400px; resize: vertical;',
             readonly: true,
@@ -227,24 +225,24 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'processStatus',
       label: '处理状态',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS,
-          value: data?.processStatus,
+          value: val,
         });
       },
     },
     {
       field: 'processUserId',
       label: '处理人',
-      hidden: (data: InfraApiErrorLogApi.ApiErrorLog) => !data?.processUserId,
+      show: (val) => !val,
     },
     {
       field: 'processTime',
       label: '处理时间',
-      hidden: (data: InfraApiErrorLogApi.ApiErrorLog) => !data?.processTime,
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        return formatDateTime(data?.processTime || '') as string;
+      show: (val) => !val,
+      render: (val) => {
+        return formatDateTime(val) as string;
       },
     },
   ];
diff --git a/apps/web-antd/src/views/infra/apiErrorLog/modules/detail.vue b/apps/web-antd/src/views/infra/apiErrorLog/modules/detail.vue
index 1e80fa37a..9c4e44c9f 100644
--- a/apps/web-antd/src/views/infra/apiErrorLog/modules/detail.vue
+++ b/apps/web-antd/src/views/infra/apiErrorLog/modules/detail.vue
@@ -12,11 +12,9 @@ import { useDetailSchema } from '../data';
 const formData = ref<InfraApiErrorLogApi.ApiErrorLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    class: 'mx-4',
-  },
+  bordered: true,
+  column: 1,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/infra/codegen/data.ts b/apps/web-antd/src/views/infra/codegen/data.ts
index 921d1256b..b07ea2a32 100644
--- a/apps/web-antd/src/views/infra/codegen/data.ts
+++ b/apps/web-antd/src/views/infra/codegen/data.ts
@@ -25,7 +25,7 @@ export function useImportTableFormSchema(): VbenFormSchema[] {
       label: '数据源',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getDataSourceConfigList(),
+        api: getDataSourceConfigList,
         labelField: 'name',
         valueField: 'id',
         autoSelect: 'first',
diff --git a/apps/web-antd/src/views/infra/job/data.ts b/apps/web-antd/src/views/infra/job/data.ts
index e62dd466e..31811a055 100644
--- a/apps/web-antd/src/views/infra/job/data.ts
+++ b/apps/web-antd/src/views/infra/job/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraJobApi } from '#/api/infra/job';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h, markRaw } from 'vue';
@@ -191,10 +190,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '任务状态',
-      content: (data: InfraJobApi.Job) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_JOB_STATUS,
-          value: data?.status,
+          value: val,
         });
       },
     },
@@ -216,27 +215,27 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     },
     {
       label: '重试间隔',
-      content: (data: InfraJobApi.Job) => {
-        return data?.retryInterval ? `${data.retryInterval} 毫秒` : '无间隔';
+      field: 'retryInterval',
+      render: (val) => {
+        return val ? `${val} 毫秒` : '无间隔';
       },
     },
     {
       label: '监控超时时间',
-      content: (data: InfraJobApi.Job) => {
-        return data?.monitorTimeout && data.monitorTimeout > 0
-          ? `${data.monitorTimeout} 毫秒`
-          : '未开启';
+      field: 'monitorTimeout',
+      render: (val) => {
+        return val && val > 0 ? `${val} 毫秒` : '未开启';
       },
     },
     {
       field: 'nextTimes',
       label: '后续执行时间',
-      content: (data: InfraJobApi.Job) => {
-        if (!data?.nextTimes || data.nextTimes.length === 0) {
+      render: (val) => {
+        if (!val || val.length === 0) {
           return '无后续执行时间';
         }
         return h(Timeline, {}, () =>
-          data.nextTimes?.map((time: Date) =>
+          val?.map((time: Date) =>
             h(Timeline.Item, {}, () => formatDateTime(time)),
           ),
         );
diff --git a/apps/web-antd/src/views/infra/job/logger/data.ts b/apps/web-antd/src/views/infra/job/logger/data.ts
index d12e7ac56..f17622cb9 100644
--- a/apps/web-antd/src/views/infra/job/logger/data.ts
+++ b/apps/web-antd/src/views/infra/job/logger/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraJobLogApi } from '#/api/infra/job-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -154,9 +153,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'beginTime',
       label: '执行时间',
-      content: (data: InfraJobLogApi.JobLog) => {
-        if (data?.beginTime && data?.endTime) {
-          return `${formatDateTime(data.beginTime)} ~ ${formatDateTime(data.endTime)}`;
+      render: (val, data) => {
+        if (val && data?.endTime) {
+          return `${formatDateTime(val)} ~ ${formatDateTime(data.endTime)}`;
         }
         return '';
       },
@@ -164,17 +163,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'duration',
       label: '执行时长',
-      content: (data: InfraJobLogApi.JobLog) => {
-        return data?.duration ? `${data.duration} 毫秒` : '';
+      render: (val) => {
+        return val ? `${val} 毫秒` : '';
       },
     },
     {
       field: 'status',
       label: '任务状态',
-      content: (data: InfraJobLogApi.JobLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_JOB_LOG_STATUS,
-          value: data?.status,
+          value: val,
         });
       },
     },
diff --git a/apps/web-antd/src/views/infra/job/logger/modules/detail.vue b/apps/web-antd/src/views/infra/job/logger/modules/detail.vue
index aa20203cb..18c868de4 100644
--- a/apps/web-antd/src/views/infra/job/logger/modules/detail.vue
+++ b/apps/web-antd/src/views/infra/job/logger/modules/detail.vue
@@ -13,11 +13,9 @@ import { useDetailSchema } from '../data';
 const formData = ref<InfraJobLogApi.JobLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    class: 'mx-4',
-  },
+  bordered: true,
+  column: 1,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/infra/job/modules/detail.vue b/apps/web-antd/src/views/infra/job/modules/detail.vue
index 89f138a47..145a19dab 100644
--- a/apps/web-antd/src/views/infra/job/modules/detail.vue
+++ b/apps/web-antd/src/views/infra/job/modules/detail.vue
@@ -14,11 +14,9 @@ const formData = ref<InfraJobApi.Job>(); // 任务详情
 const nextTimes = ref<Date[]>([]); // 下一次执行时间
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    class: 'mx-4',
-  },
+  bordered: true,
+  column: 1,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/infra/redis/modules/info.vue b/apps/web-antd/src/views/infra/redis/modules/info.vue
index f04907978..c832f1b04 100644
--- a/apps/web-antd/src/views/infra/redis/modules/info.vue
+++ b/apps/web-antd/src/views/infra/redis/modules/info.vue
@@ -1,60 +1,74 @@
 <script lang="ts" setup>
 import type { InfraRedisApi } from '#/api/infra/redis';
 
-import { Descriptions } from 'ant-design-vue';
+import { useDescription } from '#/components/description';
 
 defineProps<{
   redisData?: InfraRedisApi.RedisMonitorInfo;
 }>();
+
+const [Descriptions] = useDescription({
+  bordered: false,
+  column: 6,
+  class: 'mx-4',
+  schema: [
+    {
+      field: 'info.redis_version',
+      label: 'Redis 版本',
+    },
+    {
+      field: 'info.redis_mode',
+      label: '运行模式',
+      render: (val) => (val === 'standalone' ? '单机' : '集群'),
+    },
+    {
+      field: 'info.tcp_port',
+      label: '端口',
+    },
+    {
+      field: 'info.connected_clients',
+      label: '客户端数',
+    },
+    {
+      field: 'info.uptime_in_days',
+      label: '运行时间(天)',
+    },
+    {
+      field: 'info.used_memory_human',
+      label: '使用内存',
+    },
+    {
+      field: 'info.used_cpu_user_children',
+      label: '使用 CPU',
+      render: (val) => Number.parseFloat(val).toFixed(2),
+    },
+    {
+      field: 'info.maxmemory_human',
+      label: '内存配置',
+    },
+    {
+      field: 'info.aof_enabled',
+      label: 'AOF 是否开启',
+      render: (val) => (val === '0' ? '否' : '是'),
+    },
+    {
+      field: 'info.rdb_last_bgsave_status',
+      label: 'RDB 是否成功',
+    },
+    {
+      field: 'dbSize',
+      label: 'Key 数量',
+    },
+    {
+      field: 'info.instantaneous_input_kbps',
+      label: '网络入口/出口',
+      render: (val, data) =>
+        `${val}kps / ${data?.info?.instantaneous_output_kbps}kps`,
+    },
+  ],
+});
 </script>
 
 <template>
-  <Descriptions
-    :column="6"
-    bordered
-    size="middle"
-    :label-style="{ width: '138px' }"
-  >
-    <Descriptions.Item label="Redis 版本">
-      {{ redisData?.info?.redis_version }}
-    </Descriptions.Item>
-    <Descriptions.Item label="运行模式">
-      {{ redisData?.info?.redis_mode === 'standalone' ? '单机' : '集群' }}
-    </Descriptions.Item>
-    <Descriptions.Item label="端口">
-      {{ redisData?.info?.tcp_port }}
-    </Descriptions.Item>
-    <Descriptions.Item label="客户端数">
-      {{ redisData?.info?.connected_clients }}
-    </Descriptions.Item>
-    <Descriptions.Item label="运行时间(天)">
-      {{ redisData?.info?.uptime_in_days }}
-    </Descriptions.Item>
-    <Descriptions.Item label="使用内存">
-      {{ redisData?.info?.used_memory_human }}
-    </Descriptions.Item>
-    <Descriptions.Item label="使用 CPU">
-      {{
-        redisData?.info
-          ? parseFloat(redisData?.info?.used_cpu_user_children).toFixed(2)
-          : ''
-      }}
-    </Descriptions.Item>
-    <Descriptions.Item label="内存配置">
-      {{ redisData?.info?.maxmemory_human }}
-    </Descriptions.Item>
-    <Descriptions.Item label="AOF 是否开启">
-      {{ redisData?.info?.aof_enabled === '0' ? '否' : '是' }}
-    </Descriptions.Item>
-    <Descriptions.Item label="RDB 是否成功">
-      {{ redisData?.info?.rdb_last_bgsave_status }}
-    </Descriptions.Item>
-    <Descriptions.Item label="Key 数量">
-      {{ redisData?.dbSize }}
-    </Descriptions.Item>
-    <Descriptions.Item label="网络入口/出口">
-      {{ redisData?.info?.instantaneous_input_kbps }}kps /
-      {{ redisData?.info?.instantaneous_output_kbps }}kps
-    </Descriptions.Item>
-  </Descriptions>
+  <Descriptions :data="redisData" />
 </template>
diff --git a/apps/web-antd/src/views/infra/redis/modules/memory.vue b/apps/web-antd/src/views/infra/redis/modules/memory.vue
index 6eeda8958..5220c4631 100644
--- a/apps/web-antd/src/views/infra/redis/modules/memory.vue
+++ b/apps/web-antd/src/views/infra/redis/modules/memory.vue
@@ -94,7 +94,7 @@ function renderMemoryChart() {
         detail: {
           show: true,
           offsetCenter: [0, '50%'],
-          color: 'auto',
+          color: 'inherit',
           fontSize: 30,
           formatter: usedMemory,
         },
diff --git a/apps/web-antd/src/views/iot/alert/config/data.ts b/apps/web-antd/src/views/iot/alert/config/data.ts
index 379867edb..09ca905c7 100644
--- a/apps/web-antd/src/views/iot/alert/config/data.ts
+++ b/apps/web-antd/src/views/iot/alert/config/data.ts
@@ -63,7 +63,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '关联场景联动规则',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleRuleSceneList(),
+        api: getSimpleRuleSceneList,
         labelField: 'name',
         valueField: 'id',
         mode: 'multiple',
@@ -76,7 +76,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '接收的用户',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         mode: 'multiple',
diff --git a/apps/web-antd/src/views/iot/alert/record/data.ts b/apps/web-antd/src/views/iot/alert/record/data.ts
index 70b13b267..10ebb12f3 100644
--- a/apps/web-antd/src/views/iot/alert/record/data.ts
+++ b/apps/web-antd/src/views/iot/alert/record/data.ts
@@ -17,7 +17,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '告警配置',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleAlertConfigList(),
+        api: getSimpleAlertConfigList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择告警配置',
@@ -40,7 +40,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '产品',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleProductList(),
+        api: getSimpleProductList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品',
@@ -53,7 +53,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '设备',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleDeviceList(),
+        api: getSimpleDeviceList,
         labelField: 'deviceName',
         valueField: 'id',
         placeholder: '请选择设备',
diff --git a/apps/web-antd/src/views/iot/device/device/data.ts b/apps/web-antd/src/views/iot/device/device/data.ts
index a2fef45e8..424f0ef92 100644
--- a/apps/web-antd/src/views/iot/device/device/data.ts
+++ b/apps/web-antd/src/views/iot/device/device/data.ts
@@ -28,7 +28,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '产品',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleProductList(),
+        api: getSimpleProductList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品',
@@ -89,7 +89,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '设备分组',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleDeviceGroupList(),
+        api: getSimpleDeviceGroupList,
         labelField: 'name',
         valueField: 'id',
         mode: 'multiple',
@@ -156,7 +156,7 @@ export function useGroupFormSchema(): VbenFormSchema[] {
       label: '设备分组',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleDeviceGroupList(),
+        api: getSimpleDeviceGroupList,
         labelField: 'name',
         valueField: 'id',
         mode: 'multiple',
@@ -199,7 +199,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '产品',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleProductList(),
+        api: getSimpleProductList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品',
@@ -249,7 +249,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '设备分组',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleDeviceGroupList(),
+        api: getSimpleDeviceGroupList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择设备分组',
diff --git a/apps/web-antd/src/views/iot/device/group/data.ts b/apps/web-antd/src/views/iot/device/group/data.ts
index 3ea5a12da..0bc313e52 100644
--- a/apps/web-antd/src/views/iot/device/group/data.ts
+++ b/apps/web-antd/src/views/iot/device/group/data.ts
@@ -34,7 +34,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '父级分组',
       component: 'ApiTreeSelect',
       componentProps: {
-        api: () => getSimpleDeviceGroupList(),
+        api: getSimpleDeviceGroupList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择父级分组',
diff --git a/apps/web-antd/src/views/iot/ota/data.ts b/apps/web-antd/src/views/iot/ota/data.ts
index 287cb00bc..fbae1bde0 100644
--- a/apps/web-antd/src/views/iot/ota/data.ts
+++ b/apps/web-antd/src/views/iot/ota/data.ts
@@ -29,7 +29,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '所属产品',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleProductList(),
+        api: getSimpleProductList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品',
@@ -85,7 +85,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '产品',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleProductList(),
+        api: getSimpleProductList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品',
diff --git a/apps/web-antd/src/views/iot/ota/firmware/data.ts b/apps/web-antd/src/views/iot/ota/firmware/data.ts
index de4195809..c3e44ec47 100644
--- a/apps/web-antd/src/views/iot/ota/firmware/data.ts
+++ b/apps/web-antd/src/views/iot/ota/firmware/data.ts
@@ -29,7 +29,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '所属产品',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleProductList(),
+        api: getSimpleProductList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品',
@@ -86,7 +86,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '产品',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleProductList(),
+        api: getSimpleProductList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品',
diff --git a/apps/web-antd/src/views/iot/product/category/data.ts b/apps/web-antd/src/views/iot/product/category/data.ts
index d7bad5034..2604b0406 100644
--- a/apps/web-antd/src/views/iot/product/category/data.ts
+++ b/apps/web-antd/src/views/iot/product/category/data.ts
@@ -34,7 +34,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '父级分类',
       component: 'ApiTreeSelect',
       componentProps: {
-        api: () => getSimpleProductCategoryList(),
+        api: getSimpleProductCategoryList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择父级分类',
diff --git a/apps/web-antd/src/views/iot/product/product/data.ts b/apps/web-antd/src/views/iot/product/product/data.ts
index 5ba2a2516..e1d2d27fd 100644
--- a/apps/web-antd/src/views/iot/product/product/data.ts
+++ b/apps/web-antd/src/views/iot/product/product/data.ts
@@ -93,7 +93,7 @@ export function useFormSchema(formApi?: any): VbenFormSchema[] {
       label: '产品分类',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleProductCategoryList(),
+        api: getSimpleProductCategoryList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品分类',
@@ -246,7 +246,7 @@ export function useBasicFormSchema(formApi?: any): VbenFormSchema[] {
       label: '产品分类',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleProductCategoryList(),
+        api: getSimpleProductCategoryList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品分类',
diff --git a/apps/web-antd/src/views/iot/rule/data/data.ts b/apps/web-antd/src/views/iot/rule/data/data.ts
index 476fd9aa5..bbe4d67a7 100644
--- a/apps/web-antd/src/views/iot/rule/data/data.ts
+++ b/apps/web-antd/src/views/iot/rule/data/data.ts
@@ -24,7 +24,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '产品',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleProductList(),
+        api: getSimpleProductList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品',
diff --git a/apps/web-antd/src/views/mall/product/comment/data.ts b/apps/web-antd/src/views/mall/product/comment/data.ts
index c0ca716d3..b2a23a17f 100644
--- a/apps/web-antd/src/views/mall/product/comment/data.ts
+++ b/apps/web-antd/src/views/mall/product/comment/data.ts
@@ -23,7 +23,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '商品',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSpuSimpleList(),
+        api: getSpuSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择商品',
diff --git a/apps/web-antd/src/views/mall/product/spu/modules/form-data.ts b/apps/web-antd/src/views/mall/product/spu/modules/form-data.ts
index d845be3e5..3ad1cd4ff 100644
--- a/apps/web-antd/src/views/mall/product/spu/modules/form-data.ts
+++ b/apps/web-antd/src/views/mall/product/spu/modules/form-data.ts
@@ -50,7 +50,7 @@ export function useInfoFormSchema(): VbenFormSchema[] {
       label: '商品品牌',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleBrandList(),
+        api: getSimpleBrandList,
         labelField: 'name',
         valueField: 'id',
         allowClear: true,
@@ -232,7 +232,7 @@ export function useDeliveryFormSchema(): VbenFormSchema[] {
       label: '运费模板',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleTemplateList(),
+        api: getSimpleTemplateList,
         labelField: 'name',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/mall/promotion/article/data.ts b/apps/web-antd/src/views/mall/promotion/article/data.ts
index 7822a3cb7..9e93bd58c 100644
--- a/apps/web-antd/src/views/mall/promotion/article/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/article/data.ts
@@ -38,7 +38,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '文章分类',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleArticleCategoryList(),
+        api: getSimpleArticleCategoryList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择文章分类',
@@ -144,7 +144,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '文章分类',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleArticleCategoryList(),
+        api: getSimpleArticleCategoryList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择文章分类',
diff --git a/apps/web-antd/src/views/mall/trade/afterSale/detail/data.ts b/apps/web-antd/src/views/mall/trade/afterSale/detail/data.ts
index b43034af6..66fed1092 100644
--- a/apps/web-antd/src/views/mall/trade/afterSale/detail/data.ts
+++ b/apps/web-antd/src/views/mall/trade/afterSale/detail/data.ts
@@ -1,4 +1,3 @@
-import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -20,19 +19,19 @@ export function useOrderInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'order.deliveryType',
       label: '配送方式',
-      content: (data: MallAfterSaleApi.AfterSale) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_DELIVERY_TYPE,
-          value: data?.order?.deliveryType,
+          value: val,
         }),
     },
     {
       field: 'order.type',
       label: '订单类型',
-      content: (data: MallAfterSaleApi.AfterSale) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_ORDER_TYPE,
-          value: data?.order?.type,
+          value: val,
         }),
     },
     {
@@ -46,10 +45,10 @@ export function useOrderInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'order.terminal',
       label: '订单来源',
-      content: (data: MallAfterSaleApi.AfterSale) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TERMINAL,
-          value: data?.order?.terminal,
+          value: val,
         }),
     },
     {
@@ -67,10 +66,10 @@ export function useOrderInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'order.payChannelCode',
       label: '付款方式',
-      content: (data: MallAfterSaleApi.AfterSale) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_CHANNEL_CODE,
-          value: data?.order?.payChannelCode,
+          value: val,
         }),
     },
     {
@@ -90,32 +89,30 @@ export function useAfterSaleInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'auditTime',
       label: '申请时间',
-      content: (data: MallAfterSaleApi.AfterSale) =>
-        formatDate(data?.auditTime) as string,
+      render: (val) => formatDate(val) as string,
     },
     {
       field: 'type',
       label: '售后类型',
-      content: (data: MallAfterSaleApi.AfterSale) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_AFTER_SALE_TYPE,
-          value: data?.type,
+          value: val,
         }),
     },
     {
       field: 'way',
       label: '售后方式',
-      content: (data: MallAfterSaleApi.AfterSale) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_AFTER_SALE_WAY,
-          value: data?.way,
+          value: val,
         }),
     },
     {
       field: 'refundPrice',
       label: '退款金额',
-      content: (data: MallAfterSaleApi.AfterSale) =>
-        fenToYuan(data?.refundPrice ?? 0),
+      render: (val) => fenToYuan(val ?? 0),
     },
     {
       field: 'applyReason',
@@ -128,8 +125,8 @@ export function useAfterSaleInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'applyPicUrls',
       label: '凭证图片',
-      content: (data) => {
-        const images = data?.applyPicUrls || [];
+      render: (val) => {
+        const images = val || [];
         return h(
           'div',
           { class: 'flex gap-10px' },
@@ -153,16 +150,16 @@ export function useRefundStatusSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '退款状态',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_AFTER_SALE_STATUS,
-          value: data?.status,
+          value: val,
         }),
     },
     {
       field: 'reminder',
       label: '提醒',
-      content: () =>
+      render: () =>
         h('div', { class: 'text-red-500 mb-10px' }, [
           h('div', '如果未发货，请点击同意退款给买家。'),
           h('div', '如果实际已发货，请主动与买家联系。'),
diff --git a/apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue b/apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue
index 890eb001a..c2a1fd9ac 100644
--- a/apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue
+++ b/apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue
@@ -49,29 +49,23 @@ const afterSale = ref<MallAfterSaleApi.AfterSale>({
 });
 
 const [OrderDescriptions] = useDescription({
-  componentProps: {
-    title: '订单信息',
-    bordered: false,
-    column: 3,
-  },
+  title: '订单信息',
+  bordered: false,
+  column: 3,
   schema: useOrderInfoSchema(),
 });
 
 const [AfterSaleDescriptions] = useDescription({
-  componentProps: {
-    title: '售后信息',
-    bordered: false,
-    column: 3,
-  },
+  title: '售后信息',
+  bordered: false,
+  column: 3,
   schema: useAfterSaleInfoSchema(),
 });
 
 const [RefundStatusDescriptions] = useDescription({
-  componentProps: {
-    title: '退款状态',
-    bordered: false,
-    column: 1,
-  },
+  title: '退款状态',
+  bordered: false,
+  column: 1,
   schema: useRefundStatusSchema(),
 });
 
diff --git a/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/data.ts b/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/data.ts
index 11721f910..666db4f8f 100644
--- a/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/data.ts
+++ b/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/data.ts
@@ -65,7 +65,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiTreeSelect',
       rules: 'required',
       componentProps: {
-        api: () => getAreaTree(),
+        api: getAreaTree,
         fieldNames: { label: 'name', value: 'id', children: 'children' },
         placeholder: '请选择省市区',
       },
@@ -146,7 +146,7 @@ export function useBindFormSchema(): VbenFormSchema[] {
       label: '门店店员',
       rules: 'required',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         mode: 'tags',
diff --git a/apps/web-antd/src/views/mall/trade/order/data.ts b/apps/web-antd/src/views/mall/trade/order/data.ts
index fce6ac5cc..775e76a51 100644
--- a/apps/web-antd/src/views/mall/trade/order/data.ts
+++ b/apps/web-antd/src/views/mall/trade/order/data.ts
@@ -74,7 +74,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '快递公司',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleDeliveryExpressList(),
+        api: getSimpleDeliveryExpressList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择快递公司',
@@ -90,7 +90,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '自提门店',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleDeliveryPickUpStoreList(),
+        api: getSimpleDeliveryPickUpStoreList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择自提门店',
@@ -369,7 +369,7 @@ export function useAddressFormSchema(): VbenFormSchema[] {
       label: '所在地',
       component: 'ApiTreeSelect',
       componentProps: {
-        api: () => getAreaTree(),
+        api: getAreaTree,
         labelField: 'name',
         valueField: 'id',
         childrenField: 'children',
@@ -422,7 +422,7 @@ export function useDeliveryFormSchema(): VbenFormSchema[] {
       label: '物流公司',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleDeliveryExpressList(),
+        api: getSimpleDeliveryExpressList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择物流公司',
diff --git a/apps/web-antd/src/views/mall/trade/order/detail/data.ts b/apps/web-antd/src/views/mall/trade/order/detail/data.ts
index 74dfbcfda..febf4ed5e 100644
--- a/apps/web-antd/src/views/mall/trade/order/detail/data.ts
+++ b/apps/web-antd/src/views/mall/trade/order/detail/data.ts
@@ -1,5 +1,4 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MallOrderApi } from '#/api/mall/trade/order';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -23,19 +22,19 @@ export function useOrderInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'type',
       label: '订单类型',
-      content: (data: MallOrderApi.Order) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_ORDER_TYPE,
-          value: data?.type,
+          value: val,
         }),
     },
     {
       field: 'terminal',
       label: '订单来源',
-      content: (data: MallOrderApi.Order) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TERMINAL,
-          value: data?.terminal,
+          value: val,
         }),
     },
     {
@@ -53,10 +52,10 @@ export function useOrderInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'payChannelCode',
       label: '付款方式',
-      content: (data: MallOrderApi.Order) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_CHANNEL_CODE,
-          value: data?.payChannelCode,
+          value: val,
         }),
     },
     {
@@ -72,16 +71,16 @@ export function useOrderStatusSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '订单状态',
-      content: (data: MallOrderApi.Order) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_ORDER_STATUS,
-          value: data?.status,
+          value: val,
         }),
     },
     {
       field: 'reminder',
       label: '提醒',
-      content: () =>
+      render: () =>
         h('div', { class: 'space-y-1' }, [
           h('div', '买家付款成功后，货款将直接进入您的商户号（微信、支付宝）'),
           h('div', '请及时关注你发出的包裹状态，确保可以配送至买家手中'),
@@ -100,66 +99,46 @@ export function useOrderPriceSchema(): DescriptionItemSchema[] {
     {
       field: 'totalPrice',
       label: '商品总额',
-      content: (data: MallOrderApi.Order) =>
-        `${fenToYuan(data?.totalPrice ?? 0)} 元`,
+      render: (val) => `${fenToYuan(val ?? 0)} 元`,
     },
     {
       field: 'deliveryPrice',
       label: '运费金额',
-      content: (data: MallOrderApi.Order) =>
-        `${fenToYuan(data?.deliveryPrice ?? 0)} 元`,
+      render: (val) => `${fenToYuan(val ?? 0)} 元`,
     },
     {
       field: 'adjustPrice',
       label: '订单调价',
-      content: (data: MallOrderApi.Order) =>
-        `${fenToYuan(data?.adjustPrice ?? 0)} 元`,
+      render: (val) => `${fenToYuan(val ?? 0)} 元`,
     },
     {
       field: 'couponPrice',
       label: '优惠劵优惠',
-      content: (data: MallOrderApi.Order) =>
-        h(
-          'span',
-          { class: 'text-red-500' },
-          `${fenToYuan(data?.couponPrice ?? 0)} 元`,
-        ),
+      render: (val) =>
+        h('span', { class: 'text-red-500' }, `${fenToYuan(val ?? 0)} 元`),
     },
     {
       field: 'vipPrice',
       label: 'VIP 优惠',
-      content: (data: MallOrderApi.Order) =>
-        h(
-          'span',
-          { class: 'text-red-500' },
-          `${fenToYuan(data?.vipPrice ?? 0)} 元`,
-        ),
+      render: (val) =>
+        h('span', { class: 'text-red-500' }, `${fenToYuan(val ?? 0)} 元`),
     },
     {
       field: 'discountPrice',
       label: '活动优惠',
-      content: (data: MallOrderApi.Order) =>
-        h(
-          'span',
-          { class: 'text-red-500' },
-          `${fenToYuan(data?.discountPrice ?? 0)} 元`,
-        ),
+      render: (val) =>
+        h('span', { class: 'text-red-500' }, `${fenToYuan(val ?? 0)} 元`),
     },
     {
       field: 'pointPrice',
       label: '积分抵扣',
-      content: (data: MallOrderApi.Order) =>
-        h(
-          'span',
-          { class: 'text-red-500' },
-          `${fenToYuan(data?.pointPrice ?? 0)} 元`,
-        ),
+      render: (val) =>
+        h('span', { class: 'text-red-500' }, `${fenToYuan(val ?? 0)} 元`),
     },
     {
       field: 'payPrice',
       label: '应付金额',
-      content: (data: MallOrderApi.Order) =>
-        `${fenToYuan(data?.payPrice ?? 0)} 元`,
+      render: (val) => `${fenToYuan(val ?? 0)} 元`,
     },
   ];
 }
@@ -170,10 +149,10 @@ export function useDeliveryInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'deliveryType',
       label: '配送方式',
-      content: (data: MallOrderApi.Order) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_DELIVERY_TYPE,
-          value: data?.deliveryType,
+          value: val,
         }),
     },
     {
@@ -187,14 +166,12 @@ export function useDeliveryInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'receiverAddress',
       label: '收货地址',
-      content: (data: MallOrderApi.Order) =>
-        `${data?.receiverAreaName} ${data?.receiverDetailAddress}`.trim(),
+      render: (val, data) => `${data?.receiverAreaName} ${val}`.trim(),
     },
     {
       field: 'deliveryTime',
       label: '发货时间',
-      content: (data: MallOrderApi.Order) =>
-        formatDateTime(data?.deliveryTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/mall/trade/order/detail/index.vue b/apps/web-antd/src/views/mall/trade/order/detail/index.vue
index 5785d6ee5..e0e17325a 100644
--- a/apps/web-antd/src/views/mall/trade/order/detail/index.vue
+++ b/apps/web-antd/src/views/mall/trade/order/detail/index.vue
@@ -57,38 +57,30 @@ const expressTrackList = ref<any[]>([]);
 const pickUpStore = ref<MallDeliveryPickUpStoreApi.PickUpStore | undefined>();
 
 const [OrderInfoDescriptions] = useDescription({
-  componentProps: {
-    title: '订单信息',
-    bordered: false,
-    column: 3,
-  },
+  title: '订单信息',
+  bordered: false,
+  column: 3,
   schema: useOrderInfoSchema(),
 });
 
 const [OrderStatusDescriptions] = useDescription({
-  componentProps: {
-    title: '订单状态',
-    bordered: false,
-    column: 1,
-  },
+  title: '订单状态',
+  bordered: false,
+  column: 1,
   schema: useOrderStatusSchema(),
 });
 
 const [OrderPriceDescriptions] = useDescription({
-  componentProps: {
-    title: '费用信息',
-    bordered: false,
-    column: 4,
-  },
+  title: '费用信息',
+  bordered: false,
+  column: 4,
   schema: useOrderPriceSchema(),
 });
 
 const [DeliveryInfoDescriptions] = useDescription({
-  componentProps: {
-    title: '收货信息',
-    bordered: false,
-    column: 3,
-  },
+  title: '收货信息',
+  bordered: false,
+  column: 3,
   schema: useDeliveryInfoSchema(),
 });
 
diff --git a/apps/web-antd/src/views/member/user/data.ts b/apps/web-antd/src/views/member/user/data.ts
index b473bf6a0..6849775ec 100644
--- a/apps/web-antd/src/views/member/user/data.ts
+++ b/apps/web-antd/src/views/member/user/data.ts
@@ -90,7 +90,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '所在地',
       component: 'ApiTreeSelect',
       componentProps: {
-        api: () => getAreaTree(),
+        api: getAreaTree,
         fieldNames: { label: 'name', value: 'id', children: 'children' },
         placeholder: '请选择所在地',
       },
@@ -100,7 +100,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '用户标签',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleTagList(),
+        api: getSimpleTagList,
         labelField: 'name',
         valueField: 'id',
         mode: 'multiple',
@@ -112,7 +112,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '用户分组',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleGroupList(),
+        api: getSimpleGroupList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择用户分组',
@@ -173,7 +173,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '用户标签',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleTagList(),
+        api: getSimpleTagList,
         labelField: 'name',
         valueField: 'id',
         mode: 'multiple',
@@ -186,7 +186,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '用户等级',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleLevelList(),
+        api: getSimpleLevelList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择用户等级',
@@ -198,7 +198,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '用户分组',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleGroupList(),
+        api: getSimpleGroupList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择用户分组',
@@ -327,7 +327,7 @@ export function useLevelFormSchema(): VbenFormSchema[] {
       label: '用户等级',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleLevelList(),
+        api: getSimpleLevelList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择用户等级',
diff --git a/apps/web-antd/src/views/member/user/detail/modules/account-info.vue b/apps/web-antd/src/views/member/user/detail/modules/account-info.vue
index 9007df933..d148e5158 100644
--- a/apps/web-antd/src/views/member/user/detail/modules/account-info.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/account-info.vue
@@ -24,37 +24,37 @@ const [Descriptions] = useDescription({
     {
       field: 'levelName',
       label: '等级',
-      content: (data) => data.levelName || '-',
+      render: (val) => val || '-',
     },
     {
       field: 'experience',
       label: '成长值',
-      content: (data) => data.experience || 0,
+      render: (val) => val || 0,
     },
     {
       field: 'point',
       label: '当前积分',
-      content: (data) => data.point || 0,
+      render: (val) => val || 0,
     },
     {
       field: 'totalPoint',
       label: '总积分',
-      content: (data) => data.totalPoint || 0,
+      render: (val) => val || 0,
     },
     {
       field: 'balance',
       label: '当前余额',
-      content: (data) => fenToYuan(data.balance || 0),
+      render: (val) => fenToYuan(val || 0),
     },
     {
       field: 'totalExpense',
       label: '支出金额',
-      content: (data) => fenToYuan(data.totalExpense || 0),
+      render: (val) => fenToYuan(val || 0),
     },
     {
       field: 'totalRecharge',
       label: '充值金额',
-      content: (data) => fenToYuan(data.totalRecharge || 0),
+      render: (val) => fenToYuan(val || 0),
     },
   ],
 });
diff --git a/apps/web-antd/src/views/pay/notify/data.ts b/apps/web-antd/src/views/pay/notify/data.ts
index b0ee4985c..54e5fb400 100644
--- a/apps/web-antd/src/views/pay/notify/data.ts
+++ b/apps/web-antd/src/views/pay/notify/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { PayNotifyApi } from '#/api/pay/notify';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -21,7 +20,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '应用编号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getAppList(),
+        api: getAppList,
         labelField: 'name',
         valueField: 'id',
         autoSelect: 'first',
@@ -182,10 +181,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'type',
       label: '通知类型',
-      content: (data: PayNotifyApi.NotifyTask) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_NOTIFY_TYPE,
-          value: data?.type,
+          value: val,
         }),
     },
     {
@@ -195,10 +194,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '通知状态',
-      content: (data: PayNotifyApi.NotifyTask) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_NOTIFY_STATUS,
-          value: data?.status,
+          value: val,
         }),
     },
     {
@@ -208,14 +207,12 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'lastExecuteTime',
       label: '最后通知时间',
-      content: (data: PayNotifyApi.NotifyTask) =>
-        formatDateTime(data?.lastExecuteTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'nextNotifyTime',
       label: '下次通知时间',
-      content: (data: PayNotifyApi.NotifyTask) =>
-        formatDateTime(data?.nextNotifyTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'notifyTimes',
@@ -228,14 +225,12 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: PayNotifyApi.NotifyTask) =>
-        formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'updateTime',
       label: '更新时间',
-      content: (data: PayNotifyApi.NotifyTask) =>
-        formatDateTime(data?.updateTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/pay/order/data.ts b/apps/web-antd/src/views/pay/order/data.ts
index 7acf14000..c088704a2 100644
--- a/apps/web-antd/src/views/pay/order/data.ts
+++ b/apps/web-antd/src/views/pay/order/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { PayOrderApi } from '#/api/pay/order';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -184,53 +183,46 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '支付状态',
-      content: (data: any) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_ORDER_STATUS,
-          value: data?.status,
+          value: val,
         }),
     },
     {
       field: 'price',
       label: '支付金额',
-      content: (data: PayOrderApi.Order) =>
-        `￥${erpPriceInputFormatter(data?.price)}`,
+      render: (val) => `￥${erpPriceInputFormatter(val)}`,
     },
     {
       field: 'channelFeePrice',
       label: '手续费',
-      content: (data: PayOrderApi.Order) =>
-        `￥${erpPriceInputFormatter(data?.channelFeePrice)}`,
+      render: (val) => `￥${erpPriceInputFormatter(val)}`,
     },
     {
       field: 'channelFeeRate',
       label: '手续费比例',
-      content: (data: PayOrderApi.Order) =>
-        `${erpPriceInputFormatter(data?.channelFeeRate)}%`,
+      render: (val) => `${erpPriceInputFormatter(val)}%`,
     },
     {
       field: 'successTime',
       label: '支付时间',
-      content: (data: PayOrderApi.Order) =>
-        formatDateTime(data?.successTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'expireTime',
       label: '失效时间',
-      content: (data: PayOrderApi.Order) =>
-        formatDateTime(data?.expireTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: PayOrderApi.Order) =>
-        formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'updateTime',
       label: '更新时间',
-      content: (data: PayOrderApi.Order) =>
-        formatDateTime(data?.updateTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'subject',
@@ -243,10 +235,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'channelCode',
       label: '支付渠道',
-      content: (data: PayOrderApi.Order) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_CHANNEL_CODE,
-          value: data?.channelCode,
+          value: val,
         }),
     },
     {
@@ -256,10 +248,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'channelOrderNo',
       label: '渠道单号',
-      content: (data: PayOrderApi.Order) =>
-        data?.channelOrderNo
-          ? h(Tag, { color: 'green' }, () => data.channelOrderNo)
-          : '',
+      render: (val) => (val ? h(Tag, { color: 'green' }, () => val) : ''),
     },
     {
       field: 'channelUserId',
@@ -268,8 +257,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'refundPrice',
       label: '退款金额',
-      content: (data: PayOrderApi.Order) =>
-        `￥${erpPriceInputFormatter(data?.refundPrice)}`,
+      render: (val) => `￥${erpPriceInputFormatter(val)}`,
     },
     {
       field: 'notifyUrl',
diff --git a/apps/web-antd/src/views/pay/refund/data.ts b/apps/web-antd/src/views/pay/refund/data.ts
index 69eee7224..974acfe25 100644
--- a/apps/web-antd/src/views/pay/refund/data.ts
+++ b/apps/web-antd/src/views/pay/refund/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { PayRefundApi } from '#/api/pay/refund';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -173,26 +172,22 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'merchantRefundId',
       label: '商户退款单号',
-      content: (data: PayRefundApi.Refund) =>
-        h(Tag, {}, () => data?.merchantRefundId || '-'),
+      render: (val) => h(Tag, {}, () => val || '-'),
     },
     {
       field: 'channelRefundNo',
       label: '渠道退款单号',
-      content: (data: PayRefundApi.Refund) =>
-        h(Tag, { color: 'success' }, () => data?.channelRefundNo || '-'),
+      render: (val) => h(Tag, { color: 'success' }, () => val || '-'),
     },
     {
       field: 'merchantOrderId',
       label: '商户支付单号',
-      content: (data: PayRefundApi.Refund) =>
-        h(Tag, {}, () => data?.merchantOrderId || '-'),
+      render: (val) => h(Tag, {}, () => val || '-'),
     },
     {
       field: 'channelOrderNo',
       label: '渠道支付单号',
-      content: (data: PayRefundApi.Refund) =>
-        h(Tag, { color: 'success' }, () => data?.channelOrderNo || '-'),
+      render: (val) => h(Tag, { color: 'success' }, () => val || '-'),
     },
     {
       field: 'appId',
@@ -205,58 +200,55 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'payPrice',
       label: '支付金额',
-      content: (data: PayRefundApi.Refund) =>
+      render: (val) =>
         h(
           Tag,
           { color: 'success' },
-          () => `￥${erpPriceInputFormatter(data?.payPrice || 0)}`,
+          () => `￥${erpPriceInputFormatter(val || 0)}`,
         ),
     },
     {
       field: 'refundPrice',
       label: '退款金额',
-      content: (data: PayRefundApi.Refund) =>
+      render: (val) =>
         h(
           Tag,
           { color: 'danger' },
-          () => `￥${erpPriceInputFormatter(data?.refundPrice || 0)}`,
+          () => `￥${erpPriceInputFormatter(val || 0)}`,
         ),
     },
     {
       field: 'status',
       label: '退款状态',
-      content: (data: any) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_REFUND_STATUS,
-          value: data?.status,
+          value: val,
         }),
     },
     {
       field: 'successTime',
       label: '退款时间',
-      content: (data: PayRefundApi.Refund) =>
-        formatDateTime(data?.successTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: PayRefundApi.Refund) =>
-        formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'updateTime',
       label: '更新时间',
-      content: (data: PayRefundApi.Refund) =>
-        formatDateTime(data?.updateTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     // 渠道信息部分
     {
       field: 'channelCode',
       label: '退款渠道',
-      content: (data: PayRefundApi.Refund) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_CHANNEL_CODE,
-          value: data?.channelCode,
+          value: val,
         }),
     },
     {
diff --git a/apps/web-antd/src/views/pay/transfer/data.ts b/apps/web-antd/src/views/pay/transfer/data.ts
index 0a8d7c401..9f33dfe82 100644
--- a/apps/web-antd/src/views/pay/transfer/data.ts
+++ b/apps/web-antd/src/views/pay/transfer/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { PayTransferApi } from '#/api/pay/transfer';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -191,14 +190,12 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'merchantTransferId',
       label: '商户单号',
-      content: (data: PayTransferApi.Transfer) =>
-        h(Tag, {}, () => data?.merchantTransferId),
+      render: (val) => h(Tag, {}, () => val),
     },
     {
       field: 'no',
       label: '转账单号',
-      content: (data: PayTransferApi.Transfer) =>
-        h(Tag, { color: 'orange' }, () => data?.no),
+      render: (val) => h(Tag, { color: 'orange' }, () => val),
     },
     {
       field: 'appId',
@@ -207,33 +204,31 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '转账状态',
-      content: (data: any) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_TRANSFER_STATUS,
-          value: data?.status,
+          value: val,
         }),
     },
     {
       field: 'price',
       label: '转账金额',
-      content: (data: PayTransferApi.Transfer) =>
+      render: (val) =>
         h(
           Tag,
           { color: 'success' },
-          () => `￥${erpPriceInputFormatter(data?.price || 0)}`,
+          () => `￥${erpPriceInputFormatter(val || 0)}`,
         ),
     },
     {
       field: 'successTime',
       label: '转账时间',
-      content: (data: PayTransferApi.Transfer) =>
-        formatDateTime(data?.successTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: PayTransferApi.Transfer) =>
-        formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'userName',
@@ -246,10 +241,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'channelCode',
       label: '支付渠道',
-      content: (data: PayTransferApi.Transfer) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_CHANNEL_CODE,
-          value: data?.channelCode,
+          value: val,
         }),
     },
     {
@@ -259,10 +254,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'channelTransferNo',
       label: '渠道单号',
-      content: (data: PayTransferApi.Transfer) =>
-        data?.channelTransferNo
-          ? h(Tag, { color: 'success' }, () => data.channelTransferNo)
-          : '',
+      render: (val) => (val ? h(Tag, { color: 'success' }, () => val) : ''),
     },
     {
       field: 'notifyUrl',
diff --git a/apps/web-antd/src/views/system/dept/data.ts b/apps/web-antd/src/views/system/dept/data.ts
index 09b222441..f5421c429 100644
--- a/apps/web-antd/src/views/system/dept/data.ts
+++ b/apps/web-antd/src/views/system/dept/data.ts
@@ -72,7 +72,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '负责人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择负责人',
diff --git a/apps/web-antd/src/views/system/dict/data.ts b/apps/web-antd/src/views/system/dict/data.ts
index b20fab3e9..a2c6ede66 100644
--- a/apps/web-antd/src/views/system/dict/data.ts
+++ b/apps/web-antd/src/views/system/dict/data.ts
@@ -187,7 +187,7 @@ export function useDataFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: (values) => {
         return {
-          api: () => getSimpleDictTypeList(),
+          api: getSimpleDictTypeList,
           placeholder: '请输入字典类型',
           labelField: 'name',
           valueField: 'type',
diff --git a/apps/web-antd/src/views/system/loginlog/data.ts b/apps/web-antd/src/views/system/loginlog/data.ts
index 911b021a6..24433e9ac 100644
--- a/apps/web-antd/src/views/system/loginlog/data.ts
+++ b/apps/web-antd/src/views/system/loginlog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemLoginLogApi } from '#/api/system/login-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -110,10 +109,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'logType',
       label: '操作类型',
-      content: (data: SystemLoginLogApi.LoginLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_LOGIN_TYPE,
-          value: data?.logType,
+          value: val,
         });
       },
     },
@@ -132,19 +131,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'result',
       label: '登录结果',
-      content: (data: SystemLoginLogApi.LoginLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_LOGIN_RESULT,
-          value: data?.result,
+          value: val,
         });
       },
     },
     {
       field: 'createTime',
       label: '登录日期',
-      content: (data: SystemLoginLogApi.LoginLog) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/system/mail/log/data.ts b/apps/web-antd/src/views/system/mail/log/data.ts
index b5113c564..3a12081d5 100644
--- a/apps/web-antd/src/views/system/mail/log/data.ts
+++ b/apps/web-antd/src/views/system/mail/log/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemMailLogApi } from '#/api/system/mail/log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -59,7 +58,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '邮箱账号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleMailAccountList(),
+        api: getSimpleMailAccountList,
         labelField: 'mail',
         valueField: 'id',
         allowClear: true,
@@ -164,8 +163,8 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: SystemMailLogApi.MailLog) => {
-        return formatDateTime(data?.createTime || '') as string;
+      render: (val) => {
+        return formatDateTime(val) as string;
       },
     },
     {
@@ -175,14 +174,14 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userId',
       label: '接收用户',
-      content: (data: SystemMailLogApi.MailLog) => {
-        if (data?.userType && data?.userId) {
+      render: (val, data) => {
+        if (data?.userType && val) {
           return h('div', [
             h(DictTag, {
               type: DICT_TYPE.USER_TYPE,
               value: data.userType,
             }),
-            ` (${data.userId})`,
+            ` (${val})`,
           ]);
         }
         return '无';
@@ -191,10 +190,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'toMails',
       label: '接收信息',
-      content: (data: SystemMailLogApi.MailLog) => {
+      render: (val, data) => {
         const lines: string[] = [];
-        if (data?.toMails && data.toMails.length > 0) {
-          lines.push(`收件：${data.toMails.join('、')}`);
+        if (val && val.length > 0) {
+          lines.push(`收件：${val.join('、')}`);
         }
         if (data?.ccMails && data.ccMails.length > 0) {
           lines.push(`抄送：${data.ccMails.join('、')}`);
@@ -227,28 +226,26 @@ export function useDetailSchema(): DescriptionItemSchema[] {
       field: 'templateContent',
       label: '邮件内容',
       span: 2,
-      content: (data: SystemMailLogApi.MailLog) => {
+      render: (val) => {
         return h('div', {
-          innerHTML: data?.templateContent || '',
+          innerHTML: val || '',
         });
       },
     },
     {
       field: 'sendStatus',
       label: '发送状态',
-      content: (data: SystemMailLogApi.MailLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS,
-          value: data?.sendStatus,
+          value: val,
         });
       },
     },
     {
       field: 'sendTime',
       label: '发送时间',
-      content: (data: SystemMailLogApi.MailLog) => {
-        return formatDateTime(data?.sendTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'sendMessageId',
diff --git a/apps/web-antd/src/views/system/mail/template/data.ts b/apps/web-antd/src/views/system/mail/template/data.ts
index f466a8319..f7345abb5 100644
--- a/apps/web-antd/src/views/system/mail/template/data.ts
+++ b/apps/web-antd/src/views/system/mail/template/data.ts
@@ -42,7 +42,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '邮箱账号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleMailAccountList(),
+        api: getSimpleMailAccountList,
         labelField: 'mail',
         valueField: 'id',
         placeholder: '请选择邮箱账号',
@@ -185,7 +185,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '邮箱账号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleMailAccountList(),
+        api: getSimpleMailAccountList,
         labelField: 'mail',
         valueField: 'id',
         allowClear: true,
diff --git a/apps/web-antd/src/views/system/notify/message/data.ts b/apps/web-antd/src/views/system/notify/message/data.ts
index b52841f44..c6a315229 100644
--- a/apps/web-antd/src/views/system/notify/message/data.ts
+++ b/apps/web-antd/src/views/system/notify/message/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -166,10 +165,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userType',
       label: '用户类型',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.USER_TYPE,
-          value: data?.userType,
+          value: val,
         });
       },
     },
@@ -196,9 +195,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'templateParams',
       label: '模版参数',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         try {
-          return JSON.stringify(data?.templateParams);
+          return JSON.stringify(val);
         } catch {
           return '';
         }
@@ -207,36 +206,32 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'templateType',
       label: '模版类型',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
-          value: data?.templateType,
+          value: val,
         });
       },
     },
     {
       field: 'readStatus',
       label: '是否已读',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_BOOLEAN_STRING,
-          value: data?.readStatus,
+          value: val,
         });
       },
     },
     {
       field: 'readTime',
       label: '阅读时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.readTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/system/notify/my/data.ts b/apps/web-antd/src/views/system/notify/my/data.ts
index c24d4433b..b31d437c2 100644
--- a/apps/web-antd/src/views/system/notify/my/data.ts
+++ b/apps/web-antd/src/views/system/notify/my/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -103,36 +102,32 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '发送时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'templateType',
       label: '消息类型',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
-          value: data?.templateType,
+          value: val,
         });
       },
     },
     {
       field: 'readStatus',
       label: '是否已读',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_BOOLEAN_STRING,
-          value: data?.readStatus,
+          value: val,
         });
       },
     },
     {
       field: 'readTime',
       label: '阅读时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.readTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'templateContent',
diff --git a/apps/web-antd/src/views/system/notify/template/data.ts b/apps/web-antd/src/views/system/notify/template/data.ts
index d9d823938..d22b16ce9 100644
--- a/apps/web-antd/src/views/system/notify/template/data.ts
+++ b/apps/web-antd/src/views/system/notify/template/data.ts
@@ -195,7 +195,7 @@ export function useSendNotifyFormSchema(): VbenFormSchema[] {
       label: '接收人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择接收人',
diff --git a/apps/web-antd/src/views/system/operatelog/data.ts b/apps/web-antd/src/views/system/operatelog/data.ts
index d64971cc9..3144daa90 100644
--- a/apps/web-antd/src/views/system/operatelog/data.ts
+++ b/apps/web-antd/src/views/system/operatelog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemOperateLogApi } from '#/api/system/operate-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { formatDateTime } from '@vben/utils';
@@ -16,7 +15,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '操作人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         allowClear: true,
@@ -134,7 +133,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'traceId',
       label: '链路追踪',
-      hidden: (data: SystemOperateLogApi.OperateLog) => !data?.traceId,
+      show: (data) => !data?.traceId,
     },
     {
       field: 'userId',
@@ -167,13 +166,14 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'extra',
       label: '操作拓展参数',
-      hidden: (data: SystemOperateLogApi.OperateLog) => !data?.extra,
+      show: (val) => !val,
     },
     {
+      field: 'requestUrl',
       label: '请求 URL',
-      content: (data: SystemOperateLogApi.OperateLog) => {
-        if (data?.requestMethod && data?.requestUrl) {
-          return `${data.requestMethod} ${data.requestUrl}`;
+      render: (val, data) => {
+        if (data?.requestMethod && val) {
+          return `${data.requestMethod} ${val}`;
         }
         return '';
       },
@@ -181,9 +181,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '操作时间',
-      content: (data: SystemOperateLogApi.OperateLog) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'bizId',
diff --git a/apps/web-antd/src/views/system/sms/log/data.ts b/apps/web-antd/src/views/system/sms/log/data.ts
index b31cd0bf9..3babce416 100644
--- a/apps/web-antd/src/views/system/sms/log/data.ts
+++ b/apps/web-antd/src/views/system/sms/log/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemSmsLogApi } from '#/api/system/sms/log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -30,7 +29,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '短信渠道',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleSmsChannelList(),
+        api: getSimpleSmsChannelList,
         labelField: 'signature',
         valueField: 'id',
         allowClear: true,
@@ -179,9 +178,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: SystemSmsLogApi.SmsLog) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'mobile',
@@ -198,10 +195,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'templateType',
       label: '模板类型',
-      content: (data: SystemSmsLogApi.SmsLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE,
-          value: data?.templateType,
+          value: val,
         });
       },
     },
@@ -212,19 +209,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'sendStatus',
       label: '发送状态',
-      content: (data: SystemSmsLogApi.SmsLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SMS_SEND_STATUS,
-          value: data?.sendStatus,
+          value: val,
         });
       },
     },
     {
       field: 'sendTime',
       label: '发送时间',
-      content: (data: SystemSmsLogApi.SmsLog) => {
-        return formatDateTime(data?.sendTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'apiSendCode',
@@ -237,19 +232,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'receiveStatus',
       label: '接收状态',
-      content: (data: SystemSmsLogApi.SmsLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS,
-          value: data?.receiveStatus,
+          value: val,
         });
       },
     },
     {
       field: 'receiveTime',
       label: '接收时间',
-      content: (data: SystemSmsLogApi.SmsLog) => {
-        return formatDateTime(data?.receiveTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'apiReceiveCode',
diff --git a/apps/web-antd/src/views/system/sms/template/data.ts b/apps/web-antd/src/views/system/sms/template/data.ts
index 104f34cfb..13786c56a 100644
--- a/apps/web-antd/src/views/system/sms/template/data.ts
+++ b/apps/web-antd/src/views/system/sms/template/data.ts
@@ -52,7 +52,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '短信渠道',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleSmsChannelList(),
+        api: getSimpleSmsChannelList,
         labelField: 'signature',
         valueField: 'id',
         placeholder: '请选择短信渠道',
@@ -146,7 +146,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '短信渠道',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleSmsChannelList(),
+        api: getSimpleSmsChannelList,
         labelField: 'signature',
         valueField: 'id',
         allowClear: true,
diff --git a/apps/web-antd/src/views/system/social/user/data.ts b/apps/web-antd/src/views/system/social/user/data.ts
index cbef1b093..2c1604f95 100644
--- a/apps/web-antd/src/views/system/social/user/data.ts
+++ b/apps/web-antd/src/views/system/social/user/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemSocialUserApi } from '#/api/system/social/user';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -8,6 +7,8 @@ import { h } from 'vue';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
+import { Image } from 'ant-design-vue';
+
 import { DictTag } from '#/components/dict-tag';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -111,10 +112,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'type',
       label: '社交平台',
-      content: (data: SystemSocialUserApi.SocialUser) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SOCIAL_TYPE,
-          value: data?.type,
+          value: val,
         });
       },
     },
@@ -125,20 +126,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'avatar',
       label: '用户头像',
-      // TODO @芋艿：使用 antd 的 Image 组件
-      content: (data: SystemSocialUserApi.SocialUser) => {
-        if (data?.avatar) {
-          return h('img', {
-            src: data.avatar,
-            style: 'width: 30px; height: 30px; cursor: pointer;',
-            onClick: () => {
-              // 可以添加图片预览功能
-              window.open(data.avatar, '_blank');
-            },
-          });
-        }
-        return '无';
-      },
+      render: (val) => (val ? h(Image, { src: val }) : '无'),
     },
     {
       field: 'token',
diff --git a/apps/web-antd/src/views/system/tenant/data.ts b/apps/web-antd/src/views/system/tenant/data.ts
index cfc6c5c21..d2a7dbf70 100644
--- a/apps/web-antd/src/views/system/tenant/data.ts
+++ b/apps/web-antd/src/views/system/tenant/data.ts
@@ -35,7 +35,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '租户套餐',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getTenantPackageList(),
+        api: getTenantPackageList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择租户套餐',
diff --git a/apps/web-antd/src/views/system/user/data.ts b/apps/web-antd/src/views/system/user/data.ts
index 8ef2be2f0..fca5ddefd 100644
--- a/apps/web-antd/src/views/system/user/data.ts
+++ b/apps/web-antd/src/views/system/user/data.ts
@@ -67,7 +67,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '岗位',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimplePostList(),
+        api: getSimplePostList,
         labelField: 'name',
         valueField: 'id',
         mode: 'multiple',
@@ -213,7 +213,7 @@ export function useAssignRoleFormSchema(): VbenFormSchema[] {
       label: '角色',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleRoleList(),
+        api: getSimpleRoleList,
         labelField: 'name',
         valueField: 'id',
         mode: 'multiple',
diff --git a/apps/web-ele/src/api/bpm/definition/index.ts b/apps/web-ele/src/api/bpm/definition/index.ts
index befd60650..502d5e366 100644
--- a/apps/web-ele/src/api/bpm/definition/index.ts
+++ b/apps/web-ele/src/api/bpm/definition/index.ts
@@ -6,7 +6,10 @@ export namespace BpmProcessDefinitionApi {
   /** 流程定义 */
   export interface ProcessDefinition {
     id: string;
+    key?: string;
     version: number;
+    name: string;
+    description: string;
     deploymentTime: number;
     suspensionState: number;
     modelType: number;
@@ -15,6 +18,7 @@ export namespace BpmProcessDefinitionApi {
     bpmnXml?: string;
     simpleModel?: string;
     formFields?: string[];
+    icon?: string;
   }
 }
 
diff --git a/apps/web-ele/src/api/bpm/form/index.ts b/apps/web-ele/src/api/bpm/form/index.ts
index 0789071b2..99c1299e9 100644
--- a/apps/web-ele/src/api/bpm/form/index.ts
+++ b/apps/web-ele/src/api/bpm/form/index.ts
@@ -5,7 +5,7 @@ import { requestClient } from '#/api/request';
 export namespace BpmFormApi {
   /** 流程表单 */
   export interface Form {
-    id?: number | undefined;
+    id?: number;
     name: string;
     conf: string;
     fields: string[];
@@ -23,7 +23,7 @@ export async function getFormPage(params: PageParam) {
 }
 
 /** 获取表单详情 */
-export async function getFormDetail(id: number) {
+export async function getForm(id: number) {
   return requestClient.get<BpmFormApi.Form>(`/bpm/form/get?id=${id}`);
 }
 
diff --git a/apps/web-ele/src/api/bpm/model/index.ts b/apps/web-ele/src/api/bpm/model/index.ts
index 443b85c5e..cd2afbc84 100644
--- a/apps/web-ele/src/api/bpm/model/index.ts
+++ b/apps/web-ele/src/api/bpm/model/index.ts
@@ -52,7 +52,7 @@ export interface ModelCategoryInfo {
 }
 
 /** 获取流程模型列表 */
-export async function getModelList(name: string | undefined) {
+export async function getModelList(name?: string) {
   return requestClient.get<BpmModelApi.Model[]>('/bpm/model/list', {
     params: { name },
   });
diff --git a/apps/web-ele/src/api/bpm/processInstance/index.ts b/apps/web-ele/src/api/bpm/processInstance/index.ts
index 369e0dddd..ecbc03855 100644
--- a/apps/web-ele/src/api/bpm/processInstance/index.ts
+++ b/apps/web-ele/src/api/bpm/processInstance/index.ts
@@ -1,5 +1,8 @@
+import type {
+  BpmCandidateStrategyEnum,
+  BpmNodeTypeEnum,
+} from '@vben/constants';
 import type { PageParam, PageResult } from '@vben/request';
-import type { BpmCandidateStrategyEnum, BpmNodeTypeEnum } from '@vben/utils';
 
 import type { BpmTaskApi } from '../task';
 
@@ -12,6 +15,7 @@ export namespace BpmProcessInstanceApi {
   export interface Task {
     id: number;
     name: string;
+    assigneeUser?: User;
   }
 
   export interface User {
@@ -35,11 +39,12 @@ export namespace BpmProcessInstanceApi {
     candidateStrategy?: BpmCandidateStrategyEnum;
     candidateUsers?: User[];
     endTime?: Date;
-    id: number;
+    id: string;
     name: string;
     nodeType: BpmNodeTypeEnum;
     startTime?: Date;
     status: number;
+    processInstanceId?: string;
     tasks: ApprovalTaskInfo[];
   }
 
@@ -47,6 +52,7 @@ export namespace BpmProcessInstanceApi {
   export interface ProcessInstance {
     businessKey: string;
     category: string;
+    categoryName?: string;
     createTime: string;
     endTime: string;
     fields: string[];
@@ -60,6 +66,10 @@ export namespace BpmProcessInstanceApi {
     startTime?: Date;
     startUser?: User;
     status: number;
+    summary?: {
+      key: string;
+      value: string;
+    }[];
     tasks?: BpmProcessInstanceApi.Task[];
   }
 
diff --git a/apps/web-ele/src/api/bpm/task/index.ts b/apps/web-ele/src/api/bpm/task/index.ts
index 510ea1747..63e1af886 100644
--- a/apps/web-ele/src/api/bpm/task/index.ts
+++ b/apps/web-ele/src/api/bpm/task/index.ts
@@ -13,6 +13,7 @@ export namespace BpmTaskApi {
     status: number; // 监听器状态
     event: string; // 监听事件
     valueType: string; // 监听器值类型
+    processInstance?: BpmProcessInstanceApi.ProcessInstance; // 流程实例
   }
 
   // 流程任务
@@ -130,3 +131,10 @@ export const getChildrenTaskList = async (id: string) => {
     `/bpm/task/list-by-parent-task-id?parentTaskId=${id}`,
   );
 };
+
+// 撤回任务
+export const withdrawTask = async (taskId: string) => {
+  return await requestClient.put('/bpm/task/withdraw', null, {
+    params: { taskId },
+  });
+};
diff --git a/apps/web-ele/src/components/description/description.vue b/apps/web-ele/src/components/description/description.vue
index 0c5a49b36..f4b420d86 100644
--- a/apps/web-ele/src/components/description/description.vue
+++ b/apps/web-ele/src/components/description/description.vue
@@ -1,79 +1,170 @@
 <script lang="tsx">
-import type { DescriptionProps } from 'element-plus';
+import type { CSSProperties, PropType, Slots } from 'vue';
 
-import type { PropType } from 'vue';
+import type { DescriptionItemSchema, DescriptionProps } from './typing';
 
-import type { DescriptionItemSchema, DescriptionsOptions } from './typing';
+import { computed, defineComponent, ref, unref, useAttrs } from 'vue';
 
-import { defineComponent } from 'vue';
-
-import { get } from '@vben/utils';
+import { get, getNestedValue, isFunction } from '@vben/utils';
 
 import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
 
-/** 对 Descriptions 进行二次封装 */
-const Description = defineComponent({
-  name: 'Descriptions',
-  props: {
-    data: {
-      type: Object as PropType<Record<string, any>>,
-      default: () => ({}),
-    },
-    schema: {
-      type: Array as PropType<DescriptionItemSchema[]>,
-      default: () => [],
-    },
-    // Descriptions 原生 props
-    componentProps: {
-      type: Object as PropType<DescriptionProps>,
-      default: () => ({}),
+const props = {
+  bordered: { default: true, type: Boolean },
+  column: {
+    default: () => {
+      return { lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4 };
     },
+    type: [Number, Object],
   },
+  data: { type: Object },
+  schema: {
+    default: () => [],
+    type: Array as PropType<DescriptionItemSchema[]>,
+  },
+  size: {
+    default: 'default',
+    type: String,
+    validator: (v: string) =>
+      ['default', 'middle', 'small', undefined].includes(v),
+  },
+  title: { default: '', type: String },
+  direction: { default: 'horizontal', type: String },
+};
 
-  setup(props: DescriptionsOptions) {
-    // TODO @puhui999：每个 field 的 slot 的考虑
-    // TODO @puhui999：from 5.0：extra: () => getSlot(slots, 'extra')
-    /** 过滤掉不需要展示的 */
-    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;
+function getSlot(slots: Slots, slot: string, data?: any) {
+  if (!slots || !Reflect.has(slots, slot)) {
+    return null;
+  }
+  if (!isFunction(slots[slot])) {
+    console.error(`${slot} is not a function!`);
+    return null;
+  }
+  const slotFn = slots[slot];
+  if (!slotFn) return null;
+  return slotFn({ data });
+}
+
+export default defineComponent({
+  name: 'Description',
+  props,
+  setup(props, { slots }) {
+    const propsRef = ref<null | Partial<DescriptionProps>>(null);
+
+    const prefixCls = 'description';
+    const attrs = useAttrs();
+
+    const getMergeProps = computed(() => {
+      return {
+        ...props,
+        ...(unref(propsRef) as any),
+      } as DescriptionProps;
+    });
+
+    const getProps = computed(() => {
+      const opt = {
+        ...unref(getMergeProps),
+      };
+      return opt as DescriptionProps;
+    });
+
+    const getDescriptionsProps = computed(() => {
+      return { ...unref(attrs), ...unref(getProps) } as DescriptionProps;
+    });
+
+    // 防止换行
+    function renderLabel({
+      label,
+      labelMinWidth,
+      labelStyle,
+    }: DescriptionItemSchema) {
+      if (!labelStyle && !labelMinWidth) {
+        return label;
       }
-      return item.field ? get(props.data, item.field) : null;
-    };
 
-    return () => (
-      <ElDescriptions
-        {...props}
-        border={props.componentProps?.border}
-        column={props.componentProps?.column}
-        direction={props.componentProps?.direction}
-        extra={props.componentProps?.extra}
-        size={props.componentProps?.size}
-        title={props.componentProps?.title}
-      >
-        {props.schema?.filter(shouldShowItem).map((item) => (
-          <ElDescriptionsItem
-            key={item.field || String(item.label)}
-            label={item.label as string}
-            span={item.span}
-          >
-            {renderContent(item)}
-          </ElDescriptionsItem>
-        ))}
-      </ElDescriptions>
-    );
+      const labelStyles: CSSProperties = {
+        ...labelStyle,
+        minWidth: `${labelMinWidth}px `,
+      };
+      return <div style={labelStyles}>{label}</div>;
+    }
+
+    function renderItem() {
+      const { data, schema } = unref(getProps);
+      return unref(schema)
+        .map((item) => {
+          const { contentMinWidth, field, render, show, span } = item;
+
+          if (show && isFunction(show) && !show(data)) {
+            return null;
+          }
+
+          function getContent() {
+            const _data = unref(getProps)?.data;
+            if (!_data) {
+              return null;
+            }
+            const getField = field.includes('.')
+              ? (getNestedValue(_data, field) ?? get(_data, field))
+              : get(_data, field);
+            // if (
+            //   getField &&
+            //   !Object.prototype.hasOwnProperty.call(toRefs(_data), field)
+            // ) {
+            //   return isFunction(render) ? render('', _data) : (getField ?? '');
+            // }
+            return isFunction(render)
+              ? render(getField, _data)
+              : (getField ?? '');
+          }
+
+          const width = contentMinWidth;
+          return (
+            <ElDescriptionsItem key={field} span={span}>
+              {{
+                label: () => {
+                  return renderLabel(item);
+                },
+                default: () => {
+                  if (item.slot) {
+                    const slotContent = getSlot(slots, item.slot, data);
+                    return slotContent;
+                  }
+                  if (!contentMinWidth) {
+                    return getContent();
+                  }
+                  const style: CSSProperties = {
+                    minWidth: `${width}px`,
+                  };
+                  return <div style={style}>{getContent()}</div>;
+                },
+              }}
+            </ElDescriptionsItem>
+          );
+        })
+        .filter((item) => !!item);
+    }
+
+    function renderDesc() {
+      const extraSlot = getSlot(slots, 'extra');
+      const slotsObj: any = {
+        default: () => renderItem(),
+      };
+      if (extraSlot) {
+        slotsObj.extra = () => extraSlot;
+      }
+      return (
+        <ElDescriptions
+          class={`${prefixCls}`}
+          title={unref(getMergeProps).title}
+          {...(unref(getDescriptionsProps) as any)}
+        >
+          {slotsObj}
+        </ElDescriptions>
+      );
+    }
+
+    return () => renderDesc();
   },
 });
-
-// TODO @puhui999：from 5.0：emits: ['register'] 事件
-export default Description;
 </script>
diff --git a/apps/web-ele/src/components/description/typing.ts b/apps/web-ele/src/components/description/typing.ts
index 5a6e64751..eb16c33d2 100644
--- a/apps/web-ele/src/components/description/typing.ts
+++ b/apps/web-ele/src/components/description/typing.ts
@@ -1,27 +1,41 @@
-import type { DescriptionProps } from 'element-plus';
+import type { DescriptionProps as ElDescriptionProps } from 'element-plus';
+import type { JSX } from 'vue/jsx-runtime';
 
 import type { CSSProperties, VNode } from 'vue';
 
-// TODO @puhui999：【content】这个纠结下；1）vben2.0 是 render；https://doc.vvbin.cn/components/desc.html#usage 2）
-// TODO @puhui999：vben2.0 还有 sapn【done】、labelMinWidth、contentMinWidth
-// TODO @puhui999：【hidden】这个纠结下；1）vben2.0 是 show；
+import type { Recordable } from '@vben/types';
+
 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; // 是否显示
+  labelMinWidth?: number;
+  contentMinWidth?: number;
+  // 自定义标签样式
+  labelStyle?: CSSProperties;
+  // 对应 data 中的字段名
+  field: string;
+  // 内容的描述
+  label: JSX.Element | string | VNode;
+  // 包含列的数量
+  span?: number;
+  // 是否显示
+  show?: (...arg: any) => boolean;
+  // 插槽名称
+  slot?: string;
+  // 自定义需要展示的内容
+  render?: (
+    val: any,
+    data?: Recordable<any>,
+  ) => Element | JSX.Element | number | string | undefined | VNode;
 }
 
-// TODO @puhui999：vben2.0 还有 title【done】、bordered【done】d、useCollapse、collapseOptions
-// TODO @puhui999：from 5.0：bordered 默认为 true
-// TODO @puhui999：from 5.0：column 默认为 lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4
-// TODO @puhui999：from 5.0：size 默认为 small；有 'default', 'middle', 'small', undefined
-// TODO @puhui999：from 5.0：useCollapse 默认为 true
-export interface DescriptionsOptions {
-  data?: Record<string, any>; // 数据
-  schema?: DescriptionItemSchema[]; // 描述项配置
-  componentProps?: DescriptionProps; // antd Descriptions 组件参数
+export interface DescriptionProps extends ElDescriptionProps {
+  // 描述项配置
+  schema: DescriptionItemSchema[];
+  // 数据
+  data: Recordable<any>;
+  // 是否包含边框
+  bordered?: boolean;
+}
+
+export interface DescInstance {
+  setDescProps(descProps: Partial<DescriptionProps>): void;
 }
diff --git a/apps/web-ele/src/components/description/use-description.ts b/apps/web-ele/src/components/description/use-description.ts
index c131be26a..fd24920f0 100644
--- a/apps/web-ele/src/components/description/use-description.ts
+++ b/apps/web-ele/src/components/description/use-description.ts
@@ -1,71 +1,31 @@
-import type { DescriptionsOptions } from './typing';
+import type { Component } from 'vue';
 
-import { defineComponent, h, isReactive, reactive, watch } from 'vue';
+import type { DescInstance, DescriptionProps } from './typing';
+
+import { h, reactive } from 'vue';
 
 import Description from './description.vue';
 
-/** 描述列表 api 定义 */
-class DescriptionApi {
-  private state = reactive<Record<string, any>>({});
+export function useDescription(options?: Partial<DescriptionProps>) {
+  const propsState = reactive<Partial<DescriptionProps>>(options || {});
 
-  constructor(options: DescriptionsOptions) {
-    this.state = { ...options };
-  }
+  const api: DescInstance = {
+    setDescProps: (descProps: Partial<DescriptionProps>): void => {
+      Object.assign(propsState, descProps);
+    },
+  };
 
-  getState(): DescriptionsOptions {
-    return this.state as DescriptionsOptions;
-  }
-
-  // TODO @puhui999：【setState】纠结下：1）vben2.0 是 data https://doc.vvbin.cn/components/desc.html#usage；
-  setState(newState: Partial<DescriptionsOptions>) {
-    this.state = { ...this.state, ...newState };
-  }
-}
-
-export type ExtendedDescriptionApi = DescriptionApi;
-
-export function useDescription(options: DescriptionsOptions) {
-  const IS_REACTIVE = isReactive(options);
-  const api = new DescriptionApi(options);
-  // 扩展API
-  const extendedApi: ExtendedDescriptionApi = api as never;
-  const Desc = defineComponent({
+  // 创建一个包装组件，将 propsState 合并到 props 中
+  const DescriptionWrapper: Component = {
     name: 'UseDescription',
     inheritAttrs: false,
-    setup(_, { attrs, slots }) {
-      // 合并props和attrs到state
-      api.setState({ ...attrs });
-
-      return () =>
-        h(
-          Description,
-          {
-            ...api.getState(),
-            ...attrs,
-          },
-          slots,
-        );
+    setup(_props, { attrs, slots }) {
+      return () => {
+        // @ts-ignore - 避免类型实例化过深
+        return h(Description, { ...propsState, ...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;
+  return [DescriptionWrapper, api] as const;
 }
diff --git a/apps/web-ele/src/router/routes/modules/bpm.ts b/apps/web-ele/src/router/routes/modules/bpm.ts
new file mode 100644
index 000000000..c6bbc66c2
--- /dev/null
+++ b/apps/web-ele/src/router/routes/modules/bpm.ts
@@ -0,0 +1,117 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/bpm',
+    name: 'bpm',
+    meta: {
+      title: '工作流',
+      hideInMenu: true,
+    },
+    children: [
+      // {
+      //   path: 'task',
+      //   name: 'BpmTask',
+      //   meta: {
+      //     title: '审批中心',
+      //     icon: 'ant-design:history-outlined',
+      //   },
+      //   children: [
+      //     {
+      //       path: 'my',
+      //       name: 'BpmTaskMy',
+      //       component: () => import('#/views/bpm/processInstance/index.vue'),
+      //       meta: {
+      //         title: '我的流程',
+      //       },
+      //     },
+      //   ],
+      // },
+      // {
+      //   path: 'process-instance/detail',
+      //   component: () => import('#/views/bpm/processInstance/detail/index.vue'),
+      //   name: 'BpmProcessInstanceDetail',
+      //   meta: {
+      //     title: '流程详情',
+      //     activePath: '/bpm/task/my',
+      //     icon: 'ant-design:history-outlined',
+      //     keepAlive: false,
+      //     hideInMenu: true,
+      //   },
+      //   props: (route) => {
+      //     return {
+      //       id: route.query.id,
+      //       taskId: route.query.taskId,
+      //       activityId: route.query.activityId,
+      //     };
+      //   },
+      // },
+      {
+        path: '/bpm/manager/form/edit',
+        name: 'BpmFormEditor',
+        component: () => import('#/views/bpm/form/designer/index.vue'),
+        meta: {
+          title: '设计流程表单',
+          activePath: '/bpm/manager/form',
+        },
+        props: (route) => {
+          return {
+            id: route.query.id,
+            type: route.query.type,
+            copyId: route.query.copyId,
+          };
+        },
+      },
+      // {
+      //   path: 'manager/model/create',
+      //   component: () => import('#/views/bpm/model/form/index.vue'),
+      //   name: 'BpmModelCreate',
+      //   meta: {
+      //     title: '创建流程',
+      //     activePath: '/bpm/manager/model',
+      //     icon: 'carbon:flow-connection',
+      //     hideInMenu: true,
+      //     keepAlive: true,
+      //   },
+      // },
+      // {
+      //   path: 'manager/model/:type/:id',
+      //   component: () => import('#/views/bpm/model/form/index.vue'),
+      //   name: 'BpmModelUpdate',
+      //   meta: {
+      //     title: '修改流程',
+      //     activePath: '/bpm/manager/model',
+      //     icon: 'carbon:flow-connection',
+      //     hideInMenu: true,
+      //     keepAlive: true,
+      //   },
+      // },
+      // {
+      //   path: 'manager/definition',
+      //   component: () => import('#/views/bpm/model/definition/index.vue'),
+      //   name: 'BpmProcessDefinition',
+      //   meta: {
+      //     title: '流程定义',
+      //     activePath: '/bpm/manager/model',
+      //     icon: 'carbon:flow-modeler',
+      //     hideInMenu: true,
+      //     keepAlive: true,
+      //   },
+      // },
+      // {
+      //   path: 'process-instance/report',
+      //   component: () => import('#/views/bpm/processInstance/report/index.vue'),
+      //   name: 'BpmProcessInstanceReport',
+      //   meta: {
+      //     title: '数据报表',
+      //     activePath: '/bpm/manager/model',
+      //     icon: 'carbon:data-2',
+      //     hideInMenu: true,
+      //     keepAlive: true,
+      //   },
+      // },
+    ],
+  },
+];
+
+export default routes;
diff --git a/apps/web-ele/src/views/bpm/form/data.ts b/apps/web-ele/src/views/bpm/form/data.ts
new file mode 100644
index 000000000..315c41db6
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/form/data.ts
@@ -0,0 +1,61 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '表单名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入表单名称',
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '表单名称',
+      minWidth: 200,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 200,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 200,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 240,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/form/designer/data.ts b/apps/web-ele/src/views/bpm/form/designer/data.ts
new file mode 100644
index 000000000..20740cbbb
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/form/designer/data.ts
@@ -0,0 +1,46 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '表单名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入表单名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/form/designer/index.vue b/apps/web-ele/src/views/bpm/form/designer/index.vue
new file mode 100644
index 000000000..625e1dbb2
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/form/designer/index.vue
@@ -0,0 +1,154 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+
+import FcDesigner from '@form-create/designer';
+import { ElButton, ElMessage } from 'element-plus';
+
+import { getForm } from '#/api/bpm/form';
+import {
+  setConfAndFields,
+  useFormCreateDesigner,
+} from '#/components/form-create';
+import { router } from '#/router';
+
+import Form from './modules/form.vue';
+
+defineOptions({ name: 'BpmFormEditor' });
+
+const props = defineProps<{
+  copyId?: number | string;
+  id?: number | string;
+  type: 'copy' | 'create' | 'edit';
+}>();
+
+const loading = ref(false);
+const tabs = useTabs();
+const flowFormConfig = ref();
+const designerRef = ref<InstanceType<typeof FcDesigner>>();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const designerConfig = ref({
+  switchType: [], // 是否可以切换组件类型,或者可以相互切换的字段
+  autoActive: true, // 是否自动选中拖入的组件
+  useTemplate: false, // 是否生成vue2语法的模板组件
+  formOptions: {
+    form: {
+      labelWidth: '100px', // 设置默认的 label 宽度为 100px
+    },
+  }, // 定义表单配置默认值
+  fieldReadonly: false, // 配置field是否可以编辑
+  hiddenDragMenu: false, // 隐藏拖拽操作按钮
+  hiddenDragBtn: false, // 隐藏拖拽按钮
+  hiddenMenu: [], // 隐藏部分菜单
+  hiddenItem: [], // 隐藏部分组件
+  hiddenItemConfig: {}, // 隐藏组件的部分配置项
+  disabledItemConfig: {}, // 禁用组件的部分配置项
+  showSaveBtn: false, // 是否显示保存按钮
+  showConfig: true, // 是否显示右侧的配置界面
+  showBaseForm: true, // 是否显示组件的基础配置表单
+  showControl: true, // 是否显示组件联动
+  showPropsForm: true, // 是否显示组件的属性配置表单
+  showEventForm: true, // 是否显示组件的事件配置表单
+  showValidateForm: true, // 是否显示组件的验证配置表单
+  showFormConfig: true, // 是否显示表单配置
+  showInputData: true, // 是否显示录入按钮
+  showDevice: true, // 是否显示多端适配选项
+  appendConfigData: [], // 定义渲染规则所需的formData
+}); // 表单设计器配置
+
+useFormCreateDesigner(designerRef); // 表单设计器增强
+
+/** 计算属性：获取当前需要加载的表单 ID */
+const currentFormId = computed(() => {
+  switch (props.type) {
+    case 'copy': {
+      return props.copyId;
+    }
+    case 'create':
+    case 'edit': {
+      return props.id;
+    }
+    default: {
+      return undefined;
+    }
+  }
+});
+
+/** 加载表单配置 */
+async function loadFormConfig(id: number) {
+  loading.value = true;
+  try {
+    const formDetail = await getForm(id);
+    flowFormConfig.value = formDetail;
+    if (designerRef.value) {
+      setConfAndFields(designerRef, formDetail.conf, formDetail.fields);
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 初始化设计器 */
+async function initializeDesigner() {
+  const id = currentFormId.value;
+  if (props.type === 'copy' && !id) {
+    ElMessage.error('复制 ID 不能为空');
+    return;
+  }
+  if (id) {
+    await loadFormConfig(Number(id));
+  }
+}
+
+/** 保存表单 */
+function handleSave() {
+  formModalApi
+    .setData({
+      designer: designerRef.value,
+      formConfig: flowFormConfig.value,
+      action: props.type,
+    })
+    .open();
+}
+
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push({
+    name: 'BpmForm',
+  });
+}
+
+/** 初始化 */
+onMounted(() => {
+  initializeDesigner();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleBack" />
+
+    <FcDesigner
+      ref="designerRef"
+      height="90vh"
+      v-loading="loading"
+      :config="designerConfig"
+    >
+      <template #handle>
+        <ElButton size="small" type="primary" @click="handleSave">
+          <IconifyIcon icon="mdi:content-save" />
+          保存
+        </ElButton>
+      </template>
+    </FcDesigner>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/form/designer/modules/form.vue b/apps/web-ele/src/views/bpm/form/designer/modules/form.vue
new file mode 100644
index 000000000..9b9587030
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/form/designer/modules/form.vue
@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import type { FcDesigner } from '@form-create/designer';
+
+import type { BpmFormApi } from '#/api/bpm/form';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createForm, updateForm } from '#/api/bpm/form';
+import { encodeConf, encodeFields } from '#/components/form-create';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const designerComponent = ref<InstanceType<typeof FcDesigner>>();
+const formData = ref<BpmFormApi.Form>();
+const editorAction = ref<string>();
+
+const getTitle = computed(() => {
+  if (!formData.value?.id) {
+    return $t('ui.actionTitle.create', ['流程表单']);
+  }
+  return editorAction.value === 'copy'
+    ? $t('ui.actionTitle.copy', ['流程表单'])
+    : $t('ui.actionTitle.edit', ['流程表单']);
+});
+
+const [Form, formApi] = useVbenForm({
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    try {
+      // 获取表单数据
+      const data = (await formApi.getValues()) as BpmFormApi.Form;
+      // 编码表单配置和表单字段
+      data.conf = encodeConf(designerComponent);
+      data.fields = encodeFields(designerComponent);
+      // 保存表单数据
+      if (formData.value?.id) {
+        await (editorAction.value === 'copy'
+          ? createForm(data)
+          : updateForm(data));
+      } else {
+        await createForm(data);
+      }
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      designerComponent.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<any>();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    // 设置表单设计器组件
+    designerComponent.value = data.designer;
+    formData.value = data.formConfig;
+    editorAction.value = data.action;
+    // 如果是复制，表单名称后缀添加 _copy ，id 置空
+    if (editorAction.value === 'copy' && formData.value) {
+      formData.value = {
+        ...formData.value,
+        name: `${formData.value.name}_copy`,
+        id: undefined,
+      };
+    }
+    try {
+      // 设置到 values
+      if (formData.value) {
+        await formApi.setValues(formData.value);
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/form/index.vue b/apps/web-ele/src/views/bpm/form/index.vue
new file mode 100644
index 000000000..c4e612544
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/form/index.vue
@@ -0,0 +1,185 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmFormApi } from '#/api/bpm/form';
+
+import { onActivated } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteForm, getFormPage } from '#/api/bpm/form';
+import { router } from '#/router';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+defineOptions({ name: 'BpmForm' });
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 新增表单 */
+function handleCreate() {
+  router.push({
+    name: 'BpmFormEditor',
+    query: {
+      type: 'create',
+    },
+  });
+}
+
+/** 编辑表单 */
+function handleEdit(row: BpmFormApi.Form) {
+  router.push({
+    name: 'BpmFormEditor',
+    query: {
+      id: row.id,
+      type: 'edit',
+    },
+  });
+}
+
+/** 复制表单 */
+function handleCopy(row: BpmFormApi.Form) {
+  router.push({
+    name: 'BpmFormEditor',
+    query: {
+      copyId: row.id,
+      type: 'copy',
+    },
+  });
+}
+
+/** 删除表单 */
+async function handleDelete(row: BpmFormApi.Form) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteForm(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 查看表单详情 */
+async function handleDetail(row: BpmFormApi.Form) {
+  detailModalApi.setData(row).open();
+}
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getFormPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmFormApi.Form>,
+});
+
+/** 激活时 */
+onActivated(() => {
+  handleRefresh();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="审批接入（流程表单）"
+        url="https://doc.iocoder.cn/bpm/use-bpm-form/"
+      />
+    </template>
+
+    <DetailModal />
+    <Grid table-title="流程表单">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['流程表单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['bpm:form:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.copy'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.COPY,
+              auth: ['bpm:form:update'],
+              onClick: handleCopy.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['bpm:form:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:form:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['bpm:form:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/form/modules/detail.vue b/apps/web-ele/src/views/bpm/form/modules/detail.vue
new file mode 100644
index 000000000..ad23d235b
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/form/modules/detail.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import FormCreate from '@form-create/element-ui';
+
+import { getForm } from '#/api/bpm/form';
+import { setConfAndFields2 } from '#/components/form-create';
+
+const formConfig = ref<any>({});
+
+const [Modal, modalApi] = useVbenModal({
+  footer: false,
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formConfig.value = await getForm(data.id);
+      setConfAndFields2(
+        formConfig.value,
+        formConfig.value.conf,
+        formConfig.value.fields,
+      );
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    class="w-2/5"
+    title="流程表单详情"
+    :body-style="{
+      maxHeight: '100px',
+    }"
+  >
+    <FormCreate :option="formConfig.option" :rule="formConfig.rule" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/group/data.ts b/apps/web-ele/src/views/bpm/group/data.ts
index 013f6e0bf..4ecf77cf8 100644
--- a/apps/web-ele/src/views/bpm/group/data.ts
+++ b/apps/web-ele/src/views/bpm/group/data.ts
@@ -51,7 +51,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         placeholder: '请选择成员',
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         mode: 'tags',
diff --git a/apps/web-ele/src/views/bpm/processExpression/data.ts b/apps/web-ele/src/views/bpm/processExpression/data.ts
new file mode 100644
index 000000000..76b16d2e1
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processExpression/data.ts
@@ -0,0 +1,126 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'expression',
+      label: '表达式',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入表达式',
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 200,
+    },
+
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'expression',
+      title: '表达式',
+      minWidth: 200,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/processExpression/index.vue b/apps/web-ele/src/views/bpm/processExpression/index.vue
new file mode 100644
index 000000000..658ea4544
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processExpression/index.vue
@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmProcessExpressionApi } from '#/api/bpm/processExpression';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteProcessExpression,
+  getProcessExpressionPage,
+} from '#/api/bpm/processExpression';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建流程表达式 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑流程表达式 */
+function handleEdit(row: BpmProcessExpressionApi.ProcessExpression) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除流程表达式 */
+async function handleDelete(row: BpmProcessExpressionApi.ProcessExpression) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteProcessExpression(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getProcessExpressionPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmProcessExpressionApi.ProcessExpression>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="流程表达式"
+        url="https://doc.iocoder.cn/bpm/expression/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="流程表达式">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['流程表达式']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['bpm:process-expression:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['bpm:process-expression:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['bpm:process-expression:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/processExpression/modules/form.vue b/apps/web-ele/src/views/bpm/processExpression/modules/form.vue
new file mode 100644
index 000000000..9fb981483
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processExpression/modules/form.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { BpmProcessExpressionApi } from '#/api/bpm/processExpression';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createProcessExpression,
+  getProcessExpression,
+  updateProcessExpression,
+} from '#/api/bpm/processExpression';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<BpmProcessExpressionApi.ProcessExpression>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['流程表达式'])
+    : $t('ui.actionTitle.create', ['流程表达式']);
+});
+
+const [Form, formApi] = useVbenForm({
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as BpmProcessExpressionApi.ProcessExpression;
+    try {
+      await (formData.value?.id
+        ? updateProcessExpression(data)
+        : createProcessExpression(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<BpmProcessExpressionApi.ProcessExpression>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getProcessExpression(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/processInstance/data.ts b/apps/web-ele/src/views/bpm/processInstance/data.ts
new file mode 100644
index 000000000..883cc97e2
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/data.ts
@@ -0,0 +1,122 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getCategorySimpleList } from '#/api/bpm/category';
+import { getSimpleProcessDefinitionList } from '#/api/bpm/definition';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '流程名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入流程名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'processDefinitionId',
+      label: '所属流程',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择流程定义',
+        allowClear: true,
+        api: getSimpleProcessDefinitionList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'category',
+      label: '流程分类',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请输入流程分类',
+        allowClear: true,
+        api: getCategorySimpleList,
+        labelField: 'name',
+        valueField: 'code',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '流程状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
+          'number',
+        ),
+        placeholder: '请选择流程状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '发起时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '流程名称',
+      minWidth: 200,
+      fixed: 'left',
+    },
+    {
+      field: 'summary',
+      title: '摘要',
+      minWidth: 200,
+      slots: {
+        default: 'slot-summary',
+      },
+    },
+    {
+      field: 'categoryName',
+      title: '流程分类',
+      minWidth: 120,
+      fixed: 'left',
+    },
+    {
+      field: 'status',
+      title: '流程状态',
+      minWidth: 250,
+      slots: {
+        default: 'slot-status',
+      },
+    },
+    {
+      field: 'startTime',
+      title: '发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'endTime',
+      title: '结束时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/processInstance/index.vue b/apps/web-ele/src/views/bpm/processInstance/index.vue
new file mode 100644
index 000000000..776e2c1a2
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/index.vue
@@ -0,0 +1,205 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { h } from 'vue';
+
+import { DocAlert, Page, prompt } from '@vben/common-ui';
+import { BpmProcessInstanceStatus, DICT_TYPE } from '@vben/constants';
+
+import { ElButton, ElInput, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProcessDefinition } from '#/api/bpm/definition';
+import {
+  cancelProcessInstanceByStartUser,
+  getProcessInstanceMyPage,
+} from '#/api/bpm/processInstance';
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
+import { router } from '#/router';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'BpmProcessInstanceMy' });
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 查看流程实例 */
+function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.id },
+  });
+}
+
+/** 重新发起流程 */
+async function handleCreate(row: BpmProcessInstanceApi.ProcessInstance) {
+  // 如果是【业务表单】，不支持重新发起
+  if (row?.id) {
+    const processDefinitionDetail = await getProcessDefinition(
+      row.processDefinitionId,
+    );
+    if (processDefinitionDetail.formType === 20) {
+      ElMessage.error(
+        '重新发起流程失败，原因：该流程使用业务表单，不支持重新发起',
+      );
+      return;
+    }
+  }
+  // 跳转发起流程界面
+  await router.push({
+    name: 'BpmProcessInstanceCreate',
+    query: { processInstanceId: row?.id },
+  });
+}
+
+/** 取消流程实例 */
+function handleCancel(row: BpmProcessInstanceApi.ProcessInstance) {
+  prompt({
+    component: () => {
+      return h(ElInput, {
+        placeholder: '请输入取消原因',
+        clearable: true,
+        rows: 2,
+        type: 'textarea',
+      });
+    },
+    content: '请输入取消原因',
+    title: '取消流程',
+    modelPropName: 'modelValue',
+  }).then(async (reason) => {
+    if (reason) {
+      await cancelProcessInstanceByStartUser(row.id, reason);
+      ElMessage.success('取消成功');
+      handleRefresh();
+    }
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getProcessInstanceMyPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstance>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="流程发起、取消、重新发起"
+        url="https://doc.iocoder.cn/bpm/process-instance"
+      />
+    </template>
+
+    <Grid table-title="流程状态">
+      <template #slot-summary="{ row }">
+        <div
+          class="flex flex-col py-2"
+          v-if="row.summary && row.summary.length > 0"
+        >
+          <div v-for="(item, index) in row.summary" :key="index">
+            <span class="text-gray-500">
+              {{ item.key }} : {{ item.value }}
+            </span>
+          </div>
+        </div>
+        <div v-else>-</div>
+      </template>
+      <template #slot-status="{ row }">
+        <template
+          v-if="
+            row.status === BpmProcessInstanceStatus.RUNNING &&
+            row.tasks!.length > 0
+          "
+        >
+          <!-- 单人审批 -->
+          <template v-if="row.tasks!.length === 1">
+            <span>
+              <ElButton link type="primary" @click="handleDetail(row)">
+                {{ row.tasks![0]!.assigneeUser?.nickname }}
+              </ElButton>
+              ({{ row.tasks![0]!.name }}) 审批中
+            </span>
+          </template>
+          <!-- 多人审批 -->
+          <template v-else>
+            <span>
+              <ElButton link type="primary" @click="handleDetail(row)">
+                {{ row.tasks![0]!.assigneeUser?.nickname }}
+              </ElButton>
+              等 {{ row.tasks!.length }} 人 ({{ row.tasks![0]!.name }})审批中
+            </span>
+          </template>
+        </template>
+        <!-- 非审批中状态 -->
+        <template v-else>
+          <DictTag
+            :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
+            :value="row.status"
+          />
+        </template>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:process-instance:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('ui.actionTitle.cancel'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              ifShow: row.status === BpmProcessInstanceStatus.RUNNING,
+              auth: ['bpm:process-instance:cancel'],
+              onClick: handleCancel.bind(null, row),
+            },
+            {
+              label: '重新发起',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.ADD,
+              ifShow: row.status !== BpmProcessInstanceStatus.RUNNING,
+              auth: ['bpm:process-instance:create'],
+              onClick: handleCreate.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/processInstance/manager/data.ts b/apps/web-ele/src/views/bpm/processInstance/manager/data.ts
new file mode 100644
index 000000000..a356cd076
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/manager/data.ts
@@ -0,0 +1,156 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getCategorySimpleList } from '#/api/bpm/category';
+import { getSimpleProcessDefinitionList } from '#/api/bpm/definition';
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'startUserId',
+      label: '发起人',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择发起人',
+        allowClear: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '流程名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入流程名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'processDefinitionId',
+      label: '所属流程',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择流程定义',
+        allowClear: true,
+        api: getSimpleProcessDefinitionList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'category',
+      label: '流程分类',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请输入流程分类',
+        allowClear: true,
+        api: getCategorySimpleList,
+        labelField: 'name',
+        valueField: 'code',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '流程状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
+          'number',
+        ),
+        placeholder: '请选择流程状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '发起时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '流程编号',
+      minWidth: 320,
+      fixed: 'left',
+    },
+    {
+      field: 'name',
+      title: '流程名称',
+      minWidth: 200,
+      fixed: 'left',
+    },
+    {
+      field: 'categoryName',
+      title: '流程分类',
+      minWidth: 120,
+      fixed: 'left',
+    },
+    {
+      field: 'startUser.nickname',
+      title: '流程发起人',
+      minWidth: 120,
+    },
+    {
+      field: 'startUser.deptName',
+      title: '发起部门',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '流程状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS },
+      },
+    },
+    {
+      field: 'startTime',
+      title: '发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'endTime',
+      title: '结束时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'durationInMillis',
+      title: '流程耗时',
+      minWidth: 180,
+      formatter: 'formatPast2',
+    },
+    {
+      field: 'tasks',
+      title: '当前审批任务',
+      minWidth: 320,
+      slots: { default: 'tasks' },
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/processInstance/manager/index.vue b/apps/web-ele/src/views/bpm/processInstance/manager/index.vue
new file mode 100644
index 000000000..0afcbc425
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/manager/index.vue
@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { h } from 'vue';
+
+import { DocAlert, Page, prompt } from '@vben/common-ui';
+import { BpmProcessInstanceStatus } from '@vben/constants';
+
+import { ElButton, ElInput, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  cancelProcessInstanceByAdmin,
+  getProcessInstanceManagerPage,
+} from '#/api/bpm/processInstance';
+import { $t } from '#/locales';
+import { router } from '#/router';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'BpmProcessInstanceManager' });
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 查看任务详情 */
+function handleTaskDetail(
+  row: BpmProcessInstanceApi.ProcessInstance,
+  task: BpmProcessInstanceApi.Task,
+) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.id, taskId: task.id },
+  });
+}
+
+/** 查看流程实例 */
+function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.id },
+  });
+}
+
+/** 取消流程实例 */
+function handleCancel(row: BpmProcessInstanceApi.ProcessInstance) {
+  prompt({
+    component: () => {
+      return h(ElInput, {
+        placeholder: '请输入取消原因',
+        clearable: true,
+        rows: 2,
+        type: 'textarea',
+      });
+    },
+    content: '请输入取消原因',
+    title: '取消流程',
+    modelPropName: 'modelValue',
+  }).then(async (reason) => {
+    if (reason) {
+      await cancelProcessInstanceByAdmin(row.id, reason);
+      ElMessage.success('取消成功');
+      handleRefresh();
+    }
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getProcessInstanceManagerPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstance>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm" />
+    </template>
+
+    <Grid table-title="流程实例">
+      <template #tasks="{ row }">
+        <template v-if="row.tasks && row.tasks.length > 0">
+          <ElButton
+            v-for="task in row.tasks"
+            :key="task.id"
+            link
+            type="primary"
+            @click="handleTaskDetail(row, task)"
+          >
+            {{ task.name }}
+          </ElButton>
+        </template>
+        <span v-else>-</span>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:process-instance:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('ui.actionTitle.cancel'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              ifShow: row.status === BpmProcessInstanceStatus.RUNNING,
+              auth: ['bpm:process-instance:cancel'],
+              onClick: handleCancel.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/processListener/data.ts b/apps/web-ele/src/views/bpm/processListener/data.ts
new file mode 100644
index 000000000..339f2b8bf
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processListener/data.ts
@@ -0,0 +1,210 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+export const EVENT_EXECUTION_OPTIONS = [
+  {
+    label: 'start',
+    value: 'start',
+  },
+  {
+    label: 'end',
+    value: 'end',
+  },
+];
+
+export const EVENT_OPTIONS = [
+  { label: 'create', value: 'create' },
+  { label: 'assignment', value: 'assignment' },
+  { label: 'complete', value: 'complete' },
+  { label: 'delete', value: 'delete' },
+  { label: 'update', value: 'update' },
+  { label: 'timeout', value: 'timeout' },
+];
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'type',
+      label: '类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.BPM_PROCESS_LISTENER_TYPE, 'string'),
+        placeholder: '请选择类型',
+        allowClear: true,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'event',
+      label: '事件',
+      component: 'Select',
+      componentProps: {
+        options: EVENT_OPTIONS,
+        placeholder: '请选择事件',
+        allowClear: true,
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        trigger: (values) => (values.event = undefined),
+        componentProps: (values) => ({
+          options:
+            values.type === 'execution'
+              ? EVENT_EXECUTION_OPTIONS
+              : EVENT_OPTIONS,
+        }),
+      },
+    },
+    {
+      fieldName: 'valueType',
+      label: '值类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.BPM_PROCESS_LISTENER_VALUE_TYPE,
+          'string',
+        ),
+        placeholder: '请选择值类型',
+        allowClear: true,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'value',
+      label: '类路径|表达式',
+      component: 'Input',
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['valueType'],
+        trigger: (values) => (values.value = undefined),
+        componentProps: (values) => ({
+          placeholder:
+            values.valueType === 'class' ? '请输入类路径' : '请输入表达式',
+        }),
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '类型',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择类型',
+        options: getDictOptions(DICT_TYPE.BPM_PROCESS_LISTENER_TYPE, 'string'),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 200,
+    },
+    {
+      field: 'type',
+      title: '类型',
+      minWidth: 200,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_PROCESS_LISTENER_TYPE },
+      },
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'event',
+      title: '事件',
+      minWidth: 200,
+    },
+    {
+      field: 'valueType',
+      title: '值类型',
+      minWidth: 200,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_PROCESS_LISTENER_VALUE_TYPE },
+      },
+    },
+    {
+      field: 'value',
+      title: '值',
+      minWidth: 200,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/processListener/index.vue b/apps/web-ele/src/views/bpm/processListener/index.vue
new file mode 100644
index 000000000..fee637190
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processListener/index.vue
@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmProcessListenerApi } from '#/api/bpm/processListener';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteProcessListener,
+  getProcessListenerPage,
+} from '#/api/bpm/processListener';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建流程监听器 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑流程监听器 */
+function handleEdit(row: BpmProcessListenerApi.ProcessListener) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除流程监听器 */
+async function handleDelete(row: BpmProcessListenerApi.ProcessListener) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteProcessListener(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getProcessListenerPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmProcessListenerApi.ProcessListener>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="执行监听器、任务监听器"
+        url="https://doc.iocoder.cn/bpm/listener/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="流程监听器">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['流程监听器']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['bpm:process-listener:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['bpm:process-listener:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['bpm:process-listener:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/processListener/modules/form.vue b/apps/web-ele/src/views/bpm/processListener/modules/form.vue
new file mode 100644
index 000000000..0e9a92672
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processListener/modules/form.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { BpmProcessListenerApi } from '#/api/bpm/processListener';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createProcessListener,
+  getProcessListener,
+  updateProcessListener,
+} from '#/api/bpm/processListener';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<BpmProcessListenerApi.ProcessListener>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['流程监听器'])
+    : $t('ui.actionTitle.create', ['流程监听器']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as BpmProcessListenerApi.ProcessListener;
+    try {
+      await (formData.value?.id
+        ? updateProcessListener(data)
+        : createProcessListener(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<BpmProcessListenerApi.ProcessListener>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getProcessListener(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/task/copy/data.ts b/apps/web-ele/src/views/bpm/task/copy/data.ts
new file mode 100644
index 000000000..202887d73
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/task/copy/data.ts
@@ -0,0 +1,92 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '流程名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入流程名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '抄送时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'processInstanceName',
+      title: '流程名称',
+      minWidth: 200,
+    },
+    {
+      field: 'summary',
+      title: '摘要',
+      minWidth: 200,
+      formatter: ({ cellValue }) => {
+        return cellValue && cellValue.length > 0
+          ? cellValue
+              .map((item: any) => `${item.key} : ${item.value}`)
+              .join('\n')
+          : '-';
+      },
+    },
+    {
+      field: 'startUser.nickname',
+      title: '流程发起人',
+      minWidth: 120,
+    },
+    {
+      field: 'processInstanceStartTime',
+      title: '流程发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'activityName',
+      title: '抄送节点',
+      minWidth: 120,
+    },
+    {
+      field: 'createUser.nickname',
+      title: '抄送人',
+      minWidth: 120,
+      formatter: ({ cellValue }) => {
+        return cellValue || '-';
+      },
+    },
+    {
+      field: 'reason',
+      title: '抄送意见',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '抄送时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/task/copy/index.vue b/apps/web-ele/src/views/bpm/task/copy/index.vue
new file mode 100644
index 000000000..b60a02c3f
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/task/copy/index.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProcessInstanceCopyPage } from '#/api/bpm/processInstance';
+import { $t } from '#/locales';
+import { router } from '#/router';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'BpmCopyTask' });
+
+/** 任务详情 */
+function handleDetail(row: BpmProcessInstanceApi.Copy) {
+  const query = {
+    id: row.processInstanceId,
+    ...(row.activityId && { activityId: row.activityId }),
+  };
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query,
+  });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getProcessInstanceCopyPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmProcessInstanceApi.Copy>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="审批转办、委派、抄送"
+        url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+      />
+    </template>
+
+    <Grid table-title="抄送任务">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:task:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/task/done/data.ts b/apps/web-ele/src/views/bpm/task/done/data.ts
new file mode 100644
index 000000000..3c5e9f678
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/task/done/data.ts
@@ -0,0 +1,154 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getCategorySimpleList } from '#/api/bpm/category';
+import { getSimpleProcessDefinitionList } from '#/api/bpm/definition';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '任务名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入任务名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'processDefinitionKey',
+      label: '所属流程',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择流程定义',
+        allowClear: true,
+        api: getSimpleProcessDefinitionList,
+        labelField: 'name',
+        valueField: 'key',
+      },
+    },
+    {
+      fieldName: 'category',
+      label: '流程分类',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请输入流程分类',
+        allowClear: true,
+        api: getCategorySimpleList,
+        labelField: 'name',
+        valueField: 'code',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '审批状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.BPM_TASK_STATUS, 'number'),
+        placeholder: '请选择审批状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '发起时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'processInstance.name',
+      title: '流程',
+      minWidth: 200,
+    },
+    {
+      field: 'processInstance.summary',
+      title: '摘要',
+      minWidth: 200,
+      formatter: ({ cellValue }) => {
+        return cellValue && cellValue.length > 0
+          ? cellValue
+              .map((item: any) => `${item.key} : ${item.value}`)
+              .join('\n')
+          : '-';
+      },
+    },
+    {
+      field: 'processInstance.startUser.nickname',
+      title: '发起人',
+      minWidth: 120,
+    },
+    {
+      field: 'processInstance.createTime',
+      title: '发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'name',
+      title: '当前任务',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '任务开始时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'endTime',
+      title: '任务结束时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'status',
+      title: '审批状态',
+      minWidth: 180,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_TASK_STATUS },
+      },
+    },
+    {
+      field: 'reason',
+      title: '审批建议',
+      minWidth: 180,
+    },
+    {
+      field: 'durationInMillis',
+      title: '耗时',
+      minWidth: 180,
+      formatter: 'formatPast2',
+    },
+    {
+      field: 'processInstanceId',
+      title: '流程编号',
+      minWidth: 280,
+    },
+    {
+      field: 'id',
+      title: '任务编号',
+      minWidth: 280,
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/task/done/index.vue b/apps/web-ele/src/views/bpm/task/done/index.vue
new file mode 100644
index 000000000..cc1aba780
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/task/done/index.vue
@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmTaskApi } from '#/api/bpm/task';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getTaskDonePage, withdrawTask } from '#/api/bpm/task';
+import { router } from '#/router';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'BpmDoneTask' });
+
+/** 查看历史 */
+function handleHistory(row: BpmTaskApi.TaskManager) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstance.id,
+      taskId: row.id,
+    },
+  });
+}
+
+/** 撤回任务 */
+async function handleWithdraw(row: BpmTaskApi.TaskManager) {
+  const loadingInstance = ElLoading.service({
+    text: '正在撤回中...',
+  });
+  try {
+    await withdrawTask(row.id);
+    ElMessage.success('撤回成功');
+    await gridApi.query();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getTaskDonePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmTaskApi.TaskManager>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="审批通过、不通过、驳回"
+        url="https://doc.iocoder.cn/bpm/task-todo-done/"
+      />
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+      <DocAlert
+        title="审批转办、委派、抄送"
+        url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+      />
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+    </template>
+
+    <Grid table-title="已办任务">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '撤回',
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              popConfirm: {
+                title: '确定要撤回该任务吗？',
+                confirm: handleWithdraw.bind(null, row),
+              },
+            },
+            {
+              label: '历史',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              onClick: handleHistory.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/task/manager/data.ts b/apps/web-ele/src/views/bpm/task/manager/data.ts
new file mode 100644
index 000000000..947982b23
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/task/manager/data.ts
@@ -0,0 +1,104 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '任务名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入任务名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'processInstance.name',
+      title: '流程',
+      minWidth: 200,
+    },
+    {
+      field: 'processInstance.startUser.nickname',
+      title: '发起人',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '当前任务',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '任务开始时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'endTime',
+      title: '任务结束时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'assigneeUser.nickname',
+      title: '审批人',
+      minWidth: 180,
+    },
+    {
+      field: 'status',
+      title: '审批状态',
+      minWidth: 180,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_TASK_STATUS },
+      },
+    },
+    {
+      field: 'reason',
+      title: '审批建议',
+      minWidth: 180,
+    },
+    {
+      field: 'durationInMillis',
+      title: '耗时',
+      minWidth: 180,
+      formatter: 'formatPast2',
+    },
+    {
+      field: 'processInstanceId',
+      title: '流程编号',
+      minWidth: 280,
+    },
+    {
+      field: 'id',
+      title: '任务编号',
+      minWidth: 280,
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/task/manager/index.vue b/apps/web-ele/src/views/bpm/task/manager/index.vue
new file mode 100644
index 000000000..9490665dd
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/task/manager/index.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmTaskApi } from '#/api/bpm/task';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getTaskManagerPage } from '#/api/bpm/task';
+import { router } from '#/router';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'BpmManagerTask' });
+
+/** 查看历史 */
+function handleHistory(row: BpmTaskApi.TaskManager) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstance.id,
+    },
+  });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getTaskManagerPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmTaskApi.TaskManager>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
+    </template>
+
+    <Grid table-title="流程任务">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '历史',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:task:query'],
+              onClick: handleHistory.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/task/todo/data.ts b/apps/web-ele/src/views/bpm/task/todo/data.ts
new file mode 100644
index 000000000..0b1efd71c
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/task/todo/data.ts
@@ -0,0 +1,131 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getCategorySimpleList } from '#/api/bpm/category';
+import { getSimpleProcessDefinitionList } from '#/api/bpm/definition';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '任务名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入任务名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'processDefinitionKey',
+      label: '所属流程',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择流程定义',
+        allowClear: true,
+        api: getSimpleProcessDefinitionList,
+        labelField: 'name',
+        valueField: 'key',
+      },
+    },
+    {
+      fieldName: 'category',
+      label: '流程分类',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请输入流程分类',
+        allowClear: true,
+        api: getCategorySimpleList,
+        labelField: 'name',
+        valueField: 'code',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '流程状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
+          'number',
+        ),
+        placeholder: '请选择流程状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '发起时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'processInstance.name',
+      title: '流程',
+      minWidth: 200,
+    },
+    {
+      field: 'processInstance.summary',
+      title: '摘要',
+      minWidth: 200,
+      formatter: ({ cellValue }) => {
+        return cellValue && cellValue.length > 0
+          ? cellValue
+              .map((item: any) => `${item.key} : ${item.value}`)
+              .join('\n')
+          : '-';
+      },
+    },
+    {
+      field: 'processInstance.startUser.nickname',
+      title: '发起人',
+      minWidth: 120,
+    },
+    {
+      field: 'processInstance.createTime',
+      title: '发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'name',
+      title: '当前任务',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '任务时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'processInstanceId',
+      title: '流程编号',
+      minWidth: 280,
+    },
+    {
+      field: 'id',
+      title: '任务编号',
+      minWidth: 280,
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/task/todo/index.vue b/apps/web-ele/src/views/bpm/task/todo/index.vue
new file mode 100644
index 000000000..d80830739
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/task/todo/index.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmTaskApi } from '#/api/bpm/task';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getTaskTodoPage } from '#/api/bpm/task';
+import { router } from '#/router';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'BpmTodoTask' });
+
+/** 办理任务 */
+function handleAudit(row: BpmTaskApi.Task) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstance!.id,
+      taskId: row.id,
+    },
+  });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getTaskTodoPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmTaskApi.Task>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="审批通过、不通过、驳回"
+        url="https://doc.iocoder.cn/bpm/task-todo-done/"
+      />
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+      <DocAlert
+        title="审批转办、委派、抄送"
+        url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+      />
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+    </template>
+
+    <Grid table-title="待办任务">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '办理',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:task:query'],
+              onClick: handleAudit.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/infra/apiAccessLog/data.ts b/apps/web-ele/src/views/infra/apiAccessLog/data.ts
index 93d736ee9..f10d3be8e 100644
--- a/apps/web-ele/src/views/infra/apiAccessLog/data.ts
+++ b/apps/web-ele/src/views/infra/apiAccessLog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraApiAccessLogApi } from '#/api/infra/api-access-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -181,10 +180,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userType',
       label: '用户类型',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.USER_TYPE,
-          value: data.userType,
+          value: val,
         });
       },
     },
@@ -197,10 +196,11 @@ export function useDetailSchema(): DescriptionItemSchema[] {
       label: '用户 UA',
     },
     {
+      field: 'requestMethod',
       label: '请求信息',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data?.requestMethod && data?.requestUrl) {
-          return `${data.requestMethod} ${data.requestUrl}`;
+      render: (val, data) => {
+        if (val && data?.requestUrl) {
+          return `${val} ${data.requestUrl}`;
         }
         return '';
       },
@@ -208,10 +208,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'requestParams',
       label: '请求参数',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data.requestParams) {
+      render: (val) => {
+        if (val) {
           return h(JsonViewer, {
-            value: JSON.parse(data.requestParams),
+            value: JSON.parse(val),
             previewMode: true,
           });
         }
@@ -224,26 +224,29 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     },
     {
       label: '请求时间',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
+      field: 'beginTime',
+      render: (val, data) => {
         if (data?.beginTime && data?.endTime) {
-          return `${formatDateTime(data.beginTime)} ~ ${formatDateTime(data.endTime)}`;
+          return `${formatDateTime(val)} ~ ${formatDateTime(data.endTime)}`;
         }
         return '';
       },
     },
     {
       label: '请求耗时',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        return data?.duration ? `${data.duration} ms` : '';
+      field: 'duration',
+      render: (val) => {
+        return val ? `${val} ms` : '';
       },
     },
     {
       label: '操作结果',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data?.resultCode === 0) {
+      field: 'resultCode',
+      render: (val, data) => {
+        if (val === 0) {
           return '正常';
         } else if (data && data.resultCode > 0) {
-          return `失败 | ${data.resultCode} | ${data.resultMsg}`;
+          return `失败 | ${val} | ${data.resultMsg}`;
         }
         return '';
       },
@@ -259,10 +262,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'operateType',
       label: '操作类型',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_OPERATE_TYPE,
-          value: data?.operateType,
+          value: val,
         });
       },
     },
diff --git a/apps/web-ele/src/views/infra/apiAccessLog/modules/detail.vue b/apps/web-ele/src/views/infra/apiAccessLog/modules/detail.vue
index bc317f930..3cb9b3965 100644
--- a/apps/web-ele/src/views/infra/apiAccessLog/modules/detail.vue
+++ b/apps/web-ele/src/views/infra/apiAccessLog/modules/detail.vue
@@ -12,14 +12,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<InfraApiAccessLogApi.ApiAccessLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 1,
-    direction: 'horizontal',
-    labelWidth: 110,
-    title: '',
-    extra: '',
-  },
+  column: 1,
+  labelWidth: 110,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/infra/apiErrorLog/data.ts b/apps/web-ele/src/views/infra/apiErrorLog/data.ts
index 8201f1206..a681bccc9 100644
--- a/apps/web-ele/src/views/infra/apiErrorLog/data.ts
+++ b/apps/web-ele/src/views/infra/apiErrorLog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraApiErrorLogApi } from '#/api/infra/api-error-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -158,10 +157,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userType',
       label: '用户类型',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.USER_TYPE,
-          value: data.userType,
+          value: val,
         });
       },
     },
@@ -176,9 +175,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'requestMethod',
       label: '请求信息',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        if (data?.requestMethod && data?.requestUrl) {
-          return `${data.requestMethod} ${data.requestUrl}`;
+      render: (val, data) => {
+        if (val && data?.requestUrl) {
+          return `${val} ${data.requestUrl}`;
         }
         return '';
       },
@@ -186,10 +185,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'requestParams',
       label: '请求参数',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        if (data.requestParams) {
+      render: (val) => {
+        if (val) {
           return h(JsonViewer, {
-            value: JSON.parse(data.requestParams),
+            value: JSON.parse(val),
             previewMode: true,
           });
         }
@@ -199,9 +198,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'exceptionTime',
       label: '异常时间',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        return formatDateTime(data?.exceptionTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'exceptionName',
@@ -210,12 +207,11 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'exceptionStackTrace',
       label: '异常堆栈',
-      hidden: (data: InfraApiErrorLogApi.ApiErrorLog) =>
-        !data?.exceptionStackTrace,
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        if (data?.exceptionStackTrace) {
+      show: (val) => !val,
+      render: (val) => {
+        if (val) {
           return h('textarea', {
-            value: data.exceptionStackTrace,
+            value: val,
             style:
               'width: 100%; min-height: 200px; max-height: 400px; resize: vertical;',
             readonly: true,
@@ -227,25 +223,23 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'processStatus',
       label: '处理状态',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS,
-          value: data?.processStatus,
+          value: val,
         });
       },
     },
     {
       field: 'processUserId',
       label: '处理人',
-      hidden: (data: InfraApiErrorLogApi.ApiErrorLog) => !data?.processUserId,
+      show: (val) => !val,
     },
     {
       field: 'processTime',
       label: '处理时间',
-      hidden: (data: InfraApiErrorLogApi.ApiErrorLog) => !data?.processTime,
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        return formatDateTime(data?.processTime || '') as string;
-      },
+      show: (val) => !val,
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-ele/src/views/infra/apiErrorLog/modules/detail.vue b/apps/web-ele/src/views/infra/apiErrorLog/modules/detail.vue
index 22dd274b4..40a3a8aa2 100644
--- a/apps/web-ele/src/views/infra/apiErrorLog/modules/detail.vue
+++ b/apps/web-ele/src/views/infra/apiErrorLog/modules/detail.vue
@@ -12,14 +12,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<InfraApiErrorLogApi.ApiErrorLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 1,
-    direction: 'horizontal',
-    labelWidth: 110,
-    title: '',
-    extra: '',
-  },
+  column: 1,
+  labelWidth: 110,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/infra/codegen/data.ts b/apps/web-ele/src/views/infra/codegen/data.ts
index e27cffd84..a02a6e191 100644
--- a/apps/web-ele/src/views/infra/codegen/data.ts
+++ b/apps/web-ele/src/views/infra/codegen/data.ts
@@ -25,7 +25,7 @@ export function useImportTableFormSchema(): VbenFormSchema[] {
       label: '数据源',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getDataSourceConfigList(),
+        api: getDataSourceConfigList,
         labelField: 'name',
         valueField: 'id',
         autoSelect: 'first',
diff --git a/apps/web-ele/src/views/infra/job/data.ts b/apps/web-ele/src/views/infra/job/data.ts
index e2acb01aa..01006aa17 100644
--- a/apps/web-ele/src/views/infra/job/data.ts
+++ b/apps/web-ele/src/views/infra/job/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraJobApi } from '#/api/infra/job';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h, markRaw } from 'vue';
@@ -197,10 +196,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '任务状态',
-      content: (data: InfraJobApi.Job) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_JOB_STATUS,
-          value: data?.status,
+          value: val,
         });
       },
     },
@@ -222,27 +221,23 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     },
     {
       label: '重试间隔',
-      content: (data: InfraJobApi.Job) => {
-        return data?.retryInterval ? `${data.retryInterval} 毫秒` : '无间隔';
-      },
+      field: 'retryInterval',
+      render: (val) => (val ? `${val} 毫秒` : '无间隔'),
     },
     {
       label: '监控超时时间',
-      content: (data: InfraJobApi.Job) => {
-        return data?.monitorTimeout && data.monitorTimeout > 0
-          ? `${data.monitorTimeout} 毫秒`
-          : '未开启';
-      },
+      field: 'monitorTimeout',
+      render: (val) => (val && val > 0 ? `${val} 毫秒` : '未开启'),
     },
     {
       field: 'nextTimes',
       label: '后续执行时间',
-      content: (data: InfraJobApi.Job) => {
-        if (!data?.nextTimes || data.nextTimes.length === 0) {
+      render: (val) => {
+        if (!val || val.length === 0) {
           return '无后续执行时间';
         }
         return h(ElTimeline, {}, () =>
-          data.nextTimes?.map((time: Date) =>
+          val?.map((time: Date) =>
             h(ElTimelineItem, {}, () => formatDateTime(time)),
           ),
         );
diff --git a/apps/web-ele/src/views/infra/job/logger/data.ts b/apps/web-ele/src/views/infra/job/logger/data.ts
index 1dfcd5f68..481e673cc 100644
--- a/apps/web-ele/src/views/infra/job/logger/data.ts
+++ b/apps/web-ele/src/views/infra/job/logger/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraJobLogApi } from '#/api/infra/job-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -154,9 +153,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'beginTime',
       label: '执行时间',
-      content: (data: InfraJobLogApi.JobLog) => {
-        if (data?.beginTime && data?.endTime) {
-          return `${formatDateTime(data.beginTime)} ~ ${formatDateTime(data.endTime)}`;
+      render: (val, data) => {
+        if (val && data?.endTime) {
+          return `${formatDateTime(val)} ~ ${formatDateTime(data.endTime)}`;
         }
         return '';
       },
@@ -164,17 +163,15 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'duration',
       label: '执行时长',
-      content: (data: InfraJobLogApi.JobLog) => {
-        return data?.duration ? `${data.duration} 毫秒` : '';
-      },
+      render: (val) => (val ? `${val} 毫秒` : ''),
     },
     {
       field: 'status',
       label: '任务状态',
-      content: (data: InfraJobLogApi.JobLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_JOB_LOG_STATUS,
-          value: data?.status,
+          value: val,
         });
       },
     },
diff --git a/apps/web-ele/src/views/infra/job/logger/modules/detail.vue b/apps/web-ele/src/views/infra/job/logger/modules/detail.vue
index 5309523b8..5a5e7a7ad 100644
--- a/apps/web-ele/src/views/infra/job/logger/modules/detail.vue
+++ b/apps/web-ele/src/views/infra/job/logger/modules/detail.vue
@@ -13,14 +13,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<InfraJobLogApi.JobLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 1,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  column: 1,
+  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/infra/job/modules/detail.vue b/apps/web-ele/src/views/infra/job/modules/detail.vue
index f25a57ab6..0ee8e5133 100644
--- a/apps/web-ele/src/views/infra/job/modules/detail.vue
+++ b/apps/web-ele/src/views/infra/job/modules/detail.vue
@@ -14,14 +14,8 @@ const formData = ref<InfraJobApi.Job>(); // 任务详情
 const nextTimes = ref<Date[]>([]); // 下一次执行时间
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 1,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  column: 1,
+  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/infra/redis/modules/info.vue b/apps/web-ele/src/views/infra/redis/modules/info.vue
index 5d4f02d88..bee9922bb 100644
--- a/apps/web-ele/src/views/infra/redis/modules/info.vue
+++ b/apps/web-ele/src/views/infra/redis/modules/info.vue
@@ -1,55 +1,73 @@
 <script lang="ts" setup>
 import type { InfraRedisApi } from '#/api/infra/redis';
 
-import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
+import { useDescription } from '#/components/description';
 
 defineProps<{
   redisData?: InfraRedisApi.RedisMonitorInfo;
 }>();
+
+const [Descriptions] = useDescription({
+  bordered: false,
+  column: 6,
+  schema: [
+    {
+      field: 'info.redis_version',
+      label: 'Redis 版本',
+    },
+    {
+      field: 'info.redis_mode',
+      label: '运行模式',
+      render: (val) => (val === 'standalone' ? '单机' : '集群'),
+    },
+    {
+      field: 'info.tcp_port',
+      label: '端口',
+    },
+    {
+      field: 'info.connected_clients',
+      label: '客户端数',
+    },
+    {
+      field: 'info.uptime_in_days',
+      label: '运行时间(天)',
+    },
+    {
+      field: 'info.used_memory_human',
+      label: '使用内存',
+    },
+    {
+      field: 'info.used_cpu_user_children',
+      label: '使用 CPU',
+      render: (val) => Number.parseFloat(val).toFixed(2),
+    },
+    {
+      field: 'info.maxmemory_human',
+      label: '内存配置',
+    },
+    {
+      field: 'info.aof_enabled',
+      label: 'AOF 是否开启',
+      render: (val) => (val === '0' ? '否' : '是'),
+    },
+    {
+      field: 'info.rdb_last_bgsave_status',
+      label: 'RDB 是否成功',
+    },
+    {
+      field: 'dbSize',
+      label: 'Key 数量',
+    },
+    {
+      field: 'info.instantaneous_input_kbps',
+      label: '网络入口/出口',
+      render: (val, data) =>
+        `${val}kps / ${data?.info?.instantaneous_output_kbps}kps`,
+    },
+  ],
+});
 </script>
 
 <template>
-  <ElDescriptions :column="6" border size="default" :label-width="138">
-    <ElDescriptionsItem label="Redis 版本">
-      {{ redisData?.info?.redis_version }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="运行模式">
-      {{ redisData?.info?.redis_mode === 'standalone' ? '单机' : '集群' }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="端口">
-      {{ redisData?.info?.tcp_port }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="客户端数">
-      {{ redisData?.info?.connected_clients }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="运行时间(天)">
-      {{ redisData?.info?.uptime_in_days }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="使用内存">
-      {{ redisData?.info?.used_memory_human }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="使用 CPU">
-      {{
-        redisData?.info
-          ? parseFloat(redisData?.info?.used_cpu_user_children).toFixed(2)
-          : ''
-      }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="内存配置">
-      {{ redisData?.info?.maxmemory_human }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="AOF 是否开启">
-      {{ redisData?.info?.aof_enabled === '0' ? '否' : '是' }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="RDB 是否成功">
-      {{ redisData?.info?.rdb_last_bgsave_status }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="Key 数量">
-      {{ redisData?.dbSize }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="网络入口/出口">
-      {{ redisData?.info?.instantaneous_input_kbps }}kps /
-      {{ redisData?.info?.instantaneous_output_kbps }}kps
-    </ElDescriptionsItem>
-  </ElDescriptions>
+  <Descriptions :data="redisData" />
 </template>
diff --git a/apps/web-ele/src/views/infra/redis/modules/memory.vue b/apps/web-ele/src/views/infra/redis/modules/memory.vue
index 6eeda8958..5220c4631 100644
--- a/apps/web-ele/src/views/infra/redis/modules/memory.vue
+++ b/apps/web-ele/src/views/infra/redis/modules/memory.vue
@@ -94,7 +94,7 @@ function renderMemoryChart() {
         detail: {
           show: true,
           offsetCenter: [0, '50%'],
-          color: 'auto',
+          color: 'inherit',
           fontSize: 30,
           formatter: usedMemory,
         },
diff --git a/apps/web-ele/src/views/mall/product/comment/data.ts b/apps/web-ele/src/views/mall/product/comment/data.ts
index fe29e3153..7a3641ef2 100644
--- a/apps/web-ele/src/views/mall/product/comment/data.ts
+++ b/apps/web-ele/src/views/mall/product/comment/data.ts
@@ -23,7 +23,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '商品',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSpuSimpleList(),
+        api: getSpuSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择商品',
diff --git a/apps/web-ele/src/views/mall/product/property/data.ts b/apps/web-ele/src/views/mall/product/property/data.ts
index 180c15101..1fd2f2e87 100644
--- a/apps/web-ele/src/views/mall/product/property/data.ts
+++ b/apps/web-ele/src/views/mall/product/property/data.ts
@@ -113,7 +113,7 @@ export function useValueFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: (values) => {
         return {
-          api: () => getPropertySimpleList(),
+          api: getPropertySimpleList,
           placeholder: '请选择属性',
           labelField: 'name',
           valueField: 'id',
diff --git a/apps/web-ele/src/views/mall/product/spu/modules/form-data.ts b/apps/web-ele/src/views/mall/product/spu/modules/form-data.ts
index ad5cf83e5..28941341e 100644
--- a/apps/web-ele/src/views/mall/product/spu/modules/form-data.ts
+++ b/apps/web-ele/src/views/mall/product/spu/modules/form-data.ts
@@ -50,7 +50,7 @@ export function useInfoFormSchema(): VbenFormSchema[] {
       label: '商品品牌',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleBrandList(),
+        api: getSimpleBrandList,
         labelField: 'name',
         valueField: 'id',
         allowClear: true,
@@ -181,7 +181,7 @@ export function useDeliveryFormSchema(): VbenFormSchema[] {
       label: '运费模板',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleTemplateList(),
+        api: getSimpleTemplateList,
         labelField: 'name',
         valueField: 'id',
       },
diff --git a/apps/web-ele/src/views/mall/promotion/article/data.ts b/apps/web-ele/src/views/mall/promotion/article/data.ts
index e758bdf5c..b2652227f 100644
--- a/apps/web-ele/src/views/mall/promotion/article/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/article/data.ts
@@ -38,7 +38,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '文章分类',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleArticleCategoryList(),
+        api: getSimpleArticleCategoryList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择文章分类',
@@ -140,7 +140,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '文章分类',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleArticleCategoryList(),
+        api: getSimpleArticleCategoryList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择文章分类',
diff --git a/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/data.ts b/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/data.ts
index cb193e7df..19922a003 100644
--- a/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/data.ts
+++ b/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/data.ts
@@ -65,7 +65,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiTreeSelect',
       rules: 'required',
       componentProps: {
-        api: () => getAreaTree(),
+        api: getAreaTree,
         labelField: 'name',
         valueField: 'id',
         childrenField: 'children',
@@ -147,7 +147,7 @@ export function useBindFormSchema(): VbenFormSchema[] {
       label: '门店店员',
       rules: 'required',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         multiple: true,
diff --git a/apps/web-ele/src/views/mall/trade/order/data.ts b/apps/web-ele/src/views/mall/trade/order/data.ts
index 098e17d32..de16a0752 100644
--- a/apps/web-ele/src/views/mall/trade/order/data.ts
+++ b/apps/web-ele/src/views/mall/trade/order/data.ts
@@ -74,7 +74,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '快递公司',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleDeliveryExpressList(),
+        api: getSimpleDeliveryExpressList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择快递公司',
@@ -90,7 +90,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '自提门店',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleDeliveryPickUpStoreList(),
+        api: getSimpleDeliveryPickUpStoreList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择自提门店',
@@ -371,7 +371,7 @@ export function useAddressFormSchema(): VbenFormSchema[] {
       label: '所在地',
       component: 'ApiTreeSelect',
       componentProps: {
-        api: () => getAreaTree(),
+        api: getAreaTree,
         labelField: 'name',
         valueField: 'id',
         childrenField: 'children',
@@ -422,7 +422,7 @@ export function useDeliveryFormSchema(): VbenFormSchema[] {
       label: '物流公司',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleDeliveryExpressList(),
+        api: getSimpleDeliveryExpressList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择物流公司',
diff --git a/apps/web-ele/src/views/member/user/data.ts b/apps/web-ele/src/views/member/user/data.ts
index b83f1d425..a9bf7b0fd 100644
--- a/apps/web-ele/src/views/member/user/data.ts
+++ b/apps/web-ele/src/views/member/user/data.ts
@@ -86,7 +86,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '所在地',
       component: 'ApiTreeSelect',
       componentProps: {
-        api: () => getAreaTree(),
+        api: getAreaTree,
         labelField: 'name',
         valueField: 'id',
         childrenField: 'children',
@@ -98,7 +98,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '用户标签',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleTagList(),
+        api: getSimpleTagList,
         labelField: 'name',
         valueField: 'id',
         multiple: true,
@@ -110,7 +110,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '用户分组',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleGroupList(),
+        api: getSimpleGroupList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择用户分组',
@@ -171,7 +171,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '用户标签',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleTagList(),
+        api: getSimpleTagList,
         labelField: 'name',
         valueField: 'id',
         multiple: true,
@@ -184,7 +184,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '用户等级',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleLevelList(),
+        api: getSimpleLevelList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择用户等级',
@@ -196,7 +196,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '用户分组',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleGroupList(),
+        api: getSimpleGroupList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择用户分组',
@@ -325,7 +325,7 @@ export function useLevelFormSchema(): VbenFormSchema[] {
       label: '用户等级',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleLevelList(),
+        api: getSimpleLevelList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择用户等级',
diff --git a/apps/web-ele/src/views/member/user/detail/modules/account-info.vue b/apps/web-ele/src/views/member/user/detail/modules/account-info.vue
index 597668090..f95cccad4 100644
--- a/apps/web-ele/src/views/member/user/detail/modules/account-info.vue
+++ b/apps/web-ele/src/views/member/user/detail/modules/account-info.vue
@@ -8,7 +8,7 @@ import { ElCard } from 'element-plus';
 
 import { useDescription } from '#/components/description';
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     mode?: 'kefu' | 'member';
     user: MemberUserApi.User;
@@ -20,49 +20,44 @@ withDefaults(
 );
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: false,
-    column: 2,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  border: false,
+  column: props.mode === 'member' ? 2 : 1,
+  labelWidth: 140,
   schema: [
     {
       field: 'levelName',
       label: '等级',
-      content: (data) => data.levelName || '-',
+      render: (val) => val || '-',
     },
     {
       field: 'experience',
       label: '成长值',
-      content: (data) => data.experience || 0,
+      render: (val) => val || 0,
     },
     {
       field: 'point',
       label: '当前积分',
-      content: (data) => data.point || 0,
+      render: (val) => val || 0,
     },
     {
       field: 'totalPoint',
       label: '总积分',
-      content: (data) => data.totalPoint || 0,
+      render: (val) => val || 0,
     },
     {
       field: 'balance',
       label: '当前余额',
-      content: (data) => fenToYuan(data.balance || 0),
+      render: (val) => fenToYuan(val || 0),
     },
     {
       field: 'totalExpense',
       label: '支出金额',
-      content: (data) => fenToYuan(data.totalExpense || 0),
+      render: (val) => fenToYuan(val || 0),
     },
     {
       field: 'totalRecharge',
       label: '充值金额',
-      content: (data) => fenToYuan(data.totalRecharge || 0),
+      render: (val) => fenToYuan(val || 0),
     },
   ],
 });
@@ -77,7 +72,6 @@ const [Descriptions] = useDescription({
       <slot name="extra"></slot>
     </template>
     <Descriptions
-      :column="mode === 'member' ? 2 : 1"
       :data="{
         ...user,
         ...wallet,
diff --git a/apps/web-ele/src/views/member/user/detail/modules/basic-info.vue b/apps/web-ele/src/views/member/user/detail/modules/basic-info.vue
index b423a1999..55f1e0d9c 100644
--- a/apps/web-ele/src/views/member/user/detail/modules/basic-info.vue
+++ b/apps/web-ele/src/views/member/user/detail/modules/basic-info.vue
@@ -11,7 +11,7 @@ import { ElAvatar, ElCard, ElCol, ElRow } from 'element-plus';
 import { useDescription } from '#/components/description';
 import { DictTag } from '#/components/dict-tag';
 
-withDefaults(
+const props = withDefaults(
   defineProps<{ mode?: 'kefu' | 'member'; user: MemberUserApi.User }>(),
   {
     mode: 'member',
@@ -19,14 +19,9 @@ withDefaults(
 );
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: false,
-    column: 2,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  border: false,
+  column: props.mode === 'member' ? 2 : 1,
+  labelWidth: 140,
   schema: [
     {
       field: 'name',
@@ -43,10 +38,10 @@ const [Descriptions] = useDescription({
     {
       field: 'sex',
       label: '性别',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.SYSTEM_USER_SEX,
-          value: data.sex,
+          value: val,
         }),
     },
     {
@@ -60,17 +55,17 @@ const [Descriptions] = useDescription({
     {
       field: 'birthday',
       label: '生日',
-      content: (data) => formatDate(data.birthday)?.toString() || '-',
+      render: (val) => formatDate(val)?.toString() || '-',
     },
     {
       field: 'createTime',
       label: '注册时间',
-      content: (data) => formatDate(data.createTime)?.toString() || '-',
+      render: (val) => formatDate(val)?.toString() || '-',
     },
     {
       field: 'loginDate',
       label: '最后登录时间',
-      content: (data) => formatDate(data.loginDate)?.toString() || '-',
+      render: (val) => formatDate(val)?.toString() || '-',
     },
   ],
 });
@@ -89,12 +84,12 @@ const [Descriptions] = useDescription({
         <ElAvatar :size="180" shape="square" :src="user.avatar" />
       </ElCol>
       <ElCol :span="18">
-        <Descriptions :column="2" :data="user" />
+        <Descriptions :data="user" />
       </ElCol>
     </ElRow>
     <template v-else-if="mode === 'kefu'">
       <ElAvatar :size="140" shape="square" :src="user.avatar" />
-      <Descriptions :column="1" :data="user" />
+      <Descriptions :data="user" />
     </template>
   </ElCard>
 </template>
diff --git a/apps/web-ele/src/views/member/user/detail/modules/user-order-list.vue b/apps/web-ele/src/views/member/user/detail/modules/user-order-list.vue
index e19da013f..c00784265 100644
--- a/apps/web-ele/src/views/member/user/detail/modules/user-order-list.vue
+++ b/apps/web-ele/src/views/member/user/detail/modules/user-order-list.vue
@@ -104,7 +104,7 @@ const [Grid] = useVbenVxeGrid({
         component: 'ApiSelect',
         componentProps: {
           clearable: true,
-          api: () => getSimpleDeliveryExpressList(),
+          api: getSimpleDeliveryExpressList,
           labelField: 'name',
           valueField: 'id',
           placeholder: '全部',
@@ -120,7 +120,7 @@ const [Grid] = useVbenVxeGrid({
         label: '自提门店',
         component: 'ApiSelect',
         componentProps: {
-          api: () => getSimpleDeliveryPickUpStoreList(),
+          api: getSimpleDeliveryPickUpStoreList,
           labelField: 'name',
           valueField: 'id',
         },
diff --git a/apps/web-ele/src/views/pay/notify/data.ts b/apps/web-ele/src/views/pay/notify/data.ts
index 2dd815227..8d301628d 100644
--- a/apps/web-ele/src/views/pay/notify/data.ts
+++ b/apps/web-ele/src/views/pay/notify/data.ts
@@ -21,7 +21,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '应用编号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getAppList(),
+        api: getAppList,
         labelField: 'name',
         valueField: 'id',
         autoSelect: 'first',
diff --git a/apps/web-ele/src/views/pay/order/data.ts b/apps/web-ele/src/views/pay/order/data.ts
index 259137ef4..ff55e09f6 100644
--- a/apps/web-ele/src/views/pay/order/data.ts
+++ b/apps/web-ele/src/views/pay/order/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { PayOrderApi } from '#/api/pay/order';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -184,53 +183,46 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '支付状态',
-      content: (data: any) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_ORDER_STATUS,
-          value: data?.status,
+          value: val,
         }),
     },
     {
       field: 'price',
       label: '支付金额',
-      content: (data: PayOrderApi.Order) =>
-        `￥${erpPriceInputFormatter(data?.price)}`,
+      render: (val) => `￥${erpPriceInputFormatter(val)}`,
     },
     {
       field: 'channelFeePrice',
       label: '手续费',
-      content: (data: PayOrderApi.Order) =>
-        `￥${erpPriceInputFormatter(data?.channelFeePrice)}`,
+      render: (val) => `￥${erpPriceInputFormatter(val)}`,
     },
     {
       field: 'channelFeeRate',
       label: '手续费比例',
-      content: (data: PayOrderApi.Order) =>
-        `${erpPriceInputFormatter(data?.channelFeeRate)}%`,
+      render: (val) => `${erpPriceInputFormatter(val)}%`,
     },
     {
       field: 'successTime',
       label: '支付时间',
-      content: (data: PayOrderApi.Order) =>
-        formatDateTime(data?.successTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'expireTime',
       label: '失效时间',
-      content: (data: PayOrderApi.Order) =>
-        formatDateTime(data?.expireTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: PayOrderApi.Order) =>
-        formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'updateTime',
       label: '更新时间',
-      content: (data: PayOrderApi.Order) =>
-        formatDateTime(data?.updateTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'subject',
@@ -243,10 +235,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'channelCode',
       label: '支付渠道',
-      content: (data: PayOrderApi.Order) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_CHANNEL_CODE,
-          value: data?.channelCode,
+          value: val,
         }),
     },
     {
@@ -256,10 +248,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'channelOrderNo',
       label: '渠道单号',
-      content: (data: PayOrderApi.Order) =>
-        data?.channelOrderNo
-          ? h(ElTag, { color: 'green' }, () => data.channelOrderNo)
-          : '',
+      render: (val) => (val ? h(ElTag, { color: 'green' }, () => val) : ''),
     },
     {
       field: 'channelUserId',
@@ -268,8 +257,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'refundPrice',
       label: '退款金额',
-      content: (data: PayOrderApi.Order) =>
-        `￥${erpPriceInputFormatter(data?.refundPrice)}`,
+      render: (val) => `￥${erpPriceInputFormatter(val)}`,
     },
     {
       field: 'notifyUrl',
diff --git a/apps/web-ele/src/views/pay/order/modules/detail.vue b/apps/web-ele/src/views/pay/order/modules/detail.vue
index 7f52112ee..4072e4e45 100644
--- a/apps/web-ele/src/views/pay/order/modules/detail.vue
+++ b/apps/web-ele/src/views/pay/order/modules/detail.vue
@@ -13,14 +13,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<PayOrderApi.Order>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 2,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  column: 2,
+  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/pay/refund/data.ts b/apps/web-ele/src/views/pay/refund/data.ts
index db140679f..8e1afd615 100644
--- a/apps/web-ele/src/views/pay/refund/data.ts
+++ b/apps/web-ele/src/views/pay/refund/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { PayRefundApi } from '#/api/pay/refund';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -173,26 +172,22 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'merchantRefundId',
       label: '商户退款单号',
-      content: (data: PayRefundApi.Refund) =>
-        h(ElTag, {}, () => data?.merchantRefundId || '-'),
+      render: (val) => h(ElTag, {}, () => val || '-'),
     },
     {
       field: 'channelRefundNo',
       label: '渠道退款单号',
-      content: (data: PayRefundApi.Refund) =>
-        h(ElTag, { type: 'success' }, () => data?.channelRefundNo || '-'),
+      render: (val) => h(ElTag, { type: 'success' }, () => val || '-'),
     },
     {
       field: 'merchantOrderId',
       label: '商户支付单号',
-      content: (data: PayRefundApi.Refund) =>
-        h(ElTag, {}, () => data?.merchantOrderId || '-'),
+      render: (val) => h(ElTag, {}, () => val || '-'),
     },
     {
       field: 'channelOrderNo',
       label: '渠道支付单号',
-      content: (data: PayRefundApi.Refund) =>
-        h(ElTag, { type: 'success' }, () => data?.channelOrderNo || '-'),
+      render: (val) => h(ElTag, { type: 'success' }, () => val || '-'),
     },
     {
       field: 'appId',
@@ -205,58 +200,55 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'payPrice',
       label: '支付金额',
-      content: (data: PayRefundApi.Refund) =>
+      render: (val) =>
         h(
           ElTag,
           { type: 'success' },
-          () => `￥${erpPriceInputFormatter(data?.payPrice || 0)}`,
+          () => `￥${erpPriceInputFormatter(val || 0)}`,
         ),
     },
     {
       field: 'refundPrice',
       label: '退款金额',
-      content: (data: PayRefundApi.Refund) =>
+      render: (val) =>
         h(
           ElTag,
           { type: 'danger' },
-          () => `￥${erpPriceInputFormatter(data?.refundPrice || 0)}`,
+          () => `￥${erpPriceInputFormatter(val || 0)}`,
         ),
     },
     {
       field: 'status',
       label: '退款状态',
-      content: (data: any) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_REFUND_STATUS,
-          value: data?.status,
+          value: val,
         }),
     },
     {
       field: 'successTime',
       label: '退款时间',
-      content: (data: PayRefundApi.Refund) =>
-        formatDateTime(data?.successTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: PayRefundApi.Refund) =>
-        formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'updateTime',
       label: '更新时间',
-      content: (data: PayRefundApi.Refund) =>
-        formatDateTime(data?.updateTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     // 渠道信息部分
     {
       field: 'channelCode',
       label: '退款渠道',
-      content: (data: PayRefundApi.Refund) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_CHANNEL_CODE,
-          value: data?.channelCode,
+          value: val,
         }),
     },
     {
diff --git a/apps/web-ele/src/views/pay/refund/modules/detail.vue b/apps/web-ele/src/views/pay/refund/modules/detail.vue
index 1f3e380cb..7b02d9889 100644
--- a/apps/web-ele/src/views/pay/refund/modules/detail.vue
+++ b/apps/web-ele/src/views/pay/refund/modules/detail.vue
@@ -13,14 +13,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<PayRefundApi.Refund>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 2,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  column: 2,
+  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/pay/transfer/data.ts b/apps/web-ele/src/views/pay/transfer/data.ts
index 3ddbb0ea4..0e3b1a04c 100644
--- a/apps/web-ele/src/views/pay/transfer/data.ts
+++ b/apps/web-ele/src/views/pay/transfer/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { PayTransferApi } from '#/api/pay/transfer';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -191,14 +190,12 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'merchantTransferId',
       label: '商户单号',
-      content: (data: PayTransferApi.Transfer) =>
-        h(ElTag, {}, () => data?.merchantTransferId),
+      render: (val) => h(ElTag, {}, () => val),
     },
     {
       field: 'no',
       label: '转账单号',
-      content: (data: PayTransferApi.Transfer) =>
-        h(ElTag, { color: 'orange' }, () => data?.no),
+      render: (val) => h(ElTag, { color: 'orange' }, () => val),
     },
     {
       field: 'appId',
@@ -207,33 +204,31 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '转账状态',
-      content: (data: any) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_TRANSFER_STATUS,
-          value: data?.status,
+          value: val,
         }),
     },
     {
       field: 'price',
       label: '转账金额',
-      content: (data: PayTransferApi.Transfer) =>
+      render: (val) =>
         h(
           ElTag,
           { color: 'success' },
-          () => `￥${erpPriceInputFormatter(data?.price || 0)}`,
+          () => `￥${erpPriceInputFormatter(val || 0)}`,
         ),
     },
     {
       field: 'successTime',
       label: '转账时间',
-      content: (data: PayTransferApi.Transfer) =>
-        formatDateTime(data?.successTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: PayTransferApi.Transfer) =>
-        formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'userName',
@@ -246,10 +241,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'channelCode',
       label: '支付渠道',
-      content: (data: PayTransferApi.Transfer) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_CHANNEL_CODE,
-          value: data?.channelCode,
+          value: val,
         }),
     },
     {
@@ -259,10 +254,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'channelTransferNo',
       label: '渠道单号',
-      content: (data: PayTransferApi.Transfer) =>
-        data?.channelTransferNo
-          ? h(ElTag, { color: 'success' }, () => data.channelTransferNo)
-          : '',
+      render: (val) => (val ? h(ElTag, { color: 'success' }, () => val) : ''),
     },
     {
       field: 'notifyUrl',
diff --git a/apps/web-ele/src/views/pay/transfer/modules/detail.vue b/apps/web-ele/src/views/pay/transfer/modules/detail.vue
index 301f7aea1..deb23fabf 100644
--- a/apps/web-ele/src/views/pay/transfer/modules/detail.vue
+++ b/apps/web-ele/src/views/pay/transfer/modules/detail.vue
@@ -13,14 +13,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<PayTransferApi.Transfer>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 2,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  column: 2,
+  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/dept/data.ts b/apps/web-ele/src/views/system/dept/data.ts
index 7e4a6d611..0bc18c1bc 100644
--- a/apps/web-ele/src/views/system/dept/data.ts
+++ b/apps/web-ele/src/views/system/dept/data.ts
@@ -74,7 +74,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '负责人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择负责人',
diff --git a/apps/web-ele/src/views/system/dict/data.ts b/apps/web-ele/src/views/system/dict/data.ts
index 566c2f7a8..70775d4e7 100644
--- a/apps/web-ele/src/views/system/dict/data.ts
+++ b/apps/web-ele/src/views/system/dict/data.ts
@@ -183,7 +183,7 @@ export function useDataFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: (values) => {
         return {
-          api: () => getSimpleDictTypeList(),
+          api: getSimpleDictTypeList,
           placeholder: '请输入字典类型',
           labelField: 'name',
           valueField: 'type',
diff --git a/apps/web-ele/src/views/system/loginlog/data.ts b/apps/web-ele/src/views/system/loginlog/data.ts
index e30d26076..2be5cdf1c 100644
--- a/apps/web-ele/src/views/system/loginlog/data.ts
+++ b/apps/web-ele/src/views/system/loginlog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemLoginLogApi } from '#/api/system/login-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -110,10 +109,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'logType',
       label: '操作类型',
-      content: (data: SystemLoginLogApi.LoginLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_LOGIN_TYPE,
-          value: data?.logType,
+          value: val,
         });
       },
     },
@@ -132,19 +131,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'result',
       label: '登录结果',
-      content: (data: SystemLoginLogApi.LoginLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_LOGIN_RESULT,
-          value: data?.result,
+          value: val,
         });
       },
     },
     {
       field: 'createTime',
       label: '登录日期',
-      content: (data: SystemLoginLogApi.LoginLog) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-ele/src/views/system/loginlog/modules/detail.vue b/apps/web-ele/src/views/system/loginlog/modules/detail.vue
index 17b0a2f61..773069b9f 100644
--- a/apps/web-ele/src/views/system/loginlog/modules/detail.vue
+++ b/apps/web-ele/src/views/system/loginlog/modules/detail.vue
@@ -12,14 +12,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemLoginLogApi.LoginLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 1,
-    direction: 'horizontal',
-    labelWidth: 110,
-    title: '',
-    extra: '',
-  },
+  column: 1,
+  labelWidth: 110,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/mail/log/data.ts b/apps/web-ele/src/views/system/mail/log/data.ts
index ad0c5de7d..0eefc0087 100644
--- a/apps/web-ele/src/views/system/mail/log/data.ts
+++ b/apps/web-ele/src/views/system/mail/log/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemMailLogApi } from '#/api/system/mail/log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -59,7 +58,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '邮箱账号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleMailAccountList(),
+        api: getSimpleMailAccountList,
         labelField: 'mail',
         valueField: 'id',
         clearable: true,
@@ -164,9 +163,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: SystemMailLogApi.MailLog) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'fromMail',
@@ -175,14 +172,14 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userId',
       label: '接收用户',
-      content: (data: SystemMailLogApi.MailLog) => {
-        if (data?.userType && data?.userId) {
+      render: (val, data) => {
+        if (data?.userType && val) {
           return h('div', [
             h(DictTag, {
               type: DICT_TYPE.USER_TYPE,
               value: data.userType,
             }),
-            ` (${data.userId})`,
+            ` (${val})`,
           ]);
         }
         return '无';
@@ -191,10 +188,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'toMails',
       label: '接收信息',
-      content: (data: SystemMailLogApi.MailLog) => {
+      render: (val, data) => {
         const lines: string[] = [];
-        if (data?.toMails && data.toMails.length > 0) {
-          lines.push(`收件：${data.toMails.join('、')}`);
+        if (val && val.length > 0) {
+          lines.push(`收件：${val.join('、')}`);
         }
         if (data?.ccMails && data.ccMails.length > 0) {
           lines.push(`抄送：${data.ccMails.join('、')}`);
@@ -227,28 +224,26 @@ export function useDetailSchema(): DescriptionItemSchema[] {
       field: 'templateContent',
       label: '邮件内容',
       span: 2,
-      content: (data: SystemMailLogApi.MailLog) => {
+      render: (val) => {
         return h('div', {
-          innerHTML: data?.templateContent || '',
+          innerHTML: val || '',
         });
       },
     },
     {
       field: 'sendStatus',
       label: '发送状态',
-      content: (data: SystemMailLogApi.MailLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS,
-          value: data?.sendStatus,
+          value: val,
         });
       },
     },
     {
       field: 'sendTime',
       label: '发送时间',
-      content: (data: SystemMailLogApi.MailLog) => {
-        return formatDateTime(data?.sendTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'sendMessageId',
diff --git a/apps/web-ele/src/views/system/mail/log/modules/detail.vue b/apps/web-ele/src/views/system/mail/log/modules/detail.vue
index c177f4adf..e70243d8b 100644
--- a/apps/web-ele/src/views/system/mail/log/modules/detail.vue
+++ b/apps/web-ele/src/views/system/mail/log/modules/detail.vue
@@ -12,14 +12,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemMailLogApi.MailLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 2,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  column: 2,
+  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/mail/template/data.ts b/apps/web-ele/src/views/system/mail/template/data.ts
index d567e3468..e57e92f17 100644
--- a/apps/web-ele/src/views/system/mail/template/data.ts
+++ b/apps/web-ele/src/views/system/mail/template/data.ts
@@ -42,7 +42,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '邮箱账号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleMailAccountList(),
+        api: getSimpleMailAccountList,
         labelField: 'mail',
         valueField: 'id',
         placeholder: '请选择邮箱账号',
@@ -177,7 +177,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '邮箱账号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleMailAccountList(),
+        api: getSimpleMailAccountList,
         labelField: 'mail',
         valueField: 'id',
         clearable: true,
diff --git a/apps/web-ele/src/views/system/notify/message/data.ts b/apps/web-ele/src/views/system/notify/message/data.ts
index 5954d8989..c786ee144 100644
--- a/apps/web-ele/src/views/system/notify/message/data.ts
+++ b/apps/web-ele/src/views/system/notify/message/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -166,10 +165,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userType',
       label: '用户类型',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.USER_TYPE,
-          value: data?.userType,
+          value: val,
         });
       },
     },
@@ -196,9 +195,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'templateParams',
       label: '模版参数',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         try {
-          return JSON.stringify(data?.templateParams);
+          return JSON.stringify(val);
         } catch {
           return '';
         }
@@ -207,36 +206,32 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'templateType',
       label: '模版类型',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
-          value: data?.templateType,
+          value: val,
         });
       },
     },
     {
       field: 'readStatus',
       label: '是否已读',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_BOOLEAN_STRING,
-          value: data?.readStatus,
+          value: val,
         });
       },
     },
     {
       field: 'readTime',
       label: '阅读时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.readTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-ele/src/views/system/notify/message/modules/detail.vue b/apps/web-ele/src/views/system/notify/message/modules/detail.vue
index dda2cdffd..8d9385ab9 100644
--- a/apps/web-ele/src/views/system/notify/message/modules/detail.vue
+++ b/apps/web-ele/src/views/system/notify/message/modules/detail.vue
@@ -12,14 +12,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 1,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  column: 1,
+  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/notify/my/data.ts b/apps/web-ele/src/views/system/notify/my/data.ts
index f57aa9294..21f051d6d 100644
--- a/apps/web-ele/src/views/system/notify/my/data.ts
+++ b/apps/web-ele/src/views/system/notify/my/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -103,36 +102,32 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '发送时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'templateType',
       label: '消息类型',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
-          value: data?.templateType,
+          value: val,
         });
       },
     },
     {
       field: 'readStatus',
       label: '是否已读',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_BOOLEAN_STRING,
-          value: data?.readStatus,
+          value: val,
         });
       },
     },
     {
       field: 'readTime',
       label: '阅读时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.readTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'templateContent',
diff --git a/apps/web-ele/src/views/system/notify/my/modules/detail.vue b/apps/web-ele/src/views/system/notify/my/modules/detail.vue
index dda2cdffd..8d9385ab9 100644
--- a/apps/web-ele/src/views/system/notify/my/modules/detail.vue
+++ b/apps/web-ele/src/views/system/notify/my/modules/detail.vue
@@ -12,14 +12,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 1,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  column: 1,
+  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/notify/template/data.ts b/apps/web-ele/src/views/system/notify/template/data.ts
index 285f83a7e..5aedc89dc 100644
--- a/apps/web-ele/src/views/system/notify/template/data.ts
+++ b/apps/web-ele/src/views/system/notify/template/data.ts
@@ -193,7 +193,7 @@ export function useSendNotifyFormSchema(): VbenFormSchema[] {
       label: '接收人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择接收人',
diff --git a/apps/web-ele/src/views/system/operatelog/data.ts b/apps/web-ele/src/views/system/operatelog/data.ts
index 31c808d8a..731f79a5b 100644
--- a/apps/web-ele/src/views/system/operatelog/data.ts
+++ b/apps/web-ele/src/views/system/operatelog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemOperateLogApi } from '#/api/system/operate-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { formatDateTime } from '@vben/utils';
@@ -16,7 +15,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '操作人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         clearable: true,
@@ -134,7 +133,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'traceId',
       label: '链路追踪',
-      hidden: (data: SystemOperateLogApi.OperateLog) => !data?.traceId,
+      show: (val) => !val,
     },
     {
       field: 'userId',
@@ -167,13 +166,14 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'extra',
       label: '操作拓展参数',
-      hidden: (data: SystemOperateLogApi.OperateLog) => !data?.extra,
+      show: (val) => !val,
     },
     {
       label: '请求 URL',
-      content: (data: SystemOperateLogApi.OperateLog) => {
-        if (data?.requestMethod && data?.requestUrl) {
-          return `${data.requestMethod} ${data.requestUrl}`;
+      field: 'requestUrl',
+      render: (val, data) => {
+        if (data?.requestMethod && val) {
+          return `${data.requestMethod} ${val}`;
         }
         return '';
       },
@@ -181,9 +181,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '操作时间',
-      content: (data: SystemOperateLogApi.OperateLog) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'bizId',
diff --git a/apps/web-ele/src/views/system/operatelog/modules/detail.vue b/apps/web-ele/src/views/system/operatelog/modules/detail.vue
index 890674b3c..cf892c0f1 100644
--- a/apps/web-ele/src/views/system/operatelog/modules/detail.vue
+++ b/apps/web-ele/src/views/system/operatelog/modules/detail.vue
@@ -12,14 +12,9 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemOperateLogApi.OperateLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 1,
-    direction: 'horizontal',
-    labelWidth: 110,
-    title: '',
-    extra: '',
-  },
+  column: 1,
+  direction: 'horizontal',
+  labelWidth: 110,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/sms/log/data.ts b/apps/web-ele/src/views/system/sms/log/data.ts
index 52a36a3af..3657516b6 100644
--- a/apps/web-ele/src/views/system/sms/log/data.ts
+++ b/apps/web-ele/src/views/system/sms/log/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemSmsLogApi } from '#/api/system/sms/log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -30,7 +29,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '短信渠道',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleSmsChannelList(),
+        api: getSimpleSmsChannelList,
         labelField: 'signature',
         valueField: 'id',
         clearable: true,
@@ -179,9 +178,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: SystemSmsLogApi.SmsLog) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'mobile',
@@ -198,10 +195,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'templateType',
       label: '模板类型',
-      content: (data: SystemSmsLogApi.SmsLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE,
-          value: data?.templateType,
+          value: val,
         });
       },
     },
@@ -212,19 +209,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'sendStatus',
       label: '发送状态',
-      content: (data: SystemSmsLogApi.SmsLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SMS_SEND_STATUS,
-          value: data?.sendStatus,
+          value: val,
         });
       },
     },
     {
       field: 'sendTime',
       label: '发送时间',
-      content: (data: SystemSmsLogApi.SmsLog) => {
-        return formatDateTime(data?.sendTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'apiSendCode',
@@ -237,19 +232,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'receiveStatus',
       label: '接收状态',
-      content: (data: SystemSmsLogApi.SmsLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS,
-          value: data?.receiveStatus,
+          value: val,
         });
       },
     },
     {
       field: 'receiveTime',
       label: '接收时间',
-      content: (data: SystemSmsLogApi.SmsLog) => {
-        return formatDateTime(data?.receiveTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'apiReceiveCode',
diff --git a/apps/web-ele/src/views/system/sms/log/modules/detail.vue b/apps/web-ele/src/views/system/sms/log/modules/detail.vue
index 622efdb8f..4fcd48df9 100644
--- a/apps/web-ele/src/views/system/sms/log/modules/detail.vue
+++ b/apps/web-ele/src/views/system/sms/log/modules/detail.vue
@@ -12,14 +12,9 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemSmsLogApi.SmsLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 2,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  column: 2,
+  direction: 'horizontal',
+  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/sms/template/data.ts b/apps/web-ele/src/views/system/sms/template/data.ts
index 54701404d..0a3d3e814 100644
--- a/apps/web-ele/src/views/system/sms/template/data.ts
+++ b/apps/web-ele/src/views/system/sms/template/data.ts
@@ -52,7 +52,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '短信渠道',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleSmsChannelList(),
+        api: getSimpleSmsChannelList,
         labelField: 'signature',
         valueField: 'id',
         placeholder: '请选择短信渠道',
@@ -144,7 +144,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '短信渠道',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleSmsChannelList(),
+        api: getSimpleSmsChannelList,
         labelField: 'signature',
         valueField: 'id',
         clearable: true,
diff --git a/apps/web-ele/src/views/system/social/user/data.ts b/apps/web-ele/src/views/system/social/user/data.ts
index b3db14baf..77847d0a0 100644
--- a/apps/web-ele/src/views/system/social/user/data.ts
+++ b/apps/web-ele/src/views/system/social/user/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemSocialUserApi } from '#/api/system/social/user';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -8,6 +7,8 @@ import { h } from 'vue';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
+import { ElImage } from 'element-plus';
+
 import { DictTag } from '#/components/dict-tag';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -111,10 +112,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'type',
       label: '社交平台',
-      content: (data: SystemSocialUserApi.SocialUser) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SOCIAL_TYPE,
-          value: data?.type,
+          value: val,
         });
       },
     },
@@ -125,16 +126,13 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'avatar',
       label: '用户头像',
-      // TODO @芋艿：使用 antd 的 Image 组件
-      content: (data: SystemSocialUserApi.SocialUser) => {
-        if (data?.avatar) {
-          return h('img', {
-            src: data.avatar,
-            style: 'width: 30px; height: 30px; cursor: pointer;',
-            onClick: () => {
-              // 可以添加图片预览功能
-              window.open(data.avatar, '_blank');
-            },
+      render: (val) => {
+        if (val) {
+          return h(ElImage, {
+            src: val,
+            previewSrcList: [val],
+            class: 'w-10 h-10 cursor-pointer',
+            previewTeleported: true,
           });
         }
         return '无';
diff --git a/apps/web-ele/src/views/system/social/user/modules/detail.vue b/apps/web-ele/src/views/system/social/user/modules/detail.vue
index aa9caec0a..ffae89ce5 100644
--- a/apps/web-ele/src/views/system/social/user/modules/detail.vue
+++ b/apps/web-ele/src/views/system/social/user/modules/detail.vue
@@ -14,14 +14,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemSocialUserApi.SocialUser>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 1,
-    direction: 'horizontal',
-    title: '',
-    extra: '',
-    labelWidth: 185,
-  },
+  column: 1,
+  labelWidth: 185,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/tenant/data.ts b/apps/web-ele/src/views/system/tenant/data.ts
index ecacc0401..94d005338 100644
--- a/apps/web-ele/src/views/system/tenant/data.ts
+++ b/apps/web-ele/src/views/system/tenant/data.ts
@@ -35,7 +35,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '租户套餐',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getTenantPackageList(),
+        api: getTenantPackageList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择租户套餐',
diff --git a/apps/web-ele/src/views/system/user/data.ts b/apps/web-ele/src/views/system/user/data.ts
index d0f5ba5c1..43fc5e49a 100644
--- a/apps/web-ele/src/views/system/user/data.ts
+++ b/apps/web-ele/src/views/system/user/data.ts
@@ -70,7 +70,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '岗位',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimplePostList(),
+        api: getSimplePostList,
         labelField: 'name',
         valueField: 'id',
         multiple: true,
@@ -212,7 +212,7 @@ export function useAssignRoleFormSchema(): VbenFormSchema[] {
       label: '角色',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleRoleList(),
+        api: getSimpleRoleList,
         labelField: 'name',
         valueField: 'id',
         multiple: true,
diff --git a/apps/web-naive/src/components/description/description.vue b/apps/web-naive/src/components/description/description.vue
index ef0239933..51f0df4d3 100644
--- a/apps/web-naive/src/components/description/description.vue
+++ b/apps/web-naive/src/components/description/description.vue
@@ -1,80 +1,198 @@
 <script lang="tsx">
-import type { DescriptionsProps } from 'naive-ui';
+import type { DescriptionsProps as NDescriptionsProps } from 'naive-ui';
 
-import type { PropType } from 'vue';
+import type { CSSProperties, PropType, Slots } from 'vue';
 
-import type { DescriptionItemSchema, DescriptionsOptions } from './typing';
+import type { DescriptionItemSchema, DescriptionProps } from './typing';
 
-import { defineComponent } from 'vue';
+import { computed, defineComponent, ref, unref, useAttrs } from 'vue';
 
-import { get } from '@vben/utils';
+import { get, getNestedValue, isFunction } from '@vben/utils';
 
-import { NDescriptions, NDescriptionsItem } from 'naive-ui';
+import { NCard, NDescriptions, NDescriptionsItem } from 'naive-ui';
 
-/** 对 Descriptions 进行二次封装 */
-const Description = defineComponent({
-  name: 'Descriptions',
-  props: {
-    data: {
-      type: Object as PropType<Record<string, any>>,
-      default: () => ({}),
-    },
-    schema: {
-      type: Array as PropType<DescriptionItemSchema[]>,
-      default: () => [],
-    },
-    // Descriptions 原生 props
-    componentProps: {
-      type: Object as PropType<DescriptionsProps>,
-      default: () => ({}),
+const props = {
+  bordered: { default: true, type: Boolean },
+  column: {
+    default: () => {
+      return { lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4 };
     },
+    type: [Number, Object],
   },
+  data: { type: Object },
+  schema: {
+    default: () => [],
+    type: Array as PropType<DescriptionItemSchema[]>,
+  },
+  size: {
+    default: 'small',
+    type: String,
+    validator: (v: string) =>
+      ['default', 'middle', 'small', undefined].includes(v),
+  },
+  title: { default: '', type: String },
+  useCard: { default: true, type: Boolean },
+  labelPlacement: { default: 'left', type: String as PropType<'left' | 'top'> },
+};
 
-  setup(props: DescriptionsOptions) {
-    // TODO @xingyu：每个 field 的 slot 的考虑
-    // TODO @xingyu：from 5.0：extra: () => getSlot(slots, 'extra')
-    /** 过滤掉不需要展示的 */
-    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;
+function getSlot(slots: Slots, slot: string, data?: any) {
+  if (!slots || !Reflect.has(slots, slot)) {
+    return null;
+  }
+  if (!isFunction(slots[slot])) {
+    console.error(`${slot} is not a function!`);
+    return null;
+  }
+  const slotFn = slots[slot];
+  if (!slotFn) return null;
+  return slotFn({ data });
+}
+
+export default defineComponent({
+  name: 'Description',
+  props,
+  setup(props, { slots }) {
+    const propsRef = ref<null | Partial<DescriptionProps>>(null);
+
+    const prefixCls = 'description';
+    const attrs = useAttrs();
+
+    // Custom title component: get title
+    const getMergeProps = computed(() => {
+      return {
+        ...props,
+        ...(unref(propsRef) as any),
+      } as DescriptionProps;
+    });
+
+    const getProps = computed(() => {
+      const opt = {
+        ...unref(getMergeProps),
+        title: undefined,
+      };
+      return opt as DescriptionProps;
+    });
+
+    const useWrapper = computed(() => !!unref(getMergeProps).title);
+
+    const getDescriptionsProps = computed(() => {
+      return { ...unref(attrs), ...unref(getProps) } as NDescriptionsProps;
+    });
+
+    // 防止换行
+    function renderLabel({
+      label,
+      labelMinWidth,
+      labelStyle,
+    }: DescriptionItemSchema) {
+      if (!labelStyle && !labelMinWidth) {
+        return label;
       }
-      return item.field ? get(props.data, item.field) : null;
-    };
 
-    return () => (
-      <NDescriptions
-        {...props}
-        bordered={props.componentProps?.bordered}
-        column={props.componentProps?.column}
-        labelPlacement={props.componentProps?.labelPlacement || 'left'}
-        size={props.componentProps?.size}
-        title={props.componentProps?.title}
-      >
-        {props.schema?.filter(shouldShowItem).map((item) => (
-          <NDescriptionsItem
-            contentStyle={item.contentStyle}
-            key={item.field || String(item.label)}
-            label={item.label as string}
-            labelStyle={item.labelStyle}
-            span={item.span}
-          >
-            {renderContent(item)}
-          </NDescriptionsItem>
-        ))}
-      </NDescriptions>
-    );
+      const labelStyles: CSSProperties = {
+        ...labelStyle,
+        minWidth: `${labelMinWidth}px `,
+      };
+      return <div style={labelStyles}>{label}</div>;
+    }
+
+    function renderItem() {
+      const { data, schema } = unref(getProps);
+      return unref(schema)
+        .map((item) => {
+          const { contentMinWidth, field, render, show, span } = item;
+
+          if (show && isFunction(show) && !show(data)) {
+            return null;
+          }
+
+          function getContent() {
+            const _data = unref(getProps)?.data;
+            if (!_data) {
+              return null;
+            }
+            const getField = field.includes('.')
+              ? (getNestedValue(_data, field) ?? get(_data, field))
+              : get(_data, field);
+            // if (
+            //   getField &&
+            //   !Object.prototype.hasOwnProperty.call(toRefs(_data), field)
+            // ) {
+            //   return isFunction(render) ? render('', _data) : (getField ?? '');
+            // }
+            return isFunction(render)
+              ? render(getField, _data)
+              : (getField ?? '');
+          }
+
+          const width = contentMinWidth;
+          return (
+            <NDescriptionsItem key={field} span={span}>
+              {{
+                label: () => {
+                  return renderLabel(item);
+                },
+                default: () => {
+                  if (item.slot) {
+                    const slotContent = getSlot(slots, item.slot, data);
+                    return slotContent;
+                  }
+                  if (!contentMinWidth) {
+                    return getContent();
+                  }
+                  const style: CSSProperties = {
+                    minWidth: `${width}px`,
+                  };
+                  return <div style={style}>{getContent()}</div>;
+                },
+              }}
+            </NDescriptionsItem>
+          );
+        })
+        .filter((item) => !!item);
+    }
+
+    function renderDesc() {
+      return (
+        <NDescriptions
+          class={`${prefixCls}`}
+          {...(unref(getDescriptionsProps) as any)}
+        >
+          {renderItem()}
+        </NDescriptions>
+      );
+    }
+
+    function renderCard() {
+      const content = props.useCard ? renderDesc() : <div>{renderDesc()}</div>;
+      // Reduce the dom level
+      if (!props.useCard) {
+        return content;
+      }
+
+      const { title } = unref(getMergeProps);
+      const extraSlot = getSlot(slots, 'extra');
+
+      return (
+        <NCard
+          contentStyle={{ padding: '8px 0' }}
+          headerStyle={{
+            padding: '8px 16px',
+            fontSize: '14px',
+            minHeight: '24px',
+          }}
+          style={{ margin: 0 }}
+          title={title}
+        >
+          {{
+            default: () => content,
+            extra: () => extraSlot && <div>{extraSlot}</div>,
+          }}
+        </NCard>
+      );
+    }
+
+    return () => (unref(useWrapper) ? renderCard() : renderDesc());
   },
 });
-
-// TODO @xingyu：from 5.0：emits: ['register'] 事件
-export default Description;
 </script>
diff --git a/apps/web-naive/src/components/description/typing.ts b/apps/web-naive/src/components/description/typing.ts
index 7aadf72dd..9ee489678 100644
--- a/apps/web-naive/src/components/description/typing.ts
+++ b/apps/web-naive/src/components/description/typing.ts
@@ -1,27 +1,41 @@
-import type { DescriptionsProps } from 'naive-ui';
+import type { DescriptionsProps as NDescriptionsProps } from 'naive-ui';
+import type { JSX } from 'vue/jsx-runtime';
 
 import type { CSSProperties, VNode } from 'vue';
 
-// TODO @xingyu：【content】这个纠结下；1）vben2.0 是 render；https://doc.vvbin.cn/components/desc.html#usage 2）
-// TODO @xingyu：vben2.0 还有 sapn【done】、labelMinWidth、contentMinWidth
-// TODO @xingyu：【hidden】这个纠结下；1）vben2.0 是 show；
+import type { Recordable } from '@vben/types';
+
 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; // 是否显示
+  labelMinWidth?: number;
+  contentMinWidth?: number;
+  // 自定义标签样式
+  labelStyle?: CSSProperties;
+  // 对应 data 中的字段名
+  field: string;
+  // 内容的描述
+  label: JSX.Element | string | VNode;
+  // 包含列的数量
+  span?: number;
+  // 是否显示
+  show?: (...arg: any) => boolean;
+  // 插槽名称
+  slot?: string;
+  // 自定义需要展示的内容
+  render?: (
+    val: any,
+    data?: Recordable<any>,
+  ) => Element | JSX.Element | number | string | undefined | VNode;
 }
 
-// TODO @xingyu：vben2.0 还有 title【done】、bordered【done】d、useCollapse、collapseOptions
-// TODO @xingyu：from 5.0：bordered 默认为 true
-// TODO @xingyu：from 5.0：column 默认为 lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4
-// TODO @xingyu：from 5.0：size 默认为 small；有 'default', 'middle', 'small', undefined
-// TODO @xingyu：from 5.0：useCollapse 默认为 true
-export interface DescriptionsOptions {
-  data?: Record<string, any>; // 数据
-  schema?: DescriptionItemSchema[]; // 描述项配置
-  componentProps?: DescriptionsProps; // antd Descriptions 组件参数
+export interface DescriptionProps extends NDescriptionsProps {
+  // 是否包含卡片组件
+  useCard?: boolean;
+  // 描述项配置
+  schema: DescriptionItemSchema[];
+  // 数据
+  data: Recordable<any>;
+}
+
+export interface DescInstance {
+  setDescProps(descProps: Partial<DescriptionProps>): void;
 }
diff --git a/apps/web-naive/src/components/description/use-description.ts b/apps/web-naive/src/components/description/use-description.ts
index 7f99238bf..fd24920f0 100644
--- a/apps/web-naive/src/components/description/use-description.ts
+++ b/apps/web-naive/src/components/description/use-description.ts
@@ -1,71 +1,31 @@
-import type { DescriptionsOptions } from './typing';
+import type { Component } from 'vue';
 
-import { defineComponent, h, isReactive, reactive, watch } from 'vue';
+import type { DescInstance, DescriptionProps } from './typing';
+
+import { h, reactive } from 'vue';
 
 import Description from './description.vue';
 
-/** 描述列表 api 定义 */
-class DescriptionApi {
-  private state = reactive<Record<string, any>>({});
+export function useDescription(options?: Partial<DescriptionProps>) {
+  const propsState = reactive<Partial<DescriptionProps>>(options || {});
 
-  constructor(options: DescriptionsOptions) {
-    this.state = { ...options };
-  }
+  const api: DescInstance = {
+    setDescProps: (descProps: Partial<DescriptionProps>): void => {
+      Object.assign(propsState, descProps);
+    },
+  };
 
-  getState(): DescriptionsOptions {
-    return this.state as DescriptionsOptions;
-  }
-
-  // TODO @xingyu：【setState】纠结下：1）vben2.0 是 data https://doc.vvbin.cn/components/desc.html#usage；
-  setState(newState: Partial<DescriptionsOptions>) {
-    this.state = { ...this.state, ...newState };
-  }
-}
-
-export type ExtendedDescriptionApi = DescriptionApi;
-
-export function useDescription(options: DescriptionsOptions) {
-  const IS_REACTIVE = isReactive(options);
-  const api = new DescriptionApi(options);
-  // 扩展 API
-  const extendedApi: ExtendedDescriptionApi = api as never;
-  const Desc = defineComponent({
+  // 创建一个包装组件，将 propsState 合并到 props 中
+  const DescriptionWrapper: Component = {
     name: 'UseDescription',
     inheritAttrs: false,
-    setup(_, { attrs, slots }) {
-      // 合并props和attrs到state
-      api.setState({ ...attrs });
-
-      return () =>
-        h(
-          Description,
-          {
-            ...api.getState(),
-            ...attrs,
-          },
-          slots,
-        );
+    setup(_props, { attrs, slots }) {
+      return () => {
+        // @ts-ignore - 避免类型实例化过深
+        return h(Description, { ...propsState, ...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;
+  return [DescriptionWrapper, api] as const;
 }
diff --git a/apps/web-naive/src/views/infra/apiAccessLog/data.ts b/apps/web-naive/src/views/infra/apiAccessLog/data.ts
index f4fc9f088..706928895 100644
--- a/apps/web-naive/src/views/infra/apiAccessLog/data.ts
+++ b/apps/web-naive/src/views/infra/apiAccessLog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraApiAccessLogApi } from '#/api/infra/api-access-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -181,10 +180,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userType',
       label: '用户类型',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.USER_TYPE,
-          value: data.userType,
+          value: val,
         });
       },
     },
@@ -197,10 +196,11 @@ export function useDetailSchema(): DescriptionItemSchema[] {
       label: '用户 UA',
     },
     {
+      field: 'requestMethod',
       label: '请求信息',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data?.requestMethod && data?.requestUrl) {
-          return `${data.requestMethod} ${data.requestUrl}`;
+      render: (val, data) => {
+        if (val && data?.requestUrl) {
+          return `${val} ${data.requestUrl}`;
         }
         return '';
       },
@@ -208,10 +208,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'requestParams',
       label: '请求参数',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data.requestParams) {
+      render: (val) => {
+        if (val) {
           return h(JsonViewer, {
-            value: JSON.parse(data.requestParams),
+            value: JSON.parse(val),
             previewMode: true,
           });
         }
@@ -224,26 +224,29 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     },
     {
       label: '请求时间',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data?.beginTime && data?.endTime) {
-          return `${formatDateTime(data.beginTime)} ~ ${formatDateTime(data.endTime)}`;
+      field: 'beginTime',
+      render: (val, data) => {
+        if (val && data?.endTime) {
+          return `${formatDateTime(val)} ~ ${formatDateTime(data.endTime)}`;
         }
         return '';
       },
     },
     {
       label: '请求耗时',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        return data?.duration ? `${data.duration} ms` : '';
+      field: 'duration',
+      render: (val) => {
+        return val ? `${val} ms` : '';
       },
     },
     {
       label: '操作结果',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data?.resultCode === 0) {
+      field: 'resultCode',
+      render: (val, data) => {
+        if (val === 0) {
           return '正常';
-        } else if (data && data.resultCode > 0) {
-          return `失败 | ${data.resultCode} | ${data.resultMsg}`;
+        } else if (val > 0 && data?.resultMsg) {
+          return `失败 | ${val} | ${data.resultMsg}`;
         }
         return '';
       },
@@ -259,10 +262,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'operateType',
       label: '操作类型',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_OPERATE_TYPE,
-          value: data?.operateType,
+          value: val,
         });
       },
     },
diff --git a/apps/web-naive/src/views/infra/apiAccessLog/modules/detail.vue b/apps/web-naive/src/views/infra/apiAccessLog/modules/detail.vue
index 70869fe38..5fd1e5eeb 100644
--- a/apps/web-naive/src/views/infra/apiAccessLog/modules/detail.vue
+++ b/apps/web-naive/src/views/infra/apiAccessLog/modules/detail.vue
@@ -12,11 +12,7 @@ import { useDetailSchema } from '../data';
 const formData = ref<InfraApiAccessLogApi.ApiAccessLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    contentClass: 'mx-4',
-  },
+  column: 1,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/infra/apiErrorLog/data.ts b/apps/web-naive/src/views/infra/apiErrorLog/data.ts
index fcd977971..87316a97e 100644
--- a/apps/web-naive/src/views/infra/apiErrorLog/data.ts
+++ b/apps/web-naive/src/views/infra/apiErrorLog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraApiErrorLogApi } from '#/api/infra/api-error-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -158,10 +157,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userType',
       label: '用户类型',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.USER_TYPE,
-          value: data.userType,
+          value: val,
         });
       },
     },
@@ -176,9 +175,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'requestMethod',
       label: '请求信息',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        if (data?.requestMethod && data?.requestUrl) {
-          return `${data.requestMethod} ${data.requestUrl}`;
+      render: (val, data) => {
+        if (val && data?.requestUrl) {
+          return `${val} ${data.requestUrl}`;
         }
         return '';
       },
@@ -186,10 +185,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'requestParams',
       label: '请求参数',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        if (data.requestParams) {
+      render: (val) => {
+        if (val) {
           return h(JsonViewer, {
-            value: JSON.parse(data.requestParams),
+            value: JSON.parse(val),
             previewMode: true,
           });
         }
@@ -199,8 +198,8 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'exceptionTime',
       label: '异常时间',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        return formatDateTime(data?.exceptionTime || '') as string;
+      render: (val) => {
+        return formatDateTime(val) as string;
       },
     },
     {
@@ -210,12 +209,11 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'exceptionStackTrace',
       label: '异常堆栈',
-      hidden: (data: InfraApiErrorLogApi.ApiErrorLog) =>
-        !data?.exceptionStackTrace,
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        if (data?.exceptionStackTrace) {
+      show: (val) => !val,
+      render: (val) => {
+        if (val) {
           return h('textarea', {
-            value: data.exceptionStackTrace,
+            value: val,
             style:
               'width: 100%; min-height: 200px; max-height: 400px; resize: vertical;',
             readonly: true,
@@ -227,24 +225,24 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'processStatus',
       label: '处理状态',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS,
-          value: data?.processStatus,
+          value: val,
         });
       },
     },
     {
       field: 'processUserId',
       label: '处理人',
-      hidden: (data: InfraApiErrorLogApi.ApiErrorLog) => !data?.processUserId,
+      show: (val) => !val,
     },
     {
       field: 'processTime',
       label: '处理时间',
-      hidden: (data: InfraApiErrorLogApi.ApiErrorLog) => !data?.processTime,
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        return formatDateTime(data?.processTime || '') as string;
+      show: (val) => !val,
+      render: (val) => {
+        return formatDateTime(val) as string;
       },
     },
   ];
diff --git a/apps/web-naive/src/views/infra/apiErrorLog/modules/detail.vue b/apps/web-naive/src/views/infra/apiErrorLog/modules/detail.vue
index 3d4836696..b46a368e8 100644
--- a/apps/web-naive/src/views/infra/apiErrorLog/modules/detail.vue
+++ b/apps/web-naive/src/views/infra/apiErrorLog/modules/detail.vue
@@ -12,11 +12,7 @@ import { useDetailSchema } from '../data';
 const formData = ref<InfraApiErrorLogApi.ApiErrorLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    contentClass: 'mx-4',
-  },
+  column: 1,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/infra/codegen/data.ts b/apps/web-naive/src/views/infra/codegen/data.ts
index 2810eaa01..ed742d84f 100644
--- a/apps/web-naive/src/views/infra/codegen/data.ts
+++ b/apps/web-naive/src/views/infra/codegen/data.ts
@@ -25,7 +25,7 @@ export function useImportTableFormSchema(): VbenFormSchema[] {
       label: '数据源',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getDataSourceConfigList(),
+        api: getDataSourceConfigList,
         labelField: 'name',
         valueField: 'id',
         autoSelect: 'first',
diff --git a/apps/web-naive/src/views/infra/job/data.ts b/apps/web-naive/src/views/infra/job/data.ts
index 5a72b3ead..e62160b82 100644
--- a/apps/web-naive/src/views/infra/job/data.ts
+++ b/apps/web-naive/src/views/infra/job/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraJobApi } from '#/api/infra/job';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h, markRaw } from 'vue';
@@ -191,10 +190,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '任务状态',
-      content: (data: InfraJobApi.Job) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_JOB_STATUS,
-          value: data?.status,
+          value: val,
         });
       },
     },
@@ -216,27 +215,27 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     },
     {
       label: '重试间隔',
-      content: (data: InfraJobApi.Job) => {
-        return data?.retryInterval ? `${data.retryInterval} 毫秒` : '无间隔';
+      field: 'retryInterval',
+      render: (val) => {
+        return val ? `${val} 毫秒` : '无间隔';
       },
     },
     {
       label: '监控超时时间',
-      content: (data: InfraJobApi.Job) => {
-        return data?.monitorTimeout && data.monitorTimeout > 0
-          ? `${data.monitorTimeout} 毫秒`
-          : '未开启';
+      field: 'monitorTimeout',
+      render: (val) => {
+        return val && val > 0 ? `${val} 毫秒` : '未开启';
       },
     },
     {
       field: 'nextTimes',
       label: '后续执行时间',
-      content: (data: InfraJobApi.Job) => {
-        if (!data?.nextTimes || data.nextTimes.length === 0) {
+      render: (val) => {
+        if (!val || val.length === 0) {
           return '无后续执行时间';
         }
         return h(NTimeline, {}, () =>
-          data.nextTimes?.map((time: Date) =>
+          val?.map((time: Date) =>
             h(NTimelineItem, {}, () => formatDateTime(time)),
           ),
         );
diff --git a/apps/web-naive/src/views/infra/job/logger/data.ts b/apps/web-naive/src/views/infra/job/logger/data.ts
index cf1ec6d88..f39199f57 100644
--- a/apps/web-naive/src/views/infra/job/logger/data.ts
+++ b/apps/web-naive/src/views/infra/job/logger/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraJobLogApi } from '#/api/infra/job-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -148,9 +147,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'beginTime',
       label: '执行时间',
-      content: (data: InfraJobLogApi.JobLog) => {
-        if (data?.beginTime && data?.endTime) {
-          return `${formatDateTime(data.beginTime)} ~ ${formatDateTime(data.endTime)}`;
+      render: (val, data) => {
+        if (val && data?.endTime) {
+          return `${formatDateTime(val)} ~ ${formatDateTime(data.endTime)}`;
         }
         return '';
       },
@@ -158,17 +157,15 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'duration',
       label: '执行时长',
-      content: (data: InfraJobLogApi.JobLog) => {
-        return data?.duration ? `${data.duration} 毫秒` : '';
-      },
+      render: (val) => (val ? `${val} 毫秒` : ''),
     },
     {
       field: 'status',
       label: '任务状态',
-      content: (data: InfraJobLogApi.JobLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_JOB_LOG_STATUS,
-          value: data?.status,
+          value: val,
         });
       },
     },
diff --git a/apps/web-naive/src/views/infra/job/logger/modules/detail.vue b/apps/web-naive/src/views/infra/job/logger/modules/detail.vue
index 75b26d90a..a63352a78 100644
--- a/apps/web-naive/src/views/infra/job/logger/modules/detail.vue
+++ b/apps/web-naive/src/views/infra/job/logger/modules/detail.vue
@@ -13,11 +13,7 @@ import { useDetailSchema } from '../data';
 const formData = ref<InfraJobLogApi.JobLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    contentClass: 'mx-4',
-  },
+  column: 1,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/infra/job/modules/detail.vue b/apps/web-naive/src/views/infra/job/modules/detail.vue
index 0a8078ce5..4d58ca0a0 100644
--- a/apps/web-naive/src/views/infra/job/modules/detail.vue
+++ b/apps/web-naive/src/views/infra/job/modules/detail.vue
@@ -14,11 +14,7 @@ const formData = ref<InfraJobApi.Job>(); // 任务详情
 const nextTimes = ref<Date[]>([]); // 下一次执行时间
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    contentClass: 'mx-4',
-  },
+  column: 1,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/infra/redis/modules/memory.vue b/apps/web-naive/src/views/infra/redis/modules/memory.vue
index 6eeda8958..5220c4631 100644
--- a/apps/web-naive/src/views/infra/redis/modules/memory.vue
+++ b/apps/web-naive/src/views/infra/redis/modules/memory.vue
@@ -94,7 +94,7 @@ function renderMemoryChart() {
         detail: {
           show: true,
           offsetCenter: [0, '50%'],
-          color: 'auto',
+          color: 'inherit',
           fontSize: 30,
           formatter: usedMemory,
         },
diff --git a/apps/web-naive/src/views/system/dept/data.ts b/apps/web-naive/src/views/system/dept/data.ts
index ae9a462c6..b81ccbc2f 100644
--- a/apps/web-naive/src/views/system/dept/data.ts
+++ b/apps/web-naive/src/views/system/dept/data.ts
@@ -75,7 +75,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '负责人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择负责人',
diff --git a/apps/web-naive/src/views/system/dict/data.ts b/apps/web-naive/src/views/system/dict/data.ts
index 76d5be456..6049b56a1 100644
--- a/apps/web-naive/src/views/system/dict/data.ts
+++ b/apps/web-naive/src/views/system/dict/data.ts
@@ -186,7 +186,7 @@ export function useDataFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: (values) => {
         return {
-          api: () => getSimpleDictTypeList(),
+          api: getSimpleDictTypeList,
           placeholder: '请输入字典类型',
           labelField: 'name',
           valueField: 'type',
diff --git a/apps/web-naive/src/views/system/loginlog/data.ts b/apps/web-naive/src/views/system/loginlog/data.ts
index 03704e311..dfef348df 100644
--- a/apps/web-naive/src/views/system/loginlog/data.ts
+++ b/apps/web-naive/src/views/system/loginlog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemLoginLogApi } from '#/api/system/login-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -110,10 +109,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'logType',
       label: '操作类型',
-      content: (data: SystemLoginLogApi.LoginLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_LOGIN_TYPE,
-          value: data?.logType,
+          value: val,
         });
       },
     },
@@ -132,19 +131,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'result',
       label: '登录结果',
-      content: (data: SystemLoginLogApi.LoginLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_LOGIN_RESULT,
-          value: data?.result,
+          value: val,
         });
       },
     },
     {
       field: 'createTime',
       label: '登录日期',
-      content: (data: SystemLoginLogApi.LoginLog) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-naive/src/views/system/loginlog/modules/detail.vue b/apps/web-naive/src/views/system/loginlog/modules/detail.vue
index 9d3ceed35..4904fd4ad 100644
--- a/apps/web-naive/src/views/system/loginlog/modules/detail.vue
+++ b/apps/web-naive/src/views/system/loginlog/modules/detail.vue
@@ -12,11 +12,7 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemLoginLogApi.LoginLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    contentClass: 'mx-4',
-  },
+  column: 1,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/system/mail/log/data.ts b/apps/web-naive/src/views/system/mail/log/data.ts
index 3297b8eb4..d61137560 100644
--- a/apps/web-naive/src/views/system/mail/log/data.ts
+++ b/apps/web-naive/src/views/system/mail/log/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemMailLogApi } from '#/api/system/mail/log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -59,7 +58,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '邮箱账号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleMailAccountList(),
+        api: getSimpleMailAccountList,
         labelField: 'mail',
         valueField: 'id',
         clearable: true,
@@ -164,9 +163,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: SystemMailLogApi.MailLog) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'fromMail',
@@ -175,12 +172,12 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userId',
       label: '接收用户',
-      content: (data: SystemMailLogApi.MailLog) => {
-        if (data?.userType && data?.userId) {
+      render: (val, data) => {
+        if (val && data?.userId) {
           return h('div', [
             h(DictTag, {
               type: DICT_TYPE.USER_TYPE,
-              value: data.userType,
+              value: val,
             }),
             ` (${data.userId})`,
           ]);
@@ -191,10 +188,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'toMails',
       label: '接收信息',
-      content: (data: SystemMailLogApi.MailLog) => {
+      render: (val, data) => {
         const lines: string[] = [];
-        if (data?.toMails && data.toMails.length > 0) {
-          lines.push(`收件：${data.toMails.join('、')}`);
+        if (val && val.length > 0) {
+          lines.push(`收件：${val.join('、')}`);
         }
         if (data?.ccMails && data.ccMails.length > 0) {
           lines.push(`抄送：${data.ccMails.join('、')}`);
@@ -227,28 +224,22 @@ export function useDetailSchema(): DescriptionItemSchema[] {
       field: 'templateContent',
       label: '邮件内容',
       span: 2,
-      content: (data: SystemMailLogApi.MailLog) => {
-        return h('div', {
-          innerHTML: data?.templateContent || '',
-        });
-      },
+      render: (val) => h('div', { innerHTML: val || '' }),
     },
     {
       field: 'sendStatus',
       label: '发送状态',
-      content: (data: SystemMailLogApi.MailLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS,
-          value: data?.sendStatus,
+          value: val,
         });
       },
     },
     {
       field: 'sendTime',
       label: '发送时间',
-      content: (data: SystemMailLogApi.MailLog) => {
-        return formatDateTime(data?.sendTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'sendMessageId',
diff --git a/apps/web-naive/src/views/system/mail/log/modules/detail.vue b/apps/web-naive/src/views/system/mail/log/modules/detail.vue
index 8775e691d..63ad9ad09 100644
--- a/apps/web-naive/src/views/system/mail/log/modules/detail.vue
+++ b/apps/web-naive/src/views/system/mail/log/modules/detail.vue
@@ -12,11 +12,7 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemMailLogApi.MailLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 2,
-    contentClass: 'mx-4',
-  },
+  column: 2,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/system/mail/template/data.ts b/apps/web-naive/src/views/system/mail/template/data.ts
index 01aded480..fa20c0554 100644
--- a/apps/web-naive/src/views/system/mail/template/data.ts
+++ b/apps/web-naive/src/views/system/mail/template/data.ts
@@ -42,7 +42,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '邮箱账号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleMailAccountList(),
+        api: getSimpleMailAccountList,
         labelField: 'mail',
         valueField: 'id',
         placeholder: '请选择邮箱账号',
@@ -187,7 +187,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '邮箱账号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleMailAccountList(),
+        api: getSimpleMailAccountList,
         labelField: 'mail',
         valueField: 'id',
         clearable: true,
diff --git a/apps/web-naive/src/views/system/notify/message/data.ts b/apps/web-naive/src/views/system/notify/message/data.ts
index 951671dd9..72d423d75 100644
--- a/apps/web-naive/src/views/system/notify/message/data.ts
+++ b/apps/web-naive/src/views/system/notify/message/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -166,10 +165,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userType',
       label: '用户类型',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.USER_TYPE,
-          value: data?.userType,
+          value: val,
         });
       },
     },
@@ -196,9 +195,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'templateParams',
       label: '模版参数',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         try {
-          return JSON.stringify(data?.templateParams);
+          return JSON.stringify(val);
         } catch {
           return '';
         }
@@ -207,36 +206,32 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'templateType',
       label: '模版类型',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
-          value: data?.templateType,
+          value: val,
         });
       },
     },
     {
       field: 'readStatus',
       label: '是否已读',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_BOOLEAN_STRING,
-          value: data?.readStatus,
+          value: val,
         });
       },
     },
     {
       field: 'readTime',
       label: '阅读时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.readTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-naive/src/views/system/notify/message/modules/detail.vue b/apps/web-naive/src/views/system/notify/message/modules/detail.vue
index 6e4c26eab..8305d2470 100644
--- a/apps/web-naive/src/views/system/notify/message/modules/detail.vue
+++ b/apps/web-naive/src/views/system/notify/message/modules/detail.vue
@@ -12,11 +12,7 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    contentClass: 'mx-4',
-  },
+  column: 1,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/system/notify/my/data.ts b/apps/web-naive/src/views/system/notify/my/data.ts
index 119f9097e..ca56be57b 100644
--- a/apps/web-naive/src/views/system/notify/my/data.ts
+++ b/apps/web-naive/src/views/system/notify/my/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -103,36 +102,32 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '发送时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'templateType',
       label: '消息类型',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
-          value: data?.templateType,
+          value: val,
         });
       },
     },
     {
       field: 'readStatus',
       label: '是否已读',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_BOOLEAN_STRING,
-          value: data?.readStatus,
+          value: val,
         });
       },
     },
     {
       field: 'readTime',
       label: '阅读时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.readTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'templateContent',
diff --git a/apps/web-naive/src/views/system/notify/my/modules/detail.vue b/apps/web-naive/src/views/system/notify/my/modules/detail.vue
index 6e4c26eab..8305d2470 100644
--- a/apps/web-naive/src/views/system/notify/my/modules/detail.vue
+++ b/apps/web-naive/src/views/system/notify/my/modules/detail.vue
@@ -12,11 +12,7 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    contentClass: 'mx-4',
-  },
+  column: 1,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/system/notify/template/data.ts b/apps/web-naive/src/views/system/notify/template/data.ts
index 398239bf2..67e09176b 100644
--- a/apps/web-naive/src/views/system/notify/template/data.ts
+++ b/apps/web-naive/src/views/system/notify/template/data.ts
@@ -196,7 +196,7 @@ export function useSendNotifyFormSchema(): VbenFormSchema[] {
       label: '接收人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择接收人',
diff --git a/apps/web-naive/src/views/system/operatelog/data.ts b/apps/web-naive/src/views/system/operatelog/data.ts
index 096103466..fd4eed9f0 100644
--- a/apps/web-naive/src/views/system/operatelog/data.ts
+++ b/apps/web-naive/src/views/system/operatelog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemOperateLogApi } from '#/api/system/operate-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { formatDateTime } from '@vben/utils';
@@ -16,7 +15,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '操作人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         clearable: true,
@@ -134,7 +133,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'traceId',
       label: '链路追踪',
-      hidden: (data: SystemOperateLogApi.OperateLog) => !data?.traceId,
+      show: (val) => !val,
     },
     {
       field: 'userId',
@@ -167,13 +166,14 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'extra',
       label: '操作拓展参数',
-      hidden: (data: SystemOperateLogApi.OperateLog) => !data?.extra,
+      show: (val) => !val,
     },
     {
+      field: 'requestUrl',
       label: '请求 URL',
-      content: (data: SystemOperateLogApi.OperateLog) => {
-        if (data?.requestMethod && data?.requestUrl) {
-          return `${data.requestMethod} ${data.requestUrl}`;
+      render: (val, data) => {
+        if (data?.requestMethod && val) {
+          return `${data.requestMethod} ${val}`;
         }
         return '';
       },
@@ -181,9 +181,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '操作时间',
-      content: (data: SystemOperateLogApi.OperateLog) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'bizId',
diff --git a/apps/web-naive/src/views/system/operatelog/modules/detail.vue b/apps/web-naive/src/views/system/operatelog/modules/detail.vue
index daa439f00..94f1c1059 100644
--- a/apps/web-naive/src/views/system/operatelog/modules/detail.vue
+++ b/apps/web-naive/src/views/system/operatelog/modules/detail.vue
@@ -12,11 +12,7 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemOperateLogApi.OperateLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    contentClass: 'mx-4',
-  },
+  column: 1,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/system/sms/log/data.ts b/apps/web-naive/src/views/system/sms/log/data.ts
index a18d2e6dc..6fea4bb36 100644
--- a/apps/web-naive/src/views/system/sms/log/data.ts
+++ b/apps/web-naive/src/views/system/sms/log/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemSmsLogApi } from '#/api/system/sms/log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -30,7 +29,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '短信渠道',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleSmsChannelList(),
+        api: getSimpleSmsChannelList,
         labelField: 'signature',
         valueField: 'id',
         clearable: true,
@@ -179,9 +178,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: SystemSmsLogApi.SmsLog) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'mobile',
@@ -198,10 +195,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'templateType',
       label: '模板类型',
-      content: (data: SystemSmsLogApi.SmsLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE,
-          value: data?.templateType,
+          value: val,
         });
       },
     },
@@ -212,19 +209,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'sendStatus',
       label: '发送状态',
-      content: (data: SystemSmsLogApi.SmsLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SMS_SEND_STATUS,
-          value: data?.sendStatus,
+          value: val,
         });
       },
     },
     {
       field: 'sendTime',
       label: '发送时间',
-      content: (data: SystemSmsLogApi.SmsLog) => {
-        return formatDateTime(data?.sendTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'apiSendCode',
@@ -237,19 +232,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'receiveStatus',
       label: '接收状态',
-      content: (data: SystemSmsLogApi.SmsLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS,
-          value: data?.receiveStatus,
+          value: val,
         });
       },
     },
     {
       field: 'receiveTime',
       label: '接收时间',
-      content: (data: SystemSmsLogApi.SmsLog) => {
-        return formatDateTime(data?.receiveTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'apiReceiveCode',
diff --git a/apps/web-naive/src/views/system/sms/log/modules/detail.vue b/apps/web-naive/src/views/system/sms/log/modules/detail.vue
index fcc8bfc94..79c4ddcb7 100644
--- a/apps/web-naive/src/views/system/sms/log/modules/detail.vue
+++ b/apps/web-naive/src/views/system/sms/log/modules/detail.vue
@@ -12,11 +12,7 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemSmsLogApi.SmsLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 2,
-    contentClass: 'mx-4',
-  },
+  column: 2,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/system/sms/template/data.ts b/apps/web-naive/src/views/system/sms/template/data.ts
index 268c67ac6..d8b381040 100644
--- a/apps/web-naive/src/views/system/sms/template/data.ts
+++ b/apps/web-naive/src/views/system/sms/template/data.ts
@@ -52,7 +52,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '短信渠道',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleSmsChannelList(),
+        api: getSimpleSmsChannelList,
         labelField: 'signature',
         valueField: 'id',
         placeholder: '请选择短信渠道',
@@ -146,7 +146,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '短信渠道',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleSmsChannelList(),
+        api: getSimpleSmsChannelList,
         labelField: 'signature',
         valueField: 'id',
         clearable: true,
diff --git a/apps/web-naive/src/views/system/social/user/data.ts b/apps/web-naive/src/views/system/social/user/data.ts
index da5cba3d7..a8fdc904a 100644
--- a/apps/web-naive/src/views/system/social/user/data.ts
+++ b/apps/web-naive/src/views/system/social/user/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemSocialUserApi } from '#/api/system/social/user';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -8,6 +7,8 @@ import { h } from 'vue';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
+import { NImage } from 'naive-ui';
+
 import { DictTag } from '#/components/dict-tag';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -111,10 +112,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'type',
       label: '社交平台',
-      content: (data: SystemSocialUserApi.SocialUser) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SOCIAL_TYPE,
-          value: data?.type,
+          value: val,
         });
       },
     },
@@ -125,16 +126,11 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'avatar',
       label: '用户头像',
-      // TODO @芋艿：使用 antd 的 Image 组件
-      content: (data: SystemSocialUserApi.SocialUser) => {
-        if (data?.avatar) {
-          return h('img', {
-            src: data.avatar,
+      render: (val) => {
+        if (val) {
+          return h(NImage, {
+            src: val,
             style: 'width: 30px; height: 30px; cursor: pointer;',
-            onClick: () => {
-              // 可以添加图片预览功能
-              window.open(data.avatar, '_blank');
-            },
           });
         }
         return '无';
diff --git a/apps/web-naive/src/views/system/social/user/modules/detail.vue b/apps/web-naive/src/views/system/social/user/modules/detail.vue
index 6234ae279..8faeec7b3 100644
--- a/apps/web-naive/src/views/system/social/user/modules/detail.vue
+++ b/apps/web-naive/src/views/system/social/user/modules/detail.vue
@@ -14,13 +14,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemSocialUserApi.SocialUser>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    size: 'middle',
-    class: 'mx-4',
-    labelStyle: { width: '185px' },
-  },
+  column: 1,
+  size: 'medium',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/system/tenant/data.ts b/apps/web-naive/src/views/system/tenant/data.ts
index 4b583a978..cc8cdb22e 100644
--- a/apps/web-naive/src/views/system/tenant/data.ts
+++ b/apps/web-naive/src/views/system/tenant/data.ts
@@ -39,7 +39,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '租户套餐',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getTenantPackageList(),
+        api: getTenantPackageList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择租户套餐',
diff --git a/apps/web-naive/src/views/system/user/data.ts b/apps/web-naive/src/views/system/user/data.ts
index a6b896579..cf093063f 100644
--- a/apps/web-naive/src/views/system/user/data.ts
+++ b/apps/web-naive/src/views/system/user/data.ts
@@ -70,7 +70,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '岗位',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimplePostList(),
+        api: getSimplePostList,
         labelField: 'name',
         valueField: 'id',
         tag: true,
@@ -216,7 +216,7 @@ export function useAssignRoleFormSchema(): VbenFormSchema[] {
       label: '角色',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleRoleList(),
+        api: getSimpleRoleList,
         labelField: 'name',
         valueField: 'id',
         tag: true,
diff --git a/packages/@core/base/shared/src/utils/util.ts b/packages/@core/base/shared/src/utils/util.ts
index fd202ed50..1bb980ef0 100644
--- a/packages/@core/base/shared/src/utils/util.ts
+++ b/packages/@core/base/shared/src/utils/util.ts
@@ -48,22 +48,22 @@ export function getNestedValue<T>(obj: T, path: string): any {
  * @param key 参数键名
  * @param urlStr 链接地址，默认为当前浏览器的地址
  */
-export const getUrlNumberValue = (
+export function getUrlNumberValue(
   key: string,
   urlStr: string = location.href,
-): number => {
+): number {
   return Number(getUrlValue(key, urlStr));
-};
+}
 
 /**
  * 获取链接的参数值
  * @param key 参数键名
  * @param urlStr 链接地址，默认为当前浏览器的地址
  */
-export const getUrlValue = (
+export function getUrlValue(
   key: string,
   urlStr: string = location.href,
-): string => {
+): string {
   if (!urlStr || !key) return '';
   const url = new URL(decodeURIComponent(urlStr));
   return url.searchParams.get(key) ?? '';
@@ -74,7 +74,7 @@ export const getUrlValue = (
  * @param target 目标对象
  * @param source 源对象
  */
-export const copyValueToTarget = (target: any, source: any) => {
+export function copyValueToTarget(target: any, source: any) {
   const newObj = Object.assign({}, target, source);
   // 删除多余属性
   Object.keys(newObj).forEach((key) => {
@@ -86,4 +86,4 @@ export const copyValueToTarget = (target: any, source: any) => {
   });
   // 更新目标对象值
   Object.assign(target, newObj);
-};
+}
diff --git a/packages/constants/src/dict-enum.ts b/packages/constants/src/dict-enum.ts
index 06c4182dd..7ced37eb7 100644
--- a/packages/constants/src/dict-enum.ts
+++ b/packages/constants/src/dict-enum.ts
@@ -59,6 +59,7 @@ const PAY_DICT = {
   PAY_NOTIFY_STATUS: 'pay_notify_status', // 商户支付回调状态
   PAY_NOTIFY_TYPE: 'pay_notify_type', // 商户支付回调状态
   PAY_TRANSFER_STATUS: 'pay_transfer_status', // 转账订单状态
+  PAY_TRANSFER_TYPE: 'pay_transfer_type', // 转账类型
 } as const;
 
 /** ========== MP - 公众号模块 ========== */