diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index f9a0862ed..fcc647708 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-antd",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/web-antd/src/api/crm/customer/limitConfig/index.ts b/apps/web-antd/src/api/crm/customer/limitConfig/index.ts
index 773255762..f99a35f31 100644
--- a/apps/web-antd/src/api/crm/customer/limitConfig/index.ts
+++ b/apps/web-antd/src/api/crm/customer/limitConfig/index.ts
@@ -12,16 +12,14 @@ export namespace CrmCustomerLimitConfigApi {
     maxCount?: number;
     dealCountEnabled?: boolean;
   }
+}
 
-  /**
-   * 客户限制配置类型
-   */
-  export enum LimitConfType {
-    /** 锁定客户数限制 */
-    CUSTOMER_LOCK_LIMIT = 2,
-    /** 拥有客户数限制 */
-    CUSTOMER_QUANTITY_LIMIT = 1,
-  }
+/** 客户限制配置类型 */
+export enum LimitConfType {
+  /** 锁定客户数限制 */
+  CUSTOMER_LOCK_LIMIT = 2,
+  /** 拥有客户数限制 */
+  CUSTOMER_QUANTITY_LIMIT = 1,
 }
 
 /** 查询客户限制配置列表 */
diff --git a/apps/web-antd/src/api/crm/operateLog/index.ts b/apps/web-antd/src/api/crm/operateLog/index.ts
index 2c5f8fd27..842dd0b19 100644
--- a/apps/web-antd/src/api/crm/operateLog/index.ts
+++ b/apps/web-antd/src/api/crm/operateLog/index.ts
@@ -1,10 +1,12 @@
-import type { PageParam, PageResult } from '@vben/request';
+import type { PageResult } from '@vben/request';
+
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
 
 import { requestClient } from '#/api/request';
 
 export namespace CrmOperateLogApi {
   /** 操作日志查询参数 */
-  export interface OperateLogQuery extends PageParam {
+  export interface OperateLogQuery {
     bizType: number;
     bizId: number;
   }
@@ -24,7 +26,7 @@ export namespace CrmOperateLogApi {
 
 /** 获得操作日志 */
 export function getOperateLogPage(params: CrmOperateLogApi.OperateLogQuery) {
-  return requestClient.get<PageResult<CrmOperateLogApi.OperateLog>>(
+  return requestClient.get<PageResult<SystemOperateLogApi.OperateLog>>(
     '/crm/operate-log/page',
     { params },
   );
diff --git a/apps/web-antd/src/api/crm/permission/index.ts b/apps/web-antd/src/api/crm/permission/index.ts
index a0362e05c..7322ee1e3 100644
--- a/apps/web-antd/src/api/crm/permission/index.ts
+++ b/apps/web-antd/src/api/crm/permission/index.ts
@@ -1,12 +1,11 @@
-import type { PageParam, PageResult } from '@vben/request';
-
 import { requestClient } from '#/api/request';
 
 export namespace CrmPermissionApi {
   /** 数据权限信息 */
   export interface Permission {
     id?: number; // 数据权限编号
-    userId: number; // 用户编号
+    ids?: number[];
+    userId?: number; // 用户编号
     bizType: number; // Crm 类型
     bizId: number; // Crm 类型数据编号
     level: number; // 权限级别
@@ -15,7 +14,6 @@ export namespace CrmPermissionApi {
     nickname?: string; // 用户昵称
     postNames?: string[]; // 岗位名称数组
     createTime?: Date;
-    ids?: number[];
   }
 
   /** 数据权限转移请求 */
@@ -26,33 +24,38 @@ export namespace CrmPermissionApi {
     toBizTypes?: number[]; // 转移客户时，需要额外有【联系人】【商机】【合同】的 checkbox 选择
   }
 
-  /**
-   * CRM 业务类型枚举
-   */
-  export enum BizType {
-    CRM_BUSINESS = 4, // 商机
-    CRM_CLUE = 1, // 线索
-    CRM_CONTACT = 3, // 联系人
-    CRM_CONTRACT = 5, // 合同
-    CRM_CUSTOMER = 2, // 客户
-    CRM_PRODUCT = 6, // 产品
-    CRM_RECEIVABLE = 7, // 回款
-    CRM_RECEIVABLE_PLAN = 8, // 回款计划
-  }
-
-  /**
-   * CRM 数据权限级别枚举
-   */
-  export enum PermissionLevel {
-    OWNER = 1, // 负责人
-    READ = 2, // 只读
-    WRITE = 3, // 读写
+  export interface PermissionListReq {
+    bizId: number; // 模块数据编号
+    bizType: number; // 模块类型
   }
 }
 
+/**
+ * CRM 业务类型枚举
+ */
+export enum BizTypeEnum {
+  CRM_BUSINESS = 4, // 商机
+  CRM_CLUE = 1, // 线索
+  CRM_CONTACT = 3, // 联系人
+  CRM_CONTRACT = 5, // 合同
+  CRM_CUSTOMER = 2, // 客户
+  CRM_PRODUCT = 6, // 产品
+  CRM_RECEIVABLE = 7, // 回款
+  CRM_RECEIVABLE_PLAN = 8, // 回款计划
+}
+
+/**
+ * CRM 数据权限级别枚举
+ */
+export enum PermissionLevelEnum {
+  OWNER = 1, // 负责人
+  READ = 2, // 只读
+  WRITE = 3, // 读写
+}
+
 /** 获得数据权限列表（查询团队成员列表） */
-export function getPermissionList(params: PageParam) {
-  return requestClient.get<PageResult<CrmPermissionApi.Permission>>(
+export function getPermissionList(params: CrmPermissionApi.PermissionListReq) {
+  return requestClient.get<CrmPermissionApi.Permission[]>(
     '/crm/permission/list',
     { params },
   );
diff --git a/apps/web-antd/src/api/crm/product/category/index.ts b/apps/web-antd/src/api/crm/product/category/index.ts
index 656de9835..37ed24f58 100644
--- a/apps/web-antd/src/api/crm/product/category/index.ts
+++ b/apps/web-antd/src/api/crm/product/category/index.ts
@@ -1,5 +1,3 @@
-import type { PageParam } from '@vben/request';
-
 import { requestClient } from '#/api/request';
 
 export namespace CrmProductCategoryApi {
@@ -38,7 +36,7 @@ export function deleteProductCategory(id: number) {
 }
 
 /** 产品分类列表 */
-export function getProductCategoryList(params?: PageParam) {
+export function getProductCategoryList(params?: any) {
   return requestClient.get<CrmProductCategoryApi.ProductCategory[]>(
     '/crm/product-category/list',
     { params },
diff --git a/apps/web-antd/src/api/mp/account/index.ts b/apps/web-antd/src/api/mp/account/index.ts
new file mode 100644
index 000000000..60833058c
--- /dev/null
+++ b/apps/web-antd/src/api/mp/account/index.ts
@@ -0,0 +1,71 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MpAccountApi {
+  /** 公众号账号信息 */
+  export interface Account {
+    id?: number;
+    name: string;
+    account: string;
+    appId: string;
+    appSecret: string;
+    token: string;
+    aesKey?: string;
+    qrCodeUrl?: string;
+    remark?: string;
+    createTime?: Date;
+  }
+
+  export interface AccountSimple {
+    id: number;
+    name: string;
+  }
+}
+
+/** 查询公众号账号列表 */
+export function getAccountPage(params: PageParam) {
+  return requestClient.get<PageResult<MpAccountApi.Account>>(
+    '/mp/account/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询公众号账号详情 */
+export function getAccount(id: number) {
+  return requestClient.get<MpAccountApi.Account>(`/mp/account/get?id=${id}`);
+}
+
+/** 查询公众号账号列表 */
+export function getSimpleAccountList() {
+  return requestClient.get<MpAccountApi.AccountSimple[]>(
+    '/mp/account/list-all-simple',
+  );
+}
+
+/** 新增公众号账号 */
+export function createAccount(data: MpAccountApi.Account) {
+  return requestClient.post('/mp/account/create', data);
+}
+
+/** 修改公众号账号 */
+export function updateAccount(data: MpAccountApi.Account) {
+  return requestClient.put('/mp/account/update', data);
+}
+
+/** 删除公众号账号 */
+export function deleteAccount(id: number) {
+  return requestClient.delete(`/mp/account/delete?id=${id}`);
+}
+
+/** 生成公众号账号二维码 */
+export function generateAccountQrCode(id: number) {
+  return requestClient.post(`/mp/account/generate-qr-code?id=${id}`);
+}
+
+/** 清空公众号账号 API 配额 */
+export function clearAccountQuota(id: number) {
+  return requestClient.post(`/mp/account/clear-quota?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/mp/autoReply/index.ts b/apps/web-antd/src/api/mp/autoReply/index.ts
new file mode 100644
index 000000000..d72e5a0cb
--- /dev/null
+++ b/apps/web-antd/src/api/mp/autoReply/index.ts
@@ -0,0 +1,49 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MpAutoReplyApi {
+  /** 自动回复信息 */
+  export interface AutoReply {
+    id?: number;
+    accountId: number;
+    type: number;
+    keyword: string;
+    content: string;
+    status: number;
+    remark?: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询自动回复列表 */
+export function getAutoReplyPage(params: PageParam) {
+  return requestClient.get<PageResult<MpAutoReplyApi.AutoReply>>(
+    '/mp/auto-reply/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询自动回复详情 */
+export function getAutoReply(id: number) {
+  return requestClient.get<MpAutoReplyApi.AutoReply>(
+    `/mp/auto-reply/get?id=${id}`,
+  );
+}
+
+/** 新增自动回复 */
+export function createAutoReply(data: MpAutoReplyApi.AutoReply) {
+  return requestClient.post('/mp/auto-reply/create', data);
+}
+
+/** 修改自动回复 */
+export function updateAutoReply(data: MpAutoReplyApi.AutoReply) {
+  return requestClient.put('/mp/auto-reply/update', data);
+}
+
+/** 删除自动回复 */
+export function deleteAutoReply(id: number) {
+  return requestClient.delete(`/mp/auto-reply/delete?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/mp/draft/index.ts b/apps/web-antd/src/api/mp/draft/index.ts
new file mode 100644
index 000000000..435f13e0b
--- /dev/null
+++ b/apps/web-antd/src/api/mp/draft/index.ts
@@ -0,0 +1,59 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MpDraftApi {
+  /** 草稿文章信息 */
+  export interface Article {
+    title: string;
+    author: string;
+    digest: string;
+    content: string;
+    contentSourceUrl: string;
+    thumbMediaId: string;
+    showCoverPic: number;
+    needOpenComment: number;
+    onlyFansCanComment: number;
+  }
+
+  /** 草稿信息 */
+  export interface Draft {
+    id?: number;
+    accountId: number;
+    mediaId: string;
+    articles: Article[];
+    createTime?: Date;
+  }
+}
+
+/** 查询草稿列表 */
+export function getDraftPage(params: PageParam) {
+  return requestClient.get<PageResult<MpDraftApi.Draft>>('/mp/draft/page', {
+    params,
+  });
+}
+
+/** 创建草稿 */
+export function createDraft(accountId: number, articles: MpDraftApi.Article[]) {
+  return requestClient.post('/mp/draft/create', articles, {
+    params: { accountId },
+  });
+}
+
+/** 更新草稿 */
+export function updateDraft(
+  accountId: number,
+  mediaId: string,
+  articles: MpDraftApi.Article[],
+) {
+  return requestClient.put('/mp/draft/update', articles, {
+    params: { accountId, mediaId },
+  });
+}
+
+/** 删除草稿 */
+export function deleteDraft(accountId: number, mediaId: string) {
+  return requestClient.delete('/mp/draft/delete', {
+    params: { accountId, mediaId },
+  });
+}
diff --git a/apps/web-antd/src/api/mp/freePublish/index.ts b/apps/web-antd/src/api/mp/freePublish/index.ts
new file mode 100644
index 000000000..bc50efe96
--- /dev/null
+++ b/apps/web-antd/src/api/mp/freePublish/index.ts
@@ -0,0 +1,45 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MpFreePublishApi {
+  /** 自由发布文章信息 */
+  export interface FreePublish {
+    id?: number;
+    accountId: number;
+    mediaId: string;
+    articleId: string;
+    title: string;
+    author: string;
+    digest: string;
+    content: string;
+    thumbUrl: string;
+    status: number;
+    publishTime?: Date;
+    createTime?: Date;
+  }
+}
+
+/** 查询自由发布文章列表 */
+export function getFreePublishPage(params: PageParam) {
+  return requestClient.get<PageResult<MpFreePublishApi.FreePublish>>(
+    '/mp/free-publish/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 删除自由发布文章 */
+export function deleteFreePublish(accountId: number, articleId: string) {
+  return requestClient.delete('/mp/free-publish/delete', {
+    params: { accountId, articleId },
+  });
+}
+
+/** 发布自由发布文章 */
+export function submitFreePublish(accountId: number, mediaId: string) {
+  return requestClient.post('/mp/free-publish/submit', null, {
+    params: { accountId, mediaId },
+  });
+}
diff --git a/apps/web-antd/src/api/mp/material/index.ts b/apps/web-antd/src/api/mp/material/index.ts
new file mode 100644
index 000000000..73ca899ee
--- /dev/null
+++ b/apps/web-antd/src/api/mp/material/index.ts
@@ -0,0 +1,43 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+/** 素材类型枚举 */
+export enum MaterialType {
+  IMAGE = 1, // 图片
+  THUMB = 4, // 缩略图
+  VIDEO = 3, // 视频
+  VOICE = 2, // 语音
+}
+
+export namespace MpMaterialApi {
+  /** 素材信息 */
+  export interface Material {
+    id?: number;
+    accountId: number;
+    type: MaterialType;
+    mediaId: string;
+    url: string;
+    name: string;
+    size: number;
+    remark?: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询素材列表 */
+export function getMaterialPage(params: PageParam) {
+  return requestClient.get<PageResult<MpMaterialApi.Material>>(
+    '/mp/material/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 删除永久素材 */
+export function deletePermanentMaterial(id: number) {
+  return requestClient.delete('/mp/material/delete-permanent', {
+    params: { id },
+  });
+}
diff --git a/apps/web-antd/src/api/mp/menu/index.ts b/apps/web-antd/src/api/mp/menu/index.ts
new file mode 100644
index 000000000..a8ae0833b
--- /dev/null
+++ b/apps/web-antd/src/api/mp/menu/index.ts
@@ -0,0 +1,58 @@
+import { requestClient } from '#/api/request';
+
+/** 菜单类型枚举 */
+export enum MenuType {
+  CLICK = 'click', // 点击推事件
+  LOCATION_SELECT = 'location_select', // 发送位置
+  MEDIA_ID = 'media_id', // 下发消息
+  MINIPROGRAM = 'miniprogram', // 小程序
+  PIC_PHOTO_OR_ALBUM = 'pic_photo_or_album', // 拍照或者相册发图
+  PIC_SYSPHOTO = 'pic_sysphoto', // 系统拍照发图
+  PIC_WEIXIN = 'pic_weixin', // 微信相册发图
+  SCANCODE_PUSH = 'scancode_push', // 扫码推事件
+  SCANCODE_WAITMSG = 'scancode_waitmsg', // 扫码带提示
+  VIEW = 'view', // 跳转URL
+  VIEW_LIMITED = 'view_limited', // 跳转图文消息URL
+}
+
+export namespace MpMenuApi {
+  /** 菜单按钮信息 */
+  export interface MenuButton {
+    type: MenuType;
+    name: string;
+    key?: string;
+    url?: string;
+    mediaId?: string;
+    appId?: string;
+    pagePath?: string;
+    subButtons?: MenuButton[];
+  }
+
+  /** 菜单信息 */
+  export interface Menu {
+    accountId: number;
+    menus: MenuButton[];
+  }
+}
+
+/** 查询菜单列表 */
+export function getMenuList(accountId: number) {
+  return requestClient.get<MpMenuApi.MenuButton[]>('/mp/menu/list', {
+    params: { accountId },
+  });
+}
+
+/** 保存菜单 */
+export function saveMenu(accountId: number, menus: MpMenuApi.MenuButton[]) {
+  return requestClient.post('/mp/menu/save', {
+    accountId,
+    menus,
+  });
+}
+
+/** 删除菜单 */
+export function deleteMenu(accountId: number) {
+  return requestClient.delete('/mp/menu/delete', {
+    params: { accountId },
+  });
+}
diff --git a/apps/web-antd/src/api/mp/message/index.ts b/apps/web-antd/src/api/mp/message/index.ts
new file mode 100644
index 000000000..cfb2dbacc
--- /dev/null
+++ b/apps/web-antd/src/api/mp/message/index.ts
@@ -0,0 +1,54 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+/** 消息类型枚举 */
+export enum MessageType {
+  IMAGE = 'image', // 图片消息
+  MPNEWS = 'mpnews', // 公众号图文消息
+  MUSIC = 'music', // 音乐消息
+  NEWS = 'news', // 图文消息
+  TEXT = 'text', // 文本消息
+  VIDEO = 'video', // 视频消息
+  VOICE = 'voice', // 语音消息
+  WXCARD = 'wxcard', // 卡券消息
+}
+
+export namespace MpMessageApi {
+  /** 消息信息 */
+  export interface Message {
+    id?: number;
+    accountId: number;
+    type: MessageType;
+    openid: string;
+    content: string;
+    mediaId?: string;
+    status: number;
+    remark?: string;
+    createTime?: Date;
+  }
+
+  /** 发送消息请求 */
+  export interface SendMessageRequest {
+    accountId: number;
+    openid: string;
+    type: MessageType;
+    content: string;
+    mediaId?: string;
+  }
+}
+
+/** 查询消息列表 */
+export function getMessagePage(params: PageParam) {
+  return requestClient.get<PageResult<MpMessageApi.Message>>(
+    '/mp/message/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 发送消息 */
+export function sendMessage(data: MpMessageApi.SendMessageRequest) {
+  return requestClient.post('/mp/message/send', data);
+}
diff --git a/apps/web-antd/src/api/mp/statistics/index.ts b/apps/web-antd/src/api/mp/statistics/index.ts
new file mode 100644
index 000000000..e36073820
--- /dev/null
+++ b/apps/web-antd/src/api/mp/statistics/index.ts
@@ -0,0 +1,84 @@
+import type { PageParam } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MpStatisticsApi {
+  /** 统计查询参数 */
+  export interface StatisticsQuery extends PageParam {
+    accountId: number;
+    beginDate: string;
+    endDate: string;
+  }
+
+  /** 消息发送概况数据 */
+  export interface UpstreamMessage {
+    refDate: string;
+    msgType: string;
+    msgUser: number;
+    msgCount: number;
+  }
+
+  /** 用户增减数据 */
+  export interface UserSummary {
+    refDate: string;
+    userSource: number;
+    newUser: number;
+    cancelUser: number;
+    cumulateUser: number;
+  }
+
+  /** 用户累计数据 */
+  export interface UserCumulate {
+    refDate: string;
+    cumulateUser: number;
+  }
+
+  /** 接口分析数据 */
+  export interface InterfaceSummary {
+    refDate: string;
+    callbackCount: number;
+    failCount: number;
+    totalTimeCost: number;
+    maxTimeCost: number;
+  }
+}
+
+/** 获取消息发送概况数据 */
+export function getUpstreamMessage(params: MpStatisticsApi.StatisticsQuery) {
+  return requestClient.get<MpStatisticsApi.UpstreamMessage[]>(
+    '/mp/statistics/upstream-message',
+    {
+      params,
+    },
+  );
+}
+
+/** 获取用户增减数据 */
+export function getUserSummary(params: MpStatisticsApi.StatisticsQuery) {
+  return requestClient.get<MpStatisticsApi.UserSummary[]>(
+    '/mp/statistics/user-summary',
+    {
+      params,
+    },
+  );
+}
+
+/** 获取用户累计数据 */
+export function getUserCumulate(params: MpStatisticsApi.StatisticsQuery) {
+  return requestClient.get<MpStatisticsApi.UserCumulate[]>(
+    '/mp/statistics/user-cumulate',
+    {
+      params,
+    },
+  );
+}
+
+/** 获取接口分析数据 */
+export function getInterfaceSummary(params: MpStatisticsApi.StatisticsQuery) {
+  return requestClient.get<MpStatisticsApi.InterfaceSummary[]>(
+    '/mp/statistics/interface-summary',
+    {
+      params,
+    },
+  );
+}
diff --git a/apps/web-antd/src/api/mp/tag/index.ts b/apps/web-antd/src/api/mp/tag/index.ts
new file mode 100644
index 000000000..b1acd0130
--- /dev/null
+++ b/apps/web-antd/src/api/mp/tag/index.ts
@@ -0,0 +1,63 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MpTagApi {
+  /** 标签信息 */
+  export interface Tag {
+    id?: number;
+    accountId: number;
+    name: string;
+    count?: number;
+    createTime?: Date;
+  }
+
+  /** 标签分页查询参数 */
+  export interface TagPageQuery extends PageParam {
+    accountId?: number;
+    name?: string;
+  }
+}
+
+/** 创建公众号标签 */
+export function createTag(data: MpTagApi.Tag) {
+  return requestClient.post('/mp/tag/create', data);
+}
+
+/** 更新公众号标签 */
+export function updateTag(data: MpTagApi.Tag) {
+  return requestClient.put('/mp/tag/update', data);
+}
+
+/** 删除公众号标签 */
+export function deleteTag(id: number) {
+  return requestClient.delete('/mp/tag/delete', {
+    params: { id },
+  });
+}
+
+/** 获取公众号标签 */
+export function getTag(id: number) {
+  return requestClient.get<MpTagApi.Tag>('/mp/tag/get', {
+    params: { id },
+  });
+}
+
+/** 获取公众号标签分页 */
+export function getTagPage(params: MpTagApi.TagPageQuery) {
+  return requestClient.get<PageResult<MpTagApi.Tag>>('/mp/tag/page', {
+    params,
+  });
+}
+
+/** 获取公众号标签精简信息列表 */
+export function getSimpleTagList() {
+  return requestClient.get<MpTagApi.Tag[]>('/mp/tag/list-all-simple');
+}
+
+/** 同步公众号标签 */
+export function syncTag(accountId: number) {
+  return requestClient.post('/mp/tag/sync', null, {
+    params: { accountId },
+  });
+}
diff --git a/apps/web-antd/src/api/mp/user/index.ts b/apps/web-antd/src/api/mp/user/index.ts
new file mode 100644
index 000000000..e34573a1a
--- /dev/null
+++ b/apps/web-antd/src/api/mp/user/index.ts
@@ -0,0 +1,57 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MpUserApi {
+  /** 用户信息 */
+  export interface User {
+    id?: number;
+    accountId: number;
+    openid: string;
+    nickname: string;
+    avatar: string;
+    sex: number;
+    country: string;
+    province: string;
+    city: string;
+    language: string;
+    subscribe: boolean;
+    subscribeTime?: Date;
+    remark?: string;
+    tagIds?: number[];
+    createTime?: Date;
+  }
+
+  /** 用户分页查询参数 */
+  export interface UserPageQuery extends PageParam {
+    accountId?: number;
+    nickname?: string;
+    tagId?: number;
+  }
+}
+
+/** 更新公众号粉丝 */
+export function updateUser(data: MpUserApi.User) {
+  return requestClient.put('/mp/user/update', data);
+}
+
+/** 获取公众号粉丝 */
+export function getUser(id: number) {
+  return requestClient.get<MpUserApi.User>('/mp/user/get', {
+    params: { id },
+  });
+}
+
+/** 获取公众号粉丝分页 */
+export function getUserPage(params: MpUserApi.UserPageQuery) {
+  return requestClient.get<PageResult<MpUserApi.User>>('/mp/user/page', {
+    params,
+  });
+}
+
+/** 同步公众号粉丝 */
+export function syncUser(accountId: number) {
+  return requestClient.post('/mp/user/sync', null, {
+    params: { accountId },
+  });
+}
diff --git a/apps/web-antd/src/components/operate-log/index.ts b/apps/web-antd/src/components/operate-log/index.ts
new file mode 100644
index 000000000..cf38b5e70
--- /dev/null
+++ b/apps/web-antd/src/components/operate-log/index.ts
@@ -0,0 +1,3 @@
+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
new file mode 100644
index 000000000..e1e9eb448
--- /dev/null
+++ b/apps/web-antd/src/components/operate-log/operate-log.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { OperateLogProps } from './typing';
+
+import { Timeline } from 'ant-design-vue';
+
+import { DICT_TYPE, getDictLabel, getDictObj } from '#/utils';
+
+defineOptions({ name: 'OperateLogV2' });
+
+withDefaults(defineProps<OperateLogProps>(), {
+  logList: () => [],
+});
+
+function getUserTypeColor(userType: number) {
+  const dict = getDictObj(DICT_TYPE.USER_TYPE, userType);
+  switch (dict?.colorType) {
+    case 'danger': {
+      return '#F56C6C';
+    }
+    case 'info': {
+      return '#909399';
+    }
+    case 'success': {
+      return '#67C23A';
+    }
+    case 'warning': {
+      return '#E6A23C';
+    }
+  }
+  return '#409EFF';
+}
+</script>
+<template>
+  <div>
+    <Timeline>
+      <Timeline.Item
+        v-for="log in logList"
+        :key="log.id"
+        :color="getUserTypeColor(log.userType)"
+      >
+        <p>{{ log.createTime }}</p>
+        <p>{{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}</p>
+      </Timeline.Item>
+    </Timeline>
+  </div>
+</template>
diff --git a/apps/web-antd/src/components/operate-log/typing.ts b/apps/web-antd/src/components/operate-log/typing.ts
new file mode 100644
index 000000000..773237b96
--- /dev/null
+++ b/apps/web-antd/src/components/operate-log/typing.ts
@@ -0,0 +1,5 @@
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+export interface OperateLogProps {
+  logList: SystemOperateLogApi.OperateLog[]; // 操作日志列表
+}
diff --git a/apps/web-antd/src/components/dept-select-modal/dept-select-modal.vue b/apps/web-antd/src/components/select-modal/dept-select-modal.vue
similarity index 100%
rename from apps/web-antd/src/components/dept-select-modal/dept-select-modal.vue
rename to apps/web-antd/src/components/select-modal/dept-select-modal.vue
diff --git a/apps/web-antd/src/components/dept-select-modal/index.ts b/apps/web-antd/src/components/select-modal/index.ts
similarity index 50%
rename from apps/web-antd/src/components/dept-select-modal/index.ts
rename to apps/web-antd/src/components/select-modal/index.ts
index d373be445..2b6e91893 100644
--- a/apps/web-antd/src/components/dept-select-modal/index.ts
+++ b/apps/web-antd/src/components/select-modal/index.ts
@@ -1 +1,2 @@
 export { default as DeptSelectModal } from './dept-select-modal.vue';
+export { default as UserSelectModal } from './user-select-modal.vue';
diff --git a/apps/web-antd/src/components/user-select-modal/user-select-modal.vue b/apps/web-antd/src/components/select-modal/user-select-modal.vue
similarity index 100%
rename from apps/web-antd/src/components/user-select-modal/user-select-modal.vue
rename to apps/web-antd/src/components/select-modal/user-select-modal.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue
new file mode 100644
index 000000000..ffa494726
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue
@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { ref, watch } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import { Input } from 'ant-design-vue';
+
+import { ConditionType } from '../../consts';
+import {
+  getConditionShowText,
+  getDefaultConditionNodeName,
+  useFormFieldsAndStartUser,
+} from '../../helpers';
+import Condition from './modules/condition.vue';
+
+defineOptions({
+  name: 'ConditionNodeConfig',
+});
+
+const props = defineProps({
+  conditionNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+  nodeIndex: {
+    type: Number,
+    required: true,
+  },
+});
+
+const currentNode = ref<SimpleFlowNode>(props.conditionNode);
+const condition = ref<any>({
+  conditionType: ConditionType.RULE, // 设置默认值
+  conditionExpression: '',
+  conditionGroups: {
+    and: true,
+    conditions: [
+      {
+        and: true,
+        rules: [
+          {
+            opCode: '==',
+            leftSide: '',
+            rightSide: '',
+          },
+        ],
+      },
+    ],
+  },
+});
+
+// 显示名称输入框
+const showInput = ref(false);
+const conditionRef = ref();
+const fieldOptions = useFormFieldsAndStartUser(); // 流程表单字段和发起人字段
+
+/** 保存配置 */
+async function saveConfig() {
+  if (!currentNode.value.conditionSetting?.defaultFlow) {
+    // 校验表单
+    const valid = await conditionRef.value.validate();
+    if (!valid) return false;
+    const showText = getConditionShowText(
+      condition.value?.conditionType,
+      condition.value?.conditionExpression,
+      condition.value.conditionGroups,
+      fieldOptions,
+    );
+    if (!showText) {
+      return false;
+    }
+    currentNode.value.showText = showText;
+    // 使用 cloneDeep 进行深拷贝
+    currentNode.value.conditionSetting = cloneDeep({
+      ...currentNode.value.conditionSetting,
+      conditionType: condition.value?.conditionType,
+      conditionExpression:
+        condition.value?.conditionType === ConditionType.EXPRESSION
+          ? condition.value?.conditionExpression
+          : undefined,
+      conditionGroups:
+        condition.value?.conditionType === ConditionType.RULE
+          ? condition.value?.conditionGroups
+          : undefined,
+    });
+  }
+  drawerApi.close();
+  return true;
+}
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  title: currentNode.value.name,
+  onConfirm: saveConfig,
+});
+
+function open() {
+  // 使用三元表达式代替 if-else，解决 linter 警告
+  condition.value = currentNode.value.conditionSetting
+    ? cloneDeep(currentNode.value.conditionSetting)
+    : {
+        conditionType: ConditionType.RULE,
+        conditionExpression: '',
+        conditionGroups: {
+          and: true,
+          conditions: [
+            {
+              and: true,
+              rules: [
+                {
+                  opCode: '==',
+                  leftSide: '',
+                  rightSide: '',
+                },
+              ],
+            },
+          ],
+        },
+      };
+
+  drawerApi.open();
+}
+
+watch(
+  () => props.conditionNode,
+  (newValue) => {
+    currentNode.value = newValue;
+  },
+);
+
+function clickIcon() {
+  showInput.value = true;
+}
+
+// 输入框失去焦点
+function blurEvent() {
+  showInput.value = false;
+  currentNode.value.name =
+    currentNode.value.name ||
+    getDefaultConditionNodeName(
+      props.nodeIndex,
+      currentNode.value?.conditionSetting?.defaultFlow,
+    );
+}
+
+defineExpose({ open }); // 提供 open 方法，用于打开弹窗
+</script>
+<template>
+  <Drawer class="w-[580px]">
+    <template #title>
+      <div class="flex items-center">
+        <Input
+          v-if="showInput"
+          type="text"
+          class="mr-2 w-48"
+          @blur="blurEvent()"
+          v-model:value="currentNode.name"
+          :placeholder="currentNode.name"
+        />
+        <div
+          v-else
+          class="flex cursor-pointer items-center"
+          @click="clickIcon()"
+        >
+          {{ currentNode.name }}
+          <IconifyIcon class="ml-1" icon="ep:edit-pen" />
+        </div>
+      </div>
+    </template>
+
+    <div>
+      <div
+        class="mb-3 text-base"
+        v-if="currentNode.conditionSetting?.defaultFlow"
+      >
+        未满足其它条件时，将进入此分支（该分支不可编辑和删除）
+      </div>
+      <div v-else>
+        <Condition ref="conditionRef" v-model:model-value="condition" />
+      </div>
+    </div>
+  </Drawer>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
new file mode 100644
index 000000000..03f454c52
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
@@ -0,0 +1,533 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../../consts';
+import type { CopyTaskFormType } from '../../helpers';
+
+import { computed, onMounted, reactive, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Col,
+  Form,
+  FormItem,
+  Input,
+  Radio,
+  RadioGroup,
+  Row,
+  Select,
+  SelectOption,
+  TabPane,
+  Tabs,
+  Textarea,
+  TreeSelect,
+} from 'ant-design-vue';
+
+import { BpmModelFormType } from '#/utils';
+
+import {
+  CANDIDATE_STRATEGY,
+  CandidateStrategy,
+  FieldPermissionType,
+  MULTI_LEVEL_DEPT,
+  NodeType,
+} from '../../consts';
+import {
+  useFormFieldsPermission,
+  useNodeForm,
+  useNodeName,
+  useWatchNode,
+} from '../../helpers';
+
+defineOptions({ name: 'CopyTaskNodeConfig' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+const deptLevelLabel = computed(() => {
+  let label = '部门负责人来源';
+  label =
+    configForm.value.candidateStrategy ===
+    CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+      ? `${label}(指定部门向上)`
+      : `${label}(发起人部门向上)`;
+  return label;
+});
+
+// 抽屉配置
+const [Drawer, drawerApi] = useVbenDrawer({
+  header: true,
+  closable: true,
+  title: '',
+  onConfirm() {
+    saveConfig();
+  },
+});
+
+// 当前节点
+const currentNode = useWatchNode(props);
+
+// 节点名称
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+  NodeType.COPY_TASK_NODE,
+);
+
+// 激活的 Tab 标签页
+const activeTabName = ref('user');
+
+// 表单字段权限配置
+const {
+  formType,
+  fieldsPermissionConfig,
+  formFieldOptions,
+  getNodeConfigFormFields,
+} = useFormFieldsPermission(FieldPermissionType.READ);
+
+// 表单内用户字段选项, 必须是必填和用户选择器
+const userFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'UserSelect');
+});
+
+// 表单内部门字段选项, 必须是必填和部门选择器
+const deptFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'DeptSelect');
+});
+
+// 抄送人表单配置
+const formRef = ref(); // 表单 Ref
+
+// 表单校验规则
+const formRules: Record<string, Rule[]> = reactive({
+  candidateStrategy: [
+    { required: true, message: '抄送人设置不能为空', trigger: 'change' },
+  ],
+  userIds: [{ required: true, message: '用户不能为空', trigger: 'change' }],
+  roleIds: [{ required: true, message: '角色不能为空', trigger: 'change' }],
+  deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }],
+  userGroups: [
+    { required: true, message: '用户组不能为空', trigger: 'change' },
+  ],
+  postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
+  formUser: [
+    { required: true, message: '表单内用户字段不能为空', trigger: 'change' },
+  ],
+  formDept: [
+    { required: true, message: '表单内部门字段不能为空', trigger: 'change' },
+  ],
+  expression: [
+    { required: true, message: '流程表达式不能为空', trigger: 'blur' },
+  ],
+});
+
+const {
+  configForm: tempConfigForm,
+  roleOptions,
+  postOptions,
+  userOptions,
+  userGroupOptions,
+  deptTreeOptions,
+  getShowText,
+  handleCandidateParam,
+  parseCandidateParam,
+} = useNodeForm(NodeType.COPY_TASK_NODE);
+
+const configForm = tempConfigForm as Ref<CopyTaskFormType>;
+// 抄送人策略， 去掉发起人自选 和 发起人自己
+const copyUserStrategies = computed(() => {
+  return CANDIDATE_STRATEGY.filter(
+    (item) => item.value !== CandidateStrategy.START_USER,
+  );
+});
+
+// 改变抄送人设置策略
+function changeCandidateStrategy() {
+  configForm.value.userIds = [];
+  configForm.value.deptIds = [];
+  configForm.value.roleIds = [];
+  configForm.value.postIds = [];
+  configForm.value.userGroups = [];
+  configForm.value.deptLevel = 1;
+  configForm.value.formUser = '';
+  configForm.value.formDept = '';
+}
+
+// 保存配置
+async function saveConfig() {
+  activeTabName.value = 'user';
+  if (!formRef.value) return false;
+  const valid = await formRef.value.validate();
+  if (!valid) return false;
+  const showText = getShowText();
+  if (!showText) return false;
+  currentNode.value.name = nodeName.value!;
+  currentNode.value.candidateParam = handleCandidateParam();
+  currentNode.value.candidateStrategy = configForm.value.candidateStrategy;
+  currentNode.value.showText = showText;
+  currentNode.value.fieldsPermission = fieldsPermissionConfig.value;
+  drawerApi.close();
+  return true;
+}
+
+// 显示抄送节点配置， 由父组件传过来
+function showCopyTaskNodeConfig(node: SimpleFlowNode) {
+  nodeName.value = node.name;
+  // 抄送人设置
+  configForm.value.candidateStrategy = node.candidateStrategy!;
+  parseCandidateParam(node.candidateStrategy!, node?.candidateParam);
+  // 表单字段权限
+  getNodeConfigFormFields(node.fieldsPermission);
+
+  drawerApi.open();
+}
+
+/** 批量更新权限 */
+function updatePermission(type: string) {
+  fieldsPermissionConfig.value.forEach((field) => {
+    if (type === 'READ') {
+      field.permission = FieldPermissionType.READ;
+    } else if (type === 'WRITE') {
+      field.permission = FieldPermissionType.WRITE;
+    } else {
+      field.permission = FieldPermissionType.NONE;
+    }
+  });
+}
+
+// 在组件初始化时对表单字段进行处理
+onMounted(() => {
+  // 可以在这里进行初始化操作
+});
+
+defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
+</script>
+<template>
+  <Drawer class="w-[580px]">
+    <template #title>
+      <div class="config-header">
+        <Input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-model:value="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="ep:edit-pen" @click="clickIcon()" />
+        </div>
+      </div>
+    </template>
+    <Tabs v-model:active-key="activeTabName">
+      <TabPane tab="抄送人" key="user">
+        <div>
+          <Form
+            ref="formRef"
+            :model="configForm"
+            :label-col="{ span: 24 }"
+            :wrapper-col="{ span: 24 }"
+            :rules="formRules"
+          >
+            <FormItem label="抄送人设置" name="candidateStrategy">
+              <RadioGroup
+                v-model:value="configForm.candidateStrategy"
+                @change="changeCandidateStrategy"
+              >
+                <Row :gutter="[0, 8]">
+                  <Col
+                    v-for="(dict, index) in copyUserStrategies"
+                    :key="index"
+                    :span="8"
+                  >
+                    <Radio :value="dict.value" :label="dict.value">
+                      {{ dict.label }}
+                    </Radio>
+                  </Col>
+                </Row>
+              </RadioGroup>
+            </FormItem>
+
+            <FormItem
+              v-if="configForm.candidateStrategy === CandidateStrategy.ROLE"
+              label="指定角色"
+              name="roleIds"
+            >
+              <Select
+                v-model:value="configForm.roleIds"
+                clearable
+                mode="multiple"
+              >
+                <SelectOption
+                  v-for="item in roleOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                  {{ item.name }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy ===
+                  CandidateStrategy.DEPT_MEMBER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+              "
+              label="指定部门"
+              name="deptIds"
+            >
+              <TreeSelect
+                v-model:value="configForm.deptIds"
+                :tree-data="deptTreeOptions"
+                :field-names="{
+                  label: 'name',
+                  value: 'id',
+                  children: 'children',
+                }"
+                empty-text="加载中，请稍后"
+                multiple
+                :check-strictly="true"
+                allow-clear
+                tree-checkable
+              />
+            </FormItem>
+            <FormItem
+              v-if="configForm.candidateStrategy === CandidateStrategy.POST"
+              label="指定岗位"
+              name="postIds"
+            >
+              <Select
+                v-model:value="configForm.postIds"
+                clearable
+                mode="multiple"
+              >
+                <SelectOption
+                  v-for="item in postOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id!"
+                >
+                  {{ item.name }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="configForm.candidateStrategy === CandidateStrategy.USER"
+              label="指定用户"
+              name="userIds"
+            >
+              <Select
+                v-model:value="configForm.userIds"
+                clearable
+                mode="multiple"
+              >
+                <SelectOption
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id"
+                >
+                  {{ item.nickname }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy === CandidateStrategy.USER_GROUP
+              "
+              label="指定用户组"
+              name="userGroups"
+            >
+              <Select
+                v-model:value="configForm.userGroups"
+                clearable
+                mode="multiple"
+              >
+                <SelectOption
+                  v-for="item in userGroupOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                  {{ item.name }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy === CandidateStrategy.FORM_USER
+              "
+              label="表单内用户字段"
+              name="formUser"
+            >
+              <Select v-model:value="configForm.formUser" clearable>
+                <SelectOption
+                  v-for="(item, idx) in userFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                  :disabled="!item.required"
+                >
+                  {{ item.title }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy ===
+                CandidateStrategy.FORM_DEPT_LEADER
+              "
+              label="表单内部门字段"
+              name="formDept"
+            >
+              <Select v-model:value="configForm.formDept" clearable>
+                <SelectOption
+                  v-for="(item, idx) in deptFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                  :disabled="!item.required"
+                >
+                  {{ item.title }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy ===
+                  CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.START_USER_DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.FORM_DEPT_LEADER
+              "
+              :label="deptLevelLabel!"
+              name="deptLevel"
+            >
+              <Select v-model:value="configForm.deptLevel" clearable>
+                <SelectOption
+                  v-for="(item, index) in MULTI_LEVEL_DEPT"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                  {{ item.label }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy === CandidateStrategy.EXPRESSION
+              "
+              label="流程表达式"
+              name="expression"
+            >
+              <Textarea v-model:value="configForm.expression" clearable />
+            </FormItem>
+          </Form>
+        </div>
+      </TabPane>
+      <TabPane
+        tab="表单字段权限"
+        key="fields"
+        v-if="formType === BpmModelFormType.NORMAL"
+      >
+        <div class="p-1">
+          <div class="mb-4 text-[16px] font-bold">字段权限</div>
+
+          <!-- 表头 -->
+          <Row class="border border-gray-200 px-4 py-3">
+            <Col :span="8" class="font-bold">字段名称</Col>
+            <Col :span="16">
+              <Row>
+                <Col :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('READ')"
+                  >
+                    只读
+                  </span>
+                </Col>
+                <Col :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('WRITE')"
+                  >
+                    可编辑
+                  </span>
+                </Col>
+                <Col :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('NONE')"
+                  >
+                    隐藏
+                  </span>
+                </Col>
+              </Row>
+            </Col>
+          </Row>
+
+          <!-- 表格内容 -->
+          <div v-for="(item, index) in fieldsPermissionConfig" :key="index">
+            <Row class="border border-t-0 border-gray-200 px-4 py-2">
+              <Col :span="8" class="flex items-center truncate">
+                {{ item.title }}
+              </Col>
+              <Col :span="16">
+                <RadioGroup v-model:value="item.permission" class="w-full">
+                  <Row>
+                    <Col :span="8" class="flex items-center justify-center">
+                      <Radio
+                        :value="FieldPermissionType.READ"
+                        size="large"
+                        :label="FieldPermissionType.READ"
+                      />
+                    </Col>
+                    <Col :span="8" class="flex items-center justify-center">
+                      <Radio
+                        :value="FieldPermissionType.WRITE"
+                        size="large"
+                        :label="FieldPermissionType.WRITE"
+                        disabled
+                      />
+                    </Col>
+                    <Col :span="8" class="flex items-center justify-center">
+                      <Radio
+                        :value="FieldPermissionType.NONE"
+                        size="large"
+                        :label="FieldPermissionType.NONE"
+                      />
+                    </Col>
+                  </Row>
+                </RadioGroup>
+              </Col>
+            </Row>
+          </div>
+        </div>
+      </TabPane>
+    </Tabs>
+  </Drawer>
+</template>
+<style lang="scss" scoped>
+.config-editable-input {
+  &:focus {
+    outline: 0;
+    border-color: #40a9ff;
+    box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+  }
+}
+</style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
new file mode 100644
index 000000000..2dca15fba
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+
+import type { SimpleFlowNode } from '../../consts';
+
+import { reactive, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Col,
+  DatePicker,
+  Form,
+  FormItem,
+  Input,
+  InputNumber,
+  Radio,
+  RadioGroup,
+  Row,
+  Select,
+  SelectOption,
+} from 'ant-design-vue';
+
+import {
+  DELAY_TYPE,
+  DelayTypeEnum,
+  NodeType,
+  TIME_UNIT_TYPES,
+  TimeUnitType,
+} from '../../consts';
+import { useNodeName, useWatchNode } from '../../helpers';
+import { convertTimeUnit } from './utils';
+
+defineOptions({ name: 'DelayTimerNodeConfig' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+// 当前节点
+const currentNode = useWatchNode(props);
+// 节点名称
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+  NodeType.DELAY_TIMER_NODE,
+);
+// 抄送人表单配置
+const formRef = ref(); // 表单 Ref
+
+// 表单校验规则
+const formRules: Record<string, Rule[]> = reactive({
+  delayType: [
+    { required: true, message: '延迟时间不能为空', trigger: 'change' },
+  ],
+  timeDuration: [
+    { required: true, message: '延迟时间不能为空', trigger: 'change' },
+  ],
+  dateTime: [
+    { required: true, message: '延迟时间不能为空', trigger: 'change' },
+  ],
+});
+
+// 配置表单数据
+const configForm = ref({
+  delayType: DelayTypeEnum.FIXED_TIME_DURATION,
+  timeDuration: 1,
+  timeUnit: TimeUnitType.HOUR,
+  dateTime: '',
+});
+
+// 获取显示文本
+function getShowText(): string {
+  let showText = '';
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
+    showText = `延迟${configForm.value.timeDuration}${TIME_UNIT_TYPES?.find((item) => item.value === configForm.value.timeUnit)?.label}`;
+  }
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
+    showText = `延迟至${configForm.value.dateTime.replace('T', ' ')}`;
+  }
+  return showText;
+}
+
+// 获取ISO时间格式
+function getIsoTimeDuration() {
+  let strTimeDuration = 'PT';
+  if (configForm.value.timeUnit === TimeUnitType.MINUTE) {
+    strTimeDuration += `${configForm.value.timeDuration}M`;
+  }
+  if (configForm.value.timeUnit === TimeUnitType.HOUR) {
+    strTimeDuration += `${configForm.value.timeDuration}H`;
+  }
+  if (configForm.value.timeUnit === TimeUnitType.DAY) {
+    strTimeDuration += `${configForm.value.timeDuration}D`;
+  }
+  return strTimeDuration;
+}
+
+// 保存配置
+async function saveConfig() {
+  if (!formRef.value) return false;
+  const valid = await formRef.value.validate();
+  if (!valid) return false;
+  const showText = getShowText();
+  if (!showText) return false;
+  currentNode.value.name = nodeName.value!;
+  currentNode.value.showText = showText;
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
+    currentNode.value.delaySetting = {
+      delayType: configForm.value.delayType,
+      delayTime: getIsoTimeDuration(),
+    };
+  }
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
+    currentNode.value.delaySetting = {
+      delayType: configForm.value.delayType,
+      delayTime: configForm.value.dateTime,
+    };
+  }
+  drawerApi.close();
+  return true;
+}
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  title: nodeName.value,
+  onConfirm: saveConfig,
+});
+
+// 显示延迟器节点配置，由父组件调用
+function openDrawer(node: SimpleFlowNode) {
+  nodeName.value = node.name;
+  if (node.delaySetting) {
+    configForm.value.delayType = node.delaySetting.delayType;
+    // 固定时长
+    if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
+      const strTimeDuration = node.delaySetting.delayTime;
+      const parseTime = strTimeDuration.slice(2, -1);
+      const parseTimeUnit = strTimeDuration.slice(-1);
+      configForm.value.timeDuration = Number.parseInt(parseTime);
+      configForm.value.timeUnit = convertTimeUnit(parseTimeUnit);
+    }
+    // 固定日期时间
+    if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
+      configForm.value.dateTime = node.delaySetting.delayTime;
+    }
+  }
+  drawerApi.open();
+}
+
+defineExpose({ openDrawer }); // 暴露方法给父组件
+</script>
+<template>
+  <Drawer class="w-[480px]">
+    <template #title>
+      <div class="flex items-center">
+        <Input
+          v-if="showInput"
+          type="text"
+          class="mr-2 w-48"
+          @blur="blurEvent()"
+          v-model:value="nodeName"
+          :placeholder="nodeName"
+        />
+        <div
+          v-else
+          class="flex cursor-pointer items-center"
+          @click="clickIcon()"
+        >
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="ep:edit-pen" :size="16" />
+        </div>
+      </div>
+    </template>
+
+    <div>
+      <Form
+        ref="formRef"
+        :model="configForm"
+        :rules="formRules"
+        :label-col="{ span: 24 }"
+        :wrapper-col="{ span: 24 }"
+      >
+        <FormItem label="延迟时间" name="delayType">
+          <RadioGroup v-model:value="configForm.delayType">
+            <Radio
+              v-for="item in DELAY_TYPE"
+              :key="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </Radio>
+          </RadioGroup>
+        </FormItem>
+        <FormItem
+          v-if="configForm.delayType === DelayTypeEnum.FIXED_TIME_DURATION"
+        >
+          <Row :gutter="8">
+            <Col>
+              <FormItem name="timeDuration">
+                <InputNumber
+                  class="w-28"
+                  v-model:value="configForm.timeDuration"
+                  :min="1"
+                />
+              </FormItem>
+            </Col>
+            <Col>
+              <Select v-model:value="configForm.timeUnit" class="w-28">
+                <SelectOption
+                  v-for="item in TIME_UNIT_TYPES"
+                  :key="item.value"
+                  :value="item.value"
+                >
+                  {{ item.label }}
+                </SelectOption>
+              </Select>
+            </Col>
+            <Col>
+              <span class="inline-flex h-8 items-center">后进入下一节点</span>
+            </Col>
+          </Row>
+        </FormItem>
+        <FormItem
+          v-if="configForm.delayType === DelayTypeEnum.FIXED_DATE_TIME"
+          name="dateTime"
+        >
+          <Row :gutter="8">
+            <Col>
+              <DatePicker
+                class="mr-2"
+                v-model:value="configForm.dateTime"
+                show-time
+                placeholder="请选择日期和时间"
+                value-format="YYYY-MM-DDTHH:mm:ss"
+              />
+            </Col>
+            <Col>
+              <span class="inline-flex h-8 items-center">后进入下一节点</span>
+            </Col>
+          </Row>
+        </FormItem>
+      </Form>
+    </div>
+  </Drawer>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue
new file mode 100644
index 000000000..f8fea7a2b
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { ConditionGroup } from '../../../consts';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { ConditionType, DEFAULT_CONDITION_GROUP_VALUE } from '../../../consts';
+import Condition from './condition.vue';
+
+defineOptions({ name: 'ConditionDialog' });
+
+const emit = defineEmits<{
+  updateCondition: [condition: object];
+}>();
+
+const conditionData = ref<{
+  conditionExpression?: string;
+  conditionGroups?: ConditionGroup;
+  conditionType: ConditionType;
+}>({
+  conditionType: ConditionType.RULE,
+  conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+});
+
+// 条件组件的引用
+const conditionRef = ref();
+
+const [Modal, modalApi] = useVbenModal({
+  title: '条件配置',
+  destroyOnClose: true,
+  draggable: true,
+  async onConfirm() {
+    // 校验表单
+    if (!conditionRef.value) return;
+    const valid = await conditionRef.value.validate().catch(() => false);
+    if (!valid) {
+      message.warning('请完善条件规则');
+      return;
+    }
+    // 设置完的条件传递给父组件
+    emit('updateCondition', conditionData.value);
+    modalApi.close();
+  },
+  onCancel() {
+    modalApi.close();
+  },
+});
+
+// TODO: jason  open 在 useVbenModal 中 onOpenChange 方法
+function open(conditionObj: any | undefined) {
+  if (conditionObj) {
+    conditionData.value.conditionType = conditionObj.conditionType;
+    conditionData.value.conditionExpression = conditionObj.conditionExpression;
+    conditionData.value.conditionGroups = conditionObj.conditionGroups;
+  }
+  modalApi.open();
+}
+// TODO: jason  不需要暴露expose，直接使用modalApi.setData(formSetting).open()
+defineExpose({ open });
+</script>
+<template>
+  <Modal class="w-1/2">
+    <Condition ref="conditionRef" v-model="conditionData" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition.vue
new file mode 100644
index 000000000..06cb93495
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition.vue
@@ -0,0 +1,328 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+
+import type { Ref } from 'vue';
+
+import { computed, inject, reactive, ref } from 'vue';
+
+import { IconifyIcon, Plus, Trash2 } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import {
+  Card,
+  Col,
+  Form,
+  FormItem,
+  Input,
+  Radio,
+  RadioGroup,
+  Row,
+  Select,
+  SelectOption,
+  Space,
+  Switch,
+  Textarea,
+  Tooltip,
+} from 'ant-design-vue';
+
+import { BpmModelFormType } from '#/utils/constants';
+
+import {
+  COMPARISON_OPERATORS,
+  CONDITION_CONFIG_TYPES,
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE,
+} from '../../../consts';
+import { useFormFieldsAndStartUser } from '../../../helpers';
+
+defineOptions({
+  name: 'Condition',
+});
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const condition = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue);
+  },
+});
+
+const formType = inject<Ref<number>>('formType'); // 表单类型
+const conditionConfigTypes = computed(() => {
+  return CONDITION_CONFIG_TYPES.filter((item) => {
+    // 业务表单暂时去掉条件规则选项
+    return !(
+      formType?.value === BpmModelFormType.CUSTOM &&
+      item.value === ConditionType.RULE
+    );
+  });
+});
+
+/** 条件规则可选择的表单字段 */
+const fieldOptions = useFormFieldsAndStartUser();
+
+// 表单校验规则
+const formRules: Record<string, Rule[]> = reactive({
+  conditionType: [
+    { required: true, message: '配置方式不能为空', trigger: 'change' },
+  ],
+  conditionExpression: [
+    {
+      required: true,
+      message: '条件表达式不能为空',
+      trigger: ['blur', 'change'],
+    },
+  ],
+});
+
+const formRef = ref(); // 表单 Ref
+
+/** 切换条件配置方式 */
+function changeConditionType() {
+  if (
+    condition.value.conditionType === ConditionType.RULE &&
+    !condition.value.conditionGroups
+  ) {
+    condition.value.conditionGroups = cloneDeep(DEFAULT_CONDITION_GROUP_VALUE);
+  }
+}
+
+function deleteConditionGroup(conditions: any, index: number) {
+  conditions.splice(index, 1);
+}
+
+function deleteConditionRule(condition: any, index: number) {
+  condition.rules.splice(index, 1);
+}
+
+function addConditionRule(condition: any, index: number) {
+  const rule = {
+    opCode: '==',
+    leftSide: undefined,
+    rightSide: '',
+  };
+  condition.rules.splice(index + 1, 0, rule);
+}
+
+function addConditionGroup(conditions: any) {
+  const condition = {
+    and: true,
+    rules: [
+      {
+        opCode: '==',
+        leftSide: undefined,
+        rightSide: '',
+      },
+    ],
+  };
+  conditions.push(condition);
+}
+
+async function validate() {
+  if (!formRef.value) return false;
+  return await formRef.value.validate();
+}
+
+defineExpose({ validate });
+</script>
+<template>
+  <Form
+    ref="formRef"
+    :model="condition"
+    :rules="formRules"
+    :label-col="{ span: 24 }"
+    :wrapper-col="{ span: 24 }"
+  >
+    <FormItem label="配置方式" name="conditionType">
+      <RadioGroup
+        v-model:value="condition.conditionType"
+        @change="changeConditionType"
+      >
+        <Radio
+          v-for="(dict, indexConditionType) in conditionConfigTypes"
+          :key="indexConditionType"
+          :value="dict.value"
+        >
+          {{ dict.label }}
+        </Radio>
+      </RadioGroup>
+    </FormItem>
+    <FormItem
+      v-if="
+        condition.conditionType === ConditionType.RULE &&
+        condition.conditionGroups
+      "
+    >
+      <div class="mb-5 flex w-full justify-between">
+        <div class="flex items-center">
+          <div class="mr-4">条件组关系</div>
+          <Switch
+            v-model:checked="condition.conditionGroups.and"
+            checked-children="且"
+            un-checked-children="或"
+          />
+        </div>
+      </div>
+      <Space direction="vertical" size="small" class="w-11/12 pl-1">
+        <template #split>
+          {{ condition.conditionGroups.and ? '且' : '或' }}
+        </template>
+        <Card
+          class="group relative w-full hover:border-[#1890ff]"
+          v-for="(equation, cIdx) in condition.conditionGroups.conditions"
+          :key="cIdx"
+        >
+          <div
+            class="absolute left-0 top-0 z-[1] flex cursor-pointer opacity-0 group-hover:opacity-100"
+            v-if="condition.conditionGroups.conditions.length > 1"
+          >
+            <IconifyIcon
+              color="#0089ff"
+              icon="ep:circle-close-filled"
+              class="size-4"
+              @click="
+                deleteConditionGroup(condition.conditionGroups.conditions, cIdx)
+              "
+            />
+          </div>
+          <template #extra>
+            <div class="flex items-center justify-between">
+              <div>条件组</div>
+              <div class="flex">
+                <div class="mr-4">规则关系</div>
+                <Switch
+                  v-model:checked="equation.and"
+                  checked-children="且"
+                  un-checked-children="或"
+                />
+              </div>
+            </div>
+          </template>
+
+          <Row
+            :gutter="8"
+            class="mb-2"
+            v-for="(rule, rIdx) in equation.rules"
+            :key="rIdx"
+          >
+            <Col :span="8">
+              <FormItem
+                :name="[
+                  'conditionGroups',
+                  'conditions',
+                  cIdx,
+                  'rules',
+                  rIdx,
+                  'leftSide',
+                ]"
+                :rules="{
+                  required: true,
+                  message: '左值不能为空',
+                  trigger: 'change',
+                }"
+              >
+                <Select
+                  v-model:value="rule.leftSide"
+                  allow-clear
+                  placeholder="请选择表单字段"
+                >
+                  <SelectOption
+                    v-for="(field, fIdx) in fieldOptions"
+                    :key="fIdx"
+                    :label="field.title"
+                    :value="field.field"
+                    :disabled="!field.required"
+                  >
+                    <Tooltip
+                      title="表单字段非必填时不能作为流程分支条件"
+                      placement="right"
+                      v-if="!field.required"
+                    >
+                      <span>{{ field.title }}</span>
+                    </Tooltip>
+                    <template v-else>{{ field.title }}</template>
+                  </SelectOption>
+                </Select>
+              </FormItem>
+            </Col>
+            <Col :span="6">
+              <Select v-model:value="rule.opCode" placeholder="请选择操作符">
+                <SelectOption
+                  v-for="operator in COMPARISON_OPERATORS"
+                  :key="operator.value"
+                  :label="operator.label"
+                  :value="operator.value"
+                >
+                  {{ operator.label }}
+                </SelectOption>
+              </Select>
+            </Col>
+            <Col :span="7">
+              <FormItem
+                :name="[
+                  'conditionGroups',
+                  'conditions',
+                  cIdx,
+                  'rules',
+                  rIdx,
+                  'rightSide',
+                ]"
+                :rules="{
+                  required: true,
+                  message: '右值不能为空',
+                  trigger: ['blur', 'change'],
+                }"
+              >
+                <Input
+                  v-model:value="rule.rightSide"
+                  placeholder="请输入右值"
+                />
+              </FormItem>
+            </Col>
+            <Col :span="3">
+              <div class="flex h-[32px] items-center">
+                <Trash2
+                  v-if="equation.rules.length > 1"
+                  class="mr-2 size-4 cursor-pointer text-red-500"
+                  @click="deleteConditionRule(equation, rIdx)"
+                />
+                <Plus
+                  class="size-4 cursor-pointer text-blue-500"
+                  @click="addConditionRule(equation, rIdx)"
+                />
+              </div>
+            </Col>
+          </Row>
+        </Card>
+      </Space>
+      <div title="添加条件组" class="mt-4 cursor-pointer">
+        <Plus
+          class="size-[24px] text-blue-500"
+          @click="addConditionGroup(condition.conditionGroups?.conditions)"
+        />
+      </div>
+    </FormItem>
+    <FormItem
+      v-if="condition.conditionType === ConditionType.EXPRESSION"
+      label="条件表达式"
+      name="conditionExpression"
+    >
+      <Textarea
+        v-model:value="condition.conditionExpression"
+        placeholder="请输入条件表达式"
+        allow-clear
+        :auto-size="{ minRows: 3, maxRows: 6 }"
+      />
+    </FormItem>
+  </Form>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
new file mode 100644
index 000000000..40e859ea9
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import type { HttpRequestParam } from '../../../consts';
+
+import { Plus, Trash2 } from '@vben/icons';
+
+import {
+  Button,
+  Col,
+  FormItem,
+  Input,
+  Row,
+  Select,
+  SelectOption,
+} from 'ant-design-vue';
+
+import {
+  BPM_HTTP_REQUEST_PARAM_TYPES,
+  BpmHttpRequestParamTypeEnum,
+} from '../../../consts';
+import { useFormFieldsAndStartUser } from '../../../helpers';
+
+defineOptions({ name: 'HttpRequestParamSetting' });
+
+const props = defineProps({
+  header: {
+    type: Array as () => HttpRequestParam[],
+    required: false,
+    default: () => [],
+  },
+  body: {
+    type: Array as () => HttpRequestParam[],
+    required: false,
+    default: () => [],
+  },
+  bind: {
+    type: String,
+    required: true,
+  },
+});
+
+// 流程表单字段，发起人字段
+const formFieldOptions = useFormFieldsAndStartUser();
+
+/** 添加请求配置项 */
+function addHttpRequestParam(arr: HttpRequestParam[]) {
+  arr.push({
+    key: '',
+    type: BpmHttpRequestParamTypeEnum.FIXED_VALUE,
+    value: '',
+  });
+}
+
+/** 删除请求配置项 */
+function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
+  arr.splice(index, 1);
+}
+</script>
+<template>
+  <FormItem
+    label="请求头"
+    :label-col="{ span: 24 }"
+    :wrapper-col="{ span: 24 }"
+  >
+    <Row :gutter="8" v-for="(item, index) in props.header" :key="index">
+      <Col :span="7">
+        <FormItem
+          :name="[bind, 'header', index, 'key']"
+          :rules="{
+            required: true,
+            message: '参数名不能为空',
+            trigger: ['blur', 'change'],
+          }"
+        >
+          <Input placeholder="参数名不能为空" v-model:value="item.key" />
+        </FormItem>
+      </Col>
+      <Col :span="5">
+        <Select v-model:value="item.type">
+          <SelectOption
+            v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
+            :key="types.value"
+            :label="types.label"
+            :value="types.value"
+          >
+            {{ types.label }}
+          </SelectOption>
+        </Select>
+      </Col>
+      <Col :span="10">
+        <FormItem
+          :name="[bind, 'header', index, 'value']"
+          :rules="{
+            required: true,
+            message: '参数值不能为空',
+            trigger: ['blur', 'change'],
+          }"
+          v-if="item.type === BpmHttpRequestParamTypeEnum.FIXED_VALUE"
+        >
+          <Input placeholder="请求头" v-model:value="item.value" />
+        </FormItem>
+        <FormItem
+          :name="[bind, 'header', index, 'value']"
+          :rules="{
+            required: true,
+            message: '参数值不能为空',
+            trigger: 'change',
+          }"
+          v-if="item.type === BpmHttpRequestParamTypeEnum.FROM_FORM"
+        >
+          <Select v-model:value="item.value" placeholder="请选择表单字段">
+            <SelectOption
+              v-for="(field, fIdx) in formFieldOptions"
+              :key="fIdx"
+              :label="field.title"
+              :value="field.field"
+              :disabled="!field.required"
+            >
+              {{ field.title }}
+            </SelectOption>
+          </Select>
+        </FormItem>
+      </Col>
+      <Col :span="2">
+        <div class="flex h-[32px] items-center">
+          <Trash2
+            class="size-4 cursor-pointer text-red-500"
+            @click="deleteHttpRequestParam(props.header, index)"
+          />
+        </div>
+      </Col>
+    </Row>
+    <Button
+      type="link"
+      @click="addHttpRequestParam(props.header)"
+      class="flex items-center"
+    >
+      <template #icon>
+        <Plus class="size-[18px]" />
+      </template>
+      添加一行
+    </Button>
+  </FormItem>
+  <FormItem
+    label="请求体"
+    :label-col="{ span: 24 }"
+    :wrapper-col="{ span: 24 }"
+  >
+    <Row :gutter="8" v-for="(item, index) in props.body" :key="index">
+      <Col :span="7">
+        <FormItem
+          :name="[bind, 'body', index, 'key']"
+          :rules="{
+            required: true,
+            message: '参数名不能为空',
+            trigger: ['blur', 'change'],
+          }"
+        >
+          <Input placeholder="参数名" v-model:value="item.key" />
+        </FormItem>
+      </Col>
+      <Col :span="5">
+        <Select v-model:value="item.type">
+          <SelectOption
+            v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
+            :key="types.value"
+            :label="types.label"
+            :value="types.value"
+          >
+            {{ types.label }}
+          </SelectOption>
+        </Select>
+      </Col>
+      <Col :span="10">
+        <FormItem
+          :name="[bind, 'body', index, 'value']"
+          :rules="{
+            required: true,
+            message: '参数值不能为空',
+            trigger: ['blur', 'change'],
+          }"
+          v-if="item.type === BpmHttpRequestParamTypeEnum.FIXED_VALUE"
+        >
+          <Input placeholder="参数值" v-model:value="item.value" />
+        </FormItem>
+        <FormItem
+          :name="[bind, 'body', index, 'value']"
+          :rules="{
+            required: true,
+            message: '参数值不能为空',
+            trigger: 'change',
+          }"
+          v-if="item.type === BpmHttpRequestParamTypeEnum.FROM_FORM"
+        >
+          <Select v-model:value="item.value" placeholder="请选择表单字段">
+            <SelectOption
+              v-for="(field, fIdx) in formFieldOptions"
+              :key="fIdx"
+              :label="field.title"
+              :value="field.field"
+              :disabled="!field.required"
+            >
+              {{ field.title }}
+            </SelectOption>
+          </Select>
+        </FormItem>
+      </Col>
+      <Col :span="2">
+        <div class="flex h-[32px] items-center">
+          <Trash2
+            class="size-4 cursor-pointer text-red-500"
+            @click="deleteHttpRequestParam(props.body, index)"
+          />
+        </div>
+      </Col>
+    </Row>
+    <Button
+      type="link"
+      @click="addHttpRequestParam(props.body)"
+      class="flex items-center"
+    >
+      <template #icon>
+        <Plus class="size-[18px]" />
+      </template>
+      添加一行
+    </Button>
+  </FormItem>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue
new file mode 100644
index 000000000..6f96dc4cd
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { toRefs, watch } from 'vue';
+
+import { Plus, Trash2 } from '@vben/icons';
+
+import {
+  Alert,
+  Button,
+  Col,
+  FormItem,
+  Input,
+  Row,
+  Select,
+  SelectOption,
+} from 'ant-design-vue';
+
+import { useFormFields } from '../../../helpers';
+import HttpRequestParamSetting from './http-request-param-setting.vue';
+
+defineOptions({ name: 'HttpRequestSetting' });
+
+const props = defineProps({
+  setting: {
+    type: Object,
+    required: true,
+  },
+  responseEnable: {
+    type: Boolean,
+    required: true,
+  },
+  formItemPrefix: {
+    type: String,
+    required: true,
+  },
+});
+
+const emits = defineEmits(['update:setting']);
+
+const { setting } = toRefs(props);
+
+watch(
+  () => setting,
+  (val) => {
+    emits('update:setting', val);
+  },
+);
+
+/** 流程表单字段 */
+const formFields = useFormFields();
+
+/** 添加 HTTP 请求返回值设置项 */
+function addHttpResponseSetting(responseSetting: Record<string, string>[]) {
+  responseSetting.push({
+    key: '',
+    value: '',
+  });
+}
+
+/** 删除 HTTP 请求返回值设置项 */
+function deleteHttpResponseSetting(
+  responseSetting: Record<string, string>[],
+  index: number,
+) {
+  responseSetting.splice(index, 1);
+}
+</script>
+<template>
+  <FormItem>
+    <Alert
+      message="仅支持 POST 请求，以请求体方式接收参数"
+      type="warning"
+      show-icon
+      :closable="false"
+    />
+  </FormItem>
+  <!-- 请求地址-->
+  <FormItem
+    label="请求地址"
+    :label-col="{ span: 24 }"
+    :wrapper-col="{ span: 24 }"
+    :name="[formItemPrefix, 'url']"
+    :rules="{
+      required: true,
+      message: '请求地址不能为空',
+      trigger: ['blur', 'change'],
+    }"
+  >
+    <Input v-model:value="setting.url" placeholder="请输入请求地址" />
+  </FormItem>
+  <!-- 请求头，请求体设置-->
+  <HttpRequestParamSetting
+    :header="setting.header"
+    :body="setting.body"
+    :bind="formItemPrefix"
+  />
+  <!-- 返回值设置-->
+  <div v-if="responseEnable">
+    <FormItem
+      label="返回值"
+      :label-col="{ span: 24 }"
+      :wrapper-col="{ span: 24 }"
+    >
+      <Alert
+        message="通过请求返回值, 可以修改流程表单的值"
+        type="warning"
+        show-icon
+        :closable="false"
+      />
+    </FormItem>
+    <FormItem :wrapper-col="{ span: 24 }">
+      <Row
+        :gutter="8"
+        v-for="(item, index) in setting.response"
+        :key="index"
+        class="mb-2"
+      >
+        <Col :span="10">
+          <FormItem
+            :name="[formItemPrefix, 'response', index, 'key']"
+            :rules="{
+              required: true,
+              message: '表单字段不能为空',
+              trigger: ['blur', 'change'],
+            }"
+          >
+            <Select
+              v-model:value="item.key"
+              placeholder="请选择表单字段"
+              allow-clear
+            >
+              <SelectOption
+                v-for="(field, fIdx) in formFields"
+                :key="fIdx"
+                :label="field.title"
+                :value="field.field"
+                :disabled="!field.required"
+              >
+                {{ field.title }}
+              </SelectOption>
+            </Select>
+          </FormItem>
+        </Col>
+        <Col :span="12">
+          <FormItem
+            :name="[formItemPrefix, 'response', index, 'value']"
+            :rules="{
+              required: true,
+              message: '请求返回字段不能为空',
+              trigger: ['blur', 'change'],
+            }"
+          >
+            <Input v-model:value="item.value" placeholder="请求返回字段" />
+          </FormItem>
+        </Col>
+        <Col :span="2">
+          <div class="flex h-[32px] items-center">
+            <Trash2
+              class="size-4 cursor-pointer text-red-500"
+              @click="deleteHttpResponseSetting(setting.response!, index)"
+            />
+          </div>
+        </Col>
+      </Row>
+      <Button
+        type="link"
+        @click="addHttpResponseSetting(setting.response!)"
+        class="flex items-center"
+      >
+        <template #icon>
+          <Plus class="size-[18px]" />
+        </template>
+        添加一行
+      </Button>
+    </FormItem>
+  </div>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue
new file mode 100644
index 000000000..328d1662b
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import {
+  Alert,
+  Divider,
+  Form,
+  FormItem,
+  Input,
+  Switch,
+  TypographyText,
+} from 'ant-design-vue';
+
+import HttpRequestParamSetting from './http-request-param-setting.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true,
+  },
+  formFieldOptions: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const listenerFormRef = ref();
+
+const configForm = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue);
+  },
+});
+
+const taskListener = ref([
+  {
+    name: '创建任务',
+    type: 'Create',
+  },
+  {
+    name: '指派任务执行人员',
+    type: 'Assign',
+  },
+  {
+    name: '完成任务',
+    type: 'Complete',
+  },
+]);
+
+async function validate() {
+  if (!listenerFormRef.value) return false;
+  return await listenerFormRef.value.validate();
+}
+
+defineExpose({ validate });
+</script>
+<template>
+  <Form ref="listenerFormRef" :model="configForm" :label-col="{ span: 24 }">
+    <div
+      v-for="(listener, listenerIdx) in taskListener"
+      :key="listenerIdx"
+      class="pl-2"
+    >
+      <Divider orientation="left">
+        <TypographyText tag="b" size="large">
+          {{ listener.name }}
+        </TypographyText>
+      </Divider>
+      <FormItem>
+        <Switch
+          v-model:checked="configForm[`task${listener.type}ListenerEnable`]"
+          checked-children="开启"
+          un-checked-children="关闭"
+        />
+      </FormItem>
+      <div v-if="configForm[`task${listener.type}ListenerEnable`]">
+        <FormItem>
+          <Alert
+            message="仅支持 POST 请求，以请求体方式接收参数"
+            type="warning"
+            show-icon
+            :closable="false"
+          />
+        </FormItem>
+        <FormItem
+          label="请求地址"
+          :name="`task${listener.type}ListenerPath`"
+          :rules="{
+            required: true,
+            message: '请求地址不能为空',
+            trigger: ['blur', 'change'],
+          }"
+        >
+          <Input
+            v-model:value="configForm[`task${listener.type}ListenerPath`]"
+          />
+        </FormItem>
+        <HttpRequestParamSetting
+          :header="configForm[`task${listener.type}Listener`].header"
+          :body="configForm[`task${listener.type}Listener`].body"
+          :bind="`task${listener.type}Listener`"
+        />
+      </div>
+    </div>
+  </Form>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue
new file mode 100644
index 000000000..e42df7d24
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue
@@ -0,0 +1,294 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import type { RouterSetting, SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Button,
+  Card,
+  Col,
+  Form,
+  FormItem,
+  Input,
+  message,
+  Row,
+  Select,
+  SelectOption,
+} from 'ant-design-vue';
+
+import { ConditionType, NodeType } from '../../consts';
+import { useNodeName, useWatchNode } from '../../helpers';
+import Condition from './modules/condition.vue';
+
+defineOptions({ name: 'RouterNodeConfig' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+const processNodeTree = inject<Ref<SimpleFlowNode>>('processNodeTree');
+
+/** 当前节点 */
+const currentNode = useWatchNode(props);
+/** 节点名称 */
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+  NodeType.ROUTER_BRANCH_NODE,
+);
+const routerGroups = ref<RouterSetting[]>([]);
+const nodeOptions = ref<any[]>([]);
+const conditionRef = ref<any[]>([]);
+const formRef = ref();
+
+/** 校验节点配置 */
+async function validateConfig() {
+  // 校验路由分支选择
+  const routeIdValid = await formRef.value.validate().catch(() => false);
+  if (!routeIdValid) {
+    message.warning('请配置路由目标节点');
+    return false;
+  }
+
+  // 校验条件规则
+  let valid = true;
+  for (const item of conditionRef.value) {
+    if (item && !(await item.validate())) {
+      valid = false;
+    }
+  }
+  if (!valid) return false;
+
+  // 获取节点显示文本，如果为空，校验不通过
+  const showText = getShowText();
+  if (!showText) return false;
+
+  return true;
+}
+
+/** 保存配置 */
+async function saveConfig() {
+  // 校验配置
+  if (!(await validateConfig())) {
+    return false;
+  }
+  // 保存配置
+  currentNode.value.name = nodeName.value!;
+  currentNode.value.showText = getShowText();
+  currentNode.value.routerGroups = routerGroups.value;
+  drawerApi.close();
+  return true;
+}
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  title: nodeName.value,
+  onConfirm: saveConfig,
+});
+
+/** 打开路由节点配置抽屉，由父组件调用 */
+function openDrawer(node: SimpleFlowNode) {
+  nodeOptions.value = [];
+  getRouterNode(processNodeTree?.value);
+  routerGroups.value = [];
+  nodeName.value = node.name;
+  if (node.routerGroups) {
+    routerGroups.value = node.routerGroups;
+  }
+  drawerApi.open();
+}
+
+/** 获取显示文本 */
+function getShowText() {
+  if (
+    !routerGroups.value ||
+    !Array.isArray(routerGroups.value) ||
+    routerGroups.value.length <= 0
+  ) {
+    message.warning('请配置路由！');
+    return '';
+  }
+  for (const route of routerGroups.value) {
+    if (!route.nodeId || !route.conditionType) {
+      message.warning('请完善路由配置项！');
+      return '';
+    }
+    if (
+      route.conditionType === ConditionType.EXPRESSION &&
+      !route.conditionExpression
+    ) {
+      message.warning('请完善路由配置项！');
+      return '';
+    }
+    if (route.conditionType === ConditionType.RULE) {
+      for (const condition of route.conditionGroups.conditions) {
+        for (const rule of condition.rules) {
+          if (!rule.leftSide || !rule.rightSide) {
+            message.warning('请完善路由配置项！');
+            return '';
+          }
+        }
+      }
+    }
+  }
+  return `${routerGroups.value.length}条路由分支`;
+}
+
+/** 添加路由分支 */
+function addRouterGroup() {
+  routerGroups.value.push({
+    nodeId: undefined,
+    conditionType: ConditionType.RULE,
+    conditionExpression: '',
+    conditionGroups: {
+      and: true,
+      conditions: [
+        {
+          and: true,
+          rules: [
+            {
+              opCode: '==',
+              leftSide: undefined,
+              rightSide: '',
+            },
+          ],
+        },
+      ],
+    },
+  });
+}
+
+/** 删除路由分支 */
+function deleteRouterGroup(index: number) {
+  routerGroups.value.splice(index, 1);
+}
+
+/** 递归获取所有节点 */
+function getRouterNode(node: any) {
+  // TODO 最好还需要满足以下要求
+  // 并行分支、包容分支内部节点不能跳转到外部节点
+  // 条件分支节点可以向上跳转到外部节点
+  while (true) {
+    if (!node) break;
+    if (
+      node.type !== NodeType.ROUTER_BRANCH_NODE &&
+      node.type !== NodeType.CONDITION_NODE
+    ) {
+      nodeOptions.value.push({
+        label: node.name,
+        value: node.id,
+      });
+    }
+    if (!node.childNode || node.type === NodeType.END_EVENT_NODE) {
+      break;
+    }
+    if (node.conditionNodes && node.conditionNodes.length > 0) {
+      node.conditionNodes.forEach((item: any) => {
+        getRouterNode(item);
+      });
+    }
+    node = node.childNode;
+  }
+}
+
+defineExpose({ openDrawer }); // 暴露方法给父组件
+</script>
+<template>
+  <Drawer class="w-[630px]">
+    <template #title>
+      <div class="flex items-center">
+        <Input
+          v-if="showInput"
+          type="text"
+          class="mr-2 w-48"
+          @blur="blurEvent()"
+          v-model:value="nodeName"
+          :placeholder="nodeName"
+        />
+        <div
+          v-else
+          class="flex cursor-pointer items-center"
+          @click="clickIcon()"
+        >
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="ep:edit-pen" />
+        </div>
+      </div>
+    </template>
+
+    <Form ref="formRef" :model="{ routerGroups }">
+      <Card
+        :body-style="{ padding: '10px' }"
+        class="mt-4"
+        v-for="(item, index) in routerGroups"
+        :key="index"
+      >
+        <template #title>
+          <div class="flex h-16 w-full items-center justify-between">
+            <div class="flex items-center font-normal">
+              <span class="font-medium">路由{{ index + 1 }}</span>
+              <FormItem
+                class="mb-0 ml-4 inline-block w-[180px]"
+                :name="['routerGroups', index, 'nodeId']"
+                :rules="{
+                  required: true,
+                  message: '路由目标节点不能为空',
+                  trigger: 'change',
+                }"
+              >
+                <Select
+                  v-model:value="item.nodeId"
+                  placeholder="请选择路由目标节点"
+                  allow-clear
+                >
+                  <SelectOption
+                    v-for="node in nodeOptions"
+                    :key="node.value"
+                    :value="node.value"
+                  >
+                    {{ node.label }}
+                  </SelectOption>
+                </Select>
+              </FormItem>
+            </div>
+            <Button
+              v-if="routerGroups.length > 1"
+              shape="circle"
+              class="flex items-center justify-center"
+              @click="deleteRouterGroup(index)"
+            >
+              <template #icon>
+                <IconifyIcon icon="ep:close" />
+              </template>
+            </Button>
+          </div>
+        </template>
+        <Condition
+          :ref="(el) => (conditionRef[index] = el)"
+          :model-value="routerGroups[index] as Record<string, any>"
+          @update:model-value="(val) => (routerGroups[index] = val)"
+        />
+      </Card>
+    </Form>
+
+    <Row class="mt-4">
+      <Col :span="24">
+        <Button
+          class="flex items-center p-0"
+          type="link"
+          @click="addRouterGroup"
+        >
+          <template #icon>
+            <IconifyIcon icon="ep:setting" />
+          </template>
+          新增路由分支
+        </Button>
+      </Col>
+    </Row>
+  </Drawer>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
index 348a47317..bcdb3d9a2 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
@@ -37,12 +37,14 @@ import {
 } from '../../helpers';
 
 defineOptions({ name: 'StartUserNodeConfig' });
+
 const props = defineProps({
   flowNode: {
     type: Object as () => SimpleFlowNode,
     required: true,
   },
 });
+
 // 可发起流程的用户编号
 const startUserIds = inject<Ref<any[]>>('startUserIds');
 // 可发起流程的部门编号
@@ -59,10 +61,12 @@ const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
 );
 // 激活的 Tab 标签页
 const activeTabName = ref('user');
+
 // 表单字段权限配置
 const { formType, fieldsPermissionConfig, getNodeConfigFormFields } =
   useFormFieldsPermission(FieldPermissionType.WRITE);
-const getUserNicknames = (userIds: number[]): string => {
+
+function getUserNicknames(userIds: number[]): string {
   if (!userIds || userIds.length === 0) {
     return '';
   }
@@ -74,9 +78,9 @@ const getUserNicknames = (userIds: number[]): string => {
     }
   });
   return nicknames.join(',');
-};
+}
 
-const getDeptNames = (deptIds: number[]): string => {
+function getDeptNames(deptIds: number[]): string {
   if (!deptIds || deptIds.length === 0) {
     return '';
   }
@@ -88,14 +92,14 @@ const getDeptNames = (deptIds: number[]): string => {
     }
   });
   return deptNames.join(',');
-};
+}
 
 // 使用 VbenDrawer
 const [Drawer, drawerApi] = useVbenDrawer({
   header: true,
   closable: true,
   onCancel() {
-    drawerApi.close();
+    drawerApi.setState({ isOpen: false });
   },
   onConfirm() {
     saveConfig();
@@ -103,7 +107,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 });
 
 // 保存配置
-const saveConfig = async () => {
+async function saveConfig() {
   activeTabName.value = 'user';
   currentNode.value.name = nodeName.value!;
   currentNode.value.showText = '已设置';
@@ -111,20 +115,20 @@ const saveConfig = async () => {
   currentNode.value.fieldsPermission = fieldsPermissionConfig.value;
   // 设置发起人的按钮权限
   currentNode.value.buttonsSetting = START_USER_BUTTON_SETTING;
-  drawerApi.close();
+  drawerApi.setState({ isOpen: false });
   return true;
-};
+}
 
 // 显示发起人节点配置，由父组件传过来
-const showStartUserNodeConfig = (node: SimpleFlowNode) => {
+function showStartUserNodeConfig(node: SimpleFlowNode) {
   nodeName.value = node.name;
   // 表单字段权限
   getNodeConfigFormFields(node.fieldsPermission);
   drawerApi.open();
-};
+}
 
 /** 批量更新权限 */
-const updatePermission = (type: string) => {
+function updatePermission(type: string) {
   fieldsPermissionConfig.value.forEach((field) => {
     if (type === 'READ') {
       field.permission = FieldPermissionType.READ;
@@ -134,7 +138,7 @@ const updatePermission = (type: string) => {
       field.permission = FieldPermissionType.NONE;
     }
   });
-};
+}
 
 /**
  * 暴露方法给父组件
@@ -289,4 +293,3 @@ defineExpose({ showStartUserNodeConfig });
     </Tabs>
   </Drawer>
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
new file mode 100644
index 000000000..85b0726aa
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
@@ -0,0 +1,692 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+import type { SelectValue } from 'ant-design-vue/es/select';
+
+import type {
+  FormTriggerSetting,
+  SimpleFlowNode,
+  TriggerSetting,
+} from '../../consts';
+
+import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon, Trash2 } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import {
+  Button,
+  Card,
+  Col,
+  Divider,
+  Form,
+  FormItem,
+  Input,
+  message,
+  Row,
+  Select,
+  SelectOption,
+  Tag,
+} from 'ant-design-vue';
+
+import {
+  DEFAULT_CONDITION_GROUP_VALUE,
+  NodeType,
+  TRIGGER_TYPES,
+  TriggerTypeEnum,
+} from '../../consts';
+import {
+  getConditionShowText,
+  useFormFields,
+  useFormFieldsAndStartUser,
+  useNodeName,
+  useWatchNode,
+} from '../../helpers';
+import ConditionDialog from './modules/condition-dialog.vue';
+import HttpRequestSetting from './modules/http-request-setting.vue';
+
+defineOptions({
+  name: 'TriggerNodeConfig',
+});
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+const { proxy } = getCurrentInstance() as any;
+
+// 抽屉配置
+const [Drawer, drawerApi] = useVbenDrawer({
+  header: true,
+  closable: true,
+  title: '',
+  onConfirm() {
+    saveConfig();
+  },
+});
+
+// 当前节点
+const currentNode = useWatchNode(props);
+// 节点名称
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+  NodeType.TRIGGER_NODE,
+);
+// 触发器表单配置
+const formRef = ref(); // 表单 Ref
+
+// 表单校验规则
+const formRules: Record<string, Rule[]> = reactive({
+  type: [{ required: true, message: '触发器类型不能为空', trigger: 'change' }],
+  'httpRequestSetting.url': [
+    { required: true, message: '请求地址不能为空', trigger: 'blur' },
+  ],
+});
+
+// 触发器配置表单数据
+const configForm = ref<TriggerSetting>({
+  type: TriggerTypeEnum.HTTP_REQUEST,
+  httpRequestSetting: {
+    url: '',
+    header: [],
+    body: [],
+    response: [],
+  },
+  formSettings: [
+    {
+      conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+      updateFormFields: {},
+      deleteFields: [],
+    },
+  ],
+});
+// 流程表单字段
+const formFields = useFormFields();
+
+// 可选的修改的表单字段
+const optionalUpdateFormFields = computed(() => {
+  return formFields.map((field) => ({
+    title: field.title,
+    field: field.field,
+    disabled: false,
+  }));
+});
+
+let originalSetting: TriggerSetting | undefined;
+
+/** 触发器类型改变了 */
+function changeTriggerType() {
+  if (configForm.value.type === TriggerTypeEnum.HTTP_REQUEST) {
+    configForm.value.httpRequestSetting =
+      originalSetting?.type === TriggerTypeEnum.HTTP_REQUEST &&
+      originalSetting.httpRequestSetting
+        ? originalSetting.httpRequestSetting
+        : {
+            url: '',
+            header: [],
+            body: [],
+            response: [],
+          };
+    configForm.value.formSettings = undefined;
+    return;
+  }
+
+  if (configForm.value.type === TriggerTypeEnum.HTTP_CALLBACK) {
+    configForm.value.httpRequestSetting =
+      originalSetting?.type === TriggerTypeEnum.HTTP_CALLBACK &&
+      originalSetting.httpRequestSetting
+        ? originalSetting.httpRequestSetting
+        : {
+            url: '',
+            header: [],
+            body: [],
+            response: [],
+          };
+    configForm.value.formSettings = undefined;
+    return;
+  }
+
+  if (configForm.value.type === TriggerTypeEnum.FORM_UPDATE) {
+    configForm.value.formSettings =
+      originalSetting?.type === TriggerTypeEnum.FORM_UPDATE &&
+      originalSetting.formSettings
+        ? originalSetting.formSettings
+        : [
+            {
+              conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+              updateFormFields: {},
+              deleteFields: [],
+            },
+          ];
+    configForm.value.httpRequestSetting = undefined;
+    return;
+  }
+
+  if (configForm.value.type === TriggerTypeEnum.FORM_DELETE) {
+    configForm.value.formSettings =
+      originalSetting?.type === TriggerTypeEnum.FORM_DELETE &&
+      originalSetting.formSettings
+        ? originalSetting.formSettings
+        : [
+            {
+              conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+              updateFormFields: undefined,
+              deleteFields: [],
+            },
+          ];
+    configForm.value.httpRequestSetting = undefined;
+  }
+}
+
+/** 添加新的修改表单设置 */
+function addFormSetting() {
+  configForm.value.formSettings!.push({
+    conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+    updateFormFields: {},
+    deleteFields: [],
+  });
+}
+
+/** 删除修改表单设置 */
+function deleteFormSetting(index: number) {
+  configForm.value.formSettings!.splice(index, 1);
+}
+
+/** 添加条件配置 */
+function addFormSettingCondition(
+  index: number,
+  formSetting: FormTriggerSetting,
+) {
+  const conditionDialog = proxy.$refs[`condition-${index}`][0];
+  // TODO: jason Modal 使用 useVbenModal 初始化，弹出使用modalApi.setData(formSetting).open()
+  conditionDialog.open(formSetting);
+}
+
+/** 删除条件配置 */
+function deleteFormSettingCondition(formSetting: FormTriggerSetting) {
+  formSetting.conditionType = undefined;
+}
+
+/** 打开条件配置弹窗 */
+function openFormSettingCondition(
+  index: number,
+  formSetting: FormTriggerSetting,
+) {
+  const conditionDialog = proxy.$refs[`condition-${index}`][0];
+  conditionDialog.open(formSetting);
+}
+
+/** 处理条件配置保存 */
+function handleConditionUpdate(index: number, condition: any) {
+  if (configForm.value.formSettings![index]) {
+    configForm.value.formSettings![index].conditionType =
+      condition.conditionType;
+    configForm.value.formSettings![index].conditionExpression =
+      condition.conditionExpression;
+    configForm.value.formSettings![index].conditionGroups =
+      condition.conditionGroups;
+  }
+}
+// 包含发起人字段的表单字段
+const includeStartUserFormFields = useFormFieldsAndStartUser();
+/** 条件配置展示 */
+function showConditionText(formSetting: FormTriggerSetting) {
+  return getConditionShowText(
+    formSetting.conditionType,
+    formSetting.conditionExpression,
+    formSetting.conditionGroups,
+    includeStartUserFormFields,
+  );
+}
+
+/** 添加修改字段设置项 */
+function addFormFieldSetting(formSetting: FormTriggerSetting) {
+  if (!formSetting) return;
+  if (!formSetting.updateFormFields) {
+    formSetting.updateFormFields = {};
+  }
+  formSetting.updateFormFields[''] = undefined;
+}
+
+/** 更新字段 KEY */
+function updateFormFieldKey(
+  formSetting: FormTriggerSetting,
+  oldKey: string,
+  newKey: SelectValue,
+) {
+  if (!formSetting?.updateFormFields || !newKey) return;
+  const value = formSetting.updateFormFields[oldKey];
+  delete formSetting.updateFormFields[oldKey];
+  formSetting.updateFormFields[String(newKey)] = value;
+}
+
+/** 删除修改字段设置项 */
+function deleteFormFieldSetting(formSetting: FormTriggerSetting, key: string) {
+  if (!formSetting?.updateFormFields) return;
+  delete formSetting.updateFormFields[key];
+}
+
+/** 保存配置 */
+async function saveConfig() {
+  if (!formRef.value) return false;
+  const valid = await formRef.value.validate();
+  if (!valid) return false;
+  const showText = getShowText();
+  if (!showText) return false;
+  currentNode.value.name = nodeName.value!;
+  currentNode.value.showText = showText;
+  switch (configForm.value.type) {
+    case TriggerTypeEnum.FORM_DELETE: {
+      configForm.value.httpRequestSetting = undefined;
+      // 清理修改字段相关的数据
+      configForm.value.formSettings?.forEach((setting) => {
+        setting.updateFormFields = undefined;
+      });
+
+      break;
+    }
+    case TriggerTypeEnum.FORM_UPDATE: {
+      configForm.value.httpRequestSetting = undefined;
+      // 清理删除字段相关的数据
+      configForm.value.formSettings?.forEach((setting) => {
+        setting.deleteFields = undefined;
+      });
+
+      break;
+    }
+    case TriggerTypeEnum.HTTP_REQUEST: {
+      configForm.value.formSettings = undefined;
+
+      break;
+    }
+    // No default
+  }
+  currentNode.value.triggerSetting = configForm.value;
+  drawerApi.close();
+  return true;
+}
+
+/** 获取节点展示内容 */
+function getShowText(): string {
+  let showText = '';
+  switch (configForm.value.type) {
+    case TriggerTypeEnum.FORM_DELETE: {
+      for (const [index, setting] of configForm.value.formSettings!.entries()) {
+        if (!setting.deleteFields || setting.deleteFields.length === 0) {
+          message.warning(`请选择表单设置${index + 1}要删除的字段`);
+          return '';
+        }
+      }
+      showText = '删除表单数据';
+
+      break;
+    }
+    case TriggerTypeEnum.FORM_UPDATE: {
+      for (const [index, setting] of configForm.value.formSettings!.entries()) {
+        if (
+          !setting.updateFormFields ||
+          Object.keys(setting.updateFormFields).length === 0
+        ) {
+          message.warning(`请添加表单设置${index + 1}的修改字段`);
+          return '';
+        }
+      }
+      showText = '修改表单数据';
+
+      break;
+    }
+    case TriggerTypeEnum.HTTP_CALLBACK:
+    case TriggerTypeEnum.HTTP_REQUEST: {
+      showText = `${configForm.value.httpRequestSetting?.url}`;
+
+      break;
+    }
+    // No default
+  }
+  return showText;
+}
+
+/** 显示触发器节点配置， 由父组件传过来 */
+function showTriggerNodeConfig(node: SimpleFlowNode) {
+  nodeName.value = node.name;
+  originalSetting = node.triggerSetting
+    ? cloneDeep(node.triggerSetting)
+    : undefined;
+  if (node.triggerSetting) {
+    configForm.value = {
+      type: node.triggerSetting.type,
+      httpRequestSetting: node.triggerSetting.httpRequestSetting || {
+        url: '',
+        header: [],
+        body: [],
+        response: [],
+      },
+      formSettings: node.triggerSetting.formSettings || [
+        {
+          conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+          updateFormFields: {},
+          deleteFields: [],
+        },
+      ],
+    };
+  }
+  drawerApi.open();
+}
+
+// 暴露方法给父组件
+defineExpose({ showTriggerNodeConfig });
+
+onMounted(() => {
+  // 初始化可能需要的操作
+});
+</script>
+<template>
+  <Drawer class="w-[580px]">
+    <template #title>
+      <div class="config-header">
+        <Input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-model:value="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="ep:edit-pen" @click="clickIcon()" />
+        </div>
+      </div>
+    </template>
+    <div>
+      <Form
+        ref="formRef"
+        :model="configForm"
+        :label-col="{ span: 24 }"
+        :wrapper-col="{ span: 24 }"
+        :rules="formRules"
+      >
+        <FormItem label="触发器类型" name="type">
+          <Select v-model:value="configForm.type" @change="changeTriggerType">
+            <SelectOption
+              v-for="(item, index) in TRIGGER_TYPES"
+              :key="index"
+              :value="item.value"
+              :label="item.label"
+            >
+              {{ item.label }}
+            </SelectOption>
+          </Select>
+        </FormItem>
+        <!-- HTTP 请求触发器 -->
+        <div
+          v-if="
+            [
+              TriggerTypeEnum.HTTP_REQUEST,
+              TriggerTypeEnum.HTTP_CALLBACK,
+            ].includes(configForm.type) && configForm.httpRequestSetting
+          "
+        >
+          <HttpRequestSetting
+            v-model:setting="configForm.httpRequestSetting"
+            :response-enable="configForm.type === TriggerTypeEnum.HTTP_REQUEST"
+            form-item-prefix="httpRequestSetting"
+          />
+        </div>
+
+        <!-- 表单数据修改触发器 -->
+        <div v-if="configForm.type === TriggerTypeEnum.FORM_UPDATE">
+          <div
+            v-for="(formSetting, index) in configForm.formSettings"
+            :key="index"
+          >
+            <Card class="mt-4">
+              <template #title>
+                <div class="flex w-full items-center justify-between">
+                  <span>修改表单设置 {{ index + 1 }}</span>
+                  <Button
+                    v-if="configForm.formSettings!.length > 1"
+                    shape="circle"
+                    class="flex items-center justify-center"
+                    @click="deleteFormSetting(index)"
+                  >
+                    <template #icon>
+                      <IconifyIcon icon="ep:close" />
+                    </template>
+                  </Button>
+                </div>
+              </template>
+
+              <ConditionDialog
+                :ref="`condition-${index}`"
+                @update-condition="(val) => handleConditionUpdate(index, val)"
+              />
+              <Row>
+                <Col :span="24">
+                  <div class="cursor-pointer" v-if="formSetting.conditionType">
+                    <Tag
+                      color="success"
+                      closable
+                      class="text-sm"
+                      @close="deleteFormSettingCondition(formSetting)"
+                      @click="openFormSettingCondition(index, formSetting)"
+                    >
+                      {{ showConditionText(formSetting) }}
+                    </Tag>
+                  </div>
+                  <Button
+                    v-else
+                    type="link"
+                    class="flex items-center p-0"
+                    @click="addFormSettingCondition(index, formSetting)"
+                  >
+                    <template #icon>
+                      <IconifyIcon icon="ep:link" />
+                    </template>
+                    添加条件
+                  </Button>
+                </Col>
+              </Row>
+              <Divider>修改表单字段设置</Divider>
+              <!-- 表单字段修改设置 -->
+              <Row
+                :gutter="8"
+                v-for="key in Object.keys(formSetting.updateFormFields || {})"
+                :key="key"
+              >
+                <Col :span="8">
+                  <FormItem>
+                    <Select
+                      :value="key || undefined"
+                      @change="
+                        (newKey) => updateFormFieldKey(formSetting, key, newKey)
+                      "
+                      placeholder="请选择表单字段"
+                      :disabled="key !== ''"
+                      allow-clear
+                    >
+                      <SelectOption
+                        v-for="(field, fIdx) in optionalUpdateFormFields"
+                        :key="fIdx"
+                        :label="field.title"
+                        :value="field.field"
+                        :disabled="field.disabled"
+                      >
+                        {{ field.title }}
+                      </SelectOption>
+                    </Select>
+                  </FormItem>
+                </Col>
+                <Col :span="4">
+                  <FormItem>的值设置为</FormItem>
+                </Col>
+                <Col :span="10">
+                  <FormItem
+                    :name="['formSettings', index, 'updateFormFields', key]"
+                    :rules="{
+                      required: true,
+                      message: '值不能为空',
+                      trigger: 'blur',
+                    }"
+                  >
+                    <Input
+                      v-model:value="formSetting.updateFormFields![key]"
+                      placeholder="请输入值"
+                      allow-clear
+                      :disabled="!key"
+                    />
+                  </FormItem>
+                </Col>
+                <Col :span="2">
+                  <div class="flex h-[32px] items-center">
+                    <Trash2
+                      class="size-4 cursor-pointer text-red-500"
+                      @click="deleteFormFieldSetting(formSetting, key)"
+                    />
+                  </div>
+                </Col>
+              </Row>
+
+              <!-- 添加表单字段按钮 -->
+              <Row>
+                <Col :span="24">
+                  <Button
+                    type="link"
+                    class="flex items-center p-0"
+                    @click="addFormFieldSetting(formSetting)"
+                  >
+                    <template #icon>
+                      <IconifyIcon icon="ep:memo" />
+                    </template>
+                    添加修改字段
+                  </Button>
+                </Col>
+              </Row>
+            </Card>
+          </div>
+
+          <!-- 添加新的设置 -->
+          <Row class="mt-6">
+            <Col :span="24">
+              <Button
+                class="flex items-center p-0"
+                type="link"
+                @click="addFormSetting"
+              >
+                <template #icon>
+                  <IconifyIcon icon="ep:setting" />
+                </template>
+                添加设置
+              </Button>
+            </Col>
+          </Row>
+        </div>
+
+        <!-- 表单数据删除触发器 -->
+        <div v-if="configForm.type === TriggerTypeEnum.FORM_DELETE">
+          <div
+            v-for="(formSetting, index) in configForm.formSettings"
+            :key="index"
+          >
+            <Card class="mt-4">
+              <template #title>
+                <div class="flex w-full items-center justify-between">
+                  <span>删除表单设置 {{ index + 1 }}</span>
+                  <Button
+                    v-if="configForm.formSettings!.length > 1"
+                    shape="circle"
+                    class="flex items-center justify-center"
+                    @click="deleteFormSetting(index)"
+                  >
+                    <template #icon>
+                      <IconifyIcon icon="ep:close" />
+                    </template>
+                  </Button>
+                </div>
+              </template>
+
+              <!-- 条件设置 -->
+              <ConditionDialog
+                :ref="`condition-${index}`"
+                @update-condition="(val) => handleConditionUpdate(index, val)"
+              />
+              <Row>
+                <Col :span="24">
+                  <div class="cursor-pointer" v-if="formSetting.conditionType">
+                    <Tag
+                      color="success"
+                      closable
+                      class="text-sm"
+                      @close="deleteFormSettingCondition(formSetting)"
+                      @click="openFormSettingCondition(index, formSetting)"
+                    >
+                      {{ showConditionText(formSetting) }}
+                    </Tag>
+                  </div>
+                  <Button
+                    v-else
+                    type="link"
+                    class="flex items-center p-0"
+                    @click="addFormSettingCondition(index, formSetting)"
+                  >
+                    <template #icon>
+                      <IconifyIcon icon="ep:link" />
+                    </template>
+                    添加条件
+                  </Button>
+                </Col>
+              </Row>
+
+              <Divider>删除表单字段设置</Divider>
+              <!-- 表单字段删除设置 -->
+              <div class="flex flex-wrap gap-2">
+                <Select
+                  v-model:value="formSetting.deleteFields"
+                  mode="multiple"
+                  placeholder="请选择要删除的字段"
+                  class="w-full"
+                >
+                  <SelectOption
+                    v-for="field in formFields"
+                    :key="field.field"
+                    :label="field.title"
+                    :value="field.field"
+                  >
+                    {{ field.title }}
+                  </SelectOption>
+                </Select>
+              </div>
+            </Card>
+          </div>
+
+          <!-- 添加新的设置 -->
+          <Row class="mt-6">
+            <Col :span="24">
+              <Button
+                class="flex items-center p-0"
+                type="link"
+                @click="addFormSetting"
+              >
+                <template #icon>
+                  <IconifyIcon icon="ep:setting" />
+                </template>
+                添加设置
+              </Button>
+            </Col>
+          </Row>
+        </div>
+      </Form>
+    </div>
+  </Drawer>
+</template>
+<style lang="scss" scoped>
+.config-editable-input {
+  &:focus {
+    outline: 0;
+    border-color: #40a9ff;
+    box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+  }
+}
+</style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
index fdeac0433..1ee36fb1f 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
@@ -34,7 +34,8 @@ import {
   TypographyText,
 } from 'ant-design-vue';
 
-// TODO import { defaultProps4AntTree } from '#/utils/tree';
+import { BpmModelFormType } from '#/utils';
+
 import {
   APPROVE_METHODS,
   APPROVE_TYPE,
@@ -65,20 +66,22 @@ import {
   useNodeName,
   useWatchNode,
 } from '../../helpers';
+import UserTaskListener from './modules/user-task-listener.vue';
 import { convertTimeUnit, getApproveTypeText } from './utils';
 
-// TODO import UserTaskListener from './components/UserTaskListener.vue';
-
 defineOptions({ name: 'UserTaskNodeConfig' });
+
 const props = defineProps({
   flowNode: {
     type: Object as () => SimpleFlowNode,
     required: true,
   },
 });
+
 const emits = defineEmits<{
   findReturnTaskNodes: [nodeList: SimpleFlowNode[]];
 }>();
+
 const deptLevelLabel = computed(() => {
   let label = '部门负责人来源';
   if (
@@ -95,6 +98,7 @@ const deptLevelLabel = computed(() => {
   }
   return label;
 });
+
 // 监控节点的变化
 const currentNode = useWatchNode(props);
 // 抽屉配置
@@ -102,19 +106,19 @@ const [Drawer, drawerApi] = useVbenDrawer({
   header: true,
   closable: true,
   title: '',
-  onCancel() {
-    drawerApi.close();
-  },
   onConfirm() {
     saveConfig();
   },
 });
+
 // 节点名称配置
 const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
   NodeType.USER_TASK_NODE,
 );
+
 // 激活的 Tab 标签页
 const activeTabName = ref('user');
+
 // 表单字段权限设置
 const {
   formType,
@@ -122,10 +126,12 @@ const {
   formFieldOptions,
   getNodeConfigFormFields,
 } = useFormFieldsPermission(FieldPermissionType.READ);
+
 // 表单内用户字段选项, 必须是必填和用户选择器
 const userFieldOnFormOptions = computed(() => {
   return formFieldOptions.filter((item) => item.type === 'UserSelect');
 });
+
 // 表单内部门字段选项, 必须是必填和部门选择器
 const deptFieldOnFormOptions = computed(() => {
   return formFieldOptions.filter((item) => item.type === 'DeptSelect');
@@ -138,7 +144,9 @@ const {
   changeBtnDisplayName,
   btnDisplayNameBlurEvent,
 } = useButtonsSetting();
+
 const approveType = ref(ApproveType.USER);
+
 // 审批人表单设置
 const formRef = ref(); // 表单 Ref
 // 表单校验规则
@@ -200,7 +208,7 @@ const {
 const configForm = tempConfigForm as Ref<UserTaskFormType>;
 
 // 改变审批人设置策略
-const changeCandidateStrategy = () => {
+function changeCandidateStrategy() {
   configForm.value.userIds = [];
   configForm.value.deptIds = [];
   configForm.value.roleIds = [];
@@ -210,16 +218,16 @@ const changeCandidateStrategy = () => {
   configForm.value.formUser = '';
   configForm.value.formDept = '';
   configForm.value.approveMethod = ApproveMethodType.SEQUENTIAL_APPROVE;
-};
+}
 
-// 审批方式改变
-const approveMethodChanged = () => {
+/** 审批方式改变 */
+function approveMethodChanged() {
   configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS;
   if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
     configForm.value.approveRatio = 100;
   }
   formRef.value.clearValidate('approveRatio');
-};
+}
 // 审批拒绝 可退回的节点
 const returnTaskList = ref<SimpleFlowNode[]>([]);
 // 审批人超时未处理设置
@@ -233,49 +241,59 @@ const {
   cTimeoutMaxRemindCount,
 } = useTimeoutHandler();
 
-// TODO 监听器待实现
-// const userTaskListenerRef = ref();
+const userTaskListenerRef = ref();
 
 /** 节点类型名称 */
 const nodeTypeName = computed(() => {
   return currentNode.value.type === NodeType.TRANSACTOR_NODE ? '办理' : '审批';
 });
 
-/** 保存配置 */
-const saveConfig = async () => {
-  // 设置审批节点名称
-  currentNode.value.name = nodeName.value!;
-  // 设置审批类型
-  currentNode.value.approveType = approveType.value;
-  // 如果不是人工审批。返回
-  if (approveType.value !== ApproveType.USER) {
-    currentNode.value.showText = getApproveTypeText(approveType.value);
-    drawerApi.close();
-    return true;
-  }
-  // TODO 监听器待实现
-  // activeTabName.value = 'listener';
-  // await nextTick();
-  activeTabName.value = 'user';
-
+/** 校验节点配置 */
+async function validateConfig() {
   if (!formRef.value) return false;
-  //   TODO 监听器待实现
-  // if (!userTaskListenerRef.value) return false;
-  // const valid =
-  //   (await formRef.value.validate()) &&
-  //   (await userTaskListenerRef.value.validate());
+  if (!userTaskListenerRef.value) return false;
 
-  if (!(await formRef.value.validate())) {
-    activeTabName.value = 'user';
+  // 先进行表单验证，记录验证结果
+  const userFormValid = await formRef.value.validate().catch(() => false);
+  const listenerValid = await userTaskListenerRef.value.validate().catch(() => {
+    return false;
+  });
+  // 如果监听器有错误，切换到监听器Tab
+  if (!listenerValid) {
+    activeTabName.value = 'listener';
+    return false;
+  }
+  // 如果审批人表单有错误，切换到审批人Tab
+  if (!userFormValid) {
+    activeTabName.value = 'user';
+    return false;
   }
-  //   TODO 监听器待实现
-  // if (!(await userTaskListenerRef.value.validate())) {
-  //   activeTabName.value = 'listener';
-  // }
 
   const showText = getShowText();
   if (!showText) return false;
 
+  return true;
+}
+
+/** 保存配置 */
+async function saveConfig() {
+  // 如果不是人工审批，不执行校验，直接返回
+  if (approveType.value !== ApproveType.USER) {
+    currentNode.value.name = nodeName.value!;
+    currentNode.value.approveType = approveType.value;
+    currentNode.value.showText = getApproveTypeText(approveType.value);
+    drawerApi.close();
+    return true;
+  }
+  // 执行校验
+  if (!(await validateConfig())) {
+    return false;
+  }
+  // 设置审批节点名称
+  currentNode.value.name = nodeName.value!;
+  // 设置审批类型
+  currentNode.value.approveType = approveType.value;
+  // 设置审批人设置策略
   currentNode.value.candidateStrategy = configForm.value.candidateStrategy;
   // 处理 candidateParam 参数
   currentNode.value.candidateParam = handleCandidateParam();
@@ -338,13 +356,13 @@ const saveConfig = async () => {
   // 审批意见
   currentNode.value.reasonRequire = configForm.value.reasonRequire;
 
-  currentNode.value.showText = showText;
+  currentNode.value.showText = getShowText();
   drawerApi.close();
   return true;
-};
+}
 
 /** 显示审批节点配置， 由父组件传过来 */
-const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
+function showUserTaskNodeConfig(node: SimpleFlowNode) {
   nodeName.value = node.name;
   // 1 审批类型
   approveType.value =
@@ -423,7 +441,7 @@ const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
   configForm.value.reasonRequire = node?.reasonRequire ?? false;
 
   drawerApi.open();
-};
+}
 
 defineExpose({ showUserTaskNodeConfig }); // 暴露方法给父组件
 
@@ -535,7 +553,7 @@ function useTimeoutHandler() {
 }
 
 /** 批量更新权限 */
-const updatePermission = (type: string) => {
+function updatePermission(type: string) {
   fieldsPermissionConfig.value.forEach((field) => {
     if (type === 'READ') {
       field.permission = FieldPermissionType.READ;
@@ -545,7 +563,8 @@ const updatePermission = (type: string) => {
       field.permission = FieldPermissionType.NONE;
     }
   });
-};
+}
+
 // 在组件初始化时记录初始位置
 onMounted(() => {
   // 固定添加发起人ID字段
@@ -630,11 +649,9 @@ onMounted(() => {
               name="roleIds"
             >
               <Select
-                filterable
                 v-model:value="configForm.roleIds"
                 clearable
                 mode="multiple"
-                style="width: 100%"
               >
                 <SelectOption
                   v-for="item in roleOptions"
@@ -658,16 +675,18 @@ onMounted(() => {
               label="指定部门"
               name="deptIds"
             >
-              <!-- TODO :replace-fields="defaultProps4AntTree" -->
               <TreeSelect
                 v-model:value="configForm.deptIds"
                 :tree-data="deptTreeOptions"
+                :field-names="{
+                  label: 'name',
+                  value: 'id',
+                  children: 'children',
+                }"
                 empty-text="加载中，请稍后"
                 multiple
-                node-key="id"
                 :check-strictly="true"
                 allow-clear
-                style="width: 100%"
                 tree-checkable
               />
             </FormItem>
@@ -677,11 +696,9 @@ onMounted(() => {
               name="postIds"
             >
               <Select
-                filterable
                 v-model:value="configForm.postIds"
                 clearable
                 mode="multiple"
-                style="width: 100%"
               >
                 <SelectOption
                   v-for="item in postOptions"
@@ -699,11 +716,9 @@ onMounted(() => {
               name="userIds"
             >
               <Select
-                filterable
                 v-model:value="configForm.userIds"
                 clearable
                 mode="multiple"
-                style="width: 100%"
               >
                 <SelectOption
                   v-for="item in userOptions"
@@ -723,11 +738,9 @@ onMounted(() => {
               name="userGroups"
             >
               <Select
-                filterable
                 v-model:value="configForm.userGroups"
                 clearable
                 mode="multiple"
-                style="width: 100%"
               >
                 <SelectOption
                   v-for="item in userGroupOptions"
@@ -746,12 +759,7 @@ onMounted(() => {
               label="表单内用户字段"
               name="formUser"
             >
-              <Select
-                filterable
-                v-model:value="configForm.formUser"
-                clearable
-                style="width: 100%"
-              >
+              <Select v-model:value="configForm.formUser" clearable>
                 <SelectOption
                   v-for="(item, idx) in userFieldOnFormOptions"
                   :key="idx"
@@ -771,12 +779,7 @@ onMounted(() => {
               label="表单内部门字段"
               name="formDept"
             >
-              <Select
-                filterable
-                v-model:value="configForm.formDept"
-                clearable
-                style="width: 100%"
-              >
+              <Select v-model:value="configForm.formDept" clearable>
                 <SelectOption
                   v-for="(item, idx) in deptFieldOnFormOptions"
                   :key="idx"
@@ -802,7 +805,7 @@ onMounted(() => {
               :label="deptLevelLabel!"
               name="deptLevel"
             >
-              <Select filterable v-model:value="configForm.deptLevel" clearable>
+              <Select v-model:value="configForm.deptLevel" clearable>
                 <SelectOption
                   v-for="(item, index) in MULTI_LEVEL_DEPT"
                   :key="index"
@@ -821,11 +824,7 @@ onMounted(() => {
               label="流程表达式"
               name="expression"
             >
-              <Textarea
-                v-model:value="configForm.expression"
-                clearable
-                style="width: 100%"
-              />
+              <Textarea v-model:value="configForm.expression" clearable />
             </FormItem>
             <!-- 多人审批/办理 方式 -->
             <FormItem :label="`多人${nodeTypeName}方式`" name="approveMethod">
@@ -890,12 +889,7 @@ onMounted(() => {
                 label="驳回节点"
                 name="returnNodeId"
               >
-                <Select
-                  filterable
-                  v-model:value="configForm.returnNodeId"
-                  clearable
-                  style="width: 100%"
-                >
+                <Select v-model:value="configForm.returnNodeId" clearable>
                   <SelectOption
                     v-for="item in returnTaskList"
                     :key="item.id"
@@ -963,8 +957,7 @@ onMounted(() => {
                   <Col>
                     <FormItem name="timeDuration">
                       <InputNumber
-                        class="mr-2"
-                        :style="{ width: '100px' }"
+                        class="mr-2 mt-0.5"
                         v-model:value="configForm.timeDuration"
                         :min="1"
                         controls-position="right"
@@ -973,7 +966,6 @@ onMounted(() => {
                   </Col>
                   <Col>
                     <Select
-                      filterable
                       v-model:value="timeUnit"
                       class="mr-2"
                       :style="{ width: '100px' }"
@@ -1040,11 +1032,9 @@ onMounted(() => {
               name="assignEmptyHandlerUserIds"
             >
               <Select
-                filterable
                 v-model:value="configForm.assignEmptyHandlerUserIds"
                 clearable
                 mode="multiple"
-                style="width: 100%"
               >
                 <SelectOption
                   v-for="item in userOptions"
@@ -1151,7 +1141,11 @@ onMounted(() => {
           </div>
         </div>
       </TabPane>
-      <TabPane tab="表单字段权限" key="fields" v-if="formType === 10">
+      <TabPane
+        tab="表单字段权限"
+        key="fields"
+        v-if="formType === BpmModelFormType.NORMAL"
+      >
         <div class="p-1">
           <div class="mb-4 text-[16px] font-bold">字段权限</div>
 
@@ -1225,20 +1219,14 @@ onMounted(() => {
           </div>
         </div>
       </TabPane>
-      <TabPane tab="监听器" key="listener">
-        <!-- TODO 待实现 -->
-        <span>待实现</span>
-        <!-- <UserTaskListener
+      <TabPane tab="监听器" key="listener" :force-render="true">
+        <UserTaskListener
           ref="userTaskListenerRef"
-          v-model:value="configForm"
+          v-model="configForm"
           :form-field-options="formFieldOptions"
-        /> -->
+        />
       </TabPane>
     </Tabs>
-    <template #footer>
-      <Button type="primary" @click="saveConfig">确 定</Button>
-      <Button @click="drawerApi.close()">取 消</Button>
-    </template>
   </Drawer>
 </template>
 <style lang="scss" scoped>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/utils.ts b/apps/web-antd/src/components/simple-process-design/components/nodes-config/utils.ts
index c6ab47eca..ee5e06809 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/utils.ts
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/utils.ts
@@ -1,29 +1,29 @@
 import { APPROVE_TYPE, ApproveType, TimeUnitType } from '../../consts';
 
 /** 获取条件节点默认的名称 */
-export const getDefaultConditionNodeName = (
+export function getDefaultConditionNodeName(
   index: number,
   defaultFlow: boolean | undefined,
-): string => {
+): string {
   if (defaultFlow) {
     return '其它情况';
   }
   return `条件${index + 1}`;
-};
+}
 
 /** 获取包容分支条件节点默认的名称 */
-export const getDefaultInclusiveConditionNodeName = (
+export function getDefaultInclusiveConditionNodeName(
   index: number,
   defaultFlow: boolean | undefined,
-): string => {
+): string {
   if (defaultFlow) {
     return '其它情况';
   }
   return `包容条件${index + 1}`;
-};
+}
 
 /** 转换时间单位字符串为枚举值 */
-export const convertTimeUnit = (strTimeUnit: string) => {
+export function convertTimeUnit(strTimeUnit: string) {
   if (strTimeUnit === 'M') {
     return TimeUnitType.MINUTE;
   }
@@ -34,10 +34,10 @@ export const convertTimeUnit = (strTimeUnit: string) => {
     return TimeUnitType.DAY;
   }
   return TimeUnitType.HOUR;
-};
+}
 
 /** 根据审批类型获取对应的文本描述 */
-export const getApproveTypeText = (approveType: ApproveType): string => {
+export function getApproveTypeText(approveType: ApproveType): string {
   let approveTypeText = '';
   APPROVE_TYPE.forEach((item) => {
     if (item.value === approveType) {
@@ -45,4 +45,4 @@ export const getApproveTypeText = (approveType: ApproveType): string => {
     }
   });
   return approveTypeText;
-};
+}
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/copy-task-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/copy-task-node.vue
new file mode 100644
index 000000000..c9bd17190
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/copy-task-node.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input } from 'ant-design-vue';
+
+import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import CopyTaskNodeConfig from '../nodes-config/copy-task-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({
+  name: 'CopyTaskNode',
+});
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+// 定义事件，更新父组件。
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+// 监控节点的变化
+const currentNode = useWatchNode(props);
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(
+  currentNode,
+  NodeType.COPY_TASK_NODE,
+);
+
+const nodeSetting = ref();
+// 打开节点配置
+function openNodeConfig() {
+  if (readonly) {
+    return;
+  }
+  nodeSetting.value.showCopyTaskNodeConfig(currentNode.value);
+  nodeSetting.value.openDrawer();
+}
+
+// 删除节点。更新当前节点为孩子节点
+function deleteNode() {
+  emits('update:flowNode', currentNode.value.childNode);
+}
+</script>
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`,
+        ]"
+      >
+        <div class="node-title-container">
+          <div class="node-title-icon copy-task">
+            <span class="iconfont icon-copy"></span>
+          </div>
+          <Input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.COPY_TASK_NODE) }}
+          </div>
+          <IconifyIcon v-if="!readonly" icon="ep:arrow-right-bold" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="ep:circle-close-filled"
+              :size="18"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <CopyTaskNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue
new file mode 100644
index 000000000..fa83d4ebe
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input } from 'ant-design-vue';
+
+import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import DelayTimerNodeConfig from '../nodes-config/delay-timer-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'DelayTimerNode' });
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+// 定义事件，更新父组件。
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+// 监控节点的变化
+const currentNode = useWatchNode(props);
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(
+  currentNode,
+  NodeType.DELAY_TIMER_NODE,
+);
+
+const nodeSetting = ref();
+// 打开节点配置
+function openNodeConfig() {
+  if (readonly) {
+    return;
+  }
+  nodeSetting.value.openDrawer(currentNode.value);
+}
+
+// 删除节点。更新当前节点为孩子节点
+function deleteNode() {
+  emits('update:flowNode', currentNode.value.childNode);
+}
+</script>
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`,
+        ]"
+      >
+        <div class="node-title-container">
+          <div class="node-title-icon delay-node">
+            <span class="iconfont icon-delay"></span>
+          </div>
+          <Input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.DELAY_TIMER_NODE) }}
+          </div>
+          <IconifyIcon v-if="!readonly" icon="ep:arrow-right-bold" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="ep:circle-close-filled"
+              :size="18"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <DelayTimerNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue
index cccca4dbb..c03fac9c9 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue
@@ -22,7 +22,7 @@ const processInstance = inject<Ref<any>>('processInstance', ref({}));
 
 const processInstanceInfos = ref<any[]>([]); // 流程的审批信息
 
-const nodeClick = () => {
+function nodeClick() {
   if (readonly && processInstance && processInstance.value) {
     console.warn(
       'TODO 只读模式，弹窗显示审批信息',
@@ -30,7 +30,7 @@ const nodeClick = () => {
       processInstanceInfos.value,
     );
   }
-};
+}
 </script>
 <template>
   <div class="end-node-wrapper">
@@ -44,4 +44,3 @@ const nodeClick = () => {
   </div>
   <!-- TODO 审批信息 -->
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue
new file mode 100644
index 000000000..e37edc298
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue
@@ -0,0 +1,282 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { getCurrentInstance, inject, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
+
+import { Button, Input } from 'ant-design-vue';
+
+import {
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE,
+  NODE_DEFAULT_TEXT,
+  NodeType,
+} from '../../consts';
+import { getDefaultConditionNodeName, useTaskStatusClass } from '../../helpers';
+import ConditionNodeConfig from '../nodes-config/condition-node-config.vue';
+import ProcessNodeTree from '../process-node-tree.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'ExclusiveNode' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  findParentNode: [nodeList: SimpleFlowNode[], nodeType: number];
+  recursiveFindParentNode: [
+    nodeList: SimpleFlowNode[],
+    curentNode: SimpleFlowNode,
+    nodeType: number,
+  ];
+  'update:modelValue': [node: SimpleFlowNode | undefined];
+}>();
+
+const { proxy } = getCurrentInstance() as any;
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+const currentNode = ref<SimpleFlowNode>(props.flowNode);
+
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue;
+  },
+);
+
+const showInputs = ref<boolean[]>([]);
+
+// 失去焦点
+function blurEvent(index: number) {
+  showInputs.value[index] = false;
+  const conditionNode = currentNode.value.conditionNodes?.at(
+    index,
+  ) as SimpleFlowNode;
+  conditionNode.name =
+    conditionNode.name ||
+    getDefaultConditionNodeName(
+      index,
+      conditionNode.conditionSetting?.defaultFlow,
+    );
+}
+
+// 点击条件名称
+function clickEvent(index: number) {
+  showInputs.value[index] = true;
+}
+
+function conditionNodeConfig(nodeId: string) {
+  if (readonly) {
+    return;
+  }
+  const conditionNode = proxy.$refs[nodeId][0];
+  conditionNode.open();
+}
+
+// 新增条件
+function addCondition() {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    const len = conditionNodes.length;
+    const lastIndex = len - 1;
+    const conditionData: SimpleFlowNode = {
+      id: `Flow_${generateUUID()}`,
+      name: `条件${len}`,
+      showText: '',
+      type: NodeType.CONDITION_NODE,
+      childNode: undefined,
+      conditionNodes: [],
+      conditionSetting: {
+        defaultFlow: false,
+        conditionType: ConditionType.RULE,
+        conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+      },
+    };
+    conditionNodes.splice(lastIndex, 0, conditionData);
+  }
+}
+
+// 删除条件
+function deleteCondition(index: number) {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    conditionNodes.splice(index, 1);
+    if (conditionNodes.length === 1) {
+      const childNode = currentNode.value.childNode;
+      // 更新此节点为后续孩子节点
+      emits('update:modelValue', childNode);
+    }
+  }
+}
+
+// 移动节点
+function moveNode(index: number, to: number) {
+  // -1 ：向左  1： 向右
+  if (
+    currentNode.value.conditionNodes &&
+    currentNode.value.conditionNodes[index]
+  ) {
+    currentNode.value.conditionNodes[index] =
+      currentNode.value.conditionNodes.splice(
+        index + to,
+        1,
+        currentNode.value.conditionNodes[index],
+      )[0] as SimpleFlowNode;
+  }
+}
+
+// 递归从父节点中查询匹配的节点
+function recursiveFindParentNode(
+  nodeList: SimpleFlowNode[],
+  node: SimpleFlowNode,
+  nodeType: number,
+) {
+  if (!node || node.type === NodeType.START_USER_NODE) {
+    return;
+  }
+  if (node.type === nodeType) {
+    nodeList.push(node);
+  }
+  // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点（NodeType.EXCLUSIVE_NODE) 继续查找
+  emits('findParentNode', nodeList, nodeType);
+}
+</script>
+<template>
+  <div class="branch-node-wrapper">
+    <div class="branch-node-container">
+      <div
+        v-if="readonly"
+        class="branch-node-readonly"
+        :class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
+      >
+        <span class="iconfont icon-exclusive icon-size condition"></span>
+      </div>
+      <Button v-else class="branch-node-add" @click="addCondition">
+        添加条件
+      </Button>
+      <!-- 排他网关节点下面可以多个分支，每个分支第一个节点是条件节点 NodeType.CONDITION_NODE -->
+      <div
+        class="branch-node-item"
+        v-for="(item, index) in currentNode.conditionNodes"
+        :key="index"
+      >
+        <template v-if="index === 0">
+          <div class="branch-line-first-top"></div>
+          <div class="branch-line-first-bottom"></div>
+        </template>
+        <template v-if="index + 1 === currentNode.conditionNodes?.length">
+          <div class="branch-line-last-top"></div>
+          <div class="branch-line-last-bottom"></div>
+        </template>
+        <div class="node-wrapper">
+          <div class="node-container">
+            <div
+              class="node-box"
+              :class="[
+                { 'node-config-error': !item.showText },
+                `${useTaskStatusClass(item.activityStatus)}`,
+              ]"
+            >
+              <div class="branch-node-title-container">
+                <div v-if="!readonly && showInputs[index]">
+                  <Input
+                    type="text"
+                    class="editable-title-input"
+                    @blur="blurEvent(index)"
+                    v-model="item.name"
+                  />
+                </div>
+                <div v-else class="branch-title" @click="clickEvent(index)">
+                  {{ item.name }}
+                </div>
+                <div class="branch-priority">优先级{{ index + 1 }}</div>
+              </div>
+              <div
+                class="branch-node-content"
+                @click="conditionNodeConfig(item.id)"
+              >
+                <div
+                  class="branch-node-text"
+                  :title="item.showText"
+                  v-if="item.showText"
+                >
+                  {{ item.showText }}
+                </div>
+                <div class="branch-node-text" v-else>
+                  {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
+                </div>
+              </div>
+              <div
+                class="node-toolbar"
+                v-if="
+                  !readonly && index + 1 !== currentNode.conditionNodes?.length
+                "
+              >
+                <div class="toolbar-icon">
+                  <IconifyIcon
+                    color="#0089ff"
+                    icon="ep:circle-close-filled"
+                    :size="18"
+                    @click="deleteCondition(index)"
+                  />
+                </div>
+              </div>
+              <div
+                class="branch-node-move move-node-left"
+                v-if="
+                  !readonly &&
+                  index !== 0 &&
+                  index + 1 !== currentNode.conditionNodes?.length
+                "
+                @click="moveNode(index, -1)"
+              >
+                <IconifyIcon icon="ep:arrow-left" />
+              </div>
+
+              <div
+                class="branch-node-move move-node-right"
+                v-if="
+                  !readonly &&
+                  currentNode.conditionNodes &&
+                  index < currentNode.conditionNodes.length - 2
+                "
+                @click="moveNode(index, 1)"
+              >
+                <IconifyIcon icon="ep:arrow-right" />
+              </div>
+            </div>
+            <NodeHandler
+              v-model:child-node="item.childNode"
+              :current-node="item"
+            />
+          </div>
+        </div>
+        <!-- 条件节点配置 -->
+        <ConditionNodeConfig
+          :node-index="index"
+          :condition-node="item"
+          :ref="item.id"
+        />
+        <!-- 递归显示子节点  -->
+        <ProcessNodeTree
+          v-if="item && item.childNode"
+          :parent-node="item"
+          v-model:flow-node="item.childNode"
+          @recursive-find-parent-node="recursiveFindParentNode"
+        />
+      </div>
+    </div>
+    <NodeHandler
+      v-if="currentNode"
+      v-model:child-node="currentNode.childNode"
+      :current-node="currentNode"
+    />
+  </div>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue
new file mode 100644
index 000000000..cad293d7f
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue
@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { getCurrentInstance, inject, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
+
+import { Button, Input } from 'ant-design-vue';
+
+import {
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE,
+  NODE_DEFAULT_TEXT,
+  NodeType,
+} from '../../consts';
+import {
+  getDefaultInclusiveConditionNodeName,
+  useTaskStatusClass,
+} from '../../helpers';
+import ConditionNodeConfig from '../nodes-config/condition-node-config.vue';
+import ProcessNodeTree from '../process-node-tree.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({
+  name: 'InclusiveNode',
+});
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  findParentNode: [nodeList: SimpleFlowNode[], nodeType: number];
+  recursiveFindParentNode: [
+    nodeList: SimpleFlowNode[],
+    curentNode: SimpleFlowNode,
+    nodeType: number,
+  ];
+  'update:modelValue': [node: SimpleFlowNode | undefined];
+}>();
+
+const { proxy } = getCurrentInstance() as any;
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+
+const currentNode = ref<SimpleFlowNode>(props.flowNode);
+
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue;
+  },
+);
+
+const showInputs = ref<boolean[]>([]);
+// 失去焦点
+function blurEvent(index: number) {
+  showInputs.value[index] = false;
+  const conditionNode = currentNode.value.conditionNodes?.at(
+    index,
+  ) as SimpleFlowNode;
+  conditionNode.name =
+    conditionNode.name ||
+    getDefaultInclusiveConditionNodeName(
+      index,
+      conditionNode.conditionSetting?.defaultFlow,
+    );
+}
+
+// 点击条件名称
+function clickEvent(index: number) {
+  showInputs.value[index] = true;
+}
+
+function conditionNodeConfig(nodeId: string) {
+  if (readonly) {
+    return;
+  }
+  const conditionNode = proxy.$refs[nodeId][0];
+  conditionNode.open();
+}
+
+// 新增条件
+function addCondition() {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    const len = conditionNodes.length;
+    const lastIndex = len - 1;
+    const conditionData: SimpleFlowNode = {
+      id: `Flow_${generateUUID()}`,
+      name: `包容条件${len}`,
+      showText: '',
+      type: NodeType.CONDITION_NODE,
+      childNode: undefined,
+      conditionNodes: [],
+      conditionSetting: {
+        defaultFlow: false,
+        conditionType: ConditionType.RULE,
+        conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+      },
+    };
+    conditionNodes.splice(lastIndex, 0, conditionData);
+  }
+}
+
+// 删除条件
+function deleteCondition(index: number) {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    conditionNodes.splice(index, 1);
+    if (conditionNodes.length === 1) {
+      const childNode = currentNode.value.childNode;
+      // 更新此节点为后续孩子节点
+      emits('update:modelValue', childNode);
+    }
+  }
+}
+
+// 移动节点
+function moveNode(index: number, to: number) {
+  // -1 ：向左  1： 向右
+  if (
+    currentNode.value.conditionNodes &&
+    currentNode.value.conditionNodes[index]
+  ) {
+    currentNode.value.conditionNodes[index] =
+      currentNode.value.conditionNodes.splice(
+        index + to,
+        1,
+        currentNode.value.conditionNodes[index],
+      )[0] as SimpleFlowNode;
+  }
+}
+
+// 递归从父节点中查询匹配的节点
+function recursiveFindParentNode(
+  nodeList: SimpleFlowNode[],
+  node: SimpleFlowNode,
+  nodeType: number,
+) {
+  if (!node || node.type === NodeType.START_USER_NODE) {
+    return;
+  }
+  if (node.type === nodeType) {
+    nodeList.push(node);
+  }
+  // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点（NodeType.INCLUSIVE_BRANCH_NODE) 继续查找
+  emits('findParentNode', nodeList, nodeType);
+}
+</script>
+<template>
+  <div class="branch-node-wrapper">
+    <div class="branch-node-container">
+      <div
+        v-if="readonly"
+        class="branch-node-readonly"
+        :class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
+      >
+        <span class="iconfont icon-inclusive icon-size inclusive"></span>
+      </div>
+      <Button v-else class="branch-node-add" @click="addCondition">
+        添加条件
+      </Button>
+      <div
+        class="branch-node-item"
+        v-for="(item, index) in currentNode.conditionNodes"
+        :key="index"
+      >
+        <template v-if="index === 0">
+          <div class="branch-line-first-top"></div>
+          <div class="branch-line-first-bottom"></div>
+        </template>
+        <template v-if="index + 1 === currentNode.conditionNodes?.length">
+          <div class="branch-line-last-top"></div>
+          <div class="branch-line-last-bottom"></div>
+        </template>
+        <div class="node-wrapper">
+          <div class="node-container">
+            <div
+              class="node-box"
+              :class="[
+                { 'node-config-error': !item.showText },
+                `${useTaskStatusClass(item.activityStatus)}`,
+              ]"
+            >
+              <div class="branch-node-title-container">
+                <div v-if="!readonly && showInputs[index]">
+                  <Input
+                    type="text"
+                    class="editable-title-input"
+                    @blur="blurEvent(index)"
+                    v-model="item.name"
+                  />
+                </div>
+                <div v-else class="branch-title" @click="clickEvent(index)">
+                  {{ item.name }}
+                </div>
+              </div>
+              <div
+                class="branch-node-content"
+                @click="conditionNodeConfig(item.id)"
+              >
+                <div
+                  class="branch-node-text"
+                  :title="item.showText"
+                  v-if="item.showText"
+                >
+                  {{ item.showText }}
+                </div>
+                <div class="branch-node-text" v-else>
+                  {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
+                </div>
+              </div>
+              <div
+                class="node-toolbar"
+                v-if="
+                  !readonly && index + 1 !== currentNode.conditionNodes?.length
+                "
+              >
+                <div class="toolbar-icon">
+                  <IconifyIcon
+                    color="#0089ff"
+                    icon="ep:circle-close-filled"
+                    :size="18"
+                    @click="deleteCondition(index)"
+                  />
+                </div>
+              </div>
+              <div
+                class="branch-node-move move-node-left"
+                v-if="
+                  !readonly &&
+                  index !== 0 &&
+                  index + 1 !== currentNode.conditionNodes?.length
+                "
+                @click="moveNode(index, -1)"
+              >
+                <IconifyIcon icon="ep:arrow-left" />
+              </div>
+
+              <div
+                class="branch-node-move move-node-right"
+                v-if="
+                  !readonly &&
+                  currentNode.conditionNodes &&
+                  index < currentNode.conditionNodes.length - 2
+                "
+                @click="moveNode(index, 1)"
+              >
+                <IconifyIcon icon="ep:arrow-right" />
+              </div>
+            </div>
+            <NodeHandler
+              v-model:child-node="item.childNode"
+              :current-node="item"
+            />
+          </div>
+        </div>
+        <!-- 条件节点配置 -->
+        <ConditionNodeConfig
+          :node-index="index"
+          :condition-node="item"
+          :ref="item.id"
+        />
+        <!-- 递归显示子节点  -->
+        <ProcessNodeTree
+          v-if="item && item.childNode"
+          :parent-node="item"
+          v-model:flow-node="item.childNode"
+          @recursive-find-parent-node="recursiveFindParentNode"
+        />
+      </div>
+    </div>
+    <NodeHandler
+      v-if="currentNode"
+      v-model:child-node="currentNode.childNode"
+      :current-node="currentNode"
+    />
+  </div>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue
index 01ab889dc..dee4e6985 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue
@@ -33,11 +33,12 @@ const props = defineProps({
     required: true,
   },
 });
+
 const emits = defineEmits(['update:childNode']);
 const popoverShow = ref(false);
 const readonly = inject<Boolean>('readonly'); // 是否只读
 
-const addNode = (type: number) => {
+function addNode(type: number) {
   // 校验：条件分支、包容分支后面，不允许直接添加并行分支
   if (
     type === NodeType.PARALLEL_BRANCH_NODE &&
@@ -238,7 +239,7 @@ const addNode = (type: number) => {
     };
     emits('update:childNode', data);
   }
-};
+}
 </script>
 <template>
   <div class="node-handler-wrapper">
@@ -334,5 +335,3 @@ const addNode = (type: number) => {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/parallel-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/parallel-node.vue
new file mode 100644
index 000000000..977de0955
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/parallel-node.vue
@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { buildShortUUID as generateUUID } from '@vben/utils';
+
+import { Button, Input } from 'ant-design-vue';
+
+import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { useTaskStatusClass } from '../../helpers';
+import ProcessNodeTree from '../process-node-tree.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'ParallelNode' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  findParnetNode: [nodeList: SimpleFlowNode[], nodeType: number];
+  recursiveFindParentNode: [
+    nodeList: SimpleFlowNode[],
+    curentNode: SimpleFlowNode,
+    nodeType: number,
+  ];
+  'update:modelValue': [node: SimpleFlowNode | undefined];
+}>();
+
+const currentNode = ref<SimpleFlowNode>(props.flowNode);
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue;
+  },
+);
+
+const showInputs = ref<boolean[]>([]);
+
+// 失去焦点
+function blurEvent(index: number) {
+  showInputs.value[index] = false;
+  const conditionNode = currentNode.value.conditionNodes?.at(
+    index,
+  ) as SimpleFlowNode;
+  conditionNode.name = conditionNode.name || `并行${index + 1}`;
+}
+
+// 点击条件名称
+function clickEvent(index: number) {
+  showInputs.value[index] = true;
+}
+
+// 新增条件
+function addCondition() {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    const len = conditionNodes.length;
+    const lastIndex = len - 1;
+    const conditionData: SimpleFlowNode = {
+      id: `Flow_${generateUUID()}`,
+      name: `并行${len}`,
+      showText: '无需配置条件同时执行',
+      type: NodeType.CONDITION_NODE,
+      childNode: undefined,
+      conditionNodes: [],
+    };
+    conditionNodes.splice(lastIndex, 0, conditionData);
+  }
+}
+
+// 删除条件
+function deleteCondition(index: number) {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    conditionNodes.splice(index, 1);
+    if (conditionNodes.length === 1) {
+      const childNode = currentNode.value.childNode;
+      // 更新此节点为后续孩子节点
+      emits('update:modelValue', childNode);
+    }
+  }
+}
+
+// 递归从父节点中查询匹配的节点
+function recursiveFindParentNode(
+  nodeList: SimpleFlowNode[],
+  node: SimpleFlowNode,
+  nodeType: number,
+) {
+  if (!node || node.type === NodeType.START_USER_NODE) {
+    return;
+  }
+  if (node.type === nodeType) {
+    nodeList.push(node);
+  }
+  // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点并行节点（NodeType.PARALLEL_NODE) 继续查找
+  emits('findParnetNode', nodeList, nodeType);
+}
+</script>
+<template>
+  <div class="branch-node-wrapper">
+    <div class="branch-node-container">
+      <div
+        v-if="readonly"
+        class="branch-node-readonly"
+        :class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
+      >
+        <span class="iconfont icon-parallel icon-size parallel"></span>
+      </div>
+      <Button
+        v-else
+        class="branch-node-add"
+        color="#626aef"
+        @click="addCondition"
+        plain
+      >
+        添加分支
+      </Button>
+      <div
+        class="branch-node-item"
+        v-for="(item, index) in currentNode.conditionNodes"
+        :key="index"
+      >
+        <template v-if="index === 0">
+          <div class="branch-line-first-top"></div>
+          <div class="branch-line-first-bottom"></div>
+        </template>
+        <template v-if="index + 1 === currentNode.conditionNodes?.length">
+          <div class="branch-line-last-top"></div>
+          <div class="branch-line-last-bottom"></div>
+        </template>
+        <div class="node-wrapper">
+          <div class="node-container">
+            <div
+              class="node-box"
+              :class="`${useTaskStatusClass(item.activityStatus)}`"
+            >
+              <div class="branch-node-title-container">
+                <div v-if="showInputs[index]">
+                  <Input
+                    type="text"
+                    class="input-max-width editable-title-input"
+                    @blur="blurEvent(index)"
+                    v-model="item.name"
+                  />
+                </div>
+                <div v-else class="branch-title" @click="clickEvent(index)">
+                  {{ item.name }}
+                </div>
+                <div class="branch-priority">无优先级</div>
+              </div>
+              <div class="branch-node-content">
+                <div
+                  class="branch-node-text"
+                  :title="item.showText"
+                  v-if="item.showText"
+                >
+                  {{ item.showText }}
+                </div>
+                <div class="branch-node-text" v-else>
+                  {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
+                </div>
+              </div>
+              <div v-if="!readonly" class="node-toolbar">
+                <div class="toolbar-icon">
+                  <IconifyIcon
+                    color="#0089ff"
+                    icon="ep:circle-close-filled"
+                    @click="deleteCondition(index)"
+                  />
+                </div>
+              </div>
+            </div>
+            <NodeHandler
+              v-model:child-node="item.childNode"
+              :current-node="item"
+            />
+          </div>
+        </div>
+        <!-- 递归显示子节点  -->
+        <ProcessNodeTree
+          v-if="item && item.childNode"
+          :parent-node="item"
+          v-model:flow-node="item.childNode"
+          @recursive-find-parent-node="recursiveFindParentNode"
+        />
+      </div>
+    </div>
+    <NodeHandler
+      v-if="currentNode"
+      v-model:child-node="currentNode.childNode"
+      :current-node="currentNode"
+    />
+  </div>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/router-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/router-node.vue
new file mode 100644
index 000000000..1c0538232
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/router-node.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input } from 'ant-design-vue';
+
+import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import RouterNodeConfig from '../nodes-config/router-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'RouterNode' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+// 监控节点的变化
+const currentNode = useWatchNode(props);
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(
+  currentNode,
+  NodeType.ROUTER_BRANCH_NODE,
+);
+
+const nodeSetting = ref();
+// 打开节点配置
+function openNodeConfig() {
+  if (readonly) {
+    return;
+  }
+  nodeSetting.value.openDrawer(currentNode.value);
+}
+
+// 删除节点。更新当前节点为孩子节点
+function deleteNode() {
+  emits('update:flowNode', currentNode.value.childNode);
+}
+</script>
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`,
+        ]"
+      >
+        <div class="node-title-container">
+          <div class="node-title-icon router-node">
+            <span class="iconfont icon-router"></span>
+          </div>
+          <Input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.ROUTER_BRANCH_NODE) }}
+          </div>
+          <IconifyIcon v-if="!readonly" icon="ep:arrow-right-bold" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="ep:circle-close-filled"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <RouterNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue
index 2edb10935..f71a80217 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue
@@ -15,17 +15,20 @@ import StartUserNodeConfig from '../nodes-config/start-user-node-config.vue';
 import NodeHandler from './node-handler.vue';
 
 defineOptions({ name: 'StartUserNode' });
+
 const props = defineProps({
   flowNode: {
     type: Object as () => SimpleFlowNode,
     default: () => null,
   },
 });
+
 // 定义事件，更新父组件。
-// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
-const emits = defineEmits<{
+// const emits = defineEmits<{
+defineEmits<{
   'update:modelValue': [node: SimpleFlowNode | undefined];
 }>();
+
 const readonly = inject<Boolean>('readonly'); // 是否只读
 const tasks = inject<Ref<any[]>>('tasks', ref([]));
 // 监控节点变化
@@ -41,7 +44,7 @@ const nodeSetting = ref();
 // 任务的弹窗显示，用于只读模式
 const selectTasks = ref<any[] | undefined>([]); // 选中的任务数组
 
-const nodeClick = () => {
+function nodeClick() {
   if (readonly) {
     // 只读模式，弹窗显示任务信息
     if (tasks && tasks.value) {
@@ -58,7 +61,7 @@ const nodeClick = () => {
     );
     nodeSetting.value.showStartUserNodeConfig(currentNode.value);
   }
-};
+}
 </script>
 <template>
   <div class="node-wrapper">
@@ -116,4 +119,3 @@ const nodeClick = () => {
   />
   <!-- 审批记录  TODO -->
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/trigger-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/trigger-node.vue
new file mode 100644
index 000000000..bf8e8012b
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/trigger-node.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input } from 'ant-design-vue';
+
+import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import TriggerNodeConfig from '../nodes-config/trigger-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({
+  name: 'TriggerNode',
+});
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+// 监控节点的变化
+const currentNode = useWatchNode(props);
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(
+  currentNode,
+  NodeType.TRIGGER_NODE,
+);
+
+const nodeSetting = ref();
+// 打开节点配置
+function openNodeConfig() {
+  if (readonly) {
+    return;
+  }
+  nodeSetting.value.showTriggerNodeConfig(currentNode.value);
+}
+
+// 删除节点。更新当前节点为孩子节点
+function deleteNode() {
+  emits('update:flowNode', currentNode.value.childNode);
+}
+</script>
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`,
+        ]"
+      >
+        <div class="node-title-container">
+          <div class="node-title-icon trigger-node">
+            <span class="iconfont icon-trigger"></span>
+          </div>
+          <Input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.TRIGGER_NODE) }}
+          </div>
+          <IconifyIcon v-if="!readonly" icon="ep:arrow-right-bold" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="ep:circle-close-filled"
+              :size="18"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <TriggerNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue
index b2a2055fc..270760e37 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue
@@ -22,6 +22,7 @@ const props = defineProps({
     required: true,
   },
 });
+
 const emits = defineEmits<{
   findParentNode: [nodeList: SimpleFlowNode[], nodeType: NodeType];
   'update:flowNode': [node: SimpleFlowNode | undefined];
@@ -39,7 +40,7 @@ const { showInput, blurEvent, clickTitle } = useNodeName2(
 );
 const nodeSetting = ref();
 
-const nodeClick = () => {
+function nodeClick() {
   if (readonly) {
     if (tasks && tasks.value) {
       // 只读模式，弹窗显示任务信息 TODO 待实现
@@ -49,18 +50,18 @@ const nodeClick = () => {
     // 编辑模式，打开节点配置、把当前节点传递给配置组件
     nodeSetting.value.showUserTaskNodeConfig(currentNode.value);
   }
-};
+}
 
-const deleteNode = () => {
+function deleteNode() {
   emits('update:flowNode', currentNode.value.childNode);
-};
+}
 // 查找可以驳回用户节点
-const findReturnTaskNodes = (
+function findReturnTaskNodes(
   matchNodeList: SimpleFlowNode[], // 匹配的节点
-) => {
+) {
   // 从父节点查找
   emits('findParentNode', matchNodeList, NodeType.USER_TASK_NODE);
-};
+}
 
 // const selectTasks = ref<any[] | undefined>([]); // 选中的任务数组
 </script>
@@ -135,4 +136,3 @@ const findReturnTaskNodes = (
   />
   <!--  TODO 审批记录 -->
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
index 9060b6c62..1efbce306 100644
--- a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
@@ -3,11 +3,19 @@ import type { SimpleFlowNode } from '../consts';
 
 import { NodeType } from '../consts';
 import { useWatchNode } from '../helpers';
+import CopyTaskNode from './nodes/copy-task-node.vue';
+import DelayTimerNode from './nodes/delay-timer-node.vue';
 import EndEventNode from './nodes/end-event-node.vue';
+import ExclusiveNode from './nodes/exclusive-node.vue';
+import InclusiveNode from './nodes/inclusive-node.vue';
+import ParallelNode from './nodes/parallel-node.vue';
+import RouterNode from './nodes/router-node.vue';
 import StartUserNode from './nodes/start-user-node.vue';
+import TriggerNode from './nodes/trigger-node.vue';
 import UserTaskNode from './nodes/user-task-node.vue';
 
 defineOptions({ name: 'ProcessNodeTree' });
+
 const props = defineProps({
   parentNode: {
     type: Object as () => SimpleFlowNode,
@@ -18,6 +26,7 @@ const props = defineProps({
     default: () => null,
   },
 });
+
 const emits = defineEmits<{
   recursiveFindParentNode: [
     nodeList: SimpleFlowNode[],
@@ -40,11 +49,11 @@ const findParentNode = (nodeList: SimpleFlowNode[], nodeType: number) => {
 };
 
 // 递归从父节点中查询匹配的节点
-const recursiveFindParentNode = (
+function recursiveFindParentNode(
   nodeList: SimpleFlowNode[],
   findNode: SimpleFlowNode,
   nodeType: number,
-) => {
+) {
   if (!findNode) {
     return;
   }
@@ -57,7 +66,7 @@ const recursiveFindParentNode = (
     nodeList.push(findNode);
   }
   emits('recursiveFindParentNode', nodeList, props.parentNode, nodeType);
-};
+}
 </script>
 <template>
   <!-- 发起人节点 -->
@@ -77,50 +86,50 @@ const recursiveFindParentNode = (
     @find-parent-node="findParentNode"
   />
   <!-- 抄送节点 -->
-  <!-- <CopyTaskNode
+  <CopyTaskNode
     v-if="currentNode && currentNode.type === NodeType.COPY_TASK_NODE"
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
-  /> -->
+  />
   <!-- 条件节点 -->
-  <!-- <ExclusiveNode
+  <ExclusiveNode
     v-if="currentNode && currentNode.type === NodeType.CONDITION_BRANCH_NODE"
     :flow-node="currentNode"
     @update:model-value="handleModelValueUpdate"
-    @find:parent-node="findFromParentNode"
-  /> -->
+    @find-parent-node="findParentNode"
+  />
   <!-- 并行节点 -->
-  <!-- <ParallelNode
+  <ParallelNode
     v-if="currentNode && currentNode.type === NodeType.PARALLEL_BRANCH_NODE"
     :flow-node="currentNode"
     @update:model-value="handleModelValueUpdate"
-    @find:parent-node="findFromParentNode"
-  /> -->
+    @find-parent-node="findParentNode"
+  />
   <!-- 包容分支节点 -->
-  <!-- <InclusiveNode
+  <InclusiveNode
     v-if="currentNode && currentNode.type === NodeType.INCLUSIVE_BRANCH_NODE"
     :flow-node="currentNode"
     @update:model-value="handleModelValueUpdate"
-    @find:parent-node="findFromParentNode"
-  /> -->
+    @find-parent-node="findParentNode"
+  />
   <!-- 延迟器节点 -->
-  <!-- <DelayTimerNode
+  <DelayTimerNode
     v-if="currentNode && currentNode.type === NodeType.DELAY_TIMER_NODE"
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
-  /> -->
+  />
   <!-- 路由分支节点 -->
-  <!-- <RouterNode
+  <RouterNode
     v-if="currentNode && currentNode.type === NodeType.ROUTER_BRANCH_NODE"
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
-  /> -->
+  />
   <!-- 触发器节点 -->
-  <!-- <TriggerNode
+  <TriggerNode
     v-if="currentNode && currentNode.type === NodeType.TRIGGER_NODE"
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
-  /> -->
+  />
   <!-- 子流程节点 -->
   <!-- <ChildProcessNode
     v-if="currentNode && currentNode.type === NodeType.CHILD_PROCESS_NODE"
@@ -141,4 +150,3 @@ const recursiveFindParentNode = (
     :flow-node="currentNode"
   />
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue b/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
index 7f2762ca1..728fa80f4 100644
--- a/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
@@ -11,9 +11,10 @@ import type { SystemUserApi } from '#/api/system/user';
 
 import { inject, onMounted, provide, ref, watch } from 'vue';
 
+import { useVbenModal } from '@vben/common-ui';
 import { handleTree } from '@vben/utils';
 
-import { Button, Modal } from 'ant-design-vue';
+import { Button } from 'ant-design-vue';
 
 import { getFormDetail } from '#/api/bpm/form';
 import { getUserGroupSimpleList } from '#/api/bpm/userGroup';
@@ -112,16 +113,20 @@ provide('tasks', []);
 provide('processInstance', {});
 const processNodeTree = ref<SimpleFlowNode | undefined>();
 provide('processNodeTree', processNodeTree);
-const errorDialogVisible = ref(false);
-const errorNodes: SimpleFlowNode[] = [];
+
+// 创建错误提示弹窗
+const [ErrorModal, errorModalApi] = useVbenModal({
+  fullscreenButton: false,
+});
 
 // 添加更新模型的方法
-const updateModel = () => {
+function updateModel() {
   if (!processNodeTree.value) {
     processNodeTree.value = {
       name: '发起人',
       type: NodeType.START_USER_NODE,
       id: NodeId.START_USER_NODE_ID,
+      showText: '默认配置',
       childNode: {
         id: NodeId.END_EVENT_NODE_ID,
         name: '结束',
@@ -131,11 +136,11 @@ const updateModel = () => {
     // 初始化时也触发一次保存
     saveSimpleFlowModel(processNodeTree.value);
   }
-};
+}
 
-const saveSimpleFlowModel = async (
+async function saveSimpleFlowModel(
   simpleModelNode: SimpleFlowNode | undefined,
-) => {
+) {
   if (!simpleModelNode) {
     return;
   }
@@ -146,52 +151,40 @@ const saveSimpleFlowModel = async (
   } catch (error) {
     console.error('保存失败:', error);
   }
-};
+}
 
 /**
- * 校验节点设置。 暂时以 showText 为空 未节点错误配置
+ * 校验节点设置。 暂时以 showText 为空作为节点错误配置的判断条件
  */
-// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
-const validateNode = (
+function validateNode(
   node: SimpleFlowNode | undefined,
   errorNodes: SimpleFlowNode[],
-) => {
+) {
   if (node) {
     const { type, showText, conditionNodes } = node;
     if (type === NodeType.END_EVENT_NODE) {
       return;
     }
-    if (type === NodeType.START_USER_NODE) {
-      // 发起人节点暂时不用校验，直接校验孩子节点
-      validateNode(node.childNode, errorNodes);
-    }
-
-    if (
-      type === NodeType.USER_TASK_NODE ||
-      type === NodeType.COPY_TASK_NODE ||
-      type === NodeType.CONDITION_NODE
-    ) {
-      if (!showText) {
-        errorNodes.push(node);
-      }
-      validateNode(node.childNode, errorNodes);
-    }
 
     if (
       type === NodeType.CONDITION_BRANCH_NODE ||
       type === NodeType.PARALLEL_BRANCH_NODE ||
       type === NodeType.INCLUSIVE_BRANCH_NODE
     ) {
-      // 分支节点
-      // 1. 先校验各个分支
+      // 1. 分支节点, 先校验各个分支
       conditionNodes?.forEach((item) => {
         validateNode(item, errorNodes);
       });
       // 2. 校验孩子节点
       validateNode(node.childNode, errorNodes);
+    } else {
+      if (!showText) {
+        errorNodes.push(node);
+      }
+      validateNode(node.childNode, errorNodes);
     }
   }
-};
+}
 
 onMounted(async () => {
   try {
@@ -220,38 +213,40 @@ onMounted(async () => {
   }
 });
 
-const simpleProcessModelRef = ref();
-
-defineExpose({});
+const validate = async () => {
+  const errorNodes: SimpleFlowNode[] = [];
+  validateNode(processNodeTree.value, errorNodes);
+  if (errorNodes.length === 0) {
+    return true;
+  } else {
+    // 设置错误节点数据并打开弹窗
+    errorModalApi.setData(errorNodes);
+    errorModalApi.open();
+    return false;
+  }
+};
+defineExpose({ validate });
 </script>
 <template>
   <div v-loading="loading">
     <SimpleProcessModel
-      ref="simpleProcessModelRef"
       v-if="processNodeTree"
       :flow-node="processNodeTree"
       :readonly="false"
       @save="saveSimpleFlowModel"
     />
-    <Modal
-      v-model="errorDialogVisible"
-      title="保存失败"
-      width="400"
-      :fullscreen="false"
-    >
-      <div class="mb-2">以下节点内容不完善，请修改后保存</div>
+    <ErrorModal title="流程设计校验不通过" class="w-[600px]">
+      <div class="mb-2 text-base">以下节点配置不完善，请修改相关配置</div>
       <div
-        class="b-rounded-1 line-height-normal mb-3 bg-gray-100 p-2"
-        v-for="(item, index) in errorNodes"
+        class="mb-3 rounded-md bg-gray-100 p-2 text-sm"
+        v-for="(item, index) in errorModalApi.getData()"
         :key="index"
       >
         {{ item.name }} : {{ NODE_DEFAULT_TEXT.get(item.type) }}
       </div>
       <template #footer>
-        <Button type="primary" @click="errorDialogVisible = false">
-          知道了
-        </Button>
+        <Button type="primary" @click="errorModalApi.close()">知道了</Button>
       </template>
-    </Modal>
+    </ErrorModal>
   </div>
 </template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue b/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue
index cfd2e6a84..b09c4e079 100644
--- a/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue
@@ -49,22 +49,22 @@ const currentY = ref(0);
 const initialX = ref(0);
 const initialY = ref(0);
 
-const setGrabCursor = () => {
+function setGrabCursor() {
   document.body.style.cursor = 'grab';
-};
+}
 
-const resetCursor = () => {
+function resetCursor() {
   document.body.style.cursor = 'default';
-};
+}
 
-const startDrag = (e: MouseEvent) => {
+function startDrag(e: MouseEvent) {
   isDragging.value = true;
   startX.value = e.clientX - currentX.value;
   startY.value = e.clientY - currentY.value;
   setGrabCursor(); // 设置小手光标
-};
+}
 
-const onDrag = (e: MouseEvent) => {
+function onDrag(e: MouseEvent) {
   if (!isDragging.value) return;
   e.preventDefault(); // 禁用文本选择
 
@@ -73,44 +73,44 @@ const onDrag = (e: MouseEvent) => {
     currentX.value = e.clientX - startX.value;
     currentY.value = e.clientY - startY.value;
   });
-};
+}
 
-const stopDrag = () => {
+function stopDrag() {
   isDragging.value = false;
   resetCursor(); // 重置光标
-};
+}
 
-const zoomIn = () => {
+function zoomIn() {
   if (scaleValue.value === MAX_SCALE_VALUE) {
     return;
   }
   scaleValue.value += 10;
-};
+}
 
-const zoomOut = () => {
+function zoomOut() {
   if (scaleValue.value === MIN_SCALE_VALUE) {
     return;
   }
   scaleValue.value -= 10;
-};
+}
 
-const processReZoom = () => {
+function processReZoom() {
   scaleValue.value = 100;
-};
+}
 
-const resetPosition = () => {
+function resetPosition() {
   currentX.value = initialX.value;
   currentY.value = initialY.value;
-};
+}
 
 /** 校验节点设置 */
 const errorDialogVisible = ref(false);
 let errorNodes: SimpleFlowNode[] = [];
 
-const validateNode = (
+function validateNode(
   node: SimpleFlowNode | undefined,
   errorNodes: SimpleFlowNode[],
-) => {
+) {
   if (node) {
     const { type, showText, conditionNodes } = node;
     if (type === NodeType.END_EVENT_NODE) {
@@ -146,10 +146,10 @@ const validateNode = (
       validateNode(node.childNode, errorNodes);
     }
   }
-};
+}
 
 /** 获取当前流程数据 */
-const getCurrentFlowData = async () => {
+async function getCurrentFlowData() {
   try {
     errorNodes = [];
     validateNode(processNodeTree.value, errorNodes);
@@ -162,26 +162,26 @@ const getCurrentFlowData = async () => {
     console.error('获取流程数据失败:', error);
     return undefined;
   }
-};
+}
 
 defineExpose({
   getCurrentFlowData,
 });
 
 /** 导出 JSON */
-const exportJson = () => {
+function exportJson() {
   downloadFileFromBlob({
     fileName: 'model.json',
     source: new Blob([JSON.stringify(processNodeTree.value)]),
   });
-};
+}
 
 /** 导入 JSON */
 const refFile = ref();
-const importJson = () => {
+function importJson() {
   refFile.value.click();
-};
-const importLocalFile = () => {
+}
+function importLocalFile() {
   const file = refFile.value.files[0];
   file.text().then((result: any) => {
     if (isString(result)) {
@@ -189,7 +189,7 @@ const importLocalFile = () => {
       emits('save', processNodeTree.value);
     }
   });
-};
+}
 
 // 在组件初始化时记录初始位置
 onMounted(() => {
@@ -267,4 +267,3 @@ onMounted(() => {
     </template>
   </Modal>
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/consts.ts b/apps/web-antd/src/components/simple-process-design/consts.ts
index 74c910f60..6ca44fde2 100644
--- a/apps/web-antd/src/components/simple-process-design/consts.ts
+++ b/apps/web-antd/src/components/simple-process-design/consts.ts
@@ -475,9 +475,9 @@ export type ListenerHandler = {
  * 条件规则结构定义
  */
 export type ConditionRule = {
-  leftSide: string;
+  leftSide: string | undefined;
   opCode: string;
-  rightSide: string;
+  rightSide: string | undefined;
 };
 
 /**
@@ -564,7 +564,7 @@ export type RouterSetting = {
   conditionExpression: string;
   conditionGroups: ConditionGroup;
   conditionType: ConditionType;
-  nodeId: string;
+  nodeId: string | undefined;
 };
 
 /**
@@ -725,7 +725,7 @@ export const DEFAULT_CONDITION_GROUP_VALUE = {
       rules: [
         {
           opCode: '==',
-          leftSide: '',
+          leftSide: undefined,
           rightSide: '',
         },
       ],
diff --git a/apps/web-antd/src/components/simple-process-design/helpers.ts b/apps/web-antd/src/components/simple-process-design/helpers.ts
index 281572815..6423111a8 100644
--- a/apps/web-antd/src/components/simple-process-design/helpers.ts
+++ b/apps/web-antd/src/components/simple-process-design/helpers.ts
@@ -43,7 +43,7 @@ export function useWatchNode(props: {
 }
 
 // 解析 formCreate 所有表单字段, 并返回
-const parseFormCreateFields = (formFields?: string[]) => {
+function parseFormCreateFields(formFields?: string[]) {
   const result: Array<Record<string, any>> = [];
   if (formFields) {
     formFields.forEach((fieldStr: string) => {
@@ -51,7 +51,7 @@ const parseFormCreateFields = (formFields?: string[]) => {
     });
   }
   return result;
-};
+}
 
 /**
  * 解析表单组件的  field, title 等字段（递归，如果组件包含子组件）
@@ -109,20 +109,20 @@ export function useFormFieldsPermission(
 
   const formFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
 
-  const getNodeConfigFormFields = (
+  function getNodeConfigFormFields(
     nodeFormFields?: Array<Record<string, string>>,
-  ) => {
+  ) {
     nodeFormFields = toRaw(nodeFormFields);
     fieldsPermissionConfig.value =
       !nodeFormFields || nodeFormFields.length === 0
         ? getDefaultFieldsPermission(unref(formFields))
         : mergeFieldsPermission(nodeFormFields, unref(formFields));
-  };
+  }
   // 合并已经设置的表单字段权限，当前流程表单字段 (可能新增，或删除了字段)
-  const mergeFieldsPermission = (
+  function mergeFieldsPermission(
     formFieldsPermisson: Array<Record<string, string>>,
     formFields?: string[],
-  ) => {
+  ) {
     let mergedFieldsPermission: Array<Record<string, any>> = [];
     if (formFields) {
       mergedFieldsPermission = parseFormCreateFields(formFields).map((item) => {
@@ -137,10 +137,10 @@ export function useFormFieldsPermission(
       });
     }
     return mergedFieldsPermission;
-  };
+  }
 
   // 默认的表单权限： 获取表单的所有字段，设置字段默认权限为只读
-  const getDefaultFieldsPermission = (formFields?: string[]) => {
+  function getDefaultFieldsPermission(formFields?: string[]) {
     let defaultFieldsPermission: Array<Record<string, any>> = [];
     if (formFields) {
       defaultFieldsPermission = parseFormCreateFields(formFields).map(
@@ -154,7 +154,7 @@ export function useFormFieldsPermission(
       );
     }
     return defaultFieldsPermission;
-  };
+  }
 
   // 获取表单的所有字段，作为下拉框选项
   const formFieldOptions = parseFormCreateFields(unref(formFields));
@@ -268,7 +268,6 @@ export function useNodeForm(nodeType: NodeType) {
   const formFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
   const configForm = ref<any | CopyTaskFormType | UserTaskFormType>();
 
-  // eslint-disable-next-line unicorn/prefer-ternary
   if (
     nodeType === NodeType.USER_TASK_NODE ||
     nodeType === NodeType.TRANSACTOR_NODE
@@ -286,13 +285,12 @@ export function useNodeForm(nodeType: NodeType) {
       maxRemindCount: 1, // 默认 提醒 1次
       buttonsSetting: [],
     };
-  } else {
-    configForm.value = {
-      candidateStrategy: CandidateStrategy.USER,
-    };
   }
+  configForm.value = {
+    candidateStrategy: CandidateStrategy.USER,
+  };
 
-  const getShowText = (): string => {
+  function getShowText(): string {
     let showText = '';
     // 指定成员
     if (
@@ -428,12 +426,12 @@ export function useNodeForm(nodeType: NodeType) {
       showText = `流程表达式：${configForm.value.expression}`;
     }
     return showText;
-  };
+  }
 
   /**
    *  处理候选人参数的赋值
    */
-  const handleCandidateParam = () => {
+  function handleCandidateParam() {
     let candidateParam: string | undefined;
     if (!configForm.value) {
       return candidateParam;
@@ -495,14 +493,14 @@ export function useNodeForm(nodeType: NodeType) {
       }
     }
     return candidateParam;
-  };
+  }
   /**
    *  解析候选人参数
    */
-  const parseCandidateParam = (
+  function parseCandidateParam(
     candidateStrategy: CandidateStrategy,
     candidateParam: string | undefined,
-  ) => {
+  ) {
     if (!configForm.value || !candidateParam) {
       return;
     }
@@ -578,7 +576,7 @@ export function useNodeForm(nodeType: NodeType) {
         break;
       }
     }
-  };
+  }
   return {
     configForm,
     roleOptions,
@@ -599,13 +597,13 @@ export function useDrawer() {
   // 抽屉配置是否可见
   const settingVisible = ref(false);
   // 关闭配置抽屉
-  const closeDrawer = () => {
+  function closeDrawer() {
     settingVisible.value = false;
-  };
+  }
   // 打开配置抽屉
-  const openDrawer = () => {
+  function openDrawer() {
     settingVisible.value = true;
-  };
+  }
   return {
     settingVisible,
     closeDrawer,
@@ -622,15 +620,15 @@ export function useNodeName(nodeType: NodeType) {
   // 节点名称输入框
   const showInput = ref(false);
   // 点击节点名称编辑图标
-  const clickIcon = () => {
+  function clickIcon() {
     showInput.value = true;
-  };
+  }
   // 节点名称输入框失去焦点
-  const blurEvent = () => {
+  function blurEvent() {
     showInput.value = false;
     nodeName.value =
       nodeName.value || (NODE_DEFAULT_NAME.get(nodeType) as string);
-  };
+  }
   return {
     nodeName,
     showInput,
@@ -643,15 +641,15 @@ export function useNodeName2(node: Ref<SimpleFlowNode>, nodeType: NodeType) {
   // 显示节点名称输入框
   const showInput = ref(false);
   // 节点名称输入框失去焦点
-  const blurEvent = () => {
+  function blurEvent() {
     showInput.value = false;
     node.value.name =
       node.value.name || (NODE_DEFAULT_NAME.get(nodeType) as string);
-  };
+  }
   // 点击节点标题进行输入
-  const clickTitle = () => {
+  function clickTitle() {
     showInput.value = true;
-  };
+  }
   return {
     showInput,
     clickTitle,
@@ -722,18 +720,40 @@ export function getConditionShowText(
 }
 
 /** 获取表单字段名称*/
-const getFormFieldTitle = (
+function getFormFieldTitle(
   fieldOptions: Array<Record<string, any>>,
   field: string,
-) => {
+) {
   const item = fieldOptions.find((item) => item.field === field);
   return item?.title;
-};
+}
 
 /** 获取操作符名称 */
-const getOpName = (opCode: string): string | undefined => {
+function getOpName(opCode: string): string | undefined {
   const opName = COMPARISON_OPERATORS.find(
     (item: any) => item.value === opCode,
   );
   return opName?.label;
-};
+}
+
+/** 获取条件节点默认的名称 */
+export function getDefaultConditionNodeName(
+  index: number,
+  defaultFlow: boolean | undefined,
+): string {
+  if (defaultFlow) {
+    return '其它情况';
+  }
+  return `条件${index + 1}`;
+}
+
+/** 获取包容分支条件节点默认的名称 */
+export function getDefaultInclusiveConditionNodeName(
+  index: number,
+  defaultFlow: boolean | undefined,
+): string {
+  if (defaultFlow) {
+    return '其它情况';
+  }
+  return `包容条件${index + 1}`;
+}
diff --git a/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
index 8c3afd37f..a36f96986 100644
--- a/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
+++ b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
@@ -334,12 +334,14 @@
         margin-top: 4px;
         line-height: 32px;
         color: #111f2c;
+        background: rgb(0 0 0 / 3%);
         border-radius: 4px;
 
         .branch-node-text {
+          display: -webkit-box;
           overflow: hidden;
           text-overflow: ellipsis;
-          -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+          -webkit-line-clamp: 1; /* 这将限制文本显示为一行 */
           font-size: 12px;
           line-height: 24px;
           word-break: break-all;
@@ -478,6 +480,8 @@
           top: -18px;
           left: 50%;
           z-index: 1;
+          display: flex;
+          align-items: center;
           height: 36px;
           padding: 0 10px;
           font-size: 12px;
@@ -644,7 +648,8 @@
         width: 80px;
         height: 36px;
         color: #212121;
-        border: 2px solid #fafafa;
+        background-color: #fff;
+        border: 2px solid transparent;
         border-radius: 30px;
         box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
 
diff --git a/apps/web-antd/src/components/user-select-modal/index.ts b/apps/web-antd/src/components/user-select-modal/index.ts
deleted file mode 100644
index 9cb1c93fd..000000000
--- a/apps/web-antd/src/components/user-select-modal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as UserSelectModal } from './user-select-modal.vue';
diff --git a/apps/web-antd/src/views/bpm/group/data.ts b/apps/web-antd/src/views/bpm/group/data.ts
index 34c0926fb..0bd1fd252 100644
--- a/apps/web-antd/src/views/bpm/group/data.ts
+++ b/apps/web-antd/src/views/bpm/group/data.ts
@@ -123,8 +123,8 @@ export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
       field: 'userIds',
       title: '成员',
       minWidth: 200,
-      formatter: (row) => {
-        return getMemberNames(row.cellValue);
+      formatter: ({ cellValue }) => {
+        return getMemberNames(cellValue);
       },
     },
     {
diff --git a/apps/web-antd/src/views/bpm/model/form/index.vue b/apps/web-antd/src/views/bpm/model/form/index.vue
index 2c2f61fbb..e3418da4e 100644
--- a/apps/web-antd/src/views/bpm/model/form/index.vue
+++ b/apps/web-antd/src/views/bpm/model/form/index.vue
@@ -216,7 +216,8 @@ const validateAllSteps = async () => {
     await validateBasic();
   } catch {
     currentStep.value = 0;
-    throw new Error('请完善基本信息');
+    message.warning('请完善基本信息');
+    return false;
   }
 
   // 表单设计校验
@@ -224,25 +225,19 @@ const validateAllSteps = async () => {
     await validateForm();
   } catch {
     currentStep.value = 1;
-    throw new Error('请完善自定义表单信息');
+    message.warning('请完善自定义表单信息');
+    return false;
   }
 
-  // 流程设计校验 TODO
-
+  // 流程设计校验
   try {
     await validateProcess();
   } catch {
     currentStep.value = 2;
-    throw new Error('请设计流程');
+    return false;
   }
 
-  // 表单设计校验
-  try {
-    await validateProcess();
-  } catch {
-    currentStep.value = 2;
-    throw new Error('请设计流程');
-  }
+  // TODO 更多设置校验
 
   return true;
 };
@@ -251,7 +246,10 @@ const validateAllSteps = async () => {
 const handleSave = async () => {
   try {
     // 保存前校验所有步骤的数据
-    await validateAllSteps();
+    const result = await validateAllSteps();
+    if (!result) {
+      return;
+    }
 
     // 更新表单数据
     const modelData = {
@@ -297,7 +295,7 @@ const handleSave = async () => {
     }
   } catch (error: any) {
     console.error('保存失败:', error);
-    message.warning(error.message || '请完善所有步骤的必填信息');
+    // message.warning(error.msg || '请完善所有步骤的必填信息');
   }
 };
 
@@ -338,7 +336,6 @@ const handleDeploy = async () => {
 /** 步骤切换处理 */
 const handleStepClick = async (index: number) => {
   try {
-    console.warn('handleStepClick', index);
     if (index !== 0) {
       await validateBasic();
     }
@@ -348,23 +345,13 @@ const handleStepClick = async (index: number) => {
     if (index !== 2) {
       await validateProcess();
     }
-
     // 切换步骤
     currentStep.value = index;
-
-    // 如果切换到流程设计步骤，等待组件渲染完成后刷新设计器
-    if (index === 2) {
-      // TODO 后续加
-      // await nextTick();
-      // // 等待更长时间确保组件完全初始化
-      // await new Promise((resolve) => setTimeout(resolve, 200));
-      // if (processDesignRef.value?.refresh) {
-      //   await processDesignRef.value.refresh();
-      // }
-    }
   } catch (error) {
     console.error('步骤切换失败:', error);
-    message.warning('请先完善当前步骤必填信息');
+    if (currentStep.value !== 2) {
+      message.warning('请先完善当前步骤必填信息');
+    }
   }
 };
 
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 f31ad4d7c..485dcf470 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
@@ -22,9 +22,8 @@ import {
   Tooltip,
 } from 'ant-design-vue';
 
-import { DeptSelectModal } from '#/components/dept-select-modal';
+import { DeptSelectModal, UserSelectModal } from '#/components/select-modal';
 import { ImageUpload } from '#/components/upload';
-import { UserSelectModal } from '#/components/user-select-modal';
 import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '#/utils';
 
 const props = defineProps({
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/process-design.vue b/apps/web-antd/src/views/bpm/model/form/modules/process-design.vue
index f9fb07543..8824de4a2 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/process-design.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/process-design.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Ref } from 'vue';
 
-import { computed, inject, nextTick } from 'vue';
+import { computed, inject, nextTick, ref } from 'vue';
 
 import { BpmModelType } from '#/utils';
 
@@ -13,12 +13,21 @@ const modelData = defineModel<any>();
 
 const processData = inject('processData') as Ref;
 
+const simpleDesign = ref();
+
 /** 表单校验 */
 const validate = async () => {
   // 获取最新的流程数据
   if (!processData.value) {
     throw new Error('请设计流程');
   }
+  if (modelData.value.type === BpmModelType.SIMPLE) {
+    // 简易设计器校验
+    const validateResult = await simpleDesign.value?.validateConfig();
+    if (!validateResult) {
+      throw new Error('请完善设计配置');
+    }
+  }
   return true;
 };
 /** 处理设计器保存成功 */
@@ -41,9 +50,7 @@ const handleDesignSuccess = async (data?: any) => {
 const showDesigner = computed(() => {
   return Boolean(modelData.value?.key && modelData.value?.name);
 });
-defineExpose({
-  validate,
-});
+defineExpose({ validate });
 </script>
 <template>
   <div class="h-full">
@@ -61,6 +68,7 @@ defineExpose({
         :start-user-ids="modelData.startUserIds"
         :start-dept-ids="modelData.startDeptIds"
         @success="handleDesignSuccess"
+        ref="simpleDesign"
       />
     </template>
   </div>
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 d503f2de6..f35560fff 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
@@ -17,12 +17,17 @@ defineProps<{
 const emit = defineEmits(['success']);
 const designerRef = ref();
 
-// 修改成功回调
+/** 保存成功回调 */
 const handleSuccess = (data?: any) => {
   if (data) {
     emit('success', data);
   }
 };
+/** 设计器配置校验 */
+const validateConfig = async () => {
+  return await designerRef.value.validate();
+};
+defineExpose({ validateConfig });
 </script>
 <template>
   <ContentWrap :body-style="{ padding: '20px 16px' }">
@@ -37,4 +42,3 @@ const handleSuccess = (data?: any) => {
     />
   </ContentWrap>
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
index f00c58ab1..57265935a 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
@@ -1389,4 +1389,3 @@ defineExpose({ loadTodoTask });
   <!-- 签名弹窗 -->
   <Signature ref="signRef" @success="handleSignFinish" />
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
index 23b3aa217..6edd28af0 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
@@ -10,7 +10,7 @@ import { formatDateTime, isEmpty } from '@vben/utils';
 
 import { Avatar, Button, Image, Timeline, Tooltip } from 'ant-design-vue';
 
-import { UserSelectModal } from '#/components/user-select-modal';
+import { UserSelectModal } from '#/components/select-modal';
 import {
   BpmCandidateStrategyEnum,
   BpmNodeTypeEnum,
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 f69ceee22..fe59f9119 100644
--- a/apps/web-antd/src/views/bpm/task/done/data.ts
+++ b/apps/web-antd/src/views/bpm/task/done/data.ts
@@ -133,8 +133,8 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
       field: 'durationInMillis',
       title: '耗时',
       minWidth: 180,
-      formatter: ({ row }) => {
-        return `${formatPast2(row.durationInMillis)}`;
+      formatter: ({ cellValue }) => {
+        return `${formatPast2(cellValue)}`;
       },
     },
     {
diff --git a/apps/web-antd/src/views/bpm/task/manager/data.ts b/apps/web-antd/src/views/bpm/task/manager/data.ts
index d06b6dc82..3c4a27e22 100644
--- a/apps/web-antd/src/views/bpm/task/manager/data.ts
+++ b/apps/web-antd/src/views/bpm/task/manager/data.ts
@@ -89,8 +89,8 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
       field: 'durationInMillis',
       title: '耗时',
       minWidth: 180,
-      formatter: ({ row }) => {
-        return `${formatPast2(row.durationInMillis)}`;
+      formatter: ({ cellValue }) => {
+        return `${formatPast2(cellValue)}`;
       },
     },
     {
diff --git a/apps/web-antd/src/views/crm/backlog/data.ts b/apps/web-antd/src/views/crm/backlog/data.ts
index b56566f14..4bd325004 100644
--- a/apps/web-antd/src/views/crm/backlog/data.ts
+++ b/apps/web-antd/src/views/crm/backlog/data.ts
@@ -1,16 +1,5 @@
 import type { Ref } from 'vue';
 
-import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { CrmContractApi } from '#/api/crm/contract';
-import type { CrmReceivableApi } from '#/api/crm/receivable';
-
-import { useAccess } from '@vben/access';
-
-import { DICT_TYPE } from '#/utils';
-
-const { hasAccessByCodes } = useAccess();
-
 export interface LeftSideItem {
   name: string;
   menu: string;
@@ -110,786 +99,3 @@ export const useLeftSides = (
     },
   ];
 };
-
-/** 分配给我的线索 列表的搜索表单 */
-export function useClueFollowFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'followUpStatus',
-      label: '状态',
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        options: FOLLOWUP_STATUS,
-      },
-      defaultValue: false,
-    },
-  ];
-}
-
-/** 分配给我的线索 列表的字段 */
-export function useClueFollowColumns(): VxeTableGridOptions['columns'] {
-  return [
-    {
-      field: 'name',
-      title: '线索名称',
-      minWidth: 160,
-      fixed: 'left',
-      slots: { default: 'name' },
-    },
-    {
-      field: 'source',
-      title: '线索来源',
-      minWidth: 100,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_CUSTOMER_SOURCE },
-      },
-    },
-    {
-      field: 'mobile',
-      title: '手机',
-      minWidth: 120,
-    },
-    {
-      field: 'telephone',
-      title: '电话',
-      minWidth: 130,
-    },
-    {
-      field: 'email',
-      title: '邮箱',
-      minWidth: 180,
-    },
-    {
-      field: 'detailAddress',
-      title: '地址',
-      minWidth: 180,
-    },
-    {
-      field: 'industryId',
-      title: '客户行业',
-      minWidth: 100,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
-      },
-    },
-    {
-      field: 'level',
-      title: '客户级别',
-      minWidth: 100,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_CUSTOMER_LEVEL },
-      },
-    },
-    {
-      field: 'contactNextTime',
-      title: '下次联系时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'remark',
-      title: '备注',
-      minWidth: 200,
-    },
-    {
-      field: 'contactLastTime',
-      title: '最后跟进时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'contactLastContent',
-      title: '最后跟进记录',
-      minWidth: 200,
-    },
-    {
-      field: 'ownerUserName',
-      title: '负责人',
-      minWidth: 100,
-    },
-    {
-      field: 'ownerUserDeptName',
-      title: '所属部门',
-      minWidth: 100,
-    },
-    {
-      field: 'updateTime',
-      title: '更新时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'createTime',
-      title: '创建时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'creatorName',
-      title: '创建人',
-      minWidth: 100,
-    },
-  ];
-}
-
-/** 合同审核列表的搜索表单 */
-export function useContractAuditFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'auditStatus',
-      label: '合同状态',
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        options: AUDIT_STATUS,
-      },
-      defaultValue: 10,
-    },
-  ];
-}
-
-/** 合同提醒列表的搜索表单 */
-export function useContractRemindFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'expiryType',
-      label: '到期状态',
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        options: CONTRACT_EXPIRY_TYPE,
-      },
-      defaultValue: 1,
-    },
-  ];
-}
-
-/** 合同审核列表的字段 */
-export function useContractColumns<T = CrmContractApi.Contract>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
-  return [
-    {
-      field: 'no',
-      title: '合同编号',
-      minWidth: 160,
-      fixed: 'left',
-    },
-    {
-      field: 'name',
-      title: '合同名称',
-      minWidth: 160,
-      slots: {
-        default: 'name',
-      },
-    },
-    {
-      field: 'customerName',
-      title: '客户名称',
-      minWidth: 160,
-      slots: {
-        default: 'customerName',
-      },
-    },
-    {
-      field: 'businessName',
-      title: '商机名称',
-      minWidth: 160,
-      slots: {
-        default: 'businessName',
-      },
-    },
-    {
-      field: 'price',
-      title: '合同金额（元）',
-      minWidth: 120,
-      formatter: 'formatNumber',
-    },
-    {
-      field: 'orderDate',
-      title: '下单时间',
-      minWidth: 120,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'startTime',
-      title: '合同开始时间',
-      minWidth: 120,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'endTime',
-      title: '合同结束时间',
-      minWidth: 120,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'contactName',
-      title: '客户签约人',
-      minWidth: 130,
-      slots: {
-        default: 'contactName',
-      },
-    },
-    {
-      field: 'signUserName',
-      title: '公司签约人',
-      minWidth: 130,
-    },
-    {
-      field: 'remark',
-      title: '备注',
-      minWidth: 200,
-    },
-    {
-      field: 'totalReceivablePrice',
-      title: '已回款金额（元）',
-      minWidth: 140,
-      formatter: 'formatNumber',
-    },
-    {
-      field: 'noReceivablePrice',
-      title: '未回款金额（元）',
-      minWidth: 120,
-      formatter: 'formatNumber',
-    },
-    {
-      field: 'contactLastTime',
-      title: '最后跟进时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'ownerUserName',
-      title: '负责人',
-      minWidth: 120,
-    },
-    {
-      field: 'ownerUserDeptName',
-      title: '所属部门',
-      minWidth: 100,
-    },
-    {
-      field: 'updateTime',
-      title: '更新时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'createTime',
-      title: '创建时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'creatorName',
-      title: '创建人',
-      minWidth: 100,
-    },
-    {
-      field: 'auditStatus',
-      title: '合同状态',
-      minWidth: 120,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
-      },
-    },
-    {
-      field: 'operation',
-      title: '操作',
-      minWidth: 130,
-      align: 'center',
-      fixed: 'right',
-      cellRender: {
-        attrs: {
-          nameField: 'no',
-          nameTitle: '合同编号',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'processDetail',
-            show: hasAccessByCodes(['crm:contract:update']),
-          },
-        ],
-      },
-    },
-  ];
-}
-
-/** 客户跟进列表的搜索表单 */
-export function useCustomerFollowFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'followUpStatus',
-      label: '状态',
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        options: FOLLOWUP_STATUS,
-      },
-      defaultValue: false,
-    },
-  ];
-}
-
-/** 待进入公海客户列表的搜索表单 */
-export function useCustomerPutPoolFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'sceneType',
-      label: '归属',
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        options: SCENE_TYPES,
-      },
-      defaultValue: 1,
-    },
-  ];
-}
-
-/** 今日需联系客户列表的搜索表单 */
-export function useCustomerTodayContactFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'contactStatus',
-      label: '状态',
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        options: CONTACT_STATUS,
-      },
-      defaultValue: 1,
-    },
-    {
-      fieldName: 'sceneType',
-      label: '归属',
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        options: SCENE_TYPES,
-      },
-      defaultValue: 1,
-    },
-  ];
-}
-
-/** 客户列表的字段 */
-export function useCustomerColumns(): VxeTableGridOptions['columns'] {
-  return [
-    {
-      field: 'name',
-      title: '客户名称',
-      minWidth: 160,
-      slots: {
-        default: 'name',
-      },
-    },
-    {
-      field: 'source',
-      title: '客户来源',
-      minWidth: 100,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_CUSTOMER_SOURCE },
-      },
-    },
-    {
-      field: 'mobile',
-      title: '手机',
-      minWidth: 120,
-    },
-    {
-      field: 'telephone',
-      title: '电话',
-      minWidth: 130,
-    },
-    {
-      field: 'email',
-      title: '邮箱',
-      minWidth: 180,
-    },
-    {
-      field: 'level',
-      title: '客户级别',
-      minWidth: 100,
-      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: '下次联系时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'remark',
-      title: '备注',
-      minWidth: 200,
-    },
-    {
-      field: 'lockStatus',
-      title: '锁定状态',
-      minWidth: 100,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
-      },
-    },
-    {
-      field: 'dealStatus',
-      title: '成交状态',
-      minWidth: 100,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
-      },
-    },
-    {
-      field: 'contactLastTime',
-      title: '最后跟进时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'contactLastContent',
-      title: '最后跟进记录',
-      minWidth: 200,
-    },
-    {
-      field: 'detailAddress',
-      title: '地址',
-      minWidth: 200,
-    },
-    {
-      field: 'poolDay',
-      title: '距离进入公海天数',
-      minWidth: 180,
-    },
-    {
-      field: 'ownerUserName',
-      title: '负责人',
-      minWidth: 100,
-    },
-    {
-      field: 'ownerUserDeptName',
-      title: '所属部门',
-      minWidth: 100,
-    },
-    {
-      field: 'updateTime',
-      title: '更新时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'createTime',
-      title: '创建时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'creatorName',
-      title: '创建人',
-      minWidth: 100,
-    },
-  ];
-}
-
-/** 回款审核列表的搜索表单 */
-export function useReceivableAuditFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'auditStatus',
-      label: '合同状态',
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        options: AUDIT_STATUS,
-      },
-      defaultValue: 10,
-    },
-  ];
-}
-
-/** 回款审核列表的字段 */
-export function useReceivableAuditColumns<T = CrmReceivableApi.Receivable>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
-  return [
-    {
-      field: 'no',
-      title: '回款编号',
-      minWidth: 180,
-      fixed: 'left',
-      slots: {
-        default: 'no',
-      },
-    },
-    {
-      field: 'customerName',
-      title: '客户名称',
-      minWidth: 120,
-      slots: {
-        default: 'customerName',
-      },
-    },
-    {
-      field: 'contractNo',
-      title: '合同编号',
-      minWidth: 180,
-      slots: {
-        default: 'contractNo',
-      },
-    },
-    {
-      field: 'returnTime',
-      title: '回款日期',
-      minWidth: 150,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'price',
-      title: '回款金额(元)',
-      minWidth: 140,
-      formatter: 'formatNumber',
-    },
-    {
-      field: 'returnType',
-      title: '回款方式',
-      minWidth: 130,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
-      },
-    },
-    {
-      field: 'remark',
-      title: '备注',
-      minWidth: 200,
-    },
-    {
-      field: 'contract.totalPrice',
-      title: '合同金额（元）',
-      minWidth: 140,
-      formatter: 'formatNumber',
-    },
-    {
-      field: 'ownerUserName',
-      title: '负责人',
-      minWidth: 120,
-    },
-    {
-      field: 'ownerUserDeptName',
-      title: '所属部门',
-      minWidth: 100,
-    },
-    {
-      field: 'updateTime',
-      title: '更新时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'createTime',
-      title: '创建时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'creatorName',
-      title: '创建人',
-      minWidth: 120,
-    },
-    {
-      field: 'auditStatus',
-      title: '回款状态',
-      minWidth: 120,
-      fixed: 'right',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
-      },
-    },
-    {
-      field: 'operation',
-      title: '操作',
-      width: 140,
-      fixed: 'right',
-      align: 'center',
-      cellRender: {
-        attrs: {
-          nameField: 'name',
-          nameTitle: '角色',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'processDetail',
-            text: '查看审批',
-            show: hasAccessByCodes(['crm:receivable:update']),
-          },
-        ],
-      },
-    },
-  ];
-}
-
-/** 回款计划提醒列表的搜索表单 */
-export function useReceivablePlanRemindFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'remindType',
-      label: '合同状态',
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        options: RECEIVABLE_REMIND_TYPE,
-      },
-      defaultValue: 1,
-    },
-  ];
-}
-
-/** 回款计划提醒列表的字段 */
-export function useReceivablePlanRemindColumns<T = CrmReceivableApi.Receivable>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
-  return [
-    {
-      field: 'customerName',
-      title: '客户名称',
-      minWidth: 160,
-      fixed: 'left',
-      slots: {
-        default: 'customerName',
-      },
-    },
-    {
-      field: 'contractNo',
-      title: '合同编号',
-      minWidth: 200,
-    },
-    {
-      field: 'period',
-      title: '期数',
-      minWidth: 160,
-      slots: {
-        default: 'period',
-      },
-    },
-    {
-      field: 'price',
-      title: '计划回款金额（元）',
-      minWidth: 120,
-      formatter: 'formatNumber',
-    },
-    {
-      field: 'returnTime',
-      title: '计划回款日期',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'remindDays',
-      title: '提前几天提醒',
-      minWidth: 150,
-    },
-    {
-      field: 'remindTime',
-      title: '提醒日期',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'returnType',
-      title: '回款方式',
-      minWidth: 120,
-      fixed: 'right',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
-      },
-    },
-    {
-      field: 'remark',
-      title: '备注',
-      minWidth: 200,
-    },
-    {
-      field: 'ownerUserName',
-      title: '负责人',
-      minWidth: 100,
-    },
-    {
-      field: 'receivable.price',
-      title: '实际回款金额（元）',
-      minWidth: 160,
-      formatter: 'formatNumber',
-    },
-    {
-      field: 'receivable.returnTime',
-      title: '实际回款日期',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'updateTime',
-      title: '更新时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'createTime',
-      title: '创建时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'creatorName',
-      title: '创建人',
-      minWidth: 100,
-    },
-    {
-      field: 'operation',
-      title: '操作',
-      width: 140,
-      fixed: 'right',
-      align: 'center',
-      cellRender: {
-        attrs: {
-          nameField: 'customerName',
-          nameTitle: '客户名称',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'receivableForm',
-            text: '创建回款',
-            show: hasAccessByCodes(['crm:receivable:create']),
-          },
-        ],
-      },
-    },
-  ];
-}
diff --git a/apps/web-antd/src/views/crm/backlog/index.vue b/apps/web-antd/src/views/crm/backlog/index.vue
index 971814f55..1173703e7 100644
--- a/apps/web-antd/src/views/crm/backlog/index.vue
+++ b/apps/web-antd/src/views/crm/backlog/index.vue
@@ -10,17 +10,16 @@ import * as ContractApi from '#/api/crm/contract';
 import * as CustomerApi from '#/api/crm/customer';
 import * as ReceivableApi from '#/api/crm/receivable';
 import * as ReceivablePlanApi from '#/api/crm/receivable/plan';
-import { DocAlert } from '#/components/doc-alert';
 
 import { useLeftSides } from './data';
-import ClueFollowList from './modules/ClueFollowList.vue';
-import ContractAuditList from './modules/ContractAuditList.vue';
-import ContractRemindList from './modules/ContractRemindList.vue';
-import CustomerFollowList from './modules/CustomerFollowList.vue';
-import CustomerPutPoolRemindList from './modules/CustomerPutPoolRemindList.vue';
-import CustomerTodayContactList from './modules/CustomerTodayContactList.vue';
-import ReceivableAuditList from './modules/ReceivableAuditList.vue';
-import ReceivablePlanRemindList from './modules/ReceivablePlanRemindList.vue';
+import ClueFollowList from './modules/clue-follow-list.vue';
+import ContractAuditList from './modules/contract-audit-list.vue';
+import ContractRemindList from './modules/contract-remind-list.vue';
+import CustomerFollowList from './modules/customer-follow-list.vue';
+import CustomerPutPoolRemindList from './modules/customer-put-pool-remind-list.vue';
+import CustomerTodayContactList from './modules/customer-today-contact-list.vue';
+import ReceivableAuditList from './modules/receivable-audit-list.vue';
+import ReceivablePlanRemindList from './modules/receivable-plan-remind-list.vue';
 
 defineOptions({ name: 'CrmBacklog' });
 
@@ -92,12 +91,6 @@ onMounted(async () => {
 </script>
 <template>
   <Page auto-content-height>
-    <template #doc>
-      <DocAlert
-        title="【通用】跟进记录、待办事项"
-        url="https://doc.iocoder.cn/crm/follow-up/"
-      />
-    </template>
     <div class="flex h-full w-full">
       <Card class="w-1/5">
         <List item-layout="horizontal" :data-source="leftSides">
@@ -105,11 +98,17 @@ onMounted(async () => {
             <List.Item>
               <List.Item.Meta>
                 <template #title>
-                  <a @click="sideClick(item)"> {{ item.name }} </a>
+                  <a @click="sideClick(item)">
+                    {{ item.name }}
+                  </a>
                 </template>
               </List.Item.Meta>
-              <template #extra v-if="item.count.value && item.count.value > 0">
-                <Badge :count="item.count.value" />
+              <template #extra>
+                <Badge
+                  :color="item.menu === leftMenu ? 'blue' : 'red'"
+                  :count="item.count.value"
+                  :show-zero="true"
+                />
               </template>
             </List.Item>
           </template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/ReceivablePlanRemindList.vue b/apps/web-antd/src/views/crm/backlog/modules/ReceivablePlanRemindList.vue
deleted file mode 100644
index e0137593a..000000000
--- a/apps/web-antd/src/views/crm/backlog/modules/ReceivablePlanRemindList.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<!-- 待回款提醒 -->
-<script lang="ts" setup>
-import type { OnActionClickParams } from '#/adapter/vxe-table';
-import type { CrmReceivableApi } from '#/api/crm/receivable';
-
-import { useRouter } from 'vue-router';
-
-import { Button } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getReceivablePage } from '#/api/crm/receivable';
-
-import {
-  useReceivablePlanRemindColumns,
-  useReceivablePlanRemindFormSchema,
-} from '../data';
-
-const { push } = useRouter();
-
-/** 打开回款详情 */
-function openDetail(row: CrmReceivableApi.Receivable) {
-  push({ name: 'CrmReceivableDetail', params: { id: row.id } });
-}
-
-/** 打开客户详情 */
-function openCustomerDetail(row: CrmReceivableApi.Receivable) {
-  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
-}
-
-/** 创建回款 */
-function openReceivableForm(row: CrmReceivableApi.Receivable) {
-  // Todo: 打开创建回款
-  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
-}
-
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<CrmReceivableApi.Receivable>) {
-  switch (code) {
-    case 'receivableForm': {
-      openReceivableForm(row);
-      break;
-    }
-  }
-}
-
-const [Grid] = useVbenVxeGrid({
-  formOptions: {
-    schema: useReceivablePlanRemindFormSchema(),
-  },
-  gridOptions: {
-    columns: useReceivablePlanRemindColumns(onActionClick),
-    height: 'auto',
-    keepSource: true,
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          return await getReceivablePage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            ...formValues,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-    },
-    toolbarConfig: {
-      refresh: { code: 'query' },
-      search: true,
-    },
-  },
-});
-</script>
-
-<template>
-  <Grid table-title="待回款提醒">
-    <template #customerName="{ row }">
-      <Button type="link" @click="openCustomerDetail(row)">
-        {{ row.customerName }}
-      </Button>
-    </template>
-    <template #period="{ row }">
-      <Button type="link" @click="openDetail(row)">{{ row.period }}</Button>
-    </template>
-  </Grid>
-</template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/ClueFollowList.vue b/apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue
similarity index 58%
rename from apps/web-antd/src/views/crm/backlog/modules/ClueFollowList.vue
rename to apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue
index 23d109c94..2c52c2ffb 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/ClueFollowList.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue
@@ -1,5 +1,6 @@
 <!-- 分配给我的线索 -->
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmClueApi } from '#/api/crm/clue';
 
 import { useRouter } from 'vue-router';
@@ -8,22 +9,34 @@ import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCluePage } from '#/api/crm/clue';
+import { useGridColumns } from '#/views/crm/clue/data';
 
-import { useClueFollowColumns, useClueFollowFormSchema } from '../data';
+import { FOLLOWUP_STATUS } from '../data';
 
 const { push } = useRouter();
 
 /** 打开线索详情 */
-function onDetail(row: CrmClueApi.Clue) {
+function handleDetail(row: CrmClueApi.Clue) {
   push({ name: 'CrmClueDetail', params: { id: row.id } });
 }
 
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useClueFollowFormSchema(),
+    schema: [
+      {
+        fieldName: 'followUpStatus',
+        label: '状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: FOLLOWUP_STATUS,
+        },
+        defaultValue: false,
+      },
+    ],
   },
   gridOptions: {
-    columns: useClueFollowColumns(),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -45,14 +58,17 @@ const [Grid] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  },
+  } as VxeTableGridOptions<CrmClueApi.Clue>,
 });
 </script>
 
 <template>
-  <Grid table-title="分配给我的线索">
+  <Grid>
     <template #name="{ row }">
-      <Button type="link" @click="onDetail(row)">{{ row.name }}</Button>
+      <Button type="link" @click="handleDetail(row)">{{ row.name }}</Button>
+    </template>
+    <template #actions="{ row }">
+      <Button type="link" @click="handleDetail(row)">查看详情</Button>
     </template>
   </Grid>
 </template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/ContractAuditList.vue b/apps/web-antd/src/views/crm/backlog/modules/contract-audit-list.vue
similarity index 54%
rename from apps/web-antd/src/views/crm/backlog/modules/ContractAuditList.vue
rename to apps/web-antd/src/views/crm/backlog/modules/contract-audit-list.vue
index a243bfe58..3e3032af5 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/ContractAuditList.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/contract-audit-list.vue
@@ -1,21 +1,22 @@
 <!-- 待审核合同 -->
 <script lang="ts" setup>
-import type { OnActionClickParams } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmContractApi } from '#/api/crm/contract';
 
 import { useRouter } from 'vue-router';
 
 import { Button } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getContractPage } from '#/api/crm/contract';
+import { useGridColumns } from '#/views/crm/contract/data';
 
-import { useContractAuditFormSchema, useContractColumns } from '../data';
+import { AUDIT_STATUS } from '../data';
 
 const { push } = useRouter();
 
 /** 查看审批 */
-function openProcessDetail(row: CrmContractApi.Contract) {
+function handleProcessDetail(row: CrmContractApi.Contract) {
   push({
     name: 'BpmProcessInstanceDetail',
     query: { id: row.processInstanceId },
@@ -23,43 +24,41 @@ function openProcessDetail(row: CrmContractApi.Contract) {
 }
 
 /** 打开合同详情 */
-function openContractDetail(row: CrmContractApi.Contract) {
+function handleContractDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmContractDetail', params: { id: row.id } });
 }
 /** 打开客户详情 */
-function openCustomerDetail(row: CrmContractApi.Contract) {
+function handleCustomerDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmCustomerDetail', params: { id: row.id } });
 }
 
 /** 打开联系人详情 */
-function openContactDetail(row: CrmContractApi.Contract) {
+function handleContactDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmContactDetail', params: { id: row.id } });
 }
 
 /** 打开商机详情 */
-function openBusinessDetail(row: CrmContractApi.Contract) {
+function handleBusinessDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmBusinessDetail', params: { id: row.id } });
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<CrmContractApi.Contract>) {
-  switch (code) {
-    case 'processDetail': {
-      openProcessDetail(row);
-      break;
-    }
-  }
-}
-
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useContractAuditFormSchema(),
+    schema: [
+      {
+        fieldName: 'auditStatus',
+        label: '合同状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: AUDIT_STATUS,
+        },
+        defaultValue: 10,
+      },
+    ],
   },
   gridOptions: {
-    columns: useContractColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -81,31 +80,43 @@ const [Grid] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  },
+  } as VxeTableGridOptions<CrmContractApi.Contract>,
 });
 </script>
 
 <template>
-  <Grid table-title="待审核合同">
+  <Grid>
     <template #name="{ row }">
-      <Button type="link" @click="openContractDetail(row)">
+      <Button type="link" @click="handleContractDetail(row)">
         {{ row.name }}
       </Button>
     </template>
     <template #customerName="{ row }">
-      <Button type="link" @click="openCustomerDetail(row)">
+      <Button type="link" @click="handleCustomerDetail(row)">
         {{ row.customerName }}
       </Button>
     </template>
     <template #businessName="{ row }">
-      <Button type="link" @click="openBusinessDetail(row)">
+      <Button type="link" @click="handleBusinessDetail(row)">
         {{ row.businessName }}
       </Button>
     </template>
     <template #contactName="{ row }">
-      <Button type="link" @click="openContactDetail(row)">
+      <Button type="link" @click="handleContactDetail(row)">
         {{ row.contactName }}
       </Button>
     </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '查看审批',
+            type: 'link',
+            icon: ACTION_ICON.VIEW,
+            onClick: handleProcessDetail.bind(null, row),
+          },
+        ]"
+      />
+    </template>
   </Grid>
 </template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/ContractRemindList.vue b/apps/web-antd/src/views/crm/backlog/modules/contract-remind-list.vue
similarity index 52%
rename from apps/web-antd/src/views/crm/backlog/modules/ContractRemindList.vue
rename to apps/web-antd/src/views/crm/backlog/modules/contract-remind-list.vue
index c8ac29657..52922be67 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/ContractRemindList.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/contract-remind-list.vue
@@ -1,21 +1,22 @@
 <!-- 即将到期的合同 -->
 <script lang="ts" setup>
-import type { OnActionClickParams } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmContractApi } from '#/api/crm/contract';
 
 import { useRouter } from 'vue-router';
 
 import { Button } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getContractPage } from '#/api/crm/contract';
+import { useGridColumns } from '#/views/crm/contract/data';
 
-import { useContractColumns, useContractRemindFormSchema } from '../data';
+import { CONTRACT_EXPIRY_TYPE } from '../data';
 
 const { push } = useRouter();
 
 /** 查看审批 */
-function openProcessDetail(row: CrmContractApi.Contract) {
+function handleProcessDetail(row: CrmContractApi.Contract) {
   push({
     name: 'BpmProcessInstanceDetail',
     query: { id: row.processInstanceId },
@@ -23,43 +24,41 @@ function openProcessDetail(row: CrmContractApi.Contract) {
 }
 
 /** 打开合同详情 */
-function openContractDetail(row: CrmContractApi.Contract) {
+function handleContractDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmContractDetail', params: { id: row.id } });
 }
 /** 打开客户详情 */
-function openCustomerDetail(row: CrmContractApi.Contract) {
+function handleCustomerDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmCustomerDetail', params: { id: row.id } });
 }
 
 /** 打开联系人详情 */
-function openContactDetail(row: CrmContractApi.Contract) {
+function handleContactDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmContactDetail', params: { id: row.id } });
 }
 
 /** 打开商机详情 */
-function openBusinessDetail(row: CrmContractApi.Contract) {
+function handleBusinessDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmBusinessDetail', params: { id: row.id } });
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<CrmContractApi.Contract>) {
-  switch (code) {
-    case 'processDetail': {
-      openProcessDetail(row);
-      break;
-    }
-  }
-}
-
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useContractRemindFormSchema(),
+    schema: [
+      {
+        fieldName: 'expiryType',
+        label: '到期状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: CONTRACT_EXPIRY_TYPE,
+        },
+        defaultValue: 1,
+      },
+    ],
   },
   gridOptions: {
-    columns: useContractColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -81,31 +80,43 @@ const [Grid] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  },
+  } as VxeTableGridOptions<CrmContractApi.Contract>,
 });
 </script>
 
 <template>
-  <Grid table-title="即将到期的合同">
+  <Grid>
     <template #name="{ row }">
-      <Button type="link" @click="openContractDetail(row)">
+      <Button type="link" @click="handleContractDetail(row)">
         {{ row.name }}
       </Button>
     </template>
     <template #customerName="{ row }">
-      <Button type="link" @click="openCustomerDetail(row)">
+      <Button type="link" @click="handleCustomerDetail(row)">
         {{ row.customerName }}
       </Button>
     </template>
     <template #businessName="{ row }">
-      <Button type="link" @click="openBusinessDetail(row)">
+      <Button type="link" @click="handleBusinessDetail(row)">
         {{ row.businessName }}
       </Button>
     </template>
-    <template #contactName="{ row }">
-      <Button type="link" @click="openContactDetail(row)">
-        {{ row.contactName }}
+    <template #signContactName="{ row }">
+      <Button type="link" @click="handleContactDetail(row)">
+        {{ row.signContactName }}
       </Button>
     </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '查看审批',
+            type: 'link',
+            auth: ['crm:contract:update'],
+            onClick: handleProcessDetail.bind(null, row),
+          },
+        ]"
+      />
+    </template>
   </Grid>
 </template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/CustomerFollowList.vue b/apps/web-antd/src/views/crm/backlog/modules/customer-follow-list.vue
similarity index 57%
rename from apps/web-antd/src/views/crm/backlog/modules/CustomerFollowList.vue
rename to apps/web-antd/src/views/crm/backlog/modules/customer-follow-list.vue
index 10e427dc9..610e1ae13 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/CustomerFollowList.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/customer-follow-list.vue
@@ -1,5 +1,6 @@
 <!-- 分配给我的客户 -->
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmCustomerApi } from '#/api/crm/customer';
 
 import { useRouter } from 'vue-router';
@@ -8,22 +9,34 @@ import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCustomerPage } from '#/api/crm/customer';
+import { useGridColumns } from '#/views/crm/customer/data';
 
-import { useCustomerColumns, useCustomerFollowFormSchema } from '../data';
+import { FOLLOWUP_STATUS } from '../data';
 
 const { push } = useRouter();
 
 /** 打开客户详情 */
-function onDetail(row: CrmCustomerApi.Customer) {
+function handleDetail(row: CrmCustomerApi.Customer) {
   push({ name: 'CrmCustomerDetail', params: { id: row.id } });
 }
 
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useCustomerFollowFormSchema(),
+    schema: [
+      {
+        fieldName: 'followUpStatus',
+        label: '状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: FOLLOWUP_STATUS,
+        },
+        defaultValue: false,
+      },
+    ],
   },
   gridOptions: {
-    columns: useCustomerColumns(),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -45,14 +58,17 @@ const [Grid] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  },
+  } as VxeTableGridOptions<CrmCustomerApi.Customer>,
 });
 </script>
 
 <template>
-  <Grid table-title="分配给我的客户">
+  <Grid>
     <template #name="{ row }">
-      <Button type="link" @click="onDetail(row)">{{ row.name }}</Button>
+      <Button type="link" @click="handleDetail(row)">{{ row.name }}</Button>
+    </template>
+    <template #actions="{ row }">
+      <Button type="link" @click="handleDetail(row)">查看详情</Button>
     </template>
   </Grid>
 </template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/CustomerPutPoolRemindList.vue b/apps/web-antd/src/views/crm/backlog/modules/customer-put-pool-remind-list.vue
similarity index 59%
rename from apps/web-antd/src/views/crm/backlog/modules/CustomerPutPoolRemindList.vue
rename to apps/web-antd/src/views/crm/backlog/modules/customer-put-pool-remind-list.vue
index 11899ace8..7cc3a6bc8 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/CustomerPutPoolRemindList.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/customer-put-pool-remind-list.vue
@@ -1,5 +1,6 @@
 <!-- 待进入公海的客户 -->
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmCustomerApi } from '#/api/crm/customer';
 
 import { useRouter } from 'vue-router';
@@ -8,22 +9,34 @@ import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCustomerPage } from '#/api/crm/customer';
+import { useGridColumns } from '#/views/crm/customer/data';
 
-import { useCustomerColumns, useCustomerPutPoolFormSchema } from '../data';
+import { SCENE_TYPES } from '../data';
 
 const { push } = useRouter();
 
 /** 打开客户详情 */
-function onDetail(row: CrmCustomerApi.Customer) {
+function handleDetail(row: CrmCustomerApi.Customer) {
   push({ name: 'CrmCustomerDetail', params: { id: row.id } });
 }
 
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useCustomerPutPoolFormSchema(),
+    schema: [
+      {
+        fieldName: 'sceneType',
+        label: '归属',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: SCENE_TYPES,
+        },
+        defaultValue: 1,
+      },
+    ],
   },
   gridOptions: {
-    columns: useCustomerColumns(),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -45,14 +58,17 @@ const [Grid] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  },
+  } as VxeTableGridOptions<CrmCustomerApi.Customer>,
 });
 </script>
 
 <template>
-  <Grid table-title="待进入公海的客户">
+  <Grid>
     <template #name="{ row }">
-      <Button type="link" @click="onDetail(row)">{{ row.name }}</Button>
+      <Button type="link" @click="handleDetail(row)">{{ row.name }}</Button>
+    </template>
+    <template #actions="{ row }">
+      <Button type="link" @click="handleDetail(row)">查看详情</Button>
     </template>
   </Grid>
 </template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/CustomerTodayContactList.vue b/apps/web-antd/src/views/crm/backlog/modules/customer-today-contact-list.vue
similarity index 51%
rename from apps/web-antd/src/views/crm/backlog/modules/CustomerTodayContactList.vue
rename to apps/web-antd/src/views/crm/backlog/modules/customer-today-contact-list.vue
index 8298f90e8..87fd0489d 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/CustomerTodayContactList.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/customer-today-contact-list.vue
@@ -1,5 +1,6 @@
 <!-- 今日需联系客户 -->
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmCustomerApi } from '#/api/crm/customer';
 
 import { useRouter } from 'vue-router';
@@ -8,22 +9,44 @@ import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCustomerPage } from '#/api/crm/customer';
+import { useGridColumns } from '#/views/crm/customer/data';
 
-import { useCustomerColumns, useCustomerTodayContactFormSchema } from '../data';
+import { CONTACT_STATUS, SCENE_TYPES } from '../data';
 
 const { push } = useRouter();
 
 /** 打开客户详情 */
-function onDetail(row: CrmCustomerApi.Customer) {
+function handleDetail(row: CrmCustomerApi.Customer) {
   push({ name: 'CrmCustomerDetail', params: { id: row.id } });
 }
 
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useCustomerTodayContactFormSchema(),
+    schema: [
+      {
+        fieldName: 'contactStatus',
+        label: '状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: CONTACT_STATUS,
+        },
+        defaultValue: 1,
+      },
+      {
+        fieldName: 'sceneType',
+        label: '归属',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: SCENE_TYPES,
+        },
+        defaultValue: 1,
+      },
+    ],
   },
   gridOptions: {
-    columns: useCustomerColumns(),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -45,14 +68,17 @@ const [Grid] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  },
+  } as VxeTableGridOptions<CrmCustomerApi.Customer>,
 });
 </script>
 
 <template>
-  <Grid table-title="今日需联系客户">
+  <Grid>
     <template #name="{ row }">
-      <Button type="link" @click="onDetail(row)">{{ row.name }}</Button>
+      <Button type="link" @click="handleDetail(row)">{{ row.name }}</Button>
+    </template>
+    <template #actions="{ row }">
+      <Button type="link" @click="handleDetail(row)">查看详情</Button>
     </template>
   </Grid>
 </template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/ReceivableAuditList.vue b/apps/web-antd/src/views/crm/backlog/modules/receivable-audit-list.vue
similarity index 59%
rename from apps/web-antd/src/views/crm/backlog/modules/ReceivableAuditList.vue
rename to apps/web-antd/src/views/crm/backlog/modules/receivable-audit-list.vue
index 710c85847..0220ad603 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/ReceivableAuditList.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/receivable-audit-list.vue
@@ -1,6 +1,6 @@
 <!-- 待审核回款 -->
 <script lang="ts" setup>
-import type { OnActionClickParams } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmReceivableApi } from '#/api/crm/receivable';
 
 import { useRouter } from 'vue-router';
@@ -9,16 +9,14 @@ import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getReceivablePage } from '#/api/crm/receivable';
+import { useGridColumns } from '#/views/crm/receivable/data';
 
-import {
-  useReceivableAuditColumns,
-  useReceivableAuditFormSchema,
-} from '../data';
+import { AUDIT_STATUS } from '../data';
 
 const { push } = useRouter();
 
 /** 查看审批 */
-function openProcessDetail(row: CrmReceivableApi.Receivable) {
+function handleProcessDetail(row: CrmReceivableApi.Receivable) {
   push({
     name: 'BpmProcessInstanceDetail',
     query: { id: row.processInstanceId },
@@ -26,39 +24,37 @@ function openProcessDetail(row: CrmReceivableApi.Receivable) {
 }
 
 /** 打开回款详情 */
-function openDetail(row: CrmReceivableApi.Receivable) {
+function handleDetail(row: CrmReceivableApi.Receivable) {
   push({ name: 'CrmReceivableDetail', params: { id: row.id } });
 }
 
 /** 打开客户详情 */
-function openCustomerDetail(row: CrmReceivableApi.Receivable) {
+function handleCustomerDetail(row: CrmReceivableApi.Receivable) {
   push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
 }
 
 /** 打开合同详情 */
-function openContractDetail(row: CrmReceivableApi.Receivable) {
+function handleContractDetail(row: CrmReceivableApi.Receivable) {
   push({ name: 'CrmContractDetail', params: { id: row.contractId } });
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<CrmReceivableApi.Receivable>) {
-  switch (code) {
-    case 'processDetail': {
-      openProcessDetail(row);
-      break;
-    }
-  }
-}
-
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useReceivableAuditFormSchema(),
+    schema: [
+      {
+        fieldName: 'auditStatus',
+        label: '合同状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: AUDIT_STATUS,
+        },
+        defaultValue: 10,
+      },
+    ],
   },
   gridOptions: {
-    columns: useReceivableAuditColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -79,26 +75,29 @@ const [Grid] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  },
+  } as VxeTableGridOptions<CrmReceivableApi.Receivable>,
 });
 </script>
 
 <template>
-  <Grid table-title="待审核回款">
+  <Grid>
     <template #no="{ row }">
-      <Button type="link" @click="openDetail(row)">
+      <Button type="link" @click="handleDetail(row)">
         {{ row.no }}
       </Button>
     </template>
     <template #customerName="{ row }">
-      <Button type="link" @click="openCustomerDetail(row)">
+      <Button type="link" @click="handleCustomerDetail(row)">
         {{ row.customerName }}
       </Button>
     </template>
     <template #contractNo="{ row }">
-      <Button type="link" @click="openContractDetail(row)">
+      <Button type="link" @click="handleContractDetail(row)">
         {{ row.contractNo }}
       </Button>
     </template>
+    <template #actions="{ row }">
+      <Button type="link" @click="handleProcessDetail(row)">查看审批</Button>
+    </template>
   </Grid>
 </template>
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
new file mode 100644
index 000000000..10be86994
--- /dev/null
+++ b/apps/web-antd/src/views/crm/backlog/modules/receivable-plan-remind-list.vue
@@ -0,0 +1,101 @@
+<!-- 待回款提醒 -->
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
+
+import { useRouter } from 'vue-router';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getReceivablePlanPage } from '#/api/crm/receivable/plan';
+import Form from '#/views/crm/receivable/modules/form.vue';
+import { useGridColumns } from '#/views/crm/receivable/plan/data';
+
+import { RECEIVABLE_REMIND_TYPE } from '../data';
+
+const { push } = useRouter();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 打开回款详情 */
+function handleDetail(row: CrmReceivablePlanApi.Plan) {
+  push({ name: 'CrmReceivableDetail', params: { id: row.id } });
+}
+
+/** 打开客户详情 */
+function handleCustomerDetail(row: CrmReceivablePlanApi.Plan) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
+}
+
+/** 创建回款 */
+function handleCreateReceivable(row: CrmReceivablePlanApi.Plan) {
+  formModalApi.setData({ plan: row }).open();
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'remindType',
+        label: '合同状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: RECEIVABLE_REMIND_TYPE,
+        },
+        defaultValue: 1,
+      },
+    ],
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getReceivablePlanPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmReceivablePlanApi.Plan>,
+});
+</script>
+
+<template>
+  <div>
+    <FormModal />
+    <Grid>
+      <template #customerName="{ row }">
+        <Button type="link" @click="handleCustomerDetail(row)">
+          {{ row.customerName }}
+        </Button>
+      </template>
+      <template #period="{ row }">
+        <Button type="link" @click="handleDetail(row)">{{ row.period }}</Button>
+      </template>
+      <template #actions="{ row }">
+        <Button type="link" @click="handleCreateReceivable(row)">
+          创建回款
+        </Button>
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/crm/business/data.ts b/apps/web-antd/src/views/crm/business/data.ts
index 4906fed70..bf65a743c 100644
--- a/apps/web-antd/src/views/crm/business/data.ts
+++ b/apps/web-antd/src/views/crm/business/data.ts
@@ -1,12 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { CrmBusinessApi } from '#/api/crm/business';
-
-import { useAccess } from '@vben/access';
-
-import { getRangePickerDefaultProps } from '#/utils';
-
-const { hasAccessByCodes } = useAccess();
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
@@ -37,7 +30,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 0,
-        controlsPosition: 'right',
         placeholder: '请输入商机金额',
       },
       rules: 'required',
@@ -58,16 +50,6 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '备注',
       component: 'Textarea',
     },
-    {
-      fieldName: 'contactNextTime',
-      label: '下次联系时间',
-      component: 'DatePicker',
-      componentProps: {
-        showTime: false,
-        format: 'YYYY-MM-DD HH:mm:ss',
-        valueFormat: 'x',
-      },
-    },
   ];
 }
 
@@ -79,133 +61,85 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '商机名称',
       component: 'Input',
     },
-    {
-      fieldName: 'createTime',
-      label: '创建时间',
-      component: 'RangePicker',
-      componentProps: {
-        ...getRangePickerDefaultProps(),
-        allowClear: true,
-      },
-    },
   ];
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = CrmBusinessApi.Business>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'name',
       title: '商机名称',
-      minWidth: 160,
       fixed: 'left',
-      slots: {
-        default: 'name',
-      },
+      slots: { default: 'name' },
     },
     {
       field: 'customerName',
       title: '客户名称',
-      minWidth: 120,
       fixed: 'left',
-      slots: {
-        default: 'customerName',
-      },
+      slots: { default: 'customerName' },
     },
     {
       field: 'totalPrice',
       title: '商机金额（元）',
-      minWidth: 140,
       formatter: 'formatNumber',
     },
     {
       field: 'dealTime',
       title: '预计成交日期',
-      minWidth: 180,
       formatter: 'formatDate',
     },
     {
       field: 'remark',
       title: '备注',
-      minWidth: 200,
     },
     {
       field: 'contactNextTime',
       title: '下次联系时间',
-      minWidth: 180,
       formatter: 'formatDate',
     },
     {
       field: 'ownerUserName',
       title: '负责人',
-      minWidth: 100,
     },
     {
       field: 'ownerUserDeptName',
       title: '所属部门',
-      minWidth: 100,
     },
     {
       field: 'contactLastTime',
       title: '最后跟进时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'updateTime',
       title: '更新时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'creatorName',
       title: '创建人',
-      minWidth: 100,
     },
     {
       field: 'statusTypeName',
       title: '商机状态组',
-      minWidth: 140,
       fixed: 'right',
     },
     {
       field: 'statusName',
       title: '商机阶段',
-      minWidth: 120,
       fixed: 'right',
     },
     {
-      field: 'operation',
       title: '操作',
       width: 130,
       fixed: 'right',
-      align: 'center',
-      cellRender: {
-        attrs: {
-          nameField: 'name',
-          nameTitle: '商机',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'edit',
-            show: hasAccessByCodes(['crm:business:update']),
-          },
-          {
-            code: 'delete',
-            show: hasAccessByCodes(['crm:business:delete']),
-          },
-        ],
-      },
+      slots: { default: 'actions' },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/business/index.vue b/apps/web-antd/src/views/crm/business/index.vue
index 14d2965c2..f564cc4e1 100644
--- a/apps/web-antd/src/views/crm/business/index.vue
+++ b/apps/web-antd/src/views/crm/business/index.vue
@@ -1,19 +1,15 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmBusinessApi } from '#/api/crm/business';
 
 import { useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus } from '@vben/icons';
 import { downloadFileFromBlobPart } from '@vben/utils';
 
 import { Button, message } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteBusiness,
   exportBusiness,
@@ -38,23 +34,23 @@ function onRefresh() {
 }
 
 /** 导出表格 */
-async function onExport() {
+async function handleExport() {
   const data = await exportBusiness(await gridApi.formApi.getValues());
   downloadFileFromBlobPart({ fileName: '商机.xls', source: data });
 }
 
 /** 创建商机 */
-function onCreate() {
+function handleCreate() {
   formModalApi.setData(null).open();
 }
 
 /** 编辑商机 */
-function onEdit(row: CrmBusinessApi.Business) {
+function handleEdit(row: CrmBusinessApi.Business) {
   formModalApi.setData(row).open();
 }
 
 /** 删除商机 */
-async function onDelete(row: CrmBusinessApi.Business) {
+async function handleDelete(row: CrmBusinessApi.Business) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
@@ -70,38 +66,21 @@ async function onDelete(row: CrmBusinessApi.Business) {
 }
 
 /** 查看商机详情 */
-function onDetail(row: CrmBusinessApi.Business) {
+function handleDetail(row: CrmBusinessApi.Business) {
   push({ name: 'CrmBusinessDetail', params: { id: row.id } });
 }
 
 /** 查看客户详情 */
-function onCustomerDetail(row: CrmBusinessApi.Business) {
+function handleCustomerDetail(row: CrmBusinessApi.Business) {
   push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<CrmBusinessApi.Business>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -142,34 +121,59 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <Grid table-title="商机列表">
       <template #toolbar-tools>
-        <Button
-          type="primary"
-          @click="onCreate"
-          v-access:code="['crm:business:create']"
-        >
-          <Plus class="size-5" />
-          {{ $t('ui.actionTitle.create', ['商机']) }}
-        </Button>
-        <Button
-          type="primary"
-          class="ml-2"
-          @click="onExport"
-          v-access:code="['crm:business:export']"
-        >
-          <Download class="size-5" />
-          {{ $t('ui.actionTitle.export') }}
-        </Button>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['商机']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:business:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['crm:business:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
       </template>
       <template #name="{ row }">
-        <Button type="link" @click="onDetail(row)">
+        <Button type="link" @click="handleDetail(row)">
           {{ row.name }}
         </Button>
       </template>
       <template #customerName="{ row }">
-        <Button type="link" @click="onCustomerDetail(row)">
+        <Button type="link" @click="handleCustomerDetail(row)">
           {{ row.customerName }}
         </Button>
       </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:business:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:business:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
     </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/permission/components/TransferForm.vue b/apps/web-antd/src/views/crm/business/modules/detail-info.vue
similarity index 59%
rename from apps/web-antd/src/views/crm/permission/components/TransferForm.vue
rename to apps/web-antd/src/views/crm/business/modules/detail-info.vue
index 99ad6b6f9..da6c78661 100644
--- a/apps/web-antd/src/views/crm/permission/components/TransferForm.vue
+++ b/apps/web-antd/src/views/crm/business/modules/detail-info.vue
@@ -1,7 +1,4 @@
 <script lang="ts" setup></script>
-
 <template>
-  <div>
-    <p>待完成</p>
-  </div>
+  <div>businessInfo</div>
 </template>
diff --git a/apps/web-antd/src/views/crm/business/modules/detail-list.vue b/apps/web-antd/src/views/crm/business/modules/detail-list.vue
new file mode 100644
index 000000000..b6466c322
--- /dev/null
+++ b/apps/web-antd/src/views/crm/business/modules/detail-list.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>businessList</div>
+</template>
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 ad6c88b7a..cae23dcf5 100644
--- a/apps/web-antd/src/views/crm/business/status/data.ts
+++ b/apps/web-antd/src/views/crm/business/status/data.ts
@@ -1,18 +1,11 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { CrmBusinessStatusApi } from '#/api/crm/business/status';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { useAccess } from '@vben/access';
+import { handleTree } from '@vben/utils';
 
 import { z } from '#/adapter/form';
-import {
-  CommonStatusEnum,
-  DICT_TYPE,
-  getDictOptions,
-  getRangePickerDefaultProps,
-} from '#/utils';
-
-const { hasAccessByCodes } = useAccess();
+import { getDeptList } from '#/api/system/dept';
+import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
 
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
@@ -34,12 +27,16 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'deptIds',
       label: '应用部门',
-      component: 'TreeSelect',
+      component: 'ApiTreeSelect',
       componentProps: {
+        api: async () => {
+          const data = await getDeptList();
+          return handleTree(data);
+        },
         multiple: true,
-        treeCheckable: true,
-        showCheckedStrategy: 'SHOW_PARENT',
+        fieldNames: { label: 'name', value: 'id', children: 'children' },
         placeholder: '请选择应用部门',
+        treeDefaultExpandAll: true,
       },
     },
     {
@@ -56,79 +53,33 @@ export function useFormSchema(): VbenFormSchema[] {
   ];
 }
 
-/** 列表的搜索表单 */
-export function useGridFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'name',
-      label: '状态组名',
-      component: 'Input',
-    },
-    {
-      fieldName: 'createTime',
-      label: '创建时间',
-      component: 'RangePicker',
-      componentProps: {
-        ...getRangePickerDefaultProps(),
-        allowClear: true,
-      },
-    },
-  ];
-}
-
 /** 列表的字段 */
-export function useGridColumns<T = CrmBusinessStatusApi.BusinessStatus>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'name',
       title: '状态组名',
-      minWidth: 200,
     },
     {
       field: 'deptNames',
       title: '应用部门',
-      minWidth: 200,
-      formatter: ({ cellValue }) => {
-        return cellValue?.length > 0 ? cellValue.join(' ') : '全公司';
-      },
+      formatter: ({ cellValue }) =>
+        cellValue?.length > 0 ? cellValue.join(' ') : '全公司',
     },
     {
       field: 'creator',
       title: '创建人',
-      minWidth: 100,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
-      field: 'operation',
       title: '操作',
       width: 160,
       fixed: 'right',
-      align: 'center',
-      cellRender: {
-        name: 'TableAction',
-        props: {
-          actions: [
-            {
-              label: '编辑',
-              code: 'edit',
-              show: hasAccessByCodes(['crm:business-status:update']),
-            },
-            {
-              label: '删除',
-              code: 'delete',
-              show: hasAccessByCodes(['crm:business-status:delete']),
-            },
-          ],
-          onActionClick,
-        },
-      },
+      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 5b205ded4..5ef2bfa13 100644
--- a/apps/web-antd/src/views/crm/business/status/index.vue
+++ b/apps/web-antd/src/views/crm/business/status/index.vue
@@ -1,16 +1,12 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmBusinessStatusApi } from '#/api/crm/business/status';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Plus } from '@vben/icons';
 
-import { Button, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteBusinessStatus,
   getBusinessStatusPage,
@@ -18,7 +14,7 @@ import {
 import { DocAlert } from '#/components/doc-alert';
 import { $t } from '#/locales';
 
-import { useGridColumns, useGridFormSchema } from './data';
+import { useGridColumns } from './data';
 import Form from './modules/form.vue';
 
 const [FormModal, formModalApi] = useVbenModal({
@@ -32,12 +28,12 @@ function onRefresh() {
 }
 
 /** 创建商机状态 */
-function onCreate() {
+function handleCreate() {
   formModalApi.setData(null).open();
 }
 
 /** 删除商机状态 */
-async function onDelete(row: CrmBusinessStatusApi.BusinessStatus) {
+async function handleDelete(row: CrmBusinessStatusApi.BusinessStatus) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
@@ -53,33 +49,13 @@ async function onDelete(row: CrmBusinessStatusApi.BusinessStatus) {
 }
 
 /** 编辑商机状态 */
-function onEdit(row: CrmBusinessStatusApi.BusinessStatus) {
+function handleEdit(row: CrmBusinessStatusApi.BusinessStatus) {
   formModalApi.setData(row).open();
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<CrmBusinessStatusApi.BusinessStatus>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: useGridFormSchema(),
-  },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -120,14 +96,41 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <Grid table-title="商机状态列表">
       <template #toolbar-tools>
-        <Button
-          type="primary"
-          @click="onCreate"
-          v-access:code="['crm:business-status:create']"
-        >
-          <Plus class="size-5" />
-          {{ $t('ui.actionTitle.create', ['商机状态']) }}
-        </Button>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['商机状态']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:post:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:business-status:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:business-status:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>
diff --git a/apps/web-antd/src/views/crm/clue/data.ts b/apps/web-antd/src/views/crm/clue/data.ts
index 28e561915..abc05ed4e 100644
--- a/apps/web-antd/src/views/crm/clue/data.ts
+++ b/apps/web-antd/src/views/crm/clue/data.ts
@@ -1,19 +1,15 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { CrmClueApi } from '#/api/crm/clue';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
 
-import { useAccess } from '@vben/access';
 import { formatDateTime } from '@vben/utils';
 
 import { getAreaTree } from '#/api/system/area';
 import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
-
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -164,14 +160,11 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = CrmClueApi.Clue>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'name',
       title: '线索名称',
-      minWidth: 160,
       fixed: 'left',
       slots: {
         default: 'name',
@@ -180,7 +173,6 @@ export function useGridColumns<T = CrmClueApi.Clue>(
     {
       field: 'source',
       title: '线索来源',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_SOURCE },
@@ -189,27 +181,22 @@ export function useGridColumns<T = CrmClueApi.Clue>(
     {
       field: 'mobile',
       title: '手机',
-      minWidth: 120,
     },
     {
       field: 'telephone',
       title: '电话',
-      minWidth: 130,
     },
     {
       field: 'email',
       title: '邮箱',
-      minWidth: 180,
     },
     {
       field: 'detailAddress',
       title: '地址',
-      minWidth: 180,
     },
     {
       field: 'industryId',
       title: '客户行业',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
@@ -218,7 +205,6 @@ export function useGridColumns<T = CrmClueApi.Clue>(
     {
       field: 'level',
       title: '客户级别',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_LEVEL },
@@ -227,66 +213,40 @@ export function useGridColumns<T = CrmClueApi.Clue>(
     {
       field: 'ownerUserName',
       title: '负责人',
-      minWidth: 100,
     },
     {
       field: 'ownerUserDeptName',
       title: '所属部门',
-      minWidth: 100,
     },
     {
       field: 'contactNextTime',
       title: '下次联系时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'contactLastTime',
       title: '最后跟进时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'updateTime',
       title: '更新时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'creatorName',
       title: '创建人',
-      minWidth: 100,
     },
     {
-      field: 'operation',
       title: '操作',
-      width: 130,
+      width: 140,
       fixed: 'right',
-      align: 'center',
-      cellRender: {
-        attrs: {
-          nameField: 'name',
-          nameTitle: '线索',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'edit',
-            show: hasAccessByCodes(['crm:clue:update']),
-          },
-          {
-            code: 'delete',
-            show: hasAccessByCodes(['crm:clue:delete']),
-          },
-        ],
-      },
+      slots: { default: 'actions' },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/clue/index.vue b/apps/web-antd/src/views/crm/clue/index.vue
index c9f519bee..b9aa665f2 100644
--- a/apps/web-antd/src/views/crm/clue/index.vue
+++ b/apps/web-antd/src/views/crm/clue/index.vue
@@ -1,19 +1,15 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmClueApi } from '#/api/crm/clue';
 
 import { useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus } from '@vben/icons';
 import { downloadFileFromBlobPart } from '@vben/utils';
 
 import { Button, message } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteClue, exportClue, getCluePage } from '#/api/crm/clue';
 import { DocAlert } from '#/components/doc-alert';
 import { $t } from '#/locales';
@@ -33,55 +29,43 @@ function onRefresh() {
   gridApi.query();
 }
 
-/** 导出表格 */
-async function onExport() {
-  const data = await exportClue(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '线索.xls', source: data });
-}
-
 /** 创建线索 */
-function onCreate() {
+function handleCreate() {
   formModalApi.setData(null).open();
 }
 
 /** 编辑线索 */
-function onEdit(row: CrmClueApi.Clue) {
+function handleEdit(row: CrmClueApi.Clue) {
   formModalApi.setData(row).open();
 }
 
 /** 删除线索 */
-async function onDelete(row: CrmClueApi.Clue) {
+async function handleDelete(row: CrmClueApi.Clue) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    duration: 0,
-    key: 'action_process_msg',
+    key: 'action_key_msg',
   });
   try {
     await deleteClue(row.id as number);
-    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
     onRefresh();
   } catch {
     hideLoading();
   }
 }
 
-/** 查看线索详情 */
-function onDetail(row: CrmClueApi.Clue) {
-  push({ name: 'CrmClueDetail', params: { id: row.id } });
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportClue(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '线索.xls', source: data });
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({ code, row }: OnActionClickParams<CrmClueApi.Clue>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
+/** 查看线索详情 */
+function handleDetail(row: CrmClueApi.Clue) {
+  push({ name: 'CrmClueDetail', params: { id: row.id } });
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -89,7 +73,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -130,29 +114,54 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <Grid table-title="线索列表">
       <template #toolbar-tools>
-        <Button
-          type="primary"
-          @click="onCreate"
-          v-access:code="['crm:clue:create']"
-        >
-          <Plus class="size-5" />
-          {{ $t('ui.actionTitle.create', ['线索']) }}
-        </Button>
-        <Button
-          type="primary"
-          class="ml-2"
-          @click="onExport"
-          v-access:code="['crm:clue:export']"
-        >
-          <Download class="size-5" />
-          {{ $t('ui.actionTitle.export') }}
-        </Button>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['线索']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:clue:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['crm:clue:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
       </template>
       <template #name="{ row }">
-        <Button type="link" @click="onDetail(row)">
+        <Button type="link" @click="handleDetail(row)">
           {{ row.name }}
         </Button>
       </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:clue:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:clue:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
     </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/clue/modules/detail.vue b/apps/web-antd/src/views/crm/clue/modules/detail.vue
index f8fbf8e45..7c9d29b2a 100644
--- a/apps/web-antd/src/views/crm/clue/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/clue/modules/detail.vue
@@ -5,16 +5,18 @@ import { defineAsyncComponent, 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, Modal, Tabs } from 'ant-design-vue';
 
 import { getClue, transformClue } from '#/api/crm/clue';
+import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
+import { PermissionList, TransferForm } from '#/views/crm/permission';
 
 import { useDetailSchema } from '../data';
 import ClueForm from './form.vue';
-import TransferForm from './transfer.vue';
 
 const ClueDetailsInfo = defineAsyncComponent(() => import('./detail-info.vue'));
 
@@ -22,6 +24,7 @@ const loading = ref(false);
 
 const route = useRoute();
 const router = useRouter();
+const tabs = useTabs();
 
 const clueId = ref(0);
 
@@ -57,22 +60,23 @@ async function loadClueDetail() {
 }
 
 /** 返回列表页 */
-function onBack() {
+function handleBack() {
+  tabs.closeCurrentTab();
   router.push('/crm/clue');
 }
 
 /** 编辑线索 */
-function onEdit() {
+function handleEdit() {
   formModalApi.setData({ id: clueId }).open();
 }
 
 /** 转移线索 */
-function onTransfer() {
-  transferModalApi.setData({ id: clueId }).open();
+function handleTransfer() {
+  transferModalApi.setData({ bizType: BizTypeEnum.CRM_CLUE }).open();
 }
 
 /** 转化为客户 */
-async function onTransform() {
+async function handleTransform() {
   try {
     await Modal.confirm({
       title: '提示',
@@ -99,14 +103,14 @@ onMounted(async () => {
   <Page auto-content-height :title="clue?.name" :loading="loading">
     <template #extra>
       <div class="flex items-center gap-2">
-        <Button @click="onBack">
+        <Button @click="handleBack">
           <ArrowLeft class="size-5" />
           返回
         </Button>
         <Button
           v-if="permissionListRef?.validateWrite"
           type="primary"
-          @click="onEdit"
+          @click="handleEdit"
           v-access:code="['crm:clue:update']"
         >
           {{ $t('ui.actionTitle.edit') }}
@@ -114,7 +118,7 @@ onMounted(async () => {
         <Button
           v-if="permissionListRef?.validateOwnerUser"
           type="primary"
-          @click="onTransfer"
+          @click="handleTransfer"
           v-access:code="['crm:clue:update']"
         >
           转移
@@ -122,7 +126,7 @@ onMounted(async () => {
         <Button
           v-if="permissionListRef?.validateOwnerUser && !clue?.transformStatus"
           type="primary"
-          @click="onTransform"
+          @click="handleTransform"
           v-access:code="['crm:clue:update']"
         >
           转化为客户
@@ -141,7 +145,13 @@ onMounted(async () => {
           <ClueDetailsInfo :clue="clue" />
         </Tabs.TabPane>
         <Tabs.TabPane tab="团队成员" key="3">
-          <div>团队成员</div>
+          <PermissionList
+            ref="permissionListRef"
+            :biz-id="clue.id!"
+            :biz-type="BizTypeEnum.CRM_CLUE"
+            :show-action="true"
+            @quit-team="handleBack"
+          />
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="4">
           <div>操作日志</div>
diff --git a/apps/web-antd/src/views/crm/contact/data.ts b/apps/web-antd/src/views/crm/contact/data.ts
new file mode 100644
index 000000000..956f32333
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contact/data.ts
@@ -0,0 +1,385 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { formatDateTime } from '@vben/utils';
+
+import { getSimpleContactList } from '#/api/crm/contact';
+import { getCustomerSimpleList } from '#/api/crm/customer';
+import { getAreaTree } from '#/api/system/area';
+import { getSimpleUserList } from '#/api/system/user';
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '联系人姓名',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'ownerUserId',
+      label: '负责人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleUserList(),
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
+      },
+    },
+    {
+      fieldName: 'customerId',
+      label: '客户名称',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getCustomerSimpleList(),
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
+      },
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机',
+      component: 'Input',
+    },
+    {
+      fieldName: 'telephone',
+      label: '电话',
+      component: 'Input',
+    },
+    {
+      fieldName: 'email',
+      label: '邮箱',
+      component: 'Input',
+    },
+    {
+      fieldName: 'wechat',
+      label: '微信',
+      component: 'Input',
+    },
+    {
+      fieldName: 'qq',
+      label: 'QQ',
+      component: 'Input',
+    },
+    {
+      fieldName: 'post',
+      label: '职位',
+      component: 'Input',
+    },
+    {
+      fieldName: 'master',
+      label: '关键决策人',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+      },
+    },
+    {
+      fieldName: 'sex',
+      label: '性别',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+      },
+    },
+    {
+      fieldName: 'parentId',
+      label: '直属上级',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleContactList(),
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+    },
+    {
+      fieldName: 'areaId',
+      label: '地址',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        api: () => getAreaTree(),
+        fieldNames: { label: 'name', value: 'id', children: 'children' },
+      },
+    },
+    {
+      fieldName: 'detailAddress',
+      label: '详细地址',
+      component: 'Input',
+    },
+    {
+      fieldName: 'contactNextTime',
+      label: '下次联系时间',
+      component: 'DatePicker',
+      componentProps: {
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '客户',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getCustomerSimpleList(),
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '姓名',
+      component: 'Input',
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'telephone',
+      label: '电话',
+      component: 'Input',
+    },
+    {
+      fieldName: 'wechat',
+      label: '微信',
+      component: 'Input',
+    },
+    {
+      fieldName: 'email',
+      label: '电子邮箱',
+      component: 'Input',
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      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 },
+      },
+    },
+    {
+      field: 'parentId',
+      title: '直属上级',
+      slots: { default: 'parentId' },
+    },
+    {
+      field: 'ownerUserName',
+      title: '负责人',
+    },
+    {
+      field: 'ownerUserDeptName',
+      title: '所属部门',
+    },
+    {
+      field: 'contactNextTime',
+      title: '下次联系时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'remark',
+      title: '备注',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [...useDetailBaseSchema(), ...useDetailSystemSchema()];
+}
+
+/** 详情页的基础字段 */
+export function useDetailBaseSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'name',
+      label: '客户名称',
+    },
+    {
+      field: 'source',
+      label: '客户来源',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.CRM_CUSTOMER_SOURCE,
+          value: data?.source,
+        }),
+    },
+    {
+      field: 'mobile',
+      label: '手机',
+    },
+    {
+      field: 'telephone',
+      label: '电话',
+    },
+    {
+      field: 'email',
+      label: '邮箱',
+    },
+    {
+      field: 'wechat',
+      label: '微信',
+    },
+    {
+      field: 'qq',
+      label: 'QQ',
+    },
+    {
+      field: 'industryId',
+      label: '客户行业',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY,
+          value: data?.industryId,
+        }),
+    },
+    {
+      field: 'level',
+      label: '客户级别',
+      content: (data) =>
+        h(DictTag, { type: DICT_TYPE.CRM_CUSTOMER_LEVEL, value: data?.level }),
+    },
+    {
+      field: 'areaName',
+      label: '地址',
+    },
+    {
+      field: 'detailAddress',
+      label: '详细地址',
+    },
+    {
+      field: 'contactNextTime',
+      label: '下次联系时间',
+      content: (data) => formatDateTime(data?.contactNextTime) as string,
+    },
+    {
+      field: 'remark',
+      label: '备注',
+    },
+  ];
+}
+
+/** 详情页的系统字段 */
+export function useDetailSystemSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'ownerUserName',
+      label: '负责人',
+    },
+    {
+      field: 'ownerUserDeptName',
+      label: '所属部门',
+    },
+    {
+      field: 'contactLastTime',
+      label: '最后跟进时间',
+      content: (data) => formatDateTime(data?.contactLastTime) as string,
+    },
+    {
+      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/contact/index.vue b/apps/web-antd/src/views/crm/contact/index.vue
index c17be72b3..21fd5acd4 100644
--- a/apps/web-antd/src/views/crm/contact/index.vue
+++ b/apps/web-antd/src/views/crm/contact/index.vue
@@ -1,38 +1,207 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmContactApi } from '#/api/crm/contact';
 
-import { Button } from 'ant-design-vue';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 
+import { Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message, Tabs } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteContact,
+  exportContact,
+  getContactPage,
+} from '#/api/crm/contact';
 import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const { push } = useRouter();
+const sceneType = ref('1');
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportContact(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '联系人.xls', source: data });
+}
+
+/** 创建联系人 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑联系人 */
+function handleEdit(row: CrmContactApi.Contact) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除联系人 */
+async function handleDelete(row: CrmContactApi.Contact) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteContact(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 查看联系人详情 */
+function handleDetail(row: CrmContactApi.Contact) {
+  push({ name: 'CrmContactDetail', params: { id: row.id } });
+}
+
+/** 查看客户详情 */
+function handleCustomerDetail(row: CrmContactApi.Contact) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getContactPage({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            sceneType: sceneType.value,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmContactApi.Contact>,
+});
+
+function onChangeSceneType(key: number | string) {
+  sceneType.value = key.toString();
+  gridApi.query();
+}
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【客户】客户管理、公海客户"
-      url="https://doc.iocoder.cn/crm/customer/"
-    />
-    <DocAlert
-      title="【通用】数据权限"
-      url="https://doc.iocoder.cn/crm/permission/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/contact/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/contact/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【客户】客户管理、公海客户"
+        url="https://doc.iocoder.cn/crm/customer/"
+      />
+      <DocAlert
+        title="【通用】数据权限"
+        url="https://doc.iocoder.cn/crm/permission/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+    <Grid>
+      <template #top>
+        <Tabs class="border-none" @change="onChangeSceneType">
+          <Tabs.TabPane tab="我负责的" key="1" />
+          <Tabs.TabPane tab="我参与的" key="2" />
+          <Tabs.TabPane tab="下属负责的" key="3" />
+        </Tabs>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['联系人']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:contact:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['crm:contact:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #name="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.name }}
+        </Button>
+      </template>
+      <template #customerName="{ row }">
+        <Button type="link" @click="handleCustomerDetail(row)">
+          {{ row.customerName }}
+        </Button>
+      </template>
+      <template #parentId="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.parentId }}
+        </Button>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              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',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:contact:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/contact/modules/detail-info.vue b/apps/web-antd/src/views/crm/contact/modules/detail-info.vue
new file mode 100644
index 000000000..a9a8f4cb1
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contact/modules/detail-info.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>contactInfo</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/contact/modules/detail-list.vue b/apps/web-antd/src/views/crm/contact/modules/detail-list.vue
new file mode 100644
index 000000000..1f5fe358f
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contact/modules/detail-list.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>contactList</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/contact/modules/form.vue b/apps/web-antd/src/views/crm/contact/modules/form.vue
new file mode 100644
index 000000000..d6a822d66
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contact/modules/form.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { CrmContactApi } from '#/api/crm/contact';
+
+import { computed, ref } from 'vue';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { createContact, getContact, updateContact } from '#/api/crm/contact';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmContactApi.Contact>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['联系人'])
+    : $t('ui.actionTitle.create', ['联系人']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // 一共2列
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as CrmContactApi.Contact;
+    try {
+      await (formData.value?.id ? updateContact(data) : createContact(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<CrmContactApi.Contact>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getContact(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-[40%]">
+    <Form class="mx-4" />
+  </Modal>
+</template>
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 db64ed742..d0dcd1aff 100644
--- a/apps/web-antd/src/views/crm/contract/config/index.vue
+++ b/apps/web-antd/src/views/crm/contract/config/index.vue
@@ -1,38 +1,104 @@
 <script lang="ts" setup>
+import type { CrmContractConfigApi } from '#/api/crm/contract/config';
+
+import { onMounted } from 'vue';
+
 import { Page } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import { Card, message } from 'ant-design-vue';
 
-import { DocAlert } from '#/components/doc-alert';
+import { useVbenForm } from '#/adapter/form';
+import {
+  getContractConfig,
+  saveContractConfig,
+} from '#/api/crm/contract/config';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+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,
+});
+
+async function onSubmit() {
+  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);
+  }
+}
+
+async function getConfigInfo() {
+  try {
+    const res = await getContractConfig();
+    formApi.setValues(res);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+onMounted(() => {
+  getConfigInfo();
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【合同】合同管理、合同提醒"
-      url="https://doc.iocoder.cn/crm/contract/"
-    />
-    <DocAlert
-      title="【通用】数据权限"
-      url="https://doc.iocoder.cn/crm/permission/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/contract/config/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/contract/config/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <Card title="合同配置设置">
+      <Form class="w-1/4" />
+    </Card>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/contract/data.ts b/apps/web-antd/src/views/crm/contract/data.ts
new file mode 100644
index 000000000..79118dd3f
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contract/data.ts
@@ -0,0 +1,276 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getSimpleBusinessList } from '#/api/crm/business';
+import { getSimpleContactList } from '#/api/crm/contact';
+import { getCustomerSimpleList } from '#/api/crm/customer';
+import { floatToFixed2 } from '#/utils';
+import { DICT_TYPE } from '#/utils/dict';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '合同编号',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入合同编号',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '合同名称',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入合同名称',
+      },
+    },
+    {
+      fieldName: 'customerId',
+      label: '客户',
+      component: 'ApiSelect',
+      rules: 'required',
+      componentProps: {
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择客户',
+      },
+    },
+    {
+      fieldName: 'businessId',
+      label: '商机',
+      component: 'ApiSelect',
+      rules: 'required',
+      componentProps: {
+        api: getSimpleBusinessList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择商机',
+      },
+    },
+    {
+      fieldName: 'totalPrice',
+      label: '合同金额',
+      component: 'InputNumber',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入合同金额',
+        min: 0,
+        precision: 2,
+      },
+    },
+    {
+      fieldName: 'orderDate',
+      label: '下单时间',
+      component: 'DatePicker',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请选择下单时间',
+      },
+    },
+    {
+      fieldName: 'startTime',
+      label: '合同开始时间',
+      component: 'DatePicker',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请选择合同开始时间',
+      },
+    },
+    {
+      fieldName: 'endTime',
+      label: '合同结束时间',
+      component: 'DatePicker',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请选择合同结束时间',
+      },
+    },
+    {
+      fieldName: 'signContactId',
+      label: '客户签约人',
+      component: 'ApiSelect',
+      rules: 'required',
+      componentProps: {
+        api: getSimpleContactList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择客户签约人',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '合同编号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'name',
+      label: '合同名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'customerId',
+      label: '客户',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择客户',
+      },
+    },
+  ];
+}
+
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '合同编号',
+      field: 'no',
+      minWidth: 150,
+      fixed: 'left',
+    },
+    {
+      title: '合同名称',
+      field: 'name',
+      minWidth: 150,
+      fixed: 'left',
+      slots: { default: 'name' },
+    },
+    {
+      title: '客户名称',
+      field: 'customerName',
+      minWidth: 150,
+      slots: { default: 'customerName' },
+    },
+    {
+      title: '商机名称',
+      field: 'businessName',
+      minWidth: 150,
+      slots: { default: 'businessName' },
+    },
+    {
+      title: '合同金额（元）',
+      field: 'totalPrice',
+      minWidth: 150,
+      formatter: 'formatNumber',
+    },
+    {
+      title: '下单时间',
+      field: 'orderDate',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '合同开始时间',
+      field: 'startTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '合同结束时间',
+      field: 'endTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '客户签约人',
+      field: 'signContactName',
+      minWidth: 150,
+      slots: { default: 'signContactName' },
+    },
+    {
+      title: '公司签约人',
+      field: 'signUserName',
+      minWidth: 150,
+    },
+    {
+      title: '已回款金额（元）',
+      field: 'totalReceivablePrice',
+      minWidth: 150,
+      formatter: 'formatNumber',
+    },
+    {
+      title: '未回款金额（元）',
+      field: 'unpaidPrice',
+      minWidth: 150,
+      formatter: ({ row }) => {
+        return floatToFixed2(row.totalPrice - row.totalReceivablePrice);
+      },
+    },
+    {
+      title: '最后跟进时间',
+      field: 'contactLastTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '负责人',
+      field: 'ownerUserName',
+      minWidth: 150,
+    },
+    {
+      title: '所属部门',
+      field: 'ownerUserDeptName',
+      minWidth: 150,
+    },
+    {
+      title: '更新时间',
+      field: 'updateTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      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 },
+      },
+    },
+    {
+      title: '操作',
+      field: 'actions',
+      fixed: 'right',
+      width: 130,
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/contract/index.vue b/apps/web-antd/src/views/crm/contract/index.vue
index 6622d144a..9d306627f 100644
--- a/apps/web-antd/src/views/crm/contract/index.vue
+++ b/apps/web-antd/src/views/crm/contract/index.vue
@@ -1,38 +1,265 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmContractApi } from '#/api/crm/contract';
 
-import { Button } from 'ant-design-vue';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 
+import { Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message, Tabs } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteContract,
+  exportContract,
+  getContractPage,
+  submitContract,
+} from '#/api/crm/contract';
 import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const { push } = useRouter();
+const sceneType = ref('1');
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportContract(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '合同.xls', source: data });
+}
+
+/** 创建合同 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑合同 */
+function handleEdit(row: CrmContractApi.Contract) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除合同 */
+async function handleDelete(row: CrmContractApi.Contract) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteContract(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 提交审核 */
+async function handleSubmit(row: CrmContractApi.Contract) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.submitting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await submitContract(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.submitSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 查看合同详情 */
+function handleDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmContractDetail', params: { id: row.id } });
+}
+
+/** 查看客户详情 */
+function handleCustomerDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
+}
+
+/** 查看联系人详情 */
+function handleContactDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmContactDetail', params: { id: row.signContactId } });
+}
+
+/** 查看商机详情 */
+function handleBusinessDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmBusinessDetail', params: { id: row.businessId } });
+}
+
+/** 查看审批详情 */
+function handleProcessDetail(row: CrmContractApi.Contract) {
+  push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.processInstanceId },
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getContractPage({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            sceneType: sceneType.value,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmContractApi.Contract>,
+});
+
+function onChangeSceneType(key: number | string) {
+  sceneType.value = key.toString();
+  gridApi.query();
+}
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【合同】合同管理、合同提醒"
-      url="https://doc.iocoder.cn/crm/contract/"
-    />
-    <DocAlert
-      title="【通用】数据权限"
-      url="https://doc.iocoder.cn/crm/permission/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/contract/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/contract/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【合同】合同管理、合同提醒"
+        url="https://doc.iocoder.cn/crm/contract/"
+      />
+      <DocAlert
+        title="【通用】数据权限"
+        url="https://doc.iocoder.cn/crm/permission/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+    <Grid>
+      <template #top>
+        <Tabs class="border-none" @change="onChangeSceneType">
+          <Tabs.TabPane tab="我负责的" key="1" />
+          <Tabs.TabPane tab="我参与的" key="2" />
+          <Tabs.TabPane tab="下属负责的" key="3" />
+        </Tabs>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['合同']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:contract:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['crm:contract:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #name="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.name }}
+        </Button>
+      </template>
+      <template #customerName="{ row }">
+        <Button type="link" @click="handleCustomerDetail(row)">
+          {{ row.customerName }}
+        </Button>
+      </template>
+      <template #businessName="{ row }">
+        <Button type="link" @click="handleBusinessDetail(row)">
+          {{ row.businessName }}
+        </Button>
+      </template>
+      <template #signContactName="{ row }">
+        <Button type="link" @click="handleContactDetail(row)">
+          {{ row.signContactName }}
+        </Button>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:contract:update'],
+              onClick: handleEdit.bind(null, row),
+              ifShow: row.auditStatus === 0,
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '提交审核',
+              type: 'link',
+              auth: ['crm:contract:update'],
+              onClick: handleSubmit.bind(null, row),
+              ifShow: row.auditStatus === 0,
+            },
+            {
+              label: '查看审批',
+              type: 'link',
+              auth: ['crm:contract:update'],
+              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',
+              danger: true,
+              auth: ['crm:contract:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/contract/modules/detail-info.vue b/apps/web-antd/src/views/crm/contract/modules/detail-info.vue
new file mode 100644
index 000000000..f952e7f2f
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contract/modules/detail-info.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>contractInfo</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/contract/modules/detail-list.vue b/apps/web-antd/src/views/crm/contract/modules/detail-list.vue
new file mode 100644
index 000000000..3114fe4bc
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contract/modules/detail-list.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>contractList</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/contract/modules/form.vue b/apps/web-antd/src/views/crm/contract/modules/form.vue
new file mode 100644
index 000000000..5d2b0b78a
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contract/modules/form.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import type { CrmContractApi } from '#/api/crm/contract';
+
+import { computed, ref } from 'vue';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import {
+  createContract,
+  getContract,
+  updateContract,
+} from '#/api/crm/contract';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmContractApi.Contract>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['合同'])
+    : $t('ui.actionTitle.create', ['合同']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // 一共2列
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as CrmContractApi.Contract;
+    try {
+      await (formData.value?.id ? updateContract(data) : createContract(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<CrmContractApi.Contract>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getContract(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-[40%]">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/crm/customer/data.ts b/apps/web-antd/src/views/crm/customer/data.ts
index 6ca6636ff..551569da0 100644
--- a/apps/web-antd/src/views/crm/customer/data.ts
+++ b/apps/web-antd/src/views/crm/customer/data.ts
@@ -1,19 +1,16 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { CrmCustomerApi } from '#/api/crm/customer';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
 
-import { useAccess } from '@vben/access';
 import { formatDateTime } from '@vben/utils';
 
 import { getAreaTree } from '#/api/system/area';
+import { getSimpleUserList } from '#/api/system/user';
 import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
-
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -48,9 +45,13 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'ownerUserId',
       label: '负责人',
-      component: 'Select',
+      component: 'ApiSelect',
       componentProps: {
-        api: 'getSimpleUserList',
+        api: () => getSimpleUserList(),
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
       },
       rules: 'required',
     },
@@ -153,14 +154,11 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = CrmCustomerApi.Customer>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'name',
       title: '客户名称',
-      minWidth: 160,
       fixed: 'left',
       slots: {
         default: 'name',
@@ -169,7 +167,6 @@ export function useGridColumns<T = CrmCustomerApi.Customer>(
     {
       field: 'source',
       title: '客户来源',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_SOURCE },
@@ -178,27 +175,22 @@ export function useGridColumns<T = CrmCustomerApi.Customer>(
     {
       field: 'mobile',
       title: '手机',
-      minWidth: 120,
     },
     {
       field: 'telephone',
       title: '电话',
-      minWidth: 130,
     },
     {
       field: 'email',
       title: '邮箱',
-      minWidth: 180,
     },
     {
       field: 'detailAddress',
       title: '地址',
-      minWidth: 180,
     },
     {
       field: 'industryId',
       title: '客户行业',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
@@ -207,7 +199,6 @@ export function useGridColumns<T = CrmCustomerApi.Customer>(
     {
       field: 'level',
       title: '客户级别',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_LEVEL },
@@ -216,61 +207,36 @@ export function useGridColumns<T = CrmCustomerApi.Customer>(
     {
       field: 'ownerUserName',
       title: '负责人',
-      minWidth: 100,
     },
     {
       field: 'ownerUserDeptName',
       title: '所属部门',
-      minWidth: 100,
     },
     {
       field: 'contactNextTime',
       title: '下次联系时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'contactLastTime',
       title: '最后跟进时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'updateTime',
       title: '更新时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
-      field: 'operation',
       title: '操作',
-      width: 130,
+      width: 180,
       fixed: 'right',
-      align: 'center',
-      cellRender: {
-        attrs: {
-          nameField: 'name',
-          nameTitle: '线索',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'edit',
-            show: hasAccessByCodes(['crm:clue:update']),
-          },
-          {
-            code: 'delete',
-            show: hasAccessByCodes(['crm:clue:delete']),
-          },
-        ],
-      },
+      slots: { default: 'actions' },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/customer/index.vue b/apps/web-antd/src/views/crm/customer/index.vue
index cac8566da..5795fdb0c 100644
--- a/apps/web-antd/src/views/crm/customer/index.vue
+++ b/apps/web-antd/src/views/crm/customer/index.vue
@@ -1,20 +1,16 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmCustomerApi } from '#/api/crm/customer';
 
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus } from '@vben/icons';
 import { downloadFileFromBlobPart } from '@vben/utils';
 
 import { Button, message, Tabs } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteCustomer,
   exportCustomer,
@@ -40,23 +36,23 @@ function onRefresh() {
 }
 
 /** 导出表格 */
-async function onExport() {
+async function handleExport() {
   const data = await exportCustomer(await gridApi.formApi.getValues());
   downloadFileFromBlobPart({ fileName: '客户.xls', source: data });
 }
 
 /** 创建客户 */
-function onCreate() {
+function handleCreate() {
   formModalApi.setData(null).open();
 }
 
 /** 编辑客户 */
-function onEdit(row: CrmCustomerApi.Customer) {
+function handleEdit(row: CrmCustomerApi.Customer) {
   formModalApi.setData(row).open();
 }
 
 /** 删除客户 */
-async function onDelete(row: CrmCustomerApi.Customer) {
+async function handleDelete(row: CrmCustomerApi.Customer) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     key: 'action_key_msg',
@@ -74,33 +70,16 @@ async function onDelete(row: CrmCustomerApi.Customer) {
 }
 
 /** 查看客户详情 */
-function onDetail(row: CrmCustomerApi.Customer) {
+function handleDetail(row: CrmCustomerApi.Customer) {
   push({ name: 'CrmCustomerDetail', params: { id: row.id } });
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<CrmCustomerApi.Customer>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -145,9 +124,8 @@ function onChangeSceneType(key: number | string) {
     </template>
 
     <FormModal @success="onRefresh" />
-
     <Grid>
-      <template #toolbar-actions>
+      <template #top>
         <Tabs class="border-none" @change="onChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
@@ -155,29 +133,60 @@ function onChangeSceneType(key: number | string) {
         </Tabs>
       </template>
       <template #toolbar-tools>
-        <Button
-          type="primary"
-          @click="onCreate"
-          v-access:code="['crm:customer:create']"
-        >
-          <Plus class="size-5" />
-          {{ $t('ui.actionTitle.create', ['客户']) }}
-        </Button>
-        <Button
-          type="primary"
-          class="ml-2"
-          @click="onExport"
-          v-access:code="['crm:customer:export']"
-        >
-          <Download class="size-5" />
-          {{ $t('ui.actionTitle.export') }}
-        </Button>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['客户']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:customer:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['crm:customer:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
       </template>
       <template #name="{ row }">
-        <Button type="link" @click="onDetail(row)">
+        <Button type="link" @click="handleDetail(row)">
           {{ row.name }}
         </Button>
       </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              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',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:customer:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
     </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/customer/limitConfig/data.ts b/apps/web-antd/src/views/crm/customer/limitConfig/data.ts
new file mode 100644
index 000000000..0895e1d21
--- /dev/null
+++ b/apps/web-antd/src/views/crm/customer/limitConfig/data.ts
@@ -0,0 +1,140 @@
+import type { VbenFormSchema } from '@vben/common-ui';
+
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { handleTree } from '@vben/utils';
+
+import { LimitConfType } from '#/api/crm/customer/limitConfig';
+import { getSimpleDeptList } from '#/api/system/dept';
+import { getSimpleUserList } from '#/api/system/user';
+import { DICT_TYPE } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(confType: LimitConfType): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'userIds',
+      label: '规则适用人群',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
+        multiple: true,
+        allowClear: true,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'deptIds',
+      label: '规则适用部门',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        api: async () => {
+          const data = await getSimpleDeptList();
+          return handleTree(data);
+        },
+        multiple: true,
+        fieldNames: { label: 'name', value: 'id', children: 'children' },
+        placeholder: '请选择规则适用部门',
+        treeDefaultExpandAll: true,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'maxCount',
+      label:
+        confType === LimitConfType.CUSTOMER_QUANTITY_LIMIT
+          ? '拥有客户数上限'
+          : '锁定客户数上限',
+      component: 'InputNumber',
+    },
+    {
+      fieldName: 'dealCountEnabled',
+      label: '成交客户是否占用拥有客户数',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '是', value: true },
+          { label: '否', value: false },
+        ],
+      },
+      dependencies: {
+        triggerFields: [''],
+        show: () => confType === LimitConfType.CUSTOMER_QUANTITY_LIMIT,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  confType: LimitConfType,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      fixed: 'left',
+    },
+    {
+      field: 'users',
+      title: '规则适用人群',
+      formatter: ({ cellValue }) => {
+        return cellValue
+          .map((user: any) => {
+            return user.nickname;
+          })
+          .join(',');
+      },
+    },
+    {
+      field: 'depts',
+      title: '规则适用部门',
+      formatter: ({ cellValue }) => {
+        return cellValue
+          .map((dept: any) => {
+            return dept.name;
+          })
+          .join(',');
+      },
+    },
+    {
+      field: 'maxCount',
+      title:
+        confType === LimitConfType.CUSTOMER_QUANTITY_LIMIT
+          ? '拥有客户数上限'
+          : '锁定客户数上限',
+    },
+    {
+      field: 'dealCountEnabled',
+      title: '成交客户是否占用拥有客户数',
+      visible: confType === LimitConfType.CUSTOMER_QUANTITY_LIMIT,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
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 3820d40e6..465afd49c 100644
--- a/apps/web-antd/src/views/crm/customer/limitConfig/index.vue
+++ b/apps/web-antd/src/views/crm/customer/limitConfig/index.vue
@@ -1,38 +1,170 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmCustomerLimitConfigApi } from '#/api/crm/customer/limitConfig';
 
-import { Button } from 'ant-design-vue';
+import { ref } from 'vue';
 
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { message, Tabs } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteCustomerLimitConfig,
+  getCustomerLimitConfigPage,
+  LimitConfType,
+} from '#/api/crm/customer/limitConfig';
 import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import { useGridColumns } from './data';
+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 handleCreate(type: LimitConfType) {
+  formModalApi.setData({ type }).open();
+}
+
+/** 编辑规则 */
+function handleEdit(
+  row: CrmCustomerLimitConfigApi.CustomerLimitConfig,
+  type: LimitConfType,
+) {
+  formModalApi.setData({ id: row.id, type }).open();
+}
+
+/** 删除规则 */
+async function handleDelete(
+  row: CrmCustomerLimitConfigApi.CustomerLimitConfig,
+) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteCustomerLimitConfig(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(configType.value),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCustomerLimitConfigPage({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            type: configType.value,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmCustomerLimitConfigApi.CustomerLimitConfig>,
+});
+
+function onChangeConfigType(key: number | string) {
+  configType.value = key as LimitConfType;
+  gridApi.setGridOptions({
+    columns: useGridColumns(configType.value),
+  });
+  onRefresh();
+}
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【客户】客户管理、公海客户"
-      url="https://doc.iocoder.cn/crm/customer/"
-    />
-    <DocAlert
-      title="【通用】数据权限"
-      url="https://doc.iocoder.cn/crm/permission/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/customer/limitConfig/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/customer/limitConfig/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【客户】客户管理、公海客户"
+        url="https://doc.iocoder.cn/crm/customer/"
+      />
+      <DocAlert
+        title="【通用】数据权限"
+        url="https://doc.iocoder.cn/crm/permission/"
+      />
+    </template>
+
+    <FormModal />
+    <Grid>
+      <template #top>
+        <Tabs class="border-none" @change="onChangeConfigType">
+          <Tabs.TabPane
+            tab="拥有客户数限制"
+            :key="LimitConfType.CUSTOMER_QUANTITY_LIMIT"
+          />
+          <Tabs.TabPane
+            tab="锁定客户数限制"
+            :key="LimitConfType.CUSTOMER_LOCK_LIMIT"
+          />
+        </Tabs>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['规则']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:customer-limit-config:create'],
+              onClick: handleCreate.bind(null, configType),
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:customer-limit-config:update'],
+              onClick: handleEdit.bind(null, row, configType),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:customer-limit-config:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
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
new file mode 100644
index 000000000..39fa36d27
--- /dev/null
+++ b/apps/web-antd/src/views/crm/customer/limitConfig/modules/form.vue
@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+import type { CrmCustomerLimitConfigApi } from '#/api/crm/customer/limitConfig';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createCustomerLimitConfig,
+  getCustomerLimitConfig,
+  LimitConfType,
+  updateCustomerLimitConfig,
+} from '#/api/crm/customer/limitConfig';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmCustomerLimitConfigApi.CustomerLimitConfig>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['规则'])
+    : $t('ui.actionTitle.create', ['规则']);
+});
+
+const confType = ref<LimitConfType>(LimitConfType.CUSTOMER_LOCK_LIMIT);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(confType.value),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as CrmCustomerLimitConfigApi.CustomerLimitConfig;
+    try {
+      await (formData.value?.id
+        ? updateCustomerLimitConfig(data)
+        : createCustomerLimitConfig(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    let data =
+      modalApi.getData<CrmCustomerLimitConfigApi.CustomerLimitConfig>();
+    if (!data) {
+      return;
+    }
+    if (data.type) {
+      confType.value = data.type as LimitConfType;
+    }
+    formApi.setState({ schema: useFormSchema(confType.value) });
+    modalApi.lock();
+    try {
+      if (data.id) {
+        data = await getCustomerLimitConfig(data.id as number);
+      }
+      formData.value = data;
+      // 设置到 values
+      await formApi.setValues(data);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-[40%]">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/crm/permission/components/PermissionForm.vue b/apps/web-antd/src/views/crm/customer/modules/detail-info.vue
similarity index 60%
rename from apps/web-antd/src/views/crm/permission/components/PermissionForm.vue
rename to apps/web-antd/src/views/crm/customer/modules/detail-info.vue
index 99ad6b6f9..c651e23e0 100644
--- a/apps/web-antd/src/views/crm/permission/components/PermissionForm.vue
+++ b/apps/web-antd/src/views/crm/customer/modules/detail-info.vue
@@ -1,7 +1,5 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div>
-    <p>待完成</p>
-  </div>
+  <div>detail-info</div>
 </template>
diff --git a/apps/web-antd/src/views/crm/customer/modules/detail-list.vue b/apps/web-antd/src/views/crm/customer/modules/detail-list.vue
new file mode 100644
index 000000000..8e6c73393
--- /dev/null
+++ b/apps/web-antd/src/views/crm/customer/modules/detail-list.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>customerList</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/customer/modules/detail.vue b/apps/web-antd/src/views/crm/customer/modules/detail.vue
index 99ad6b6f9..19c2b2695 100644
--- a/apps/web-antd/src/views/crm/customer/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/customer/modules/detail.vue
@@ -1,7 +1,209 @@
-<script lang="ts" setup></script>
+<script setup lang="ts">
+import type { CrmCustomerApi } from '#/api/crm/customer';
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+import { defineAsyncComponent, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+
+import { Button, Card, Modal, Tabs } from 'ant-design-vue';
+
+import { getCustomer, updateCustomerDealStatus } from '#/api/crm/customer';
+import { getOperateLogPage } from '#/api/crm/operateLog';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { useDescription } from '#/components/description';
+import { OperateLog } from '#/components/operate-log';
+
+import { useDetailSchema } from '../data';
+
+const CustomerDetailsInfo = defineAsyncComponent(
+  () => import('./detail-info.vue'),
+);
+
+const loading = ref(false);
+
+const route = useRoute();
+const router = useRouter();
+
+const customerId = ref(0);
+
+const customer = ref<CrmCustomerApi.Customer>({} as CrmCustomerApi.Customer);
+const permissionListRef = ref(); // 团队成员列表 Ref
+
+const [Description] = useDescription({
+  componentProps: {
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailSchema(),
+});
+
+/** 加载详情 */
+async function loadCustomerDetail() {
+  loading.value = true;
+  customerId.value = Number(route.params.id);
+  const data = await getCustomer(customerId.value);
+  await getOperateLog();
+  customer.value = data;
+  loading.value = false;
+}
+
+/** 编辑 */
+function handleEdit() {
+  // formModalApi.setData({ id: clueId }).open();
+}
+
+/** 转移线索 */
+function handleTransfer() {
+  // transferModalApi.setData({ id: clueId }).open();
+}
+
+/** 锁定客户 */
+function handleLock() {
+  // transferModalApi.setData({ id: clueId }).open();
+}
+
+/** 解锁客户 */
+function handleUnlock() {
+  // transferModalApi.setData({ id: clueId }).open();
+}
+
+/** 领取客户 */
+function handleReceive() {
+  // transferModalApi.setData({ id: clueId }).open();
+}
+
+/** 分配客户 */
+function handleDistributeForm() {
+  // transferModalApi.setData({ id: clueId }).open();
+}
+
+/** 客户放入公海 */
+function handlePutPool() {
+  // transferModalApi.setData({ id: clueId }).open();
+}
+
+/** 更新成交状态操作 */
+async function handleUpdateDealStatus() {
+  const dealStatus = !customer.value.dealStatus;
+  try {
+    await Modal.confirm({
+      title: '提示',
+      content: `确定更新成交状态为【${dealStatus ? '已成交' : '未成交'}】吗？`,
+    });
+    await updateCustomerDealStatus(customerId.value, dealStatus);
+    Modal.success({
+      title: '成功',
+      content: '更新成交状态成功',
+    });
+    await loadCustomerDetail();
+  } catch {
+    // 用户取消操作
+  }
+}
+
+/** 获取操作日志 */
+const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志列表
+async function getOperateLog() {
+  if (!customerId.value) {
+    return;
+  }
+  const data = await getOperateLogPage({
+    bizType: BizTypeEnum.CRM_CUSTOMER,
+    bizId: customerId.value,
+  });
+  logList.value = data.list;
+}
+
+// 加载数据
+onMounted(async () => {
+  await loadCustomerDetail();
+});
+</script>
 
 <template>
-  <div>
-    <p>待完成</p>
-  </div>
+  <Page auto-content-height :title="customer?.name" :loading="loading">
+    <template #extra>
+      <div class="flex items-center gap-2">
+        <Button
+          v-if="permissionListRef?.validateWrite"
+          type="primary"
+          @click="handleEdit"
+          v-access:code="['crm:customer:update']"
+        >
+          {{ $t('ui.actionTitle.edit') }}
+        </Button>
+        <Button
+          v-if="permissionListRef?.validateOwnerUser"
+          type="primary"
+          @click="handleTransfer"
+        >
+          转移
+        </Button>
+        <Button
+          v-if="permissionListRef?.validateWrite"
+          @click="handleUpdateDealStatus"
+        >
+          更改成交状态
+        </Button>
+        <Button
+          v-if="customer.lockStatus && permissionListRef?.validateOwnerUser"
+          @click="handleUnlock"
+        >
+          解锁
+        </Button>
+        <Button
+          v-if="!customer.lockStatus && permissionListRef?.validateOwnerUser"
+          @click="handleLock"
+        >
+          锁定
+        </Button>
+        <Button v-if="!customer.ownerUserId" @click="handleReceive">
+          领取
+        </Button>
+        <Button v-if="!customer.ownerUserId" @click="handleDistributeForm">
+          分配
+        </Button>
+        <Button
+          v-if="customer.ownerUserId && permissionListRef?.validateOwnerUser"
+          @click="handlePutPool"
+        >
+          放入公海
+        </Button>
+      </div>
+    </template>
+    <Card>
+      <Description :data="customer" />
+    </Card>
+    <Card class="mt-4">
+      <Tabs>
+        <Tabs.TabPane tab="跟进记录" key="1">
+          <div>跟进记录</div>
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="基本信息" key="2">
+          <CustomerDetailsInfo />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="联系人" key="3">
+          <div>联系人</div>
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="团队成员" key="4">
+          <div>团队成员</div>
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="商机" key="5">
+          <div>商机</div>
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="合同" key="6">
+          <div>合同</div>
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="回款" key="7">
+          <div>回款</div>
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="操作日志" key="8">
+          <OperateLog :log-list="logList" />
+        </Tabs.TabPane>
+      </Tabs>
+    </Card>
+  </Page>
 </template>
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 504947ff9..ea0901fab 100644
--- a/apps/web-antd/src/views/crm/customer/modules/form.vue
+++ b/apps/web-antd/src/views/crm/customer/modules/form.vue
@@ -29,9 +29,9 @@ const [Form, formApi] = useVbenForm({
     componentProps: {
       class: 'w-full',
     },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
   },
+  // 一共2列
+  wrapperClass: 'grid-cols-2',
   layout: 'horizontal',
   schema: useFormSchema(),
   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
new file mode 100644
index 000000000..177742ea4
--- /dev/null
+++ b/apps/web-antd/src/views/crm/customer/pool/data.ts
@@ -0,0 +1,155 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '客户名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户名称',
+      },
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机',
+      },
+    },
+    {
+      fieldName: 'industryId',
+      label: '所属行业',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, 'number'),
+        placeholder: '请选择所属行业',
+      },
+    },
+    {
+      fieldName: 'level',
+      label: '客户级别',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL, 'number'),
+        placeholder: '请选择客户级别',
+      },
+    },
+    {
+      fieldName: 'source',
+      label: '客户来源',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE, 'number'),
+        placeholder: '请选择客户来源',
+      },
+    },
+  ];
+}
+
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '客户名称',
+      field: 'name',
+      minWidth: 160,
+      fixed: 'left',
+      slots: { default: 'name' },
+    },
+    {
+      title: '客户来源',
+      field: 'source',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_CUSTOMER_SOURCE },
+      },
+    },
+    {
+      title: '手机',
+      field: 'mobile',
+      minWidth: 120,
+    },
+    {
+      title: '电话',
+      field: 'telephone',
+      minWidth: 120,
+    },
+    {
+      title: '邮箱',
+      field: 'email',
+      minWidth: 140,
+    },
+    {
+      title: '客户级别',
+      field: 'level',
+      minWidth: 135,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_CUSTOMER_LEVEL },
+      },
+    },
+    {
+      title: '客户行业',
+      field: 'industryId',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
+      },
+    },
+    {
+      title: '下次联系时间',
+      field: 'contactNextTime',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '备注',
+      field: 'remark',
+      minWidth: 200,
+    },
+    {
+      title: '成交状态',
+      field: 'dealStatus',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      title: '最后跟进时间',
+      field: 'contactLastTime',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '最后跟进记录',
+      field: 'contactLastContent',
+      minWidth: 200,
+    },
+    {
+      title: '更新时间',
+      field: 'updateTime',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '创建人',
+      field: 'creatorName',
+      minWidth: 100,
+    },
+  ];
+}
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 aa330f83c..df3858baa 100644
--- a/apps/web-antd/src/views/crm/customer/pool/index.vue
+++ b/apps/web-antd/src/views/crm/customer/pool/index.vue
@@ -1,38 +1,97 @@
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmCustomerApi } from '#/api/crm/customer';
+
+import { useRouter } from 'vue-router';
+
 import { Page } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
 
 import { Button } from 'ant-design-vue';
 
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { exportCustomer, getCustomerPage } from '#/api/crm/customer';
 import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+const { push } = useRouter();
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportCustomer(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '客户公海.xls', source: data });
+}
+
+/** 查看客户详情 */
+function handleDetail(row: CrmCustomerApi.Customer) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.id } });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCustomerPage({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            pool: true,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmCustomerApi.Customer>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【客户】客户管理、公海客户"
-      url="https://doc.iocoder.cn/crm/customer/"
-    />
-    <DocAlert
-      title="【通用】数据权限"
-      url="https://doc.iocoder.cn/crm/permission/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/customer/pool/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/customer/pool/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【客户】客户管理、公海客户"
+        url="https://doc.iocoder.cn/crm/customer/"
+      />
+      <DocAlert
+        title="【通用】数据权限"
+        url="https://doc.iocoder.cn/crm/permission/"
+      />
+    </template>
+
+    <Grid>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['crm:customer:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #name="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.name }}
+        </Button>
+      </template>
+    </Grid>
   </Page>
 </template>
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 717d8cbec..75244ab15 100644
--- a/apps/web-antd/src/views/crm/customer/poolConfig/index.vue
+++ b/apps/web-antd/src/views/crm/customer/poolConfig/index.vue
@@ -1,38 +1,154 @@
 <script lang="ts" setup>
+import type { CrmCustomerPoolConfigApi } from '#/api/crm/customer/poolConfig';
+
+import { onMounted } from 'vue';
+
 import { Page } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import { Card, message } from 'ant-design-vue';
 
-import { DocAlert } from '#/components/doc-alert';
+import { useVbenForm } from '#/adapter/form';
+import {
+  getCustomerPoolConfig,
+  saveCustomerPoolConfig,
+} from '#/api/crm/customer/poolConfig';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+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,
+});
+
+async function onSubmit() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  // 提交表单
+  const data =
+    (await formApi.getValues()) as CrmCustomerPoolConfigApi.CustomerPoolConfig;
+  if (!data.enabled) {
+    data.contactExpireDays = undefined;
+    data.dealExpireDays = undefined;
+    data.notifyEnabled = false;
+  }
+  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);
+  }
+}
+
+async function getConfigInfo() {
+  try {
+    const res = await getCustomerPoolConfig();
+    formApi.setValues(res);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+onMounted(() => {
+  getConfigInfo();
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【客户】客户管理、公海客户"
-      url="https://doc.iocoder.cn/crm/customer/"
-    />
-    <DocAlert
-      title="【通用】数据权限"
-      url="https://doc.iocoder.cn/crm/permission/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/customer/poolConfig/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/customer/poolConfig/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <Card title="客户公海规则设置">
+      <Form class="w-1/4" />
+    </Card>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/followup/index.vue b/apps/web-antd/src/views/crm/followup/index.vue
new file mode 100644
index 000000000..410e10c13
--- /dev/null
+++ b/apps/web-antd/src/views/crm/followup/index.vue
@@ -0,0 +1,205 @@
+<script lang="ts" setup>
+import type { FollowUpRecordApi, FollowUpRecordVO } from '@/api/crm/followup';
+
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { BizTypeEnum } from '@/api/crm/permission';
+import { DICT_TYPE } from '@/utils/dict';
+import { Button, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { $t } from '#/locales';
+
+import FollowUpRecordForm from './modules/form.vue';
+
+/** 跟进记录列表 */
+defineOptions({ name: 'FollowUpRecord' });
+
+const props = defineProps<{
+  bizId: number;
+  bizType: number;
+}>();
+
+const { push } = useRouter();
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 添加跟进记录 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 删除跟进记录 */
+async function handleDelete(row: FollowUpRecordVO) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    key: 'action_key_msg',
+  });
+  try {
+    await FollowUpRecordApi.deleteFollowUpRecord(row.id);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } catch {
+    hideLoading();
+  }
+}
+
+/** 打开联系人详情 */
+function openContactDetail(id: number) {
+  push({ name: 'CrmContactDetail', params: { id } });
+}
+
+/** 打开商机详情 */
+function openBusinessDetail(id: number) {
+  push({ name: 'CrmBusinessDetail', params: { id } });
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FollowUpRecordForm,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      {
+        field: 'createTime',
+        title: '创建时间',
+        width: 180,
+        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: '下次联系时间',
+        width: 180,
+        formatter: 'formatDateTime',
+      },
+      {
+        field: 'contacts',
+        title: '关联联系人',
+        visible: props.bizType === BizTypeEnum.CRM_CUSTOMER,
+        slots: {
+          default: ({ row }) =>
+            row.contacts?.map((contact) =>
+              h(
+                Button,
+                {
+                  type: 'link',
+                  onClick: () => openContactDetail(contact.id),
+                },
+                () => contact.name,
+              ),
+            ),
+        },
+      },
+      {
+        field: 'businesses',
+        title: '关联商机',
+        visible: props.bizType === BizTypeEnum.CRM_CUSTOMER,
+        slots: {
+          default: ({ row }) =>
+            row.businesses?.map((business) =>
+              h(
+                Button,
+                {
+                  type: 'link',
+                  onClick: () => openBusinessDetail(business.id),
+                },
+                () => business.name,
+              ),
+            ),
+        },
+      },
+      {
+        field: 'actions',
+        title: '操作',
+        width: 100,
+        slots: { default: 'actions' },
+      },
+    ],
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          return await FollowUpRecordApi.getFollowUpRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            bizType: props.bizType,
+            bizId: props.bizId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+    },
+  } as VxeTableGridOptions<FollowUpRecordVO>,
+});
+
+watch(
+  () => props.bizId,
+  () => {
+    gridApi.query();
+  },
+);
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="跟进记录列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '写跟进',
+              type: 'primary',
+              icon: ACTION_ICON.EDIT,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+    <FormModal @success="onRefresh" />
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/crm/followup/modules/form.vue b/apps/web-antd/src/views/crm/followup/modules/form.vue
new file mode 100644
index 000000000..40cddb4cd
--- /dev/null
+++ b/apps/web-antd/src/views/crm/followup/modules/form.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { CrmFollowUpRecordApi } from '#/api/crm/followup';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createFollowUpRecord,
+  getFollowUpRecord,
+  updateFollowUpRecord,
+} from '#/api/crm/followup';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmFollowUpRecordApi.FollowUpRecord>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['跟进记录'])
+    : $t('ui.actionTitle.create', ['跟进记录']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as CrmFollowUpRecordApi.FollowUpRecord;
+    try {
+      await (formData.value?.id
+        ? updateFollowUpRecord(data)
+        : createFollowUpRecord(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<CrmFollowUpRecordApi.FollowUpRecord>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getFollowUpRecord(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-[40%]">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/crm/permission/components/PermissionList.vue b/apps/web-antd/src/views/crm/permission/components/PermissionList.vue
deleted file mode 100644
index 474e404c6..000000000
--- a/apps/web-antd/src/views/crm/permission/components/PermissionList.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-defineOptions({ name: 'CrmPermissionList' });
-
-defineProps<{
-  bizId: number | undefined; // 模块数据编号
-  bizType: number; // 模块类型
-  showAction: boolean; // 是否展示操作按钮
-}>();
-</script>
-
-<template>
-  <div>
-    <p>待完成</p>
-  </div>
-</template>
diff --git a/apps/web-antd/src/views/crm/permission/index.ts b/apps/web-antd/src/views/crm/permission/index.ts
new file mode 100644
index 000000000..a175bff47
--- /dev/null
+++ b/apps/web-antd/src/views/crm/permission/index.ts
@@ -0,0 +1,2 @@
+export { default as PermissionList } from './modules/permission-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/permission-form.vue
new file mode 100644
index 000000000..e6e8fa462
--- /dev/null
+++ b/apps/web-antd/src/views/crm/permission/modules/permission-form.vue
@@ -0,0 +1,163 @@
+<script lang="ts" setup>
+import type { CrmPermissionApi } from '#/api/crm/permission';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  BizTypeEnum,
+  createPermission,
+  PermissionLevelEnum,
+  updatePermission,
+} from '#/api/crm/permission';
+import { getSimpleUserList } from '#/api/system/user';
+import { $t } from '#/locales';
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmPermissionApi.Permission>();
+const getTitle = computed(() => {
+  return formData.value?.ids
+    ? $t('ui.actionTitle.edit', ['团队成员'])
+    : $t('ui.actionTitle.create', ['团队成员']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      fieldName: 'ids',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'userId',
+      label: '选择人员',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+      dependencies: {
+        triggerFields: ['ids'],
+        show: (values) => {
+          return values.ids === undefined;
+        },
+      },
+    },
+    {
+      fieldName: 'level',
+      label: '权限级别',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.CRM_PERMISSION_LEVEL,
+          'number',
+        ).filter((dict) => dict.value !== PermissionLevelEnum.OWNER),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'toBizTypes',
+      label: '同时添加至',
+      component: 'CheckboxGroup',
+      componentProps: {
+        options: [
+          {
+            label: '联系人',
+            value: BizTypeEnum.CRM_CONTACT,
+          },
+          {
+            label: '商机',
+            value: BizTypeEnum.CRM_BUSINESS,
+          },
+          {
+            label: '合同',
+            value: BizTypeEnum.CRM_CONTRACT,
+          },
+        ],
+      },
+      dependencies: {
+        triggerFields: ['ids', 'bizType'],
+        show: (values) => {
+          return (
+            values.ids === undefined &&
+            formData.value?.bizType === BizTypeEnum.CRM_CUSTOMER
+          );
+        },
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    let data = (await formApi.getValues()) as CrmPermissionApi.Permission;
+    data = Object.assign(data, formData.value);
+    try {
+      await (formData.value?.ids
+        ? updatePermission(data)
+        : createPermission(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData();
+    if (!data || !data.bizType || !data.bizId) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = {
+        ids: data.ids || [data.id] || undefined,
+        userId: undefined,
+        bizType: data.bizType,
+        bizId: data.bizId,
+        level: data.level,
+      };
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[600px]" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/crm/permission/modules/permission-list.vue b/apps/web-antd/src/views/crm/permission/modules/permission-list.vue
new file mode 100644
index 000000000..65b202261
--- /dev/null
+++ b/apps/web-antd/src/views/crm/permission/modules/permission-list.vue
@@ -0,0 +1,288 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmPermissionApi } from '#/api/crm/permission';
+
+import { ref, watch } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { useUserStore } from '@vben/stores';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deletePermissionBatch,
+  deleteSelfPermission,
+  getPermissionList,
+  PermissionLevelEnum,
+} from '#/api/crm/permission';
+import { $t } from '#/locales';
+import { DICT_TYPE } from '#/utils';
+
+import Form from './permission-form.vue';
+
+defineOptions({ name: 'CrmPermissionList' });
+
+const props = defineProps<{
+  bizId: number; // 模块数据编号
+  bizType: number; // 模块类型
+  showAction: boolean; // 是否展示操作按钮
+}>();
+
+const emits = defineEmits<{
+  (e: 'quitTeam'): void;
+}>();
+
+const gridData = ref<CrmPermissionApi.Permission[]>([]);
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+// 校验负责人权限和编辑权限
+const validateOwnerUser = ref(false);
+const validateWrite = ref(false);
+const isPool = ref(false);
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+const checkedIds = ref<CrmPermissionApi.Permission[]>([]);
+function setCheckedIds({
+  records,
+}: {
+  records: CrmPermissionApi.Permission[];
+}) {
+  checkedIds.value = records;
+}
+
+function handleCreate() {
+  formModalApi
+    .setData({
+      bizType: props.bizType,
+      bizId: props.bizId,
+    })
+    .open();
+}
+
+function handleEdit() {
+  if (checkedIds.value.length === 0) {
+    message.error('请先选择团队成员后操作！');
+    return;
+  }
+  if (checkedIds.value.length > 1) {
+    message.error('只能选择一个团队成员进行编辑！');
+    return;
+  }
+  formModalApi
+    .setData({
+      bizType: props.bizType,
+      bizId: props.bizId,
+      id: checkedIds.value[0]?.id,
+      level: checkedIds.value[0]?.level,
+    })
+    .open();
+}
+
+function handleDelete() {
+  if (checkedIds.value.length === 0) {
+    message.error('请先选择团队成员后操作！');
+    return;
+  }
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `你要将${checkedIds.value.map((item) => item.nickname).join(',')}移出团队吗？`,
+    })
+      .then(async () => {
+        // 更新用户状态
+        const res = await deletePermissionBatch(
+          checkedIds.value.map((item) => item.id as number),
+        );
+        if (res) {
+          // 提示并返回成功
+          message.success($t('ui.actionMessage.operationSuccess'));
+          resolve(true);
+        } else {
+          reject(new Error('移出失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+const userStore = useUserStore();
+
+async function handleQuit() {
+  const permission = gridApi.grid
+    .getData()
+    .find(
+      (item) =>
+        item.id === userStore.userInfo?.id &&
+        item.level === PermissionLevelEnum.OWNER,
+    );
+  if (permission) {
+    message.warning('负责人不能退出团队！');
+    return;
+  }
+
+  const userPermission = gridApi.grid
+    .getData()
+    .find((item) => item.id === userStore.userInfo?.id);
+  if (!userPermission) {
+    message.warning('你不是团队成员！');
+    return;
+  }
+  await deleteSelfPermission(userPermission.id);
+  message.success('退出团队成员成功！');
+  emits('quitTeam');
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      {
+        type: 'checkbox',
+        width: 50,
+      },
+      {
+        field: 'nickname',
+        title: '姓名',
+      },
+      {
+        field: 'deptName',
+        title: '部门',
+      },
+      {
+        field: 'postNames',
+        title: '岗位',
+      },
+      {
+        field: 'level',
+        title: '权限级别',
+        cellRender: {
+          name: 'CellDict',
+          props: { type: DICT_TYPE.CRM_PERMISSION_LEVEL },
+        },
+      },
+      {
+        field: 'createTime',
+        title: '加入时间',
+        formatter: 'formatDateTime',
+      },
+    ],
+    height: 'auto',
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_params) => {
+          const res = await getPermissionList({
+            bizId: props.bizId,
+            bizType: props.bizType,
+          });
+          gridData.value = res;
+          return res;
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmPermissionApi.Permission>,
+  gridEvents: {
+    checkboxAll: setCheckedIds,
+    checkboxChange: setCheckedIds,
+  },
+});
+
+defineExpose({
+  openForm: handleCreate,
+  validateOwnerUser,
+  validateWrite,
+  isPool,
+});
+
+watch(
+  () => gridData.value,
+  (data) => {
+    isPool.value = false;
+    if (data.length > 0) {
+      isPool.value = data.some(
+        (item) => item.level === PermissionLevelEnum.OWNER,
+      );
+      validateOwnerUser.value = false;
+      validateWrite.value = false;
+      const userId = userStore.userInfo?.id;
+      gridData.value
+        .filter((item) => item.userId === userId)
+        .forEach((item) => {
+          if (item.level === PermissionLevelEnum.OWNER) {
+            validateOwnerUser.value = true;
+            validateWrite.value = true;
+          } else if (item.level === PermissionLevelEnum.WRITE) {
+            validateWrite.value = true;
+          }
+        });
+    } else {
+      isPool.value = true;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+
+<template>
+  <div>
+    <FormModal @success="onRefresh" />
+    <Grid>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.create'),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              ifShow: validateOwnerUser,
+              onClick: handleCreate,
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              icon: ACTION_ICON.EDIT,
+              ifShow: validateOwnerUser,
+              onClick: handleEdit,
+            },
+            {
+              label: $t('common.delete'),
+              type: 'primary',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              ifShow: validateOwnerUser,
+              onClick: handleDelete,
+            },
+            {
+              label: '退出团队',
+              type: 'primary',
+              danger: true,
+              ifShow: !validateOwnerUser,
+              onClick: handleQuit,
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
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
new file mode 100644
index 000000000..f849cdfc9
--- /dev/null
+++ b/apps/web-antd/src/views/crm/permission/modules/transfer-form.vue
@@ -0,0 +1,202 @@
+<script lang="ts" setup>
+import type { CrmPermissionApi } from '#/api/crm/permission';
+
+import { computed } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { transferBusiness } from '#/api/crm/business';
+import { transferClue } from '#/api/crm/clue';
+import { transferContact } from '#/api/crm/contact';
+import { transferContract } from '#/api/crm/contract';
+import { transferCustomer } from '#/api/crm/customer';
+import { BizTypeEnum, PermissionLevelEnum } from '#/api/crm/permission';
+import { getSimpleUserList } from '#/api/system/user';
+import { $t } from '#/locales';
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+defineOptions({ name: 'CrmTransferForm' });
+
+const emit = defineEmits(['success']);
+
+const bizType = defineModel<number>('bizType');
+
+const getTitle = computed(() => {
+  switch (bizType.value) {
+    case BizTypeEnum.CRM_BUSINESS: {
+      return '商机转移';
+    }
+    case BizTypeEnum.CRM_CLUE: {
+      return '线索转移';
+    }
+    case BizTypeEnum.CRM_CONTACT: {
+      return '联系人转移';
+    }
+    case BizTypeEnum.CRM_CONTRACT: {
+      return '合同转移';
+    }
+    case BizTypeEnum.CRM_CUSTOMER: {
+      return '客户转移';
+    }
+    default: {
+      return '转移';
+    }
+  }
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'ownerUserId',
+      label: '选择新负责人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'oldOwnerHandler',
+      label: '老负责人',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          {
+            label: '加入团队',
+            value: true,
+          },
+          {
+            label: '移除',
+            value: false,
+          },
+        ],
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'oldOwnerPermissionLevel',
+      label: '老负责人权限级别',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.CRM_PERMISSION_LEVEL,
+          'number',
+        ).filter((dict) => dict.value !== PermissionLevelEnum.OWNER),
+      },
+      dependencies: {
+        triggerFields: ['oldOwnerHandler'],
+        show: (values) => values.oldOwnerHandler,
+        trigger(values) {
+          if (!values.oldOwnerHandler) {
+            formApi.setFieldValue('oldOwnerPermissionLevel', undefined);
+          }
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'toBizTypes',
+      label: '同时转移',
+      component: 'CheckboxGroup',
+      componentProps: {
+        options: [
+          {
+            label: '联系人',
+            value: BizTypeEnum.CRM_CONTACT,
+          },
+          {
+            label: '商机',
+            value: BizTypeEnum.CRM_BUSINESS,
+          },
+          {
+            label: '合同',
+            value: BizTypeEnum.CRM_CONTRACT,
+          },
+        ],
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as CrmPermissionApi.TransferReq;
+    try {
+      switch (bizType.value) {
+        case BizTypeEnum.CRM_BUSINESS: {
+          return await transferBusiness(data);
+        }
+        case BizTypeEnum.CRM_CLUE: {
+          return await transferClue(data);
+        }
+        case BizTypeEnum.CRM_CONTACT: {
+          return await transferContact(data);
+        }
+        case BizTypeEnum.CRM_CONTRACT: {
+          return await transferContract(data);
+        }
+        case BizTypeEnum.CRM_CUSTOMER: {
+          return await transferCustomer(data);
+        }
+        default: {
+          message.error('【转移失败】没有转移接口');
+          throw new Error('【转移失败】没有转移接口');
+        }
+      }
+    } finally {
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formApi.resetForm();
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ bizType: number }>();
+    if (!data || !data.bizType) {
+      return;
+    }
+    bizType.value = data.bizType;
+    formApi.setFieldValue('id', data.bizType);
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-[40%]">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/crm/product/category/data.ts b/apps/web-antd/src/views/crm/product/category/data.ts
new file mode 100644
index 000000000..01d0996ec
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/category/data.ts
@@ -0,0 +1,91 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmProductCategoryApi } from '#/api/crm/product/category';
+
+import { handleTree } from '@vben/utils';
+
+import { getProductCategoryList } from '#/api/crm/product/category';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'parentId',
+      label: '上级分类',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        api: async () => {
+          const data = await getProductCategoryList();
+          data.unshift({
+            id: 0,
+            name: '顶级分类',
+          } as CrmProductCategoryApi.ProductCategory);
+          return handleTree(data);
+        },
+        fieldNames: { label: 'name', value: 'id', children: 'children' },
+        placeholder: '请选择上级分类',
+        showSearch: true,
+        treeDefaultExpandAll: true,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'name',
+      label: '分类名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分类名称',
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '分类名称',
+      component: 'Input',
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeTableGridOptions<CrmProductCategoryApi.ProductCategory>['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '分类名称',
+      treeNode: true,
+    },
+    {
+      field: 'id',
+      title: '分类编号',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: {
+        default: 'actions',
+      },
+    },
+  ];
+}
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 32f54cc97..f55c1f516 100644
--- a/apps/web-antd/src/views/crm/product/category/index.vue
+++ b/apps/web-antd/src/views/crm/product/category/index.vue
@@ -1,34 +1,173 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmProductCategoryApi } from '#/api/crm/product/category';
 
-import { Button } from 'ant-design-vue';
+import { ref } from 'vue';
 
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteProductCategory,
+  getProductCategoryList,
+} from '#/api/crm/product/category';
 import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建分类 */
+function handleCreate() {
+  formModalApi.setData({}).open();
+}
+
+/** 添加下级分类 */
+function handleAppend(row: CrmProductCategoryApi.ProductCategory) {
+  formModalApi.setData({ parentId: row.id }).open();
+}
+
+/** 编辑分类 */
+function handleEdit(row: CrmProductCategoryApi.ProductCategory) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除分类 */
+async function handleDelete(row: CrmProductCategoryApi.ProductCategory) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteProductCategory(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 切换树形展开/收缩状态 */
+const isExpanded = ref(false);
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_, formValues) => {
+          return await getProductCategoryList(formValues);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+    },
+    treeConfig: {
+      parentField: 'parentId',
+      rowField: 'id',
+      transform: true,
+      reserve: true,
+    },
+  } as VxeTableGridOptions<CrmProductCategoryApi.ProductCategory>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【产品】产品管理、产品分类"
-      url="https://doc.iocoder.cn/crm/product/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/product/category/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/product/category/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【产品】产品管理、产品分类"
+        url="https://doc.iocoder.cn/crm/product/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+    <Grid>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['分类']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:product-category:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: isExpanded ? '收缩' : '展开',
+              type: 'primary',
+              onClick: toggleExpand,
+            },
+          ]"
+        />
+      </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="[
+            {
+              label: '新增下级',
+              type: 'link',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:product-category:create'],
+              onClick: handleAppend.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:product-category:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:product-category:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/product/category/modules/form.vue b/apps/web-antd/src/views/crm/product/category/modules/form.vue
new file mode 100644
index 000000000..d9d3b9a99
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/category/modules/form.vue
@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import type { CrmProductCategoryApi } from '#/api/crm/product/category';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createProductCategory,
+  getProductCategory,
+  updateProductCategory,
+} from '#/api/crm/product/category';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmProductCategoryApi.ProductCategory>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['产品分类'])
+    : $t('ui.actionTitle.create', ['产品分类']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as CrmProductCategoryApi.ProductCategory;
+    try {
+      await (formData.value?.id
+        ? updateProductCategory(data)
+        : createProductCategory(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<CrmProductCategoryApi.ProductCategory>();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      if (data.id) {
+        data = await getProductCategory(data.id as number);
+      }
+      // 设置到 values
+      formData.value = data;
+      await formApi.setValues(data);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[600px]" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/crm/product/data.ts b/apps/web-antd/src/views/crm/product/data.ts
new file mode 100644
index 000000000..348afb372
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/data.ts
@@ -0,0 +1,176 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { handleTree } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getProductCategoryList } from '#/api/crm/product/category';
+import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '产品名称',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'no',
+      label: '产品编码',
+      rules: 'required',
+    },
+    {
+      component: 'ApiTreeSelect',
+      fieldName: 'categoryName',
+      label: '产品类型',
+      rules: 'required',
+      componentProps: {
+        api: async () => {
+          const data = await getProductCategoryList();
+          return handleTree(data);
+        },
+        fieldNames: { label: 'name', value: 'id', children: 'children' },
+      },
+    },
+    {
+      fieldName: 'unit',
+      label: '产品单位',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.CRM_PRODUCT_UNIT, 'number'),
+      },
+      rules: 'required',
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'price',
+      label: '价格（元）',
+      rules: 'required',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        step: 0.1,
+      },
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'description',
+      label: '产品描述',
+    },
+    {
+      fieldName: 'status',
+      label: '上架状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.CRM_PRODUCT_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '产品名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'status',
+      label: '上架状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.CRM_PRODUCT_STATUS, 'number'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '产品编号',
+      visible: false,
+    },
+    {
+      field: 'name',
+      title: '产品名称',
+      slots: { default: 'name' },
+    },
+    {
+      field: 'categoryName',
+      title: '产品类型',
+    },
+    {
+      field: 'unit',
+      title: '产品单位',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_PRODUCT_UNIT },
+      },
+    },
+    {
+      field: 'no',
+      title: '产品编码',
+    },
+    {
+      field: 'price',
+      title: '价格（元）',
+      formatter: 'formatNumber',
+    },
+    {
+      field: 'description',
+      title: '产品描述',
+    },
+    {
+      field: 'status',
+      title: '上架状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_PRODUCT_STATUS },
+      },
+    },
+    {
+      field: 'ownerUserName',
+      title: '负责人',
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/product/index.vue b/apps/web-antd/src/views/crm/product/index.vue
index 805a634a5..93bcbd458 100644
--- a/apps/web-antd/src/views/crm/product/index.vue
+++ b/apps/web-antd/src/views/crm/product/index.vue
@@ -1,34 +1,157 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmProductApi } from '#/api/crm/product';
 
-import { Button } from 'ant-design-vue';
+import { useRouter } from 'vue-router';
 
-import { DocAlert } from '#/components/doc-alert';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteProduct,
+  exportProduct,
+  getProductPage,
+} from '#/api/crm/product';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const { push } = useRouter();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportProduct(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '产品.xls', source: data });
+}
+
+/** 打开详情 */
+function handleDetail(row: CrmProductApi.Product) {
+  push({ name: 'CrmProductDetail', params: { id: row.id } });
+}
+
+/** 创建产品 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑产品 */
+function handleEdit(row: CrmProductApi.Product) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除产品 */
+async function handleDelete(row: CrmProductApi.Product) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteProduct(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getProductPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmProductApi.Product>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【产品】产品管理、产品分类"
-      url="https://doc.iocoder.cn/crm/product/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/product/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/product/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="产品列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['产品']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:product:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['crm:product:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #name="{ row }">
+        <Button type="link" @click="handleDetail(row)">{{ row.name }}</Button>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:product:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:product:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/product/modules/detail-info.vue b/apps/web-antd/src/views/crm/product/modules/detail-info.vue
new file mode 100644
index 000000000..c6bcbfbcd
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/modules/detail-info.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>productInfo</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/product/modules/detail-list.vue b/apps/web-antd/src/views/crm/product/modules/detail-list.vue
new file mode 100644
index 000000000..4a0fbfd34
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/modules/detail-list.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>productList</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/product/modules/form.vue b/apps/web-antd/src/views/crm/product/modules/form.vue
new file mode 100644
index 000000000..ef24d9a94
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/modules/form.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { CrmProductApi } from '#/api/crm/product';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createProduct, getProduct, updateProduct } from '#/api/crm/product';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmProductApi.Product>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['产品'])
+    : $t('ui.actionTitle.create', ['产品']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as CrmProductApi.Product;
+    try {
+      await (formData.value?.id ? updateProduct(data) : createProduct(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<CrmProductApi.Product>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getProduct(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[600px]" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/crm/receivable/data.ts b/apps/web-antd/src/views/crm/receivable/data.ts
new file mode 100644
index 000000000..1c33d1aec
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/data.ts
@@ -0,0 +1,269 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getContractSimpleList } from '#/api/crm/contract';
+import { getCustomerSimpleList } from '#/api/crm/customer';
+import { getReceivablePlanSimpleList } from '#/api/crm/receivable/plan';
+import { getSimpleUserList } from '#/api/system/user';
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'no',
+      label: '回款编号',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '保存时自动生成',
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'ownerUserId',
+      label: '负责人',
+      component: 'ApiSelect',
+      rules: 'required',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        placeholder: '请选择客户',
+      },
+    },
+    {
+      fieldName: 'customerId',
+      label: '客户名称',
+      component: 'ApiSelect',
+      rules: 'required',
+      componentProps: {
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择客户',
+      },
+    },
+    {
+      fieldName: 'contractId',
+      label: '合同名称',
+      component: 'Select',
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['customerId'],
+        disabled: (values) => !values.customerId,
+        async componentProps(values) {
+          if (values.customerId) {
+            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;
+          }
+        },
+      },
+    },
+    {
+      fieldName: 'planId',
+      label: '回款期数',
+      component: 'Select',
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['contractId'],
+        disabled: (values) => !values.contractId,
+        async componentProps(values) {
+          if (values.contractId) {
+            values.planId = undefined;
+            const plans = await getReceivablePlanSimpleList(
+              values.customerId,
+              values.contractId,
+            );
+            return {
+              options: plans.map((item) => ({
+                label: item.period,
+                value: item.id,
+              })),
+              placeholder: '请选择回款期数',
+            } as any;
+          }
+        },
+      },
+    },
+    {
+      fieldName: 'returnTime',
+      label: '回款日期',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '请选择回款日期',
+        showTime: false,
+        valueFormat: 'x',
+        format: 'YYYY-MM-DD',
+      },
+    },
+    {
+      fieldName: 'price',
+      label: '回款金额',
+      component: 'InputNumber',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入回款金额',
+        min: 0,
+        precision: 2,
+      },
+    },
+    {
+      fieldName: 'returnType',
+      label: '回款方式',
+      component: 'Select',
+      rules: 'required',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE, 'number'),
+        placeholder: '请选择回款方式',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '回款编号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'customerId',
+      label: '客户',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择客户',
+      },
+    },
+  ];
+}
+
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '回款编号',
+      field: 'no',
+      minWidth: 150,
+      fixed: 'left',
+      slots: { default: 'no' },
+    },
+    {
+      title: '客户名称',
+      field: 'customerName',
+      minWidth: 150,
+      slots: { default: 'customerName' },
+    },
+    {
+      title: '合同编号',
+      field: 'contract',
+      minWidth: 150,
+      slots: { default: 'contractNo' },
+    },
+    {
+      title: '回款日期',
+      field: 'returnTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '回款金额（元）',
+      field: 'price',
+      minWidth: 150,
+      formatter: 'formatNumber',
+    },
+    {
+      title: '回款方式',
+      field: 'returnType',
+      minWidth: 150,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
+      },
+    },
+    {
+      title: '备注',
+      field: 'remark',
+      minWidth: 150,
+    },
+    {
+      title: '合同金额（元）',
+      field: 'contract.totalPrice',
+      minWidth: 150,
+      formatter: 'formatNumber',
+    },
+    {
+      title: '负责人',
+      field: 'ownerUserName',
+      minWidth: 150,
+    },
+    {
+      title: '所属部门',
+      field: 'ownerUserDeptName',
+      minWidth: 150,
+    },
+    {
+      title: '更新时间',
+      field: 'updateTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      minWidth: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '创建人',
+      field: 'creatorName',
+      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/index.vue b/apps/web-antd/src/views/crm/receivable/index.vue
index 016c4968a..ff187d968 100644
--- a/apps/web-antd/src/views/crm/receivable/index.vue
+++ b/apps/web-antd/src/views/crm/receivable/index.vue
@@ -1,38 +1,255 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmReceivableApi } from '#/api/crm/receivable';
 
-import { Button } from 'ant-design-vue';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 
+import { Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message, Tabs } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteReceivable,
+  exportReceivable,
+  getReceivablePage,
+  submitReceivable,
+} from '#/api/crm/receivable';
 import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const { push } = useRouter();
+const sceneType = ref('1');
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportReceivable(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '回款.xls', source: data });
+}
+
+/** 创建回款 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑回款 */
+function handleEdit(row: CrmReceivableApi.Receivable) {
+  formModalApi.setData({ receivable: row }).open();
+}
+
+/** 删除回款 */
+async function handleDelete(row: CrmReceivableApi.Receivable) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.no]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteReceivable(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.no]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 提交审核 */
+async function handleSubmit(row: CrmReceivableApi.Receivable) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.submitting', [row.no]),
+    key: 'action_key_msg',
+  });
+  try {
+    await submitReceivable(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.submitSuccess', [row.no]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 查看回款详情 */
+function handleDetail(row: CrmReceivableApi.Receivable) {
+  push({ name: 'CrmReceivableDetail', params: { id: row.id } });
+}
+
+/** 查看客户详情 */
+function handleCustomerDetail(row: CrmReceivableApi.Receivable) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
+}
+
+/** 查看合同详情 */
+function handleContractDetail(row: CrmReceivableApi.Receivable) {
+  push({ name: 'CrmContractDetail', params: { id: row.contractId } });
+}
+
+/** 查看审批详情 */
+function handleProcessDetail(row: CrmReceivableApi.Receivable) {
+  push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.processInstanceId },
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getReceivablePage({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            sceneType: sceneType.value,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmReceivableApi.Receivable>,
+});
+
+function onChangeSceneType(key: number | string) {
+  sceneType.value = key.toString();
+  gridApi.query();
+}
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【回款】回款管理、回款计划"
-      url="https://doc.iocoder.cn/crm/receivable/"
-    />
-    <DocAlert
-      title="【通用】数据权限"
-      url="https://doc.iocoder.cn/crm/permission/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/receivable/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/receivable/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【回款】回款管理、回款计划"
+        url="https://doc.iocoder.cn/crm/receivable/"
+      />
+      <DocAlert
+        title="【通用】数据权限"
+        url="https://doc.iocoder.cn/crm/permission/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+    <Grid>
+      <template #top>
+        <Tabs class="border-none" @change="onChangeSceneType">
+          <Tabs.TabPane tab="我负责的" key="1" />
+          <Tabs.TabPane tab="我参与的" key="2" />
+          <Tabs.TabPane tab="下属负责的" key="3" />
+        </Tabs>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['回款']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:receivable:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['crm:receivable:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #no="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.no }}
+        </Button>
+      </template>
+      <template #customerName="{ row }">
+        <Button type="link" @click="handleCustomerDetail(row)">
+          {{ row.customerName }}
+        </Button>
+      </template>
+      <template #contractNo="{ row }">
+        <Button
+          v-if="row.contract"
+          type="link"
+          @click="handleContractDetail(row)"
+        >
+          {{ row.contract.no }}
+        </Button>
+        <span v-else>--</span>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:receivable:update'],
+              onClick: handleEdit.bind(null, row),
+              ifShow: row.auditStatus === 0,
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '提交审核',
+              type: 'link',
+              auth: ['crm:receivable:update'],
+              onClick: handleSubmit.bind(null, row),
+              ifShow: row.auditStatus === 0,
+            },
+            {
+              label: '查看审批',
+              type: 'link',
+              auth: ['crm:receivable:update'],
+              onClick: handleProcessDetail.bind(null, row),
+              ifShow: row.auditStatus !== 0,
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:receivable:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/receivable/modules/detail-info.vue b/apps/web-antd/src/views/crm/receivable/modules/detail-info.vue
new file mode 100644
index 000000000..bac747f62
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/modules/detail-info.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>receivableInfo</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue b/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue
new file mode 100644
index 000000000..d9444469c
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>receivableList</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/receivable/modules/form.vue b/apps/web-antd/src/views/crm/receivable/modules/form.vue
new file mode 100644
index 000000000..e92610c25
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/modules/form.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import type { CrmReceivableApi } from '#/api/crm/receivable';
+
+import { computed, ref } from 'vue';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import {
+  createReceivable,
+  getReceivable,
+  updateReceivable,
+} from '#/api/crm/receivable';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmReceivableApi.Receivable>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['回款'])
+    : $t('ui.actionTitle.create', ['回款']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // 一共2列
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as CrmReceivableApi.Receivable;
+    try {
+      await (formData.value?.id
+        ? updateReceivable(data)
+        : createReceivable(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<CrmReceivableApi.Receivable>();
+    if (!data) {
+      return;
+    }
+    const { receivable, plan } = data;
+    modalApi.lock();
+    try {
+      if (receivable) {
+        formData.value = await getReceivable(receivable.id as number);
+      } else if (plan) {
+        formData.value = plan.id
+          ? {
+              planId: plan.id,
+              price: plan.price,
+              returnType: plan.returnType,
+              customerId: plan.customerId,
+              contractId: plan.contractId,
+            }
+          : {
+              customerId: plan.customerId,
+              contractId: plan.contractId,
+            };
+      }
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-[40%]">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/crm/receivable/plan/data.ts b/apps/web-antd/src/views/crm/receivable/plan/data.ts
new file mode 100644
index 000000000..519c41f13
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/plan/data.ts
@@ -0,0 +1,230 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getCustomerSimpleList } from '#/api/crm/customer';
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'customerId',
+      label: '客户',
+      component: 'ApiSelect',
+      rules: 'required',
+      componentProps: {
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择客户',
+      },
+    },
+    {
+      fieldName: 'contractId',
+      label: '合同',
+      component: 'ApiSelect',
+      rules: 'required',
+      componentProps: {
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择合同',
+      },
+    },
+    {
+      fieldName: 'period',
+      label: '期数',
+      component: 'Input',
+      componentProps: {
+        placeholder: '保存时自动生成',
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'price',
+      label: '计划回款金额',
+      component: 'InputNumber',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入计划回款金额',
+        min: 0,
+        precision: 2,
+      },
+    },
+    {
+      fieldName: 'returnTime',
+      label: '计划回款日期',
+      component: 'DatePicker',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请选择计划回款日期',
+      },
+    },
+    {
+      fieldName: 'remindDays',
+      label: '提前几天提醒',
+      component: 'InputNumber',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入提前几天提醒',
+        min: 0,
+      },
+    },
+    {
+      fieldName: 'returnType',
+      label: '回款方式',
+      component: 'Select',
+      rules: 'required',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE, 'number'),
+        placeholder: '请选择回款方式',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'customerId',
+      label: '客户',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择客户',
+      },
+    },
+    {
+      fieldName: 'contractNo',
+      label: '合同编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入合同编号',
+      },
+    },
+  ];
+}
+
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '客户名称',
+      field: 'customerName',
+      minWidth: 150,
+      fixed: 'left',
+      slots: { default: 'customerName' },
+    },
+    {
+      title: '合同编号',
+      field: 'contractNo',
+      minWidth: 200,
+    },
+    {
+      title: '期数',
+      field: 'period',
+      minWidth: 150,
+      slots: { default: 'period' },
+    },
+    {
+      title: '计划回款金额（元）',
+      field: 'price',
+      minWidth: 160,
+      formatter: 'formatNumber',
+    },
+    {
+      title: '计划回款日期',
+      field: 'returnTime',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '提前几天提醒',
+      field: 'remindDays',
+      minWidth: 150,
+    },
+    {
+      title: '提醒日期',
+      field: 'remindTime',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '回款方式',
+      field: 'returnType',
+      minWidth: 130,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
+      },
+    },
+    {
+      title: '备注',
+      field: 'remark',
+      minWidth: 120,
+    },
+    {
+      title: '负责人',
+      field: 'ownerUserName',
+      minWidth: 120,
+    },
+    {
+      title: '实际回款金额（元）',
+      field: 'receivable.price',
+      minWidth: 160,
+      formatter: 'formatNumber',
+    },
+    {
+      title: '实际回款日期',
+      field: 'receivable.returnTime',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '未回款金额（元）',
+      field: 'unpaidPrice',
+      minWidth: 160,
+      formatter: ({ row }) => {
+        if (row.receivable) {
+          return row.price - row.receivable.price;
+        }
+        return row.price;
+      },
+    },
+    {
+      title: '更新时间',
+      field: 'updateTime',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '创建人',
+      field: 'creatorName',
+      minWidth: 100,
+    },
+    {
+      title: '操作',
+      field: 'actions',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
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 dc177ae79..1f4c479cb 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/index.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/index.vue
@@ -1,38 +1,217 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
 
-import { Button } from 'ant-design-vue';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 
+import { Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message, Tabs } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteReceivablePlan,
+  exportReceivablePlan,
+  getReceivablePlanPage,
+} from '#/api/crm/receivable/plan';
 import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import ReceivableForm from '../modules/form.vue';
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const { push } = useRouter();
+const sceneType = ref('1');
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [ReceivableFormModal, receivableFormModalApi] = useVbenModal({
+  connectedComponent: ReceivableForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportReceivablePlan(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '回款计划.xls', source: data });
+}
+
+/** 创建回款计划 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑回款计划 */
+function handleEdit(row: CrmReceivablePlanApi.ReceivablePlan) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除回款计划 */
+async function handleDelete(row: CrmReceivablePlanApi.ReceivablePlan) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.period]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteReceivablePlan(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.period]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 创建回款 */
+function handleCreateReceivable(row: CrmReceivablePlanApi.ReceivablePlan) {
+  receivableFormModalApi.setData({ plan: row }).open();
+}
+
+/** 查看回款计划详情 */
+function handleDetail(row: CrmReceivablePlanApi.ReceivablePlan) {
+  push({ name: 'CrmReceivablePlanDetail', params: { id: row.id } });
+}
+
+/** 查看客户详情 */
+function handleCustomerDetail(row: CrmReceivablePlanApi.ReceivablePlan) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getReceivablePlanPage({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            sceneType: sceneType.value,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmReceivablePlanApi.ReceivablePlan>,
+});
+
+function onChangeSceneType(key: number | string) {
+  sceneType.value = key.toString();
+  gridApi.query();
+}
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【回款】回款管理、回款计划"
-      url="https://doc.iocoder.cn/crm/receivable/"
-    />
-    <DocAlert
-      title="【通用】数据权限"
-      url="https://doc.iocoder.cn/crm/permission/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/receivable/plan/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/receivable/plan/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【回款】回款管理、回款计划"
+        url="https://doc.iocoder.cn/crm/receivable/"
+      />
+      <DocAlert
+        title="【通用】数据权限"
+        url="https://doc.iocoder.cn/crm/permission/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+    <ReceivableFormModal @success="onRefresh" />
+    <Grid>
+      <template #top>
+        <Tabs class="border-none" @change="onChangeSceneType">
+          <Tabs.TabPane tab="我负责的" key="1" />
+          <Tabs.TabPane tab="下属负责的" key="3" />
+        </Tabs>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['回款计划']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:receivable-plan:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['crm:receivable-plan:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #customerName="{ row }">
+        <Button type="link" @click="handleCustomerDetail(row)">
+          {{ row.customerName }}
+        </Button>
+      </template>
+      <template #period="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.period }}
+        </Button>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['回款']),
+              type: 'link',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:receivable:create'],
+              onClick: handleCreateReceivable.bind(null, row),
+              ifShow: !row.receivableId,
+            },
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:receivable-plan:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:receivable-plan:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.period]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue
new file mode 100644
index 000000000..d94b1e3b9
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>receivablePlanInfo</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue
new file mode 100644
index 000000000..bec4aa4b6
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>receivablePlanList</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/form.vue b/apps/web-antd/src/views/crm/receivable/plan/modules/form.vue
new file mode 100644
index 000000000..41a2132c1
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/plan/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
+
+import { computed, ref } from 'vue';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import {
+  createReceivablePlan,
+  getReceivablePlan,
+  updateReceivablePlan,
+} from '#/api/crm/receivable/plan';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmReceivablePlanApi.ReceivablePlan>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['回款计划'])
+    : $t('ui.actionTitle.create', ['回款计划']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // 一共2列
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as CrmReceivablePlanApi.ReceivablePlan;
+    try {
+      await (formData.value?.id
+        ? updateReceivablePlan(data)
+        : createReceivablePlan(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<CrmReceivablePlanApi.ReceivablePlan>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getReceivablePlan(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-[40%]">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/infra/apiAccessLog/data.ts b/apps/web-antd/src/views/infra/apiAccessLog/data.ts
index df569c12c..05d6b391d 100644
--- a/apps/web-antd/src/views/infra/apiAccessLog/data.ts
+++ b/apps/web-antd/src/views/infra/apiAccessLog/data.ts
@@ -70,17 +70,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '日志编号',
-      minWidth: 100,
     },
     {
       field: 'userId',
       title: '用户编号',
-      minWidth: 100,
     },
     {
       field: 'userType',
       title: '用户类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.USER_TYPE },
@@ -89,34 +86,28 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'applicationName',
       title: '应用名',
-      minWidth: 150,
     },
     {
       field: 'requestMethod',
       title: '请求方法',
-      minWidth: 80,
     },
     {
       field: 'requestUrl',
       title: '请求地址',
-      minWidth: 300,
     },
     {
       field: 'beginTime',
       title: '请求时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'duration',
       title: '执行时长',
-      minWidth: 120,
-      formatter: ({ row }) => `${row.duration} ms`,
+      formatter: ({ cellValue }) => `${cellValue} ms`,
     },
     {
       field: 'resultCode',
       title: '操作结果',
-      minWidth: 150,
       formatter: ({ row }) => {
         return row.resultCode === 0 ? '成功' : `失败(${row.resultMsg})`;
       },
@@ -124,17 +115,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'operateModule',
       title: '操作模块',
-      minWidth: 150,
     },
     {
       field: 'operateName',
       title: '操作名',
-      minWidth: 220,
     },
     {
       field: 'operateType',
       title: '操作类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_OPERATE_TYPE },
diff --git a/apps/web-antd/src/views/infra/apiErrorLog/data.ts b/apps/web-antd/src/views/infra/apiErrorLog/data.ts
index b60d797b6..a22715e41 100644
--- a/apps/web-antd/src/views/infra/apiErrorLog/data.ts
+++ b/apps/web-antd/src/views/infra/apiErrorLog/data.ts
@@ -71,17 +71,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '日志编号',
-      minWidth: 100,
     },
     {
       field: 'userId',
       title: '用户编号',
-      minWidth: 100,
     },
     {
       field: 'userType',
       title: '用户类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.USER_TYPE },
@@ -90,33 +87,27 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'applicationName',
       title: '应用名',
-      minWidth: 150,
     },
     {
       field: 'requestMethod',
       title: '请求方法',
-      minWidth: 80,
     },
     {
       field: 'requestUrl',
       title: '请求地址',
-      minWidth: 200,
     },
     {
       field: 'exceptionTime',
       title: '异常发生时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'exceptionName',
       title: '异常名',
-      minWidth: 180,
     },
     {
       field: 'processStatus',
       title: '处理状态',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS },
diff --git a/apps/web-antd/src/views/infra/codegen/data.ts b/apps/web-antd/src/views/infra/codegen/data.ts
index a5647cf82..a2b50d9c3 100644
--- a/apps/web-antd/src/views/infra/codegen/data.ts
+++ b/apps/web-antd/src/views/infra/codegen/data.ts
@@ -397,34 +397,28 @@ export function useGridColumns(
     {
       field: 'dataSourceConfigId',
       title: '数据源',
-      minWidth: 120,
-      formatter: (row) => getDataSourceConfigName?.(row.cellValue) || '-',
+      formatter: ({ cellValue }) => getDataSourceConfigName?.(cellValue) || '-',
     },
     {
       field: 'tableName',
       title: '表名称',
-      minWidth: 200,
     },
     {
       field: 'tableComment',
       title: '表描述',
-      minWidth: 200,
     },
     {
       field: 'className',
       title: '实体',
-      minWidth: 200,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'updateTime',
       title: '更新时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/infra/config/data.ts b/apps/web-antd/src/views/infra/config/data.ts
index 4ca8a36d6..ae886c47f 100644
--- a/apps/web-antd/src/views/infra/config/data.ts
+++ b/apps/web-antd/src/views/infra/config/data.ts
@@ -122,32 +122,26 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '参数主键',
-      minWidth: 100,
     },
     {
       field: 'category',
       title: '参数分类',
-      minWidth: 120,
     },
     {
       field: 'name',
       title: '参数名称',
-      minWidth: 200,
     },
     {
       field: 'key',
       title: '参数键名',
-      minWidth: 200,
     },
     {
       field: 'value',
       title: '参数键值',
-      minWidth: 150,
     },
     {
       field: 'visible',
       title: '是否可见',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
@@ -156,7 +150,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'type',
       title: '系统内置',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_CONFIG_TYPE },
@@ -165,12 +158,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'remark',
       title: '备注',
-      minWidth: 150,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/infra/dataSourceConfig/data.ts b/apps/web-antd/src/views/infra/dataSourceConfig/data.ts
index 98bb063ea..8ea49f895 100644
--- a/apps/web-antd/src/views/infra/dataSourceConfig/data.ts
+++ b/apps/web-antd/src/views/infra/dataSourceConfig/data.ts
@@ -58,27 +58,22 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       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/demo/demo03/normal/data.ts b/apps/web-antd/src/views/infra/demo/demo03/normal/data.ts
index 9d515e49d..8aa1eeaf1 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
@@ -111,17 +111,14 @@ export function useGridColumns(
     {
       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 },
@@ -130,18 +127,15 @@ export function useGridColumns(
     {
       field: 'birthday',
       title: '出生日期',
-      minWidth: 120,
       formatter: 'formatDateTime',
     },
     {
       field: 'description',
       title: '简介',
-      minWidth: 120,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 120,
       formatter: 'formatDateTime',
     },
     {
@@ -183,13 +177,11 @@ export function useDemo03CourseGridEditColumns(
     {
       field: 'name',
       title: '名字',
-      minWidth: 120,
       slots: { default: 'name' },
     },
     {
       field: 'score',
       title: '分数',
-      minWidth: 120,
       slots: { default: 'score' },
     },
     {
diff --git a/apps/web-antd/src/views/infra/file/data.ts b/apps/web-antd/src/views/infra/file/data.ts
index 912e1c949..3b9eecb1e 100644
--- a/apps/web-antd/src/views/infra/file/data.ts
+++ b/apps/web-antd/src/views/infra/file/data.ts
@@ -57,24 +57,20 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'name',
       title: '文件名',
-      minWidth: 150,
     },
     {
       field: 'path',
       title: '文件路径',
-      minWidth: 200,
       showOverflow: true,
     },
     {
       field: 'url',
       title: 'URL',
-      minWidth: 200,
       showOverflow: true,
     },
     {
       field: 'size',
       title: '文件大小',
-      minWidth: 80,
       formatter: ({ cellValue }) => {
         // TODO @芋艿：后续优化下
         if (!cellValue) return '0 B';
@@ -88,20 +84,15 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'type',
       title: '文件类型',
-      minWidth: 120,
     },
     {
       field: 'file-content',
       title: '文件内容',
-      minWidth: 120,
-      slots: {
-        default: 'file-content',
-      },
+      slots: { default: 'file-content' },
     },
     {
       field: 'createTime',
       title: '上传时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/infra/fileConfig/data.ts b/apps/web-antd/src/views/infra/fileConfig/data.ts
index 4821e4e6d..11ea4475e 100644
--- a/apps/web-antd/src/views/infra/fileConfig/data.ts
+++ b/apps/web-antd/src/views/infra/fileConfig/data.ts
@@ -265,17 +265,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
-      width: 100,
     },
     {
       field: 'name',
       title: '配置名',
-      minWidth: 120,
     },
     {
       field: 'storage',
       title: '存储器',
-      width: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_FILE_STORAGE },
@@ -284,12 +281,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'remark',
       title: '备注',
-      minWidth: 150,
     },
     {
       field: 'master',
       title: '主配置',
-      width: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
@@ -298,7 +293,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'createTime',
       title: '创建时间',
-      width: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/infra/job/data.ts b/apps/web-antd/src/views/infra/job/data.ts
index 8d4db1e89..982ee9f9b 100644
--- a/apps/web-antd/src/views/infra/job/data.ts
+++ b/apps/web-antd/src/views/infra/job/data.ts
@@ -132,17 +132,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '任务编号',
-      minWidth: 80,
     },
     {
       field: 'name',
       title: '任务名称',
-      minWidth: 120,
     },
     {
       field: 'status',
       title: '任务状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_JOB_STATUS },
@@ -151,17 +148,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'handlerName',
       title: '处理器的名字',
-      minWidth: 180,
     },
     {
       field: 'handlerParam',
       title: '处理器的参数',
-      minWidth: 140,
     },
     {
       field: 'cronExpression',
       title: 'CRON 表达式',
-      minWidth: 120,
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/infra/job/logger/data.ts b/apps/web-antd/src/views/infra/job/logger/data.ts
index 9d5530e6c..b58629a8b 100644
--- a/apps/web-antd/src/views/infra/job/logger/data.ts
+++ b/apps/web-antd/src/views/infra/job/logger/data.ts
@@ -70,32 +70,26 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '日志编号',
-      minWidth: 80,
     },
     {
       field: 'jobId',
       title: '任务编号',
-      minWidth: 80,
     },
     {
       field: 'handlerName',
       title: '处理器的名字',
-      minWidth: 180,
     },
     {
       field: 'handlerParam',
       title: '处理器的参数',
-      minWidth: 140,
     },
     {
       field: 'executeIndex',
       title: '第几次执行',
-      minWidth: 100,
     },
     {
       field: 'beginTime',
       title: '执行时间',
-      minWidth: 280,
       formatter: ({ row }) => {
         return `${formatDateTime(row.beginTime)} ~ ${formatDateTime(row.endTime)}`;
       },
@@ -103,15 +97,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'duration',
       title: '执行时长',
-      minWidth: 120,
-      formatter: ({ row }) => {
-        return `${row.duration} 毫秒`;
-      },
+      formatter: ({ cellValue }) => `${cellValue} 毫秒`,
     },
     {
       field: 'status',
       title: '任务状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_JOB_LOG_STATUS },
diff --git a/apps/web-antd/src/views/member/tag/data.ts b/apps/web-antd/src/views/member/tag/data.ts
index 73728e0c3..c0da8541e 100644
--- a/apps/web-antd/src/views/member/tag/data.ts
+++ b/apps/web-antd/src/views/member/tag/data.ts
@@ -48,17 +48,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
-      minWidth: 200,
     },
     {
       field: 'name',
       title: '标签名称',
-      minWidth: 200,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/member/user/components/user-experience-record-list.vue b/apps/web-antd/src/views/member/user/components/user-experience-record-list.vue
index f1b6729f2..4e6b1bb3d 100644
--- a/apps/web-antd/src/views/member/user/components/user-experience-record-list.vue
+++ b/apps/web-antd/src/views/member/user/components/user-experience-record-list.vue
@@ -122,6 +122,7 @@ const [Grid] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<MemberExperienceRecordApi.ExperienceRecord>,
+  separator: false,
 });
 </script>
 
diff --git a/apps/web-antd/src/views/member/user/components/user-point-list.vue b/apps/web-antd/src/views/member/user/components/user-point-list.vue
index 295acf0cf..cc7dddd75 100644
--- a/apps/web-antd/src/views/member/user/components/user-point-list.vue
+++ b/apps/web-antd/src/views/member/user/components/user-point-list.vue
@@ -65,6 +65,7 @@ const [Grid] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<MemberPointRecordApi.Record>,
+  separator: false,
 });
 </script>
 
diff --git a/apps/web-antd/src/views/member/user/components/user-sign-list.vue b/apps/web-antd/src/views/member/user/components/user-sign-list.vue
index e6a8a9e35..77ef261e7 100644
--- a/apps/web-antd/src/views/member/user/components/user-sign-list.vue
+++ b/apps/web-antd/src/views/member/user/components/user-sign-list.vue
@@ -56,6 +56,7 @@ const [Grid] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<MemberSignInRecordApi.SignInRecord>,
+  separator: false,
 });
 </script>
 
diff --git a/apps/web-antd/src/views/mp/account/data.ts b/apps/web-antd/src/views/mp/account/data.ts
new file mode 100644
index 000000000..cbf918cfc
--- /dev/null
+++ b/apps/web-antd/src/views/mp/account/data.ts
@@ -0,0 +1,135 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名称',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入名称',
+      },
+    },
+    {
+      fieldName: 'account',
+      label: '微信号',
+      component: 'Input',
+      help: '在微信公众平台（mp.weixin.qq.com）的菜单 [设置与开发 - 公众号设置 - 账号详情] 中能找到「微信号」',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入微信号',
+      },
+    },
+    {
+      fieldName: 'appId',
+      label: 'appId',
+      component: 'Input',
+      help: '在微信公众平台（mp.weixin.qq.com）的菜单 [设置与开发 - 公众号设置 - 基本设置] 中能找到「开发者ID(AppID)」',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入appId',
+      },
+    },
+    {
+      fieldName: 'appSecret',
+      label: 'appSecret',
+      component: 'Input',
+      help: '在微信公众平台（mp.weixin.qq.com）的菜单 [设置与开发 - 公众号设置 - 基本设置] 中能找到「开发者密码(AppSecret)」',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入appSecret',
+      },
+    },
+    {
+      fieldName: 'token',
+      label: 'token',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入token',
+      },
+    },
+    {
+      fieldName: 'aesKey',
+      label: '消息加解密密钥',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入aesKey',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 搜索表单配置 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名称',
+      component: 'Input',
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeGridPropTypes.Columns {
+  return [
+    {
+      title: '名称',
+      field: 'name',
+    },
+    {
+      title: '微信号',
+      field: 'account',
+    },
+    {
+      title: 'appId',
+      field: 'appId',
+    },
+    {
+      title: '服务器地址(URL)',
+      field: 'utl',
+      slots: {
+        default: ({ row }) => {
+          return `http://服务端地址/admin-api/mp/open/${row.appId}`;
+        },
+      },
+    },
+    {
+      title: '二维码',
+      field: 'qrCodeUrl',
+      slots: {
+        default: 'qrCodeUrl',
+      },
+    },
+    {
+      title: '备注',
+      field: 'remark',
+    },
+    {
+      title: '操作',
+      width: 260,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mp/account/index.vue b/apps/web-antd/src/views/mp/account/index.vue
index 34f349e11..cb105a877 100644
--- a/apps/web-antd/src/views/mp/account/index.vue
+++ b/apps/web-antd/src/views/mp/account/index.vue
@@ -1,31 +1,194 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpAccountApi } from '#/api/mp/account';
 
-import { Button } from 'ant-design-vue';
+import { Page, useVbenModal } from '@vben/common-ui';
 
-import { DocAlert } from '#/components/doc-alert';
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  clearAccountQuota,
+  deleteAccount,
+  generateAccountQrCode,
+  getAccountPage,
+} from '#/api/mp/account';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建账号 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑账号 */
+function handleEdit(row: MpAccountApi.Account) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除账号 */
+async function handleDelete(row: MpAccountApi.Account) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteAccount(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 生成二维码 */
+async function handleGenerateQrCode(row: MpAccountApi.Account) {
+  const hideLoading = message.loading({
+    content: '生成二维码',
+    key: 'action_key_msg',
+  });
+  try {
+    await generateAccountQrCode(row.id as number);
+    message.success({
+      content: '生成二维码成功',
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 清空 API 配额 */
+async function handleCleanQuota(row: MpAccountApi.Account) {
+  const hideLoading = message.loading({
+    content: '清空 API 配额',
+    key: 'action_key_msg',
+  });
+  try {
+    await clearAccountQuota(row.id as number);
+    message.success({
+      content: '清空 API 配额成功',
+      key: 'action_key_msg',
+    });
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getAccountPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<MpAccountApi.Account>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert title="公众号接入" url="https://doc.iocoder.cn/mp/account/" />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/account/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/account/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="公众号账号列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['公众号账号']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mp:account:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #qrCodeUrl="{ row }">
+        <a v-if="row.qrCodeUrl" :href="row.qrCodeUrl" target="_blank">
+          <img :src="row.qrCodeUrl" alt="二维码" />
+        </a>
+        <TableAction
+          :actions="[
+            {
+              label: '生成二维码',
+              type: 'link',
+              icon: 'qrcode',
+              auth: ['mp:account:qr-code'],
+              onClick: handleGenerateQrCode.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['mp:account:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mp:account:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '清空 API 配额',
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mp:account:clear-quota'],
+              popConfirm: {
+                title: '清空 API 配额',
+                confirm: handleCleanQuota.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/mp/account/modules/form.vue b/apps/web-antd/src/views/mp/account/modules/form.vue
new file mode 100644
index 000000000..865c7fab1
--- /dev/null
+++ b/apps/web-antd/src/views/mp/account/modules/form.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { MpAccountApi } from '#/api/mp/account';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createAccount, getAccount, updateAccount } from '#/api/mp/account';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MpAccountApi.Account>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['公众号账号'])
+    : $t('ui.actionTitle.create', ['公众号账号']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MpAccountApi.Account;
+    try {
+      await (formData.value?.id ? updateAccount(data) : createAccount(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MpAccountApi.Account>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getAccount(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[600px]" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mp/tag/data.ts b/apps/web-antd/src/views/mp/tag/data.ts
new file mode 100644
index 000000000..bdb857050
--- /dev/null
+++ b/apps/web-antd/src/views/mp/tag/data.ts
@@ -0,0 +1,63 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '标签名称',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入名称',
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeGridPropTypes.Columns {
+  return [
+    {
+      title: '编号',
+      field: 'id',
+    },
+    {
+      title: '标签名称',
+      field: 'name',
+    },
+    {
+      title: '粉丝数',
+      field: 'count',
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 140,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mp/tag/index.vue b/apps/web-antd/src/views/mp/tag/index.vue
index a54db51e9..b9471c42c 100644
--- a/apps/web-antd/src/views/mp/tag/index.vue
+++ b/apps/web-antd/src/views/mp/tag/index.vue
@@ -1,31 +1,198 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpTagApi } from '#/api/mp/tag';
 
-import { Button } from 'ant-design-vue';
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
 
-import { DocAlert } from '#/components/doc-alert';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSimpleAccountList } from '#/api/mp/account';
+import { deleteTag, getTagPage, syncTag } from '#/api/mp/tag';
+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 }[]>([]);
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+async function getAccountList() {
+  const res = await getSimpleAccountList();
+  if (res.length > 0) {
+    accountId.value = res[0]?.id as number;
+    accountOptions.value = res.map((item) => ({
+      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();
+  }
+}
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建标签 */
+function handleCreate() {
+  formModalApi.setData({ accountId: accountId.value }).open();
+}
+
+/** 编辑标签 */
+function handleEdit(row: MpTagApi.Tag) {
+  formModalApi.setData({ row, accountId: accountId.value }).open();
+}
+
+/** 删除标签 */
+async function handleDelete(row: MpTagApi.Tag) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteTag(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+/** 同步标签 */
+async function handleSync() {
+  const hideLoading = message.loading({
+    content: '是否确认同步标签？',
+    key: 'action_key_msg',
+  });
+  try {
+    await syncTag(accountId.value);
+    message.success({
+      content: '同步标签成功',
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: [],
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          accountId.value = formValues.accountId;
+          return await getTagPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<MpTagApi.Tag>,
+});
+
+onMounted(async () => {
+  await getAccountList();
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert title="公众号标签" url="https://doc.iocoder.cn/mp/tag/" />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/tag/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/tag/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="公众号账号列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['公众号账号']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mp:tag:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: '同步',
+              type: 'primary',
+              icon: 'lucide:refresh-ccw',
+              auth: ['mp:tag:sync'],
+              onClick: handleSync,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['mp:tag:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mp:tag:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/mp/tag/modules/form.vue b/apps/web-antd/src/views/mp/tag/modules/form.vue
new file mode 100644
index 000000000..c8c0427f8
--- /dev/null
+++ b/apps/web-antd/src/views/mp/tag/modules/form.vue
@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import type { MpTagApi } from '#/api/mp/tag';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createTag, getTag, updateTag } from '#/api/mp/tag';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MpTagApi.Tag>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['标签'])
+    : $t('ui.actionTitle.create', ['标签']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MpTagApi.Tag;
+    try {
+      await (formData.value?.id ? updateTag(data) : createTag(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ accountId: number; row: MpTagApi.Tag }>();
+    if (!data || !data.row || !data.accountId) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getTag(data.row.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[600px]" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/pay/demo/order/data.ts b/apps/web-antd/src/views/pay/demo/order/data.ts
index 2683b905a..f38050df5 100644
--- a/apps/web-antd/src/views/pay/demo/order/data.ts
+++ b/apps/web-antd/src/views/pay/demo/order/data.ts
@@ -38,45 +38,37 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '订单编号',
-      minWidth: 200,
     },
     {
       field: 'userId',
       title: '用户编号',
-      minWidth: 200,
     },
     {
       field: 'spuName',
       title: '商品名字',
-      minWidth: 200,
     },
     {
       field: 'price',
       title: '支付价格',
-      minWidth: 120,
       formatter: 'formatNumber',
     },
     {
       field: 'refundPrice',
       title: '退款金额',
-      minWidth: 120,
       formatter: 'formatNumber',
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'payOrderId',
       title: '支付单号',
-      minWidth: 200,
     },
     {
       field: 'payStatus',
       title: '是否支付',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
@@ -85,13 +77,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'payTime',
       title: '支付时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'refundTime',
       title: '退款时间',
-      minWidth: 180,
       slots: { default: 'refundTime' },
     },
     {
diff --git a/apps/web-antd/src/views/pay/demo/withdraw/data.ts b/apps/web-antd/src/views/pay/demo/withdraw/data.ts
index ccfa1af1b..7fcfb6055 100644
--- a/apps/web-antd/src/views/pay/demo/withdraw/data.ts
+++ b/apps/web-antd/src/views/pay/demo/withdraw/data.ts
@@ -65,50 +65,41 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '提现单编号',
-      minWidth: 100,
     },
     {
       field: 'subject',
       title: '提现标题',
-      minWidth: 120,
     },
     {
       field: 'type',
       title: '提现类型',
-      minWidth: 90,
       slots: { default: 'type' },
     },
     {
       field: 'price',
       title: '提现金额',
-      minWidth: 120,
       formatter: 'formatNumber',
     },
     {
       field: 'userName',
       title: '收款人姓名',
-      minWidth: 150,
     },
     {
       field: 'userAccount',
       title: '收款人账号',
-      minWidth: 250,
     },
     {
       field: 'status',
       title: '提现状态',
-      minWidth: 100,
       slots: { default: 'status' },
     },
     {
       field: 'payTransferId',
       title: '转账单号',
-      minWidth: 120,
     },
     {
       field: 'transferChannelCode',
       title: '转账渠道',
-      minWidth: 180,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
@@ -117,13 +108,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'transferTime',
       title: '转账时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'transferErrorMsg',
       title: '转账失败原因',
-      minWidth: 200,
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/pay/notify/data.ts b/apps/web-antd/src/views/pay/notify/data.ts
index 7fc2e6354..6b7b5cc57 100644
--- a/apps/web-antd/src/views/pay/notify/data.ts
+++ b/apps/web-antd/src/views/pay/notify/data.ts
@@ -69,22 +69,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '任务编号',
-      minWidth: 100,
     },
     {
       field: 'appName',
       title: '应用编号',
-      minWidth: 120,
     },
     {
       field: 'merchantOrderId',
       title: '商户订单编号',
-      minWidth: 180,
     },
     {
       field: 'type',
       title: '通知类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.PAY_NOTIFY_TYPE },
@@ -93,12 +89,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'dataId',
       title: '关联编号',
-      minWidth: 120,
     },
     {
       field: 'status',
       title: '通知状态',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.PAY_NOTIFY_STATUS },
@@ -107,19 +101,16 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'lastExecuteTime',
       title: '最后通知时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'nextNotifyTime',
       title: '下次通知时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'notifyTimes',
       title: '通知次数',
-      minWidth: 120,
       cellRender: {
         name: 'CellTag',
         props: {
diff --git a/apps/web-antd/src/views/pay/transfer/data.ts b/apps/web-antd/src/views/pay/transfer/data.ts
index b6f8fef96..36d7cb861 100644
--- a/apps/web-antd/src/views/pay/transfer/data.ts
+++ b/apps/web-antd/src/views/pay/transfer/data.ts
@@ -107,29 +107,24 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
-      minWidth: 100,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'appName',
       title: '支付应用',
-      minWidth: 100,
     },
     {
       field: 'price',
       title: '转账金额',
-      minWidth: 120,
       formatter: ({ cellValue }) => `￥${(cellValue / 100).toFixed(2)}`,
     },
     {
       field: 'status',
       title: '转账状态',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.PAY_TRANSFER_STATUS },
@@ -138,7 +133,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'type',
       title: '类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.PAY_TRANSFER_TYPE },
@@ -147,7 +141,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'channelCode',
       title: '支付渠道',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
@@ -156,22 +149,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'merchantTransferId',
       title: '商户单号',
-      minWidth: 180,
     },
     {
       field: 'channelTransferNo',
       title: '渠道单号',
-      minWidth: 180,
     },
     {
       field: 'userName',
       title: '收款人姓名',
-      minWidth: 120,
     },
     {
       field: 'accountNo',
       title: '收款人账号',
-      minWidth: 180,
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/system/area/data.ts b/apps/web-antd/src/views/system/area/data.ts
index 48339f19e..087133e96 100644
--- a/apps/web-antd/src/views/system/area/data.ts
+++ b/apps/web-antd/src/views/system/area/data.ts
@@ -32,7 +32,6 @@ export function useGridColumns(): VxeTableGridOptions<SystemAreaApi.Area>['colum
     {
       field: 'id',
       title: '地区编码',
-      minWidth: 120,
       align: 'left',
       fixed: 'left',
       treeNode: true,
@@ -40,7 +39,6 @@ export function useGridColumns(): VxeTableGridOptions<SystemAreaApi.Area>['colum
     {
       field: 'name',
       title: '地区名称',
-      minWidth: 200,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/system/dept/data.ts b/apps/web-antd/src/views/system/dept/data.ts
index f57287407..155f60f21 100644
--- a/apps/web-antd/src/views/system/dept/data.ts
+++ b/apps/web-antd/src/views/system/dept/data.ts
@@ -116,7 +116,6 @@ export function useGridColumns(
     {
       field: 'name',
       title: '部门名称',
-      minWidth: 150,
       align: 'left',
       fixed: 'left',
       treeNode: true,
@@ -124,20 +123,15 @@ export function useGridColumns(
     {
       field: 'leaderUserId',
       title: '负责人',
-      minWidth: 150,
-      formatter: (row) => {
-        return getLeaderName?.(row.cellValue) || '-';
-      },
+      formatter: ({ cellValue }) => getLeaderName?.(cellValue) || '-',
     },
     {
       field: 'sort',
       title: '显示顺序',
-      minWidth: 100,
     },
     {
       field: 'status',
       title: '部门状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -146,7 +140,6 @@ export function useGridColumns(
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/dict/data.ts b/apps/web-antd/src/views/system/dict/data.ts
index 531531bc2..d116f0d28 100644
--- a/apps/web-antd/src/views/system/dict/data.ts
+++ b/apps/web-antd/src/views/system/dict/data.ts
@@ -95,22 +95,18 @@ export function useTypeGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '字典编号',
-      minWidth: 100,
     },
     {
       field: 'name',
       title: '字典名称',
-      minWidth: 200,
     },
     {
       field: 'type',
       title: '字典类型',
-      minWidth: 220,
     },
     {
       field: 'status',
       title: '状态',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -119,12 +115,10 @@ export function useTypeGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'remark',
       title: '备注',
-      minWidth: 180,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
@@ -288,27 +282,22 @@ export function useDataGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '字典编码',
-      minWidth: 100,
     },
     {
       field: 'label',
       title: '字典标签',
-      minWidth: 180,
     },
     {
       field: 'value',
       title: '字典键值',
-      minWidth: 100,
     },
     {
       field: 'sort',
       title: '字典排序',
-      minWidth: 100,
     },
     {
       field: 'status',
       title: '状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -317,17 +306,14 @@ export function useDataGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'colorType',
       title: '颜色类型',
-      minWidth: 120,
     },
     {
       field: 'cssClass',
       title: 'CSS Class',
-      minWidth: 120,
     },
     {
       title: '创建时间',
       field: 'createTime',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/loginlog/data.ts b/apps/web-antd/src/views/system/loginlog/data.ts
index 730e5f8b5..f09f6b535 100644
--- a/apps/web-antd/src/views/system/loginlog/data.ts
+++ b/apps/web-antd/src/views/system/loginlog/data.ts
@@ -42,12 +42,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '日志编号',
-      minWidth: 100,
     },
     {
       field: 'logType',
       title: '操作类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_LOGIN_TYPE },
@@ -56,22 +54,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'username',
       title: '用户名称',
-      minWidth: 180,
     },
     {
       field: 'userIp',
       title: '登录地址',
-      minWidth: 180,
     },
     {
       field: 'userAgent',
       title: '浏览器',
-      minWidth: 200,
     },
     {
       field: 'result',
       title: '登录结果',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_LOGIN_RESULT },
@@ -80,7 +74,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'createTime',
       title: '登录日期',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/mail/account/data.ts b/apps/web-antd/src/views/system/mail/account/data.ts
index 60736eb95..e4cbbec40 100644
--- a/apps/web-antd/src/views/system/mail/account/data.ts
+++ b/apps/web-antd/src/views/system/mail/account/data.ts
@@ -125,32 +125,26 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
-      minWidth: 100,
     },
     {
       field: 'mail',
       title: '邮箱',
-      minWidth: 160,
     },
     {
       field: 'username',
       title: '用户名',
-      minWidth: 160,
     },
     {
       field: 'host',
       title: 'SMTP 服务器域名',
-      minWidth: 150,
     },
     {
       field: 'port',
       title: 'SMTP 服务器端口',
-      minWidth: 130,
     },
     {
       field: 'sslEnable',
       title: '是否开启 SSL',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
@@ -159,7 +153,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'starttlsEnable',
       title: '是否开启 STARTTLS',
-      minWidth: 145,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
@@ -168,7 +161,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/mail/log/data.ts b/apps/web-antd/src/views/system/mail/log/data.ts
index b357472fc..9c8ee7e5c 100644
--- a/apps/web-antd/src/views/system/mail/log/data.ts
+++ b/apps/web-antd/src/views/system/mail/log/data.ts
@@ -75,38 +75,31 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
-      minWidth: 100,
     },
     {
       field: 'sendTime',
       title: '发送时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'toMail',
       title: '收件邮箱',
-      minWidth: 160,
     },
     {
       field: 'templateTitle',
       title: '邮件标题',
-      minWidth: 120,
     },
     {
       field: 'templateContent',
       title: '邮件内容',
-      minWidth: 300,
     },
     {
       field: 'fromMail',
       title: '发送邮箱',
-      minWidth: 120,
     },
     {
       field: 'sendStatus',
       title: '发送状态',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS },
@@ -115,7 +108,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'templateCode',
       title: '模板编码',
-      minWidth: 120,
     },
     {
       title: '操作',
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 3fb229264..06f03457a 100644
--- a/apps/web-antd/src/views/system/mail/template/data.ts
+++ b/apps/web-antd/src/views/system/mail/template/data.ts
@@ -195,38 +195,31 @@ export function useGridColumns(
     {
       field: 'id',
       title: '编号',
-      minWidth: 100,
     },
     {
       field: 'code',
       title: '模板编码',
-      minWidth: 120,
     },
     {
       field: 'name',
       title: '模板名称',
-      minWidth: 120,
     },
     {
       field: 'title',
       title: '模板标题',
-      minWidth: 120,
     },
     {
       field: 'accountId',
       title: '邮箱账号',
-      minWidth: 120,
-      formatter: (row) => getAccountMail?.(row.cellValue) || '-',
+      formatter: ({ cellValue }) => getAccountMail?.(cellValue) || '-',
     },
     {
       field: 'nickname',
       title: '发送人名称',
-      minWidth: 120,
     },
     {
       field: 'status',
       title: '开启状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -235,7 +228,6 @@ export function useGridColumns(
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/menu/data.ts b/apps/web-antd/src/views/system/menu/data.ts
index 8c338134f..0cc5a6a86 100644
--- a/apps/web-antd/src/views/system/menu/data.ts
+++ b/apps/web-antd/src/views/system/menu/data.ts
@@ -271,7 +271,6 @@ export function useGridColumns(): VxeTableGridOptions<SystemMenuApi.Menu>['colum
     {
       field: 'name',
       title: '菜单名称',
-      minWidth: 250,
       align: 'left',
       fixed: 'left',
       slots: { default: 'name' },
@@ -280,7 +279,6 @@ export function useGridColumns(): VxeTableGridOptions<SystemMenuApi.Menu>['colum
     {
       field: 'type',
       title: '菜单类型',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_MENU_TYPE },
@@ -289,27 +287,22 @@ export function useGridColumns(): VxeTableGridOptions<SystemMenuApi.Menu>['colum
     {
       field: 'sort',
       title: '显示排序',
-      minWidth: 100,
     },
     {
       field: 'permission',
       title: '权限标识',
-      minWidth: 200,
     },
     {
       field: 'path',
       title: '组件路径',
-      minWidth: 200,
     },
     {
       field: 'componentName',
-      minWidth: 200,
       title: '组件名称',
     },
     {
       field: 'status',
       title: '状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
diff --git a/apps/web-antd/src/views/system/notice/data.ts b/apps/web-antd/src/views/system/notice/data.ts
index 20aa96a49..7704f69c3 100644
--- a/apps/web-antd/src/views/system/notice/data.ts
+++ b/apps/web-antd/src/views/system/notice/data.ts
@@ -91,17 +91,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '公告编号',
-      minWidth: 100,
     },
     {
       field: 'title',
       title: '公告标题',
-      minWidth: 200,
     },
     {
       field: 'type',
       title: '公告类型',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_NOTICE_TYPE },
@@ -110,7 +107,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'status',
       title: '公告状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -119,7 +115,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/notify/message/data.ts b/apps/web-antd/src/views/system/notify/message/data.ts
index 214966e9b..45e0436fa 100644
--- a/apps/web-antd/src/views/system/notify/message/data.ts
+++ b/apps/web-antd/src/views/system/notify/message/data.ts
@@ -65,12 +65,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
-      minWidth: 100,
     },
     {
       field: 'userType',
       title: '用户类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.USER_TYPE },
@@ -79,27 +77,22 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'userId',
       title: '用户编号',
-      minWidth: 100,
     },
     {
       field: 'templateCode',
       title: '模板编码',
-      minWidth: 120,
     },
     {
       field: 'templateNickname',
       title: '发送人名称',
-      minWidth: 180,
     },
     {
       field: 'templateContent',
       title: '模版内容',
-      minWidth: 200,
     },
     {
       field: 'templateParams',
       title: '模版参数',
-      minWidth: 180,
       formatter: ({ cellValue }) => {
         try {
           return JSON.stringify(cellValue);
@@ -111,7 +104,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'templateType',
       title: '模版类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE },
@@ -120,7 +112,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'readStatus',
       title: '是否已读',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
@@ -129,13 +120,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'readTime',
       title: '阅读时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
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 d133e38f0..fc0606000 100644
--- a/apps/web-antd/src/views/system/notify/my/data.ts
+++ b/apps/web-antd/src/views/system/notify/my/data.ts
@@ -45,18 +45,15 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'templateNickname',
       title: '发送人',
-      minWidth: 180,
     },
     {
       field: 'createTime',
       title: '发送时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'templateType',
       title: '类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE },
@@ -65,12 +62,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'templateContent',
       title: '消息内容',
-      minWidth: 300,
     },
     {
       field: 'readStatus',
       title: '是否已读',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
@@ -79,7 +74,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'readTime',
       title: '阅读时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/notify/template/data.ts b/apps/web-antd/src/views/system/notify/template/data.ts
index 32d3adbb5..fd0a63f09 100644
--- a/apps/web-antd/src/views/system/notify/template/data.ts
+++ b/apps/web-antd/src/views/system/notify/template/data.ts
@@ -229,32 +229,26 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
-      minWidth: 100,
     },
     {
       field: 'name',
       title: '模板名称',
-      minWidth: 120,
     },
     {
       field: 'code',
       title: '模板编码',
-      minWidth: 120,
     },
     {
       field: 'nickname',
       title: '发送人名称',
-      minWidth: 120,
     },
     {
       field: 'content',
       title: '模板内容',
-      minWidth: 200,
     },
     {
       field: 'type',
       title: '模板类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE },
@@ -263,7 +257,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'status',
       title: '状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -272,12 +265,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'remark',
       title: '备注',
-      minWidth: 120,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/oauth2/client/data.ts b/apps/web-antd/src/views/system/oauth2/client/data.ts
index 12d5b461f..c510f8fde 100644
--- a/apps/web-antd/src/views/system/oauth2/client/data.ts
+++ b/apps/web-antd/src/views/system/oauth2/client/data.ts
@@ -191,22 +191,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'clientId',
       title: '客户端编号',
-      minWidth: 200,
     },
     {
       field: 'secret',
       title: '客户端密钥',
-      minWidth: 120,
     },
     {
       field: 'name',
       title: '应用名',
-      minWidth: 300,
     },
     {
       field: 'logo',
       title: '应用图标',
-      minWidth: 80,
       cellRender: {
         name: 'CellImage',
       },
@@ -214,7 +210,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'status',
       title: '状态',
-      minWidth: 80,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -223,24 +218,20 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'accessTokenValiditySeconds',
       title: '访问令牌的有效期',
-      minWidth: 130,
       formatter: ({ cellValue }) => `${cellValue} 秒`,
     },
     {
       field: 'refreshTokenValiditySeconds',
       title: '刷新令牌的有效期',
-      minWidth: 130,
       formatter: ({ cellValue }) => `${cellValue} 秒`,
     },
     {
       field: 'authorizedGrantTypes',
       title: '授权类型',
-      minWidth: 180,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/oauth2/token/data.ts b/apps/web-antd/src/views/system/oauth2/token/data.ts
index 5df8b9c7f..d990000c6 100644
--- a/apps/web-antd/src/views/system/oauth2/token/data.ts
+++ b/apps/web-antd/src/views/system/oauth2/token/data.ts
@@ -40,22 +40,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'accessToken',
       title: '访问令牌',
-      minWidth: 300,
     },
     {
       field: 'refreshToken',
       title: '刷新令牌',
-      minWidth: 300,
     },
     {
       field: 'userId',
       title: '用户编号',
-      minWidth: 100,
     },
     {
       field: 'userType',
       title: '用户类型',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.USER_TYPE },
@@ -64,18 +60,15 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'clientId',
       title: '客户端编号',
-      minWidth: 120,
     },
     {
       field: 'expiresTime',
       title: '过期时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/operatelog/data.ts b/apps/web-antd/src/views/system/operatelog/data.ts
index 71b552c4b..a2dde0587 100644
--- a/apps/web-antd/src/views/system/operatelog/data.ts
+++ b/apps/web-antd/src/views/system/operatelog/data.ts
@@ -75,43 +75,35 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '日志编号',
-      minWidth: 100,
     },
     {
       field: 'userName',
       title: '操作人',
-      minWidth: 120,
     },
     {
       field: 'type',
       title: '操作模块',
-      minWidth: 120,
     },
     {
       field: 'subType',
       title: '操作名',
-      minWidth: 160,
     },
     {
       field: 'action',
       title: '操作内容',
-      minWidth: 200,
     },
     {
       field: 'createTime',
       title: '操作时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'bizId',
       title: '业务编号',
-      minWidth: 120,
     },
     {
       field: 'userIp',
       title: '操作IP',
-      minWidth: 120,
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/system/post/data.ts b/apps/web-antd/src/views/system/post/data.ts
index ddde2f742..cfb1ceb79 100644
--- a/apps/web-antd/src/views/system/post/data.ts
+++ b/apps/web-antd/src/views/system/post/data.ts
@@ -86,32 +86,26 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '岗位编号',
-      minWidth: 200,
     },
     {
       field: 'name',
       title: '岗位名称',
-      minWidth: 200,
     },
     {
       field: 'code',
       title: '岗位编码',
-      minWidth: 200,
     },
     {
       field: 'sort',
       title: '显示顺序',
-      minWidth: 100,
     },
     {
       field: 'remark',
       title: '岗位备注',
-      minWidth: 200,
     },
     {
       field: 'status',
       title: '岗位状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -120,7 +114,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/role/data.ts b/apps/web-antd/src/views/system/role/data.ts
index 5b0a8b78f..30ee7a3d8 100644
--- a/apps/web-antd/src/views/system/role/data.ts
+++ b/apps/web-antd/src/views/system/role/data.ts
@@ -189,17 +189,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '角色编号',
-      minWidth: 200,
     },
     {
       field: 'name',
       title: '角色名称',
-      minWidth: 200,
     },
     {
       field: 'type',
       title: '角色类型',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_ROLE_TYPE },
@@ -208,22 +205,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'code',
       title: '角色标识',
-      minWidth: 200,
     },
     {
       field: 'sort',
       title: '显示顺序',
-      minWidth: 100,
     },
     {
       field: 'remark',
       title: '角色备注',
-      minWidth: 100,
     },
     {
       field: 'status',
       title: '角色状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -232,7 +225,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/social/client/data.ts b/apps/web-antd/src/views/system/social/client/data.ts
index 88f6b4f99..87307b4e8 100644
--- a/apps/web-antd/src/views/system/social/client/data.ts
+++ b/apps/web-antd/src/views/system/social/client/data.ts
@@ -152,17 +152,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
-      minWidth: 80,
     },
     {
       field: 'name',
       title: '应用名',
-      minWidth: 120,
     },
     {
       field: 'socialType',
       title: '社交平台',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_SOCIAL_TYPE },
@@ -171,7 +168,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'userType',
       title: '用户类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.USER_TYPE },
@@ -180,12 +176,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'clientId',
       title: '客户端编号',
-      minWidth: 180,
     },
     {
       field: 'status',
       title: '状态',
-      minWidth: 80,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -194,7 +188,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
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 eeed03f4f..7271efdd5 100644
--- a/apps/web-antd/src/views/system/social/user/data.ts
+++ b/apps/web-antd/src/views/system/social/user/data.ts
@@ -52,7 +52,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'type',
       title: '社交平台',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_SOCIAL_TYPE },
@@ -61,17 +60,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'openid',
       title: '社交 openid',
-      minWidth: 180,
     },
     {
       field: 'nickname',
       title: '用户昵称',
-      minWidth: 120,
     },
     {
       field: 'avatar',
       title: '用户头像',
-      minWidth: 80,
       cellRender: {
         name: 'CellImage',
       },
@@ -79,13 +75,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'updateTime',
       title: '更新时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/tenant/data.ts b/apps/web-antd/src/views/system/tenant/data.ts
index 126941af3..30b2a79d5 100644
--- a/apps/web-antd/src/views/system/tenant/data.ts
+++ b/apps/web-antd/src/views/system/tenant/data.ts
@@ -164,17 +164,14 @@ export function useGridColumns(
     {
       field: 'id',
       title: '租户编号',
-      minWidth: 100,
     },
     {
       field: 'name',
       title: '租户名',
-      minWidth: 180,
     },
     {
       field: 'packageId',
       title: '租户套餐',
-      minWidth: 180,
       formatter: (row: { cellValue: number }) => {
         return getPackageName?.(row.cellValue) || '-';
       },
@@ -182,33 +179,27 @@ export function useGridColumns(
     {
       field: 'contactName',
       title: '联系人',
-      minWidth: 100,
     },
     {
       field: 'contactMobile',
       title: '联系手机',
-      minWidth: 180,
     },
     {
       field: 'accountCount',
       title: '账号额度',
-      minWidth: 100,
     },
     {
       field: 'expireTime',
       title: '过期时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'website',
       title: '绑定域名',
-      minWidth: 180,
     },
     {
       field: 'status',
       title: '租户状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -217,7 +208,6 @@ export function useGridColumns(
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/tenantPackage/data.ts b/apps/web-antd/src/views/system/tenantPackage/data.ts
index f69e6290a..66775f892 100644
--- a/apps/web-antd/src/views/system/tenantPackage/data.ts
+++ b/apps/web-antd/src/views/system/tenantPackage/data.ts
@@ -91,17 +91,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '套餐编号',
-      minWidth: 100,
     },
     {
       field: 'name',
       title: '套餐名称',
-      minWidth: 180,
     },
     {
       field: 'status',
       title: '状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -110,12 +107,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'remark',
       title: '备注',
-      minWidth: 200,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/user/data.ts b/apps/web-antd/src/views/system/user/data.ts
index e38b89b00..ae2c06ff0 100644
--- a/apps/web-antd/src/views/system/user/data.ts
+++ b/apps/web-antd/src/views/system/user/data.ts
@@ -268,32 +268,26 @@ export function useGridColumns<T = SystemUserApi.User>(
     {
       field: 'id',
       title: '用户编号',
-      minWidth: 100,
     },
     {
       field: 'username',
       title: '用户名称',
-      minWidth: 120,
     },
     {
       field: 'nickname',
       title: '用户昵称',
-      minWidth: 120,
     },
     {
       field: 'deptName',
       title: '部门',
-      minWidth: 120,
     },
     {
       field: 'mobile',
       title: '手机号码',
-      minWidth: 120,
     },
     {
       field: 'status',
       title: '状态',
-      minWidth: 100,
       align: 'center',
       cellRender: {
         attrs: { beforeChange: onStatusChange },
@@ -307,7 +301,6 @@ export function useGridColumns<T = SystemUserApi.User>(
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-ele/package.json b/apps/web-ele/package.json
index ac8b9f224..04e4f3cf2 100644
--- a/apps/web-ele/package.json
+++ b/apps/web-ele/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-ele",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/web-naive/package.json b/apps/web-naive/package.json
index 2a2d3f5f7..dcce96ca2 100644
--- a/apps/web-naive/package.json
+++ b/apps/web-naive/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-naive",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/docs/package.json b/docs/package.json
index a53005342..f57dfc854 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/docs",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "scripts": {
     "build": "vitepress build",
diff --git a/docs/src/en/guide/essentials/settings.md b/docs/src/en/guide/essentials/settings.md
index e5aa71a83..59a6c5c01 100644
--- a/docs/src/en/guide/essentials/settings.md
+++ b/docs/src/en/guide/essentials/settings.md
@@ -21,7 +21,7 @@ The rules are consistent with [Vite Env Variables and Modes](https://vitejs.dev/
   console.log(import.meta.env.VITE_PROT);
   ```
 
-- Variables starting with `VITE_GLOB_*` will be added to the `_app.config.js` configuration file during packaging. :::
+- Variables starting with `VITE_GLOB_*` will be added to the `_app.config.js` configuration file during packaging.
 
 :::
 
@@ -138,6 +138,27 @@ To add a new dynamically modifiable configuration item, simply follow the steps
   }
   ```
 
+- In `packages/effects/hooks/src/use-app-config.ts`, add the corresponding configuration item, such as:
+
+  ```ts
+  export function useAppConfig(
+    env: Record<string, any>,
+    isProduction: boolean,
+  ): ApplicationConfig {
+    // In production environment, directly use the window._VBEN_ADMIN_PRO_APP_CONF_ global variable
+    const config = isProduction
+      ? window._VBEN_ADMIN_PRO_APP_CONF_
+      : (env as VbenAdminProAppConfigRaw);
+
+    const { VITE_GLOB_API_URL, VITE_GLOB_OTHER_API_URL } = config; // [!code ++]
+
+    return {
+      apiURL: VITE_GLOB_API_URL,
+      otherApiURL: VITE_GLOB_OTHER_API_URL, // [!code ++]
+    };
+  }
+  ```
+
 At this point, you can use the `useAppConfig` method within the project to access the newly added configuration item.
 
 ```ts
diff --git a/docs/src/en/guide/in-depth/access.md b/docs/src/en/guide/in-depth/access.md
index 05997d7d5..545dddabd 100644
--- a/docs/src/en/guide/in-depth/access.md
+++ b/docs/src/en/guide/in-depth/access.md
@@ -4,10 +4,11 @@ outline: deep
 
 # Access Control
 
-The framework has built-in two types of access control methods:
+The framework has built-in three types of access control methods:
 
 - Determining whether a menu or button can be accessed based on user roles
 - Determining whether a menu or button can be accessed through an API
+- Mixed mode: Using both frontend and backend access control simultaneously
 
 ## Frontend Access Control
 
@@ -151,6 +152,43 @@ const dashboardMenus = [
 
 At this point, the configuration is complete. You need to ensure that after logging in, the format of the menu returned by the interface is correct; otherwise, access will not be possible.
 
+## Mixed Access Control
+
+**Implementation Principle**: Mixed mode combines both frontend access control and backend access control methods. The system processes frontend fixed route permissions and backend dynamic menu data in parallel, ultimately merging both parts of routes to provide a more flexible access control solution.
+
+**Advantages**: Combines the performance advantages of frontend control with the flexibility of backend control, suitable for complex business scenarios requiring permission management.
+
+### Steps
+
+- Ensure the current mode is set to mixed access control
+
+Adjust `preferences.ts` in the corresponding application directory to ensure `accessMode='mixed'`.
+
+```ts
+import { defineOverridesPreferences } from '@vben/preferences';
+
+export const overridesPreferences = defineOverridesPreferences({
+  // overrides
+  app: {
+    accessMode: 'mixed',
+  },
+});
+```
+
+- Configure frontend route permissions
+
+Same as the route permission configuration method in [Frontend Access Control](#frontend-access-control) mode.
+
+- Configure backend menu interface
+
+Same as the interface configuration method in [Backend Access Control](#backend-access-control) mode.
+
+- Ensure roles and permissions match
+
+Must satisfy both frontend route permission configuration and backend menu data return requirements, ensuring user roles match the permission configurations of both modes.
+
+At this point, the configuration is complete. Mixed mode will automatically merge frontend and backend routes, providing complete access control functionality.
+
 ## Fine-grained Control of Buttons
 
 In some cases, we need to control the display of buttons with fine granularity. We can control the display of buttons through interfaces or roles.
diff --git a/docs/src/guide/essentials/settings.md b/docs/src/guide/essentials/settings.md
index cca572d86..9b47c04d3 100644
--- a/docs/src/guide/essentials/settings.md
+++ b/docs/src/guide/essentials/settings.md
@@ -21,7 +21,7 @@
   console.log(import.meta.env.VITE_PROT);
   ```
 
-- 以 `VITE_GLOB_*` 开头的的变量，在打包的时候，会被加入 `_app.config.js`配置文件当中. :::
+- 以 `VITE_GLOB_*` 开头的的变量，在打包的时候，会被加入 `_app.config.js`配置文件当中.
 
 :::
 
@@ -137,6 +137,27 @@ const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
   }
   ```
 
+- 在 `packages/effects/hooks/src/use-app-config.ts` 中，新增对应的配置项，如：
+
+  ```ts
+  export function useAppConfig(
+    env: Record<string, any>,
+    isProduction: boolean,
+  ): ApplicationConfig {
+    // 生产环境下，直接使用 window._VBEN_ADMIN_PRO_APP_CONF_ 全局变量
+    const config = isProduction
+      ? window._VBEN_ADMIN_PRO_APP_CONF_
+      : (env as VbenAdminProAppConfigRaw);
+
+    const { VITE_GLOB_API_URL, VITE_GLOB_OTHER_API_URL } = config; // [!code ++]
+
+    return {
+      apiURL: VITE_GLOB_API_URL,
+      otherApiURL: VITE_GLOB_OTHER_API_URL, // [!code ++]
+    };
+  }
+  ```
+
 到这里，就可以在项目内使用 `useAppConfig`方法获取到新增的配置项了。
 
 ```ts
diff --git a/docs/src/guide/in-depth/access.md b/docs/src/guide/in-depth/access.md
index 0dbd0819d..bbce30a20 100644
--- a/docs/src/guide/in-depth/access.md
+++ b/docs/src/guide/in-depth/access.md
@@ -4,10 +4,11 @@ outline: deep
 
 # 权限
 
-框架内置了两种权限控制方式：
+框架内置了三种权限控制方式：
 
 - 通过用户角色来判断菜单或者按钮是否可以访问
 - 通过接口来判断菜单或者按钮是否可以访问
+- 混合模式：同时使用前端和后端权限控制
 
 ## 前端访问控制
 
@@ -159,6 +160,43 @@ const dashboardMenus = [
 
 到这里，就已经配置完成，你需要确保登录后，接口返回的菜单格式正确，否则无法访问。
 
+## 混合访问控制
+
+**实现原理**: 混合模式同时结合了前端访问控制和后端访问控制两种方式。系统会并行处理前端固定路由权限和后端动态菜单数据，最终将两部分路由合并，提供更灵活的权限控制方案。
+
+**优点**: 兼具前端控制的性能优势和后端控制的灵活性，适合复杂业务场景下的权限管理。
+
+### 步骤
+
+- 确保当前模式为混合访问控制模式
+
+调整对应应用目录下的`preferences.ts`，确保`accessMode='mixed'`。
+
+```ts
+import { defineOverridesPreferences } from '@vben/preferences';
+
+export const overridesPreferences = defineOverridesPreferences({
+  // overrides
+  app: {
+    accessMode: 'mixed',
+  },
+});
+```
+
+- 配置前端路由权限
+
+同[前端访问控制](#前端访问控制)模式的路由权限配置方式。
+
+- 配置后端菜单接口
+
+同[后端访问控制](#后端访问控制)模式的接口配置方式。
+
+- 确保角色和权限匹配
+
+需要同时满足前端路由权限配置和后端菜单数据返回的要求，确保用户角色与两种模式的权限配置都匹配。
+
+到这里，就已经配置完成，混合模式会自动合并前端和后端的路由，提供完整的权限控制功能。
+
 ## 按钮细粒度控制
 
 在某些情况下，我们需要对按钮进行细粒度的控制，我们可以借助接口或者角色来控制按钮的显示。
diff --git a/internal/lint-configs/commitlint-config/package.json b/internal/lint-configs/commitlint-config/package.json
index c17cde2a2..a137f947b 100644
--- a/internal/lint-configs/commitlint-config/package.json
+++ b/internal/lint-configs/commitlint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/commitlint-config",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/internal/lint-configs/stylelint-config/package.json b/internal/lint-configs/stylelint-config/package.json
index ee55c702a..8e2a97c2c 100644
--- a/internal/lint-configs/stylelint-config/package.json
+++ b/internal/lint-configs/stylelint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/stylelint-config",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/internal/node-utils/package.json b/internal/node-utils/package.json
index 782c0b30f..8b8db7454 100644
--- a/internal/node-utils/package.json
+++ b/internal/node-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/node-utils",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/internal/tailwind-config/package.json b/internal/tailwind-config/package.json
index 9f62a1b70..8506891b5 100644
--- a/internal/tailwind-config/package.json
+++ b/internal/tailwind-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/tailwind-config",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/internal/tsconfig/package.json b/internal/tsconfig/package.json
index dd4f6321c..44ee3f1b0 100644
--- a/internal/tsconfig/package.json
+++ b/internal/tsconfig/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/tsconfig",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/package.json b/package.json
index 0583d01cf..72db822c2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vben-admin-monorepo",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "keywords": [
     "monorepo",
diff --git a/packages/@core/base/design/package.json b/packages/@core/base/design/package.json
index 4bdfbe32c..33e924749 100644
--- a/packages/@core/base/design/package.json
+++ b/packages/@core/base/design/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/design",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/base/icons/package.json b/packages/@core/base/icons/package.json
index 4d758ca84..9a349883c 100644
--- a/packages/@core/base/icons/package.json
+++ b/packages/@core/base/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/icons",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/base/shared/package.json b/packages/@core/base/shared/package.json
index 05bb218ae..b02cc6e47 100644
--- a/packages/@core/base/shared/package.json
+++ b/packages/@core/base/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/shared",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/base/typings/package.json b/packages/@core/base/typings/package.json
index dc99de243..e2ab18701 100644
--- a/packages/@core/base/typings/package.json
+++ b/packages/@core/base/typings/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/typings",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/base/typings/src/app.d.ts b/packages/@core/base/typings/src/app.d.ts
index 02da2466a..d2e86aec4 100644
--- a/packages/@core/base/typings/src/app.d.ts
+++ b/packages/@core/base/typings/src/app.d.ts
@@ -60,8 +60,9 @@ type BreadcrumbStyleType = 'background' | 'normal';
  * 权限模式
  * backend 后端权限模式
  * frontend 前端权限模式
+ * mixed 混合权限模式
  */
-type AccessModeType = 'backend' | 'frontend';
+type AccessModeType = 'backend' | 'frontend' | 'mixed';
 
 /**
  * 导航风格
diff --git a/packages/@core/composables/package.json b/packages/@core/composables/package.json
index 3e03540f7..08db5106f 100644
--- a/packages/@core/composables/package.json
+++ b/packages/@core/composables/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/composables",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/preferences/package.json b/packages/@core/preferences/package.json
index 828370fde..726b473db 100644
--- a/packages/@core/preferences/package.json
+++ b/packages/@core/preferences/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/preferences",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/ui-kit/form-ui/package.json b/packages/@core/ui-kit/form-ui/package.json
index 651b3dc54..36ae1678f 100644
--- a/packages/@core/ui-kit/form-ui/package.json
+++ b/packages/@core/ui-kit/form-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/form-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/ui-kit/layout-ui/package.json b/packages/@core/ui-kit/layout-ui/package.json
index d62d18646..57a462fe1 100644
--- a/packages/@core/ui-kit/layout-ui/package.json
+++ b/packages/@core/ui-kit/layout-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/layout-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/ui-kit/menu-ui/package.json b/packages/@core/ui-kit/menu-ui/package.json
index 1ff5741c7..760d7646e 100644
--- a/packages/@core/ui-kit/menu-ui/package.json
+++ b/packages/@core/ui-kit/menu-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/menu-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/ui-kit/popup-ui/src/alert/alert.vue b/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
index 6223ecd75..6997235ac 100644
--- a/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
+++ b/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
@@ -34,7 +34,6 @@ const props = withDefaults(defineProps<AlertProps>(), {
   bordered: true,
   buttonAlign: 'end',
   centered: true,
-  containerClass: 'w-[520px]',
 });
 const emits = defineEmits(['closed', 'confirm', 'opened']);
 const open = defineModel<boolean>('open', { default: false });
@@ -148,7 +147,7 @@ async function handleOpenChange(val: boolean) {
       :class="
         cn(
           containerClass,
-          'left-0 right-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:rounded-[var(--radius)] md:w-[520px] md:max-w-[80%]',
+          'left-0 right-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:w-[520px] sm:max-w-[80%] sm:rounded-[var(--radius)]',
           {
             'border-border border': bordered,
             'shadow-3xl': !bordered,
diff --git a/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts b/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
index 048243da3..2037dfd0f 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
+++ b/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
@@ -94,8 +94,9 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
     injectData.options?.onOpenChange?.(isOpen);
   };
 
+  const onClosed = mergedOptions.onClosed;
   mergedOptions.onClosed = () => {
-    options.onClosed?.();
+    onClosed?.();
     if (mergedOptions.destroyOnClose) {
       injectData.reCreateModal?.();
     }
diff --git a/packages/@core/ui-kit/shadcn-ui/package.json b/packages/@core/ui-kit/shadcn-ui/package.json
index 989004675..11d2918f1 100644
--- a/packages/@core/ui-kit/shadcn-ui/package.json
+++ b/packages/@core/ui-kit/shadcn-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/shadcn-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "#main": "./dist/index.mjs",
   "#module": "./dist/index.mjs",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
index 01394caa7..bcb7a0c7e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
@@ -29,14 +29,25 @@ export type ValueType = boolean | number | string;
 
 export interface VbenButtonGroupProps
   extends Pick<VbenButtonProps, 'disabled'> {
+  /** 单选模式下允许清除选中 */
+  allowClear?: boolean;
+  /** 值改变前的回调 */
   beforeChange?: (
     value: ValueType,
     isChecked: boolean,
   ) => boolean | PromiseLike<boolean | undefined> | undefined;
+  /** 按钮样式 */
   btnClass?: any;
+  /** 按钮间隔距离 */
   gap?: number;
+  /** 多选模式下限制最多选择的数量。0表示不限制 */
+  maxCount?: number;
+  /** 是否允许多选 */
   multiple?: boolean;
+  /** 选项 */
   options?: { [key: string]: any; label: CustomRenderType; value: ValueType }[];
+  /** 显示图标 */
   showIcon?: boolean;
+  /** 尺寸 */
   size?: 'large' | 'middle' | 'small';
 }
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue b/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue
index 6e9378910..fd87396eb 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue
@@ -19,6 +19,8 @@ const props = withDefaults(defineProps<VbenButtonGroupProps>(), {
   multiple: false,
   showIcon: true,
   size: 'middle',
+  allowClear: false,
+  maxCount: 0,
 });
 const emit = defineEmits(['btnClick']);
 const btnDefaultProps = computed(() => {
@@ -82,12 +84,22 @@ async function onBtnClick(value: ValueType) {
     if (innerValue.value.includes(value)) {
       innerValue.value = innerValue.value.filter((item) => item !== value);
     } else {
+      if (props.maxCount > 0 && innerValue.value.length >= props.maxCount) {
+        innerValue.value = innerValue.value.slice(0, props.maxCount - 1);
+      }
       innerValue.value.push(value);
     }
     modelValue.value = innerValue.value;
   } else {
-    innerValue.value = [value];
-    modelValue.value = value;
+    if (props.allowClear && innerValue.value.includes(value)) {
+      innerValue.value = [];
+      modelValue.value = undefined;
+      emit('btnClick', undefined);
+      return;
+    } else {
+      innerValue.value = [value];
+      modelValue.value = value;
+    }
   }
   emit('btnClick', value);
 }
@@ -112,12 +124,18 @@ async function onBtnClick(value: ValueType) {
       @click="onBtnClick(btn.value)"
     >
       <div class="icon-wrapper" v-if="props.showIcon">
-        <LoaderCircle
-          class="animate-spin"
-          v-if="loadingValues.includes(btn.value)"
-        />
-        <CircleCheckBig v-else-if="innerValue.includes(btn.value)" />
-        <Circle v-else />
+        <slot
+          name="icon"
+          :loading="loadingValues.includes(btn.value)"
+          :checked="innerValue.includes(btn.value)"
+        >
+          <LoaderCircle
+            class="animate-spin"
+            v-if="loadingValues.includes(btn.value)"
+          />
+          <CircleCheckBig v-else-if="innerValue.includes(btn.value)" />
+          <Circle v-else />
+        </slot>
       </div>
       <slot name="option" :label="btn.label" :value="btn.value" :data="btn">
         <VbenRenderContent :content="btn.label" />
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
index c3d5c143c..522ada37b 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
@@ -80,7 +80,7 @@ defineExpose({
       v-bind="forwarded"
       :class="
         cn(
-          'z-popup bg-background w-full p-6 shadow-lg outline-none sm:rounded-xl',
+          'z-popup bg-background p-6 shadow-lg outline-none sm:rounded-xl',
           'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
           {
diff --git a/packages/@core/ui-kit/tabs-ui/package.json b/packages/@core/ui-kit/tabs-ui/package.json
index 86afff5b9..bc84b4d6a 100644
--- a/packages/@core/ui-kit/tabs-ui/package.json
+++ b/packages/@core/ui-kit/tabs-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/tabs-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/constants/package.json b/packages/constants/package.json
index 072d6b626..c71e11847 100644
--- a/packages/constants/package.json
+++ b/packages/constants/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/constants",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/effects/access/package.json b/packages/effects/access/package.json
index 51beaa83e..e4c39eb2a 100644
--- a/packages/effects/access/package.json
+++ b/packages/effects/access/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/access",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/effects/access/src/accessible.ts b/packages/effects/access/src/accessible.ts
index dd93d2e21..eb9081486 100644
--- a/packages/effects/access/src/accessible.ts
+++ b/packages/effects/access/src/accessible.ts
@@ -96,6 +96,15 @@ async function generateRoutes(
       );
       break;
     }
+    case 'mixed': {
+      const [frontend_resultRoutes, backend_resultRoutes] = await Promise.all([
+        generateRoutesByFrontend(routes, roles || [], forbiddenComponent),
+        generateRoutesByBackend(options),
+      ]);
+
+      resultRoutes = [...frontend_resultRoutes, ...backend_resultRoutes];
+      break;
+    }
   }
 
   /**
diff --git a/packages/effects/common-ui/package.json b/packages/effects/common-ui/package.json
index 6e6cc2bb4..e48539ae9 100644
--- a/packages/effects/common-ui/package.json
+++ b/packages/effects/common-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/common-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/effects/hooks/package.json b/packages/effects/hooks/package.json
index 25a5836ab..004f3c50e 100644
--- a/packages/effects/hooks/package.json
+++ b/packages/effects/hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/hooks",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/effects/layouts/package.json b/packages/effects/layouts/package.json
index f645da901..a8439a021 100644
--- a/packages/effects/layouts/package.json
+++ b/packages/effects/layouts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/layouts",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue b/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
index 8b5f499fb..8156324af 100644
--- a/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
+++ b/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
@@ -46,7 +46,11 @@ interface Props {
   /**
    * 菜单数组
    */
-  menus?: Array<{ handler: AnyFunction; icon?: Component; text: string }>;
+  menus?: Array<{
+    handler: AnyFunction;
+    icon?: Component | Function | string;
+    text: string;
+  }>;
 
   /**
    * 标签文本
diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
index c9490b638..f3eb6735a 100644
--- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
+++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -59,6 +59,7 @@ const FORM_SLOT_PREFIX = 'form-';
 
 const TOOLBAR_ACTIONS = 'toolbar-actions';
 const TOOLBAR_TOOLS = 'toolbar-tools';
+const TABLE_TITLE = 'table-title';
 
 const gridRef = useTemplateRef<VxeGridInstance>('gridRef');
 
@@ -129,7 +130,7 @@ const [Form, formApi] = useTableForm({
 });
 
 const showTableTitle = computed(() => {
-  return !!slots.tableTitle?.() || tableTitle.value;
+  return !!slots[TABLE_TITLE]?.() || tableTitle.value;
 });
 
 const showToolbar = computed(() => {
@@ -277,6 +278,15 @@ const delegatedFormSlots = computed(() => {
   return resultSlots.map((key) => key.replace(FORM_SLOT_PREFIX, ''));
 });
 
+const showDefaultEmpty = computed(() => {
+  // 检查是否有原生的 VXE Table 空状态配置
+  const hasEmptyText = options.value.emptyText !== undefined;
+  const hasEmptyRender = options.value.emptyRender !== undefined;
+
+  // 如果有原生配置，就不显示默认的空状态
+  return !hasEmptyText && !hasEmptyRender;
+});
+
 async function init() {
   await nextTick();
   const globalGridConfig = VxeUI?.getConfig()?.grid ?? {};
@@ -458,7 +468,7 @@ onUnmounted(() => {
         </slot>
       </template>
       <!-- 统一控状态 -->
-      <template #empty>
+      <template v-if="showDefaultEmpty" #empty>
         <slot name="empty">
           <EmptyIcon class="mx-auto" />
           <div class="mt-2">{{ $t('common.noData') }}</div>
diff --git a/packages/effects/request/package.json b/packages/effects/request/package.json
index 57e5c20ec..527f6d904 100644
--- a/packages/effects/request/package.json
+++ b/packages/effects/request/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/request",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/icons/package.json b/packages/icons/package.json
index d7fbc7d43..858383947 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/icons",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/locales/package.json b/packages/locales/package.json
index 6ab5ed5e3..5e92de548 100644
--- a/packages/locales/package.json
+++ b/packages/locales/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/locales",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/preferences/package.json b/packages/preferences/package.json
index c650bcea7..de276c726 100644
--- a/packages/preferences/package.json
+++ b/packages/preferences/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/preferences",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/stores/package.json b/packages/stores/package.json
index f6f9518ba..c9860b59c 100644
--- a/packages/stores/package.json
+++ b/packages/stores/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/stores",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 7eada0dc8..127bd4d58 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/styles",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/types/package.json b/packages/types/package.json
index b74ca47ec..2fa047d84 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/types",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 4d135be39..38a6ca199 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/utils",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/playground/package.json b/playground/package.json
index 9446f38be..8bfd17d51 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/playground",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/playground/src/router/guard.ts b/playground/src/router/guard.ts
index 3bbe8dcae..514bd2eb6 100644
--- a/playground/src/router/guard.ts
+++ b/playground/src/router/guard.ts
@@ -105,11 +105,16 @@ function setupAccessGuard(router: Router) {
     accessStore.setAccessMenus(accessibleMenus);
     accessStore.setAccessRoutes(accessibleRoutes);
     accessStore.setIsAccessChecked(true);
-    const redirectPath = (from.query.redirect ??
-      (to.path === preferences.app.defaultHomePath
-        ? userInfo.homePath || preferences.app.defaultHomePath
-        : to.fullPath)) as string;
-
+    let redirectPath: string;
+    if (from.query.redirect) {
+      redirectPath = from.query.redirect as string;
+    } else if (to.path === preferences.app.defaultHomePath) {
+      redirectPath = preferences.app.defaultHomePath;
+    } else if (userInfo.homePath && to.path === userInfo.homePath) {
+      redirectPath = userInfo.homePath;
+    } else {
+      redirectPath = to.fullPath;
+    }
     return {
       ...router.resolve(decodeURIComponent(redirectPath)),
       replace: true,
diff --git a/playground/src/views/examples/button-group/index.vue b/playground/src/views/examples/button-group/index.vue
index 2bc350c81..23861da40 100644
--- a/playground/src/views/examples/button-group/index.vue
+++ b/playground/src/views/examples/button-group/index.vue
@@ -9,6 +9,7 @@ import {
   VbenButtonGroup,
   VbenCheckButtonGroup,
 } from '@vben/common-ui';
+import { LoaderCircle, Square, SquareCheckBig } from '@vben/icons';
 
 import { Button, Card, message } from 'ant-design-vue';
 
@@ -51,6 +52,7 @@ const compProps = reactive({
   gap: 0,
   showIcon: true,
   size: 'middle',
+  allowClear: false,
 } as Recordable<any>);
 
 const [Form] = useVbenForm({
@@ -63,6 +65,9 @@ const [Form] = useVbenForm({
       }
     });
   },
+  commonConfig: {
+    labelWidth: 150,
+  },
   schema: [
     {
       component: 'RadioGroup',
@@ -109,6 +114,20 @@ const [Form] = useVbenForm({
       fieldName: 'beforeChange',
       label: '前置回调',
     },
+    {
+      component: 'Switch',
+      defaultValue: false,
+      fieldName: 'allowClear',
+      label: '允许清除',
+      help: '单选时是否允许取消选中（值为undefined）',
+    },
+    {
+      component: 'InputNumber',
+      defaultValue: 0,
+      fieldName: 'maxCount',
+      label: '最大选中数量',
+      help: '多选时有效，0表示不限制',
+    },
   ],
   showDefaultActions: false,
   submitOnChange: true,
@@ -186,6 +205,21 @@ function onBtnClick(value: any) {
           v-bind="compProps"
         />
       </div>
+      <p class="mt-4">自定义图标{{ checkValue }}</p>
+      <div class="mt-2 flex flex-col gap-2">
+        <VbenCheckButtonGroup
+          v-model="checkValue"
+          multiple
+          :options="options"
+          v-bind="compProps"
+        >
+          <template #icon="{ loading, checked }">
+            <LoaderCircle class="animate-spin" v-if="loading" />
+            <SquareCheckBig v-else-if="checked" />
+            <Square v-else />
+          </template>
+        </VbenCheckButtonGroup>
+      </div>
     </Card>
 
     <Card title="设置" class="mt-4">
diff --git a/scripts/turbo-run/package.json b/scripts/turbo-run/package.json
index 83832d81b..4639c873e 100644
--- a/scripts/turbo-run/package.json
+++ b/scripts/turbo-run/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/turbo-run",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "license": "MIT",
   "type": "module",