diff --git a/.image/wx-xingyu.png b/.image/wx-xingyu.png
index 5e4b6017..da2e45a3 100644
Binary files a/.image/wx-xingyu.png and b/.image/wx-xingyu.png differ
diff --git a/apps/web-antd/src/api/crm/contract/index.ts b/apps/web-antd/src/api/crm/contract/index.ts
index a4f2a2c7..53abb523 100644
--- a/apps/web-antd/src/api/crm/contract/index.ts
+++ b/apps/web-antd/src/api/crm/contract/index.ts
@@ -50,6 +50,7 @@ export namespace CrmContractApi {
     creatorName: string;
     updateTime?: Date;
     products?: ContractProduct[];
+    contactName?: string;
   }
 }
 
diff --git a/apps/web-antd/src/api/crm/customer/index.ts b/apps/web-antd/src/api/crm/customer/index.ts
index 5faf62df..e8983894 100644
--- a/apps/web-antd/src/api/crm/customer/index.ts
+++ b/apps/web-antd/src/api/crm/customer/index.ts
@@ -16,6 +16,7 @@ export namespace CrmCustomerApi {
     ownerUserId: number; // 负责人的用户编号
     ownerUserName?: string; // 负责人的用户名称
     ownerUserDept?: string; // 负责人的部门名称
+    ownerUserDeptName?: string; // 负责人的部门名称
     lockStatus?: boolean;
     dealStatus?: boolean;
     mobile: string; // 手机号
@@ -34,7 +35,9 @@ export namespace CrmCustomerApi {
     creatorName?: string; // 创建人名称
     createTime: Date; // 创建时间
     updateTime: Date; // 更新时间
+    poolDay?: number; // 距离进入公海天数
   }
+
   export interface CustomerImport {
     ownerUserId: number;
     file: File;
diff --git a/apps/web-antd/src/api/crm/receivable/plan/index.ts b/apps/web-antd/src/api/crm/receivable/plan/index.ts
index 63e00f27..46397cc7 100644
--- a/apps/web-antd/src/api/crm/receivable/plan/index.ts
+++ b/apps/web-antd/src/api/crm/receivable/plan/index.ts
@@ -98,7 +98,7 @@ export function deleteReceivablePlan(id: number) {
 }
 
 /** 导出回款计划 Excel */
-export function exportReceivablePlan(params: PageParam) {
+export function exportReceivablePlan(params: any) {
   return requestClient.download('/crm/receivable-plan/export-excel', {
     params,
   });
diff --git a/apps/web-antd/src/api/infra/codegen/index.ts b/apps/web-antd/src/api/infra/codegen/index.ts
index 759c8ee2..992d41d2 100644
--- a/apps/web-antd/src/api/infra/codegen/index.ts
+++ b/apps/web-antd/src/api/infra/codegen/index.ts
@@ -65,7 +65,7 @@ export namespace InfraCodegenApi {
   }
 
   /** 更新代码生成请求 */
-  export interface CodegenUpdateReq {
+  export interface CodegenUpdateReqVO {
     table: any | CodegenTable;
     columns: CodegenColumn[];
   }
@@ -106,25 +106,36 @@ export function getCodegenTable(tableId: number) {
 }
 
 /** 修改代码生成表定义 */
-export function updateCodegenTable(data: InfraCodegenApi.CodegenUpdateReq) {
+export function updateCodegenTable(data: InfraCodegenApi.CodegenUpdateReqVO) {
   return requestClient.put('/infra/codegen/update', data);
 }
 
 /** 基于数据库的表结构，同步数据库的表和字段定义 */
 export function syncCodegenFromDB(tableId: number) {
-  return requestClient.put(`/infra/codegen/sync-from-db?tableId=${tableId}`);
+  return requestClient.put(
+    '/infra/codegen/sync-from-db',
+    {},
+    {
+      params: { tableId },
+    },
+  );
 }
 
 /** 预览生成代码 */
 export function previewCodegen(tableId: number) {
   return requestClient.get<InfraCodegenApi.CodegenPreview[]>(
-    `/infra/codegen/preview?tableId=${tableId}`,
+    '/infra/codegen/preview',
+    {
+      params: { tableId },
+    },
   );
 }
 
 /** 下载生成代码 */
 export function downloadCodegen(tableId: number) {
-  return requestClient.download(`/infra/codegen/download?tableId=${tableId}`);
+  return requestClient.download('/infra/codegen/download', {
+    params: { tableId },
+  });
 }
 
 /** 获得表定义 */
diff --git a/apps/web-antd/src/api/infra/data-source-config/index.ts b/apps/web-antd/src/api/infra/data-source-config/index.ts
index 88641f65..81a3b0e3 100644
--- a/apps/web-antd/src/api/infra/data-source-config/index.ts
+++ b/apps/web-antd/src/api/infra/data-source-config/index.ts
@@ -44,3 +44,10 @@ export function updateDataSourceConfig(
 export function deleteDataSourceConfig(id: number) {
   return requestClient.delete(`/infra/data-source-config/delete?id=${id}`);
 }
+
+/** 批量删除数据源配置 */
+export function deleteDataSourceConfigList(ids: number[]) {
+  return requestClient.delete(
+    `/infra/data-source-config/delete-list?ids=${ids.join(',')}`,
+  );
+}
diff --git a/apps/web-antd/src/api/infra/file/index.ts b/apps/web-antd/src/api/infra/file/index.ts
index e7dc7891..edf06933 100644
--- a/apps/web-antd/src/api/infra/file/index.ts
+++ b/apps/web-antd/src/api/infra/file/index.ts
@@ -19,7 +19,7 @@ export namespace InfraFileApi {
   }
 
   /** 文件预签名地址 */
-  export interface FilePresignedUrlResp {
+  export interface FilePresignedUrlRespVO {
     configId: number; // 文件配置编号
     uploadUrl: string; // 文件上传 URL
     url: string; // 文件 URL
@@ -27,7 +27,7 @@ export namespace InfraFileApi {
   }
 
   /** 上传文件 */
-  export interface FileUploadReq {
+  export interface FileUploadReqVO {
     file: globalThis.File;
     directory?: string;
   }
@@ -52,7 +52,7 @@ export function deleteFileList(ids: number[]) {
 
 /** 获取文件预签名地址 */
 export function getFilePresignedUrl(name: string, directory?: string) {
-  return requestClient.get<InfraFileApi.FilePresignedUrlResp>(
+  return requestClient.get<InfraFileApi.FilePresignedUrlRespVO>(
     '/infra/file/presigned-url',
     {
       params: { name, directory },
@@ -67,7 +67,7 @@ export function createFile(data: InfraFileApi.File) {
 
 /** 上传文件 */
 export function uploadFile(
-  data: InfraFileApi.FileUploadReq,
+  data: InfraFileApi.FileUploadReqVO,
   onUploadProgress?: AxiosProgressEvent,
 ) {
   // 特殊：由于 upload 内部封装，即使 directory 为 undefined，也会传递给后端
diff --git a/apps/web-antd/src/api/infra/job/index.ts b/apps/web-antd/src/api/infra/job/index.ts
index 05f6a727..04848dd8 100644
--- a/apps/web-antd/src/api/infra/job/index.ts
+++ b/apps/web-antd/src/api/infra/job/index.ts
@@ -58,11 +58,12 @@ export function exportJob(params: any) {
 
 /** 任务状态修改 */
 export function updateJobStatus(id: number, status: number) {
-  const params = {
-    id,
-    status,
-  };
-  return requestClient.put('/infra/job/update-status', {}, { params });
+  return requestClient.put('/infra/job/update-status', undefined, {
+    params: {
+      id,
+      status,
+    },
+  });
 }
 
 /** 定时任务立即执行一次 */
diff --git a/apps/web-antd/src/api/mp/account/index.ts b/apps/web-antd/src/api/mp/account/index.ts
index 60833058..c5ee331b 100644
--- a/apps/web-antd/src/api/mp/account/index.ts
+++ b/apps/web-antd/src/api/mp/account/index.ts
@@ -62,7 +62,7 @@ export function deleteAccount(id: number) {
 
 /** 生成公众号账号二维码 */
 export function generateAccountQrCode(id: number) {
-  return requestClient.post(`/mp/account/generate-qr-code?id=${id}`);
+  return requestClient.put(`/mp/account/generate-qr-code?id=${id}`);
 }
 
 /** 清空公众号账号 API 配额 */
diff --git a/apps/web-antd/src/api/system/mail/template/index.ts b/apps/web-antd/src/api/system/mail/template/index.ts
index ef08e248..9e2a5a78 100644
--- a/apps/web-antd/src/api/system/mail/template/index.ts
+++ b/apps/web-antd/src/api/system/mail/template/index.ts
@@ -58,7 +58,7 @@ export function deleteMailTemplate(id: number) {
   return requestClient.delete(`/system/mail-template/delete?id=${id}`);
 }
 
-/** 批量删除邮件模板 */
+/** 批量删除邮件模版 */
 export function deleteMailTemplateList(ids: number[]) {
   return requestClient.delete(
     `/system/mail-template/delete-list?ids=${ids.join(',')}`,
diff --git a/apps/web-antd/src/api/system/oauth2/open/index.ts b/apps/web-antd/src/api/system/oauth2/open/index.ts
index 591eaa75..16d9c7e6 100644
--- a/apps/web-antd/src/api/system/oauth2/open/index.ts
+++ b/apps/web-antd/src/api/system/oauth2/open/index.ts
@@ -3,7 +3,7 @@ import { requestClient } from '#/api/request';
 /** OAuth2.0 授权信息响应 */
 export namespace SystemOAuth2ClientApi {
   /** 授权信息 */
-  export interface AuthorizeInfoResp {
+  export interface AuthorizeInfoRespVO {
     client: {
       logo: string;
       name: string;
@@ -17,7 +17,7 @@ export namespace SystemOAuth2ClientApi {
 
 /** 获得授权信息 */
 export function getAuthorize(clientId: string) {
-  return requestClient.get<SystemOAuth2ClientApi.AuthorizeInfoResp>(
+  return requestClient.get<SystemOAuth2ClientApi.AuthorizeInfoRespVO>(
     `/system/oauth2/authorize?clientId=${clientId}`,
   );
 }
diff --git a/apps/web-antd/src/api/system/oauth2/token/index.ts b/apps/web-antd/src/api/system/oauth2/token/index.ts
index 9209fd71..bd369791 100644
--- a/apps/web-antd/src/api/system/oauth2/token/index.ts
+++ b/apps/web-antd/src/api/system/oauth2/token/index.ts
@@ -32,10 +32,3 @@ export function deleteOAuth2Token(accessToken: string) {
     `/system/oauth2-token/delete?accessToken=${accessToken}`,
   );
 }
-
-/** 批量删除 OAuth2.0 令牌 */
-export function deleteOAuth2TokenList(accessTokens: string[]) {
-  return requestClient.delete(
-    `/system/oauth2-token/delete-list?accessTokens=${accessTokens.join(',')}`,
-  );
-}
diff --git a/apps/web-antd/src/api/system/permission/index.ts b/apps/web-antd/src/api/system/permission/index.ts
index 076dffc4..9039d9a0 100644
--- a/apps/web-antd/src/api/system/permission/index.ts
+++ b/apps/web-antd/src/api/system/permission/index.ts
@@ -2,19 +2,19 @@ import { requestClient } from '#/api/request';
 
 export namespace SystemPermissionApi {
   /** 分配用户角色请求 */
-  export interface AssignUserRoleReq {
+  export interface AssignUserRoleReqVO {
     userId: number;
     roleIds: number[];
   }
 
   /** 分配角色菜单请求 */
-  export interface AssignRoleMenuReq {
+  export interface AssignRoleMenuReqVO {
     roleId: number;
     menuIds: number[];
   }
 
   /** 分配角色数据权限请求 */
-  export interface AssignRoleDataScopeReq {
+  export interface AssignRoleDataScopeReqVO {
     roleId: number;
     dataScope: number;
     dataScopeDeptIds: number[];
@@ -30,14 +30,14 @@ export async function getRoleMenuList(roleId: number) {
 
 /** 赋予角色菜单权限 */
 export async function assignRoleMenu(
-  data: SystemPermissionApi.AssignRoleMenuReq,
+  data: SystemPermissionApi.AssignRoleMenuReqVO,
 ) {
   return requestClient.post('/system/permission/assign-role-menu', data);
 }
 
 /** 赋予角色数据权限 */
 export async function assignRoleDataScope(
-  data: SystemPermissionApi.AssignRoleDataScopeReq,
+  data: SystemPermissionApi.AssignRoleDataScopeReqVO,
 ) {
   return requestClient.post('/system/permission/assign-role-data-scope', data);
 }
@@ -51,7 +51,7 @@ export async function getUserRoleList(userId: number) {
 
 /** 赋予用户角色 */
 export async function assignUserRole(
-  data: SystemPermissionApi.AssignUserRoleReq,
+  data: SystemPermissionApi.AssignUserRoleReqVO,
 ) {
   return requestClient.post('/system/permission/assign-user-role', data);
 }
diff --git a/apps/web-antd/src/api/system/social/user/index.ts b/apps/web-antd/src/api/system/social/user/index.ts
index fd0316e8..b91f1506 100644
--- a/apps/web-antd/src/api/system/social/user/index.ts
+++ b/apps/web-antd/src/api/system/social/user/index.ts
@@ -20,14 +20,14 @@ export namespace SystemSocialUserApi {
   }
 
   /** 社交绑定请求 */
-  export interface SocialUserBindReq {
+  export interface SocialUserBindReqVO {
     type: number;
     code: string;
     state: string;
   }
 
   /** 取消社交绑定请求 */
-  export interface SocialUserUnbindReq {
+  export interface SocialUserUnbindReqVO {
     type: number;
     openid: string;
   }
@@ -49,12 +49,12 @@ export function getSocialUser(id: number) {
 }
 
 /** 社交绑定，使用 code 授权码 */
-export function socialBind(data: SystemSocialUserApi.SocialUserBindReq) {
+export function socialBind(data: SystemSocialUserApi.SocialUserBindReqVO) {
   return requestClient.post<boolean>('/system/social-user/bind', data);
 }
 
 /** 取消社交绑定 */
-export function socialUnbind(data: SystemSocialUserApi.SocialUserUnbindReq) {
+export function socialUnbind(data: SystemSocialUserApi.SocialUserUnbindReqVO) {
   return requestClient.delete<boolean>('/system/social-user/unbind', { data });
 }
 
diff --git a/apps/web-antd/src/api/system/user/profile/index.ts b/apps/web-antd/src/api/system/user/profile/index.ts
index b2c42bcc..97898e71 100644
--- a/apps/web-antd/src/api/system/user/profile/index.ts
+++ b/apps/web-antd/src/api/system/user/profile/index.ts
@@ -2,7 +2,7 @@ import { requestClient } from '#/api/request';
 
 export namespace SystemUserProfileApi {
   /** 用户个人中心信息 */
-  export interface UserProfileResp {
+  export interface UserProfileRespVO {
     id: number;
     username: string;
     nickname: string;
@@ -19,13 +19,13 @@ export namespace SystemUserProfileApi {
   }
 
   /** 更新密码请求 */
-  export interface UpdatePasswordReq {
+  export interface UpdatePasswordReqVO {
     oldPassword: string;
     newPassword: string;
   }
 
   /** 更新个人信息请求 */
-  export interface UpdateProfileReq {
+  export interface UpdateProfileReqVO {
     nickname?: string;
     email?: string;
     mobile?: string;
@@ -36,19 +36,21 @@ export namespace SystemUserProfileApi {
 
 /** 获取登录用户信息 */
 export function getUserProfile() {
-  return requestClient.get<SystemUserProfileApi.UserProfileResp>(
+  return requestClient.get<SystemUserProfileApi.UserProfileRespVO>(
     '/system/user/profile/get',
   );
 }
 
 /** 修改用户个人信息 */
-export function updateUserProfile(data: SystemUserProfileApi.UpdateProfileReq) {
+export function updateUserProfile(
+  data: SystemUserProfileApi.UpdateProfileReqVO,
+) {
   return requestClient.put('/system/user/profile/update', data);
 }
 
 /** 修改用户个人密码 */
 export function updateUserPassword(
-  data: SystemUserProfileApi.UpdatePasswordReq,
+  data: SystemUserProfileApi.UpdatePasswordReqVO,
 ) {
   return requestClient.put('/system/user/profile/update-password', data);
 }
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/ProcessDesigner.vue b/apps/web-antd/src/components/bpmn-process-designer/package/designer/ProcessDesigner.vue
index fba2a575..4fce9dac 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/designer/ProcessDesigner.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/designer/ProcessDesigner.vue
@@ -4,17 +4,7 @@
 // import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
 // import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
 // import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右侧框样式
-import {
-  computed,
-  defineEmits,
-  defineOptions,
-  defineProps,
-  h,
-  onBeforeUnmount,
-  onMounted,
-  provide,
-  ref,
-} from 'vue';
+import { computed, h, onBeforeUnmount, onMounted, provide, ref } from 'vue';
 
 import {
   AlignLeftOutlined,
@@ -655,7 +645,7 @@ onBeforeUnmount(() => {
         type="file"
         id="files"
         ref="refFile"
-        style="display: none"
+        class="hidden"
         accept=".xml, .bpmn"
         @change="importLocalFile"
       />
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/ProcessViewer.vue b/apps/web-antd/src/components/bpmn-process-designer/package/designer/ProcessViewer.vue
index 4fe85408..4fdca3d8 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/designer/ProcessViewer.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/designer/ProcessViewer.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { defineProps, h, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { h, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import { BpmProcessInstanceStatus, DICT_TYPE } from '@vben/constants';
 import { UndoOutlined, ZoomInOutlined, ZoomOutOutlined } from '@vben/icons';
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/index.ts b/apps/web-antd/src/components/bpmn-process-designer/package/index.ts
index f27319ab..f5e6b117 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/index.ts
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/index.ts
@@ -3,7 +3,11 @@ import 'bpmn-js/dist/assets/diagram-js.css';
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
+// TODO @puhui999：样式问题：设计器那，位置不太对；
 
 export { default as MyProcessDesigner } from './designer';
+// TODO @puhui999：流程发起时，预览相关的，需要使用；
 export { default as MyProcessViewer } from './designer/index2';
 export { default as MyProcessPenal } from './penal';
+
+// TODO @puhui999：【有个迁移的打印】【新增】流程打印，由 [@Lesan](https://gitee.com/LesanOuO) 贡献 [#816](https://gitee.com/yudaocode/yudao-ui-admin-vue3/pulls/816/)、[#1418](https://gitee.com/zhijiantianya/ruoyi-vue-pro/pulls/1418/)、[#817](https://gitee.com/yudaocode/yudao-ui-admin-vue3/pulls/817/)、[#1419](https://gitee.com/zhijiantianya/ruoyi-vue-pro/pulls/1419/)、[#1424](https://gitee.com/zhijiantianya/ruoyi-vue-pro/pulls/1424)、[#819](https://gitee.com/yudaocode/yudao-ui-admin-vue3/pulls/819)、[#821](https://gitee.com/yudaocode/yudao-ui-admin-vue3/pulls/821/)
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/custom-config/ElementCustomConfig.vue b/apps/web-antd/src/components/bpmn-process-designer/package/penal/custom-config/ElementCustomConfig.vue
index e8b307ce..8c8cc6f1 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/custom-config/ElementCustomConfig.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/penal/custom-config/ElementCustomConfig.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Component } from 'vue';
 
-import { defineOptions, defineProps, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 
 import { CustomConfigMap } from './data';
 
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue b/apps/web-antd/src/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue
index e75ebdd3..49e79cd2 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue
@@ -1,13 +1,5 @@
 <script lang="ts" setup>
-import {
-  defineOptions,
-  defineProps,
-  inject,
-  nextTick,
-  ref,
-  toRaw,
-  watch,
-} from 'vue';
+import { inject, nextTick, ref, toRaw, watch } from 'vue';
 
 import {
   Divider,
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue b/apps/web-antd/src/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue
index bd1ef7aa..3fb375b0 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue
@@ -153,11 +153,7 @@ watch(
 
 <template>
   <div class="panel-tab__content">
-    <Form
-      :model="flowConditionForm"
-      :label-col="{ span: 6 }"
-      :wrapper-col="{ span: 18 }"
-    >
+    <Form :model="flowConditionForm">
       <Form.Item label="流转类型">
         <Select v-model:value="flowConditionForm.type" @change="updateFlowType">
           <Select.Option value="normal">普通流转路径</Select.Option>
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/form/ElementForm.vue b/apps/web-antd/src/components/bpmn-process-designer/package/penal/form/ElementForm.vue
index 5b907314..2041beaa 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/form/ElementForm.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/penal/form/ElementForm.vue
@@ -305,7 +305,7 @@ watch(
 
 <template>
   <div class="panel-tab__content">
-    <Form :label-col="{ style: { width: '80px' } }">
+    <Form>
       <FormItem label="流程表单">
         <!--        <Input v-model:value="formKey" @change="updateElementFormKey" />-->
         <Select
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue b/apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
index 859642da..55d3f545 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { inject, nextTick, ref, watch } from 'vue';
 
-import { IconifyIcon, PlusOutlined } from '@vben/icons';
+import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
 import {
@@ -290,7 +290,7 @@ watch(
     <div class="element-drawer__button">
       <Button type="primary" size="small" @click="openListenerForm(null, -1)">
         <template #icon>
-          <PlusOutlined />
+          <IconifyIcon icon="ep:plus" />
         </template>
         添加监听器
       </Button>
@@ -309,12 +309,7 @@ watch(
       :width="width as any"
       :destroy-on-close="true"
     >
-      <Form
-        :model="listenerForm"
-        ref="listenerFormRef"
-        :label-col="{ span: 6 }"
-        :wrapper-col="{ span: 18 }"
-      >
+      <Form :model="listenerForm" ref="listenerFormRef">
         <FormItem
           label="事件类型"
           name="event"
@@ -462,20 +457,23 @@ watch(
         </template>
       </Form>
       <Divider />
-      <p class="listener-filed__title">
-        <span><IconifyIcon icon="ep:menu" />注入字段：</span>
-        <Button type="primary" @click="openListenerFieldForm(null, -1)">
+      <div class="mb-2 flex justify-between">
+        <span class="flex items-center">
+          <IconifyIcon icon="ep:menu" class="mr-2 text-gray-600" />
+          注入字段
+        </span>
+        <Button
+          type="primary"
+          title="添加字段"
+          @click="openListenerFieldForm(null, -1)"
+        >
+          <template #icon>
+            <IconifyIcon icon="ep:plus" />
+          </template>
           添加字段
         </Button>
-      </p>
-      <Table
-        :data-source="fieldsListOfListener"
-        size="small"
-        :scroll="{ y: 240 }"
-        :pagination="false"
-        bordered
-        style="flex: none"
-      >
+      </div>
+      <Table :data-source="fieldsListOfListener" size="small" bordered>
         <TableColumn title="序号" width="50px">
           <template #default="{ index }">
             {{ index + 1 }}
@@ -492,12 +490,12 @@ watch(
         />
         <TableColumn
           title="字段值/表达式"
-          width="100px"
+          width="120px"
           :custom-render="
             ({ record }: any) => record.string || record.expression
           "
         />
-        <TableColumn title="操作" width="130px">
+        <TableColumn title="操作" width="80px" fixed="right">
           <template #default="{ record, index }">
             <Button
               size="small"
@@ -532,13 +530,7 @@ watch(
       width="600px"
       :destroy-on-close="true"
     >
-      <Form
-        :model="listenerFieldForm"
-        ref="listenerFieldFormRef"
-        :label-col="{ span: 6 }"
-        :wrapper-col="{ span: 18 }"
-        style="height: 136px"
-      >
+      <Form :model="listenerFieldForm" ref="listenerFieldFormRef">
         <FormItem
           label="字段名称："
           name="name"
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/ProcessListenerDialog.vue b/apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/ProcessListenerDialog.vue
index 5bdb51c9..1798f67f 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/ProcessListenerDialog.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/ProcessListenerDialog.vue
@@ -4,12 +4,12 @@ import type { BpmProcessListenerApi } from '#/api/bpm/processListener';
 
 import { reactive, ref } from 'vue';
 
+import { ContentWrap } from '@vben/common-ui';
 import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 
 import { Button, Modal, Pagination, Table } from 'ant-design-vue';
 
 import { getProcessListenerPage } from '#/api/bpm/processListener';
-import { ContentWrap } from '#/components/content-wrap';
 import { DictTag } from '#/components/dict-tag';
 
 /** BPM 流程 表单 */
@@ -89,7 +89,7 @@ const select = async (row: BpmProcessListenerApi.ProcessListener) => {
           </template>
         </Table.Column>
         <Table.Column title="值" align="center" data-index="value" />
-        <Table.Column title="操作" align="center">
+        <Table.Column title="操作" align="center" fixed="right">
           <template #default="{ record }">
             <Button type="primary" @click="select(record)"> 选择 </Button>
           </template>
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue b/apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
index 77e80912..460f72a8 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { inject, nextTick, ref, watch } from 'vue';
 
-import { MenuOutlined, PlusOutlined, SelectOutlined } from '@vben/icons';
+import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
 import {
@@ -300,11 +300,11 @@ watch(
     </Table>
     <div class="element-drawer__button">
       <Button size="small" type="primary" @click="openListenerForm(null)">
-        <template #icon><PlusOutlined /></template>
+        <template #icon> <IconifyIcon icon="ep:plus" /></template>
         添加监听器
       </Button>
       <Button size="small" @click="openProcessListenerDialog">
-        <template #icon><SelectOutlined /></template>
+        <template #icon> <IconifyIcon icon="ep:select" /></template>
         选择监听器
       </Button>
     </div>
@@ -316,12 +316,7 @@ watch(
       :width="width"
       :destroy-on-close="true"
     >
-      <Form
-        :model="listenerForm"
-        :label-col="{ span: 8 }"
-        :wrapper-col="{ span: 16 }"
-        ref="listenerFormRef"
-      >
+      <Form :model="listenerForm" ref="listenerFormRef">
         <FormItem
           label="事件类型"
           name="event"
@@ -458,16 +453,22 @@ watch(
       </Form>
 
       <Divider />
-      <p class="listener-filed__title">
-        <span><MenuOutlined />注入字段：</span>
+      <div class="mb-2 flex justify-between">
+        <span class="flex items-center">
+          <IconifyIcon icon="ep:menu" class="mr-2 text-gray-600" />
+          注入字段
+        </span>
         <Button
-          size="small"
           type="primary"
+          title="添加字段"
           @click="openListenerFieldForm(null)"
         >
+          <template #icon>
+            <IconifyIcon icon="ep:plus" />
+          </template>
           添加字段
         </Button>
-      </p>
+      </div>
       <Table
         :data="fieldsListOfListener"
         size="small"
@@ -533,13 +534,7 @@ watch(
       :width="600"
       :destroy-on-close="true"
     >
-      <Form
-        :model="listenerFieldForm"
-        :label-col="{ span: 8 }"
-        :wrapper-col="{ span: 16 }"
-        ref="listenerFieldFormRef"
-        style="height: 136px"
-      >
+      <Form :model="listenerFieldForm" ref="listenerFieldFormRef">
         <FormItem
           label="字段名称："
           name="name"
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue b/apps/web-antd/src/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
index e33d1086..a41bf337 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
@@ -421,7 +421,7 @@ watch(
     </RadioGroup>
     <div v-else>除了UserTask以外节点的多实例待实现</div>
     <!-- 与Simple设计器配置合并，保留以前的代码 -->
-    <Form :label-col="{ span: 6 }" style="display: none">
+    <Form class="hidden">
       <FormItem label="快捷配置">
         <Button size="small" @click="() => changeConfig('依次审批')">
           依次审批
@@ -467,7 +467,7 @@ watch(
           />
         </FormItem>
         <!-- add by 芋艿：由于「元素变量」暂时用不到，所以这里 display 为 none -->
-        <FormItem label="元素变量" key="elementVariable" style="display: none">
+        <FormItem label="元素变量" key="elementVariable" class="hidden">
           <Input
             v-model:value="loopInstanceForm.elementVariable"
             allow-clear
@@ -485,7 +485,7 @@ watch(
           />
         </FormItem>
         <!-- add by 芋艿：由于「异步状态」暂时用不到，所以这里 display 为 none -->
-        <FormItem label="异步状态" key="async" style="display: none">
+        <FormItem label="异步状态" key="async" class="hidden">
           <Checkbox
             v-model:checked="loopInstanceForm.asyncBefore"
             @change="() => updateLoopAsync('asyncBefore')"
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue b/apps/web-antd/src/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue
index 11dde6a4..26a4267f 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue
@@ -161,25 +161,15 @@ watch(
 
 <template>
   <div class="panel-tab__content">
-    <Table :data="elementPropertyList" :scroll="{ y: 240 }" bordered>
+    <Table :data="elementPropertyList" size="small" bordered>
       <TableColumn title="序号" width="50">
         <template #default="{ index }">
           {{ index + 1 }}
         </template>
       </TableColumn>
-      <TableColumn
-        title="属性名"
-        data-index="name"
-        :min-width="100"
-        :ellipsis="{ showTitle: true }"
-      />
-      <TableColumn
-        title="属性值"
-        data-index="value"
-        :min-width="100"
-        :ellipsis="{ showTitle: true }"
-      />
-      <TableColumn title="操作" width="110">
+      <TableColumn title="属性名" data-index="name" />
+      <TableColumn title="属性值" data-index="value" />
+      <TableColumn title="操作">
         <template #default="{ record, index }">
           <Button
             type="link"
@@ -215,11 +205,7 @@ watch(
       :width="600"
       :destroy-on-close="true"
     >
-      <Form
-        :model="propertyForm"
-        ref="attributeFormRef"
-        :label-col="{ span: 6 }"
-      >
+      <Form :model="propertyForm" ref="attributeFormRef">
         <FormItem label="属性名：" name="name">
           <Input v-model:value="propertyForm.name" allow-clear />
         </FormItem>
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue b/apps/web-antd/src/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue
index df06d928..ad28bf71 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue
@@ -84,8 +84,8 @@ onMounted(() => {
 <template>
   <div class="panel-tab__content">
     <div class="panel-tab__content--title">
-      <span>
-        <IconifyIcon icon="ep:menu" style="margin-right: 8px; color: #555" />
+      <span class="flex items-center">
+        <IconifyIcon icon="ep:menu" class="mr-2 text-gray-600" />
         消息列表
       </span>
       <Button type="primary" title="创建新消息" @click="openModel('message')">
@@ -95,33 +95,19 @@ onMounted(() => {
         创建新消息
       </Button>
     </div>
-    <Table :data-source="messageList" :bordered="true" :pagination="false">
+    <Table :data-source="messageList" size="small" bordered>
       <TableColumn title="序号" width="60px">
         <template #default="{ index }">
           {{ index + 1 }}
         </template>
       </TableColumn>
-      <TableColumn
-        title="消息ID"
-        data-index="id"
-        :width="300"
-        :ellipsis="{ showTitle: true }"
-      />
-      <TableColumn
-        title="消息名称"
-        data-index="name"
-        :width="300"
-        :ellipsis="{ showTitle: true }"
-      />
+      <TableColumn title="消息ID" data-index="id" />
+      <TableColumn title="消息名称" data-index="name" />
     </Table>
-    <div
-      class="panel-tab__content--title"
-      style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eee"
-    >
-      <span>
-        <IconifyIcon icon="ep:menu" style="margin-right: 8px; color: #555">
-          信号列表
-        </IconifyIcon>
+    <div class="panel-tab__content--title mt-2 border-t border-gray-200 pt-2">
+      <span class="flex items-center">
+        <IconifyIcon icon="ep:menu" class="mr-2 text-gray-600" />
+        信号列表
       </span>
       <Button type="primary" title="创建新信号" @click="openModel('signal')">
         <template #icon>
@@ -130,24 +116,14 @@ onMounted(() => {
         创建新信号
       </Button>
     </div>
-    <Table :data-source="signalList" :bordered="true" :pagination="false">
+    <Table :data-source="signalList" size="small" bordered>
       <TableColumn title="序号" width="60px">
         <template #default="{ index }">
           {{ index + 1 }}
         </template>
       </TableColumn>
-      <TableColumn
-        title="信号ID"
-        data-index="id"
-        :width="300"
-        :ellipsis="{ showTitle: true }"
-      />
-      <TableColumn
-        title="信号名称"
-        data-index="name"
-        :width="300"
-        :ellipsis="{ showTitle: true }"
-      />
+      <TableColumn title="信号ID" data-index="id" />
+      <TableColumn title="信号名称" data-index="name" />
     </Table>
 
     <Modal
@@ -157,11 +133,7 @@ onMounted(() => {
       width="400px"
       :destroy-on-close="true"
     >
-      <Form
-        :model="modelObjectForm"
-        :label-col="{ span: 9 }"
-        :wrapper-col="{ span: 15 }"
-      >
+      <Form :model="modelObjectForm">
         <FormItem :label="modelConfig.idLabel">
           <Input v-model:value="modelObjectForm.id" allow-clear />
         </FormItem>
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/ElementTask.vue b/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/ElementTask.vue
index d3294b5a..a3b3cebc 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/ElementTask.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/ElementTask.vue
@@ -63,9 +63,9 @@ watch(
 
 <template>
   <div class="panel-tab__content">
-    <Form :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
+    <Form>
       <!-- add by 芋艿：由于「异步延续」暂时用不到，所以这里 display 为 none -->
-      <FormItem label="异步延续" style="display: none">
+      <FormItem label="异步延续" class="hidden">
         <Checkbox
           v-model:checked="taskConfigForm.asyncBefore"
           @change="changeTaskAsync"
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue b/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue
index b69680b1..528cd601 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue
@@ -180,7 +180,7 @@ watch(
 
 <template>
   <div>
-    <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+    <Form>
       <FormItem label="实例名称">
         <Input
           v-model:value="formData.processInstanceName"
@@ -341,12 +341,7 @@ watch(
       @ok="saveVariable"
       @cancel="variableDialogVisible = false"
     >
-      <Form
-        :model="varialbeFormData"
-        :label-col="{ span: 6 }"
-        :wrapper-col="{ span: 18 }"
-        ref="varialbeFormRef"
-      >
+      <Form :model="varialbeFormData" ref="varialbeFormRef">
         <FormItem label="源：" name="source">
           <Input v-model:value="varialbeFormData.source" allow-clear />
         </FormItem>
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ProcessExpressionDialog.vue b/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ProcessExpressionDialog.vue
index 3f33afaa..7ef79b1f 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ProcessExpressionDialog.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ProcessExpressionDialog.vue
@@ -4,12 +4,12 @@ import type { BpmProcessExpressionApi } from '#/api/bpm/processExpression';
 
 import { reactive, ref } from 'vue';
 
+import { ContentWrap } from '@vben/common-ui';
 import { CommonStatusEnum } from '@vben/constants';
 
 import { Button, Modal, Pagination, Table, TableColumn } from 'ant-design-vue';
 
 import { getProcessExpressionPage } from '#/api/bpm/processExpression';
-import { ContentWrap } from '#/components/content-wrap';
 
 /** BPM 流程 表单 */
 defineOptions({ name: 'ProcessExpressionDialog' });
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue b/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue
index aafeca53..12e2204c 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue
@@ -143,7 +143,7 @@ watch(
       width="400px"
       :destroy-on-close="true"
     >
-      <Form :model="newMessageForm" size="small" :label-col="{ span: 6 }">
+      <Form :model="newMessageForm" size="small">
         <Form.Item label="消息ID">
           <Input v-model:value="newMessageForm.id" allow-clear />
         </Form.Item>
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue b/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue
index 801c5e5e..0a4eda33 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue
@@ -1,13 +1,5 @@
 <script lang="ts" setup>
-import {
-  defineOptions,
-  defineProps,
-  nextTick,
-  onBeforeUnmount,
-  ref,
-  toRaw,
-  watch,
-} from 'vue';
+import { nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';
 
 import {
   FormItem,
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue b/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
index 81347a18..90d23db5 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
@@ -344,7 +344,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+  <Form>
     <FormItem label="规则类型" name="candidateStrategy">
       <Select
         v-model:value="userTaskForm.candidateStrategy"
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue b/apps/web-antd/src/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue
index 57c8eeb9..e72b08d6 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue
+++ b/apps/web-antd/src/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue
@@ -3,12 +3,7 @@ import type { Ref } from 'vue';
 
 import { computed, nextTick, onMounted, ref, toRaw, watch } from 'vue';
 
-import {
-  CheckCircleFilled,
-  ExclamationCircleFilled,
-  IconifyIcon,
-  QuestionCircleFilled,
-} from '@vben/icons';
+import { IconifyIcon } from '@vben/icons';
 
 import { Button, DatePicker, Input, Modal, Tooltip } from 'ant-design-vue';
 
@@ -240,7 +235,11 @@ watch(
           循环
         </Button>
       </Button.Group>
-      <CheckCircleFilled v-if="valid" style="color: green; margin-left: 8px" />
+      <IconifyIcon
+        icon="ant-design:check-circle-filled"
+        v-if="valid"
+        style="color: green; margin-left: 8px"
+      />
     </div>
     <div style="display: flex; align-items: center; margin-top: 10px">
       <span>条件：</span>
@@ -254,11 +253,15 @@ watch(
       >
         <template #suffix>
           <Tooltip v-if="!valid" title="格式错误" placement="top">
-            <ExclamationCircleFilled style="color: orange" />
+            <IconifyIcon
+              icon="ant-design:exclamation-circle-filled"
+              class="text-orange-400"
+            />
           </Tooltip>
           <Tooltip :title="helpText" placement="top">
-            <QuestionCircleFilled
-              style="color: #409eff; cursor: pointer"
+            <IconifyIcon
+              icon="ant-design:question-circle-filled"
+              class="cursor-pointer text-[#409eff]"
               @click="showHelp = true"
             />
           </Tooltip>
@@ -351,7 +354,3 @@ watch(
     </Modal>
   </div>
 </template>
-
-<style scoped>
-/* 相关样式 */
-</style>
diff --git a/apps/web-antd/src/components/content-wrap/content-wrap.vue b/apps/web-antd/src/components/content-wrap/content-wrap.vue
deleted file mode 100644
index 8acb2fbd..00000000
--- a/apps/web-antd/src/components/content-wrap/content-wrap.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<!--
-  参考自 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/components/ContentWrap/src/ContentWrap.vue
-  保证和 yudao-ui-admin-vue3 功能的一致性
--->
-<script lang="ts" setup>
-import type { CSSProperties } from 'vue';
-
-import { ShieldQuestion } from '@vben/icons';
-
-import { Card, Tooltip } from 'ant-design-vue';
-
-defineOptions({ name: 'ContentWrap' });
-
-withDefaults(
-  defineProps<{
-    bodyStyle?: CSSProperties;
-    message?: string;
-    title?: string;
-  }>(),
-  {
-    bodyStyle: () => ({ padding: '10px' }),
-    title: '',
-    message: '',
-  },
-);
-</script>
-
-<template>
-  <Card :body-style="bodyStyle" :title="title" class="mb-4">
-    <template v-if="title" #title>
-      <div class="flex items-center">
-        <span class="text-base font-bold">{{ title }}</span>
-        <Tooltip placement="right">
-          <template #title>
-            <div class="max-w-[200px]">{{ message }}</div>
-          </template>
-          <ShieldQuestion :size="14" class="ml-1" />
-        </Tooltip>
-        <div class="flex flex-grow pl-5">
-          <slot name="header"></slot>
-        </div>
-      </div>
-    </template>
-    <template #extra>
-      <slot name="extra"></slot>
-    </template>
-    <slot></slot>
-  </Card>
-</template>
diff --git a/apps/web-antd/src/components/content-wrap/index.ts b/apps/web-antd/src/components/content-wrap/index.ts
deleted file mode 100644
index d4f95fdd..00000000
--- a/apps/web-antd/src/components/content-wrap/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as ContentWrap } from './content-wrap.vue';
diff --git a/apps/web-antd/src/components/operate-log/index.ts b/apps/web-antd/src/components/operate-log/index.ts
index a134eaaa..cf38b5e7 100644
--- a/apps/web-antd/src/components/operate-log/index.ts
+++ b/apps/web-antd/src/components/operate-log/index.ts
@@ -1,9 +1,3 @@
-import { defineAsyncComponent } from 'vue';
-
-export const AsyncOperateLog = defineAsyncComponent(
-  () => import('./operate-log.vue'),
-);
-
 export { default as OperateLog } from './operate-log.vue';
 
 export type { OperateLogProps } from './typing';
diff --git a/apps/web-antd/src/components/operate-log/operate-log.vue b/apps/web-antd/src/components/operate-log/operate-log.vue
index b16052ab..0bde8640 100644
--- a/apps/web-antd/src/components/operate-log/operate-log.vue
+++ b/apps/web-antd/src/components/operate-log/operate-log.vue
@@ -34,6 +34,7 @@ function getUserTypeColor(userType: number) {
 </script>
 <template>
   <div>
+    <!-- TODO @xingyu：有没可能美化下？ -->
     <Timeline>
       <Timeline.Item
         v-for="log in logList"
diff --git a/apps/web-antd/src/components/upload/file-upload.vue b/apps/web-antd/src/components/upload/file-upload.vue
index 83dfb6df..fdf4ae16 100644
--- a/apps/web-antd/src/components/upload/file-upload.vue
+++ b/apps/web-antd/src/components/upload/file-upload.vue
@@ -6,7 +6,7 @@ import type { FileUploadProps } from './typing';
 
 import type { AxiosProgressEvent } from '#/api/infra/file';
 
-import { ref, toRefs, watch } from 'vue';
+import { computed, ref, toRefs, watch } from 'vue';
 
 import { CloudUpload } from '@vben/icons';
 import { $t } from '@vben/locales';
@@ -22,8 +22,10 @@ defineOptions({ name: 'FileUpload', inheritAttrs: false });
 
 const props = withDefaults(defineProps<FileUploadProps>(), {
   value: () => [],
+  modelValue: undefined,
   directory: undefined,
   disabled: false,
+  drag: false,
   helpText: '',
   maxSize: 2,
   maxNumber: 1,
@@ -33,7 +35,14 @@ const props = withDefaults(defineProps<FileUploadProps>(), {
   resultField: '',
   showDescription: false,
 });
-const emit = defineEmits(['change', 'update:value', 'delete', 'returnText']);
+const emit = defineEmits([
+  'change',
+  'update:value',
+  'update:modelValue',
+  'delete',
+  'returnText',
+  'preview',
+]);
 const { accept, helpText, maxNumber, maxSize } = toRefs(props);
 const isInnerOperate = ref<boolean>(false);
 const { getStringAccept } = useUploadType({
@@ -43,13 +52,25 @@ const { getStringAccept } = useUploadType({
   maxSizeRef: maxSize,
 });
 
+// 计算当前绑定的值，优先使用 modelValue
+const currentValue = computed(() => {
+  return props.modelValue === undefined ? props.value : props.modelValue;
+});
+
+// 判断是否使用 modelValue
+const isUsingModelValue = computed(() => {
+  return props.modelValue !== undefined;
+});
+
 const fileList = ref<UploadProps['fileList']>([]);
 const isLtMsg = ref<boolean>(true); // 文件大小错误提示
 const isActMsg = ref<boolean>(true); // 文件类型错误提示
 const isFirstRender = ref<boolean>(true); // 是否第一次渲染
+const uploadNumber = ref<number>(0); // 上传文件计数器
+const uploadList = ref<any[]>([]); // 临时上传列表
 
 watch(
-  () => props.value,
+  currentValue,
   (v) => {
     if (isInnerOperate.value) {
       isInnerOperate.value = false;
@@ -94,15 +115,40 @@ async function handleRemove(file: UploadFile) {
     const value = getValue();
     isInnerOperate.value = true;
     emit('update:value', value);
+    emit('update:modelValue', value);
     emit('change', value);
     emit('delete', file);
   }
 }
 
+// 处理文件预览
+function handlePreview(file: UploadFile) {
+  emit('preview', file);
+}
+
+// 处理文件数量超限
+function handleExceed() {
+  message.error($t('ui.upload.maxNumber', [maxNumber.value]));
+}
+
+// 处理上传错误
+function handleUploadError(error: any) {
+  console.error('上传错误:', error);
+  message.error($t('ui.upload.uploadError'));
+  // 上传失败时减少计数器
+  uploadNumber.value = Math.max(0, uploadNumber.value - 1);
+}
+
 async function beforeUpload(file: File) {
   const fileContent = await file.text();
   emit('returnText', fileContent);
 
+  // 检查文件数量限制
+  if (fileList.value!.length >= props.maxNumber) {
+    message.error($t('ui.upload.maxNumber', [props.maxNumber]));
+    return Upload.LIST_IGNORE;
+  }
+
   const { maxSize, accept } = props;
   const isAct = checkFileType(file, accept);
   if (!isAct) {
@@ -110,6 +156,7 @@ async function beforeUpload(file: File) {
     isActMsg.value = false;
     // 防止弹出多个错误提示
     setTimeout(() => (isActMsg.value = true), 1000);
+    return Upload.LIST_IGNORE;
   }
   const isLt = file.size / 1024 / 1024 > maxSize;
   if (isLt) {
@@ -117,8 +164,12 @@ async function beforeUpload(file: File) {
     isLtMsg.value = false;
     // 防止弹出多个错误提示
     setTimeout(() => (isLtMsg.value = true), 1000);
+    return Upload.LIST_IGNORE;
   }
-  return (isAct && !isLt) || Upload.LIST_IGNORE;
+
+  // 只有在验证通过后才增加计数器
+  uploadNumber.value++;
+  return true;
 }
 
 async function customRequest(info: UploadRequestOption<any>) {
@@ -133,17 +184,48 @@ async function customRequest(info: UploadRequestOption<any>) {
       info.onProgress!({ percent });
     };
     const res = await api?.(info.file as File, progressEvent);
+
+    // 处理上传成功后的逻辑
+    handleUploadSuccess(res, info.file as File);
+
     info.onSuccess!(res);
     message.success($t('ui.upload.uploadSuccess'));
-
-    // 更新文件
-    const value = getValue();
-    isInnerOperate.value = true;
-    emit('update:value', value);
-    emit('change', value);
   } catch (error: any) {
     console.error(error);
     info.onError!(error);
+    handleUploadError(error);
+  }
+}
+
+// 处理上传成功
+function handleUploadSuccess(res: any, file: File) {
+  // 删除临时文件
+  const index = fileList.value?.findIndex((item) => item.name === file.name);
+  if (index !== -1) {
+    fileList.value?.splice(index!, 1);
+  }
+
+  // 添加到临时上传列表
+  const fileUrl = res?.url || res?.data || res;
+  uploadList.value.push({
+    name: file.name,
+    url: fileUrl,
+    status: UploadResultStatus.DONE,
+    uid: file.name + Date.now(),
+  });
+
+  // 检查是否所有文件都上传完成
+  if (uploadList.value.length >= uploadNumber.value) {
+    fileList.value?.push(...uploadList.value);
+    uploadList.value = [];
+    uploadNumber.value = 0;
+
+    // 更新值
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('update:modelValue', value);
+    emit('change', value);
   }
 }
 
@@ -156,11 +238,26 @@ function getValue() {
       }
       return item?.url || item?.response?.url || item?.response;
     });
-  // add by 芋艿：【特殊】单个文件的情况，获取首个元素，保证返回的是 String 类型
+
+  // 单个文件的情况，根据输入参数类型决定返回格式
   if (props.maxNumber === 1) {
-    return list.length > 0 ? list[0] : '';
+    const singleValue = list.length > 0 ? list[0] : '';
+    // 如果原始值是字符串或 modelValue 是字符串，返回字符串
+    if (
+      isString(props.value) ||
+      (isUsingModelValue.value && isString(props.modelValue))
+    ) {
+      return singleValue;
+    }
+    return singleValue;
   }
-  return list;
+
+  // 多文件情况，根据输入参数类型决定返回格式
+  if (isUsingModelValue.value) {
+    return Array.isArray(props.modelValue) ? list : list.join(',');
+  }
+
+  return Array.isArray(props.value) ? list : list.join(',');
 }
 </script>
 
@@ -177,15 +274,34 @@ function getValue() {
       :multiple="multiple"
       list-type="text"
       :progress="{ showInfo: true }"
+      :show-upload-list="{
+        showPreviewIcon: true,
+        showRemoveIcon: true,
+        showDownloadIcon: true,
+      }"
       @remove="handleRemove"
+      @preview="handlePreview"
+      @reject="handleExceed"
     >
-      <div v-if="fileList && fileList.length < maxNumber">
+      <div v-if="drag" class="upload-drag-area">
+        <p class="ant-upload-drag-icon">
+          <CloudUpload />
+        </p>
+        <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
+        <p class="ant-upload-hint">
+          支持{{ accept.join('/') }}格式文件，不超过{{ maxSize }}MB
+        </p>
+      </div>
+      <div v-else-if="fileList && fileList.length < maxNumber">
         <Button>
           <CloudUpload />
           {{ $t('ui.upload.upload') }}
         </Button>
       </div>
-      <div v-if="showDescription" class="mt-2 flex flex-wrap items-center">
+      <div
+        v-if="showDescription && !drag"
+        class="mt-2 flex flex-wrap items-center"
+      >
         请上传不超过
         <div class="text-primary mx-1 font-bold">{{ maxSize }}MB</div>
         的
@@ -195,3 +311,35 @@ function getValue() {
     </Upload>
   </div>
 </template>
+
+<style scoped>
+.upload-drag-area {
+  border: 2px dashed #d9d9d9;
+  border-radius: 8px;
+  padding: 20px;
+  text-align: center;
+  background-color: #fafafa;
+  transition: border-color 0.3s;
+}
+
+.upload-drag-area:hover {
+  border-color: #1890ff;
+}
+
+.ant-upload-drag-icon {
+  font-size: 48px;
+  color: #d9d9d9;
+  margin-bottom: 16px;
+}
+
+.ant-upload-text {
+  font-size: 16px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.ant-upload-hint {
+  font-size: 14px;
+  color: #999;
+}
+</style>
diff --git a/apps/web-antd/src/components/upload/image-upload.vue b/apps/web-antd/src/components/upload/image-upload.vue
index db9928ba..4f0e9d1b 100644
--- a/apps/web-antd/src/components/upload/image-upload.vue
+++ b/apps/web-antd/src/components/upload/image-upload.vue
@@ -6,7 +6,7 @@ import type { FileUploadProps } from './typing';
 
 import type { AxiosProgressEvent } from '#/api/infra/file';
 
-import { ref, toRefs, watch } from 'vue';
+import { computed, ref, toRefs, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
@@ -22,6 +22,7 @@ defineOptions({ name: 'ImageUpload', inheritAttrs: false });
 
 const props = withDefaults(defineProps<FileUploadProps>(), {
   value: () => [],
+  modelValue: undefined,
   directory: undefined,
   disabled: false,
   listType: 'picture-card',
@@ -34,7 +35,12 @@ const props = withDefaults(defineProps<FileUploadProps>(), {
   resultField: '',
   showDescription: true,
 });
-const emit = defineEmits(['change', 'update:value', 'delete']);
+const emit = defineEmits([
+  'change',
+  'update:value',
+  'update:modelValue',
+  'delete',
+]);
 const { accept, helpText, maxNumber, maxSize } = toRefs(props);
 const isInnerOperate = ref<boolean>(false);
 const { getStringAccept } = useUploadType({
@@ -43,6 +49,16 @@ const { getStringAccept } = useUploadType({
   maxNumberRef: maxNumber,
   maxSizeRef: maxSize,
 });
+
+// 计算当前绑定的值，优先使用 modelValue
+const currentValue = computed(() => {
+  return props.modelValue === undefined ? props.value : props.modelValue;
+});
+
+// 判断是否使用 modelValue
+const isUsingModelValue = computed(() => {
+  return props.modelValue !== undefined;
+});
 const previewOpen = ref<boolean>(false); // 是否展示预览
 const previewImage = ref<string>(''); // 预览图片
 const previewTitle = ref<string>(''); // 预览标题
@@ -51,9 +67,11 @@ const fileList = ref<UploadProps['fileList']>([]);
 const isLtMsg = ref<boolean>(true); // 文件大小错误提示
 const isActMsg = ref<boolean>(true); // 文件类型错误提示
 const isFirstRender = ref<boolean>(true); // 是否第一次渲染
+const uploadNumber = ref<number>(0); // 上传文件计数器
+const uploadList = ref<any[]>([]); // 临时上传列表
 
 watch(
-  () => props.value,
+  currentValue,
   async (v) => {
     if (isInnerOperate.value) {
       isInnerOperate.value = false;
@@ -122,6 +140,7 @@ async function handleRemove(file: UploadFile) {
     const value = getValue();
     isInnerOperate.value = true;
     emit('update:value', value);
+    emit('update:modelValue', value);
     emit('change', value);
     emit('delete', file);
   }
@@ -133,6 +152,12 @@ function handleCancel() {
 }
 
 async function beforeUpload(file: File) {
+  // 检查文件数量限制
+  if (fileList.value!.length >= props.maxNumber) {
+    message.error($t('ui.upload.maxNumber', [props.maxNumber]));
+    return Upload.LIST_IGNORE;
+  }
+
   const { maxSize, accept } = props;
   const isAct = checkImgType(file, accept);
   if (!isAct) {
@@ -140,6 +165,7 @@ async function beforeUpload(file: File) {
     isActMsg.value = false;
     // 防止弹出多个错误提示
     setTimeout(() => (isActMsg.value = true), 1000);
+    return Upload.LIST_IGNORE;
   }
   const isLt = file.size / 1024 / 1024 > maxSize;
   if (isLt) {
@@ -147,8 +173,12 @@ async function beforeUpload(file: File) {
     isLtMsg.value = false;
     // 防止弹出多个错误提示
     setTimeout(() => (isLtMsg.value = true), 1000);
+    return Upload.LIST_IGNORE;
   }
-  return (isAct && !isLt) || Upload.LIST_IGNORE;
+
+  // 只有在验证通过后才增加计数器
+  uploadNumber.value++;
+  return true;
 }
 
 async function customRequest(info: UploadRequestOption<any>) {
@@ -163,20 +193,59 @@ async function customRequest(info: UploadRequestOption<any>) {
       info.onProgress!({ percent });
     };
     const res = await api?.(info.file as File, progressEvent);
+
+    // 处理上传成功后的逻辑
+    handleUploadSuccess(res, info.file as File);
+
     info.onSuccess!(res);
     message.success($t('ui.upload.uploadSuccess'));
-
-    // 更新文件
-    const value = getValue();
-    isInnerOperate.value = true;
-    emit('update:value', value);
-    emit('change', value);
   } catch (error: any) {
     console.error(error);
     info.onError!(error);
+    handleUploadError(error);
   }
 }
 
+// 处理上传成功
+function handleUploadSuccess(res: any, file: File) {
+  // 删除临时文件
+  const index = fileList.value?.findIndex((item) => item.name === file.name);
+  if (index !== -1) {
+    fileList.value?.splice(index!, 1);
+  }
+
+  // 添加到临时上传列表
+  const fileUrl = res?.url || res?.data || res;
+  uploadList.value.push({
+    name: file.name,
+    url: fileUrl,
+    status: UploadResultStatus.DONE,
+    uid: file.name + Date.now(),
+  });
+
+  // 检查是否所有文件都上传完成
+  if (uploadList.value.length >= uploadNumber.value) {
+    fileList.value?.push(...uploadList.value);
+    uploadList.value = [];
+    uploadNumber.value = 0;
+
+    // 更新值
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('update:modelValue', value);
+    emit('change', value);
+  }
+}
+
+// 处理上传错误
+function handleUploadError(error: any) {
+  console.error('上传错误:', error);
+  message.error($t('ui.upload.uploadError'));
+  // 上传失败时减少计数器
+  uploadNumber.value = Math.max(0, uploadNumber.value - 1);
+}
+
 function getValue() {
   const list = (fileList.value || [])
     .filter((item) => item?.status === UploadResultStatus.DONE)
@@ -186,11 +255,26 @@ function getValue() {
       }
       return item?.url || item?.response?.url || item?.response;
     });
-  // add by 芋艿：【特殊】单个文件的情况，获取首个元素，保证返回的是 String 类型
+
+  // 单个文件的情况，根据输入参数类型决定返回格式
   if (props.maxNumber === 1) {
-    return list.length > 0 ? list[0] : '';
+    const singleValue = list.length > 0 ? list[0] : '';
+    // 如果原始值是字符串或 modelValue 是字符串，返回字符串
+    if (
+      isString(props.value) ||
+      (isUsingModelValue.value && isString(props.modelValue))
+    ) {
+      return singleValue;
+    }
+    return singleValue;
   }
-  return list;
+
+  // 多文件情况，根据输入参数类型决定返回格式
+  if (isUsingModelValue.value) {
+    return Array.isArray(props.modelValue) ? list : list.join(',');
+  }
+
+  return Array.isArray(props.value) ? list : list.join(',');
 }
 </script>
 
diff --git a/apps/web-antd/src/components/upload/typing.ts b/apps/web-antd/src/components/upload/typing.ts
index 90134ff6..ada73d24 100644
--- a/apps/web-antd/src/components/upload/typing.ts
+++ b/apps/web-antd/src/components/upload/typing.ts
@@ -21,10 +21,12 @@ export interface FileUploadProps {
   // 上传的目录
   directory?: string;
   disabled?: boolean;
+  drag?: boolean; // 是否支持拖拽上传
   helpText?: string;
   listType?: UploadListType;
   // 最大数量的文件，Infinity不限制
   maxNumber?: number;
+  modelValue?: string | string[]; // v-model 支持
   // 文件最大多少MB
   maxSize?: number;
   // 是否支持多选
diff --git a/apps/web-antd/src/components/upload/use-upload.ts b/apps/web-antd/src/components/upload/use-upload.ts
index ec3b2d58..2f46f9e9 100644
--- a/apps/web-antd/src/components/upload/use-upload.ts
+++ b/apps/web-antd/src/components/upload/use-upload.ts
@@ -135,7 +135,7 @@ export function getUploadUrl(): string {
  * @param file 文件
  */
 function createFile0(
-  vo: InfraFileApi.FilePresignedUrlResp,
+  vo: InfraFileApi.FilePresignedUrlRespVO,
   file: File,
 ): InfraFileApi.File {
   const fileVO = {
diff --git a/apps/web-antd/src/router/routes/modules/bpm.ts b/apps/web-antd/src/router/routes/modules/bpm.ts
index 02e8b0b1..21abaabe 100644
--- a/apps/web-antd/src/router/routes/modules/bpm.ts
+++ b/apps/web-antd/src/router/routes/modules/bpm.ts
@@ -104,7 +104,7 @@ const routes: RouteRecordRaw[] = [
         name: 'BpmProcessInstanceReport',
         meta: {
           title: '数据报表',
-          activeMenu: '/bpm/manager/model',
+          activePath: '/bpm/manager/model',
           icon: 'carbon:data-2',
           hideInMenu: true,
           keepAlive: true,
diff --git a/apps/web-antd/src/router/routes/modules/crm.ts b/apps/web-antd/src/router/routes/modules/crm.ts
index 15cb00e1..cdd75fec 100644
--- a/apps/web-antd/src/router/routes/modules/crm.ts
+++ b/apps/web-antd/src/router/routes/modules/crm.ts
@@ -16,73 +16,72 @@ const routes: RouteRecordRaw[] = [
         name: 'CrmClueDetail',
         meta: {
           title: '线索详情',
-          activeMenu: '/crm/clue',
+          activePath: '/crm/clue',
         },
-        component: () => import('#/views/crm/clue/modules/detail.vue'),
+        component: () => import('#/views/crm/clue/detail/index.vue'),
       },
       {
         path: 'customer/detail/:id',
         name: 'CrmCustomerDetail',
         meta: {
           title: '客户详情',
-          activeMenu: '/crm/customer',
+          activePath: '/crm/customer',
         },
-        component: () => import('#/views/crm/customer/modules/detail.vue'),
+        component: () => import('#/views/crm/customer/detail/index.vue'),
       },
       {
         path: 'business/detail/:id',
         name: 'CrmBusinessDetail',
         meta: {
           title: '商机详情',
-          activeMenu: '/crm/business',
+          activePath: '/crm/business',
         },
-        component: () => import('#/views/crm/business/modules/detail.vue'),
+        component: () => import('#/views/crm/business/detail/index.vue'),
       },
       {
         path: 'contract/detail/:id',
         name: 'CrmContractDetail',
         meta: {
           title: '合同详情',
-          activeMenu: '/crm/contract',
+          activePath: '/crm/contract',
         },
-        component: () => import('#/views/crm/contract/modules/detail.vue'),
+        component: () => import('#/views/crm/contract/detail/index.vue'),
       },
       {
         path: 'receivable-plan/detail/:id',
         name: 'CrmReceivablePlanDetail',
         meta: {
           title: '回款计划详情',
-          activeMenu: '/crm/receivable-plan',
+          activePath: '/crm/receivable-plan',
         },
-        component: () =>
-          import('#/views/crm/receivable/plan/modules/detail.vue'),
+        component: () => import('#/views/crm/receivable/plan/detail/index.vue'),
       },
       {
         path: 'receivable/detail/:id',
         name: 'CrmReceivableDetail',
         meta: {
           title: '回款详情',
-          activeMenu: '/crm/receivable',
+          activePath: '/crm/receivable',
         },
-        component: () => import('#/views/crm/receivable/modules/detail.vue'),
+        component: () => import('#/views/crm/receivable/detail/index.vue'),
       },
       {
         path: 'contact/detail/:id',
         name: 'CrmContactDetail',
         meta: {
           title: '联系人详情',
-          activeMenu: '/crm/contact',
+          activePath: '/crm/contact',
         },
-        component: () => import('#/views/crm/contact/modules/detail.vue'),
+        component: () => import('#/views/crm/contact/detail/index.vue'),
       },
       {
         path: 'product/detail/:id',
         name: 'CrmProductDetail',
         meta: {
           title: '产品详情',
-          activeMenu: '/crm/product',
+          activePath: '/crm/product',
         },
-        component: () => import('#/views/crm/product/modules/detail.vue'),
+        component: () => import('#/views/crm/product/detail/index.vue'),
       },
     ],
   },
diff --git a/apps/web-antd/src/router/routes/modules/infra.ts b/apps/web-antd/src/router/routes/modules/infra.ts
index cc6d96de..c99b51be 100644
--- a/apps/web-antd/src/router/routes/modules/infra.ts
+++ b/apps/web-antd/src/router/routes/modules/infra.ts
@@ -2,7 +2,7 @@ import type { RouteRecordRaw } from 'vue-router';
 
 const routes: RouteRecordRaw[] = [
   {
-    path: '/infra/job/job-log',
+    path: '/infra/job/log',
     component: () => import('#/views/infra/job/logger/index.vue'),
     name: 'InfraJobLog',
     meta: {
@@ -14,25 +14,16 @@ const routes: RouteRecordRaw[] = [
     },
   },
   {
-    path: '/codegen',
-    name: 'CodegenEdit',
+    path: '/infra/codegen/edit',
+    component: () => import('#/views/infra/codegen/edit/index.vue'),
+    name: 'InfraCodegenEdit',
     meta: {
-      title: '代码生成',
+      title: '生成配置修改',
       icon: 'ic:baseline-view-in-ar',
+      activePath: '/infra/codegen',
       keepAlive: true,
       hideInMenu: true,
     },
-    children: [
-      {
-        path: '/codegen/edit',
-        name: 'InfraCodegenEdit',
-        component: () => import('#/views/infra/codegen/edit/index.vue'),
-        meta: {
-          title: '修改生成配置',
-          activeMenu: '/infra/codegen',
-        },
-      },
-    ],
   },
 ];
 
diff --git a/apps/web-antd/src/router/routes/modules/mall.ts b/apps/web-antd/src/router/routes/modules/mall.ts
index d5d39646..a2546dd1 100644
--- a/apps/web-antd/src/router/routes/modules/mall.ts
+++ b/apps/web-antd/src/router/routes/modules/mall.ts
@@ -16,7 +16,7 @@ const routes: RouteRecordRaw[] = [
         name: 'ProductSpuAdd',
         meta: {
           title: '商品添加',
-          activeMenu: '/mall/product/spu',
+          activePath: '/mall/product/spu',
         },
         component: () => import('#/views/mall/product/spu/modules/form.vue'),
       },
@@ -25,7 +25,7 @@ const routes: RouteRecordRaw[] = [
         name: 'ProductSpuEdit',
         meta: {
           title: '商品编辑',
-          activeMenu: '/mall/product/spu',
+          activePath: '/mall/product/spu',
         },
         component: () => import('#/views/mall/product/spu/modules/form.vue'),
       },
@@ -34,7 +34,7 @@ const routes: RouteRecordRaw[] = [
         name: 'ProductSpuDetail',
         meta: {
           title: '商品详情',
-          activeMenu: '/crm/business',
+          activePath: '/crm/business',
         },
         component: () => import('#/views/mall/product/spu/modules/detail.vue'),
       },
@@ -55,7 +55,7 @@ const routes: RouteRecordRaw[] = [
         name: 'TradeOrderDetail',
         meta: {
           title: '订单详情',
-          activeMenu: '/mall/trade/order',
+          activePath: '/mall/trade/order',
         },
         component: () => import('#/views/mall/trade/order/modules/detail.vue'),
       },
@@ -64,7 +64,7 @@ const routes: RouteRecordRaw[] = [
         name: 'TradeAfterSaleDetail',
         meta: {
           title: '退款详情',
-          activeMenu: '/mall/trade/after-sale',
+          activePath: '/mall/trade/after-sale',
         },
         component: () =>
           import('#/views/mall/trade/afterSale/modules/detail.vue'),
diff --git a/apps/web-antd/src/views/_core/profile/index.vue b/apps/web-antd/src/views/_core/profile/index.vue
index b061868f..8c803573 100644
--- a/apps/web-antd/src/views/_core/profile/index.vue
+++ b/apps/web-antd/src/views/_core/profile/index.vue
@@ -19,7 +19,7 @@ const authStore = useAuthStore();
 const activeName = ref('basicInfo');
 
 /** 加载个人信息 */
-const profile = ref<SystemUserProfileApi.UserProfileResp>();
+const profile = ref<SystemUserProfileApi.UserProfileRespVO>();
 async function loadProfile() {
   profile.value = await getUserProfile();
 }
diff --git a/apps/web-antd/src/views/_core/profile/modules/base-info.vue b/apps/web-antd/src/views/_core/profile/modules/base-info.vue
index abfb2668..d2d75903 100644
--- a/apps/web-antd/src/views/_core/profile/modules/base-info.vue
+++ b/apps/web-antd/src/views/_core/profile/modules/base-info.vue
@@ -15,7 +15,7 @@ import { useVbenForm, z } from '#/adapter/form';
 import { updateUserProfile } from '#/api/system/user/profile';
 
 const props = defineProps<{
-  profile?: SystemUserProfileApi.UserProfileResp;
+  profile?: SystemUserProfileApi.UserProfileRespVO;
 }>();
 const emit = defineEmits<{
   (e: 'success'): void;
@@ -78,7 +78,7 @@ async function handleSubmit(values: Recordable<any>) {
   try {
     formApi.setLoading(true);
     // 提交表单
-    await updateUserProfile(values as SystemUserProfileApi.UpdateProfileReq);
+    await updateUserProfile(values as SystemUserProfileApi.UpdateProfileReqVO);
     // 关闭并提示
     emit('success');
     message.success($t('ui.actionMessage.operationSuccess'));
diff --git a/apps/web-antd/src/views/_core/profile/modules/profile-user.vue b/apps/web-antd/src/views/_core/profile/modules/profile-user.vue
index dff3b4fb..57384e3e 100644
--- a/apps/web-antd/src/views/_core/profile/modules/profile-user.vue
+++ b/apps/web-antd/src/views/_core/profile/modules/profile-user.vue
@@ -14,7 +14,7 @@ import { CropperAvatar } from '#/components/cropper';
 import { useUpload } from '#/components/upload/use-upload';
 
 const props = defineProps<{
-  profile?: SystemUserProfileApi.UserProfileResp;
+  profile?: SystemUserProfileApi.UserProfileRespVO;
 }>();
 
 const emit = defineEmits<{
diff --git a/apps/web-antd/src/views/ai/chat/manager/modules/ChatConversationList.vue b/apps/web-antd/src/views/ai/chat/manager/modules/ChatConversationList.vue
index 3c0cc938..72345f26 100644
--- a/apps/web-antd/src/views/ai/chat/manager/modules/ChatConversationList.vue
+++ b/apps/web-antd/src/views/ai/chat/manager/modules/ChatConversationList.vue
@@ -32,13 +32,12 @@ function onRefresh() {
 async function handleDelete(row: AiChatConversationApi.ChatConversation) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteChatConversationByAdmin(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/ai/chat/manager/modules/ChatMessageList.vue b/apps/web-antd/src/views/ai/chat/manager/modules/ChatMessageList.vue
index a53426c8..83070e6d 100644
--- a/apps/web-antd/src/views/ai/chat/manager/modules/ChatMessageList.vue
+++ b/apps/web-antd/src/views/ai/chat/manager/modules/ChatMessageList.vue
@@ -29,13 +29,12 @@ function onRefresh() {
 async function handleDelete(row: AiChatConversationApi.ChatConversation) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteChatMessageByAdmin(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/ai/image/manager/index.vue b/apps/web-antd/src/views/ai/image/manager/index.vue
index 2a94181b..22ff58a6 100644
--- a/apps/web-antd/src/views/ai/image/manager/index.vue
+++ b/apps/web-antd/src/views/ai/image/manager/index.vue
@@ -27,13 +27,12 @@ function onRefresh() {
 async function handleDelete(row: AiImageApi.Image) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteImage(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/ai/knowledge/document/index.vue b/apps/web-antd/src/views/ai/knowledge/document/index.vue
index a92d3915..b1d96b43 100644
--- a/apps/web-antd/src/views/ai/knowledge/document/index.vue
+++ b/apps/web-antd/src/views/ai/knowledge/document/index.vue
@@ -52,13 +52,12 @@ function handleEdit(id: number) {
 async function handleDelete(row: AiKnowledgeDocumentApi.KnowledgeDocument) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteKnowledgeDocument(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/ai/knowledge/knowledge/index.vue b/apps/web-antd/src/views/ai/knowledge/knowledge/index.vue
index fa0a9267..da41351f 100644
--- a/apps/web-antd/src/views/ai/knowledge/knowledge/index.vue
+++ b/apps/web-antd/src/views/ai/knowledge/knowledge/index.vue
@@ -42,13 +42,12 @@ function handleEdit(row: AiKnowledgeKnowledgeApi.Knowledge) {
 async function handleDelete(row: AiKnowledgeKnowledgeApi.Knowledge) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteKnowledge(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/ai/knowledge/segment/index.vue b/apps/web-antd/src/views/ai/knowledge/segment/index.vue
index 8352ab07..5ceb8bd1 100644
--- a/apps/web-antd/src/views/ai/knowledge/segment/index.vue
+++ b/apps/web-antd/src/views/ai/knowledge/segment/index.vue
@@ -49,13 +49,12 @@ function handleEdit(row: AiKnowledgeKnowledgeApi.Knowledge) {
 async function handleDelete(row: AiKnowledgeKnowledgeApi.Knowledge) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteKnowledgeSegment(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/ai/mindmap/manager/index.vue b/apps/web-antd/src/views/ai/mindmap/manager/index.vue
index 8fa73b76..fe9bb303 100644
--- a/apps/web-antd/src/views/ai/mindmap/manager/index.vue
+++ b/apps/web-antd/src/views/ai/mindmap/manager/index.vue
@@ -34,13 +34,12 @@ function onRefresh() {
 async function handleDelete(row: AiMindmapApi.MindMap) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteMindMap(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/ai/model/apiKey/index.vue b/apps/web-antd/src/views/ai/model/apiKey/index.vue
index 5f34dad3..d7d37782 100644
--- a/apps/web-antd/src/views/ai/model/apiKey/index.vue
+++ b/apps/web-antd/src/views/ai/model/apiKey/index.vue
@@ -37,13 +37,12 @@ function handleEdit(row: AiModelApiKeyApi.ApiKey) {
 async function handleDelete(row: AiModelApiKeyApi.ApiKey) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteApiKey(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/ai/model/chatRole/index.vue b/apps/web-antd/src/views/ai/model/chatRole/index.vue
index 783fef49..7d79b9b2 100644
--- a/apps/web-antd/src/views/ai/model/chatRole/index.vue
+++ b/apps/web-antd/src/views/ai/model/chatRole/index.vue
@@ -37,13 +37,12 @@ function handleEdit(row: AiModelChatRoleApi.ChatRole) {
 async function handleDelete(row: AiModelChatRoleApi.ChatRole) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteChatRole(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/ai/model/model/index.vue b/apps/web-antd/src/views/ai/model/model/index.vue
index 5d56056a..8df71079 100644
--- a/apps/web-antd/src/views/ai/model/model/index.vue
+++ b/apps/web-antd/src/views/ai/model/model/index.vue
@@ -42,13 +42,12 @@ function handleEdit(row: AiModelModelApi.Model) {
 async function handleDelete(row: AiModelModelApi.Model) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteModel(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/ai/model/tool/index.vue b/apps/web-antd/src/views/ai/model/tool/index.vue
index 2da162e7..9e1a9135 100644
--- a/apps/web-antd/src/views/ai/model/tool/index.vue
+++ b/apps/web-antd/src/views/ai/model/tool/index.vue
@@ -37,13 +37,12 @@ function handleEdit(row: AiModelToolApi.Tool) {
 async function handleDelete(row: AiModelToolApi.Tool) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteTool(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/ai/music/manager/index.vue b/apps/web-antd/src/views/ai/music/manager/index.vue
index 882d50b3..0c40958f 100644
--- a/apps/web-antd/src/views/ai/music/manager/index.vue
+++ b/apps/web-antd/src/views/ai/music/manager/index.vue
@@ -27,13 +27,12 @@ function onRefresh() {
 async function handleDelete(row: AiMusicApi.Music) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteMusic(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/ai/workflow/index.vue b/apps/web-antd/src/views/ai/workflow/index.vue
index d6355c14..a2de8e96 100644
--- a/apps/web-antd/src/views/ai/workflow/index.vue
+++ b/apps/web-antd/src/views/ai/workflow/index.vue
@@ -39,13 +39,12 @@ function handleEdit(row: any) {
 async function handleDelete(row: any) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteWorkflow(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/ai/write/manager/index.vue b/apps/web-antd/src/views/ai/write/manager/index.vue
index 1f85dee6..6950a8cc 100644
--- a/apps/web-antd/src/views/ai/write/manager/index.vue
+++ b/apps/web-antd/src/views/ai/write/manager/index.vue
@@ -26,13 +26,12 @@ function onRefresh() {
 async function handleDelete(row: AiWriteApi.AiWritePageReq) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteWrite(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/bpm/category/index.vue b/apps/web-antd/src/views/bpm/category/index.vue
index ecfbbe98..c4db4467 100644
--- a/apps/web-antd/src/views/bpm/category/index.vue
+++ b/apps/web-antd/src/views/bpm/category/index.vue
@@ -37,13 +37,12 @@ function handleEdit(row: BpmCategoryApi.Category) {
 async function handleDelete(row: BpmCategoryApi.Category) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.code]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteCategory(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.code]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } catch {
diff --git a/apps/web-antd/src/views/bpm/form/index.vue b/apps/web-antd/src/views/bpm/form/index.vue
index dae5127d..e4e0df24 100644
--- a/apps/web-antd/src/views/bpm/form/index.vue
+++ b/apps/web-antd/src/views/bpm/form/index.vue
@@ -60,13 +60,12 @@ function handleCopy(row: BpmFormApi.Form) {
 async function handleDelete(row: BpmFormApi.Form) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteForm(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/bpm/group/index.vue b/apps/web-antd/src/views/bpm/group/index.vue
index f5395dae..7b82fe10 100644
--- a/apps/web-antd/src/views/bpm/group/index.vue
+++ b/apps/web-antd/src/views/bpm/group/index.vue
@@ -41,13 +41,12 @@ function handleEdit(row: BpmUserGroupApi.UserGroup) {
 async function handleDelete(row: BpmUserGroupApi.UserGroup) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteUserGroup(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } catch {
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue b/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
index 7ce57af2..dde95e5e 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
@@ -314,12 +314,10 @@ defineExpose({ validate });
       </Form.Item>
       <Form.Item label="流程类型" name="type" class="mb-5">
         <Radio.Group v-model:value="modelData.type">
-          <!-- TODO BPMN 流程类型需要整合，暂时禁用 -->
           <Radio
             v-for="dict in getDictOptions(DICT_TYPE.BPM_MODEL_TYPE, 'number')"
-            :key="dict.value"
+            :key="dict.value as number"
             :value="dict.value"
-            :disabled="dict.value === 10"
           >
             {{ dict.label }}
           </Radio>
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue b/apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue
index fef66c4b..7d621cfe 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue
@@ -5,6 +5,7 @@ import type { BpmModelApi } from '#/api/bpm/model';
 
 import { inject, onBeforeUnmount, provide, ref, shallowRef, watch } from 'vue';
 
+import { ContentWrap } from '@vben/common-ui';
 import { BpmModelFormType } from '@vben/constants';
 
 import { message } from 'ant-design-vue';
@@ -18,7 +19,6 @@ import {
 import CustomContentPadProvider from '#/components/bpmn-process-designer/package/designer/plugins/content-pad';
 // 自定义左侧菜单（修改 默认任务 为 用户任务）
 import CustomPaletteProvider from '#/components/bpmn-process-designer/package/designer/plugins/palette';
-import { ContentWrap } from '#/components/content-wrap';
 
 defineOptions({ name: 'BpmModelEditor' });
 
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue b/apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue
index bf67401d..ea1e5061 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
-import ContentWrap from '#/components/content-wrap/content-wrap.vue';
+import { ContentWrap } from '@vben/common-ui';
+
 import { SimpleProcessDesigner } from '#/components/simple-process-design';
 
 defineOptions({ name: 'SimpleModelDesign' });
@@ -30,7 +31,7 @@ async function validateConfig() {
 defineExpose({ validateConfig });
 </script>
 <template>
-  <ContentWrap :body-style="{ padding: '20px 16px' }">
+  <ContentWrap class="px-4 py-5">
     <SimpleProcessDesigner
       :model-form-id="modelFormId"
       :model-name="modelName"
diff --git a/apps/web-antd/src/views/bpm/oa/leave/detail.vue b/apps/web-antd/src/views/bpm/oa/leave/detail.vue
index f2ccc7b4..dc09fe59 100644
--- a/apps/web-antd/src/views/bpm/oa/leave/detail.vue
+++ b/apps/web-antd/src/views/bpm/oa/leave/detail.vue
@@ -4,8 +4,9 @@ import type { BpmOALeaveApi } from '#/api/bpm/oa/leave';
 import { computed, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
+import { ContentWrap } from '@vben/common-ui';
+
 import { getLeave } from '#/api/bpm/oa/leave';
-import { ContentWrap } from '#/components/content-wrap';
 import { Description } from '#/components/description';
 
 import { useDetailFormSchema } from './data';
diff --git a/apps/web-antd/src/views/bpm/processExpression/index.vue b/apps/web-antd/src/views/bpm/processExpression/index.vue
index 05531473..2e590359 100644
--- a/apps/web-antd/src/views/bpm/processExpression/index.vue
+++ b/apps/web-antd/src/views/bpm/processExpression/index.vue
@@ -40,13 +40,12 @@ function handleEdit(row: BpmProcessExpressionApi.ProcessExpression) {
 async function handleDelete(row: BpmProcessExpressionApi.ProcessExpression) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteProcessExpression(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
index 4bd75f3b..20c2e518 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
@@ -2,7 +2,6 @@
 import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 import type { SystemUserApi } from '#/api/system/user';
 
-// TODO @jason：业务表单审批时，读取不到界面，参见 https://t.zsxq.com/eif2e
 import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
 
 import { Page } from '@vben/common-ui';
@@ -156,7 +155,6 @@ async function getApprovalDetail() {
       });
     } else {
       // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
-
       BusinessFormComponent.value = registerComponent(
         data?.processDefinition?.formCustomViewPath || '',
       );
diff --git a/apps/web-antd/src/views/bpm/processListener/index.vue b/apps/web-antd/src/views/bpm/processListener/index.vue
index 9de49849..831353ff 100644
--- a/apps/web-antd/src/views/bpm/processListener/index.vue
+++ b/apps/web-antd/src/views/bpm/processListener/index.vue
@@ -40,13 +40,12 @@ function handleEdit(row: BpmProcessListenerApi.ProcessListener) {
 async function handleDelete(row: BpmProcessListenerApi.ProcessListener) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteProcessListener(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } catch {
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 e6c73478..ac42b8dd 100644
--- a/apps/web-antd/src/views/bpm/task/done/data.ts
+++ b/apps/web-antd/src/views/bpm/task/done/data.ts
@@ -42,14 +42,11 @@ export function useGridFormSchema(): VbenFormSchema[] {
     },
     {
       fieldName: 'status',
-      label: '流程状态',
+      label: '审批状态',
       component: 'Select',
       componentProps: {
-        options: getDictOptions(
-          DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
-          'number',
-        ),
-        placeholder: '请选择流程状态',
+        options: getDictOptions(DICT_TYPE.BPM_TASK_STATUS, 'number'),
+        placeholder: '请选择审批状态',
         allowClear: true,
       },
     },
diff --git a/apps/web-antd/src/views/crm/backlog/data.ts b/apps/web-antd/src/views/crm/backlog/data.ts
index 4bd32500..d0b66d13 100644
--- a/apps/web-antd/src/views/crm/backlog/data.ts
+++ b/apps/web-antd/src/views/crm/backlog/data.ts
@@ -46,6 +46,7 @@ export const CONTRACT_EXPIRY_TYPE = [
   { label: '已过期', value: 2 },
 ];
 
+/** 左侧菜单 */
 export const useLeftSides = (
   customerTodayContactCount: Ref<number>,
   clueFollowCount: Ref<number>,
diff --git a/apps/web-antd/src/views/crm/backlog/index.vue b/apps/web-antd/src/views/crm/backlog/index.vue
index 4dffc497..7c51c389 100644
--- a/apps/web-antd/src/views/crm/backlog/index.vue
+++ b/apps/web-antd/src/views/crm/backlog/index.vue
@@ -78,12 +78,12 @@ async function getCount() {
 }
 
 /** 激活时 */
-onActivated(async () => {
+onActivated(() => {
   getCount();
 });
 
 /** 初始化 */
-onMounted(async () => {
+onMounted(() => {
   getCount();
 });
 </script>
@@ -104,9 +104,9 @@ onMounted(async () => {
               </List.Item.Meta>
               <template #extra>
                 <Badge
+                  v-if="item.count.value > 0"
                   :color="item.menu === leftMenu ? 'blue' : 'red'"
                   :count="item.count.value"
-                  :show-zero="true"
                 />
               </template>
             </List.Item>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue b/apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue
index 4941a481..ec06445f 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue
@@ -53,6 +53,7 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
diff --git a/apps/web-antd/src/views/crm/backlog/modules/contract-audit-list.vue b/apps/web-antd/src/views/crm/backlog/modules/contract-audit-list.vue
index 15ad94a9..98f944c6 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/contract-audit-list.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/contract-audit-list.vue
@@ -53,7 +53,7 @@ const [Grid] = useVbenVxeGrid({
           allowClear: true,
           options: AUDIT_STATUS,
         },
-        defaultValue: 10,
+        defaultValue: AUDIT_STATUS[0]!.value,
       },
     ],
   },
@@ -75,6 +75,7 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
diff --git a/apps/web-antd/src/views/crm/backlog/modules/contract-remind-list.vue b/apps/web-antd/src/views/crm/backlog/modules/contract-remind-list.vue
index 1cbe6471..a394b3b6 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/contract-remind-list.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/contract-remind-list.vue
@@ -27,6 +27,7 @@ function handleProcessDetail(row: CrmContractApi.Contract) {
 function handleContractDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmContractDetail', params: { id: row.id } });
 }
+
 /** 打开客户详情 */
 function handleCustomerDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmCustomerDetail', params: { id: row.id } });
@@ -53,7 +54,7 @@ const [Grid] = useVbenVxeGrid({
           allowClear: true,
           options: CONTRACT_EXPIRY_TYPE,
         },
-        defaultValue: 1,
+        defaultValue: CONTRACT_EXPIRY_TYPE[0]!.value,
       },
     ],
   },
@@ -75,6 +76,7 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
diff --git a/apps/web-antd/src/views/crm/backlog/modules/customer-follow-list.vue b/apps/web-antd/src/views/crm/backlog/modules/customer-follow-list.vue
index bcb51c1d..284a0ddc 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/customer-follow-list.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/customer-follow-list.vue
@@ -53,6 +53,7 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
diff --git a/apps/web-antd/src/views/crm/backlog/modules/customer-put-pool-remind-list.vue b/apps/web-antd/src/views/crm/backlog/modules/customer-put-pool-remind-list.vue
index 8e81583e..fe782457 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/customer-put-pool-remind-list.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/customer-put-pool-remind-list.vue
@@ -31,7 +31,7 @@ const [Grid] = useVbenVxeGrid({
           allowClear: true,
           options: SCENE_TYPES,
         },
-        defaultValue: 1,
+        defaultValue: SCENE_TYPES[0]!.value,
       },
     ],
   },
@@ -53,6 +53,7 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
diff --git a/apps/web-antd/src/views/crm/backlog/modules/customer-today-contact-list.vue b/apps/web-antd/src/views/crm/backlog/modules/customer-today-contact-list.vue
index decb6ea9..03d0b25c 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/customer-today-contact-list.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/customer-today-contact-list.vue
@@ -31,7 +31,7 @@ const [Grid] = useVbenVxeGrid({
           allowClear: true,
           options: CONTACT_STATUS,
         },
-        defaultValue: 1,
+        defaultValue: CONTACT_STATUS[0]!.value,
       },
       {
         fieldName: 'sceneType',
@@ -41,7 +41,7 @@ const [Grid] = useVbenVxeGrid({
           allowClear: true,
           options: SCENE_TYPES,
         },
-        defaultValue: 1,
+        defaultValue: SCENE_TYPES[0]!.value,
       },
     ],
   },
@@ -63,6 +63,7 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
diff --git a/apps/web-antd/src/views/crm/backlog/modules/receivable-audit-list.vue b/apps/web-antd/src/views/crm/backlog/modules/receivable-audit-list.vue
index 688823b9..83aeff59 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/receivable-audit-list.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/receivable-audit-list.vue
@@ -49,7 +49,7 @@ const [Grid] = useVbenVxeGrid({
           allowClear: true,
           options: AUDIT_STATUS,
         },
-        defaultValue: 10,
+        defaultValue: AUDIT_STATUS[0]!.value,
       },
     ],
   },
@@ -70,6 +70,7 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
diff --git a/apps/web-antd/src/views/crm/backlog/modules/receivable-plan-remind-list.vue b/apps/web-antd/src/views/crm/backlog/modules/receivable-plan-remind-list.vue
index a913cc3f..4bafa462 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/receivable-plan-remind-list.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/receivable-plan-remind-list.vue
@@ -49,7 +49,7 @@ const [Grid] = useVbenVxeGrid({
           allowClear: true,
           options: RECEIVABLE_REMIND_TYPE,
         },
-        defaultValue: 1,
+        defaultValue: RECEIVABLE_REMIND_TYPE[0]!.value,
       },
     ],
   },
@@ -70,6 +70,7 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
diff --git a/apps/web-antd/src/views/crm/business/components/data.ts b/apps/web-antd/src/views/crm/business/components/data.ts
new file mode 100644
index 00000000..10ecb5a0
--- /dev/null
+++ b/apps/web-antd/src/views/crm/business/components/data.ts
@@ -0,0 +1,52 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+/** 商机关联列表列定义 */
+export function useBusinessDetailListColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 50,
+      fixed: 'left',
+    },
+    {
+      field: 'name',
+      title: '商机名称',
+      fixed: 'left',
+      slots: { default: 'name' },
+    },
+    {
+      field: 'customerName',
+      title: '客户名称',
+      fixed: 'left',
+      slots: { default: 'customerName' },
+    },
+    {
+      field: 'totalPrice',
+      title: '商机金额（元）',
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'dealTime',
+      title: '预计成交日期',
+      formatter: 'formatDate',
+    },
+    {
+      field: 'ownerUserName',
+      title: '负责人',
+    },
+    {
+      field: 'ownerUserDeptName',
+      title: '所属部门',
+    },
+    {
+      field: 'statusTypeName',
+      title: '商机状态组',
+      fixed: 'right',
+    },
+    {
+      field: 'statusName',
+      title: '商机阶段',
+      fixed: 'right',
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/business/modules/detail-list-modal.vue b/apps/web-antd/src/views/crm/business/components/detail-list-modal.vue
similarity index 87%
rename from apps/web-antd/src/views/crm/business/modules/detail-list-modal.vue
rename to apps/web-antd/src/views/crm/business/components/detail-list-modal.vue
index 03531810..5184a938 100644
--- a/apps/web-antd/src/views/crm/business/modules/detail-list-modal.vue
+++ b/apps/web-antd/src/views/crm/business/components/detail-list-modal.vue
@@ -1,3 +1,4 @@
+<!-- 商机选择对话框：用于联系人详情中关联已有商机 -->
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmBusinessApi } from '#/api/crm/business';
@@ -13,8 +14,8 @@ import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getBusinessPageByCustomer } from '#/api/crm/business';
 import { $t } from '#/locales';
 
-import { useDetailListColumns } from './detail-data';
-import Form from './form.vue';
+import Form from '../modules/form.vue';
+import { useBusinessDetailListColumns } from './data';
 
 const props = defineProps<{
   customerId?: number; // 关联联系人与商机时，需要传入 customerId 进行筛选
@@ -35,7 +36,7 @@ function setCheckedRows({ records }: { records: CrmBusinessApi.Business[] }) {
 }
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
@@ -54,6 +55,7 @@ function handleCustomerDetail(row: CrmBusinessApi.Business) {
   push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
 }
 
+/** 商机关联弹窗 */
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     if (checkedRows.value.length === 0) {
@@ -71,25 +73,9 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.unlock();
     }
   },
-  async onOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      return;
-    }
-    // 加载数据
-    const data = modalApi.getData<any>();
-    if (!data) {
-      return;
-    }
-    modalApi.lock();
-    try {
-      // 设置到 values
-      // await formApi.setValues(formData.value);
-    } finally {
-      modalApi.unlock();
-    }
-  },
 });
 
+/** 商机选择表格 */
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: [
@@ -101,7 +87,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     ],
   },
   gridOptions: {
-    columns: useDetailListColumns(),
+    columns: useBusinessDetailListColumns(),
     height: 600,
     keepSource: true,
     proxyConfig: {
@@ -133,7 +119,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Modal title="关联商机" class="w-2/5">
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid>
       <template #toolbar-tools>
         <TableAction
diff --git a/apps/web-antd/src/views/crm/business/modules/detail-list.vue b/apps/web-antd/src/views/crm/business/components/detail-list.vue
similarity index 92%
rename from apps/web-antd/src/views/crm/business/modules/detail-list.vue
rename to apps/web-antd/src/views/crm/business/components/detail-list.vue
index d2f14eef..92da3170 100644
--- a/apps/web-antd/src/views/crm/business/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/business/components/detail-list.vue
@@ -1,3 +1,4 @@
+<!-- 商机列表：用于【客户】【联系人】详情中，展示其关联的商机列表 -->
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmBusinessApi } from '#/api/crm/business';
@@ -22,9 +23,9 @@ import {
 import { BizTypeEnum } from '#/api/crm/permission';
 import { $t } from '#/locales';
 
-import { useDetailListColumns } from './detail-data';
+import Form from '../modules/form.vue';
+import { useBusinessDetailListColumns } from './data';
 import ListModal from './detail-list-modal.vue';
-import Form from './form.vue';
 
 const props = defineProps<{
   bizId: number; // 业务编号
@@ -51,7 +52,7 @@ function setCheckedRows({ records }: { records: CrmBusinessApi.Business[] }) {
 }
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
@@ -62,10 +63,12 @@ function handleCreate() {
     .open();
 }
 
+/** 关联商机 */
 function handleCreateBusiness() {
   detailListModalApi.setData({ customerId: props.customerId }).open();
 }
 
+/** 解除商机关联 */
 async function handleDeleteContactBusinessList() {
   if (checkedRows.value.length === 0) {
     message.error('请先选择商机后操作！');
@@ -83,7 +86,7 @@ async function handleDeleteContactBusinessList() {
         if (res) {
           // 提示并返回成功
           message.success($t('ui.actionMessage.operationSuccess'));
-          onRefresh();
+          handleRefresh();
           resolve(true);
         } else {
           reject(new Error($t('ui.actionMessage.operationFailed')));
@@ -105,18 +108,20 @@ function handleCustomerDetail(row: CrmBusinessApi.Business) {
   push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
 }
 
+/** 创建联系人关联的商机 */
 async function handleCreateContactBusinessList(businessIds: number[]) {
   const data = {
     contactId: props.bizId,
     businessIds,
   } as CrmContactApi.ContactBusinessReq;
   await createContactBusinessList(data);
-  onRefresh();
+  handleRefresh();
 }
 
+/** 商机关联表格 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useDetailListColumns(),
+    columns: useBusinessDetailListColumns(),
     height: 600,
     keepSource: true,
     proxyConfig: {
@@ -144,6 +149,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -159,7 +165,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <div>
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <DetailListModal
       :customer-id="customerId"
       @success="handleCreateContactBusinessList"
diff --git a/apps/web-antd/src/views/crm/business/components/index.ts b/apps/web-antd/src/views/crm/business/components/index.ts
new file mode 100644
index 00000000..a63de470
--- /dev/null
+++ b/apps/web-antd/src/views/crm/business/components/index.ts
@@ -0,0 +1 @@
+export { default as BusinessDetailsList } from './detail-list.vue';
diff --git a/apps/web-antd/src/views/crm/business/data.ts b/apps/web-antd/src/views/crm/business/data.ts
index 24576588..426471f8 100644
--- a/apps/web-antd/src/views/crm/business/data.ts
+++ b/apps/web-antd/src/views/crm/business/data.ts
@@ -26,17 +26,27 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '商机名称',
       component: 'Input',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入商机名称',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'ownerUserId',
       label: '负责人',
       component: 'ApiSelect',
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values) => values.id,
+      },
       componentProps: {
         api: () => getSimpleUserList(),
         fieldNames: {
           label: 'nickname',
           value: 'id',
         },
+        placeholder: '请选择负责人',
+        allowClear: true,
       },
       defaultValue: userStore.userInfo?.id,
       rules: 'required',
@@ -51,6 +61,8 @@ export function useFormSchema(): VbenFormSchema[] {
           label: 'name',
           value: 'id',
         },
+        placeholder: '请选择客户',
+        allowClear: true,
       },
       dependencies: {
         triggerFields: ['id'],
@@ -77,6 +89,8 @@ export function useFormSchema(): VbenFormSchema[] {
           label: 'name',
           value: 'id',
         },
+        placeholder: '请选择商机状态组',
+        allowClear: true,
       },
       dependencies: {
         triggerFields: ['id'],
@@ -88,11 +102,11 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'dealTime',
       label: '预计成交日期',
       component: 'DatePicker',
-      rules: 'required',
       componentProps: {
         showTime: false,
         format: 'YYYY-MM-DD HH:mm:ss',
         valueFormat: 'x',
+        placeholder: '请选择预计成交日期',
       },
     },
     {
@@ -100,6 +114,10 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '产品清单',
       component: 'Input',
       formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入产品清单',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'totalProductPrice',
@@ -108,6 +126,8 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         min: 0,
         precision: 2,
+        disabled: true,
+        placeholder: '请输入产品总金额',
       },
       rules: z.number().min(0).optional().default(0),
     },
@@ -118,6 +138,7 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         min: 0,
         precision: 2,
+        placeholder: '请输入整单折扣',
       },
       rules: z.number().min(0).max(100).optional().default(0),
     },
@@ -129,6 +150,7 @@ export function useFormSchema(): VbenFormSchema[] {
         min: 0,
         precision: 2,
         disabled: true,
+        placeholder: '请输入折扣后金额',
       },
       dependencies: {
         triggerFields: ['totalProductPrice', 'discountPercent'],
@@ -170,83 +192,83 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'name',
       title: '商机名称',
       fixed: 'left',
-      minWidth: 240,
+      width: 160,
       slots: { default: 'name' },
     },
     {
       field: 'customerName',
       title: '客户名称',
       fixed: 'left',
-      minWidth: 240,
+      width: 120,
       slots: { default: 'customerName' },
     },
     {
       field: 'totalPrice',
       title: '商机金额（元）',
-      minWidth: 140,
+      width: 140,
       formatter: 'formatAmount2',
     },
     {
       field: 'dealTime',
       title: '预计成交日期',
       formatter: 'formatDate',
-      minWidth: 180,
+      width: 180,
     },
     {
       field: 'remark',
       title: '备注',
-      minWidth: 200,
+      width: 200,
     },
     {
       field: 'contactNextTime',
       title: '下次联系时间',
-      formatter: 'formatDate',
-      minWidth: 180,
+      formatter: 'formatDateTime',
+      width: 180,
     },
     {
       field: 'ownerUserName',
       title: '负责人',
-      minWidth: 120,
+      width: 100,
     },
     {
       field: 'ownerUserDeptName',
       title: '所属部门',
-      minWidth: 120,
+      width: 100,
     },
     {
       field: 'contactLastTime',
       title: '最后跟进时间',
       formatter: 'formatDateTime',
-      minWidth: 180,
-    },
-    {
-      field: 'createTime',
-      title: '创建时间',
-      formatter: 'formatDateTime',
-      minWidth: 180,
-    },
-    {
-      field: 'creatorName',
-      title: '创建人',
-      minWidth: 120,
+      width: 180,
     },
     {
       field: 'updateTime',
       title: '更新时间',
       formatter: 'formatDateTime',
-      minWidth: 180,
+      width: 180,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+      width: 180,
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      width: 100,
     },
     {
       field: 'statusTypeName',
       title: '商机状态组',
       fixed: 'right',
-      minWidth: 120,
+      width: 140,
     },
     {
       field: 'statusName',
       title: '商机阶段',
       fixed: 'right',
-      minWidth: 120,
+      width: 120,
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/crm/business/modules/detail-data.ts b/apps/web-antd/src/views/crm/business/detail/data.ts
similarity index 50%
rename from apps/web-antd/src/views/crm/business/modules/detail-data.ts
rename to apps/web-antd/src/views/crm/business/detail/data.ts
index 5ff123f3..3b1a76f5 100644
--- a/apps/web-antd/src/views/crm/business/modules/detail-data.ts
+++ b/apps/web-antd/src/views/crm/business/detail/data.ts
@@ -1,8 +1,12 @@
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VbenFormSchema } from '#/adapter/form';
+import type { Ref } from 'vue';
+import type { CrmBusinessApi } from '#/api/crm/business';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { erpPriceInputFormatter, formatDateTime } from '@vben/utils';
 
+import { DEFAULT_STATUSES, getBusinessStatusSimpleList } from '#/api/crm/business/status';
+
 /** 详情页的字段 */
 export function useDetailSchema(): DescriptionItemSchema[] {
   return [
@@ -72,53 +76,62 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
   ];
 }
 
-/** 详情列表的字段 */
-export function useDetailListColumns(): VxeTableGridOptions['columns'] {
+/** 商机状态更新表单 */
+export function useStatusFormSchema(
+  formData: Ref<CrmBusinessApi.Business | undefined>,
+): VbenFormSchema[] {
   return [
     {
-      type: 'checkbox',
-      width: 50,
-      fixed: 'left',
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
     },
     {
-      field: 'name',
-      title: '商机名称',
-      fixed: 'left',
-      slots: { default: 'name' },
+      fieldName: 'statusId',
+      label: '商机状态',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
     },
     {
-      field: 'customerName',
-      title: '客户名称',
-      fixed: 'left',
-      slots: { default: 'customerName' },
+      fieldName: 'endStatus',
+      label: '商机状态',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
     },
     {
-      field: 'totalPrice',
-      title: '商机金额（元）',
-      formatter: 'formatAmount2',
-    },
-    {
-      field: 'dealTime',
-      title: '预计成交日期',
-      formatter: 'formatDate',
-    },
-    {
-      field: 'ownerUserName',
-      title: '负责人',
-    },
-    {
-      field: 'ownerUserDeptName',
-      title: '所属部门',
-    },
-    {
-      field: 'statusTypeName',
-      title: '商机状态组',
-      fixed: 'right',
-    },
-    {
-      field: 'statusName',
-      title: '商机阶段',
-      fixed: 'right',
+      fieldName: 'status',
+      label: '商机阶段',
+      component: 'Select',
+      dependencies: {
+        triggerFields: [''],
+        async componentProps() {
+          const statusList = await getBusinessStatusSimpleList(
+            formData.value?.statusTypeId ?? 0,
+          );
+          const statusOptions = statusList.map((item) => ({
+            label: `${item.name}(赢单率：${item.percent}%)`,
+            value: item.id,
+          }));
+          const options = DEFAULT_STATUSES.map((item) => ({
+            label: `${item.name}(赢单率：${item.percent}%)`,
+            value: item.endStatus,
+          }));
+          statusOptions.push(...options);
+          return {
+            options: statusOptions,
+          };
+        },
+      },
+      rules: 'required',
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/business/modules/detail.vue b/apps/web-antd/src/views/crm/business/detail/index.vue
similarity index 72%
rename from apps/web-antd/src/views/crm/business/modules/detail.vue
rename to apps/web-antd/src/views/crm/business/detail/index.vue
index aebfd6e3..193b4a03 100644
--- a/apps/web-antd/src/views/crm/business/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/business/detail/index.vue
@@ -14,30 +14,27 @@ import { getBusiness } from '#/api/crm/business';
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
-import { AsyncOperateLog } from '#/components/operate-log';
-import {
-  BusinessDetailsInfo,
-  BusinessForm,
-  UpStatusForm,
-} from '#/views/crm/business';
-import { ContactDetailsList } from '#/views/crm/contact';
-import { ContractDetailsList } from '#/views/crm/contract';
+import { OperateLog } from '#/components/operate-log';
+import { $t } from '#/locales';
+import { ContactDetailsList } from '#/views/crm/contact/components';
+import { ContractDetailsList } from '#/views/crm/contract/components';
 import { FollowUp } from '#/views/crm/followup';
 import { PermissionList, TransferForm } from '#/views/crm/permission';
-import { ProductDetailsList } from '#/views/crm/product';
+import { ProductDetailsList } from '#/views/crm/product/components';
 
-import { useDetailSchema } from './detail-data';
-
-const loading = ref(false);
+import Form from '../modules/form.vue';
+import UpStatusForm from './modules/status-form.vue';
+import { useDetailSchema } from './data';
+import BusinessDetailsInfo from './modules/info.vue';
 
 const route = useRoute();
 const router = useRouter();
 const tabs = useTabs();
 
-const businessId = ref(0);
-
-const business = ref<CrmBusinessApi.Business>({} as CrmBusinessApi.Business);
-const businessLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const loading = ref(false); // 加载中
+const businessId = ref(0); // 商机编号
+const business = ref<CrmBusinessApi.Business>({} as CrmBusinessApi.Business); // 商机详情
+const logList = ref<SystemOperateLogApi.OperateLog[]>([]);
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
 const [Descriptions] = useDescription({
@@ -50,7 +47,7 @@ const [Descriptions] = useDescription({
 });
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: BusinessForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
@@ -65,16 +62,19 @@ const [UpStatusModal, upStatusModalApi] = useVbenModal({
 });
 
 /** 加载详情 */
-async function loadBusinessDetail() {
+async function getBusinessDetail() {
   loading.value = true;
-  const data = await getBusiness(businessId.value);
-  const logList = await getOperateLogPage({
-    bizType: BizTypeEnum.CRM_BUSINESS,
-    bizId: businessId.value,
-  });
-  businessLogList.value = logList.list;
-  business.value = data;
-  loading.value = false;
+  try {
+    business.value = await getBusiness(businessId.value);
+    // 操作日志
+    const res = await getOperateLogPage({
+      bizType: BizTypeEnum.CRM_BUSINESS,
+      bizId: businessId.value,
+    });
+    logList.value = res.list;
+  } finally {
+    loading.value = false;
+  }
 }
 
 /** 返回列表页 */
@@ -83,12 +83,12 @@ function handleBack() {
   router.push('/crm/business');
 }
 
-/** 编辑 */
+/** 编辑商机 */
 function handleEdit() {
   formModalApi.setData({ id: businessId.value }).open();
 }
 
-/** 转移线索 */
+/** 转移商机 */
 function handleTransfer() {
   transferModalApi.setData({ bizType: BizTypeEnum.CRM_BUSINESS }).open();
 }
@@ -98,18 +98,18 @@ async function handleUpdateStatus() {
   upStatusModalApi.setData(business.value).open();
 }
 
-// 加载数据
+/** 加载数据 */
 onMounted(() => {
   businessId.value = Number(route.params.id);
-  loadBusinessDetail();
+  getBusinessDetail();
 });
 </script>
 
 <template>
   <Page auto-content-height :title="business?.name" :loading="loading">
-    <FormModal @success="loadBusinessDetail" />
-    <TransferModal @success="loadBusinessDetail" />
-    <UpStatusModal @success="loadBusinessDetail" />
+    <FormModal @success="getBusinessDetail" />
+    <TransferModal @success="getBusinessDetail" />
+    <UpStatusModal @success="getBusinessDetail" />
     <template #extra>
       <div class="flex items-center gap-2">
         <Button
@@ -138,12 +138,12 @@ onMounted(() => {
     </Card>
     <Card class="mt-4 min-h-[60%]">
       <Tabs>
-        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
-          <BusinessDetailsInfo :business="business" />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="跟进记录" key="2" :force-render="true">
+        <Tabs.TabPane tab="跟进记录" key="1" :force-render="true">
           <FollowUp :biz-id="businessId" :biz-type="BizTypeEnum.CRM_BUSINESS" />
         </Tabs.TabPane>
+        <Tabs.TabPane tab="详细资料" key="2" :force-render="true">
+          <BusinessDetailsInfo :business="business" />
+        </Tabs.TabPane>
         <Tabs.TabPane tab="联系人" key="3" :force-render="true">
           <ContactDetailsList
             :biz-id="businessId"
@@ -165,7 +165,10 @@ onMounted(() => {
             :biz-type="BizTypeEnum.CRM_BUSINESS"
           />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="团队成员" key="6" :force-render="true">
+        <Tabs.TabPane tab="操作日志" key="6" :force-render="true">
+          <OperateLog :log-list="logList" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="团队成员" key="7" :force-render="true">
           <PermissionList
             ref="permissionListRef"
             :biz-id="businessId"
@@ -174,9 +177,6 @@ onMounted(() => {
             @quit-team="handleBack"
           />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="操作日志" key="7" :force-render="true">
-          <AsyncOperateLog :log-list="businessLogList" />
-        </Tabs.TabPane>
       </Tabs>
     </Card>
   </Page>
diff --git a/apps/web-antd/src/views/crm/business/modules/detail-info.vue b/apps/web-antd/src/views/crm/business/detail/modules/info.vue
similarity index 94%
rename from apps/web-antd/src/views/crm/business/modules/detail-info.vue
rename to apps/web-antd/src/views/crm/business/detail/modules/info.vue
index 1ce3c353..d83a78a8 100644
--- a/apps/web-antd/src/views/crm/business/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/business/detail/modules/info.vue
@@ -6,7 +6,7 @@ import { Divider } from 'ant-design-vue';
 import { useDescription } from '#/components/description';
 import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
 
-import { useDetailBaseSchema } from './detail-data';
+import { useDetailBaseSchema } from '../data';
 
 defineProps<{
   business: CrmBusinessApi.Business; // 商机信息
diff --git a/apps/web-antd/src/views/crm/business/modules/up-status-form.vue b/apps/web-antd/src/views/crm/business/detail/modules/status-form.vue
similarity index 57%
rename from apps/web-antd/src/views/crm/business/modules/up-status-form.vue
rename to apps/web-antd/src/views/crm/business/detail/modules/status-form.vue
index 4f8635fe..fefb07e0 100644
--- a/apps/web-antd/src/views/crm/business/modules/up-status-form.vue
+++ b/apps/web-antd/src/views/crm/business/detail/modules/status-form.vue
@@ -9,12 +9,10 @@ import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 import { updateBusinessStatus } from '#/api/crm/business';
-import {
-  DEFAULT_STATUSES,
-  getBusinessStatusSimpleList,
-} from '#/api/crm/business/status';
 import { $t } from '#/locales';
 
+import { useStatusFormSchema } from '../data';
+
 const emit = defineEmits(['success']);
 
 const formData = ref<CrmBusinessApi.Business>();
@@ -28,60 +26,7 @@ const [Form, formApi] = useVbenForm({
     labelWidth: 120,
   },
   layout: 'horizontal',
-  schema: [
-    {
-      fieldName: 'id',
-      component: 'Input',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    {
-      fieldName: 'statusId',
-      label: '商机状态',
-      component: 'Input',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    {
-      fieldName: 'endStatus',
-      label: '商机状态',
-      component: 'Input',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    {
-      fieldName: 'status',
-      label: '商机阶段',
-      component: 'Select',
-      dependencies: {
-        triggerFields: [''],
-        async componentProps() {
-          const statusList = await getBusinessStatusSimpleList(
-            formData.value?.statusTypeId ?? 0,
-          );
-          const statusOptions = statusList.map((item) => ({
-            label: `${item.name}(赢单率：${item.percent}%)`,
-            value: item.id,
-          }));
-          const options = DEFAULT_STATUSES.map((item) => ({
-            label: `${`${item.name}(赢单率：${item.percent}`}%)`,
-            value: item.endStatus,
-          }));
-          statusOptions.push(...options);
-          return {
-            options: statusOptions,
-          };
-        },
-      },
-      rules: 'required',
-    },
-  ],
+  schema: useStatusFormSchema(formData),
   showDefaultActions: false,
 });
 
diff --git a/apps/web-antd/src/views/crm/business/index.ts b/apps/web-antd/src/views/crm/business/index.ts
deleted file mode 100644
index 6ff97edf..00000000
--- a/apps/web-antd/src/views/crm/business/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { defineAsyncComponent } from 'vue';
-
-export const BusinessForm = defineAsyncComponent(
-  () => import('./modules/form.vue'),
-);
-
-export const BusinessDetailsInfo = defineAsyncComponent(
-  () => import('./modules/detail-info.vue'),
-);
-
-export const BusinessDetailsList = defineAsyncComponent(
-  () => import('./modules/detail-list.vue'),
-);
-
-export const BusinessDetails = defineAsyncComponent(
-  () => import('./modules/detail.vue'),
-);
-
-export const BusinessDetailsListModal = defineAsyncComponent(
-  () => import('./modules/detail-list-modal.vue'),
-);
-
-export const UpStatusForm = defineAsyncComponent(
-  () => import('./modules/up-status-form.vue'),
-);
diff --git a/apps/web-antd/src/views/crm/business/index.vue b/apps/web-antd/src/views/crm/business/index.vue
index 85210cba..28fea60f 100644
--- a/apps/web-antd/src/views/crm/business/index.vue
+++ b/apps/web-antd/src/views/crm/business/index.vue
@@ -2,12 +2,13 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmBusinessApi } from '#/api/crm/business';
 
+import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart } from '@vben/utils';
 
-import { Button, message } from 'ant-design-vue';
+import { Button, message, Tabs } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -21,6 +22,7 @@ import { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
 
 const { push } = useRouter();
+const sceneType = ref('1');
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
@@ -28,13 +30,23 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 处理场景类型的切换 */
+function handleChangeSceneType(key: number | string) {
+  sceneType.value = key.toString();
   gridApi.query();
 }
 
 /** 导出表格 */
 async function handleExport() {
-  const data = await exportBusiness(await gridApi.formApi.getValues());
+  const formValues = await gridApi.formApi.getValues();
+  const data = await exportBusiness({
+    sceneType: sceneType.value,
+    ...formValues,
+  });
   downloadFileFromBlobPart({ fileName: '商机.xls', source: data });
 }
 
@@ -53,13 +65,12 @@ async function handleDelete(row: CrmBusinessApi.Business) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
-    await deleteBusiness(row.id as number);
+    await deleteBusiness(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } catch {
+    handleRefresh();
+  } finally {
     hideLoading();
   }
 }
@@ -88,6 +99,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           return await getBusinessPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
+            sceneType: sceneType.value,
             ...formValues,
           });
         },
@@ -95,6 +107,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -117,8 +130,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
       />
     </template>
 
-    <FormModal @success="onRefresh" />
-    <Grid table-title="商机列表">
+    <FormModal @success="handleRefresh" />
+    <Grid>
+      <template #top>
+        <Tabs class="-mt-11" @change="handleChangeSceneType">
+          <Tabs.TabPane tab="我负责的" key="1" />
+          <Tabs.TabPane tab="我参与的" key="2" />
+          <Tabs.TabPane tab="下属负责的" key="3" />
+        </Tabs>
+      </template>
       <template #toolbar-tools>
         <TableAction
           :actions="[
@@ -176,3 +196,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </Grid>
   </Page>
 </template>
+<style scoped>
+:deep(.vxe-toolbar div) {
+  z-index: 1;
+}
+</style>
diff --git a/apps/web-antd/src/views/crm/business/modules/form.vue b/apps/web-antd/src/views/crm/business/modules/form.vue
index 5fb58d3c..97d7493e 100644
--- a/apps/web-antd/src/views/crm/business/modules/form.vue
+++ b/apps/web-antd/src/views/crm/business/modules/form.vue
@@ -16,7 +16,7 @@ import {
 } from '#/api/crm/business';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { $t } from '#/locales';
-import { ProductEditTable } from '#/views/crm/product';
+import { ProductEditTable } from '#/views/crm/product/components';
 
 import { useFormSchema } from '../data';
 
@@ -56,7 +56,6 @@ const [Form, formApi] = useVbenForm({
     },
     labelWidth: 120,
   },
-  // 一共3列
   wrapperClass: 'grid-cols-3',
   layout: 'vertical',
   schema: useFormSchema(),
@@ -90,7 +89,7 @@ const [Modal, modalApi] = useVbenModal({
     }
     // 加载数据
     const data = modalApi.getData<CrmBusinessApi.Business>();
-    if (!data) {
+    if (!data || !data.id) {
       return;
     }
     modalApi.lock();
diff --git a/apps/web-antd/src/views/crm/business/status/data.ts b/apps/web-antd/src/views/crm/business/status/data.ts
index 419dc511..86f20d81 100644
--- a/apps/web-antd/src/views/crm/business/status/data.ts
+++ b/apps/web-antd/src/views/crm/business/status/data.ts
@@ -21,6 +21,9 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '状态组名',
       component: 'Input',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入状态组名',
+      },
     },
     {
       fieldName: 'deptIds',
@@ -77,3 +80,33 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
   ];
 }
+
+/** 商机状态阶段列表列配置 */
+export function useFormColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'defaultStatus',
+      title: '阶段',
+      minWidth: 100,
+      slots: { default: 'defaultStatus' },
+    },
+    {
+      field: 'name',
+      title: '阶段名称',
+      minWidth: 100,
+      slots: { default: 'name' },
+    },
+    {
+      field: 'percent',
+      title: '赢单率（%）',
+      minWidth: 100,
+      slots: { default: 'percent' },
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/business/status/index.vue b/apps/web-antd/src/views/crm/business/status/index.vue
index bab2b4ac..8e5cbdae 100644
--- a/apps/web-antd/src/views/crm/business/status/index.vue
+++ b/apps/web-antd/src/views/crm/business/status/index.vue
@@ -22,7 +22,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
@@ -31,27 +31,26 @@ function handleCreate() {
   formModalApi.setData(null).open();
 }
 
+/** 编辑商机状态 */
+function handleEdit(row: CrmBusinessStatusApi.BusinessStatus) {
+  formModalApi.setData(row).open();
+}
+
 /** 删除商机状态 */
 async function handleDelete(row: CrmBusinessStatusApi.BusinessStatus) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
-    await deleteBusinessStatus(row.id as number);
+    await deleteBusinessStatus(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
+    handleRefresh();
   } catch {
     hideLoading();
   }
 }
 
-/** 编辑商机状态 */
-function handleEdit(row: CrmBusinessStatusApi.BusinessStatus) {
-  formModalApi.setData(row).open();
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useGridColumns(),
@@ -70,6 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -92,7 +92,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       />
     </template>
 
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid table-title="商机状态列表">
       <template #toolbar-tools>
         <TableAction
diff --git a/apps/web-antd/src/views/crm/business/status/modules/form.vue b/apps/web-antd/src/views/crm/business/status/modules/form.vue
index 933af133..601cb6bf 100644
--- a/apps/web-antd/src/views/crm/business/status/modules/form.vue
+++ b/apps/web-antd/src/views/crm/business/status/modules/form.vue
@@ -17,7 +17,7 @@ import {
 } from '#/api/crm/business/status';
 import { $t } from '#/locales';
 
-import { useFormSchema } from '../data';
+import { useFormColumns, useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 const formData = ref<CrmBusinessStatusApi.BusinessStatus>();
@@ -72,7 +72,6 @@ const [Modal, modalApi] = useVbenModal({
     }
     // 加载数据
     const data = modalApi.getData<CrmBusinessStatusApi.BusinessStatus>();
-
     modalApi.lock();
     try {
       if (!data || !data.id) {
@@ -82,20 +81,19 @@ const [Modal, modalApi] = useVbenModal({
           deptIds: [],
           statuses: [],
         };
-        addStatus();
+        await handleAddStatus();
       } else {
         formData.value = await getBusinessStatus(data.id);
         if (
           !formData.value?.statuses?.length ||
           formData.value?.statuses?.length === 0
         ) {
-          addStatus();
+          await handleAddStatus();
         }
       }
       // 设置到 values
-
       await formApi.setValues(formData.value as any);
-      gridApi.grid.reloadData(
+      await gridApi.grid.reloadData(
         (formData.value!.statuses =
           formData.value?.statuses?.concat(DEFAULT_STATUSES)) as any,
       );
@@ -106,20 +104,20 @@ const [Modal, modalApi] = useVbenModal({
 });
 
 /** 添加状态 */
-async function addStatus() {
+async function handleAddStatus() {
   formData.value!.statuses!.unshift({
     name: '',
     percent: undefined,
   } as any);
   await nextTick();
-  gridApi.grid.reloadData(formData.value!.statuses as any);
+  await gridApi.grid.reloadData(formData.value!.statuses as any);
 }
 
 /** 删除状态 */
 async function deleteStatusArea(row: any, rowIndex: number) {
-  gridApi.grid.remove(row);
+  await gridApi.grid.remove(row);
   formData.value!.statuses!.splice(rowIndex, 1);
-  gridApi.grid.reloadData(formData.value!.statuses as any);
+  await gridApi.grid.reloadData(formData.value!.statuses as any);
 }
 
 /** 表格配置 */
@@ -129,32 +127,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       trigger: 'click',
       mode: 'cell',
     },
-    columns: [
-      {
-        field: 'defaultStatus',
-        title: '阶段',
-        minWidth: 100,
-        slots: { default: 'defaultStatus' },
-      },
-      {
-        field: 'name',
-        title: '阶段名称',
-        minWidth: 100,
-        slots: { default: 'name' },
-      },
-      {
-        field: 'percent',
-        title: '赢单率（%）',
-        minWidth: 100,
-        slots: { default: 'percent' },
-      },
-      {
-        title: '操作',
-        width: 130,
-        fixed: 'right',
-        slots: { default: 'actions' },
-      },
-    ],
+    columns: useFormColumns(),
     data: formData.value?.statuses?.concat(DEFAULT_STATUSES),
     border: true,
     showOverflow: true,
@@ -162,6 +135,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     keepSource: true,
     rowConfig: {
       keyField: 'row_id',
+      isHover: true,
     },
     pagerConfig: {
       enabled: false,
@@ -184,7 +158,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
             </span>
           </template>
           <template #name="{ row }">
-            <Input v-if="!row.endStatus" v-model:value="row.name" />
+            <Input
+              v-if="!row.endStatus"
+              v-model:value="row.name"
+              placeholder="请输入状态名"
+            />
             <span v-else>{{ row.name }}</span>
           </template>
           <template #percent="{ row }">
@@ -194,6 +172,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               :min="0"
               :max="100"
               :precision="2"
+              placeholder="请输入赢单率"
             />
             <span v-else>{{ row.percent }}</span>
           </template>
@@ -204,7 +183,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                   label: $t('ui.actionTitle.create'),
                   type: 'link',
                   ifShow: () => !row.endStatus,
-                  onClick: addStatus,
+                  onClick: handleAddStatus,
                 },
                 {
                   label: $t('common.delete'),
diff --git a/apps/web-antd/src/views/crm/clue/data.ts b/apps/web-antd/src/views/crm/clue/data.ts
index eb4070e7..3181b1da 100644
--- a/apps/web-antd/src/views/crm/clue/data.ts
+++ b/apps/web-antd/src/views/crm/clue/data.ts
@@ -26,6 +26,9 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '线索名称',
       component: 'Input',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入线索名称',
+      },
     },
     {
       fieldName: 'source',
@@ -33,6 +36,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE, 'number'),
+        placeholder: '请选择客户来源',
       },
       rules: 'required',
     },
@@ -40,6 +44,9 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'mobile',
       label: '手机',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号',
+      },
     },
     {
       fieldName: 'ownerUserId',
@@ -50,29 +57,46 @@ export function useFormSchema(): VbenFormSchema[] {
         labelField: 'nickname',
         valueField: 'id',
         allowClear: true,
+        placeholder: '请选择负责人',
       },
       defaultValue: userStore.userInfo?.id,
       rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values) => values.id,
+      },
     },
     {
       fieldName: 'telephone',
       label: '电话',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入电话',
+      },
     },
     {
       fieldName: 'email',
       label: '邮箱',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入邮箱',
+      },
     },
     {
       fieldName: 'wechat',
       label: '微信',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入微信',
+      },
     },
     {
       fieldName: 'qq',
       label: 'QQ',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入 QQ',
+      },
     },
     {
       fieldName: 'industryId',
@@ -80,6 +104,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, 'number'),
+        placeholder: '请选择客户行业',
       },
     },
     {
@@ -88,6 +113,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL, 'number'),
+        placeholder: '请选择客户级别',
       },
     },
     {
@@ -97,12 +123,16 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         api: () => getAreaTree(),
         fieldNames: { label: 'name', value: 'id', children: 'children' },
+        placeholder: '请选择地址',
       },
     },
     {
       fieldName: 'detailAddress',
       label: '详细地址',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入详细地址',
+      },
     },
     {
       fieldName: 'contactNextTime',
@@ -112,12 +142,16 @@ export function useFormSchema(): VbenFormSchema[] {
         showTime: true,
         format: 'YYYY-MM-DD HH:mm:ss',
         valueFormat: 'x',
+        placeholder: '请选择下次联系时间',
       },
     },
     {
       fieldName: 'remark',
       label: '备注',
       component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
     },
   ];
 }
@@ -129,6 +163,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '线索名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入线索名称',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'transformStatus',
@@ -139,17 +177,28 @@ export function useGridFormSchema(): VbenFormSchema[] {
           { label: '未转化', value: false },
           { label: '已转化', value: true },
         ],
+        placeholder: '请选择转化状态',
+        allowClear: true,
       },
+      defaultValue: false,
     },
     {
       fieldName: 'mobile',
       label: '手机号',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'telephone',
       label: '电话',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入电话',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'createTime',
@@ -158,6 +207,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         ...getRangePickerDefaultProps(),
         allowClear: true,
+        placeholder: ['开始日期', '结束日期'],
       },
     },
   ];
@@ -170,7 +220,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'name',
       title: '线索名称',
       fixed: 'left',
-      minWidth: 240,
+      minWidth: 160,
       slots: {
         default: 'name',
       },
@@ -178,7 +228,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'source',
       title: '线索来源',
-      minWidth: 120,
+      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_SOURCE },
@@ -192,22 +242,22 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'telephone',
       title: '电话',
-      minWidth: 120,
+      minWidth: 130,
     },
     {
       field: 'email',
       title: '邮箱',
-      minWidth: 120,
+      minWidth: 180,
     },
     {
       field: 'detailAddress',
       title: '地址',
-      minWidth: 120,
+      minWidth: 180,
     },
     {
       field: 'industryId',
       title: '客户行业',
-      minWidth: 120,
+      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
@@ -216,34 +266,44 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'level',
       title: '客户级别',
-      minWidth: 120,
+      minWidth: 135,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_LEVEL },
       },
     },
-    {
-      field: 'ownerUserName',
-      title: '负责人',
-      minWidth: 120,
-    },
-    {
-      field: 'ownerUserDeptName',
-      title: '所属部门',
-      minWidth: 120,
-    },
     {
       field: 'contactNextTime',
       title: '下次联系时间',
       formatter: 'formatDateTime',
       minWidth: 180,
     },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 200,
+    },
     {
       field: 'contactLastTime',
       title: '最后跟进时间',
       formatter: 'formatDateTime',
       minWidth: 180,
     },
+    {
+      field: 'contactLastContent',
+      title: '最后跟进记录',
+      minWidth: 200,
+    },
+    {
+      field: 'ownerUserName',
+      title: '负责人',
+      minWidth: 100,
+    },
+    {
+      field: 'ownerUserDeptName',
+      title: '所属部门',
+      minWidth: 100,
+    },
     {
       field: 'updateTime',
       title: '更新时间',
@@ -254,12 +314,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'createTime',
       title: '创建时间',
       formatter: 'formatDateTime',
-      minWidth: 120,
-    },
-    {
-      field: 'creatorName',
-      title: '创建人',
-      minWidth: 120,
+      minWidth: 180,
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/crm/clue/modules/detail-data.ts b/apps/web-antd/src/views/crm/clue/detail/data.ts
similarity index 90%
rename from apps/web-antd/src/views/crm/clue/modules/detail-data.ts
rename to apps/web-antd/src/views/crm/clue/detail/data.ts
index 5e09bd01..73e905a2 100644
--- a/apps/web-antd/src/views/crm/clue/modules/detail-data.ts
+++ b/apps/web-antd/src/views/crm/clue/detail/data.ts
@@ -66,7 +66,11 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'areaName',
       label: '地址',
-      content: (data) => data?.areaName + data?.detailAddress,
+      content: (data) => {
+        const areaName = data.areaName ?? '';
+        const detailAddress = data?.detailAddress ?? '';
+        return [areaName, detailAddress].filter((item) => !!item).join(' ');
+      },
     },
     {
       field: 'qq',
diff --git a/apps/web-antd/src/views/crm/clue/modules/detail.vue b/apps/web-antd/src/views/crm/clue/detail/index.vue
similarity index 57%
rename from apps/web-antd/src/views/crm/clue/modules/detail.vue
rename to apps/web-antd/src/views/crm/clue/detail/index.vue
index 08e43079..1de9d8b5 100644
--- a/apps/web-antd/src/views/crm/clue/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/clue/detail/index.vue
@@ -2,46 +2,37 @@
 import type { CrmClueApi } from '#/api/crm/clue';
 import type { SystemOperateLogApi } from '#/api/system/operate-log';
 
-import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
-import { ArrowLeft } from '@vben/icons';
 
-import { Button, Card, message, Tabs } from 'ant-design-vue';
+import { Card, message, Tabs } from 'ant-design-vue';
 
 import { getClue, transformClue } from '#/api/crm/clue';
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
-import { AsyncOperateLog } from '#/components/operate-log';
+import { OperateLog } from '#/components/operate-log';
+import { ACTION_ICON, TableAction } from '#/components/table-action';
 import { FollowUp } from '#/views/crm/followup';
 import { PermissionList, TransferForm } from '#/views/crm/permission';
 
-import { useDetailSchema } from './detail-data';
-import ClueForm from './form.vue';
-
-const ClueDetailsInfo = defineAsyncComponent(() => import('./detail-info.vue'));
-
-const loading = ref(false);
+import Form from '../modules/form.vue';
+import { useDetailSchema } from './data';
+import Info from './modules/info.vue';
 
 const route = useRoute();
 const router = useRouter();
 const tabs = useTabs();
 
-const clueId = ref(0);
-
-const clue = ref<CrmClueApi.Clue>({} as CrmClueApi.Clue);
-const clueLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const loading = ref(false); // 加载中
+const clueId = ref(0); // 线索编号
+const clue = ref<CrmClueApi.Clue>({} as CrmClueApi.Clue); // 线索详情
+const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
-// 校验负责人权限和编辑权限
-const validateOwnerUser = computed(
-  () => permissionListRef.value?.validateOwnerUser,
-);
-const validateWrite = computed(() => permissionListRef.value?.validateWrite);
-
 const [Descriptions] = useDescription({
   componentProps: {
     bordered: false,
@@ -52,7 +43,7 @@ const [Descriptions] = useDescription({
 });
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: ClueForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
@@ -62,17 +53,19 @@ const [TransferModal, transferModalApi] = useVbenModal({
 });
 
 /** 加载线索详情 */
-async function loadClueDetail() {
+async function getClueDetail() {
   loading.value = true;
-  const data = await getClue(clueId.value);
-  clue.value = data;
-  // 操作日志
-  const logList = await getOperateLogPage({
-    bizType: BizTypeEnum.CRM_CLUE,
-    bizId: clueId.value,
-  });
-  clueLogList.value = logList.list;
-  loading.value = false;
+  try {
+    clue.value = await getClue(clueId.value);
+    // 操作日志
+    const res = await getOperateLogPage({
+      bizType: BizTypeEnum.CRM_CLUE,
+      bizId: clueId.value,
+    });
+    logList.value = res.list;
+  } finally {
+    loading.value = false;
+  }
 }
 
 /** 返回列表页 */
@@ -100,7 +93,6 @@ async function handleTransform(): Promise<boolean | undefined> {
       .then(async () => {
         const res = await transformClue(clueId.value);
         if (res) {
-          // 提示并返回成功
           message.success('转化客户成功');
           resolve(true);
         } else {
@@ -113,54 +105,61 @@ async function handleTransform(): Promise<boolean | undefined> {
   });
 }
 
-// 加载数据
+/** 加载数据 */
 onMounted(() => {
   clueId.value = Number(route.params.id);
-  loadClueDetail();
+  getClueDetail();
 });
 </script>
 
 <template>
   <Page auto-content-height :title="clue?.name" :loading="loading">
-    <FormModal @success="loadClueDetail" />
-    <TransferModal @success="loadClueDetail" />
+    <FormModal @success="getClueDetail" />
+    <TransferModal @success="getClueDetail" />
     <template #extra>
-      <div class="flex items-center gap-2">
-        <Button @click="handleBack">
-          <ArrowLeft class="size-5" />
-          返回
-        </Button>
-        <Button
-          v-if="validateWrite"
-          type="primary"
-          @click="handleEdit"
-          v-access:code="['crm:clue:update']"
-        >
-          {{ $t('ui.actionTitle.edit') }}
-        </Button>
-        <Button v-if="validateOwnerUser" type="primary" @click="handleTransfer">
-          转移
-        </Button>
-        <Button
-          v-if="validateOwnerUser && !clue?.transformStatus"
-          type="primary"
-          @click="handleTransform"
-        >
-          转化为客户
-        </Button>
-      </div>
+      <TableAction
+        :actions="[
+          {
+            label: '返回',
+            type: 'default',
+            icon: 'lucide:arrow-left',
+            onClick: handleBack,
+          },
+          {
+            label: $t('ui.actionTitle.edit'),
+            type: 'primary',
+            icon: ACTION_ICON.EDIT,
+            auth: ['crm:clue:update'],
+            ifShow: permissionListRef?.validateWrite,
+            onClick: handleEdit,
+          },
+          {
+            label: '转移',
+            type: 'primary',
+            ifShow: permissionListRef?.validateOwnerUser,
+            onClick: handleTransfer,
+          },
+          {
+            label: '转化为客户',
+            type: 'primary',
+            ifShow:
+              permissionListRef?.validateOwnerUser && !clue?.transformStatus,
+            onClick: handleTransform,
+          },
+        ]"
+      />
     </template>
     <Card class="min-h-[10%]">
       <Descriptions :data="clue" />
     </Card>
     <Card class="mt-4 min-h-[60%]">
-      <Tabs>
-        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
-          <ClueDetailsInfo :clue="clue" />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="线索跟进" key="2" :force-render="true">
+      <Tabs :tab-bar-gutter="16">
+        <Tabs.TabPane tab="跟进记录" key="1" :force-render="true">
           <FollowUp :biz-id="clueId" :biz-type="BizTypeEnum.CRM_CLUE" />
         </Tabs.TabPane>
+        <Tabs.TabPane tab="基本信息" key="2" :force-render="true">
+          <Info :clue="clue" />
+        </Tabs.TabPane>
         <Tabs.TabPane tab="团队成员" key="3" :force-render="true">
           <PermissionList
             ref="permissionListRef"
@@ -171,7 +170,7 @@ onMounted(() => {
           />
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="4" :force-render="true">
-          <AsyncOperateLog :log-list="clueLogList" />
+          <OperateLog :log-list="logList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>
diff --git a/apps/web-antd/src/views/crm/clue/modules/detail-info.vue b/apps/web-antd/src/views/crm/clue/detail/modules/info.vue
similarity index 89%
rename from apps/web-antd/src/views/crm/clue/modules/detail-info.vue
rename to apps/web-antd/src/views/crm/clue/detail/modules/info.vue
index 000a58d1..a4fe4701 100644
--- a/apps/web-antd/src/views/crm/clue/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/clue/detail/modules/info.vue
@@ -6,10 +6,10 @@ import { Divider } from 'ant-design-vue';
 import { useDescription } from '#/components/description';
 import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
 
-import { useDetailBaseSchema } from './detail-data';
+import { useDetailBaseSchema } from '../data';
 
 defineProps<{
-  clue: CrmClueApi.Clue; // 线索信息
+  clue: CrmClueApi.Clue;
 }>();
 
 const [BaseDescriptions] = useDescription({
diff --git a/apps/web-antd/src/views/crm/clue/index.vue b/apps/web-antd/src/views/crm/clue/index.vue
index 88482fcc..78abc9b2 100644
--- a/apps/web-antd/src/views/crm/clue/index.vue
+++ b/apps/web-antd/src/views/crm/clue/index.vue
@@ -2,12 +2,13 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmClueApi } from '#/api/crm/clue';
 
+import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart } from '@vben/utils';
 
-import { Button, message } from 'ant-design-vue';
+import { Button, message, Tabs } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteClue, exportClue, getCluePage } from '#/api/crm/clue';
@@ -17,6 +18,7 @@ import { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
 
 const { push } = useRouter();
+const sceneType = ref('1');
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
@@ -24,10 +26,19 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportClue({
+    sceneType: sceneType.value,
+    ...(await gridApi.formApi.getValues()),
+  });
+  downloadFileFromBlobPart({ fileName: '线索.xls', source: data });
+}
+
 /** 创建线索 */
 function handleCreate() {
   formModalApi.setData(null).open();
@@ -42,31 +53,28 @@ function handleEdit(row: CrmClueApi.Clue) {
 async function handleDelete(row: CrmClueApi.Clue) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
-    await deleteClue(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
-    });
-    onRefresh();
+    await deleteClue(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
   } catch {
     hideLoading();
   }
 }
 
-/** 导出表格 */
-async function handleExport() {
-  const data = await exportClue(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '线索.xls', source: data });
-}
-
 /** 查看线索详情 */
 function handleDetail(row: CrmClueApi.Clue) {
   push({ name: 'CrmClueDetail', params: { id: row.id } });
 }
 
+/** 处理场景类型的切换 */
+function handleChangeSceneType(key: number | string) {
+  sceneType.value = key.toString();
+  gridApi.query();
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -81,6 +89,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           return await getCluePage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
+            sceneType: sceneType.value,
             ...formValues,
           });
         },
@@ -88,6 +97,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -110,8 +120,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
       />
     </template>
 
-    <FormModal @success="onRefresh" />
-    <Grid table-title="线索列表">
+    <FormModal @success="handleRefresh" />
+    <Grid>
+      <template #top>
+        <Tabs class="-mt-11" @change="handleChangeSceneType">
+          <Tabs.TabPane tab="我负责的" key="1" />
+          <Tabs.TabPane tab="我参与的" key="2" />
+          <Tabs.TabPane tab="下属负责的" key="3" />
+        </Tabs>
+      </template>
       <template #toolbar-tools>
         <TableAction
           :actions="[
@@ -164,3 +181,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </Grid>
   </Page>
 </template>
+<style scoped>
+:deep(.vxe-toolbar div) {
+  z-index: 1;
+}
+</style>
diff --git a/apps/web-antd/src/views/crm/clue/modules/form.vue b/apps/web-antd/src/views/crm/clue/modules/form.vue
index c6c43588..f1a9de6b 100644
--- a/apps/web-antd/src/views/crm/clue/modules/form.vue
+++ b/apps/web-antd/src/views/crm/clue/modules/form.vue
@@ -28,7 +28,6 @@ const [Form, formApi] = useVbenForm({
     },
     labelWidth: 100,
   },
-  // 一共3列
   wrapperClass: 'grid-cols-2',
   layout: 'horizontal',
   schema: useFormSchema(),
diff --git a/apps/web-antd/src/views/crm/contact/components/data.ts b/apps/web-antd/src/views/crm/contact/components/data.ts
new file mode 100644
index 00000000..b2e63f76
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contact/components/data.ts
@@ -0,0 +1,62 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+
+/** 联系人明细列表列配置 */
+export function useDetailListColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      width: 50,
+      fixed: 'left',
+    },
+    {
+      field: 'name',
+      title: '姓名',
+      fixed: 'left',
+      slots: { default: 'name' },
+    },
+    {
+      field: 'customerName',
+      title: '客户名称',
+      fixed: 'left',
+      slots: { default: 'customerName' },
+    },
+    {
+      field: 'sex',
+      title: '性别',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_USER_SEX },
+      },
+    },
+    {
+      field: 'mobile',
+      title: '手机',
+    },
+    {
+      field: 'telephone',
+      title: '电话',
+    },
+    {
+      field: 'email',
+      title: '邮箱',
+    },
+    {
+      field: 'post',
+      title: '职位',
+    },
+    {
+      field: 'detailAddress',
+      title: '地址',
+    },
+    {
+      field: 'master',
+      title: '关键决策人',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/contact/modules/detail-list-modal.vue b/apps/web-antd/src/views/crm/contact/components/detail-list-modal.vue
similarity index 87%
rename from apps/web-antd/src/views/crm/contact/modules/detail-list-modal.vue
rename to apps/web-antd/src/views/crm/contact/components/detail-list-modal.vue
index 0fdcc605..4214096a 100644
--- a/apps/web-antd/src/views/crm/contact/modules/detail-list-modal.vue
+++ b/apps/web-antd/src/views/crm/contact/components/detail-list-modal.vue
@@ -1,3 +1,4 @@
+<!-- 联系人列表的选择：用于【商机】详情中，选择它要关联的联系人 -->
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmContactApi } from '#/api/crm/contact';
@@ -13,8 +14,8 @@ import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getContactPageByCustomer } from '#/api/crm/contact';
 import { $t } from '#/locales';
 
-import { useDetailListColumns } from './detail-data';
-import Form from './form.vue';
+import Form from '../modules/form.vue';
+import { useDetailListColumns } from './data';
 
 const props = defineProps<{
   customerId?: number; // 关联联系人与商机时，需要传入 customerId 进行筛选
@@ -35,7 +36,7 @@ function setCheckedRows({ records }: { records: CrmContactApi.Contact[] }) {
 }
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
@@ -71,23 +72,6 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.unlock();
     }
   },
-  async onOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      return;
-    }
-    // 加载数据
-    const data = modalApi.getData<any>();
-    if (!data) {
-      return;
-    }
-    modalApi.lock();
-    try {
-      // 设置到 values
-      // await formApi.setValues(formData.value);
-    } finally {
-      modalApi.unlock();
-    }
-  },
 });
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -118,6 +102,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -133,7 +118,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Modal title="关联联系人" class="w-2/5">
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid>
       <template #toolbar-tools>
         <TableAction
diff --git a/apps/web-antd/src/views/crm/contact/modules/detail-list.vue b/apps/web-antd/src/views/crm/contact/components/detail-list.vue
similarity index 93%
rename from apps/web-antd/src/views/crm/contact/modules/detail-list.vue
rename to apps/web-antd/src/views/crm/contact/components/detail-list.vue
index a9254670..a409d0a3 100644
--- a/apps/web-antd/src/views/crm/contact/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/contact/components/detail-list.vue
@@ -1,3 +1,4 @@
+<!-- 联系人列表：用于【联系人】【商机】详情中，展示它们关联的联系人列表 -->
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmContactApi } from '#/api/crm/contact';
@@ -19,9 +20,9 @@ import {
 import { BizTypeEnum } from '#/api/crm/permission';
 import { $t } from '#/locales';
 
-import { useDetailListColumns } from './detail-data';
+import Form from '../modules/form.vue';
+import { useDetailListColumns } from './data';
 import ListModal from './detail-list-modal.vue';
-import Form from './form.vue';
 
 const props = defineProps<{
   bizId: number; // 业务编号
@@ -48,7 +49,7 @@ function setCheckedRows({ records }: { records: CrmContactApi.Contact[] }) {
 }
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
@@ -59,10 +60,12 @@ function handleCreate() {
     .open();
 }
 
+/** 关联联系人 */
 function handleCreateContact() {
   detailListModalApi.setData({ customerId: props.customerId }).open();
 }
 
+/** 解除联系人关联 */
 async function handleDeleteContactBusinessList() {
   if (checkedRows.value.length === 0) {
     message.error('请先选择联系人后操作！');
@@ -80,7 +83,7 @@ async function handleDeleteContactBusinessList() {
         if (res) {
           // 提示并返回成功
           message.success($t('ui.actionMessage.operationSuccess'));
-          onRefresh();
+          handleRefresh();
           resolve(true);
         } else {
           reject(new Error($t('ui.actionMessage.operationFailed')));
@@ -92,6 +95,16 @@ async function handleDeleteContactBusinessList() {
   });
 }
 
+/** 创建商机联系人关联 */
+async function handleCreateBusinessContactList(contactIds: number[]) {
+  const data = {
+    businessId: props.bizId,
+    contactIds,
+  } as CrmContactApi.BusinessContactReq;
+  await createBusinessContactList(data);
+  handleRefresh();
+}
+
 /** 查看联系人详情 */
 function handleDetail(row: CrmContactApi.Contact) {
   push({ name: 'CrmContactDetail', params: { id: row.id } });
@@ -102,15 +115,6 @@ function handleCustomerDetail(row: CrmContactApi.Contact) {
   push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
 }
 
-async function handleCreateBusinessContactList(contactIds: number[]) {
-  const data = {
-    businessId: props.bizId,
-    contactIds,
-  } as CrmContactApi.BusinessContactReq;
-  await createBusinessContactList(data);
-  onRefresh();
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useDetailListColumns(),
@@ -141,6 +145,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -156,7 +161,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <div>
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <DetailListModal
       :customer-id="customerId"
       @success="handleCreateBusinessContactList"
diff --git a/apps/web-antd/src/views/crm/contact/components/index.ts b/apps/web-antd/src/views/crm/contact/components/index.ts
new file mode 100644
index 00000000..d16cd533
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contact/components/index.ts
@@ -0,0 +1 @@
+export { default as ContactDetailsList } from './detail-list.vue';
diff --git a/apps/web-antd/src/views/crm/contact/data.ts b/apps/web-antd/src/views/crm/contact/data.ts
index 788730e1..760f0852 100644
--- a/apps/web-antd/src/views/crm/contact/data.ts
+++ b/apps/web-antd/src/views/crm/contact/data.ts
@@ -27,17 +27,26 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '联系人姓名',
       component: 'Input',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入联系人姓名',
+      },
     },
     {
       fieldName: 'ownerUserId',
       label: '负责人',
       component: 'ApiSelect',
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values) => values.id,
+      },
       componentProps: {
         api: () => getSimpleUserList(),
         fieldNames: {
           label: 'nickname',
           value: 'id',
         },
+        placeholder: '请选择负责人',
       },
       defaultValue: userStore.userInfo?.id,
     },
@@ -45,51 +54,75 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'customerId',
       label: '客户名称',
       component: 'ApiSelect',
+      rules: 'required',
       componentProps: {
         api: () => getCustomerSimpleList(),
         fieldNames: {
           label: 'name',
           value: 'id',
         },
+        placeholder: '请选择客户',
       },
     },
     {
       fieldName: 'mobile',
       label: '手机',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号',
+      },
     },
     {
       fieldName: 'telephone',
       label: '电话',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入电话',
+      },
     },
     {
       fieldName: 'email',
       label: '邮箱',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入邮箱',
+      },
     },
     {
       fieldName: 'wechat',
       label: '微信',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入微信',
+      },
     },
     {
       fieldName: 'qq',
       label: 'QQ',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入QQ',
+      },
     },
     {
       fieldName: 'post',
       label: '职位',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入职位',
+      },
     },
     {
       fieldName: 'master',
       label: '关键决策人',
-      component: 'Select',
+      component: 'RadioGroup',
       componentProps: {
         options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        placeholder: '请选择是否关键决策人',
+        buttonStyle: 'solid',
+        optionType: 'button',
       },
+      defaultValue: false,
     },
     {
       fieldName: 'sex',
@@ -97,6 +130,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        placeholder: '请选择性别',
       },
     },
     {
@@ -109,6 +143,7 @@ export function useFormSchema(): VbenFormSchema[] {
           label: 'name',
           value: 'id',
         },
+        placeholder: '请选择直属上级',
       },
     },
     {
@@ -118,12 +153,16 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         api: () => getAreaTree(),
         fieldNames: { label: 'name', value: 'id', children: 'children' },
+        placeholder: '请选择地址',
       },
     },
     {
       fieldName: 'detailAddress',
       label: '详细地址',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入详细地址',
+      },
     },
     {
       fieldName: 'contactNextTime',
@@ -133,12 +172,16 @@ export function useFormSchema(): VbenFormSchema[] {
         showTime: true,
         format: 'YYYY-MM-DD HH:mm:ss',
         valueFormat: 'x',
+        placeholder: '请选择下次联系时间',
       },
     },
     {
       fieldName: 'remark',
       label: '备注',
       component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
     },
   ];
 }
@@ -147,7 +190,7 @@ export function useFormSchema(): VbenFormSchema[] {
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
-      fieldName: 'name',
+      fieldName: 'customerId',
       label: '客户',
       component: 'ApiSelect',
       componentProps: {
@@ -156,32 +199,53 @@ export function useGridFormSchema(): VbenFormSchema[] {
           label: 'name',
           value: 'id',
         },
+        placeholder: '请选择客户',
       },
     },
     {
       fieldName: 'name',
       label: '姓名',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人姓名',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'mobile',
       label: '手机号',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'telephone',
       label: '电话',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入电话',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'wechat',
       label: '微信',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入微信',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'email',
       label: '电子邮箱',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入电子邮箱',
+        allowClear: true,
+      },
     },
   ];
 }
@@ -203,15 +267,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 240,
       slots: { default: 'customerName' },
     },
-    {
-      field: 'sex',
-      title: '性别',
-      minWidth: 120,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.SYSTEM_USER_SEX },
-      },
-    },
     {
       field: 'mobile',
       title: '手机',
@@ -220,12 +275,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'telephone',
       title: '电话',
-      minWidth: 120,
+      minWidth: 130,
     },
     {
       field: 'email',
       title: '邮箱',
-      minWidth: 120,
+      minWidth: 180,
     },
     {
       field: 'post',
@@ -233,10 +288,15 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 120,
     },
     {
-      field: 'detailAddress',
+      field: 'areaName',
       title: '地址',
       minWidth: 120,
     },
+    {
+      field: 'detailAddress',
+      title: '详细地址',
+      minWidth: 180,
+    },
     {
       field: 'master',
       title: '关键决策人',
@@ -252,6 +312,32 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 120,
       slots: { default: 'parentId' },
     },
+    {
+      field: 'contactNextTime',
+      title: '下次联系时间',
+      formatter: 'formatDateTime',
+      minWidth: 180,
+    },
+    {
+      field: 'sex',
+      title: '性别',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_USER_SEX },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 200,
+    },
+    {
+      field: 'contactLastTime',
+      title: '最后跟进时间',
+      formatter: 'formatDateTime',
+      minWidth: 180,
+    },
     {
       field: 'ownerUserName',
       title: '负责人',
@@ -263,16 +349,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 120,
     },
     {
-      field: 'contactNextTime',
-      title: '下次联系时间',
+      field: 'updateTime',
+      title: '更新时间',
       formatter: 'formatDateTime',
       minWidth: 180,
     },
-    {
-      field: 'remark',
-      title: '备注',
-      minWidth: 200,
-    },
     {
       field: 'createTime',
       title: '创建时间',
@@ -280,10 +361,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 180,
     },
     {
-      field: 'updateTime',
-      title: '更新时间',
-      formatter: 'formatDateTime',
-      minWidth: 180,
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 120,
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/crm/contact/modules/detail-data.ts b/apps/web-antd/src/views/crm/contact/detail/data.ts
similarity index 61%
rename from apps/web-antd/src/views/crm/contact/modules/detail-data.ts
rename to apps/web-antd/src/views/crm/contact/detail/data.ts
index 70ea70de..d510ba4d 100644
--- a/apps/web-antd/src/views/crm/contact/modules/detail-data.ts
+++ b/apps/web-antd/src/views/crm/contact/detail/data.ts
@@ -1,4 +1,3 @@
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -12,7 +11,7 @@ import { DictTag } from '#/components/dict-tag';
 export function useDetailSchema(): DescriptionItemSchema[] {
   return [
     {
-      field: 'name',
+      field: 'customerName',
       label: '客户名称',
     },
     {
@@ -25,7 +24,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     },
     {
       field: 'createTime',
-      label: '下次联系时间',
+      label: '创建时间',
       content: (data) => formatDateTime(data?.createTime) as string,
     },
   ];
@@ -65,10 +64,11 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'areaName',
       label: '地址',
-    },
-    {
-      field: 'detailAddress',
-      label: '详细地址',
+      content: (data) => {
+        const areaName = data?.areaName ?? '';
+        const detailAddress = data?.detailAddress ?? '';
+        return [areaName, detailAddress].filter(Boolean).join(' ');
+      },
     },
     {
       field: 'post',
@@ -104,62 +104,3 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     },
   ];
 }
-
-/** 详情列表的字段 */
-export function useDetailListColumns(): VxeTableGridOptions['columns'] {
-  return [
-    {
-      type: 'checkbox',
-      width: 50,
-      fixed: 'left',
-    },
-    {
-      field: 'name',
-      title: '姓名',
-      fixed: 'left',
-      slots: { default: 'name' },
-    },
-    {
-      field: 'customerName',
-      title: '客户名称',
-      fixed: 'left',
-      slots: { default: 'customerName' },
-    },
-    {
-      field: 'sex',
-      title: '性别',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.SYSTEM_USER_SEX },
-      },
-    },
-    {
-      field: 'mobile',
-      title: '手机',
-    },
-    {
-      field: 'telephone',
-      title: '电话',
-    },
-    {
-      field: 'email',
-      title: '邮箱',
-    },
-    {
-      field: 'post',
-      title: '职位',
-    },
-    {
-      field: 'detailAddress',
-      title: '地址',
-    },
-    {
-      field: 'master',
-      title: '关键决策人',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
-      },
-    },
-  ];
-}
diff --git a/apps/web-antd/src/views/crm/contact/modules/detail.vue b/apps/web-antd/src/views/crm/contact/detail/index.vue
similarity index 54%
rename from apps/web-antd/src/views/crm/contact/modules/detail.vue
rename to apps/web-antd/src/views/crm/contact/detail/index.vue
index 48c4febe..b7ac6bf1 100644
--- a/apps/web-antd/src/views/crm/contact/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/contact/detail/index.vue
@@ -8,30 +8,31 @@ import { useRoute, useRouter } from 'vue-router';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
 
-import { Button, Card, Tabs } from 'ant-design-vue';
+import { Card, Tabs } from 'ant-design-vue';
 
 import { getContact } from '#/api/crm/contact';
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
-import { AsyncOperateLog } from '#/components/operate-log';
-import { BusinessDetailsList } from '#/views/crm/business';
-import { ContactDetailsInfo, ContactForm } from '#/views/crm/contact';
+import { OperateLog } from '#/components/operate-log';
+import { ACTION_ICON, TableAction } from '#/components/table-action';
+import { $t } from '#/locales';
+import { BusinessDetailsList } from '#/views/crm/business/components';
 import { FollowUp } from '#/views/crm/followup';
 import { PermissionList, TransferForm } from '#/views/crm/permission';
 
-import { useDetailSchema } from './detail-data';
-
-const loading = ref(false);
+import Form from '../modules/form.vue';
+import { useDetailSchema } from './data';
+import Info from './modules/info.vue';
 
 const route = useRoute();
 const router = useRouter();
 const tabs = useTabs();
 
-const contactId = ref(0);
-
-const contact = ref<CrmContactApi.Contact>({} as CrmContactApi.Contact);
-const contactLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const loading = ref(false); // 加载中
+const contactId = ref(0); // 联系人编号
+const contact = ref<CrmContactApi.Contact>({} as CrmContactApi.Contact); // 联系人详情
+const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
 const [Descriptions] = useDescription({
@@ -44,7 +45,7 @@ const [Descriptions] = useDescription({
 });
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: ContactForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
@@ -53,18 +54,20 @@ const [TransferModal, transferModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-/** 加载详情 */
-async function loadContactDetail() {
+/** 加载联系人详情 */
+async function getContactDetail() {
   loading.value = true;
-  contactId.value = Number(route.params.id);
-  const data = await getContact(contactId.value);
-  const logList = await getOperateLogPage({
-    bizType: BizTypeEnum.CRM_CONTACT,
-    bizId: contactId.value,
-  });
-  contactLogList.value = logList.list;
-  contact.value = data;
-  loading.value = false;
+  try {
+    contact.value = await getContact(contactId.value);
+    // 操作日志
+    const res = await getOperateLogPage({
+      bizType: BizTypeEnum.CRM_CONTACT,
+      bizId: contactId.value,
+    });
+    logList.value = res.list;
+  } finally {
+    loading.value = false;
+  }
 }
 
 /** 返回列表页 */
@@ -73,57 +76,68 @@ function handleBack() {
   router.push('/crm/contact');
 }
 
-/** 编辑 */
+/** 编辑联系人 */
 function handleEdit() {
   formModalApi.setData({ id: contactId.value }).open();
 }
 
-/** 转移线索 */
+/** 转移联系人 */
 function handleTransfer() {
   transferModalApi.setData({ id: contactId.value }).open();
 }
 
-// 加载数据
+/** 加载数据 */
 onMounted(() => {
   contactId.value = Number(route.params.id);
-  loadContactDetail();
+  getContactDetail();
 });
 </script>
 
 <template>
   <Page auto-content-height :title="contact?.name" :loading="loading">
-    <FormModal @success="loadContactDetail" />
-    <TransferModal @success="loadContactDetail" />
+    <FormModal @success="getContactDetail" />
+    <TransferModal @success="getContactDetail" />
     <template #extra>
-      <div class="flex items-center gap-2">
-        <Button
-          v-if="permissionListRef?.validateWrite"
-          type="primary"
-          @click="handleEdit"
-        >
-          {{ $t('ui.actionTitle.edit') }}
-        </Button>
-        <Button
-          v-if="permissionListRef?.validateOwnerUser"
-          type="primary"
-          @click="handleTransfer"
-        >
-          转移
-        </Button>
-      </div>
+      <TableAction
+        :actions="[
+          {
+            label: '返回',
+            type: 'default',
+            icon: 'lucide:arrow-left',
+            onClick: handleBack,
+          },
+          {
+            label: $t('ui.actionTitle.edit'),
+            type: 'primary',
+            icon: ACTION_ICON.EDIT,
+            auth: ['crm:contact:update'],
+            ifShow: permissionListRef?.validateWrite,
+            onClick: handleEdit,
+          },
+          {
+            label: '转移',
+            type: 'primary',
+            ifShow: permissionListRef?.validateOwnerUser,
+            onClick: handleTransfer,
+          },
+        ]"
+      />
     </template>
     <Card class="min-h-[10%]">
       <Descriptions :data="contact" />
     </Card>
     <Card class="mt-4 min-h-[60%]">
       <Tabs>
-        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
-          <ContactDetailsInfo :contact="contact" />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="跟进记录" key="2" :force-render="true">
+        <Tabs.TabPane tab="跟进记录" key="1" :force-render="true">
           <FollowUp :biz-id="contactId" :biz-type="BizTypeEnum.CRM_CONTACT" />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="团队成员" key="3" :force-render="true">
+        <Tabs.TabPane tab="详细资料" key="2" :force-render="true">
+          <Info :contact="contact" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="操作日志" key="3" :force-render="true">
+          <OperateLog :log-list="logList" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="团队成员" key="4" :force-render="true">
           <PermissionList
             ref="permissionListRef"
             :biz-id="contactId"
@@ -132,7 +146,7 @@ onMounted(() => {
             @quit-team="handleBack"
           />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="商机" key="4" :force-render="true">
+        <Tabs.TabPane tab="商机" key="5" :force-render="true">
           <BusinessDetailsList
             :biz-id="contactId"
             :biz-type="BizTypeEnum.CRM_CONTACT"
@@ -140,9 +154,6 @@ onMounted(() => {
             :customer-id="contact.customerId"
           />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="操作日志" key="5" :force-render="true">
-          <AsyncOperateLog :log-list="contactLogList" />
-        </Tabs.TabPane>
       </Tabs>
     </Card>
   </Page>
diff --git a/apps/web-antd/src/views/crm/contact/modules/detail-info.vue b/apps/web-antd/src/views/crm/contact/detail/modules/info.vue
similarity index 88%
rename from apps/web-antd/src/views/crm/contact/modules/detail-info.vue
rename to apps/web-antd/src/views/crm/contact/detail/modules/info.vue
index e9b8c1ac..d0622af6 100644
--- a/apps/web-antd/src/views/crm/contact/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/contact/detail/modules/info.vue
@@ -6,10 +6,10 @@ import { Divider } from 'ant-design-vue';
 import { useDescription } from '#/components/description';
 import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
 
-import { useDetailBaseSchema } from './detail-data';
+import { useDetailBaseSchema } from '../data';
 
 defineProps<{
-  contact: CrmContactApi.Contact; // 联系人信息
+  contact: CrmContactApi.Contact;
 }>();
 
 const [BaseDescriptions] = useDescription({
diff --git a/apps/web-antd/src/views/crm/contact/index.ts b/apps/web-antd/src/views/crm/contact/index.ts
deleted file mode 100644
index e19127cf..00000000
--- a/apps/web-antd/src/views/crm/contact/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { defineAsyncComponent } from 'vue';
-
-export const ContactDetailsInfo = defineAsyncComponent(
-  () => import('./modules/detail-info.vue'),
-);
-
-export const ContactForm = defineAsyncComponent(
-  () => import('./modules/form.vue'),
-);
-
-export const ContactDetails = defineAsyncComponent(
-  () => import('./modules/detail.vue'),
-);
-
-export const ContactDetailsList = defineAsyncComponent(
-  () => import('./modules/detail-list.vue'),
-);
diff --git a/apps/web-antd/src/views/crm/contact/index.vue b/apps/web-antd/src/views/crm/contact/index.vue
index 097cfa22..72dfbc34 100644
--- a/apps/web-antd/src/views/crm/contact/index.vue
+++ b/apps/web-antd/src/views/crm/contact/index.vue
@@ -30,13 +30,23 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 处理场景类型的切换 */
+function handleChangeSceneType(key: number | string) {
+  sceneType.value = key.toString();
   gridApi.query();
 }
 
 /** 导出表格 */
 async function handleExport() {
-  const data = await exportContact(await gridApi.formApi.getValues());
+  const formValues = await gridApi.formApi.getValues();
+  const data = await exportContact({
+    sceneType: sceneType.value,
+    ...formValues,
+  });
   downloadFileFromBlobPart({ fileName: '联系人.xls', source: data });
 }
 
@@ -54,15 +64,12 @@ function handleEdit(row: CrmContactApi.Contact) {
 async function handleDelete(row: CrmContactApi.Contact) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
-    await deleteContact(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
-    });
-    onRefresh();
+    await deleteContact(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -100,6 +107,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -107,11 +115,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<CrmContactApi.Contact>,
 });
-
-function onChangeSceneType(key: number | string) {
-  sceneType.value = key.toString();
-  gridApi.query();
-}
 </script>
 
 <template>
@@ -127,10 +130,10 @@ function onChangeSceneType(key: number | string) {
       />
     </template>
 
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid>
       <template #top>
-        <Tabs class="border-none" @change="onChangeSceneType">
+        <Tabs class="-mt-11" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />
@@ -168,7 +171,7 @@ function onChangeSceneType(key: number | string) {
       </template>
       <template #parentId="{ row }">
         <Button type="link" @click="handleDetail(row)">
-          {{ row.parentId }}
+          {{ row.parentName }}
         </Button>
       </template>
       <template #actions="{ row }">
@@ -181,12 +184,6 @@ function onChangeSceneType(key: number | string) {
               auth: ['crm:contact:update'],
               onClick: handleEdit.bind(null, row),
             },
-            {
-              label: $t('common.detail'),
-              type: 'link',
-              icon: ACTION_ICON.VIEW,
-              onClick: handleDetail.bind(null, row),
-            },
             {
               label: $t('common.delete'),
               type: 'link',
@@ -204,3 +201,8 @@ function onChangeSceneType(key: number | string) {
     </Grid>
   </Page>
 </template>
+<style scoped>
+:deep(.vxe-toolbar div) {
+  z-index: 1;
+}
+</style>
diff --git a/apps/web-antd/src/views/crm/contact/modules/form.vue b/apps/web-antd/src/views/crm/contact/modules/form.vue
index 8f107bb5..a70060cf 100644
--- a/apps/web-antd/src/views/crm/contact/modules/form.vue
+++ b/apps/web-antd/src/views/crm/contact/modules/form.vue
@@ -59,8 +59,6 @@ const [Modal, modalApi] = useVbenModal({
     // 加载数据
     const data = modalApi.getData<CrmContactApi.Contact>();
     if (!data || !data.id) {
-      // 设置到 values
-      await formApi.setValues(data);
       return;
     }
     modalApi.lock();
diff --git a/apps/web-antd/src/views/crm/contract/components/data.ts b/apps/web-antd/src/views/crm/contract/components/data.ts
new file mode 100644
index 00000000..c314faa9
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contract/components/data.ts
@@ -0,0 +1,92 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { erpPriceInputFormatter } from '@vben/utils';
+
+export function useDetailListColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '合同编号',
+      field: 'no',
+      minWidth: 150,
+      fixed: 'left',
+    },
+    {
+      title: '合同名称',
+      field: 'name',
+      minWidth: 150,
+      fixed: 'left',
+      slots: { default: 'name' },
+    },
+    {
+      title: '合同金额（元）',
+      field: 'totalPrice',
+      minWidth: 150,
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '合同开始时间',
+      field: 'startTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '合同结束时间',
+      field: 'endTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '已回款金额（元）',
+      field: 'totalReceivablePrice',
+      minWidth: 150,
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '未回款金额（元）',
+      field: 'unpaidPrice',
+      minWidth: 150,
+      formatter: ({ row }) => {
+        return erpPriceInputFormatter(
+          row.totalPrice - row.totalReceivablePrice,
+        );
+      },
+    },
+    {
+      title: '负责人',
+      field: 'ownerUserName',
+      minWidth: 150,
+    },
+    {
+      title: '所属部门',
+      field: 'ownerUserDeptName',
+      minWidth: 150,
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '创建人',
+      field: 'creatorName',
+      minWidth: 150,
+    },
+    {
+      title: '备注',
+      field: 'remark',
+      minWidth: 150,
+    },
+    {
+      title: '合同状态',
+      field: 'auditStatus',
+      fixed: 'right',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/contract/modules/detail-list.vue b/apps/web-antd/src/views/crm/contract/components/detail-list.vue
similarity index 89%
rename from apps/web-antd/src/views/crm/contract/modules/detail-list.vue
rename to apps/web-antd/src/views/crm/contract/components/detail-list.vue
index c4ca1714..7edff212 100644
--- a/apps/web-antd/src/views/crm/contract/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/contract/components/detail-list.vue
@@ -1,6 +1,6 @@
+<!-- 合同列表：用于【客户】【商机】【联系人】详情中，展示它们关联的合同列表 -->
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { CrmBusinessApi } from '#/api/crm/business';
 import type { CrmContractApi } from '#/api/crm/contract';
 
 import { ref } from 'vue';
@@ -18,8 +18,8 @@ import {
 import { BizTypeEnum } from '#/api/crm/permission';
 import { $t } from '#/locales';
 
-import { useDetailListColumns } from './detail-data';
-import Form from './form.vue';
+import Form from '../modules/form.vue';
+import { useDetailListColumns } from './data';
 
 const props = defineProps<{
   bizId: number; // 业务编号
@@ -33,7 +33,8 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-const checkedRows = ref<CrmContractApi.Contract[]>([]);
+/** 已选择的合同 */
+const checkedRows = ref<CrmContractApi.Contract[]>();
 function setCheckedRows({ records }: { records: CrmContractApi.Contract[] }) {
   checkedRows.value = records;
 }
@@ -91,12 +92,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<CrmBusinessApi.Business>,
+  } as VxeTableGridOptions<CrmContractApi.Contract>,
   gridEvents: {
     checkboxAll: setCheckedRows,
     checkboxChange: setCheckedRows,
diff --git a/apps/web-antd/src/views/crm/contract/components/index.ts b/apps/web-antd/src/views/crm/contract/components/index.ts
new file mode 100644
index 00000000..d9f61793
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contract/components/index.ts
@@ -0,0 +1 @@
+export { default as ContractDetailsList } from './detail-list.vue';
diff --git a/apps/web-antd/src/views/crm/contract/config/index.vue b/apps/web-antd/src/views/crm/contract/config/index.vue
index d0dcd1af..932dbe30 100644
--- a/apps/web-antd/src/views/crm/contract/config/index.vue
+++ b/apps/web-antd/src/views/crm/contract/config/index.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
 import type { CrmContractConfigApi } from '#/api/crm/contract/config';
 
 import { onMounted } from 'vue';
@@ -16,80 +17,76 @@ import { $t } from '#/locales';
 
 const emit = defineEmits(['success']);
 
+const schema: VbenFormSchema[] = [
+  {
+    component: 'RadioGroup',
+    fieldName: 'notifyEnabled',
+    label: '提前提醒设置',
+    componentProps: {
+      options: [
+        { label: '提醒', value: true },
+        { label: '不提醒', value: false },
+      ],
+    },
+    defaultValue: true,
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'notifyDays',
+    componentProps: {
+      min: 0,
+      precision: 0,
+    },
+    renderComponentContent: () => ({
+      addonBefore: () => '提前',
+      addonAfter: () => '天提醒',
+    }),
+    dependencies: {
+      triggerFields: ['notifyEnabled'],
+      show: (values) => values.notifyEnabled,
+      trigger(values) {
+        if (!values.notifyEnabled) {
+          values.notifyDays = undefined;
+        }
+      },
+    },
+  },
+];
+
 const [Form, formApi] = useVbenForm({
   commonConfig: {
-    // 所有表单项
     labelClass: 'w-2/6',
   },
   layout: 'horizontal',
   wrapperClass: 'grid-cols-1',
   actionWrapperClass: 'text-center',
-  schema: [
-    {
-      component: 'RadioGroup',
-      fieldName: 'notifyEnabled',
-      label: '提前提醒设置',
-      componentProps: {
-        options: [
-          { label: '提醒', value: true },
-          { label: '不提醒', value: false },
-        ],
-      },
-    },
-    {
-      component: 'InputNumber',
-      fieldName: 'notifyDays',
-      componentProps: {
-        min: 0,
-        precision: 0,
-      },
-      renderComponentContent: () => ({
-        addonBefore: () => '提前',
-        addonAfter: () => '天提醒',
-      }),
-      dependencies: {
-        triggerFields: ['notifyEnabled'],
-        trigger(values) {
-          values.notifyDays = undefined;
-        },
-        show: (value) => value.notifyEnabled,
-      },
-    },
-  ],
-  // 提交函数
-  handleSubmit: onSubmit,
+  schema,
+  handleSubmit,
 });
 
-async function onSubmit() {
+/** 提交表单 */
+async function handleSubmit() {
   const { valid } = await formApi.validate();
   if (!valid) {
     return;
   }
-  // 提交表单
   const data = (await formApi.getValues()) as CrmContractConfigApi.Config;
   if (!data.notifyEnabled) {
     data.notifyDays = undefined;
   }
-  formApi.setValues(data);
-  try {
-    await saveContractConfig(data);
-    // 关闭并提示
-    emit('success');
-    message.success($t('ui.actionMessage.operationSuccess'));
-  } finally {
-    formApi.setValues(data);
-  }
+  await saveContractConfig(data);
+  await formApi.setValues(data);
+  emit('success');
+  message.success($t('ui.actionMessage.operationSuccess'));
 }
 
+/** 获取配置 */
 async function getConfigInfo() {
-  try {
-    const res = await getContractConfig();
-    formApi.setValues(res);
-  } catch (error) {
-    console.error(error);
-  }
+  const res = await getContractConfig();
+  await formApi.setValues(res);
 }
 
+/** 初始化 */
 onMounted(() => {
   getConfigInfo();
 });
diff --git a/apps/web-antd/src/views/crm/contract/data.ts b/apps/web-antd/src/views/crm/contract/data.ts
index 38d1fbfd..91ceb195 100644
--- a/apps/web-antd/src/views/crm/contract/data.ts
+++ b/apps/web-antd/src/views/crm/contract/data.ts
@@ -52,6 +52,10 @@ export function useFormSchema(): VbenFormSchema[] {
           value: 'id',
         },
       },
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values) => values.id,
+      },
       defaultValue: userStore.userInfo?.id,
       rules: 'required',
     },
@@ -282,73 +286,78 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '合同编号',
       field: 'no',
-      minWidth: 150,
+      minWidth: 180,
       fixed: 'left',
     },
     {
       title: '合同名称',
       field: 'name',
-      minWidth: 220,
+      minWidth: 160,
       fixed: 'left',
       slots: { default: 'name' },
     },
     {
       title: '客户名称',
       field: 'customerName',
-      minWidth: 240,
+      minWidth: 120,
       slots: { default: 'customerName' },
     },
     {
       title: '商机名称',
       field: 'businessName',
-      minWidth: 220,
+      minWidth: 130,
       slots: { default: 'businessName' },
     },
     {
       title: '合同金额（元）',
       field: 'totalPrice',
-      minWidth: 150,
+      minWidth: 140,
       formatter: 'formatAmount2',
     },
     {
       title: '下单时间',
       field: 'orderDate',
-      minWidth: 150,
+      minWidth: 120,
       formatter: 'formatDateTime',
     },
     {
       title: '合同开始时间',
       field: 'startTime',
-      minWidth: 150,
+      minWidth: 120,
       formatter: 'formatDateTime',
     },
     {
       title: '合同结束时间',
       field: 'endTime',
-      minWidth: 150,
+      minWidth: 120,
       formatter: 'formatDateTime',
     },
     {
       title: '客户签约人',
       field: 'signContactName',
-      minWidth: 150,
+      minWidth: 130,
       slots: { default: 'signContactName' },
     },
     {
       title: '公司签约人',
       field: 'signUserName',
-      minWidth: 150,
+      minWidth: 130,
+    },
+    {
+      title: '备注',
+      field: 'remark',
+      minWidth: 200,
     },
     {
       title: '已回款金额（元）',
       field: 'totalReceivablePrice',
-      minWidth: 150,
+      minWidth: 140,
       formatter: 'formatAmount2',
     },
     {
       title: '未回款金额（元）',
-      field: 'unpaidPrice',
-      minWidth: 150,
+      field: 'totalReceivablePrice',
+      minWidth: 140,
       formatter: ({ row }) => {
         return erpPriceInputFormatter(
           row.totalPrice - row.totalReceivablePrice,
@@ -358,46 +367,41 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '最后跟进时间',
       field: 'contactLastTime',
-      minWidth: 150,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '负责人',
       field: 'ownerUserName',
-      minWidth: 150,
+      minWidth: 120,
     },
     {
       title: '所属部门',
       field: 'ownerUserDeptName',
-      minWidth: 150,
+      minWidth: 100,
     },
     {
       title: '更新时间',
       field: 'updateTime',
-      minWidth: 150,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '创建时间',
       field: 'createTime',
-      minWidth: 150,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '创建人',
       field: 'creatorName',
-      minWidth: 150,
-    },
-    {
-      title: '备注',
-      field: 'remark',
-      minWidth: 150,
+      minWidth: 120,
     },
     {
       title: '合同状态',
       field: 'auditStatus',
       fixed: 'right',
-      minWidth: 100,
+      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
@@ -407,7 +411,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       title: '操作',
       field: 'actions',
       fixed: 'right',
-      width: 130,
+      minWidth: 130,
       slots: { default: 'actions' },
     },
   ];
diff --git a/apps/web-antd/src/views/crm/contract/modules/detail-data.ts b/apps/web-antd/src/views/crm/contract/detail/data.ts
similarity index 55%
rename from apps/web-antd/src/views/crm/contract/modules/detail-data.ts
rename to apps/web-antd/src/views/crm/contract/detail/data.ts
index 779dfba2..2a00b150 100644
--- a/apps/web-antd/src/views/crm/contract/modules/detail-data.ts
+++ b/apps/web-antd/src/views/crm/contract/detail/data.ts
@@ -1,4 +1,3 @@
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -7,6 +6,7 @@ import { DICT_TYPE } from '@vben/constants';
 import { erpPriceInputFormatter, formatDateTime } from '@vben/utils';
 
 import { DictTag } from '#/components/dict-tag';
+
 /** 详情头部的配置 */
 export function useDetailSchema(): DescriptionItemSchema[] {
   return [
@@ -99,91 +99,3 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     },
   ];
 }
-
-export function useDetailListColumns(): VxeTableGridOptions['columns'] {
-  return [
-    {
-      title: '合同编号',
-      field: 'no',
-      minWidth: 150,
-      fixed: 'left',
-    },
-    {
-      title: '合同名称',
-      field: 'name',
-      minWidth: 150,
-      fixed: 'left',
-      slots: { default: 'name' },
-    },
-    {
-      title: '合同金额（元）',
-      field: 'totalPrice',
-      minWidth: 150,
-      formatter: 'formatAmount2',
-    },
-    {
-      title: '合同开始时间',
-      field: 'startTime',
-      minWidth: 150,
-      formatter: 'formatDateTime',
-    },
-    {
-      title: '合同结束时间',
-      field: 'endTime',
-      minWidth: 150,
-      formatter: 'formatDateTime',
-    },
-    {
-      title: '已回款金额（元）',
-      field: 'totalReceivablePrice',
-      minWidth: 150,
-      formatter: 'formatAmount2',
-    },
-    {
-      title: '未回款金额（元）',
-      field: 'unpaidPrice',
-      minWidth: 150,
-      formatter: ({ row }) => {
-        return erpPriceInputFormatter(
-          row.totalPrice - row.totalReceivablePrice,
-        );
-      },
-    },
-    {
-      title: '负责人',
-      field: 'ownerUserName',
-      minWidth: 150,
-    },
-    {
-      title: '所属部门',
-      field: 'ownerUserDeptName',
-      minWidth: 150,
-    },
-    {
-      title: '创建时间',
-      field: 'createTime',
-      minWidth: 150,
-      formatter: 'formatDateTime',
-    },
-    {
-      title: '创建人',
-      field: 'creatorName',
-      minWidth: 150,
-    },
-    {
-      title: '备注',
-      field: 'remark',
-      minWidth: 150,
-    },
-    {
-      title: '合同状态',
-      field: 'auditStatus',
-      fixed: 'right',
-      minWidth: 100,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
-      },
-    },
-  ];
-}
diff --git a/apps/web-antd/src/views/crm/contract/modules/detail.vue b/apps/web-antd/src/views/crm/contract/detail/index.vue
similarity index 58%
rename from apps/web-antd/src/views/crm/contract/modules/detail.vue
rename to apps/web-antd/src/views/crm/contract/detail/index.vue
index a546169c..471e2de2 100644
--- a/apps/web-antd/src/views/crm/contract/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/contract/detail/index.vue
@@ -2,49 +2,43 @@
 import type { CrmContractApi } from '#/api/crm/contract';
 import type { SystemOperateLogApi } from '#/api/system/operate-log';
 
-import { computed, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
-import { ArrowLeft } from '@vben/icons';
 
-import { Button, Card, Tabs } from 'ant-design-vue';
+import { Card, Tabs } from 'ant-design-vue';
 
 import { getContract } from '#/api/crm/contract';
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
-import { AsyncOperateLog } from '#/components/operate-log';
-import { ContractDetailsInfo, ContractForm } from '#/views/crm/contract';
+import { OperateLog } from '#/components/operate-log';
+import { ACTION_ICON, TableAction } from '#/components/table-action';
+import { $t } from '#/locales';
 import { FollowUp } from '#/views/crm/followup';
 import { PermissionList, TransferForm } from '#/views/crm/permission';
-import { ProductDetailsList } from '#/views/crm/product';
-import {
-  ReceivableDetailsList,
-  ReceivablePlanDetailsList,
-} from '#/views/crm/receivable';
+import { ProductDetailsList } from '#/views/crm/product/components';
+import { ReceivableDetailsList } from '#/views/crm/receivable/components';
+import { ReceivablePlanDetailsList } from '#/views/crm/receivable/plan/components';
 
-import { useDetailSchema } from './detail-data';
+import Form from '../modules/form.vue';
+import { useDetailSchema } from './data';
+import ContractDetailsInfo from './modules/info.vue';
 
-const loading = ref(false);
+const props = defineProps<{ id?: number }>();
 
 const route = useRoute();
 const router = useRouter();
 const tabs = useTabs();
 
-const contractId = ref(0);
-
-const contract = ref<CrmContractApi.Contract>({} as CrmContractApi.Contract);
-const contractLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const loading = ref(false); // 加载中
+const contractId = ref(0); // 合同编号
+const contract = ref<CrmContractApi.Contract>({} as CrmContractApi.Contract); // 合同详情
+const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
-// 校验负责人权限和编辑权限
-const validateOwnerUser = computed(
-  () => permissionListRef.value?.validateOwnerUser,
-);
-const validateWrite = computed(() => permissionListRef.value?.validateWrite);
-
 const [Descriptions] = useDescription({
   componentProps: {
     bordered: false,
@@ -55,7 +49,7 @@ const [Descriptions] = useDescription({
 });
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: ContractForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
@@ -67,15 +61,17 @@ const [TransferModal, transferModalApi] = useVbenModal({
 /** 加载合同详情 */
 async function loadContractDetail() {
   loading.value = true;
-  const data = await getContract(contractId.value);
-  contract.value = data;
-  // 操作日志
-  const logList = await getOperateLogPage({
-    bizType: BizTypeEnum.CRM_CONTRACT,
-    bizId: contractId.value,
-  });
-  contractLogList.value = logList.list;
-  loading.value = false;
+  try {
+    contract.value = await getContract(contractId.value);
+    // 操作日志
+    const res = await getOperateLogPage({
+      bizType: BizTypeEnum.CRM_CONTRACT,
+      bizId: contractId.value,
+    });
+    logList.value = res.list;
+  } finally {
+    loading.value = false;
+  }
 }
 
 /** 返回列表页 */
@@ -84,19 +80,19 @@ function handleBack() {
   router.push('/crm/contract');
 }
 
-/** 编辑 */
+/** 编辑合同 */
 function handleEdit() {
   formModalApi.setData({ id: contractId.value }).open();
 }
 
-/** 转移 */
+/** 转移合同 */
 function handleTransfer() {
   transferModalApi.setData({ bizType: BizTypeEnum.CRM_CONTRACT }).open();
 }
 
-// 加载数据
+/** 加载数据 */
 onMounted(() => {
-  contractId.value = Number(route.params.id);
+  contractId.value = Number(props.id || route.params.id);
   loadContractDetail();
 });
 </script>
@@ -106,42 +102,54 @@ onMounted(() => {
     <FormModal @success="loadContractDetail" />
     <TransferModal @success="loadContractDetail" />
     <template #extra>
-      <div class="flex items-center gap-2">
-        <Button @click="handleBack">
-          <ArrowLeft class="size-5" />
-          返回
-        </Button>
-        <Button
-          v-if="validateWrite"
-          type="primary"
-          @click="handleEdit"
-          v-access:code="['crm:contract:update']"
-        >
-          {{ $t('ui.actionTitle.edit') }}
-        </Button>
-        <Button v-if="validateOwnerUser" type="primary" @click="handleTransfer">
-          转移
-        </Button>
-      </div>
+      <TableAction
+        :actions="[
+          {
+            label: '返回',
+            type: 'default',
+            icon: 'lucide:arrow-left',
+            onClick: handleBack,
+          },
+          {
+            label: $t('ui.actionTitle.edit'),
+            type: 'primary',
+            icon: ACTION_ICON.EDIT,
+            auth: ['crm:contract:update'],
+            ifShow: permissionListRef?.validateWrite,
+            onClick: handleEdit,
+          },
+          {
+            label: '转移',
+            type: 'primary',
+            ifShow: permissionListRef?.validateOwnerUser,
+            onClick: handleTransfer,
+          },
+        ]"
+      />
     </template>
     <Card class="min-h-[10%]">
       <Descriptions :data="contract" />
     </Card>
     <Card class="mt-4 min-h-[60%]">
       <Tabs>
-        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
-          <ContractDetailsInfo :contract="contract" />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="合同跟进" key="2" :force-render="true">
+        <Tabs.TabPane tab="跟进记录" key="1" :force-render="true">
           <FollowUp :biz-id="contractId" :biz-type="BizTypeEnum.CRM_CONTRACT" />
         </Tabs.TabPane>
+        <Tabs.TabPane tab="基本信息" key="2" :force-render="true">
+          <ContractDetailsInfo :contract="contract" />
+        </Tabs.TabPane>
         <Tabs.TabPane tab="产品" key="3" :force-render="true">
           <ProductDetailsList
             :biz-id="contractId"
             :biz-type="BizTypeEnum.CRM_CONTRACT"
           />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="回款" key="4" :force-render="true">
+        <Tabs.TabPane
+          tab="回款"
+          key="4"
+          :force-render="true"
+          v-if="contract.customerId"
+        >
           <ReceivablePlanDetailsList
             :contract-id="contractId"
             :customer-id="contract.customerId"
@@ -161,7 +169,7 @@ onMounted(() => {
           />
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="6" :force-render="true">
-          <AsyncOperateLog :log-list="contractLogList" />
+          <OperateLog :log-list="logList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>
diff --git a/apps/web-antd/src/views/crm/contract/modules/detail-info.vue b/apps/web-antd/src/views/crm/contract/detail/modules/info.vue
similarity index 94%
rename from apps/web-antd/src/views/crm/contract/modules/detail-info.vue
rename to apps/web-antd/src/views/crm/contract/detail/modules/info.vue
index dde87803..ae6b637f 100644
--- a/apps/web-antd/src/views/crm/contract/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/contract/detail/modules/info.vue
@@ -6,7 +6,7 @@ import { Divider } from 'ant-design-vue';
 import { useDescription } from '#/components/description';
 import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
 
-import { useDetailBaseSchema } from './detail-data';
+import { useDetailBaseSchema } from '../data';
 
 defineProps<{
   contract: CrmContractApi.Contract; // 合同信息
diff --git a/apps/web-antd/src/views/crm/contract/index.ts b/apps/web-antd/src/views/crm/contract/index.ts
deleted file mode 100644
index 7306f3e2..00000000
--- a/apps/web-antd/src/views/crm/contract/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { defineAsyncComponent } from 'vue';
-
-export const ContractDetailsInfo = defineAsyncComponent(
-  () => import('./modules/detail-info.vue'),
-);
-
-export const ContractForm = defineAsyncComponent(
-  () => import('./modules/form.vue'),
-);
-
-export const ContractDetails = defineAsyncComponent(
-  () => import('./modules/detail.vue'),
-);
-
-export const ContractDetailsList = defineAsyncComponent(
-  () => import('./modules/detail-list.vue'),
-);
diff --git a/apps/web-antd/src/views/crm/contract/index.vue b/apps/web-antd/src/views/crm/contract/index.vue
index c5f138d0..85657106 100644
--- a/apps/web-antd/src/views/crm/contract/index.vue
+++ b/apps/web-antd/src/views/crm/contract/index.vue
@@ -31,13 +31,23 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 处理场景类型的切换 */
+function handleChangeSceneType(key: number | string) {
+  sceneType.value = key.toString();
   gridApi.query();
 }
 
 /** 导出表格 */
 async function handleExport() {
-  const data = await exportContract(await gridApi.formApi.getValues());
+  const formValues = await gridApi.formApi.getValues();
+  const data = await exportContract({
+    sceneType: sceneType.value,
+    ...formValues,
+  });
   downloadFileFromBlobPart({ fileName: '合同.xls', source: data });
 }
 
@@ -55,15 +65,12 @@ function handleEdit(row: CrmContractApi.Contract) {
 async function handleDelete(row: CrmContractApi.Contract) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
-    await deleteContract(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
-    });
-    onRefresh();
+    await deleteContract(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -73,15 +80,12 @@ async function handleDelete(row: CrmContractApi.Contract) {
 async function handleSubmit(row: CrmContractApi.Contract) {
   const hideLoading = message.loading({
     content: '提交审核中...',
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
-    await submitContract(row.id as number);
-    message.success({
-      content: '提交审核成功',
-      key: 'action_key_msg',
-    });
-    onRefresh();
+    await submitContract(row.id!);
+    message.success('提交审核成功');
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -137,6 +141,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -144,11 +149,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<CrmContractApi.Contract>,
 });
-
-function onChangeSceneType(key: number | string) {
-  sceneType.value = key.toString();
-  gridApi.query();
-}
 </script>
 
 <template>
@@ -164,10 +164,10 @@ function onChangeSceneType(key: number | string) {
       />
     </template>
 
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid>
       <template #top>
-        <Tabs class="border-none" @change="onChangeSceneType">
+        <Tabs class="-mt-11" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />
@@ -224,8 +224,6 @@ function onChangeSceneType(key: number | string) {
               onClick: handleEdit.bind(null, row),
               ifShow: row.auditStatus === 0,
             },
-          ]"
-          :drop-down-actions="[
             {
               label: '提交审核',
               type: 'link',
@@ -240,12 +238,6 @@ function onChangeSceneType(key: number | string) {
               onClick: handleProcessDetail.bind(null, row),
               ifShow: row.auditStatus !== 0,
             },
-            {
-              label: $t('common.detail'),
-              type: 'link',
-              auth: ['crm:contract:query'],
-              onClick: handleDetail.bind(null, row),
-            },
             {
               label: $t('common.delete'),
               type: 'link',
@@ -262,3 +254,8 @@ function onChangeSceneType(key: number | string) {
     </Grid>
   </Page>
 </template>
+<style scoped>
+:deep(.vxe-toolbar div) {
+  z-index: 1;
+}
+</style>
diff --git a/apps/web-antd/src/views/crm/contract/modules/form.vue b/apps/web-antd/src/views/crm/contract/modules/form.vue
index 3517681b..f244dea2 100644
--- a/apps/web-antd/src/views/crm/contract/modules/form.vue
+++ b/apps/web-antd/src/views/crm/contract/modules/form.vue
@@ -15,7 +15,7 @@ import {
 } from '#/api/crm/contract';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { $t } from '#/locales';
-import { ProductEditTable } from '#/views/crm/product';
+import { ProductEditTable } from '#/views/crm/product/components';
 
 import { useFormSchema } from '../data';
 
@@ -27,6 +27,7 @@ const getTitle = computed(() => {
     : $t('ui.actionTitle.create', ['合同']);
 });
 
+/** 更新产品列表 */
 function handleUpdateProducts(products: any) {
   formData.value = modalApi.getData<CrmContractApi.Contract>();
   formData.value!.products = products;
@@ -55,7 +56,6 @@ const [Form, formApi] = useVbenForm({
     },
     labelWidth: 120,
   },
-  // 一共3列
   wrapperClass: 'grid-cols-3',
   layout: 'vertical',
   schema: useFormSchema(),
@@ -90,8 +90,6 @@ const [Modal, modalApi] = useVbenModal({
     // 加载数据
     const data = modalApi.getData<CrmContractApi.Contract>();
     if (!data || !data.id) {
-      // 设置到 values
-      await formApi.setValues(data);
       return;
     }
     modalApi.lock();
diff --git a/apps/web-antd/src/views/crm/customer/data.ts b/apps/web-antd/src/views/crm/customer/data.ts
index b3fcf1b2..dc4e39df 100644
--- a/apps/web-antd/src/views/crm/customer/data.ts
+++ b/apps/web-antd/src/views/crm/customer/data.ts
@@ -1,6 +1,7 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
+import { z } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { useUserStore } from '@vben/stores';
@@ -37,8 +38,9 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE, 'number'),
+        placeholder: '请选择客户来源',
+        allowClear: true,
       },
-      rules: 'required',
     },
     {
       fieldName: 'mobile',
@@ -53,6 +55,10 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'ownerUserId',
       label: '负责人',
       component: 'ApiSelect',
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values) => values.id,
+      },
       componentProps: {
         api: () => getSimpleUserList(),
         fieldNames: {
@@ -201,13 +207,57 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'RangePicker',
       componentProps: {
         ...getRangePickerDefaultProps(),
-        placeholder: '请选择创建时间',
+        placeholder: ['开始日期', '结束日期'],
         allowClear: true,
       },
     },
   ];
 }
 
+/** 导入客户的表单 */
+export function useImportFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'ownerUserId',
+      label: '负责人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleUserList(),
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
+        placeholder: '请选择负责人',
+        allowClear: true,
+        class: 'w-full',
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values) => values.id,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'file',
+      label: '客户数据',
+      component: 'Upload',
+      rules: 'required',
+      help: '仅允许导入 xls、xlsx 格式文件',
+    },
+    {
+      fieldName: 'updateSupport',
+      label: '是否覆盖',
+      component: 'Switch',
+      componentProps: {
+        checkedChildren: '是',
+        unCheckedChildren: '否',
+      },
+      rules: z.boolean().default(false),
+      help: '是否更新已经存在的客户数据',
+    },
+  ];
+}
+
 /** 列表的字段 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
@@ -215,11 +265,8 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'name',
       title: '客户名称',
       fixed: 'left',
-      align: 'left',
-      minWidth: 280,
-      slots: {
-        default: 'name',
-      },
+      minWidth: 160,
+      slots: { default: 'name' },
     },
     {
       field: 'source',
@@ -233,83 +280,118 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'mobile',
       title: '手机',
-      minWidth: 100,
+      minWidth: 120,
     },
     {
       field: 'telephone',
       title: '电话',
-      minWidth: 100,
+      minWidth: 130,
     },
     {
       field: 'email',
       title: '邮箱',
-      minWidth: 100,
-    },
-    {
-      field: 'areaName',
-      title: '地址',
-      minWidth: 140,
-    },
-    {
-      field: 'detailAddress',
-      title: '地址',
-      minWidth: 140,
-    },
-    {
-      field: 'industryId',
-      title: '客户行业',
-      minWidth: 80,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
-      },
+      minWidth: 180,
     },
     {
       field: 'level',
       title: '客户级别',
-      minWidth: 120,
+      minWidth: 135,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_LEVEL },
       },
     },
+    {
+      field: 'industryId',
+      title: '客户行业',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
+      },
+    },
+    {
+      field: 'contactNextTime',
+      title: '下次联系时间',
+      formatter: 'formatDateTime',
+      minWidth: 180,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 200,
+    },
+    {
+      field: 'lockStatus',
+      title: '锁定状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'dealStatus',
+      title: '成交状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'contactLastTime',
+      title: '最后跟进时间',
+      formatter: 'formatDateTime',
+      minWidth: 180,
+    },
+    {
+      field: 'contactLastContent',
+      title: '最后跟进记录',
+      minWidth: 200,
+    },
+    {
+      field: 'detailAddress',
+      title: '地址',
+      minWidth: 180,
+    },
+    {
+      field: 'poolDay',
+      title: '距离进入公海天数',
+      minWidth: 140,
+      formatter: ({ cellValue }) =>
+        cellValue === null ? '-' : `${cellValue} 天`,
+    },
     {
       field: 'ownerUserName',
       title: '负责人',
-      minWidth: 80,
+      minWidth: 100,
     },
     {
       field: 'ownerUserDeptName',
       title: '所属部门',
       minWidth: 100,
     },
-    {
-      field: 'contactNextTime',
-      title: '下次联系时间',
-      formatter: 'formatDateTime',
-      minWidth: 160,
-    },
-    {
-      field: 'contactLastTime',
-      title: '最后跟进时间',
-      formatter: 'formatDateTime',
-      minWidth: 160,
-    },
     {
       field: 'updateTime',
       title: '更新时间',
       formatter: 'formatDateTime',
-      minWidth: 160,
+      minWidth: 180,
     },
     {
       field: 'createTime',
       title: '创建时间',
       formatter: 'formatDateTime',
-      minWidth: 160,
+      minWidth: 180,
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 100,
     },
     {
       title: '操作',
-      width: 180,
+      width: 130,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-antd/src/views/crm/customer/modules/detail-data.ts b/apps/web-antd/src/views/crm/customer/detail/data.ts
similarity index 65%
rename from apps/web-antd/src/views/crm/customer/modules/detail-data.ts
rename to apps/web-antd/src/views/crm/customer/detail/data.ts
index e718e5a1..5540a93e 100644
--- a/apps/web-antd/src/views/crm/customer/modules/detail-data.ts
+++ b/apps/web-antd/src/views/crm/customer/detail/data.ts
@@ -1,12 +1,44 @@
+import type { VbenFormSchema } from '#/adapter/form';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
+import { useUserStore } from '@vben/stores';
 import { formatDateTime } from '@vben/utils';
 
+import { getSimpleUserList } from '#/api/system/user';
 import { DictTag } from '#/components/dict-tag';
 
+/** 分配客户表单 */
+export function useDistributeFormSchema(): VbenFormSchema[] {
+  const userStore = useUserStore();
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'ownerUserId',
+      label: '负责人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleUserList(),
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
+      },
+      defaultValue: userStore.userInfo?.id,
+      rules: 'required',
+    },
+  ];
+}
+
 /** 详情页的字段 */
 export function useDetailSchema(): DescriptionItemSchema[] {
   return [
@@ -21,6 +53,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
       label: '成交状态',
       content: (data) => (data.dealStatus ? '已成交' : '未成交'),
     },
+    {
+      field: 'ownerUserName',
+      label: '负责人',
+    },
     {
       field: 'createTime',
       label: '创建时间',
@@ -60,10 +96,11 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'areaName',
       label: '地址',
-    },
-    {
-      field: 'detailAddress',
-      label: '详细地址',
+      content: (data) => {
+        const areaName = data?.areaName ?? '';
+        const detailAddress = data?.detailAddress ?? '';
+        return [areaName, detailAddress].filter(Boolean).join(' ');
+      },
     },
     {
       field: 'qq',
@@ -82,12 +119,6 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
           value: data?.industryId,
         }),
     },
-    {
-      field: 'level',
-      label: '客户级别',
-      content: (data) =>
-        h(DictTag, { type: DICT_TYPE.CRM_CUSTOMER_LEVEL, value: data?.level }),
-    },
     {
       field: 'contactNextTime',
       label: '下次联系时间',
diff --git a/apps/web-antd/src/views/crm/customer/modules/detail.vue b/apps/web-antd/src/views/crm/customer/detail/index.vue
similarity index 84%
rename from apps/web-antd/src/views/crm/customer/modules/detail.vue
rename to apps/web-antd/src/views/crm/customer/detail/index.vue
index 6c7ccbf8..d93a2059 100644
--- a/apps/web-antd/src/views/crm/customer/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/customer/detail/index.vue
@@ -20,35 +20,30 @@ import {
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
-import { AsyncOperateLog } from '#/components/operate-log';
+import { OperateLog } from '#/components/operate-log';
 import { ACTION_ICON, TableAction } from '#/components/table-action';
-import { BusinessDetailsList } from '#/views/crm/business';
-import { ContactDetailsList } from '#/views/crm/contact';
-import { ContractDetailsList } from '#/views/crm/contract';
-import {
-  CustomerDetailsInfo,
-  CustomerForm,
-  DistributeForm,
-} from '#/views/crm/customer';
+import { $t } from '#/locales';
+import { BusinessDetailsList } from '#/views/crm/business/components';
+import { ContactDetailsList } from '#/views/crm/contact/components';
+import { ContractDetailsList } from '#/views/crm/contract/components';
 import { FollowUp } from '#/views/crm/followup';
 import { PermissionList, TransferForm } from '#/views/crm/permission';
-import {
-  ReceivableDetailsList,
-  ReceivablePlanDetailsList,
-} from '#/views/crm/receivable';
+import { ReceivableDetailsList } from '#/views/crm/receivable/components';
+import { ReceivablePlanDetailsList } from '#/views/crm/receivable/plan/components';
 
-import { useDetailSchema } from './detail-data';
-
-const loading = ref(false);
+import Form from '../modules/form.vue';
+import { useDetailSchema } from './data';
+import DistributeForm from './modules/distribute-form.vue';
+import Info from './modules/info.vue';
 
 const route = useRoute();
 const router = useRouter();
 const tabs = useTabs();
 
-const customerId = ref(0);
-
-const customer = ref<CrmCustomerApi.Customer>({} as CrmCustomerApi.Customer);
-const customerLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const loading = ref(false); // 加载中
+const customerId = ref(0); // 客户编号
+const customer = ref<CrmCustomerApi.Customer>({} as CrmCustomerApi.Customer); // 客户详情
+const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
 const [Descriptions] = useDescription({
@@ -61,7 +56,7 @@ const [Descriptions] = useDescription({
 });
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: CustomerForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
@@ -75,18 +70,20 @@ const [DistributeModal, distributeModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-/** 加载详情 */
+/** 加载客户详情 */
 async function loadCustomerDetail() {
   loading.value = true;
-  customerId.value = Number(route.params.id);
-  const data = await getCustomer(customerId.value);
-  const logList = await getOperateLogPage({
-    bizType: BizTypeEnum.CRM_CUSTOMER,
-    bizId: customerId.value,
-  });
-  customerLogList.value = logList.list;
-  customer.value = data;
-  loading.value = false;
+  try {
+    customer.value = await getCustomer(customerId.value);
+    // 操作日志
+    const res = await getOperateLogPage({
+      bizType: BizTypeEnum.CRM_CUSTOMER,
+      bizId: customerId.value,
+    });
+    logList.value = res.list;
+  } finally {
+    loading.value = false;
+  }
 }
 
 /** 返回列表页 */
@@ -95,7 +92,7 @@ function handleBack() {
   router.push('/crm/customer');
 }
 
-/** 编辑 */
+/** 编辑客户 */
 function handleEdit() {
   formModalApi.setData({ id: customerId.value }).open();
 }
@@ -198,7 +195,7 @@ async function handleUpdateDealStatus(): Promise<boolean | undefined> {
   });
 }
 
-// 加载数据
+/** 加载数据 */
 onMounted(() => {
   customerId.value = Number(route.params.id);
   loadCustomerDetail();
@@ -213,6 +210,12 @@ onMounted(() => {
     <template #extra>
       <TableAction
         :actions="[
+          {
+            label: '返回',
+            type: 'default',
+            icon: 'lucide:arrow-left',
+            onClick: handleBack,
+          },
           {
             label: $t('ui.actionTitle.edit'),
             type: 'primary',
@@ -273,12 +276,12 @@ onMounted(() => {
     </Card>
     <Card class="mt-4 min-h-[60%]">
       <Tabs>
-        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
-          <CustomerDetailsInfo :customer="customer" />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="跟进记录" key="2" :force-render="true">
+        <Tabs.TabPane tab="跟进记录" key="1" :force-render="true">
           <FollowUp :biz-id="customerId" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
         </Tabs.TabPane>
+        <Tabs.TabPane tab="基本信息" key="2" :force-render="true">
+          <Info :customer="customer" />
+        </Tabs.TabPane>
         <Tabs.TabPane tab="联系人" key="3" :force-render="true">
           <ContactDetailsList
             :biz-id="customerId"
@@ -313,7 +316,7 @@ onMounted(() => {
           <ReceivableDetailsList :customer-id="customerId" />
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="8" :force-render="true">
-          <AsyncOperateLog :log-list="customerLogList" />
+          <OperateLog :log-list="logList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>
diff --git a/apps/web-antd/src/views/crm/customer/poolConfig/distribute-form.vue b/apps/web-antd/src/views/crm/customer/detail/modules/distribute-form.vue
similarity index 69%
rename from apps/web-antd/src/views/crm/customer/poolConfig/distribute-form.vue
rename to apps/web-antd/src/views/crm/customer/detail/modules/distribute-form.vue
index 64ca6c7c..53787ca7 100644
--- a/apps/web-antd/src/views/crm/customer/poolConfig/distribute-form.vue
+++ b/apps/web-antd/src/views/crm/customer/detail/modules/distribute-form.vue
@@ -1,17 +1,15 @@
 <script lang="ts" setup>
 import { useVbenModal } from '@vben/common-ui';
-import { useUserStore } from '@vben/stores';
 
 import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 import { distributeCustomer } from '#/api/crm/customer';
-import { getSimpleUserList } from '#/api/system/user';
 import { $t } from '#/locales';
 
-const emit = defineEmits(['success']);
+import { useDistributeFormSchema } from '../data';
 
-const userStore = useUserStore();
+const emit = defineEmits(['success']);
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -22,30 +20,7 @@ const [Form, formApi] = useVbenForm({
     labelWidth: 120,
   },
   layout: 'horizontal',
-  schema: [
-    {
-      component: 'Input',
-      fieldName: 'id',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    {
-      fieldName: 'ownerUserId',
-      label: '负责人',
-      component: 'ApiSelect',
-      componentProps: {
-        api: () => getSimpleUserList(),
-        fieldNames: {
-          label: 'nickname',
-          value: 'id',
-        },
-      },
-      defaultValue: userStore.userInfo?.id,
-      rules: 'required',
-    },
-  ],
+  schema: useDistributeFormSchema(),
   showDefaultActions: false,
 });
 
diff --git a/apps/web-antd/src/views/crm/customer/modules/detail-info.vue b/apps/web-antd/src/views/crm/customer/detail/modules/info.vue
similarity index 94%
rename from apps/web-antd/src/views/crm/customer/modules/detail-info.vue
rename to apps/web-antd/src/views/crm/customer/detail/modules/info.vue
index 8368a816..fb832274 100644
--- a/apps/web-antd/src/views/crm/customer/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/customer/detail/modules/info.vue
@@ -6,7 +6,7 @@ import { Divider } from 'ant-design-vue';
 import { useDescription } from '#/components/description';
 import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
 
-import { useDetailBaseSchema } from './detail-data';
+import { useDetailBaseSchema } from '../data';
 
 defineProps<{
   customer: CrmCustomerApi.Customer; // 客户信息
diff --git a/apps/web-antd/src/views/crm/customer/index.ts b/apps/web-antd/src/views/crm/customer/index.ts
deleted file mode 100644
index 3c2e882a..00000000
--- a/apps/web-antd/src/views/crm/customer/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { defineAsyncComponent } from 'vue';
-
-export const CustomerDetailsInfo = defineAsyncComponent(
-  () => import('./modules/detail-info.vue'),
-);
-
-export const CustomerForm = defineAsyncComponent(
-  () => import('./modules/form.vue'),
-);
-
-export const CustomerDetails = defineAsyncComponent(
-  () => import('./modules/detail.vue'),
-);
-
-export const DistributeForm = defineAsyncComponent(
-  () => import('./poolConfig/distribute-form.vue'),
-);
diff --git a/apps/web-antd/src/views/crm/customer/index.vue b/apps/web-antd/src/views/crm/customer/index.vue
index 960908e7..34ca69af 100644
--- a/apps/web-antd/src/views/crm/customer/index.vue
+++ b/apps/web-antd/src/views/crm/customer/index.vue
@@ -30,16 +30,22 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
-
 const [ImportModal, importModalApi] = useVbenModal({
   connectedComponent: ImportForm,
   destroyOnClose: true,
 });
 
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 处理场景类型的切换 */
+function handleChangeSceneType(key: number | string) {
+  sceneType.value = key.toString();
+  gridApi.query();
+}
+
 /** 导入客户 */
 function handleImport() {
   importModalApi.open();
@@ -47,7 +53,11 @@ function handleImport() {
 
 /** 导出表格 */
 async function handleExport() {
-  const data = await exportCustomer(await gridApi.formApi.getValues());
+  const formValues = await gridApi.formApi.getValues();
+  const data = await exportCustomer({
+    sceneType: sceneType.value,
+    ...formValues,
+  });
   downloadFileFromBlobPart({ fileName: '客户.xls', source: data });
 }
 
@@ -65,15 +75,12 @@ function handleEdit(row: CrmCustomerApi.Customer) {
 async function handleDelete(row: CrmCustomerApi.Customer) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
-    await deleteCustomer(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
-    });
-    onRefresh();
+    await deleteCustomer(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -106,6 +113,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -113,11 +121,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<CrmCustomerApi.Customer>,
 });
-
-function onChangeSceneType(key: number | string) {
-  sceneType.value = key.toString();
-  gridApi.query();
-}
 </script>
 
 <template>
@@ -133,11 +136,11 @@ function onChangeSceneType(key: number | string) {
       />
     </template>
 
-    <FormModal @success="onRefresh" />
-    <ImportModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
+    <ImportModal @success="handleRefresh" />
     <Grid>
       <template #top>
-        <Tabs class="border-none" @change="onChangeSceneType">
+        <Tabs class="-mt-11" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />
@@ -185,12 +188,6 @@ function onChangeSceneType(key: number | string) {
               auth: ['crm:customer:update'],
               onClick: handleEdit.bind(null, row),
             },
-            {
-              label: $t('common.detail'),
-              type: 'link',
-              icon: ACTION_ICON.VIEW,
-              onClick: handleDetail.bind(null, row),
-            },
             {
               label: $t('common.delete'),
               type: 'link',
@@ -208,3 +205,8 @@ function onChangeSceneType(key: number | string) {
     </Grid>
   </Page>
 </template>
+<style scoped>
+:deep(.vxe-toolbar div) {
+  z-index: 1;
+}
+</style>
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 a969e1dc..bdf5ea41 100644
--- a/apps/web-antd/src/views/crm/customer/limitConfig/data.ts
+++ b/apps/web-antd/src/views/crm/customer/limitConfig/data.ts
@@ -3,6 +3,7 @@ import type { VbenFormSchema } from '@vben/common-ui';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
 import { handleTree } from '@vben/utils';
 
 import { LimitConfType } from '#/api/crm/customer/limitConfig';
@@ -20,6 +21,14 @@ export function useFormSchema(confType: LimitConfType): VbenFormSchema[] {
         show: () => false,
       },
     },
+    {
+      fieldName: 'type',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
     {
       fieldName: 'userIds',
       label: '规则适用人群',
@@ -30,10 +39,10 @@ export function useFormSchema(confType: LimitConfType): VbenFormSchema[] {
           label: 'nickname',
           value: 'id',
         },
-        mode: 'tags',
+        mode: 'multiple',
         allowClear: true,
+        placeholder: '请选择规则适用人群',
       },
-      rules: 'required',
     },
     {
       fieldName: 'deptIds',
@@ -49,7 +58,6 @@ export function useFormSchema(confType: LimitConfType): VbenFormSchema[] {
         placeholder: '请选择规则适用部门',
         treeDefaultExpandAll: true,
       },
-      rules: 'required',
     },
     {
       fieldName: 'maxCount',
@@ -58,21 +66,29 @@ export function useFormSchema(confType: LimitConfType): VbenFormSchema[] {
           ? '拥有客户数上限'
           : '锁定客户数上限',
       component: 'InputNumber',
+      componentProps: {
+        placeholder: `请输入${
+          LimitConfType.CUSTOMER_QUANTITY_LIMIT === confType
+            ? '拥有客户数上限'
+            : '锁定客户数上限'
+        }`,
+      },
+      rules: 'required',
     },
     {
       fieldName: 'dealCountEnabled',
       label: '成交客户是否占用拥有客户数',
       component: 'RadioGroup',
       componentProps: {
-        options: [
-          { label: '是', value: true },
-          { label: '否', value: false },
-        ],
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        buttonStyle: 'solid',
+        optionType: 'button',
       },
       dependencies: {
         triggerFields: [''],
         show: () => confType === LimitConfType.CUSTOMER_QUANTITY_LIMIT,
       },
+      defaultValue: false,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/customer/limitConfig/index.vue b/apps/web-antd/src/views/crm/customer/limitConfig/index.vue
index 1981a5bf..ce6165a1 100644
--- a/apps/web-antd/src/views/crm/customer/limitConfig/index.vue
+++ b/apps/web-antd/src/views/crm/customer/limitConfig/index.vue
@@ -21,16 +21,25 @@ import Form from './modules/form.vue';
 
 const configType = ref(LimitConfType.CUSTOMER_QUANTITY_LIMIT);
 
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
-
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
 });
 
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 处理配置类型的切换 */
+function handleChangeConfigType(key: number | string) {
+  configType.value = key as LimitConfType;
+  gridApi.setGridOptions({
+    columns: useGridColumns(configType.value),
+  });
+  handleRefresh();
+}
+
 /** 创建规则 */
 function handleCreate(type: LimitConfType) {
   formModalApi.setData({ type }).open();
@@ -50,15 +59,12 @@ async function handleDelete(
 ) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
-    await deleteCustomerLimitConfig(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-      key: 'action_key_msg',
-    });
-    onRefresh();
+    await deleteCustomerLimitConfig(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -83,6 +89,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -90,14 +97,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<CrmCustomerLimitConfigApi.CustomerLimitConfig>,
 });
-
-function onChangeConfigType(key: number | string) {
-  configType.value = key as LimitConfType;
-  gridApi.setGridOptions({
-    columns: useGridColumns(configType.value),
-  });
-  onRefresh();
-}
 </script>
 
 <template>
@@ -113,10 +112,10 @@ function onChangeConfigType(key: number | string) {
       />
     </template>
 
-    <FormModal />
+    <FormModal @success="handleRefresh" />
     <Grid>
       <template #top>
-        <Tabs class="border-none" @change="onChangeConfigType">
+        <Tabs class="-mt-11" @change="handleChangeConfigType">
           <Tabs.TabPane
             tab="拥有客户数限制"
             :key="LimitConfType.CUSTOMER_QUANTITY_LIMIT"
@@ -167,3 +166,8 @@ function onChangeConfigType(key: number | string) {
     </Grid>
   </Page>
 </template>
+<style scoped>
+:deep(.vxe-toolbar div) {
+  z-index: 1;
+}
+</style>
diff --git a/apps/web-antd/src/views/crm/customer/limitConfig/modules/form.vue b/apps/web-antd/src/views/crm/customer/limitConfig/modules/form.vue
index 7d082bf1..392a8527 100644
--- a/apps/web-antd/src/views/crm/customer/limitConfig/modules/form.vue
+++ b/apps/web-antd/src/views/crm/customer/limitConfig/modules/form.vue
@@ -34,7 +34,7 @@ const [Form, formApi] = useVbenForm({
       class: 'w-full',
     },
     formItemClass: 'col-span-2',
-    labelWidth: 120,
+    labelWidth: 200,
   },
   layout: 'horizontal',
   schema: useFormSchema(confType.value),
diff --git a/apps/web-antd/src/views/crm/customer/modules/form.vue b/apps/web-antd/src/views/crm/customer/modules/form.vue
index 1b589305..fd079927 100644
--- a/apps/web-antd/src/views/crm/customer/modules/form.vue
+++ b/apps/web-antd/src/views/crm/customer/modules/form.vue
@@ -29,6 +29,7 @@ const [Form, formApi] = useVbenForm({
     componentProps: {
       class: 'w-full',
     },
+    labelWidth: 100,
   },
   wrapperClass: 'grid-cols-2',
   layout: 'horizontal',
diff --git a/apps/web-antd/src/views/crm/customer/modules/import-form.vue b/apps/web-antd/src/views/crm/customer/modules/import-form.vue
index 237671e1..a943b4b5 100644
--- a/apps/web-antd/src/views/crm/customer/modules/import-form.vue
+++ b/apps/web-antd/src/views/crm/customer/modules/import-form.vue
@@ -1,16 +1,17 @@
 <script lang="ts" setup>
 import type { FileType } from 'ant-design-vue/es/upload/interface';
 
-import { useVbenModal, z } from '@vben/common-ui';
+import { useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart } from '@vben/utils';
 
 import { Button, message, Upload } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 import { importCustomer, importCustomerTemplate } from '#/api/crm/customer';
-import { getSimpleUserList } from '#/api/system/user';
 import { $t } from '#/locales';
 
+import { useImportFormSchema } from '../data';
+
 const emit = defineEmits(['success']);
 
 const [Form, formApi] = useVbenForm({
@@ -19,40 +20,7 @@ const [Form, formApi] = useVbenForm({
     labelWidth: 120,
   },
   layout: 'horizontal',
-  schema: [
-    {
-      fieldName: 'ownerUserId',
-      label: '负责人',
-      component: 'ApiSelect',
-      componentProps: {
-        api: () => getSimpleUserList(),
-        fieldNames: {
-          label: 'nickname',
-          value: 'id',
-        },
-        class: 'w-full',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'file',
-      label: '用户数据',
-      component: 'Upload',
-      rules: 'required',
-      help: '仅允许导入 xls、xlsx 格式文件',
-    },
-    {
-      fieldName: 'updateSupport',
-      label: '是否覆盖',
-      component: 'Switch',
-      componentProps: {
-        checkedChildren: '是',
-        unCheckedChildren: '否',
-      },
-      rules: z.boolean().default(false),
-      help: '是否更新已经存在的用户数据',
-    },
-  ],
+  schema: useImportFormSchema(),
   showDefaultActions: false,
 });
 
diff --git a/apps/web-antd/src/views/crm/customer/pool/data.ts b/apps/web-antd/src/views/crm/customer/pool/data.ts
index 8deb8883..d057b67e 100644
--- a/apps/web-antd/src/views/crm/customer/pool/data.ts
+++ b/apps/web-antd/src/views/crm/customer/pool/data.ts
@@ -13,6 +13,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入客户名称',
+        allowClear: true,
       },
     },
     {
@@ -21,6 +22,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入手机',
+        allowClear: true,
       },
     },
     {
@@ -30,6 +32,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, 'number'),
         placeholder: '请选择所属行业',
+        allowClear: true,
       },
     },
     {
@@ -39,6 +42,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL, 'number'),
         placeholder: '请选择客户级别',
+        allowClear: true,
       },
     },
     {
@@ -48,6 +52,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE, 'number'),
         placeholder: '请选择客户来源',
+        allowClear: true,
       },
     },
   ];
diff --git a/apps/web-antd/src/views/crm/customer/pool/index.vue b/apps/web-antd/src/views/crm/customer/pool/index.vue
index cb166ccf..27ac4584 100644
--- a/apps/web-antd/src/views/crm/customer/pool/index.vue
+++ b/apps/web-antd/src/views/crm/customer/pool/index.vue
@@ -50,6 +50,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
diff --git a/apps/web-antd/src/views/crm/customer/poolConfig/index.vue b/apps/web-antd/src/views/crm/customer/poolConfig/index.vue
index 75244ab1..f5c36202 100644
--- a/apps/web-antd/src/views/crm/customer/poolConfig/index.vue
+++ b/apps/web-antd/src/views/crm/customer/poolConfig/index.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
 import type { CrmCustomerPoolConfigApi } from '#/api/crm/customer/poolConfig';
 
 import { onMounted } from 'vue';
@@ -16,95 +17,96 @@ import { $t } from '#/locales';
 
 const emit = defineEmits(['success']);
 
+const schema: VbenFormSchema[] = [
+  {
+    component: 'RadioGroup',
+    fieldName: 'enabled',
+    label: '客户公海规则设置',
+    componentProps: {
+      options: [
+        { label: '开启', value: true },
+        { label: '关闭', value: false },
+      ],
+    },
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'contactExpireDays',
+    componentProps: {
+      min: 0,
+      precision: 0,
+    },
+    renderComponentContent: () => ({
+      addonAfter: () => '天不跟进或',
+    }),
+    dependencies: {
+      triggerFields: ['enabled'],
+      show: (value) => value.enabled,
+    },
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'dealExpireDays',
+    renderComponentContent: () => ({
+      addonBefore: () => '或',
+      addonAfter: () => '天未成交',
+    }),
+    componentProps: {
+      min: 0,
+      precision: 0,
+    },
+    dependencies: {
+      triggerFields: ['enabled'],
+      show: (value) => value.enabled,
+    },
+  },
+  {
+    component: 'RadioGroup',
+    fieldName: 'notifyEnabled',
+    label: '提前提醒设置',
+    componentProps: {
+      options: [
+        { label: '开启', value: true },
+        { label: '关闭', value: false },
+      ],
+    },
+    dependencies: {
+      triggerFields: ['enabled'],
+      show: (value) => value.enabled,
+    },
+    defaultValue: false,
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'notifyDays',
+    componentProps: {
+      min: 0,
+      precision: 0,
+    },
+    renderComponentContent: () => ({
+      addonBefore: () => '提前',
+      addonAfter: () => '天提醒',
+    }),
+    dependencies: {
+      triggerFields: ['notifyEnabled'],
+      show: (value) => value.enabled && value.notifyEnabled,
+    },
+  },
+];
+
 const [Form, formApi] = useVbenForm({
   commonConfig: {
-    // 所有表单项
     labelClass: 'w-2/6',
   },
   layout: 'horizontal',
   wrapperClass: 'grid-cols-1',
   actionWrapperClass: 'text-center',
-  schema: [
-    {
-      component: 'RadioGroup',
-      fieldName: 'enabled',
-      label: '客户公海规则设置',
-      componentProps: {
-        options: [
-          { label: '开启', value: true },
-          { label: '关闭', value: false },
-        ],
-      },
-    },
-    {
-      component: 'InputNumber',
-      fieldName: 'contactExpireDays',
-      componentProps: {
-        min: 0,
-        precision: 0,
-      },
-      renderComponentContent: () => ({
-        addonAfter: () => '天不跟进或',
-      }),
-      dependencies: {
-        triggerFields: ['enabled'],
-        show: (value) => value.enabled,
-      },
-    },
-    {
-      component: 'InputNumber',
-      fieldName: 'dealExpireDays',
-      renderComponentContent: () => ({
-        addonBefore: () => '或',
-        addonAfter: () => '天未成交',
-      }),
-      componentProps: {
-        min: 0,
-        precision: 0,
-      },
-      dependencies: {
-        triggerFields: ['enabled'],
-        show: (value) => value.enabled,
-      },
-    },
-    {
-      component: 'RadioGroup',
-      fieldName: 'notifyEnabled',
-      label: '提前提醒设置',
-      componentProps: {
-        options: [
-          { label: '开启', value: true },
-          { label: '关闭', value: false },
-        ],
-      },
-      dependencies: {
-        triggerFields: ['enabled'],
-        show: (value) => value.enabled,
-      },
-      defaultValue: false,
-    },
-    {
-      component: 'InputNumber',
-      fieldName: 'notifyDays',
-      componentProps: {
-        min: 0,
-        precision: 0,
-      },
-      renderComponentContent: () => ({
-        addonBefore: () => '提前',
-        addonAfter: () => '天提醒',
-      }),
-      dependencies: {
-        triggerFields: ['notifyEnabled'],
-        show: (value) => value.enabled && value.notifyEnabled,
-      },
-    },
-  ],
-  // 提交函数
-  handleSubmit: onSubmit,
+  schema,
+  handleSubmit,
 });
 
-async function onSubmit() {
+/** 提交表单 */
+async function handleSubmit() {
   const { valid } = await formApi.validate();
   if (!valid) {
     return;
@@ -120,26 +122,20 @@ async function onSubmit() {
   if (!data.notifyEnabled) {
     data.notifyDays = undefined;
   }
-  formApi.setValues(data);
-  try {
-    await saveCustomerPoolConfig(data);
-    // 关闭并提示
-    emit('success');
-    message.success($t('ui.actionMessage.operationSuccess'));
-  } finally {
-    formApi.setValues(data);
-  }
+  await saveCustomerPoolConfig(data);
+  // 关闭并提示
+  await formApi.setValues(data);
+  emit('success');
+  message.success($t('ui.actionMessage.operationSuccess'));
 }
 
+/** 获取配置 */
 async function getConfigInfo() {
-  try {
-    const res = await getCustomerPoolConfig();
-    formApi.setValues(res);
-  } catch (error) {
-    console.error(error);
-  }
+  const res = await getCustomerPoolConfig();
+  await formApi.setValues(res);
 }
 
+/** 初始化 */
 onMounted(() => {
   getConfigInfo();
 });
diff --git a/apps/web-antd/src/views/crm/followup/data.ts b/apps/web-antd/src/views/crm/followup/data.ts
index 6c7f8b14..b64a59ec 100644
--- a/apps/web-antd/src/views/crm/followup/data.ts
+++ b/apps/web-antd/src/views/crm/followup/data.ts
@@ -1,7 +1,162 @@
+import type { Ref } from 'vue';
+
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { DescriptionItemSchema } from '#/components/description';
 
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
 import { formatDateTime } from '@vben/utils';
 
+import { getBusinessPageByCustomer } from '#/api/crm/business';
+import { getContactPageByCustomer } from '#/api/crm/contact';
+import { BizTypeEnum } from '#/api/crm/permission';
+
+/** 新增/修改的表单 */
+export function useFormSchema(
+  bizId: Ref<number | undefined>,
+): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'bizId',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'bizType',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '跟进类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.CRM_FOLLOW_UP_TYPE, 'number'),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'nextTime',
+      label: '下次联系时间',
+      component: 'DatePicker',
+      componentProps: {
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'content',
+      label: '跟进内容',
+      component: 'Textarea',
+      rules: 'required',
+    },
+    {
+      fieldName: 'picUrls',
+      label: '图片',
+      component: 'ImageUpload',
+    },
+    {
+      fieldName: 'fileUrls',
+      label: '附件',
+      component: 'FileUpload',
+    },
+    {
+      fieldName: 'contactIds',
+      label: '关联联系人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: async () => {
+          if (!bizId.value) {
+            return [];
+          }
+          const res = await getContactPageByCustomer({
+            pageNo: 1,
+            pageSize: 100,
+            customerId: bizId.value,
+          });
+          return res.list;
+        },
+        mode: 'multiple',
+        fieldNames: { label: 'name', value: 'id' },
+      },
+    },
+    {
+      fieldName: 'businessIds',
+      label: '关联商机',
+      component: 'ApiSelect',
+      componentProps: {
+        api: async () => {
+          if (!bizId.value) {
+            return [];
+          }
+          const res = await getBusinessPageByCustomer({
+            pageNo: 1,
+            pageSize: 100,
+            customerId: bizId.value,
+          });
+          return res.list;
+        },
+        mode: 'multiple',
+        fieldNames: { label: 'name', value: 'id' },
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  bizType: number,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    { field: 'creatorName', title: '跟进人' },
+    {
+      field: 'type',
+      title: '跟进类型',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_FOLLOW_UP_TYPE },
+      },
+    },
+    { field: 'content', title: '跟进内容' },
+    {
+      field: 'nextTime',
+      title: '下次联系时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'contacts',
+      title: '关联联系人',
+      visible: bizType === BizTypeEnum.CRM_CUSTOMER,
+      slots: { default: 'contacts' },
+    },
+    {
+      field: 'businesses',
+      title: '关联商机',
+      visible: bizType === BizTypeEnum.CRM_CUSTOMER,
+      slots: { default: 'businesses' },
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
 /** 详情页的系统字段 */
 export function useFollowUpDetailSchema(): DescriptionItemSchema[] {
   return [
@@ -33,4 +188,4 @@ export function useFollowUpDetailSchema(): DescriptionItemSchema[] {
       content: (data) => formatDateTime(data?.updateTime) as string,
     },
   ];
-}
+}
\ No newline at end of file
diff --git a/apps/web-antd/src/views/crm/followup/index.ts b/apps/web-antd/src/views/crm/followup/index.ts
index 560abe8c..911cbed5 100644
--- a/apps/web-antd/src/views/crm/followup/index.ts
+++ b/apps/web-antd/src/views/crm/followup/index.ts
@@ -1,3 +1 @@
-import { defineAsyncComponent } from 'vue';
-
-export const FollowUp = defineAsyncComponent(() => import('./index.vue'));
+export { default as FollowUp } from './index.vue';
diff --git a/apps/web-antd/src/views/crm/followup/index.vue b/apps/web-antd/src/views/crm/followup/index.vue
index f1e606e7..1467db44 100644
--- a/apps/web-antd/src/views/crm/followup/index.vue
+++ b/apps/web-antd/src/views/crm/followup/index.vue
@@ -6,7 +6,6 @@ import { watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { useVbenModal } from '@vben/common-ui';
-import { DICT_TYPE } from '@vben/constants';
 
 import { Button, message } from 'ant-design-vue';
 
@@ -15,9 +14,9 @@ import {
   deleteFollowUpRecord,
   getFollowUpRecordPage,
 } from '#/api/crm/followup';
-import { BizTypeEnum } from '#/api/crm/permission';
 import { $t } from '#/locales';
 
+import { useGridColumns } from './data';
 import FollowUpRecordForm from './modules/form.vue';
 
 /** 跟进记录列表 */
@@ -31,7 +30,7 @@ const props = defineProps<{
 const { push } = useRouter();
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
@@ -44,16 +43,13 @@ function handleCreate() {
 async function handleDelete(row: CrmFollowUpApi.FollowUpRecord) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteFollowUpRecord(row.id);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-      key: 'action_key_msg',
-    });
-    onRefresh();
-  } catch {
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
     hideLoading();
   }
 }
@@ -75,45 +71,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: [
-      {
-        field: 'createTime',
-        title: '创建时间',
-        formatter: 'formatDateTime',
-      },
-      { field: 'creatorName', title: '跟进人' },
-      {
-        field: 'type',
-        title: '跟进类型',
-        cellRender: {
-          name: 'CellDict',
-          props: { type: DICT_TYPE.CRM_FOLLOW_UP_TYPE },
-        },
-      },
-      { field: 'content', title: '跟进内容' },
-      {
-        field: 'nextTime',
-        title: '下次联系时间',
-        formatter: 'formatDateTime',
-      },
-      {
-        field: 'contacts',
-        title: '关联联系人',
-        visible: props.bizType === BizTypeEnum.CRM_CUSTOMER,
-        slots: { default: 'contacts' },
-      },
-      {
-        field: 'businesses',
-        title: '关联商机',
-        visible: props.bizType === BizTypeEnum.CRM_CUSTOMER,
-        slots: { default: 'businesses' },
-      },
-      {
-        field: 'actions',
-        title: '操作',
-        slots: { default: 'actions' },
-      },
-    ],
+    columns: useGridColumns(props.bizType),
     height: 600,
     keepSource: true,
     proxyConfig: {
@@ -130,6 +88,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -137,6 +96,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<CrmFollowUpApi.FollowUpRecord>,
 });
 
+/** 监听业务 ID 变化 */
 watch(
   () => props.bizId,
   () => {
@@ -147,7 +107,7 @@ watch(
 
 <template>
   <div>
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid>
       <template #toolbar-tools>
         <TableAction
@@ -162,13 +122,25 @@ watch(
         />
       </template>
       <template #contacts="{ row }">
-        <Button type="link" @click="openContactDetail(row.id)">
-          {{ row.name }}
+        <Button
+          v-for="contact in row.contacts || []"
+          :key="`contact-${contact.id}`"
+          type="link"
+          class="ml-2"
+          @click="openContactDetail(contact.id)"
+        >
+          {{ contact.name }}
         </Button>
       </template>
       <template #businesses="{ row }">
-        <Button type="link" @click="openBusinessDetail(row.id)">
-          {{ row.name }}
+        <Button
+          v-for="business in row.businesses || []"
+          :key="`business-${business.id}`"
+          type="link"
+          class="ml-2"
+          @click="openBusinessDetail(business.id)"
+        >
+          {{ business.name }}
         </Button>
       </template>
       <template #actions="{ row }">
@@ -180,7 +152,7 @@ watch(
               danger: true,
               icon: ACTION_ICON.DELETE,
               popConfirm: {
-                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
                 confirm: handleDelete.bind(null, row),
               },
             },
diff --git a/apps/web-antd/src/views/crm/followup/modules/form.vue b/apps/web-antd/src/views/crm/followup/modules/form.vue
index 80591dec..b373555b 100644
--- a/apps/web-antd/src/views/crm/followup/modules/form.vue
+++ b/apps/web-antd/src/views/crm/followup/modules/form.vue
@@ -4,17 +4,15 @@ import type { CrmFollowUpApi } from '#/api/crm/followup';
 import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
-import { DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
 
 import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import { getBusinessPageByCustomer } from '#/api/crm/business';
-import { getContactPageByCustomer } from '#/api/crm/contact';
 import { createFollowUpRecord } from '#/api/crm/followup';
 import { $t } from '#/locales';
 
+import { useFormSchema } from '../data';
+
 const emit = defineEmits(['success']);
 
 const bizId = ref<number>();
@@ -29,94 +27,7 @@ const [Form, formApi] = useVbenForm({
     labelWidth: 120,
   },
   layout: 'horizontal',
-  schema: [
-    {
-      component: 'Input',
-      fieldName: 'bizId',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    {
-      component: 'Input',
-      fieldName: 'bizType',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    {
-      fieldName: 'type',
-      label: '跟进类型',
-      component: 'Select',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.CRM_FOLLOW_UP_TYPE, 'number'),
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'nextTime',
-      label: '下次联系时间',
-      component: 'DatePicker',
-      componentProps: {
-        showTime: false,
-        format: 'YYYY-MM-DD HH:mm:ss',
-        valueFormat: 'x',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'content',
-      label: '跟进内容',
-      component: 'Textarea',
-      rules: 'required',
-    },
-    {
-      fieldName: 'picUrls',
-      label: '图片',
-      component: 'ImageUpload',
-    },
-    {
-      fieldName: 'fileUrls',
-      label: '附件',
-      component: 'FileUpload',
-    },
-    {
-      fieldName: 'contactIds',
-      label: '关联联系人',
-      component: 'ApiSelect',
-      componentProps: {
-        api: async () => {
-          const res = await getContactPageByCustomer({
-            pageNo: 1,
-            pageSize: 100,
-            customerId: bizId.value,
-          });
-          return res.list;
-        },
-        mode: 'multiple',
-        fieldNames: { label: 'name', value: 'id' },
-      },
-    },
-    {
-      fieldName: 'businessIds',
-      label: '关联商机',
-      component: 'ApiSelect',
-      componentProps: {
-        api: async () => {
-          const res = await getBusinessPageByCustomer({
-            pageNo: 1,
-            pageSize: 100,
-            customerId: bizId.value,
-          });
-          return res.list;
-        },
-        mode: 'multiple',
-        fieldNames: { label: 'name', value: 'id' },
-      },
-    },
-  ],
+  schema: useFormSchema(bizId),
   showDefaultActions: false,
 });
 
@@ -154,6 +65,7 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     try {
+      // 设置到 values
       await formApi.setValues(data);
     } finally {
       modalApi.unlock();
diff --git a/apps/web-antd/src/views/crm/permission/index.ts b/apps/web-antd/src/views/crm/permission/index.ts
index 4d9f097c..2988df4d 100644
--- a/apps/web-antd/src/views/crm/permission/index.ts
+++ b/apps/web-antd/src/views/crm/permission/index.ts
@@ -1,13 +1,2 @@
-import { defineAsyncComponent } from 'vue';
-
-export const PermissionList = defineAsyncComponent(
-  () => import('./modules/permission-list.vue'),
-);
-
-export const PermissionForm = defineAsyncComponent(
-  () => import('./modules/permission-form.vue'),
-);
-
-export const TransferForm = defineAsyncComponent(
-  () => import('./modules/transfer-form.vue'),
-);
+export { default as PermissionList } from './modules/list.vue';
+export { default as TransferForm } from './modules/transfer-form.vue';
diff --git a/apps/web-antd/src/views/crm/permission/modules/permission-form.vue b/apps/web-antd/src/views/crm/permission/modules/form.vue
similarity index 100%
rename from apps/web-antd/src/views/crm/permission/modules/permission-form.vue
rename to apps/web-antd/src/views/crm/permission/modules/form.vue
diff --git a/apps/web-antd/src/views/crm/permission/modules/permission-list.vue b/apps/web-antd/src/views/crm/permission/modules/list.vue
similarity index 90%
rename from apps/web-antd/src/views/crm/permission/modules/permission-list.vue
rename to apps/web-antd/src/views/crm/permission/modules/list.vue
index d52d75be..13f0fb72 100644
--- a/apps/web-antd/src/views/crm/permission/modules/permission-list.vue
+++ b/apps/web-antd/src/views/crm/permission/modules/list.vue
@@ -19,7 +19,7 @@ import {
 import { $t } from '#/locales';
 
 import { useGridColumns } from './data';
-import Form from './permission-form.vue';
+import Form from './form.vue';
 
 const props = defineProps<{
   bizId: number; // 模块数据编号
@@ -38,13 +38,14 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-// 校验负责人权限和编辑权限
-const validateOwnerUser = ref(false);
-const validateWrite = ref(false);
-const isPool = ref(false);
+const userStore = useUserStore();
+
+const validateOwnerUser = ref(false); // 负责人权限
+const validateWrite = ref(false); // 编辑权限
+const isPool = ref(false); // 是否是公海
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
@@ -62,6 +63,7 @@ function setCheckedRows({
   checkedRows.value = records;
 }
 
+/** 新建团队成员 */
 function handleCreate() {
   formModalApi
     .setData({
@@ -71,6 +73,7 @@ function handleCreate() {
     .open();
 }
 
+/** 编辑团队成员 */
 function handleEdit() {
   if (checkedRows.value.length === 0) {
     message.error('请先选择团队成员后操作！');
@@ -90,6 +93,7 @@ function handleEdit() {
     .open();
 }
 
+/** 删除团队成员 */
 function handleDelete() {
   if (checkedRows.value.length === 0) {
     message.error('请先选择团队成员后操作！');
@@ -101,12 +105,12 @@ function handleDelete() {
     })
       .then(async () => {
         const res = await deletePermissionBatch(
-          checkedRows.value.map((item) => item.id as number),
+          checkedRows.value.map((item) => item.id!),
         );
         if (res) {
           // 提示并返回成功
           message.success($t('ui.actionMessage.operationSuccess'));
-          onRefresh();
+          handleRefresh();
           resolve(true);
         } else {
           reject(new Error('移出失败'));
@@ -118,8 +122,7 @@ function handleDelete() {
   });
 }
 
-const userStore = useUserStore();
-
+/** 退出团队 */
 async function handleQuit() {
   const permission = gridApi.grid
     .getData()
@@ -140,7 +143,7 @@ async function handleQuit() {
     message.warning('你不是团队成员！');
     return;
   }
-  await deleteSelfPermission(userPermission.id as number);
+  await deleteSelfPermission(userPermission.id!);
   message.success('退出团队成员成功！');
   emits('quitTeam');
 }
@@ -208,6 +211,7 @@ watch(
           }
         });
     } else {
+      // 特殊：没有成员的情况下，说明没有负责人，是公海
       isPool.value = true;
     }
   },
@@ -219,7 +223,7 @@ watch(
 
 <template>
   <div>
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid>
       <template #toolbar-tools>
         <TableAction
@@ -237,6 +241,7 @@ watch(
               icon: ACTION_ICON.EDIT,
               ifShow: validateOwnerUser,
               onClick: handleEdit,
+              disabled: checkedRows.length === 0,
             },
             {
               label: $t('common.delete'),
@@ -245,6 +250,7 @@ watch(
               icon: ACTION_ICON.DELETE,
               ifShow: validateOwnerUser,
               onClick: handleDelete,
+              disabled: checkedRows.length === 0,
             },
             {
               label: '退出团队',
diff --git a/apps/web-antd/src/views/crm/permission/modules/transfer-form.vue b/apps/web-antd/src/views/crm/permission/modules/transfer-form.vue
index 2986869e..785e53bb 100644
--- a/apps/web-antd/src/views/crm/permission/modules/transfer-form.vue
+++ b/apps/web-antd/src/views/crm/permission/modules/transfer-form.vue
@@ -99,7 +99,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formApi.resetForm();
+      await formApi.resetForm();
       return;
     }
     // 加载数据
@@ -108,7 +108,7 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     bizType.value = data.bizType;
-    formApi.setFieldValue('id', data.bizType);
+    await formApi.setFieldValue('id', data.bizType);
   },
 });
 </script>
diff --git a/apps/web-antd/src/views/crm/product/category/data.ts b/apps/web-antd/src/views/crm/product/category/data.ts
index 01d0996e..dcee3aa5 100644
--- a/apps/web-antd/src/views/crm/product/category/data.ts
+++ b/apps/web-antd/src/views/crm/product/category/data.ts
@@ -57,6 +57,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '分类名称',
       component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入分类名称',
+      },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/product/category/index.vue b/apps/web-antd/src/views/crm/product/category/index.vue
index ca2803b2..1a5c780e 100644
--- a/apps/web-antd/src/views/crm/product/category/index.vue
+++ b/apps/web-antd/src/views/crm/product/category/index.vue
@@ -23,14 +23,21 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
+/** 切换树形展开/收缩状态 */
+const isExpanded = ref(false);
+function handleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
+}
+
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
 /** 创建分类 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 添加下级分类 */
@@ -47,27 +54,17 @@ function handleEdit(row: CrmProductCategoryApi.ProductCategory) {
 async function handleDelete(row: CrmProductCategoryApi.ProductCategory) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
-    await deleteProductCategory(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
-    });
-    onRefresh();
+    await deleteProductCategory(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
-/** 切换树形展开/收缩状态 */
-const isExpanded = ref(false);
-function toggleExpand() {
-  isExpanded.value = !isExpanded.value;
-  gridApi.grid.setAllTreeExpand(isExpanded.value);
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -88,14 +85,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
+      search: true,
     },
     treeConfig: {
       parentField: 'parentId',
       rowField: 'id',
       transform: true,
+      expandAll: true,
       reserve: true,
     },
   } as VxeTableGridOptions<CrmProductCategoryApi.ProductCategory>,
@@ -111,7 +111,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       />
     </template>
 
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid>
       <template #toolbar-tools>
         <TableAction
@@ -126,16 +126,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: isExpanded ? '收缩' : '展开',
               type: 'primary',
-              onClick: toggleExpand,
+              onClick: handleExpand,
             },
           ]"
         />
       </template>
-      <template #name="{ row }">
-        <div class="flex w-full items-center gap-1">
-          <span class="flex-auto">{{ row.name }}</span>
-        </div>
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
diff --git a/apps/web-antd/src/views/crm/product/components/data.ts b/apps/web-antd/src/views/crm/product/components/data.ts
new file mode 100644
index 00000000..385e6aa8
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/components/data.ts
@@ -0,0 +1,111 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+
+/** 产品详情列表的列定义 */
+export function useDetailListColumns(
+  showBusinessPrice: boolean,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'productName',
+      title: '产品名称',
+    },
+    {
+      field: 'productNo',
+      title: '产品条码',
+    },
+    {
+      field: 'productUnit',
+      title: '产品单位',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_PRODUCT_UNIT },
+      },
+    },
+    {
+      field: 'productPrice',
+      title: '产品价格（元）',
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'businessPrice',
+      title: '商机价格（元）',
+      formatter: 'formatAmount2',
+      visible: showBusinessPrice,
+    },
+    {
+      field: 'contractPrice',
+      title: '合同价格（元）',
+      formatter: 'formatAmount2',
+      visible: !showBusinessPrice,
+    },
+    {
+      field: 'count',
+      title: '数量',
+      formatter: 'formatNumber',
+    },
+    {
+      field: 'totalPrice',
+      title: '合计金额（元）',
+      formatter: 'formatAmount2',
+    },
+  ];
+}
+
+/** 产品编辑表格的列定义 */
+export function useProductEditTableColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', title: '序号', minWidth: 50 },
+    {
+      field: 'productId',
+      title: '产品名称',
+      minWidth: 100,
+      slots: { default: 'productId' },
+    },
+    {
+      field: 'productNo',
+      title: '条码',
+      minWidth: 150,
+    },
+    {
+      field: 'productUnit',
+      title: '单位',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_PRODUCT_UNIT },
+      },
+    },
+    {
+      field: 'productPrice',
+      title: '价格（元）',
+      minWidth: 100,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'sellingPrice',
+      title: '售价（元）',
+      minWidth: 100,
+      slots: { default: 'sellingPrice' },
+    },
+    {
+      field: 'count',
+      title: '数量',
+      minWidth: 100,
+      slots: { default: 'count' },
+    },
+    {
+      field: 'totalPrice',
+      title: '合计',
+      minWidth: 100,
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/product/modules/detail-list.vue b/apps/web-antd/src/views/crm/product/components/detail-list.vue
similarity index 88%
rename from apps/web-antd/src/views/crm/product/modules/detail-list.vue
rename to apps/web-antd/src/views/crm/product/components/detail-list.vue
index f31ddd88..5ce23bc0 100644
--- a/apps/web-antd/src/views/crm/product/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/product/components/detail-list.vue
@@ -1,3 +1,4 @@
+<!-- 产品列表：用于【商机】【合同】详情中，展示它们关联的产品列表 -->
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmProductApi } from '#/api/crm/product';
@@ -11,16 +12,20 @@ import { getBusiness } from '#/api/crm/business';
 import { getContract } from '#/api/crm/contract';
 import { BizTypeEnum } from '#/api/crm/permission';
 
-import { useDetailListColumns } from './detail-data';
+import { useDetailListColumns } from './data';
 
+/** 组件入参 */
 const props = defineProps<{
   bizId: number;
   bizType: BizTypeEnum;
 }>();
 
+/** 整单折扣 */
 const discountPercent = ref(0);
+/** 产品总金额 */
 const totalProductPrice = ref(0);
 
+/** 构建产品列表表格 */
 const [Grid] = useVbenVxeGrid({
   gridOptions: {
     columns: useDetailListColumns(props.bizType === BizTypeEnum.CRM_BUSINESS),
@@ -48,6 +53,7 @@ const [Grid] = useVbenVxeGrid({
     keepSource: true,
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
   } as VxeTableGridOptions<CrmProductApi.Product>,
 });
diff --git a/apps/web-antd/src/views/crm/product/modules/product-table.vue b/apps/web-antd/src/views/crm/product/components/edit-table.vue
similarity index 91%
rename from apps/web-antd/src/views/crm/product/modules/product-table.vue
rename to apps/web-antd/src/views/crm/product/components/edit-table.vue
index 9518396d..75ec8f98 100644
--- a/apps/web-antd/src/views/crm/product/modules/product-table.vue
+++ b/apps/web-antd/src/views/crm/product/components/edit-table.vue
@@ -12,8 +12,9 @@ import { InputNumber, Select } from 'ant-design-vue';
 import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { getProductSimpleList } from '#/api/crm/product';
+import { $t } from '#/locales';
 
-import { useProductEditTableColumns } from '../data';
+import { useProductEditTableColumns } from './data';
 
 const props = defineProps<{
   bizType: BizTypeEnum;
@@ -24,16 +25,20 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:products']);
 
+/** 表格内部数据 */
 const tableData = ref<any[]>([]);
 
+/** 添加产品行 */
 function handleAdd() {
   gridApi.grid.insertAt(null, -1);
 }
 
+/** 删除产品行 */
 function handleDelete(row: CrmProductApi.Product) {
   gridApi.grid.remove(row);
 }
 
+/** 切换产品时同步基础信息 */
 function handleProductChange(productId: any, row: any) {
   const product = productOptions.value.find((p) => p.id === productId);
   if (!product) {
@@ -48,11 +53,13 @@ function handleProductChange(productId: any, row: any) {
   handleUpdateValue(row);
 }
 
+/** 金额变动时重新计算合计 */
 function handlePriceChange(row: any) {
   row.totalPrice = erpPriceMultiply(row.sellingPrice, row.count) ?? 0;
   handleUpdateValue(row);
 }
 
+/** 将最新数据写回并通知父组件 */
 function handleUpdateValue(row: any) {
   const index = tableData.value.findIndex((item) => item.id === row.id);
   if (props.bizType === BizTypeEnum.CRM_BUSINESS) {
@@ -69,7 +76,6 @@ function handleUpdateValue(row: any) {
   emit('update:products', [...tableData.value]);
 }
 
-/** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     editConfig: {
@@ -84,6 +90,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     keepSource: true,
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     pagerConfig: {
       enabled: false,
@@ -112,15 +119,17 @@ watch(
         item.sellingPrice = item.contractPrice;
       });
     }
-    gridApi.grid.reloadData(tableData.value);
+    await gridApi.grid.reloadData(tableData.value);
   },
   {
     immediate: true,
   },
 );
 
-/** 初始化 */
+/** 产品下拉选项 */
 const productOptions = ref<CrmProductApi.Product[]>([]);
+
+/** 初始化 */
 onMounted(async () => {
   productOptions.value = await getProductSimpleList();
 });
@@ -133,7 +142,7 @@ onMounted(async () => {
         v-model:value="row.productId"
         :options="productOptions"
         :field-names="{ label: 'name', value: 'id' }"
-        style="width: 100%"
+        class="w-full"
         @change="handleProductChange($event, row)"
       />
     </template>
diff --git a/apps/web-antd/src/views/crm/product/components/index.ts b/apps/web-antd/src/views/crm/product/components/index.ts
new file mode 100644
index 00000000..dc527926
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/components/index.ts
@@ -0,0 +1,2 @@
+export { default as ProductDetailsList } from './detail-list.vue';
+export { default as ProductEditTable } from './edit-table.vue';
diff --git a/apps/web-antd/src/views/crm/product/data.ts b/apps/web-antd/src/views/crm/product/data.ts
index 180bfaf2..e3702280 100644
--- a/apps/web-antd/src/views/crm/product/data.ts
+++ b/apps/web-antd/src/views/crm/product/data.ts
@@ -27,18 +27,28 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '产品名称',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入产品名称',
+        allowClear: true,
+      },
     },
     {
       component: 'ApiSelect',
       fieldName: 'ownerUserId',
       label: '负责人',
       rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values) => values.id,
+      },
       componentProps: {
         api: () => getSimpleUserList(),
         fieldNames: {
           label: 'nickname',
           value: 'id',
         },
+        placeholder: '请选择负责人',
+        allowClear: true,
       },
       defaultValue: userStore.userInfo?.id,
     },
@@ -47,6 +57,10 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'no',
       label: '产品编码',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入产品编码',
+        allowClear: true,
+      },
     },
     {
       component: 'ApiTreeSelect',
@@ -59,6 +73,8 @@ export function useFormSchema(): VbenFormSchema[] {
           return handleTree(data);
         },
         fieldNames: { label: 'name', value: 'id', children: 'children' },
+        placeholder: '请选择产品类型',
+        allowClear: true,
       },
     },
     {
@@ -67,6 +83,8 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.CRM_PRODUCT_UNIT, 'number'),
+        placeholder: '请选择产品单位',
+        allowClear: true,
       },
       rules: 'required',
     },
@@ -79,12 +97,17 @@ export function useFormSchema(): VbenFormSchema[] {
         min: 0,
         precision: 2,
         step: 0.1,
+        placeholder: '请输入产品价格',
       },
     },
     {
       component: 'Textarea',
       fieldName: 'description',
       label: '产品描述',
+      componentProps: {
+        placeholder: '请输入产品描述',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'status',
@@ -107,6 +130,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '产品名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入产品名称',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'status',
@@ -114,6 +141,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         allowClear: true,
+        placeholder: '请选择上架状态',
         options: getDictOptions(DICT_TYPE.CRM_PRODUCT_STATUS, 'number'),
       },
     },
@@ -203,60 +231,3 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
   ];
 }
-
-/** 代码生成表格列定义 */
-export function useProductEditTableColumns(): VxeTableGridOptions['columns'] {
-  return [
-    { type: 'seq', title: '序号', minWidth: 50 },
-    {
-      field: 'productId',
-      title: '产品名称',
-      minWidth: 100,
-      slots: { default: 'productId' },
-    },
-    {
-      field: 'productNo',
-      title: '条码',
-      minWidth: 150,
-    },
-    {
-      field: 'productUnit',
-      title: '单位',
-      minWidth: 100,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_PRODUCT_UNIT },
-      },
-    },
-    {
-      field: 'productPrice',
-      title: '价格（元）',
-      minWidth: 100,
-      formatter: 'formatAmount2',
-    },
-    {
-      field: 'sellingPrice',
-      title: '售价（元）',
-      minWidth: 100,
-      slots: { default: 'sellingPrice' },
-    },
-    {
-      field: 'count',
-      title: '数量',
-      minWidth: 100,
-      slots: { default: 'count' },
-    },
-    {
-      field: 'totalPrice',
-      title: '合计',
-      minWidth: 100,
-      formatter: 'formatAmount2',
-    },
-    {
-      title: '操作',
-      width: 80,
-      fixed: 'right',
-      slots: { default: 'actions' },
-    },
-  ];
-}
diff --git a/apps/web-antd/src/views/crm/product/modules/detail-data.ts b/apps/web-antd/src/views/crm/product/detail/data.ts
similarity index 57%
rename from apps/web-antd/src/views/crm/product/modules/detail-data.ts
rename to apps/web-antd/src/views/crm/product/detail/data.ts
index ac98ee1f..dc9bb6e1 100644
--- a/apps/web-antd/src/views/crm/product/modules/detail-data.ts
+++ b/apps/web-antd/src/views/crm/product/detail/data.ts
@@ -1,4 +1,3 @@
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -23,7 +22,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     },
     {
       field: 'price',
-      label: '产品价格',
+      label: '产品价格（元）',
       content: (data) => erpPriceInputFormatter(data.price),
     },
     {
@@ -72,53 +71,3 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
   ];
 }
 
-/** 详情列表的字段 */
-export function useDetailListColumns(
-  showBussinePrice: boolean,
-): VxeTableGridOptions['columns'] {
-  return [
-    {
-      field: 'productName',
-      title: '产品名称',
-    },
-    {
-      field: 'productNo',
-      title: '产品条码',
-    },
-    {
-      field: 'productUnit',
-      title: '产品单位',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_PRODUCT_UNIT },
-      },
-    },
-    {
-      field: 'productPrice',
-      title: '产品价格（元）',
-      formatter: 'formatAmount2',
-    },
-    {
-      field: 'businessPrice',
-      title: '商机价格（元）',
-      formatter: 'formatAmount2',
-      visible: showBussinePrice,
-    },
-    {
-      field: 'contractPrice',
-      title: '合同价格（元）',
-      formatter: 'formatAmount2',
-      visible: !showBussinePrice,
-    },
-    {
-      field: 'count',
-      title: '数量',
-      formatter: 'formatNumber',
-    },
-    {
-      field: 'totalPrice',
-      title: '合计金额（元）',
-      formatter: 'formatAmount2',
-    },
-  ];
-}
diff --git a/apps/web-antd/src/views/crm/product/modules/detail.vue b/apps/web-antd/src/views/crm/product/detail/index.vue
similarity index 69%
rename from apps/web-antd/src/views/crm/product/modules/detail.vue
rename to apps/web-antd/src/views/crm/product/detail/index.vue
index 726413fc..156cde00 100644
--- a/apps/web-antd/src/views/crm/product/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/product/detail/index.vue
@@ -14,21 +14,19 @@ import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { getProduct } from '#/api/crm/product';
 import { useDescription } from '#/components/description';
-import { AsyncOperateLog } from '#/components/operate-log';
-import { ProductDetailsInfo } from '#/views/crm/product';
+import { OperateLog } from '#/components/operate-log';
 
-import { useDetailSchema } from './detail-data';
-
-const loading = ref(false);
+import { useDetailSchema } from './data';
+import Info from './modules/info.vue';
 
 const route = useRoute();
 const router = useRouter();
 const tabs = useTabs();
 
-const productId = ref(0);
-
-const product = ref<CrmProductApi.Product>({} as CrmProductApi.Product);
-const productLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const loading = ref(false); // 加载中
+const productId = ref(0); // 产品编号
+const product = ref<CrmProductApi.Product>({} as CrmProductApi.Product); // 产品详情
+const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 
 const [Descriptions] = useDescription({
   componentProps: {
@@ -40,15 +38,19 @@ const [Descriptions] = useDescription({
 });
 
 /** 加载详情 */
-async function loadProductDetail() {
+async function getProductDetail() {
   loading.value = true;
-  const data = await getProduct(productId.value);
-  const logList = await getOperateLogPage({
-    bizType: BizTypeEnum.CRM_PRODUCT,
-    bizId: productId.value,
-  });
-  productLogList.value = logList.list;
-  product.value = data;
+  try {
+    product.value = await getProduct(productId.value);
+    // 操作日志
+    const res = await getOperateLogPage({
+      bizType: BizTypeEnum.CRM_PRODUCT,
+      bizId: productId.value,
+    });
+    logList.value = res.list;
+  } finally {
+    loading.value = false;
+  }
   loading.value = false;
 }
 
@@ -58,10 +60,10 @@ function handleBack() {
   router.push('/crm/product');
 }
 
-// 加载数据
+/** 加载数据 */
 onMounted(() => {
   productId.value = Number(route.params.id);
-  loadProductDetail();
+  getProductDetail();
 });
 </script>
 
@@ -78,10 +80,10 @@ onMounted(() => {
     <Card class="mt-4 min-h-[60%]">
       <Tabs>
         <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
-          <ProductDetailsInfo :product="product" />
+          <Info :product="product" />
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="2" :force-render="true">
-          <AsyncOperateLog :log-list="productLogList" />
+          <OperateLog :log-list="logList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>
diff --git a/apps/web-antd/src/views/crm/product/modules/detail-info.vue b/apps/web-antd/src/views/crm/product/detail/modules/info.vue
similarity index 90%
rename from apps/web-antd/src/views/crm/product/modules/detail-info.vue
rename to apps/web-antd/src/views/crm/product/detail/modules/info.vue
index 4f728e01..320f650b 100644
--- a/apps/web-antd/src/views/crm/product/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/product/detail/modules/info.vue
@@ -3,7 +3,7 @@ import type { CrmProductApi } from '#/api/crm/product';
 
 import { useDescription } from '#/components/description';
 
-import { useDetailBaseSchema } from './detail-data';
+import { useDetailBaseSchema } from '../data';
 
 defineProps<{
   product: CrmProductApi.Product; // 产品信息
diff --git a/apps/web-antd/src/views/crm/product/index.ts b/apps/web-antd/src/views/crm/product/index.ts
deleted file mode 100644
index a9038b46..00000000
--- a/apps/web-antd/src/views/crm/product/index.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { defineAsyncComponent } from 'vue';
-
-export const ProductDetailsInfo = defineAsyncComponent(
-  () => import('./modules/detail-info.vue'),
-);
-
-export const ProductForm = defineAsyncComponent(
-  () => import('./modules/form.vue'),
-);
-
-export const ProductDetails = defineAsyncComponent(
-  () => import('./modules/detail.vue'),
-);
-
-export const ProductDetailsList = defineAsyncComponent(
-  () => import('./modules/detail-list.vue'),
-);
-
-export const ProductEditTable = defineAsyncComponent(
-  () => import('./modules/product-table.vue'),
-);
diff --git a/apps/web-antd/src/views/crm/product/index.vue b/apps/web-antd/src/views/crm/product/index.vue
index f6aae540..41aae7fb 100644
--- a/apps/web-antd/src/views/crm/product/index.vue
+++ b/apps/web-antd/src/views/crm/product/index.vue
@@ -28,7 +28,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
@@ -57,15 +57,12 @@ function handleEdit(row: CrmProductApi.Product) {
 async function handleDelete(row: CrmProductApi.Product) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
-    await deleteProduct(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
-    });
-    onRefresh();
+    await deleteProduct(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -92,6 +89,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -103,7 +101,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid table-title="产品列表">
       <template #toolbar-tools>
         <TableAction
diff --git a/apps/web-antd/src/views/crm/product/modules/form.vue b/apps/web-antd/src/views/crm/product/modules/form.vue
index 565e802d..7887d9e8 100644
--- a/apps/web-antd/src/views/crm/product/modules/form.vue
+++ b/apps/web-antd/src/views/crm/product/modules/form.vue
@@ -76,7 +76,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/crm/receivable/components/data.ts b/apps/web-antd/src/views/crm/receivable/components/data.ts
new file mode 100644
index 00000000..4f3f0e13
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/components/data.ts
@@ -0,0 +1,73 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+
+/** 详情列表的字段 */
+export function useDetailListColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '回款编号',
+      field: 'no',
+      minWidth: 150,
+      fixed: 'left',
+    },
+    {
+      title: '客户名称',
+      field: 'customerName',
+      minWidth: 150,
+    },
+    {
+      title: '合同编号',
+      field: 'contract.no',
+      minWidth: 150,
+    },
+    {
+      title: '回款日期',
+      field: 'returnTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '回款金额（元）',
+      field: 'price',
+      minWidth: 150,
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '回款方式',
+      field: 'returnType',
+      minWidth: 150,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
+      },
+    },
+    {
+      title: '负责人',
+      field: 'ownerUserName',
+      minWidth: 150,
+    },
+    {
+      title: '备注',
+      field: 'remark',
+      minWidth: 150,
+    },
+    {
+      title: '回款状态',
+      field: 'auditStatus',
+      minWidth: 100,
+      fixed: 'right',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      field: 'actions',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue b/apps/web-antd/src/views/crm/receivable/components/detail-list.vue
similarity index 89%
rename from apps/web-antd/src/views/crm/receivable/modules/detail-list.vue
rename to apps/web-antd/src/views/crm/receivable/components/detail-list.vue
index 1c7f447f..979f5521 100644
--- a/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/receivable/components/detail-list.vue
@@ -1,3 +1,4 @@
+<!-- 回款列表：用于【客户】【合同】详情中，展示它们关联的回款列表 -->
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmReceivableApi } from '#/api/crm/receivable';
@@ -13,8 +14,8 @@ import {
 } from '#/api/crm/receivable';
 import { $t } from '#/locales';
 
-import { useDetailListColumns } from './detail-data';
-import Form from './form.vue';
+import Form from '../modules/form.vue';
+import { useDetailListColumns } from './data';
 
 const props = defineProps<{
   contractId?: number; // 合同编号
@@ -27,7 +28,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
@@ -50,15 +51,12 @@ function handleEdit(row: CrmReceivableApi.Receivable) {
 async function handleDelete(row: CrmReceivableApi.Receivable) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.no]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
-    await deleteReceivable(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.no]),
-      key: 'action_key_msg',
-    });
-    onRefresh();
+    await deleteReceivable(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.no]));
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -89,6 +87,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -100,7 +99,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <div>
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid>
       <template #toolbar-tools>
         <TableAction
diff --git a/apps/web-antd/src/views/crm/receivable/components/index.ts b/apps/web-antd/src/views/crm/receivable/components/index.ts
new file mode 100644
index 00000000..971ab650
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/components/index.ts
@@ -0,0 +1 @@
+export { default as ReceivableDetailsList } from './detail-list.vue';
diff --git a/apps/web-antd/src/views/crm/receivable/data.ts b/apps/web-antd/src/views/crm/receivable/data.ts
index eb6bd397..b71ed0ed 100644
--- a/apps/web-antd/src/views/crm/receivable/data.ts
+++ b/apps/web-antd/src/views/crm/receivable/data.ts
@@ -39,6 +39,10 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '负责人',
       component: 'ApiSelect',
       rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values) => values.id,
+      },
       componentProps: {
         api: () => getSimpleUserList(),
         fieldNames: {
@@ -63,6 +67,10 @@ export function useFormSchema(): VbenFormSchema[] {
         },
         placeholder: '请选择客户',
       },
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values) => values.id,
+      },
     },
     {
       fieldName: 'contractId',
@@ -71,16 +79,18 @@ export function useFormSchema(): VbenFormSchema[] {
       rules: 'required',
       dependencies: {
         triggerFields: ['customerId'],
-        disabled: (values) => !values.customerId,
+        disabled: (values) => !values.customerId || values.id,
         async componentProps(values) {
           if (values.customerId) {
-            values.contractId = undefined;
+            if (!values.id) {
+              // 特殊：只有在【新增】时，才清空合同编号
+              values.contractId = undefined;
+            }
             const contracts = await getContractSimpleList(values.customerId);
             return {
               options: contracts.map((item) => ({
                 label: item.name,
                 value: item.id,
-                disabled: item.auditStatus !== 20,
               })),
               placeholder: '请选择合同',
             } as any;
@@ -121,14 +131,12 @@ export function useFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      fieldName: 'returnTime',
-      label: '回款日期',
-      component: 'DatePicker',
+      fieldName: 'returnType',
+      label: '回款方式',
+      component: 'Select',
       componentProps: {
-        placeholder: '请选择回款日期',
-        showTime: false,
-        valueFormat: 'x',
-        format: 'YYYY-MM-DD',
+        options: getDictOptions(DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE, 'number'),
+        placeholder: '请选择回款方式',
       },
     },
     {
@@ -143,13 +151,15 @@ export function useFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      fieldName: 'returnType',
-      label: '回款方式',
-      component: 'Select',
+      fieldName: 'returnTime',
+      label: '回款日期',
+      component: 'DatePicker',
       rules: 'required',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE, 'number'),
-        placeholder: '请选择回款方式',
+        placeholder: '请选择回款日期',
+        showTime: false,
+        valueFormat: 'x',
+        format: 'YYYY-MM-DD',
       },
     },
     {
@@ -160,6 +170,7 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入备注',
         rows: 4,
       },
+      formItemClass: 'md:col-span-2',
     },
   ];
 }
@@ -198,7 +209,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '回款编号',
       field: 'no',
-      minWidth: 150,
+      minWidth: 160,
       fixed: 'left',
       slots: { default: 'no' },
     },
@@ -211,7 +222,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '合同编号',
       field: 'contract',
-      minWidth: 150,
+      minWidth: 160,
       slots: { default: 'contractNo' },
     },
     {
@@ -286,7 +297,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '操作',
       field: 'actions',
-      width: 130,
+      minWidth: 200,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-data.ts b/apps/web-antd/src/views/crm/receivable/detail/data.ts
similarity index 58%
rename from apps/web-antd/src/views/crm/receivable/plan/modules/detail-data.ts
rename to apps/web-antd/src/views/crm/receivable/detail/data.ts
index e041aca2..8c79dd54 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-data.ts
+++ b/apps/web-antd/src/views/crm/receivable/detail/data.ts
@@ -1,4 +1,3 @@
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -17,8 +16,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     },
     {
       field: 'totalPrice',
-      label: '合同金额',
-      content: (data) => erpPriceInputFormatter(data.totalPrice),
+      label: '合同金额（元）',
+      content: (data) =>
+        erpPriceInputFormatter(data?.contract?.totalPrice ?? data.totalPrice),
     },
     {
       field: 'returnTime',
@@ -27,7 +27,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     },
     {
       field: 'price',
-      label: '回款金额',
+      label: '回款金额（元）',
       content: (data) => erpPriceInputFormatter(data.price),
     },
     {
@@ -79,63 +79,26 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
   ];
 }
 
-/** 详情列表的字段 */
-export function useDetailListColumns(): VxeTableGridOptions['columns'] {
+/** 系统信息字段 */
+export function useDetailSystemSchema(): DescriptionItemSchema[] {
   return [
     {
-      title: '客户名称',
-      field: 'customerName',
-      minWidth: 150,
-    },
-    {
-      title: '合同编号',
-      field: 'contractNo',
-      minWidth: 150,
-    },
-    {
-      title: '期数',
-      field: 'period',
-      minWidth: 150,
-    },
-    {
-      title: '计划回款(元)',
-      field: 'price',
-      minWidth: 150,
-      formatter: 'formatAmount2',
-    },
-    {
-      title: '计划回款日期',
-      field: 'returnTime',
-      minWidth: 150,
-      formatter: 'formatDateTime',
-    },
-    {
-      title: '提前几天提醒',
-      field: 'remindDays',
-      minWidth: 150,
-    },
-    {
-      title: '提醒日期',
-      field: 'remindTime',
-      minWidth: 150,
-      formatter: 'formatDateTime',
-    },
-    {
-      title: '负责人',
       field: 'ownerUserName',
-      minWidth: 150,
+      label: '负责人',
     },
     {
-      title: '备注',
-      field: 'remark',
-      minWidth: 150,
+      field: 'creatorName',
+      label: '创建人',
     },
     {
-      title: '操作',
-      field: 'actions',
-      width: 240,
-      fixed: 'right',
-      slots: { default: 'actions' },
+      field: 'createTime',
+      label: '创建时间',
+      content: (data) => formatDateTime(data?.createTime) as string,
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      content: (data) => formatDateTime(data?.updateTime) as string,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/receivable/modules/detail.vue b/apps/web-antd/src/views/crm/receivable/detail/index.vue
similarity index 55%
rename from apps/web-antd/src/views/crm/receivable/modules/detail.vue
rename to apps/web-antd/src/views/crm/receivable/detail/index.vue
index e61d5bdb..ae624136 100644
--- a/apps/web-antd/src/views/crm/receivable/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/receivable/detail/index.vue
@@ -2,43 +2,41 @@
 import type { CrmReceivableApi } from '#/api/crm/receivable';
 import type { SystemOperateLogApi } from '#/api/system/operate-log';
 
-import { computed, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
-import { ArrowLeft } from '@vben/icons';
 
-import { Button, Card, Tabs } from 'ant-design-vue';
+import { Card, Tabs } from 'ant-design-vue';
 
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { getReceivable } from '#/api/crm/receivable';
 import { useDescription } from '#/components/description';
-import { AsyncOperateLog } from '#/components/operate-log';
+import { OperateLog } from '#/components/operate-log';
+import { ACTION_ICON, TableAction } from '#/components/table-action';
+import { $t } from '#/locales';
 import { PermissionList } from '#/views/crm/permission';
-import { ReceivableDetailsInfo } from '#/views/crm/receivable';
 
-import { useDetailSchema } from './detail-data';
-import ReceivableForm from './form.vue';
+import ReceivableForm from '../modules/form.vue';
+import { useDetailSchema } from './data';
+import Info from './modules/info.vue';
 
-const loading = ref(false);
+const props = defineProps<{ id?: number }>();
 
 const route = useRoute();
 const router = useRouter();
 const tabs = useTabs();
 
-const receivableId = ref(0);
-
+const loading = ref(false); // 加载中
+const receivableId = ref(0); // 回款编号
 const receivable = ref<CrmReceivableApi.Receivable>(
   {} as CrmReceivableApi.Receivable,
-);
-const receivableLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+); // 回款详情
+const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
-// 校验编辑权限
-const validateWrite = computed(() => permissionListRef.value?.validateWrite);
-
 const [Descriptions] = useDescription({
   componentProps: {
     bordered: false,
@@ -56,15 +54,17 @@ const [FormModal, formModalApi] = useVbenModal({
 /** 加载回款详情 */
 async function loadReceivableDetail() {
   loading.value = true;
-  const data = await getReceivable(receivableId.value);
-  receivable.value = data;
-  // 操作日志
-  const logList = await getOperateLogPage({
-    bizType: BizTypeEnum.CRM_RECEIVABLE,
-    bizId: receivableId.value,
-  });
-  receivableLogList.value = logList.list;
-  loading.value = false;
+  try {
+    receivable.value = await getReceivable(receivableId.value);
+    // 操作日志
+    const res = await getOperateLogPage({
+      bizType: BizTypeEnum.CRM_RECEIVABLE,
+      bizId: receivableId.value,
+    });
+    logList.value = res.list;
+  } finally {
+    loading.value = false;
+  }
 }
 
 /** 返回列表页 */
@@ -75,12 +75,12 @@ function handleBack() {
 
 /** 编辑收款 */
 function handleEdit() {
-  formModalApi.setData({ id: receivableId.value }).open();
+  formModalApi.setData({ receivable: { id: receivableId.value } }).open();
 }
 
-// 加载数据
+/** 加载数据 */
 onMounted(() => {
-  receivableId.value = Number(route.params.id);
+  receivableId.value = Number(props.id || route.params.id);
   loadReceivableDetail();
 });
 </script>
@@ -89,20 +89,24 @@ onMounted(() => {
   <Page auto-content-height :title="receivable?.no" :loading="loading">
     <FormModal @success="loadReceivableDetail" />
     <template #extra>
-      <div class="flex items-center gap-2">
-        <Button @click="handleBack">
-          <ArrowLeft class="size-5" />
-          返回
-        </Button>
-        <Button
-          v-if="validateWrite"
-          type="primary"
-          @click="handleEdit"
-          v-access:code="['crm:receivable:update']"
-        >
-          {{ $t('ui.actionTitle.edit') }}
-        </Button>
-      </div>
+      <TableAction
+        :actions="[
+          {
+            label: '返回',
+            type: 'default',
+            icon: 'lucide:arrow-left',
+            onClick: handleBack,
+          },
+          {
+            label: $t('ui.actionTitle.edit'),
+            type: 'primary',
+            icon: ACTION_ICON.EDIT,
+            auth: ['crm:receivable:update'],
+            ifShow: permissionListRef?.validateWrite,
+            onClick: handleEdit,
+          },
+        ]"
+      />
     </template>
     <Card class="min-h-[10%]">
       <Descriptions :data="receivable" />
@@ -110,9 +114,12 @@ onMounted(() => {
     <Card class="mt-4 min-h-[60%]">
       <Tabs>
         <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
-          <ReceivableDetailsInfo :receivable="receivable" />
+          <Info :receivable="receivable" />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="团队成员" key="2" :force-render="true">
+        <Tabs.TabPane tab="操作日志" key="2" :force-render="true">
+          <OperateLog :log-list="logList" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="团队成员" key="3" :force-render="true">
           <PermissionList
             ref="permissionListRef"
             :biz-id="receivableId"
@@ -121,9 +128,6 @@ onMounted(() => {
             @quit-team="handleBack"
           />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="操作日志" key="3" :force-render="true">
-          <AsyncOperateLog :log-list="receivableLogList" />
-        </Tabs.TabPane>
       </Tabs>
     </Card>
   </Page>
diff --git a/apps/web-antd/src/views/crm/receivable/modules/detail-info.vue b/apps/web-antd/src/views/crm/receivable/detail/modules/info.vue
similarity index 83%
rename from apps/web-antd/src/views/crm/receivable/modules/detail-info.vue
rename to apps/web-antd/src/views/crm/receivable/detail/modules/info.vue
index 134d067c..dfad21c8 100644
--- a/apps/web-antd/src/views/crm/receivable/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/receivable/detail/modules/info.vue
@@ -4,9 +4,8 @@ import type { CrmReceivableApi } from '#/api/crm/receivable';
 import { Divider } from 'ant-design-vue';
 
 import { useDescription } from '#/components/description';
-import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
 
-import { useDetailBaseSchema } from './detail-data';
+import { useDetailBaseSchema, useDetailSystemSchema } from '../data';
 
 defineProps<{
   receivable: CrmReceivableApi.Receivable; // 收款信息
@@ -29,7 +28,7 @@ const [SystemDescriptions] = useDescription({
     column: 3,
     class: 'mx-4',
   },
-  schema: useFollowUpDetailSchema(),
+  schema: useDetailSystemSchema(),
 });
 </script>
 
diff --git a/apps/web-antd/src/views/crm/receivable/index.ts b/apps/web-antd/src/views/crm/receivable/index.ts
deleted file mode 100644
index bd8a2aed..00000000
--- a/apps/web-antd/src/views/crm/receivable/index.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { defineAsyncComponent } from 'vue';
-
-export const ReceivableDetailsInfo = defineAsyncComponent(
-  () => import('./modules/detail-info.vue'),
-);
-
-export const ReceivableForm = defineAsyncComponent(
-  () => import('./modules/form.vue'),
-);
-
-export const ReceivableDetails = defineAsyncComponent(
-  () => import('./modules/detail.vue'),
-);
-
-export const ReceivableDetailsList = defineAsyncComponent(
-  () => import('./modules/detail-list.vue'),
-);
-
-export const ReceivablePlanDetailsInfo = defineAsyncComponent(
-  () => import('./plan/modules/detail-info.vue'),
-);
-
-export const ReceivablePlanDetailsList = defineAsyncComponent(
-  () => import('./plan/modules/detail-list.vue'),
-);
-
-export const ReceivablePlanDetails = defineAsyncComponent(
-  () => import('./plan/modules/detail.vue'),
-);
diff --git a/apps/web-antd/src/views/crm/receivable/index.vue b/apps/web-antd/src/views/crm/receivable/index.vue
index ac77d182..317e2ee9 100644
--- a/apps/web-antd/src/views/crm/receivable/index.vue
+++ b/apps/web-antd/src/views/crm/receivable/index.vue
@@ -31,13 +31,23 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 处理场景类型的切换 */
+function handleChangeSceneType(key: number | string) {
+  sceneType.value = key.toString();
   gridApi.query();
 }
 
 /** 导出表格 */
 async function handleExport() {
-  const data = await exportReceivable(await gridApi.formApi.getValues());
+  const formValues = await gridApi.formApi.getValues();
+  const data = await exportReceivable({
+    sceneType: sceneType.value,
+    ...formValues,
+  });
   downloadFileFromBlobPart({ fileName: '回款.xls', source: data });
 }
 
@@ -55,15 +65,12 @@ function handleEdit(row: CrmReceivableApi.Receivable) {
 async function handleDelete(row: CrmReceivableApi.Receivable) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.no]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
-    await deleteReceivable(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.no]),
-      key: 'action_key_msg',
-    });
-    onRefresh();
+    await deleteReceivable(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.no]));
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -73,15 +80,12 @@ async function handleDelete(row: CrmReceivableApi.Receivable) {
 async function handleSubmit(row: CrmReceivableApi.Receivable) {
   const hideLoading = message.loading({
     content: '提交审核中...',
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
-    await submitReceivable(row.id as number);
-    message.success({
-      content: '提交审核成功',
-      key: 'action_key_msg',
-    });
-    onRefresh();
+    await submitReceivable(row.id!);
+    message.success('提交审核成功');
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -132,6 +136,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -139,11 +144,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<CrmReceivableApi.Receivable>,
 });
-
-function onChangeSceneType(key: number | string) {
-  sceneType.value = key.toString();
-  gridApi.query();
-}
 </script>
 
 <template>
@@ -159,10 +159,10 @@ function onChangeSceneType(key: number | string) {
       />
     </template>
 
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid>
       <template #top>
-        <Tabs class="border-none" @change="onChangeSceneType">
+        <Tabs class="-mt-11" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />
@@ -217,10 +217,7 @@ function onChangeSceneType(key: number | string) {
               icon: ACTION_ICON.EDIT,
               auth: ['crm:receivable:update'],
               onClick: handleEdit.bind(null, row),
-              ifShow: row.auditStatus === 0,
             },
-          ]"
-          :drop-down-actions="[
             {
               label: '提交审核',
               type: 'link',
@@ -252,3 +249,8 @@ function onChangeSceneType(key: number | string) {
     </Grid>
   </Page>
 </template>
+<style scoped>
+:deep(.vxe-toolbar div) {
+  z-index: 1;
+}
+</style>
diff --git a/apps/web-antd/src/views/crm/receivable/modules/detail-data.ts b/apps/web-antd/src/views/crm/receivable/modules/detail-data.ts
deleted file mode 100644
index 56c18ede..00000000
--- a/apps/web-antd/src/views/crm/receivable/modules/detail-data.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { DescriptionItemSchema } from '#/components/description';
-
-import { h } from 'vue';
-
-import { DICT_TYPE } from '@vben/constants';
-import { erpPriceInputFormatter, formatDateTime } from '@vben/utils';
-
-import { DictTag } from '#/components/dict-tag';
-
-/** 详情页的字段 */
-export function useDetailSchema(): DescriptionItemSchema[] {
-  return [
-    {
-      field: 'customerName',
-      label: '客户名称',
-    },
-    {
-      field: 'totalPrice',
-      label: '合同金额',
-      content: (data) => erpPriceInputFormatter(data.totalPrice),
-    },
-    {
-      field: 'returnTime',
-      label: '回款日期',
-      content: (data) => formatDateTime(data?.returnTime) as string,
-    },
-    {
-      field: 'price',
-      label: '回款金额',
-      content: (data) => erpPriceInputFormatter(data.price),
-    },
-    {
-      field: 'ownerUserName',
-      label: '负责人',
-    },
-  ];
-}
-
-/** 详情页的基础字段 */
-export function useDetailBaseSchema(): DescriptionItemSchema[] {
-  return [
-    {
-      field: 'no',
-      label: '回款编号',
-    },
-    {
-      field: 'customerName',
-      label: '客户名称',
-    },
-    {
-      field: 'contract',
-      label: '合同编号',
-      content: (data) => data?.contract?.no,
-    },
-    {
-      field: 'returnTime',
-      label: '回款日期',
-      content: (data) => formatDateTime(data?.returnTime) as string,
-    },
-    {
-      field: 'price',
-      label: '回款金额',
-      content: (data) => erpPriceInputFormatter(data.price),
-    },
-    {
-      field: 'returnType',
-      label: '回款方式',
-      content: (data) =>
-        h(DictTag, {
-          type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE,
-          value: data?.returnType,
-        }),
-    },
-    {
-      field: 'remark',
-      label: '备注',
-    },
-  ];
-}
-
-/** 详情列表的字段 */
-export function useDetailListColumns(): VxeTableGridOptions['columns'] {
-  return [
-    {
-      title: '回款编号',
-      field: 'no',
-      minWidth: 150,
-      fixed: 'left',
-    },
-    {
-      title: '客户名称',
-      field: 'customerName',
-      minWidth: 150,
-    },
-    {
-      title: '合同编号',
-      field: 'contract.no',
-      minWidth: 150,
-    },
-    {
-      title: '回款日期',
-      field: 'returnTime',
-      minWidth: 150,
-      formatter: 'formatDateTime',
-    },
-    {
-      title: '回款金额（元）',
-      field: 'price',
-      minWidth: 150,
-      formatter: 'formatAmount2',
-    },
-    {
-      title: '回款方式',
-      field: 'returnType',
-      minWidth: 150,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
-      },
-    },
-    {
-      title: '负责人',
-      field: 'ownerUserName',
-      minWidth: 150,
-    },
-    {
-      title: '备注',
-      field: 'remark',
-      minWidth: 150,
-    },
-    {
-      title: '回款状态',
-      field: 'auditStatus',
-      minWidth: 100,
-      fixed: 'right',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
-      },
-    },
-    {
-      title: '操作',
-      field: 'actions',
-      width: 130,
-      fixed: 'right',
-      slots: { default: 'actions' },
-    },
-  ];
-}
diff --git a/apps/web-antd/src/views/crm/receivable/modules/form.vue b/apps/web-antd/src/views/crm/receivable/modules/form.vue
index 45313991..07f240dd 100644
--- a/apps/web-antd/src/views/crm/receivable/modules/form.vue
+++ b/apps/web-antd/src/views/crm/receivable/modules/form.vue
@@ -65,15 +65,13 @@ const [Modal, modalApi] = useVbenModal({
     // 加载数据
     const data = modalApi.getData();
     if (!data) {
-      // 设置到 values
-      await formApi.setValues(data);
       return;
     }
     const { receivable, plan } = data;
     modalApi.lock();
     try {
       if (receivable) {
-        formData.value = await getReceivable(receivable.id as number);
+        formData.value = await getReceivable(receivable.id!);
       } else if (plan) {
         formData.value = plan.id
           ? {
diff --git a/apps/web-antd/src/views/crm/receivable/plan/components/data.ts b/apps/web-antd/src/views/crm/receivable/plan/components/data.ts
new file mode 100644
index 00000000..9a67c0be
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/plan/components/data.ts
@@ -0,0 +1,62 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+/** 详情列表的字段 */
+export function useDetailListColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '客户名称',
+      field: 'customerName',
+      minWidth: 150,
+    },
+    {
+      title: '合同编号',
+      field: 'contractNo',
+      minWidth: 150,
+    },
+    {
+      title: '期数',
+      field: 'period',
+      minWidth: 150,
+    },
+    {
+      title: '计划回款(元)',
+      field: 'price',
+      minWidth: 150,
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '计划回款日期',
+      field: 'returnTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '提前几天提醒',
+      field: 'remindDays',
+      minWidth: 150,
+    },
+    {
+      title: '提醒日期',
+      field: 'remindTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '负责人',
+      field: 'ownerUserName',
+      minWidth: 150,
+    },
+    {
+      title: '备注',
+      field: 'remark',
+      minWidth: 150,
+    },
+    {
+      title: '操作',
+      field: 'actions',
+      width: 240,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue b/apps/web-antd/src/views/crm/receivable/plan/components/detail-list.vue
similarity index 68%
rename from apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue
rename to apps/web-antd/src/views/crm/receivable/plan/components/detail-list.vue
index af506a9a..1faa4f20 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/components/detail-list.vue
@@ -1,6 +1,6 @@
+<!-- 回款计划列表：用于【客户】【合同】详情中，展示它们关联的回款计划列表 -->
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { CrmReceivableApi } from '#/api/crm/receivable';
 import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
 
 import { useVbenModal } from '@vben/common-ui';
@@ -14,9 +14,8 @@ import {
 } from '#/api/crm/receivable/plan';
 import { $t } from '#/locales';
 
-import ReceivableForm from '../../modules/form.vue';
-import { useDetailListColumns } from './detail-data';
-import Form from './form.vue';
+import Form from '../modules/form.vue';
+import { useDetailListColumns } from './data';
 
 const props = defineProps<{
   contractId?: number; // 合同编号
@@ -28,13 +27,8 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-const [ReceivableFormModal, receivableFormModalApi] = useVbenModal({
-  connectedComponent: ReceivableForm,
-  destroyOnClose: true,
-});
-
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
@@ -48,29 +42,23 @@ function handleCreate() {
     .open();
 }
 
-/** 创建回款 */
-function handleCreateReceivable(row: CrmReceivablePlanApi.Plan) {
-  receivableFormModalApi.setData({ plan: row }).open();
-}
-
 /** 编辑回款计划 */
-function handleEdit(row: CrmReceivableApi.Receivable) {
-  formModalApi.setData({ receivable: row }).open();
+function handleEdit(row: CrmReceivablePlanApi.Plan) {
+  formModalApi.setData({ receivablePlan: row }).open();
 }
 
 /** 删除回款计划 */
 async function handleDelete(row: CrmReceivablePlanApi.Plan) {
   const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting', [row.period]),
-    key: 'action_key_msg',
+    content: $t('ui.actionMessage.deleting', [`第${row.period}期`]),
+    duration: 0,
   });
   try {
-    await deleteReceivablePlan(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.period]),
-      key: 'action_key_msg',
-    });
-    onRefresh();
+    await deleteReceivablePlan(row.id!);
+    message.success(
+      $t('ui.actionMessage.deleteSuccess', [`第${row.period}期`]),
+    );
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -79,15 +67,14 @@ async function handleDelete(row: CrmReceivablePlanApi.Plan) {
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useDetailListColumns(),
-    height: 400,
+    height: 500,
     keepSource: true,
     proxyConfig: {
       ajax: {
-        query: async ({ page }, formValues) => {
+        query: async ({ page }) => {
           const queryParams: CrmReceivablePlanApi.PlanPageParam = {
             pageNo: page.currentPage,
             pageSize: page.pageSize,
-            ...formValues,
           };
           if (props.customerId && !props.contractId) {
             queryParams.customerId = props.customerId;
@@ -102,6 +89,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -113,8 +101,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <div>
-    <FormModal @success="onRefresh" />
-    <ReceivableFormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid>
       <template #toolbar-tools>
         <TableAction
@@ -132,14 +119,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
       <template #actions="{ row }">
         <TableAction
           :actions="[
-            {
-              label: $t('ui.actionTitle.create', ['回款']),
-              type: 'link',
-              icon: ACTION_ICON.ADD,
-              auth: ['crm:receivable-plan:create'],
-              disabled: !!row.receivableId,
-              onClick: handleCreateReceivable.bind(null, row),
-            },
             {
               label: $t('common.edit'),
               type: 'link',
@@ -154,7 +133,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
               icon: ACTION_ICON.DELETE,
               auth: ['crm:receivable-plan:delete'],
               popConfirm: {
-                title: $t('ui.actionMessage.deleteConfirm', [row.period]),
+                title: $t('ui.actionMessage.deleteConfirm', [
+                  `第${row.period}期`,
+                ]),
                 confirm: handleDelete.bind(null, row),
               },
             },
diff --git a/apps/web-antd/src/views/crm/receivable/plan/components/index.ts b/apps/web-antd/src/views/crm/receivable/plan/components/index.ts
new file mode 100644
index 00000000..cbb4b121
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/plan/components/index.ts
@@ -0,0 +1,2 @@
+export { default as ReceivablePlanDetailsInfo } from '../detail/modules/info.vue';
+export { default as ReceivablePlanDetailsList } from './detail-list.vue';
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 d878d609..b9c95075 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/data.ts
+++ b/apps/web-antd/src/views/crm/receivable/plan/data.ts
@@ -14,6 +14,33 @@ import { getSimpleUserList } from '#/api/system/user';
 export function useFormSchema(): VbenFormSchema[] {
   const userStore = useUserStore();
   return [
+    {
+      fieldName: 'period',
+      label: '期数',
+      component: 'Input',
+      componentProps: {
+        placeholder: '保存时自动生成',
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'ownerUserId',
+      label: '负责人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleUserList(),
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values) => values.id,
+      },
+      defaultValue: userStore.userInfo?.id,
+      rules: 'required',
+    },
     {
       fieldName: 'customerId',
       label: '客户',
@@ -65,33 +92,6 @@ export function useFormSchema(): VbenFormSchema[] {
         },
       },
     },
-    {
-      fieldName: 'period',
-      label: '期数',
-      component: 'Input',
-      componentProps: {
-        placeholder: '保存时自动生成',
-        disabled: true,
-      },
-    },
-    {
-      fieldName: 'ownerUserId',
-      label: '负责人',
-      component: 'ApiSelect',
-      componentProps: {
-        api: () => getSimpleUserList(),
-        fieldNames: {
-          label: 'nickname',
-          value: 'id',
-        },
-      },
-      dependencies: {
-        triggerFields: ['id'],
-        disabled: (values) => !values.id,
-      },
-      defaultValue: userStore.userInfo?.id,
-      rules: 'required',
-    },
     {
       fieldName: 'price',
       label: '计划回款金额',
@@ -120,7 +120,6 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'remindDays',
       label: '提前几天提醒',
       component: 'InputNumber',
-      rules: 'required',
       componentProps: {
         placeholder: '请输入提前几天提醒',
         min: 0,
@@ -130,7 +129,6 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'returnType',
       label: '回款方式',
       component: 'Select',
-      rules: 'required',
       componentProps: {
         options: getDictOptions(DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE, 'number'),
         placeholder: '请选择回款方式',
@@ -144,6 +142,7 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入备注',
         rows: 4,
       },
+      formItemClass: 'md:col-span-2',
     },
   ];
 }
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
new file mode 100644
index 00000000..70d07164
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/plan/detail/data.ts
@@ -0,0 +1,127 @@
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { erpPriceInputFormatter, formatDateTime } from '@vben/utils';
+
+import { DictTag } from '#/components/dict-tag';
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'customerName',
+      label: '客户名称',
+    },
+    {
+      field: 'contractNo',
+      label: '合同编号',
+    },
+    {
+      field: 'price',
+      label: '计划回款金额',
+      content: (data) => erpPriceInputFormatter(data.price),
+    },
+    {
+      field: 'returnTime',
+      label: '计划回款日期',
+      content: (data) => formatDateTime(data?.returnTime) as string,
+    },
+    {
+      field: 'receivable',
+      label: '实际回款金额',
+      content: (data) =>
+        erpPriceInputFormatter(data?.receivable?.price ?? 0),
+    },
+  ];
+}
+
+/** 详情页的基础字段 */
+export function useDetailBaseSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'period',
+      label: '期数',
+    },
+    {
+      field: 'customerName',
+      label: '客户名称',
+    },
+    {
+      field: 'contractNo',
+      label: '合同编号',
+    },
+    {
+      field: 'returnTime',
+      label: '计划回款日期',
+      content: (data) => formatDateTime(data?.returnTime) as string,
+    },
+    {
+      field: 'price',
+      label: '计划回款金额',
+      content: (data) => erpPriceInputFormatter(data.price),
+    },
+    {
+      field: 'returnType',
+      label: '计划回款方式',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE,
+          value: data?.returnType,
+        }),
+    },
+    {
+      field: 'remindDays',
+      label: '提前几天提醒',
+    },
+    {
+      field: 'receivable',
+      label: '实际回款金额',
+      content: (data) =>
+        erpPriceInputFormatter(data?.receivable?.price ?? 0),
+    },
+    {
+      field: 'receivableRemain',
+      label: '未回款金额',
+      content: (data) => {
+        const paid = data?.receivable?.price ?? 0;
+        return erpPriceInputFormatter(Math.max(data.price - paid, 0));
+      },
+    },
+    {
+      field: 'receivable.returnTime',
+      label: '实际回款日期',
+      content: (data) =>
+        formatDateTime(data?.receivable?.returnTime) as string,
+    },
+    {
+      field: 'remark',
+      label: '备注',
+    },
+  ];
+}
+
+/** 系统信息字段 */
+export function useDetailSystemSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'ownerUserName',
+      label: '负责人',
+    },
+    {
+      field: 'creatorName',
+      label: '创建人',
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      content: (data) => formatDateTime(data?.createTime) as string,
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      content: (data) => formatDateTime(data?.updateTime) as string,
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/detail.vue b/apps/web-antd/src/views/crm/receivable/plan/detail/index.vue
similarity index 57%
rename from apps/web-antd/src/views/crm/receivable/plan/modules/detail.vue
rename to apps/web-antd/src/views/crm/receivable/plan/detail/index.vue
index 25382321..59ba9ae3 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/detail/index.vue
@@ -2,42 +2,41 @@
 import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
 import type { SystemOperateLogApi } from '#/api/system/operate-log';
 
-import { computed, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
-import { ArrowLeft } from '@vben/icons';
 
-import { Button, Card, Tabs } from 'ant-design-vue';
+import { Card, Tabs } from 'ant-design-vue';
 
+import { ACTION_ICON, TableAction } from '#/adapter/vxe-table';
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { getReceivablePlan } from '#/api/crm/receivable/plan';
 import { useDescription } from '#/components/description';
-import { AsyncOperateLog } from '#/components/operate-log';
+import { OperateLog } from '#/components/operate-log';
+import { $t } from '#/locales';
 import { PermissionList } from '#/views/crm/permission';
-import { ReceivablePlanDetailsInfo } from '#/views/crm/receivable';
+import { ReceivablePlanDetailsInfo } from '#/views/crm/receivable/plan/components';
 
-import { useDetailSchema } from './detail-data';
-import ReceivablePlanForm from './form.vue';
-
-const loading = ref(false);
+import ReceivablePlanForm from '../modules/form.vue';
+import { useDetailSchema } from './data';
 
 const route = useRoute();
 const router = useRouter();
 const tabs = useTabs();
 
-const receivablePlanId = ref(0);
-
+const loading = ref(false); // 加载中
+const receivablePlanId = ref(0); // 回款计划编号
 const receivablePlan = ref<CrmReceivablePlanApi.Plan>(
   {} as CrmReceivablePlanApi.Plan,
 );
-const receivablePlanLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
 // 校验编辑权限
-const validateWrite = computed(() => permissionListRef.value?.validateWrite);
+const validateWrite = () => permissionListRef.value?.validateWrite;
 
 const [Descriptions] = useDescription({
   componentProps: {
@@ -54,17 +53,19 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 加载回款计划详情 */
-async function loadreceivablePlanDetail() {
+async function getReceivablePlanDetail() {
   loading.value = true;
-  const data = await getReceivablePlan(receivablePlanId.value);
-  receivablePlan.value = data;
-  // 操作日志
-  const logList = await getOperateLogPage({
-    bizType: BizTypeEnum.CRM_RECEIVABLE_PLAN,
-    bizId: receivablePlanId.value,
-  });
-  receivablePlanLogList.value = logList.list;
-  loading.value = false;
+  try {
+    receivablePlan.value = await getReceivablePlan(receivablePlanId.value);
+    // 操作日志
+    const res = await getOperateLogPage({
+      bizType: BizTypeEnum.CRM_RECEIVABLE_PLAN,
+      bizId: receivablePlanId.value,
+    });
+    logList.value = res.list;
+  } finally {
+    loading.value = false;
+  }
 }
 
 /** 返回列表页 */
@@ -78,35 +79,39 @@ function handleEdit() {
   formModalApi.setData({ id: receivablePlanId.value }).open();
 }
 
-// 加载数据
+/** 加载数据 */
 onMounted(() => {
   receivablePlanId.value = Number(route.params.id);
-  loadreceivablePlanDetail();
+  getReceivablePlanDetail();
 });
 </script>
 
 <template>
   <Page
     auto-content-height
-    :title="`第${receivablePlan?.period}期`"
+    :title="`第 ${receivablePlan?.period} 期`"
     :loading="loading"
   >
-    <FormModal @success="loadreceivablePlanDetail" />
+    <FormModal @success="getReceivablePlanDetail" />
     <template #extra>
-      <div class="flex items-center gap-2">
-        <Button @click="handleBack">
-          <ArrowLeft class="size-5" />
-          返回
-        </Button>
-        <Button
-          v-if="validateWrite"
-          type="primary"
-          @click="handleEdit"
-          v-access:code="['crm:receivable-plan:update']"
-        >
-          {{ $t('ui.actionTitle.edit') }}
-        </Button>
-      </div>
+      <TableAction
+        :actions="[
+          {
+            label: '返回',
+            type: 'default',
+            icon: 'lucide:arrow-left',
+            onClick: handleBack,
+          },
+          {
+            label: $t('ui.actionTitle.edit'),
+            type: 'primary',
+            icon: ACTION_ICON.EDIT,
+            disabled: !validateWrite(),
+            onClick: handleEdit,
+            auth: ['crm:receivable-plan:update'],
+          },
+        ]"
+      />
     </template>
     <Card class="min-h-[10%]">
       <Descriptions :data="receivablePlan" />
@@ -116,7 +121,10 @@ onMounted(() => {
         <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
           <ReceivablePlanDetailsInfo :receivable-plan="receivablePlan" />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="团队成员" key="2" :force-render="true">
+        <Tabs.TabPane tab="操作日志" key="2" :force-render="true">
+          <OperateLog :log-list="logList" />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="团队成员" key="3" :force-render="true">
           <PermissionList
             ref="permissionListRef"
             :biz-id="receivablePlanId"
@@ -125,9 +133,6 @@ onMounted(() => {
             @quit-team="handleBack"
           />
         </Tabs.TabPane>
-        <Tabs.TabPane tab="操作日志" key="3" :force-render="true">
-          <AsyncOperateLog :log-list="receivablePlanLogList" />
-        </Tabs.TabPane>
       </Tabs>
     </Card>
   </Page>
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue b/apps/web-antd/src/views/crm/receivable/plan/detail/modules/info.vue
similarity index 83%
rename from apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue
rename to apps/web-antd/src/views/crm/receivable/plan/detail/modules/info.vue
index 3b77b868..c7c6c642 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/detail/modules/info.vue
@@ -4,9 +4,8 @@ import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
 import { Divider } from 'ant-design-vue';
 
 import { useDescription } from '#/components/description';
-import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
 
-import { useDetailBaseSchema } from './detail-data';
+import { useDetailBaseSchema, useDetailSystemSchema } from '../data';
 
 defineProps<{
   receivablePlan: CrmReceivablePlanApi.Plan; // 收款计划信息
@@ -29,7 +28,7 @@ const [SystemDescriptions] = useDescription({
     column: 3,
     class: 'mx-4',
   },
-  schema: useFollowUpDetailSchema(),
+  schema: useDetailSystemSchema(),
 });
 </script>
 
diff --git a/apps/web-antd/src/views/crm/receivable/plan/index.vue b/apps/web-antd/src/views/crm/receivable/plan/index.vue
index 4f8c2657..19b855df 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/index.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/index.vue
@@ -36,13 +36,23 @@ const [ReceivableFormModal, receivableFormModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 处理场景类型的切换 */
+function handleChangeSceneType(key: number | string) {
+  sceneType.value = key.toString();
   gridApi.query();
 }
 
 /** 导出表格 */
 async function handleExport() {
-  const data = await exportReceivablePlan(await gridApi.formApi.getValues());
+  const formValues = await gridApi.formApi.getValues();
+  const data = await exportReceivablePlan({
+    sceneType: sceneType.value,
+    ...formValues,
+  });
   downloadFileFromBlobPart({ fileName: '回款计划.xls', source: data });
 }
 
@@ -60,21 +70,18 @@ function handleEdit(row: CrmReceivablePlanApi.Plan) {
 async function handleDelete(row: CrmReceivablePlanApi.Plan) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.period]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
-    await deleteReceivablePlan(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.period]),
-      key: 'action_key_msg',
-    });
-    onRefresh();
+    await deleteReceivablePlan(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.period]));
+    handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
-/** 创建回款 */
+/** 创建回款计划 */
 function handleCreateReceivable(row: CrmReceivablePlanApi.Plan) {
   receivableFormModalApi.setData({ plan: row }).open();
 }
@@ -111,6 +118,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -118,11 +126,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<CrmReceivablePlanApi.Plan>,
 });
-
-function onChangeSceneType(key: number | string) {
-  sceneType.value = key.toString();
-  gridApi.query();
-}
 </script>
 
 <template>
@@ -138,11 +141,11 @@ function onChangeSceneType(key: number | string) {
       />
     </template>
 
-    <FormModal @success="onRefresh" />
-    <ReceivableFormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
+    <ReceivableFormModal @success="handleRefresh" />
     <Grid>
       <template #top>
-        <Tabs class="border-none" @change="onChangeSceneType">
+        <Tabs class="-mt-11" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="下属负责的" key="3" />
         </Tabs>
@@ -212,3 +215,8 @@ function onChangeSceneType(key: number | string) {
     </Grid>
   </Page>
 </template>
+<style scoped>
+:deep(.vxe-toolbar div) {
+  z-index: 1;
+}
+</style>
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 db4cd8fa..ec37c668 100644
--- a/apps/web-antd/src/views/crm/statistics/customer/data.ts
+++ b/apps/web-antd/src/views/crm/statistics/customer/data.ts
@@ -100,9 +100,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: getSimpleUserList,
-        allowClear: true,
         labelField: 'nickname',
         valueField: 'id',
+        placeholder: '请选择员工',
+        allowClear: true,
       },
     },
   ];
diff --git a/apps/web-antd/src/views/crm/statistics/customer/index.vue b/apps/web-antd/src/views/crm/statistics/customer/index.vue
index 513088a8..63967b74 100644
--- a/apps/web-antd/src/views/crm/statistics/customer/index.vue
+++ b/apps/web-antd/src/views/crm/statistics/customer/index.vue
@@ -36,8 +36,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
       ajax: {
         query: async (_, formValues) => {
           const res = await getChartDatas(activeTabName.value, formValues);
-          renderEcharts(getChartOptions(activeTabName.value, res));
-          return await getDatas(activeTabName.value, formValues);
+          await renderEcharts(getChartOptions(activeTabName.value, res));
+          return getDatas(activeTabName.value, formValues);
         },
       },
     },
@@ -51,12 +51,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<CrmStatisticsCustomerApi.CustomerSummaryByUser>,
 });
 
+/** tab 切换 */
 async function handleTabChange(key: any) {
   activeTabName.value = key;
   gridApi.setGridOptions({
     columns: useGridColumns(key),
   });
-  gridApi.reload();
+  await gridApi.reload();
 }
 </script>
 
diff --git a/apps/web-antd/src/views/crm/statistics/funnel/index.vue b/apps/web-antd/src/views/crm/statistics/funnel/index.vue
index b715ebce..1b071a82 100644
--- a/apps/web-antd/src/views/crm/statistics/funnel/index.vue
+++ b/apps/web-antd/src/views/crm/statistics/funnel/index.vue
@@ -38,10 +38,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       ajax: {
         query: async ({ page }, formValues) => {
           const res = await getChartDatas(activeTabName.value, formValues);
-          renderEcharts(
+          await renderEcharts(
             getChartOptions(activeTabName.value, active.value, res),
           );
-          return await getDatas(activeTabName.value, {
+          return getDatas(activeTabName.value, {
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
@@ -59,6 +59,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<CrmStatisticsFunnelApi.BusinessSummaryByDate>,
 });
 
+/** tab 切换 */
 async function handleTabChange(key: any) {
   activeTabName.value = key;
   gridApi.setGridOptions({
@@ -67,9 +68,10 @@ async function handleTabChange(key: any) {
       enabled: activeTabName.value !== 'funnelRef',
     },
   });
-  gridApi.reload();
+  await gridApi.reload();
 }
 
+/** 视角切换 */
 function handleActive(value: boolean) {
   active.value = value;
   renderEcharts(
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 dd08f80c..e56c7ebf 100644
--- a/apps/web-antd/src/views/crm/statistics/performance/data.ts
+++ b/apps/web-antd/src/views/crm/statistics/performance/data.ts
@@ -65,9 +65,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: getSimpleUserList,
-        allowClear: true,
         labelField: 'nickname',
         valueField: 'id',
+        placeholder: '请选择员工',
+        allowClear: true,
       },
     },
   ];
diff --git a/apps/web-antd/src/views/crm/statistics/performance/index.vue b/apps/web-antd/src/views/crm/statistics/performance/index.vue
index bfa56f5d..ecbcec83 100644
--- a/apps/web-antd/src/views/crm/statistics/performance/index.vue
+++ b/apps/web-antd/src/views/crm/statistics/performance/index.vue
@@ -53,6 +53,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<CrmStatisticsCustomerApi.CustomerSummaryByUser>,
 });
 
+/** tab 切换 */
 async function handleTabChange(key: any) {
   activeTabName.value = key;
   const params = (await gridApi.formApi.getValues()) as any;
@@ -128,10 +129,12 @@ async function handleTabChange(key: any) {
             100
           ).toFixed(2);
   });
-  renderEcharts(getChartOptions(key, data), true);
-  gridApi.grid.reloadColumn(columnsData);
-  gridApi.grid.reloadData(tableData);
+  await renderEcharts(getChartOptions(key, data), true);
+  await gridApi.grid.reloadColumn(columnsData);
+  await gridApi.grid.reloadData(tableData);
 }
+
+/** 初始化加载 */
 onMounted(() => {
   handleTabChange(activeTabName.value);
 });
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 673d2fda..8eeff969 100644
--- a/apps/web-antd/src/views/crm/statistics/portrait/data.ts
+++ b/apps/web-antd/src/views/crm/statistics/portrait/data.ts
@@ -69,9 +69,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: getSimpleUserList,
-        allowClear: true,
         labelField: 'nickname',
         valueField: 'id',
+        placeholder: '请选择员工',
+        allowClear: true,
       },
     },
   ];
diff --git a/apps/web-antd/src/views/crm/statistics/portrait/index.vue b/apps/web-antd/src/views/crm/statistics/portrait/index.vue
index d8ceea9d..154ff710 100644
--- a/apps/web-antd/src/views/crm/statistics/portrait/index.vue
+++ b/apps/web-antd/src/views/crm/statistics/portrait/index.vue
@@ -38,8 +38,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
       ajax: {
         query: async (_, formValues) => {
           const res = await getDatas(activeTabName.value, formValues);
-          renderLeftEcharts(getChartOptions(activeTabName.value, res).left);
-          renderRightEcharts(getChartOptions(activeTabName.value, res).right);
+          await renderLeftEcharts(getChartOptions(activeTabName.value, res).left);
+          await renderRightEcharts(getChartOptions(activeTabName.value, res).right);
           return res;
         },
       },
@@ -54,12 +54,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<CrmStatisticsCustomerApi.CustomerSummaryByUser>,
 });
 
+/** tab 切换 */
 async function handleTabChange(key: any) {
   activeTabName.value = key;
   gridApi.setGridOptions({
     columns: useGridColumns(key),
   });
-  gridApi.reload();
+  await gridApi.reload();
 }
 </script>
 
diff --git a/apps/web-antd/src/views/crm/statistics/rank/index.vue b/apps/web-antd/src/views/crm/statistics/rank/index.vue
index 5fa21e51..b311bac9 100644
--- a/apps/web-antd/src/views/crm/statistics/rank/index.vue
+++ b/apps/web-antd/src/views/crm/statistics/rank/index.vue
@@ -36,7 +36,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       ajax: {
         query: async (_, formValues) => {
           const res = await getDatas(activeTabName.value, formValues);
-          renderEcharts(getChartOptions(activeTabName.value, res));
+          await renderEcharts(getChartOptions(activeTabName.value, res));
           return res;
         },
       },
@@ -51,12 +51,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<CrmStatisticsCustomerApi.CustomerSummaryByUser>,
 });
 
+/** tab 切换 */
 async function handleTabChange(key: any) {
   activeTabName.value = key;
   gridApi.setGridOptions({
     columns: useGridColumns(key),
   });
-  gridApi.reload();
+  await gridApi.reload();
 }
 </script>
 
diff --git a/apps/web-antd/src/views/erp/finance/account/index.vue b/apps/web-antd/src/views/erp/finance/account/index.vue
index 858ccbd4..c613f827 100644
--- a/apps/web-antd/src/views/erp/finance/account/index.vue
+++ b/apps/web-antd/src/views/erp/finance/account/index.vue
@@ -48,13 +48,12 @@ function handleEdit(row: ErpAccountApi.Account) {
 async function handleDelete(row: ErpAccountApi.Account) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteAccount(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/erp/product/category/index.vue b/apps/web-antd/src/views/erp/product/category/index.vue
index 26ddc0e8..aae93224 100644
--- a/apps/web-antd/src/views/erp/product/category/index.vue
+++ b/apps/web-antd/src/views/erp/product/category/index.vue
@@ -54,13 +54,12 @@ function handleEdit(row: ErpProductCategoryApi.ProductCategory) {
 async function handleDelete(row: ErpProductCategoryApi.ProductCategory) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteProductCategory(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/erp/product/product/index.vue b/apps/web-antd/src/views/erp/product/product/index.vue
index 1748c0d0..fe7a4e7c 100644
--- a/apps/web-antd/src/views/erp/product/product/index.vue
+++ b/apps/web-antd/src/views/erp/product/product/index.vue
@@ -48,13 +48,12 @@ function handleEdit(row: ErpProductApi.Product) {
 async function handleDelete(row: ErpProductApi.Product) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteProduct(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/erp/product/unit/index.vue b/apps/web-antd/src/views/erp/product/unit/index.vue
index 1386c131..0a5871ea 100644
--- a/apps/web-antd/src/views/erp/product/unit/index.vue
+++ b/apps/web-antd/src/views/erp/product/unit/index.vue
@@ -48,13 +48,12 @@ function handleEdit(row: ErpProductUnitApi.ProductUnit) {
 async function handleDelete(row: ErpProductUnitApi.ProductUnit) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteProductUnit(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/erp/purchase/supplier/index.vue b/apps/web-antd/src/views/erp/purchase/supplier/index.vue
index 98288f4a..90c07ba7 100644
--- a/apps/web-antd/src/views/erp/purchase/supplier/index.vue
+++ b/apps/web-antd/src/views/erp/purchase/supplier/index.vue
@@ -40,13 +40,12 @@ function handleEdit(row: ErpSupplierApi.Supplier) {
 async function handleDelete(row: ErpSupplierApi.Supplier) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteSupplier(row.id!);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } catch {
diff --git a/apps/web-antd/src/views/erp/sale/customer/index.vue b/apps/web-antd/src/views/erp/sale/customer/index.vue
index 3716a9f9..1bc88f86 100644
--- a/apps/web-antd/src/views/erp/sale/customer/index.vue
+++ b/apps/web-antd/src/views/erp/sale/customer/index.vue
@@ -48,13 +48,12 @@ function handleEdit(row: ErpCustomerApi.Customer) {
 async function handleDelete(row: ErpCustomerApi.Customer) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteCustomer(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/erp/stock/warehouse/index.vue b/apps/web-antd/src/views/erp/stock/warehouse/index.vue
index 57c51d07..74c2decf 100644
--- a/apps/web-antd/src/views/erp/stock/warehouse/index.vue
+++ b/apps/web-antd/src/views/erp/stock/warehouse/index.vue
@@ -41,13 +41,12 @@ function handleEdit(row: ErpWarehouseApi.Warehouse) {
 async function handleDelete(row: ErpWarehouseApi.Warehouse) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteWarehouse(row.id!);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } catch {
diff --git a/apps/web-antd/src/views/infra/codegen/data.ts b/apps/web-antd/src/views/infra/codegen/data.ts
index cc91a148..2db43ba8 100644
--- a/apps/web-antd/src/views/infra/codegen/data.ts
+++ b/apps/web-antd/src/views/infra/codegen/data.ts
@@ -366,8 +366,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '表名称',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入表名称',
         allowClear: true,
+        placeholder: '请输入表名称',
       },
     },
     {
@@ -375,8 +375,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '表描述',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入表描述',
         allowClear: true,
+        placeholder: '请输入表描述',
       },
     },
     {
diff --git a/apps/web-antd/src/views/infra/codegen/edit/index.vue b/apps/web-antd/src/views/infra/codegen/edit/index.vue
index 371818c3..dd9878dd 100644
--- a/apps/web-antd/src/views/infra/codegen/edit/index.vue
+++ b/apps/web-antd/src/views/infra/codegen/edit/index.vue
@@ -154,8 +154,8 @@ getDetail();
       </div>
 
       <div class="mt-4 flex justify-end space-x-2">
-        <Button v-show="currentStep > 0" @click="prevStep">上一步</Button>
-        <Button v-show="currentStep < steps.length - 1" @click="nextStep">
+        <Button :disabled="currentStep === 0" @click="prevStep">上一步</Button>
+        <Button :disabled="currentStep === steps.length - 1" @click="nextStep">
           下一步
         </Button>
         <Button type="primary" :loading="loading" @click="submitForm">
diff --git a/apps/web-antd/src/views/infra/config/index.vue b/apps/web-antd/src/views/infra/config/index.vue
index 4d684593..84047db8 100644
--- a/apps/web-antd/src/views/infra/config/index.vue
+++ b/apps/web-antd/src/views/infra/config/index.vue
@@ -27,7 +27,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
@@ -54,9 +54,9 @@ async function handleDelete(row: InfraConfigApi.Config) {
     duration: 0,
   });
   try {
-    await deleteConfig(row.id as number);
+    await deleteConfig(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -73,7 +73,7 @@ async function handleDeleteBatch() {
     await deleteConfigList(checkedIds.value);
     checkedIds.value = [];
     message.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -125,7 +125,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid table-title="参数列表">
       <template #toolbar-tools>
         <TableAction
diff --git a/apps/web-antd/src/views/infra/dataSourceConfig/data.ts b/apps/web-antd/src/views/infra/dataSourceConfig/data.ts
index 8ea49f89..6f4c6027 100644
--- a/apps/web-antd/src/views/infra/dataSourceConfig/data.ts
+++ b/apps/web-antd/src/views/infra/dataSourceConfig/data.ts
@@ -55,25 +55,31 @@ export function useFormSchema(): VbenFormSchema[] {
 /** 列表的字段 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '主键编号',
+      minWidth: 100,
     },
     {
       field: 'name',
       title: '数据源名称',
+      minWidth: 150,
     },
     {
       field: 'url',
       title: '数据源连接',
+      minWidth: 300,
     },
     {
       field: 'username',
       title: '用户名',
+      minWidth: 120,
     },
     {
       field: 'createTime',
       title: '创建时间',
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/infra/dataSourceConfig/index.vue b/apps/web-antd/src/views/infra/dataSourceConfig/index.vue
index 77098f78..25ff316e 100644
--- a/apps/web-antd/src/views/infra/dataSourceConfig/index.vue
+++ b/apps/web-antd/src/views/infra/dataSourceConfig/index.vue
@@ -2,15 +2,17 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { InfraDataSourceConfigApi } from '#/api/infra/data-source-config';
 
-import { onMounted } from 'vue';
+import { ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteDataSourceConfig,
+  deleteDataSourceConfigList,
   getDataSourceConfigList,
 } from '#/api/infra/data-source-config';
 import { $t } from '#/locales';
@@ -23,6 +25,11 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
 /** 创建数据源 */
 function handleCreate() {
   formModalApi.setData(null).open();
@@ -38,20 +45,42 @@ async function handleDelete(row: InfraDataSourceConfigApi.DataSourceConfig) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
-    key: 'action_key_msg',
   });
   try {
-    await deleteDataSourceConfig(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
-    });
-    await handleLoadData();
+    await deleteDataSourceConfig(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
+/** 批量删除数据源 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteDataSourceConfigList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: InfraDataSourceConfigApi.DataSourceConfig[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useGridColumns(),
@@ -59,6 +88,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     keepSource: true,
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     pagerConfig: {
       enabled: false,
@@ -69,22 +99,16 @@ const [Grid, gridApi] = useVbenVxeGrid({
       },
     },
   } as VxeTableGridOptions<InfraDataSourceConfigApi.DataSourceConfig>,
-});
-
-/** 加载数据 */
-async function handleLoadData() {
-  await gridApi.query();
-}
-
-/** 初始化 */
-onMounted(() => {
-  handleLoadData();
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 </script>
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="handleLoadData" />
+    <FormModal @success="handleRefresh" />
     <Grid table-title="数据源列表">
       <template #toolbar-tools>
         <TableAction
@@ -96,6 +120,15 @@ onMounted(() => {
               auth: ['infra:data-source-config:create'],
               onClick: handleCreate,
             },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'primary',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:data-source-config:delete'],
+              onClick: handleDeleteBatch,
+            },
           ]"
         />
       </template>
diff --git a/apps/web-antd/src/views/infra/dataSourceConfig/modules/form.vue b/apps/web-antd/src/views/infra/dataSourceConfig/modules/form.vue
index b8e2d8d6..5e6ec850 100644
--- a/apps/web-antd/src/views/infra/dataSourceConfig/modules/form.vue
+++ b/apps/web-antd/src/views/infra/dataSourceConfig/modules/form.vue
@@ -83,7 +83,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/infra/demo/demo01/index.vue b/apps/web-antd/src/views/infra/demo/demo01/index.vue
index 56415414..eaaa44b8 100644
--- a/apps/web-antd/src/views/infra/demo/demo01/index.vue
+++ b/apps/web-antd/src/views/infra/demo/demo01/index.vue
@@ -4,7 +4,7 @@ import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
 
 import { ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
@@ -27,13 +27,19 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo01Contact(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '示例联系人.xls', source: data });
+}
+
 /** 创建示例联系人 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑示例联系人 */
@@ -46,12 +52,11 @@ async function handleDelete(row: Demo01ContactApi.Demo01Contact) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
-    await deleteDemo01Contact(row.id as number);
+    await deleteDemo01Contact(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -59,16 +64,16 @@ async function handleDelete(row: Demo01ContactApi.Demo01Contact) {
 
 /** 批量删除示例联系人 */
 async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting'),
+    content: $t('ui.actionMessage.deletingBatch'),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
     await deleteDemo01ContactList(checkedIds.value);
     checkedIds.value = [];
     message.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -83,12 +88,6 @@ function handleRowCheckboxChange({
   checkedIds.value = records.map((item) => item.id!);
 }
 
-/** 导出表格 */
-async function handleExport() {
-  const data = await exportDemo01Contact(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '示例联系人.xls', source: data });
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -128,8 +127,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
-
+    <FormModal @success="handleRefresh" />
     <Grid table-title="示例联系人列表">
       <template #toolbar-tools>
         <TableAction
@@ -149,11 +147,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
               onClick: handleExport,
             },
             {
-              label: '批量删除',
+              label: $t('ui.actionTitle.deleteBatch'),
               type: 'primary',
               danger: true,
-              disabled: isEmpty(checkedIds),
               icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
               auth: ['infra:demo01-contact:delete'],
               onClick: handleDeleteBatch,
             },
diff --git a/apps/web-antd/src/views/infra/demo/demo01/modules/form.vue b/apps/web-antd/src/views/infra/demo/demo01/modules/form.vue
index 5d01994b..e430bf2b 100644
--- a/apps/web-antd/src/views/infra/demo/demo01/modules/form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo01/modules/form.vue
@@ -54,10 +54,7 @@ const [Modal, modalApi] = useVbenModal({
       // 关闭并提示
       await modalApi.close();
       emit('success');
-      message.success({
-        content: $t('ui.actionMessage.operationSuccess'),
-        key: 'action_process_msg',
-      });
+      message.success($t('ui.actionMessage.operationSuccess'));
     } finally {
       modalApi.unlock();
     }
@@ -67,23 +64,21 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = undefined;
       return;
     }
-
     // 加载数据
-    let data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
-    if (!data) {
+    const data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
+    if (!data || !data.id) {
       return;
     }
-    if (data.id) {
-      modalApi.lock();
-      try {
-        data = await getDemo01Contact(data.id);
-      } finally {
-        modalApi.unlock();
+    modalApi.lock();
+    try {
+      formData.value = await getDemo01Contact(data.id);
+      // 设置到 values
+      if (formData.value) {
+        await formApi.setValues(formData.value);
       }
+    } finally {
+      modalApi.unlock();
     }
-    // 设置到 values
-    formData.value = data;
-    await formApi.setValues(formData.value);
   },
 });
 </script>
diff --git a/apps/web-antd/src/views/infra/demo/demo02/index.vue b/apps/web-antd/src/views/infra/demo/demo02/index.vue
index 38f685da..e30625ae 100644
--- a/apps/web-antd/src/views/infra/demo/demo02/index.vue
+++ b/apps/web-antd/src/views/infra/demo/demo02/index.vue
@@ -25,15 +25,8 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-/** 切换树形展开/收缩状态 */
-const isExpanded = ref(true);
-function toggleExpand() {
-  isExpanded.value = !isExpanded.value;
-  gridApi.grid.setAllTreeExpand(isExpanded.value);
-}
-
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
@@ -61,21 +54,25 @@ function handleAppend(row: Demo02CategoryApi.Demo02Category) {
 /** 删除示例分类 */
 async function handleDelete(row: Demo02CategoryApi.Demo02Category) {
   const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting', [row.id]),
-    key: 'action_key_msg',
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
   });
   try {
-    await deleteDemo02Category(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
-    });
-    onRefresh();
+    await deleteDemo02Category(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
+/** 切换树形展开/收缩状态 */
+const isExpanded = ref(true);
+function handleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -114,14 +111,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
-
+    <FormModal @success="handleRefresh" />
     <Grid table-title="示例分类列表">
       <template #toolbar-tools>
         <TableAction
           :actions="[
             {
-              label: $t('ui.actionTitle.create', ['菜单']),
+              label: $t('ui.actionTitle.create', ['示例分类']),
               type: 'primary',
               icon: ACTION_ICON.ADD,
               auth: ['infra:demo02-category:create'],
@@ -130,7 +126,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: isExpanded ? '收缩' : '展开',
               type: 'primary',
-              onClick: toggleExpand,
+              onClick: handleExpand,
             },
             {
               label: $t('ui.actionTitle.export'),
diff --git a/apps/web-antd/src/views/infra/demo/demo02/modules/form.vue b/apps/web-antd/src/views/infra/demo/demo02/modules/form.vue
index bc7a83d2..4c009b21 100644
--- a/apps/web-antd/src/views/infra/demo/demo02/modules/form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo02/modules/form.vue
@@ -19,14 +19,9 @@ import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 const formData = ref<Demo02CategoryApi.Demo02Category>();
-const parentId = ref<number>(); // 新增下级时的父级 ID
-
 const getTitle = computed(() => {
-  if (formData.value?.id) {
-    return $t('ui.actionTitle.edit', ['示例分类']);
-  }
-  return parentId.value
-    ? $t('ui.actionTitle.create', ['下级示例分类'])
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['示例分类'])
     : $t('ui.actionTitle.create', ['示例分类']);
 });
 
@@ -36,7 +31,7 @@ const [Form, formApi] = useVbenForm({
       class: 'w-full',
     },
     formItemClass: 'col-span-2',
-    labelWidth: 80,
+    labelWidth: 100,
   },
   layout: 'horizontal',
   schema: useFormSchema(),
@@ -70,25 +65,23 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = undefined;
       return;
     }
-
     // 加载数据
-    let data = modalApi.getData<Demo02CategoryApi.Demo02Category>();
-    if (!data) {
+    const data = modalApi.getData<Demo02CategoryApi.Demo02Category>();
+    if (!data || !data.id) {
+      // 设置上级
+      await formApi.setValues(data);
       return;
     }
-
-    if (data.id) {
-      // 编辑
-      modalApi.lock();
-      try {
-        data = await getDemo02Category(data.id);
-      } finally {
-        modalApi.unlock();
+    modalApi.lock();
+    try {
+      formData.value = await getDemo02Category(data.id);
+      // 设置到 values
+      if (formData.value) {
+        await formApi.setValues(formData.value);
       }
+    } finally {
+      modalApi.unlock();
     }
-    // 设置到 values
-    formData.value = data;
-    await formApi.setValues(formData.value);
   },
 });
 </script>
diff --git a/apps/web-antd/src/views/infra/demo/demo03/erp/index.vue b/apps/web-antd/src/views/infra/demo/demo03/erp/index.vue
index 97369749..610f11cc 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/erp/index.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/erp/index.vue
@@ -2,13 +2,12 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
-import { h, ref } from 'vue';
+import { ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus, Trash2 } from '@vben/icons';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { Button, message, Tabs } from 'ant-design-vue';
+import { message, Tabs } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -34,48 +33,53 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo03Student(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+}
+
 /** 创建学生 */
-function onCreate() {
-  formModalApi.setData({}).open();
+function handleCreate() {
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
-function onEdit(row: Demo03StudentApi.Demo03Student) {
+function handleEdit(row: Demo03StudentApi.Demo03Student) {
   formModalApi.setData(row).open();
 }
 
 /** 删除学生 */
-async function onDelete(row: Demo03StudentApi.Demo03Student) {
+async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
-    await deleteDemo03Student(row.id as number);
+    await deleteDemo03Student(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
 /** 批量删除学生 */
-async function onDeleteBatch() {
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting'),
+    content: $t('ui.actionMessage.deletingBatch'),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);
     checkedIds.value = [];
     message.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -85,17 +89,11 @@ const checkedIds = ref<number[]>([]);
 function handleRowCheckboxChange({
   records,
 }: {
-  records: Demo03StudentApi.Demo03Grade[];
+  records: Demo03StudentApi.Demo03Student[];
 }) {
   checkedIds.value = records.map((item) => item.id!);
 }
 
-/** 导出表格 */
-async function onExport() {
-  const data = await exportDemo03Student(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -139,39 +137,37 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
-
+    <FormModal @success="handleRefresh" />
     <div>
       <Grid table-title="学生列表">
         <template #toolbar-tools>
-          <Button
-            :icon="h(Plus)"
-            type="primary"
-            @click="onCreate"
-            v-access:code="['infra:demo03-student:create']"
-          >
-            {{ $t('ui.actionTitle.create', ['学生']) }}
-          </Button>
-          <Button
-            :icon="h(Download)"
-            type="primary"
-            class="ml-2"
-            @click="onExport"
-            v-access:code="['infra:demo03-student:export']"
-          >
-            {{ $t('ui.actionTitle.export') }}
-          </Button>
-          <Button
-            :icon="h(Trash2)"
-            type="primary"
-            danger
-            class="ml-2"
-            :disabled="isEmpty(checkedIds)"
-            @click="onDeleteBatch"
-            v-access:code="['infra:demo03-student:delete']"
-          >
-            批量删除
-          </Button>
+          <TableAction
+            :actions="[
+              {
+                label: $t('ui.actionTitle.create', ['学生']),
+                type: 'primary',
+                icon: ACTION_ICON.ADD,
+                auth: ['infra:demo03-student:create'],
+                onClick: handleCreate,
+              },
+              {
+                label: $t('ui.actionTitle.export'),
+                type: 'primary',
+                icon: ACTION_ICON.DOWNLOAD,
+                auth: ['infra:demo03-student:export'],
+                onClick: handleExport,
+              },
+              {
+                label: $t('ui.actionTitle.deleteBatch'),
+                type: 'primary',
+                danger: true,
+                icon: ACTION_ICON.DELETE,
+                disabled: isEmpty(checkedIds),
+                auth: ['infra:demo03-student:delete'],
+                onClick: handleDeleteBatch,
+              },
+            ]"
+          />
         </template>
         <template #actions="{ row }">
           <TableAction
@@ -181,17 +177,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 type: 'link',
                 icon: ACTION_ICON.EDIT,
                 auth: ['infra:demo03-student:update'],
-                onClick: onEdit.bind(null, row),
+                onClick: handleEdit.bind(null, row),
               },
               {
                 label: $t('common.delete'),
-                danger: true,
                 type: 'link',
+                danger: true,
                 icon: ACTION_ICON.DELETE,
                 auth: ['infra:demo03-student:delete'],
                 popConfirm: {
                   title: $t('ui.actionMessage.deleteConfirm', [row.id]),
-                  confirm: onDelete.bind(null, row),
+                  confirm: handleDelete.bind(null, row),
                 },
               },
             ]"
diff --git a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue
index d35cae25..c9431259 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue
@@ -44,7 +44,6 @@ const [Modal, modalApi] = useVbenModal({
     if (!valid) {
       return;
     }
-
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Course;
@@ -66,7 +65,6 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = undefined;
       return;
     }
-
     // 加载数据
     let data = modalApi.getData<Demo03StudentApi.Demo03Course>();
     if (!data) {
diff --git a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
index 263c129b..7f42c143 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
@@ -2,13 +2,12 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
-import { h, nextTick, ref, watch } from 'vue';
+import { nextTick, ref, watch } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
-import { Plus, Trash2 } from '@vben/icons';
+import { confirm, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
-import { Button, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -34,7 +33,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 创建学生课程 */
-function onCreate() {
+function handleCreate() {
   if (!props.studentId) {
     message.warning('请先选择一个学生!');
     return;
@@ -43,38 +42,37 @@ function onCreate() {
 }
 
 /** 编辑学生课程 */
-function onEdit(row: Demo03StudentApi.Demo03Course) {
+function handleEdit(row: Demo03StudentApi.Demo03Course) {
   formModalApi.setData(row).open();
 }
 
 /** 删除学生课程 */
-async function onDelete(row: Demo03StudentApi.Demo03Course) {
+async function handleDelete(row: Demo03StudentApi.Demo03Course) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
-    await deleteDemo03Course(row.id as number);
+    await deleteDemo03Course(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    await handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
 /** 批量删除学生课程 */
-async function onDeleteBatch() {
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting'),
+    content: $t('ui.actionMessage.deletingBatch'),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
     await deleteDemo03CourseList(checkedIds.value);
     checkedIds.value = [];
     message.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    await handleRefresh();
   } finally {
     hideLoading();
   }
@@ -130,9 +128,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 刷新表格 */
-const onRefresh = async () => {
+async function handleRefresh() {
   await gridApi.query();
-};
+}
 
 /** 监听主表的关联字段的变化，加载对应的子表数据 */
 watch(
@@ -142,35 +140,36 @@ watch(
       return;
     }
     await nextTick();
-    await onRefresh();
+    await handleRefresh();
   },
   { immediate: true },
 );
 </script>
 
 <template>
-  <FormModal @success="onRefresh" />
+  <FormModal @success="handleRefresh" />
   <Grid table-title="学生课程列表">
     <template #toolbar-tools>
-      <Button
-        :icon="h(Plus)"
-        type="primary"
-        @click="onCreate"
-        v-access:code="['infra:demo03-student:create']"
-      >
-        {{ $t('ui.actionTitle.create', ['学生课程']) }}
-      </Button>
-      <Button
-        :icon="h(Trash2)"
-        type="primary"
-        danger
-        class="ml-2"
-        :disabled="isEmpty(checkedIds)"
-        @click="onDeleteBatch"
-        v-access:code="['infra:demo03-student:delete']"
-      >
-        批量删除
-      </Button>
+      <TableAction
+        :actions="[
+          {
+            label: $t('ui.actionTitle.create', ['学生课程']),
+            type: 'primary',
+            icon: ACTION_ICON.ADD,
+            auth: ['infra:demo03-student:create'],
+            onClick: handleCreate,
+          },
+          {
+            label: $t('ui.actionTitle.deleteBatch'),
+            type: 'primary',
+            danger: true,
+            icon: ACTION_ICON.DELETE,
+            auth: ['infra:demo03-student:delete'],
+            disabled: isEmpty(checkedIds),
+            onClick: handleDeleteBatch,
+          },
+        ]"
+      />
     </template>
     <template #actions="{ row }">
       <TableAction
@@ -180,17 +179,17 @@ watch(
             type: 'link',
             icon: ACTION_ICON.EDIT,
             auth: ['infra:demo03-student:update'],
-            onClick: onEdit.bind(null, row),
+            onClick: handleEdit.bind(null, row),
           },
           {
             label: $t('common.delete'),
-            danger: true,
             type: 'link',
+            danger: true,
             icon: ACTION_ICON.DELETE,
             auth: ['infra:demo03-student:delete'],
             popConfirm: {
               title: $t('ui.actionMessage.deleteConfirm', [row.id]),
-              confirm: onDelete.bind(null, row),
+              confirm: handleDelete.bind(null, row),
             },
           },
         ]"
diff --git a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue
index ba1df748..18d39ad0 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue
@@ -44,7 +44,6 @@ const [Modal, modalApi] = useVbenModal({
     if (!valid) {
       return;
     }
-
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Grade;
@@ -66,7 +65,6 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = undefined;
       return;
     }
-
     // 加载数据
     let data = modalApi.getData<Demo03StudentApi.Demo03Grade>();
     if (!data) {
diff --git a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
index 718c1c8c..beee7497 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
@@ -2,13 +2,12 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
-import { h, nextTick, ref, watch } from 'vue';
+import { nextTick, ref, watch } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
-import { Plus, Trash2 } from '@vben/icons';
+import { confirm, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
-import { Button, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -34,7 +33,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 创建学生班级 */
-function onCreate() {
+function handleCreate() {
   if (!props.studentId) {
     message.warning('请先选择一个学生!');
     return;
@@ -43,38 +42,37 @@ function onCreate() {
 }
 
 /** 编辑学生班级 */
-function onEdit(row: Demo03StudentApi.Demo03Grade) {
+function handleEdit(row: Demo03StudentApi.Demo03Grade) {
   formModalApi.setData(row).open();
 }
 
 /** 删除学生班级 */
-async function onDelete(row: Demo03StudentApi.Demo03Grade) {
+async function handleDelete(row: Demo03StudentApi.Demo03Grade) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
-    await deleteDemo03Grade(row.id as number);
+    await deleteDemo03Grade(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    await handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
 /** 批量删除学生班级 */
-async function onDeleteBatch() {
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting'),
+    content: $t('ui.actionMessage.deletingBatch'),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
     await deleteDemo03GradeList(checkedIds.value);
     checkedIds.value = [];
     message.success($t('ui.actionMessage.deleteSuccess'));
-    await onRefresh();
+    await handleRefresh();
   } finally {
     hideLoading();
   }
@@ -130,9 +128,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 刷新表格 */
-const onRefresh = async () => {
+async function handleRefresh() {
   await gridApi.query();
-};
+}
 
 /** 监听主表的关联字段的变化，加载对应的子表数据 */
 watch(
@@ -142,35 +140,36 @@ watch(
       return;
     }
     await nextTick();
-    await onRefresh();
+    await handleRefresh();
   },
   { immediate: true },
 );
 </script>
 
 <template>
-  <FormModal @success="onRefresh" />
+  <FormModal @success="handleRefresh" />
   <Grid table-title="学生班级列表">
     <template #toolbar-tools>
-      <Button
-        :icon="h(Plus)"
-        type="primary"
-        @click="onCreate"
-        v-access:code="['infra:demo03-student:create']"
-      >
-        {{ $t('ui.actionTitle.create', ['学生班级']) }}
-      </Button>
-      <Button
-        :icon="h(Trash2)"
-        type="primary"
-        danger
-        class="ml-2"
-        :disabled="isEmpty(checkedIds)"
-        @click="onDeleteBatch"
-        v-access:code="['infra:demo03-student:delete']"
-      >
-        批量删除
-      </Button>
+      <TableAction
+        :actions="[
+          {
+            label: $t('ui.actionTitle.create', ['学生班级']),
+            type: 'primary',
+            icon: ACTION_ICON.ADD,
+            auth: ['infra:demo03-student:create'],
+            onClick: handleCreate,
+          },
+          {
+            label: $t('ui.actionTitle.deleteBatch'),
+            type: 'primary',
+            danger: true,
+            icon: ACTION_ICON.DELETE,
+            auth: ['infra:demo03-student:delete'],
+            disabled: isEmpty(checkedIds),
+            onClick: handleDeleteBatch,
+          },
+        ]"
+      />
     </template>
     <template #actions="{ row }">
       <TableAction
@@ -180,7 +179,7 @@ watch(
             type: 'link',
             icon: ACTION_ICON.EDIT,
             auth: ['infra:demo03-student:update'],
-            onClick: onEdit.bind(null, row),
+            onClick: handleEdit.bind(null, row),
           },
           {
             label: $t('common.delete'),
@@ -190,7 +189,7 @@ watch(
             auth: ['infra:demo03-student:delete'],
             popConfirm: {
               title: $t('ui.actionMessage.deleteConfirm', [row.id]),
-              confirm: onDelete.bind(null, row),
+              confirm: handleDelete.bind(null, row),
             },
           },
         ]"
diff --git a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/form.vue b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/form.vue
index 3c83ff97..bf4c20f1 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/erp/modules/form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/erp/modules/form.vue
@@ -65,21 +65,20 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
-    if (!data) {
+    const data = modalApi.getData<Demo03StudentApi.Demo03Student>();
+    if (!data || !data.id) {
       return;
     }
-    if (data.id) {
-      modalApi.lock();
-      try {
-        data = await getDemo03Student(data.id);
-      } finally {
-        modalApi.unlock();
+    modalApi.lock();
+    try {
+      formData.value = await getDemo03Student(data.id);
+      // 设置到 values
+      if (formData.value) {
+        await formApi.setValues(formData.value);
       }
+    } finally {
+      modalApi.unlock();
     }
-    // 设置到 values
-    formData.value = data;
-    await formApi.setValues(formData.value);
   },
 });
 </script>
diff --git a/apps/web-antd/src/views/infra/demo/demo03/inner/data.ts b/apps/web-antd/src/views/infra/demo/demo03/inner/data.ts
index b10cf0cf..0166ba1c 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/inner/data.ts
+++ b/apps/web-antd/src/views/infra/demo/demo03/inner/data.ts
@@ -143,7 +143,6 @@ export function useGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Stu
       formatter: 'formatDateTime',
     },
     {
-      field: 'actions',
       title: '操作',
       width: 280,
       fixed: 'right',
@@ -170,7 +169,6 @@ export function useDemo03CourseGridEditColumns(): VxeTableGridOptions<Demo03Stud
       slots: { default: 'score' },
     },
     {
-      field: 'actions',
       title: '操作',
       width: 280,
       fixed: 'right',
diff --git a/apps/web-antd/src/views/infra/demo/demo03/inner/index.vue b/apps/web-antd/src/views/infra/demo/demo03/inner/index.vue
index 3c800d11..60909d5c 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/inner/index.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/inner/index.vue
@@ -2,13 +2,12 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
 
-import { h, ref } from 'vue';
+import { ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus, Trash2 } from '@vben/icons';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { Button, message, Tabs } from 'ant-design-vue';
+import { message, Tabs } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -33,48 +32,53 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.reload();
 }
 
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo03Student(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+}
+
 /** 创建学生 */
-function onCreate() {
-  formModalApi.setData({}).open();
+function handleCreate() {
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
-function onEdit(row: Demo03StudentApi.Demo03Student) {
+function handleEdit(row: Demo03StudentApi.Demo03Student) {
   formModalApi.setData(row).open();
 }
 
 /** 删除学生 */
-async function onDelete(row: Demo03StudentApi.Demo03Student) {
+async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
-    await deleteDemo03Student(row.id as number);
+    await deleteDemo03Student(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
 /** 批量删除学生 */
-async function onDeleteBatch() {
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting'),
+    content: $t('ui.actionMessage.deletingBatch'),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);
     checkedIds.value = [];
     message.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -89,12 +93,6 @@ function handleRowCheckboxChange({
   checkedIds.value = records.map((item) => item.id!);
 }
 
-/** 导出表格 */
-async function onExport() {
-  const data = await exportDemo03Student(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -134,8 +132,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
-
+    <FormModal @success="handleRefresh" />
     <Grid table-title="学生列表">
       <template #expand_content="{ row }">
         <!-- 子表的表单 -->
@@ -149,34 +146,33 @@ const [Grid, gridApi] = useVbenVxeGrid({
         </Tabs>
       </template>
       <template #toolbar-tools>
-        <Button
-          :icon="h(Plus)"
-          type="primary"
-          @click="onCreate"
-          v-access:code="['infra:demo03-student:create']"
-        >
-          {{ $t('ui.actionTitle.create', ['学生']) }}
-        </Button>
-        <Button
-          :icon="h(Download)"
-          type="primary"
-          class="ml-2"
-          @click="onExport"
-          v-access:code="['infra:demo03-student:export']"
-        >
-          {{ $t('ui.actionTitle.export') }}
-        </Button>
-        <Button
-          :icon="h(Trash2)"
-          type="primary"
-          danger
-          class="ml-2"
-          :disabled="isEmpty(checkedIds)"
-          @click="onDeleteBatch"
-          v-access:code="['infra:demo03-student:delete']"
-        >
-          批量删除
-        </Button>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['学生']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:demo03-student:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:demo03-student:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'primary',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:demo03-student:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
       </template>
       <template #actions="{ row }">
         <TableAction
@@ -186,7 +182,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               type: 'link',
               icon: ACTION_ICON.EDIT,
               auth: ['infra:demo03-student:update'],
-              onClick: onEdit.bind(null, row),
+              onClick: handleEdit.bind(null, row),
             },
             {
               label: $t('common.delete'),
@@ -196,7 +192,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               auth: ['infra:demo03-student:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.id]),
-                confirm: onDelete.bind(null, row),
+                confirm: handleDelete.bind(null, row),
               },
             },
           ]"
diff --git a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-form.vue b/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-form.vue
index 274492f4..0a0c6a7a 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-form.vue
@@ -26,6 +26,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     keepSource: true,
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     pagerConfig: {
       enabled: false,
@@ -37,14 +38,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 添加学生课程 */
-const onAdd = async () => {
+async function handleAdd() {
   await gridApi.grid.insertAt({} as Demo03StudentApi.Demo03Course, -1);
-};
+}
 
 /** 删除学生课程 */
-const onDelete = async (row: Demo03StudentApi.Demo03Course) => {
+async function handleDelete(row: Demo03StudentApi.Demo03Course) {
   await gridApi.grid.remove(row);
-};
+}
 
 /** 提供获取表格数据的方法供父组件调用 */
 defineExpose({
@@ -98,7 +99,7 @@ watch(
             auth: ['infra:demo03-student:delete'],
             popConfirm: {
               title: $t('ui.actionMessage.deleteConfirm', [row.id]),
-              confirm: onDelete.bind(null, row),
+              confirm: handleDelete.bind(null, row),
             },
           },
         ]"
@@ -110,7 +111,7 @@ watch(
       :icon="h(Plus)"
       type="primary"
       ghost
-      @click="onAdd"
+      @click="handleAdd"
       v-access:code="['infra:demo03-student:create']"
     >
       {{ $t('ui.actionTitle.create', ['学生课程']) }}
diff --git a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue b/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue
index 8978f2b1..50297db4 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue
@@ -31,7 +31,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 刷新表格 */
-async function onRefresh() {
+async function handleRefresh() {
   await gridApi.grid.loadData(
     await getDemo03CourseListByStudentId(props.studentId!),
   );
@@ -45,7 +45,7 @@ watch(
       return;
     }
     await nextTick();
-    await onRefresh();
+    await handleRefresh();
   },
   { immediate: true },
 );
diff --git a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue b/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue
index e60dcf61..1ad2db74 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue
@@ -31,7 +31,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 刷新表格 */
-async function onRefresh() {
+async function handleRefresh() {
   await gridApi.grid.loadData([
     await getDemo03GradeByStudentId(props.studentId!),
   ]);
@@ -45,7 +45,7 @@ watch(
       return;
     }
     await nextTick();
-    await onRefresh();
+    await handleRefresh();
   },
   { immediate: true },
 );
diff --git a/apps/web-antd/src/views/infra/demo/demo03/normal/data.ts b/apps/web-antd/src/views/infra/demo/demo03/normal/data.ts
index f37aff49..583437d9 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/normal/data.ts
+++ b/apps/web-antd/src/views/infra/demo/demo03/normal/data.ts
@@ -108,14 +108,17 @@ export function useGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Stu
     {
       field: 'id',
       title: '编号',
+      minWidth: 120,
     },
     {
       field: 'name',
       title: '名字',
+      minWidth: 120,
     },
     {
       field: 'sex',
       title: '性别',
+      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_USER_SEX },
@@ -124,21 +127,23 @@ export function useGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Stu
     {
       field: 'birthday',
       title: '出生日期',
+      minWidth: 120,
       formatter: 'formatDateTime',
     },
     {
       field: 'description',
       title: '简介',
+      minWidth: 120,
     },
     {
       field: 'createTime',
       title: '创建时间',
+      minWidth: 120,
       formatter: 'formatDateTime',
     },
     {
-      field: 'actions',
       title: '操作',
-      width: 280,
+      width: 200,
       fixed: 'right',
       slots: { default: 'actions' },
     },
@@ -153,17 +158,18 @@ export function useDemo03CourseGridEditColumns(): VxeTableGridOptions<Demo03Stud
     {
       field: 'name',
       title: '名字',
+      minWidth: 120,
       slots: { default: 'name' },
     },
     {
       field: 'score',
       title: '分数',
+      minWidth: 120,
       slots: { default: 'score' },
     },
     {
-      field: 'actions',
       title: '操作',
-      width: 280,
+      width: 200,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-antd/src/views/infra/demo/demo03/normal/index.vue b/apps/web-antd/src/views/infra/demo/demo03/normal/index.vue
index 346cbfd7..d8564e23 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/normal/index.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/normal/index.vue
@@ -2,13 +2,12 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
 
-import { h, ref } from 'vue';
+import { ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus, Trash2 } from '@vben/icons';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { Button, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -28,31 +27,53 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo03Student(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+}
+
 /** 创建学生 */
-function onCreate() {
-  formModalApi.setData({}).open();
+function handleCreate() {
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
-function onEdit(row: Demo03StudentApi.Demo03Student) {
+function handleEdit(row: Demo03StudentApi.Demo03Student) {
   formModalApi.setData(row).open();
 }
 
 /** 删除学生 */
-async function onDelete(row: Demo03StudentApi.Demo03Student) {
+async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     duration: 0,
-    key: 'action_process_msg',
   });
   try {
-    await deleteDemo03Student(row.id as number);
+    await deleteDemo03Student(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 批量删除学生 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03StudentList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -66,28 +87,6 @@ function handleRowCheckboxChange({
 }) {
   checkedIds.value = records.map((item) => item.id!);
 }
-/** 批量删除学生 */
-async function onDeleteBatch() {
-  const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting'),
-    duration: 0,
-    key: 'action_process_msg',
-  });
-  try {
-    await deleteDemo03StudentList(checkedIds.value);
-    checkedIds.value = [];
-    message.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    hideLoading();
-  }
-}
-
-/** 导出表格 */
-async function onExport() {
-  const data = await exportDemo03Student(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
-}
 
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
@@ -128,38 +127,36 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
-
+    <FormModal @success="handleRefresh" />
     <Grid table-title="学生列表">
       <template #toolbar-tools>
-        <Button
-          :icon="h(Plus)"
-          type="primary"
-          @click="onCreate"
-          v-access:code="['infra:demo03-student:create']"
-        >
-          {{ $t('ui.actionTitle.create', ['学生']) }}
-        </Button>
-        <Button
-          :icon="h(Download)"
-          type="primary"
-          class="ml-2"
-          @click="onExport"
-          v-access:code="['infra:demo03-student:export']"
-        >
-          {{ $t('ui.actionTitle.export') }}
-        </Button>
-        <Button
-          :icon="h(Trash2)"
-          type="primary"
-          danger
-          class="ml-2"
-          :disabled="isEmpty(checkedIds)"
-          @click="onDeleteBatch"
-          v-access:code="['infra:demo03-student:delete']"
-        >
-          批量删除
-        </Button>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['学生']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:demo03-student:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:demo03-student:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'primary',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:demo03-student:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
       </template>
       <template #actions="{ row }">
         <TableAction
@@ -169,17 +166,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
               type: 'link',
               icon: ACTION_ICON.EDIT,
               auth: ['infra:demo03-student:update'],
-              onClick: onEdit.bind(null, row),
+              onClick: handleEdit.bind(null, row),
             },
             {
               label: $t('common.delete'),
-              danger: true,
               type: 'link',
+              danger: true,
               icon: ACTION_ICON.DELETE,
               auth: ['infra:demo03-student:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.id]),
-                confirm: onDelete.bind(null, row),
+                confirm: handleDelete.bind(null, row),
               },
             },
           ]"
diff --git a/apps/web-antd/src/views/infra/demo/demo03/normal/modules/demo03-course-form.vue b/apps/web-antd/src/views/infra/demo/demo03/normal/modules/demo03-course-form.vue
index 867d479f..0595db51 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/normal/modules/demo03-course-form.vue
+++ b/apps/web-antd/src/views/infra/demo/demo03/normal/modules/demo03-course-form.vue
@@ -37,14 +37,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 添加学生课程 */
-const onAdd = async () => {
+async function handleAdd() {
   await gridApi.grid.insertAt({} as Demo03StudentApi.Demo03Course, -1);
-};
+}
 
 /** 删除学生课程 */
-const onDelete = async (row: Demo03StudentApi.Demo03Course) => {
+async function handleDelete(row: Demo03StudentApi.Demo03Course) {
   await gridApi.grid.remove(row);
-};
+}
 
 /** 提供获取表格数据的方法供父组件调用 */
 defineExpose({
@@ -98,7 +98,7 @@ watch(
             auth: ['infra:demo03-student:delete'],
             popConfirm: {
               title: $t('ui.actionMessage.deleteConfirm', [row.id]),
-              confirm: onDelete.bind(null, row),
+              confirm: handleDelete.bind(null, row),
             },
           },
         ]"
@@ -110,7 +110,7 @@ watch(
       :icon="h(Plus)"
       type="primary"
       ghost
-      @click="onAdd"
+      @click="handleAdd"
       v-access:code="['infra:demo03-student:create']"
     >
       {{ $t('ui.actionTitle.create', ['学生课程']) }}
diff --git a/apps/web-antd/src/views/infra/demo/general/demo01/index.vue b/apps/web-antd/src/views/infra/demo/general/demo01/index.vue
index 955598ff..3fdf3626 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo01/index.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo01/index.vue
@@ -3,7 +3,7 @@ import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
 
 import { h, onMounted, reactive, ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { ContentWrap, Page, useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { Download, Plus, Trash2 } from '@vben/icons';
@@ -32,7 +32,6 @@ import {
   exportDemo01Contact,
   getDemo01ContactPage,
 } from '#/api/infra/demo/demo01';
-import { ContentWrap } from '#/components/content-wrap';
 import { DictTag } from '#/components/dict-tag';
 import { $t } from '#/locales';
 import { getRangePickerDefaultProps } from '#/utils';
@@ -88,7 +87,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建示例联系人 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑示例联系人 */
@@ -104,7 +103,7 @@ async function handleDelete(row: Demo01ContactApi.Demo01Contact) {
     key: 'action_process_msg',
   });
   try {
-    await deleteDemo01Contact(row.id as number);
+    await deleteDemo01Contact(row.id!);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.id]),
       key: 'action_process_msg',
diff --git a/apps/web-antd/src/views/infra/demo/general/demo02/index.vue b/apps/web-antd/src/views/infra/demo/general/demo02/index.vue
index 7bd986df..66f0c656 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo02/index.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo02/index.vue
@@ -3,7 +3,7 @@ import type { Demo02CategoryApi } from '#/api/infra/demo/demo02';
 
 import { h, onMounted, reactive, ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { ContentWrap, Page, useVbenModal } from '@vben/common-ui';
 import { Download, Plus } from '@vben/icons';
 import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
 import {
@@ -21,7 +21,6 @@ import {
   exportDemo02Category,
   getDemo02CategoryList,
 } from '#/api/infra/demo/demo02';
-import { ContentWrap } from '#/components/content-wrap';
 import { $t } from '#/locales';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -70,7 +69,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建示例分类 */
 function onCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑示例分类 */
@@ -87,13 +86,12 @@ function onAppend(row: Demo02CategoryApi.Demo02Category) {
 async function onDelete(row: Demo02CategoryApi.Demo02Category) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
-    await deleteDemo02Category(row.id as number);
+    await deleteDemo02Category(row.id!);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-      key: 'action_key_msg',
     });
     await getList();
   } finally {
diff --git a/apps/web-antd/src/views/infra/demo/general/demo03/erp/index.vue b/apps/web-antd/src/views/infra/demo/general/demo03/erp/index.vue
index 1174db95..e56560fe 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo03/erp/index.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo03/erp/index.vue
@@ -3,7 +3,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
 import { h, onMounted, reactive, ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { ContentWrap, Page, useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { Download, Plus, Trash2 } from '@vben/icons';
@@ -33,7 +33,6 @@ import {
   exportDemo03Student,
   getDemo03StudentPage,
 } from '#/api/infra/demo/demo03/erp';
-import { ContentWrap } from '#/components/content-wrap';
 import { DictTag } from '#/components/dict-tag';
 import { $t } from '#/locales';
 import { getRangePickerDefaultProps } from '#/utils';
@@ -99,7 +98,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建学生 */
 function onCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
@@ -115,7 +114,7 @@ async function onDelete(row: Demo03StudentApi.Demo03Student) {
     key: 'action_process_msg',
   });
   try {
-    await deleteDemo03Student(row.id as number);
+    await deleteDemo03Student(row.id!);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.id]),
       key: 'action_process_msg',
diff --git a/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue b/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue
index 74359bf2..b5b636e0 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue
@@ -3,7 +3,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
 import { h, nextTick, onMounted, reactive, ref, watch } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
+import { ContentWrap, useVbenModal } from '@vben/common-ui';
 import { Plus, Trash2 } from '@vben/icons';
 import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
 import { cloneDeep, formatDateTime, isEmpty } from '@vben/utils';
@@ -23,7 +23,6 @@ import {
   deleteDemo03CourseList,
   getDemo03CoursePage,
 } from '#/api/infra/demo/demo03/erp';
-import { ContentWrap } from '#/components/content-wrap';
 import { $t } from '#/locales';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -60,7 +59,7 @@ async function onDelete(row: Demo03StudentApi.Demo03Course) {
     key: 'action_process_msg',
   });
   try {
-    await deleteDemo03Course(row.id as number);
+    await deleteDemo03Course(row.id!);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.id]),
       key: 'action_process_msg',
diff --git a/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue b/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue
index cf331bfd..acf7a6f3 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue
@@ -3,7 +3,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
 import { h, nextTick, onMounted, reactive, ref, watch } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
+import { ContentWrap, useVbenModal } from '@vben/common-ui';
 import { Plus, Trash2 } from '@vben/icons';
 import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
 import { cloneDeep, formatDateTime, isEmpty } from '@vben/utils';
@@ -23,7 +23,6 @@ import {
   deleteDemo03GradeList,
   getDemo03GradePage,
 } from '#/api/infra/demo/demo03/erp';
-import { ContentWrap } from '#/components/content-wrap';
 import { $t } from '#/locales';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -60,7 +59,7 @@ async function onDelete(row: Demo03StudentApi.Demo03Grade) {
     key: 'action_process_msg',
   });
   try {
-    await deleteDemo03Grade(row.id as number);
+    await deleteDemo03Grade(row.id!);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.id]),
       key: 'action_process_msg',
diff --git a/apps/web-antd/src/views/infra/demo/general/demo03/inner/index.vue b/apps/web-antd/src/views/infra/demo/general/demo03/inner/index.vue
index 2bb55cce..5730fb8d 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo03/inner/index.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo03/inner/index.vue
@@ -3,7 +3,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
 
 import { h, onMounted, reactive, ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { ContentWrap, Page, useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { Download, Plus, Trash2 } from '@vben/icons';
@@ -33,7 +33,6 @@ import {
   exportDemo03Student,
   getDemo03StudentPage,
 } from '#/api/infra/demo/demo03/normal';
-import { ContentWrap } from '#/components/content-wrap';
 import { DictTag } from '#/components/dict-tag';
 import { $t } from '#/locales';
 import { getRangePickerDefaultProps } from '#/utils';
@@ -95,7 +94,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建学生 */
 function onCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
@@ -111,7 +110,7 @@ async function onDelete(row: Demo03StudentApi.Demo03Student) {
     key: 'action_process_msg',
   });
   try {
-    await deleteDemo03Student(row.id as number);
+    await deleteDemo03Student(row.id!);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.id]),
       key: 'action_process_msg',
diff --git a/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-course-list.vue b/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-course-list.vue
index 79dc7713..bb49eeb7 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-course-list.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-course-list.vue
@@ -3,11 +3,11 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
 
 import { nextTick, ref, watch } from 'vue';
 
+import { ContentWrap } from '@vben/common-ui';
 import { formatDateTime } from '@vben/utils';
 
 import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
 import { getDemo03CourseListByStudentId } from '#/api/infra/demo/demo03/normal';
-import { ContentWrap } from '#/components/content-wrap';
 
 const props = defineProps<{
   studentId?: number; // 学生编号（主表的关联字段）
diff --git a/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-list.vue b/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-list.vue
index c03fc3ea..a08d67af 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-list.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-list.vue
@@ -3,6 +3,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
 
 import { nextTick, ref, watch } from 'vue';
 
+import { ContentWrap } from '@vben/common-ui';
 import { formatDateTime } from '@vben/utils';
 
 import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
diff --git a/apps/web-antd/src/views/infra/demo/general/demo03/normal/index.vue b/apps/web-antd/src/views/infra/demo/general/demo03/normal/index.vue
index 941f6d32..bfb61ca4 100644
--- a/apps/web-antd/src/views/infra/demo/general/demo03/normal/index.vue
+++ b/apps/web-antd/src/views/infra/demo/general/demo03/normal/index.vue
@@ -3,7 +3,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
 
 import { h, onMounted, reactive, ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { ContentWrap, Page, useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { Download, Plus, Trash2 } from '@vben/icons';
@@ -32,7 +32,6 @@ import {
   exportDemo03Student,
   getDemo03StudentPage,
 } from '#/api/infra/demo/demo03/normal';
-import { ContentWrap } from '#/components/content-wrap';
 import { DictTag } from '#/components/dict-tag';
 import { $t } from '#/locales';
 import { getRangePickerDefaultProps } from '#/utils';
@@ -89,7 +88,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建学生 */
 function onCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
@@ -105,7 +104,7 @@ async function onDelete(row: Demo03StudentApi.Demo03Student) {
     key: 'action_process_msg',
   });
   try {
-    await deleteDemo03Student(row.id as number);
+    await deleteDemo03Student(row.id!);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.id]),
       key: 'action_process_msg',
diff --git a/apps/web-antd/src/views/infra/file/index.vue b/apps/web-antd/src/views/infra/file/index.vue
index 182282cf..a12275dc 100644
--- a/apps/web-antd/src/views/infra/file/index.vue
+++ b/apps/web-antd/src/views/infra/file/index.vue
@@ -55,7 +55,7 @@ async function handleDelete(row: InfraFileApi.File) {
     duration: 0,
   });
   try {
-    await deleteFile(row.id as number);
+    await deleteFile(row.id!);
     message.success(
       $t('ui.actionMessage.deleteSuccess', [row.name || row.path]),
     );
diff --git a/apps/web-antd/src/views/infra/fileConfig/index.vue b/apps/web-antd/src/views/infra/fileConfig/index.vue
index 4ffe5475..0568f820 100644
--- a/apps/web-antd/src/views/infra/fileConfig/index.vue
+++ b/apps/web-antd/src/views/infra/fileConfig/index.vue
@@ -50,7 +50,7 @@ async function handleMaster(row: InfraFileConfigApi.FileConfig) {
   });
   try {
     await updateFileConfigMaster(row.id!);
-    message.success($t('ui.actionMessage.updateSuccess', [row.name]));
+    message.success($t('ui.actionMessage.updateSuccess'));
     handleRefresh();
   } finally {
     hideLoading();
@@ -85,7 +85,7 @@ async function handleDelete(row: InfraFileConfigApi.FileConfig) {
     content: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteFileConfig(row.id as number);
+    await deleteFileConfig(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/infra/job/data.ts b/apps/web-antd/src/views/infra/job/data.ts
index dfe79dd9..e62dd466 100644
--- a/apps/web-antd/src/views/infra/job/data.ts
+++ b/apps/web-antd/src/views/infra/job/data.ts
@@ -59,6 +59,9 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'cronExpression',
       label: 'CRON 表达式',
       component: markRaw(CronTab),
+      componentProps: {
+        placeholder: '请输入 CRON 表达式',
+      },
       rules: 'required',
     },
     {
diff --git a/apps/web-antd/src/views/mall/product/brand/index.vue b/apps/web-antd/src/views/mall/product/brand/index.vue
index 5f5bf55b..ba9c72ac 100644
--- a/apps/web-antd/src/views/mall/product/brand/index.vue
+++ b/apps/web-antd/src/views/mall/product/brand/index.vue
@@ -37,13 +37,12 @@ function handleEdit(row: MallBrandApi.Brand) {
 async function handleDelete(row: MallBrandApi.Brand) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteBrand(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/mall/product/category/index.vue b/apps/web-antd/src/views/mall/product/category/index.vue
index 9fa3f35a..6e375dc1 100644
--- a/apps/web-antd/src/views/mall/product/category/index.vue
+++ b/apps/web-antd/src/views/mall/product/category/index.vue
@@ -28,7 +28,7 @@ function onRefresh() {
 
 /** 创建分类 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 添加下级分类 */
@@ -54,13 +54,12 @@ function handleViewSpu(id: number) {
 async function handleDelete(row: MallCategoryApi.Category) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteCategory(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/mall/product/property/modules/property-grid.vue b/apps/web-antd/src/views/mall/product/property/modules/property-grid.vue
index 253580df..8c2347e2 100644
--- a/apps/web-antd/src/views/mall/product/property/modules/property-grid.vue
+++ b/apps/web-antd/src/views/mall/product/property/modules/property-grid.vue
@@ -42,13 +42,12 @@ function handleEdit(row: any) {
 async function handleDelete(row: MallPropertyApi.Property) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteProperty(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/mall/product/property/modules/value-grid.vue b/apps/web-antd/src/views/mall/product/property/modules/value-grid.vue
index a2ce568a..5dfc451f 100644
--- a/apps/web-antd/src/views/mall/product/property/modules/value-grid.vue
+++ b/apps/web-antd/src/views/mall/product/property/modules/value-grid.vue
@@ -49,13 +49,12 @@ function handleEdit(row: MallPropertyApi.PropertyValue) {
 async function handleDelete(row: MallPropertyApi.PropertyValue) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deletePropertyValue(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/mall/product/spu/index.vue b/apps/web-antd/src/views/mall/product/spu/index.vue
index 4dd9e442..bbf0fc41 100644
--- a/apps/web-antd/src/views/mall/product/spu/index.vue
+++ b/apps/web-antd/src/views/mall/product/spu/index.vue
@@ -102,13 +102,12 @@ function handleEdit(row: MallSpuApi.Spu) {
 async function handleDelete(row: MallSpuApi.Spu) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteSpu(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/mall/product/spu/modules/detail.vue b/apps/web-antd/src/views/mall/product/spu/modules/detail.vue
index 93326a3b..c6407644 100644
--- a/apps/web-antd/src/views/mall/product/spu/modules/detail.vue
+++ b/apps/web-antd/src/views/mall/product/spu/modules/detail.vue
@@ -1,6 +1,10 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+</script>
 
 <template>
-  <!-- TODO @xingyu：待开发 -->
-  <div>detail</div>
+  <Page>
+    <!-- TODO @xingyu：待开发 -->
+    <div>detail</div>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/mall/product/spu/modules/form.vue b/apps/web-antd/src/views/mall/product/spu/modules/form.vue
index 9da5b7b5..3cfb43da 100644
--- a/apps/web-antd/src/views/mall/product/spu/modules/form.vue
+++ b/apps/web-antd/src/views/mall/product/spu/modules/form.vue
@@ -4,14 +4,13 @@ import type { MallSpuApi } from '#/api/mall/product/spu';
 import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
-import { Page } from '@vben/common-ui';
+import { ContentWrap, Page } from '@vben/common-ui';
 import { convertToInteger, formatToFraction } from '@vben/utils';
 
 import { Button, Tabs } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 import { createSpu, getSpu, updateSpu } from '#/api/mall/product/spu';
-import { ContentWrap } from '#/components/content-wrap';
 
 import {
   useDeliveryFormSchema,
diff --git a/apps/web-antd/src/views/mall/promotion/article/category/index.vue b/apps/web-antd/src/views/mall/promotion/article/category/index.vue
index ab62e4eb..d164e649 100644
--- a/apps/web-antd/src/views/mall/promotion/article/category/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/article/category/index.vue
@@ -40,13 +40,12 @@ function handleEdit(row: MallArticleCategoryApi.ArticleCategory) {
 async function handleDelete(row: MallArticleCategoryApi.ArticleCategory) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteArticleCategory(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/mall/promotion/article/index.vue b/apps/web-antd/src/views/mall/promotion/article/index.vue
index 2d4c1dce..1f9f8146 100644
--- a/apps/web-antd/src/views/mall/promotion/article/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/article/index.vue
@@ -37,13 +37,12 @@ function handleEdit(row: MallArticleApi.Article) {
 async function handleDelete(row: MallArticleApi.Article) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.title]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteArticle(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.title]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/mall/promotion/banner/index.vue b/apps/web-antd/src/views/mall/promotion/banner/index.vue
index 9c5ebcf1..349ffcfa 100644
--- a/apps/web-antd/src/views/mall/promotion/banner/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/banner/index.vue
@@ -37,13 +37,12 @@ function handleEdit(row: MallBannerApi.Banner) {
 async function handleDelete(row: MallBannerApi.Banner) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.title]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteBanner(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.title]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/mall/promotion/bargain/activity/index.vue b/apps/web-antd/src/views/mall/promotion/bargain/activity/index.vue
index 4256e90e..14d64812 100644
--- a/apps/web-antd/src/views/mall/promotion/bargain/activity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/bargain/activity/index.vue
@@ -51,13 +51,12 @@ async function handleClose(row: MallBargainActivityApi.BargainActivity) {
 
   const hideLoading = message.loading({
     content: '确认关闭该砍价活动吗？',
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await closeBargainActivity(row.id as number);
     message.success({
       content: '关闭成功',
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
@@ -69,13 +68,12 @@ async function handleClose(row: MallBargainActivityApi.BargainActivity) {
 async function handleDelete(row: MallBargainActivityApi.BargainActivity) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteBargainActivity(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/mall/promotion/combination/activity/index.vue b/apps/web-antd/src/views/mall/promotion/combination/activity/index.vue
index 75b47008..d6d68d9f 100644
--- a/apps/web-antd/src/views/mall/promotion/combination/activity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/combination/activity/index.vue
@@ -53,13 +53,12 @@ async function handleClose(
 
   const hideLoading = message.loading({
     content: '关闭中...',
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await closeCombinationActivity(row.id as number);
     message.success({
       content: '关闭成功',
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
@@ -73,13 +72,12 @@ async function handleDelete(
 ) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteCombinationActivity(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/index.vue b/apps/web-antd/src/views/mall/promotion/coupon/index.vue
index a6c811a6..6e673834 100644
--- a/apps/web-antd/src/views/mall/promotion/coupon/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/coupon/index.vue
@@ -26,13 +26,12 @@ const statusTabs = ref(getStatusTabs());
 async function handleDelete(row: MallCouponApi.Coupon) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteCoupon(row.id as number);
     message.success({
       content: '回收成功',
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
@@ -46,7 +45,7 @@ function onRefresh() {
 }
 
 /** Tab切换 */
-function onTabChange(tabName: string) {
+function onTabChange(tabName: any) {
   activeTab.value = tabName;
   // 设置状态查询参数
   const formValues = gridApi.formApi.getValues();
@@ -99,7 +98,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       />
     </template>
 
-    <Grid table-title="优惠券列表">
+    <Grid table-title="领取记录">
       <template #top>
         <Tabs v-model:active-key="activeTab" type="card" @change="onTabChange">
           <TabPane
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/template/index.vue b/apps/web-antd/src/views/mall/promotion/coupon/template/index.vue
index 70c39f06..f4db470b 100644
--- a/apps/web-antd/src/views/mall/promotion/coupon/template/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/coupon/template/index.vue
@@ -46,13 +46,12 @@ function handleCreate() {
 async function handleDelete(row: MallCouponTemplateApi.CouponTemplate) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteCouponTemplate(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/mall/promotion/discountActivity/index.vue b/apps/web-antd/src/views/mall/promotion/discountActivity/index.vue
index 410c8f1e..97c16b3a 100644
--- a/apps/web-antd/src/views/mall/promotion/discountActivity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/discountActivity/index.vue
@@ -51,13 +51,12 @@ async function handleClose(row: MallDiscountActivityApi.DiscountActivity) {
 
   const hideLoading = message.loading({
     content: '正在关闭中',
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await closeDiscountActivity(row.id as number);
     message.success({
       content: '关闭成功',
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
@@ -69,13 +68,12 @@ async function handleClose(row: MallDiscountActivityApi.DiscountActivity) {
 async function handleDelete(row: MallDiscountActivityApi.DiscountActivity) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteDiscountActivity(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue b/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue
index 89fae90a..2b05f451 100644
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue
@@ -51,13 +51,12 @@ async function handleClose(row: MallRewardActivityApi.RewardActivity) {
 
   const hideLoading = message.loading({
     content: '正在关闭中',
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await closeRewardActivity(row.id as number);
     message.success({
       content: '关闭成功',
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
@@ -69,13 +68,12 @@ async function handleClose(row: MallRewardActivityApi.RewardActivity) {
 async function handleDelete(row: MallRewardActivityApi.RewardActivity) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteRewardActivity(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/mall/promotion/seckill/activity/formatter.ts b/apps/web-antd/src/views/mall/promotion/seckill/activity/formatter.ts
index db1bce54..5ec39d38 100644
--- a/apps/web-antd/src/views/mall/promotion/seckill/activity/formatter.ts
+++ b/apps/web-antd/src/views/mall/promotion/seckill/activity/formatter.ts
@@ -9,7 +9,7 @@ export function setConfigList(list: any[]) {
 }
 
 /** 格式化配置名称 */
-export function formatConfigNames(configId: number): string {
+export function formatConfigNames(configId: number | string): string {
   const config = configList.find((item) => item.id === configId);
   return config === null || config === undefined
     ? ''
@@ -27,8 +27,11 @@ export function formatSeckillPrice(products: any[]): string {
 
 /** 格式化活动时间范围 */
 export function formatTimeRange(
-  startTime: Date | string,
-  endTime: Date | string,
+  startTime: Date | string | undefined,
+  endTime: Date | string | undefined,
 ): string {
-  return `${formatDate(startTime, 'YYYY-MM-DD')} ~ ${formatDate(endTime, 'YYYY-MM-DD')}`;
+  if (startTime && endTime) {
+    return `${formatDate(startTime, 'YYYY-MM-DD')} ~ ${formatDate(endTime, 'YYYY-MM-DD')}`;
+  }
+  return '';
 }
diff --git a/apps/web-antd/src/views/mall/promotion/seckill/activity/index.vue b/apps/web-antd/src/views/mall/promotion/seckill/activity/index.vue
index 0259984c..67700a2b 100644
--- a/apps/web-antd/src/views/mall/promotion/seckill/activity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/seckill/activity/index.vue
@@ -46,14 +46,13 @@ function handleCreate() {
 /** 关闭活动 */
 async function handleClose(row: MallSeckillActivityApi.SeckillActivity) {
   const hideLoading = message.loading({
-    content: $t('ui.actionMessage.closing', [row.name]),
-    key: 'action_key_msg',
+    content: '活动关闭中...',
+    duration: 0,
   });
   try {
     await closeSeckillActivity(row.id as number);
     message.success({
       content: '关闭成功',
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
@@ -65,13 +64,12 @@ async function handleClose(row: MallSeckillActivityApi.SeckillActivity) {
 async function handleDelete(row: MallSeckillActivityApi.SeckillActivity) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteSeckillActivity(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/mall/promotion/seckill/config/index.vue b/apps/web-antd/src/views/mall/promotion/seckill/config/index.vue
index e60d0f89..5f091751 100644
--- a/apps/web-antd/src/views/mall/promotion/seckill/config/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/seckill/config/index.vue
@@ -41,13 +41,12 @@ function handleEdit(row: MallSeckillConfigApi.SeckillConfig) {
 async function handleDelete(row: MallSeckillConfigApi.SeckillConfig) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteSeckillConfig(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/mall/trade/afterSale/modules/detail.vue b/apps/web-antd/src/views/mall/trade/afterSale/modules/detail.vue
index 93326a3b..c6407644 100644
--- a/apps/web-antd/src/views/mall/trade/afterSale/modules/detail.vue
+++ b/apps/web-antd/src/views/mall/trade/afterSale/modules/detail.vue
@@ -1,6 +1,10 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+</script>
 
 <template>
-  <!-- TODO @xingyu：待开发 -->
-  <div>detail</div>
+  <Page>
+    <!-- TODO @xingyu：待开发 -->
+    <div>detail</div>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/mall/trade/delivery/express/index.vue b/apps/web-antd/src/views/mall/trade/delivery/express/index.vue
index 356e27bc..c2fcc7c2 100644
--- a/apps/web-antd/src/views/mall/trade/delivery/express/index.vue
+++ b/apps/web-antd/src/views/mall/trade/delivery/express/index.vue
@@ -48,13 +48,12 @@ function handleEdit(row: MallDeliveryExpressApi.DeliveryExpress) {
 async function handleDelete(row: MallDeliveryExpressApi.DeliveryExpress) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteDeliveryExpress(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/mall/trade/delivery/expressTemplate/index.vue b/apps/web-antd/src/views/mall/trade/delivery/expressTemplate/index.vue
index 3e8d2d7c..5355825c 100644
--- a/apps/web-antd/src/views/mall/trade/delivery/expressTemplate/index.vue
+++ b/apps/web-antd/src/views/mall/trade/delivery/expressTemplate/index.vue
@@ -42,13 +42,12 @@ async function handleDelete(
 ) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteDeliveryExpressTemplate(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/index.vue b/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/index.vue
index 705cac7f..af96f948 100644
--- a/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/index.vue
+++ b/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/index.vue
@@ -51,13 +51,12 @@ function handleBind(row: MallDeliveryPickUpStoreApi.PickUpStore) {
 async function handleDelete(row: MallDeliveryPickUpStoreApi.PickUpStore) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteDeliveryPickUpStore(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/mall/trade/order/modules/detail.vue b/apps/web-antd/src/views/mall/trade/order/modules/detail.vue
index 93326a3b..c6407644 100644
--- a/apps/web-antd/src/views/mall/trade/order/modules/detail.vue
+++ b/apps/web-antd/src/views/mall/trade/order/modules/detail.vue
@@ -1,6 +1,10 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+</script>
 
 <template>
-  <!-- TODO @xingyu：待开发 -->
-  <div>detail</div>
+  <Page>
+    <!-- TODO @xingyu：待开发 -->
+    <div>detail</div>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/member/group/index.vue b/apps/web-antd/src/views/member/group/index.vue
index c7275576..b7da6c8c 100644
--- a/apps/web-antd/src/views/member/group/index.vue
+++ b/apps/web-antd/src/views/member/group/index.vue
@@ -37,13 +37,12 @@ function handleEdit(row: MemberGroupApi.Group) {
 async function handleDelete(row: MemberGroupApi.Group) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteGroup(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/member/level/index.vue b/apps/web-antd/src/views/member/level/index.vue
index dab90a0f..c6ae2246 100644
--- a/apps/web-antd/src/views/member/level/index.vue
+++ b/apps/web-antd/src/views/member/level/index.vue
@@ -37,13 +37,12 @@ function handleEdit(row: MemberLevelApi.Level) {
 async function handleDelete(row: MemberLevelApi.Level) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteLevel(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/member/signin/config/index.vue b/apps/web-antd/src/views/member/signin/config/index.vue
index e3945647..cbee2f47 100644
--- a/apps/web-antd/src/views/member/signin/config/index.vue
+++ b/apps/web-antd/src/views/member/signin/config/index.vue
@@ -40,13 +40,12 @@ function handleEdit(row: MemberSignInConfigApi.SignInConfig) {
 async function handleDelete(row: MemberSignInConfigApi.SignInConfig) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting'),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteSignInConfig(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess'),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
@@ -114,7 +113,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               icon: ACTION_ICON.DELETE,
               auth: ['point:sign-in-config:delete'],
               popConfirm: {
-                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                title: $t('ui.actionMessage.deleteConfirm', [row.day]),
                 confirm: handleDelete.bind(null, row),
               },
             },
diff --git a/apps/web-antd/src/views/member/tag/index.vue b/apps/web-antd/src/views/member/tag/index.vue
index c3221622..03ef962c 100644
--- a/apps/web-antd/src/views/member/tag/index.vue
+++ b/apps/web-antd/src/views/member/tag/index.vue
@@ -37,13 +37,12 @@ function handleEdit(row: MemberTagApi.Tag) {
 async function handleDelete(row: MemberTagApi.Tag) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteMemberTag(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/mp/account/index.vue b/apps/web-antd/src/views/mp/account/index.vue
index 39be684a..f204ed75 100644
--- a/apps/web-antd/src/views/mp/account/index.vue
+++ b/apps/web-antd/src/views/mp/account/index.vue
@@ -42,13 +42,12 @@ function handleEdit(row: MpAccountApi.Account) {
 async function handleDelete(row: MpAccountApi.Account) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteAccount(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
@@ -60,13 +59,12 @@ async function handleDelete(row: MpAccountApi.Account) {
 async function handleGenerateQrCode(row: MpAccountApi.Account) {
   const hideLoading = message.loading({
     content: '生成二维码',
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await generateAccountQrCode(row.id as number);
     message.success({
       content: '生成二维码成功',
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
@@ -77,14 +75,13 @@ async function handleGenerateQrCode(row: MpAccountApi.Account) {
 /** 清空 API 配额 */
 async function handleCleanQuota(row: MpAccountApi.Account) {
   const hideLoading = message.loading({
-    content: '清空 API 配额',
-    key: 'action_key_msg',
+    content: '正在清空 API 配额',
+    duration: 0,
   });
   try {
     await clearAccountQuota(row.id as number);
     message.success({
       content: '清空 API 配额成功',
-      key: 'action_key_msg',
     });
   } finally {
     hideLoading();
diff --git a/apps/web-antd/src/views/mp/tag/index.vue b/apps/web-antd/src/views/mp/tag/index.vue
index a195f67c..c576c245 100644
--- a/apps/web-antd/src/views/mp/tag/index.vue
+++ b/apps/web-antd/src/views/mp/tag/index.vue
@@ -3,10 +3,8 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MpTagApi } from '#/api/mp/tag';
 
 import { onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { useTabs } from '@vben/hooks';
 
 import { message } from 'ant-design-vue';
 
@@ -18,9 +16,6 @@ import { $t } from '#/locales';
 import { useGridColumns } from './data';
 import Form from './modules/form.vue';
 
-const { push } = useRouter(); // 路由
-const tabs = useTabs();
-
 const accountId = ref(-1);
 const accountOptions = ref<{ label: string; value: number }[]>([]);
 
@@ -37,28 +32,28 @@ async function getAccountList() {
       label: item.name,
       value: item.id,
     }));
-    gridApi.setState({
-      formOptions: {
-        schema: [
-          {
-            fieldName: 'accountId',
-            label: '公众号',
-            component: 'Select',
-            componentProps: {
-              options: accountOptions,
-            },
-          },
-        ],
-      },
-    });
     gridApi.formApi.setValues({
       accountId: accountId.value,
     });
   } else {
     message.error('未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置');
-    await push({ name: 'MpAccount' });
-    tabs.closeCurrentTab();
+    // await push({ name: 'MpAccount' });
+    // tabs.closeCurrentTab();
   }
+  gridApi.setState({
+    formOptions: {
+      schema: [
+        {
+          fieldName: 'accountId',
+          label: '公众号',
+          component: 'Select',
+          componentProps: {
+            options: accountOptions.value || [],
+          },
+        },
+      ],
+    },
+  });
 }
 /** 刷新表格 */
 function onRefresh() {
@@ -79,13 +74,12 @@ function handleEdit(row: MpTagApi.Tag) {
 async function handleDelete(row: MpTagApi.Tag) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deleteTag(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
@@ -96,13 +90,12 @@ async function handleDelete(row: MpTagApi.Tag) {
 async function handleSync() {
   const hideLoading = message.loading({
     content: '是否确认同步标签？',
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await syncTag(accountId.value);
     message.success({
       content: '同步标签成功',
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
@@ -148,12 +141,12 @@ onMounted(async () => {
 <template>
   <Page auto-content-height>
     <FormModal @success="onRefresh" />
-    <Grid table-title="公众号账号列表">
+    <Grid table-title="公众号标签列表">
       <template #toolbar-tools>
         <TableAction
           :actions="[
             {
-              label: $t('ui.actionTitle.create', ['公众号账号']),
+              label: $t('ui.actionTitle.create', ['公众号标签']),
               type: 'primary',
               icon: ACTION_ICON.ADD,
               auth: ['mp:tag:create'],
diff --git a/apps/web-antd/src/views/pay/app/modules/data.ts b/apps/web-antd/src/views/pay/app/modules/data.ts
index 37fc4fc4..59c9b4a0 100644
--- a/apps/web-antd/src/views/pay/app/modules/data.ts
+++ b/apps/web-antd/src/views/pay/app/modules/data.ts
@@ -454,7 +454,6 @@ export function channelSchema(formType: string): VbenFormSchema[] {
             accept: ['pem'],
           },
         }),
-        rules: 'required',
         dependencies: {
           show(values) {
             return values?.config?.apiVersion === 'v3';
diff --git a/apps/web-antd/src/views/pay/cashier/index.vue b/apps/web-antd/src/views/pay/cashier/index.vue
index d7fc4100..31662f43 100644
--- a/apps/web-antd/src/views/pay/cashier/index.vue
+++ b/apps/web-antd/src/views/pay/cashier/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PayOrderApi } from '#/api/pay/order';
 
-import { onMounted, ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
@@ -294,6 +294,10 @@ function goReturnUrl(payResult: string) {
 onMounted(async () => {
   await getDetail();
 });
+
+onBeforeUnmount(() => {
+  clearQueryInterval();
+});
 </script>
 <template>
   <Page auto-content-height>
diff --git a/apps/web-antd/src/views/pay/demo/order/index.vue b/apps/web-antd/src/views/pay/demo/order/index.vue
index 3eff1a81..f143cc6a 100644
--- a/apps/web-antd/src/views/pay/demo/order/index.vue
+++ b/apps/web-antd/src/views/pay/demo/order/index.vue
@@ -48,13 +48,12 @@ function handlePay(row: DemoOrderApi.Order) {
 async function handleRefund(row: DemoOrderApi.Order) {
   const hideLoading = message.loading({
     content: '退款中，请稍后...',
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await refundDemoOrder(row.id as number);
     message.success({
       content: '退款成功',
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/pay/demo/withdraw/index.vue b/apps/web-antd/src/views/pay/demo/withdraw/index.vue
index d2d6cc51..8f856b0f 100644
--- a/apps/web-antd/src/views/pay/demo/withdraw/index.vue
+++ b/apps/web-antd/src/views/pay/demo/withdraw/index.vue
@@ -36,13 +36,12 @@ function handleCreate() {
 async function handleTransfer(row: DemoWithdrawApi.Withdraw) {
   const hideLoading = message.loading({
     content: '转账中，请稍后...',
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     const payTransferId = await transferDemoWithdraw(row.id as number);
     message.success({
       content: `转账提交成功，转账单号：${payTransferId}`,
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/pay/wallet/rechargePackage/index.vue b/apps/web-antd/src/views/pay/wallet/rechargePackage/index.vue
index 6c2b497a..61606b2a 100644
--- a/apps/web-antd/src/views/pay/wallet/rechargePackage/index.vue
+++ b/apps/web-antd/src/views/pay/wallet/rechargePackage/index.vue
@@ -39,13 +39,12 @@ function handleEdit(row: any) {
 async function handleDelete(row: any) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
     await deletePackage(row.id as number);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
     });
     onRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/system/dept/index.vue b/apps/web-antd/src/views/system/dept/index.vue
index 9e09c98c..eb8c552a 100644
--- a/apps/web-antd/src/views/system/dept/index.vue
+++ b/apps/web-antd/src/views/system/dept/index.vue
@@ -63,7 +63,7 @@ async function handleDelete(row: SystemDeptApi.Dept) {
     duration: 0,
   });
   try {
-    await deleteDept(row.id as number);
+    await deleteDept(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
@@ -159,7 +159,7 @@ onMounted(async () => {
               onClick: handleExpand,
             },
             {
-              label: '批量删除',
+              label: $t('ui.actionTitle.deleteBatch'),
               type: 'primary',
               danger: true,
               icon: ACTION_ICON.DELETE,
diff --git a/apps/web-antd/src/views/system/dict/data.ts b/apps/web-antd/src/views/system/dict/data.ts
index a35cc30c..a2c6ede6 100644
--- a/apps/web-antd/src/views/system/dict/data.ts
+++ b/apps/web-antd/src/views/system/dict/data.ts
@@ -292,9 +292,7 @@ export function useDataGridFormSchema(): VbenFormSchema[] {
   ];
 }
 
-/**
- * 字典数据表格列
- */
+/** 字典数据表格列 */
 export function useDataGridColumns(): VxeTableGridOptions['columns'] {
   return [
     { type: 'checkbox', width: 40 },
diff --git a/apps/web-antd/src/views/system/dict/modules/type-grid.vue b/apps/web-antd/src/views/system/dict/modules/type-grid.vue
index ebfa663a..5c333b30 100644
--- a/apps/web-antd/src/views/system/dict/modules/type-grid.vue
+++ b/apps/web-antd/src/views/system/dict/modules/type-grid.vue
@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import type {
-  VxeGridListeners,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemDictTypeApi } from '#/api/system/dict/type';
 
 import { ref } from 'vue';
diff --git a/apps/web-antd/src/views/system/mail/account/index.vue b/apps/web-antd/src/views/system/mail/account/index.vue
index 467ed2de..69568380 100644
--- a/apps/web-antd/src/views/system/mail/account/index.vue
+++ b/apps/web-antd/src/views/system/mail/account/index.vue
@@ -44,9 +44,10 @@ function handleEdit(row: SystemMailAccountApi.MailAccount) {
 async function handleDelete(row: SystemMailAccountApi.MailAccount) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.mail]),
+    duration: 0,
   });
   try {
-    await deleteMailAccount(row.id as number);
+    await deleteMailAccount(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.mail]));
     handleRefresh();
   } finally {
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 14191bf0..21b07dbc 100644
--- a/apps/web-antd/src/views/system/mail/template/data.ts
+++ b/apps/web-antd/src/views/system/mail/template/data.ts
@@ -119,28 +119,31 @@ export function useSendMailFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'toMails',
       label: '收件邮箱',
-      component: 'Textarea',
+      component: 'Select',
       componentProps: {
-        placeholder: '请输入收件邮箱，每行一个邮箱地址',
-        rows: 3,
+        mode: 'tags',
+        allowClear: true,
+        placeholder: '请输入收件邮箱，按 Enter 添加',
       },
     },
     {
       fieldName: 'ccMails',
       label: '抄送邮箱',
-      component: 'Textarea',
+      component: 'Select',
       componentProps: {
-        placeholder: '请输入抄送邮箱，每行一个邮箱地址',
-        rows: 2,
+        mode: 'tags',
+        allowClear: true,
+        placeholder: '请输入抄送邮箱，按 Enter 添加',
       },
     },
     {
       fieldName: 'bccMails',
       label: '密送邮箱',
-      component: 'Textarea',
+      component: 'Select',
       componentProps: {
-        placeholder: '请输入密送邮箱，每行一个邮箱地址',
-        rows: 2,
+        mode: 'tags',
+        allowClear: true,
+        placeholder: '请输入密送邮箱，按 Enter 添加',
       },
     },
   ];
diff --git a/apps/web-antd/src/views/system/mail/template/index.vue b/apps/web-antd/src/views/system/mail/template/index.vue
index eccabef8..1ea2e466 100644
--- a/apps/web-antd/src/views/system/mail/template/index.vue
+++ b/apps/web-antd/src/views/system/mail/template/index.vue
@@ -66,7 +66,7 @@ async function handleDelete(row: SystemMailTemplateApi.MailTemplate) {
     duration: 0,
   });
   try {
-    await deleteMailTemplate(row.id as number);
+    await deleteMailTemplate(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/system/mail/template/modules/send-form.vue b/apps/web-antd/src/views/system/mail/template/modules/send-form.vue
index b5d6a012..d24acd11 100644
--- a/apps/web-antd/src/views/system/mail/template/modules/send-form.vue
+++ b/apps/web-antd/src/views/system/mail/template/modules/send-form.vue
@@ -42,17 +42,10 @@ const [Modal, modalApi] = useVbenModal({
         paramsObj[param] = values[`param_${param}`];
       });
     }
-    const parseEmails = (text: string): string[] => {
-      if (!text) return [];
-      return text
-        .split('\n')
-        .map((email) => email.trim())
-        .filter((email) => email.length > 0);
-    };
     const data: SystemMailTemplateApi.MailSendReqVO = {
-      toMails: parseEmails(values.toMails || ''),
-      ccMails: parseEmails(values.ccMails || ''),
-      bccMails: parseEmails(values.bccMails || ''),
+      toMails: values.toMails,
+      ccMails: values.ccMails,
+      bccMails: values.bccMails,
       templateCode: formData.value?.code || '',
       templateParams: paramsObj,
     };
@@ -64,8 +57,6 @@ const [Modal, modalApi] = useVbenModal({
       await modalApi.close();
       emit('success');
       message.success('邮件发送成功');
-    } catch (error) {
-      console.error('发送邮件失败', error);
     } finally {
       modalApi.unlock();
     }
diff --git a/apps/web-antd/src/views/system/menu/index.vue b/apps/web-antd/src/views/system/menu/index.vue
index 3ff14471..6bf0af42 100644
--- a/apps/web-antd/src/views/system/menu/index.vue
+++ b/apps/web-antd/src/views/system/menu/index.vue
@@ -29,7 +29,7 @@ function handleRefresh() {
 
 /** 创建菜单 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 添加下级菜单 */
@@ -49,7 +49,7 @@ async function handleDelete(row: SystemMenuApi.Menu) {
     duration: 0,
   });
   try {
-    await deleteMenu(row.id as number);
+    await deleteMenu(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/system/notice/index.vue b/apps/web-antd/src/views/system/notice/index.vue
index a3e8bf69..97fbd767 100644
--- a/apps/web-antd/src/views/system/notice/index.vue
+++ b/apps/web-antd/src/views/system/notice/index.vue
@@ -48,7 +48,7 @@ async function handleDelete(row: SystemNoticeApi.Notice) {
     duration: 0,
   });
   try {
-    await deleteNotice(row.id as number);
+    await deleteNotice(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.title]));
     handleRefresh();
   } finally {
@@ -88,7 +88,7 @@ async function handlePush(row: SystemNoticeApi.Notice) {
     content: '正在推送中...',
   });
   try {
-    await pushNotice(row.id as number);
+    await pushNotice(row.id!);
     message.success($t('ui.actionMessage.operationSuccess'));
   } finally {
     hideLoading();
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 7cfeb988..c24d4433 100644
--- a/apps/web-antd/src/views/system/notify/my/data.ts
+++ b/apps/web-antd/src/views/system/notify/my/data.ts
@@ -21,8 +21,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
-        placeholder: '请选择是否已读',
         allowClear: true,
+        placeholder: '请选择是否已读',
       },
     },
     {
diff --git a/apps/web-antd/src/views/system/notify/template/index.vue b/apps/web-antd/src/views/system/notify/template/index.vue
index c019b54c..6b7cc439 100644
--- a/apps/web-antd/src/views/system/notify/template/index.vue
+++ b/apps/web-antd/src/views/system/notify/template/index.vue
@@ -65,7 +65,7 @@ async function handleDelete(row: SystemNotifyTemplateApi.NotifyTemplate) {
     duration: 0,
   });
   try {
-    await deleteNotifyTemplate(row.id as number);
+    await deleteNotifyTemplate(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/system/oauth2/client/index.vue b/apps/web-antd/src/views/system/oauth2/client/index.vue
index b15c872e..383951b6 100644
--- a/apps/web-antd/src/views/system/oauth2/client/index.vue
+++ b/apps/web-antd/src/views/system/oauth2/client/index.vue
@@ -47,7 +47,7 @@ async function handleDelete(row: SystemOAuth2ClientApi.OAuth2Client) {
     duration: 0,
   });
   try {
-    await deleteOAuth2Client(row.id as number);
+    await deleteOAuth2Client(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/system/post/index.vue b/apps/web-antd/src/views/system/post/index.vue
index 920830e4..c59418e6 100644
--- a/apps/web-antd/src/views/system/post/index.vue
+++ b/apps/web-antd/src/views/system/post/index.vue
@@ -54,7 +54,7 @@ async function handleDelete(row: SystemPostApi.Post) {
     duration: 0,
   });
   try {
-    await deletePost(row.id as number);
+    await deletePost(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/system/role/index.vue b/apps/web-antd/src/views/system/role/index.vue
index 07e14b83..983ee472 100644
--- a/apps/web-antd/src/views/system/role/index.vue
+++ b/apps/web-antd/src/views/system/role/index.vue
@@ -67,7 +67,7 @@ async function handleDelete(row: SystemRoleApi.Role) {
     duration: 0,
   });
   try {
-    await deleteRole(row.id as number);
+    await deleteRole(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/system/sms/channel/index.vue b/apps/web-antd/src/views/system/sms/channel/index.vue
index df764a9b..e62bd3e2 100644
--- a/apps/web-antd/src/views/system/sms/channel/index.vue
+++ b/apps/web-antd/src/views/system/sms/channel/index.vue
@@ -47,7 +47,7 @@ async function handleDelete(row: SystemSmsChannelApi.SmsChannel) {
     duration: 0,
   });
   try {
-    await deleteSmsChannel(row.id as number);
+    await deleteSmsChannel(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.signature]));
     handleRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/system/sms/template/index.vue b/apps/web-antd/src/views/system/sms/template/index.vue
index 1ae24133..3563a0e0 100644
--- a/apps/web-antd/src/views/system/sms/template/index.vue
+++ b/apps/web-antd/src/views/system/sms/template/index.vue
@@ -65,7 +65,7 @@ async function handleDelete(row: SystemSmsTemplateApi.SmsTemplate) {
     duration: 0,
   });
   try {
-    await deleteSmsTemplate(row.id as number);
+    await deleteSmsTemplate(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
@@ -185,7 +185,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: '测试',
               type: 'link',
-              icon: ACTION_ICON.ADD,
+              icon: ACTION_ICON.VIEW,
               auth: ['system:sms-template:send-sms'],
               onClick: handleSend.bind(null, row),
             },
diff --git a/apps/web-antd/src/views/system/social/client/index.vue b/apps/web-antd/src/views/system/social/client/index.vue
index afda4ad0..3f75d386 100644
--- a/apps/web-antd/src/views/system/social/client/index.vue
+++ b/apps/web-antd/src/views/system/social/client/index.vue
@@ -47,7 +47,7 @@ async function handleDelete(row: SystemSocialClientApi.SocialClient) {
     duration: 0,
   });
   try {
-    await deleteSocialClient(row.id as number);
+    await deleteSocialClient(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
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 ec612eaa..cbef1b09 100644
--- a/apps/web-antd/src/views/system/social/user/data.ts
+++ b/apps/web-antd/src/views/system/social/user/data.ts
@@ -8,9 +8,8 @@ import { h } from 'vue';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
-import { getRangePickerDefaultProps } from '#/utils';
-
 import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -126,9 +125,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'avatar',
       label: '用户头像',
+      // TODO @芋艿：使用 antd 的 Image 组件
       content: (data: SystemSocialUserApi.SocialUser) => {
         if (data?.avatar) {
-          // TODO @芋艿：使用 antd 的 Image 组件
           return h('img', {
             src: data.avatar,
             style: 'width: 30px; height: 30px; cursor: pointer;',
diff --git a/apps/web-antd/src/views/system/tenant/index.vue b/apps/web-antd/src/views/system/tenant/index.vue
index cee574ac..8e4ec4cc 100644
--- a/apps/web-antd/src/views/system/tenant/index.vue
+++ b/apps/web-antd/src/views/system/tenant/index.vue
@@ -66,7 +66,7 @@ async function handleDelete(row: SystemTenantApi.Tenant) {
     duration: 0,
   });
   try {
-    await deleteTenant(row.id as number);
+    await deleteTenant(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/system/tenantPackage/index.vue b/apps/web-antd/src/views/system/tenantPackage/index.vue
index b0fa86f0..c7069db3 100644
--- a/apps/web-antd/src/views/system/tenantPackage/index.vue
+++ b/apps/web-antd/src/views/system/tenantPackage/index.vue
@@ -44,10 +44,10 @@ function handleEdit(row: SystemTenantPackageApi.TenantPackage) {
 async function handleDelete(row: SystemTenantPackageApi.TenantPackage) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
   });
   try {
-    await deleteTenantPackage(row.id as number);
+    await deleteTenantPackage(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-antd/src/views/system/user/index.vue b/apps/web-antd/src/views/system/user/index.vue
index cf83ffea..45cbe722 100644
--- a/apps/web-antd/src/views/system/user/index.vue
+++ b/apps/web-antd/src/views/system/user/index.vue
@@ -89,7 +89,7 @@ async function handleDelete(row: SystemUserApi.User) {
     duration: 0,
   });
   try {
-    await deleteUser(row.id as number);
+    await deleteUser(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.username]));
     handleRefresh();
   } finally {
@@ -144,7 +144,7 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新用户状态
-        const res = await updateUserStatus(row.id as number, newStatus);
+        const res = await updateUserStatus(row.id!, newStatus);
         if (res) {
           // 提示并返回成功
           message.success($t('ui.actionMessage.operationSuccess'));
diff --git a/apps/web-antd/src/views/system/user/modules/dept-tree.vue b/apps/web-antd/src/views/system/user/modules/dept-tree.vue
index b0c597e2..9b86c082 100644
--- a/apps/web-antd/src/views/system/user/modules/dept-tree.vue
+++ b/apps/web-antd/src/views/system/user/modules/dept-tree.vue
@@ -28,7 +28,7 @@ function handleSearch(e: any) {
     : deptList.value;
   deptTree.value = handleTree(filteredList);
   // 展开所有节点
-  expandedKeys.value = deptTree.value.map((node) => node.id as number);
+  expandedKeys.value = deptTree.value.map((node) => node.id!);
 }
 
 /** 选中部门 */
diff --git a/apps/web-ele/src/api/infra/codegen/index.ts b/apps/web-ele/src/api/infra/codegen/index.ts
index 5e83caf8..992d41d2 100644
--- a/apps/web-ele/src/api/infra/codegen/index.ts
+++ b/apps/web-ele/src/api/infra/codegen/index.ts
@@ -112,9 +112,13 @@ export function updateCodegenTable(data: InfraCodegenApi.CodegenUpdateReqVO) {
 
 /** 基于数据库的表结构，同步数据库的表和字段定义 */
 export function syncCodegenFromDB(tableId: number) {
-  return requestClient.put('/infra/codegen/sync-from-db', {
-    params: { tableId },
-  });
+  return requestClient.put(
+    '/infra/codegen/sync-from-db',
+    {},
+    {
+      params: { tableId },
+    },
+  );
 }
 
 /** 预览生成代码 */
diff --git a/apps/web-ele/src/api/infra/job/index.ts b/apps/web-ele/src/api/infra/job/index.ts
index fd337b46..04848dd8 100644
--- a/apps/web-ele/src/api/infra/job/index.ts
+++ b/apps/web-ele/src/api/infra/job/index.ts
@@ -58,11 +58,12 @@ export function exportJob(params: any) {
 
 /** 任务状态修改 */
 export function updateJobStatus(id: number, status: number) {
-  const params = {
-    id,
-    status,
-  };
-  return requestClient.put('/infra/job/update-status', { params });
+  return requestClient.put('/infra/job/update-status', undefined, {
+    params: {
+      id,
+      status,
+    },
+  });
 }
 
 /** 定时任务立即执行一次 */
diff --git a/apps/web-ele/src/api/mp/account/index.ts b/apps/web-ele/src/api/mp/account/index.ts
index 60833058..c5ee331b 100644
--- a/apps/web-ele/src/api/mp/account/index.ts
+++ b/apps/web-ele/src/api/mp/account/index.ts
@@ -62,7 +62,7 @@ export function deleteAccount(id: number) {
 
 /** 生成公众号账号二维码 */
 export function generateAccountQrCode(id: number) {
-  return requestClient.post(`/mp/account/generate-qr-code?id=${id}`);
+  return requestClient.put(`/mp/account/generate-qr-code?id=${id}`);
 }
 
 /** 清空公众号账号 API 配额 */
diff --git a/apps/web-ele/src/api/system/mail/log/index.ts b/apps/web-ele/src/api/system/mail/log/index.ts
index 1ae06e35..c32b790e 100644
--- a/apps/web-ele/src/api/system/mail/log/index.ts
+++ b/apps/web-ele/src/api/system/mail/log/index.ts
@@ -34,15 +34,3 @@ export function getMailLogPage(params: PageParam) {
     { params },
   );
 }
-
-/** 查询邮件日志详情 */
-export function getMailLog(id: number) {
-  return requestClient.get<SystemMailLogApi.MailLog>(
-    `/system/mail-log/get?id=${id}`,
-  );
-}
-
-/** 重新发送邮件 */
-export function resendMail(id: number) {
-  return requestClient.put(`/system/mail-log/resend?id=${id}`);
-}
diff --git a/apps/web-ele/src/components/content-wrap/content-wrap.vue b/apps/web-ele/src/components/content-wrap/content-wrap.vue
deleted file mode 100644
index c02ec6e0..00000000
--- a/apps/web-ele/src/components/content-wrap/content-wrap.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<!--
-  参考自 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/components/ContentWrap/src/ContentWrap.vue
-  保证和 yudao-ui-admin-vue3 功能的一致性
--->
-<script lang="ts" setup>
-import type { CSSProperties } from 'vue';
-
-import { ShieldQuestion } from '@vben/icons';
-
-import { ElCard, ElTooltip } from 'element-plus';
-
-defineOptions({ name: 'ContentWrap' });
-
-withDefaults(
-  defineProps<{
-    bodyStyle?: CSSProperties;
-    message?: string;
-    title?: string;
-  }>(),
-  {
-    bodyStyle: () => ({ padding: '10px' }),
-    title: '',
-    message: '',
-  },
-);
-</script>
-
-<template>
-  <ElCard :body-style="bodyStyle" :header="title" class="mb-4">
-    <template v-if="title" #header>
-      <div class="flex items-center justify-between">
-        <div class="flex items-center">
-          <span class="text-4 font-[700]">{{ title }}</span>
-          <ElTooltip placement="right">
-            <template #content>
-              <div class="max-w-[200px]">{{ message }}</div>
-            </template>
-            <ShieldQuestion :size="14" class="ml-5px" />
-          </ElTooltip>
-          <div class="pl-20px flex flex-grow">
-            <slot name="header"></slot>
-          </div>
-        </div>
-        <div>
-          <slot name="extra"></slot>
-        </div>
-      </div>
-    </template>
-    <template #default>
-      <slot></slot>
-    </template>
-  </ElCard>
-</template>
diff --git a/apps/web-ele/src/components/cron-tab/cron-tab.vue b/apps/web-ele/src/components/cron-tab/cron-tab.vue
new file mode 100644
index 00000000..6aacf850
--- /dev/null
+++ b/apps/web-ele/src/components/cron-tab/cron-tab.vue
@@ -0,0 +1,1152 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+
+import {
+  ElButton,
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElInputNumber,
+  ElMessage,
+  ElOption,
+  ElRadioButton,
+  ElRadioGroup,
+  ElSelect,
+  ElTabPane,
+  ElTabs,
+} from 'element-plus';
+
+defineOptions({ name: 'Crontab' });
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '* * * * * ?',
+  },
+  shortcuts: { type: Array as PropType<shortcutsType[]>, default: () => [] },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+interface shortcutsType {
+  text: string;
+  value: string;
+}
+
+const defaultValue = ref('');
+const dialogVisible = ref(false);
+const getYear = () => {
+  const v: number[] = [];
+  const y = new Date().getFullYear();
+  for (let i = 0; i < 11; i++) {
+    v.push(y + i);
+  }
+  return v;
+};
+const cronValue = reactive({
+  second: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2,
+    },
+    loop: {
+      start: 0,
+      end: 1,
+    },
+    appoint: [] as string[],
+  },
+  minute: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2,
+    },
+    loop: {
+      start: 0,
+      end: 1,
+    },
+    appoint: [] as string[],
+  },
+  hour: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2,
+    },
+    loop: {
+      start: 0,
+      end: 1,
+    },
+    appoint: [] as string[],
+  },
+  day: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2,
+    },
+    loop: {
+      start: 1,
+      end: 1,
+    },
+    appoint: [] as string[],
+  },
+  month: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2,
+    },
+    loop: {
+      start: 1,
+      end: 1,
+    },
+    appoint: [] as string[],
+  },
+  week: {
+    type: '5',
+    range: {
+      start: '2',
+      end: '3',
+    },
+    loop: {
+      start: 0,
+      end: '2',
+    },
+    last: '2',
+    appoint: [] as string[],
+  },
+  year: {
+    type: '-1',
+    range: {
+      start: getYear()[0],
+      end: getYear()[1],
+    },
+    loop: {
+      start: getYear()[0],
+      end: 1,
+    },
+    appoint: [] as string[],
+  },
+});
+const data = reactive({
+  second: [
+    '0',
+    '5',
+    '15',
+    '20',
+    '25',
+    '30',
+    '35',
+    '40',
+    '45',
+    '50',
+    '55',
+    '59',
+  ],
+  minute: [
+    '0',
+    '5',
+    '15',
+    '20',
+    '25',
+    '30',
+    '35',
+    '40',
+    '45',
+    '50',
+    '55',
+    '59',
+  ],
+  hour: [
+    '0',
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '10',
+    '11',
+    '12',
+    '13',
+    '14',
+    '15',
+    '16',
+    '17',
+    '18',
+    '19',
+    '20',
+    '21',
+    '22',
+    '23',
+  ],
+  day: [
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '10',
+    '11',
+    '12',
+    '13',
+    '14',
+    '15',
+    '16',
+    '17',
+    '18',
+    '19',
+    '20',
+    '21',
+    '22',
+    '23',
+    '24',
+    '25',
+    '26',
+    '27',
+    '28',
+    '29',
+    '30',
+    '31',
+  ],
+  month: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+  week: [
+    {
+      value: '1',
+      label: '周日',
+    },
+    {
+      value: '2',
+      label: '周一',
+    },
+    {
+      value: '3',
+      label: '周二',
+    },
+    {
+      value: '4',
+      label: '周三',
+    },
+    {
+      value: '5',
+      label: '周四',
+    },
+    {
+      value: '6',
+      label: '周五',
+    },
+    {
+      value: '7',
+      label: '周六',
+    },
+  ],
+  year: getYear(),
+});
+
+const value_second = computed(() => {
+  const v = cronValue.second;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+const value_minute = computed(() => {
+  const v = cronValue.minute;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+const value_hour = computed(() => {
+  const v = cronValue.hour;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+const value_day = computed(() => {
+  const v = cronValue.day;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    case '4': {
+      return 'L';
+    }
+    case '5': {
+      return '?';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+const value_month = computed(() => {
+  const v = cronValue.month;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+const value_week = computed(() => {
+  const v = cronValue.week;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.end}#${v.loop.start}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    case '4': {
+      return `${v.last}L`;
+    }
+    case '5': {
+      return '?';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+const value_year = computed(() => {
+  const v = cronValue.year;
+  switch (v.type) {
+    case '-1': {
+      return '';
+    }
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '';
+    }
+    default: {
+      return '';
+    }
+  }
+});
+watch(
+  () => cronValue.week.type,
+  (val) => {
+    if (val !== '5') {
+      cronValue.day.type = '5';
+    }
+  },
+);
+watch(
+  () => cronValue.day.type,
+  (val) => {
+    if (val !== '5') {
+      cronValue.week.type = '5';
+    }
+  },
+);
+watch(
+  () => props.modelValue,
+  () => {
+    defaultValue.value = props.modelValue;
+  },
+);
+onMounted(() => {
+  defaultValue.value = props.modelValue;
+});
+const select = ref();
+watch(
+  () => select.value,
+  () => {
+    if (select.value === 'custom') {
+      open();
+    } else {
+      defaultValue.value = select.value;
+      emit('update:modelValue', defaultValue.value);
+    }
+  },
+);
+const open = () => {
+  set();
+  dialogVisible.value = true;
+};
+const set = () => {
+  defaultValue.value = props.modelValue;
+  let arr = (props.modelValue || '* * * * * ?').split(' ');
+  // 简单检查
+  if (arr.length < 6) {
+    ElMessage.warning('cron表达式错误，已转换为默认表达式');
+    arr = '* * * * * ?'.split(' ');
+  }
+
+  // 秒
+  if (arr[0] === '*') {
+    cronValue.second.type = '0';
+  } else if (arr[0]!.includes('-')) {
+    cronValue.second.type = '1';
+    cronValue.second.range.start = Number(arr[0]!.split('-')[0]);
+    cronValue.second.range.end = Number(arr[0]!.split('-')[1]);
+  } else if (arr[0]!.includes('/')) {
+    cronValue.second.type = '2';
+    cronValue.second.loop.start = Number(arr[0]!.split('/')[0]);
+    cronValue.second.loop.end = Number(arr[0]!.split('/')[1]);
+  } else {
+    cronValue.second.type = '3';
+    cronValue.second.appoint = arr[0]!.split(',');
+  }
+  // 分
+  if (arr[1] === '*') {
+    cronValue.minute.type = '0';
+  } else if (arr[1]!.includes('-')) {
+    cronValue.minute.type = '1';
+    cronValue.minute.range.start = Number(arr[1]!.split('-')[0]);
+    cronValue.minute.range.end = Number(arr[1]!.split('-')[1]);
+  } else if (arr[1]!.includes('/')) {
+    cronValue.minute.type = '2';
+    cronValue.minute.loop.start = Number(arr[1]!.split('/')[0]);
+    cronValue.minute.loop.end = Number(arr[1]!.split('/')[1]);
+  } else {
+    cronValue.minute.type = '3';
+    cronValue.minute.appoint = arr[1]!.split(',');
+  }
+  // 小时
+  if (arr[2] === '*') {
+    cronValue.hour.type = '0';
+  } else if (arr[2]!.includes('-')) {
+    cronValue.hour.type = '1';
+    cronValue.hour.range.start = Number(arr[2]!.split('-')[0]);
+    cronValue.hour.range.end = Number(arr[2]!.split('-')[1]);
+  } else if (arr[2]!.includes('/')) {
+    cronValue.hour.type = '2';
+    cronValue.hour.loop.start = Number(arr[2]!.split('/')[0]);
+    cronValue.hour.loop.end = Number(arr[2]!.split('/')[1]);
+  } else {
+    cronValue.hour.type = '3';
+    cronValue.hour.appoint = arr[2]!.split(',');
+  }
+  // 日
+  switch (arr[3]) {
+    case '*': {
+      cronValue.day.type = '0';
+
+      break;
+    }
+    case '?': {
+      cronValue.day.type = '5';
+
+      break;
+    }
+    case 'L': {
+      cronValue.day.type = '4';
+
+      break;
+    }
+    default: {
+      if (arr[3]!.includes('-')) {
+        cronValue.day.type = '1';
+        cronValue.day.range.start = Number(arr[3]!.split('-')[0]);
+        cronValue.day.range.end = Number(arr[3]!.split('-')[1]);
+      } else if (arr[3]!.includes('/')) {
+        cronValue.day.type = '2';
+        cronValue.day.loop.start = Number(arr[3]!.split('/')[0]);
+        cronValue.day.loop.end = Number(arr[3]!.split('/')[1]);
+      } else {
+        cronValue.day.type = '3';
+        cronValue.day.appoint = arr[3]!.split(',');
+      }
+    }
+  }
+  // 月
+  if (arr[4] === '*') {
+    cronValue.month.type = '0';
+  } else if (arr[4]!.includes('-')) {
+    cronValue.month.type = '1';
+    cronValue.month.range.start = Number(arr[4]!.split('-')[0]);
+    cronValue.month.range.end = Number(arr[4]!.split('-')[1]);
+  } else if (arr[4]!.includes('/')) {
+    cronValue.month.type = '2';
+    cronValue.month.loop.start = Number(arr[4]!.split('/')[0]);
+    cronValue.month.loop.end = Number(arr[4]!.split('/')[1]);
+  } else {
+    cronValue.month.type = '3';
+    cronValue.month.appoint = arr[4]!.split(',');
+  }
+  // 周
+  if (arr[5] === '*') {
+    cronValue.week.type = '0';
+  } else if (arr[5] === '?') {
+    cronValue.week.type = '5';
+  } else if (arr[5]!.includes('-')) {
+    cronValue.week.type = '1';
+    cronValue.week.range.start = arr[5]!.split('-')[0]!;
+    cronValue.week.range.end = arr[5]!.split('-')[1]!;
+  } else if (arr[5]!.includes('#')) {
+    cronValue.week.type = '2';
+    cronValue.week.loop.start = Number(arr[5]!.split('#')[1]);
+    cronValue.week.loop.end = arr[5]!.split('#')[0]!;
+  } else if (arr[5]!.includes('L')) {
+    cronValue.week.type = '4';
+    cronValue.week.last = arr[5]!.split('L')[0]!;
+  } else {
+    cronValue.week.type = '3';
+    cronValue.week.appoint = arr[5]!.split(',');
+  }
+  // 年
+  if (!arr[6]) {
+    cronValue.year.type = '-1';
+  } else if (arr[6] === '*') {
+    cronValue.year.type = '0';
+  } else if (arr[6].includes('-')) {
+    cronValue.year.type = '1';
+    cronValue.year.range.start = Number(arr[6].split('-')[0]);
+    cronValue.year.range.end = Number(arr[6].split('-')[1]);
+  } else if (arr[6].includes('/')) {
+    cronValue.year.type = '2';
+    cronValue.year.loop.start = Number(arr[6].split('/')[1]);
+    cronValue.year.loop.end = Number(arr[6].split('/')[0]);
+  } else {
+    cronValue.year.type = '3';
+    cronValue.year.appoint = arr[6].split(',');
+  }
+};
+const submit = () => {
+  const year = value_year.value ? ` ${value_year.value}` : '';
+  defaultValue.value = `${value_second.value} ${value_minute.value} ${
+    value_hour.value
+  } ${value_day.value} ${value_month.value} ${value_week.value}${year}`;
+  emit('update:modelValue', defaultValue.value);
+  dialogVisible.value = false;
+};
+
+const inputChange = () => {
+  emit('update:modelValue', defaultValue.value);
+};
+</script>
+<template>
+  <ElInput
+    v-model="defaultValue"
+    class="input-with-select"
+    v-bind="$attrs"
+    @input="inputChange"
+  >
+    <template #append>
+      <ElSelect v-model="select" placeholder="生成器" style="width: 115px">
+        <ElOption label="每分钟" value="0 * * * * ?" />
+        <ElOption label="每小时" value="0 0 * * * ?" />
+        <ElOption label="每天零点" value="0 0 0 * * ?" />
+        <ElOption label="每月一号零点" value="0 0 0 1 * ?" />
+        <ElOption label="每月最后一天零点" value="0 0 0 L * ?" />
+        <ElOption label="每周星期日零点" value="0 0 0 ? * 1" />
+        <ElOption
+          v-for="(item, index) in shortcuts"
+          :key="index"
+          :label="item.text"
+          :value="item.value"
+        />
+        <ElOption label="自定义" value="custom" />
+      </ElSelect>
+    </template>
+  </ElInput>
+
+  <ElDialog
+    v-model="dialogVisible"
+    :width="580"
+    append-to-body
+    destroy-on-close
+    title="cron规则生成器"
+  >
+    <div class="sc-cron">
+      <ElTabs>
+        <ElTabPane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>秒</h2>
+              <h4>{{ value_second }}</h4>
+            </div>
+          </template>
+          <ElForm>
+            <ElFormItem label="类型">
+              <ElRadioGroup v-model="cronValue.second.type">
+                <ElRadioButton value="0">任意值</ElRadioButton>
+                <ElRadioButton value="1">范围</ElRadioButton>
+                <ElRadioButton value="2">间隔</ElRadioButton>
+                <ElRadioButton value="3">指定</ElRadioButton>
+              </ElRadioGroup>
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.second.type === '1'" label="范围">
+              <ElInputNumber
+                v-model="cronValue.second.range.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <ElInputNumber
+                v-model="cronValue.second.range.end"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.second.type === '2'" label="间隔">
+              <ElInputNumber
+                v-model="cronValue.second.loop.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              秒开始，每
+              <ElInputNumber
+                v-model="cronValue.second.loop.end"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              秒执行一次
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.second.type === '3'" label="指定">
+              <ElSelect
+                v-model="cronValue.second.appoint"
+                multiple
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="(item, index) in data.second"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </ElSelect>
+            </ElFormItem>
+          </ElForm>
+        </ElTabPane>
+        <ElTabPane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>分钟</h2>
+              <h4>{{ value_minute }}</h4>
+            </div>
+          </template>
+          <ElForm>
+            <ElFormItem label="类型">
+              <ElRadioGroup v-model="cronValue.minute.type">
+                <ElRadioButton value="0">任意值</ElRadioButton>
+                <ElRadioButton value="1">范围</ElRadioButton>
+                <ElRadioButton value="2">间隔</ElRadioButton>
+                <ElRadioButton value="3">指定</ElRadioButton>
+              </ElRadioGroup>
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.minute.type === '1'" label="范围">
+              <ElInputNumber
+                v-model="cronValue.minute.range.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <ElInputNumber
+                v-model="cronValue.minute.range.end"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.minute.type === '2'" label="间隔">
+              <ElInputNumber
+                v-model="cronValue.minute.loop.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              分钟开始，每
+              <ElInputNumber
+                v-model="cronValue.minute.loop.end"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              分钟执行一次
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.minute.type === '3'" label="指定">
+              <ElSelect
+                v-model="cronValue.minute.appoint"
+                multiple
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="(item, index) in data.minute"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </ElSelect>
+            </ElFormItem>
+          </ElForm>
+        </ElTabPane>
+        <ElTabPane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>小时</h2>
+              <h4>{{ value_hour }}</h4>
+            </div>
+          </template>
+          <ElForm>
+            <ElFormItem label="类型">
+              <ElRadioGroup v-model="cronValue.hour.type">
+                <ElRadioButton value="0">任意值</ElRadioButton>
+                <ElRadioButton value="1">范围</ElRadioButton>
+                <ElRadioButton value="2">间隔</ElRadioButton>
+                <ElRadioButton value="3">指定</ElRadioButton>
+              </ElRadioGroup>
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.hour.type === '1'" label="范围">
+              <ElInputNumber
+                v-model="cronValue.hour.range.start"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <ElInputNumber
+                v-model="cronValue.hour.range.end"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.hour.type === '2'" label="间隔">
+              <ElInputNumber
+                v-model="cronValue.hour.loop.start"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+              小时开始，每
+              <ElInputNumber
+                v-model="cronValue.hour.loop.end"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+              小时执行一次
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.hour.type === '3'" label="指定">
+              <ElSelect
+                v-model="cronValue.hour.appoint"
+                multiple
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="(item, index) in data.hour"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </ElSelect>
+            </ElFormItem>
+          </ElForm>
+        </ElTabPane>
+        <ElTabPane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>日</h2>
+              <h4>{{ value_day }}</h4>
+            </div>
+          </template>
+          <ElForm>
+            <ElFormItem label="类型">
+              <ElRadioGroup v-model="cronValue.day.type">
+                <ElRadioButton value="0">任意值</ElRadioButton>
+                <ElRadioButton value="1">范围</ElRadioButton>
+                <ElRadioButton value="2">间隔</ElRadioButton>
+                <ElRadioButton value="3">指定</ElRadioButton>
+                <ElRadioButton value="4">本月最后一天</ElRadioButton>
+                <ElRadioButton value="5">不指定</ElRadioButton>
+              </ElRadioGroup>
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.day.type === '1'" label="范围">
+              <ElInputNumber
+                v-model="cronValue.day.range.start"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <ElInputNumber
+                v-model="cronValue.day.range.end"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.day.type === '2'" label="间隔">
+              <ElInputNumber
+                v-model="cronValue.day.loop.start"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+              号开始，每
+              <ElInputNumber
+                v-model="cronValue.day.loop.end"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+              天执行一次
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.day.type === '3'" label="指定">
+              <ElSelect
+                v-model="cronValue.day.appoint"
+                multiple
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="(item, index) in data.day"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </ElSelect>
+            </ElFormItem>
+          </ElForm>
+        </ElTabPane>
+        <ElTabPane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>月</h2>
+              <h4>{{ value_month }}</h4>
+            </div>
+          </template>
+          <ElForm>
+            <ElFormItem label="类型">
+              <ElRadioGroup v-model="cronValue.month.type">
+                <ElRadioButton value="0">任意值</ElRadioButton>
+                <ElRadioButton value="1">范围</ElRadioButton>
+                <ElRadioButton value="2">间隔</ElRadioButton>
+                <ElRadioButton value="3">指定</ElRadioButton>
+              </ElRadioGroup>
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.month.type === '1'" label="范围">
+              <ElInputNumber
+                v-model="cronValue.month.range.start"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <ElInputNumber
+                v-model="cronValue.month.range.end"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.month.type === '2'" label="间隔">
+              <ElInputNumber
+                v-model="cronValue.month.loop.start"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+              月开始，每
+              <ElInputNumber
+                v-model="cronValue.month.loop.end"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+              月执行一次
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.month.type === '3'" label="指定">
+              <ElSelect
+                v-model="cronValue.month.appoint"
+                multiple
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="(item, index) in data.month"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </ElSelect>
+            </ElFormItem>
+          </ElForm>
+        </ElTabPane>
+        <ElTabPane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>周</h2>
+              <h4>{{ value_week }}</h4>
+            </div>
+          </template>
+          <ElForm>
+            <ElForm>
+              <ElFormItem label="类型">
+                <ElRadioGroup v-model="cronValue.week.type">
+                  <ElRadioButton value="0">任意值</ElRadioButton>
+                  <ElRadioButton value="1">范围</ElRadioButton>
+                  <ElRadioButton value="2">间隔</ElRadioButton>
+                  <ElRadioButton value="3">指定</ElRadioButton>
+                  <ElRadioButton value="4">本月最后一周</ElRadioButton>
+                  <ElRadioButton value="5">不指定</ElRadioButton>
+                </ElRadioGroup>
+              </ElFormItem>
+              <ElFormItem v-if="cronValue.week.type === '1'" label="范围">
+                <ElSelect v-model="cronValue.week.range.start">
+                  <ElOption
+                    v-for="(item, index) in data.week"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </ElSelect>
+                <span style="padding: 0 15px">-</span>
+                <ElSelect v-model="cronValue.week.range.end">
+                  <ElOption
+                    v-for="(item, index) in data.week"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </ElSelect>
+              </ElFormItem>
+              <ElFormItem v-if="cronValue.week.type === '2'" label="间隔">
+                第
+                <ElInputNumber
+                  v-model="cronValue.week.loop.start"
+                  :max="4"
+                  :min="1"
+                  controls-position="right"
+                />
+                周的星期
+                <ElSelect v-model="cronValue.week.loop.end">
+                  <ElOption
+                    v-for="(item, index) in data.week"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </ElSelect>
+                执行一次
+              </ElFormItem>
+              <ElFormItem v-if="cronValue.week.type === '3'" label="指定">
+                <ElSelect
+                  v-model="cronValue.week.appoint"
+                  multiple
+                  style="width: 100%"
+                >
+                  <ElOption
+                    v-for="(item, index) in data.week"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </ElSelect>
+              </ElFormItem>
+              <ElFormItem v-if="cronValue.week.type === '4'" label="最后一周">
+                <ElSelect v-model="cronValue.week.last">
+                  <ElOption
+                    v-for="(item, index) in data.week"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </ElSelect>
+              </ElFormItem>
+            </ElForm>
+          </ElForm>
+        </ElTabPane>
+        <ElTabPane>
+          <template #label>
+            <div class="sc-cron-num">
+              <h2>年</h2>
+              <h4>{{ value_year }}</h4>
+            </div>
+          </template>
+          <ElForm>
+            <ElFormItem label="类型">
+              <ElRadioGroup v-model="cronValue.year.type">
+                <ElRadioButton value="-1">忽略</ElRadioButton>
+                <ElRadioButton value="0">任意值</ElRadioButton>
+                <ElRadioButton value="1">范围</ElRadioButton>
+                <ElRadioButton value="2">间隔</ElRadioButton>
+                <ElRadioButton value="3">指定</ElRadioButton>
+              </ElRadioGroup>
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.year.type === '1'" label="范围">
+              <ElInputNumber
+                v-model="cronValue.year.range.start"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <ElInputNumber
+                v-model="cronValue.year.range.end"
+                controls-position="right"
+              />
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.year.type === '2'" label="间隔">
+              <ElInputNumber
+                v-model="cronValue.year.loop.start"
+                controls-position="right"
+              />
+              年开始，每
+              <ElInputNumber
+                v-model="cronValue.year.loop.end"
+                :min="1"
+                controls-position="right"
+              />
+              年执行一次
+            </ElFormItem>
+            <ElFormItem v-if="cronValue.year.type === '3'" label="指定">
+              <ElSelect
+                v-model="cronValue.year.appoint"
+                multiple
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="(item, index) in data.year"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </ElSelect>
+            </ElFormItem>
+          </ElForm>
+        </ElTabPane>
+      </ElTabs>
+    </div>
+
+    <template #footer>
+      <ElButton @click="dialogVisible = false">取 消</ElButton>
+      <ElButton type="primary" @click="submit()">确 认</ElButton>
+    </template>
+  </ElDialog>
+</template>
+
+<style scoped>
+.sc-cron:deep(.el-tabs__item) {
+  height: auto;
+  padding: 0 7px;
+  line-height: 1;
+  vertical-align: bottom;
+}
+
+.sc-cron-num {
+  width: 100%;
+  margin-bottom: 15px;
+  text-align: center;
+}
+
+.sc-cron-num h2 {
+  margin-bottom: 15px;
+  font-size: 12px;
+  font-weight: normal;
+}
+
+.sc-cron-num h4 {
+  display: block;
+  width: 100%;
+  height: 32px;
+  padding: 0 15px;
+  font-size: 12px;
+  line-height: 30px;
+  background: var(--el-color-primary-light-9);
+  border-radius: 4px;
+}
+
+.sc-cron:deep(.el-tabs__item.is-active) .sc-cron-num h4 {
+  color: #fff;
+  background: var(--el-color-primary);
+}
+
+[data-theme='dark'] .sc-cron-num h4 {
+  background: var(--el-color-white);
+}
+
+.input-with-select .el-input-group__prepend {
+  background-color: var(--el-fill-color-blank);
+}
+</style>
diff --git a/apps/web-ele/src/components/cron-tab/index.ts b/apps/web-ele/src/components/cron-tab/index.ts
new file mode 100644
index 00000000..8f4baae5
--- /dev/null
+++ b/apps/web-ele/src/components/cron-tab/index.ts
@@ -0,0 +1 @@
+export { default as CronTab } from './cron-tab.vue';
diff --git a/apps/web-ele/src/components/upload/file-upload.vue b/apps/web-ele/src/components/upload/file-upload.vue
index 39b6d529..73e08f9f 100644
--- a/apps/web-ele/src/components/upload/file-upload.vue
+++ b/apps/web-ele/src/components/upload/file-upload.vue
@@ -1,261 +1,283 @@
 <script lang="ts" setup>
+// TODO @puhui999：这个看看怎么和对应的 antd 【代码风格】，保持一致一些；
 import type {
   UploadFile,
-  UploadProgressEvent,
-  UploadRequestOptions,
+  UploadInstance,
+  UploadProps,
+  UploadRawFile,
   UploadUserFile,
 } from 'element-plus';
 
-import type { AxiosResponse } from '@vben/request';
+import { ref, watch } from 'vue';
 
-import type { AxiosProgressEvent } from '#/api/infra/file';
+import { IconifyIcon } from '@vben/icons';
+import { isString } from '@vben/utils';
 
-import { ref, toRefs, watch } from 'vue';
+import { ElButton, ElLink, ElMessage, ElUpload } from 'element-plus';
 
-import { CloudUpload } from '@vben/icons';
-import { $t } from '@vben/locales';
-import { isFunction, isObject, isString } from '@vben/utils';
-
-import { ElButton, ElMessage, ElUpload } from 'element-plus';
-
-import { checkFileType } from './helper';
-import { UploadResultStatus } from './typing';
-import { useUpload, useUploadType } from './use-upload';
+import { useUpload } from './use-upload';
 
 defineOptions({ name: 'FileUpload', inheritAttrs: false });
 
 const props = withDefaults(
   defineProps<{
-    // 根据后缀，或者其他
-    accept?: string[];
-    api?: (
-      file: File,
-      onUploadProgress?: AxiosProgressEvent,
-    ) => Promise<AxiosResponse<any>>;
-    // 上传的目录
+    autoUpload?: boolean;
     directory?: string;
     disabled?: boolean;
-    helpText?: string;
-    // 最大数量的文件，Infinity不限制
-    maxNumber?: number;
-    // 文件最大多少MB
-    maxSize?: number;
-    // 是否支持多选
-    multiple?: boolean;
-    // support xxx.xxx.xx
-    resultField?: string;
-    // 是否显示下面的描述
-    showDescription?: boolean;
-    value?: string | string[];
+    drag?: boolean;
+    fileSize?: number;
+    fileType?: string[];
+    isShowTip?: boolean;
+    limit?: number;
+    modelValue: string | string[];
   }>(),
   {
-    value: () => [],
-    directory: undefined,
-    disabled: false,
-    helpText: '',
-    maxSize: 2,
-    maxNumber: 1,
-    accept: () => [],
-    multiple: false,
-    api: undefined,
-    resultField: '',
-    showDescription: false,
+    fileType: () => ['doc', 'xls', 'ppt', 'txt', 'pdf'], // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileSize: 5, // 大小限制(MB)
+    limit: 5, // 数量限制
+    autoUpload: true, // 自动上传
+    drag: false, // 拖拽上传
+    isShowTip: true, // 是否显示提示
+    disabled: false, // 是否禁用上传组件 ==> 非必传（默认为 false）
+    directory: undefined, // 上传目录 ==> 非必传（默认为 undefined）
   },
 );
-const emit = defineEmits(['change', 'update:value', 'delete', 'returnText']);
-const { accept, helpText, maxNumber, maxSize } = toRefs(props);
-const isInnerOperate = ref<boolean>(false);
-const { getStringAccept } = useUploadType({
-  acceptRef: accept,
-  helpTextRef: helpText,
-  maxNumberRef: maxNumber,
-  maxSizeRef: maxSize,
-});
 
+const emit = defineEmits(['update:modelValue']);
+
+// ========== 上传相关 ==========
+const uploadRef = ref<UploadInstance>();
+const uploadList = ref<UploadUserFile[]>([]);
 const fileList = ref<UploadUserFile[]>([]);
-const isLtMsg = ref<boolean>(true); // 文件大小错误提示
-const isActMsg = ref<boolean>(true); // 文件类型错误提示
-const isFirstRender = ref<boolean>(true); // 是否第一次渲染
+const uploadNumber = ref<number>(0);
 
-watch(
-  () => props.value,
-  (v) => {
-    if (isInnerOperate.value) {
-      isInnerOperate.value = false;
-      return;
-    }
-    let value: string[] = [];
-    if (v) {
-      if (Array.isArray(v)) {
-        value = v;
-      } else {
-        value.push(v);
-      }
-      fileList.value = value
-        .map((item, i) => {
-          if (item && isString(item)) {
-            return {
-              uid: -i,
-              name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
-              status: UploadResultStatus.DONE,
-              url: item,
-            } as UploadUserFile;
-          } else if (item && isObject(item)) {
-            const file = item as Record<string, any>;
-            return {
-              uid: file.uid || -i,
-              name: file.name || '',
-              status: UploadResultStatus.DONE,
-              url: file.url,
-              response: file.response,
-              percentage: file.percentage,
-              size: file.size,
-            } as UploadUserFile;
-          }
-          return null;
-        })
-        .filter(Boolean) as UploadUserFile[];
-    }
-    if (!isFirstRender.value) {
-      emit('change', value);
-      isFirstRender.value = false;
-    }
-  },
-  {
-    immediate: true,
-    deep: true,
-  },
-);
+const { uploadUrl, httpRequest }: any = useUpload(props.directory);
 
-const handleRemove = async (file: UploadFile) => {
-  if (fileList.value) {
-    const index = fileList.value.findIndex((item) => item.uid === file.uid);
-    index !== -1 && fileList.value.splice(index, 1);
-    const value = getValue();
-    isInnerOperate.value = true;
-    emit('update:value', value);
-    emit('change', value);
-    emit('delete', file);
-  }
+/** httpRequest 适配 ele */
+const httpRequest0 = (options: UploadRequestOptions) => {
+  return httpRequest(options.file);
 };
 
-const beforeUpload = async (file: File) => {
-  const fileContent = await file.text();
-  emit('returnText', fileContent);
-  const { maxSize, accept } = props;
-  const isAct = checkFileType(file, accept);
-  if (!isAct) {
-    ElMessage.error($t('ui.upload.acceptUpload', [accept]));
-    isActMsg.value = false;
-    // 防止弹出多个错误提示
-    setTimeout(() => (isActMsg.value = true), 1000);
+// 文件上传之前判断
+const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) => {
+  if (fileList.value.length >= props.limit) {
+    ElMessage.error(`上传文件数量不能超过${props.limit}个!`);
     return false;
   }
-  const isLt = file.size / 1024 / 1024 > maxSize;
-  if (isLt) {
-    ElMessage.error($t('ui.upload.maxSizeMultiple', [maxSize]));
-    isLtMsg.value = false;
-    // 防止弹出多个错误提示
-    setTimeout(() => (isLtMsg.value = true), 1000);
+  let fileExtension = '';
+  // eslint-disable-next-line unicorn/prefer-includes
+  if (file.name.lastIndexOf('.') > -1) {
+    fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1);
+  }
+  const isImg = props.fileType.some((type: string) => {
+    // eslint-disable-next-line unicorn/prefer-includes
+    if (file.type.indexOf(type) > -1) return true;
+    // eslint-disable-next-line unicorn/prefer-includes
+    return !!(fileExtension && fileExtension.indexOf(type) > -1);
+  });
+  const isLimit = file.size < props.fileSize * 1024 * 1024;
+  if (!isImg) {
+    ElMessage.error(`文件格式不正确, 请上传${props.fileType.join('/')}格式!`);
     return false;
   }
+  if (!isLimit) {
+    ElMessage.error(`上传文件大小不能超过${props.fileSize}MB!`);
+    return false;
+  }
+  ElMessage.success('正在上传文件，请稍候...');
+  // 只有在验证通过后才增加计数器
+  uploadNumber.value++;
   return true;
 };
 
-async function customRequest(options: UploadRequestOptions) {
-  let { api } = props;
-  if (!api || !isFunction(api)) {
-    api = useUpload(props.directory).httpRequest;
+// 文件上传成功
+const handleFileSuccess: UploadProps['onSuccess'] = (url: any): void => {
+  ElMessage.success('上传成功');
+  // 删除自身
+  const index = fileList.value.findIndex((item: any) => item.response === url);
+  fileList.value.splice(index, 1);
+  uploadList.value.push({ name: url, url });
+  if (uploadList.value.length === uploadNumber.value) {
+    fileList.value.push(...uploadList.value);
+    uploadList.value = [];
+    uploadNumber.value = 0;
+    emitUpdateModelValue();
   }
-  try {
-    // 上传文件
-    const progressEvent: AxiosProgressEvent = (e) => {
-      const percent = Math.trunc((e.loaded / e.total!) * 100);
-      const progressEvent: UploadProgressEvent = {
-        percent,
-        total: e.total || 0,
-        loaded: e.loaded || 0,
-        lengthComputable: true,
-        target: e.event.target as EventTarget,
-        bubbles: false,
-        cancelBubble: false,
-        cancelable: false,
-        composed: false,
-        currentTarget: e.event.target as EventTarget,
-        defaultPrevented: false,
-        eventPhase: 0,
-        isTrusted: true,
-        returnValue: true,
-        srcElement: e.event.target as EventTarget,
-        timeStamp: Date.now(),
-        type: 'progress',
-        composedPath: () => [],
-        initEvent: () => {},
-        preventDefault: () => {},
-        stopImmediatePropagation: () => {},
-        stopPropagation: () => {},
-        NONE: 0,
-        CAPTURING_PHASE: 1,
-        AT_TARGET: 2,
-        BUBBLING_PHASE: 3,
-      };
-      options.onProgress!(progressEvent);
-    };
-    const res = await api?.(options.file, progressEvent);
-    options.onSuccess!(res);
-    ElMessage.success($t('ui.upload.uploadSuccess'));
+};
+// 文件数超出提示
+const handleExceed: UploadProps['onExceed'] = (): void => {
+  ElMessage.error(`上传文件数量不能超过${props.limit}个!`);
+};
+// 上传错误提示
+const excelUploadError: UploadProps['onError'] = (): void => {
+  ElMessage.error('导入数据失败，请您重新上传！');
+  // 上传失败时减少计数器，避免后续上传被阻塞
+  uploadNumber.value = Math.max(0, uploadNumber.value - 1);
+};
+// 删除上传文件
+const handleRemove = (file: UploadFile) => {
+  const index = fileList.value.map((f) => f.name).indexOf(file.name);
+  if (index !== -1) {
+    fileList.value.splice(index, 1);
+    emitUpdateModelValue();
+  }
+};
+const handlePreview: UploadProps['onPreview'] = (_) => {
+  // console.log(uploadFile);
+};
 
-    // 更新文件
-    const value = getValue();
-    isInnerOperate.value = true;
-    emit('update:value', value);
-    emit('change', value);
-  } catch (error: any) {
-    console.error(error);
-    options.onError!(error);
-  }
-}
+// 监听模型绑定值变动
+watch(
+  () => props.modelValue,
+  (val: string | string[]) => {
+    if (!val) {
+      fileList.value = []; // fix：处理掉缓存，表单重置后上传组件的内容并没有重置
+      return;
+    }
 
-function getValue() {
-  const list = (fileList.value || [])
-    .filter((item) => item?.status === UploadResultStatus.DONE)
-    .map((item: any) => {
-      if (item?.response && props?.resultField) {
-        return item?.response;
-      }
-      return item?.url || item?.response?.url || item?.response;
-    });
-  // add by 芋艿：【特殊】单个文件的情况，获取首个元素，保证返回的是 String 类型
-  if (props.maxNumber === 1) {
-    return list.length > 0 ? list[0] : '';
+    fileList.value = []; // 保障数据为空
+    // 情况1：字符串
+    if (isString(val)) {
+      fileList.value.push(
+        ...val.split(',').map((url) => ({
+          // eslint-disable-next-line unicorn/prefer-string-slice
+          name: url.substring(url.lastIndexOf('/') + 1),
+          url,
+        })),
+      );
+      return;
+    }
+    // 情况2：数组
+    fileList.value.push(
+      ...(val as string[]).map((url) => ({
+        // eslint-disable-next-line unicorn/prefer-string-slice
+        name: url.substring(url.lastIndexOf('/') + 1),
+        url,
+      })),
+    );
+  },
+  { immediate: true, deep: true },
+);
+// 发送文件链接列表更新
+const emitUpdateModelValue = () => {
+  // 情况1：数组结果
+  let result: string | string[] = fileList.value.map((file) => file.url!);
+  // 情况2：逗号分隔的字符串
+  if (props.limit === 1 || isString(props.modelValue)) {
+    result = result.join(',');
   }
-  return list;
-}
+  emit('update:modelValue', result);
+};
 </script>
-
 <template>
-  <div>
+  <div v-if="!disabled" class="upload-file">
     <ElUpload
-      v-bind="$attrs"
+      ref="uploadRef"
       v-model:file-list="fileList"
-      :accept="getStringAccept"
+      :action="uploadUrl"
+      :auto-upload="autoUpload"
       :before-upload="beforeUpload"
-      :http-request="customRequest"
       :disabled="disabled"
-      :limit="maxNumber"
-      :multiple="multiple"
-      list-type="text"
+      :drag="drag"
+      :http-request="httpRequest0"
+      :limit="props.limit"
+      :multiple="props.limit > 1"
+      :on-error="excelUploadError"
+      :on-exceed="handleExceed"
+      :on-preview="handlePreview"
       :on-remove="handleRemove"
+      :on-success="handleFileSuccess"
+      :show-file-list="true"
+      class="upload-file-uploader"
+      name="file"
     >
-      <div v-if="fileList && fileList.length < maxNumber">
-        <ElButton>
-          <CloudUpload />
-          {{ $t('ui.upload.upload') }}
-        </ElButton>
-      </div>
-      <div v-if="showDescription" class="mt-2 text-xs text-gray-500">
-        {{ getStringAccept }}
-      </div>
+      <ElButton type="primary">
+        <IconifyIcon icon="ep:upload-filled" />
+        选取文件
+      </ElButton>
+      <template v-if="isShowTip" #tip>
+        <div style="font-size: 8px">
+          大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+        </div>
+        <div style="font-size: 8px">
+          格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b> 的文件
+        </div>
+      </template>
+      <template #file="row">
+        <div class="flex items-center">
+          <span>{{ row.file.name }}</span>
+          <div class="ml-10px">
+            <ElLink
+              :href="row.file.url"
+              :underline="false"
+              download
+              target="_blank"
+              type="primary"
+            >
+              下载
+            </ElLink>
+          </div>
+          <div class="ml-10px">
+            <ElButton link type="danger" @click="handleRemove(row.file)">
+              删除
+            </ElButton>
+          </div>
+        </div>
+      </template>
     </ElUpload>
   </div>
+
+  <!-- 上传操作禁用时 -->
+  <div v-if="disabled" class="upload-file">
+    <div
+      v-for="(file, index) in fileList"
+      :key="index"
+      class="file-list-item flex items-center"
+    >
+      <span>{{ file.name }}</span>
+      <div class="ml-10px">
+        <ElLink
+          :href="file.url"
+          :underline="false"
+          download
+          target="_blank"
+          type="primary"
+        >
+          下载
+        </ElLink>
+      </div>
+    </div>
+  </div>
 </template>
+<style lang="scss" scoped>
+.upload-file-uploader {
+  margin-bottom: 5px;
+}
+
+:deep(.upload-file-list .el-upload-list__item) {
+  position: relative;
+  margin-bottom: 10px;
+  line-height: 2;
+  border: 1px solid #e4e7ed;
+}
+
+:deep(.el-upload-list__item-file-name) {
+  max-width: 250px;
+}
+
+:deep(.upload-file-list .ele-upload-list__item-content) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: inherit;
+}
+
+:deep(.ele-upload-list__item-content-action .el-link) {
+  margin-right: 10px;
+}
+
+.file-list-item {
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 8px;
+}
+</style>
diff --git a/apps/web-ele/src/components/upload/use-upload.ts b/apps/web-ele/src/components/upload/use-upload.ts
index 52f723be..2f46f9e9 100644
--- a/apps/web-ele/src/components/upload/use-upload.ts
+++ b/apps/web-ele/src/components/upload/use-upload.ts
@@ -79,17 +79,17 @@ export function useUploadType({
 }
 
 // TODO @芋艿：目前保持和 admin-vue3 一致，后续可能重构
-export const useUpload = (directory?: string) => {
+export function useUpload(directory?: string) {
   // 后端上传地址
   const uploadUrl = getUploadUrl();
   // 是否使用前端直连上传
   const isClientUpload =
     UPLOAD_TYPE.CLIENT === import.meta.env.VITE_UPLOAD_TYPE;
   // 重写ElUpload上传方法
-  const httpRequest = async (
+  async function httpRequest(
     file: File,
     onUploadProgress?: AxiosProgressEvent,
-  ) => {
+  ) {
     // 模式一：前端上传
     if (isClientUpload) {
       // 1.1 生成文件名称
@@ -113,20 +113,20 @@ export const useUpload = (directory?: string) => {
       // 模式二：后端上传
       return uploadFile({ file, directory }, onUploadProgress);
     }
-  };
+  }
 
   return {
     uploadUrl,
     httpRequest,
   };
-};
+}
 
 /**
  * 获得上传 URL
  */
-export const getUploadUrl = (): string => {
+export function getUploadUrl(): string {
   return `${apiURL}/infra/file/upload`;
-};
+}
 
 /**
  * 创建文件信息
@@ -134,7 +134,10 @@ export const getUploadUrl = (): string => {
  * @param vo 文件预签名信息
  * @param file 文件
  */
-function createFile0(vo: InfraFileApi.FilePresignedUrlRespVO, file: File) {
+function createFile0(
+  vo: InfraFileApi.FilePresignedUrlRespVO,
+  file: File,
+): InfraFileApi.File {
   const fileVO = {
     configId: vo.configId,
     url: vo.url,
@@ -148,10 +151,18 @@ function createFile0(vo: InfraFileApi.FilePresignedUrlRespVO, file: File) {
 }
 
 /**
- * 生成文件名称
+ * 生成文件名称（使用算法SHA256）
  *
  * @param file 要上传的文件
  */
 async function generateFileName(file: File) {
+  // // 读取文件内容
+  // const data = await file.arrayBuffer();
+  // const wordArray = CryptoJS.lib.WordArray.create(data);
+  // // 计算SHA256
+  // const sha256 = CryptoJS.SHA256(wordArray).toString();
+  // // 拼接后缀
+  // const ext = file.name.slice(Math.max(0, file.name.lastIndexOf('.')));
+  // return `${sha256}${ext}`;
   return file.name;
 }
diff --git a/apps/web-ele/src/router/routes/modules/diy.ts b/apps/web-ele/src/router/routes/modules/diy.ts
index 78442f10..68bccd3c 100644
--- a/apps/web-ele/src/router/routes/modules/diy.ts
+++ b/apps/web-ele/src/router/routes/modules/diy.ts
@@ -17,7 +17,7 @@ const routes: RouteRecordRaw[] = [
         name: 'DiyTemplateDecorate',
         meta: {
           title: '模板装修',
-          activeMenu: '/mall/promotion/diy-template/diy-template',
+          activePath: '/mall/promotion/diy-template/diy-template',
         },
         component: () =>
           import('#/views/mall/promotion/diy/template/modules/decorate.vue'),
@@ -29,7 +29,7 @@ const routes: RouteRecordRaw[] = [
           title: '页面装修',
           noCache: false,
           hidden: true,
-          activeMenu: '/mall/promotion/diy-template/diy-page',
+          activePath: '/mall/promotion/diy-template/diy-page',
         },
         component: () =>
           import('#/views/mall/promotion/diy/page/modules/decorate.vue'),
diff --git a/apps/web-ele/src/router/routes/modules/infra.ts b/apps/web-ele/src/router/routes/modules/infra.ts
index cc6d96de..c99b51be 100644
--- a/apps/web-ele/src/router/routes/modules/infra.ts
+++ b/apps/web-ele/src/router/routes/modules/infra.ts
@@ -2,7 +2,7 @@ import type { RouteRecordRaw } from 'vue-router';
 
 const routes: RouteRecordRaw[] = [
   {
-    path: '/infra/job/job-log',
+    path: '/infra/job/log',
     component: () => import('#/views/infra/job/logger/index.vue'),
     name: 'InfraJobLog',
     meta: {
@@ -14,25 +14,16 @@ const routes: RouteRecordRaw[] = [
     },
   },
   {
-    path: '/codegen',
-    name: 'CodegenEdit',
+    path: '/infra/codegen/edit',
+    component: () => import('#/views/infra/codegen/edit/index.vue'),
+    name: 'InfraCodegenEdit',
     meta: {
-      title: '代码生成',
+      title: '生成配置修改',
       icon: 'ic:baseline-view-in-ar',
+      activePath: '/infra/codegen',
       keepAlive: true,
       hideInMenu: true,
     },
-    children: [
-      {
-        path: '/codegen/edit',
-        name: 'InfraCodegenEdit',
-        component: () => import('#/views/infra/codegen/edit/index.vue'),
-        meta: {
-          title: '修改生成配置',
-          activeMenu: '/infra/codegen',
-        },
-      },
-    ],
   },
 ];
 
diff --git a/apps/web-ele/src/router/routes/modules/mall.ts b/apps/web-ele/src/router/routes/modules/mall.ts
index 809dc2e7..a0fdbdde 100644
--- a/apps/web-ele/src/router/routes/modules/mall.ts
+++ b/apps/web-ele/src/router/routes/modules/mall.ts
@@ -16,7 +16,7 @@ const routes: RouteRecordRaw[] = [
         name: 'ProductSpuAdd',
         meta: {
           title: '商品添加',
-          activeMenu: '/mall/product/spu',
+          activePath: '/mall/product/spu',
         },
         component: () => import('#/views/mall/product/spu/modules/form.vue'),
       },
@@ -25,7 +25,7 @@ const routes: RouteRecordRaw[] = [
         name: 'ProductSpuEdit',
         meta: {
           title: '商品编辑',
-          activeMenu: '/mall/product/spu',
+          activePath: '/mall/product/spu',
         },
         component: () => import('#/views/mall/product/spu/modules/form.vue'),
       },
@@ -34,7 +34,7 @@ const routes: RouteRecordRaw[] = [
         name: 'ProductSpuDetail',
         meta: {
           title: '商品详情',
-          activeMenu: '/crm/business',
+          activePath: '/crm/business',
         },
         component: () => import('#/views/mall/product/spu/modules/detail.vue'),
       },
@@ -43,7 +43,7 @@ const routes: RouteRecordRaw[] = [
         name: 'ProductSpu',
         meta: {
           title: '商品列表',
-          activeMenu: '/mall/product/spu',
+          activePath: '/mall/product/spu',
         },
         component: () => import('#/views/mall/product/spu/index.vue'),
       },
@@ -64,7 +64,7 @@ const routes: RouteRecordRaw[] = [
         name: 'TradeOrderDetail',
         meta: {
           title: '订单详情',
-          activeMenu: '/mall/trade/order',
+          activePath: '/mall/trade/order',
         },
         component: () => import('#/views/mall/trade/order/modules/detail.vue'),
       },
@@ -73,7 +73,7 @@ const routes: RouteRecordRaw[] = [
         name: 'TradeAfterSaleDetail',
         meta: {
           title: '退款详情',
-          activeMenu: '/mall/trade/after-sale',
+          activePath: '/mall/trade/after-sale',
         },
         component: () =>
           import('#/views/mall/trade/afterSale/modules/detail.vue'),
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 4ea4ad9b..bc317f93 100644
--- a/apps/web-ele/src/views/infra/apiAccessLog/modules/detail.vue
+++ b/apps/web-ele/src/views/infra/apiAccessLog/modules/detail.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { InfraApiAccessLogApi } from '#/api/infra/api-access-log';
 
 import { ref } from 'vue';
@@ -16,9 +16,9 @@ const [Descriptions] = useDescription({
     border: true,
     column: 1,
     direction: 'horizontal',
+    labelWidth: 110,
     title: '',
     extra: '',
-    labelWidth: 110,
   },
   schema: useDetailSchema(),
 });
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 a6472579..22dd274b 100644
--- a/apps/web-ele/src/views/infra/apiErrorLog/modules/detail.vue
+++ b/apps/web-ele/src/views/infra/apiErrorLog/modules/detail.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { InfraApiErrorLogApi } from '#/api/infra/api-error-log';
 
 import { ref } from 'vue';
@@ -16,9 +16,9 @@ const [Descriptions] = useDescription({
     border: true,
     column: 1,
     direction: 'horizontal',
+    labelWidth: 110,
     title: '',
     extra: '',
-    labelWidth: 110,
   },
   schema: useDetailSchema(),
 });
diff --git a/apps/web-ele/src/views/infra/build/index.vue b/apps/web-ele/src/views/infra/build/index.vue
index e3daf810..733d0412 100644
--- a/apps/web-ele/src/views/infra/build/index.vue
+++ b/apps/web-ele/src/views/infra/build/index.vue
@@ -87,6 +87,7 @@ function showTemplate() {
   formData.value = makeTemplate();
 }
 
+/** 生成组件 */
 function makeTemplate() {
   const rule = designer.value.getRule();
   const opt = designer.value.getOption();
diff --git a/apps/web-ele/src/views/infra/codegen/data.ts b/apps/web-ele/src/views/infra/codegen/data.ts
index 9039c9db..78206c86 100644
--- a/apps/web-ele/src/views/infra/codegen/data.ts
+++ b/apps/web-ele/src/views/infra/codegen/data.ts
@@ -42,8 +42,8 @@ export function useImportTableFormSchema(): VbenFormSchema[] {
       label: '表名称',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入表名称',
         clearable: true,
+        placeholder: '请输入表名称',
       },
     },
     {
@@ -51,8 +51,8 @@ export function useImportTableFormSchema(): VbenFormSchema[] {
       label: '表描述',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入表描述',
         clearable: true,
+        placeholder: '请输入表描述',
       },
     },
   ];
@@ -366,8 +366,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '表名称',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入表名称',
         clearable: true,
+        placeholder: '请输入表名称',
       },
     },
     {
@@ -375,8 +375,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '表描述',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入表描述',
         clearable: true,
+        placeholder: '请输入表描述',
       },
     },
     {
diff --git a/apps/web-ele/src/views/infra/codegen/edit/index.vue b/apps/web-ele/src/views/infra/codegen/edit/index.vue
index 8d076e15..93544e10 100644
--- a/apps/web-ele/src/views/infra/codegen/edit/index.vue
+++ b/apps/web-ele/src/views/infra/codegen/edit/index.vue
@@ -151,8 +151,13 @@ getDetail();
       </div>
 
       <div class="mt-4 flex justify-end space-x-2">
-        <ElButton v-show="currentStep > 0" @click="prevStep">上一步</ElButton>
-        <ElButton v-show="currentStep < steps.length - 1" @click="nextStep">
+        <ElButton :disabled="currentStep === 0" @click="prevStep">
+          上一步
+        </ElButton>
+        <ElButton
+          :disabled="currentStep === steps.length - 1"
+          @click="nextStep"
+        >
           下一步
         </ElButton>
         <ElButton type="primary" :loading="loading" @click="submitForm">
diff --git a/apps/web-ele/src/views/infra/codegen/index.vue b/apps/web-ele/src/views/infra/codegen/index.vue
index 659cd5d9..cab2e64a 100644
--- a/apps/web-ele/src/views/infra/codegen/index.vue
+++ b/apps/web-ele/src/views/infra/codegen/index.vue
@@ -176,6 +176,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 获取数据源配置列表 */
+// TODO @芋艿：这种场景的最佳实践；
 async function initDataSourceConfig() {
   try {
     dataSourceConfigList.value = await getDataSourceConfigList();
diff --git a/apps/web-ele/src/views/infra/codegen/modules/preview-code.vue b/apps/web-ele/src/views/infra/codegen/modules/preview-code.vue
index de4486fc..18fb083f 100644
--- a/apps/web-ele/src/views/infra/codegen/modules/preview-code.vue
+++ b/apps/web-ele/src/views/infra/codegen/modules/preview-code.vue
@@ -7,7 +7,7 @@ import type { InfraCodegenApi } from '#/api/infra/codegen';
 import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
-import { Copy } from '@vben/icons';
+import { IconifyIcon } from '@vben/icons';
 
 import { useClipboard } from '@vueuse/core';
 import { ElMessage, ElTabPane, ElTabs, ElTree } from 'element-plus';
@@ -280,6 +280,7 @@ const [Modal, modalApi] = useVbenModal({
             :label="key.split('/').pop()"
             :name="key"
           >
+            <!-- TODO @puhui999：这里好像会有左右的滚动条？和 antd 不太一样 -->
             <div
               class="h-full rounded-md bg-gray-50 !p-0 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
             >
@@ -291,8 +292,8 @@ const [Modal, modalApi] = useVbenModal({
             </div>
           </ElTabPane>
           <template #add-icon>
-            <!-- TODO @芋艿：这里会报错； -->
-            <Copy />
+            <!-- TODO @puhui999：这了有没办法加个复制按钮哈？和 antd 类似 -->
+            <IconifyIcon icon="ant-design:copy-twotone" />
           </template>
         </ElTabs>
       </div>
diff --git a/apps/web-ele/src/views/infra/config/index.vue b/apps/web-ele/src/views/infra/config/index.vue
index 4eab816b..18699040 100644
--- a/apps/web-ele/src/views/infra/config/index.vue
+++ b/apps/web-ele/src/views/infra/config/index.vue
@@ -53,7 +53,7 @@ async function handleDelete(row: InfraConfigApi.Config) {
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteConfig(row.id as number);
+    await deleteConfig(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-ele/src/views/infra/dataSourceConfig/data.ts b/apps/web-ele/src/views/infra/dataSourceConfig/data.ts
index ae5010d0..6f4c6027 100644
--- a/apps/web-ele/src/views/infra/dataSourceConfig/data.ts
+++ b/apps/web-ele/src/views/infra/dataSourceConfig/data.ts
@@ -1,10 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraDataSourceConfigApi } from '#/api/infra/data-source-config';
-
-import { useAccess } from '@vben/access';
-
-const { hasAccessByCodes } = useAccess();
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
@@ -58,9 +53,7 @@ export function useFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = InfraDataSourceConfigApi.DataSourceConfig>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     { type: 'checkbox', width: 40 },
     {
@@ -90,31 +83,10 @@ export function useGridColumns<T = InfraDataSourceConfigApi.DataSourceConfig>(
       formatter: 'formatDateTime',
     },
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 130,
-      align: 'center',
+      width: 160,
       fixed: 'right',
-      cellRender: {
-        attrs: {
-          nameField: 'name',
-          nameTitle: '数据源',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'edit',
-            show: hasAccessByCodes(['infra:data-source-config:update']),
-            disabled: (row: any) => row.id === 0,
-          },
-          {
-            code: 'delete',
-            show: hasAccessByCodes(['infra:data-source-config:delete']),
-            disabled: (row: any) => row.id === 0,
-          },
-        ],
-      },
+      slots: { default: 'actions' },
     },
   ];
 }
diff --git a/apps/web-ele/src/views/infra/dataSourceConfig/index.vue b/apps/web-ele/src/views/infra/dataSourceConfig/index.vue
index 2f54433b..c885bf45 100644
--- a/apps/web-ele/src/views/infra/dataSourceConfig/index.vue
+++ b/apps/web-ele/src/views/infra/dataSourceConfig/index.vue
@@ -1,11 +1,8 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { InfraDataSourceConfigApi } from '#/api/infra/data-source-config';
 
-import { onMounted, ref } from 'vue';
+import { ref } from 'vue';
 
 import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
@@ -28,37 +25,49 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
 /** 创建数据源 */
-function onCreate() {
+function handleCreate() {
   formModalApi.setData(null).open();
 }
 
 /** 编辑数据源 */
-function onEdit(row: InfraDataSourceConfigApi.DataSourceConfig) {
+function handleEdit(row: InfraDataSourceConfigApi.DataSourceConfig) {
   formModalApi.setData(row).open();
 }
 
 /** 删除数据源 */
-async function onDelete(row: InfraDataSourceConfigApi.DataSourceConfig) {
+async function handleDelete(row: InfraDataSourceConfigApi.DataSourceConfig) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteDataSourceConfig(row.id as number);
+    await deleteDataSourceConfig(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
+    handleRefresh();
   } finally {
     loadingInstance.close();
   }
 }
 
 /** 批量删除数据源 */
-async function onDeleteBatch() {
-  await confirm('确定要批量删除该数据源吗？');
-  await deleteDataSourceConfigList(checkedIds.value);
-  checkedIds.value = [];
-  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-  await onRefresh();
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deletingBatch'),
+  });
+  try {
+    await deleteDataSourceConfigList(checkedIds.value);
+    checkedIds.value = [];
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 const checkedIds = ref<number[]>([]);
@@ -70,30 +79,14 @@ function handleRowCheckboxChange({
   checkedIds.value = records.map((item) => item.id!);
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<InfraDataSourceConfigApi.DataSourceConfig>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     pagerConfig: {
       enabled: false,
@@ -109,26 +102,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
     checkboxChange: handleRowCheckboxChange,
   },
 });
-
-/** 加载数据 */
-async function handleLoadData() {
-  await gridApi.query();
-}
-
-/** 刷新表格 */
-async function onRefresh() {
-  await handleLoadData();
-}
-
-/** 初始化 */
-onMounted(() => {
-  handleLoadData();
-});
 </script>
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid table-title="数据源列表">
       <template #toolbar-tools>
         <TableAction
@@ -138,7 +116,7 @@ onMounted(() => {
               type: 'primary',
               icon: ACTION_ICON.ADD,
               auth: ['infra:data-source-config:create'],
-              onClick: onCreate,
+              onClick: handleCreate,
             },
             {
               label: $t('ui.actionTitle.deleteBatch'),
@@ -146,7 +124,32 @@ onMounted(() => {
               icon: ACTION_ICON.DELETE,
               disabled: isEmpty(checkedIds),
               auth: ['infra:data-source-config:delete'],
-              onClick: onDeleteBatch,
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['infra:data-source-config:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:data-source-config:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
             },
           ]"
         />
diff --git a/apps/web-ele/src/views/infra/demo/demo01/data.ts b/apps/web-ele/src/views/infra/demo/demo01/data.ts
index 89f9b303..61c5f84a 100644
--- a/apps/web-ele/src/views/infra/demo/demo01/data.ts
+++ b/apps/web-ele/src/views/infra/demo/demo01/data.ts
@@ -144,7 +144,7 @@ export function useGridColumns(): VxeTableGridOptions<Demo01ContactApi.Demo01Con
     },
     {
       title: '操作',
-      width: 200,
+      width: 160,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-ele/src/views/infra/demo/demo01/index.vue b/apps/web-ele/src/views/infra/demo/demo01/index.vue
index 97222510..4b5455ab 100644
--- a/apps/web-ele/src/views/infra/demo/demo01/index.vue
+++ b/apps/web-ele/src/views/infra/demo/demo01/index.vue
@@ -4,7 +4,7 @@ import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
 
 import { ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
@@ -27,13 +27,19 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo01Contact(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '示例联系人.xls', source: data });
+}
+
 /** 创建示例联系人 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑示例联系人 */
@@ -45,12 +51,11 @@ function handleEdit(row: Demo01ContactApi.Demo01Contact) {
 async function handleDelete(row: Demo01ContactApi.Demo01Contact) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
-    await deleteDemo01Contact(row.id as number);
+    await deleteDemo01Contact(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -58,15 +63,15 @@ async function handleDelete(row: Demo01ContactApi.Demo01Contact) {
 
 /** 批量删除示例联系人 */
 async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
+    text: $t('ui.actionMessage.deletingBatch'),
   });
   try {
     await deleteDemo01ContactList(checkedIds.value);
     checkedIds.value = [];
     ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -81,12 +86,6 @@ function handleRowCheckboxChange({
   checkedIds.value = records.map((item) => item.id!);
 }
 
-/** 导出表格 */
-async function handleExport() {
-  const data = await exportDemo01Contact(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '示例联系人.xls', source: data });
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -126,8 +125,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
-
+    <FormModal @success="handleRefresh" />
     <Grid table-title="示例联系人列表">
       <template #toolbar-tools>
         <TableAction
@@ -175,7 +173,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               icon: ACTION_ICON.DELETE,
               auth: ['infra:demo01-contact:delete'],
               popConfirm: {
-                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),
               },
             },
diff --git a/apps/web-ele/src/views/infra/demo/demo01/modules/form.vue b/apps/web-ele/src/views/infra/demo/demo01/modules/form.vue
index 943b9769..548aac24 100644
--- a/apps/web-ele/src/views/infra/demo/demo01/modules/form.vue
+++ b/apps/web-ele/src/views/infra/demo/demo01/modules/form.vue
@@ -65,21 +65,20 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    let data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
-    if (!data) {
+    const data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
+    if (!data || !data.id) {
       return;
     }
-    if (data.id) {
-      modalApi.lock();
-      try {
-        data = await getDemo01Contact(data.id);
-      } finally {
-        modalApi.unlock();
+    modalApi.lock();
+    try {
+      formData.value = await getDemo01Contact(data.id);
+      // 设置到 values
+      if (formData.value) {
+        await formApi.setValues(formData.value);
       }
+    } finally {
+      modalApi.unlock();
     }
-    // 设置到 values
-    formData.value = data;
-    await formApi.setValues(formData.value);
   },
 });
 </script>
diff --git a/apps/web-ele/src/views/infra/demo/demo02/index.vue b/apps/web-ele/src/views/infra/demo/demo02/index.vue
index 7bbd62cf..b5eab45b 100644
--- a/apps/web-ele/src/views/infra/demo/demo02/index.vue
+++ b/apps/web-ele/src/views/infra/demo/demo02/index.vue
@@ -25,21 +25,20 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-/** 切换树形展开/收缩状态 */
-const isExpanded = ref(true);
-function toggleExpand() {
-  isExpanded.value = !isExpanded.value;
-  gridApi.grid.setAllTreeExpand(isExpanded.value);
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
 }
 
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo02Category(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '示例分类.xls', source: data });
 }
 
 /** 创建示例分类 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑示例分类 */
@@ -55,22 +54,22 @@ function handleAppend(row: Demo02CategoryApi.Demo02Category) {
 /** 删除示例分类 */
 async function handleDelete(row: Demo02CategoryApi.Demo02Category) {
   const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
+    text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteDemo02Category(row.id as number);
-    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    await deleteDemo02Category(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
   } finally {
     loadingInstance.close();
   }
 }
 
-/** 导出表格 */
-async function handleExport() {
-  const data = await exportDemo02Category(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '示例分类.xls', source: data });
+/** 切换树形展开/收缩状态 */
+const isExpanded = ref(true);
+function handleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -106,14 +105,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<Demo02CategoryApi.Demo02Category>,
-  gridEvents: {},
 });
 </script>
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
-
+    <FormModal @success="handleRefresh" />
     <Grid table-title="示例分类列表">
       <template #toolbar-tools>
         <TableAction
@@ -128,7 +125,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: isExpanded ? '收缩' : '展开',
               type: 'primary',
-              onClick: toggleExpand,
+              onClick: handleExpand,
             },
             {
               label: $t('ui.actionTitle.export'),
@@ -166,7 +163,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               icon: ACTION_ICON.DELETE,
               auth: ['infra:demo02-category:delete'],
               popConfirm: {
-                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),
               },
             },
diff --git a/apps/web-ele/src/views/infra/demo/demo02/modules/form.vue b/apps/web-ele/src/views/infra/demo/demo02/modules/form.vue
index bfabb260..2e7ff1dc 100644
--- a/apps/web-ele/src/views/infra/demo/demo02/modules/form.vue
+++ b/apps/web-ele/src/views/infra/demo/demo02/modules/form.vue
@@ -31,7 +31,7 @@ const [Form, formApi] = useVbenForm({
       class: 'w-full',
     },
     formItemClass: 'col-span-2',
-    labelWidth: 80,
+    labelWidth: 100,
   },
   layout: 'horizontal',
   schema: useFormSchema(),
@@ -66,21 +66,22 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    let data = modalApi.getData<Demo02CategoryApi.Demo02Category>();
-    if (!data) {
+    const data = modalApi.getData<Demo02CategoryApi.Demo02Category>();
+    if (!data || !data.id) {
+      // 设置上级
+      await formApi.setValues(data);
       return;
     }
-    if (data.id) {
-      modalApi.lock();
-      try {
-        data = await getDemo02Category(data.id);
-      } finally {
-        modalApi.unlock();
+    modalApi.lock();
+    try {
+      formData.value = await getDemo02Category(data.id);
+      // 设置到 values
+      if (formData.value) {
+        await formApi.setValues(formData.value);
       }
+    } finally {
+      modalApi.unlock();
     }
-    // 设置到 values
-    formData.value = data;
-    await formApi.setValues(formData.value);
   },
 });
 </script>
diff --git a/apps/web-ele/src/views/infra/demo/demo03/erp/data.ts b/apps/web-ele/src/views/infra/demo/demo03/erp/data.ts
index 168b073e..b5f0e625 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/erp/data.ts
+++ b/apps/web-ele/src/views/infra/demo/demo03/erp/data.ts
@@ -143,7 +143,7 @@ export function useGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Stu
     },
     {
       title: '操作',
-      width: 200,
+      width: 280,
       fixed: 'right',
       slots: { default: 'actions' },
     },
@@ -258,7 +258,7 @@ export function useDemo03CourseGridColumns(): VxeTableGridOptions<Demo03StudentA
     },
     {
       title: '操作',
-      width: 200,
+      width: 280,
       fixed: 'right',
       slots: { default: 'actions' },
     },
@@ -373,7 +373,7 @@ export function useDemo03GradeGridColumns(): VxeTableGridOptions<Demo03StudentAp
     },
     {
       title: '操作',
-      width: 200,
+      width: 280,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-ele/src/views/infra/demo/demo03/erp/index.vue b/apps/web-ele/src/views/infra/demo/demo03/erp/index.vue
index f81c56bf..043dd98c 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/erp/index.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/erp/index.vue
@@ -4,7 +4,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
 import { ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage, ElTabPane, ElTabs } from 'element-plus';
@@ -33,13 +33,19 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo03Student(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+}
+
 /** 创建学生 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
@@ -51,12 +57,11 @@ function handleEdit(row: Demo03StudentApi.Demo03Student) {
 async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
-    await deleteDemo03Student(row.id as number);
+    await deleteDemo03Student(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -64,15 +69,15 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
 
 /** 批量删除学生 */
 async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
+    text: $t('ui.actionMessage.deletingBatch'),
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);
     checkedIds.value = [];
     ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -87,12 +92,6 @@ function handleRowCheckboxChange({
   checkedIds.value = records.map((item) => item.id!);
 }
 
-/** 导出表格 */
-async function handleExport() {
-  const data = await exportDemo03Student(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -136,8 +135,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
-
+    <FormModal @success="handleRefresh" />
     <div>
       <Grid table-title="学生列表">
         <template #toolbar-tools>
diff --git a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue
index 91ec7d32..dfb34f1e 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue
@@ -44,7 +44,6 @@ const [Modal, modalApi] = useVbenModal({
     if (!valid) {
       return;
     }
-
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Course;
@@ -66,7 +65,6 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = undefined;
       return;
     }
-
     // 加载数据
     let data = modalApi.getData<Demo03StudentApi.Demo03Course>();
     if (!data) {
diff --git a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
index 0d0b5c19..076e33a5 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
@@ -4,7 +4,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
 import { nextTick, ref, watch } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
+import { confirm, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
@@ -50,12 +50,11 @@ function handleEdit(row: Demo03StudentApi.Demo03Course) {
 async function handleDelete(row: Demo03StudentApi.Demo03Course) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
-    await deleteDemo03Course(row.id as number);
+    await deleteDemo03Course(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    await handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -63,15 +62,15 @@ async function handleDelete(row: Demo03StudentApi.Demo03Course) {
 
 /** 批量删除学生课程 */
 async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
+    text: $t('ui.actionMessage.deletingBatch'),
   });
   try {
     await deleteDemo03CourseList(checkedIds.value);
     checkedIds.value = [];
     ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    await handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -127,7 +126,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 刷新表格 */
-async function onRefresh() {
+async function handleRefresh() {
   await gridApi.query();
 }
 
@@ -139,20 +138,20 @@ watch(
       return;
     }
     await nextTick();
-    await onRefresh();
+    await handleRefresh();
   },
   { immediate: true },
 );
 </script>
 
 <template>
-  <FormModal @success="onRefresh" />
+  <FormModal @success="handleRefresh" />
   <Grid table-title="学生课程列表">
     <template #toolbar-tools>
       <TableAction
         :actions="[
           {
-            label: $t('ui.actionTitle.create', ['学生']),
+            label: $t('ui.actionTitle.create', ['学生课程']),
             type: 'primary',
             icon: ACTION_ICON.ADD,
             auth: ['infra:demo03-student:create'],
diff --git a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue
index db67f321..0b41e208 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue
@@ -44,7 +44,6 @@ const [Modal, modalApi] = useVbenModal({
     if (!valid) {
       return;
     }
-
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Grade;
@@ -66,7 +65,6 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = undefined;
       return;
     }
-
     // 加载数据
     let data = modalApi.getData<Demo03StudentApi.Demo03Grade>();
     if (!data) {
diff --git a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
index 267aae91..c4b42faf 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
@@ -4,7 +4,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
 import { nextTick, ref, watch } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
+import { confirm, useVbenModal } from '@vben/common-ui';
 import { isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
@@ -50,12 +50,11 @@ function handleEdit(row: Demo03StudentApi.Demo03Grade) {
 async function handleDelete(row: Demo03StudentApi.Demo03Grade) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
-    await deleteDemo03Grade(row.id as number);
+    await deleteDemo03Grade(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    await handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -63,15 +62,15 @@ async function handleDelete(row: Demo03StudentApi.Demo03Grade) {
 
 /** 批量删除学生班级 */
 async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
+    text: $t('ui.actionMessage.deletingBatch'),
   });
   try {
     await deleteDemo03GradeList(checkedIds.value);
     checkedIds.value = [];
     ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    await handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -127,7 +126,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 刷新表格 */
-async function onRefresh() {
+async function handleRefresh() {
   await gridApi.query();
 }
 
@@ -139,20 +138,20 @@ watch(
       return;
     }
     await nextTick();
-    await onRefresh();
+    await handleRefresh();
   },
   { immediate: true },
 );
 </script>
 
 <template>
-  <FormModal @success="onRefresh" />
+  <FormModal @success="handleRefresh" />
   <Grid table-title="学生班级列表">
     <template #toolbar-tools>
       <TableAction
         :actions="[
           {
-            label: $t('ui.actionTitle.create', ['学生']),
+            label: $t('ui.actionTitle.create', ['学生班级']),
             type: 'primary',
             icon: ACTION_ICON.ADD,
             auth: ['infra:demo03-student:create'],
diff --git a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/form.vue b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/form.vue
index ae0572c6..e56102da 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/erp/modules/form.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/erp/modules/form.vue
@@ -65,21 +65,20 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
-    if (!data) {
+    const data = modalApi.getData<Demo03StudentApi.Demo03Student>();
+    if (!data || !data.id) {
       return;
     }
-    if (data.id) {
-      modalApi.lock();
-      try {
-        data = await getDemo03Student(data.id);
-      } finally {
-        modalApi.unlock();
+    modalApi.lock();
+    try {
+      formData.value = await getDemo03Student(data.id);
+      // 设置到 values
+      if (formData.value) {
+        await formApi.setValues(formData.value);
       }
+    } finally {
+      modalApi.unlock();
     }
-    // 设置到 values
-    formData.value = data;
-    await formApi.setValues(formData.value);
   },
 });
 </script>
diff --git a/apps/web-ele/src/views/infra/demo/demo03/inner/data.ts b/apps/web-ele/src/views/infra/demo/demo03/inner/data.ts
index 496acdfb..7faec485 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/inner/data.ts
+++ b/apps/web-ele/src/views/infra/demo/demo03/inner/data.ts
@@ -144,7 +144,7 @@ export function useGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Stu
     },
     {
       title: '操作',
-      width: 200,
+      width: 280,
       fixed: 'right',
       slots: { default: 'actions' },
     },
@@ -170,7 +170,7 @@ export function useDemo03CourseGridEditColumns(): VxeTableGridOptions<Demo03Stud
     },
     {
       title: '操作',
-      width: 200,
+      width: 280,
       fixed: 'right',
       slots: { default: 'actions' },
     },
@@ -208,6 +208,7 @@ export function useDemo03CourseGridColumns(): VxeTableGridOptions<Demo03StudentA
     },
   ];
 }
+
 // ==================== 子表（学生班级） ====================
 
 /** 新增/修改的表单 */
diff --git a/apps/web-ele/src/views/infra/demo/demo03/inner/index.vue b/apps/web-ele/src/views/infra/demo/demo03/inner/index.vue
index c6d37992..eadfc820 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/inner/index.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/inner/index.vue
@@ -4,7 +4,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
 
 import { ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage, ElTabPane, ElTabs } from 'element-plus';
@@ -32,13 +32,19 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.reload();
 }
 
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo03Student(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+}
+
 /** 创建学生 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
@@ -50,12 +56,11 @@ function handleEdit(row: Demo03StudentApi.Demo03Student) {
 async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
-    await deleteDemo03Student(row.id as number);
+    await deleteDemo03Student(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -63,15 +68,15 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
 
 /** 批量删除学生 */
 async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
+    text: $t('ui.actionMessage.deletingBatch'),
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);
     checkedIds.value = [];
     ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -86,12 +91,6 @@ function handleRowCheckboxChange({
   checkedIds.value = records.map((item) => item.id!);
 }
 
-/** 导出表格 */
-async function handleExport() {
-  const data = await exportDemo03Student(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -131,8 +130,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
-
+    <FormModal @success="handleRefresh" />
     <Grid table-title="学生列表">
       <template #expand_content="{ row }">
         <!-- 子表的表单 -->
diff --git a/apps/web-ele/src/views/infra/demo/demo03/inner/modules/demo03-course-form.vue b/apps/web-ele/src/views/infra/demo/demo03/inner/modules/demo03-course-form.vue
index 1d5fd5f4..0402bf44 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/inner/modules/demo03-course-form.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/inner/modules/demo03-course-form.vue
@@ -26,6 +26,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     keepSource: true,
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     pagerConfig: {
       enabled: false,
diff --git a/apps/web-ele/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue b/apps/web-ele/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue
index ce00569d..50297db4 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue
@@ -17,7 +17,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useDemo03CourseGridColumns(),
     pagerConfig: {
-      nabled: false,
+      enabled: false,
     },
     toolbarConfig: {
       enabled: false,
@@ -31,7 +31,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 刷新表格 */
-async function onRefresh() {
+async function handleRefresh() {
   await gridApi.grid.loadData(
     await getDemo03CourseListByStudentId(props.studentId!),
   );
@@ -45,7 +45,7 @@ watch(
       return;
     }
     await nextTick();
-    await onRefresh();
+    await handleRefresh();
   },
   { immediate: true },
 );
diff --git a/apps/web-ele/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue b/apps/web-ele/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue
index fddce42b..1ad2db74 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue
@@ -17,7 +17,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useDemo03GradeGridColumns(),
     pagerConfig: {
-      nabled: false,
+      enabled: false,
     },
     toolbarConfig: {
       enabled: false,
@@ -31,7 +31,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 刷新表格 */
-async function onRefresh() {
+async function handleRefresh() {
   await gridApi.grid.loadData([
     await getDemo03GradeByStudentId(props.studentId!),
   ]);
@@ -45,7 +45,7 @@ watch(
       return;
     }
     await nextTick();
-    await onRefresh();
+    await handleRefresh();
   },
   { immediate: true },
 );
diff --git a/apps/web-ele/src/views/infra/demo/demo03/normal/index.vue b/apps/web-ele/src/views/infra/demo/demo03/normal/index.vue
index 23aa2cb9..7c8c07d5 100644
--- a/apps/web-ele/src/views/infra/demo/demo03/normal/index.vue
+++ b/apps/web-ele/src/views/infra/demo/demo03/normal/index.vue
@@ -4,7 +4,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
 
 import { ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import { ElLoading, ElMessage } from 'element-plus';
@@ -27,13 +27,19 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo03Student(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+}
+
 /** 创建学生 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
@@ -45,12 +51,11 @@ function handleEdit(row: Demo03StudentApi.Demo03Student) {
 async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
-    await deleteDemo03Student(row.id as number);
+    await deleteDemo03Student(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-    onRefresh();
+    handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -58,15 +63,15 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
 
 /** 批量删除学生 */
 async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
+    text: $t('ui.actionMessage.deletingBatch'),
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);
     checkedIds.value = [];
     ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
+    handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -81,12 +86,6 @@ function handleRowCheckboxChange({
   checkedIds.value = records.map((item) => item.id!);
 }
 
-/** 导出表格 */
-async function handleExport() {
-  const data = await exportDemo03Student(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -126,8 +125,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
-
+    <FormModal @success="handleRefresh" />
     <Grid table-title="学生列表">
       <template #toolbar-tools>
         <TableAction
diff --git a/apps/web-ele/src/views/infra/demo/general/demo01/index.vue b/apps/web-ele/src/views/infra/demo/general/demo01/index.vue
index cbb99d16..0da2e0ab 100644
--- a/apps/web-ele/src/views/infra/demo/general/demo01/index.vue
+++ b/apps/web-ele/src/views/infra/demo/general/demo01/index.vue
@@ -3,7 +3,7 @@ import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
 
 import { h, onMounted, reactive, ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { ContentWrap, Page, useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { Download, Plus, Trash2 } from '@vben/icons';
@@ -35,7 +35,6 @@ import {
   exportDemo01Contact,
   getDemo01ContactPage,
 } from '#/api/infra/demo/demo01';
-import { ContentWrap } from '#/components/content-wrap';
 import { DictTag } from '#/components/dict-tag';
 import { $t } from '#/locales';
 
@@ -90,7 +89,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建示例联系人 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑示例联系人 */
@@ -102,10 +101,9 @@ function handleEdit(row: Demo01ContactApi.Demo01Contact) {
 async function handleDelete(row: Demo01ContactApi.Demo01Contact) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
-    await deleteDemo01Contact(row.id as number);
+    await deleteDemo01Contact(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     await getList();
   } finally {
@@ -117,7 +115,6 @@ async function handleDelete(row: Demo01ContactApi.Demo01Contact) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo01ContactList(checkedIds.value);
diff --git a/apps/web-ele/src/views/infra/demo/general/demo02/index.vue b/apps/web-ele/src/views/infra/demo/general/demo02/index.vue
index 33e53e98..500cbe2d 100644
--- a/apps/web-ele/src/views/infra/demo/general/demo02/index.vue
+++ b/apps/web-ele/src/views/infra/demo/general/demo02/index.vue
@@ -3,7 +3,7 @@ import type { Demo02CategoryApi } from '#/api/infra/demo/demo02';
 
 import { h, onMounted, reactive, ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { ContentWrap, Page, useVbenModal } from '@vben/common-ui';
 import { Download, Plus } from '@vben/icons';
 import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
 import {
@@ -29,7 +29,6 @@ import {
   exportDemo02Category,
   getDemo02CategoryList,
 } from '#/api/infra/demo/demo02';
-import { ContentWrap } from '#/components/content-wrap';
 import { $t } from '#/locales';
 
 import Demo02CategoryForm from './modules/form.vue';
@@ -77,7 +76,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建示例分类 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑示例分类 */
@@ -94,10 +93,9 @@ function handleAppend(row: Demo02CategoryApi.Demo02Category) {
 async function handleDelete(row: Demo02CategoryApi.Demo02Category) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
-    await deleteDemo02Category(row.id as number);
+    await deleteDemo02Category(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     await getList();
   } finally {
diff --git a/apps/web-ele/src/views/infra/demo/general/demo03/erp/index.vue b/apps/web-ele/src/views/infra/demo/general/demo03/erp/index.vue
index 917e3d92..9c62a60f 100644
--- a/apps/web-ele/src/views/infra/demo/general/demo03/erp/index.vue
+++ b/apps/web-ele/src/views/infra/demo/general/demo03/erp/index.vue
@@ -3,7 +3,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
 import { h, onMounted, reactive, ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { ContentWrap, Page, useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { Download, Plus, Trash2 } from '@vben/icons';
@@ -37,7 +37,6 @@ import {
   exportDemo03Student,
   getDemo03StudentPage,
 } from '#/api/infra/demo/demo03/erp';
-import { ContentWrap } from '#/components/content-wrap';
 import { DictTag } from '#/components/dict-tag';
 import { $t } from '#/locales';
 
@@ -102,7 +101,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建学生 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
@@ -114,10 +113,9 @@ function handleEdit(row: Demo03StudentApi.Demo03Student) {
 async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
-    await deleteDemo03Student(row.id as number);
+    await deleteDemo03Student(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     await getList();
   } finally {
@@ -129,7 +127,6 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);
diff --git a/apps/web-ele/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue b/apps/web-ele/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue
index 1e29ced5..32abd384 100644
--- a/apps/web-ele/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue
+++ b/apps/web-ele/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue
@@ -3,7 +3,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
 import { h, nextTick, onMounted, reactive, ref, watch } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
+import { ContentWrap, useVbenModal } from '@vben/common-ui';
 import { Plus, Trash2 } from '@vben/icons';
 import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
 import { cloneDeep, formatDateTime, isEmpty } from '@vben/utils';
@@ -25,7 +25,6 @@ import {
   deleteDemo03CourseList,
   getDemo03CoursePage,
 } from '#/api/infra/demo/demo03/erp';
-import { ContentWrap } from '#/components/content-wrap';
 import { $t } from '#/locales';
 
 import Demo03CourseForm from './demo03-course-form.vue';
@@ -57,10 +56,9 @@ function handleEdit(row: Demo03StudentApi.Demo03Course) {
 async function handleDelete(row: Demo03StudentApi.Demo03Course) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
-    await deleteDemo03Course(row.id as number);
+    await deleteDemo03Course(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     await getList();
   } finally {
@@ -72,7 +70,6 @@ async function handleDelete(row: Demo03StudentApi.Demo03Course) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03CourseList(checkedIds.value);
diff --git a/apps/web-ele/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue b/apps/web-ele/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue
index 7ad05699..adc374d1 100644
--- a/apps/web-ele/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue
+++ b/apps/web-ele/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue
@@ -3,7 +3,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
 import { h, nextTick, onMounted, reactive, ref, watch } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
+import { ContentWrap, useVbenModal } from '@vben/common-ui';
 import { Plus, Trash2 } from '@vben/icons';
 import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
 import { cloneDeep, formatDateTime, isEmpty } from '@vben/utils';
@@ -25,7 +25,6 @@ import {
   deleteDemo03GradeList,
   getDemo03GradePage,
 } from '#/api/infra/demo/demo03/erp';
-import { ContentWrap } from '#/components/content-wrap';
 import { $t } from '#/locales';
 
 import Demo03GradeForm from './demo03-grade-form.vue';
@@ -57,10 +56,9 @@ function handleEdit(row: Demo03StudentApi.Demo03Grade) {
 async function handleDelete(row: Demo03StudentApi.Demo03Grade) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
-    await deleteDemo03Grade(row.id as number);
+    await deleteDemo03Grade(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     await getList();
   } finally {
@@ -72,7 +70,6 @@ async function handleDelete(row: Demo03StudentApi.Demo03Grade) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03GradeList(checkedIds.value);
diff --git a/apps/web-ele/src/views/infra/demo/general/demo03/inner/index.vue b/apps/web-ele/src/views/infra/demo/general/demo03/inner/index.vue
index c326f461..7fca75c7 100644
--- a/apps/web-ele/src/views/infra/demo/general/demo03/inner/index.vue
+++ b/apps/web-ele/src/views/infra/demo/general/demo03/inner/index.vue
@@ -3,7 +3,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
 
 import { h, onMounted, reactive, ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { ContentWrap, Page, useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { Download, Plus, Trash2 } from '@vben/icons';
@@ -37,7 +37,6 @@ import {
   exportDemo03Student,
   getDemo03StudentPage,
 } from '#/api/infra/demo/demo03/inner';
-import { ContentWrap } from '#/components/content-wrap';
 import { DictTag } from '#/components/dict-tag';
 import { $t } from '#/locales';
 
@@ -98,7 +97,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建学生 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
@@ -110,10 +109,9 @@ function handleEdit(row: Demo03StudentApi.Demo03Student) {
 async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
-    await deleteDemo03Student(row.id as number);
+    await deleteDemo03Student(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     await getList();
   } finally {
@@ -125,7 +123,6 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);
diff --git a/apps/web-ele/src/views/infra/demo/general/demo03/inner/modules/demo03-course-list.vue b/apps/web-ele/src/views/infra/demo/general/demo03/inner/modules/demo03-course-list.vue
index 9cf3a555..678042aa 100644
--- a/apps/web-ele/src/views/infra/demo/general/demo03/inner/modules/demo03-course-list.vue
+++ b/apps/web-ele/src/views/infra/demo/general/demo03/inner/modules/demo03-course-list.vue
@@ -3,11 +3,11 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
 
 import { nextTick, ref, watch } from 'vue';
 
+import { ContentWrap } from '@vben/common-ui';
 import { formatDateTime } from '@vben/utils';
 
 import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
 import { getDemo03CourseListByStudentId } from '#/api/infra/demo/demo03/inner';
-import { ContentWrap } from '#/components/content-wrap';
 
 const props = defineProps<{
   studentId?: number; // 学生编号（主表的关联字段）
diff --git a/apps/web-ele/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-list.vue b/apps/web-ele/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-list.vue
index 20322a47..4272b63e 100644
--- a/apps/web-ele/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-list.vue
+++ b/apps/web-ele/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-list.vue
@@ -3,11 +3,11 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
 
 import { nextTick, ref, watch } from 'vue';
 
+import { ContentWrap } from '@vben/common-ui';
 import { formatDateTime } from '@vben/utils';
 
 import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
 import { getDemo03GradeByStudentId } from '#/api/infra/demo/demo03/inner';
-import { ContentWrap } from '#/components/content-wrap';
 
 const props = defineProps<{
   studentId?: number; // 学生编号（主表的关联字段）
diff --git a/apps/web-ele/src/views/infra/demo/general/demo03/normal/index.vue b/apps/web-ele/src/views/infra/demo/general/demo03/normal/index.vue
index 1262599c..38244937 100644
--- a/apps/web-ele/src/views/infra/demo/general/demo03/normal/index.vue
+++ b/apps/web-ele/src/views/infra/demo/general/demo03/normal/index.vue
@@ -3,7 +3,7 @@ import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
 
 import { h, onMounted, reactive, ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { ContentWrap, Page, useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { Download, Plus, Trash2 } from '@vben/icons';
@@ -35,7 +35,6 @@ import {
   exportDemo03Student,
   getDemo03StudentPage,
 } from '#/api/infra/demo/demo03/normal';
-import { ContentWrap } from '#/components/content-wrap';
 import { DictTag } from '#/components/dict-tag';
 import { $t } from '#/locales';
 
@@ -91,7 +90,7 @@ const [FormModal, formModalApi] = useVbenModal({
 
 /** 创建学生 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑学生 */
@@ -103,10 +102,9 @@ function handleEdit(row: Demo03StudentApi.Demo03Student) {
 async function handleDelete(row: Demo03StudentApi.Demo03Student) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.id]),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
-    await deleteDemo03Student(row.id as number);
+    await deleteDemo03Student(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     await getList();
   } finally {
@@ -118,7 +116,6 @@ async function handleDelete(row: Demo03StudentApi.Demo03Student) {
 async function handleDeleteBatch() {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting'),
-    background: 'rgba(0, 0, 0, 0.7)',
   });
   try {
     await deleteDemo03StudentList(checkedIds.value);
diff --git a/apps/web-ele/src/views/infra/file/data.ts b/apps/web-ele/src/views/infra/file/data.ts
index 56d58313..3e97d47f 100644
--- a/apps/web-ele/src/views/infra/file/data.ts
+++ b/apps/web-ele/src/views/infra/file/data.ts
@@ -9,7 +9,7 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'file',
       label: '文件上传',
-      component: 'Upload',
+      component: 'FileUpload',
       componentProps: {
         placeholder: '请选择要上传的文件',
       },
diff --git a/apps/web-ele/src/views/infra/file/index.vue b/apps/web-ele/src/views/infra/file/index.vue
index 44dc34ef..9e316801 100644
--- a/apps/web-ele/src/views/infra/file/index.vue
+++ b/apps/web-ele/src/views/infra/file/index.vue
@@ -54,7 +54,7 @@ async function handleDelete(row: InfraFileApi.File) {
     text: $t('ui.actionMessage.deleting', [row.name || row.path]),
   });
   try {
-    await deleteFile(row.id as number);
+    await deleteFile(row.id!);
     ElMessage.success(
       $t('ui.actionMessage.deleteSuccess', [row.name || row.path]),
     );
@@ -150,21 +150,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
       </template>
       <template #file-content="{ row }">
         <ElImage v-if="row.type && row.type.includes('image')" :src="row.url" />
-        <ElButton
-          v-else-if="row.type && row.type.includes('pdf')"
-          type="primary"
-          link
-          @click="() => openWindow(row.url!)"
-        >
-          预览
-        </ElButton>
-        <ElButton
-          v-else
-          type="primary"
-          link
-          @click="() => openWindow(row.url!)"
-        >
-          下载
+        <ElButton type="primary" link @click="() => openWindow(row.url!)">
+          {{ row.type && row.type.includes('pdf') ? '预览' : '下载' }}
         </ElButton>
       </template>
       <template #actions="{ row }">
diff --git a/apps/web-ele/src/views/infra/file/modules/form.vue b/apps/web-ele/src/views/infra/file/modules/form.vue
index 558c8ae4..21d9f482 100644
--- a/apps/web-ele/src/views/infra/file/modules/form.vue
+++ b/apps/web-ele/src/views/infra/file/modules/form.vue
@@ -1,19 +1,19 @@
 <script lang="ts" setup>
-import type { UploadRawFile } from 'element-plus';
-
 import { useVbenModal } from '@vben/common-ui';
-
-import { ElMessage, ElUpload } from 'element-plus';
+import { isEmpty } from '@vben/utils';
 
 import { useVbenForm } from '#/adapter/form';
-import { useUpload } from '#/components/upload/use-upload';
-import { $t } from '#/locales';
 
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 
-const [Form, formApi] = useVbenForm({
+const [Modal, modalApi] = useVbenModal({
+  showConfirmButton: false,
+  showCancelButton: false,
+});
+
+const [Form] = useVbenForm({
   commonConfig: {
     componentProps: {
       class: 'w-full',
@@ -25,64 +25,20 @@ const [Form, formApi] = useVbenForm({
   layout: 'horizontal',
   schema: useFormSchema().map((item) => ({ ...item, label: '' })), // 去除label
   showDefaultActions: false,
-});
-
-const [Modal, modalApi] = useVbenModal({
-  async onConfirm() {
-    const { valid } = await formApi.validate();
-    if (!valid) {
+  handleValuesChange: (values) => {
+    if (isEmpty(values)) {
       return;
     }
-    modalApi.lock();
-    // 提交表单
-    const data = await formApi.getValues();
-    try {
-      await useUpload().httpRequest(data.file);
-      // 关闭并提示
-      await modalApi.close();
-      emit('success');
-      ElMessage.success($t('ui.actionMessage.operationSuccess'));
-    } finally {
-      modalApi.unlock();
-    }
+    // 上传成功关闭 modal
+    modalApi.close();
+    emit('success');
   },
 });
-
-/** 上传前 */
-function beforeUpload(file: UploadRawFile) {
-  // TODO @puhui999：【bug】这个上传功能，有点问题。报文件不存在
-  formApi.setFieldValue('file', file);
-  return false;
-}
 </script>
 
 <template>
-  <Modal title="上传图片">
-    <Form class="mx-4">
-      <template #file>
-        <div class="w-full">
-          <!-- 上传区域 -->
-          <ElUpload
-            class="upload-demo"
-            drag
-            :auto-upload="false"
-            :limit="1"
-            accept=".jpg,.png,.gif,.webp"
-            :before-upload="beforeUpload"
-            list-type="picture-card"
-          >
-            <div class="el-upload__text">
-              <p>
-                <i class="el-icon-upload text-2xl"></i>
-              </p>
-              <p>点击或拖拽文件到此区域上传</p>
-              <p class="text-sm text-gray-500">
-                支持 .jpg、.png、.gif、.webp 格式图片文件
-              </p>
-            </div>
-          </ElUpload>
-        </div>
-      </template>
-    </Form>
+  <!-- TODO @puhui999：这个看看怎么和 antd 的 file/modules/form.vue 【UI】保持一致一点哈。 -->
+  <Modal title="上传文件">
+    <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-ele/src/views/infra/fileConfig/index.vue b/apps/web-ele/src/views/infra/fileConfig/index.vue
index 6e15511f..d7aabfb1 100644
--- a/apps/web-ele/src/views/infra/fileConfig/index.vue
+++ b/apps/web-ele/src/views/infra/fileConfig/index.vue
@@ -48,7 +48,7 @@ async function handleMaster(row: InfraFileConfigApi.FileConfig) {
     text: $t('ui.actionMessage.updating', [row.name]),
   });
   try {
-    await updateFileConfigMaster(row.id as number);
+    await updateFileConfigMaster(row.id!);
     ElMessage.success($t('ui.actionMessage.operationSuccess'));
     handleRefresh();
   } catch {
@@ -62,7 +62,7 @@ async function handleTest(row: InfraFileConfigApi.FileConfig) {
     text: '测试上传中...',
   });
   try {
-    const response = await testFileConfig(row.id as number);
+    const response = await testFileConfig(row.id!);
     loadingInstance.close();
     // 确认是否访问该文件
     confirm({
@@ -84,7 +84,7 @@ async function handleDelete(row: InfraFileConfigApi.FileConfig) {
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteFileConfig(row.id as number);
+    await deleteFileConfig(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-ele/src/views/infra/job/data.ts b/apps/web-ele/src/views/infra/job/data.ts
index 78b3b187..e2acb01a 100644
--- a/apps/web-ele/src/views/infra/job/data.ts
+++ b/apps/web-ele/src/views/infra/job/data.ts
@@ -3,7 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { InfraJobApi } from '#/api/infra/job';
 import type { DescriptionItemSchema } from '#/components/description';
 
-import { h } from 'vue';
+import { h, markRaw } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
@@ -11,6 +11,7 @@ import { formatDateTime } from '@vben/utils';
 
 import { ElTimeline, ElTimelineItem } from 'element-plus';
 
+import { CronTab } from '#/components/cron-tab';
 import { DictTag } from '#/components/dict-tag';
 
 /** 新增/修改的表单 */
@@ -57,12 +58,11 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'cronExpression',
       label: 'CRON 表达式',
-      component: 'Input',
+      component: markRaw(CronTab),
       componentProps: {
         placeholder: '请输入 CRON 表达式',
       },
       rules: 'required',
-      // TODO @芋艿：未来支持动态的 CRON 表达式选择
     },
     {
       fieldName: 'retryCount',
@@ -71,6 +71,8 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入重试次数。设置为 0 时，不进行重试',
         min: 0,
+        controlsPosition: 'right',
+        class: '!w-full',
       },
       rules: 'required',
     },
@@ -81,6 +83,8 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入重试间隔，单位：毫秒。设置为 0 时，无需间隔',
         min: 0,
+        controlsPosition: 'right',
+        class: '!w-full',
       },
       rules: 'required',
     },
@@ -91,6 +95,8 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入监控超时时间，单位：毫秒',
         min: 0,
+        controlsPosition: 'right',
+        class: '!w-full',
       },
     },
   ];
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 dca38897..5309523b 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
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { InfraJobLogApi } from '#/api/infra/job-log';
 
 import { ref } from 'vue';
@@ -17,9 +17,9 @@ const [Descriptions] = useDescription({
     border: true,
     column: 1,
     direction: 'horizontal',
+    labelWidth: 140,
     title: '',
     extra: '',
-    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 5bd3dee5..f25a57ab 100644
--- a/apps/web-ele/src/views/infra/job/modules/detail.vue
+++ b/apps/web-ele/src/views/infra/job/modules/detail.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { InfraJobApi } from '#/api/infra/job';
 
 import { ref } from 'vue';
@@ -18,9 +18,9 @@ const [Descriptions] = useDescription({
     border: true,
     column: 1,
     direction: 'horizontal',
+    labelWidth: 140,
     title: '',
     extra: '',
-    labelWidth: 140,
   },
   schema: useDetailSchema(),
 });
diff --git a/apps/web-ele/src/views/infra/job/modules/form.vue b/apps/web-ele/src/views/infra/job/modules/form.vue
index 6bd86a91..cbc02fe2 100644
--- a/apps/web-ele/src/views/infra/job/modules/form.vue
+++ b/apps/web-ele/src/views/infra/job/modules/form.vue
@@ -76,7 +76,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle" class="w-[40%]">
+  <Modal :title="getTitle" class="w-2/5">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-ele/src/views/mall/product/category/index.vue b/apps/web-ele/src/views/mall/product/category/index.vue
index 60ead357..61ca0691 100644
--- a/apps/web-ele/src/views/mall/product/category/index.vue
+++ b/apps/web-ele/src/views/mall/product/category/index.vue
@@ -28,7 +28,7 @@ function onRefresh() {
 
 /** 创建分类 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 添加下级分类 */
diff --git a/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue b/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
index 1c6c451f..960302c1 100644
--- a/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
+++ b/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
@@ -4,6 +4,7 @@ import type { MallSpuApi } from '#/api/mall/product/spu';
 
 import { onMounted, ref } from 'vue';
 
+import { ContentWrap } from '@vben/common-ui';
 import { handleTree } from '@vben/utils';
 
 import {
@@ -24,7 +25,6 @@ import {
 
 import * as ProductCategoryApi from '#/api/mall/product/category';
 import * as ProductSpuApi from '#/api/mall/product/spu';
-
 /**
  * 商品表格选择对话框
  * 1. 单选模式：
diff --git a/apps/web-ele/src/views/mall/promotion/combination/components/combination-table-select.vue b/apps/web-ele/src/views/mall/promotion/combination/components/combination-table-select.vue
index 4d26e398..84db075b 100644
--- a/apps/web-ele/src/views/mall/promotion/combination/components/combination-table-select.vue
+++ b/apps/web-ele/src/views/mall/promotion/combination/components/combination-table-select.vue
@@ -3,6 +3,7 @@ import type { MallCombinationActivityApi } from '#/api/mall/promotion/combinatio
 
 import { onMounted, ref } from 'vue';
 
+import { ContentWrap } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import {
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/components/coupon-select.vue b/apps/web-ele/src/views/mall/promotion/coupon/components/coupon-select.vue
index 2c9ab796..b29626d8 100644
--- a/apps/web-ele/src/views/mall/promotion/coupon/components/coupon-select.vue
+++ b/apps/web-ele/src/views/mall/promotion/coupon/components/coupon-select.vue
@@ -3,6 +3,7 @@ import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTe
 
 import { reactive, ref } from 'vue';
 
+import { ContentWrap } from '@vben/common-ui';
 import { CouponTemplateTakeTypeEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
diff --git a/apps/web-ele/src/views/mall/promotion/point/components/point-table-select.vue b/apps/web-ele/src/views/mall/promotion/point/components/point-table-select.vue
index 583b49c8..69e5ebf7 100644
--- a/apps/web-ele/src/views/mall/promotion/point/components/point-table-select.vue
+++ b/apps/web-ele/src/views/mall/promotion/point/components/point-table-select.vue
@@ -3,6 +3,7 @@ import type { MallPointActivityApi } from '#/api/mall/promotion/point';
 
 import { computed, ref } from 'vue';
 
+import { ContentWrap } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { dateFormatter, fenToYuanFormat } from '@vben/utils';
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/components/seckill-table-select.vue b/apps/web-ele/src/views/mall/promotion/seckill/components/seckill-table-select.vue
index 39435519..6014338f 100644
--- a/apps/web-ele/src/views/mall/promotion/seckill/components/seckill-table-select.vue
+++ b/apps/web-ele/src/views/mall/promotion/seckill/components/seckill-table-select.vue
@@ -3,6 +3,7 @@ import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckil
 
 import { onMounted, ref } from 'vue';
 
+import { ContentWrap } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import {
diff --git a/apps/web-ele/src/views/mall/trade/afterSale/modules/detail.vue b/apps/web-ele/src/views/mall/trade/afterSale/modules/detail.vue
index c7afee1a..292a0914 100644
--- a/apps/web-ele/src/views/mall/trade/afterSale/modules/detail.vue
+++ b/apps/web-ele/src/views/mall/trade/afterSale/modules/detail.vue
@@ -5,7 +5,7 @@ import type { MallOrderApi } from '#/api/mall/trade/order';
 import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import { confirm, Page } from '@vben/common-ui';
+import { confirm, ContentWrap, Page } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictLabel, getDictObj } from '@vben/hooks';
 import { $t } from '@vben/locales';
@@ -21,7 +21,6 @@ import {
 } from 'element-plus';
 
 import * as AfterSaleApi from '#/api/mall/trade/afterSale/index';
-import ContentWrap from '#/components/content-wrap/content-wrap.vue';
 import { DictTag } from '#/components/dict-tag';
 
 import UpdateAuditReasonForm from './disagree-form.vue';
diff --git a/apps/web-ele/src/views/mall/trade/order/modules/detail.vue b/apps/web-ele/src/views/mall/trade/order/modules/detail.vue
index 21b89e47..5ddad388 100644
--- a/apps/web-ele/src/views/mall/trade/order/modules/detail.vue
+++ b/apps/web-ele/src/views/mall/trade/order/modules/detail.vue
@@ -6,7 +6,7 @@ import type { MallOrderApi } from '#/api/mall/trade/order';
 import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, ContentWrap, Page, useVbenModal } from '@vben/common-ui';
 import {
   DeliveryTypeEnum,
   DICT_TYPE,
@@ -26,7 +26,6 @@ import {
 import * as DeliveryExpressApi from '#/api/mall/trade/delivery/express';
 import * as DeliveryPickUpStoreApi from '#/api/mall/trade/delivery/pickUpStore';
 import * as TradeOrderApi from '#/api/mall/trade/order';
-import ContentWrap from '#/components/content-wrap/content-wrap.vue';
 import { DictTag } from '#/components/dict-tag';
 
 import OrderDeliveryForm from './delevery-form.vue';
diff --git a/apps/web-ele/src/views/pay/app/modules/data.ts b/apps/web-ele/src/views/pay/app/modules/data.ts
index 37fc4fc4..59c9b4a0 100644
--- a/apps/web-ele/src/views/pay/app/modules/data.ts
+++ b/apps/web-ele/src/views/pay/app/modules/data.ts
@@ -454,7 +454,6 @@ export function channelSchema(formType: string): VbenFormSchema[] {
             accept: ['pem'],
           },
         }),
-        rules: 'required',
         dependencies: {
           show(values) {
             return values?.config?.apiVersion === 'v3';
diff --git a/apps/web-ele/src/views/pay/cashier/index.vue b/apps/web-ele/src/views/pay/cashier/index.vue
index 5daaf018..7a338652 100644
--- a/apps/web-ele/src/views/pay/cashier/index.vue
+++ b/apps/web-ele/src/views/pay/cashier/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PayOrderApi } from '#/api/pay/order';
 
-import { onMounted, ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
@@ -294,6 +294,10 @@ function goReturnUrl(payResult: string) {
 onMounted(async () => {
   await getDetail();
 });
+
+onBeforeUnmount(() => {
+  clearQueryInterval();
+});
 </script>
 <template>
   <Page auto-content-height>
diff --git a/apps/web-ele/src/views/system/dept/index.vue b/apps/web-ele/src/views/system/dept/index.vue
index 7fcde34c..fe286b08 100644
--- a/apps/web-ele/src/views/system/dept/index.vue
+++ b/apps/web-ele/src/views/system/dept/index.vue
@@ -62,7 +62,7 @@ async function handleDelete(row: SystemDeptApi.Dept) {
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteDept(row.id as number);
+    await deleteDept(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
@@ -157,7 +157,7 @@ onMounted(async () => {
               onClick: handleExpand,
             },
             {
-              label: '批量删除',
+              label: $t('ui.actionTitle.deleteBatch'),
               type: 'danger',
               icon: ACTION_ICON.DELETE,
               auth: ['system:dept:delete'],
diff --git a/apps/web-ele/src/views/system/dict/data.ts b/apps/web-ele/src/views/system/dict/data.ts
index 6af1643f..8e191892 100644
--- a/apps/web-ele/src/views/system/dict/data.ts
+++ b/apps/web-ele/src/views/system/dict/data.ts
@@ -151,9 +151,7 @@ export function useTypeGridColumns(): VxeTableGridOptions['columns'] {
 // ============================== 字典数据 ==============================
 
 // TODO @芋艿：后续针对 antd，增加
-/**
- * 颜色选项
- */
+/** 颜色选项 */
 const colorOptions = [
   { value: '', label: '无' },
   { value: 'processing', label: '主要' },
diff --git a/apps/web-ele/src/views/system/dict/modules/type-grid.vue b/apps/web-ele/src/views/system/dict/modules/type-grid.vue
index f9fcc880..d2e7ec08 100644
--- a/apps/web-ele/src/views/system/dict/modules/type-grid.vue
+++ b/apps/web-ele/src/views/system/dict/modules/type-grid.vue
@@ -55,7 +55,7 @@ async function handleDelete(row: SystemDictTypeApi.DictType) {
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteDictType(row.id as number);
+    await deleteDictType(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-ele/src/views/system/loginlog/index.vue b/apps/web-ele/src/views/system/loginlog/index.vue
index 734d3528..f5c5dd95 100644
--- a/apps/web-ele/src/views/system/loginlog/index.vue
+++ b/apps/web-ele/src/views/system/loginlog/index.vue
@@ -3,11 +3,11 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemLoginLogApi } from '#/api/system/login-log';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
 import { downloadFileFromBlobPart } from '@vben/utils';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { exportLoginLog, getLoginLogPage } from '#/api/system/login-log';
+import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import Detail from './modules/detail.vue';
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 7d9ef654..17b0a2f6 100644
--- a/apps/web-ele/src/views/system/loginlog/modules/detail.vue
+++ b/apps/web-ele/src/views/system/loginlog/modules/detail.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { SystemLoginLogApi } from '#/api/system/login-log';
 
 import { ref } from 'vue';
@@ -16,9 +16,9 @@ const [Descriptions] = useDescription({
     border: true,
     column: 1,
     direction: 'horizontal',
+    labelWidth: 110,
     title: '',
     extra: '',
-    labelWidth: 110,
   },
   schema: useDetailSchema(),
 });
diff --git a/apps/web-ele/src/views/system/mail/account/index.vue b/apps/web-ele/src/views/system/mail/account/index.vue
index 4a3b43a1..6a15a08d 100644
--- a/apps/web-ele/src/views/system/mail/account/index.vue
+++ b/apps/web-ele/src/views/system/mail/account/index.vue
@@ -46,7 +46,7 @@ async function handleDelete(row: SystemMailAccountApi.MailAccount) {
     text: $t('ui.actionMessage.deleting', [row.mail]),
   });
   try {
-    await deleteMailAccount(row.id as number);
+    await deleteMailAccount(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.mail]));
     handleRefresh();
   } finally {
@@ -135,8 +135,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('ui.actionTitle.deleteBatch'),
               type: 'danger',
               icon: ACTION_ICON.DELETE,
-              disabled: isEmpty(checkedIds),
               auth: ['system:mail-account:delete'],
+              disabled: isEmpty(checkedIds),
               onClick: handleDeleteBatch,
             },
           ]"
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 16dc064a..c177f4ad 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
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { SystemMailLogApi } from '#/api/system/mail/log';
 
 import { ref } from 'vue';
@@ -16,9 +16,9 @@ const [Descriptions] = useDescription({
     border: true,
     column: 2,
     direction: 'horizontal',
+    labelWidth: 140,
     title: '',
     extra: '',
-    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 814cecb0..146c027d 100644
--- a/apps/web-ele/src/views/system/mail/template/data.ts
+++ b/apps/web-ele/src/views/system/mail/template/data.ts
@@ -119,28 +119,25 @@ export function useSendMailFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'toMails',
       label: '收件邮箱',
-      component: 'Textarea',
+      component: 'InputTag',
       componentProps: {
-        placeholder: '请输入收件邮箱，每行一个邮箱地址',
-        rows: 3,
+        placeholder: '请输入收件邮箱，按 Enter 添加',
       },
     },
     {
       fieldName: 'ccMails',
       label: '抄送邮箱',
-      component: 'Textarea',
+      component: 'InputTag',
       componentProps: {
-        placeholder: '请输入抄送邮箱，每行一个邮箱地址',
-        rows: 2,
+        placeholder: '请输入抄送邮箱，按 Enter 添加',
       },
     },
     {
       fieldName: 'bccMails',
       label: '密送邮箱',
-      component: 'Textarea',
+      component: 'InputTag',
       componentProps: {
-        placeholder: '请输入密送邮箱，每行一个邮箱地址',
-        rows: 2,
+        placeholder: '请输入密送邮箱，按 Enter 添加',
       },
     },
   ];
diff --git a/apps/web-ele/src/views/system/mail/template/index.vue b/apps/web-ele/src/views/system/mail/template/index.vue
index 9ee3b14c..6fc015f8 100644
--- a/apps/web-ele/src/views/system/mail/template/index.vue
+++ b/apps/web-ele/src/views/system/mail/template/index.vue
@@ -65,7 +65,7 @@ async function handleDelete(row: SystemMailTemplateApi.MailTemplate) {
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteMailTemplate(row.id as number);
+    await deleteMailTemplate(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
@@ -160,8 +160,8 @@ onMounted(async () => {
               label: $t('ui.actionTitle.deleteBatch'),
               type: 'danger',
               icon: ACTION_ICON.DELETE,
-              disabled: isEmpty(checkedIds),
               auth: ['system:mail-template:delete'],
+              disabled: isEmpty(checkedIds),
               onClick: handleDeleteBatch,
             },
           ]"
diff --git a/apps/web-ele/src/views/system/mail/template/modules/send-form.vue b/apps/web-ele/src/views/system/mail/template/modules/send-form.vue
index e3d43723..8f724ed6 100644
--- a/apps/web-ele/src/views/system/mail/template/modules/send-form.vue
+++ b/apps/web-ele/src/views/system/mail/template/modules/send-form.vue
@@ -42,17 +42,10 @@ const [Modal, modalApi] = useVbenModal({
         paramsObj[param] = values[`param_${param}`];
       });
     }
-    const parseEmails = (text: string): string[] => {
-      if (!text) return [];
-      return text
-        .split('\n')
-        .map((email) => email.trim())
-        .filter((email) => email.length > 0);
-    };
     const data: SystemMailTemplateApi.MailSendReqVO = {
-      toMails: parseEmails(values.toMails || ''),
-      ccMails: parseEmails(values.ccMails || ''),
-      bccMails: parseEmails(values.bccMails || ''),
+      toMails: values.toMails,
+      ccMails: values.ccMails,
+      bccMails: values.bccMails,
       templateCode: formData.value?.code || '',
       templateParams: paramsObj,
     };
@@ -64,8 +57,6 @@ const [Modal, modalApi] = useVbenModal({
       await modalApi.close();
       emit('success');
       ElMessage.success('邮件发送成功');
-    } catch (error) {
-      console.error('发送邮件失败', error);
     } finally {
       modalApi.unlock();
     }
diff --git a/apps/web-ele/src/views/system/menu/data.ts b/apps/web-ele/src/views/system/menu/data.ts
index fd84b919..cf865826 100644
--- a/apps/web-ele/src/views/system/menu/data.ts
+++ b/apps/web-ele/src/views/system/menu/data.ts
@@ -59,7 +59,6 @@ export function useFormSchema(): VbenFormSchema[] {
         },
         showSearch: true,
         treeDefaultExpandedKeys: [0],
-        allowClear: true,
       },
       rules: 'selectRequired',
       renderComponentContent() {
@@ -168,7 +167,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'AutoComplete',
       componentProps: {
         clearable: true,
-        allowClear: true,
         filterOption(input: string, option: { value: string }) {
           return option.value.toLowerCase().includes(input.toLowerCase());
         },
diff --git a/apps/web-ele/src/views/system/menu/index.vue b/apps/web-ele/src/views/system/menu/index.vue
index a5c116d8..783bc74d 100644
--- a/apps/web-ele/src/views/system/menu/index.vue
+++ b/apps/web-ele/src/views/system/menu/index.vue
@@ -29,7 +29,7 @@ function handleRefresh() {
 
 /** 创建菜单 */
 function handleCreate() {
-  formModalApi.setData({}).open();
+  formModalApi.setData(null).open();
 }
 
 /** 添加下级菜单 */
@@ -48,7 +48,7 @@ async function handleDelete(row: SystemMenuApi.Menu) {
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteMenu(row.id as number);
+    await deleteMenu(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-ele/src/views/system/notice/index.vue b/apps/web-ele/src/views/system/notice/index.vue
index ffae8267..1809a1a1 100644
--- a/apps/web-ele/src/views/system/notice/index.vue
+++ b/apps/web-ele/src/views/system/notice/index.vue
@@ -47,7 +47,7 @@ async function handleDelete(row: SystemNoticeApi.Notice) {
     text: $t('ui.actionMessage.deleting', [row.title]),
   });
   try {
-    await deleteNotice(row.id as number);
+    await deleteNotice(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.title]));
     handleRefresh();
   } finally {
@@ -86,7 +86,7 @@ async function handlePush(row: SystemNoticeApi.Notice) {
     text: '正在推送中...',
   });
   try {
-    await pushNotice(row.id as number);
+    await pushNotice(row.id!);
     ElMessage.success($t('ui.actionMessage.operationSuccess'));
   } finally {
     loadingInstance.close();
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 229ea151..dda2cdff 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
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 
 import { ref } from 'vue';
@@ -16,9 +16,9 @@ const [Descriptions] = useDescription({
     border: true,
     column: 1,
     direction: 'horizontal',
+    labelWidth: 140,
     title: '',
     extra: '',
-    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 acc8394f..f57aa929 100644
--- a/apps/web-ele/src/views/system/notify/my/data.ts
+++ b/apps/web-ele/src/views/system/notify/my/data.ts
@@ -30,8 +30,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '发送时间',
       component: 'RangePicker',
       componentProps: {
-        clearable: true,
         ...getRangePickerDefaultProps(),
+        clearable: true,
       },
     },
   ];
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 229ea151..dda2cdff 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
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 
 import { ref } from 'vue';
@@ -16,9 +16,9 @@ const [Descriptions] = useDescription({
     border: true,
     column: 1,
     direction: 'horizontal',
+    labelWidth: 140,
     title: '',
     extra: '',
-    labelWidth: 140,
   },
   schema: useDetailSchema(),
 });
diff --git a/apps/web-ele/src/views/system/notify/template/index.vue b/apps/web-ele/src/views/system/notify/template/index.vue
index 4d916824..33c2bf83 100644
--- a/apps/web-ele/src/views/system/notify/template/index.vue
+++ b/apps/web-ele/src/views/system/notify/template/index.vue
@@ -64,7 +64,7 @@ async function handleDelete(row: SystemNotifyTemplateApi.NotifyTemplate) {
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteNotifyTemplate(row.id as number);
+    await deleteNotifyTemplate(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-ele/src/views/system/oauth2/client/index.vue b/apps/web-ele/src/views/system/oauth2/client/index.vue
index 3dc80eb8..2ee40479 100644
--- a/apps/web-ele/src/views/system/oauth2/client/index.vue
+++ b/apps/web-ele/src/views/system/oauth2/client/index.vue
@@ -46,7 +46,7 @@ async function handleDelete(row: SystemOAuth2ClientApi.OAuth2Client) {
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteOAuth2Client(row.id as number);
+    await deleteOAuth2Client(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
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 21a088ac..890674b3 100644
--- a/apps/web-ele/src/views/system/operatelog/modules/detail.vue
+++ b/apps/web-ele/src/views/system/operatelog/modules/detail.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { SystemOperateLogApi } from '#/api/system/operate-log';
 
 import { ref } from 'vue';
@@ -16,9 +16,9 @@ const [Descriptions] = useDescription({
     border: true,
     column: 1,
     direction: 'horizontal',
+    labelWidth: 110,
     title: '',
     extra: '',
-    labelWidth: 110,
   },
   schema: useDetailSchema(),
 });
diff --git a/apps/web-ele/src/views/system/post/index.vue b/apps/web-ele/src/views/system/post/index.vue
index 5a6ecf5c..1d0c826b 100644
--- a/apps/web-ele/src/views/system/post/index.vue
+++ b/apps/web-ele/src/views/system/post/index.vue
@@ -53,7 +53,7 @@ async function handleDelete(row: SystemPostApi.Post) {
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deletePost(row.id as number);
+    await deletePost(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-ele/src/views/system/role/index.vue b/apps/web-ele/src/views/system/role/index.vue
index a30a6d71..de79b993 100644
--- a/apps/web-ele/src/views/system/role/index.vue
+++ b/apps/web-ele/src/views/system/role/index.vue
@@ -66,7 +66,7 @@ async function handleDelete(row: SystemRoleApi.Role) {
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteRole(row.id as number);
+    await deleteRole(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-ele/src/views/system/sms/channel/index.vue b/apps/web-ele/src/views/system/sms/channel/index.vue
index b8badff9..b4400a21 100644
--- a/apps/web-ele/src/views/system/sms/channel/index.vue
+++ b/apps/web-ele/src/views/system/sms/channel/index.vue
@@ -46,7 +46,7 @@ async function handleDelete(row: SystemSmsChannelApi.SmsChannel) {
     text: $t('ui.actionMessage.deleting', [row.signature]),
   });
   try {
-    await deleteSmsChannel(row.id as number);
+    await deleteSmsChannel(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.signature]));
     handleRefresh();
   } finally {
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 50d8d00c..7fbf59ae 100644
--- a/apps/web-ele/src/views/system/sms/log/data.ts
+++ b/apps/web-ele/src/views/system/sms/log/data.ts
@@ -164,6 +164,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
         props: { type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE },
       },
     },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
     {
       title: '操作',
       width: 80,
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 df7d35fe..622efdb8 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
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { SystemSmsLogApi } from '#/api/system/sms/log';
 
 import { ref } from 'vue';
@@ -16,9 +16,9 @@ const [Descriptions] = useDescription({
     border: true,
     column: 2,
     direction: 'horizontal',
+    labelWidth: 140,
     title: '',
     extra: '',
-    labelWidth: 140,
   },
   schema: useDetailSchema(),
 });
diff --git a/apps/web-ele/src/views/system/sms/template/index.vue b/apps/web-ele/src/views/system/sms/template/index.vue
index 343c1f87..0d340c24 100644
--- a/apps/web-ele/src/views/system/sms/template/index.vue
+++ b/apps/web-ele/src/views/system/sms/template/index.vue
@@ -64,7 +64,7 @@ async function handleDelete(row: SystemSmsTemplateApi.SmsTemplate) {
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteSmsTemplate(row.id as number);
+    await deleteSmsTemplate(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
@@ -75,10 +75,17 @@ async function handleDelete(row: SystemSmsTemplateApi.SmsTemplate) {
 /** 批量删除短信模板 */
 async function handleDeleteBatch() {
   await confirm($t('ui.actionMessage.deleteBatchConfirm'));
-  await deleteSmsTemplateList(checkedIds.value);
-  checkedIds.value = [];
-  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-  handleRefresh();
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deletingBatch'),
+  });
+  try {
+    await deleteSmsTemplateList(checkedIds.value);
+    checkedIds.value = [];
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 const checkedIds = ref<number[]>([]);
diff --git a/apps/web-ele/src/views/system/social/client/index.vue b/apps/web-ele/src/views/system/social/client/index.vue
index f03f3f80..9c7b733b 100644
--- a/apps/web-ele/src/views/system/social/client/index.vue
+++ b/apps/web-ele/src/views/system/social/client/index.vue
@@ -42,22 +42,22 @@ function handleEdit(row: SystemSocialClientApi.SocialClient) {
 
 /** 删除社交客户端 */
 async function handleDelete(row: SystemSocialClientApi.SocialClient) {
-  const hideLoading = ElLoading.service({
+  const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteSocialClient(row.id as number);
+    await deleteSocialClient(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
-    hideLoading.close();
+    loadingInstance.close();
   }
 }
 
 /** 批量删除社交客户端 */
 async function handleDeleteBatch() {
   await confirm($t('ui.actionMessage.deleteBatchConfirm'));
-  const hideLoading = ElLoading.service({
+  const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deletingBatch'),
   });
   try {
@@ -66,7 +66,7 @@ async function handleDeleteBatch() {
     ElMessage.success($t('ui.actionMessage.deleteSuccess'));
     handleRefresh();
   } finally {
-    hideLoading.close();
+    loadingInstance.close();
   }
 }
 
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 326ae6f5..b3db14ba 100644
--- a/apps/web-ele/src/views/system/social/user/data.ts
+++ b/apps/web-ele/src/views/system/social/user/data.ts
@@ -8,9 +8,8 @@ import { h } from 'vue';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
-import { getRangePickerDefaultProps } from '#/utils';
-
 import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -126,6 +125,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'avatar',
       label: '用户头像',
+      // TODO @芋艿：使用 antd 的 Image 组件
       content: (data: SystemSocialUserApi.SocialUser) => {
         if (data?.avatar) {
           return h('img', {
diff --git a/apps/web-ele/src/views/system/tenant/index.vue b/apps/web-ele/src/views/system/tenant/index.vue
index 330d5c02..3c439b72 100644
--- a/apps/web-ele/src/views/system/tenant/index.vue
+++ b/apps/web-ele/src/views/system/tenant/index.vue
@@ -65,7 +65,7 @@ async function handleDelete(row: SystemTenantApi.Tenant) {
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteTenant(row.id as number);
+    await deleteTenant(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-ele/src/views/system/tenantPackage/index.vue b/apps/web-ele/src/views/system/tenantPackage/index.vue
index 09da641d..4a76c12d 100644
--- a/apps/web-ele/src/views/system/tenantPackage/index.vue
+++ b/apps/web-ele/src/views/system/tenantPackage/index.vue
@@ -46,7 +46,7 @@ async function handleDelete(row: SystemTenantPackageApi.TenantPackage) {
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteTenantPackage(row.id as number);
+    await deleteTenantPackage(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-ele/src/views/system/user/index.vue b/apps/web-ele/src/views/system/user/index.vue
index bac20ec5..8eedb702 100644
--- a/apps/web-ele/src/views/system/user/index.vue
+++ b/apps/web-ele/src/views/system/user/index.vue
@@ -88,7 +88,7 @@ async function handleDelete(row: SystemUserApi.User) {
     text: $t('ui.actionMessage.deleting', [row.username]),
   });
   try {
-    await deleteUser(row.id as number);
+    await deleteUser(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.username]));
     handleRefresh();
   } finally {
@@ -142,7 +142,7 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新用户状态
-        const res = await updateUserStatus(row.id as number, newStatus);
+        const res = await updateUserStatus(row.id!, newStatus);
         if (res) {
           // 提示并返回成功
           ElMessage.success($t('ui.actionMessage.operationSuccess'));
diff --git a/apps/web-ele/src/views/system/user/modules/dept-tree.vue b/apps/web-ele/src/views/system/user/modules/dept-tree.vue
index 190c4bef..06035c62 100644
--- a/apps/web-ele/src/views/system/user/modules/dept-tree.vue
+++ b/apps/web-ele/src/views/system/user/modules/dept-tree.vue
@@ -27,7 +27,7 @@ function handleSearch(value: string) {
     : deptList.value;
   deptTree.value = handleTree(filteredList);
   // 展开所有节点
-  expandedKeys.value = deptTree.value.map((node) => node.id as number);
+  expandedKeys.value = deptTree.value.map((node) => node.id!);
 }
 
 /** 选中部门 */
diff --git a/apps/web-ele/src/views/system/user/modules/form.vue b/apps/web-ele/src/views/system/user/modules/form.vue
index 59961807..e20eb82b 100644
--- a/apps/web-ele/src/views/system/user/modules/form.vue
+++ b/apps/web-ele/src/views/system/user/modules/form.vue
@@ -76,7 +76,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle">
+  <Modal :title="getTitle" class="w-1/3">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-ele/src/views/system/user/modules/import-form.vue b/apps/web-ele/src/views/system/user/modules/import-form.vue
index c1d07565..d9b9577c 100644
--- a/apps/web-ele/src/views/system/user/modules/import-form.vue
+++ b/apps/web-ele/src/views/system/user/modules/import-form.vue
@@ -59,7 +59,7 @@ async function handleDownload() {
 </script>
 
 <template>
-  <Modal title="导入用户">
+  <Modal title="导入用户" class="w-1/3">
     <Form class="mx-4">
       <template #file>
         <div class="w-full">
diff --git a/docs/src/components/common-ui/vben-form.md b/docs/src/components/common-ui/vben-form.md
index 0ed02384..48772bfa 100644
--- a/docs/src/components/common-ui/vben-form.md
+++ b/docs/src/components/common-ui/vben-form.md
@@ -473,6 +473,8 @@ export interface FormSchema<
   fieldName: string;
   /** 帮助信息 */
   help?: CustomRenderType;
+  /** 是否隐藏表单项 */
+  hide?: boolean;
   /** 表单的标签（如果是一个string，会用于默认必选规则的消息提示） */
   label?: CustomRenderType;
   /** 自定义组件内部渲染  */
diff --git a/packages/@core/ui-kit/form-ui/src/form-api.ts b/packages/@core/ui-kit/form-ui/src/form-api.ts
index ef970e0e..1c4a7600 100644
--- a/packages/@core/ui-kit/form-ui/src/form-api.ts
+++ b/packages/@core/ui-kit/form-ui/src/form-api.ts
@@ -360,7 +360,6 @@ export class FormApi {
       return true;
     });
     const filteredFields = fieldMergeFn(fields, form.values);
-    this.handleStringToArrayFields(filteredFields);
     form.setValues(filteredFields, shouldValidate);
   }
 
@@ -370,7 +369,6 @@ export class FormApi {
     const form = await this.getForm();
     await form.submitForm();
     const rawValues = toRaw(await this.getValues());
-    this.handleArrayToStringFields(rawValues);
     await this.state?.handleSubmit?.(rawValues);
 
     return rawValues;
@@ -470,16 +468,31 @@ export class FormApi {
     return this.form;
   }
 
-  private handleArrayToStringFields = (originValues: Record<string, any>) => {
+  private handleMultiFields = (originValues: Record<string, any>) => {
     const arrayToStringFields = this.state?.arrayToStringFields;
     if (!arrayToStringFields || !Array.isArray(arrayToStringFields)) {
       return;
     }
 
     const processFields = (fields: string[], separator: string = ',') => {
-      this.processFields(fields, separator, originValues, (value, sep) =>
-        Array.isArray(value) ? value.join(sep) : value,
-      );
+      this.processFields(fields, separator, originValues, (value, sep) => {
+        if (Array.isArray(value)) {
+          return value.join(sep);
+        } else if (typeof value === 'string') {
+          // 处理空字符串的情况
+          if (value === '') {
+            return [];
+          }
+          // 处理复杂分隔符的情况
+          const escapedSeparator = sep.replaceAll(
+            /[.*+?^${}()|[\]\\]/g,
+            String.raw`\$&`,
+          );
+          return value.split(new RegExp(escapedSeparator));
+        } else {
+          return value;
+        }
+      });
     };
 
     // 处理简单数组格式 ['field1', 'field2', ';'] 或 ['field1', 'field2']
@@ -515,8 +528,7 @@ export class FormApi {
     const values = { ...originValues };
     const fieldMappingTime = this.state?.fieldMappingTime;
 
-    this.handleStringToArrayFields(values);
-
+    this.handleMultiFields(values);
     if (!fieldMappingTime || !Array.isArray(fieldMappingTime)) {
       return values;
     }
@@ -562,65 +574,6 @@ export class FormApi {
     return values;
   };
 
-  private handleStringToArrayFields = (originValues: Record<string, any>) => {
-    const arrayToStringFields = this.state?.arrayToStringFields;
-    if (!arrayToStringFields || !Array.isArray(arrayToStringFields)) {
-      return;
-    }
-
-    const processFields = (fields: string[], separator: string = ',') => {
-      this.processFields(fields, separator, originValues, (value, sep) => {
-        if (typeof value !== 'string') {
-          return value;
-        }
-        // 处理空字符串的情况
-        if (value === '') {
-          return [];
-        }
-        // 处理复杂分隔符的情况
-        const escapedSeparator = sep.replaceAll(
-          /[.*+?^${}()|[\]\\]/g,
-          String.raw`\$&`,
-        );
-        return value.split(new RegExp(escapedSeparator));
-      });
-    };
-
-    // 处理简单数组格式 ['field1', 'field2', ';'] 或 ['field1', 'field2']
-    if (arrayToStringFields.every((item) => typeof item === 'string')) {
-      const lastItem =
-        arrayToStringFields[arrayToStringFields.length - 1] || '';
-      const fields =
-        lastItem.length === 1
-          ? arrayToStringFields.slice(0, -1)
-          : arrayToStringFields;
-      const separator = lastItem.length === 1 ? lastItem : ',';
-      processFields(fields, separator);
-      return;
-    }
-
-    // 处理嵌套数组格式 [['field1'], ';']
-    arrayToStringFields.forEach((fieldConfig) => {
-      if (Array.isArray(fieldConfig)) {
-        const [fields, separator = ','] = fieldConfig;
-        if (Array.isArray(fields)) {
-          processFields(fields, separator);
-        } else if (typeof originValues[fields] === 'string') {
-          const value = originValues[fields];
-          if (value === '') {
-            originValues[fields] = [];
-          } else {
-            const escapedSeparator = separator.replaceAll(
-              /[.*+?^${}()|[\]\\]/g,
-              String.raw`\$&`,
-            );
-            originValues[fields] = value.split(new RegExp(escapedSeparator));
-          }
-        }
-      }
-    });
-  };
-
   private processFields = (
     fields: string[],
     separator: string,
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
index 5c0374cb..b308b251 100644
--- a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
@@ -41,6 +41,7 @@ const {
   emptyStateValue,
   fieldName,
   formFieldProps,
+  hide,
   label,
   labelClass,
   labelWidth,
@@ -95,7 +96,7 @@ const currentRules = computed(() => {
 });
 
 const visible = computed(() => {
-  return isIf.value && isShow.value;
+  return !hide && isIf.value && isShow.value;
 });
 
 const shouldRequired = computed(() => {
@@ -285,7 +286,7 @@ onUnmounted(() => {
 
 <template>
   <FormField
-    v-if="isIf"
+    v-if="!hide && isIf"
     v-bind="fieldProps"
     v-slot="slotProps"
     :name="fieldName"
diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts
index 1a1a48c2..fd80c9e7 100644
--- a/packages/@core/ui-kit/form-ui/src/types.ts
+++ b/packages/@core/ui-kit/form-ui/src/types.ts
@@ -257,6 +257,8 @@ export interface FormSchema<
   fieldName: string;
   /** 帮助信息 */
   help?: CustomRenderType;
+  /** 是否隐藏表单项 */
+  hide?: boolean;
   /** 表单项 */
   label?: CustomRenderType;
   // 自定义组件内部渲染
@@ -279,7 +281,8 @@ export interface FormRenderProps<
    */
   arrayToStringFields?: ArrayToStringFields;
   /**
-   * 是否展开，在showCollapseButton=true下生效
+   * 是否折叠，在showCollapseButton=true下生效
+   * true:折叠 false:展开
    */
   collapsed?: boolean;
   /**
diff --git a/packages/effects/common-ui/src/components/content-wrap/content-wrap.vue b/packages/effects/common-ui/src/components/content-wrap/content-wrap.vue
new file mode 100644
index 00000000..4bc153a3
--- /dev/null
+++ b/packages/effects/common-ui/src/components/content-wrap/content-wrap.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import type { StyleValue } from 'vue';
+
+import type { ContentWrapProps } from './types';
+
+import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue';
+
+import { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT } from '@vben-core/shared/constants';
+import { cn } from '@vben-core/shared/utils';
+
+defineOptions({
+  name: 'ContentWrap',
+});
+
+const { autoContentHeight = false, heightOffset = 0 } =
+  defineProps<ContentWrapProps>();
+
+const headerHeight = ref(0);
+const footerHeight = ref(0);
+const shouldAutoHeight = ref(false);
+
+const headerRef = useTemplateRef<HTMLDivElement>('headerRef');
+const footerRef = useTemplateRef<HTMLDivElement>('footerRef');
+
+const contentStyle = computed<StyleValue>(() => {
+  if (autoContentHeight) {
+    return {
+      height: `calc(var(${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT}) - ${headerHeight.value}px - ${footerHeight.value}px - ${typeof heightOffset === 'number' ? `${heightOffset}px` : heightOffset})`,
+      overflowY: shouldAutoHeight.value ? 'auto' : 'unset',
+    };
+  }
+  return {};
+});
+
+async function calcContentHeight() {
+  if (!autoContentHeight) {
+    return;
+  }
+  await nextTick();
+  headerHeight.value = headerRef.value?.offsetHeight || 0;
+  footerHeight.value = footerRef.value?.offsetHeight || 0;
+  setTimeout(() => {
+    shouldAutoHeight.value = true;
+  }, 30);
+}
+
+onMounted(() => {
+  calcContentHeight();
+});
+</script>
+
+<template>
+  <div
+    class="bg-card text-card-foreground border-border relative flex min-h-full flex-col rounded-xl border"
+  >
+    <div
+      v-if="
+        description ||
+        $slots.description ||
+        title ||
+        $slots.title ||
+        $slots.extra
+      "
+      ref="headerRef"
+      :class="
+        cn(
+          'border-border relative flex items-end border-b px-6 py-4',
+          headerClass,
+        )
+      "
+    >
+      <div class="flex-auto">
+        <slot name="title">
+          <div v-if="title" class="mb-2 flex text-lg font-semibold">
+            {{ title }}
+          </div>
+        </slot>
+
+        <slot name="description">
+          <p v-if="description" class="text-muted-foreground">
+            {{ description }}
+          </p>
+        </slot>
+      </div>
+
+      <div v-if="$slots.extra">
+        <slot name="extra"></slot>
+      </div>
+    </div>
+
+    <div :class="cn('h-full p-4', contentClass)" :style="contentStyle">
+      <slot></slot>
+    </div>
+    <div
+      v-if="$slots.footer"
+      ref="footerRef"
+      :class="cn('align-center flex px-6 py-4', footerClass)"
+    >
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/components/content-wrap/index.ts b/packages/effects/common-ui/src/components/content-wrap/index.ts
similarity index 70%
rename from apps/web-ele/src/components/content-wrap/index.ts
rename to packages/effects/common-ui/src/components/content-wrap/index.ts
index d4f95fdd..5b0ede5d 100644
--- a/apps/web-ele/src/components/content-wrap/index.ts
+++ b/packages/effects/common-ui/src/components/content-wrap/index.ts
@@ -1 +1,2 @@
 export { default as ContentWrap } from './content-wrap.vue';
+export * from './types';
diff --git a/packages/effects/common-ui/src/components/content-wrap/types.ts b/packages/effects/common-ui/src/components/content-wrap/types.ts
new file mode 100644
index 00000000..803c6874
--- /dev/null
+++ b/packages/effects/common-ui/src/components/content-wrap/types.ts
@@ -0,0 +1,18 @@
+export interface ContentWrapProps {
+  title?: string;
+  description?: string;
+  message?: string;
+  contentClass?: string;
+  /**
+   * 根据content可见高度自适应
+   */
+  autoContentHeight?: boolean;
+  headerClass?: string;
+  footerClass?: string;
+  /**
+   * Custom height offset value (in pixels) to adjust content area sizing
+   * when used with autoContentHeight
+   * @default 0
+   */
+  heightOffset?: number;
+}
diff --git a/packages/effects/common-ui/src/components/iframe/iframe.vue b/packages/effects/common-ui/src/components/iframe/iframe.vue
index de70d89a..e7760905 100644
--- a/packages/effects/common-ui/src/components/iframe/iframe.vue
+++ b/packages/effects/common-ui/src/components/iframe/iframe.vue
@@ -6,7 +6,7 @@ interface IFrameProps {
   src: string;
 }
 
-const props = defineProps<IFrameProps>();
+defineProps<IFrameProps>();
 
 const loading = ref(true);
 const height = ref('');
@@ -22,15 +22,14 @@ onMounted(() => {
     init();
   }, 300);
 });
-// TODO @芋艿：优化：未来使用 vben 自带的内链实现
 </script>
 
 <template>
   <div v-loading="loading" :style="`height:${height}`">
     <iframe
       ref="frameRef"
-      :src="props.src"
-      style="width: 100%; height: 100%"
+      :src="src"
+      class="h-full w-full"
       frameborder="no"
       scrolling="auto"
     ></iframe>
diff --git a/packages/effects/common-ui/src/components/index.ts b/packages/effects/common-ui/src/components/index.ts
index 37024caa..bd12f89f 100644
--- a/packages/effects/common-ui/src/components/index.ts
+++ b/packages/effects/common-ui/src/components/index.ts
@@ -1,6 +1,7 @@
 export * from './api-component';
 export * from './captcha';
 export * from './col-page';
+export * from './content-wrap';
 export * from './count-to';
 export * from './doc-alert';
 export * from './ellipsis-text';
diff --git a/packages/icons/src/iconify/index.ts b/packages/icons/src/iconify/index.ts
index 54857f9c..784a746b 100644
--- a/packages/icons/src/iconify/index.ts
+++ b/packages/icons/src/iconify/index.ts
@@ -61,15 +61,3 @@ export const MenuOutlined = createIconifyIcon('ant-design:menu-outlined');
 export const PlusOutlined = createIconifyIcon('ant-design:plus-outlined');
 
 export const SelectOutlined = createIconifyIcon('ant-design:select-outlined');
-
-export const CheckCircleFilled = createIconifyIcon(
-  'ant-design:check-circle-filled',
-);
-
-export const ExclamationCircleFilled = createIconifyIcon(
-  'ant-design:exclamation-circle-filled',
-);
-
-export const QuestionCircleFilled = createIconifyIcon(
-  'ant-design:question-circle-filled',
-);