diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index c2237dda6..dd8b2435c 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -61,6 +61,7 @@
     "vue": "catalog:",
     "vue-dompurify-html": "catalog:",
     "vue-router": "catalog:",
-    "vue3-signature": "catalog:"
+    "vue3-signature": "catalog:",
+    "vuedraggable": "catalog:"
   }
 }
diff --git a/apps/web-antd/public/wx-xingyu.png b/apps/web-antd/public/wx-xingyu.png
index 5e4b6017d..da2e45a34 100644
Binary files a/apps/web-antd/public/wx-xingyu.png and b/apps/web-antd/public/wx-xingyu.png differ
diff --git a/apps/web-antd/src/api/ai/mindmap/index.ts b/apps/web-antd/src/api/ai/mindmap/index.ts
index 69e437341..192b9950f 100644
--- a/apps/web-antd/src/api/ai/mindmap/index.ts
+++ b/apps/web-antd/src/api/ai/mindmap/index.ts
@@ -6,6 +6,7 @@ import { requestClient } from '#/api/request';
 
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
 const accessStore = useAccessStore();
+
 export namespace AiMindmapApi {
   // AI 思维导图
   export interface MindMap {
@@ -19,7 +20,7 @@ export namespace AiMindmapApi {
   }
 
   // AI 思维导图生成
-  export interface AiMindMapGenerateReq {
+  export interface AiMindMapGenerateReqVO {
     prompt: string;
   }
 }
@@ -32,7 +33,7 @@ export function generateMindMap({
   ctrl,
 }: {
   ctrl: AbortController;
-  data: AiMindmapApi.AiMindMapGenerateReq;
+  data: AiMindmapApi.AiMindMapGenerateReqVO;
   onClose?: (...args: any[]) => void;
   onError?: (...args: any[]) => void;
   onMessage?: (res: any) => void;
@@ -53,12 +54,12 @@ export function generateMindMap({
   });
 }
 
-// 查询思维导图分页
+/** 查询思维导图分页 */
 export function getMindMapPage(params: any) {
   return requestClient.get(`/ai/mind-map/page`, { params });
 }
 
-// 删除思维导图
+/** 删除思维导图 */
 export function deleteMindMap(id: number) {
   return requestClient.delete(`/ai/mind-map/delete?id=${id}`);
 }
diff --git a/apps/web-antd/src/api/ai/model/apiKey/index.ts b/apps/web-antd/src/api/ai/model/apiKey/index.ts
index 80dcbec1a..2ffc842d8 100644
--- a/apps/web-antd/src/api/ai/model/apiKey/index.ts
+++ b/apps/web-antd/src/api/ai/model/apiKey/index.ts
@@ -13,7 +13,7 @@ export namespace AiModelApiKeyApi {
   }
 }
 
-// 查询 API 密钥分页
+/** 查询 API 密钥分页 */
 export function getApiKeyPage(params: PageParam) {
   return requestClient.get<PageResult<AiModelApiKeyApi.ApiKey>>(
     '/ai/api-key/page',
@@ -21,28 +21,29 @@ export function getApiKeyPage(params: PageParam) {
   );
 }
 
-// 获得 API 密钥列表
+/** 获得 API 密钥列表 */
 export function getApiKeySimpleList() {
   return requestClient.get<AiModelApiKeyApi.ApiKey[]>(
     '/ai/api-key/simple-list',
   );
 }
 
-// 查询 API 密钥详情
+/** 查询 API 密钥详情 */
 export function getApiKey(id: number) {
   return requestClient.get<AiModelApiKeyApi.ApiKey>(`/ai/api-key/get?id=${id}`);
 }
-// 新增 API 密钥
+
+/** 新增 API 密钥 */
 export function createApiKey(data: AiModelApiKeyApi.ApiKey) {
   return requestClient.post('/ai/api-key/create', data);
 }
 
-// 修改 API 密钥
+/** 修改 API 密钥 */
 export function updateApiKey(data: AiModelApiKeyApi.ApiKey) {
   return requestClient.put('/ai/api-key/update', data);
 }
 
-// 删除 API 密钥
+/** 删除 API 密钥 */
 export function deleteApiKey(id: number) {
   return requestClient.delete(`/ai/api-key/delete?id=${id}`);
 }
diff --git a/apps/web-antd/src/api/ai/model/chatRole/index.ts b/apps/web-antd/src/api/ai/model/chatRole/index.ts
index d52dbfee5..266ca3474 100644
--- a/apps/web-antd/src/api/ai/model/chatRole/index.ts
+++ b/apps/web-antd/src/api/ai/model/chatRole/index.ts
@@ -20,7 +20,7 @@ export namespace AiModelChatRoleApi {
   }
 
   // AI 聊天角色 分页请求
-  export interface ChatRolePageReq {
+  export interface ChatRolePageReqVO {
     name?: string; // 角色名称
     category?: string; // 角色类别
     publicStatus: boolean; // 是否公开
@@ -29,7 +29,7 @@ export namespace AiModelChatRoleApi {
   }
 }
 
-// 查询聊天角色分页
+/** 查询聊天角色分页 */
 export function getChatRolePage(params: PageParam) {
   return requestClient.get<PageResult<AiModelChatRoleApi.ChatRole>>(
     '/ai/chat-role/page',
@@ -37,49 +37,49 @@ export function getChatRolePage(params: PageParam) {
   );
 }
 
-// 查询聊天角色详情
+/** 查询聊天角色详情 */
 export function getChatRole(id: number) {
   return requestClient.get<AiModelChatRoleApi.ChatRole>(
     `/ai/chat-role/get?id=${id}`,
   );
 }
-// 新增聊天角色
+
+/** 新增聊天角色 */
 export function createChatRole(data: AiModelChatRoleApi.ChatRole) {
   return requestClient.post('/ai/chat-role/create', data);
 }
 
-// 修改聊天角色
+/** 修改聊天角色 */
 export function updateChatRole(data: AiModelChatRoleApi.ChatRole) {
   return requestClient.put('/ai/chat-role/update', data);
 }
 
-// 删除聊天角色
+/** 删除聊天角色 */
 export function deleteChatRole(id: number) {
   return requestClient.delete(`/ai/chat-role/delete?id=${id}`);
 }
 
-// ======= chat 聊天
-// 获取 my role
-export function getMyPage(params: AiModelChatRoleApi.ChatRolePageReq) {
+/** 获取 my role */
+export function getMyPage(params: AiModelChatRoleApi.ChatRolePageReqVO) {
   return requestClient.get('/ai/chat-role/my-page', { params });
 }
 
-// 获取角色分类
+/** 获取角色分类 */
 export function getCategoryList() {
   return requestClient.get('/ai/chat-role/category-list');
 }
 
-// 创建角色
+/** 创建角色 */
 export function createMy(data: AiModelChatRoleApi.ChatRole) {
   return requestClient.post('/ai/chat-role/create-my', data);
 }
 
-// 更新角色
+/** 更新角色 */
 export function updateMy(data: AiModelChatRoleApi.ChatRole) {
   return requestClient.put('/ai/chat-role/update', data);
 }
 
-// 删除角色 my
+/** 删除角色 my */
 export function deleteMy(id: number) {
   return requestClient.delete(`/ai/chat-role/delete-my?id=${id}`);
 }
diff --git a/apps/web-antd/src/api/ai/model/model/index.ts b/apps/web-antd/src/api/ai/model/model/index.ts
index deafcee82..364327cc1 100644
--- a/apps/web-antd/src/api/ai/model/model/index.ts
+++ b/apps/web-antd/src/api/ai/model/model/index.ts
@@ -18,7 +18,7 @@ export namespace AiModelModelApi {
   }
 }
 
-// 查询模型分页
+/** 查询模型分页 */
 export function getModelPage(params: PageParam) {
   return requestClient.get<PageResult<AiModelModelApi.Model>>(
     '/ai/model/page',
@@ -26,7 +26,7 @@ export function getModelPage(params: PageParam) {
   );
 }
 
-// 获得模型列表
+/** 获得模型列表 */
 export function getModelSimpleList(type?: number) {
   return requestClient.get<AiModelModelApi.Model[]>('/ai/model/simple-list', {
     params: {
@@ -35,21 +35,22 @@ export function getModelSimpleList(type?: number) {
   });
 }
 
-// 查询模型详情
+/** 查询模型详情 */
 export function getModel(id: number) {
   return requestClient.get<AiModelModelApi.Model>(`/ai/model/get?id=${id}`);
 }
-// 新增模型
+
+/** 新增模型 */
 export function createModel(data: AiModelModelApi.Model) {
   return requestClient.post('/ai/model/create', data);
 }
 
-// 修改模型
+/** 修改模型 */
 export function updateModel(data: AiModelModelApi.Model) {
   return requestClient.put('/ai/model/update', data);
 }
 
-// 删除模型
+/** 删除模型 */
 export function deleteModel(id: number) {
   return requestClient.delete(`/ai/model/delete?id=${id}`);
 }
diff --git a/apps/web-antd/src/api/ai/model/tool/index.ts b/apps/web-antd/src/api/ai/model/tool/index.ts
index 6fac9d74b..03abc4e7b 100644
--- a/apps/web-antd/src/api/ai/model/tool/index.ts
+++ b/apps/web-antd/src/api/ai/model/tool/index.ts
@@ -11,33 +11,34 @@ export namespace AiModelToolApi {
   }
 }
 
-// 查询工具分页
+/** 查询工具分页 */
 export function getToolPage(params: PageParam) {
   return requestClient.get<PageResult<AiModelToolApi.Tool>>('/ai/tool/page', {
     params,
   });
 }
 
-// 查询工具详情
+/** 查询工具详情 */
 export function getTool(id: number) {
   return requestClient.get<AiModelToolApi.Tool>(`/ai/tool/get?id=${id}`);
 }
-// 新增工具
+
+/** 新增工具 */
 export function createTool(data: AiModelToolApi.Tool) {
   return requestClient.post('/ai/tool/create', data);
 }
 
-// 修改工具
+/** 修改工具 */
 export function updateTool(data: AiModelToolApi.Tool) {
   return requestClient.put('/ai/tool/update', data);
 }
 
-// 删除工具
+/** 删除工具 */
 export function deleteTool(id: number) {
   return requestClient.delete(`/ai/tool/delete?id=${id}`);
 }
 
-// 获取工具简单列表
+/** 获取工具简单列表 */
 export function getToolSimpleList() {
   return requestClient.get<AiModelToolApi.Tool[]>('/ai/tool/simple-list');
 }
diff --git a/apps/web-antd/src/api/ai/write/index.ts b/apps/web-antd/src/api/ai/write/index.ts
index 4ca1fc7aa..a9863d27d 100644
--- a/apps/web-antd/src/api/ai/write/index.ts
+++ b/apps/web-antd/src/api/ai/write/index.ts
@@ -9,8 +9,10 @@ import { requestClient } from '#/api/request';
 
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
 const accessStore = useAccessStore();
+
 export namespace AiWriteApi {
   export interface Write {
+    id?: number;
     type: AiWriteTypeEnum.REPLY | AiWriteTypeEnum.WRITING; // 1:撰写 2:回复
     prompt: string; // 写作内容提示 1。撰写 2回复
     originalContent: string; // 原文
@@ -26,29 +28,12 @@ export namespace AiWriteApi {
     createTime?: Date; // 创建时间
   }
 
-  export interface AiWritePageReq extends PageParam {
+  export interface AiWritePageReqVO extends PageParam {
     userId?: number; // 用户编号
     type?: AiWriteTypeEnum; //  写作类型
     platform?: string; // 平台
     createTime?: [string, string]; // 创建时间
   }
-
-  export interface AiWriteResp {
-    id: number;
-    userId: number;
-    type: number;
-    platform: string;
-    model: string;
-    prompt: string;
-    generatedContent: string;
-    originalContent: string;
-    length: number;
-    format: number;
-    tone: number;
-    language: number;
-    errorMessage: string;
-    createTime: string;
-  }
 }
 
 export function writeStream({
@@ -80,15 +65,14 @@ export function writeStream({
   });
 }
 
-// 获取写作列表
-export function getWritePage(params: any) {
-  return requestClient.get<PageResult<AiWriteApi.AiWritePageReq>>(
-    `/ai/write/page`,
-    { params },
-  );
+/** 获取写作列表 */
+export function getWritePage(params: AiWriteApi.AiWritePageReqVO) {
+  return requestClient.get<PageResult<AiWriteApi.Write>>(`/ai/write/page`, {
+    params,
+  });
 }
 
-// 删除音乐
+/** 删除写作记录 */
 export function deleteWrite(id: number) {
   return requestClient.delete(`/ai/write/delete`, { params: { id } });
 }
diff --git a/apps/web-antd/src/api/bpm/category/index.ts b/apps/web-antd/src/api/bpm/category/index.ts
index d8b5a9b3d..64cf36cb4 100644
--- a/apps/web-antd/src/api/bpm/category/index.ts
+++ b/apps/web-antd/src/api/bpm/category/index.ts
@@ -10,7 +10,7 @@ export namespace BpmCategoryApi {
     code: string;
     status: number;
     description?: string;
-    sort: number; // 分类排序
+    sort: number;
   }
 }
 
diff --git a/apps/web-antd/src/api/bpm/definition/index.ts b/apps/web-antd/src/api/bpm/definition/index.ts
index c7facf6ec..01f0fd2a5 100644
--- a/apps/web-antd/src/api/bpm/definition/index.ts
+++ b/apps/web-antd/src/api/bpm/definition/index.ts
@@ -1,23 +1,31 @@
 import type { PageParam, PageResult } from '@vben/request';
 
+import type { BpmModelApi } from '#/api/bpm/model';
+
 import { requestClient } from '#/api/request';
 
 export namespace BpmProcessDefinitionApi {
   /** 流程定义 */
   export interface ProcessDefinition {
     id: string;
+    key?: string;
     version: number;
     name: string;
+    category: string;
     description: string;
     deploymentTime: number;
     suspensionState: number;
     modelType: number;
     modelId: string;
     formType?: number;
+    formId?: number;
+    formName?: string;
+    formCustomCreatePath?: string;
     bpmnXml?: string;
     simpleModel?: string;
     formFields?: string[];
     icon?: string;
+    startUsers?: BpmModelApi.UserInfo[];
   }
 }
 
diff --git a/apps/web-antd/src/api/bpm/form/index.ts b/apps/web-antd/src/api/bpm/form/index.ts
index 0789071b2..99c1299e9 100644
--- a/apps/web-antd/src/api/bpm/form/index.ts
+++ b/apps/web-antd/src/api/bpm/form/index.ts
@@ -5,7 +5,7 @@ import { requestClient } from '#/api/request';
 export namespace BpmFormApi {
   /** 流程表单 */
   export interface Form {
-    id?: number | undefined;
+    id?: number;
     name: string;
     conf: string;
     fields: string[];
@@ -23,7 +23,7 @@ export async function getFormPage(params: PageParam) {
 }
 
 /** 获取表单详情 */
-export async function getFormDetail(id: number) {
+export async function getForm(id: number) {
   return requestClient.get<BpmFormApi.Form>(`/bpm/form/get?id=${id}`);
 }
 
diff --git a/apps/web-antd/src/api/bpm/model/index.ts b/apps/web-antd/src/api/bpm/model/index.ts
index 443b85c5e..cd2afbc84 100644
--- a/apps/web-antd/src/api/bpm/model/index.ts
+++ b/apps/web-antd/src/api/bpm/model/index.ts
@@ -52,7 +52,7 @@ export interface ModelCategoryInfo {
 }
 
 /** 获取流程模型列表 */
-export async function getModelList(name: string | undefined) {
+export async function getModelList(name?: string) {
   return requestClient.get<BpmModelApi.Model[]>('/bpm/model/list', {
     params: { name },
   });
diff --git a/apps/web-antd/src/api/bpm/processInstance/index.ts b/apps/web-antd/src/api/bpm/processInstance/index.ts
index 32e0075b9..ecbc03855 100644
--- a/apps/web-antd/src/api/bpm/processInstance/index.ts
+++ b/apps/web-antd/src/api/bpm/processInstance/index.ts
@@ -15,6 +15,7 @@ export namespace BpmProcessInstanceApi {
   export interface Task {
     id: number;
     name: string;
+    assigneeUser?: User;
   }
 
   export interface User {
@@ -51,6 +52,7 @@ export namespace BpmProcessInstanceApi {
   export interface ProcessInstance {
     businessKey: string;
     category: string;
+    categoryName?: string;
     createTime: string;
     endTime: string;
     fields: string[];
@@ -64,6 +66,10 @@ export namespace BpmProcessInstanceApi {
     startTime?: Date;
     startUser?: User;
     status: number;
+    summary?: {
+      key: string;
+      value: string;
+    }[];
     tasks?: BpmProcessInstanceApi.Task[];
   }
 
diff --git a/apps/web-antd/src/api/bpm/task/index.ts b/apps/web-antd/src/api/bpm/task/index.ts
index 1ab011925..63e1af886 100644
--- a/apps/web-antd/src/api/bpm/task/index.ts
+++ b/apps/web-antd/src/api/bpm/task/index.ts
@@ -13,6 +13,7 @@ export namespace BpmTaskApi {
     status: number; // 监听器状态
     event: string; // 监听事件
     valueType: string; // 监听器值类型
+    processInstance?: BpmProcessInstanceApi.ProcessInstance; // 流程实例
   }
 
   // 流程任务
diff --git a/apps/web-antd/src/api/erp/finance/payment/index.ts b/apps/web-antd/src/api/erp/finance/payment/index.ts
index c988b1286..502811665 100644
--- a/apps/web-antd/src/api/erp/finance/payment/index.ts
+++ b/apps/web-antd/src/api/erp/finance/payment/index.ts
@@ -20,9 +20,9 @@ export namespace ErpFinancePaymentApi {
   export interface FinancePayment {
     id?: number; // 付款单编号
     no: string; // 付款单号
-    supplierId: number; // 供应商编号
+    supplierId?: number; // 供应商编号
     supplierName?: string; // 供应商名称
-    paymentTime: Date; // 付款时间
+    paymentTime?: Date; // 付款时间
     totalPrice: number; // 合计金额，单位：元
     discountPrice: number; // 优惠金额
     paymentPrice: number; // 实际付款金额
diff --git a/apps/web-antd/src/api/iot/ota/task/record/index.ts b/apps/web-antd/src/api/iot/ota/task/record/index.ts
index 3ad7b0990..2d66a422f 100644
--- a/apps/web-antd/src/api/iot/ota/task/record/index.ts
+++ b/apps/web-antd/src/api/iot/ota/task/record/index.ts
@@ -22,6 +22,7 @@ export namespace IoTOtaTaskRecordApi {
   }
 }
 
+// TODO @AI：这里应该拿到 IoTOtaTaskRecordApi 里
 /** IoT OTA 升级任务记录 */
 export interface OtaTaskRecord {
   id?: number;
@@ -95,7 +96,7 @@ export function getOtaTaskRecordStatusStatistics(
   taskId?: number,
 ) {
   return requestClient.get<Record<string, number>>(
-    '/iot/ota/task/record/status-statistics',
+    '/iot/ota/task/record/get-status-statistics',
     { params: { firmwareId, taskId } },
   );
 }
diff --git a/apps/web-antd/src/api/mall/promotion/diy/page.ts b/apps/web-antd/src/api/mall/promotion/diy/page.ts
index d332cc09e..afdface5a 100644
--- a/apps/web-antd/src/api/mall/promotion/diy/page.ts
+++ b/apps/web-antd/src/api/mall/promotion/diy/page.ts
@@ -5,12 +5,18 @@ import { requestClient } from '#/api/request';
 export namespace MallDiyPageApi {
   /** 装修页面 */
   export interface DiyPage {
-    id?: number; // 页面编号
-    templateId?: number; // 模板编号
-    name: string; // 页面名称
-    remark: string; // 备注
-    previewPicUrls: string[]; // 预览图片地址数组
-    property: string; // 页面属性
+    /** 页面编号 */
+    id?: number;
+    /** 模板编号 */
+    templateId?: number;
+    /** 页面名称 */
+    name: string;
+    /** 备注 */
+    remark: string;
+    /** 预览图片地址数组 */
+    previewPicUrls: string[];
+    /** 页面属性 */
+    property: string;
   }
 }
 
@@ -46,7 +52,7 @@ export function deleteDiyPage(id: number) {
 
 /** 获得装修页面属性 */
 export function getDiyPageProperty(id: number) {
-  return requestClient.get<string>(`/promotion/diy-page/get-property?id=${id}`);
+  return requestClient.get(`/promotion/diy-page/get-property?id=${id}`);
 }
 
 /** 更新装修页面属性 */
diff --git a/apps/web-antd/src/api/mall/promotion/diy/template.ts b/apps/web-antd/src/api/mall/promotion/diy/template.ts
index 9b7596e85..f7d82d352 100644
--- a/apps/web-antd/src/api/mall/promotion/diy/template.ts
+++ b/apps/web-antd/src/api/mall/promotion/diy/template.ts
@@ -7,18 +7,26 @@ import { requestClient } from '#/api/request';
 export namespace MallDiyTemplateApi {
   /** 装修模板 */
   export interface DiyTemplate {
-    id?: number; // 模板编号
-    name: string; // 模板名称
-    used: boolean; // 是否使用
-    usedTime?: Date; // 使用时间
-    remark: string; // 备注
-    previewPicUrls: string[]; // 预览图片地址数组
-    property: string; // 模板属性
+    /** 模板编号 */
+    id?: number;
+    /** 模板名称 */
+    name: string;
+    /** 是否使用 */
+    used: boolean;
+    /** 使用时间 */
+    usedTime?: Date;
+    /** 备注 */
+    remark: string;
+    /** 预览图片地址数组 */
+    previewPicUrls: string[];
+    /** 模板属性 */
+    property: string;
   }
 
   /** 装修模板属性（包含页面列表） */
   export interface DiyTemplateProperty extends DiyTemplate {
-    pages: MallDiyPageApi.DiyPage[]; // 页面列表
+    /** 页面列表 */
+    pages: MallDiyPageApi.DiyPage[];
   }
 }
 
diff --git a/apps/web-antd/src/api/mall/statistics/trade.ts b/apps/web-antd/src/api/mall/statistics/trade.ts
index 3f8d1cb82..17b20e709 100644
--- a/apps/web-antd/src/api/mall/statistics/trade.ts
+++ b/apps/web-antd/src/api/mall/statistics/trade.ts
@@ -76,31 +76,23 @@ export function getTradeStatisticsSummary() {
 }
 
 /** 获得交易状况统计 */
-export function getTradeStatisticsAnalyse(
-  params: MallTradeStatisticsApi.TradeTrendReq,
-) {
+export function getTradeStatisticsAnalyse(params: any) {
   return requestClient.get<
     DataComparisonRespVO<MallTradeStatisticsApi.TradeTrendSummary>
-  >('/statistics/trade/analyse', { params: formatDateParam(params) });
+  >('/statistics/trade/analyse', { params });
 }
 
 /** 获得交易状况明细 */
-export function getTradeStatisticsList(
-  params: MallTradeStatisticsApi.TradeTrendReq,
-) {
+export function getTradeStatisticsList(params: any) {
   return requestClient.get<MallTradeStatisticsApi.TradeTrendSummary[]>(
     '/statistics/trade/list',
-    { params: formatDateParam(params) },
+    { params },
   );
 }
 
 /** 导出交易状况明细 */
-export function exportTradeStatisticsExcel(
-  params: MallTradeStatisticsApi.TradeTrendReq,
-) {
-  return requestClient.download('/statistics/trade/export-excel', {
-    params: formatDateParam(params),
-  });
+export function exportTradeStatisticsExcel(params: any) {
+  return requestClient.download('/statistics/trade/export-excel', { params });
 }
 
 /** 获得交易订单数量 */
diff --git a/apps/web-antd/src/api/mp/statistics/index.ts b/apps/web-antd/src/api/mp/statistics/index.ts
index e36073820..47200ff2b 100644
--- a/apps/web-antd/src/api/mp/statistics/index.ts
+++ b/apps/web-antd/src/api/mp/statistics/index.ts
@@ -1,13 +1,10 @@
-import type { PageParam } from '@vben/request';
-
 import { requestClient } from '#/api/request';
 
 export namespace MpStatisticsApi {
   /** 统计查询参数 */
-  export interface StatisticsQuery extends PageParam {
+  export interface StatisticsQuery {
     accountId: number;
-    beginDate: string;
-    endDate: string;
+    date: Date[];
   }
 
   /** 消息发送概况数据 */
diff --git a/apps/web-antd/src/assets/imgs/diy/app-nav-bar-mp.png b/apps/web-antd/src/assets/imgs/diy/app-nav-bar-mp.png
new file mode 100644
index 000000000..c982804c7
Binary files /dev/null and b/apps/web-antd/src/assets/imgs/diy/app-nav-bar-mp.png differ
diff --git a/apps/web-antd/src/assets/imgs/diy/statusBar.png b/apps/web-antd/src/assets/imgs/diy/statusBar.png
new file mode 100644
index 000000000..b85562e42
Binary files /dev/null and b/apps/web-antd/src/assets/imgs/diy/statusBar.png differ
diff --git a/apps/web-antd/src/bootstrap.ts b/apps/web-antd/src/bootstrap.ts
index 0f1ab09fb..be5a5eda7 100644
--- a/apps/web-antd/src/bootstrap.ts
+++ b/apps/web-antd/src/bootstrap.ts
@@ -35,6 +35,7 @@ async function bootstrap(namespace: string) {
   // });
 
   const app = createApp(App);
+  app.use(VueDOMPurifyHTML);
 
   // 注册v-loading指令
   registerLoadingDirective(app, {
@@ -61,10 +62,6 @@ async function bootstrap(namespace: string) {
   // formCreate
   setupFormCreate(app);
 
-  // vue-dompurify-html
-  // TODO @dhb52：VueDOMPurifyHTML 是不是不用引入哈？
-  app.use(VueDOMPurifyHTML);
-
   // 配置Motion插件
   const { MotionPlugin } = await import('@vben/plugins/motion');
   app.use(MotionPlugin);
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/index.ts b/apps/web-antd/src/components/bpmn-process-designer/package/index.ts
deleted file mode 100644
index f5e6b117f..000000000
--- a/apps/web-antd/src/components/bpmn-process-designer/package/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import './theme/index.scss';
-import 'bpmn-js/dist/assets/diagram-js.css';
-import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
-import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
-import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
-// TODO @puhui999：样式问题：设计器那，位置不太对；
-
-export { default as MyProcessDesigner } from './designer';
-// TODO @puhui999：流程发起时，预览相关的，需要使用；
-export { default as MyProcessViewer } from './designer/index2';
-export { default as MyProcessPenal } from './penal';
-
-// TODO @puhui999：【有个迁移的打印】【新增】流程打印，由 [@Lesan](https://gitee.com/LesanOuO) 贡献 [#816](https://gitee.com/yudaocode/yudao-ui-admin-vue3/pulls/816/)、[#1418](https://gitee.com/zhijiantianya/ruoyi-vue-pro/pulls/1418/)、[#817](https://gitee.com/yudaocode/yudao-ui-admin-vue3/pulls/817/)、[#1419](https://gitee.com/zhijiantianya/ruoyi-vue-pro/pulls/1419/)、[#1424](https://gitee.com/zhijiantianya/ruoyi-vue-pro/pulls/1424)、[#819](https://gitee.com/yudaocode/yudao-ui-admin-vue3/pulls/819)、[#821](https://gitee.com/yudaocode/yudao-ui-admin-vue3/pulls/821/)
diff --git a/apps/web-antd/src/components/description/description.vue b/apps/web-antd/src/components/description/description.vue
index c3f54695f..3d341596e 100644
--- a/apps/web-antd/src/components/description/description.vue
+++ b/apps/web-antd/src/components/description/description.vue
@@ -1,82 +1,197 @@
 <script lang="tsx">
-import type { DescriptionsProps } from 'ant-design-vue';
+import type { DescriptionsProps } from 'ant-design-vue/es/descriptions';
 
-import type { PropType } from 'vue';
+import type { CSSProperties, PropType, Slots } from 'vue';
 
-import type { DescriptionItemSchema, DescriptionsOptions } from './typing';
+import type { DescriptionItemSchema, DescriptionProps } from './typing';
 
-import { defineComponent } from 'vue';
+import { computed, defineComponent, ref, unref, useAttrs } from 'vue';
 
-import { get } from '@vben/utils';
+import { get, getNestedValue, isFunction } from '@vben/utils';
 
-import { Descriptions, DescriptionsItem } from 'ant-design-vue';
+import { Card, Descriptions } from 'ant-design-vue';
 
-/** 对 Descriptions 进行二次封装 */
-const Description = defineComponent({
-  name: 'Descriptions',
-  props: {
-    data: {
-      type: Object as PropType<Record<string, any>>,
-      default: () => ({}),
-    },
-    schema: {
-      type: Array as PropType<DescriptionItemSchema[]>,
-      default: () => [],
-    },
-    // Descriptions 原生 props
-    componentProps: {
-      type: Object as PropType<DescriptionsProps>,
-      default: () => ({}),
+const props = {
+  bordered: { default: true, type: Boolean },
+  column: {
+    default: () => {
+      return { lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4 };
     },
+    type: [Number, Object],
   },
+  data: { type: Object },
+  schema: {
+    default: () => [],
+    type: Array as PropType<DescriptionItemSchema[]>,
+  },
+  size: {
+    default: 'small',
+    type: String,
+    validator: (v: string) =>
+      ['default', 'middle', 'small', undefined].includes(v),
+  },
+  title: { default: '', type: String },
+  useCard: { default: true, type: Boolean },
+};
 
-  setup(props: DescriptionsOptions) {
-    // TODO @xingyu：每个 field 的 slot 的考虑
-    // TODO @xingyu：from 5.0：extra: () => getSlot(slots, 'extra')
-    /** 过滤掉不需要展示的 */
-    const shouldShowItem = (item: DescriptionItemSchema) => {
-      if (item.hidden === undefined) return true;
-      return typeof item.hidden === 'function'
-        ? !item.hidden(props.data)
-        : !item.hidden;
-    };
-    /** 渲染内容 */
-    const renderContent = (item: DescriptionItemSchema) => {
-      if (item.content) {
-        return typeof item.content === 'function'
-          ? item.content(props.data)
-          : item.content;
+function getSlot(slots: Slots, slot: string, data?: any) {
+  if (!slots || !Reflect.has(slots, slot)) {
+    return null;
+  }
+  if (!isFunction(slots[slot])) {
+    console.error(`${slot} is not a function!`);
+    return null;
+  }
+  const slotFn = slots[slot];
+  if (!slotFn) return null;
+  return slotFn({ data });
+}
+
+export default defineComponent({
+  name: 'Description',
+  props,
+  setup(props, { slots }) {
+    const propsRef = ref<null | Partial<DescriptionProps>>(null);
+
+    const prefixCls = 'description';
+    const attrs = useAttrs();
+
+    // Custom title component: get title
+    const getMergeProps = computed(() => {
+      return {
+        ...props,
+        ...(unref(propsRef) as any),
+      } as DescriptionProps;
+    });
+
+    const getProps = computed(() => {
+      const opt = {
+        ...unref(getMergeProps),
+        title: undefined,
+      };
+      return opt as DescriptionProps;
+    });
+
+    const useWrapper = computed(() => !!unref(getMergeProps).title);
+
+    const getDescriptionsProps = computed(() => {
+      return { ...unref(attrs), ...unref(getProps) } as DescriptionsProps;
+    });
+
+    // 防止换行
+    function renderLabel({
+      label,
+      labelMinWidth,
+      labelStyle,
+    }: DescriptionItemSchema) {
+      if (!labelStyle && !labelMinWidth) {
+        return label;
       }
-      return item.field ? get(props.data, item.field) : null;
-    };
 
-    return () => (
-      <Descriptions
-        {...props}
-        bordered={props.componentProps?.bordered}
-        colon={props.componentProps?.colon}
-        column={props.componentProps?.column}
-        extra={props.componentProps?.extra}
-        layout={props.componentProps?.layout}
-        size={props.componentProps?.size}
-        title={props.componentProps?.title}
-      >
-        {props.schema?.filter(shouldShowItem).map((item) => (
-          <DescriptionsItem
-            contentStyle={item.contentStyle}
-            key={item.field || String(item.label)}
-            label={item.label}
-            labelStyle={item.labelStyle}
-            span={item.span}
-          >
-            {renderContent(item)}
-          </DescriptionsItem>
-        ))}
-      </Descriptions>
-    );
+      const labelStyles: CSSProperties = {
+        ...labelStyle,
+        minWidth: `${labelMinWidth}px `,
+      };
+      return <div style={labelStyles}>{label}</div>;
+    }
+
+    function renderItem() {
+      const { data, schema } = unref(getProps);
+      return unref(schema)
+        .map((item) => {
+          const { contentMinWidth, field, render, show, span } = item;
+
+          if (show && isFunction(show) && !show(data)) {
+            return null;
+          }
+
+          function getContent() {
+            const _data = unref(getProps)?.data;
+            if (!_data) {
+              return null;
+            }
+            const getField = field.includes('.')
+              ? (getNestedValue(_data, field) ?? get(_data, field))
+              : get(_data, field);
+            // if (
+            //   getField &&
+            //   !Object.prototype.hasOwnProperty.call(toRefs(_data), field)
+            // ) {
+            //   return isFunction(render) ? render('', _data) : (getField ?? '');
+            // }
+            return isFunction(render)
+              ? render(getField, _data)
+              : (getField ?? '');
+          }
+
+          const width = contentMinWidth;
+          return (
+            <Descriptions.Item
+              key={field}
+              label={renderLabel(item)}
+              span={span}
+            >
+              {() => {
+                if (item.slot) {
+                  // TODO @xingyu：这里要 inline 掉么？
+                  const slotContent = getSlot(slots, item.slot, data);
+                  return slotContent;
+                }
+                if (!contentMinWidth) {
+                  return getContent();
+                }
+                const style: CSSProperties = {
+                  minWidth: `${width}px`,
+                };
+                return <div style={style}>{getContent()}</div>;
+              }}
+            </Descriptions.Item>
+          );
+        })
+        .filter((item) => !!item);
+    }
+
+    function renderDesc() {
+      return (
+        <Descriptions
+          class={`${prefixCls}`}
+          {...(unref(getDescriptionsProps) as any)}
+        >
+          {renderItem()}
+        </Descriptions>
+      );
+    }
+
+    function renderCard() {
+      const content = props.useCard ? renderDesc() : <div>{renderDesc()}</div>;
+      // Reduce the dom level
+      if (!props.useCard) {
+        return content;
+      }
+
+      const { title } = unref(getMergeProps);
+      const extraSlot = getSlot(slots, 'extra');
+
+      return (
+        <Card
+          bodyStyle={{ padding: '8px 0' }}
+          headStyle={{
+            padding: '8px 16px',
+            fontSize: '14px',
+            minHeight: '24px',
+          }}
+          style={{ margin: 0 }}
+          title={title}
+        >
+          {{
+            default: () => content,
+            extra: () => extraSlot && <div>{extraSlot}</div>,
+          }}
+        </Card>
+      );
+    }
+
+    return () => (unref(useWrapper) ? renderCard() : renderDesc());
   },
 });
-
-// TODO @xingyu：from 5.0：emits: ['register'] 事件
-export default Description;
 </script>
diff --git a/apps/web-antd/src/components/description/typing.ts b/apps/web-antd/src/components/description/typing.ts
index a0e997770..378f4a2ad 100644
--- a/apps/web-antd/src/components/description/typing.ts
+++ b/apps/web-antd/src/components/description/typing.ts
@@ -1,27 +1,56 @@
-import type { DescriptionsProps } from 'ant-design-vue';
+import type { DescriptionsProps } from 'ant-design-vue/es/descriptions';
+import type { JSX } from 'vue/jsx-runtime';
 
 import type { CSSProperties, VNode } from 'vue';
 
-// TODO @xingyu：【content】这个纠结下；1）vben2.0 是 render；https://doc.vvbin.cn/components/desc.html#usage 2）
-// TODO @xingyu：vben2.0 还有 sapn【done】、labelMinWidth、contentMinWidth
-// TODO @xingyu：【hidden】这个纠结下；1）vben2.0 是 show；
+import type { Recordable } from '@vben/types';
+
 export interface DescriptionItemSchema {
-  label: string | VNode; // 内容的描述
-  field?: string; // 对应 data 中的字段名
-  content?: ((data: any) => string | VNode) | string | VNode; // 自定义需要展示的内容，比如说 dict-tag
-  span?: number; // 包含列的数量
-  labelStyle?: CSSProperties; // 自定义标签样式
-  contentStyle?: CSSProperties; // 自定义内容样式
-  hidden?: ((data: any) => boolean) | boolean; // 是否显示
+  labelMinWidth?: number;
+  contentMinWidth?: number;
+  // 自定义标签样式
+  labelStyle?: CSSProperties;
+  // 对应 data 中的字段名
+  field: string;
+  // 内容的描述
+  label: JSX.Element | string | VNode;
+  // 包含列的数量
+  span?: number;
+  // 是否显示
+  show?: (...arg: any) => boolean;
+  // 插槽名称
+  slot?: string;
+  // 自定义需要展示的内容
+  render?: (
+    val: any,
+    data?: Recordable<any>,
+  ) => Element | JSX.Element | number | string | undefined | VNode;
 }
 
-// TODO @xingyu：vben2.0 还有 title【done】、bordered【done】d、useCollapse、collapseOptions
-// TODO @xingyu：from 5.0：bordered 默认为 true
-// TODO @xingyu：from 5.0：column 默认为 lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4
-// TODO @xingyu：from 5.0：size 默认为 small；有 'default', 'middle', 'small', undefined
-// TODO @xingyu：from 5.0：useCollapse 默认为 true
-export interface DescriptionsOptions {
-  data?: Record<string, any>; // 数据
-  schema?: DescriptionItemSchema[]; // 描述项配置
-  componentProps?: DescriptionsProps; // antd Descriptions 组件参数
+export interface DescriptionProps extends DescriptionsProps {
+  // 是否包含卡片组件
+  useCard?: boolean;
+  // 描述项配置
+  schema: DescriptionItemSchema[];
+  // 数据
+  data: Recordable<any>;
+  // 标题
+  title?: string;
+  // 是否包含边框
+  bordered?: boolean;
+  // 列数
+  column?:
+    | number
+    | {
+        lg: number;
+        md: number;
+        sm: number;
+        xl: number;
+        xs: number;
+        xxl: number;
+      };
+}
+
+export interface DescInstance {
+  setDescProps(descProps: Partial<DescriptionProps>): void;
 }
diff --git a/apps/web-antd/src/components/description/use-description.ts b/apps/web-antd/src/components/description/use-description.ts
index 7f99238bf..fd24920f0 100644
--- a/apps/web-antd/src/components/description/use-description.ts
+++ b/apps/web-antd/src/components/description/use-description.ts
@@ -1,71 +1,31 @@
-import type { DescriptionsOptions } from './typing';
+import type { Component } from 'vue';
 
-import { defineComponent, h, isReactive, reactive, watch } from 'vue';
+import type { DescInstance, DescriptionProps } from './typing';
+
+import { h, reactive } from 'vue';
 
 import Description from './description.vue';
 
-/** 描述列表 api 定义 */
-class DescriptionApi {
-  private state = reactive<Record<string, any>>({});
+export function useDescription(options?: Partial<DescriptionProps>) {
+  const propsState = reactive<Partial<DescriptionProps>>(options || {});
 
-  constructor(options: DescriptionsOptions) {
-    this.state = { ...options };
-  }
+  const api: DescInstance = {
+    setDescProps: (descProps: Partial<DescriptionProps>): void => {
+      Object.assign(propsState, descProps);
+    },
+  };
 
-  getState(): DescriptionsOptions {
-    return this.state as DescriptionsOptions;
-  }
-
-  // TODO @xingyu：【setState】纠结下：1）vben2.0 是 data https://doc.vvbin.cn/components/desc.html#usage；
-  setState(newState: Partial<DescriptionsOptions>) {
-    this.state = { ...this.state, ...newState };
-  }
-}
-
-export type ExtendedDescriptionApi = DescriptionApi;
-
-export function useDescription(options: DescriptionsOptions) {
-  const IS_REACTIVE = isReactive(options);
-  const api = new DescriptionApi(options);
-  // 扩展 API
-  const extendedApi: ExtendedDescriptionApi = api as never;
-  const Desc = defineComponent({
+  // 创建一个包装组件，将 propsState 合并到 props 中
+  const DescriptionWrapper: Component = {
     name: 'UseDescription',
     inheritAttrs: false,
-    setup(_, { attrs, slots }) {
-      // 合并props和attrs到state
-      api.setState({ ...attrs });
-
-      return () =>
-        h(
-          Description,
-          {
-            ...api.getState(),
-            ...attrs,
-          },
-          slots,
-        );
+    setup(_props, { attrs, slots }) {
+      return () => {
+        // @ts-ignore - 避免类型实例化过深
+        return h(Description, { ...propsState, ...attrs }, slots);
+      };
     },
-  });
+  };
 
-  // 响应式支持
-  if (IS_REACTIVE) {
-    watch(
-      () => options.schema,
-      (newSchema) => {
-        api.setState({ schema: newSchema });
-      },
-      { immediate: true, deep: true },
-    );
-
-    watch(
-      () => options.data,
-      (newData) => {
-        api.setState({ data: newData });
-      },
-      { immediate: true, deep: true },
-    );
-  }
-
-  return [Desc, extendedApi] as const;
+  return [DescriptionWrapper, api] as const;
 }
diff --git a/apps/web-antd/src/components/form-create/components/use-api-select.tsx b/apps/web-antd/src/components/form-create/components/use-api-select.tsx
index 6d728715e..ead612517 100644
--- a/apps/web-antd/src/components/form-create/components/use-api-select.tsx
+++ b/apps/web-antd/src/components/form-create/components/use-api-select.tsx
@@ -202,7 +202,7 @@ export function useApiSelect(option: ApiSelectProps) {
               onUpdate:value={onUpdateModelValue as any}
               value={modelValue as any}
               {...restAttrs}
-              // TODO: remote 对等实现
+              // TODO @xingyu remote 对等实现, 还是说没作用
               // remote={props.remote}
               {...(props.remote && { remoteMethod })}
             >
@@ -223,7 +223,7 @@ export function useApiSelect(option: ApiSelectProps) {
             onUpdate:value={onUpdateModelValue as any}
             value={modelValue as any}
             {...restAttrs}
-            // TODO: @dhb52 remote 对等实现, 还是说没作用
+            // TODO: @xingyu remote 对等实现, 还是说没作用
             // remote={props.remote}
             {...(props.remote && { remoteMethod })}
           >
diff --git a/apps/web-antd/src/components/form-create/rules/use-dict-select.ts b/apps/web-antd/src/components/form-create/rules/use-dict-select.ts
index 0054cd41e..c486b6716 100644
--- a/apps/web-antd/src/components/form-create/rules/use-dict-select.ts
+++ b/apps/web-antd/src/components/form-create/rules/use-dict-select.ts
@@ -1,8 +1,10 @@
+import type { SystemDictTypeApi } from '#/api/system/dict/type';
+
 import { onMounted, ref } from 'vue';
 
 import { buildUUID, cloneDeep } from '@vben/utils';
 
-import * as DictDataApi from '#/api/system/dict/type';
+import { getSimpleDictTypeList } from '#/api/system/dict/type';
 import {
   localeProps,
   makeRequiredRule,
@@ -18,12 +20,12 @@ export function useDictSelectRule() {
   const rules = cloneDeep(selectRule);
   const dictOptions = ref<{ label: string; value: string }[]>([]); // 字典类型下拉数据
   onMounted(async () => {
-    const data = await DictDataApi.getSimpleDictTypeList();
+    const data = await getSimpleDictTypeList();
     if (!data || data.length === 0) {
       return;
     }
     dictOptions.value =
-      data?.map((item: DictDataApi.SystemDictTypeApi.DictType) => ({
+      data?.map((item: SystemDictTypeApi.DictType) => ({
         label: item.name,
         value: item.type,
       })) ?? [];
diff --git a/apps/web-antd/src/components/form-create/typing.ts b/apps/web-antd/src/components/form-create/typing.ts
index b89e6f780..35c1a39fc 100644
--- a/apps/web-antd/src/components/form-create/typing.ts
+++ b/apps/web-antd/src/components/form-create/typing.ts
@@ -1,9 +1,7 @@
-import type { Rule } from '@form-create/ant-design-vue';
-
 /** 数据字典 Select 选择器组件 Props 类型 */
 export interface DictSelectProps {
   dictType: string; // 字典类型
-  valueType?: 'bool' | 'int' | 'str'; // 字典值类型 TODO @芋艿：'boolean' | 'number' | 'string'；需要和 vue3 一起统一！
+  valueType?: 'bool' | 'int' | 'str'; // 字典值类型
   selectType?: 'checkbox' | 'radio' | 'select'; // 选择器类型，下拉框 select、多选框 checkbox、单选框 radio
   formCreateInject?: any;
 }
@@ -22,25 +20,6 @@ export interface Menu {
   list: MenuItem[];
 }
 
-export type MenuList = Array<Menu>;
-
-// TODO @dhb52：MenuList、Menu、MenuItem、DragRule 这几个，是不是没用到呀？
-// 拖拽组件的规则
-export interface DragRule {
-  icon: string;
-  name: string;
-  label: string;
-  children?: string;
-  inside?: true;
-  drag?: string | true;
-  dragBtn?: false;
-  mask?: false;
-
-  rule(): Rule;
-
-  props(v: any, v1: any): Rule[];
-}
-
 /** 通用 API 下拉组件 Props 类型 */
 export interface ApiSelectProps {
   name: string; // 组件名称
diff --git a/apps/web-antd/src/components/table-action/icons.ts b/apps/web-antd/src/components/table-action/icons.ts
index 88cda5978..df5bf1a77 100644
--- a/apps/web-antd/src/components/table-action/icons.ts
+++ b/apps/web-antd/src/components/table-action/icons.ts
@@ -10,4 +10,5 @@ export const ACTION_ICON = {
   MORE: 'lucide:ellipsis-vertical',
   VIEW: 'lucide:eye',
   COPY: 'lucide:copy',
+  CLOSE: 'lucide:x',
 };
diff --git a/apps/web-antd/src/components/upload/image-upload.vue b/apps/web-antd/src/components/upload/image-upload.vue
index 4f0e9d1bf..a79f5b7cb 100644
--- a/apps/web-antd/src/components/upload/image-upload.vue
+++ b/apps/web-antd/src/components/upload/image-upload.vue
@@ -241,7 +241,7 @@ function handleUploadSuccess(res: any, file: File) {
 // 处理上传错误
 function handleUploadError(error: any) {
   console.error('上传错误:', error);
-  message.error($t('ui.upload.uploadError'));
+  message.error('上传错误！！！');
   // 上传失败时减少计数器
   uploadNumber.value = Math.max(0, uploadNumber.value - 1);
 }
diff --git a/apps/web-antd/src/plugins/form-create/index.ts b/apps/web-antd/src/plugins/form-create/index.ts
index 958b9d52b..d7b59b5b7 100644
--- a/apps/web-antd/src/plugins/form-create/index.ts
+++ b/apps/web-antd/src/plugins/form-create/index.ts
@@ -91,10 +91,12 @@ const components = [
   FileUpload,
 ];
 
+// 参考 https://www.form-create.com/v3/ant-design-vue/auto-import 文档
 export function setupFormCreate(app: App) {
   components.forEach((component) => {
     app.component(component.name as string, component);
   });
+  // TODO @xingyu：这里为啥 app.component('AMessage', message); 看官方是没有的；
   app.component('AMessage', message);
   formCreate.use(install);
   app.use(formCreate);
diff --git a/apps/web-antd/src/router/routes/modules/ai.ts b/apps/web-antd/src/router/routes/modules/ai.ts
index 67f9f69d8..dc66c4927 100644
--- a/apps/web-antd/src/router/routes/modules/ai.ts
+++ b/apps/web-antd/src/router/routes/modules/ai.ts
@@ -83,7 +83,7 @@ const routes: RouteRecordRaw[] = [
         },
       },
       {
-        path: 'console/workflow/create',
+        path: String.raw`workflow/create/:id(\d+)/:type(update|create)`,
         component: () => import('#/views/ai/workflow/form/index.vue'),
         name: 'AiWorkflowCreate',
         meta: {
diff --git a/apps/web-antd/src/router/routes/modules/bpm.ts b/apps/web-antd/src/router/routes/modules/bpm.ts
index 21abaabe5..05e0e5664 100644
--- a/apps/web-antd/src/router/routes/modules/bpm.ts
+++ b/apps/web-antd/src/router/routes/modules/bpm.ts
@@ -51,7 +51,7 @@ const routes: RouteRecordRaw[] = [
         name: 'BpmFormEditor',
         component: () => import('#/views/bpm/form/designer/index.vue'),
         meta: {
-          title: '编辑流程表单',
+          title: '设计流程表单',
           activePath: '/bpm/manager/form',
         },
         props: (route) => {
diff --git a/apps/web-antd/src/router/routes/modules/iot.ts b/apps/web-antd/src/router/routes/modules/iot.ts
index 54c0b27f8..3e7f87caf 100644
--- a/apps/web-antd/src/router/routes/modules/iot.ts
+++ b/apps/web-antd/src/router/routes/modules/iot.ts
@@ -31,6 +31,16 @@ const routes: RouteRecordRaw[] = [
         component: () =>
           import('#/views/iot/device/device/modules/detail/index.vue'),
       },
+      {
+        path: 'ota/firmware/detail/:id',
+        name: 'IoTOtaFirmwareDetail',
+        meta: {
+          title: '固件详情',
+          activePath: '/iot/ota',
+        },
+        component: () =>
+          import('#/views/iot/ota/modules/firmware-detail/index.vue'),
+      },
     ],
   },
 ];
diff --git a/apps/web-antd/src/router/routes/modules/mall.ts b/apps/web-antd/src/router/routes/modules/mall.ts
index e68bea65f..db8fcab5e 100644
--- a/apps/web-antd/src/router/routes/modules/mall.ts
+++ b/apps/web-antd/src/router/routes/modules/mall.ts
@@ -18,7 +18,7 @@ const routes: RouteRecordRaw[] = [
           title: '商品添加',
           activePath: '/mall/product/spu',
         },
-        component: () => import('#/views/mall/product/spu/modules/form.vue'),
+        component: () => import('#/views/mall/product/spu/form/index.vue'),
       },
       {
         path: String.raw`spu/edit/:id(\d+)`,
@@ -27,16 +27,16 @@ const routes: RouteRecordRaw[] = [
           title: '商品编辑',
           activePath: '/mall/product/spu',
         },
-        component: () => import('#/views/mall/product/spu/modules/form.vue'),
+        component: () => import('#/views/mall/product/spu/form/index.vue'),
       },
       {
         path: String.raw`spu/detail/:id(\d+)`,
         name: 'ProductSpuDetail',
         meta: {
           title: '商品详情',
-          activePath: '/crm/business',
+          activePath: '/mall/product/spu',
         },
-        component: () => import('#/views/mall/product/spu/modules/detail.vue'),
+        component: () => import('#/views/mall/product/spu/form/index.vue'),
       },
     ],
   },
@@ -71,6 +71,40 @@ const routes: RouteRecordRaw[] = [
       },
     ],
   },
+  {
+    path: '/diy',
+    name: 'DiyCenter',
+    meta: {
+      title: '营销中心',
+      icon: 'lucide:shopping-bag',
+      keepAlive: true,
+      hideInMenu: true,
+    },
+    children: [
+      {
+        path: String.raw`template/decorate/:id(\d+)`,
+        name: 'DiyTemplateDecorate',
+        meta: {
+          title: '模板装修',
+          activePath: '/mall/promotion/diy-template/diy-template',
+        },
+        component: () =>
+          import('#/views/mall/promotion/diy/template/decorate/index.vue'),
+      },
+      {
+        path: 'page/decorate/:id',
+        name: 'DiyPageDecorate',
+        meta: {
+          title: '页面装修',
+          noCache: false,
+          hidden: true,
+          activePath: '/mall/promotion/diy-template/diy-page',
+        },
+        component: () =>
+          import('#/views/mall/promotion/diy/page/decorate/index.vue'),
+      },
+    ],
+  },
 ];
 
 export default routes;
diff --git a/apps/web-antd/src/views/_core/authentication/forget-password.vue b/apps/web-antd/src/views/_core/authentication/forget-password.vue
index 2ef4b0ff1..4837cf7dc 100644
--- a/apps/web-antd/src/views/_core/authentication/forget-password.vue
+++ b/apps/web-antd/src/views/_core/authentication/forget-password.vue
@@ -197,7 +197,7 @@ async function handleSubmit(values: Recordable<any>) {
     await smsResetPassword({ mobile, code, password });
     message.success($t('authentication.resetPasswordSuccess'));
     // 重置成功后跳转到首页
-    router.push('/');
+    await router.push('/');
   } catch (error) {
     console.error('重置密码失败:', error);
   } finally {
diff --git a/apps/web-antd/src/views/_core/authentication/sso-login.vue b/apps/web-antd/src/views/_core/authentication/sso-login.vue
index 1bc7ad9b1..aba72ac83 100644
--- a/apps/web-antd/src/views/_core/authentication/sso-login.vue
+++ b/apps/web-antd/src/views/_core/authentication/sso-login.vue
@@ -11,7 +11,7 @@ import { authorize, getAuthorize } from '#/api/system/oauth2/open';
 
 defineOptions({ name: 'SSOLogin' });
 
-const { query } = useRoute(); // 路由参数
+const { query } = useRoute();
 
 const client = ref({
   name: '',
diff --git a/apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationList.vue b/apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationList.vue
index 08348f79c..7339c9e5b 100644
--- a/apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationList.vue
+++ b/apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationList.vue
@@ -17,6 +17,7 @@ import {
   getChatConversationMyList,
   updateChatConversationMy,
 } from '#/api/ai/chat/conversation';
+import { $t } from '#/locales';
 
 import RoleRepository from '../role/RoleRepository.vue';
 
@@ -201,7 +202,8 @@ async function updateConversationTitle(
             if (
               filterConversationList.length > 0 &&
               filterConversationList[0] && // tip：避免切换对话
-              activeConversationId.value === filterConversationList[0].id
+              activeConversationId.value ===
+                (filterConversationList[0].id as number)
             ) {
               emits('onConversationClick', filterConversationList[0]);
             }
@@ -249,7 +251,7 @@ async function handleClearConversation() {
   try {
     await confirm('确认后对话会全部清空，置顶的对话除外。');
     await deleteChatConversationMyByUnpinned();
-    message.success('操作成功!');
+    message.success($t('ui.actionMessage.operationSuccess'));
     // 清空 对话 和 对话内容
     activeConversationId.value = null;
     // 获取 对话列表
@@ -305,7 +307,7 @@ onMounted(async () => {
 <template>
   <Layout.Sider
     width="280px"
-    class="conversation-container relative flex h-full flex-col justify-between overflow-hidden p-4"
+    class="relative flex h-full flex-col justify-between overflow-hidden p-4"
   >
     <Drawer />
     <!-- 左顶部：对话 -->
@@ -328,7 +330,7 @@ onMounted(async () => {
       </Input>
 
       <!-- 左中间：对话列表 -->
-      <div class="conversation-list mt-2 flex-1 overflow-auto">
+      <div class="mt-2 flex-1 overflow-auto">
         <!-- 情况一：加载中 -->
         <Empty v-if="loading" description="." v-loading="loading" />
 
@@ -336,11 +338,10 @@ onMounted(async () => {
         <div
           v-for="conversationKey in Object.keys(conversationMap)"
           :key="conversationKey"
-          class=""
         >
           <div
             v-if="conversationMap[conversationKey].length > 0"
-            class="conversation-item classify-title pt-2"
+            class="classify-title pt-2"
           >
             <b class="mx-1">
               {{ conversationKey }}
@@ -353,24 +354,24 @@ onMounted(async () => {
             @click="handleConversationClick(conversation.id)"
             @mouseover="hoverConversationId = conversation.id"
             @mouseout="hoverConversationId = null"
-            class="conversation-item mt-1"
+            class="mt-1"
           >
             <div
-              class="conversation flex cursor-pointer flex-row items-center justify-between rounded-lg px-2 leading-10"
+              class="flex cursor-pointer flex-row items-center justify-between rounded-lg px-2 leading-10"
               :class="[
                 conversation.id === activeConversationId
-                  ? 'bg-primary-200'
+                  ? 'bg-success-600'
                   : '',
               ]"
             >
-              <div class="title-wrapper flex items-center">
+              <div class="flex items-center">
                 <Avatar
                   v-if="conversation.roleAvatar"
                   :src="conversation.roleAvatar"
                 />
                 <SvgGptIcon v-else class="size-8" />
                 <span
-                  class="max-w-36 overflow-hidden text-ellipsis whitespace-nowrap p-2 text-sm font-normal text-gray-600"
+                  class="max-w-32 overflow-hidden text-ellipsis whitespace-nowrap p-2 text-sm font-normal"
                 >
                   {{ conversation.title }}
                 </span>
@@ -378,7 +379,7 @@ onMounted(async () => {
 
               <div
                 v-show="hoverConversationId === conversation.id"
-                class="button-wrapper relative right-0.5 flex items-center text-gray-400"
+                class="relative right-0.5 flex items-center text-gray-400"
               >
                 <Button
                   class="mr-0 px-1"
diff --git a/apps/web-antd/src/views/ai/chat/index/components/role/RoleRepository.vue b/apps/web-antd/src/views/ai/chat/index/components/role/RoleRepository.vue
index 98f665f14..ea78237c0 100644
--- a/apps/web-antd/src/views/ai/chat/index/components/role/RoleRepository.vue
+++ b/apps/web-antd/src/views/ai/chat/index/components/role/RoleRepository.vue
@@ -17,7 +17,7 @@ import Form from '../../../../model/chatRole/modules/form.vue';
 import RoleCategoryList from './RoleCategoryList.vue';
 import RoleList from './RoleList.vue';
 
-const router = useRouter(); // 路由对象
+const router = useRouter();
 const [Drawer] = useVbenDrawer({
   title: '角色管理',
   footer: false,
@@ -55,7 +55,7 @@ async function handleTabsClick(tab: any) {
 
 /** 获取 my role 我的角色 */
 async function getMyRole(append?: boolean) {
-  const params: AiModelChatRoleApi.ChatRolePageReq = {
+  const params: AiModelChatRoleApi.ChatRolePageReqVO = {
     ...myRoleParams,
     name: search.value,
     publicStatus: false,
@@ -70,7 +70,7 @@ async function getMyRole(append?: boolean) {
 
 /** 获取 public role 公共角色 */
 async function getPublicRole(append?: boolean) {
-  const params: AiModelChatRoleApi.ChatRolePageReq = {
+  const params: AiModelChatRoleApi.ChatRolePageReqVO = {
     ...publicRoleParams,
     category: activeCategory.value === '全部' ? '' : activeCategory.value,
     name: search.value,
diff --git a/apps/web-antd/src/views/ai/chat/index/index.vue b/apps/web-antd/src/views/ai/chat/index/index.vue
index 75eca3838..38226f5d1 100644
--- a/apps/web-antd/src/views/ai/chat/index/index.vue
+++ b/apps/web-antd/src/views/ai/chat/index/index.vue
@@ -28,7 +28,7 @@ import MessageNewConversation from './components/message/MessageNewConversation.
 /** AI 聊天对话 列表 */
 defineOptions({ name: 'AiChat' });
 
-const route = useRoute(); // 路由
+const route = useRoute();
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: ConversationUpdateForm,
   destroyOnClose: true,
@@ -428,7 +428,7 @@ async function textRoll() {
     // 设置状态
     textRoleRunning.value = true;
     receiveMessageDisplayedText.value = '';
-    const task = async () => {
+    async function task() {
       // 调整速度
       const diff =
         (receiveMessageFullText.value.length -
@@ -472,7 +472,7 @@ async function textRoll() {
           clearTimeout(timer);
         }
       }
-    };
+    }
     let timer = setTimeout(task, textSpeed.value);
   } catch {}
 }
@@ -503,7 +503,7 @@ onMounted(async () => {
       <!-- 左侧：对话列表 -->
       <ConversationList
         class="!bg-card"
-        :active-id="activeConversationId as any"
+        :active-id="activeConversationId"
         ref="conversationListRef"
         @on-conversation-create="handleConversationCreateSuccess"
         @on-conversation-click="handleConversationClick"
@@ -578,7 +578,7 @@ onMounted(async () => {
             class="border-border my-5 mb-5 mt-2 flex flex-col rounded-xl border px-2 py-2.5"
           >
             <textarea
-              class="box-border h-24 resize-none overflow-auto border-none px-0 py-1 focus:outline-none"
+              class="box-border h-24 resize-none overflow-auto rounded-md px-0 py-1 focus:outline-none"
               v-model="prompt"
               @keydown="handleSendByKeydown"
               @input="handlePromptInput"
diff --git a/apps/web-antd/src/views/ai/chat/manager/data.ts b/apps/web-antd/src/views/ai/chat/manager/data.ts
index 5990e515e..f8dcb1fa7 100644
--- a/apps/web-antd/src/views/ai/chat/manager/data.ts
+++ b/apps/web-antd/src/views/ai/chat/manager/data.ts
@@ -1,11 +1,16 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api/system/user';
 
 import { DICT_TYPE } from '@vben/constants';
 
 import { getSimpleUserList } from '#/api/system/user';
 import { getRangePickerDefaultProps } from '#/utils';
 
+/** 关联数据 */
+let userList: SystemUserApi.User[] = [];
+getSimpleUserList().then((data) => (userList = data));
+
 /** 列表的搜索表单 */
 export function useGridFormSchemaConversation(): VbenFormSchema[] {
   return [
@@ -13,11 +18,19 @@ export function useGridFormSchemaConversation(): VbenFormSchema[] {
       fieldName: 'userId',
       label: '用户编号',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户编号',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'title',
       label: '聊天标题',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入聊天标题',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'createTime',
@@ -49,7 +62,13 @@ export function useGridColumnsConversation(): VxeTableGridOptions['columns'] {
     {
       title: '用户',
       minWidth: 180,
-      slots: { default: 'userId' },
+      field: 'userId',
+      formatter: ({ cellValue }) => {
+        if (cellValue === 0) {
+          return '系统';
+        }
+        return userList.find((user) => user.id === cellValue)?.nickname || '-';
+      },
     },
     {
       field: 'roleName',
@@ -103,15 +122,21 @@ export function useGridFormSchemaMessage(): VbenFormSchema[] {
       fieldName: 'conversationId',
       label: '对话编号',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入对话编号',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'userId',
       label: '用户编号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
+        placeholder: '请选择用户编号',
+        allowClear: true,
       },
     },
     {
@@ -144,7 +169,9 @@ export function useGridColumnsMessage(): VxeTableGridOptions['columns'] {
     {
       title: '用户',
       minWidth: 180,
-      slots: { default: 'userId' },
+      field: 'userId',
+      formatter: ({ cellValue }) =>
+        userList.find((user) => user.id === cellValue)?.nickname || '-',
     },
     {
       field: 'roleName',
diff --git a/apps/web-antd/src/views/ai/chat/manager/index.vue b/apps/web-antd/src/views/ai/chat/manager/index.vue
index 8eb294dd3..69c4e844b 100644
--- a/apps/web-antd/src/views/ai/chat/manager/index.vue
+++ b/apps/web-antd/src/views/ai/chat/manager/index.vue
@@ -3,10 +3,10 @@ import { ref } from 'vue';
 
 import { DocAlert, Page } from '@vben/common-ui';
 
-import { Card, Tabs } from 'ant-design-vue';
+import { Tabs } from 'ant-design-vue';
 
-import ChatConversationList from './modules/ChatConversationList.vue';
-import ChatMessageList from './modules/ChatMessageList.vue';
+import ChatConversationList from './modules/conversation-list.vue';
+import ChatMessageList from './modules/message-list.vue';
 
 const activeTabName = ref('conversation');
 </script>
@@ -16,15 +16,14 @@ const activeTabName = ref('conversation');
     <template #doc>
       <DocAlert title="AI 对话聊天" url="https://doc.iocoder.cn/ai/chat/" />
     </template>
-    <Card>
-      <Tabs v-model:active-key="activeTabName">
-        <Tabs.TabPane tab="对话列表" key="conversation">
-          <ChatConversationList />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="消息列表" key="message">
-          <ChatMessageList />
-        </Tabs.TabPane>
-      </Tabs>
-    </Card>
+
+    <Tabs v-model:active-key="activeTabName">
+      <Tabs.TabPane tab="对话列表" key="conversation">
+        <ChatConversationList />
+      </Tabs.TabPane>
+      <Tabs.TabPane tab="消息列表" key="message">
+        <ChatMessageList />
+      </Tabs.TabPane>
+    </Tabs>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/ai/chat/manager/modules/ChatConversationList.vue b/apps/web-antd/src/views/ai/chat/manager/modules/conversation-list.vue
similarity index 73%
rename from apps/web-antd/src/views/ai/chat/manager/modules/ChatConversationList.vue
rename to apps/web-antd/src/views/ai/chat/manager/modules/conversation-list.vue
index c605da518..6bfe70216 100644
--- a/apps/web-antd/src/views/ai/chat/manager/modules/ChatConversationList.vue
+++ b/apps/web-antd/src/views/ai/chat/manager/modules/conversation-list.vue
@@ -1,9 +1,6 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
-import type { SystemUserApi } from '#/api/system/user';
-
-import { onMounted, ref } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
@@ -14,7 +11,6 @@ import {
   deleteChatConversationByAdmin,
   getChatConversationPage,
 } from '#/api/ai/chat/conversation';
-import { getSimpleUserList } from '#/api/system/user';
 import { $t } from '#/locales';
 
 import {
@@ -22,23 +18,20 @@ import {
   useGridFormSchemaConversation,
 } from '../data';
 
-const userList = ref<SystemUserApi.User[]>([]); // 用户列表
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
 }
 
-/** 删除 */
+/** 删除对话 */
 async function handleDelete(row: AiChatConversationApi.ChatConversation) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     duration: 0,
   });
   try {
-    await deleteChatConversationByAdmin(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-    });
+    await deleteChatConversationByAdmin(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -66,32 +59,19 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiChatConversationApi.ChatConversation>,
-  separator: false,
-});
-onMounted(async () => {
-  // 获得用户列表
-  userList.value = await getSimpleUserList();
 });
 </script>
 
 <template>
   <Page auto-content-height>
     <Grid table-title="对话列表">
-      <template #toolbar-tools>
-        <TableAction :actions="[]" />
-      </template>
-      <template #userId="{ row }">
-        <span>
-          {{ userList.find((item) => item.id === row.userId)?.nickname }}
-        </span>
-        <span v-if="row.userId === 0">系统</span>
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
diff --git a/apps/web-antd/src/views/ai/chat/manager/modules/ChatMessageList.vue b/apps/web-antd/src/views/ai/chat/manager/modules/message-list.vue
similarity index 74%
rename from apps/web-antd/src/views/ai/chat/manager/modules/ChatMessageList.vue
rename to apps/web-antd/src/views/ai/chat/manager/modules/message-list.vue
index 477335bfc..bf6bd5747 100644
--- a/apps/web-antd/src/views/ai/chat/manager/modules/ChatMessageList.vue
+++ b/apps/web-antd/src/views/ai/chat/manager/modules/message-list.vue
@@ -1,9 +1,6 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
-import type { SystemUserApi } from '#/api/system/user';
-
-import { onMounted, ref } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
@@ -14,28 +11,24 @@ import {
   deleteChatMessageByAdmin,
   getChatMessagePage,
 } from '#/api/ai/chat/message';
-import { getSimpleUserList } from '#/api/system/user';
 import { $t } from '#/locales';
 
 import { useGridColumnsMessage, useGridFormSchemaMessage } from '../data';
 
-const userList = ref<SystemUserApi.User[]>([]); // 用户列表
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
 }
 
-/** 删除 */
+/** 删除消息 */
 async function handleDelete(row: AiChatConversationApi.ChatConversation) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     duration: 0,
   });
   try {
-    await deleteChatMessageByAdmin(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-    });
+    await deleteChatMessageByAdmin(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -63,31 +56,19 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiChatConversationApi.ChatConversation>,
-  separator: false,
-});
-onMounted(async () => {
-  // 获得用户列表
-  userList.value = await getSimpleUserList();
 });
 </script>
 
 <template>
   <Page auto-content-height>
     <Grid table-title="消息列表">
-      <template #toolbar-tools>
-        <TableAction :actions="[]" />
-      </template>
-      <template #userId="{ row }">
-        <span>{{
-          userList.find((item) => item.id === row.userId)?.nickname
-        }}</span>
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
diff --git a/apps/web-antd/src/views/ai/image/index/components/ImageDetail.vue b/apps/web-antd/src/views/ai/image/index/components/ImageDetail.vue
index 519e8c08d..fa5918d32 100644
--- a/apps/web-antd/src/views/ai/image/index/components/ImageDetail.vue
+++ b/apps/web-antd/src/views/ai/image/index/components/ImageDetail.vue
@@ -44,7 +44,7 @@ watch(
 
 <template>
   <div class="mb-5 w-full overflow-hidden break-words">
-    <div class="mt-2 text-gray-600">
+    <div class="mt-2">
       <Image class="rounded-lg" :src="detail?.picUrl" />
     </div>
   </div>
@@ -52,7 +52,7 @@ watch(
   <!-- 时间 -->
   <div class="mb-5 w-full overflow-hidden break-words">
     <div class="text-lg font-bold">时间</div>
-    <div class="mt-2 text-gray-600">
+    <div class="mt-2">
       <div>
         提交时间：{{ formatDate(detail.createTime, 'yyyy-MM-dd HH:mm:ss') }}
       </div>
@@ -65,7 +65,7 @@ watch(
   <!-- 模型 -->
   <div class="mb-5 w-full overflow-hidden break-words">
     <div class="text-lg font-bold">模型</div>
-    <div class="mt-2 text-gray-600">
+    <div class="mt-2">
       {{ detail.model }}({{ detail.height }}x{{ detail.width }})
     </div>
   </div>
@@ -73,7 +73,7 @@ watch(
   <!-- 提示词 -->
   <div class="mb-5 w-full overflow-hidden break-words">
     <div class="text-lg font-bold">提示词</div>
-    <div class="mt-2 text-gray-600">
+    <div class="mt-2">
       {{ detail.prompt }}
     </div>
   </div>
@@ -81,7 +81,7 @@ watch(
   <!-- 图片地址 -->
   <div class="mb-5 w-full overflow-hidden break-words">
     <div class="text-lg font-bold">图片地址</div>
-    <div class="mt-2 text-gray-600">
+    <div class="mt-2">
       {{ detail.picUrl }}
     </div>
   </div>
@@ -95,7 +95,7 @@ watch(
     class="mb-5 w-full overflow-hidden break-words"
   >
     <div class="text-lg font-bold">采样方法</div>
-    <div class="mt-2 text-gray-600">
+    <div class="mt-2">
       {{
         StableDiffusionSamplers.find(
           (item) => item.key === detail?.options?.sampler,
@@ -112,7 +112,7 @@ watch(
     class="mb-5 w-full overflow-hidden break-words"
   >
     <div class="text-lg font-bold">CLIP</div>
-    <div class="mt-2 text-gray-600">
+    <div class="mt-2">
       {{
         StableDiffusionClipGuidancePresets.find(
           (item) => item.key === detail?.options?.clipGuidancePreset,
@@ -129,7 +129,7 @@ watch(
     class="mb-5 w-full overflow-hidden break-words"
   >
     <div class="text-lg font-bold">风格</div>
-    <div class="mt-2 text-gray-600">
+    <div class="mt-2">
       {{
         StableDiffusionStylePresets.find(
           (item) => item.key === detail?.options?.stylePreset,
@@ -146,7 +146,7 @@ watch(
     class="mb-5 w-full overflow-hidden break-words"
   >
     <div class="text-lg font-bold">迭代步数</div>
-    <div class="mt-2 text-gray-600">{{ detail?.options?.steps }}</div>
+    <div class="mt-2">{{ detail?.options?.steps }}</div>
   </div>
 
   <div
@@ -157,7 +157,7 @@ watch(
     class="mb-5 w-full overflow-hidden break-words"
   >
     <div class="text-lg font-bold">引导系数</div>
-    <div class="mt-2 text-gray-600">{{ detail?.options?.scale }}</div>
+    <div class="mt-2">{{ detail?.options?.scale }}</div>
   </div>
 
   <div
@@ -168,7 +168,7 @@ watch(
     class="mb-5 w-full overflow-hidden break-words"
   >
     <div class="text-lg font-bold">随机因子</div>
-    <div class="mt-2 text-gray-600">{{ detail?.options?.seed }}</div>
+    <div class="mt-2">{{ detail?.options?.seed }}</div>
   </div>
 
   <!-- Dall3 专属 -->
@@ -177,7 +177,7 @@ watch(
     class="mb-5 w-full overflow-hidden break-words"
   >
     <div class="text-lg font-bold">风格选择</div>
-    <div class="mt-2 text-gray-600">
+    <div class="mt-2">
       {{
         Dall3StyleList.find((item) => item.key === detail?.options?.style)?.name
       }}
@@ -192,7 +192,7 @@ watch(
     class="mb-5 w-full overflow-hidden break-words"
   >
     <div class="text-lg font-bold">模型版本</div>
-    <div class="mt-2 text-gray-600">{{ detail?.options?.version }}</div>
+    <div class="mt-2">{{ detail?.options?.version }}</div>
   </div>
 
   <div
@@ -203,7 +203,7 @@ watch(
     class="mb-5 w-full overflow-hidden break-words"
   >
     <div class="text-lg font-bold">参考图</div>
-    <div class="mt-2 text-gray-600">
+    <div class="mt-2">
       <Image :src="detail.options.referImageUrl" />
     </div>
   </div>
diff --git a/apps/web-antd/src/views/ai/image/index/components/ImageList.vue b/apps/web-antd/src/views/ai/image/index/components/ImageList.vue
index 1f7b3359d..706a6ff9b 100644
--- a/apps/web-antd/src/views/ai/image/index/components/ImageList.vue
+++ b/apps/web-antd/src/views/ai/image/index/components/ImageList.vue
@@ -24,7 +24,7 @@ import ImageDetail from './ImageDetail.vue';
 // 暴露组件方法
 
 const emits = defineEmits(['onRegeneration']);
-const router = useRouter(); // 路由
+const router = useRouter();
 const [Drawer, drawerApi] = useVbenDrawer({
   title: '图片详情',
   footer: false,
diff --git a/apps/web-antd/src/views/ai/image/index/index.vue b/apps/web-antd/src/views/ai/image/index/index.vue
index 2a6263db8..00c313b1d 100644
--- a/apps/web-antd/src/views/ai/image/index/index.vue
+++ b/apps/web-antd/src/views/ai/image/index/index.vue
@@ -47,15 +47,15 @@ const platformOptions = [
 const models = ref<AiModelModelApi.Model[]>([]); // 模型列表
 
 /** 绘画 start  */
-const handleDrawStart = async () => {};
+async function handleDrawStart() {}
 
 /** 绘画 complete */
-const handleDrawComplete = async () => {
+async function handleDrawComplete() {
   await imageListRef.value.getImageList();
-};
+}
 
 /** 重新生成：将画图详情填充到对应平台 */
-const handleRegeneration = async (image: AiImageApi.Image) => {
+async function handleRegeneration(image: AiImageApi.Image) {
   // 切换平台
   selectPlatform.value = image.platform;
   // 根据不同平台填充 image
@@ -79,7 +79,7 @@ const handleRegeneration = async (image: AiImageApi.Image) => {
     // No default
   }
   // TODO @fan：貌似 other 重新设置不行？
-};
+}
 
 /** 组件挂载的时候 */
 onMounted(async () => {
diff --git a/apps/web-antd/src/views/ai/image/manager/data.ts b/apps/web-antd/src/views/ai/image/manager/data.ts
index d5e39b76b..7bd63bb8a 100644
--- a/apps/web-antd/src/views/ai/image/manager/data.ts
+++ b/apps/web-antd/src/views/ai/image/manager/data.ts
@@ -1,5 +1,6 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api/system/user';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
@@ -7,6 +8,13 @@ import { getDictOptions } from '@vben/hooks';
 import { getSimpleUserList } from '#/api/system/user';
 import { getRangePickerDefaultProps } from '#/utils';
 
+let userList: SystemUserApi.User[] = [];
+async function getUserData() {
+  userList = await getSimpleUserList();
+}
+
+getUserData();
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -15,9 +23,11 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '用户编号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
+        placeholder: '请选择用户编号',
+        allowClear: true,
       },
     },
     {
@@ -25,6 +35,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '平台',
       component: 'Select',
       componentProps: {
+        placeholder: '请选择平台',
         allowClear: true,
         options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
       },
@@ -34,6 +45,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '绘画状态',
       component: 'Select',
       componentProps: {
+        placeholder: '请选择绘画状态',
         allowClear: true,
         options: getDictOptions(DICT_TYPE.AI_IMAGE_STATUS, 'number'),
       },
@@ -43,8 +55,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '是否发布',
       component: 'Select',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        placeholder: '请选择是否发布',
         allowClear: true,
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
       },
     },
     {
@@ -60,7 +73,12 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(
+  onPublicStatusChange?: (
+    newStatus: boolean,
+    row: any,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -69,15 +87,20 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       fixed: 'left',
     },
     {
+      field: 'picUrl',
       title: '图片',
       minWidth: 110,
       fixed: 'left',
-      slots: { default: 'picUrl' },
+      cellRender: {
+        name: 'CellImage',
+      },
     },
     {
-      minWidth: 180,
+      field: 'userId',
       title: '用户',
-      slots: { default: 'userId' },
+      minWidth: 180,
+      formatter: ({ cellValue }) =>
+        userList.find((user) => user.id === cellValue)?.nickname || '-',
     },
     {
       field: 'platform',
@@ -105,7 +128,16 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       minWidth: 100,
       title: '是否发布',
-      slots: { default: 'publicStatus' },
+      field: 'publicStatus',
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onPublicStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: true,
+          unCheckedValue: false,
+        },
+      },
     },
     {
       field: 'prompt',
diff --git a/apps/web-antd/src/views/ai/image/manager/index.vue b/apps/web-antd/src/views/ai/image/manager/index.vue
index 1cb974c3c..ad1ab7b02 100644
--- a/apps/web-antd/src/views/ai/image/manager/index.vue
+++ b/apps/web-antd/src/views/ai/image/manager/index.vue
@@ -1,29 +1,23 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { AiImageApi } from '#/api/ai/image';
-import type { SystemUserApi } from '#/api/system/user';
-
-import { onMounted, ref } from 'vue';
 
 import { confirm, DocAlert, Page } from '@vben/common-ui';
-import { AiImageStatusEnum } from '@vben/constants';
 
-import { Image, message, Switch } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteImage, getImagePage, updateImage } from '#/api/ai/image';
-import { getSimpleUserList } from '#/api/system/user';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
 
-const userList = ref<SystemUserApi.User[]>([]); // 用户列表
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
 }
 
-/** 删除 */
+/** 删除图片 */
 async function handleDelete(row: AiImageApi.Image) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
@@ -31,36 +25,45 @@ async function handleDelete(row: AiImageApi.Image) {
   });
   try {
     await deleteImage(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-    });
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     handleRefresh();
   } finally {
     hideLoading();
   }
 }
+
 /** 修改是否发布 */
-const handleUpdatePublicStatusChange = async (row: AiImageApi.Image) => {
-  try {
-    // 修改状态的二次确认
-    const text = row.publicStatus ? '公开' : '私有';
-    await confirm(`确认要"${text}"该图片吗?`).then(async () => {
-      await updateImage({
-        id: row.id,
-        publicStatus: row.publicStatus,
+async function handleUpdatePublicStatusChange(
+  newStatus: boolean,
+  row: AiImageApi.Image,
+): Promise<boolean | undefined> {
+  const text = newStatus ? '公开' : '私有';
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `确认要将该图片切换为【${text}】吗？`,
+    })
+      .then(async () => {
+        // 更新图片状态
+        await updateImage({
+          id: row.id,
+          publicStatus: newStatus,
+        });
+        // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
       });
-      handleRefresh();
-    });
-  } catch {
-    row.publicStatus = !row.publicStatus;
-  }
-};
+  });
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(),
+    columns: useGridColumns(handleUpdatePublicStatusChange),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -76,6 +79,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -83,10 +87,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<AiImageApi.Image>,
 });
-onMounted(async () => {
-  // 获得下拉数据
-  userList.value = await getSimpleUserList();
-});
 </script>
 
 <template>
@@ -95,27 +95,6 @@ onMounted(async () => {
       <DocAlert title="AI 绘图创作" url="https://doc.iocoder.cn/ai/image/" />
     </template>
     <Grid table-title="绘画管理列表">
-      <template #toolbar-tools>
-        <TableAction :actions="[]" />
-      </template>
-      <template #picUrl="{ row }">
-        <Image :src="row.picUrl" class="h-20 w-20" />
-      </template>
-      <template #userId="{ row }">
-        <span>
-          {{
-            userList.find((item: SystemUserApi.User) => item.id === row.userId)
-              ?.nickname
-          }}
-        </span>
-      </template>
-      <template #publicStatus="{ row }">
-        <Switch
-          v-model:checked="row.publicStatus"
-          @change="handleUpdatePublicStatusChange(row)"
-          :disabled="row.status !== AiImageStatusEnum.SUCCESS"
-        />
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
diff --git a/apps/web-antd/src/views/ai/image/square/index.vue b/apps/web-antd/src/views/ai/image/square/index.vue
index 0a425d6b9..f813e7445 100644
--- a/apps/web-antd/src/views/ai/image/square/index.vue
+++ b/apps/web-antd/src/views/ai/image/square/index.vue
@@ -33,10 +33,10 @@ async function getList() {
 }
 const debounceGetList = useDebounceFn(getList, 80);
 /** 搜索按钮操作 */
-const handleQuery = () => {
+function handleQuery() {
   queryParams.pageNo = 1;
   getList();
-};
+}
 
 /** 初始化 */
 onMounted(async () => {
diff --git a/apps/web-antd/src/views/ai/knowledge/document/form/index.vue b/apps/web-antd/src/views/ai/knowledge/document/form/index.vue
index 8dee6dadb..4e0bf6de2 100644
--- a/apps/web-antd/src/views/ai/knowledge/document/form/index.vue
+++ b/apps/web-antd/src/views/ai/knowledge/document/form/index.vue
@@ -20,8 +20,8 @@ import ProcessStep from './ProcessStep.vue';
 import SplitStep from './SplitStep.vue';
 import UploadStep from './UploadStep.vue';
 
-const route = useRoute(); // 路由
-const router = useRouter(); // 路由
+const route = useRoute();
+const router = useRouter();
 
 // 组件引用
 const uploadDocumentRef = ref();
diff --git a/apps/web-antd/src/views/ai/knowledge/document/index.vue b/apps/web-antd/src/views/ai/knowledge/document/index.vue
index f7b0399dd..16062f1ee 100644
--- a/apps/web-antd/src/views/ai/knowledge/document/index.vue
+++ b/apps/web-antd/src/views/ai/knowledge/document/index.vue
@@ -25,8 +25,8 @@ import { useGridColumns, useGridFormSchema } from './data';
 defineOptions({ name: 'AiKnowledgeDocument' });
 const { hasAccessByCodes } = useAccess();
 
-const route = useRoute(); // 路由
-const router = useRouter(); // 路由
+const route = useRoute();
+const router = useRouter();
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
@@ -65,16 +65,16 @@ async function handleDelete(row: AiKnowledgeDocumentApi.KnowledgeDocument) {
   }
 }
 /** 跳转到知识库分段页面 */
-const handleSegment = (id: number) => {
+function handleSegment(id: number) {
   router.push({
     name: 'AiKnowledgeSegment',
     query: { documentId: id },
   });
-};
+}
 /** 修改是否发布 */
-const handleStatusChange = async (
+async function handleStatusChange(
   row: AiKnowledgeDocumentApi.KnowledgeDocument,
-) => {
+) {
   try {
     // 修改状态的二次确认
     const text = row.status ? '启用' : '禁用';
@@ -91,7 +91,7 @@ const handleStatusChange = async (
         ? CommonStatusEnum.DISABLE
         : CommonStatusEnum.ENABLE;
   }
-};
+}
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
diff --git a/apps/web-antd/src/views/ai/knowledge/knowledge/retrieval/index.vue b/apps/web-antd/src/views/ai/knowledge/knowledge/retrieval/index.vue
index 16ee01fb5..a9c9d2aef 100644
--- a/apps/web-antd/src/views/ai/knowledge/knowledge/retrieval/index.vue
+++ b/apps/web-antd/src/views/ai/knowledge/knowledge/retrieval/index.vue
@@ -20,8 +20,8 @@ import { searchKnowledgeSegment } from '#/api/ai/knowledge/segment';
 /** 文档召回测试 */
 defineOptions({ name: 'KnowledgeDocumentRetrieval' });
 
-const route = useRoute(); // 路由
-const router = useRouter(); // 路由
+const route = useRoute();
+const router = useRouter();
 
 const loading = ref(false); // 加载状态
 const segments = ref<any[]>([]); // 召回结果
diff --git a/apps/web-antd/src/views/ai/knowledge/segment/index.vue b/apps/web-antd/src/views/ai/knowledge/segment/index.vue
index 99fafa639..e5797dce8 100644
--- a/apps/web-antd/src/views/ai/knowledge/segment/index.vue
+++ b/apps/web-antd/src/views/ai/knowledge/segment/index.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { AiKnowledgeKnowledgeApi } from '#/api/ai/knowledge/knowledge';
 import type { AiKnowledgeSegmentApi } from '#/api/ai/knowledge/segment';
 
 import { onMounted } from 'vue';
@@ -41,12 +40,12 @@ function handleCreate() {
 }
 
 /** 编辑 */
-function handleEdit(row: AiKnowledgeKnowledgeApi.Knowledge) {
+function handleEdit(row: AiKnowledgeSegmentApi.KnowledgeSegment) {
   formModalApi.setData(row).open();
 }
 
 /** 删除 */
-async function handleDelete(row: AiKnowledgeKnowledgeApi.Knowledge) {
+async function handleDelete(row: AiKnowledgeSegmentApi.KnowledgeSegment) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     duration: 0,
@@ -88,7 +87,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<AiKnowledgeKnowledgeApi.Knowledge>,
+  } as VxeTableGridOptions<AiKnowledgeSegmentApi.KnowledgeSegment>,
 });
 
 /** 修改是否发布 */
diff --git a/apps/web-antd/src/views/ai/mindmap/index/index.vue b/apps/web-antd/src/views/ai/mindmap/index/index.vue
index a859b663b..325268661 100644
--- a/apps/web-antd/src/views/ai/mindmap/index/index.vue
+++ b/apps/web-antd/src/views/ai/mindmap/index/index.vue
@@ -3,13 +3,15 @@ import type { AiMindmapApi } from '#/api/ai/mindmap';
 
 import { nextTick, onMounted, ref } from 'vue';
 
-import { alert, Page } from '@vben/common-ui';
+import { Page } from '@vben/common-ui';
 import { MindMapContentExample } from '@vben/constants';
 
+import { message } from 'ant-design-vue';
+
 import { generateMindMap } from '#/api/ai/mindmap';
 
-import Left from './modules/Left.vue';
-import Right from './modules/Right.vue';
+import Left from './modules/left.vue';
+import Right from './modules/right.vue';
 
 const ctrl = ref<AbortController>(); // 请求控制
 const isGenerating = ref(false); // 是否正在生成思维导图
@@ -26,8 +28,9 @@ function directGenerate(existPrompt: string) {
   generatedContent.value = existPrompt;
   isEnd.value = true;
 }
+
 /** 提交生成 */
-function submit(data: AiMindmapApi.AiMindMapGenerateReq) {
+function handleSubmit(data: AiMindmapApi.AiMindMapGenerateReqVO) {
   isGenerating.value = true;
   isStart.value = true;
   isEnd.value = false;
@@ -38,8 +41,8 @@ function submit(data: AiMindmapApi.AiMindMapGenerateReq) {
     onMessage: async (res: any) => {
       const { code, data, msg } = JSON.parse(res.data);
       if (code !== 0) {
-        alert(`生成思维导图异常! ${msg}`);
-        stopStream();
+        message.error(`生成思维导图异常! ${msg}`);
+        handleStopStream();
         return;
       }
       generatedContent.value = generatedContent.value + data;
@@ -49,19 +52,20 @@ function submit(data: AiMindmapApi.AiMindMapGenerateReq) {
     onClose() {
       isEnd.value = true;
       leftRef.value?.setGeneratedContent(generatedContent.value);
-      stopStream();
+      handleStopStream();
     },
     onError(err) {
       console.error('生成思维导图失败', err);
-      stopStream();
+      handleStopStream();
       // 需要抛出异常，禁止重试
       throw err;
     },
     ctrl: ctrl.value,
   });
 }
+
 /** 停止 stream 生成 */
-function stopStream() {
+function handleStopStream() {
   isGenerating.value = false;
   isStart.value = false;
   ctrl.value?.abort();
@@ -80,7 +84,7 @@ onMounted(() => {
         ref="leftRef"
         class="mr-4"
         :is-generating="isGenerating"
-        @submit="submit"
+        @submit="handleSubmit"
         @direct-generate="directGenerate"
       />
       <Right
diff --git a/apps/web-antd/src/views/ai/mindmap/index/modules/Left.vue b/apps/web-antd/src/views/ai/mindmap/index/modules/left.vue
similarity index 97%
rename from apps/web-antd/src/views/ai/mindmap/index/modules/Left.vue
rename to apps/web-antd/src/views/ai/mindmap/index/modules/left.vue
index 01ef0d0bd..f6bb8226d 100644
--- a/apps/web-antd/src/views/ai/mindmap/index/modules/Left.vue
+++ b/apps/web-antd/src/views/ai/mindmap/index/modules/left.vue
@@ -8,7 +8,9 @@ import { Button, Textarea } from 'ant-design-vue';
 defineProps<{
   isGenerating: boolean;
 }>();
+
 const emits = defineEmits(['submit', 'directGenerate']);
+
 const formData = reactive({
   prompt: '',
 });
@@ -27,7 +29,7 @@ defineExpose({
     <h3 class="text-primary h-7 w-full text-center text-xl leading-7">
       思维导图创作中心
     </h3>
-    <div class="flex-grow overflow-y-auto">
+    <div class="mt-4 flex-grow overflow-y-auto">
       <div>
         <b>您的需求？</b>
         <Textarea
diff --git a/apps/web-antd/src/views/ai/mindmap/index/modules/Right.vue b/apps/web-antd/src/views/ai/mindmap/index/modules/right.vue
similarity index 97%
rename from apps/web-antd/src/views/ai/mindmap/index/modules/Right.vue
rename to apps/web-antd/src/views/ai/mindmap/index/modules/right.vue
index e5da841a4..a2537f393 100644
--- a/apps/web-antd/src/views/ai/mindmap/index/modules/Right.vue
+++ b/apps/web-antd/src/views/ai/mindmap/index/modules/right.vue
@@ -18,6 +18,7 @@ const props = defineProps<{
   isGenerating: boolean; // 是否正在生成
   isStart: boolean; // 开始状态，开始时需要清除 html
 }>();
+
 const md = MarkdownIt();
 const contentRef = ref<HTMLDivElement>(); // 右侧出来 header 以下的区域
 const mdContainerRef = ref<HTMLDivElement>(); // markdown 的容器，用来滚动到底下的
@@ -30,12 +31,14 @@ let markMap: Markmap | null = null;
 const transformer = new Transformer();
 let resizeObserver: null | ResizeObserver = null;
 const initialized = false;
+
+/** 初始化 */
 onMounted(() => {
   resizeObserver = new ResizeObserver(() => {
     contentAreaHeight.value = contentRef.value?.clientHeight || 0;
     // 先更新高度，再更新思维导图
     if (contentAreaHeight.value && !initialized) {
-      /** 初始化思维导图 */
+      // 初始化思维导图
       try {
         if (!markMap) {
           markMap = Markmap.create(svgRef.value!);
@@ -52,11 +55,15 @@ onMounted(() => {
     resizeObserver.observe(contentRef.value);
   }
 });
+
+/** 卸载 */
 onBeforeUnmount(() => {
   if (resizeObserver && contentRef.value) {
     resizeObserver.unobserve(contentRef.value);
   }
 });
+
+/** 监听 props 变化 */
 watch(props, ({ generatedContent, isGenerating, isEnd, isStart }) => {
   // 开始生成的时候清空一下 markdown 的内容
   if (isStart) {
@@ -73,7 +80,7 @@ watch(props, ({ generatedContent, isGenerating, isEnd, isStart }) => {
 });
 
 /** 更新思维导图的展示 */
-const update = () => {
+function update() {
   try {
     const { root } = transformer.transform(
       processContent(props.generatedContent),
@@ -83,7 +90,8 @@ const update = () => {
   } catch (error: any) {
     console.error(error);
   }
-};
+}
+
 /** 处理内容 */
 function processContent(text: string) {
   const arr: string[] = [];
@@ -98,6 +106,7 @@ function processContent(text: string) {
   }
   return arr.join('\n');
 }
+
 /** 下载图片：download SVG to png file */
 function downloadImage() {
   const svgElement = mindMapRef.value;
@@ -112,6 +121,7 @@ function downloadImage() {
     drawWithImageSize: false,
   });
 }
+
 defineExpose({
   scrollBottom() {
     mdContainerRef.value?.scrollTo(0, mdContainerRef.value?.scrollHeight);
@@ -135,7 +145,6 @@ defineExpose({
       </div>
     </template>
     <div ref="contentRef" class="hide-scroll-bar box-border h-full">
-      <!--展示 markdown 的容器，最终生成的是 html 字符串，直接用 v-html 嵌入-->
       <div
         v-if="isGenerating"
         ref="mdContainerRef"
@@ -146,7 +155,6 @@ defineExpose({
           v-html="html"
         ></div>
       </div>
-
       <div ref="mindMapRef" class="wh-full">
         <svg
           ref="svgRef"
diff --git a/apps/web-antd/src/views/ai/mindmap/manager/data.ts b/apps/web-antd/src/views/ai/mindmap/manager/data.ts
index eb56c92a9..967981d40 100644
--- a/apps/web-antd/src/views/ai/mindmap/manager/data.ts
+++ b/apps/web-antd/src/views/ai/mindmap/manager/data.ts
@@ -1,9 +1,14 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api/system/user';
 
 import { getSimpleUserList } from '#/api/system/user';
 import { getRangePickerDefaultProps } from '#/utils';
 
+/** 关联数据 */
+let userList: SystemUserApi.User[] = [];
+getSimpleUserList().then((data) => (userList = data));
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -12,15 +17,21 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '用户编号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
+        placeholder: '请选择用户',
+        allowClear: true,
       },
     },
     {
       fieldName: 'prompt',
       label: '提示词',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入提示词',
+        clearable: true,
+      },
     },
     {
       fieldName: 'createTime',
@@ -44,9 +55,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       fixed: 'left',
     },
     {
-      minWidth: 180,
+      field: 'userId',
       title: '用户',
-      slots: { default: 'userId' },
+      minWidth: 180,
+      formatter: ({ cellValue }) =>
+        userList.find((user) => user.id === cellValue)?.nickname || '-',
     },
     {
       field: 'prompt',
diff --git a/apps/web-antd/src/views/ai/mindmap/manager/index.vue b/apps/web-antd/src/views/ai/mindmap/manager/index.vue
index 82a2c11aa..b952e87eb 100644
--- a/apps/web-antd/src/views/ai/mindmap/manager/index.vue
+++ b/apps/web-antd/src/views/ai/mindmap/manager/index.vue
@@ -1,9 +1,6 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { AiMindmapApi } from '#/api/ai/mindmap';
-import type { SystemUserApi } from '#/api/system/user';
-
-import { nextTick, onMounted, ref } from 'vue';
 
 import { DocAlert, Page, useVbenDrawer } from '@vben/common-ui';
 
@@ -11,26 +8,23 @@ import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteMindMap, getMindMapPage } from '#/api/ai/mindmap';
-import { getSimpleUserList } from '#/api/system/user';
 import { $t } from '#/locales';
 
-import Right from '../index/modules/Right.vue';
+import Right from '../index/modules/right.vue';
 import { useGridColumns, useGridFormSchema } from './data';
 
-const userList = ref<SystemUserApi.User[]>([]); // 用户列表
-const previewVisible = ref(false); // drawer 的显示隐藏
-const previewContent = ref('');
 const [Drawer, drawerApi] = useVbenDrawer({
   header: false,
   footer: false,
   destroyOnClose: true,
 });
+
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
 }
 
-/** 删除 */
+/** 删除思维导图记录 */
 async function handleDelete(row: AiMindmapApi.MindMap) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
@@ -38,14 +32,18 @@ async function handleDelete(row: AiMindmapApi.MindMap) {
   });
   try {
     await deleteMindMap(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-    });
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     handleRefresh();
   } finally {
     hideLoading();
   }
 }
+
+/** 预览思维导图 */
+async function openPreview(row: AiMindmapApi.MindMap) {
+  drawerApi.setData(row.generatedContent).open();
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -67,6 +65,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -74,17 +73,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<AiMindmapApi.MindMap>,
 });
-async function openPreview(row: AiMindmapApi.MindMap) {
-  previewVisible.value = false;
-  drawerApi.open();
-  await nextTick();
-  previewVisible.value = true;
-  previewContent.value = row.generatedContent;
-}
-onMounted(async () => {
-  // 获得下拉数据
-  userList.value = await getSimpleUserList();
-});
 </script>
 
 <template>
@@ -92,27 +80,16 @@ onMounted(async () => {
     <template #doc>
       <DocAlert title="AI 思维导图" url="https://doc.iocoder.cn/ai/mindmap/" />
     </template>
+
     <Drawer class="w-3/5">
       <Right
-        v-if="previewVisible"
-        :generated-content="previewContent"
+        :generated-content="drawerApi.getData() as any"
         :is-end="true"
         :is-generating="false"
         :is-start="false"
       />
     </Drawer>
     <Grid table-title="思维导图管理列表">
-      <template #toolbar-tools>
-        <TableAction :actions="[]" />
-      </template>
-      <template #userId="{ row }">
-        <span>
-          {{
-            userList.find((item: SystemUserApi.User) => item.id === row.userId)
-              ?.nickname
-          }}
-        </span>
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
@@ -121,6 +98,7 @@ onMounted(async () => {
               type: 'link',
               icon: ACTION_ICON.EDIT,
               auth: ['ai:api-key:update'],
+              disabled: !row.generatedContent,
               onClick: openPreview.bind(null, row),
             },
             {
diff --git a/apps/web-antd/src/views/ai/model/apiKey/data.ts b/apps/web-antd/src/views/ai/model/apiKey/data.ts
index cd78bfe38..47b36d59f 100644
--- a/apps/web-antd/src/views/ai/model/apiKey/data.ts
+++ b/apps/web-antd/src/views/ai/model/apiKey/data.ts
@@ -5,6 +5,7 @@ import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { z } from '#/adapter/form';
+
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -25,24 +26,33 @@ export function useFormSchema(): VbenFormSchema[] {
         options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
         allowClear: true,
       },
-      rules: z.string().min(1, { message: '请输入平台' }),
+      rules: 'required',
     },
     {
       component: 'Input',
       fieldName: 'name',
       label: '名称',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入名称',
+      },
     },
     {
       component: 'Input',
       fieldName: 'apiKey',
       label: '密钥',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入密钥',
+      },
     },
     {
       component: 'Input',
       fieldName: 'url',
       label: '自定义 API URL',
+      componentProps: {
+        placeholder: '请输入自定义 API URL',
+      },
     },
     {
       fieldName: 'status',
@@ -65,6 +75,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入名称',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'platform',
@@ -72,6 +86,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         allowClear: true,
+        placeholder: '请选择平台',
         options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
       },
     },
@@ -81,6 +96,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         allowClear: true,
+        placeholder: '请选择状态',
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
       },
     },
@@ -97,18 +113,22 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
         name: 'CellDict',
         props: { type: DICT_TYPE.AI_PLATFORM },
       },
+      minWidth: 100,
     },
     {
       field: 'name',
       title: '名称',
+      minWidth: 120,
     },
     {
       field: 'apiKey',
       title: '密钥',
+      minWidth: 140,
     },
     {
       field: 'url',
       title: '自定义 API URL',
+      minWidth: 180,
     },
     {
       field: 'status',
@@ -117,6 +137,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
       },
+      minWidth: 80,
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/ai/model/apiKey/index.vue b/apps/web-antd/src/views/ai/model/apiKey/index.vue
index aab147869..1746ba49e 100644
--- a/apps/web-antd/src/views/ai/model/apiKey/index.vue
+++ b/apps/web-antd/src/views/ai/model/apiKey/index.vue
@@ -23,27 +23,25 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 创建 */
+/** 创建 API 密钥 */
 function handleCreate() {
   formModalApi.setData(null).open();
 }
 
-/** 编辑 */
+/** 编辑 API 密钥 */
 function handleEdit(row: AiModelApiKeyApi.ApiKey) {
   formModalApi.setData(row).open();
 }
 
-/** 删除 */
+/** 删除 API 密钥 */
 async function handleDelete(row: AiModelApiKeyApi.ApiKey) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
   });
   try {
-    await deleteApiKey(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteApiKey(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -71,6 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
diff --git a/apps/web-antd/src/views/ai/model/apiKey/modules/form.vue b/apps/web-antd/src/views/ai/model/apiKey/modules/form.vue
index 85985ae83..21f21f305 100644
--- a/apps/web-antd/src/views/ai/model/apiKey/modules/form.vue
+++ b/apps/web-antd/src/views/ai/model/apiKey/modules/form.vue
@@ -27,7 +27,7 @@ const [Form, formApi] = useVbenForm({
       class: 'w-full',
     },
     formItemClass: 'col-span-2',
-    labelWidth: 100,
+    labelWidth: 120,
   },
   layout: 'horizontal',
   schema: useFormSchema(),
@@ -76,7 +76,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/ai/model/chatRole/data.ts b/apps/web-antd/src/views/ai/model/chatRole/data.ts
index f06a832bf..28f809ca9 100644
--- a/apps/web-antd/src/views/ai/model/chatRole/data.ts
+++ b/apps/web-antd/src/views/ai/model/chatRole/data.ts
@@ -8,6 +8,7 @@ import { z } from '#/adapter/form';
 import { getSimpleKnowledgeList } from '#/api/ai/knowledge/knowledge';
 import { getModelSimpleList } from '#/api/ai/model/model';
 import { getToolSimpleList } from '#/api/ai/model/tool';
+
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -32,6 +33,9 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '角色名称',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入角色名称',
+      },
     },
     {
       component: 'ImageUpload',
@@ -62,6 +66,9 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'category',
       label: '角色类别',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入角色类别',
+      },
       dependencies: {
         triggerFields: ['formType'],
         show: (values) => {
@@ -93,7 +100,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         placeholder: '请选择引用知识库',
-        api: () => getSimpleKnowledgeList(),
+        api: getSimpleKnowledgeList,
         labelField: 'name',
         mode: 'multiple',
         valueField: 'id',
@@ -106,13 +113,24 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         placeholder: '请选择引用工具',
-        api: () => getToolSimpleList(),
+        api: getToolSimpleList,
         mode: 'multiple',
         labelField: 'name',
         valueField: 'id',
         allowClear: true,
       },
     },
+    {
+      fieldName: 'mcpClientNames',
+      label: '引用 MCP',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择 MCP',
+        options: getDictOptions(DICT_TYPE.AI_MCP_CLIENT_NAME, 'string'),
+        mode: 'multiple',
+        allowClear: true,
+      },
+    },
     {
       fieldName: 'publicStatus',
       label: '是否公开',
@@ -137,7 +155,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         placeholder: '请输入角色排序',
-        class: 'w-full',
       },
       dependencies: {
         triggerFields: ['formType'],
@@ -209,8 +226,15 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '角色头像',
-      slots: { default: 'avatar' },
+      field: 'avatar',
       minWidth: 140,
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          width: 40,
+          height: 40,
+        },
+      },
     },
     {
       title: '角色类别',
@@ -229,13 +253,33 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '知识库',
-      slots: { default: 'knowledgeIds' },
+      field: 'knowledgeIds',
       minWidth: 100,
+      formatter: ({ cellValue }) => {
+        return !cellValue || cellValue.length === 0
+          ? '-'
+          : `引用${cellValue.length}个`;
+      },
     },
     {
       title: '工具',
-      slots: { default: 'toolIds' },
+      field: 'toolIds',
       minWidth: 100,
+      formatter: ({ cellValue }) => {
+        return !cellValue || cellValue.length === 0
+          ? '-'
+          : `引用${cellValue.length}个`;
+      },
+    },
+    {
+      title: 'MCP',
+      field: 'mcpClientNames',
+      minWidth: 100,
+      formatter: ({ cellValue }) => {
+        return !cellValue || cellValue.length === 0
+          ? '-'
+          : `引用${cellValue.length}个`;
+      },
     },
     {
       field: 'publicStatus',
diff --git a/apps/web-antd/src/views/ai/model/chatRole/index.vue b/apps/web-antd/src/views/ai/model/chatRole/index.vue
index 72304d9d0..bbb940f70 100644
--- a/apps/web-antd/src/views/ai/model/chatRole/index.vue
+++ b/apps/web-antd/src/views/ai/model/chatRole/index.vue
@@ -4,7 +4,7 @@ import type { AiModelChatRoleApi } from '#/api/ai/model/chatRole';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
-import { Image, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteChatRole, getChatRolePage } from '#/api/ai/model/chatRole';
@@ -23,27 +23,25 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 创建 */
+/** 创建聊天角色 */
 function handleCreate() {
   formModalApi.setData({ formType: 'create' }).open();
 }
 
-/** 编辑 */
+/** 编辑聊天角色 */
 function handleEdit(row: AiModelChatRoleApi.ChatRole) {
   formModalApi.setData({ formType: 'update', ...row }).open();
 }
 
-/** 删除 */
+/** 删除聊天角色 */
 async function handleDelete(row: AiModelChatRoleApi.ChatRole) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
   });
   try {
-    await deleteChatRole(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteChatRole(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -71,6 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -100,17 +99,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
-      <template #knowledgeIds="{ row }">
-        <span v-if="!row.knowledgeIds || row.knowledgeIds.length === 0">-</span>
-        <span v-else>引用 {{ row.knowledgeIds.length }} 个</span>
-      </template>
-      <template #toolIds="{ row }">
-        <span v-if="!row.toolIds || row.toolIds.length === 0">-</span>
-        <span v-else>引用 {{ row.toolIds.length }} 个</span>
-      </template>
-      <template #avatar="{ row }">
-        <Image :src="row.avatar" class="h-8 w-8" />
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
diff --git a/apps/web-antd/src/views/ai/model/chatRole/modules/form.vue b/apps/web-antd/src/views/ai/model/chatRole/modules/form.vue
index f1d3ee481..8388f9740 100644
--- a/apps/web-antd/src/views/ai/model/chatRole/modules/form.vue
+++ b/apps/web-antd/src/views/ai/model/chatRole/modules/form.vue
@@ -82,7 +82,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/ai/model/model/data.ts b/apps/web-antd/src/views/ai/model/model/data.ts
index 9dfe948f4..1ef554c59 100644
--- a/apps/web-antd/src/views/ai/model/model/data.ts
+++ b/apps/web-antd/src/views/ai/model/model/data.ts
@@ -1,11 +1,17 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiModelApiKeyApi } from '#/api/ai/model/apiKey';
 
 import { AiModelTypeEnum, CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { z } from '#/adapter/form';
 import { getApiKeySimpleList } from '#/api/ai/model/apiKey';
+
+/** 关联数据 */
+let apiKeyList: AiModelApiKeyApi.ApiKey[] = [];
+getApiKeySimpleList().then((data) => (apiKeyList = data));
+
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -26,7 +32,7 @@ export function useFormSchema(): VbenFormSchema[] {
         options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
         allowClear: true,
       },
-      rules: z.string().min(1, { message: '请输入平台' }),
+      rules: 'required',
     },
     {
       fieldName: 'type',
@@ -47,8 +53,8 @@ export function useFormSchema(): VbenFormSchema[] {
       label: 'API 秘钥',
       component: 'ApiSelect',
       componentProps: {
-        placeholder: '请选择API 秘钥',
-        api: () => getApiKeySimpleList(),
+        placeholder: '请选择 API 秘钥',
+        api: getApiKeySimpleList,
         labelField: 'name',
         valueField: 'id',
         allowClear: true,
@@ -60,12 +66,18 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '模型名字',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入模型名字',
+      },
     },
     {
       component: 'Input',
       fieldName: 'model',
       label: '模型标识',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入模型标识',
+      },
     },
     {
       fieldName: 'sort',
@@ -73,7 +85,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         placeholder: '请输入模型排序',
-        class: 'w-full',
       },
       rules: 'required',
     },
@@ -94,7 +105,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         placeholder: '请输入温度参数',
-        class: 'w-full',
         min: 0,
         max: 2,
       },
@@ -114,7 +124,6 @@ export function useFormSchema(): VbenFormSchema[] {
         min: 0,
         max: 8192,
         placeholder: '请输入回复数 Token 数',
-        class: 'w-full',
       },
       dependencies: {
         triggerFields: ['type'],
@@ -132,7 +141,6 @@ export function useFormSchema(): VbenFormSchema[] {
         min: 0,
         max: 20,
         placeholder: '请输入上下文数量',
-        class: 'w-full',
       },
       dependencies: {
         triggerFields: ['type'],
@@ -152,16 +160,28 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '模型名字',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入模型名字',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'model',
       label: '模型标识',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入模型标识',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'platform',
       label: '模型平台',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入模型平台',
+        allowClear: true,
+      },
     },
   ];
 }
@@ -199,7 +219,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: 'API 秘钥',
-      slots: { default: 'keyId' },
+      field: 'keyId',
+      formatter: ({ cellValue }) => {
+        return (
+          apiKeyList.find((apiKey) => apiKey.id === cellValue)?.name || '-'
+        );
+      },
       minWidth: 140,
     },
     {
@@ -219,7 +244,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'temperature',
       title: '温度参数',
-      minWidth: 80,
+      minWidth: 100,
     },
     {
       title: '回复数 Token 数',
@@ -229,7 +254,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '上下文数量',
       field: 'maxContexts',
-      minWidth: 100,
+      minWidth: 120,
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/ai/model/model/index.vue b/apps/web-antd/src/views/ai/model/model/index.vue
index f27ebce91..158d7b43a 100644
--- a/apps/web-antd/src/views/ai/model/model/index.vue
+++ b/apps/web-antd/src/views/ai/model/model/index.vue
@@ -1,23 +1,18 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { AiModelApiKeyApi } from '#/api/ai/model/apiKey';
 import type { AiModelModelApi } from '#/api/ai/model/model';
 
-import { onMounted, ref } from 'vue';
-
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getApiKeySimpleList } from '#/api/ai/model/apiKey';
 import { deleteModel, getModelPage } from '#/api/ai/model/model';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
 
-const apiKeyList = ref([] as AiModelApiKeyApi.ApiKey[]);
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
@@ -28,27 +23,25 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 创建 */
+/** 创建模型配置 */
 function handleCreate() {
   formModalApi.setData(null).open();
 }
 
-/** 编辑 */
+/** 编辑模型配置 */
 function handleEdit(row: AiModelModelApi.Model) {
   formModalApi.setData(row).open();
 }
 
-/** 删除 */
+/** 删除模型配置 */
 async function handleDelete(row: AiModelModelApi.Model) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
   });
   try {
-    await deleteModel(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteModel(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -76,6 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -83,10 +77,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<AiModelModelApi.Model>,
 });
-onMounted(async () => {
-  // 获得下拉数据
-  apiKeyList.value = await getApiKeySimpleList();
-});
 </script>
 
 <template>
@@ -109,15 +99,6 @@ onMounted(async () => {
           ]"
         />
       </template>
-      <template #keyId="{ row }">
-        <span>
-          {{
-            apiKeyList.find(
-              (item: AiModelApiKeyApi.ApiKey) => item.id === row.keyId,
-            )?.name
-          }}
-        </span>
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
diff --git a/apps/web-antd/src/views/ai/model/model/modules/form.vue b/apps/web-antd/src/views/ai/model/model/modules/form.vue
index 4baaf3b2b..1f5f9a8f1 100644
--- a/apps/web-antd/src/views/ai/model/model/modules/form.vue
+++ b/apps/web-antd/src/views/ai/model/model/modules/form.vue
@@ -77,7 +77,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/ai/model/tool/data.ts b/apps/web-antd/src/views/ai/model/tool/data.ts
index 1dd51850b..0c9f020f5 100644
--- a/apps/web-antd/src/views/ai/model/tool/data.ts
+++ b/apps/web-antd/src/views/ai/model/tool/data.ts
@@ -22,6 +22,9 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '工具名称',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入工具名称',
+      },
     },
     {
       component: 'Textarea',
@@ -52,6 +55,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '工具名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入工具名称',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'status',
@@ -60,6 +67,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         allowClear: true,
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
       },
     },
     {
@@ -80,14 +88,17 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '工具编号',
+      minWidth: 100,
     },
     {
       field: 'name',
       title: '工具名称',
+      minWidth: 120,
     },
     {
       field: 'description',
       title: '工具描述',
+      minWidth: 140,
     },
     {
       field: 'status',
@@ -96,6 +107,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
       },
+      minWidth: 80,
     },
     {
       field: 'createTime',
diff --git a/apps/web-antd/src/views/ai/model/tool/index.vue b/apps/web-antd/src/views/ai/model/tool/index.vue
index 7521222f6..a6c27cd85 100644
--- a/apps/web-antd/src/views/ai/model/tool/index.vue
+++ b/apps/web-antd/src/views/ai/model/tool/index.vue
@@ -23,27 +23,25 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 创建 */
+/** 创建工具 */
 function handleCreate() {
   formModalApi.setData(null).open();
 }
 
-/** 编辑 */
+/** 编辑工具 */
 function handleEdit(row: AiModelToolApi.Tool) {
   formModalApi.setData(row).open();
 }
 
-/** 删除 */
+/** 删除工具 */
 async function handleDelete(row: AiModelToolApi.Tool) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
   });
   try {
-    await deleteTool(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteTool(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -71,6 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
diff --git a/apps/web-antd/src/views/ai/model/tool/modules/form.vue b/apps/web-antd/src/views/ai/model/tool/modules/form.vue
index eeb720d13..3e3c90e78 100644
--- a/apps/web-antd/src/views/ai/model/tool/modules/form.vue
+++ b/apps/web-antd/src/views/ai/model/tool/modules/form.vue
@@ -76,7 +76,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/ai/music/manager/data.ts b/apps/web-antd/src/views/ai/music/manager/data.ts
index d6468eb0d..68a96227e 100644
--- a/apps/web-antd/src/views/ai/music/manager/data.ts
+++ b/apps/web-antd/src/views/ai/music/manager/data.ts
@@ -1,5 +1,6 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api/system/user';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
@@ -7,6 +8,10 @@ import { getDictOptions } from '@vben/hooks';
 import { getSimpleUserList } from '#/api/system/user';
 import { getRangePickerDefaultProps } from '#/utils';
 
+/** 关联数据 */
+let userList: SystemUserApi.User[] = [];
+getSimpleUserList().then((data) => (userList = data));
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -15,21 +20,28 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '用户编号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
+        placeholder: '请选择用户编号',
+        allowClear: true,
       },
     },
     {
       fieldName: 'title',
       label: '音乐名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入音乐名称',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'status',
       label: '绘画状态',
       component: 'Select',
       componentProps: {
+        placeholder: '请选择绘画状态',
         allowClear: true,
         options: getDictOptions(DICT_TYPE.AI_MUSIC_STATUS, 'number'),
       },
@@ -39,6 +51,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '生成模式',
       component: 'Select',
       componentProps: {
+        placeholder: '请选择生成模式',
         allowClear: true,
         options: getDictOptions(DICT_TYPE.AI_GENERATE_MODE, 'number'),
       },
@@ -57,15 +70,21 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '是否发布',
       component: 'Select',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        placeholder: '请选择是否发布',
         allowClear: true,
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
       },
     },
   ];
 }
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(
+  onPublicStatusChange?: (
+    newStatus: boolean,
+    row: any,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -82,7 +101,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       minWidth: 180,
       title: '用户',
-      slots: { default: 'userId' },
+      field: 'userId',
+      formatter: ({ cellValue }) => {
+        return userList.find((user) => user.id === cellValue)?.nickname || '-';
+      },
     },
     {
       field: 'status',
@@ -143,7 +165,16 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       minWidth: 100,
       title: '是否发布',
-      slots: { default: 'publicStatus' },
+      field: 'publicStatus',
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onPublicStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: true,
+          unCheckedValue: false,
+        },
+      },
     },
     {
       field: 'taskId',
diff --git a/apps/web-antd/src/views/ai/music/manager/index.vue b/apps/web-antd/src/views/ai/music/manager/index.vue
index f1309f1e9..586ab19e1 100644
--- a/apps/web-antd/src/views/ai/music/manager/index.vue
+++ b/apps/web-antd/src/views/ai/music/manager/index.vue
@@ -1,29 +1,23 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { AiMusicApi } from '#/api/ai/music';
-import type { SystemUserApi } from '#/api/system/user';
-
-import { onMounted, ref } from 'vue';
 
 import { confirm, DocAlert, Page } from '@vben/common-ui';
-import { AiMusicStatusEnum } from '@vben/constants';
 
-import { Button, message, Switch } from 'ant-design-vue';
+import { Button, message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteMusic, getMusicPage, updateMusic } from '#/api/ai/music';
-import { getSimpleUserList } from '#/api/system/user';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
 
-const userList = ref<SystemUserApi.User[]>([]); // 用户列表
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
 }
 
-/** 删除 */
+/** 删除音乐记录 */
 async function handleDelete(row: AiMusicApi.Music) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
@@ -31,36 +25,45 @@ async function handleDelete(row: AiMusicApi.Music) {
   });
   try {
     await deleteMusic(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-    });
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     handleRefresh();
   } finally {
     hideLoading();
   }
 }
+
 /** 修改是否发布 */
-const handleUpdatePublicStatusChange = async (row: AiMusicApi.Music) => {
-  try {
-    // 修改状态的二次确认
-    const text = row.publicStatus ? '公开' : '私有';
-    await confirm(`确认要"${text}"该图片吗?`).then(async () => {
-      await updateMusic({
-        id: row.id,
-        publicStatus: row.publicStatus,
+async function handleUpdatePublicStatusChange(
+  newStatus: boolean,
+  row: AiMusicApi.Music,
+): Promise<boolean | undefined> {
+  const text = newStatus ? '公开' : '私有';
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `确认要将该音乐切换为【${text}】吗？`,
+    })
+      .then(async () => {
+        // 更新音乐状态
+        await updateMusic({
+          id: row.id,
+          publicStatus: newStatus,
+        });
+        // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
       });
-      handleRefresh();
-    });
-  } catch {
-    row.publicStatus = !row.publicStatus;
-  }
-};
+  });
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(),
+    columns: useGridColumns(handleUpdatePublicStatusChange),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -76,6 +79,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -83,10 +87,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<AiMusicApi.Music>,
 });
-onMounted(async () => {
-  // 获得下拉数据
-  userList.value = await getSimpleUserList();
-});
 </script>
 
 <template>
@@ -99,11 +99,6 @@ onMounted(async () => {
         <TableAction :actions="[]" />
       </template>
 
-      <template #userId="{ row }">
-        <span>
-          {{ userList.find((item) => item.id === row.userId)?.nickname }}
-        </span>
-      </template>
       <template #content="{ row }">
         <Button
           type="link"
@@ -133,13 +128,6 @@ onMounted(async () => {
           封面
         </Button>
       </template>
-      <template #publicStatus="{ row }">
-        <Switch
-          v-model:checked="row.publicStatus"
-          @change="handleUpdatePublicStatusChange(row)"
-          :disabled="row.status !== AiMusicStatusEnum.SUCCESS"
-        />
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
diff --git a/apps/web-antd/src/views/ai/workflow/form/index.vue b/apps/web-antd/src/views/ai/workflow/form/index.vue
index 45de353f4..91f3a7778 100644
--- a/apps/web-antd/src/views/ai/workflow/form/index.vue
+++ b/apps/web-antd/src/views/ai/workflow/form/index.vue
@@ -118,7 +118,7 @@ async function handleSave() {
 
     // 保存成功，提示并跳转到列表页
     message.success('保存成功');
-    tabs.closeCurrentTab();
+    await tabs.closeCurrentTab();
     await router.push({ name: 'AiWorkflow' });
   } catch (error: any) {
     console.error('保存失败:', error);
@@ -152,8 +152,8 @@ async function handleDeploy() {
     // 发布
     await deployModel(formData.value.id);
     message.success('发布成功');
-    // TODO 返回列表页
-    await router.push({ name: '/ai/workflow' });
+    // 返回列表页
+    await router.push({ name: 'AiWorkflow' });
   } catch (error: any) {
     console.error('发布失败:', error);
     message.warning(error.message || '发布失败');
@@ -190,8 +190,8 @@ function handleBack() {
 
 /** 初始化 */
 onMounted(async () => {
-  workflowId.value = route.query.id as string;
-  actionType.value = route.query.type as string;
+  workflowId.value = route.params.id as string;
+  actionType.value = route.params.type as string;
   await initData();
 });
 
diff --git a/apps/web-antd/src/views/ai/workflow/form/modules/workflow-design.vue b/apps/web-antd/src/views/ai/workflow/form/modules/workflow-design.vue
index 3dac7eb3c..becc5505f 100644
--- a/apps/web-antd/src/views/ai/workflow/form/modules/workflow-design.vue
+++ b/apps/web-antd/src/views/ai/workflow/form/modules/workflow-design.vue
@@ -245,7 +245,7 @@ defineExpose({ validate });
       </fieldset>
 
       <fieldset
-        class="m-0 mt-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-4"
+        class="bg-card m-0 mt-10 rounded-lg border border-gray-200 px-3 py-4"
       >
         <legend class="ml-2 px-2.5 text-base font-semibold text-gray-600">
           <h3>运行结果</h3>
diff --git a/apps/web-antd/src/views/ai/workflow/index.vue b/apps/web-antd/src/views/ai/workflow/index.vue
index 2400baca9..a1f6eff11 100644
--- a/apps/web-antd/src/views/ai/workflow/index.vue
+++ b/apps/web-antd/src/views/ai/workflow/index.vue
@@ -28,10 +28,7 @@ function handleCreate() {
 function handleEdit(row: any) {
   router.push({
     name: 'AiWorkflowCreate',
-    query: {
-      id: row.id,
-      type: 'update',
-    },
+    params: { id: row.id, type: 'update' },
   });
 }
 
diff --git a/apps/web-antd/src/views/ai/write/index/index.vue b/apps/web-antd/src/views/ai/write/index/index.vue
index b2355af0e..a907d0dfa 100644
--- a/apps/web-antd/src/views/ai/write/index/index.vue
+++ b/apps/web-antd/src/views/ai/write/index/index.vue
@@ -3,28 +3,24 @@ import type { AiWriteApi } from '#/api/ai/write';
 
 import { nextTick, ref } from 'vue';
 
-import { alert, Page } from '@vben/common-ui';
+import { Page } from '@vben/common-ui';
 import { WriteExample } from '@vben/constants';
 
+import { message } from 'ant-design-vue';
+
 import { writeStream } from '#/api/ai/write';
 
-import Left from './components/Left.vue';
-import Right from './components/Right.vue';
+import Left from './modules/left.vue';
+import Right from './modules/right.vue';
 
 const writeResult = ref(''); // 写作结果
 const isWriting = ref(false); // 是否正在写作中
 const abortController = ref<AbortController>(); // // 写作进行中 abort 控制器(控制 stream 写作)
 
-/** 停止 stream 生成 */
-function stopStream() {
-  abortController.value?.abort();
-  isWriting.value = false;
-}
+const rightRef = ref<InstanceType<typeof Right>>(); // 写作面板
 
-/** 执行写作 */
-const rightRef = ref<InstanceType<typeof Right>>();
-
-function submit(data: Partial<AiWriteApi.Write>) {
+/** 提交写作 */
+function handleSubmit(data: Partial<AiWriteApi.Write>) {
   abortController.value = new AbortController();
   writeResult.value = '';
   isWriting.value = true;
@@ -33,8 +29,8 @@ function submit(data: Partial<AiWriteApi.Write>) {
     onMessage: async (res: any) => {
       const { code, data, msg } = JSON.parse(res.data);
       if (code !== 0) {
-        alert(`写作异常! ${msg}`);
-        stopStream();
+        message.error(`写作异常! ${msg}`);
+        handleStopStream();
         return;
       }
       writeResult.value = writeResult.value + data;
@@ -43,23 +39,29 @@ function submit(data: Partial<AiWriteApi.Write>) {
       rightRef.value?.scrollToBottom();
     },
     ctrl: abortController.value,
-    onClose: stopStream,
+    onClose: handleStopStream,
     onError: (error: any) => {
       console.error('写作异常', error);
-      stopStream();
+      handleStopStream();
       // 需要抛出异常，禁止重试
       throw error;
     },
   });
 }
 
+/** 停止 stream 生成 */
+function handleStopStream() {
+  abortController.value?.abort();
+  isWriting.value = false;
+}
+
 /** 点击示例触发 */
 function handleExampleClick(type: keyof typeof WriteExample) {
   writeResult.value = WriteExample[type].data;
 }
 
 /** 点击重置的时候清空写作的结果*/
-function reset() {
+function handleReset() {
   writeResult.value = '';
 }
 </script>
@@ -70,13 +72,13 @@ function reset() {
       <Left
         :is-writing="isWriting"
         class="mr-4 h-full rounded-lg"
-        @submit="submit"
-        @reset="reset"
+        @submit="handleSubmit"
+        @reset="handleReset"
         @example="handleExampleClick"
       />
       <Right
         :is-writing="isWriting"
-        @stop-stream="stopStream"
+        @stop-stream="handleStopStream"
         ref="rightRef"
         class="flex-grow"
         v-model:content="writeResult"
diff --git a/apps/web-antd/src/views/ai/write/index/components/Left.vue b/apps/web-antd/src/views/ai/write/index/modules/left.vue
similarity index 91%
rename from apps/web-antd/src/views/ai/write/index/components/Left.vue
rename to apps/web-antd/src/views/ai/write/index/modules/left.vue
index f6ae5f647..b84b6a1c0 100644
--- a/apps/web-antd/src/views/ai/write/index/components/Left.vue
+++ b/apps/web-antd/src/views/ai/write/index/modules/left.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// TODO @gjd：应该是 modules 模块，然后小写
 import type { AiWriteApi } from '#/api/ai/write';
 
 import { ref } from 'vue';
@@ -11,7 +10,7 @@ import { IconifyIcon } from '@vben/icons';
 import { createReusableTemplate } from '@vueuse/core';
 import { Button, message, Textarea } from 'ant-design-vue';
 
-import Tag from './Tag.vue';
+import Tag from './tag.vue';
 
 type TabType = AiWriteApi.Write['type'];
 
@@ -34,6 +33,7 @@ function omit(obj: Record<string, any>, keysToOmit: string[]) {
   }
   return result;
 }
+
 /** 点击示例的时候，将定义好的文章作为示例展示出来 */
 function example(type: 'reply' | 'write') {
   formData.value = {
@@ -79,13 +79,11 @@ const initData: AiWriteApi.Write = {
   length: 1,
   format: 1,
 };
-
 const formData = ref<AiWriteApi.Write>({ ...initData });
+const recordFormData = {} as Record<AiWriteTypeEnum, AiWriteApi.Write>; // 用来记录切换之前所填写的数据，切换的时候给赋值回来
 
-/** 用来记录切换之前所填写的数据，切换的时候给赋值回来 */
-const recordFormData = {} as Record<AiWriteTypeEnum, AiWriteApi.Write>;
-/** 切换tab */
-function switchTab(value: TabType) {
+/** 切换 tab */
+function handleSwitchTab(value: TabType) {
   if (value !== selectedTab.value) {
     // 保存之前的久数据
     recordFormData[selectedTab.value] = formData.value;
@@ -96,8 +94,11 @@ function switchTab(value: TabType) {
 }
 
 /** 提交写作 */
-function submit() {
-  if (selectedTab.value === 2 && !formData.value.originalContent) {
+function handleSubmit() {
+  if (
+    selectedTab.value === AiWriteTypeEnum.REPLY &&
+    !formData.value.originalContent
+  ) {
     message.warning('请输入原文');
     return;
   }
@@ -105,12 +106,13 @@ function submit() {
     message.warning(`请输入${selectedTab.value === 1 ? '写作' : '回复'}内容`);
     return;
   }
+
   emit('submit', {
-    /** 撰写的时候没有 originalContent 字段*/
+    // 撰写的时候没有 originalContent 字段
     ...(selectedTab.value === 1
       ? omit(formData.value, ['originalContent'])
       : formData.value),
-    /** 使用选中 tab 值覆盖当前的 type 类型 */
+    // 使用选中 tab 值覆盖当前的 type 类型
     type: selectedTab.value,
   });
 }
@@ -156,7 +158,7 @@ function submit() {
             v-for="tab in tabs"
             :key="tab.value"
             :active="tab.value === selectedTab"
-            :item-click="() => switchTab(tab.value)"
+            :item-click="() => handleSwitchTab(tab.value)"
             :text="tab.text"
             class="relative z-20"
           />
@@ -167,7 +169,7 @@ function submit() {
       class="bg-card box-border h-full w-96 flex-grow overflow-y-auto px-7 pb-2 lg:block"
     >
       <div>
-        <template v-if="selectedTab === 1">
+        <template v-if="selectedTab === AiWriteTypeEnum.WRITING">
           <ReuseLabel
             :hint-click="() => example('write')"
             hint="示例"
@@ -181,7 +183,6 @@ function submit() {
             show-count
           />
         </template>
-
         <template v-else>
           <ReuseLabel
             :hint-click="() => example('reply')"
@@ -195,7 +196,6 @@ function submit() {
             placeholder="请输入原文"
             show-count
           />
-
           <ReuseLabel label="回复内容" />
           <Textarea
             v-model:value="formData.prompt"
@@ -231,7 +231,7 @@ function submit() {
           <Button :disabled="isWriting" class="mr-2" @click="reset">
             重置
           </Button>
-          <Button type="primary" :loading="isWriting" @click="submit">
+          <Button type="primary" :loading="isWriting" @click="handleSubmit">
             生成
           </Button>
         </div>
diff --git a/apps/web-antd/src/views/ai/write/index/components/Right.vue b/apps/web-antd/src/views/ai/write/index/modules/right.vue
similarity index 89%
rename from apps/web-antd/src/views/ai/write/index/components/Right.vue
rename to apps/web-antd/src/views/ai/write/index/modules/right.vue
index bf80dfb56..44f97ef6e 100644
--- a/apps/web-antd/src/views/ai/write/index/components/Right.vue
+++ b/apps/web-antd/src/views/ai/write/index/modules/right.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// TODO @gjd：应该是 modules 模块，然后小写
 import { computed, ref, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
@@ -9,16 +8,15 @@ import { Button, Card, message, Textarea } from 'ant-design-vue';
 
 const props = defineProps({
   content: {
-    // 生成的结果
     type: String,
     default: '',
-  },
+  }, // 生成的结果
   isWriting: {
-    // 是否正在生成文章
     type: Boolean,
     default: false,
-  },
+  }, // 是否正在生成文章
 });
+
 const emits = defineEmits(['update:content', 'stopStream']);
 const { copied, copy } = useClipboard();
 
@@ -58,7 +56,6 @@ watch(copied, (val) => {
     <template #title>
       <h3 class="m-0 flex shrink-0 items-center justify-between px-7">
         <span>预览</span>
-        <!-- 展示在右上角 -->
         <Button
           type="primary"
           v-show="showCopy"
@@ -75,12 +72,11 @@ watch(copied, (val) => {
       class="hide-scroll-bar box-border h-full overflow-y-auto"
     >
       <div
-        class="bg-card relative box-border min-h-full w-full flex-grow p-3 sm:p-7"
+        class="bg-card relative box-border min-h-full w-full flex-grow p-2 sm:p-5"
       >
-        <!-- 终止生成内容的按钮 -->
         <Button
           v-show="isWriting"
-          class="absolute bottom-2 left-1/2 z-40 flex -translate-x-1/2 sm:bottom-5"
+          class="absolute bottom-1 left-1/2 z-40 flex -translate-x-1/2 sm:bottom-2"
           @click="emits('stopStream')"
           size="small"
         >
@@ -94,7 +90,7 @@ watch(copied, (val) => {
         <Textarea
           id="inputId"
           v-model:value="compContent"
-          auto-size
+          :auto-size="true"
           :bordered="false"
           placeholder="生成的内容……"
         />
@@ -130,7 +126,7 @@ watch(copied, (val) => {
   }
 }
 
-// markmap的tool样式覆盖
+// markmap 的 tool 样式覆盖
 :deep(.markmap) {
   width: 100%;
 }
diff --git a/apps/web-antd/src/views/ai/write/index/components/Tag.vue b/apps/web-antd/src/views/ai/write/index/modules/tag.vue
similarity index 93%
rename from apps/web-antd/src/views/ai/write/index/components/Tag.vue
rename to apps/web-antd/src/views/ai/write/index/modules/tag.vue
index 3b1182d9a..f199a8dd1 100644
--- a/apps/web-antd/src/views/ai/write/index/components/Tag.vue
+++ b/apps/web-antd/src/views/ai/write/index/modules/tag.vue
@@ -1,6 +1,5 @@
 <!-- 标签选项 -->
 <script setup lang="ts">
-// TODO @gjd：应该是 modules 模块，然后小写
 const props = withDefaults(
   defineProps<{
     [k: string]: any;
diff --git a/apps/web-antd/src/views/ai/write/manager/data.ts b/apps/web-antd/src/views/ai/write/manager/data.ts
index 7c1768f64..02f39e8e5 100644
--- a/apps/web-antd/src/views/ai/write/manager/data.ts
+++ b/apps/web-antd/src/views/ai/write/manager/data.ts
@@ -1,5 +1,6 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api/system/user';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
@@ -7,6 +8,10 @@ import { getDictOptions } from '@vben/hooks';
 import { getSimpleUserList } from '#/api/system/user';
 import { getRangePickerDefaultProps } from '#/utils';
 
+/** 关联数据 */
+let userList: SystemUserApi.User[] = [];
+getSimpleUserList().then((data) => (userList = data));
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -15,9 +20,11 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '用户编号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
+        placeholder: '请选择用户',
+        allowClear: true,
       },
     },
     {
@@ -26,6 +33,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         allowClear: true,
+        placeholder: '请选择写作类型',
         options: getDictOptions(DICT_TYPE.AI_WRITE_TYPE, 'number'),
       },
     },
@@ -35,7 +43,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         allowClear: true,
-        options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'number'),
+        placeholder: '请选择平台',
+        options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
       },
     },
     {
@@ -62,12 +71,15 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       minWidth: 180,
       title: '用户',
-      slots: { default: 'userId' },
+      field: 'userId',
+      formatter: ({ cellValue }) => {
+        return userList.find((user) => user.id === cellValue)?.nickname || '-';
+      },
     },
     {
       field: 'type',
       title: '写作类型',
-      minWidth: 100,
+      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.AI_WRITE_TYPE },
diff --git a/apps/web-antd/src/views/ai/write/manager/index.vue b/apps/web-antd/src/views/ai/write/manager/index.vue
index ddf8ab7fa..6921f23bb 100644
--- a/apps/web-antd/src/views/ai/write/manager/index.vue
+++ b/apps/web-antd/src/views/ai/write/manager/index.vue
@@ -1,9 +1,6 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { AiWriteApi } from '#/api/ai/write';
-import type { SystemUserApi } from '#/api/system/user';
-
-import { onMounted, ref } from 'vue';
 
 import { DocAlert, Page } from '@vben/common-ui';
 
@@ -11,33 +8,30 @@ import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteWrite, getWritePage } from '#/api/ai/write';
-import { getSimpleUserList } from '#/api/system/user';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
 
-const userList = ref<SystemUserApi.User[]>([]); // 用户列表
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
 }
 
-/** 删除 */
-async function handleDelete(row: AiWriteApi.AiWritePageReq) {
+/** 删除写作记录 */
+async function handleDelete(row: AiWriteApi.Write) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     duration: 0,
   });
   try {
-    await deleteWrite(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-    });
+    await deleteWrite(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     handleRefresh();
   } finally {
     hideLoading();
   }
 }
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -59,16 +53,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<AiWriteApi.AiWritePageReq>,
-});
-onMounted(async () => {
-  // 获得下拉数据
-  userList.value = await getSimpleUserList();
+  } as VxeTableGridOptions<AiWriteApi.Write>,
 });
 </script>
 
@@ -78,14 +69,6 @@ onMounted(async () => {
       <DocAlert title="AI 写作助手" url="https://doc.iocoder.cn/ai/write/" />
     </template>
     <Grid table-title="写作管理列表">
-      <template #toolbar-tools>
-        <TableAction :actions="[]" />
-      </template>
-      <template #userId="{ row }">
-        <span>{{
-          userList.find((item) => item.id === row.userId)?.nickname
-        }}</span>
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
diff --git a/apps/web-antd/src/views/bpm/category/data.ts b/apps/web-antd/src/views/bpm/category/data.ts
index 0667efbc3..14b2b98ed 100644
--- a/apps/web-antd/src/views/bpm/category/data.ts
+++ b/apps/web-antd/src/views/bpm/category/data.ts
@@ -62,12 +62,26 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         min: 0,
         placeholder: '请输入分类排序',
-        class: 'w-full',
       },
     },
   ];
 }
 
+/** 重命名的表单 */
+export function useRenameFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '分类名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分类名',
+      },
+      rules: 'required',
+    },
+  ];
+}
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -143,6 +157,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
         props: { type: DICT_TYPE.COMMON_STATUS },
       },
     },
+    {
+      field: 'sort',
+      title: '分类排序',
+      minWidth: 100,
+    },
     {
       field: 'createTime',
       title: '创建时间',
diff --git a/apps/web-antd/src/views/bpm/category/index.vue b/apps/web-antd/src/views/bpm/category/index.vue
index 475851616..46172f4ce 100644
--- a/apps/web-antd/src/views/bpm/category/index.vue
+++ b/apps/web-antd/src/views/bpm/category/index.vue
@@ -36,16 +36,14 @@ function handleEdit(row: BpmCategoryApi.Category) {
 /** 删除流程分类 */
 async function handleDelete(row: BpmCategoryApi.Category) {
   const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting', [row.code]),
+    content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
   });
   try {
     await deleteCategory(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.code]),
-    });
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
-  } catch {
+  } finally {
     hideLoading();
   }
 }
@@ -71,6 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
diff --git a/apps/web-antd/src/views/bpm/category/modules/form.vue b/apps/web-antd/src/views/bpm/category/modules/form.vue
index 24c81b706..7402f6a6e 100644
--- a/apps/web-antd/src/views/bpm/category/modules/form.vue
+++ b/apps/web-antd/src/views/bpm/category/modules/form.vue
@@ -26,6 +26,13 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
@@ -73,7 +80,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle">
+  <Modal :title="getTitle" class="w-1/3">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/bpm/category/modules/rename-form.vue b/apps/web-antd/src/views/bpm/category/modules/rename-form.vue
index 9dfe3c46e..e9bc301a8 100644
--- a/apps/web-antd/src/views/bpm/category/modules/rename-form.vue
+++ b/apps/web-antd/src/views/bpm/category/modules/rename-form.vue
@@ -11,50 +11,36 @@ import { useVbenForm } from '#/adapter/form';
 import { getCategory, updateCategory } from '#/api/bpm/category';
 import { $t } from '#/locales';
 
+import { useRenameFormSchema } from '../data';
+
 const emit = defineEmits(['success']);
 const formData = ref<BpmCategoryApi.Category>();
 
-// 定义表单结构
-const formSchema = [
-  {
-    fieldName: 'name',
-    label: '分类名',
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入分类名',
-    },
-    rules: 'required',
-  },
-];
-
-// 创建表单
 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
   layout: 'horizontal',
-  schema: formSchema,
+  schema: useRenameFormSchema(),
   showDefaultActions: false,
 });
 
-// 创建模态窗
 const [Modal, modalApi] = useVbenModal({
-  // 保存按钮回调
   async onConfirm() {
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
     modalApi.lock();
-
-    // 提交表单，只更新流程分类名
-    const formValues = await formApi.getValues();
+    // 提交表单
     const data = {
-      id: formData.value?.id,
-      name: formValues.name, // 只更新流程分类名
-      code: formData.value?.code,
-      status: formData.value?.status,
-      description: formData.value?.description,
-      sort: formData.value?.sort,
+      ...formData.value,
+      ...(await formApi.getValues()),
     } as BpmCategoryApi.Category;
-
     try {
       await updateCategory(data);
       // 关闭并提示
@@ -65,29 +51,21 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.unlock();
     }
   },
-
-  // 打开/关闭弹窗回调
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
       return;
     }
-
     // 加载数据
     const data = modalApi.getData<BpmCategoryApi.Category>();
-
     if (!data || !data.id) {
       return;
     }
-
     modalApi.lock();
     try {
-      // 获取流程分类数据
       formData.value = await getCategory(data.id);
-      // 仅设置 name 字段
-      await formApi.setValues({
-        name: formData.value.name,
-      });
+      // 设置到 values
+      await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();
     }
@@ -96,7 +74,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal title="重命名流程分类">
+  <Modal title="重命名流程分类" class="w-1/3">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/index.ts b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/index.ts
new file mode 100644
index 000000000..411e2ceba
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/index.ts
@@ -0,0 +1,2 @@
+// 导出 BPMN 流程设计器相关组件
+export * from './package';
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/ProcessDesigner.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessDesigner.vue
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/designer/ProcessDesigner.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessDesigner.vue
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/ProcessViewer.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessViewer.vue
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/designer/ProcessViewer.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessViewer.vue
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/index.ts b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/index.ts
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/designer/index.ts
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/index.ts
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/index2.ts b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/index2.ts
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/designer/index2.ts
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/index2.ts
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/content-pad/contentPadProvider.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad/contentPadProvider.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/content-pad/contentPadProvider.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad/contentPadProvider.js
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/content-pad/index.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad/index.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/content-pad/index.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad/index.js
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/defaultEmpty.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/defaultEmpty.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/defaultEmpty.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/defaultEmpty.js
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/descriptor/activitiDescriptor.json b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/activitiDescriptor.json
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/descriptor/activitiDescriptor.json
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/activitiDescriptor.json
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/descriptor/camundaDescriptor.json b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/camundaDescriptor.json
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/descriptor/camundaDescriptor.json
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/camundaDescriptor.json
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/descriptor/flowableDescriptor.json b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/flowableDescriptor.json
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/descriptor/flowableDescriptor.json
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/flowableDescriptor.json
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/activitiExtension.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/activitiExtension.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/activitiExtension.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/activitiExtension.js
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/index.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/index.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/index.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/index.js
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/extension.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/extension.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/extension.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/extension.js
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/index.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/index.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/index.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/index.js
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/flowableExtension.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/flowableExtension.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/flowableExtension.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/flowableExtension.js
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/index.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/index.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/index.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/index.js
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/palette/CustomPalette.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/CustomPalette.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/palette/CustomPalette.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/CustomPalette.js
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/palette/index.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/index.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/palette/index.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/index.js
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/palette/paletteProvider.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/paletteProvider.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/palette/paletteProvider.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/paletteProvider.js
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/translate/customTranslate.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/customTranslate.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/translate/customTranslate.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/customTranslate.js
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/translate/zh.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/zh.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/designer/plugins/translate/zh.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/zh.js
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/index.ts b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/index.ts
new file mode 100644
index 000000000..39f7f7f4d
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/index.ts
@@ -0,0 +1,13 @@
+import './theme/index.scss';
+import 'bpmn-js/dist/assets/diagram-js.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
+// TODO @puhui999：样式问题：设计器那，位置不太对；
+
+export { default as MyProcessDesigner } from './designer';
+// TODO @puhui999：流程发起时，预览相关的，需要使用；
+export { default as MyProcessViewer } from './designer/index2';
+export { default as MyProcessPenal } from './penal';
+
+// TODO @jason：【有个迁移的打印】【新增】流程打印，由 [@Lesan](https://gitee.com/LesanOuO) 贡献 [#816](https://gitee.com/yudaocode/yudao-ui-admin-vue3/pulls/816/)、[#1418](https://gitee.com/zhijiantianya/ruoyi-vue-pro/pulls/1418/)、[#817](https://gitee.com/yudaocode/yudao-ui-admin-vue3/pulls/817/)、[#1419](https://gitee.com/zhijiantianya/ruoyi-vue-pro/pulls/1419/)、[#1424](https://gitee.com/zhijiantianya/ruoyi-vue-pro/pulls/1424)、[#819](https://gitee.com/yudaocode/yudao-ui-admin-vue3/pulls/819)、[#821](https://gitee.com/yudaocode/yudao-ui-admin-vue3/pulls/821/)
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/palette/ProcessPalette.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/palette/ProcessPalette.vue
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/palette/ProcessPalette.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/palette/ProcessPalette.vue
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/PropertiesPanel.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/PropertiesPanel.vue
similarity index 98%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/PropertiesPanel.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/PropertiesPanel.vue
index 9621fb703..5371c88d0 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/PropertiesPanel.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/PropertiesPanel.vue
@@ -6,8 +6,8 @@ import { cloneDeep } from '@vben/utils';
 
 import { Collapse } from 'ant-design-vue';
 
-import ElementCustomConfig from '#/components/bpmn-process-designer/package/penal/custom-config/ElementCustomConfig.vue';
-import ElementForm from '#/components/bpmn-process-designer/package/penal/form/ElementForm.vue';
+import ElementCustomConfig from '#/views/bpm/components/bpmn-process-designer/package/penal/custom-config/ElementCustomConfig.vue';
+import ElementForm from '#/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue';
 
 import ElementBaseInfo from './base/ElementBaseInfo.vue';
 import FlowCondition from './flow-condition/FlowCondition.vue';
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/base/ElementBaseInfo.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/base/ElementBaseInfo.vue
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/base/ElementBaseInfo.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/base/ElementBaseInfo.vue
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/custom-config/ElementCustomConfig.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/ElementCustomConfig.vue
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/custom-config/ElementCustomConfig.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/ElementCustomConfig.vue
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue
similarity index 97%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue
index 49e79cd27..cca92ef62 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue
@@ -12,12 +12,12 @@ import {
   Switch,
 } from 'ant-design-vue';
 
-import { convertTimeUnit } from '#/components/simple-process-design/components/nodes-config/utils';
+import { convertTimeUnit } from '#/views/bpm/components/simple-process-design/components/nodes-config/utils';
 import {
   TIME_UNIT_TYPES,
   TIMEOUT_HANDLER_TYPES,
   TimeUnitType,
-} from '#/components/simple-process-design/consts';
+} from '#/views/bpm/components/simple-process-design/consts';
 
 defineOptions({ name: 'ElementCustomConfig4BoundaryEventTimer' });
 const props = defineProps({
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue
similarity index 98%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue
index 61c818379..2271d6f91 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue
@@ -9,7 +9,7 @@
 -->
 <script lang="ts" setup>
 import type { SystemUserApi } from '#/api/system/user';
-import type { ButtonSetting } from '#/components/simple-process-design/consts';
+import type { ButtonSetting } from '#/views/bpm/components/simple-process-design/consts';
 
 import { inject, nextTick, onMounted, ref, toRaw, watch } from 'vue';
 
@@ -38,8 +38,8 @@ import {
   OPERATION_BUTTON_NAME,
   REJECT_HANDLER_TYPES,
   RejectHandlerType,
-} from '#/components/simple-process-design/consts';
-import { useFormFieldsPermission } from '#/components/simple-process-design/helpers';
+} from '#/views/bpm/components/simple-process-design/consts';
+import { useFormFieldsPermission } from '#/views/bpm/components/simple-process-design/helpers';
 
 defineOptions({ name: 'ElementCustomConfig4UserTask' });
 const props = defineProps({
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/custom-config/data.ts b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/data.ts
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/custom-config/data.ts
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/data.ts
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/form/ElementForm.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/form/ElementForm.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/index.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/index.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/index.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/index.js
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/ProcessListenerDialog.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ProcessListenerDialog.vue
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/ProcessListenerDialog.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ProcessListenerDialog.vue
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
similarity index 99%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
index 460f72a84..6ab38bcf9 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
@@ -18,7 +18,7 @@ import {
   TableColumn,
 } from 'ant-design-vue';
 
-import ProcessListenerDialog from '#/components/bpmn-process-designer/package/penal/listeners/ProcessListenerDialog.vue';
+import ProcessListenerDialog from '#/views/bpm/components/bpmn-process-designer/package/penal/listeners/ProcessListenerDialog.vue';
 
 import { createListenerObject, updateElementExtensions } from '../../utils';
 import {
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/utilSelf.ts b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/utilSelf.ts
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/utilSelf.ts
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/utilSelf.ts
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
similarity index 99%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
index a41bf3376..546c29a8f 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
@@ -16,7 +16,7 @@ import {
 import {
   APPROVE_METHODS,
   ApproveMethodType,
-} from '#/components/simple-process-design/consts';
+} from '#/views/bpm/components/simple-process-design/consts';
 
 defineOptions({ name: 'ElementMultiInstance' });
 
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/other/ElementOtherConfig.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/other/ElementOtherConfig.vue
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/other/ElementOtherConfig.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/other/ElementOtherConfig.vue
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/ElementTask.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/ElementTask.vue
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/task/ElementTask.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/ElementTask.vue
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/data.ts b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/data.ts
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/task/data.ts
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/data.ts
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ProcessExpressionDialog.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ProcessExpressionDialog.vue
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ProcessExpressionDialog.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ProcessExpressionDialog.vue
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ServiceTask.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ServiceTask.vue
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ServiceTask.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ServiceTask.vue
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
similarity index 99%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
index 90d23db5b..6eb41df3c 100644
--- a/apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
@@ -40,8 +40,8 @@ import {
   CandidateStrategy,
   FieldPermissionType,
   MULTI_LEVEL_DEPT,
-} from '#/components/simple-process-design/consts';
-import { useFormFieldsPermission } from '#/components/simple-process-design/helpers';
+} from '#/views/bpm/components/simple-process-design/consts';
+import { useFormFieldsPermission } from '#/views/bpm/components/simple-process-design/helpers';
 
 import ProcessExpressionDialog from './ProcessExpressionDialog.vue';
 
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/time-event-config/CycleConfig.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/CycleConfig.vue
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/time-event-config/CycleConfig.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/CycleConfig.vue
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/time-event-config/DurationConfig.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/DurationConfig.vue
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/time-event-config/DurationConfig.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/DurationConfig.vue
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/theme/index.scss b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/theme/index.scss
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/theme/index.scss
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/theme/index.scss
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/theme/process-designer.scss b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/theme/process-designer.scss
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/theme/process-designer.scss
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/theme/process-designer.scss
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/theme/process-panel.scss b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/theme/process-panel.scss
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/theme/process-panel.scss
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/theme/process-panel.scss
diff --git a/apps/web-antd/src/components/bpmn-process-designer/package/utils.ts b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/utils.ts
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/package/utils.ts
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/utils.ts
diff --git a/apps/web-antd/src/components/bpmn-process-designer/src/highlight/index.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/highlight/index.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/src/highlight/index.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/highlight/index.js
diff --git a/apps/web-antd/src/components/bpmn-process-designer/src/modules/custom-renderer/CustomRenderer.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/modules/custom-renderer/CustomRenderer.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/src/modules/custom-renderer/CustomRenderer.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/modules/custom-renderer/CustomRenderer.js
diff --git a/apps/web-antd/src/components/bpmn-process-designer/src/modules/custom-renderer/index.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/modules/custom-renderer/index.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/src/modules/custom-renderer/index.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/modules/custom-renderer/index.js
diff --git a/apps/web-antd/src/components/bpmn-process-designer/src/modules/rules/CustomRules.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/modules/rules/CustomRules.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/src/modules/rules/CustomRules.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/modules/rules/CustomRules.js
diff --git a/apps/web-antd/src/components/bpmn-process-designer/src/modules/rules/index.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/modules/rules/index.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/src/modules/rules/index.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/modules/rules/index.js
diff --git a/apps/web-antd/src/components/bpmn-process-designer/src/translations.ts b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/translations.ts
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/src/translations.ts
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/translations.ts
diff --git a/apps/web-antd/src/components/bpmn-process-designer/src/utils/directive/clickOutSide.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/utils/directive/clickOutSide.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/src/utils/directive/clickOutSide.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/utils/directive/clickOutSide.js
diff --git a/apps/web-antd/src/components/bpmn-process-designer/src/utils/index.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/utils/index.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/src/utils/index.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/utils/index.js
diff --git a/apps/web-antd/src/components/bpmn-process-designer/src/utils/xml2json.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/utils/xml2json.js
similarity index 100%
rename from apps/web-antd/src/components/bpmn-process-designer/src/utils/xml2json.js
rename to apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/utils/xml2json.js
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/child-process-node-config.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue
similarity index 99%
rename from apps/web-antd/src/components/simple-process-design/components/nodes-config/child-process-node-config.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue
index 012e4ac7a..25557024f 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/child-process-node-config.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue
@@ -27,7 +27,7 @@ import {
   Switch,
 } from 'ant-design-vue';
 
-import { getFormDetail } from '#/api/bpm/form';
+import { getForm } from '#/api/bpm/form';
 import { getModelList } from '#/api/bpm/model';
 
 import {
@@ -354,7 +354,7 @@ const loadFormInfo = async () => {
   );
   if (!childInfo) return;
 
-  const formInfo = await getFormDetail(childInfo.formId);
+  const formInfo = await getForm(childInfo.formId);
   childFormFieldOptions.value = [];
   if (formInfo.fields) {
     formInfo.fields.forEach((fieldStr: string) => {
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/condition-node-config.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/condition-node-config.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue
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/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/router-node-config.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/router-node-config.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/start-user-node-config.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/start-user-node-config.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/trigger-node-config.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/trigger-node-config.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/utils.ts b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/utils.ts
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes-config/utils.ts
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/utils.ts
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/child-process-node.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/child-process-node.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes/child-process-node.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/child-process-node.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/copy-task-node.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/copy-task-node.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes/copy-task-node.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/copy-task-node.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/delay-timer-node.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/delay-timer-node.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/end-event-node.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/end-event-node.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/exclusive-node.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/exclusive-node.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/inclusive-node.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/inclusive-node.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/modules/process-instance-data.ts b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-data.ts
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes/modules/process-instance-data.ts
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-data.ts
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/modules/process-instance-modal.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-modal.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes/modules/process-instance-modal.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-modal.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/modules/task-list-data.ts b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-data.ts
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes/modules/task-list-data.ts
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-data.ts
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/modules/task-list-modal.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-modal.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes/modules/task-list-modal.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-modal.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/node-handler.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/node-handler.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/parallel-node.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/parallel-node.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes/parallel-node.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/parallel-node.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/router-node.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/router-node.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes/router-node.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/router-node.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/start-user-node.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/start-user-node.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/trigger-node.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/trigger-node.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes/trigger-node.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/trigger-node.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/user-task-node.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/user-task-node.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/process-node-tree.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/process-node-tree.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/simple-process-designer.vue
similarity index 98%
rename from apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/simple-process-designer.vue
index 22b4978bf..659f0a332 100644
--- a/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/simple-process-designer.vue
@@ -17,7 +17,7 @@ import { handleTree } from '@vben/utils';
 
 import { Button } from 'ant-design-vue';
 
-import { getFormDetail } from '#/api/bpm/form';
+import { getForm } from '#/api/bpm/form';
 import { getUserGroupSimpleList } from '#/api/bpm/userGroup';
 import { getSimpleDeptList } from '#/api/system/dept';
 import { getSimplePostList } from '#/api/system/post';
@@ -82,7 +82,7 @@ watch(
   () => props.modelFormId,
   async (newVal) => {
     if (newVal) {
-      const form = await getFormDetail(newVal);
+      const form = await getForm(newVal);
       formFields.value = form?.fields;
     } else {
       // 如果 modelFormId 为空，清空表单字段
diff --git a/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/simple-process-model.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/simple-process-model.vue
diff --git a/apps/web-antd/src/components/simple-process-design/components/simple-process-viewer.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/simple-process-viewer.vue
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/components/simple-process-viewer.vue
rename to apps/web-antd/src/views/bpm/components/simple-process-design/components/simple-process-viewer.vue
diff --git a/apps/web-antd/src/components/simple-process-design/consts.ts b/apps/web-antd/src/views/bpm/components/simple-process-design/consts.ts
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/consts.ts
rename to apps/web-antd/src/views/bpm/components/simple-process-design/consts.ts
diff --git a/apps/web-antd/src/components/simple-process-design/helpers.ts b/apps/web-antd/src/views/bpm/components/simple-process-design/helpers.ts
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/helpers.ts
rename to apps/web-antd/src/views/bpm/components/simple-process-design/helpers.ts
diff --git a/apps/web-antd/src/components/simple-process-design/index.ts b/apps/web-antd/src/views/bpm/components/simple-process-design/index.ts
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/index.ts
rename to apps/web-antd/src/views/bpm/components/simple-process-design/index.ts
diff --git a/apps/web-antd/src/components/simple-process-design/styles/iconfont.ttf b/apps/web-antd/src/views/bpm/components/simple-process-design/styles/iconfont.ttf
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/styles/iconfont.ttf
rename to apps/web-antd/src/views/bpm/components/simple-process-design/styles/iconfont.ttf
diff --git a/apps/web-antd/src/components/simple-process-design/styles/iconfont.woff b/apps/web-antd/src/views/bpm/components/simple-process-design/styles/iconfont.woff
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/styles/iconfont.woff
rename to apps/web-antd/src/views/bpm/components/simple-process-design/styles/iconfont.woff
diff --git a/apps/web-antd/src/components/simple-process-design/styles/iconfont.woff2 b/apps/web-antd/src/views/bpm/components/simple-process-design/styles/iconfont.woff2
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/styles/iconfont.woff2
rename to apps/web-antd/src/views/bpm/components/simple-process-design/styles/iconfont.woff2
diff --git a/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss b/apps/web-antd/src/views/bpm/components/simple-process-design/styles/simple-process-designer.scss
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
rename to apps/web-antd/src/views/bpm/components/simple-process-design/styles/simple-process-designer.scss
diff --git a/apps/web-antd/src/components/simple-process-design/styles/svg/simple-process-bg.svg b/apps/web-antd/src/views/bpm/components/simple-process-design/styles/svg/simple-process-bg.svg
similarity index 100%
rename from apps/web-antd/src/components/simple-process-design/styles/svg/simple-process-bg.svg
rename to apps/web-antd/src/views/bpm/components/simple-process-design/styles/svg/simple-process-bg.svg
diff --git a/apps/web-antd/src/views/bpm/form/data.ts b/apps/web-antd/src/views/bpm/form/data.ts
index 8235398dc..20ed60414 100644
--- a/apps/web-antd/src/views/bpm/form/data.ts
+++ b/apps/web-antd/src/views/bpm/form/data.ts
@@ -1,52 +1,7 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-
-import { z } from '#/adapter/form';
-
-/** 新增/修改的表单 */
-export function useFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'id',
-      component: 'Input',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    {
-      fieldName: 'name',
-      label: '表单名称',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入表单名称',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'status',
-      label: '状态',
-      component: 'RadioGroup',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-        buttonStyle: 'solid',
-        optionType: 'button',
-      },
-      rules: z.number().default(CommonStatusEnum.ENABLE),
-    },
-    {
-      fieldName: 'remark',
-      label: '备注',
-      component: 'Textarea',
-      componentProps: {
-        placeholder: '请输入备注',
-      },
-    },
-  ];
-}
+import { DICT_TYPE } from '@vben/constants';
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
diff --git a/apps/web-antd/src/views/bpm/form/designer/data.ts b/apps/web-antd/src/views/bpm/form/designer/data.ts
new file mode 100644
index 000000000..36a993ca7
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/form/designer/data.ts
@@ -0,0 +1,48 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '表单名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入表单名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/bpm/form/designer/index.vue b/apps/web-antd/src/views/bpm/form/designer/index.vue
index 3b3f1bdc2..60c3a3bbd 100644
--- a/apps/web-antd/src/views/bpm/form/designer/index.vue
+++ b/apps/web-antd/src/views/bpm/form/designer/index.vue
@@ -2,18 +2,20 @@
 import { computed, onMounted, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
 import { IconifyIcon } from '@vben/icons';
 
 import FcDesigner from '@form-create/antd-designer';
-import { Button, message } from 'ant-design-vue';
+import { Button, message, Spin } from 'ant-design-vue';
 
-import { getFormDetail } from '#/api/bpm/form';
+import { getForm } from '#/api/bpm/form';
 import {
   setConfAndFields,
   useFormCreateDesigner,
 } from '#/components/form-create';
 import { router } from '#/router';
-import Form from '#/views/bpm/form/modules/form.vue';
+
+import Form from './modules/form.vue';
 
 defineOptions({ name: 'BpmFormEditor' });
 
@@ -23,21 +25,20 @@ const props = defineProps<{
   type: 'copy' | 'create' | 'edit';
 }>();
 
-/** 流程表单详情 */
+const loading = ref(false);
+const tabs = useTabs();
 const flowFormConfig = ref();
+const designerRef = ref<InstanceType<typeof FcDesigner>>();
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
 });
 
-const designerRef = ref<InstanceType<typeof FcDesigner>>();
-
-/** 表单设计器配置 */
 const designerConfig = ref({
   switchType: [], // 是否可以切换组件类型,或者可以相互切换的字段
   autoActive: true, // 是否自动选中拖入的组件
-  useTemplate: false, // 是否生成vue2语法的模板组件
+  useTemplate: false, // 是否生成 Vue 语法的模板组件
   formOptions: {
     form: {
       labelWidth: '100px', // 设置默认的 label 宽度为 100px
@@ -61,11 +62,11 @@ const designerConfig = ref({
   showInputData: true, // 是否显示录入按钮
   showDevice: true, // 是否显示多端适配选项
   appendConfigData: [], // 定义渲染规则所需的formData
-});
+}); // 表单设计器配置
 
 useFormCreateDesigner(designerRef); // 表单设计器增强
 
-// 计算属性：获取当前需要加载的表单ID
+/** 计算属性：获取当前需要加载的表单 ID */
 const currentFormId = computed(() => {
   switch (props.type) {
     case 'copy': {
@@ -81,28 +82,27 @@ const currentFormId = computed(() => {
   }
 });
 
-// 加载表单配置
+/** 加载表单配置 */
 async function loadFormConfig(id: number) {
+  loading.value = true;
   try {
-    const formDetail = await getFormDetail(id);
+    const formDetail = await getForm(id);
     flowFormConfig.value = formDetail;
     if (designerRef.value) {
       setConfAndFields(designerRef, formDetail.conf, formDetail.fields);
     }
-  } catch {
-    message.error('加载表单配置失败');
+  } finally {
+    loading.value = false;
   }
 }
 
-// 初始化设计器
+/** 初始化设计器 */
 async function initializeDesigner() {
   const id = currentFormId.value;
-
   if (props.type === 'copy' && !id) {
-    message.error('复制ID不能为空');
+    message.error('复制 ID 不能为空');
     return;
   }
-
   if (id) {
     await loadFormConfig(Number(id));
   }
@@ -120,15 +120,14 @@ function handleSave() {
 }
 
 /** 返回列表页 */
-function onBack() {
+function handleBack() {
+  tabs.closeCurrentTab();
   router.push({
-    path: '/bpm/manager/form',
-    query: {
-      refresh: '1',
-    },
+    name: 'BpmForm',
   });
 }
 
+/** 初始化 */
 onMounted(() => {
   initializeDesigner();
 });
@@ -136,19 +135,17 @@ onMounted(() => {
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onBack" />
+    <FormModal @success="handleBack" />
 
-    <FcDesigner
-      class="h-full min-h-[500px]"
-      ref="designerRef"
-      :config="designerConfig"
-    >
-      <template #handle>
-        <Button size="small" type="primary" @click="handleSave">
-          <IconifyIcon icon="mdi:content-save" />
-          保存
-        </Button>
-      </template>
-    </FcDesigner>
+    <Spin :spinning="loading">
+      <FcDesigner ref="designerRef" height="90vh" :config="designerConfig">
+        <template #handle>
+          <Button size="small" type="primary" @click="handleSave">
+            <IconifyIcon icon="mdi:content-save" />
+            保存
+          </Button>
+        </template>
+      </FcDesigner>
+    </Spin>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/bpm/form/modules/form.vue b/apps/web-antd/src/views/bpm/form/designer/modules/form.vue
similarity index 93%
rename from apps/web-antd/src/views/bpm/form/modules/form.vue
rename to apps/web-antd/src/views/bpm/form/designer/modules/form.vue
index 5ff14b201..42766c63d 100644
--- a/apps/web-antd/src/views/bpm/form/modules/form.vue
+++ b/apps/web-antd/src/views/bpm/form/designer/modules/form.vue
@@ -39,20 +39,18 @@ const [Form, formApi] = useVbenForm({
 
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
-    // 表单验证
     const { valid } = await formApi.validate();
-    if (!valid) return;
-
-    // 锁定模态框
+    if (!valid) {
+      return;
+    }
     modalApi.lock();
+    // 提交表单
     try {
       // 获取表单数据
       const data = (await formApi.getValues()) as BpmFormApi.Form;
-
       // 编码表单配置和表单字段
       data.conf = encodeConf(designerComponent);
       data.fields = encodeFields(designerComponent);
-
       // 保存表单数据
       if (formData.value?.id) {
         await (editorAction.value === 'copy'
@@ -61,7 +59,7 @@ const [Modal, modalApi] = useVbenModal({
       } else {
         await createForm(data);
       }
-
+      // 关闭并提示
       await modalApi.close();
       emit('success');
       message.success($t('ui.actionMessage.operationSuccess'));
@@ -76,15 +74,16 @@ const [Modal, modalApi] = useVbenModal({
       designerComponent.value = undefined;
       return;
     }
-
+    // 加载数据
     const data = modalApi.getData<any>();
-    if (!data) return;
-
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
     // 设置表单设计器组件
     designerComponent.value = data.designer;
     formData.value = data.formConfig;
     editorAction.value = data.action;
-
     // 如果是复制，表单名称后缀添加 _copy ，id 置空
     if (editorAction.value === 'copy' && formData.value) {
       formData.value = {
@@ -93,8 +92,8 @@ const [Modal, modalApi] = useVbenModal({
         id: undefined,
       };
     }
-
     try {
+      // 设置到 values
       if (formData.value) {
         await formApi.setValues(formData.value);
       }
diff --git a/apps/web-antd/src/views/bpm/form/index.vue b/apps/web-antd/src/views/bpm/form/index.vue
index fff4d2a8e..f3b9d26c8 100644
--- a/apps/web-antd/src/views/bpm/form/index.vue
+++ b/apps/web-antd/src/views/bpm/form/index.vue
@@ -2,8 +2,7 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { BpmFormApi } from '#/api/bpm/form';
 
-import { watch } from 'vue';
-import { useRoute } from 'vue-router';
+import { onActivated } from 'vue';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
@@ -24,7 +23,7 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 新增 */
+/** 新增表单 */
 function handleCreate() {
   router.push({
     name: 'BpmFormEditor',
@@ -34,7 +33,7 @@ function handleCreate() {
   });
 }
 
-/** 编辑 */
+/** 编辑表单 */
 function handleEdit(row: BpmFormApi.Form) {
   router.push({
     name: 'BpmFormEditor',
@@ -45,7 +44,7 @@ function handleEdit(row: BpmFormApi.Form) {
   });
 }
 
-/** 复制 */
+/** 复制表单 */
 function handleCopy(row: BpmFormApi.Form) {
   router.push({
     name: 'BpmFormEditor',
@@ -56,35 +55,31 @@ function handleCopy(row: BpmFormApi.Form) {
   });
 }
 
-/** 删除 */
+/** 删除表单 */
 async function handleDelete(row: BpmFormApi.Form) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
   });
   try {
-    await deleteForm(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteForm(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
   }
 }
+
+/** 查看表单详情 */
 async function handleDetail(row: BpmFormApi.Form) {
   detailModalApi.setData(row).open();
 }
 
-/** 详情弹窗 */
 const [DetailModal, detailModalApi] = useVbenModal({
   connectedComponent: Detail,
   destroyOnClose: true,
 });
 
-/** 检测路由参数 */
-const route = useRoute();
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -106,26 +101,19 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
-    cellConfig: {
-      height: 64,
-    },
   } as VxeTableGridOptions<BpmFormApi.Form>,
 });
 
-watch(
-  () => route.query.refresh,
-  (val) => {
-    if (val === '1') {
-      handleRefresh();
-    }
-  },
-  { immediate: true },
-);
+/** 激活时 */
+onActivated(() => {
+  handleRefresh();
+});
 </script>
 
 <template>
diff --git a/apps/web-antd/src/views/bpm/form/modules/detail.vue b/apps/web-antd/src/views/bpm/form/modules/detail.vue
index 6d23ba279..f0b612b8a 100644
--- a/apps/web-antd/src/views/bpm/form/modules/detail.vue
+++ b/apps/web-antd/src/views/bpm/form/modules/detail.vue
@@ -5,10 +5,9 @@ import { useVbenModal } from '@vben/common-ui';
 
 import FormCreate from '@form-create/ant-design-vue';
 
-import { getFormDetail } from '#/api/bpm/form';
+import { getForm } from '#/api/bpm/form';
 import { setConfAndFields2 } from '#/components/form-create';
 
-/** 详情 */
 const formConfig = ref<any>({});
 
 const [Modal, modalApi] = useVbenModal({
@@ -24,7 +23,7 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     try {
-      formConfig.value = await getFormDetail(data.id);
+      formConfig.value = await getForm(data.id);
       setConfAndFields2(
         formConfig.value,
         formConfig.value.conf,
diff --git a/apps/web-antd/src/views/bpm/group/data.ts b/apps/web-antd/src/views/bpm/group/data.ts
index 5adde2085..01cc0b23d 100644
--- a/apps/web-antd/src/views/bpm/group/data.ts
+++ b/apps/web-antd/src/views/bpm/group/data.ts
@@ -1,13 +1,22 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { h } from 'vue';
 
 import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
+import { Tag } from 'ant-design-vue';
+
 import { z } from '#/adapter/form';
 import { getSimpleUserList } from '#/api/system/user';
 import { getRangePickerDefaultProps } from '#/utils';
 
+/** 关联数据 */
+let userList: SystemUserApi.User[] = [];
+getSimpleUserList().then((data) => (userList = data));
+
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -42,7 +51,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         placeholder: '请选择成员',
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         mode: 'tags',
@@ -119,7 +128,21 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'userIds',
       title: '成员',
       minWidth: 200,
-      slots: { default: 'userIds' },
+      slots: {
+        default: ({ row }) => {
+          const userIds = row.userIds || [];
+          return userIds.map((userId: number) =>
+            h(
+              Tag,
+              {
+                color: 'blue',
+                class: 'mr-1',
+              },
+              () => userList.find((u) => u.id === userId)?.nickname,
+            ),
+          );
+        },
+      },
     },
     {
       field: 'status',
diff --git a/apps/web-antd/src/views/bpm/group/index.vue b/apps/web-antd/src/views/bpm/group/index.vue
index 5ab0b6395..fbe93289e 100644
--- a/apps/web-antd/src/views/bpm/group/index.vue
+++ b/apps/web-antd/src/views/bpm/group/index.vue
@@ -1,17 +1,13 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { BpmUserGroupApi } from '#/api/bpm/userGroup';
-import type { SystemUserApi } from '#/api/system/user';
-
-import { onMounted, ref } from 'vue';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
-import { message, Tag } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteUserGroup, getUserGroupPage } from '#/api/bpm/userGroup';
-import { getSimpleUserList } from '#/api/system/user';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
@@ -45,22 +41,13 @@ async function handleDelete(row: BpmUserGroupApi.UserGroup) {
   });
   try {
     await deleteUserGroup(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
-  } catch {
+  } finally {
     hideLoading();
   }
 }
 
-const userList = ref<SystemUserApi.User[]>([]);
-/** 初始化 */
-onMounted(async () => {
-  // 加载用户列表
-  userList.value = await getSimpleUserList();
-});
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -82,6 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -112,11 +100,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
-      <template #userIds="{ row }">
-        <Tag v-for="userId in row.userIds" :key="userId" color="blue">
-          {{ userList.find((u) => u.id === userId)?.nickname }}
-        </Tag>
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
diff --git a/apps/web-antd/src/views/bpm/group/modules/form.vue b/apps/web-antd/src/views/bpm/group/modules/form.vue
index bd90dd5d0..849d0b900 100644
--- a/apps/web-antd/src/views/bpm/group/modules/form.vue
+++ b/apps/web-antd/src/views/bpm/group/modules/form.vue
@@ -54,16 +54,14 @@ const [Modal, modalApi] = useVbenModal({
       // 关闭并提示
       await modalApi.close();
       emit('success');
-      message.success({
-        content: $t('ui.actionMessage.operationSuccess'),
-        key: 'action_process_msg',
-      });
+      message.success($t('ui.actionMessage.operationSuccess'));
     } finally {
       modalApi.unlock();
     }
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
+      formData.value = undefined;
       return;
     }
     // 加载数据
diff --git a/apps/web-antd/src/views/bpm/model/modules/data.ts b/apps/web-antd/src/views/bpm/model/data.ts
similarity index 100%
rename from apps/web-antd/src/views/bpm/model/modules/data.ts
rename to apps/web-antd/src/views/bpm/model/data.ts
diff --git a/apps/web-antd/src/views/bpm/model/definition/data.ts b/apps/web-antd/src/views/bpm/model/definition/data.ts
index e3a2d0499..dda15f371 100644
--- a/apps/web-antd/src/views/bpm/model/definition/data.ts
+++ b/apps/web-antd/src/views/bpm/model/definition/data.ts
@@ -4,7 +4,7 @@ import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
 import { DICT_TYPE } from '@vben/constants';
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions<BpmProcessDefinitionApi.ProcessDefinition>['columns'] {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
diff --git a/apps/web-antd/src/views/bpm/model/definition/index.vue b/apps/web-antd/src/views/bpm/model/definition/index.vue
index 9028168b4..759086bbb 100644
--- a/apps/web-antd/src/views/bpm/model/definition/index.vue
+++ b/apps/web-antd/src/views/bpm/model/definition/index.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
 
 import { onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
@@ -12,73 +13,69 @@ import { Button, Tooltip } from 'ant-design-vue';
 import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getProcessDefinitionPage } from '#/api/bpm/definition';
 
-// 导入 FormCreate 表单详情
 import FormCreateDetail from '../../form/modules/detail.vue';
 import { useGridColumns } from './data';
 
 defineOptions({ name: 'BpmProcessDefinition' });
 
+const route = useRoute();
+const router = useRouter();
+
 const [FormCreateDetailModal, formCreateDetailModalApi] = useVbenModal({
   connectedComponent: FormCreateDetail,
   destroyOnClose: true,
 });
 
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
 /** 查看表单详情 */
-function handleFormDetail(row: any) {
+function handleFormDetail(row: BpmProcessDefinitionApi.ProcessDefinition) {
   if (row.formType === BpmModelFormType.NORMAL) {
     const data = {
       id: row.formId,
     };
     formCreateDetailModalApi.setData(data).open();
   } else {
-    // TODO 待实现
+    // TODO 待实现 jason 这里要改么？
     console.warn('业务表单待实现', row);
   }
 }
 
-const router = useRouter();
 /** 恢复流程模型 */
-async function openModelForm(id?: number) {
+async function handleRecover(row: BpmProcessDefinitionApi.ProcessDefinition) {
   await router.push({
     name: 'BpmModelUpdate',
-    params: { id, type: 'definition' },
+    params: { id: row.id, type: 'definition' },
   });
 }
 
-/** 刷新表格 */
-function handleRefresh() {
-  gridApi.query();
-}
-
-const route = useRoute();
-
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
-    pagerConfig: {
-      enabled: true,
-    },
     proxyConfig: {
       ajax: {
         query: async ({ page }) => {
-          const params = {
-            pageNo: page?.currentPage,
-            pageSize: page?.pageSize,
-            key: route.query.key,
-          };
-          return await getProcessDefinitionPage(params);
+          return await getProcessDefinitionPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            key: route.query.key as string,
+          });
         },
       },
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
     },
-  } as VxeTableGridOptions,
+  } as VxeTableGridOptions<BpmProcessDefinitionApi.ProcessDefinition>,
 });
 
 /** 初始化 */
@@ -89,21 +86,24 @@ onMounted(() => {
 
 <template>
   <Page auto-content-height>
+    <FormCreateDetailModal />
     <template #doc>
       <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
     </template>
     <Grid table-title="流程定义列表">
       <template #startUsers="{ row }">
-        <template v-if="!row.startUsers?.length">全部可见</template>
+        <template v-if="!row.startUsers || row.startUsers.length === 0">
+          全部可见
+        </template>
         <template v-else-if="row.startUsers.length === 1">
-          {{ row.startUsers[0].nickname }}
+          {{ row.startUsers[0]!.nickname }}
         </template>
         <template v-else>
           <Tooltip
             placement="top"
             :title="row.startUsers.map((user: any) => user.nickname).join(',')"
           >
-            {{ row.startUsers[0].nickname }}等
+            {{ row.startUsers[0]!.nickname }}等
             {{ row.startUsers.length }} 人可见
           </Tooltip>
         </template>
@@ -132,12 +132,11 @@ onMounted(() => {
               label: '恢复',
               type: 'link',
               auth: ['bpm:model:update'],
-              onClick: openModelForm.bind(null, row.id),
+              onClick: handleRecover.bind(null, row),
             },
           ]"
         />
       </template>
     </Grid>
-    <FormCreateDetailModal />
   </Page>
 </template>
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 786f2bfde..713bd440b 100644
--- a/apps/web-antd/src/views/bpm/model/form/index.vue
+++ b/apps/web-antd/src/views/bpm/model/form/index.vue
@@ -39,7 +39,6 @@ import ProcessDesign from './modules/process-design.vue';
 
 defineOptions({ name: 'BpmModelCreate' });
 
-// 流程定义类型
 type BpmProcessDefinitionType = Omit<
   BpmProcessDefinitionApi.ProcessDefinition,
   'modelId' | 'modelType'
@@ -49,42 +48,17 @@ type BpmProcessDefinitionType = Omit<
 };
 
 const router = useRouter();
-
 const route = useRoute();
-
 const userStore = useUserStore();
+const tabs = useTabs();
 
-// 基础信息组件引用
-const basicInfoRef = ref<InstanceType<typeof BasicInfo>>();
-// 表单设计组件引用
-const formDesignRef = ref<InstanceType<typeof FormDesign>>();
-// 流程设计组件引用
-const processDesignRef = ref<InstanceType<typeof ProcessDesign>>();
-// 更多设置组件引用
-const extraSettingRef = ref<InstanceType<typeof ExtraSetting>>();
-
-/** 步骤校验函数 */
-async function validateBasic() {
-  await basicInfoRef.value?.validate();
-}
-
-/** 表单设计校验 */
-async function validateForm() {
-  await formDesignRef.value?.validate();
-}
-
-/** 流程设计校验 */
-async function validateProcess() {
-  await processDesignRef.value?.validate();
-}
-
-/** 更多设置校验 */
-async function validateExtra() {
-  await extraSettingRef.value?.validate();
-}
+const basicInfoRef = ref<InstanceType<typeof BasicInfo>>(); // 基础信息组件引用
+const formDesignRef = ref<InstanceType<typeof FormDesign>>(); // 表单设计组件引用
+const processDesignRef = ref<InstanceType<typeof ProcessDesign>>(); // 流程设计组件引用
+const extraSettingRef = ref<InstanceType<typeof ExtraSetting>>(); // 更多设置组件引用
 
+const actionType = route.params.type as string; // 操作类型：create、copy、update
 const currentStep = ref(-1); // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成
-
 const steps = [
   { title: '基本信息', validator: validateBasic },
   { title: '表单设计', validator: validateForm },
@@ -92,7 +66,6 @@ const steps = [
   { title: '更多设置', validator: validateExtra },
 ];
 
-// 表单数据
 const formData: any = ref({
   id: undefined,
   name: '',
@@ -128,22 +101,38 @@ const formData: any = ref({
     summary: [],
   },
   allowWithdrawTask: false,
-});
+}); // 表单数据
+const processData = ref<any>(); // 流程数据
 
-// 流程数据
-const processData = ref<any>();
-
-provide('processData', processData);
-provide('modelData', formData);
-
-// 数据列表
 const formList = ref<BpmFormApi.Form[]>([]);
 const categoryList = ref<BpmCategoryApi.Category[]>([]);
 const userList = ref<SystemUserApi.User[]>([]);
 const deptList = ref<SystemDeptApi.Dept[]>([]);
 
+provide('processData', processData);
+provide('modelData', formData);
+
+/** 步骤校验函数 */
+async function validateBasic() {
+  await basicInfoRef.value?.validate();
+}
+
+/** 表单设计校验 */
+async function validateForm() {
+  await formDesignRef.value?.validate();
+}
+
+/** 流程设计校验 */
+async function validateProcess() {
+  await processDesignRef.value?.validate();
+}
+
+/** 更多设置校验 */
+async function validateExtra() {
+  await extraSettingRef.value?.validate();
+}
+
 /** 初始化数据 */
-const actionType = route.params.type as string;
 async function initData() {
   if (actionType === 'definition') {
     // 情况一：流程定义场景（恢复）
@@ -212,7 +201,6 @@ async function initData() {
 
   // 最终，设置 currentStep 切换到第一步
   currentStep.value = 0;
-
   // 以前未配置更多设置的流程
   extraSettingRef.value?.initData();
 }
@@ -291,7 +279,6 @@ async function handleSave() {
         formData.value.id = await createModel(modelData);
         // 提示成功
         message.success('复制成功，可点击【发布】按钮，进行发布模型');
-
         break;
       }
       case 'definition': {
@@ -299,15 +286,13 @@ async function handleSave() {
         await updateModel(modelData);
         // 提示成功
         message.success('恢复成功，可点击【发布】按钮，进行发布模型');
-
         break;
       }
       case 'update': {
-        // 修改场景
+        // 情况二：修改场景
         await updateModel(modelData);
         // 提示成功
         message.success('修改成功，可点击【发布】按钮，进行发布模型');
-
         break;
       }
       default: {
@@ -320,10 +305,11 @@ async function handleSave() {
 
     // 返回列表页（排除更新的情况）
     if (actionType !== 'update') {
-      router.push({ path: '/bpm/manager/model' });
+      await router.push({ name: 'BpmModel' });
     }
   } catch (error: any) {
     console.error('保存失败:', error);
+    // TODO @jason：这个提示，还要么？？？
     // message.warning(error.msg || '请完善所有步骤的必填信息');
   }
 }
@@ -331,30 +317,30 @@ async function handleSave() {
 /** 发布操作 */
 async function handleDeploy() {
   try {
-    // 修改场景下直接发布，新增场景下需要先确认
+    // 1.1 修改场景下直接发布，新增场景下需要先确认
     if (!formData.value.id) {
       await confirm('是否确认发布该流程？');
     }
-    // 校验所有步骤
+    // 1.2 校验所有步骤
     await validateAllSteps();
 
-    // 更新表单数据
+    // 2.1 更新表单数据
     const modelData = {
       ...formData.value,
     };
-
-    // 先保存所有数据
+    // 2.2 先保存所有数据
     if (formData.value.id) {
       await updateModel(modelData);
     } else {
       const result = await createModel(modelData);
       formData.value.id = result.id;
     }
-
-    // 发布
+    // 2.3 发布
     await deployModel(formData.value.id);
+
+    // 3. 路由并提示
     message.success('发布成功');
-    await router.push({ path: '/bpm/manager/model' });
+    await router.push({ name: 'BpmModel' });
   } catch (error: any) {
     console.error('发布失败:', error);
     message.warning(error.message || '发布失败');
@@ -386,14 +372,10 @@ async function handleStepClick(index: number) {
   }
 }
 
-const tabs = useTabs();
-
 /** 返回列表页 */
 function handleBack() {
-  // 关闭当前页签
   tabs.closeCurrentTab();
-  // 跳转到列表页，使用路径， 目前后端的路由 name： 'name'+ menuId
-  router.push({ path: '/bpm/manager/model' });
+  router.push({ name: 'BpmModel' });
 }
 
 /** 初始化 */
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 5afadd00a..5da27465e 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
@@ -53,21 +53,15 @@ const [DeptSelectModalComp, deptSelectModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-// 表单引用
-const formRef = ref();
+const formRef = ref(); // 表单引用
+const modelData = defineModel<any>(); // 创建本地数据副本
 
-// 选中的发起人
-const selectedStartUsers = ref<SystemUserApi.User[]>([]);
+const selectedStartUsers = ref<SystemUserApi.User[]>([]); // 选中的发起人
+const selectedStartDepts = ref<SystemDeptApi.Dept[]>([]); // 选中的发起部门
 
-// 选中的发起部门
-const selectedStartDepts = ref<SystemDeptApi.Dept[]>([]);
-
-// 选中的流程管理员
-const selectedManagerUsers = ref<SystemUserApi.User[]>([]);
+const selectedManagerUsers = ref<SystemUserApi.User[]>([]); // 选中的流程管理员
 const currentSelectType = ref<'manager' | 'start'>('start');
-// 选中的用户
-const selectedUsers = ref<number[]>();
-
+const selectedUsers = ref<number[]>(); // 选中的用户
 const rules: Record<string, Rule[]> = {
   name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
   key: [
@@ -99,10 +93,7 @@ const rules: Record<string, Rule[]> = {
   ],
 };
 
-// 创建本地数据副本
-const modelData = defineModel<any>();
-
-// 初始化选中的用户
+/** 初始化选中的用户 */
 watch(
   () => modelData.value,
   (newVal) => {
@@ -140,6 +131,7 @@ function openStartUserSelect() {
 function openStartDeptSelect() {
   deptSelectModalApi.setData({ selectedList: selectedStartDepts.value }).open();
 }
+
 /** 处理部门选择确认 */
 function handleDeptSelectConfirm(depts: SystemDeptApi.Dept[]) {
   modelData.value = {
@@ -191,7 +183,6 @@ function handleStartUserTypeChange(value: SelectValue) {
         startUserIds: [],
         startDeptIds: [],
       };
-
       break;
     }
     case 1: {
@@ -199,7 +190,6 @@ function handleStartUserTypeChange(value: SelectValue) {
         ...modelData.value,
         startDeptIds: [],
       };
-
       break;
     }
     case 2: {
@@ -207,7 +197,6 @@ function handleStartUserTypeChange(value: SelectValue) {
         ...modelData.value,
         startUserIds: [],
       };
-
       break;
     }
   }
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue b/apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue
index 7d621cfeb..781ab2a92 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue
@@ -10,15 +10,15 @@ import { BpmModelFormType } from '@vben/constants';
 
 import { message } from 'ant-design-vue';
 
-import { getFormDetail } from '#/api/bpm/form';
+import { getForm } from '#/api/bpm/form';
 import {
   MyProcessDesigner,
   MyProcessPenal,
-} from '#/components/bpmn-process-designer/package';
+} from '#/views/bpm/components/bpmn-process-designer/package';
 // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
-import CustomContentPadProvider from '#/components/bpmn-process-designer/package/designer/plugins/content-pad';
+import CustomContentPadProvider from '#/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad';
 // 自定义左侧菜单（修改 默认任务 为 用户任务）
-import CustomPaletteProvider from '#/components/bpmn-process-designer/package/designer/plugins/palette';
+import CustomPaletteProvider from '#/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette';
 
 defineOptions({ name: 'BpmModelEditor' });
 
@@ -31,17 +31,13 @@ defineProps<{
 
 const emit = defineEmits(['success', 'init-finished']);
 
-// 表单信息
-const formFields = ref<string[]>([]);
-// 表单类型，暂仅限流程表单
-const formType = ref(BpmModelFormType.NORMAL);
+const formFields = ref<string[]>([]); // 表单信息
+const formType = ref(BpmModelFormType.NORMAL); // 表单类型，暂仅限流程表单 TODO @jason：是不是已经支持 业务表单 了？
 provide('formFields', formFields);
 provide('formType', formType);
 
-// 注入流程数据
-const xmlString = inject('processData') as Ref;
-// 注入模型数据
-const modelData = inject('modelData') as Ref;
+const xmlString = inject('processData') as Ref; // 注入流程数据
+const modelData = inject('modelData') as Ref; // 注入模型数据
 
 const modeler = shallowRef(); // BPMN Modeler
 const processDesigner = ref();
@@ -57,7 +53,6 @@ const model = ref<BpmModelApi.Model>(); // 流程模型的信息
 
 /** 初始化 modeler */
 const initModeler = async (item: any) => {
-  // 先初始化模型数据
   model.value = modelData.value;
   modeler.value = item;
 };
@@ -78,7 +73,7 @@ watch(
   () => modelData.value.formId,
   async (newFormId) => {
     if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
-      const data = await getFormDetail(newFormId);
+      const data = await getForm(newFormId);
       formFields.value = data.fields;
     } else {
       formFields.value = [];
@@ -87,7 +82,7 @@ watch(
   { immediate: true },
 );
 
-// 在组件卸载时清理
+/** 在组件卸载时清理 */
 onBeforeUnmount(() => {
   modeler.value = null;
   // 清理全局实例
@@ -127,9 +122,10 @@ onBeforeUnmount(() => {
   </ContentWrap>
 </template>
 <style lang="scss">
+// TODO @jason：tailwind？
 .process-panel__container {
   position: absolute;
-  top: 172px;
+  top: 110px;
   right: 70px;
 }
 </style>
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue b/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue
index 0af97f9dc..2a4361cba 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue
@@ -26,11 +26,11 @@ import {
 } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
-import * as FormApi from '#/api/bpm/form';
+import { getForm } from '#/api/bpm/form';
 import {
   HttpRequestSetting,
   parseFormFields,
-} from '#/components/simple-process-design';
+} from '#/views/bpm/components/simple-process-design';
 
 const modelData = defineModel<any>();
 
@@ -179,8 +179,7 @@ const formFieldOptions4Summary = computed(() => {
   });
 });
 const unParsedFormFields = ref<string[]>([]); // 未解析的表单字段
-// 暴露给子组件 HttpRequestSetting 使用
-provide('formFields', unParsedFormFields);
+provide('formFields', unParsedFormFields); // 暴露给子组件 HttpRequestSetting 使用
 
 /** 兼容以前未配置更多设置的流程 */
 function initData() {
@@ -230,7 +229,7 @@ watch(
   () => modelData.value.formId,
   async (newFormId) => {
     if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
-      const data = await FormApi.getFormDetail(newFormId);
+      const data = await getForm(newFormId);
       const result: Array<{ field: string; title: string }> = [];
       if (data.fields) {
         unParsedFormFields.value = data.fields;
@@ -246,8 +245,8 @@ watch(
   },
   { immediate: true },
 );
-// 表单引用
-const formRef = ref();
+const formRef = ref(); // 表单引用
+
 /** 表单校验 */
 async function validate() {
   await formRef.value?.validate();
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/form-design.vue b/apps/web-antd/src/views/bpm/model/form/modules/form-design.vue
index 90d80ff2d..7f42c2e98 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/form-design.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/form-design.vue
@@ -21,7 +21,7 @@ import {
   Tooltip,
 } from 'ant-design-vue';
 
-import { getFormDetail } from '#/api/bpm/form';
+import { getForm } from '#/api/bpm/form';
 import { setConfAndFields2 } from '#/components/form-create';
 
 const props = defineProps({
@@ -33,10 +33,7 @@ const props = defineProps({
 
 const formRef = ref();
 
-// 创建本地数据副本
-const modelData = defineModel<any>();
-
-// 表单预览数据
+const modelData = defineModel<any>(); // 创建本地数据副本
 const formPreview = ref({
   formData: {} as any,
   rule: [],
@@ -45,25 +42,7 @@ const formPreview = ref({
     resetBtn: false,
     formData: {},
   },
-});
-
-/** 监听表单ID变化，加载表单数据 */
-watch(
-  () => modelData.value.formId,
-  async (newFormId) => {
-    if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
-      const data = await getFormDetail(newFormId);
-      setConfAndFields2(formPreview.value, data.conf, data.fields);
-      // 设置只读
-      formPreview.value.rule.forEach((item: any) => {
-        item.props = { ...item.props, disabled: true };
-      });
-    } else {
-      formPreview.value.rule = [];
-    }
-  },
-  { immediate: true },
-);
+}); // 表单预览数据
 
 const rules: Record<string, Rule[]> = {
   formType: [{ required: true, message: '表单类型不能为空', trigger: 'blur' }],
@@ -76,6 +55,24 @@ const rules: Record<string, Rule[]> = {
   ],
 };
 
+/** 监听表单 ID 变化，加载表单数据 */
+watch(
+  () => modelData.value.formId,
+  async (newFormId) => {
+    if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
+      const data = await getForm(newFormId);
+      setConfAndFields2(formPreview.value, data.conf, data.fields);
+      // 设置只读
+      formPreview.value.rule.forEach((item: any) => {
+        item.props = { ...item.props, disabled: true };
+      });
+    } else {
+      formPreview.value.rule = [];
+    }
+  },
+  { immediate: true },
+);
+
 /** 表单校验 */
 async function validate() {
   await formRef.value?.validate();
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 6944eaf6d..8f2495b75 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
@@ -8,9 +8,7 @@ import { BpmModelType } from '@vben/constants';
 import BpmModelEditor from './bpm-model-editor.vue';
 import SimpleModelDesign from './simple-model-design.vue';
 
-// 创建本地数据副本
-const modelData = defineModel<any>();
-
+const modelData = defineModel<any>(); // 创建本地数据副本
 const processData = inject('processData') as Ref;
 
 const simpleDesign = ref();
@@ -30,6 +28,7 @@ async function validate() {
   }
   return true;
 }
+
 /** 处理设计器保存成功 */
 async function handleDesignSuccess(data?: any) {
   if (data) {
@@ -39,7 +38,7 @@ async function handleDesignSuccess(data?: any) {
       bpmnXml: modelData.value.type === BpmModelType.BPMN ? data : null,
       simpleModel: modelData.value.type === BpmModelType.BPMN ? null : data,
     };
-    // 使用emit更新父组件的数据
+    // 使用 emit 更新父组件的数据
     await nextTick();
     // 更新表单的模型数据部分
     modelData.value = newModelData;
@@ -50,6 +49,7 @@ async function handleDesignSuccess(data?: any) {
 const showDesigner = computed(() => {
   return Boolean(modelData.value?.key && modelData.value?.name);
 });
+
 defineExpose({ validate });
 </script>
 <template>
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 ea1e50611..ba8ae33a8 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
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 
 import { ContentWrap } from '@vben/common-ui';
 
-import { SimpleProcessDesigner } from '#/components/simple-process-design';
+import { SimpleProcessDesigner } from '#/views/bpm/components/simple-process-design';
 
 defineOptions({ name: 'SimpleModelDesign' });
 
@@ -16,6 +16,7 @@ defineProps<{
 }>();
 
 const emit = defineEmits(['success']);
+
 const designerRef = ref();
 
 /** 保存成功回调 */
@@ -24,10 +25,12 @@ function handleSuccess(data?: any) {
     emit('success', data);
   }
 }
+
 /** 设计器配置校验 */
 async function validateConfig() {
   return await designerRef.value.validate();
 }
+
 defineExpose({ validateConfig });
 </script>
 <template>
diff --git a/apps/web-antd/src/views/bpm/model/index.vue b/apps/web-antd/src/views/bpm/model/index.vue
index 39a3689c3..91c504f9e 100644
--- a/apps/web-antd/src/views/bpm/model/index.vue
+++ b/apps/web-antd/src/views/bpm/model/index.vue
@@ -17,35 +17,29 @@ import {
 import { getModelList } from '#/api/bpm/model';
 import { router } from '#/router';
 
-// 流程分类对话框
 import CategoryForm from '../category/modules/form.vue';
 import CategoryDraggableModel from './modules/category-draggable-model.vue';
 
-// 新建流程分类对话框
 const [CategoryFormModal, categoryFormModalApi] = useVbenModal({
   connectedComponent: CategoryForm,
   destroyOnClose: true,
 });
-// 模型列表加载状态
-const modelListSpinning = ref(false);
-// 保存排序状态
-const saveSortLoading = ref(false);
-// 按照 category 分组的数据
-const categoryGroup = ref<ModelCategoryInfo[]>([]);
-// 未排序前的原始数据
-const originalData = ref<ModelCategoryInfo[]>([]);
-// 可以排序元素的容器
-const sortable = useTemplateRef<HTMLElement>('categoryGroupRef');
-// 排序引用，以便后续启用或禁用排序
-const sortableInstance = ref<any>(null);
-// 分类排序状态
-const isCategorySorting = ref(false);
-// 查询参数
+
+const modelListSpinning = ref(false); // 模型列表加载状态
+
+const saveSortLoading = ref(false); // 保存排序状态
+const categoryGroup = ref<ModelCategoryInfo[]>([]); // 按照 category 分组的数据
+const originalData = ref<ModelCategoryInfo[]>([]); // 未排序前的原始数据
+
+const sortable = useTemplateRef<HTMLElement>('categoryGroupRef'); // 可以排序元素的容器
+const sortableInstance = ref<any>(null); // 排序引用，以便后续启用或禁用排序
+const isCategorySorting = ref(false); // 分类排序状态
+
 const queryParams = reactive({
   name: '',
-});
+}); // 查询参数
 
-// 监听分类排序模式切换
+/** 监听分类排序模式切换 */
 watch(
   () => isCategorySorting.value,
   (newValue) => {
@@ -131,10 +125,10 @@ async function handleCategorySortSubmit() {
     // 保存排序逻辑
     const ids = categoryGroup.value.map((item: any) => item.id);
     await updateCategorySortBatch(ids);
+    message.success('分类排序成功');
   } finally {
     saveSortLoading.value = false;
   }
-  message.success('分类排序成功');
   isCategorySorting.value = false;
   // 刷新列表
   await getList();
@@ -156,44 +150,44 @@ async function handleCategorySortSubmit() {
       v-spinning="modelListSpinning"
     >
       <template #extra>
-        <Input
-          v-model:value="queryParams.name"
-          placeholder="搜索流程"
-          allow-clear
-          @press-enter="getList"
-          class="!w-60"
-        />
-        <Button class="ml-2" type="primary" @click="createModel">
-          <IconifyIcon icon="lucide:plus" /> 新建模型
-        </Button>
-        <Dropdown class="ml-2" placement="bottomRight" arrow>
-          <Button>
-            <template #icon>
-              <div class="flex items-center justify-center">
-                <IconifyIcon icon="lucide:settings" />
-              </div>
-            </template>
+        <div v-if="!isCategorySorting">
+          <Input
+            v-model:value="queryParams.name"
+            placeholder="搜索流程"
+            allow-clear
+            @press-enter="getList"
+            class="!w-60"
+          />
+          <Button class="ml-2" type="primary" @click="createModel">
+            <IconifyIcon icon="lucide:plus" /> 新建模型
           </Button>
-          <template #overlay>
-            <Menu @click="(e) => handleCommand(e.key as string)">
-              <Menu.Item key="handleCategoryAdd">
-                <div class="flex items-center gap-1">
-                  <IconifyIcon icon="lucide:plus" />
-                  新建分类
+          <Dropdown class="ml-2" placement="bottomRight" arrow>
+            <Button>
+              <template #icon>
+                <div class="flex items-center justify-center">
+                  <IconifyIcon icon="lucide:settings" />
                 </div>
-              </Menu.Item>
-              <Menu.Item key="handleCategorySort">
-                <div class="flex items-center gap-1">
-                  <IconifyIcon icon="lucide:align-start-vertical" />
-                  分类排序
-                </div>
-              </Menu.Item>
-            </Menu>
-          </template>
-        </Dropdown>
-      </template>
-      <div class="flex h-full items-center justify-between pl-5">
-        <div class="mb-4 mr-6" v-if="isCategorySorting">
+              </template>
+            </Button>
+            <template #overlay>
+              <Menu @click="(e) => handleCommand(e.key as string)">
+                <Menu.Item key="handleCategoryAdd">
+                  <div class="flex items-center gap-1">
+                    <IconifyIcon icon="lucide:plus" />
+                    新建分类
+                  </div>
+                </Menu.Item>
+                <Menu.Item key="handleCategorySort">
+                  <div class="flex items-center gap-1">
+                    <IconifyIcon icon="lucide:align-start-vertical" />
+                    分类排序
+                  </div>
+                </Menu.Item>
+              </Menu>
+            </template>
+          </Dropdown>
+        </div>
+        <div class="flex h-full items-center justify-between" v-else>
           <Button @click="handleCategorySortCancel" class="mr-3">
             取 消
           </Button>
@@ -205,7 +199,7 @@ async function handleCategorySortSubmit() {
             保存排序
           </Button>
         </div>
-      </div>
+      </template>
 
       <!-- 按照分类，展示其所属的模型列表 -->
       <div class="px-3" ref="categoryGroupRef">
diff --git a/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue b/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
index 00d224764..e285077d2 100644
--- a/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
+++ b/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
@@ -36,11 +36,9 @@ import {
 } from '#/api/bpm/model';
 import { $t } from '#/locales';
 
-// 导入重命名表单
 import CategoryRenameForm from '../../category/modules/rename-form.vue';
-// 导入 FormCreate 表单详情
 import FormCreateDetail from '../../form/modules/detail.vue';
-import { useGridColumns } from './data';
+import { useGridColumns } from '../data';
 
 const props = defineProps<{
   categoryInfo: ModelCategoryInfo;
@@ -50,46 +48,26 @@ const props = defineProps<{
 
 const emit = defineEmits(['success']);
 
-/** 重命名分类对话框 */
 const [CategoryRenameModal, categoryRenameModalApi] = useVbenModal({
   connectedComponent: CategoryRenameForm,
   destroyOnClose: true,
 });
 
-/** 流程表单详情对话框 */
 const [FormCreateDetailModal, formCreateDetailModalApi] = useVbenModal({
   connectedComponent: FormCreateDetail,
   destroyOnClose: true,
 });
 
 const router = useRouter();
-// 获取当前登录用户Id
-const userStore = useUserStore();
-const userId = userStore.userInfo?.id;
+const userId = useUserStore().userInfo?.id;
+
 const isModelSorting = ref(false);
 const originalData = ref<BpmModelApi.Model[]>([]);
 const modelList = ref<BpmModelApi.Model[]>([]);
-// 根据是否为第一个分类, 来设置初始展开状态
-const isExpand = ref(!!props.isFirst);
+// TODO @jason：可以全部展开么？ @芋艿 上次讨论。好像是因为性能问题才只展开第一个分类
+const isExpand = ref(props.isFirst); // 根据是否为第一个分类, 来设置初始展开状态
 
-const [Grid, gridApi] = useVbenVxeGrid({
-  gridOptions: {
-    columns: useGridColumns(),
-    pagerConfig: {
-      enabled: false,
-    },
-    data: modelList.value,
-    rowConfig: {
-      keyField: 'id',
-    },
-    toolbarConfig: {
-      enabled: false, // 完全禁用工具栏
-    },
-  } as VxeTableGridOptions,
-});
-
-// 排序引用，以便后续启用或禁用排序
-const sortableInstance = ref<any>(null);
+const sortableInstance = ref<any>(null); // 排序引用，以便后续启用或禁用排序
 /** 解决 v-model 问题，使用计算属性 */
 const expandKeys = computed(() => (isExpand.value ? ['1'] : []));
 
@@ -105,6 +83,24 @@ const hasPermiDeploy = computed(() => {
   return hasAccessByCodes(['bpm:model:deploy']);
 });
 
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    data: modelList.value,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions,
+});
+
 /** 处理模型的排序 */
 function handleModelSort() {
   // 保存初始数据并确保数据完整
@@ -126,7 +122,6 @@ function handleModelSort() {
     // 已存在实例，则启用排序功能
     sortableInstance.value.option('disabled', false);
   } else {
-    const sortableClass = `.category-${props.categoryInfo.id} .vxe-table .vxe-table--body-wrapper:not(.fixed-right--wrapper) .vxe-table--body tbody`;
     // 确保使用最新的数据
     modelList.value = cloneDeep(props.categoryInfo.modelList);
     // 更新表格数据
@@ -134,32 +129,41 @@ function handleModelSort() {
       data: modelList.value,
     });
 
-    sortableInstance.value = useSortable(sortableClass, modelList.value, {
-      draggable: '.vxe-body--row',
-      animation: 150,
-      handle: '.drag-handle',
-      disabled: false,
-      onEnd: ({ newDraggableIndex, oldDraggableIndex }) => {
-        if (oldDraggableIndex !== newDraggableIndex) {
-          modelList.value.splice(
-            newDraggableIndex ?? 0,
-            0,
-            modelList.value.splice(oldDraggableIndex ?? 0, 1)[0]!,
-          );
-        }
+    sortableInstance.value = useSortable(
+      `.category-${props.categoryInfo.id} .vxe-table .vxe-table--body-wrapper:not(.fixed-right--wrapper) .vxe-table--body tbody`,
+      modelList.value,
+      {
+        draggable: '.vxe-body--row',
+        animation: 150,
+        handle: '.drag-handle',
+        disabled: false,
+        onEnd: ({ newDraggableIndex, oldDraggableIndex }) => {
+          if (oldDraggableIndex !== newDraggableIndex) {
+            modelList.value.splice(
+              newDraggableIndex ?? 0,
+              0,
+              modelList.value.splice(oldDraggableIndex ?? 0, 1)[0]!,
+            );
+          }
+        },
       },
-    });
+    );
   }
 }
 
 /** 处理模型的排序提交 */
 async function handleModelSortSubmit() {
+  // 确保数据已经正确同步
+  if (!modelList.value || modelList.value.length === 0) {
+    message.error('排序数据异常，请重试');
+    return;
+  }
+
+  const hideLoading = message.loading({
+    content: '正在保存排序...',
+    duration: 0,
+  });
   try {
-    // 确保数据已经正确同步
-    if (!modelList.value || modelList.value.length === 0) {
-      message.error('排序数据异常，请重试');
-      return;
-    }
     // 保存排序
     const ids = modelList.value.map((item) => item.id);
     await updateModelSortBatch(ids);
@@ -169,6 +173,8 @@ async function handleModelSortSubmit() {
     emit('success');
   } catch (error) {
     console.error('排序保存失败', error);
+  } finally {
+    hideLoading();
   }
 }
 
@@ -206,17 +212,29 @@ async function handleDeleteCategory() {
     return;
   }
 
-  confirm({
+  await confirm({
+    beforeClose: async ({ isConfirm }) => {
+      if (!isConfirm) return;
+      // 发起删除
+      const hideLoading = message.loading({
+        content: `正在删除分类: "${props.categoryInfo.name}"...`,
+        duration: 0,
+      });
+      try {
+        await deleteCategory(props.categoryInfo.id);
+      } finally {
+        hideLoading();
+      }
+      return true;
+    },
     content: `确定要删除[${props.categoryInfo.name}]吗？`,
-  }).then(async () => {
-    // 发起删除
-    await deleteCategory(props.categoryInfo.id);
-    message.success(
-      $t('ui.actionMessage.deleteSuccess', [props.categoryInfo.name]),
-    );
-    // 刷新列表
-    emit('success');
+    icon: 'question',
   });
+  message.success(
+    $t('ui.actionMessage.deleteSuccess', [props.categoryInfo.name]),
+  );
+  // 刷新列表
+  emit('success');
 }
 
 /** 处理表单详情点击 */
@@ -227,7 +245,7 @@ function handleFormDetail(row: any) {
     };
     formCreateDetailModalApi.setData(data).open();
   } else {
-    // TODO 待实现
+    // TODO 待实现 jason：是不是已经 ok 啦？
     console.warn('业务表单待实现', row);
   }
 }
@@ -237,6 +255,7 @@ function isManagerUser(row: any) {
   return row.managerUserIds && row.managerUserIds.includes(userId);
 }
 
+/** 模型操作 */
 async function modelOperation(type: string, id: number) {
   await router.push({
     name: 'BpmModelUpdate',
@@ -246,20 +265,27 @@ async function modelOperation(type: string, id: number) {
 
 /** 发布流程 */
 async function handleDeploy(row: any) {
-  confirm({
+  await confirm({
     beforeClose: async ({ isConfirm }) => {
       if (!isConfirm) return;
       // 发起部署
-      await deployModel(row.id);
+      const hideLoading = message.loading({
+        content: `正在发布流程: "${row.name}"...`,
+        duration: 0,
+      });
+      try {
+        await deployModel(row.id);
+      } finally {
+        hideLoading();
+      }
       return true;
     },
     content: `确认要发布[${row.name}]流程吗？`,
     icon: 'question',
-  }).then(async () => {
-    message.success(`发布[${row.name}]流程成功`);
-    // 刷新列表
-    emit('success');
   });
+  message.success(`发布[${row.name}]流程成功`);
+  // 刷新列表
+  emit('success');
 }
 
 /** '更多'操作按钮 */
@@ -296,60 +322,82 @@ function handleModelCommand(command: string, row: any) {
 }
 
 /** 更新状态操作 */
-function handleChangeState(row: any) {
+async function handleChangeState(row: any) {
   const state = row.processDefinition.suspensionState;
   const newState = state === 1 ? 2 : 1;
   const statusState = state === 1 ? '停用' : '启用';
-  confirm({
+  await confirm({
     beforeClose: async ({ isConfirm }) => {
       if (!isConfirm) return;
       // 发起更新状态
-      await updateModelState(row.id, newState);
+      const hideLoading = message.loading({
+        content: `正在${statusState}流程: "${row.name}"...`,
+        duration: 0,
+      });
+      try {
+        await updateModelState(row.id, newState);
+      } finally {
+        hideLoading();
+      }
       return true;
     },
     content: `确认要${statusState}流程: "${row.name}" 吗？`,
     icon: 'question',
-  }).then(async () => {
-    message.success(`${statusState} 流程: "${row.name}" 成功`);
-    // 刷新列表
-    emit('success');
   });
+  message.success(`${statusState} 流程: "${row.name}" 成功`);
+  // 刷新列表
+  emit('success');
 }
 
 /** 清理流程操作 */
-function handleClean(row: any) {
-  confirm({
+async function handleClean(row: any) {
+  await confirm({
     beforeClose: async ({ isConfirm }) => {
       if (!isConfirm) return;
       // 发起清理操作
-      await cleanModel(row.id);
+      const hideLoading = message.loading({
+        content: `正在清理流程: "${row.name}"...`,
+        duration: 0,
+      });
+      try {
+        await cleanModel(row.id);
+      } finally {
+        hideLoading();
+      }
       return true;
     },
     content: `确认要清理流程: "${row.name}" 吗？`,
     icon: 'question',
-  }).then(async () => {
-    message.success(`清理流程: "${row.name}" 成功`);
-    // 刷新列表
-    emit('success');
   });
+  message.success(`清理流程: "${row.name}" 成功`);
+  // 刷新列表
+  emit('success');
 }
 
 /** 删除流程操作 */
-function handleDelete(row: any) {
-  confirm({
+async function handleDelete(row: any) {
+  await confirm({
     beforeClose: async ({ isConfirm }) => {
       if (!isConfirm) return;
       // 发起删除操作
-      await deleteModel(row.id);
+      const hideLoading = message.loading({
+        content: $t('ui.actionMessage.deleting', [row.name]),
+        duration: 0,
+      });
+      try {
+        await deleteModel(row.id);
+      } finally {
+        hideLoading();
+      }
       return true;
     },
     content: `确认要删除流程: "${row.name}" 吗？`,
     icon: 'question',
-  }).then(async () => {
-    message.success(`删除流程: "${row.name}" 成功`);
-    // 刷新列表
-    emit('success');
   });
+
+  message.success(`删除流程: "${row.name}" 成功`);
+  // 刷新列表
+  emit('success');
 }
 
 /** 跳转到指定流程定义列表 */
@@ -401,10 +449,10 @@ watchEffect(() => {
   }
 });
 
-// 处理重命名成功
-const handleRenameSuccess = () => {
+/** 处理重命名成功 */
+function handleRenameSuccess() {
   emit('success');
-};
+}
 </script>
 
 <template>
@@ -415,12 +463,14 @@ const handleRenameSuccess = () => {
     >
       <div class="flex h-12 items-center">
         <!-- 头部：分类名 -->
-        <!-- TODO @jason：1）无法拖动排序；2）拖动后，直接请求排序，不用有个【保存】；排序模型分类，和排序分类里的模型，交互有点不同哈。 -->
+        <!-- TODO @jason：2）拖动后，直接请求排序，不用有个【保存】；排序模型分类，和排序分类里的模型，交互有点不同哈。@芋艿 好像 yudao-ui-admin-vue3 交互也是这样的，需要改吗? -->
         <div class="flex items-center">
           <Tooltip v-if="isCategorySorting" title="拖动排序">
-            <span
-              class="icon-[ic--round-drag-indicator] ml-2.5 cursor-move text-2xl text-gray-500"
-            ></span>
+            <!-- drag-handle 标识可以拖动，不能删掉 -->
+            <IconifyIcon
+              icon="ic:round-drag-indicator"
+              class="drag-handle ml-2.5 cursor-move text-2xl text-gray-500"
+            />
           </Tooltip>
           <div class="ml-4 mr-2 text-lg font-medium">
             {{ categoryInfo.name }}
@@ -510,15 +560,16 @@ const handleRenameSuccess = () => {
             :class="`category-${categoryInfo.id}`"
           >
             <template #name="{ row }">
-              <div class="flex items-center">
+              <div class="flex items-center overflow-hidden">
                 <Tooltip
                   v-if="isModelSorting"
                   title="拖动排序"
                   placement="left"
                 >
+                  <!-- drag-handle 标识用于推动排序。 useSortable 用到 -->
                   <IconifyIcon
                     icon="ic:round-drag-indicator"
-                    class="mr-2.5 cursor-move text-2xl text-gray-500"
+                    class="drag-handle mr-2.5 flex-shrink-0 cursor-move text-2xl text-gray-500"
                   />
                 </Tooltip>
                 <div
@@ -535,9 +586,11 @@ const handleRenameSuccess = () => {
                   class="mr-2.5 h-9 w-9 flex-shrink-0 rounded"
                   alt="图标"
                 />
-                <EllipsisText :max-width="160" :tooltip-when-ellipsis="true">
-                  {{ row.name }}
-                </EllipsisText>
+                <div class="min-w-0 overflow-hidden">
+                  <EllipsisText :tooltip-when-ellipsis="true">
+                    {{ row.name }}
+                  </EllipsisText>
+                </div>
               </div>
             </template>
             <template #startUserIds="{ row }">
@@ -686,6 +739,7 @@ const handleRenameSuccess = () => {
 </template>
 
 <style lang="scss" scoped>
+// @jason：看看能不能通过 tailwindcss 简化下
 .category-draggable-model {
   // ant-collapse-header 自定义样式
   :deep(.ant-collapse-header) {
diff --git a/apps/web-antd/src/views/bpm/oa/leave/create.vue b/apps/web-antd/src/views/bpm/oa/leave/create.vue
index 3f7d1aee9..19917d107 100644
--- a/apps/web-antd/src/views/bpm/oa/leave/create.vue
+++ b/apps/web-antd/src/views/bpm/oa/leave/create.vue
@@ -6,6 +6,7 @@ import { computed, onMounted, ref, watch } from 'vue';
 
 import { confirm, Page, useVbenForm } from '@vben/common-ui';
 import { BpmCandidateStrategyEnum, BpmNodeIdEnum } from '@vben/constants';
+import { useTabs } from '@vben/hooks';
 import { IconifyIcon } from '@vben/icons';
 
 import { Button, Card, message, Space } from 'ant-design-vue';
@@ -20,9 +21,10 @@ import ProcessInstanceTimeline from '#/views/bpm/processInstance/detail/modules/
 
 import { useFormSchema } from './data';
 
+const { closeCurrentTab } = useTabs();
+
 const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 
-// 审批相关：变量
 const processDefineKey = 'oa_leave'; // 流程定义 Key
 const startUserSelectTasks = ref<any>([]); // 发起人需要选择审批人的用户任务列表
 const startUserSelectAssignees = ref<any>({}); // 发起人选择审批人的数据
@@ -52,11 +54,11 @@ const [Form, formApi] = useVbenForm({
 
 /** 提交申请 */
 async function onSubmit() {
+  // 1.1 表单校验
   const { valid } = await formApi.validate();
   if (!valid) {
     return;
   }
-
   // 1.2 审批相关：校验指定审批人
   if (startUserSelectTasks.value?.length > 0) {
     for (const userTask of startUserSelectTasks.value) {
@@ -71,19 +73,16 @@ async function onSubmit() {
 
   // 提交表单
   const data = (await formApi.getValues()) as BpmOALeaveApi.Leave;
-
   // 审批相关：设置指定审批人
   if (startUserSelectTasks.value?.length > 0) {
     data.startUserSelectAssignees = startUserSelectAssignees.value;
   }
-
   // 格式化开始时间和结束时间的值
   const submitData: BpmOALeaveApi.Leave = {
     ...data,
     startTime: Number(data.startTime),
     endTime: Number(data.endTime),
   };
-
   try {
     formLoading.value = true;
     await (formData.value?.id
@@ -94,13 +93,9 @@ async function onSubmit() {
       content: $t('ui.actionMessage.operationSuccess'),
       key: 'action_process_msg',
     });
-
-    // TODO @ziye、@jason：好像跳转不了？
     await router.push({
       name: 'BpmOALeave',
     });
-  } catch (error: any) {
-    message.error(error.message);
   } finally {
     formLoading.value = false;
   }
@@ -113,57 +108,50 @@ function onBack() {
     icon: 'warning',
     beforeClose({ isConfirm }) {
       if (isConfirm) {
-        // TODO @ziye、@jason：是不是要关闭当前标签哈。
-        router.back();
+        closeCurrentTab();
       }
       return Promise.resolve(true);
     },
   });
 }
 
-// ============================== 审核流程相关 ==============================
-
 /** 审批相关：获取审批详情 */
 async function getApprovalDetail() {
-  try {
-    const data = await getApprovalDetailApi({
-      processDefinitionId: processDefinitionId.value,
-      // TODO 小北：可以支持 processDefinitionKey 查询
-      activityId: BpmNodeIdEnum.START_USER_NODE_ID,
-      processVariablesStr: JSON.stringify({
-        day: dayjs(formData.value?.startTime).diff(
-          dayjs(formData.value?.endTime),
-          'day',
-        ),
-      }), // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
-    });
+  const data = await getApprovalDetailApi({
+    processDefinitionId: processDefinitionId.value,
+    // TODO 小北：可以支持 processDefinitionKey 查询
+    activityId: BpmNodeIdEnum.START_USER_NODE_ID,
+    processVariablesStr: JSON.stringify({
+      day: dayjs(formData.value?.startTime).diff(
+        dayjs(formData.value?.endTime),
+        'day',
+      ),
+    }), // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
+  });
+  if (!data) {
+    message.error('查询不到审批详情信息！');
+    return;
+  }
+  // 获取审批节点，显示 Timeline 的数据
+  activityNodes.value = data.activityNodes;
 
-    if (!data) {
-      message.error('查询不到审批详情信息！');
-      return;
+  // 获取发起人自选的任务
+  startUserSelectTasks.value = data.activityNodes?.filter(
+    (node: BpmProcessInstanceApi.ApprovalNodeInfo) =>
+      BpmCandidateStrategyEnum.START_USER_SELECT === node.candidateStrategy,
+  );
+  // 恢复之前的选择审批人
+  if (startUserSelectTasks.value?.length > 0) {
+    for (const node of startUserSelectTasks.value) {
+      startUserSelectAssignees.value[node.id] =
+        tempStartUserSelectAssignees.value[node.id] &&
+        tempStartUserSelectAssignees.value[node.id].length > 0
+          ? tempStartUserSelectAssignees.value[node.id]
+          : [];
     }
-    // 获取审批节点，显示 Timeline 的数据
-    activityNodes.value = data.activityNodes;
-
-    // 获取发起人自选的任务
-    startUserSelectTasks.value = data.activityNodes?.filter(
-      (node: BpmProcessInstanceApi.ApprovalNodeInfo) =>
-        BpmCandidateStrategyEnum.START_USER_SELECT === node.candidateStrategy,
-    );
-    // 恢复之前的选择审批人
-    if (startUserSelectTasks.value?.length > 0) {
-      for (const node of startUserSelectTasks.value) {
-        startUserSelectAssignees.value[node.id] =
-          tempStartUserSelectAssignees.value[node.id] &&
-          tempStartUserSelectAssignees.value[node.id].length > 0
-            ? tempStartUserSelectAssignees.value[node.id]
-            : [];
-      }
-    }
-  } finally {
-    //
   }
 }
+
 /** 审批相关：选择发起人 */
 function selectUserConfirm(id: string, userList: any[]) {
   startUserSelectAssignees.value[id] = userList?.map((item: any) => item.id);
@@ -189,22 +177,20 @@ watch(
   },
 );
 
-// ============================== 生命周期 ==============================
+/** 初始化 */
 onMounted(async () => {
   const processDefinitionDetail: any = await getProcessDefinition(
     undefined,
     processDefineKey,
   );
-
   if (!processDefinitionDetail) {
     message.error('OA 请假的流程模型未配置，请检查！');
     return;
   }
-
   processDefinitionId.value = processDefinitionDetail.id;
   startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks;
 
-  getApprovalDetail();
+  await getApprovalDetail();
 });
 </script>
 
@@ -228,7 +214,6 @@ onMounted(async () => {
           :show-status-icon="false"
           @select-user-confirm="selectUserConfirm"
         />
-
         <template #actions>
           <Space warp :size="12" class="w-full px-6">
             <Button type="primary" @click="onSubmit"> 提交 </Button>
diff --git a/apps/web-antd/src/views/bpm/oa/leave/data.ts b/apps/web-antd/src/views/bpm/oa/leave/data.ts
index e46cd1083..79140ef2f 100644
--- a/apps/web-antd/src/views/bpm/oa/leave/data.ts
+++ b/apps/web-antd/src/views/bpm/oa/leave/data.ts
@@ -6,7 +6,7 @@ import { h } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
-import { formatDateTime } from '@vben/utils';
+import { formatDate } from '@vben/utils';
 
 import { DictTag } from '#/components/dict-tag';
 import { getRangePickerDefaultProps } from '#/utils';
@@ -71,7 +71,7 @@ export function useFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的搜索表单 */
-export function GridFormSchema(): VbenFormSchema[] {
+export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
       fieldName: 'type',
@@ -83,17 +83,26 @@ export function GridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
     {
       fieldName: 'status',
       label: '审批结果',
       component: 'Select',
       componentProps: {
         placeholder: '请选择审批结果',
+        allowClear: true,
         options: getDictOptions(
           DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
           'number',
         ),
-        allowClear: true,
       },
     },
     {
@@ -102,14 +111,7 @@ export function GridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入原因',
-      },
-    },
-    {
-      fieldName: 'createTime',
-      label: '创建时间',
-      component: 'RangePicker',
-      componentProps: {
-        ...getRangePickerDefaultProps(),
+        allowClear: true,
       },
     },
   ];
@@ -136,13 +138,13 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'startTime',
       title: '开始时间',
       minWidth: 180,
-      formatter: 'formatDateTime',
+      formatter: 'formatDate',
     },
     {
       field: 'endTime',
       title: '结束时间',
       minWidth: 180,
-      formatter: 'formatDateTime',
+      formatter: 'formatDate',
     },
     {
       field: 'type',
@@ -179,21 +181,21 @@ export function useDetailFormSchema(): DescriptionItemSchema[] {
     {
       label: '请假类型',
       field: 'type',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.BPM_OA_LEAVE_TYPE,
-          value: data?.type,
+          value: val,
         }),
     },
     {
       label: '开始时间',
       field: 'startTime',
-      content: (data) => formatDateTime(data?.startTime) as string,
+      render: (val) => formatDate(val) as string,
     },
     {
       label: '结束时间',
       field: 'endTime',
-      content: (data) => formatDateTime(data?.endTime) as string,
+      render: (val) => formatDate(val) as string,
     },
     {
       label: '原因',
diff --git a/apps/web-antd/src/views/bpm/oa/leave/detail.vue b/apps/web-antd/src/views/bpm/oa/leave/detail.vue
index dc09fe59c..9f2d0aa1a 100644
--- a/apps/web-antd/src/views/bpm/oa/leave/detail.vue
+++ b/apps/web-antd/src/views/bpm/oa/leave/detail.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { BpmOALeaveApi } from '#/api/bpm/oa/leave';
 
 import { computed, onMounted, ref } from 'vue';
@@ -6,29 +6,41 @@ import { useRoute } from 'vue-router';
 
 import { ContentWrap } from '@vben/common-ui';
 
+import { Spin } from 'ant-design-vue';
+
 import { getLeave } from '#/api/bpm/oa/leave';
-import { Description } from '#/components/description';
+import { useDescription } from '#/components/description';
 
 import { useDetailFormSchema } from './data';
 
 const props = defineProps<{
   id: string;
 }>();
-const datailLoading = ref(false);
-const detailData = ref<BpmOALeaveApi.Leave>();
 
 const { query } = useRoute();
+
+const loading = ref(false);
+const formData = ref<BpmOALeaveApi.Leave>();
 const queryId = computed(() => query.id as string);
 
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 1,
+  class: 'mx-4',
+  schema: useDetailFormSchema(),
+});
+
+/** 获取详情数据 */
 async function getDetailData() {
   try {
-    datailLoading.value = true;
-    detailData.value = await getLeave(Number(props.id || queryId.value));
+    loading.value = true;
+    formData.value = await getLeave(Number(props.id || queryId.value));
   } finally {
-    datailLoading.value = false;
+    loading.value = false;
   }
 }
 
+/** 初始化 */
 onMounted(() => {
   getDetailData();
 });
@@ -36,20 +48,8 @@ onMounted(() => {
 
 <template>
   <ContentWrap class="m-2">
-    <Description
-      :data="detailData"
-      :schema="useDetailFormSchema()"
-      :component-props="{
-        column: 1,
-        bordered: true,
-        size: 'small',
-      }"
-    />
+    <Spin :spinning="loading" tip="加载中...">
+      <Descriptions :data="formData" />
+    </Spin>
   </ContentWrap>
 </template>
-
-<style lang="scss" scoped>
-:deep(.ant-descriptions-item-label) {
-  width: 150px;
-}
-</style>
diff --git a/apps/web-antd/src/views/bpm/oa/leave/index.vue b/apps/web-antd/src/views/bpm/oa/leave/index.vue
index 17ef3b069..d00ff092e 100644
--- a/apps/web-antd/src/views/bpm/oa/leave/index.vue
+++ b/apps/web-antd/src/views/bpm/oa/leave/index.vue
@@ -5,19 +5,91 @@ import type { BpmOALeaveApi } from '#/api/bpm/oa/leave';
 import { h } from 'vue';
 
 import { DocAlert, Page, prompt } from '@vben/common-ui';
+import { BpmProcessInstanceStatus } from '@vben/constants';
 
 import { message, Textarea } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getLeavePage } from '#/api/bpm/oa/leave';
 import { cancelProcessInstanceByStartUser } from '#/api/bpm/processInstance';
+import { $t } from '#/locales';
 import { router } from '#/router';
 
-import { GridFormSchema, useGridColumns } from './data';
+import { useGridColumns, useGridFormSchema } from './data';
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建请假 */
+function handleCreate() {
+  router.push({
+    name: 'OALeaveCreate',
+    query: {
+      formType: 'create',
+    },
+  });
+}
+
+/** 取消请假 */
+function handleCancel(row: BpmOALeaveApi.Leave) {
+  prompt({
+    title: '取消流程',
+    content: '请输入取消原因',
+    modelPropName: 'value',
+    component: () => {
+      return h(Textarea, {
+        placeholder: '请输入取消原因',
+        allowClear: true,
+        rows: 2,
+        rules: [{ required: true, message: '请输入取消原因' }],
+      });
+    },
+    async beforeClose(scope) {
+      if (!scope.isConfirm) {
+        return;
+      }
+      if (!scope.value) {
+        message.error('请输入取消原因');
+        return false;
+      }
+      const hideLoading = message.loading({
+        content: '正在取消中...',
+        duration: 0,
+      });
+      try {
+        await cancelProcessInstanceByStartUser(row.id, scope.value);
+        message.success('取消成功');
+        handleRefresh();
+      } catch {
+        return false;
+      } finally {
+        hideLoading();
+      }
+    },
+  });
+}
+
+/** 查看请假详情 */
+function handleDetail(row: BpmOALeaveApi.Leave) {
+  router.push({
+    name: 'OALeaveDetail',
+    query: { id: row.id },
+  });
+}
+
+/** 审批进度 */
+function handleProgress(row: BpmOALeaveApi.Leave) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.processInstanceId },
+  });
+}
 
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
-    schema: GridFormSchema(),
+    schema: useGridFormSchema(),
   },
   gridOptions: {
     columns: useGridColumns(),
@@ -36,6 +108,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -43,70 +116,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<BpmOALeaveApi.Leave>,
 });
-
-/** 创建请假 */
-function handleCreate() {
-  router.push({
-    name: 'OALeaveCreate',
-    query: {
-      formType: 'create',
-    },
-  });
-}
-
-/** 查看请假详情 */
-function handleDetail(row: BpmOALeaveApi.Leave) {
-  router.push({
-    name: 'OALeaveDetail',
-    query: { id: row.id },
-  });
-}
-
-/** 取消请假 */
-function handleCancel(row: BpmOALeaveApi.Leave) {
-  prompt({
-    async beforeClose(scope) {
-      if (scope.isConfirm) {
-        if (scope.value) {
-          try {
-            await cancelProcessInstanceByStartUser(row.id, scope.value);
-            message.success('取消成功');
-            handleRefresh();
-          } catch {
-            return false;
-          }
-        } else {
-          message.error('请输入取消原因');
-          return false;
-        }
-      }
-    },
-    component: () => {
-      return h(Textarea, {
-        placeholder: '请输入取消原因',
-        allowClear: true,
-        rows: 2,
-        rules: [{ required: true, message: '请输入取消原因' }],
-      });
-    },
-    content: '请输入取消原因',
-    title: '取消流程',
-    modelPropName: 'value',
-  });
-}
-
-/** 审批进度 */
-function handleProgress(row: BpmOALeaveApi.Leave) {
-  router.push({
-    name: 'BpmProcessInstanceDetail',
-    query: { id: row.processInstanceId },
-  });
-}
-
-/** 刷新表格 */
-function handleRefresh() {
-  gridApi.query();
-}
 </script>
 
 <template>
@@ -126,7 +135,6 @@ function handleRefresh() {
               label: '发起请假',
               type: 'primary',
               icon: ACTION_ICON.ADD,
-              auth: ['bpm:oa-leave:create'],
               onClick: handleCreate,
             },
           ]"
@@ -139,14 +147,12 @@ function handleRefresh() {
               label: $t('common.detail'),
               type: 'link',
               icon: ACTION_ICON.VIEW,
-              auth: ['bpm:oa-leave:query'],
               onClick: handleDetail.bind(null, row),
             },
             {
               label: '审批进度',
               type: 'link',
               icon: ACTION_ICON.VIEW,
-              auth: ['bpm:oa-leave:query'],
               onClick: handleProgress.bind(null, row),
             },
             {
@@ -154,11 +160,8 @@ function handleRefresh() {
               type: 'link',
               danger: true,
               icon: ACTION_ICON.DELETE,
-              auth: ['bpm:user-group:query'],
-              popConfirm: {
-                title: '取消流程',
-                confirm: handleCancel.bind(null, row),
-              },
+              ifShow: row.result === BpmProcessInstanceStatus.RUNNING,
+              onClick: handleCancel.bind(null, row),
             },
           ]"
         />
diff --git a/apps/web-antd/src/views/bpm/processExpression/index.vue b/apps/web-antd/src/views/bpm/processExpression/index.vue
index af50ff8e4..6cb421177 100644
--- a/apps/web-antd/src/views/bpm/processExpression/index.vue
+++ b/apps/web-antd/src/views/bpm/processExpression/index.vue
@@ -44,9 +44,7 @@ async function handleDelete(row: BpmProcessExpressionApi.ProcessExpression) {
   });
   try {
     await deleteProcessExpression(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -74,6 +72,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
diff --git a/apps/web-antd/src/views/bpm/processExpression/modules/form.vue b/apps/web-antd/src/views/bpm/processExpression/modules/form.vue
index 1d6d71673..a621c3cba 100644
--- a/apps/web-antd/src/views/bpm/processExpression/modules/form.vue
+++ b/apps/web-antd/src/views/bpm/processExpression/modules/form.vue
@@ -55,6 +55,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
+      formData.value = undefined;
       return;
     }
     // 加载数据
diff --git a/apps/web-antd/src/views/bpm/processInstance/create/index.vue b/apps/web-antd/src/views/bpm/processInstance/create/index.vue
index 95c1e45f4..c4cefbbfc 100644
--- a/apps/web-antd/src/views/bpm/processInstance/create/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/create/index.vue
@@ -6,6 +6,7 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { Page } from '@vben/common-ui';
+import { groupBy } from '@vben/utils';
 
 import {
   Card,
@@ -28,45 +29,33 @@ defineOptions({ name: 'BpmProcessInstanceCreate' });
 
 const route = useRoute();
 
-// 当前搜索关键字
-const searchName = ref('');
-const isSearching = ref(false);
-// 流程实例编号。场景：重新发起时
-const processInstanceId: any = route.query.processInstanceId;
-// 加载中
-const loading = ref(true);
-// 分类的列表
-const categoryList: any = ref([]);
-// 当前选中的分类
-const activeCategory = ref('');
-// 流程定义的列表
+const loading = ref(true); // 加载中
+const processInstanceId: any = route.query.processInstanceId; // 流程实例编号。场景：重新发起时
+
+const categoryList: any = ref([]); // 分类的列表
+const activeCategory = ref(''); // 当前选中的分类
+
+const searchName = ref(''); // 当前搜索关键字
 const processDefinitionList = ref<BpmProcessDefinitionApi.ProcessDefinition[]>(
   [],
-);
+); // 流程定义的列表
+const filteredProcessDefinitionList = ref<
+  BpmProcessDefinitionApi.ProcessDefinition[]
+>([]); // 用于存储搜索过滤后的流程定义
 
-// 实现 groupBy 功能
-function groupBy(array: any[], key: string) {
-  const result: Record<string, any[]> = {};
-  for (const item of array) {
-    const groupKey = item[key];
-    if (!result[groupKey]) {
-      result[groupKey] = [];
-    }
-    result[groupKey].push(item);
-  }
-  return result;
-}
+const selectProcessDefinition = ref(); // 选择的流程定义
+const processDefinitionDetailRef = ref();
 
 /** 查询列表 */
 async function getList() {
   loading.value = true;
   try {
-    // 所有流程分类数据
-    await getCategoryList();
-    // 所有流程定义数据
-    await handleGetProcessDefinitionList();
+    // 1.1 所有流程分类数据
+    await loadCategoryList();
+    // 1.2 所有流程定义数据
+    await loadProcessDefinitionList();
 
-    // 如果 processInstanceId 非空，说明是重新发起
+    // 2. 如果 processInstanceId 非空，说明是重新发起
     if (processInstanceId?.length > 0) {
       const processInstance = await getProcessInstance(processInstanceId);
       if (!processInstance) {
@@ -88,65 +77,34 @@ async function getList() {
 }
 
 /** 获取所有流程分类数据 */
-async function getCategoryList() {
-  try {
-    // 流程分类
-    categoryList.value = await getCategorySimpleList();
-  } catch {
-    // 错误处理
-  }
+async function loadCategoryList() {
+  categoryList.value = await getCategorySimpleList();
 }
 
 /** 获取所有流程定义数据 */
-async function handleGetProcessDefinitionList() {
-  try {
-    // 流程定义
-    processDefinitionList.value = await getProcessDefinitionList({
-      suspensionState: 1,
-    });
-    // 初始化过滤列表为全部流程定义
-    filteredProcessDefinitionList.value = processDefinitionList.value;
+async function loadProcessDefinitionList() {
+  // 流程定义
+  processDefinitionList.value = await getProcessDefinitionList({
+    suspensionState: 1,
+  });
 
-    // 在获取完所有数据后，设置第一个有效分类为激活状态
-    if (availableCategories.value.length > 0 && !activeCategory.value) {
-      activeCategory.value = availableCategories.value[0].code;
-    }
-  } catch {
-    // 错误处理
-  }
+  // 空搜索，初始化相关数据
+  handleQuery();
 }
 
-/** 用于存储搜索过滤后的流程定义 */
-const filteredProcessDefinitionList = ref<
-  BpmProcessDefinitionApi.ProcessDefinition[]
->([]);
-
 /** 搜索流程 */
 function handleQuery() {
   if (searchName.value.trim()) {
     // 如果有搜索关键字，进行过滤
-    isSearching.value = true;
     filteredProcessDefinitionList.value = processDefinitionList.value.filter(
       (definition: any) =>
         definition.name.toLowerCase().includes(searchName.value.toLowerCase()),
     );
-
-    // 获取搜索结果中的分类
-    const searchResultGroups = groupBy(
-      filteredProcessDefinitionList.value,
-      'category',
-    );
-    const availableCategoryCodes = Object.keys(searchResultGroups);
-
-    // 如果有匹配的分类，切换到第一个包含匹配结果的分类
-    if (availableCategoryCodes.length > 0 && availableCategoryCodes[0]) {
-      activeCategory.value = availableCategoryCodes[0];
-    }
+    // 如果有匹配，切换到第一个包含匹配结果的分类
+    activeCategory.value = availableCategories.value[0]?.name;
   } else {
     // 如果没有搜索关键字，恢复所有数据
-    isSearching.value = false;
     filteredProcessDefinitionList.value = processDefinitionList.value;
-
     // 恢复到第一个可用分类
     if (availableCategories.value.length > 0) {
       activeCategory.value = availableCategories.value[0].code;
@@ -154,20 +112,13 @@ function handleQuery() {
   }
 }
 
-/** 判断流程定义是否匹配搜索 */
-function isDefinitionMatchSearch(definition: any) {
-  if (!isSearching.value) return false;
-  return definition.name.toLowerCase().includes(searchName.value.toLowerCase());
-}
-
 /** 流程定义的分组 */
 const processDefinitionGroup = computed(() => {
   if (!processDefinitionList.value?.length) {
     return {};
   }
-
-  const grouped = groupBy(filteredProcessDefinitionList.value, 'category');
   // 按照 categoryList 的顺序重新组织数据
+  const grouped = groupBy(filteredProcessDefinitionList.value, 'category');
   const orderedGroup: Record<
     string,
     BpmProcessDefinitionApi.ProcessDefinition[]
@@ -182,17 +133,6 @@ const processDefinitionGroup = computed(() => {
   return orderedGroup;
 });
 
-/** 通过分类 code 获取对应的名称 */
-// eslint-disable-next-line no-unused-vars
-function _getCategoryName(categoryCode: string) {
-  return categoryList.value?.find((ctg: any) => ctg.code === categoryCode)
-    ?.name;
-}
-
-// ========== 表单相关 ==========
-const selectProcessDefinition = ref(); // 选择的流程定义
-const processDefinitionDetailRef = ref();
-
 /** 处理选择流程的按钮操作 */
 async function handleSelect(
   row: BpmProcessDefinitionApi.ProcessDefinition,
@@ -210,21 +150,14 @@ const availableCategories = computed(() => {
   if (!categoryList.value?.length || !processDefinitionGroup.value) {
     return [];
   }
-
   // 获取所有有流程的分类代码
   const availableCategoryCodes = Object.keys(processDefinitionGroup.value);
-
   // 过滤出有流程的分类
   return categoryList.value.filter((category: BpmCategoryApi.Category) =>
     availableCategoryCodes.includes(category.code),
   );
 });
 
-/** 获取 tab 的位置 */
-const tabPosition = computed(() => {
-  return window.innerWidth < 768 ? 'top' : 'left';
-});
-
 /** 监听可用分类变化，自动设置正确的活动分类 */
 watch(
   availableCategories,
@@ -251,7 +184,7 @@ onMounted(() => {
 
 <template>
   <Page auto-content-height>
-    <!-- TODO @ziye：【优先级：低】这里交互，可以做成类似 vue3 + element-plus 那个一样，滚动切换分类哈？对标钉钉、飞书哈； -->
+    <!-- TODO @jason：这里交互，可以做成类似 vue3 + element-plus 那个一样，滚动切换分类哈？对标钉钉、飞书哈； -->
     <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
     <template v-if="!selectProcessDefinition">
       <Card
@@ -275,8 +208,8 @@ onMounted(() => {
           </div>
         </template>
 
-        <div v-if="filteredProcessDefinitionList?.length">
-          <Tabs v-model:active-key="activeCategory" :tab-position="tabPosition">
+        <div v-if="filteredProcessDefinitionList?.length" class="-ml-6">
+          <Tabs v-model:active-key="activeCategory" tab-position="left">
             <Tabs.TabPane
               v-for="category in availableCategories"
               :key="category.code"
@@ -297,7 +230,7 @@ onMounted(() => {
                     hoverable
                     class="definition-item-card w-full cursor-pointer"
                     :class="{
-                      'search-match': isDefinitionMatchSearch(definition),
+                      'search-match': searchName.trim().length > 0,
                     }"
                     :body-style="{
                       width: '100%',
@@ -311,7 +244,6 @@ onMounted(() => {
                         class="flow-icon-img object-contain"
                         alt="流程图标"
                       />
-
                       <div v-else class="flow-icon flex-shrink-0">
                         <span class="text-xs text-white">
                           {{ definition.name?.slice(0, 2) }}
@@ -351,6 +283,7 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
+// @jason：看看能不能通过 tailwindcss 简化下
 .process-definition-container {
   .definition-item-card {
     .flow-icon-img {
diff --git a/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue b/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
index d1dc973d9..d94df581a 100644
--- a/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
@@ -49,12 +49,9 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['cancel']);
-
-// 增加表单就绪状态变量 表单就绪后再渲染form-create
-const isFormReady = ref(false);
-
 const { closeCurrentTab } = useTabs();
 
+const isFormReady = ref(false); // 表单就绪状态变量：表单就绪后再渲染 form-create
 const getTitle = computed(() => {
   return `流程表单 - ${props.selectProcessDefinition.name}`;
 });
@@ -64,54 +61,50 @@ const detailForm = ref<ProcessFormData>({
   option: {},
   value: {},
 });
-
 const fApi = ref<any>();
+
 const startUserSelectTasks = ref<UserTask[]>([]);
 const startUserSelectAssignees = ref<Record<string, string[]>>({});
 const tempStartUserSelectAssignees = ref<Record<string, string[]>>({});
+
 const bpmnXML = ref<string | undefined>(undefined);
 const simpleJson = ref<string | undefined>(undefined);
+
 const timelineRef = ref<any>();
 const activeTab = ref('form');
 const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]);
 const processInstanceStartLoading = ref(false);
+
 /** 提交按钮 */
 async function submitForm() {
   if (!fApi.value || !props.selectProcessDefinition) {
     return;
   }
-
-  try {
-    // 流程表单校验
-    await fApi.value.validate();
-
-    // 校验指定审批人
-    if (startUserSelectTasks.value?.length > 0) {
-      for (const userTask of startUserSelectTasks.value) {
-        const assignees = startUserSelectAssignees.value[userTask.id];
-        if (Array.isArray(assignees) && assignees.length === 0) {
-          message.warning(`请选择${userTask.name}的候选人`);
-          return;
-        }
+  // 流程表单校验
+  await fApi.value.validate();
+  // 校验指定审批人
+  if (startUserSelectTasks.value?.length > 0) {
+    for (const userTask of startUserSelectTasks.value) {
+      const assignees = startUserSelectAssignees.value[userTask.id];
+      if (Array.isArray(assignees) && assignees.length === 0) {
+        message.warning(`请选择${userTask.name}的候选人`);
+        return;
       }
     }
+  }
 
+  processInstanceStartLoading.value = true;
+  try {
     // 提交请求
-    processInstanceStartLoading.value = true;
     await createProcessInstance({
       processDefinitionId: props.selectProcessDefinition.id,
       variables: detailForm.value.value,
       startUserSelectAssignees: startUserSelectAssignees.value,
     });
-
+    // 关闭并提示
     message.success('发起流程成功');
-
-    // TODO @ziye：有告警哈；
-    closeCurrentTab();
-
-    await router.push({ path: '/bpm/task/my' });
-  } catch (error) {
-    console.error('发起流程失败:', error);
+    await closeCurrentTab();
+    await router.push({ name: 'BpmTaskMy' });
   } finally {
     processInstanceStartLoading.value = false;
   }
@@ -139,6 +132,7 @@ async function initProcessInfo(row: any, formVariables?: any) {
     setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables);
 
     // 设置表单就绪状态
+    // TODO @jason：这个变量是必须的，有没可能简化掉？
     isFormReady.value = true;
 
     await nextTick();
@@ -191,53 +185,45 @@ async function getApprovalDetail(row: {
   id: string;
   processVariablesStr: string;
 }) {
-  try {
-    const data = await getApprovalDetailApi({
-      processDefinitionId: row.id,
-      activityId: BpmNodeIdEnum.START_USER_NODE_ID,
-      processVariablesStr: row.processVariablesStr,
+  const data = await getApprovalDetailApi({
+    processDefinitionId: row.id,
+    activityId: BpmNodeIdEnum.START_USER_NODE_ID,
+    processVariablesStr: row.processVariablesStr,
+  });
+  if (!data) {
+    message.error('查询不到审批详情信息！');
+    return;
+  }
+
+  // 获取审批节点
+  activityNodes.value = data.activityNodes;
+
+  // 获取发起人自选的任务
+  startUserSelectTasks.value = (data.activityNodes?.filter(
+    (node) =>
+      BpmCandidateStrategyEnum.START_USER_SELECT === node.candidateStrategy,
+  ) || []) as unknown as UserTask[];
+
+  // 恢复之前的选择审批人
+  if (startUserSelectTasks.value.length > 0) {
+    for (const node of startUserSelectTasks.value) {
+      const tempAssignees = tempStartUserSelectAssignees.value[node.id];
+      startUserSelectAssignees.value[node.id] = tempAssignees?.length
+        ? tempAssignees
+        : [];
+    }
+  }
+
+  // 设置表单字段权限
+  const formFieldsPermission = data.formFieldsPermission;
+  if (formFieldsPermission) {
+    Object.entries(formFieldsPermission).forEach(([field, permission]) => {
+      setFieldPermission(field, permission as string);
     });
-
-    if (!data) {
-      message.error('查询不到审批详情信息！');
-      return;
-    }
-
-    // 获取审批节点
-    activityNodes.value = data.activityNodes;
-
-    // 获取发起人自选的任务
-    startUserSelectTasks.value = (data.activityNodes?.filter(
-      (node) =>
-        BpmCandidateStrategyEnum.START_USER_SELECT === node.candidateStrategy,
-    ) || []) as unknown as UserTask[];
-
-    // 恢复之前的选择审批人
-    if (startUserSelectTasks.value.length > 0) {
-      for (const node of startUserSelectTasks.value) {
-        const tempAssignees = tempStartUserSelectAssignees.value[node.id];
-        startUserSelectAssignees.value[node.id] = tempAssignees?.length
-          ? tempAssignees
-          : [];
-      }
-    }
-
-    // 设置表单字段权限
-    const formFieldsPermission = data.formFieldsPermission;
-    if (formFieldsPermission) {
-      Object.entries(formFieldsPermission).forEach(([field, permission]) => {
-        setFieldPermission(field, permission as string);
-      });
-    }
-  } catch (error) {
-    message.error('获取审批详情失败');
-    console.error('获取审批详情失败:', error);
   }
 }
 
-/**
- * 设置表单权限
- */
+/** 设置表单权限 */
 function setFieldPermission(field: string, permission: string) {
   if (permission === BpmFieldPermissionType.READ) {
     fApi.value?.disabled(true, field);
@@ -315,7 +301,6 @@ defineExpose({ initProcessInfo });
           </Col>
         </Row>
       </Tabs.TabPane>
-
       <Tabs.TabPane
         tab="流程图"
         key="flow"
diff --git a/apps/web-antd/src/views/bpm/processInstance/data.ts b/apps/web-antd/src/views/bpm/processInstance/data.ts
index 9b4b300d5..883cc97e2 100644
--- a/apps/web-antd/src/views/bpm/processInstance/data.ts
+++ b/apps/web-antd/src/views/bpm/processInstance/data.ts
@@ -5,23 +5,12 @@ import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { getCategorySimpleList } from '#/api/bpm/category';
+import { getSimpleProcessDefinitionList } from '#/api/bpm/definition';
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
-    // {
-    //   fieldName: 'startUserId',
-    //   label: '发起人',
-    //   component: 'ApiSelect',
-    //   componentProps: {
-    //     placeholder: '请选择发起人',
-    //     allowClear: true,
-    //     api: () => getSimpleUserList(),
-    //     labelField: 'nickname',
-    //     valueField: 'id',
-    //   },
-    // },
     {
       fieldName: 'name',
       label: '流程名称',
@@ -34,13 +23,15 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'processDefinitionId',
       label: '所属流程',
-      component: 'Input',
+      component: 'ApiSelect',
       componentProps: {
-        placeholder: '请输入流程定义的编号',
+        placeholder: '请选择流程定义',
         allowClear: true,
+        api: getSimpleProcessDefinitionList,
+        labelField: 'name',
+        valueField: 'id',
       },
     },
-    // 流程分类
     {
       fieldName: 'category',
       label: '流程分类',
@@ -48,12 +39,11 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入流程分类',
         allowClear: true,
-        api: () => getCategorySimpleList(),
+        api: getCategorySimpleList,
         labelField: 'name',
         valueField: 'code',
       },
     },
-    // 流程状态
     {
       fieldName: 'status',
       label: '流程状态',
@@ -67,7 +57,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
-    // 发起时间
     {
       fieldName: 'createTime',
       label: '发起时间',
@@ -97,15 +86,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
         default: 'slot-summary',
       },
     },
-
     {
       field: 'categoryName',
       title: '流程分类',
       minWidth: 120,
       fixed: 'left',
     },
-
-    // 流程状态
     {
       field: 'status',
       title: '流程状态',
@@ -114,7 +100,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
         default: 'slot-status',
       },
     },
-
     {
       field: 'startTime',
       title: '发起时间',
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
index 5f2e11629..578f9aaaf 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
@@ -6,11 +6,18 @@ import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
 
 import { Page } from '@vben/common-ui';
 import {
+  BpmFieldPermissionType,
   BpmModelFormType,
   BpmModelType,
   BpmTaskStatusEnum,
   DICT_TYPE,
 } from '@vben/constants';
+import {
+  SvgBpmApproveIcon,
+  SvgBpmCancelIcon,
+  SvgBpmRejectIcon,
+  SvgBpmRunningIcon,
+} from '@vben/icons';
 import { formatDateTime } from '@vben/utils';
 
 import { Avatar, Card, Col, message, Row, TabPane, Tabs } from 'ant-design-vue';
@@ -23,12 +30,6 @@ import { getSimpleUserList } from '#/api/system/user';
 import DictTag from '#/components/dict-tag/dict-tag.vue';
 import { setConfAndFields2 } from '#/components/form-create';
 import { registerComponent } from '#/utils';
-import {
-  SvgBpmApproveIcon,
-  SvgBpmCancelIcon,
-  SvgBpmRejectIcon,
-  SvgBpmRunningIcon,
-} from '#/views/bpm/processInstance/detail/modules/icons';
 
 import ProcessInstanceBpmnViewer from './modules/bpm-viewer.vue';
 import ProcessInstanceOperationButton from './modules/operation-button.vue';
@@ -44,29 +45,13 @@ const props = defineProps<{
   taskId?: string; // 任务编号
 }>();
 
-enum FieldPermissionType {
-  /**
-   * 隐藏
-   */
-  // eslint-disable-next-line no-unused-vars
-  NONE = '3',
-  /**
-   * 只读
-   */
-  // eslint-disable-next-line no-unused-vars
-  READ = '1',
-  /**
-   * 编辑
-   */
-  // eslint-disable-next-line no-unused-vars
-  WRITE = '2',
-}
-
 const processInstanceLoading = ref(false); // 流程实例的加载中
 const processInstance = ref<BpmProcessInstanceApi.ProcessInstance>(); // 流程实例
 const processDefinition = ref<any>({}); // 流程定义
 const processModelView = ref<any>({}); // 流程模型视图
 const operationButtonRef = ref(); // 操作按钮组件 ref
+const activeTab = ref('form');
+const taskListRef = ref();
 const auditIconsMap: {
   [key: string]:
     | typeof SvgBpmApproveIcon
@@ -82,29 +67,28 @@ const auditIconsMap: {
   [BpmTaskStatusEnum.RETURN]: SvgBpmRejectIcon,
   [BpmTaskStatusEnum.WAIT]: SvgBpmRunningIcon,
 };
+const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]); // 审批节点信息
+const userOptions = ref<SystemUserApi.User[]>([]); // 用户列表
 
-// ========== 申请信息 ==========
-const fApi = ref<any>(); //
+const fApi = ref<any>();
 const detailForm = ref({
   rule: [],
   option: {},
   value: {},
 }); // 流程实例的表单详情
-
 const writableFields: Array<string> = []; // 表单可以编辑的字段
 
-/** 加载流程实例 */
-const BusinessFormComponent = shallowRef<any>(null); // 异步组件
+const BusinessFormComponent = shallowRef<any>(null); // 异步组件(业务表单）
 
 /** 获取详情 */
 async function getDetail() {
   // 获得审批详情
-  getApprovalDetail();
-
+  await getApprovalDetail();
   // 获得流程模型视图
-  getProcessModelView();
+  await getProcessModelView();
 }
 
+/** 获得审批详情 */
 async function getApprovalDetail() {
   processInstanceLoading.value = true;
   try {
@@ -114,11 +98,9 @@ async function getApprovalDetail() {
       taskId: props.taskId,
     };
     const data = await getApprovalDetailApi(param);
-
     if (!data) {
       message.error('查询不到审批详情信息！');
     }
-
     if (!data.processDefinition || !data.processInstance) {
       message.error('查询不到流程信息！');
     }
@@ -143,17 +125,16 @@ async function getApprovalDetail() {
           processInstance.value.formVariables,
         );
       }
-      nextTick().then(() => {
-        fApi.value?.btn.show(false);
-        fApi.value?.resetBtn.show(false);
-        fApi.value?.disabled(true);
-        // 设置表单字段权限
-        if (formFieldsPermission) {
-          Object.keys(data.formFieldsPermission).forEach((item) => {
-            setFieldPermission(item, formFieldsPermission[item]);
-          });
-        }
-      });
+      await nextTick();
+      fApi.value?.btn.show(false);
+      fApi.value?.resetBtn.show(false);
+      fApi.value?.disabled(true);
+      // 设置表单字段权限
+      if (formFieldsPermission) {
+        Object.keys(data.formFieldsPermission).forEach((item) => {
+          setFieldPermission(item, formFieldsPermission[item]);
+        });
+      }
     } else {
       // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
       BusinessFormComponent.value = registerComponent(
@@ -187,25 +168,22 @@ async function getProcessModelView() {
   }
 }
 
-// 审批节点信息
-const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]);
-/**
- * 设置表单权限
- */
+/** 设置表单权限 */
 function setFieldPermission(field: string, permission: string) {
-  if (permission === FieldPermissionType.READ) {
+  if (permission === BpmFieldPermissionType.READ) {
     fApi.value?.disabled(true, field);
   }
-  if (permission === FieldPermissionType.WRITE) {
+  if (permission === BpmFieldPermissionType.WRITE) {
     fApi.value?.disabled(false, field);
     // 加入可以编辑的字段
     writableFields.push(field);
   }
-  if (permission === FieldPermissionType.NONE) {
+  if (permission === BpmFieldPermissionType.NONE) {
     fApi.value?.hidden(true, field);
   }
 }
 
+// TODO @jason：这个还要么？
 /**
  * 操作成功后刷新
  */
@@ -214,25 +192,19 @@ function setFieldPermission(field: string, permission: string) {
 //   getDetail();
 // };
 
-/** 当前的Tab */
-const activeTab = ref('form');
-const taskListRef = ref();
-
 /** 监听 Tab 切换，当切换到 "record" 标签时刷新任务列表 */
 watch(
   () => activeTab.value,
-  (newVal) => {
+  async (newVal) => {
     if (newVal === 'record') {
       // 如果切换到流转记录标签，刷新任务列表
-      nextTick(() => {
-        taskListRef.value?.refresh();
-      });
+      await nextTick();
+      taskListRef.value?.refresh();
     }
   },
 );
 
 /** 初始化 */
-const userOptions = ref<SystemUserApi.User[]>([]); // 用户列表
 onMounted(async () => {
   await getDetail();
   // 获得用户列表
@@ -281,9 +253,9 @@ onMounted(async () => {
               >
                 {{ processInstance?.startUser?.nickname.substring(0, 1) }}
               </Avatar>
-              <span class="text-sm">{{
-                processInstance?.startUser?.nickname
-              }}</span>
+              <span class="text-sm">
+                {{ processInstance?.startUser?.nickname }}
+              </span>
             </div>
             <div class="text-gray-500">
               {{ formatDateTime(processInstance?.startTime) }} 提交
@@ -324,9 +296,8 @@ onMounted(async () => {
                       :rule="detailForm.rule"
                     />
                   </div>
-
                   <div
-                    v-if="
+                    v-else-if="
                       processDefinition?.formType === BpmModelFormType.CUSTOM
                     "
                     class="h-full"
@@ -341,7 +312,6 @@ onMounted(async () => {
                 </Col>
               </Row>
             </TabPane>
-
             <TabPane
               tab="流程图"
               key="diagram"
@@ -367,7 +337,6 @@ onMounted(async () => {
                 />
               </div>
             </TabPane>
-
             <TabPane tab="流转记录" key="record" class="tab-pane-content">
               <div class="h-full">
                 <BpmProcessInstanceTaskList
@@ -377,7 +346,6 @@ onMounted(async () => {
                 />
               </div>
             </TabPane>
-
             <!-- TODO 待开发 -->
             <TabPane
               tab="流转评论"
@@ -410,6 +378,7 @@ onMounted(async () => {
 </template>
 
 <style lang="scss" scoped>
+// @jason：看看能不能通过 tailwindcss 简化下
 .ant-tabs-content {
   height: 100%;
 }
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue
index aa3a33641..585f731a4 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue
@@ -3,7 +3,7 @@ defineOptions({ name: 'ProcessInstanceBpmnViewer' });
 </script>
 
 <template>
-  <!-- TODO @ziye：可以后续，找下 antd 有没可以直接用的组件哈 -->
+  <!-- TODO @jason：这里 BPMN 图的接入 -->
   <div>
     <h1>BPMN Viewer</h1>
   </div>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/icons/index.ts b/apps/web-antd/src/views/bpm/processInstance/detail/modules/icons/index.ts
deleted file mode 100644
index cf6854bb6..000000000
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/icons/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { createIconifyIcon } from '@vben/icons';
-
-// bpm 图标
-// TODO @siye：可以新建出一个 bpm 目录哇？icons/bpm；
-const SvgBpmRunningIcon = createIconifyIcon('svg:bpm-running');
-const SvgBpmApproveIcon = createIconifyIcon('svg:bpm-approve');
-const SvgBpmRejectIcon = createIconifyIcon('svg:bpm-reject');
-const SvgBpmCancelIcon = createIconifyIcon('svg:bpm-cancel');
-
-export {
-  SvgBpmApproveIcon,
-  SvgBpmCancelIcon,
-  SvgBpmRejectIcon,
-  SvgBpmRunningIcon,
-};
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 11205ce7e..313c70c21 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
@@ -1,8 +1,10 @@
 <script lang="ts" setup>
+// TODO @jason：你感觉要拆分下，按照表单么？
 import type { FormInstance } from 'ant-design-vue';
 import type { Rule } from 'ant-design-vue/es/form';
 
 import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+import type { SystemUserApi } from '#/api/system/user';
 
 import { computed, nextTick, reactive, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
@@ -41,23 +43,31 @@ import {
   cancelProcessInstanceByStartUser,
   getNextApprovalNodes,
 } from '#/api/bpm/processInstance';
-import * as TaskApi from '#/api/bpm/task';
-import * as UserApi from '#/api/system/user';
+import {
+  approveTask,
+  copyTask,
+  delegateTask,
+  getTaskListByReturn,
+  rejectTask,
+  returnTask,
+  signCreateTask,
+  signDeleteTask,
+  transferTask,
+} from '#/api/bpm/task';
 import { setConfAndFields2 } from '#/components/form-create';
+import { $t } from '#/locales';
 
 import Signature from './signature.vue';
 import ProcessInstanceTimeline from './time-line.vue';
 
 defineOptions({ name: 'ProcessInstanceBtnContainer' });
 
-// 定义 success 事件，用于操作成功后的回调
-
 const props = defineProps<{
   normalForm: any; // 流程表单 formCreate
   normalFormApi: any; // 流程表单 formCreate Api
   processDefinition: any; // 流程定义信息
   processInstance: any; // 流程实例信息
-  userOptions: UserApi.SystemUserApi.User[];
+  userOptions: SystemUserApi.User[];
   writableFields: string[]; // 流程表单可以编辑的字段
 }>(); // 当前登录的编号
 const emit = defineEmits(['success']);
@@ -67,12 +77,7 @@ const [SignatureModal, signatureModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-/** 创建流程表达式 */
-function openSignatureModal() {
-  signatureModalApi.setData(null).open();
-}
-
-const router = useRouter(); // 路由
+const router = useRouter();
 const userStore = useUserStore();
 const userId = userStore.userInfo?.id;
 const formLoading = ref(false); // 表单加载中
@@ -89,15 +94,19 @@ const popOverVisible: any = ref({
 }); // 气泡卡是否展示
 const returnList = ref([] as any); // 退回节点
 
+/** 创建流程表达式 */
+function openSignatureModal() {
+  signatureModalApi.setData(null).open();
+}
+
 // ========== 审批信息 ==========
 const runningTask = ref<any>(); // 运行中的任务
 const approveForm = ref<any>({}); // 审批通过时，额外的补充信息
 const approveFormFApi = ref<any>({}); // approveForms 的 fAPi
 const nodeTypeName = ref('审批'); // 节点类型名称
 
-// 审批通过意见表单
 const reasonRequire = ref();
-const approveFormRef = ref<FormInstance>();
+const approveFormRef = ref<FormInstance>(); // 审批通过意见表单
 const approveSignFormRef = ref();
 const nextAssigneesActivityNode = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>(
   [],
@@ -126,11 +135,10 @@ const approveReasonRule: Record<string, any> = computed(() => {
   };
 });
 
-// 拒绝表单
 const rejectFormRef = ref<FormInstance>();
 const rejectReasonForm = reactive({
   reason: '',
-});
+}); // 拒绝表单
 const rejectReasonRule: any = computed(() => {
   return {
     reason: [
@@ -143,8 +151,7 @@ const rejectReasonRule: any = computed(() => {
   } as Record<string, Rule[]>;
 });
 
-// 抄送表单
-const copyFormRef = ref<FormInstance>();
+const copyFormRef = ref<FormInstance>(); // 抄送表单
 const copyForm = reactive({
   copyUserIds: [],
   copyReason: '',
@@ -155,8 +162,7 @@ const copyFormRule: Record<string, Rule[]> = reactive({
   ],
 });
 
-// 转办表单
-const transferFormRef = ref<FormInstance>();
+const transferFormRef = ref<FormInstance>(); // 转办表单
 const transferForm = reactive({
   assigneeUserId: undefined,
   reason: '',
@@ -168,8 +174,7 @@ const transferFormRule: Record<string, Rule[]> = reactive({
   reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
 });
 
-// 委派表单
-const delegateFormRef = ref<FormInstance>();
+const delegateFormRef = ref<FormInstance>(); // 委派表单
 const delegateForm = reactive({
   delegateUserId: undefined,
   reason: '',
@@ -181,8 +186,7 @@ const delegateFormRule: Record<string, Rule[]> = reactive({
   reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
 });
 
-// 加签表单
-const addSignFormRef = ref<FormInstance>();
+const addSignFormRef = ref<FormInstance>(); // 加签表单
 const addSignForm = reactive({
   addSignUserIds: undefined,
   reason: '',
@@ -194,8 +198,7 @@ const addSignFormRule: Record<string, Rule[]> = reactive({
   reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
 });
 
-// 减签表单
-const deleteSignFormRef = ref<FormInstance>();
+const deleteSignFormRef = ref<FormInstance>(); // 减签表单
 const deleteSignForm = reactive({
   deleteSignTaskId: undefined,
   reason: '',
@@ -207,8 +210,7 @@ const deleteSignFormRule: Record<string, Rule[]> = reactive({
   reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
 });
 
-// 退回表单
-const returnFormRef = ref<FormInstance>();
+const returnFormRef = ref<FormInstance>(); // 退回表单
 const returnForm = reactive({
   targetTaskDefinitionKey: undefined,
   returnReason: '',
@@ -222,9 +224,7 @@ const returnFormRule: Record<string, Rule[]> = reactive({
   ],
 });
 
-// 取消表单
-const cancelFormRef = ref<FormInstance>();
-
+const cancelFormRef = ref<FormInstance>(); // 取消表单
 const cancelForm = reactive({
   cancelReason: '',
 });
@@ -255,11 +255,11 @@ async function openPopover(type: string) {
       message.warning('表单校验不通过，请先完善表单!!');
       return;
     }
-    initNextAssigneesFormField();
+    await initNextAssigneesFormField();
   }
   if (type === 'return') {
     // 获取退回节点
-    returnList.value = await TaskApi.getTaskListByReturn(runningTask.value.id);
+    returnList.value = await getTaskListByReturn(runningTask.value.id);
     if (returnList.value.length === 0) {
       message.warning('当前没有可退回的节点');
       return;
@@ -268,6 +268,7 @@ async function openPopover(type: string) {
   Object.keys(popOverVisible.value).forEach((item) => {
     if (popOverVisible.value[item]) popOverVisible.value[item] = item === type;
   });
+  // TODO @jason：下面这 2 行，要删除么？
   // await nextTick()
   // formRef.value.resetFields()
 }
@@ -332,6 +333,7 @@ async function initNextAssigneesFormField() {
 function selectNextAssigneesConfirm(id: string, userList: any[]) {
   approveReasonForm.nextAssignees[id] = userList?.map((item: any) => item.id);
 }
+
 /** 审批通过时，校验每个自选审批人的节点是否都已配置了审批人 */
 function validateNextAssignees() {
   if (Object.keys(nextAssigneesActivityNode.value).length === 0) {
@@ -383,7 +385,7 @@ async function handleAudit(pass: boolean, formRef: FormInstance | undefined) {
         await formCreateApi.validate();
         data.variables = approveForm.value.value;
       }
-      await TaskApi.approveTask(data);
+      await approveTask(data);
       popOverVisible.value.approve = false;
       nextAssigneesActivityNode.value = [];
       // 清理 Timeline 组件中的自定义审批人数据
@@ -397,7 +399,7 @@ async function handleAudit(pass: boolean, formRef: FormInstance | undefined) {
         id: runningTask.value.id,
         reason: rejectReasonForm.reason,
       };
-      await TaskApi.rejectTask(data);
+      await rejectTask(data);
       popOverVisible.value.reject = false;
       message.success('审批不通过成功');
     }
@@ -423,10 +425,10 @@ async function handleCopy() {
       reason: copyForm.copyReason,
       copyUserIds: copyForm.copyUserIds,
     };
-    await TaskApi.copyTask(data);
+    await copyTask(data);
     copyFormRef.value.resetFields();
     popOverVisible.value.copy = false;
-    message.success('操作成功');
+    message.success($t('ui.actionMessage.operationSuccess'));
   } finally {
     formLoading.value = false;
   }
@@ -437,7 +439,9 @@ async function handleTransfer() {
   formLoading.value = true;
   try {
     // 1.1 校验表单
-    if (!transferFormRef.value) return;
+    if (!transferFormRef.value) {
+      return;
+    }
     await transferFormRef.value.validate();
     // 1.2 提交转交
     const data = {
@@ -445,10 +449,10 @@ async function handleTransfer() {
       reason: transferForm.reason,
       assigneeUserId: transferForm.assigneeUserId,
     };
-    await TaskApi.transferTask(data);
+    await transferTask(data);
     transferFormRef.value.resetFields();
     popOverVisible.value.transfer = false;
-    message.success('操作成功');
+    message.success($t('ui.actionMessage.operationSuccess'));
     // 2. 加载最新数据
     reload();
   } finally {
@@ -469,11 +473,10 @@ async function handleDelegate() {
       reason: delegateForm.reason,
       delegateUserId: delegateForm.delegateUserId,
     };
-
-    await TaskApi.delegateTask(data);
+    await delegateTask(data);
     popOverVisible.value.delegate = false;
     delegateFormRef.value.resetFields();
-    message.success('操作成功');
+    message.success($t('ui.actionMessage.operationSuccess'));
     // 2. 加载最新数据
     reload();
   } finally {
@@ -495,8 +498,8 @@ async function handlerAddSign(type: string) {
       reason: addSignForm.reason,
       userIds: addSignForm.addSignUserIds,
     };
-    await TaskApi.signCreateTask(data);
-    message.success('操作成功');
+    await signCreateTask(data);
+    message.success($t('ui.actionMessage.operationSuccess'));
     addSignFormRef.value.resetFields();
     popOverVisible.value.addSign = false;
     // 2 加载最新数据
@@ -519,11 +522,10 @@ async function handleReturn() {
       reason: returnForm.returnReason,
       targetTaskDefinitionKey: returnForm.targetTaskDefinitionKey,
     };
-
-    await TaskApi.returnTask(data);
+    await returnTask(data);
     popOverVisible.value.return = false;
     returnFormRef.value.resetFields();
-    message.success('操作成功');
+    message.success($t('ui.actionMessage.operationSuccess'));
     // 2 重新加载数据
     reload();
   } finally {
@@ -544,7 +546,7 @@ async function handleCancel() {
       cancelForm.cancelReason,
     );
     popOverVisible.value.return = false;
-    message.success('操作成功');
+    message.success($t('ui.actionMessage.operationSuccess'));
     cancelFormRef.value.resetFields();
     // 2 重新加载数据
     reload();
@@ -557,10 +559,9 @@ async function handleCancel() {
 async function handleReCreate() {
   // 跳转发起流程界面
   await router.push({
-    path: '/bpm/task/create',
+    name: 'BpmProcessInstanceCreate',
     query: { processInstanceId: props.processInstance?.id },
   });
-  // router.push('/bpm/task/my');
 }
 
 /** 获取减签人员标签 */
@@ -569,6 +570,7 @@ function getDeleteSignUserLabel(task: any): string {
   const nickname = task?.assigneeUser?.nickname || task?.ownerUser?.nickname;
   return `${nickname} ( 所属部门：${deptName} )`;
 }
+
 /** 处理减签 */
 async function handlerDeleteSign() {
   formLoading.value = true;
@@ -581,7 +583,7 @@ async function handlerDeleteSign() {
       id: deleteSignForm.deleteSignTaskId,
       reason: deleteSignForm.reason,
     };
-    await TaskApi.signDeleteTask(data);
+    await signDeleteTask(data);
     message.success('减签成功');
     deleteSignFormRef.value.resetFields();
     popOverVisible.value.deleteSign = false;
@@ -591,6 +593,7 @@ async function handlerDeleteSign() {
     formLoading.value = false;
   }
 }
+
 /** 重新加载数据 */
 function reload() {
   emit('success');
@@ -642,6 +645,7 @@ function getButtonDisplayName(btnType: BpmTaskOperationButtonTypeEnum) {
   return displayName;
 }
 
+/** 加载待办任务 */
 function loadTodoTask(task: any) {
   approveForm.value = {};
   runningTask.value = task;
@@ -649,7 +653,7 @@ function loadTodoTask(task: any) {
   reasonRequire.value = task?.reasonRequire ?? false;
   nodeTypeName.value =
     task?.nodeType === BpmNodeTypeEnum.TRANSACTOR_NODE ? '办理' : '审批';
-  // 处理 approve 表单.
+  // 处理 approve 表单
   if (task && task.formId && task.formConf) {
     const tempApproveForm = {};
     setConfAndFields2(
@@ -706,6 +710,7 @@ defineExpose({ loadTodoTask });
 </script>
 <template>
   <div class="flex items-center">
+    <!-- TODO @jason：这里要删除么？ -->
     <!-- <div>是否处理中 {{ !!isHandleTaskStatus() }}</div> -->
 
     <!-- 【通过】按钮 -->
@@ -776,7 +781,6 @@ defineExpose({ loadTodoTask });
                 <Button @click="openSignatureModal" type="primary">
                   {{ approveReasonForm.signPicUrl ? '重新签名' : '点击签名' }}
                 </Button>
-
                 <div class="mt-2">
                   <Image
                     class="float-left h-40 w-80"
@@ -785,7 +789,6 @@ defineExpose({ loadTodoTask });
                   />
                 </div>
               </FormItem>
-
               <FormItem :label="`${nodeTypeName}意见`" name="reason">
                 <Textarea
                   v-model:value="approveReasonForm.reason"
@@ -793,7 +796,6 @@ defineExpose({ loadTodoTask });
                   :rows="4"
                 />
               </FormItem>
-
               <FormItem>
                 <Space>
                   <Button
@@ -901,6 +903,7 @@ defineExpose({ loadTodoTask });
               label-width="100px"
             >
               <FormItem label="抄送人" name="copyUserIds">
+                <!-- TODO @jason：看看是不是用 看看能不能通过 tailwindcss 简化下 style -->
                 <Select
                   v-model:value="copyForm.copyUserIds"
                   :allow-clear="true"
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
index 2d24ff70b..3698f6594 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
@@ -6,7 +6,6 @@ import { IconifyIcon } from '@vben/icons';
 import { base64ToFile } from '@vben/utils';
 
 import { Button, message, Space, Tooltip } from 'ant-design-vue';
-// TODO @ziye：这个可能，适合放到全局？！因为 element-plus 也用这个；
 import Vue3Signature from 'vue3-signature';
 
 import { uploadFile } from '#/api/infra/file';
@@ -20,28 +19,29 @@ const emits = defineEmits(['success']);
 const signature = ref<InstanceType<typeof Vue3Signature>>();
 
 const [Modal, modalApi] = useVbenModal({
-  title: '流程签名',
-  onOpenChange(visible) {
-    if (!visible) {
-      modalApi.close();
-    }
-  },
   async onConfirm() {
+    // TODO @jason：这里需要使用类似 modalApi.lock() 么？类似别的模块
     message.success({
-      content: '签名上传中请稍等。。。',
+      content: '签名上传中，请稍等...',
     });
     const signFileUrl = await uploadFile({
       file: base64ToFile(signature?.value?.save('image/jpeg') || '', '签名'),
     });
     emits('success', signFileUrl);
-    // TODO @ziye：下面有个告警哈；ps：所有告警，皆是错误，可以关注 ide 给的提示哈；
-    modalApi.close();
+    // TODO @jason：是不是不用主动 close？
+    await modalApi.close();
+  },
+  // TODO @jason：这个是不是下面方法，可以删除；
+  onOpenChange(visible) {
+    if (!visible) {
+      modalApi.close();
+    }
   },
 });
 </script>
 
 <template>
-  <Modal class="h-2/5 w-3/5">
+  <Modal title="流程签名" class="h-2/5 w-3/5">
     <div class="mb-2 flex justify-end">
       <Space>
         <Tooltip title="撤销上一步操作">
@@ -52,7 +52,6 @@ const [Modal, modalApi] = useVbenModal({
             撤销
           </Button>
         </Tooltip>
-
         <Tooltip title="清空画布">
           <Button @click="signature?.clear()">
             <template #icon>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue
index 2af24ab6e..751f390ca 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { SimpleFlowNode } from '#/components/simple-process-design';
+import type { SimpleFlowNode } from '#/views/bpm/components/simple-process-design';
 
 import { ref, watch } from 'vue';
 
 import { BpmNodeTypeEnum, BpmTaskStatusEnum } from '@vben/constants';
 
-import { SimpleProcessViewer } from '#/components/simple-process-design';
+import { SimpleProcessViewer } from '#/views/bpm/components/simple-process-design';
 
 defineOptions({ name: 'BpmProcessInstanceSimpleViewer' });
 
@@ -23,10 +23,8 @@ const props = withDefaults(
 );
 
 const simpleModel = ref<any>({});
-// 用户任务
-const tasks = ref([]);
-// 流程实例
-const processInstance = ref();
+const tasks = ref([]); // 用户任务
+const processInstance = ref(); // 流程实例
 
 /** 监控模型视图 包括任务列表、进行中的活动节点编号等 */
 watch(
@@ -69,6 +67,7 @@ watch(
     }
   },
 );
+
 const setSimpleModelNodeTaskStatus = (
   simpleModel: SimpleFlowNode | undefined,
   processStatus: number,
@@ -102,7 +101,7 @@ const setSimpleModelNodeTaskStatus = (
     } else if (finishedActivityIds.includes(simpleModel.id)) {
       simpleModel.activityStatus = BpmTaskStatusEnum.APPROVE;
     }
-    // TODO 是不是还缺一个 cancel 的状态
+    // TODO 是不是还缺一个 cancel 的状态 @jason：
   }
   // 抄送节点
   if (simpleModel.type === BpmNodeTypeEnum.COPY_TASK_NODE) {
@@ -177,5 +176,3 @@ const setSimpleModelNodeTaskStatus = (
     />
   </div>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue
index 7762b45d5..c3fb1050d 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue
@@ -1,10 +1,10 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { formCreate } from '@form-create/antd-designer';
 
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { BpmTaskApi } from '#/api/bpm/task';
 
-import { nextTick, onMounted, ref, shallowRef } from 'vue';
+import { nextTick, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
@@ -25,64 +25,119 @@ const props = defineProps<{
   loading: boolean;
 }>();
 
-// 使用 shallowRef 减少不必要的深度响应
-const columns = shallowRef([
-  {
-    field: 'name',
-    title: '审批节点',
-    minWidth: 150,
-  },
-  {
-    field: 'approver',
-    title: '审批人',
-    slots: {
-      default: ({ row }: { row: BpmTaskApi.TaskManager }) => {
-        return row.assigneeUser?.nickname || row.ownerUser?.nickname;
+/** 表单类型定义 */
+interface TaskForm {
+  rule: any[];
+  option: Record<string, any>;
+  value: Record<string, any>;
+}
+
+/** 获取表格列配置 */
+function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '审批节点',
+      minWidth: 150,
+    },
+    {
+      field: 'approver',
+      title: '审批人',
+      slots: {
+        default: ({ row }: { row: BpmTaskApi.TaskManager }) => {
+          return row.assigneeUser?.nickname || row.ownerUser?.nickname;
+        },
+      },
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '开始时间',
+      formatter: 'formatDateTime',
+      minWidth: 180,
+    },
+    {
+      field: 'endTime',
+      title: '结束时间',
+      formatter: 'formatDateTime',
+      minWidth: 180,
+    },
+    {
+      field: 'status',
+      title: '审批状态',
+      minWidth: 150,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_TASK_STATUS },
       },
     },
-    minWidth: 180,
-  },
-  {
-    field: 'createTime',
-    title: '开始时间',
-    formatter: 'formatDateTime',
-    minWidth: 180,
-  },
-  {
-    field: 'endTime',
-    title: '结束时间',
-    formatter: 'formatDateTime',
-    minWidth: 180,
-  },
-  {
-    field: 'status',
-    title: '审批状态',
-    minWidth: 150,
-    cellRender: {
-      name: 'CellDict',
-      props: { type: DICT_TYPE.BPM_TASK_STATUS },
+    {
+      field: 'reason',
+      title: '审批建议',
+      slots: {
+        default: 'slot-reason',
+      },
+      minWidth: 200,
     },
-  },
-  {
-    field: 'reason',
-    title: '审批建议',
-    slots: {
-      default: 'slot-reason',
+    {
+      field: 'durationInMillis',
+      title: '耗时',
+      minWidth: 180,
+      formatter: 'formatPast2',
     },
-    minWidth: 200,
-  },
-  {
-    field: 'durationInMillis',
-    title: '耗时',
-    minWidth: 180,
-    formatter: 'formatPast2',
-  },
-]);
+  ];
+}
+
+const formRef = ref<formCreate>();
+const taskForm = ref<TaskForm>({
+  rule: [],
+  option: {},
+  value: {},
+});
+
+const [Modal, modalApi] = useVbenModal({
+  title: '查看表单',
+  footer: false,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 显示表单详情 */
+async function handleShowFormDetail(row: BpmTaskApi.TaskManager) {
+  // 设置表单配置和表单字段
+  taskForm.value = {
+    rule: [],
+    option: {},
+    value: row,
+  };
+  setConfAndFields2(
+    taskForm,
+    row.formConf,
+    row.formFields || [],
+    row.formVariables || {},
+  );
+
+  // 打开弹窗
+  modalApi.open();
+  // 等待表单渲染
+  await nextTick();
+  // 获取表单 API 实例
+  const formApi = formRef.value?.fapi;
+  if (!formApi) {
+    return;
+  }
+  // 设置表单不可编辑
+  formApi.btn.show(false);
+  formApi.resetBtn.show(false);
+  formApi.disabled(true);
+}
 
-// Grid配置和API
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: columns.value,
+    columns: useGridColumns(),
     keepSource: true,
     showFooter: true,
     border: true,
@@ -96,6 +151,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     pagerConfig: {
       enabled: false,
@@ -103,84 +159,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
     toolbarConfig: {
       enabled: false,
     },
-    cellConfig: {
-      height: 60,
-    },
-  } as VxeTableGridOptions<BpmTaskApi.Task>,
+  } as VxeTableGridOptions<BpmTaskApi.TaskManager>,
 });
 
-/**
- * 刷新表格数据
- */
-function refresh() {
-  gridApi.query();
-}
-
-// 表单相关
-interface TaskForm {
-  rule: any[];
-  option: Record<string, any>;
-  value: Record<string, any>;
-}
-
-// 定义表单组件引用类型
-
-// 使用明确的类型定义
-const formRef = ref<formCreate>();
-const taskForm = ref<TaskForm>({
-  rule: [],
-  option: {},
-  value: {},
-});
-
-/**
- * 显示表单详情
- * @param row 任务数据
- */
-async function showFormDetail(row: BpmTaskApi.TaskManager): Promise<void> {
-  // 设置表单配置和表单字段
-  taskForm.value = {
-    rule: [],
-    option: {},
-    value: row,
-  };
-
-  setConfAndFields2(
-    taskForm,
-    row.formConf,
-    row.formFields || [],
-    row.formVariables || {},
-  );
-
-  // 打开弹窗
-  modalApi.open();
-
-  // 等待表单渲染
-  await nextTick();
-
-  // 获取表单API实例
-  const formApi = formRef.value?.fapi;
-  if (!formApi) return;
-
-  // 设置表单不可编辑
-  formApi.btn.show(false);
-  formApi.resetBtn.show(false);
-  formApi.disabled(true);
-}
-
-// 表单查看模态框
-const [Modal, modalApi] = useVbenModal({
-  title: '查看表单',
-  footer: false,
-});
-
-onMounted(() => {
-  refresh();
-});
-
-// 暴露刷新方法给父组件
 defineExpose({
-  refresh,
+  refresh: handleRefresh,
 });
 </script>
 
@@ -191,14 +174,13 @@ defineExpose({
         <div class="flex flex-wrap items-center justify-center">
           <span v-if="row.reason">{{ row.reason }}</span>
           <span v-else>-</span>
-
           <Button
             v-if="row.formId > 0"
             type="primary"
-            @click="showFormDetail(row)"
             size="small"
             ghost
             class="ml-1"
+            @click="handleShowFormDetail(row)"
           >
             <IconifyIcon icon="lucide:file-text" />
             <span class="!ml-0.5 text-xs">查看表单</span>
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 a13550ae5..518e33ceb 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
@@ -36,36 +36,23 @@ const emit = defineEmits<{
   selectUserConfirm: [activityId: string, userList: any[]];
 }>();
 
-const { push } = useRouter(); // 路由
+const { push } = useRouter();
 
-// 状态图标映射
 const statusIconMap: Record<
   string,
   { animation?: string; color: string; icon: string }
 > = {
-  // 跳过
-  '-2': { color: '#909398', icon: 'mdi:skip-forward-outline' },
-  // 审批未开始
-  '-1': { color: '#909398', icon: 'mdi:clock-outline' },
-  // 待审批
-  '0': { color: '#ff943e', icon: 'mdi:loading', animation: 'animate-spin' },
-  // 审批中
-  '1': { color: '#448ef7', icon: 'mdi:loading', animation: 'animate-spin' },
-  // 审批通过
-  '2': { color: '#00b32a', icon: 'mdi:check' },
-  // 审批不通过
-  '3': { color: '#f46b6c', icon: 'mdi:close' },
-  // 已取消
-  '4': { color: '#cccccc', icon: 'mdi:trash-can-outline' },
-  // 退回
-  '5': { color: '#f46b6c', icon: 'mdi:arrow-left' },
-  // 委派中
-  '6': { color: '#448ef7', icon: 'mdi:clock-outline' },
-  // 审批通过中
-  '7': { color: '#00b32a', icon: 'mdi:check' },
-};
-
-// 节点类型图标映射
+  '-2': { color: '#909398', icon: 'mdi:skip-forward-outline' }, // 跳过
+  '-1': { color: '#909398', icon: 'mdi:clock-outline' }, // 审批未开始
+  '0': { color: '#ff943e', icon: 'mdi:loading', animation: 'animate-spin' }, // 待审批
+  '1': { color: '#448ef7', icon: 'mdi:loading', animation: 'animate-spin' }, // 审批中
+  '2': { color: '#00b32a', icon: 'mdi:check' }, // 审批通过
+  '3': { color: '#f46b6c', icon: 'mdi:close' }, // 审批不通过
+  '4': { color: '#cccccc', icon: 'mdi:trash-can-outline' }, // 已取消
+  '5': { color: '#f46b6c', icon: 'mdi:arrow-left' }, // 退回
+  '6': { color: '#448ef7', icon: 'mdi:clock-outline' }, // 委派中
+  '7': { color: '#00b32a', icon: 'mdi:check' }, // 审批通过中
+}; // 状态图标映射
 const nodeTypeSvgMap = {
   // 结束节点
   [BpmNodeTypeEnum.END_EVENT_NODE]: {
@@ -107,40 +94,39 @@ const nodeTypeSvgMap = {
     color: '#14bb83',
     icon: 'icon-park-outline:tree-diagram',
   },
-} as Record<BpmNodeTypeEnum, { color: string; icon: string }>;
+} as Record<BpmNodeTypeEnum, { color: string; icon: string }>; // 节点类型图标映射
+const onlyStatusIconShow = [-1, 0, 1]; // 只有状态是 -1、0、1 才展示头像右小角状态小 icon
 
-// 只有状态是 -1、0、1 才展示头像右小角状态小icon
-const onlyStatusIconShow = [-1, 0, 1];
-
-// 获取审批节点类型图标
+/** 获取审批节点类型图标 */
 function getApprovalNodeTypeIcon(nodeType: BpmNodeTypeEnum) {
   return nodeTypeSvgMap[nodeType]?.icon;
 }
 
-// 获取审批节点图标
+/** 获取审批节点图标 */
 function getApprovalNodeIcon(taskStatus: number, nodeType: BpmNodeTypeEnum) {
   if (taskStatus === BpmTaskStatusEnum.NOT_START) {
     return statusIconMap[taskStatus]?.icon || 'mdi:clock-outline';
   }
-
   if (
-    nodeType === BpmNodeTypeEnum.START_USER_NODE ||
-    nodeType === BpmNodeTypeEnum.USER_TASK_NODE ||
-    nodeType === BpmNodeTypeEnum.TRANSACTOR_NODE ||
-    nodeType === BpmNodeTypeEnum.CHILD_PROCESS_NODE ||
-    nodeType === BpmNodeTypeEnum.END_EVENT_NODE
+    [
+      BpmNodeTypeEnum.START_USER_NODE,
+      BpmNodeTypeEnum.USER_TASK_NODE,
+      BpmNodeTypeEnum.TRANSACTOR_NODE,
+      BpmNodeTypeEnum.CHILD_PROCESS_NODE,
+      BpmNodeTypeEnum.END_EVENT_NODE,
+    ].includes(nodeType)
   ) {
     return statusIconMap[taskStatus]?.icon || 'mdi:clock-outline';
   }
   return 'mdi:clock-outline';
 }
 
-// 获取审批节点颜色
+/** 获取审批节点颜色 */
 function getApprovalNodeColor(taskStatus: number) {
   return statusIconMap[taskStatus]?.color;
 }
 
-// 获取审批节点时间
+/** 获取审批节点时间 */
 function getApprovalNodeTime(node: BpmProcessInstanceApi.ApprovalNodeInfo) {
   if (node.nodeType === BpmNodeTypeEnum.START_USER_NODE && node.startTime) {
     return formatDateTime(node.startTime);
@@ -154,7 +140,6 @@ function getApprovalNodeTime(node: BpmProcessInstanceApi.ApprovalNodeInfo) {
   return '';
 }
 
-// 选择自定义审批人
 const [UserSelectModalComp, userSelectModalApi] = useVbenModal({
   connectedComponent: UserSelectModal,
   destroyOnClose: true,
@@ -162,7 +147,7 @@ const [UserSelectModalComp, userSelectModalApi] = useVbenModal({
 const selectedActivityNodeId = ref<string>();
 const customApproveUsers = ref<Record<string, any[]>>({}); // key：activityId，value：用户列表
 
-// 打开选择用户弹窗
+/** 打开选择用户弹窗 */
 const handleSelectUser = (activityId: string, selectedList: any[]) => {
   selectedActivityNodeId.value = activityId;
   userSelectModalApi
@@ -170,7 +155,7 @@ const handleSelectUser = (activityId: string, selectedList: any[]) => {
     .open();
 };
 
-// 选择用户完成
+/** 选择用户完成 */
 const selectedUsers = ref<number[]>([]);
 function handleUserSelectConfirm(userList: any[]) {
   if (!selectedActivityNodeId.value) {
@@ -194,7 +179,7 @@ function handleChildProcess(activity: any) {
   });
 }
 
-// 判断是否需要显示自定义选择审批人
+/** 判断是否需要显示自定义选择审批人 */
 function shouldShowCustomUserSelect(
   activity: BpmProcessInstanceApi.ApprovalNodeInfo,
 ) {
@@ -209,7 +194,7 @@ function shouldShowCustomUserSelect(
   );
 }
 
-// 判断是否需要显示审批意见
+/** 判断是否需要显示审批意见 */
 function shouldShowApprovalReason(task: any, nodeType: BpmNodeTypeEnum) {
   return (
     task.reason &&
@@ -219,12 +204,12 @@ function shouldShowApprovalReason(task: any, nodeType: BpmNodeTypeEnum) {
   );
 }
 
-// 用户选择弹窗关闭
+/** 用户选择弹窗关闭 */
 function handleUserSelectClosed() {
   selectedUsers.value = [];
 }
 
-// 用户选择弹窗取消
+/** 用户选择弹窗取消 */
 function handleUserSelectCancel() {
   selectedUsers.value = [];
 }
@@ -241,7 +226,6 @@ const batchSetCustomApproveUsers = (data: Record<string, any[]>) => {
   });
 };
 
-// 暴露方法给父组件
 defineExpose({ setCustomApproveUsers, batchSetCustomApproveUsers });
 </script>
 
@@ -264,10 +248,9 @@ defineExpose({ setCustomApproveUsers, batchSetCustomApproveUsers });
                 class="size-6 text-white"
               />
             </div>
-
             <div
               v-if="showStatusIcon"
-              class="absolute right--2.5 top-4 flex size-5 items-center rounded-full border-2 border-solid border-white p-0.5"
+              class="absolute left-4 top-4 flex size-4 items-center rounded-full border-2 border-solid border-white p-0.5"
               :style="{
                 backgroundColor: getApprovalNodeColor(activity.status),
               }"
@@ -409,14 +392,14 @@ defineExpose({ setCustomApproveUsers, batchSetCustomApproveUsers });
                     v-if="
                       showStatusIcon && onlyStatusIconShow.includes(task.status)
                     "
-                    class="absolute left-6 top-5 flex items-center rounded-full border-2 border-solid border-white p-1"
+                    class="absolute left-5 top-5 flex items-center rounded-full border-2 border-solid border-white p-1"
                     :style="{
                       backgroundColor: statusIconMap[task.status]?.color,
                     }"
                   >
                     <IconifyIcon
                       :icon="statusIconMap[task.status]?.icon || 'lucide:clock'"
-                      class="size-2 text-white"
+                      class="size-1.5 text-white"
                       :class="[statusIconMap[task.status]?.animation]"
                     />
                   </div>
diff --git a/apps/web-antd/src/views/bpm/processInstance/index.vue b/apps/web-antd/src/views/bpm/processInstance/index.vue
index bb8b1ecd1..6a7492520 100644
--- a/apps/web-antd/src/views/bpm/processInstance/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { BpmTaskApi } from '#/api/bpm/task';
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 
 import { h } from 'vue';
 
@@ -10,11 +10,13 @@ import { BpmProcessInstanceStatus, DICT_TYPE } from '@vben/constants';
 import { Button, message, Textarea } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProcessDefinition } from '#/api/bpm/definition';
 import {
   cancelProcessInstanceByStartUser,
   getProcessInstanceMyPage,
 } from '#/api/bpm/processInstance';
 import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
 import { router } from '#/router';
 
 import { useGridColumns, useGridFormSchema } from './data';
@@ -27,43 +29,53 @@ function handleRefresh() {
 }
 
 /** 查看流程实例 */
-function handleDetail(row: BpmTaskApi.Task) {
+function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) {
   router.push({
     name: 'BpmProcessInstanceDetail',
     query: { id: row.id },
   });
 }
 
+/** 重新发起流程 */
+async function handleCreate(row: BpmProcessInstanceApi.ProcessInstance) {
+  // 如果是【业务表单】，不支持重新发起
+  if (row?.id) {
+    const processDefinitionDetail = await getProcessDefinition(
+      row.processDefinitionId,
+    );
+    if (processDefinitionDetail.formType === 20) {
+      message.error(
+        '重新发起流程失败，原因：该流程使用业务表单，不支持重新发起',
+      );
+      return;
+    }
+  }
+  // 跳转发起流程界面
+  await router.push({
+    name: 'BpmProcessInstanceCreate',
+    query: { processInstanceId: row?.id },
+  });
+}
+
 /** 取消流程实例 */
-function handleCancel(row: BpmTaskApi.Task) {
+function handleCancel(row: BpmProcessInstanceApi.ProcessInstance) {
   prompt({
-    async beforeClose(scope) {
-      if (scope.isConfirm) {
-        if (scope.value) {
-          try {
-            await cancelProcessInstanceByStartUser(row.id, scope.value);
-            message.success('取消成功');
-            handleRefresh();
-          } catch {
-            return false;
-          }
-        } else {
-          message.error('请输入取消原因');
-          return false;
-        }
-      }
-    },
     component: () => {
       return h(Textarea, {
         placeholder: '请输入取消原因',
         allowClear: true,
         rows: 2,
-        rules: [{ required: true, message: '请输入取消原因' }],
       });
     },
     content: '请输入取消原因',
     title: '取消流程',
     modelPropName: 'value',
+  }).then(async (reason) => {
+    if (reason) {
+      await cancelProcessInstanceByStartUser(row.id, reason);
+      message.success('取消成功');
+      handleRefresh();
+    }
   });
 }
 
@@ -88,15 +100,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
-    cellConfig: {
-      height: 64,
-    },
-  } as VxeTableGridOptions<BpmTaskApi.Task>,
+  } as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstance>,
 });
 </script>
 
@@ -110,7 +120,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </template>
 
     <Grid table-title="流程状态">
-      <!-- 摘要 -->
       <template #slot-summary="{ row }">
         <div
           class="flex flex-col py-2"
@@ -124,31 +133,29 @@ const [Grid, gridApi] = useVbenVxeGrid({
         </div>
         <div v-else>-</div>
       </template>
-
       <template #slot-status="{ row }">
-        <!-- 审批中状态 -->
         <template
           v-if="
             row.status === BpmProcessInstanceStatus.RUNNING &&
-            row.tasks?.length > 0
+            row.tasks!.length > 0
           "
         >
           <!-- 单人审批 -->
-          <template v-if="row.tasks.length === 1">
+          <template v-if="row.tasks!.length === 1">
             <span>
               <Button type="link" @click="handleDetail(row)">
-                {{ row.tasks[0].assigneeUser?.nickname }}
+                {{ row.tasks![0]!.assigneeUser?.nickname }}
               </Button>
-              ({{ row.tasks[0].name }}) 审批中
+              ({{ row.tasks![0]!.name }}) 审批中
             </span>
           </template>
           <!-- 多人审批 -->
           <template v-else>
             <span>
               <Button type="link" @click="handleDetail(row)">
-                {{ row.tasks[0].assigneeUser?.nickname }}
+                {{ row.tasks![0]!.assigneeUser?.nickname }}
               </Button>
-              等 {{ row.tasks.length }} 人 ({{ row.tasks[0].name }})审批中
+              等 {{ row.tasks!.length }} 人 ({{ row.tasks![0]!.name }})审批中
             </span>
           </template>
         </template>
@@ -179,6 +186,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
               auth: ['bpm:process-instance:cancel'],
               onClick: handleCancel.bind(null, row),
             },
+            {
+              label: '重新发起',
+              type: 'link',
+              icon: ACTION_ICON.ADD,
+              ifShow: row.status !== BpmProcessInstanceStatus.RUNNING,
+              auth: ['bpm:process-instance:create'],
+              onClick: handleCreate.bind(null, row),
+            },
           ]"
         />
       </template>
diff --git a/apps/web-antd/src/views/bpm/processInstance/manager/data.ts b/apps/web-antd/src/views/bpm/processInstance/manager/data.ts
index 1f6e8635c..a356cd076 100644
--- a/apps/web-antd/src/views/bpm/processInstance/manager/data.ts
+++ b/apps/web-antd/src/views/bpm/processInstance/manager/data.ts
@@ -1,15 +1,11 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
-
-import { h } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
-import { Button } from 'ant-design-vue';
-
 import { getCategorySimpleList } from '#/api/bpm/category';
+import { getSimpleProcessDefinitionList } from '#/api/bpm/definition';
 import { getSimpleUserList } from '#/api/system/user';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -23,7 +19,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请选择发起人',
         allowClear: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -40,13 +36,15 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'processDefinitionId',
       label: '所属流程',
-      component: 'Input',
+      component: 'ApiSelect',
       componentProps: {
-        placeholder: '请输入流程定义的编号',
+        placeholder: '请选择流程定义',
         allowClear: true,
+        api: getSimpleProcessDefinitionList,
+        labelField: 'name',
+        valueField: 'id',
       },
     },
-    // 流程分类
     {
       fieldName: 'category',
       label: '流程分类',
@@ -54,12 +52,11 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入流程分类',
         allowClear: true,
-        api: () => getCategorySimpleList(),
+        api: getCategorySimpleList,
         labelField: 'name',
         valueField: 'code',
       },
     },
-    // 流程状态
     {
       fieldName: 'status',
       label: '流程状态',
@@ -73,7 +70,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
-    // 发起时间
     {
       fieldName: 'createTime',
       label: '发起时间',
@@ -87,9 +83,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(
-  onTaskClick: (task: BpmProcessInstanceApi.Task) => void,
-): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -103,27 +97,22 @@ export function useGridColumns(
       minWidth: 200,
       fixed: 'left',
     },
-
     {
       field: 'categoryName',
       title: '流程分类',
       minWidth: 120,
       fixed: 'left',
     },
-
     {
       field: 'startUser.nickname',
       title: '流程发起人',
       minWidth: 120,
     },
-
     {
       field: 'startUser.deptName',
       title: '发起部门',
       minWidth: 120,
     },
-
-    // 流程状态
     {
       field: 'status',
       title: '流程状态',
@@ -133,7 +122,6 @@ export function useGridColumns(
         props: { type: DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS },
       },
     },
-
     {
       field: 'startTime',
       title: '发起时间',
@@ -152,29 +140,11 @@ export function useGridColumns(
       minWidth: 180,
       formatter: 'formatPast2',
     },
-
-    // 当前审批任务 tasks
     {
       field: 'tasks',
       title: '当前审批任务',
       minWidth: 320,
-      slots: {
-        default: ({ row }) => {
-          if (!row?.tasks?.length) return '-';
-
-          return row.tasks.map((task: BpmProcessInstanceApi.Task) =>
-            h(
-              Button,
-              {
-                type: 'link',
-                size: 'small',
-                onClick: () => onTaskClick(task),
-              },
-              { default: () => task.name },
-            ),
-          );
-        },
-      },
+      slots: { default: 'tasks' },
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/bpm/processInstance/manager/index.vue b/apps/web-antd/src/views/bpm/processInstance/manager/index.vue
index 5f2abc6fe..592b7ee8c 100644
--- a/apps/web-antd/src/views/bpm/processInstance/manager/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/manager/index.vue
@@ -7,7 +7,7 @@ import { h } from 'vue';
 import { DocAlert, Page, prompt } from '@vben/common-ui';
 import { BpmProcessInstanceStatus } from '@vben/constants';
 
-import { message, Textarea } from 'ant-design-vue';
+import { Button, message, Textarea } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -26,15 +26,19 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 点击任务 */
-function onTaskClick(task: BpmProcessInstanceApi.Task) {
-  // TODO 待实现
-  console.warn(task);
+/** 查看任务详情 */
+function handleTaskDetail(
+  row: BpmProcessInstanceApi.ProcessInstance,
+  task: BpmProcessInstanceApi.Task,
+) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.id, taskId: task.id },
+  });
 }
 
 /** 查看流程实例 */
 function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) {
-  console.warn(row);
   router.push({
     name: 'BpmProcessInstanceDetail',
     query: { id: row.id },
@@ -44,36 +48,23 @@ function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) {
 /** 取消流程实例 */
 function handleCancel(row: BpmProcessInstanceApi.ProcessInstance) {
   prompt({
-    async beforeClose(scope) {
-      if (scope.isConfirm) {
-        if (scope.value) {
-          try {
-            await cancelProcessInstanceByAdmin(row.id, scope.value);
-            message.success('取消成功');
-            handleRefresh();
-          } catch {
-            return false;
-          }
-        } else {
-          message.error('请输入取消原因');
-          return false;
-        }
-      }
-    },
     component: () => {
       return h(Textarea, {
         placeholder: '请输入取消原因',
         allowClear: true,
         rows: 2,
-        rules: [{ required: true, message: '请输入取消原因' }],
       });
     },
     content: '请输入取消原因',
     title: '取消流程',
     modelPropName: 'value',
-  })
-    .then(() => {})
-    .catch(() => {});
+  }).then(async (reason) => {
+    if (reason) {
+      await cancelProcessInstanceByAdmin(row.id, reason);
+      message.success('取消成功');
+      handleRefresh();
+    }
+  });
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -81,7 +72,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onTaskClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -97,6 +88,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -113,6 +105,19 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </template>
 
     <Grid table-title="流程实例">
+      <template #tasks="{ row }">
+        <template v-if="row.tasks && row.tasks.length > 0">
+          <Button
+            v-for="task in row.tasks"
+            :key="task.id"
+            type="link"
+            @click="handleTaskDetail(row, task)"
+          >
+            {{ task.name }}
+          </Button>
+        </template>
+        <span v-else>-</span>
+      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
diff --git a/apps/web-antd/src/views/bpm/processInstance/report/data.ts b/apps/web-antd/src/views/bpm/processInstance/report/data.ts
index 6db9cf278..dc099b5bf 100644
--- a/apps/web-antd/src/views/bpm/processInstance/report/data.ts
+++ b/apps/web-antd/src/views/bpm/processInstance/report/data.ts
@@ -8,26 +8,31 @@ import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
+import { getSimpleUserList } from '#/api/system/user';
 import { getRangePickerDefaultProps } from '#/utils';
 
-/** 搜索的表单 */
+interface FormField {
+  field: string;
+  title: string;
+  type: string;
+}
+
+/** 列表的搜索表单 */
 export function useGridFormSchema(
-  userList: any[] = [],
-  formFields: any[] = [],
+  formFields: FormField[] = [],
 ): VbenFormSchema[] {
-  // 基础搜索字段
-  const baseFormSchema = [
+  // 基础搜索字段配置
+  const baseFormSchema: VbenFormSchema[] = [
     {
       fieldName: 'startUserId',
       label: '发起人',
-      component: 'Select',
+      component: 'ApiSelect',
       componentProps: {
         placeholder: '请选择发起人',
         allowClear: true,
-        options: userList.map((user) => ({
-          label: user.nickname,
-          value: user.id,
-        })),
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
       },
     },
     {
@@ -72,29 +77,27 @@ export function useGridFormSchema(
     },
   ];
 
-  // 动态表单字段 暂时只支持 input 和 textarea,  TODO 其他类型的支持
-  const dynamicFormSchema = formFields
-    .filter((item) => item.type === 'input' || item.type === 'textarea')
-    // 根据类型选择合适的表单组件
-    .map((item) => {
-      return {
-        fieldName: `formFieldsParams.${item.field}`,
-        label: item.title,
-        component: 'Input',
-        componentProps: {
-          placeholder: `请输入${item.title}`,
-          allowClear: true,
-        },
-      };
-    });
+  // 动态表单字段配置：目前支持 input 和 textarea 类型
+  const dynamicFormSchema: VbenFormSchema[] = formFields
+    .filter((item) => ['input', 'textarea'].includes(item.type))
+    .map((item) => ({
+      fieldName: `formFieldsParams.${item.field}`,
+      label: item.title,
+      component: 'Input',
+      componentProps: {
+        placeholder: `请输入${item.title}`,
+        allowClear: true,
+      },
+    }));
 
   return [...baseFormSchema, ...dynamicFormSchema];
 }
 
 /** 列表的字段 */
 export function useGridColumns(
-  formFields: any[] = [],
-): VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstance>['columns'] {
+  formFields: FormField[] = [],
+): VxeTableGridOptions['columns'] {
+  // 基础列配置
   const baseColumns: VxeGridPropTypes.Columns<BpmProcessInstanceApi.ProcessInstance> =
     [
       {
@@ -131,8 +134,8 @@ export function useGridColumns(
       },
     ];
 
-  // 添加动态表单字段列，暂时全部以字符串，TODO 展示优化, 按 type 展示控制
-  const formFieldColumns = (formFields || []).map((item) => ({
+  // 动态表单字段列配置：根据表单字段生成对应的列，从 formVariables 中获取值
+  const formFieldColumns = formFields.map((item) => ({
     field: `formVariables.${item.field}`,
     title: item.title,
     minWidth: 120,
diff --git a/apps/web-antd/src/views/bpm/processInstance/report/index.vue b/apps/web-antd/src/views/bpm/processInstance/report/index.vue
index 786bc7561..b744eca0b 100644
--- a/apps/web-antd/src/views/bpm/processInstance/report/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/report/index.vue
@@ -2,12 +2,12 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 
-import { nextTick, onMounted, ref } from 'vue';
+import { h, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page, prompt } from '@vben/common-ui';
 
-import { Input, message } from 'ant-design-vue';
+import { message, Textarea } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getProcessDefinition } from '#/api/bpm/definition';
@@ -15,39 +15,29 @@ import {
   cancelProcessInstanceByAdmin,
   getProcessInstanceManagerPage,
 } from '#/api/bpm/processInstance';
-import { getSimpleUserList } from '#/api/system/user';
-import { parseFormFields } from '#/components/simple-process-design';
+// TODO @jason：现在 ele 和 antd 使用的 parseFormFields 路径不同；看看以哪个为主。ele 是 import { parseFormFields } from '#/components/form-create';
+import { parseFormFields } from '#/views/bpm/components/simple-process-design';
 
 import { useGridColumns, useGridFormSchema } from './data';
 
 defineOptions({ name: 'BpmProcessInstanceReport' });
 
-const router = useRouter(); // 路由
+const router = useRouter();
 const { query } = useRoute();
 const processDefinitionId = query.processDefinitionId as string;
 
 const formFields = ref<any[]>([]);
-const userList = ref<any[]>([]); // 用户列表
-const gridReady = ref(false); // 表格是否准备好
-
-// 表格的列需要解析表单字段，这里定义成变量，解析表单字段后再渲染
-let Grid: any = null;
-let gridApi: any = null;
 
 /** 获取流程定义 */
-const getProcessDefinitionData = async () => {
-  try {
-    const processDefinition = await getProcessDefinition(processDefinitionId);
-    if (processDefinition && processDefinition.formFields) {
-      formFields.value = parseFormCreateFields(processDefinition.formFields);
-    }
-  } catch (error) {
-    console.error('获取流程定义失败', error);
+async function getProcessDefinitionData() {
+  const processDefinition = await getProcessDefinition(processDefinitionId);
+  if (processDefinition?.formFields) {
+    formFields.value = parseFormCreateFields(processDefinition.formFields);
   }
-};
+}
 
 /** 解析表单字段 */
-const parseFormCreateFields = (formFields?: string[]) => {
+function parseFormCreateFields(formFields?: string[]) {
   const result: Array<Record<string, any>> = [];
   if (formFields) {
     formFields.forEach((fieldStr: string) => {
@@ -59,113 +49,92 @@ const parseFormCreateFields = (formFields?: string[]) => {
     });
   }
   return result;
-};
+}
 
 /** 刷新表格 */
 function handleRefresh() {
-  if (gridApi) {
-    gridApi.query();
-  }
+  gridApi.query();
 }
 
 /** 查看详情 */
-const handleDetail = (row: BpmProcessInstanceApi.ProcessInstance) => {
+function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) {
   router.push({
     name: 'BpmProcessInstanceDetail',
-    query: {
-      id: row.id,
-    },
+    query: { id: row.id },
   });
-};
+}
 
-/** 取消按钮操作 */
-const handleCancel = async (row: BpmProcessInstanceApi.ProcessInstance) => {
+/** 取消流程实例 */
+function handleCancel(row: BpmProcessInstanceApi.ProcessInstance) {
   prompt({
-    content: '请输入取消原因：',
+    component: () => {
+      return h(Textarea, {
+        placeholder: '请输入取消原因',
+        allowClear: true,
+        rows: 2,
+      });
+    },
+    content: '请输入取消原因',
     title: '取消流程',
-    icon: 'question',
-    component: Input,
     modelPropName: 'value',
-    async beforeClose(scope) {
-      if (!scope.isConfirm) return;
-      if (!scope.value) {
-        message.warning('请输入取消原因');
-        return false;
-      }
-      await cancelProcessInstanceByAdmin(row.id, scope.value);
-      return true;
-    },
-  }).then(() => {
-    message.success('取消成功');
-    handleRefresh();
+  }).then(async (reason) => {
+    if (reason) {
+      await cancelProcessInstanceByAdmin(row.id, reason);
+      message.success('取消成功');
+      handleRefresh();
+    }
   });
-};
+}
 
-/** 创建表格 */
-const createGrid = () => {
-  const [GridCompnent, api] = useVbenVxeGrid({
-    formOptions: {
-      schema: useGridFormSchema(userList.value, formFields.value),
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
     },
-    gridOptions: {
-      columns: useGridColumns(formFields.value),
-      height: 'auto',
-      keepSource: true,
-      rowConfig: {
-        keyField: 'id',
-      },
-      toolbarConfig: {
-        refresh: true,
-        search: true,
-      },
-      proxyConfig: {
-        ajax: {
-          query: async ({ page }, formValues) => {
-            // 处理表单值，将 formFieldsParams 对象提取出来
-            const { formFieldsParams = {}, ...restValues } = formValues || {};
-
-            const params = {
-              pageNo: page.currentPage,
-              pageSize: page.pageSize,
-              ...restValues,
-              processDefinitionKey: query.processDefinitionKey,
-              formFieldsParams: JSON.stringify(formFieldsParams),
-            };
-            return await getProcessInstanceManagerPage(params);
-          },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const { formFieldsParams = {}, ...restValues } = formValues || {};
+          const params = {
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...restValues,
+            processDefinitionKey: query.processDefinitionKey,
+            formFieldsParams: JSON.stringify(formFieldsParams),
+          };
+          return await getProcessInstanceManagerPage(params);
         },
       },
-    } as VxeTableGridOptions,
-  });
-
-  Grid = GridCompnent;
-  gridApi = api;
-  gridReady.value = true;
-};
+    },
+  } as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstance>,
+});
 
 /** 初始化 */
 onMounted(async () => {
-  // 获取用户列表
-  userList.value = await getSimpleUserList();
-
-  // 获取流程定义，并获取表单字段。
+  // 获取流程定义
   await getProcessDefinitionData();
-
-  // 解析表单字段后，再创建表格，表格的列依赖于表单字段
-  createGrid();
-
-  // 确保 DOM 更新完成
-  await nextTick();
-
-  // 加载表格数据
-  gridApi.query();
+  // 更新表单配置、表格列配置
+  gridApi.formApi.setState({
+    schema: useGridFormSchema(formFields.value),
+  });
+  await gridApi.grid.reloadColumn(useGridColumns(formFields.value) as any[]);
 });
 </script>
 
 <template>
   <Page auto-content-height>
-    <!-- 动态渲染表格 -->
-    <component :is="Grid" v-if="gridReady" table-title="流程实例列表">
+    <Grid table-title="流程实例列表">
       <template #actions="{ row }">
         <TableAction
           :actions="[
@@ -179,6 +148,7 @@ onMounted(async () => {
             {
               label: '取消',
               type: 'link',
+              danger: true,
               icon: ACTION_ICON.DELETE,
               auth: ['bpm:process-instance:cancel'],
               ifShow: row.status === 1,
@@ -187,6 +157,6 @@ onMounted(async () => {
           ]"
         />
       </template>
-    </component>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/bpm/processListener/data.ts b/apps/web-antd/src/views/bpm/processListener/data.ts
index 95b7bb39b..69f7d7c89 100644
--- a/apps/web-antd/src/views/bpm/processListener/data.ts
+++ b/apps/web-antd/src/views/bpm/processListener/data.ts
@@ -64,6 +64,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.BPM_PROCESS_LISTENER_TYPE, 'string'),
+        placeholder: '请选择类型',
         allowClear: true,
       },
       rules: 'required',
@@ -74,6 +75,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: EVENT_OPTIONS,
+        placeholder: '请选择事件',
         allowClear: true,
       },
       rules: 'required',
@@ -97,6 +99,7 @@ export function useFormSchema(): VbenFormSchema[] {
           DICT_TYPE.BPM_PROCESS_LISTENER_VALUE_TYPE,
           'string',
         ),
+        placeholder: '请选择值类型',
         allowClear: true,
       },
       rules: 'required',
@@ -165,6 +168,15 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
         props: { type: DICT_TYPE.BPM_PROCESS_LISTENER_TYPE },
       },
     },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
     {
       field: 'event',
       title: '事件',
@@ -191,9 +203,8 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       formatter: 'formatDateTime',
     },
     {
-      field: 'actions',
       title: '操作',
-      minWidth: 180,
+      width: 180,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-antd/src/views/bpm/processListener/index.vue b/apps/web-antd/src/views/bpm/processListener/index.vue
index 91efc2fdf..a624f2948 100644
--- a/apps/web-antd/src/views/bpm/processListener/index.vue
+++ b/apps/web-antd/src/views/bpm/processListener/index.vue
@@ -44,11 +44,9 @@ async function handleDelete(row: BpmProcessListenerApi.ProcessListener) {
   });
   try {
     await deleteProcessListener(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
-  } catch {
+  } finally {
     hideLoading();
   }
 }
@@ -74,6 +72,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
diff --git a/apps/web-antd/src/views/bpm/processListener/modules/form.vue b/apps/web-antd/src/views/bpm/processListener/modules/form.vue
index ef56d794c..dc0cee273 100644
--- a/apps/web-antd/src/views/bpm/processListener/modules/form.vue
+++ b/apps/web-antd/src/views/bpm/processListener/modules/form.vue
@@ -55,9 +55,7 @@ const [Modal, modalApi] = useVbenModal({
       // 关闭并提示
       await modalApi.close();
       emit('success');
-      message.success({
-        content: $t('ui.actionMessage.operationSuccess'),
-      });
+      message.success($t('ui.actionMessage.operationSuccess'));
     } finally {
       modalApi.unlock();
     }
diff --git a/apps/web-antd/src/views/bpm/task/copy/data.ts b/apps/web-antd/src/views/bpm/task/copy/data.ts
index eec9bfd4d..202887d73 100644
--- a/apps/web-antd/src/views/bpm/task/copy/data.ts
+++ b/apps/web-antd/src/views/bpm/task/copy/data.ts
@@ -34,7 +34,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'processInstanceName',
       title: '流程名称',
       minWidth: 200,
-      fixed: 'left',
     },
     {
       field: 'summary',
@@ -62,12 +61,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'activityName',
       title: '抄送节点',
-      minWidth: 180,
+      minWidth: 120,
     },
     {
       field: 'createUser.nickname',
       title: '抄送人',
-      minWidth: 180,
+      minWidth: 120,
       formatter: ({ cellValue }) => {
         return cellValue || '-';
       },
diff --git a/apps/web-antd/src/views/bpm/task/copy/index.vue b/apps/web-antd/src/views/bpm/task/copy/index.vue
index 437f2551d..e13cf923c 100644
--- a/apps/web-antd/src/views/bpm/task/copy/index.vue
+++ b/apps/web-antd/src/views/bpm/task/copy/index.vue
@@ -46,14 +46,12 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
-    cellConfig: {
-      height: 64,
-    },
   } as VxeTableGridOptions<BpmProcessInstanceApi.Copy>,
 });
 </script>
diff --git a/apps/web-antd/src/views/bpm/task/done/data.ts b/apps/web-antd/src/views/bpm/task/done/data.ts
index 9491148ec..3c5e9f678 100644
--- a/apps/web-antd/src/views/bpm/task/done/data.ts
+++ b/apps/web-antd/src/views/bpm/task/done/data.ts
@@ -5,6 +5,7 @@ import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { getCategorySimpleList } from '#/api/bpm/category';
+import { getSimpleProcessDefinitionList } from '#/api/bpm/definition';
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
@@ -20,12 +21,15 @@ export function useGridFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      fieldName: 'processDefinitionId',
+      fieldName: 'processDefinitionKey',
       label: '所属流程',
-      component: 'Input',
+      component: 'ApiSelect',
       componentProps: {
-        placeholder: '请输入流程定义的编号',
+        placeholder: '请选择流程定义',
         allowClear: true,
+        api: getSimpleProcessDefinitionList,
+        labelField: 'name',
+        valueField: 'key',
       },
     },
     {
@@ -35,7 +39,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入流程分类',
         allowClear: true,
-        api: () => getCategorySimpleList(),
+        api: getCategorySimpleList,
         labelField: 'name',
         valueField: 'code',
       },
@@ -69,7 +73,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'processInstance.name',
       title: '流程',
       minWidth: 200,
-      fixed: 'left',
     },
     {
       field: 'processInstance.summary',
@@ -88,6 +91,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       title: '发起人',
       minWidth: 120,
     },
+    {
+      field: 'processInstance.createTime',
+      title: '发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
     {
       field: 'name',
       title: '当前任务',
diff --git a/apps/web-antd/src/views/bpm/task/done/index.vue b/apps/web-antd/src/views/bpm/task/done/index.vue
index abd6fcbf6..0517fa4a1 100644
--- a/apps/web-antd/src/views/bpm/task/done/index.vue
+++ b/apps/web-antd/src/views/bpm/task/done/index.vue
@@ -6,6 +6,8 @@ import { DocAlert, Page } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
+import { $t } from '#/locales';
+
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getTaskDonePage, withdrawTask } from '#/api/bpm/task';
 import { router } from '#/router';
@@ -27,10 +29,17 @@ function handleHistory(row: BpmTaskApi.TaskManager) {
 
 /** 撤回任务 */
 async function handleWithdraw(row: BpmTaskApi.TaskManager) {
-  await withdrawTask(row.id);
-  message.success('撤回成功');
-  // 刷新表格数据
-  await gridApi.query();
+  const hideLoading = message.loading({
+    content: '正在撤回中...',
+    duration: 0,
+  });
+  try {
+    await withdrawTask(row.id);
+    message.success('撤回成功');
+    await gridApi.query();
+  } finally {
+    hideLoading();
+  }
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -54,14 +63,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
-    cellConfig: {
-      height: 64,
-    },
   } as VxeTableGridOptions<BpmTaskApi.TaskManager>,
 });
 </script>
@@ -88,9 +95,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
             {
               label: '撤回',
               type: 'link',
-              icon: ACTION_ICON.EDIT,
-              color: 'warning',
-              onClick: handleWithdraw.bind(null, row),
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              popConfirm: {
+                title: '确定要撤回该任务吗？',
+                confirm: handleWithdraw.bind(null, row),
+              },
             },
             {
               label: '历史',
diff --git a/apps/web-antd/src/views/bpm/task/manager/data.ts b/apps/web-antd/src/views/bpm/task/manager/data.ts
index c40c6a236..947982b23 100644
--- a/apps/web-antd/src/views/bpm/task/manager/data.ts
+++ b/apps/web-antd/src/views/bpm/task/manager/data.ts
@@ -36,7 +36,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'processInstance.name',
       title: '流程',
       minWidth: 200,
-      fixed: 'left',
     },
     {
       field: 'processInstance.startUser.nickname',
diff --git a/apps/web-antd/src/views/bpm/task/manager/index.vue b/apps/web-antd/src/views/bpm/task/manager/index.vue
index dd47e9dcd..47496e1e7 100644
--- a/apps/web-antd/src/views/bpm/task/manager/index.vue
+++ b/apps/web-antd/src/views/bpm/task/manager/index.vue
@@ -43,14 +43,12 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
-    cellConfig: {
-      height: 64,
-    },
   } as VxeTableGridOptions<BpmTaskApi.TaskManager>,
 });
 </script>
@@ -60,6 +58,7 @@ const [Grid] = useVbenVxeGrid({
     <template #doc>
       <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
     </template>
+
     <Grid table-title="流程任务">
       <template #actions="{ row }">
         <TableAction
diff --git a/apps/web-antd/src/views/bpm/task/todo/data.ts b/apps/web-antd/src/views/bpm/task/todo/data.ts
index 968db6234..0b1efd71c 100644
--- a/apps/web-antd/src/views/bpm/task/todo/data.ts
+++ b/apps/web-antd/src/views/bpm/task/todo/data.ts
@@ -5,6 +5,7 @@ import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { getCategorySimpleList } from '#/api/bpm/category';
+import { getSimpleProcessDefinitionList } from '#/api/bpm/definition';
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
@@ -20,12 +21,15 @@ export function useGridFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      fieldName: 'processDefinitionId',
+      fieldName: 'processDefinitionKey',
       label: '所属流程',
-      component: 'Input',
+      component: 'ApiSelect',
       componentProps: {
-        placeholder: '请输入流程定义的编号',
+        placeholder: '请选择流程定义',
         allowClear: true,
+        api: getSimpleProcessDefinitionList,
+        labelField: 'name',
+        valueField: 'key',
       },
     },
     {
@@ -35,7 +39,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入流程分类',
         allowClear: true,
-        api: () => getCategorySimpleList(),
+        api: getCategorySimpleList,
         labelField: 'name',
         valueField: 'code',
       },
@@ -72,7 +76,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'processInstance.name',
       title: '流程',
       minWidth: 200,
-      fixed: 'left',
     },
     {
       field: 'processInstance.summary',
@@ -91,6 +94,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       title: '发起人',
       minWidth: 120,
     },
+    {
+      field: 'processInstance.createTime',
+      title: '发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
     {
       field: 'name',
       title: '当前任务',
diff --git a/apps/web-antd/src/views/bpm/task/todo/index.vue b/apps/web-antd/src/views/bpm/task/todo/index.vue
index 06fa5bcce..089e6662f 100644
--- a/apps/web-antd/src/views/bpm/task/todo/index.vue
+++ b/apps/web-antd/src/views/bpm/task/todo/index.vue
@@ -14,11 +14,10 @@ defineOptions({ name: 'BpmTodoTask' });
 
 /** 办理任务 */
 function handleAudit(row: BpmTaskApi.Task) {
-  console.warn(row);
   router.push({
     name: 'BpmProcessInstanceDetail',
     query: {
-      id: row.processInstance.id,
+      id: row.processInstance!.id,
       taskId: row.id,
     },
   });
@@ -45,14 +44,12 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
-    cellConfig: {
-      height: 64,
-    },
   } as VxeTableGridOptions<BpmTaskApi.Task>,
 });
 </script>
diff --git a/apps/web-antd/src/views/crm/backlog/index.vue b/apps/web-antd/src/views/crm/backlog/index.vue
index 7c51c3890..b461f18a7 100644
--- a/apps/web-antd/src/views/crm/backlog/index.vue
+++ b/apps/web-antd/src/views/crm/backlog/index.vue
@@ -5,11 +5,18 @@ import { Page } from '@vben/common-ui';
 
 import { Badge, Card, List } from 'ant-design-vue';
 
-import * as ClueApi from '#/api/crm/clue';
-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 { getFollowClueCount } from '#/api/crm/clue';
+import {
+  getAuditContractCount,
+  getRemindContractCount,
+} from '#/api/crm/contract';
+import {
+  getFollowCustomerCount,
+  getPutPoolRemindCustomerCount,
+  getTodayContactCustomerCount,
+} from '#/api/crm/customer';
+import { getAuditReceivableCount } from '#/api/crm/receivable';
+import { getReceivablePlanRemindCount } from '#/api/crm/receivable/plan';
 
 import { useLeftSides } from './data';
 import ClueFollowList from './modules/clue-follow-list.vue';
@@ -64,17 +71,14 @@ function sideClick(item: { menu: string }) {
 
 /** 获取数量 */
 async function getCount() {
-  customerTodayContactCount.value =
-    await CustomerApi.getTodayContactCustomerCount();
-  customerPutPoolRemindCount.value =
-    await CustomerApi.getPutPoolRemindCustomerCount();
-  customerFollowCount.value = await CustomerApi.getFollowCustomerCount();
-  clueFollowCount.value = await ClueApi.getFollowClueCount();
-  contractAuditCount.value = await ContractApi.getAuditContractCount();
-  contractRemindCount.value = await ContractApi.getRemindContractCount();
-  receivableAuditCount.value = await ReceivableApi.getAuditReceivableCount();
-  receivablePlanRemindCount.value =
-    await ReceivablePlanApi.getReceivablePlanRemindCount();
+  customerTodayContactCount.value = await getTodayContactCustomerCount();
+  customerPutPoolRemindCount.value = await getPutPoolRemindCustomerCount();
+  customerFollowCount.value = await getFollowCustomerCount();
+  clueFollowCount.value = await getFollowClueCount();
+  contractAuditCount.value = await getAuditContractCount();
+  contractRemindCount.value = await getRemindContractCount();
+  receivableAuditCount.value = await getAuditReceivableCount();
+  receivablePlanRemindCount.value = await getReceivablePlanRemindCount();
 }
 
 /** 激活时 */
diff --git a/apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue b/apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue
index ec06445f6..64776fd3f 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue
@@ -26,7 +26,7 @@ const [Grid] = useVbenVxeGrid({
       {
         fieldName: 'followUpStatus',
         label: '状态',
-        component: 'Select',
+        component: 'RadioGroup',
         componentProps: {
           allowClear: true,
           options: FOLLOWUP_STATUS,
diff --git a/apps/web-antd/src/views/crm/backlog/modules/customer-follow-list.vue b/apps/web-antd/src/views/crm/backlog/modules/customer-follow-list.vue
index 284a0ddc8..6e344d072 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/customer-follow-list.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/customer-follow-list.vue
@@ -26,7 +26,7 @@ const [Grid] = useVbenVxeGrid({
       {
         fieldName: 'followUpStatus',
         label: '状态',
-        component: 'Select',
+        component: 'RadioGroup',
         componentProps: {
           allowClear: true,
           options: FOLLOWUP_STATUS,
diff --git a/apps/web-antd/src/views/crm/business/data.ts b/apps/web-antd/src/views/crm/business/data.ts
index 6948cbf31..ab71445ec 100644
--- a/apps/web-antd/src/views/crm/business/data.ts
+++ b/apps/web-antd/src/views/crm/business/data.ts
@@ -40,7 +40,7 @@ export function useFormSchema(): VbenFormSchema[] {
         disabled: (values) => values.id,
       },
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择负责人',
@@ -54,7 +54,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '客户名称',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择客户',
@@ -80,7 +80,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '商机状态组',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getBusinessStatusTypeSimpleList(),
+        api: getBusinessStatusTypeSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择商机状态组',
diff --git a/apps/web-antd/src/views/crm/business/detail/data.ts b/apps/web-antd/src/views/crm/business/detail/data.ts
index 0600d76e5..1cb1c4949 100644
--- a/apps/web-antd/src/views/crm/business/detail/data.ts
+++ b/apps/web-antd/src/views/crm/business/detail/data.ts
@@ -21,7 +21,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'totalPrice',
       label: '商机金额（元）',
-      content: (data) => erpPriceInputFormatter(data.totalPrice),
+      render: (val) => erpPriceInputFormatter(val),
     },
     {
       field: 'statusTypeName',
@@ -34,7 +34,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data) => formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
@@ -53,17 +53,17 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'totalPrice',
       label: '商机金额（元）',
-      content: (data) => erpPriceInputFormatter(data.totalPrice),
+      render: (val) => erpPriceInputFormatter(val),
     },
     {
       field: 'dealTime',
       label: '预计成交日期',
-      content: (data) => formatDateTime(data?.dealTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'contactNextTime',
       label: '下次联系时间',
-      content: (data) => formatDateTime(data?.contactNextTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'statusTypeName',
diff --git a/apps/web-antd/src/views/crm/business/detail/index.vue b/apps/web-antd/src/views/crm/business/detail/index.vue
index 193b4a033..77621ad0d 100644
--- a/apps/web-antd/src/views/crm/business/detail/index.vue
+++ b/apps/web-antd/src/views/crm/business/detail/index.vue
@@ -23,9 +23,9 @@ import { PermissionList, TransferForm } from '#/views/crm/permission';
 import { ProductDetailsList } from '#/views/crm/product/components';
 
 import Form from '../modules/form.vue';
-import UpStatusForm from './modules/status-form.vue';
 import { useDetailSchema } from './data';
 import BusinessDetailsInfo from './modules/info.vue';
+import UpStatusForm from './modules/status-form.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -38,11 +38,9 @@ const logList = ref<SystemOperateLogApi.OperateLog[]>([]);
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
@@ -80,7 +78,7 @@ async function getBusinessDetail() {
 /** 返回列表页 */
 function handleBack() {
   tabs.closeCurrentTab();
-  router.push('/crm/business');
+  router.push({ name: 'CrmBusiness' });
 }
 
 /** 编辑商机 */
diff --git a/apps/web-antd/src/views/crm/business/detail/modules/info.vue b/apps/web-antd/src/views/crm/business/detail/modules/info.vue
index d83a78a82..2bbfe8af7 100644
--- a/apps/web-antd/src/views/crm/business/detail/modules/info.vue
+++ b/apps/web-antd/src/views/crm/business/detail/modules/info.vue
@@ -12,31 +12,27 @@ defineProps<{
   business: CrmBusinessApi.Business; // 商机信息
 }>();
 
-const [BaseDescriptions] = useDescription({
-  componentProps: {
-    title: '基本信息',
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+const [BaseDescription] = useDescription({
+  title: '基本信息',
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailBaseSchema(),
 });
 
-const [SystemDescriptions] = useDescription({
-  componentProps: {
-    title: '系统信息',
-    bordered: false,
-    column: 3,
-    class: 'mx-4',
-  },
+const [SystemDescription] = useDescription({
+  title: '系统信息',
+  bordered: false,
+  column: 3,
+  class: 'mx-4',
   schema: useFollowUpDetailSchema(),
 });
 </script>
 
 <template>
   <div class="p-4">
-    <BaseDescriptions :data="business" />
+    <BaseDescription :data="business" />
     <Divider />
-    <SystemDescriptions :data="business" />
+    <SystemDescription :data="business" />
   </div>
 </template>
diff --git a/apps/web-antd/src/views/crm/business/index.vue b/apps/web-antd/src/views/crm/business/index.vue
index 28fea60f9..235e7b41b 100644
--- a/apps/web-antd/src/views/crm/business/index.vue
+++ b/apps/web-antd/src/views/crm/business/index.vue
@@ -132,8 +132,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <FormModal @success="handleRefresh" />
     <Grid>
-      <template #top>
-        <Tabs class="-mt-11" @change="handleChangeSceneType">
+      <template #toolbar-actions>
+        <Tabs class="w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />
@@ -196,8 +196,3 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </Grid>
   </Page>
 </template>
-<style scoped>
-:deep(.vxe-toolbar div) {
-  z-index: 1;
-}
-</style>
diff --git a/apps/web-antd/src/views/crm/clue/data.ts b/apps/web-antd/src/views/crm/clue/data.ts
index 5983fde7f..2cd328dde 100644
--- a/apps/web-antd/src/views/crm/clue/data.ts
+++ b/apps/web-antd/src/views/crm/clue/data.ts
@@ -53,7 +53,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '负责人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         allowClear: true,
@@ -121,7 +121,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '地址',
       component: 'ApiTreeSelect',
       componentProps: {
-        api: () => getAreaTree(),
+        api: getAreaTree,
         fieldNames: { label: 'name', value: 'id', children: 'children' },
         placeholder: '请选择地址',
       },
@@ -171,7 +171,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'transformStatus',
       label: '转化状态',
-      component: 'Select',
+      component: 'RadioGroup',
       componentProps: {
         options: [
           { label: '未转化', value: false },
diff --git a/apps/web-antd/src/views/crm/clue/detail/data.ts b/apps/web-antd/src/views/crm/clue/detail/data.ts
index 73e905a22..9536eb79b 100644
--- a/apps/web-antd/src/views/crm/clue/detail/data.ts
+++ b/apps/web-antd/src/views/crm/clue/detail/data.ts
@@ -13,10 +13,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'source',
       label: '线索来源',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.CRM_CUSTOMER_SOURCE,
-          value: data?.source,
+          value: val,
         }),
     },
     {
@@ -30,7 +30,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data) => formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
@@ -45,10 +45,10 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'source',
       label: '客户来源',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.CRM_CUSTOMER_SOURCE,
-          value: data?.source,
+          value: val,
         }),
     },
     {
@@ -66,8 +66,8 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'areaName',
       label: '地址',
-      content: (data) => {
-        const areaName = data.areaName ?? '';
+      render: (val, data) => {
+        const areaName = val ?? '';
         const detailAddress = data?.detailAddress ?? '';
         return [areaName, detailAddress].filter((item) => !!item).join(' ');
       },
@@ -83,25 +83,25 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'industryId',
       label: '客户行业',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY,
-          value: data?.industryId,
+          value: val,
         }),
     },
     {
       field: 'level',
       label: '客户级别',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.CRM_CUSTOMER_LEVEL,
-          value: data?.level,
+          value: val,
         }),
     },
     {
       field: 'contactNextTime',
       label: '下次联系时间',
-      content: (data) => formatDateTime(data?.contactNextTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'remark',
diff --git a/apps/web-antd/src/views/crm/clue/detail/index.vue b/apps/web-antd/src/views/crm/clue/detail/index.vue
index 1de9d8b5c..ddc813fd2 100644
--- a/apps/web-antd/src/views/crm/clue/detail/index.vue
+++ b/apps/web-antd/src/views/crm/clue/detail/index.vue
@@ -34,11 +34,9 @@ const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
@@ -71,7 +69,7 @@ async function getClueDetail() {
 /** 返回列表页 */
 function handleBack() {
   tabs.closeCurrentTab();
-  router.push('/crm/clue');
+  router.push({ name: 'CrmClue' });
 }
 
 /** 编辑线索 */
@@ -91,13 +89,11 @@ async function handleTransform(): Promise<boolean | undefined> {
       content: '确定将该线索转化为客户吗？',
     })
       .then(async () => {
-        const res = await transformClue(clueId.value);
-        if (res) {
-          message.success('转化客户成功');
-          resolve(true);
-        } else {
-          reject(new Error('转化失败'));
-        }
+        // 转化为客户
+        await transformClue(clueId.value);
+        // 提示并返回成功
+        message.success('转化客户成功');
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-antd/src/views/crm/clue/detail/modules/info.vue b/apps/web-antd/src/views/crm/clue/detail/modules/info.vue
index a4fe4701d..c36d44bc9 100644
--- a/apps/web-antd/src/views/crm/clue/detail/modules/info.vue
+++ b/apps/web-antd/src/views/crm/clue/detail/modules/info.vue
@@ -13,22 +13,18 @@ defineProps<{
 }>();
 
 const [BaseDescriptions] = useDescription({
-  componentProps: {
-    title: '基本信息',
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  title: '基本信息',
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailBaseSchema(),
 });
 
 const [SystemDescriptions] = useDescription({
-  componentProps: {
-    title: '系统信息',
-    bordered: false,
-    column: 3,
-    class: 'mx-4',
-  },
+  title: '系统信息',
+  bordered: false,
+  column: 3,
+  class: 'mx-4',
   schema: useFollowUpDetailSchema(),
 });
 </script>
diff --git a/apps/web-antd/src/views/crm/clue/index.vue b/apps/web-antd/src/views/crm/clue/index.vue
index 78abc9b24..2b96fd237 100644
--- a/apps/web-antd/src/views/crm/clue/index.vue
+++ b/apps/web-antd/src/views/crm/clue/index.vue
@@ -122,8 +122,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <FormModal @success="handleRefresh" />
     <Grid>
-      <template #top>
-        <Tabs class="-mt-11" @change="handleChangeSceneType">
+      <template #toolbar-actions>
+        <Tabs class="w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />
@@ -181,8 +181,3 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </Grid>
   </Page>
 </template>
-<style scoped>
-:deep(.vxe-toolbar div) {
-  z-index: 1;
-}
-</style>
diff --git a/apps/web-antd/src/views/crm/contact/data.ts b/apps/web-antd/src/views/crm/contact/data.ts
index 09336d478..61a68c44c 100644
--- a/apps/web-antd/src/views/crm/contact/data.ts
+++ b/apps/web-antd/src/views/crm/contact/data.ts
@@ -41,7 +41,7 @@ export function useFormSchema(): VbenFormSchema[] {
         disabled: (values) => values.id,
       },
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择负责人',
@@ -54,7 +54,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       rules: 'required',
       componentProps: {
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择客户',
@@ -134,7 +134,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '直属上级',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleContactList(),
+        api: getSimpleContactList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择直属上级',
@@ -145,7 +145,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '地址',
       component: 'ApiTreeSelect',
       componentProps: {
-        api: () => getAreaTree(),
+        api: getAreaTree,
         fieldNames: { label: 'name', value: 'id', children: 'children' },
         placeholder: '请选择地址',
       },
@@ -188,7 +188,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '客户',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择客户',
diff --git a/apps/web-antd/src/views/crm/contact/detail/data.ts b/apps/web-antd/src/views/crm/contact/detail/data.ts
index d510ba4d9..3f1019325 100644
--- a/apps/web-antd/src/views/crm/contact/detail/data.ts
+++ b/apps/web-antd/src/views/crm/contact/detail/data.ts
@@ -25,7 +25,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data) => formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
@@ -64,10 +64,10 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'areaName',
       label: '地址',
-      content: (data) => {
-        const areaName = data?.areaName ?? '';
+      render: (val, data) => {
+        const areaName = val ?? '';
         const detailAddress = data?.detailAddress ?? '';
-        return [areaName, detailAddress].filter(Boolean).join(' ');
+        return [areaName, detailAddress].filter((item) => !!item).join(' ');
       },
     },
     {
@@ -81,22 +81,22 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'master',
       label: '关键决策人',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.INFRA_BOOLEAN_STRING,
-          value: data?.master,
+          value: val,
         }),
     },
     {
       field: 'sex',
       label: '性别',
-      content: (data) =>
-        h(DictTag, { type: DICT_TYPE.SYSTEM_USER_SEX, value: data?.sex }),
+      render: (val) =>
+        h(DictTag, { type: DICT_TYPE.SYSTEM_USER_SEX, value: val }),
     },
     {
       field: 'contactNextTime',
       label: '下次联系时间',
-      content: (data) => formatDateTime(data?.contactNextTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'remark',
diff --git a/apps/web-antd/src/views/crm/contact/detail/index.vue b/apps/web-antd/src/views/crm/contact/detail/index.vue
index b7ac6bf14..1862598b9 100644
--- a/apps/web-antd/src/views/crm/contact/detail/index.vue
+++ b/apps/web-antd/src/views/crm/contact/detail/index.vue
@@ -36,11 +36,9 @@ const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
@@ -73,7 +71,7 @@ async function getContactDetail() {
 /** 返回列表页 */
 function handleBack() {
   tabs.closeCurrentTab();
-  router.push('/crm/contact');
+  router.push({ name: 'CrmContact' });
 }
 
 /** 编辑联系人 */
diff --git a/apps/web-antd/src/views/crm/contact/detail/modules/info.vue b/apps/web-antd/src/views/crm/contact/detail/modules/info.vue
index d0622af64..123cf2c71 100644
--- a/apps/web-antd/src/views/crm/contact/detail/modules/info.vue
+++ b/apps/web-antd/src/views/crm/contact/detail/modules/info.vue
@@ -13,22 +13,18 @@ defineProps<{
 }>();
 
 const [BaseDescriptions] = useDescription({
-  componentProps: {
-    title: '基本信息',
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  title: '基本信息',
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailBaseSchema(),
 });
 
 const [SystemDescriptions] = useDescription({
-  componentProps: {
-    title: '系统信息',
-    bordered: false,
-    column: 3,
-    class: 'mx-4',
-  },
+  title: '系统信息',
+  bordered: false,
+  column: 3,
+  class: 'mx-4',
   schema: useFollowUpDetailSchema(),
 });
 </script>
diff --git a/apps/web-antd/src/views/crm/contact/index.vue b/apps/web-antd/src/views/crm/contact/index.vue
index 72dfbc347..1d2e03ad5 100644
--- a/apps/web-antd/src/views/crm/contact/index.vue
+++ b/apps/web-antd/src/views/crm/contact/index.vue
@@ -132,8 +132,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <FormModal @success="handleRefresh" />
     <Grid>
-      <template #top>
-        <Tabs class="-mt-11" @change="handleChangeSceneType">
+      <template #toolbar-actions>
+        <Tabs class="w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />
@@ -201,8 +201,3 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </Grid>
   </Page>
 </template>
-<style scoped>
-:deep(.vxe-toolbar div) {
-  z-index: 1;
-}
-</style>
diff --git a/apps/web-antd/src/views/crm/contract/data.ts b/apps/web-antd/src/views/crm/contract/data.ts
index 36b0cecae..fd4e8f232 100644
--- a/apps/web-antd/src/views/crm/contract/data.ts
+++ b/apps/web-antd/src/views/crm/contract/data.ts
@@ -46,7 +46,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '负责人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -63,7 +63,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       rules: 'required',
       componentProps: {
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择客户',
@@ -137,7 +137,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '公司签约人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -263,7 +263,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '客户',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择客户',
@@ -348,7 +348,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '未回款金额（元）',
-      field: 'totalReceivablePrice',
+      field: 'unReceivablePrice',
       minWidth: 140,
       formatter: ({ row }) => {
         return erpPriceInputFormatter(
diff --git a/apps/web-antd/src/views/crm/contract/detail/data.ts b/apps/web-antd/src/views/crm/contract/detail/data.ts
index 2a00b1509..bfe7b5606 100644
--- a/apps/web-antd/src/views/crm/contract/detail/data.ts
+++ b/apps/web-antd/src/views/crm/contract/detail/data.ts
@@ -17,18 +17,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'totalPrice',
       label: '合同金额（元）',
-      content: (data) => erpPriceInputFormatter(data?.totalPrice) as string,
+      render: (val) => erpPriceInputFormatter(val) as string,
     },
     {
       field: 'orderDate',
       label: '下单时间',
-      content: (data) => formatDateTime(data?.orderDate) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'totalReceivablePrice',
       label: '回款金额（元）',
-      content: (data) =>
-        erpPriceInputFormatter(data?.totalReceivablePrice) as string,
+      render: (val) => erpPriceInputFormatter(val) as string,
     },
     {
       field: 'ownerUserName',
@@ -59,22 +58,22 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'totalPrice',
       label: '合同金额（元）',
-      content: (data) => erpPriceInputFormatter(data?.totalPrice) as string,
+      render: (val) => erpPriceInputFormatter(val) as string,
     },
     {
       field: 'orderDate',
       label: '下单时间',
-      content: (data) => formatDateTime(data?.orderDate) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'startTime',
       label: '合同开始时间',
-      content: (data) => formatDateTime(data?.startTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'endTime',
       label: '合同结束时间',
-      content: (data) => formatDateTime(data?.endTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'signContactName',
@@ -91,10 +90,10 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'auditStatus',
       label: '合同状态',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.CRM_AUDIT_STATUS,
-          value: data?.auditStatus,
+          value: val,
         }),
     },
   ];
diff --git a/apps/web-antd/src/views/crm/contract/detail/index.vue b/apps/web-antd/src/views/crm/contract/detail/index.vue
index 471e2de29..d1fced792 100644
--- a/apps/web-antd/src/views/crm/contract/detail/index.vue
+++ b/apps/web-antd/src/views/crm/contract/detail/index.vue
@@ -40,11 +40,9 @@ const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
@@ -77,7 +75,7 @@ async function loadContractDetail() {
 /** 返回列表页 */
 function handleBack() {
   tabs.closeCurrentTab();
-  router.push('/crm/contract');
+  router.push({ name: 'CrmContract' });
 }
 
 /** 编辑合同 */
diff --git a/apps/web-antd/src/views/crm/contract/detail/modules/info.vue b/apps/web-antd/src/views/crm/contract/detail/modules/info.vue
index ae6b637ff..f37600412 100644
--- a/apps/web-antd/src/views/crm/contract/detail/modules/info.vue
+++ b/apps/web-antd/src/views/crm/contract/detail/modules/info.vue
@@ -13,22 +13,18 @@ defineProps<{
 }>();
 
 const [BaseDescriptions] = useDescription({
-  componentProps: {
-    title: '基本信息',
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  title: '基本信息',
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailBaseSchema(),
 });
 
 const [SystemDescriptions] = useDescription({
-  componentProps: {
-    title: '系统信息',
-    bordered: false,
-    column: 3,
-    class: 'mx-4',
-  },
+  title: '系统信息',
+  bordered: false,
+  column: 3,
+  class: 'mx-4',
   schema: useFollowUpDetailSchema(),
 });
 </script>
diff --git a/apps/web-antd/src/views/crm/contract/index.vue b/apps/web-antd/src/views/crm/contract/index.vue
index 856571065..7fecd90b2 100644
--- a/apps/web-antd/src/views/crm/contract/index.vue
+++ b/apps/web-antd/src/views/crm/contract/index.vue
@@ -166,8 +166,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <FormModal @success="handleRefresh" />
     <Grid>
-      <template #top>
-        <Tabs class="-mt-11" @change="handleChangeSceneType">
+      <template #toolbar-actions>
+        <Tabs class="w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />
@@ -254,8 +254,3 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </Grid>
   </Page>
 </template>
-<style scoped>
-:deep(.vxe-toolbar div) {
-  z-index: 1;
-}
-</style>
diff --git a/apps/web-antd/src/views/crm/customer/data.ts b/apps/web-antd/src/views/crm/customer/data.ts
index aa502383d..baabb5685 100644
--- a/apps/web-antd/src/views/crm/customer/data.ts
+++ b/apps/web-antd/src/views/crm/customer/data.ts
@@ -60,7 +60,7 @@ export function useFormSchema(): VbenFormSchema[] {
         disabled: (values) => values.id,
       },
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择负责人',
@@ -130,7 +130,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '地址',
       component: 'ApiTreeSelect',
       componentProps: {
-        api: () => getAreaTree(),
+        api: getAreaTree,
         fieldNames: { label: 'name', value: 'id', children: 'children' },
         placeholder: '请选择地址',
         allowClear: true,
@@ -220,7 +220,7 @@ export function useImportFormSchema(): VbenFormSchema[] {
       label: '负责人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择负责人',
diff --git a/apps/web-antd/src/views/crm/customer/detail/data.ts b/apps/web-antd/src/views/crm/customer/detail/data.ts
index 60e6a6bf8..9d55b4077 100644
--- a/apps/web-antd/src/views/crm/customer/detail/data.ts
+++ b/apps/web-antd/src/views/crm/customer/detail/data.ts
@@ -27,7 +27,7 @@ export function useDistributeFormSchema(): VbenFormSchema[] {
       label: '负责人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -43,13 +43,13 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'level',
       label: '客户级别',
-      content: (data) =>
-        h(DictTag, { type: DICT_TYPE.CRM_CUSTOMER_LEVEL, value: data?.level }),
+      render: (val) =>
+        h(DictTag, { type: DICT_TYPE.CRM_CUSTOMER_LEVEL, value: val }),
     },
     {
       field: 'dealStatus',
       label: '成交状态',
-      content: (data) => (data.dealStatus ? '已成交' : '未成交'),
+      render: (val) => (val ? '已成交' : '未成交'),
     },
     {
       field: 'ownerUserName',
@@ -58,7 +58,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data) => formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
@@ -73,10 +73,10 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'source',
       label: '客户来源',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.CRM_CUSTOMER_SOURCE,
-          value: data?.source,
+          value: val,
         }),
     },
     {
@@ -94,8 +94,8 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'areaName',
       label: '地址',
-      content: (data) => {
-        const areaName = data?.areaName ?? '';
+      render: (val, data) => {
+        const areaName = val ?? '';
         const detailAddress = data?.detailAddress ?? '';
         return [areaName, detailAddress].filter(Boolean).join(' ');
       },
@@ -111,16 +111,16 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'industryId',
       label: '客户行业',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY,
-          value: data?.industryId,
+          value: val,
         }),
     },
     {
       field: 'contactNextTime',
       label: '下次联系时间',
-      content: (data) => formatDateTime(data?.contactNextTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'remark',
diff --git a/apps/web-antd/src/views/crm/customer/detail/index.vue b/apps/web-antd/src/views/crm/customer/detail/index.vue
index d93a20598..f8c74ec4b 100644
--- a/apps/web-antd/src/views/crm/customer/detail/index.vue
+++ b/apps/web-antd/src/views/crm/customer/detail/index.vue
@@ -47,11 +47,9 @@ const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
@@ -89,7 +87,7 @@ async function loadCustomerDetail() {
 /** 返回列表页 */
 function handleBack() {
   tabs.closeCurrentTab();
-  router.push('/crm/customer');
+  router.push({ name: 'CrmCustomer' });
 }
 
 /** 编辑客户 */
@@ -109,13 +107,11 @@ function handleLock(lockStatus: boolean): Promise<boolean | undefined> {
       content: `确定锁定客户【${customer.value.name}】吗？`,
     })
       .then(async () => {
-        const res = await lockCustomer(customerId.value, lockStatus);
-        if (res) {
-          message.success(lockStatus ? '锁定客户成功' : '解锁客户成功');
-          resolve(true);
-        } else {
-          reject(new Error(lockStatus ? '锁定客户失败' : '解锁客户失败'));
-        }
+        // 锁定客户
+        await lockCustomer(customerId.value, lockStatus);
+        // 提示并返回成功
+        message.success(lockStatus ? '锁定客户成功' : '解锁客户成功');
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
@@ -130,13 +126,11 @@ function handleReceive(): Promise<boolean | undefined> {
       content: `确定领取客户【${customer.value.name}】吗？`,
     })
       .then(async () => {
-        const res = await receiveCustomer([customerId.value]);
-        if (res) {
-          message.success('领取客户成功');
-          resolve(true);
-        } else {
-          reject(new Error('领取客户失败'));
-        }
+        // 领取客户
+        await receiveCustomer([customerId.value]);
+        // 提示并返回成功
+        message.success('领取客户成功');
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
@@ -156,13 +150,11 @@ function handlePutPool(): Promise<boolean | undefined> {
       content: `确定将客户【${customer.value.name}】放入公海吗？`,
     })
       .then(async () => {
-        const res = await putCustomerPool(customerId.value);
-        if (res) {
-          message.success('放入公海成功');
-          resolve(true);
-        } else {
-          reject(new Error('放入公海失败'));
-        }
+        // 放入公海
+        await putCustomerPool(customerId.value);
+        // 提示并返回成功
+        message.success('放入公海成功');
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
@@ -178,16 +170,11 @@ async function handleUpdateDealStatus(): Promise<boolean | undefined> {
       content: `确定更新成交状态为【${dealStatus ? '已成交' : '未成交'}】吗？`,
     })
       .then(async () => {
-        const res = await updateCustomerDealStatus(
-          customerId.value,
-          dealStatus,
-        );
-        if (res) {
-          message.success('更新成交状态成功');
-          resolve(true);
-        } else {
-          reject(new Error('更新成交状态失败'));
-        }
+        // 更新成交状态
+        await updateCustomerDealStatus(customerId.value, dealStatus);
+        // 提示并返回成功
+        message.success('更新成交状态成功');
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-antd/src/views/crm/customer/detail/modules/info.vue b/apps/web-antd/src/views/crm/customer/detail/modules/info.vue
index fb832274a..4e5c1e520 100644
--- a/apps/web-antd/src/views/crm/customer/detail/modules/info.vue
+++ b/apps/web-antd/src/views/crm/customer/detail/modules/info.vue
@@ -13,22 +13,18 @@ defineProps<{
 }>();
 
 const [BaseDescriptions] = useDescription({
-  componentProps: {
-    title: '基本信息',
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  title: '基本信息',
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailBaseSchema(),
 });
 
 const [SystemDescriptions] = useDescription({
-  componentProps: {
-    title: '系统信息',
-    bordered: false,
-    column: 3,
-    class: 'mx-4',
-  },
+  title: '系统信息',
+  bordered: false,
+  column: 3,
+  class: 'mx-4',
   schema: useFollowUpDetailSchema(),
 });
 </script>
diff --git a/apps/web-antd/src/views/crm/customer/index.vue b/apps/web-antd/src/views/crm/customer/index.vue
index 34ca69afa..ece7a224c 100644
--- a/apps/web-antd/src/views/crm/customer/index.vue
+++ b/apps/web-antd/src/views/crm/customer/index.vue
@@ -139,8 +139,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="handleRefresh" />
     <ImportModal @success="handleRefresh" />
     <Grid>
-      <template #top>
-        <Tabs class="-mt-11" @change="handleChangeSceneType">
+      <template #toolbar-actions>
+        <Tabs class="w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />
@@ -205,8 +205,3 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </Grid>
   </Page>
 </template>
-<style scoped>
-:deep(.vxe-toolbar div) {
-  z-index: 1;
-}
-</style>
diff --git a/apps/web-antd/src/views/crm/customer/limitConfig/data.ts b/apps/web-antd/src/views/crm/customer/limitConfig/data.ts
index fb079ae8a..914116b16 100644
--- a/apps/web-antd/src/views/crm/customer/limitConfig/data.ts
+++ b/apps/web-antd/src/views/crm/customer/limitConfig/data.ts
@@ -34,7 +34,7 @@ export function useFormSchema(confType: LimitConfType): VbenFormSchema[] {
       label: '规则适用人群',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         mode: 'multiple',
diff --git a/apps/web-antd/src/views/crm/customer/limitConfig/index.vue b/apps/web-antd/src/views/crm/customer/limitConfig/index.vue
index ce6165a12..e2f3ec545 100644
--- a/apps/web-antd/src/views/crm/customer/limitConfig/index.vue
+++ b/apps/web-antd/src/views/crm/customer/limitConfig/index.vue
@@ -114,8 +114,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <FormModal @success="handleRefresh" />
     <Grid>
-      <template #top>
-        <Tabs class="-mt-11" @change="handleChangeConfigType">
+      <template #toolbar-actions>
+        <Tabs class="w-full" @change="handleChangeConfigType">
           <Tabs.TabPane
             tab="拥有客户数限制"
             :key="LimitConfType.CUSTOMER_QUANTITY_LIMIT"
@@ -156,7 +156,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               icon: ACTION_ICON.DELETE,
               auth: ['crm:customer-limit-config:delete'],
               popConfirm: {
-                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
                 confirm: handleDelete.bind(null, row),
               },
             },
@@ -166,8 +166,3 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </Grid>
   </Page>
 </template>
-<style scoped>
-:deep(.vxe-toolbar div) {
-  z-index: 1;
-}
-</style>
diff --git a/apps/web-antd/src/views/crm/followup/data.ts b/apps/web-antd/src/views/crm/followup/data.ts
index c19b02f32..0c275ae0e 100644
--- a/apps/web-antd/src/views/crm/followup/data.ts
+++ b/apps/web-antd/src/views/crm/followup/data.ts
@@ -173,7 +173,7 @@ export function useFollowUpDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'contactLastTime',
       label: '最后跟进时间',
-      content: (data) => formatDateTime(data?.contactLastTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'creatorName',
@@ -182,12 +182,12 @@ export function useFollowUpDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data) => formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'updateTime',
       label: '更新时间',
-      content: (data) => formatDateTime(data?.updateTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/permission/modules/data.ts b/apps/web-antd/src/views/crm/permission/modules/data.ts
index f2cb5a1f4..fdbe9bcbd 100644
--- a/apps/web-antd/src/views/crm/permission/modules/data.ts
+++ b/apps/web-antd/src/views/crm/permission/modules/data.ts
@@ -23,7 +23,7 @@ export function useTransferFormSchema(): VbenFormSchema[] {
       label: '选择新负责人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -116,7 +116,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '选择人员',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/crm/product/data.ts b/apps/web-antd/src/views/crm/product/data.ts
index 32dc02b9d..858b16908 100644
--- a/apps/web-antd/src/views/crm/product/data.ts
+++ b/apps/web-antd/src/views/crm/product/data.ts
@@ -42,7 +42,7 @@ export function useFormSchema(): VbenFormSchema[] {
         disabled: (values) => values.id,
       },
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择负责人',
diff --git a/apps/web-antd/src/views/crm/product/detail/data.ts b/apps/web-antd/src/views/crm/product/detail/data.ts
index 1b783fc6f..0adf792cb 100644
--- a/apps/web-antd/src/views/crm/product/detail/data.ts
+++ b/apps/web-antd/src/views/crm/product/detail/data.ts
@@ -17,13 +17,13 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'unit',
       label: '产品单位',
-      content: (data) =>
-        h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_UNIT, value: data?.unit }),
+      render: (val) =>
+        h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_UNIT, value: val }),
     },
     {
       field: 'price',
       label: '产品价格（元）',
-      content: (data) => erpPriceInputFormatter(data.price),
+      render: (val) => erpPriceInputFormatter(val),
     },
     {
       field: 'no',
@@ -46,7 +46,7 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'price',
       label: '价格（元）',
-      content: (data) => erpPriceInputFormatter(data.price),
+      render: (val) => erpPriceInputFormatter(val),
     },
     {
       field: 'description',
@@ -59,14 +59,14 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '是否上下架',
-      content: (data) =>
-        h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_STATUS, value: data?.status }),
+      render: (val) =>
+        h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_STATUS, value: val }),
     },
     {
       field: 'unit',
       label: '产品单位',
-      content: (data) =>
-        h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_UNIT, value: data?.unit }),
+      render: (val) =>
+        h(DictTag, { type: DICT_TYPE.CRM_PRODUCT_UNIT, value: val }),
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/product/detail/index.vue b/apps/web-antd/src/views/crm/product/detail/index.vue
index 156cde00e..1a62ff8a3 100644
--- a/apps/web-antd/src/views/crm/product/detail/index.vue
+++ b/apps/web-antd/src/views/crm/product/detail/index.vue
@@ -29,11 +29,9 @@ const product = ref<CrmProductApi.Product>({} as CrmProductApi.Product); // 产
 const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
@@ -57,7 +55,7 @@ async function getProductDetail() {
 /** 返回列表页 */
 function handleBack() {
   tabs.closeCurrentTab();
-  router.push('/crm/product');
+  router.push({ name: 'CrmProduct' });
 }
 
 /** 加载数据 */
diff --git a/apps/web-antd/src/views/crm/product/detail/modules/info.vue b/apps/web-antd/src/views/crm/product/detail/modules/info.vue
index 320f650b3..9fce6976a 100644
--- a/apps/web-antd/src/views/crm/product/detail/modules/info.vue
+++ b/apps/web-antd/src/views/crm/product/detail/modules/info.vue
@@ -10,12 +10,10 @@ defineProps<{
 }>();
 
 const [ProductDescriptions] = useDescription({
-  componentProps: {
-    title: '基本信息',
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  title: '基本信息',
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailBaseSchema(),
 });
 </script>
diff --git a/apps/web-antd/src/views/crm/receivable/data.ts b/apps/web-antd/src/views/crm/receivable/data.ts
index 2dfc958a5..f7f9c95d2 100644
--- a/apps/web-antd/src/views/crm/receivable/data.ts
+++ b/apps/web-antd/src/views/crm/receivable/data.ts
@@ -44,7 +44,7 @@ export function useFormSchema(): VbenFormSchema[] {
         disabled: (values) => values.id,
       },
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择负责人',
@@ -58,7 +58,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       rules: 'required',
       componentProps: {
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择客户',
@@ -188,7 +188,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '客户',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择客户',
diff --git a/apps/web-antd/src/views/crm/receivable/detail/data.ts b/apps/web-antd/src/views/crm/receivable/detail/data.ts
index 8c79dd54c..dcceec53a 100644
--- a/apps/web-antd/src/views/crm/receivable/detail/data.ts
+++ b/apps/web-antd/src/views/crm/receivable/detail/data.ts
@@ -17,18 +17,18 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'totalPrice',
       label: '合同金额（元）',
-      content: (data) =>
-        erpPriceInputFormatter(data?.contract?.totalPrice ?? data.totalPrice),
+      render: (val, data) =>
+        erpPriceInputFormatter(val ?? data?.contract?.totalPrice ?? 0),
     },
     {
       field: 'returnTime',
       label: '回款日期',
-      content: (data) => formatDateTime(data?.returnTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'price',
       label: '回款金额（元）',
-      content: (data) => erpPriceInputFormatter(data.price),
+      render: (val) => erpPriceInputFormatter(val),
     },
     {
       field: 'ownerUserName',
@@ -51,25 +51,26 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'contract',
       label: '合同编号',
-      content: (data) => data?.contract?.no,
+      render: (val, data) =>
+        val && data?.contract?.no ? data?.contract?.no : '',
     },
     {
       field: 'returnTime',
       label: '回款日期',
-      content: (data) => formatDateTime(data?.returnTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'price',
       label: '回款金额',
-      content: (data) => erpPriceInputFormatter(data.price),
+      render: (val) => erpPriceInputFormatter(val),
     },
     {
       field: 'returnType',
       label: '回款方式',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE,
-          value: data?.returnType,
+          value: val,
         }),
     },
     {
@@ -93,12 +94,12 @@ export function useDetailSystemSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data) => formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'updateTime',
       label: '更新时间',
-      content: (data) => formatDateTime(data?.updateTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/receivable/detail/index.vue b/apps/web-antd/src/views/crm/receivable/detail/index.vue
index ae6241362..725e803a6 100644
--- a/apps/web-antd/src/views/crm/receivable/detail/index.vue
+++ b/apps/web-antd/src/views/crm/receivable/detail/index.vue
@@ -38,11 +38,9 @@ const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
@@ -70,7 +68,7 @@ async function loadReceivableDetail() {
 /** 返回列表页 */
 function handleBack() {
   tabs.closeCurrentTab();
-  router.push('/crm/receivable');
+  router.push({ name: 'CrmReceivable' });
 }
 
 /** 编辑收款 */
diff --git a/apps/web-antd/src/views/crm/receivable/detail/modules/info.vue b/apps/web-antd/src/views/crm/receivable/detail/modules/info.vue
index dfad21c8d..1dea873ac 100644
--- a/apps/web-antd/src/views/crm/receivable/detail/modules/info.vue
+++ b/apps/web-antd/src/views/crm/receivable/detail/modules/info.vue
@@ -12,22 +12,18 @@ defineProps<{
 }>();
 
 const [BaseDescriptions] = useDescription({
-  componentProps: {
-    title: '基本信息',
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  title: '基本信息',
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailBaseSchema(),
 });
 
 const [SystemDescriptions] = useDescription({
-  componentProps: {
-    title: '系统信息',
-    bordered: false,
-    column: 3,
-    class: 'mx-4',
-  },
+  title: '系统信息',
+  bordered: false,
+  column: 3,
+  class: 'mx-4',
   schema: useDetailSystemSchema(),
 });
 </script>
diff --git a/apps/web-antd/src/views/crm/receivable/index.vue b/apps/web-antd/src/views/crm/receivable/index.vue
index 317e2ee9a..25ac3fffa 100644
--- a/apps/web-antd/src/views/crm/receivable/index.vue
+++ b/apps/web-antd/src/views/crm/receivable/index.vue
@@ -161,8 +161,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
     <FormModal @success="handleRefresh" />
     <Grid>
-      <template #top>
-        <Tabs class="-mt-11" @change="handleChangeSceneType">
+      <template toolbar-actions>
+        <Tabs class="w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />
@@ -249,8 +249,3 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </Grid>
   </Page>
 </template>
-<style scoped>
-:deep(.vxe-toolbar div) {
-  z-index: 1;
-}
-</style>
diff --git a/apps/web-antd/src/views/crm/receivable/plan/data.ts b/apps/web-antd/src/views/crm/receivable/plan/data.ts
index a004a9b48..b8e848493 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/data.ts
+++ b/apps/web-antd/src/views/crm/receivable/plan/data.ts
@@ -28,7 +28,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '负责人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -45,7 +45,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       rules: 'required',
       componentProps: {
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择客户',
@@ -153,7 +153,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '客户',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择客户',
diff --git a/apps/web-antd/src/views/crm/receivable/plan/detail/data.ts b/apps/web-antd/src/views/crm/receivable/plan/detail/data.ts
index 233765322..5059f02ab 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/detail/data.ts
+++ b/apps/web-antd/src/views/crm/receivable/plan/detail/data.ts
@@ -21,17 +21,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'price',
       label: '计划回款金额',
-      content: (data) => erpPriceInputFormatter(data.price),
+      render: (val) => erpPriceInputFormatter(val),
     },
     {
       field: 'returnTime',
       label: '计划回款日期',
-      content: (data) => formatDateTime(data?.returnTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'receivable',
       label: '实际回款金额',
-      content: (data) => erpPriceInputFormatter(data?.receivable?.price ?? 0),
+      render: (val) => erpPriceInputFormatter(val?.price ?? 0),
     },
   ];
 }
@@ -54,20 +54,20 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'returnTime',
       label: '计划回款日期',
-      content: (data) => formatDateTime(data?.returnTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'price',
       label: '计划回款金额',
-      content: (data) => erpPriceInputFormatter(data.price),
+      render: (val) => erpPriceInputFormatter(val),
     },
     {
       field: 'returnType',
       label: '计划回款方式',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE,
-          value: data?.returnType,
+          value: val,
         }),
     },
     {
@@ -77,20 +77,20 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
     {
       field: 'receivable',
       label: '实际回款金额',
-      content: (data) => erpPriceInputFormatter(data?.receivable?.price ?? 0),
+      render: (val) => erpPriceInputFormatter(val ?? 0),
     },
     {
       field: 'receivableRemain',
       label: '未回款金额',
-      content: (data) => {
+      render: (val, data) => {
         const paid = data?.receivable?.price ?? 0;
-        return erpPriceInputFormatter(Math.max(data.price - paid, 0));
+        return erpPriceInputFormatter(Math.max(val - paid, 0));
       },
     },
     {
       field: 'receivable.returnTime',
       label: '实际回款日期',
-      content: (data) => formatDateTime(data?.receivable?.returnTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'remark',
@@ -113,12 +113,12 @@ export function useDetailSystemSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data) => formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'updateTime',
       label: '更新时间',
-      content: (data) => formatDateTime(data?.updateTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/receivable/plan/detail/index.vue b/apps/web-antd/src/views/crm/receivable/plan/detail/index.vue
index 59ba9ae30..04372f167 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/detail/index.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/detail/index.vue
@@ -39,11 +39,9 @@ const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队
 const validateWrite = () => permissionListRef.value?.validateWrite;
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
@@ -71,7 +69,7 @@ async function getReceivablePlanDetail() {
 /** 返回列表页 */
 function handleBack() {
   tabs.closeCurrentTab();
-  router.push('/crm/receivablePlan');
+  router.push({ name: 'CrmReceivablePlan' });
 }
 
 /** 编辑收款 */
diff --git a/apps/web-antd/src/views/crm/receivable/plan/detail/modules/info.vue b/apps/web-antd/src/views/crm/receivable/plan/detail/modules/info.vue
index c7c6c642c..2986ec719 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/detail/modules/info.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/detail/modules/info.vue
@@ -12,22 +12,18 @@ defineProps<{
 }>();
 
 const [BaseDescriptions] = useDescription({
-  componentProps: {
-    title: '基本信息',
-    bordered: false,
-    column: 4,
-    class: 'mx-4',
-  },
+  title: '基本信息',
+  bordered: false,
+  column: 4,
+  class: 'mx-4',
   schema: useDetailBaseSchema(),
 });
 
 const [SystemDescriptions] = useDescription({
-  componentProps: {
-    title: '系统信息',
-    bordered: false,
-    column: 3,
-    class: 'mx-4',
-  },
+  title: '系统信息',
+  bordered: false,
+  column: 3,
+  class: 'mx-4',
   schema: useDetailSystemSchema(),
 });
 </script>
diff --git a/apps/web-antd/src/views/crm/receivable/plan/index.vue b/apps/web-antd/src/views/crm/receivable/plan/index.vue
index 19b855dfd..93edff787 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/index.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/index.vue
@@ -144,8 +144,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="handleRefresh" />
     <ReceivableFormModal @success="handleRefresh" />
     <Grid>
-      <template #top>
-        <Tabs class="-mt-11" @change="handleChangeSceneType">
+      <template #toolbar-actions>
+        <Tabs class="w-full" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="下属负责的" key="3" />
         </Tabs>
@@ -215,8 +215,3 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </Grid>
   </Page>
 </template>
-<style scoped>
-:deep(.vxe-toolbar div) {
-  z-index: 1;
-}
-</style>
diff --git a/apps/web-antd/src/views/crm/statistics/customer/data.ts b/apps/web-antd/src/views/crm/statistics/customer/data.ts
index 43cc36f63..ec37c668a 100644
--- a/apps/web-antd/src/views/crm/statistics/customer/data.ts
+++ b/apps/web-antd/src/views/crm/statistics/customer/data.ts
@@ -99,7 +99,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '员工',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择员工',
diff --git a/apps/web-antd/src/views/crm/statistics/customer/index.vue b/apps/web-antd/src/views/crm/statistics/customer/index.vue
index 63967b741..509af3919 100644
--- a/apps/web-antd/src/views/crm/statistics/customer/index.vue
+++ b/apps/web-antd/src/views/crm/statistics/customer/index.vue
@@ -4,15 +4,17 @@ import type { EchartsUIType } from '@vben/plugins/echarts';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmStatisticsCustomerApi } from '#/api/crm/statistics/customer';
 
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
-import { Page } from '@vben/common-ui';
+import { ContentWrap, Page } from '@vben/common-ui';
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 import { Tabs } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter/form';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getChartDatas, getDatas } from '#/api/crm/statistics/customer';
+import { getChartDatas } from '#/api/crm/statistics/customer';
+import { $t } from '#/locales';
 
 import { getChartOptions } from './chartOptions';
 import { customerSummaryTabs, useGridColumns, useGridFormSchema } from './data';
@@ -21,10 +23,26 @@ const activeTabName = ref('customerSummary');
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
 
-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: useGridFormSchema(),
+const [QueryForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
   },
+  schema: useGridFormSchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: $t('common.query'),
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2',
+  handleSubmit: async () => {
+    await handleTabChange(activeTabName.value);
+  },
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useGridColumns(activeTabName.value),
     height: 'auto',
@@ -32,15 +50,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     pagerConfig: {
       enabled: false,
     },
-    proxyConfig: {
-      ajax: {
-        query: async (_, formValues) => {
-          const res = await getChartDatas(activeTabName.value, formValues);
-          await renderEcharts(getChartOptions(activeTabName.value, res));
-          return getDatas(activeTabName.value, formValues);
-        },
-      },
-    },
     rowConfig: {
       keyField: 'id',
       isHover: true,
@@ -57,24 +66,35 @@ async function handleTabChange(key: any) {
   gridApi.setGridOptions({
     columns: useGridColumns(key),
   });
-  await gridApi.reload();
+  const queryParams = await formApi.getValues();
+  const res = await getChartDatas(activeTabName.value, queryParams);
+  await renderEcharts(getChartOptions(activeTabName.value, res));
+  await gridApi.grid.reloadData(res);
 }
+
+onMounted(() => {
+  handleTabChange(activeTabName.value);
+});
 </script>
 
 <template>
   <Page auto-content-height>
-    <Grid>
-      <template #top>
-        <Tabs v-model:active-key="activeTabName" @change="handleTabChange">
-          <Tabs.TabPane
-            v-for="item in customerSummaryTabs"
-            :key="item.key"
-            :tab="item.tab"
-            :force-render="true"
-          />
-        </Tabs>
-        <EchartsUI class="mb-20 h-full w-full" ref="chartRef" />
-      </template>
-    </Grid>
+    <ContentWrap>
+      <QueryForm />
+      <Tabs
+        v-model:active-key="activeTabName"
+        class="w-full"
+        @change="handleTabChange"
+      >
+        <Tabs.TabPane
+          v-for="item in customerSummaryTabs"
+          :key="item.key"
+          :tab="item.tab"
+          :force-render="true"
+        />
+      </Tabs>
+      <EchartsUI class="mb-20 h-full w-full" ref="chartRef" />
+      <Grid />
+    </ContentWrap>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/statistics/funnel/data.ts b/apps/web-antd/src/views/crm/statistics/funnel/data.ts
index b704d1e71..87668577d 100644
--- a/apps/web-antd/src/views/crm/statistics/funnel/data.ts
+++ b/apps/web-antd/src/views/crm/statistics/funnel/data.ts
@@ -73,7 +73,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '员工',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         allowClear: true,
         labelField: 'nickname',
         valueField: 'id',
diff --git a/apps/web-antd/src/views/crm/statistics/funnel/index.vue b/apps/web-antd/src/views/crm/statistics/funnel/index.vue
index 1b071a824..38c1bde86 100644
--- a/apps/web-antd/src/views/crm/statistics/funnel/index.vue
+++ b/apps/web-antd/src/views/crm/statistics/funnel/index.vue
@@ -1,18 +1,23 @@
 <script lang="ts" setup>
 import type { EchartsUIType } from '@vben/plugins/echarts';
 
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type {
+  VxeGridListeners,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
 import type { CrmStatisticsFunnelApi } from '#/api/crm/statistics/funnel';
 
-import { ref } from 'vue';
+import { reactive, ref } from 'vue';
 
-import { Page } from '@vben/common-ui';
+import { ContentWrap, Page } from '@vben/common-ui';
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 import { Button, ButtonGroup, Tabs } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter/form';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getChartDatas, getDatas } from '#/api/crm/statistics/funnel';
+import { $t } from '#/locales';
 
 import { getChartOptions } from './chartOptions';
 import { customerSummaryTabs, useGridColumns, useGridFormSchema } from './data';
@@ -22,11 +27,39 @@ const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
 
 const active = ref(true);
+const pagerVO = reactive({
+  total: 0,
+  pageNo: 1,
+  pageSize: 10,
+});
+
+const gridEvents: VxeGridListeners = {
+  async pageChange({ pageSize, currentPage }) {
+    pagerVO.pageNo = currentPage;
+    pagerVO.pageSize = pageSize;
+    await handleTabChange(activeTabName.value);
+  },
+};
+const [QueryForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: useGridFormSchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: $t('common.query'),
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2',
+  handleSubmit: async () => {
+    await handleTabChange(activeTabName.value);
+  },
+});
 
 const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: useGridFormSchema(),
-  },
   gridOptions: {
     columns: useGridColumns(activeTabName.value),
     height: 'auto',
@@ -34,21 +67,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     pagerConfig: {
       enabled: false,
     },
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          const res = await getChartDatas(activeTabName.value, formValues);
-          await renderEcharts(
-            getChartOptions(activeTabName.value, active.value, res),
-          );
-          return getDatas(activeTabName.value, {
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            ...formValues,
-          });
-        },
-      },
-    },
     rowConfig: {
       keyField: 'id',
       isHover: true,
@@ -64,56 +82,65 @@ async function handleTabChange(key: any) {
   activeTabName.value = key;
   gridApi.setGridOptions({
     columns: useGridColumns(key),
+    height: '400px',
+    keepSource: true,
     pagerConfig: {
-      enabled: activeTabName.value !== 'funnelRef',
+      enabled: activeTabName.value !== 'funnel',
     },
   });
-  await gridApi.reload();
+  const queryParams = await formApi.getValues();
+  const res = await getChartDatas(activeTabName.value, queryParams);
+  await renderEcharts(getChartOptions(activeTabName.value, active.value, res));
+  const data: any = await getDatas(activeTabName.value, queryParams);
+  await gridApi.grid.reloadData(
+    activeTabName.value === 'funnel' ? data : data.list,
+  );
 }
 
 /** 视角切换 */
-function handleActive(value: boolean) {
+async function handleActive(value: boolean) {
   active.value = value;
+  const queryParams = await formApi.getValues();
   renderEcharts(
-    getChartOptions(
-      activeTabName.value,
-      active.value,
-      gridApi.formApi.getValues(),
-    ),
+    getChartOptions(activeTabName.value, active.value, queryParams),
   );
 }
 </script>
 
 <template>
   <Page auto-content-height>
-    <Grid>
-      <template #top>
-        <Tabs v-model:active-key="activeTabName" @change="handleTabChange">
-          <Tabs.TabPane
-            v-for="item in customerSummaryTabs"
-            :key="item.key"
-            :tab="item.tab"
-            :force-render="true"
-          />
-        </Tabs>
-        <ButtonGroup>
-          <Button
-            :type="active ? 'primary' : 'default'"
-            v-if="activeTabName === 'funnel'"
-            @click="handleActive(true)"
-          >
-            客户视角
-          </Button>
-          <Button
-            :type="active ? 'default' : 'primary'"
-            v-if="activeTabName === 'funnel'"
-            @click="handleActive(false)"
-          >
-            动态视角
-          </Button>
-        </ButtonGroup>
-        <EchartsUI class="mb-20 h-2/5 w-full" ref="chartRef" />
-      </template>
-    </Grid>
+    <ContentWrap>
+      <QueryForm />
+      <Tabs
+        v-model:active-key="activeTabName"
+        class="w-full"
+        @change="handleTabChange"
+      >
+        <Tabs.TabPane
+          v-for="item in customerSummaryTabs"
+          :key="item.key"
+          :tab="item.tab"
+          :force-render="true"
+        />
+      </Tabs>
+      <ButtonGroup>
+        <Button
+          :type="active ? 'primary' : 'default'"
+          v-if="activeTabName === 'funnel'"
+          @click="handleActive(true)"
+        >
+          客户视角
+        </Button>
+        <Button
+          :type="active ? 'default' : 'primary'"
+          v-if="activeTabName === 'funnel'"
+          @click="handleActive(false)"
+        >
+          动态视角
+        </Button>
+      </ButtonGroup>
+      <EchartsUI class="mb-20 h-2/5 w-full" ref="chartRef" />
+      <Grid v-on="gridEvents" />
+    </ContentWrap>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/statistics/performance/data.ts b/apps/web-antd/src/views/crm/statistics/performance/data.ts
index 964f417ed..e56c7ebf7 100644
--- a/apps/web-antd/src/views/crm/statistics/performance/data.ts
+++ b/apps/web-antd/src/views/crm/statistics/performance/data.ts
@@ -64,7 +64,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '员工',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择员工',
diff --git a/apps/web-antd/src/views/crm/statistics/performance/index.vue b/apps/web-antd/src/views/crm/statistics/performance/index.vue
index ecbcec836..84951f667 100644
--- a/apps/web-antd/src/views/crm/statistics/performance/index.vue
+++ b/apps/web-antd/src/views/crm/statistics/performance/index.vue
@@ -6,17 +6,19 @@ import type { CrmStatisticsCustomerApi } from '#/api/crm/statistics/customer';
 
 import { onMounted, ref } from 'vue';
 
-import { Page } from '@vben/common-ui';
+import { ContentWrap, Page } from '@vben/common-ui';
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 import { Tabs } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter/form';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   getContractCountPerformance,
   getContractPricePerformance,
   getReceivablePricePerformance,
 } from '#/api/crm/statistics/performance';
+import { $t } from '#/locales';
 
 import { getChartOptions } from './chartOptions';
 import { customerSummaryTabs, useGridFormSchema } from './data';
@@ -25,13 +27,25 @@ const activeTabName = ref('ContractCountPerformance');
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
 
-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: useGridFormSchema(),
-    handleSubmit: async () => {
-      await handleTabChange(activeTabName.value);
+const [QueryForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
     },
   },
+  schema: useGridFormSchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: $t('common.query'),
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2',
+  handleSubmit: async () => {
+    await handleTabChange(activeTabName.value);
+  },
+});
+const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: [],
     height: 'auto',
@@ -42,7 +56,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       enabled: false,
     },
-    data: [],
     rowConfig: {
       keyField: 'id',
       isHover: true,
@@ -56,7 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 /** tab 切换 */
 async function handleTabChange(key: any) {
   activeTabName.value = key;
-  const params = (await gridApi.formApi.getValues()) as any;
+  const queryParams = (await formApi.getValues()) as any;
   let data: any[] = [];
   const columnsData: any[] = [];
   let tableData: any[] = [];
@@ -69,7 +82,7 @@ async function handleTabChange(key: any) {
         { title: '环比增长率（%）' },
         { title: '同比增长率（%）' },
       ];
-      data = await getContractCountPerformance(params);
+      data = await getContractCountPerformance(queryParams);
       break;
     }
     case 'ContractPricePerformance': {
@@ -80,7 +93,7 @@ async function handleTabChange(key: any) {
         { title: '环比增长率（%）' },
         { title: '同比增长率（%）' },
       ];
-      data = await getContractPricePerformance(params);
+      data = await getContractPricePerformance(queryParams);
       break;
     }
     case 'ReceivablePricePerformance': {
@@ -91,7 +104,7 @@ async function handleTabChange(key: any) {
         { title: '环比增长率（%）' },
         { title: '同比增长率（%）' },
       ];
-      data = await getReceivablePricePerformance(params);
+      data = await getReceivablePricePerformance(queryParams);
       break;
     }
     default: {
@@ -142,18 +155,22 @@ onMounted(() => {
 
 <template>
   <Page auto-content-height>
-    <Grid>
-      <template #top>
-        <Tabs v-model:active-key="activeTabName" @change="handleTabChange">
-          <Tabs.TabPane
-            v-for="item in customerSummaryTabs"
-            :key="item.key"
-            :tab="item.tab"
-            :force-render="true"
-          />
-        </Tabs>
-        <EchartsUI class="mb-20 h-full w-full" ref="chartRef" />
-      </template>
-    </Grid>
+    <ContentWrap>
+      <QueryForm />
+      <Tabs
+        v-model:active-key="activeTabName"
+        class="w-full"
+        @change="handleTabChange"
+      >
+        <Tabs.TabPane
+          v-for="item in customerSummaryTabs"
+          :key="item.key"
+          :tab="item.tab"
+          :force-render="true"
+        />
+      </Tabs>
+      <EchartsUI class="mb-20 h-full w-full" ref="chartRef" />
+      <Grid class="min-h-[400px]" />
+    </ContentWrap>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/statistics/portrait/data.ts b/apps/web-antd/src/views/crm/statistics/portrait/data.ts
index 3c2cc7c62..8eeff969b 100644
--- a/apps/web-antd/src/views/crm/statistics/portrait/data.ts
+++ b/apps/web-antd/src/views/crm/statistics/portrait/data.ts
@@ -68,7 +68,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '员工',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择员工',
diff --git a/apps/web-antd/src/views/crm/statistics/portrait/index.vue b/apps/web-antd/src/views/crm/statistics/portrait/index.vue
index 1d93478a4..1bcb90227 100644
--- a/apps/web-antd/src/views/crm/statistics/portrait/index.vue
+++ b/apps/web-antd/src/views/crm/statistics/portrait/index.vue
@@ -4,15 +4,17 @@ import type { EchartsUIType } from '@vben/plugins/echarts';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmStatisticsCustomerApi } from '#/api/crm/statistics/customer';
 
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
-import { Page } from '@vben/common-ui';
+import { ContentWrap, Page } from '@vben/common-ui';
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 import { Tabs } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter/form';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getDatas } from '#/api/crm/statistics/portrait';
+import { $t } from '#/locales';
 
 import { getChartOptions } from './chartOptions';
 import { customerSummaryTabs, useGridColumns, useGridFormSchema } from './data';
@@ -23,10 +25,25 @@ const rightChartRef = ref<EchartsUIType>();
 const { renderEcharts: renderLeftEcharts } = useEcharts(leftChartRef);
 const { renderEcharts: renderRightEcharts } = useEcharts(rightChartRef);
 
-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: useGridFormSchema(),
+const [QueryForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
   },
+  schema: useGridFormSchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: $t('common.query'),
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2',
+  handleSubmit: async () => {
+    await handleTabChange(activeTabName.value);
+  },
+});
+const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useGridColumns(activeTabName.value),
     height: 'auto',
@@ -34,20 +51,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     pagerConfig: {
       enabled: false,
     },
-    proxyConfig: {
-      ajax: {
-        query: async (_, formValues) => {
-          const res = await getDatas(activeTabName.value, formValues);
-          await renderLeftEcharts(
-            getChartOptions(activeTabName.value, res).left,
-          );
-          await renderRightEcharts(
-            getChartOptions(activeTabName.value, res).right,
-          );
-          return res;
-        },
-      },
-    },
     rowConfig: {
       keyField: 'id',
       isHover: true,
@@ -64,27 +67,39 @@ async function handleTabChange(key: any) {
   gridApi.setGridOptions({
     columns: useGridColumns(key),
   });
-  await gridApi.reload();
+  const queryParams = await formApi.getValues();
+  const res = await getDatas(activeTabName.value, queryParams);
+  await renderLeftEcharts(getChartOptions(activeTabName.value, res).left);
+  await renderRightEcharts(getChartOptions(activeTabName.value, res).right);
+  await gridApi.grid.reloadData(res);
 }
+
+onMounted(() => {
+  handleTabChange(activeTabName.value);
+});
 </script>
 
 <template>
   <Page auto-content-height>
-    <Grid>
-      <template #top>
-        <Tabs v-model:active-key="activeTabName" @change="handleTabChange">
-          <Tabs.TabPane
-            v-for="item in customerSummaryTabs"
-            :key="item.key"
-            :tab="item.tab"
-            :force-render="true"
-          />
-        </Tabs>
-        <div class="mt-5 flex">
-          <EchartsUI class="m-4 w-1/2" ref="leftChartRef" />
-          <EchartsUI class="m-4 w-1/2" ref="rightChartRef" />
-        </div>
-      </template>
-    </Grid>
+    <ContentWrap>
+      <QueryForm />
+      <Tabs
+        v-model:active-key="activeTabName"
+        class="w-full"
+        @change="handleTabChange"
+      >
+        <Tabs.TabPane
+          v-for="item in customerSummaryTabs"
+          :key="item.key"
+          :tab="item.tab"
+          :force-render="true"
+        />
+      </Tabs>
+      <div class="mt-5 flex">
+        <EchartsUI class="m-4 w-1/2" ref="leftChartRef" />
+        <EchartsUI class="m-4 w-1/2" ref="rightChartRef" />
+      </div>
+      <Grid v-show="activeTabName !== 'area'" />
+    </ContentWrap>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/statistics/rank/index.vue b/apps/web-antd/src/views/crm/statistics/rank/index.vue
index b311bac99..27f9fdad3 100644
--- a/apps/web-antd/src/views/crm/statistics/rank/index.vue
+++ b/apps/web-antd/src/views/crm/statistics/rank/index.vue
@@ -4,15 +4,17 @@ import type { EchartsUIType } from '@vben/plugins/echarts';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmStatisticsCustomerApi } from '#/api/crm/statistics/customer';
 
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
-import { Page } from '@vben/common-ui';
+import { ContentWrap, Page } from '@vben/common-ui';
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 import { Tabs } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter/form';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getDatas } from '#/api/crm/statistics/customer';
+import { $t } from '#/locales';
 
 import { getChartOptions } from './chartOptions';
 import { customerSummaryTabs, useGridColumns, useGridFormSchema } from './data';
@@ -21,10 +23,26 @@ const activeTabName = ref('contractPriceRank');
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
 
-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: useGridFormSchema(),
+const [QueryForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
   },
+  schema: useGridFormSchema(),
+  // 是否可展开
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: $t('common.query'),
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2',
+  handleSubmit: async () => {
+    await handleTabChange(activeTabName.value);
+  },
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useGridColumns(activeTabName.value),
     height: 'auto',
@@ -57,24 +75,35 @@ async function handleTabChange(key: any) {
   gridApi.setGridOptions({
     columns: useGridColumns(key),
   });
-  await gridApi.reload();
+  const queryParams = await formApi.getValues();
+  const res = await getDatas(activeTabName.value, queryParams);
+  await renderEcharts(getChartOptions(activeTabName.value, res));
+  await gridApi.grid.reloadData(res);
 }
+
+onMounted(() => {
+  handleTabChange(activeTabName.value);
+});
 </script>
 
 <template>
   <Page auto-content-height>
-    <Grid>
-      <template #top>
-        <Tabs v-model:active-key="activeTabName" @change="handleTabChange">
-          <Tabs.TabPane
-            v-for="item in customerSummaryTabs"
-            :key="item.key"
-            :tab="item.tab"
-            :force-render="true"
-          />
-        </Tabs>
-        <EchartsUI class="mb-20 h-full w-full" ref="chartRef" />
-      </template>
-    </Grid>
+    <ContentWrap>
+      <QueryForm />
+      <Tabs
+        v-model:active-key="activeTabName"
+        class="w-full"
+        @change="handleTabChange"
+      >
+        <Tabs.TabPane
+          v-for="item in customerSummaryTabs"
+          :key="item.key"
+          :tab="item.tab"
+          :force-render="true"
+        />
+      </Tabs>
+      <EchartsUI class="mb-20 h-full w-full" ref="chartRef" />
+      <Grid />
+    </ContentWrap>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/dashboard/workspace/index.vue b/apps/web-antd/src/views/dashboard/workspace/index.vue
index d5646b5e3..8f6620310 100644
--- a/apps/web-antd/src/views/dashboard/workspace/index.vue
+++ b/apps/web-antd/src/views/dashboard/workspace/index.vue
@@ -49,12 +49,12 @@ const projectItems: WorkbenchProjectItem[] = [
   },
   {
     color: '#ff4d4f',
-    content: 'github.com/yudaocode/yudao-ui-mall-uniapp',
+    content: 'github.com/yudaocode/yudao-mall-uniapp',
     date: '2025-03-04',
     group: 'Vue3 + uniapp 商城手机端',
     icon: 'icon-park-outline:mall-bag',
-    title: 'yudao-ui-mall-uniapp',
-    url: 'https://github.com/yudaocode/yudao-ui-mall-uniapp',
+    title: 'yudao-mall-uniapp',
+    url: 'https://github.com/yudaocode/yudao-mall-uniapp',
   },
   {
     color: '#1890ff',
diff --git a/apps/web-antd/src/views/erp/finance/account/index.vue b/apps/web-antd/src/views/erp/finance/account/index.vue
index 55dd6e697..9ef8f3f60 100644
--- a/apps/web-antd/src/views/erp/finance/account/index.vue
+++ b/apps/web-antd/src/views/erp/finance/account/index.vue
@@ -73,6 +73,7 @@ async function handleDefaultStatusChange(
       .then(async () => {
         // 更新默认状态
         await updateAccountDefaultStatus(row.id!, newStatus);
+        // 提示并返回成功
         message.success(`${text}默认成功`);
         resolve(true);
       })
diff --git a/apps/web-antd/src/views/erp/finance/payment/data.ts b/apps/web-antd/src/views/erp/finance/payment/data.ts
index 9cf6dfc34..804490eb7 100644
--- a/apps/web-antd/src/views/erp/finance/payment/data.ts
+++ b/apps/web-antd/src/views/erp/finance/payment/data.ts
@@ -52,7 +52,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择供应商',
         allowClear: true,
         showSearch: true,
-        api: () => getSupplierSimpleList(),
+        api: getSupplierSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -66,7 +66,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择财务人员',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -119,7 +119,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择付款账户',
         allowClear: true,
         showSearch: true,
-        api: () => getAccountSimpleList(),
+        api: getAccountSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -241,7 +241,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择供应商',
         allowClear: true,
         showSearch: true,
-        api: () => getSupplierSimpleList(),
+        api: getSupplierSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -254,7 +254,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择创建人',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -267,7 +267,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择财务人员',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -280,7 +280,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择付款账户',
         allowClear: true,
         showSearch: true,
-        api: () => getAccountSimpleList(),
+        api: getAccountSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/finance/payment/modules/form.vue b/apps/web-antd/src/views/erp/finance/payment/modules/form.vue
index 14ef85e8e..5778dca0e 100644
--- a/apps/web-antd/src/views/erp/finance/payment/modules/form.vue
+++ b/apps/web-antd/src/views/erp/finance/payment/modules/form.vue
@@ -26,30 +26,32 @@ const formData = ref<
   }
 >({
   id: undefined,
-  no: undefined,
+  no: '',
   supplierId: undefined,
   accountId: undefined,
   financeUserId: undefined,
   paymentTime: undefined,
-  remark: undefined,
+  remark: '',
   fileUrl: undefined,
   totalPrice: 0,
   discountPrice: 0,
   paymentPrice: 0,
   items: [],
+  status: 0,
 });
 
 const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
 const itemFormRef = ref<InstanceType<typeof ItemForm>>();
 
-/* eslint-disable unicorn/no-nested-ternary */
-const getTitle = computed(() =>
-  formType.value === 'create'
-    ? $t('ui.actionTitle.create', ['付款单'])
-    : formType.value === 'edit'
-      ? $t('ui.actionTitle.edit', ['付款单'])
-      : '付款单详情',
-);
+const getTitle = computed(() => {
+  if (formType.value === 'create') {
+    return $t('ui.actionTitle.create', ['付款单']);
+  } else if (formType.value === 'edit') {
+    return $t('ui.actionTitle.edit', ['付款单']);
+  } else {
+    return '付款单详情';
+  }
+});
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -81,30 +83,28 @@ const [Form, formApi] = useVbenForm({
 });
 
 /** 更新付款项 */
-const handleUpdateItems = (
-  items: ErpFinancePaymentApi.FinancePaymentItem[],
-) => {
+function handleUpdateItems(items: ErpFinancePaymentApi.FinancePaymentItem[]) {
   formData.value.items = items;
   formApi.setValues({
     items,
   });
-};
+}
 
 /** 更新总金额 */
-const handleUpdateTotalPrice = (totalPrice: number) => {
+function handleUpdateTotalPrice(totalPrice: number) {
   formData.value.totalPrice = totalPrice;
   formApi.setValues({
     totalPrice: formData.value.totalPrice,
   });
-};
+}
 
 /** 更新付款金额 */
-const handleUpdatePaymentPrice = (paymentPrice: number) => {
+function handleUpdatePaymentPrice(paymentPrice: number) {
   formData.value.paymentPrice = paymentPrice;
   formApi.setValues({
     paymentPrice: formData.value.paymentPrice,
   });
-};
+}
 
 /** 创建或更新付款单 */
 const [Modal, modalApi] = useVbenModal({
@@ -141,7 +141,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      formData.value = {} as ErpFinancePaymentApi.FinancePayment;
       return;
     }
     // 加载数据
diff --git a/apps/web-antd/src/views/erp/finance/payment/modules/item-form.vue b/apps/web-antd/src/views/erp/finance/payment/modules/item-form.vue
index 3dfa62a8e..5d0032aa6 100644
--- a/apps/web-antd/src/views/erp/finance/payment/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/finance/payment/modules/item-form.vue
@@ -212,81 +212,89 @@ defineExpose({ validate });
 </script>
 
 <template>
-  <Grid class="w-full">
-    <template #paymentPrice="{ row }">
-      <InputNumber
-        v-model:value="row.paymentPrice"
-        :precision="2"
-        :disabled="disabled"
-        :formatter="erpPriceInputFormatter"
-        placeholder="请输入本次付款"
-        @change="handleRowChange(row)"
-      />
-    </template>
-    <template #remark="{ row }">
-      <Input
-        v-model:value="row.remark"
-        :disabled="disabled"
-        placeholder="请输入备注"
-        @change="handleRowChange(row)"
-      />
-    </template>
-    <template #actions="{ row }">
-      <TableAction
-        v-if="!disabled"
-        :actions="[
-          {
-            label: '删除',
-            type: 'link',
-            danger: true,
-            popConfirm: {
-              title: '确认删除该付款明细吗？',
-              confirm: handleDelete.bind(null, row),
+  <div>
+    <Grid class="w-full">
+      <template #paymentPrice="{ row }">
+        <InputNumber
+          v-model:value="row.paymentPrice"
+          :precision="2"
+          :disabled="disabled"
+          :formatter="erpPriceInputFormatter"
+          placeholder="请输入本次付款"
+          @change="handleRowChange(row)"
+        />
+      </template>
+      <template #remark="{ row }">
+        <Input
+          v-model:value="row.remark"
+          :disabled="disabled"
+          placeholder="请输入备注"
+          @change="handleRowChange(row)"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          v-if="!disabled"
+          :actions="[
+            {
+              label: '删除',
+              type: 'link',
+              danger: true,
+              popConfirm: {
+                title: '确认删除该付款明细吗？',
+                confirm: handleDelete.bind(null, row),
+              },
             },
-          },
-        ]"
-      />
-    </template>
+          ]"
+        />
+      </template>
 
-    <template #bottom>
-      <div class="border-border bg-muted mt-2 rounded border p-2">
-        <div class="text-muted-foreground flex justify-between text-sm">
-          <span class="text-foreground font-medium">合计：</span>
-          <div class="flex space-x-4">
-            <span>
-              合计付款：{{ erpPriceInputFormatter(summaries.totalPrice) }}
-            </span>
-            <span>
-              已付金额：{{ erpPriceInputFormatter(summaries.paidPrice) }}
-            </span>
-            <span>
-              本次付款：
-              {{ erpPriceInputFormatter(summaries.paymentPrice) }}
-            </span>
+      <template #bottom>
+        <div class="border-border bg-muted mt-2 rounded border p-2">
+          <div class="text-muted-foreground flex justify-between text-sm">
+            <span class="text-foreground font-medium">合计：</span>
+            <div class="flex space-x-4">
+              <span>
+                合计付款：{{ erpPriceInputFormatter(summaries.totalPrice) }}
+              </span>
+              <span>
+                已付金额：{{ erpPriceInputFormatter(summaries.paidPrice) }}
+              </span>
+              <span>
+                本次付款：
+                {{ erpPriceInputFormatter(summaries.paymentPrice) }}
+              </span>
+            </div>
           </div>
         </div>
-      </div>
-      <TableAction
-        v-if="!disabled"
-        class="mt-2 flex justify-center"
-        :actions="[
-          {
-            label: '添加采购入库单',
-            type: 'default',
-            onClick: handleOpenPurchaseIn,
-          },
-          {
-            label: '添加采购退货单',
-            type: 'default',
-            onClick: handleOpenSaleReturn,
-          },
-        ]"
-      />
-    </template>
-  </Grid>
+        <TableAction
+          v-if="!disabled"
+          class="mt-2 flex justify-center"
+          :actions="[
+            {
+              label: '添加采购入库单',
+              type: 'default',
+              onClick: handleOpenPurchaseIn,
+            },
+            {
+              label: '添加采购退货单',
+              type: 'default',
+              onClick: handleOpenSaleReturn,
+            },
+          ]"
+        />
+      </template>
+    </Grid>
 
-  <!-- 采购入库单选择组件 -->
-  <PurchaseInSelect ref="purchaseInSelectRef" @success="handleAddPurchaseIn" />
-  <!-- 采购退货单选择组件 -->
-  <SaleReturnSelect ref="saleReturnSelectRef" @success="handleAddSaleReturn" />
+    <!-- 采购入库单选择组件 -->
+    <PurchaseInSelect
+      ref="purchaseInSelectRef"
+      @success="handleAddPurchaseIn"
+    />
+    <!-- 采购退货单选择组件 -->
+    <SaleReturnSelect
+      ref="saleReturnSelectRef"
+      @success="handleAddSaleReturn"
+    />
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/erp/finance/payment/modules/purchase-in-select.vue b/apps/web-antd/src/views/erp/finance/payment/modules/purchase-in-select.vue
index efcea61fc..0aafa2fd2 100644
--- a/apps/web-antd/src/views/erp/finance/payment/modules/purchase-in-select.vue
+++ b/apps/web-antd/src/views/erp/finance/payment/modules/purchase-in-select.vue
@@ -69,7 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 打开弹窗 */
-const openModal = (id: number) => {
+function openModal(id: number) {
   // 重置数据
   supplierId.value = id;
   open.value = true;
@@ -78,17 +78,17 @@ const openModal = (id: number) => {
   gridApi.formApi?.resetForm();
   gridApi.formApi?.setValues({ supplierId: id });
   gridApi.query();
-};
+}
 
 /** 确认选择采购入库单 */
-const handleOk = () => {
+function handleOk() {
   if (selectedRows.value.length === 0) {
     message.warning('请选择要添加的采购入库单');
     return;
   }
   emit('success', selectedRows.value);
   open.value = false;
-};
+}
 
 defineExpose({ open: openModal });
 </script>
diff --git a/apps/web-antd/src/views/erp/finance/payment/modules/sale-return-select.vue b/apps/web-antd/src/views/erp/finance/payment/modules/sale-return-select.vue
index e7100ad35..28460d516 100644
--- a/apps/web-antd/src/views/erp/finance/payment/modules/sale-return-select.vue
+++ b/apps/web-antd/src/views/erp/finance/payment/modules/sale-return-select.vue
@@ -73,7 +73,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 打开弹窗 */
-const openModal = (id: number) => {
+function openModal(id: number) {
   // 重置数据
   supplierId.value = id;
   open.value = true;
@@ -82,17 +82,17 @@ const openModal = (id: number) => {
   gridApi.formApi?.resetForm();
   gridApi.formApi?.setValues({ supplierId: id });
   gridApi.query();
-};
+}
 
 /** 确认选择 */
-const handleOk = () => {
+function handleOk() {
   if (selectedRows.value.length === 0) {
     message.warning('请选择要添加的采购退货单');
     return;
   }
   emit('success', selectedRows.value);
   open.value = false;
-};
+}
 
 defineExpose({ open: openModal });
 </script>
diff --git a/apps/web-antd/src/views/erp/finance/receipt/data.ts b/apps/web-antd/src/views/erp/finance/receipt/data.ts
index 85fc55c63..6c860a5db 100644
--- a/apps/web-antd/src/views/erp/finance/receipt/data.ts
+++ b/apps/web-antd/src/views/erp/finance/receipt/data.ts
@@ -52,7 +52,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择客户',
         allowClear: true,
         showSearch: true,
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -66,7 +66,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择财务人员',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -119,7 +119,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择收款账户',
         allowClear: true,
         showSearch: true,
-        api: () => getAccountSimpleList(),
+        api: getAccountSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -241,7 +241,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择客户',
         allowClear: true,
         showSearch: true,
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -254,7 +254,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择创建人',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -267,7 +267,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择财务人员',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -280,7 +280,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择收款账户',
         allowClear: true,
         showSearch: true,
-        api: () => getAccountSimpleList(),
+        api: getAccountSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/finance/receipt/modules/form.vue b/apps/web-antd/src/views/erp/finance/receipt/modules/form.vue
index ed35d1df9..9a9a773be 100644
--- a/apps/web-antd/src/views/erp/finance/receipt/modules/form.vue
+++ b/apps/web-antd/src/views/erp/finance/receipt/modules/form.vue
@@ -43,14 +43,15 @@ const formData = ref<
 const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
 const itemFormRef = ref<InstanceType<typeof ItemForm>>();
 
-/* eslint-disable unicorn/no-nested-ternary */
-const getTitle = computed(() =>
-  formType.value === 'create'
-    ? $t('ui.actionTitle.create', ['收款单'])
-    : formType.value === 'edit'
-      ? $t('ui.actionTitle.edit', ['收款单'])
-      : '收款单详情',
-);
+const getTitle = computed(() => {
+  if (formType.value === 'create') {
+    return $t('ui.actionTitle.create', ['收款单']);
+  } else if (formType.value === 'edit') {
+    return $t('ui.actionTitle.edit', ['收款单']);
+  } else {
+    return '收款单详情';
+  }
+});
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -82,30 +83,28 @@ const [Form, formApi] = useVbenForm({
 });
 
 /** 更新收款项 */
-const handleUpdateItems = (
-  items: ErpFinanceReceiptApi.FinanceReceiptItem[],
-) => {
+function handleUpdateItems(items: ErpFinanceReceiptApi.FinanceReceiptItem[]) {
   formData.value.items = items;
   formApi.setValues({
     items,
   });
-};
+}
 
 /** 更新总金额 */
-const handleUpdateTotalPrice = (totalPrice: number) => {
+function handleUpdateTotalPrice(totalPrice: number) {
   formData.value.totalPrice = totalPrice;
   formApi.setValues({
     totalPrice: formData.value.totalPrice,
   });
-};
+}
 
 /** 更新收款金额 */
-const handleUpdateReceiptPrice = (receiptPrice: number) => {
+function handleUpdateReceiptPrice(receiptPrice: number) {
   formData.value.receiptPrice = receiptPrice;
   formApi.setValues({
     receiptPrice: formData.value.receiptPrice,
   });
-};
+}
 
 /** 创建或更新收款单 */
 const [Modal, modalApi] = useVbenModal({
diff --git a/apps/web-antd/src/views/erp/finance/receipt/modules/item-form.vue b/apps/web-antd/src/views/erp/finance/receipt/modules/item-form.vue
index 2d9230b69..c0c02bba6 100644
--- a/apps/web-antd/src/views/erp/finance/receipt/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/finance/receipt/modules/item-form.vue
@@ -118,15 +118,15 @@ watch(
 
 /** 添加销售出库单 */
 const saleOutSelectRef = ref();
-const handleOpenSaleOut = () => {
+function handleOpenSaleOut() {
   if (!props.customerId) {
     message.error('请选择客户');
     return;
   }
   saleOutSelectRef.value?.open(props.customerId);
-};
+}
 
-const handleAddSaleOut = (rows: ErpSaleOutApi.SaleOut[]) => {
+function handleAddSaleOut(rows: ErpSaleOutApi.SaleOut[]) {
   rows.forEach((row) => {
     const newItem: ErpFinanceReceiptApi.FinanceReceiptItem = {
       bizId: row.id,
@@ -140,19 +140,19 @@ const handleAddSaleOut = (rows: ErpSaleOutApi.SaleOut[]) => {
     tableData.value.push(newItem);
   });
   emit('update:items', [...tableData.value]);
-};
+}
 
 /** 添加销售退货单 */
 const saleReturnSelectRef = ref();
-const handleOpenSaleReturn = () => {
+function handleOpenSaleReturn() {
   if (!props.customerId) {
     message.error('请选择客户');
     return;
   }
   saleReturnSelectRef.value?.open(props.customerId);
-};
+}
 
-const handleAddSaleReturn = (rows: ErpSaleReturnApi.SaleReturn[]) => {
+function handleAddSaleReturn(rows: ErpSaleReturnApi.SaleReturn[]) {
   rows.forEach((row) => {
     const newItem: ErpFinanceReceiptApi.FinanceReceiptItem = {
       bizId: row.id,
@@ -166,10 +166,10 @@ const handleAddSaleReturn = (rows: ErpSaleReturnApi.SaleReturn[]) => {
     tableData.value.push(newItem);
   });
   emit('update:items', [...tableData.value]);
-};
+}
 
 /** 删除行 */
-const handleDelete = async (row: any) => {
+function handleDelete(row: any) {
   const index = tableData.value.findIndex(
     (item) => item.bizId === row.bizId && item.bizType === row.bizType,
   );
@@ -178,10 +178,10 @@ const handleDelete = async (row: any) => {
   }
   // 通知父组件更新
   emit('update:items', [...tableData.value]);
-};
+}
 
 /** 处理行数据变更 */
-const handleRowChange = (row: any) => {
+function handleRowChange(row: any) {
   const index = tableData.value.findIndex(
     (item) => item.bizId === row.bizId && item.bizType === row.bizType,
   );
@@ -191,10 +191,10 @@ const handleRowChange = (row: any) => {
     tableData.value[index] = row;
   }
   emit('update:items', [...tableData.value]);
-};
+}
 
 /** 表单校验 */
-const validate = () => {
+function validate() {
   // 检查是否有明细
   if (tableData.value.length === 0) {
     throw new Error('请添加收款明细');
@@ -206,87 +206,92 @@ const validate = () => {
       throw new Error(`第 ${i + 1} 行：本次收款必须大于0`);
     }
   }
-};
+}
 
 defineExpose({ validate });
 </script>
 
 <template>
-  <Grid class="w-full">
-    <template #receiptPrice="{ row }">
-      <InputNumber
-        v-model:value="row.receiptPrice"
-        :precision="2"
-        :disabled="disabled"
-        :formatter="erpPriceInputFormatter"
-        placeholder="请输入本次收款"
-        @change="handleRowChange(row)"
-      />
-    </template>
-    <template #remark="{ row }">
-      <Input
-        v-model:value="row.remark"
-        :disabled="disabled"
-        placeholder="请输入备注"
-        @change="handleRowChange(row)"
-      />
-    </template>
-    <template #actions="{ row }">
-      <TableAction
-        v-if="!disabled"
-        :actions="[
-          {
-            label: '删除',
-            type: 'link',
-            danger: true,
-            popConfirm: {
-              title: '确认删除该收款明细吗？',
-              confirm: handleDelete.bind(null, row),
+  <div>
+    <Grid class="w-full">
+      <template #receiptPrice="{ row }">
+        <InputNumber
+          v-model:value="row.receiptPrice"
+          :precision="2"
+          :disabled="disabled"
+          :formatter="erpPriceInputFormatter"
+          placeholder="请输入本次收款"
+          @change="handleRowChange(row)"
+        />
+      </template>
+      <template #remark="{ row }">
+        <Input
+          v-model:value="row.remark"
+          :disabled="disabled"
+          placeholder="请输入备注"
+          @change="handleRowChange(row)"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          v-if="!disabled"
+          :actions="[
+            {
+              label: '删除',
+              type: 'link',
+              danger: true,
+              popConfirm: {
+                title: '确认删除该收款明细吗？',
+                confirm: handleDelete.bind(null, row),
+              },
             },
-          },
-        ]"
-      />
-    </template>
+          ]"
+        />
+      </template>
 
-    <template #bottom>
-      <div class="border-border bg-muted mt-2 rounded border p-2">
-        <div class="text-muted-foreground flex justify-between text-sm">
-          <span class="text-foreground font-medium">合计：</span>
-          <div class="flex space-x-4">
-            <span>
-              合计收款：{{ erpPriceInputFormatter(summaries.totalPrice) }}
-            </span>
-            <span>
-              已收金额：{{ erpPriceInputFormatter(summaries.receiptedPrice) }}
-            </span>
-            <span>
-              本次收款：
-              {{ erpPriceInputFormatter(summaries.receiptPrice) }}
-            </span>
+      <template #bottom>
+        <div class="border-border bg-muted mt-2 rounded border p-2">
+          <div class="text-muted-foreground flex justify-between text-sm">
+            <span class="text-foreground font-medium">合计：</span>
+            <div class="flex space-x-4">
+              <span>
+                合计收款：{{ erpPriceInputFormatter(summaries.totalPrice) }}
+              </span>
+              <span>
+                已收金额：{{ erpPriceInputFormatter(summaries.receiptedPrice) }}
+              </span>
+              <span>
+                本次收款：
+                {{ erpPriceInputFormatter(summaries.receiptPrice) }}
+              </span>
+            </div>
           </div>
         </div>
-      </div>
-      <TableAction
-        v-if="!disabled"
-        class="mt-2 flex justify-center"
-        :actions="[
-          {
-            label: '添加销售出库单',
-            type: 'default',
-            onClick: handleOpenSaleOut,
-          },
-          {
-            label: '添加销售退货单',
-            type: 'default',
-            onClick: handleOpenSaleReturn,
-          },
-        ]"
-      />
-    </template>
-  </Grid>
+        <TableAction
+          v-if="!disabled"
+          class="mt-2 flex justify-center"
+          :actions="[
+            {
+              label: '添加销售出库单',
+              type: 'default',
+              onClick: handleOpenSaleOut,
+            },
+            {
+              label: '添加销售退货单',
+              type: 'default',
+              onClick: handleOpenSaleReturn,
+            },
+          ]"
+        />
+      </template>
+    </Grid>
 
-  <!-- 销售出库单选择组件 -->
-  <SaleOutSelect ref="saleOutSelectRef" @success="handleAddSaleOut" />
-  <!-- 销售退货单选择组件 -->
-  <SaleReturnSelect ref="saleReturnSelectRef" @success="handleAddSaleReturn" />
+    <!-- 销售出库单选择组件 -->
+    <SaleOutSelect ref="saleOutSelectRef" @success="handleAddSaleOut" />
+    <!-- 销售退货单选择组件 -->
+    <SaleReturnSelect
+      ref="saleReturnSelectRef"
+      @success="handleAddSaleReturn"
+    />
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/erp/finance/receipt/modules/sale-out-select.vue b/apps/web-antd/src/views/erp/finance/receipt/modules/sale-out-select.vue
index 19d023125..21e793c8c 100644
--- a/apps/web-antd/src/views/erp/finance/receipt/modules/sale-out-select.vue
+++ b/apps/web-antd/src/views/erp/finance/receipt/modules/sale-out-select.vue
@@ -65,7 +65,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 打开弹窗 */
-const openModal = (id: number) => {
+function openModal(id: number) {
   // 重置数据
   customerId.value = id;
   open.value = true;
@@ -74,17 +74,17 @@ const openModal = (id: number) => {
   gridApi.formApi?.resetForm();
   gridApi.formApi?.setValues({ customerId: id });
   gridApi.query();
-};
+}
 
 /** 确认选择销售出库单 */
-const handleOk = () => {
+function handleOk() {
   if (selectedRows.value.length === 0) {
     message.warning('请选择要添加的销售出库单');
     return;
   }
   emit('success', selectedRows.value);
   open.value = false;
-};
+}
 
 defineExpose({ open: openModal });
 </script>
diff --git a/apps/web-antd/src/views/erp/finance/receipt/modules/sale-return-select.vue b/apps/web-antd/src/views/erp/finance/receipt/modules/sale-return-select.vue
index 8dfa97c3c..3ebd3f2d3 100644
--- a/apps/web-antd/src/views/erp/finance/receipt/modules/sale-return-select.vue
+++ b/apps/web-antd/src/views/erp/finance/receipt/modules/sale-return-select.vue
@@ -69,7 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 打开弹窗 */
-const openModal = (id: number) => {
+function openModal(id: number) {
   // 重置数据
   customerId.value = id;
   open.value = true;
@@ -78,17 +78,17 @@ const openModal = (id: number) => {
   gridApi.formApi?.resetForm();
   gridApi.formApi?.setValues({ customerId: id });
   gridApi.query();
-};
+}
 
 /** 确认选择销售退货单 */
-const handleOk = () => {
+function handleOk() {
   if (selectedRows.value.length === 0) {
     message.warning('请选择要添加的销售退货单');
     return;
   }
   emit('success', selectedRows.value);
   open.value = false;
-};
+}
 
 defineExpose({ open: openModal });
 </script>
diff --git a/apps/web-antd/src/views/erp/product/product/data.ts b/apps/web-antd/src/views/erp/product/product/data.ts
index e387f9908..23664dd5e 100644
--- a/apps/web-antd/src/views/erp/product/product/data.ts
+++ b/apps/web-antd/src/views/erp/product/product/data.ts
@@ -61,7 +61,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '单位',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getProductUnitSimpleList(),
+        api: getProductUnitSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择单位',
diff --git a/apps/web-antd/src/views/erp/purchase/in/data.ts b/apps/web-antd/src/views/erp/purchase/in/data.ts
index 3853258cf..9afdb4f39 100644
--- a/apps/web-antd/src/views/erp/purchase/in/data.ts
+++ b/apps/web-antd/src/views/erp/purchase/in/data.ts
@@ -66,7 +66,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择供应商',
         allowClear: true,
         showSearch: true,
-        api: () => getSupplierSimpleList(),
+        api: getSupplierSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -174,7 +174,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择结算账户',
         allowClear: true,
         showSearch: true,
-        api: () => getAccountSimpleList(),
+        api: getAccountSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -319,7 +319,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -341,7 +341,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择供应商',
         allowClear: true,
         showSearch: true,
-        api: () => getSupplierSimpleList(),
+        api: getSupplierSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -354,7 +354,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择仓库',
         allowClear: true,
         showSearch: true,
-        api: () => getWarehouseSimpleList(),
+        api: getWarehouseSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -367,7 +367,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择创建人',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -389,7 +389,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择结算账户',
         allowClear: true,
         showSearch: true,
-        api: () => getAccountSimpleList(),
+        api: getAccountSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -530,7 +530,7 @@ export function useOrderGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/purchase/in/modules/form.vue b/apps/web-antd/src/views/erp/purchase/in/modules/form.vue
index 029092f83..7aa3d5cf9 100644
--- a/apps/web-antd/src/views/erp/purchase/in/modules/form.vue
+++ b/apps/web-antd/src/views/erp/purchase/in/modules/form.vue
@@ -49,14 +49,15 @@ const formData = ref<
 const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
 const itemFormRef = ref<InstanceType<typeof ItemForm>>();
 
-/* eslint-disable unicorn/no-nested-ternary */
-const getTitle = computed(() =>
-  formType.value === 'create'
-    ? $t('ui.actionTitle.create', ['采购入库'])
-    : formType.value === 'edit'
-      ? $t('ui.actionTitle.edit', ['采购入库'])
-      : '采购入库详情',
-);
+const getTitle = computed(() => {
+  if (formType.value === 'create') {
+    return $t('ui.actionTitle.create', ['采购入库']);
+  } else if (formType.value === 'edit') {
+    return $t('ui.actionTitle.edit', ['采购入库']);
+  } else {
+    return '采购入库详情';
+  }
+});
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -170,7 +171,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      formData.value = {} as ErpPurchaseInApi.PurchaseIn;
       return;
     }
     // 加载数据
diff --git a/apps/web-antd/src/views/erp/purchase/in/modules/item-form.vue b/apps/web-antd/src/views/erp/purchase/in/modules/item-form.vue
index 45dce4380..a6415a62a 100644
--- a/apps/web-antd/src/views/erp/purchase/in/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/purchase/in/modules/item-form.vue
@@ -96,7 +96,7 @@ watch(
     await gridApi.grid.reloadData(tableData.value);
     // 更新表格列配置（目的：原数量、已入库动态列）
     const columns = useFormItemColumns(tableData.value);
-    await gridApi.grid.reloadColumn(columns);
+    await gridApi.grid.reloadColumn(columns || []);
   },
   {
     immediate: true,
@@ -140,14 +140,14 @@ function handleDelete(row: ErpPurchaseInApi.PurchaseInItem) {
 }
 
 /** 处理仓库变更 */
-const handleWarehouseChange = async (row: ErpPurchaseInApi.PurchaseInItem) => {
+async function handleWarehouseChange(row: ErpPurchaseInApi.PurchaseInItem) {
   const stockCount = await getWarehouseStockCount({
     productId: row.productId!,
     warehouseId: row.warehouseId!,
   });
   row.stockCount = stockCount || 0;
   handleRowChange(row);
-};
+}
 
 /** 处理行数据变更 */
 function handleRowChange(row: any) {
@@ -161,14 +161,14 @@ function handleRowChange(row: any) {
 }
 
 /** 初始化行数据 */
-const initRow = (row: ErpPurchaseInApi.PurchaseInItem): void => {
+function initRow(row: ErpPurchaseInApi.PurchaseInItem) {
   if (row.productPrice && row.count) {
     row.totalProductPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
     row.taxPrice =
       erpPriceMultiply(row.totalProductPrice, (row.taxPercent || 0) / 100) ?? 0;
     row.totalPrice = row.totalProductPrice + row.taxPrice;
   }
-};
+}
 
 /** 表单校验 */
 function validate() {
diff --git a/apps/web-antd/src/views/erp/purchase/in/modules/purchase-order-select.vue b/apps/web-antd/src/views/erp/purchase/in/modules/purchase-order-select.vue
index 2f28dc454..5e24a9b4a 100644
--- a/apps/web-antd/src/views/erp/purchase/in/modules/purchase-order-select.vue
+++ b/apps/web-antd/src/views/erp/purchase/in/modules/purchase-order-select.vue
@@ -78,40 +78,42 @@ function handleSelectOrder(selectOrder: ErpPurchaseOrderApi.PurchaseOrder) {
 }
 
 /** 确认选择采购订单 */
-const handleOk = () => {
+function handleOk() {
   if (!order.value) {
     message.warning('请选择一个采购订单');
     return;
   }
   emit('update:order', order.value);
   open.value = false;
-};
+}
 </script>
 
 <template>
-  <Input
-    readonly
-    :value="orderNo"
-    :disabled="disabled"
-    @click="() => !disabled && (open = true)"
-  >
-    <template #addonAfter>
-      <div>
-        <IconifyIcon
-          class="h-full w-6 cursor-pointer"
-          icon="ant-design:setting-outlined"
-          :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
-          @click="() => !disabled && (open = true)"
-        />
-      </div>
-    </template>
-  </Input>
-  <Modal
-    class="!w-[50vw]"
-    v-model:open="open"
-    title="选择关联订单"
-    @ok="handleOk"
-  >
-    <Grid class="max-h-[600px]" table-title="采购订单列表(仅展示可退货)" />
-  </Modal>
+  <div>
+    <Input
+      readonly
+      :value="orderNo"
+      :disabled="disabled"
+      @click="() => !disabled && (open = true)"
+    >
+      <template #addonAfter>
+        <div>
+          <IconifyIcon
+            class="h-full w-6 cursor-pointer"
+            icon="ant-design:setting-outlined"
+            :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
+            @click="() => !disabled && (open = true)"
+          />
+        </div>
+      </template>
+    </Input>
+    <Modal
+      class="!w-[50vw]"
+      v-model:open="open"
+      title="选择关联订单"
+      @ok="handleOk"
+    >
+      <Grid class="max-h-[600px]" table-title="采购订单列表(仅展示可退货)" />
+    </Modal>
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/erp/purchase/order/data.ts b/apps/web-antd/src/views/erp/purchase/order/data.ts
index f6d3760e7..254d41e87 100644
--- a/apps/web-antd/src/views/erp/purchase/order/data.ts
+++ b/apps/web-antd/src/views/erp/purchase/order/data.ts
@@ -52,7 +52,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择供应商',
         allowClear: true,
         showSearch: true,
-        api: () => getSupplierSimpleList(),
+        api: getSupplierSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -140,7 +140,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择结算账户',
         allowClear: true,
         showSearch: true,
-        api: () => getAccountSimpleList(),
+        api: getAccountSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -261,7 +261,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -283,7 +283,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择供应商',
         allowClear: true,
         showSearch: true,
-        api: () => getSupplierSimpleList(),
+        api: getSupplierSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -296,7 +296,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择创建人',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/purchase/order/modules/form.vue b/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
index 2fa57d413..cdd036f62 100644
--- a/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
@@ -24,14 +24,15 @@ const formData = ref<ErpPurchaseOrderApi.PurchaseOrder>();
 const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
 const itemFormRef = ref<InstanceType<typeof PurchaseOrderItemForm>>();
 
-/* eslint-disable unicorn/no-nested-ternary */
-const getTitle = computed(() =>
-  formType.value === 'create'
-    ? $t('ui.actionTitle.create', ['采购订单'])
-    : formType.value === 'update'
-      ? $t('ui.actionTitle.edit', ['采购订单'])
-      : '采购订单详情',
-);
+const getTitle = computed(() => {
+  if (formType.value === 'create') {
+    return $t('ui.actionTitle.create', ['采购订单']);
+  } else if (formType.value === 'edit') {
+    return $t('ui.actionTitle.edit', ['采购订单']);
+  } else {
+    return '采购订单详情';
+  }
+});
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -53,27 +54,27 @@ const [Form, formApi] = useVbenForm({
 });
 
 /** 更新采购订单项 */
-const handleUpdateItems = (items: ErpPurchaseOrderApi.PurchaseOrderItem[]) => {
+function handleUpdateItems(items: ErpPurchaseOrderApi.PurchaseOrderItem[]) {
   formData.value = modalApi.getData<ErpPurchaseOrderApi.PurchaseOrder>();
   formData.value.items = items;
   formApi.setValues({
     items,
   });
-};
+}
 
 /** 更新优惠金额 */
-const handleUpdateDiscountPrice = (discountPrice: number) => {
+function handleUpdateDiscountPrice(discountPrice: number) {
   formApi.setValues({
     discountPrice,
   });
-};
+}
 
 /** 更新总金额 */
-const handleUpdateTotalPrice = (totalPrice: number) => {
+function handleUpdateTotalPrice(totalPrice: number) {
   formApi.setValues({
     totalPrice,
   });
-};
+}
 
 /** 创建或更新采购订单 */
 const [Modal, modalApi] = useVbenModal({
diff --git a/apps/web-antd/src/views/erp/purchase/order/modules/item-form.vue b/apps/web-antd/src/views/erp/purchase/order/modules/item-form.vue
index 9f4e840a0..f48897a5d 100644
--- a/apps/web-antd/src/views/erp/purchase/order/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/modules/item-form.vue
@@ -179,14 +179,14 @@ function handleRowChange(row: any) {
 }
 
 /** 初始化行数据 */
-const initRow = (row: ErpPurchaseOrderApi.PurchaseOrderItem): void => {
+function initRow(row: ErpPurchaseOrderApi.PurchaseOrderItem) {
   if (row.productPrice && row.count) {
     row.totalProductPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
     row.taxPrice =
       erpPriceMultiply(row.totalProductPrice, (row.taxPercent || 0) / 100) ?? 0;
     row.totalPrice = row.totalProductPrice + row.taxPrice;
   }
-};
+}
 
 /** 表单校验 */
 function validate() {
diff --git a/apps/web-antd/src/views/erp/purchase/return/data.ts b/apps/web-antd/src/views/erp/purchase/return/data.ts
index 88ec806df..61cd082f0 100644
--- a/apps/web-antd/src/views/erp/purchase/return/data.ts
+++ b/apps/web-antd/src/views/erp/purchase/return/data.ts
@@ -66,7 +66,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择供应商',
         allowClear: true,
         showSearch: true,
-        api: () => getSupplierSimpleList(),
+        api: getSupplierSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -173,7 +173,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择结算账户',
         allowClear: true,
         showSearch: true,
-        api: () => getAccountSimpleList(),
+        api: getAccountSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -319,7 +319,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -341,7 +341,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择供应商',
         allowClear: true,
         showSearch: true,
-        api: () => getSupplierSimpleList(),
+        api: getSupplierSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -354,7 +354,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择仓库',
         allowClear: true,
         showSearch: true,
-        api: () => getWarehouseSimpleList(),
+        api: getWarehouseSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -367,7 +367,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择创建人',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -516,7 +516,7 @@ export function useOrderGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/purchase/return/modules/form.vue b/apps/web-antd/src/views/erp/purchase/return/modules/form.vue
index 0c22f38de..65d5834b3 100644
--- a/apps/web-antd/src/views/erp/purchase/return/modules/form.vue
+++ b/apps/web-antd/src/views/erp/purchase/return/modules/form.vue
@@ -83,38 +83,36 @@ const [Form, formApi] = useVbenForm({
 });
 
 /** 更新采购退货项 */
-const handleUpdateItems = (
-  items: ErpPurchaseReturnApi.PurchaseReturnItem[],
-) => {
+function handleUpdateItems(items: ErpPurchaseReturnApi.PurchaseReturnItem[]) {
   formData.value.items = items;
   formApi.setValues({
     items,
   });
-};
+}
 
 /** 更新其他费用 */
-const handleUpdateOtherPrice = (otherPrice: number) => {
+function handleUpdateOtherPrice(otherPrice: number) {
   formApi.setValues({
     otherPrice,
   });
-};
+}
 
 /** 更新优惠金额 */
-const handleUpdateDiscountPrice = (discountPrice: number) => {
+function handleUpdateDiscountPrice(discountPrice: number) {
   formApi.setValues({
     discountPrice,
   });
-};
+}
 
 /** 更新总金额 */
-const handleUpdateTotalPrice = (totalPrice: number) => {
+function handleUpdateTotalPrice(totalPrice: number) {
   formApi.setValues({
     totalPrice,
   });
-};
+}
 
 /** 选择采购订单 */
-const handleUpdateOrder = (order: ErpPurchaseOrderApi.PurchaseOrder) => {
+function handleUpdateOrder(order: ErpPurchaseOrderApi.PurchaseOrder) {
   formData.value = {
     ...formData.value,
     orderId: order.id,
@@ -136,7 +134,7 @@ const handleUpdateOrder = (order: ErpPurchaseOrderApi.PurchaseOrder) => {
     (item) => item.count && item.count > 0,
   ) as ErpPurchaseReturnApi.PurchaseReturnItem[];
   formApi.setValues(formData.value, false);
-};
+}
 
 /** 创建或更新采购退货 */
 const [Modal, modalApi] = useVbenModal({
@@ -173,7 +171,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      formData.value = {} as ErpPurchaseReturnApi.PurchaseReturn;
       return;
     }
     // 加载数据
diff --git a/apps/web-antd/src/views/erp/purchase/return/modules/item-form.vue b/apps/web-antd/src/views/erp/purchase/return/modules/item-form.vue
index 818b2f1c7..3c44718bd 100644
--- a/apps/web-antd/src/views/erp/purchase/return/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/purchase/return/modules/item-form.vue
@@ -96,7 +96,7 @@ watch(
     await gridApi.grid.reloadData(tableData.value);
     // 更新表格列配置（目的：已入库、已退货动态列）
     const columns = useFormItemColumns(tableData.value);
-    await gridApi.grid.reloadColumn(columns);
+    await gridApi.grid.reloadColumn(columns || []);
   },
   {
     immediate: true,
@@ -140,16 +140,16 @@ function handleDelete(row: ErpPurchaseReturnApi.PurchaseReturnItem) {
 }
 
 /** 处理仓库变更 */
-const handleWarehouseChange = async (
+async function handleWarehouseChange(
   row: ErpPurchaseReturnApi.PurchaseReturnItem,
-) => {
+) {
   const stockCount = await getWarehouseStockCount({
     productId: row.productId!,
     warehouseId: row.warehouseId!,
   });
   row.stockCount = stockCount || 0;
   handleRowChange(row);
-};
+}
 
 /** 处理行数据变更 */
 function handleRowChange(row: any) {
@@ -163,14 +163,14 @@ function handleRowChange(row: any) {
 }
 
 /** 初始化行数据 */
-const initRow = (row: ErpPurchaseReturnApi.PurchaseReturnItem): void => {
+function initRow(row: ErpPurchaseReturnApi.PurchaseReturnItem) {
   if (row.productPrice && row.count) {
     row.totalProductPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
     row.taxPrice =
       erpPriceMultiply(row.totalProductPrice, (row.taxPercent || 0) / 100) ?? 0;
     row.totalPrice = row.totalProductPrice + row.taxPrice;
   }
-};
+}
 
 /** 表单校验 */
 function validate() {
diff --git a/apps/web-antd/src/views/erp/purchase/return/modules/purchase-order-select.vue b/apps/web-antd/src/views/erp/purchase/return/modules/purchase-order-select.vue
index 45b0ec65b..188ef9116 100644
--- a/apps/web-antd/src/views/erp/purchase/return/modules/purchase-order-select.vue
+++ b/apps/web-antd/src/views/erp/purchase/return/modules/purchase-order-select.vue
@@ -78,40 +78,42 @@ function handleSelectOrder(selectOrder: ErpPurchaseOrderApi.PurchaseOrder) {
 }
 
 /** 确认选择采购订单 */
-const handleOk = () => {
+function handleOk() {
   if (!order.value) {
     message.warning('请选择一个采购订单');
     return;
   }
   emit('update:order', order.value);
   open.value = false;
-};
+}
 </script>
 
 <template>
-  <Input
-    readonly
-    :value="orderNo"
-    :disabled="disabled"
-    @click="() => !disabled && (open = true)"
-  >
-    <template #addonAfter>
-      <div>
-        <IconifyIcon
-          class="h-full w-6 cursor-pointer"
-          icon="ant-design:setting-outlined"
-          :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
-          @click="() => !disabled && (open = true)"
-        />
-      </div>
-    </template>
-  </Input>
-  <Modal
-    class="!w-[50vw]"
-    v-model:open="open"
-    title="选择关联订单"
-    @ok="handleOk"
-  >
-    <Grid class="max-h-[600px]" table-title="采购订单列表(仅展示可退货)" />
-  </Modal>
+  <div>
+    <Input
+      readonly
+      :value="orderNo"
+      :disabled="disabled"
+      @click="() => !disabled && (open = true)"
+    >
+      <template #addonAfter>
+        <div>
+          <IconifyIcon
+            class="h-full w-6 cursor-pointer"
+            icon="ant-design:setting-outlined"
+            :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
+            @click="() => !disabled && (open = true)"
+          />
+        </div>
+      </template>
+    </Input>
+    <Modal
+      class="!w-[50vw]"
+      v-model:open="open"
+      title="选择关联订单"
+      @ok="handleOk"
+    >
+      <Grid class="max-h-[600px]" table-title="采购订单列表(仅展示可退货)" />
+    </Modal>
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/erp/sale/order/data.ts b/apps/web-antd/src/views/erp/sale/order/data.ts
index f86880c1a..03f0686a1 100644
--- a/apps/web-antd/src/views/erp/sale/order/data.ts
+++ b/apps/web-antd/src/views/erp/sale/order/data.ts
@@ -52,7 +52,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择客户',
         allowClear: true,
         showSearch: true,
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -66,7 +66,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择销售人员',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -153,7 +153,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择结算账户',
         allowClear: true,
         showSearch: true,
-        api: () => getAccountSimpleList(),
+        api: getAccountSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -275,7 +275,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -297,7 +297,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择客户',
         allowClear: true,
         showSearch: true,
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -310,7 +310,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择创建人',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/sale/order/modules/form.vue b/apps/web-antd/src/views/erp/sale/order/modules/form.vue
index 94ec1aeeb..b5d306aed 100644
--- a/apps/web-antd/src/views/erp/sale/order/modules/form.vue
+++ b/apps/web-antd/src/views/erp/sale/order/modules/form.vue
@@ -24,14 +24,15 @@ const formData = ref<ErpSaleOrderApi.SaleOrder>();
 const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
 const itemFormRef = ref<InstanceType<typeof ItemForm>>();
 
-/* eslint-disable unicorn/no-nested-ternary */
-const getTitle = computed(() =>
-  formType.value === 'create'
-    ? $t('ui.actionTitle.create', ['销售订单'])
-    : formType.value === 'edit'
-      ? $t('ui.actionTitle.edit', ['销售订单'])
-      : '销售订单详情',
-);
+const getTitle = computed(() => {
+  if (formType.value === 'create') {
+    return $t('ui.actionTitle.create', ['销售订单']);
+  } else if (formType.value === 'edit') {
+    return $t('ui.actionTitle.edit', ['销售订单']);
+  } else {
+    return '销售订单详情';
+  }
+});
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -53,27 +54,27 @@ const [Form, formApi] = useVbenForm({
 });
 
 /** 更新销售订单项 */
-const handleUpdateItems = (items: ErpSaleOrderApi.SaleOrderItem[]) => {
+function handleUpdateItems(items: ErpSaleOrderApi.SaleOrderItem[]) {
   formData.value = modalApi.getData<ErpSaleOrderApi.SaleOrder>();
   formData.value.items = items;
   formApi.setValues({
     items,
   });
-};
+}
 
 /** 更新优惠金额 */
-const handleUpdateDiscountPrice = (discountPrice: number) => {
+function handleUpdateDiscountPrice(discountPrice: number) {
   formApi.setValues({
     discountPrice,
   });
-};
+}
 
 /** 更新总金额 */
-const handleUpdateTotalPrice = (totalPrice: number) => {
+function handleUpdateTotalPrice(totalPrice: number) {
   formApi.setValues({
     totalPrice,
   });
-};
+}
 
 /** 创建或更新销售订单 */
 const [Modal, modalApi] = useVbenModal({
diff --git a/apps/web-antd/src/views/erp/sale/order/modules/item-form.vue b/apps/web-antd/src/views/erp/sale/order/modules/item-form.vue
index 1f28a74e2..fc8bba129 100644
--- a/apps/web-antd/src/views/erp/sale/order/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/sale/order/modules/item-form.vue
@@ -179,14 +179,14 @@ function handleRowChange(row: any) {
 }
 
 /** 初始化行数据 */
-const initRow = (row: ErpSaleOrderApi.SaleOrderItem): void => {
+function initRow(row: ErpSaleOrderApi.SaleOrderItem) {
   if (row.productPrice && row.count) {
     row.totalProductPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
     row.taxPrice =
       erpPriceMultiply(row.totalProductPrice, (row.taxPercent || 0) / 100) ?? 0;
     row.totalPrice = row.totalProductPrice + row.taxPrice;
   }
-};
+}
 
 /** 表单校验 */
 function validate() {
diff --git a/apps/web-antd/src/views/erp/sale/out/data.ts b/apps/web-antd/src/views/erp/sale/out/data.ts
index 3d095856c..54e0f56d0 100644
--- a/apps/web-antd/src/views/erp/sale/out/data.ts
+++ b/apps/web-antd/src/views/erp/sale/out/data.ts
@@ -544,7 +544,7 @@ export function useOrderGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/sale/out/modules/form.vue b/apps/web-antd/src/views/erp/sale/out/modules/form.vue
index 7c30275a2..adaf59c83 100644
--- a/apps/web-antd/src/views/erp/sale/out/modules/form.vue
+++ b/apps/web-antd/src/views/erp/sale/out/modules/form.vue
@@ -79,36 +79,36 @@ const [Form, formApi] = useVbenForm({
 });
 
 /** 更新销售出库项 */
-const handleUpdateItems = (items: ErpSaleOutApi.SaleOutItem[]) => {
+function handleUpdateItems(items: ErpSaleOutApi.SaleOutItem[]) {
   formData.value.items = items;
   formApi.setValues({
     items,
   });
-};
+}
 
 /** 更新其他费用 */
-const handleUpdateOtherPrice = (otherPrice: number) => {
+function handleUpdateOtherPrice(otherPrice: number) {
   formApi.setValues({
     otherPrice,
   });
-};
+}
 
 /** 更新优惠金额 */
-const handleUpdateDiscountPrice = (discountPrice: number) => {
+function handleUpdateDiscountPrice(discountPrice: number) {
   formApi.setValues({
     discountPrice,
   });
-};
+}
 
 /** 更新总金额 */
-const handleUpdateTotalPrice = (totalPrice: number) => {
+function handleUpdateTotalPrice(totalPrice: number) {
   formApi.setValues({
     totalPrice,
   });
-};
+}
 
 /** 选择销售订单 */
-const handleUpdateOrder = (order: ErpSaleOrderApi.SaleOrder) => {
+function handleUpdateOrder(order: ErpSaleOrderApi.SaleOrder) {
   formData.value = {
     ...formData.value,
     orderId: order.id,
@@ -130,7 +130,7 @@ const handleUpdateOrder = (order: ErpSaleOrderApi.SaleOrder) => {
     (item) => item.count && item.count > 0,
   ) as ErpSaleOutApi.SaleOutItem[];
   formApi.setValues(formData.value, false);
-};
+}
 
 /** 创建或更新销售出库 */
 const [Modal, modalApi] = useVbenModal({
@@ -166,7 +166,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      formData.value = {} as ErpSaleOutApi.SaleOut;
       return;
     }
     // 加载数据
diff --git a/apps/web-antd/src/views/erp/sale/out/modules/item-form.vue b/apps/web-antd/src/views/erp/sale/out/modules/item-form.vue
index f7f3011b0..4e79e6e38 100644
--- a/apps/web-antd/src/views/erp/sale/out/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/sale/out/modules/item-form.vue
@@ -96,7 +96,7 @@ watch(
     await gridApi.grid.reloadData(tableData.value);
     // 更新表格列配置（目的：原数量、已出库动态列）
     const columns = useFormItemColumns(tableData.value);
-    await gridApi.grid.reloadColumn(columns);
+    await gridApi.grid.reloadColumn(columns || []);
   },
   {
     immediate: true,
@@ -140,14 +140,14 @@ function handleDelete(row: ErpSaleOutApi.SaleOutItem) {
 }
 
 /** 处理仓库变更 */
-const handleWarehouseChange = async (row: ErpSaleOutApi.SaleOutItem) => {
+async function handleWarehouseChange(row: ErpSaleOutApi.SaleOutItem) {
   const stockCount = await getWarehouseStockCount({
     productId: row.productId!,
     warehouseId: row.warehouseId!,
   });
   row.stockCount = stockCount || 0;
   handleRowChange(row);
-};
+}
 
 /** 处理行数据变更 */
 function handleRowChange(row: any) {
@@ -161,14 +161,14 @@ function handleRowChange(row: any) {
 }
 
 /** 初始化行数据 */
-const initRow = (row: ErpSaleOutApi.SaleOutItem): void => {
+function initRow(row: ErpSaleOutApi.SaleOutItem) {
   if (row.productPrice && row.count) {
     row.totalProductPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
     row.taxPrice =
       erpPriceMultiply(row.totalProductPrice, (row.taxPercent || 0) / 100) ?? 0;
     row.totalPrice = row.totalProductPrice + row.taxPrice;
   }
-};
+}
 
 /** 表单校验 */
 function validate() {
diff --git a/apps/web-antd/src/views/erp/sale/out/modules/sale-order-select.vue b/apps/web-antd/src/views/erp/sale/out/modules/sale-order-select.vue
index 1a3c8b368..9d6b40ba7 100644
--- a/apps/web-antd/src/views/erp/sale/out/modules/sale-order-select.vue
+++ b/apps/web-antd/src/views/erp/sale/out/modules/sale-order-select.vue
@@ -78,40 +78,42 @@ function handleSelectOrder(selectOrder: ErpSaleOrderApi.SaleOrder) {
 }
 
 /** 确认选择销售订单 */
-const handleOk = () => {
+function handleOk() {
   if (!order.value) {
     message.warning('请选择一个销售订单');
     return;
   }
   emit('update:order', order.value);
   open.value = false;
-};
+}
 </script>
 
 <template>
-  <Input
-    readonly
-    :value="orderNo"
-    :disabled="disabled"
-    @click="() => !disabled && (open = true)"
-  >
-    <template #addonAfter>
-      <div>
-        <IconifyIcon
-          class="h-full w-6 cursor-pointer"
-          icon="ant-design:setting-outlined"
-          :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
-          @click="() => !disabled && (open = true)"
-        />
-      </div>
-    </template>
-  </Input>
-  <Modal
-    class="!w-[50vw]"
-    v-model:open="open"
-    title="选择关联订单"
-    @ok="handleOk"
-  >
-    <Grid class="max-h-[600px]" table-title="销售订单列表(仅展示可出库)" />
-  </Modal>
+  <div>
+    <Input
+      readonly
+      :value="orderNo"
+      :disabled="disabled"
+      @click="() => !disabled && (open = true)"
+    >
+      <template #addonAfter>
+        <div>
+          <IconifyIcon
+            class="h-full w-6 cursor-pointer"
+            icon="ant-design:setting-outlined"
+            :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
+            @click="() => !disabled && (open = true)"
+          />
+        </div>
+      </template>
+    </Input>
+    <Modal
+      class="!w-[50vw]"
+      v-model:open="open"
+      title="选择关联订单"
+      @ok="handleOk"
+    >
+      <Grid class="max-h-[600px]" table-title="销售订单列表(仅展示可出库)" />
+    </Modal>
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/erp/sale/return/data.ts b/apps/web-antd/src/views/erp/sale/return/data.ts
index 00501ce73..47540944f 100644
--- a/apps/web-antd/src/views/erp/sale/return/data.ts
+++ b/apps/web-antd/src/views/erp/sale/return/data.ts
@@ -66,7 +66,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择客户',
         allowClear: true,
         showSearch: true,
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -80,7 +80,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择销售人员',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -187,7 +187,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         disabled: true,
         allowClear: true,
         showSearch: true,
-        api: () => getAccountSimpleList(),
+        api: getAccountSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -333,7 +333,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -355,7 +355,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择客户',
         allowClear: true,
         showSearch: true,
-        api: () => getCustomerSimpleList(),
+        api: getCustomerSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -368,7 +368,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择仓库',
         allowClear: true,
         showSearch: true,
-        api: () => getWarehouseSimpleList(),
+        api: getWarehouseSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -381,7 +381,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择创建人',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
@@ -531,7 +531,7 @@ export function useOrderGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/sale/return/modules/form.vue b/apps/web-antd/src/views/erp/sale/return/modules/form.vue
index 3a9146a03..c8c12ecf0 100644
--- a/apps/web-antd/src/views/erp/sale/return/modules/form.vue
+++ b/apps/web-antd/src/views/erp/sale/return/modules/form.vue
@@ -49,14 +49,15 @@ const formData = ref<
 const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
 const itemFormRef = ref<InstanceType<typeof ItemForm>>();
 
-/* eslint-disable unicorn/no-nested-ternary */
-const getTitle = computed(() =>
-  formType.value === 'create'
-    ? $t('ui.actionTitle.create', ['销售退货'])
-    : formType.value === 'edit'
-      ? $t('ui.actionTitle.edit', ['销售退货'])
-      : '销售退货详情',
-);
+const getTitle = computed(() => {
+  if (formType.value === 'create') {
+    return $t('ui.actionTitle.create', ['销售退货']);
+  } else if (formType.value === 'edit') {
+    return $t('ui.actionTitle.edit', ['销售退货']);
+  } else {
+    return '销售退货详情';
+  }
+});
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -83,36 +84,36 @@ const [Form, formApi] = useVbenForm({
 });
 
 /** 更新销售退货项 */
-const handleUpdateItems = (items: ErpSaleReturnApi.SaleReturnItem[]) => {
+function handleUpdateItems(items: ErpSaleReturnApi.SaleReturnItem[]) {
   formData.value.items = items;
   formApi.setValues({
     items,
   });
-};
+}
 
 /** 更新其他费用 */
-const handleUpdateOtherPrice = (otherPrice: number) => {
+function handleUpdateOtherPrice(otherPrice: number) {
   formApi.setValues({
     otherPrice,
   });
-};
+}
 
 /** 更新优惠金额 */
-const handleUpdateDiscountPrice = (discountPrice: number) => {
+function handleUpdateDiscountPrice(discountPrice: number) {
   formApi.setValues({
     discountPrice,
   });
-};
+}
 
 /** 更新总金额 */
-const handleUpdateTotalPrice = (totalPrice: number) => {
+function handleUpdateTotalPrice(totalPrice: number) {
   formApi.setValues({
     totalPrice,
   });
-};
+}
 
 /** 选择销售订单 */
-const handleUpdateOrder = (order: ErpSaleOrderApi.SaleOrder) => {
+function handleUpdateOrder(order: ErpSaleOrderApi.SaleOrder) {
   formData.value = {
     ...formData.value,
     orderId: order.id,
@@ -134,7 +135,7 @@ const handleUpdateOrder = (order: ErpSaleOrderApi.SaleOrder) => {
     (item) => item.count && item.count > 0,
   ) as ErpSaleReturnApi.SaleReturnItem[];
   formApi.setValues(formData.value, false);
-};
+}
 
 /** 创建或更新销售退货 */
 const [Modal, modalApi] = useVbenModal({
@@ -170,7 +171,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      formData.value = {} as ErpSaleReturnApi.SaleReturn;
       return;
     }
     // 加载数据
diff --git a/apps/web-antd/src/views/erp/sale/return/modules/item-form.vue b/apps/web-antd/src/views/erp/sale/return/modules/item-form.vue
index 9259eb432..e07fe8a49 100644
--- a/apps/web-antd/src/views/erp/sale/return/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/sale/return/modules/item-form.vue
@@ -96,7 +96,7 @@ watch(
     await gridApi.grid.reloadData(tableData.value);
     // 更新表格列配置（目的：已出库、已出库动态列）
     const columns = useFormItemColumns(tableData.value);
-    await gridApi.grid.reloadColumn(columns);
+    await gridApi.grid.reloadColumn(columns || []);
   },
   {
     immediate: true,
@@ -140,14 +140,14 @@ function handleDelete(row: ErpSaleReturnApi.SaleReturnItem) {
 }
 
 /** 处理仓库变更 */
-const handleWarehouseChange = async (row: ErpSaleReturnApi.SaleReturnItem) => {
+async function handleWarehouseChange(row: ErpSaleReturnApi.SaleReturnItem) {
   const stockCount = await getWarehouseStockCount({
     productId: row.productId!,
     warehouseId: row.warehouseId!,
   });
   row.stockCount = stockCount || 0;
   handleRowChange(row);
-};
+}
 
 /** 处理行数据变更 */
 function handleRowChange(row: any) {
@@ -161,14 +161,14 @@ function handleRowChange(row: any) {
 }
 
 /** 初始化行数据 */
-const initRow = (row: ErpSaleReturnApi.SaleReturnItem): void => {
+function initRow(row: ErpSaleReturnApi.SaleReturnItem) {
   if (row.productPrice && row.count) {
     row.totalProductPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
     row.taxPrice =
       erpPriceMultiply(row.totalProductPrice, (row.taxPercent || 0) / 100) ?? 0;
     row.totalPrice = row.totalProductPrice + row.taxPrice;
   }
-};
+}
 
 /** 表单校验 */
 function validate() {
diff --git a/apps/web-antd/src/views/erp/sale/return/modules/sale-order-select.vue b/apps/web-antd/src/views/erp/sale/return/modules/sale-order-select.vue
index f7d18b7de..8a8ade7a4 100644
--- a/apps/web-antd/src/views/erp/sale/return/modules/sale-order-select.vue
+++ b/apps/web-antd/src/views/erp/sale/return/modules/sale-order-select.vue
@@ -78,40 +78,42 @@ function handleSelectOrder(selectOrder: ErpSaleOrderApi.SaleOrder) {
 }
 
 /** 确认选择销售订单 */
-const handleOk = () => {
+function handleOk() {
   if (!order.value) {
     message.warning('请选择一个销售订单');
     return;
   }
   emit('update:order', order.value);
   open.value = false;
-};
+}
 </script>
 
 <template>
-  <Input
-    readonly
-    :value="orderNo"
-    :disabled="disabled"
-    @click="() => !disabled && (open = true)"
-  >
-    <template #addonAfter>
-      <div>
-        <IconifyIcon
-          class="h-full w-6 cursor-pointer"
-          icon="ant-design:setting-outlined"
-          :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
-          @click="() => !disabled && (open = true)"
-        />
-      </div>
-    </template>
-  </Input>
-  <Modal
-    class="!w-[50vw]"
-    v-model:open="open"
-    title="选择关联订单"
-    @ok="handleOk"
-  >
-    <Grid class="max-h-[600px]" table-title="销售订单列表(仅展示可退货)" />
-  </Modal>
+  <div>
+    <Input
+      readonly
+      :value="orderNo"
+      :disabled="disabled"
+      @click="() => !disabled && (open = true)"
+    >
+      <template #addonAfter>
+        <div>
+          <IconifyIcon
+            class="h-full w-6 cursor-pointer"
+            icon="ant-design:setting-outlined"
+            :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
+            @click="() => !disabled && (open = true)"
+          />
+        </div>
+      </template>
+    </Input>
+    <Modal
+      class="!w-[50vw]"
+      v-model:open="open"
+      title="选择关联订单"
+      @ok="handleOk"
+    >
+      <Grid class="max-h-[600px]" table-title="销售订单列表(仅展示可退货)" />
+    </Modal>
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/erp/stock/check/data.ts b/apps/web-antd/src/views/erp/stock/check/data.ts
index 33176d8b2..91a101b5e 100644
--- a/apps/web-antd/src/views/erp/stock/check/data.ts
+++ b/apps/web-antd/src/views/erp/stock/check/data.ts
@@ -180,7 +180,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -202,7 +202,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择仓库',
         allowClear: true,
         showSearch: true,
-        api: () => getWarehouseSimpleList(),
+        api: getWarehouseSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -215,7 +215,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择创建人',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/stock/check/modules/form.vue b/apps/web-antd/src/views/erp/stock/check/modules/form.vue
index 96eb0c969..2bdcec37b 100644
--- a/apps/web-antd/src/views/erp/stock/check/modules/form.vue
+++ b/apps/web-antd/src/views/erp/stock/check/modules/form.vue
@@ -23,14 +23,15 @@ const formData = ref<ErpStockCheckApi.StockCheck>();
 const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
 const itemFormRef = ref<InstanceType<typeof ItemForm>>();
 
-/* eslint-disable unicorn/no-nested-ternary */
-const getTitle = computed(() =>
-  formType.value === 'create'
-    ? $t('ui.actionTitle.create', ['库存盘点单'])
-    : formType.value === 'edit'
-      ? $t('ui.actionTitle.edit', ['库存盘点单'])
-      : '库存盘点单详情',
-);
+const getTitle = computed(() => {
+  if (formType.value === 'create') {
+    return $t('ui.actionTitle.create', ['库存盘点单']);
+  } else if (formType.value === 'edit') {
+    return $t('ui.actionTitle.edit', ['库存盘点单']);
+  } else {
+    return '库存盘点单详情';
+  }
+});
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -46,13 +47,13 @@ const [Form, formApi] = useVbenForm({
 });
 
 /** 更新盘点单项 */
-const handleUpdateItems = (items: ErpStockCheckApi.StockCheckItem[]) => {
+function handleUpdateItems(items: ErpStockCheckApi.StockCheckItem[]) {
   formData.value = modalApi.getData<ErpStockCheckApi.StockCheck>();
   formData.value.items = items;
   formApi.setValues({
     items,
   });
-};
+}
 
 /** 创建或更新库存盘点单 */
 const [Modal, modalApi] = useVbenModal({
diff --git a/apps/web-antd/src/views/erp/stock/check/modules/item-form.vue b/apps/web-antd/src/views/erp/stock/check/modules/item-form.vue
index 472d8ec10..2a44ea909 100644
--- a/apps/web-antd/src/views/erp/stock/check/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/stock/check/modules/item-form.vue
@@ -174,11 +174,11 @@ function handleRowChange(row: any) {
 }
 
 /** 初始化行数据 */
-const initRow = (row: ErpStockCheckApi.StockCheckItem): void => {
+function initRow(row: ErpStockCheckApi.StockCheckItem) {
   if (row.productPrice && row.count) {
     row.totalPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
   }
-};
+}
 
 /** 表单校验 */
 function validate() {
diff --git a/apps/web-antd/src/views/erp/stock/in/data.ts b/apps/web-antd/src/views/erp/stock/in/data.ts
index e2ff7117c..e5d88528a 100644
--- a/apps/web-antd/src/views/erp/stock/in/data.ts
+++ b/apps/web-antd/src/views/erp/stock/in/data.ts
@@ -50,7 +50,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
         placeholder: '请选择供应商',
         allowClear: true,
         showSearch: true,
-        api: () => getSupplierSimpleList(),
+        api: getSupplierSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -187,7 +187,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -209,7 +209,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择供应商',
         allowClear: true,
         showSearch: true,
-        api: () => getSupplierSimpleList(),
+        api: getSupplierSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -222,7 +222,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择仓库',
         allowClear: true,
         showSearch: true,
-        api: () => getWarehouseSimpleList(),
+        api: getWarehouseSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -235,7 +235,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择创建人',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/stock/in/modules/form.vue b/apps/web-antd/src/views/erp/stock/in/modules/form.vue
index ee9984ce8..06b614032 100644
--- a/apps/web-antd/src/views/erp/stock/in/modules/form.vue
+++ b/apps/web-antd/src/views/erp/stock/in/modules/form.vue
@@ -19,14 +19,15 @@ const formData = ref<ErpStockInApi.StockIn>();
 const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
 const itemFormRef = ref<InstanceType<typeof ItemForm>>();
 
-/* eslint-disable unicorn/no-nested-ternary */
-const getTitle = computed(() =>
-  formType.value === 'create'
-    ? $t('ui.actionTitle.create', ['其它入库单'])
-    : formType.value === 'edit'
-      ? $t('ui.actionTitle.edit', ['其它入库单'])
-      : '其它入库单详情',
-);
+const getTitle = computed(() => {
+  if (formType.value === 'create') {
+    return $t('ui.actionTitle.create', ['其它入库单']);
+  } else if (formType.value === 'edit') {
+    return $t('ui.actionTitle.edit', ['其它入库单']);
+  } else {
+    return '其它入库单详情';
+  }
+});
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -42,13 +43,13 @@ const [Form, formApi] = useVbenForm({
 });
 
 /** 更新入库单项 */
-const handleUpdateItems = (items: ErpStockInApi.StockInItem[]) => {
+function handleUpdateItems(items: ErpStockInApi.StockInItem[]) {
   formData.value = modalApi.getData<ErpStockInApi.StockIn>();
   formData.value.items = items;
   formApi.setValues({
     items,
   });
-};
+}
 
 /** 创建或更新其它入库单 */
 const [Modal, modalApi] = useVbenModal({
diff --git a/apps/web-antd/src/views/erp/stock/in/modules/item-form.vue b/apps/web-antd/src/views/erp/stock/in/modules/item-form.vue
index 469c02686..b48a85421 100644
--- a/apps/web-antd/src/views/erp/stock/in/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/stock/in/modules/item-form.vue
@@ -160,11 +160,11 @@ function handleRowChange(row: any) {
 }
 
 /** 初始化行数据 */
-const initRow = (row: ErpStockInApi.StockInItem): void => {
+function initRow(row: ErpStockInApi.StockInItem) {
   if (row.productPrice && row.count) {
     row.totalPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
   }
-};
+}
 
 /** 表单校验 */
 function validate() {
diff --git a/apps/web-antd/src/views/erp/stock/move/data.ts b/apps/web-antd/src/views/erp/stock/move/data.ts
index fbc94a128..74c2db117 100644
--- a/apps/web-antd/src/views/erp/stock/move/data.ts
+++ b/apps/web-antd/src/views/erp/stock/move/data.ts
@@ -178,7 +178,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -200,7 +200,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择调出仓库',
         allowClear: true,
         showSearch: true,
-        api: () => getWarehouseSimpleList(),
+        api: getWarehouseSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -213,7 +213,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择调入仓库',
         allowClear: true,
         showSearch: true,
-        api: () => getWarehouseSimpleList(),
+        api: getWarehouseSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -226,7 +226,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择创建人',
         allowClear: true,
         showSearch: true,
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/stock/move/modules/form.vue b/apps/web-antd/src/views/erp/stock/move/modules/form.vue
index ba04b7533..772bc82f3 100644
--- a/apps/web-antd/src/views/erp/stock/move/modules/form.vue
+++ b/apps/web-antd/src/views/erp/stock/move/modules/form.vue
@@ -23,14 +23,15 @@ const formData = ref<ErpStockMoveApi.StockMove>();
 const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
 const itemFormRef = ref<InstanceType<typeof ItemForm>>();
 
-/* eslint-disable unicorn/no-nested-ternary */
-const getTitle = computed(() =>
-  formType.value === 'create'
-    ? $t('ui.actionTitle.create', ['库存调拨单'])
-    : formType.value === 'edit'
-      ? $t('ui.actionTitle.edit', ['库存调拨单'])
-      : '库存调拨单详情',
-);
+const getTitle = computed(() => {
+  if (formType.value === 'create') {
+    return $t('ui.actionTitle.create', ['库存调拨单']);
+  } else if (formType.value === 'edit') {
+    return $t('ui.actionTitle.edit', ['库存调拨单']);
+  } else {
+    return '库存调拨单详情';
+  }
+});
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -46,13 +47,13 @@ const [Form, formApi] = useVbenForm({
 });
 
 /** 更新调拨单项 */
-const handleUpdateItems = (items: ErpStockMoveApi.StockMoveItem[]) => {
+function handleUpdateItems(items: ErpStockMoveApi.StockMoveItem[]) {
   formData.value = modalApi.getData<ErpStockMoveApi.StockMove>();
   formData.value.items = items;
   formApi.setValues({
     items,
   });
-};
+}
 
 /** 创建或更新库存调拨单 */
 const [Modal, modalApi] = useVbenModal({
diff --git a/apps/web-antd/src/views/erp/stock/move/modules/item-form.vue b/apps/web-antd/src/views/erp/stock/move/modules/item-form.vue
index 5a3b45626..948a2073f 100644
--- a/apps/web-antd/src/views/erp/stock/move/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/stock/move/modules/item-form.vue
@@ -99,7 +99,7 @@ function handleAdd() {
     totalPrice: undefined,
     remark: undefined,
   };
-  tableData.value.push(newRow);
+  tableData.value.push(newRow as any);
   // 通知父组件更新
   emit('update:items', [...tableData.value]);
 }
@@ -169,11 +169,11 @@ function handleRowChange(row: any) {
 }
 
 /** 初始化行数据 */
-const initRow = (row: ErpStockMoveApi.StockMoveItem): void => {
+function initRow(row: ErpStockMoveApi.StockMoveItem) {
   if (row.productPrice && row.count) {
     row.totalPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
   }
-};
+}
 
 /** 表单校验 */
 function validate() {
diff --git a/apps/web-antd/src/views/erp/stock/out/modules/form.vue b/apps/web-antd/src/views/erp/stock/out/modules/form.vue
index d8ae8a448..3c900af97 100644
--- a/apps/web-antd/src/views/erp/stock/out/modules/form.vue
+++ b/apps/web-antd/src/views/erp/stock/out/modules/form.vue
@@ -23,14 +23,15 @@ const formData = ref<ErpStockOutApi.StockOut>();
 const formType = ref(''); // 表单类型：'create' | 'edit' | 'detail'
 const itemFormRef = ref<InstanceType<typeof ItemForm>>();
 
-/* eslint-disable unicorn/no-nested-ternary */
-const getTitle = computed(() =>
-  formType.value === 'create'
-    ? $t('ui.actionTitle.create', ['其它出库单'])
-    : formType.value === 'edit'
-      ? $t('ui.actionTitle.edit', ['其它出库单'])
-      : '其它出库单详情',
-);
+const getTitle = computed(() => {
+  if (formType.value === 'create') {
+    return $t('ui.actionTitle.create', ['其它出库单']);
+  } else if (formType.value === 'edit') {
+    return $t('ui.actionTitle.edit', ['其它出库单']);
+  } else {
+    return '其它出库单详情';
+  }
+});
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -46,13 +47,13 @@ const [Form, formApi] = useVbenForm({
 });
 
 /** 更新出库单项 */
-const handleUpdateItems = (items: ErpStockOutApi.StockOutItem[]) => {
+function handleUpdateItems(items: ErpStockOutApi.StockOutItem[]) {
   formData.value = modalApi.getData<ErpStockOutApi.StockOut>();
   formData.value.items = items;
   formApi.setValues({
     items,
   });
-};
+}
 
 /** 创建或更新其它出库单 */
 const [Modal, modalApi] = useVbenModal({
diff --git a/apps/web-antd/src/views/erp/stock/out/modules/item-form.vue b/apps/web-antd/src/views/erp/stock/out/modules/item-form.vue
index e8ade25ba..7578a45ef 100644
--- a/apps/web-antd/src/views/erp/stock/out/modules/item-form.vue
+++ b/apps/web-antd/src/views/erp/stock/out/modules/item-form.vue
@@ -98,7 +98,7 @@ function handleAdd() {
     totalPrice: undefined,
     remark: undefined,
   };
-  tableData.value.push(newRow);
+  tableData.value.push(newRow as any);
   // 通知父组件更新
   emit('update:items', [...tableData.value]);
 }
@@ -158,11 +158,11 @@ function handleRowChange(row: any) {
 }
 
 /** 初始化行数据 */
-const initRow = (row: ErpStockOutApi.StockOutItem): void => {
+function initRow(row: ErpStockOutApi.StockOutItem) {
   if (row.productPrice && row.count) {
     row.totalPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
   }
-};
+}
 
 /** 表单校验 */
 function validate() {
diff --git a/apps/web-antd/src/views/erp/stock/record/data.ts b/apps/web-antd/src/views/erp/stock/record/data.ts
index db0548c9a..e4e3d0ecd 100644
--- a/apps/web-antd/src/views/erp/stock/record/data.ts
+++ b/apps/web-antd/src/views/erp/stock/record/data.ts
@@ -19,7 +19,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -32,7 +32,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择仓库',
         allowClear: true,
         showSearch: true,
-        api: () => getWarehouseSimpleList(),
+        api: getWarehouseSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/stock/stock/data.ts b/apps/web-antd/src/views/erp/stock/stock/data.ts
index 71c9a1549..037bb9c45 100644
--- a/apps/web-antd/src/views/erp/stock/stock/data.ts
+++ b/apps/web-antd/src/views/erp/stock/stock/data.ts
@@ -15,7 +15,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
         allowClear: true,
         showSearch: true,
-        api: () => getProductSimpleList(),
+        api: getProductSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -28,7 +28,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择仓库',
         allowClear: true,
         showSearch: true,
-        api: () => getWarehouseSimpleList(),
+        api: getWarehouseSimpleList,
         labelField: 'name',
         valueField: 'id',
       },
diff --git a/apps/web-antd/src/views/erp/stock/warehouse/index.vue b/apps/web-antd/src/views/erp/stock/warehouse/index.vue
index 58d931ed2..ea59edce1 100644
--- a/apps/web-antd/src/views/erp/stock/warehouse/index.vue
+++ b/apps/web-antd/src/views/erp/stock/warehouse/index.vue
@@ -71,6 +71,7 @@ async function handleDefaultStatusChange(
       .then(async () => {
         // 更新默认状态
         await updateWarehouseDefaultStatus(row.id!, newStatus);
+        // 提示并返回成功
         message.success(`${text}默认成功`);
         resolve(true);
       })
diff --git a/apps/web-antd/src/views/infra/apiAccessLog/data.ts b/apps/web-antd/src/views/infra/apiAccessLog/data.ts
index d392df16f..73662e3a3 100644
--- a/apps/web-antd/src/views/infra/apiAccessLog/data.ts
+++ b/apps/web-antd/src/views/infra/apiAccessLog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraApiAccessLogApi } from '#/api/infra/api-access-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -181,10 +180,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userType',
       label: '用户类型',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.USER_TYPE,
-          value: data.userType,
+          value: val,
         });
       },
     },
@@ -197,10 +196,11 @@ export function useDetailSchema(): DescriptionItemSchema[] {
       label: '用户 UA',
     },
     {
+      field: 'requestMethod',
       label: '请求信息',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data?.requestMethod && data?.requestUrl) {
-          return `${data.requestMethod} ${data.requestUrl}`;
+      render: (val, data) => {
+        if (val && data?.requestUrl) {
+          return `${val} ${data.requestUrl}`;
         }
         return '';
       },
@@ -208,10 +208,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'requestParams',
       label: '请求参数',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data.requestParams) {
+      render: (val) => {
+        if (val) {
           return h(JsonViewer, {
-            value: JSON.parse(data.requestParams),
+            value: JSON.parse(val),
             previewMode: true,
           });
         }
@@ -224,26 +224,29 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     },
     {
       label: '请求时间',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data?.beginTime && data?.endTime) {
-          return `${formatDateTime(data.beginTime)} ~ ${formatDateTime(data.endTime)}`;
+      field: 'beginTime',
+      render: (val, data) => {
+        if (val && data?.endTime) {
+          return `${formatDateTime(val)} ~ ${formatDateTime(data.endTime)}`;
         }
         return '';
       },
     },
     {
       label: '请求耗时',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        return data?.duration ? `${data.duration} ms` : '';
+      field: 'duration',
+      render: (val) => {
+        return val ? `${val} ms` : '';
       },
     },
     {
       label: '操作结果',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data?.resultCode === 0) {
+      field: 'resultCode',
+      render: (val, data) => {
+        if (val === 0) {
           return '正常';
-        } else if (data && data.resultCode > 0) {
-          return `失败 | ${data.resultCode} | ${data.resultMsg}`;
+        } else if (val > 0 && data?.resultCode > 0) {
+          return `失败 | ${val} | ${data.resultMsg}`;
         }
         return '';
       },
@@ -259,10 +262,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'operateType',
       label: '操作类型',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_OPERATE_TYPE,
-          value: data?.operateType,
+          value: val,
         });
       },
     },
diff --git a/apps/web-antd/src/views/infra/apiAccessLog/modules/detail.vue b/apps/web-antd/src/views/infra/apiAccessLog/modules/detail.vue
index 061684f37..b3de99cc7 100644
--- a/apps/web-antd/src/views/infra/apiAccessLog/modules/detail.vue
+++ b/apps/web-antd/src/views/infra/apiAccessLog/modules/detail.vue
@@ -12,11 +12,9 @@ import { useDetailSchema } from '../data';
 const formData = ref<InfraApiAccessLogApi.ApiAccessLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    class: 'mx-4',
-  },
+  bordered: true,
+  column: 1,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/infra/apiErrorLog/data.ts b/apps/web-antd/src/views/infra/apiErrorLog/data.ts
index d716a42a7..1a8c545fe 100644
--- a/apps/web-antd/src/views/infra/apiErrorLog/data.ts
+++ b/apps/web-antd/src/views/infra/apiErrorLog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraApiErrorLogApi } from '#/api/infra/api-error-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -158,10 +157,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userType',
       label: '用户类型',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.USER_TYPE,
-          value: data.userType,
+          value: val,
         });
       },
     },
@@ -176,9 +175,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'requestMethod',
       label: '请求信息',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        if (data?.requestMethod && data?.requestUrl) {
-          return `${data.requestMethod} ${data.requestUrl}`;
+      render: (val, data) => {
+        if (val && data?.requestUrl) {
+          return `${val} ${data.requestUrl}`;
         }
         return '';
       },
@@ -186,10 +185,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'requestParams',
       label: '请求参数',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        if (data.requestParams) {
+      render: (val) => {
+        if (val) {
           return h(JsonViewer, {
-            value: JSON.parse(data.requestParams),
+            value: JSON.parse(val),
             previewMode: true,
           });
         }
@@ -199,8 +198,8 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'exceptionTime',
       label: '异常时间',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        return formatDateTime(data?.exceptionTime || '') as string;
+      render: (val) => {
+        return formatDateTime(val) as string;
       },
     },
     {
@@ -210,12 +209,11 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'exceptionStackTrace',
       label: '异常堆栈',
-      hidden: (data: InfraApiErrorLogApi.ApiErrorLog) =>
-        !data?.exceptionStackTrace,
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        if (data?.exceptionStackTrace) {
+      show: (val) => !val,
+      render: (val) => {
+        if (val) {
           return h('textarea', {
-            value: data.exceptionStackTrace,
+            value: val,
             style:
               'width: 100%; min-height: 200px; max-height: 400px; resize: vertical;',
             readonly: true,
@@ -227,24 +225,24 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'processStatus',
       label: '处理状态',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS,
-          value: data?.processStatus,
+          value: val,
         });
       },
     },
     {
       field: 'processUserId',
       label: '处理人',
-      hidden: (data: InfraApiErrorLogApi.ApiErrorLog) => !data?.processUserId,
+      show: (val) => !val,
     },
     {
       field: 'processTime',
       label: '处理时间',
-      hidden: (data: InfraApiErrorLogApi.ApiErrorLog) => !data?.processTime,
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        return formatDateTime(data?.processTime || '') as string;
+      show: (val) => !val,
+      render: (val) => {
+        return formatDateTime(val) as string;
       },
     },
   ];
diff --git a/apps/web-antd/src/views/infra/apiErrorLog/modules/detail.vue b/apps/web-antd/src/views/infra/apiErrorLog/modules/detail.vue
index 1e80fa37a..9c4e44c9f 100644
--- a/apps/web-antd/src/views/infra/apiErrorLog/modules/detail.vue
+++ b/apps/web-antd/src/views/infra/apiErrorLog/modules/detail.vue
@@ -12,11 +12,9 @@ import { useDetailSchema } from '../data';
 const formData = ref<InfraApiErrorLogApi.ApiErrorLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    class: 'mx-4',
-  },
+  bordered: true,
+  column: 1,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/infra/build/index.vue b/apps/web-antd/src/views/infra/build/index.vue
index 19b1e33bc..e56460b91 100644
--- a/apps/web-antd/src/views/infra/build/index.vue
+++ b/apps/web-antd/src/views/infra/build/index.vue
@@ -27,7 +27,7 @@ const designer = ref(); // 表单设计器
 const designerConfig = ref({
   switchType: [], // 是否可以切换组件类型,或者可以相互切换的字段
   autoActive: true, // 是否自动选中拖入的组件
-  useTemplate: false, // 是否生成vue2语法的模板组件
+  useTemplate: false, // 是否生成 Vue 语法的模板组件
   formOptions: {
     form: {
       labelWidth: '100px', // 设置默认的 label 宽度为 100px
diff --git a/apps/web-antd/src/views/infra/codegen/data.ts b/apps/web-antd/src/views/infra/codegen/data.ts
index 921d1256b..b07ea2a32 100644
--- a/apps/web-antd/src/views/infra/codegen/data.ts
+++ b/apps/web-antd/src/views/infra/codegen/data.ts
@@ -25,7 +25,7 @@ export function useImportTableFormSchema(): VbenFormSchema[] {
       label: '数据源',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getDataSourceConfigList(),
+        api: getDataSourceConfigList,
         labelField: 'name',
         valueField: 'id',
         autoSelect: 'first',
diff --git a/apps/web-antd/src/views/infra/codegen/edit/index.vue b/apps/web-antd/src/views/infra/codegen/edit/index.vue
index dd9878dd9..e443acc77 100644
--- a/apps/web-antd/src/views/infra/codegen/edit/index.vue
+++ b/apps/web-antd/src/views/infra/codegen/edit/index.vue
@@ -86,7 +86,7 @@ async function submitForm() {
 const tabs = useTabs();
 function close() {
   tabs.closeCurrentTab();
-  router.push('/infra/codegen');
+  router.push({ name: 'InfraCodegen' });
 }
 
 /** 下一步 */
diff --git a/apps/web-antd/src/views/infra/job/data.ts b/apps/web-antd/src/views/infra/job/data.ts
index e62dd466e..31811a055 100644
--- a/apps/web-antd/src/views/infra/job/data.ts
+++ b/apps/web-antd/src/views/infra/job/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraJobApi } from '#/api/infra/job';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h, markRaw } from 'vue';
@@ -191,10 +190,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '任务状态',
-      content: (data: InfraJobApi.Job) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_JOB_STATUS,
-          value: data?.status,
+          value: val,
         });
       },
     },
@@ -216,27 +215,27 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     },
     {
       label: '重试间隔',
-      content: (data: InfraJobApi.Job) => {
-        return data?.retryInterval ? `${data.retryInterval} 毫秒` : '无间隔';
+      field: 'retryInterval',
+      render: (val) => {
+        return val ? `${val} 毫秒` : '无间隔';
       },
     },
     {
       label: '监控超时时间',
-      content: (data: InfraJobApi.Job) => {
-        return data?.monitorTimeout && data.monitorTimeout > 0
-          ? `${data.monitorTimeout} 毫秒`
-          : '未开启';
+      field: 'monitorTimeout',
+      render: (val) => {
+        return val && val > 0 ? `${val} 毫秒` : '未开启';
       },
     },
     {
       field: 'nextTimes',
       label: '后续执行时间',
-      content: (data: InfraJobApi.Job) => {
-        if (!data?.nextTimes || data.nextTimes.length === 0) {
+      render: (val) => {
+        if (!val || val.length === 0) {
           return '无后续执行时间';
         }
         return h(Timeline, {}, () =>
-          data.nextTimes?.map((time: Date) =>
+          val?.map((time: Date) =>
             h(Timeline.Item, {}, () => formatDateTime(time)),
           ),
         );
diff --git a/apps/web-antd/src/views/infra/job/logger/data.ts b/apps/web-antd/src/views/infra/job/logger/data.ts
index d12e7ac56..f17622cb9 100644
--- a/apps/web-antd/src/views/infra/job/logger/data.ts
+++ b/apps/web-antd/src/views/infra/job/logger/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraJobLogApi } from '#/api/infra/job-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -154,9 +153,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'beginTime',
       label: '执行时间',
-      content: (data: InfraJobLogApi.JobLog) => {
-        if (data?.beginTime && data?.endTime) {
-          return `${formatDateTime(data.beginTime)} ~ ${formatDateTime(data.endTime)}`;
+      render: (val, data) => {
+        if (val && data?.endTime) {
+          return `${formatDateTime(val)} ~ ${formatDateTime(data.endTime)}`;
         }
         return '';
       },
@@ -164,17 +163,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'duration',
       label: '执行时长',
-      content: (data: InfraJobLogApi.JobLog) => {
-        return data?.duration ? `${data.duration} 毫秒` : '';
+      render: (val) => {
+        return val ? `${val} 毫秒` : '';
       },
     },
     {
       field: 'status',
       label: '任务状态',
-      content: (data: InfraJobLogApi.JobLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_JOB_LOG_STATUS,
-          value: data?.status,
+          value: val,
         });
       },
     },
diff --git a/apps/web-antd/src/views/infra/job/logger/modules/detail.vue b/apps/web-antd/src/views/infra/job/logger/modules/detail.vue
index aa20203cb..18c868de4 100644
--- a/apps/web-antd/src/views/infra/job/logger/modules/detail.vue
+++ b/apps/web-antd/src/views/infra/job/logger/modules/detail.vue
@@ -13,11 +13,9 @@ import { useDetailSchema } from '../data';
 const formData = ref<InfraJobLogApi.JobLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    class: 'mx-4',
-  },
+  bordered: true,
+  column: 1,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/infra/job/modules/detail.vue b/apps/web-antd/src/views/infra/job/modules/detail.vue
index 89f138a47..145a19dab 100644
--- a/apps/web-antd/src/views/infra/job/modules/detail.vue
+++ b/apps/web-antd/src/views/infra/job/modules/detail.vue
@@ -14,11 +14,9 @@ const formData = ref<InfraJobApi.Job>(); // 任务详情
 const nextTimes = ref<Date[]>([]); // 下一次执行时间
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    class: 'mx-4',
-  },
+  bordered: true,
+  column: 1,
+  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/infra/redis/modules/info.vue b/apps/web-antd/src/views/infra/redis/modules/info.vue
index f04907978..c832f1b04 100644
--- a/apps/web-antd/src/views/infra/redis/modules/info.vue
+++ b/apps/web-antd/src/views/infra/redis/modules/info.vue
@@ -1,60 +1,74 @@
 <script lang="ts" setup>
 import type { InfraRedisApi } from '#/api/infra/redis';
 
-import { Descriptions } from 'ant-design-vue';
+import { useDescription } from '#/components/description';
 
 defineProps<{
   redisData?: InfraRedisApi.RedisMonitorInfo;
 }>();
+
+const [Descriptions] = useDescription({
+  bordered: false,
+  column: 6,
+  class: 'mx-4',
+  schema: [
+    {
+      field: 'info.redis_version',
+      label: 'Redis 版本',
+    },
+    {
+      field: 'info.redis_mode',
+      label: '运行模式',
+      render: (val) => (val === 'standalone' ? '单机' : '集群'),
+    },
+    {
+      field: 'info.tcp_port',
+      label: '端口',
+    },
+    {
+      field: 'info.connected_clients',
+      label: '客户端数',
+    },
+    {
+      field: 'info.uptime_in_days',
+      label: '运行时间(天)',
+    },
+    {
+      field: 'info.used_memory_human',
+      label: '使用内存',
+    },
+    {
+      field: 'info.used_cpu_user_children',
+      label: '使用 CPU',
+      render: (val) => Number.parseFloat(val).toFixed(2),
+    },
+    {
+      field: 'info.maxmemory_human',
+      label: '内存配置',
+    },
+    {
+      field: 'info.aof_enabled',
+      label: 'AOF 是否开启',
+      render: (val) => (val === '0' ? '否' : '是'),
+    },
+    {
+      field: 'info.rdb_last_bgsave_status',
+      label: 'RDB 是否成功',
+    },
+    {
+      field: 'dbSize',
+      label: 'Key 数量',
+    },
+    {
+      field: 'info.instantaneous_input_kbps',
+      label: '网络入口/出口',
+      render: (val, data) =>
+        `${val}kps / ${data?.info?.instantaneous_output_kbps}kps`,
+    },
+  ],
+});
 </script>
 
 <template>
-  <Descriptions
-    :column="6"
-    bordered
-    size="middle"
-    :label-style="{ width: '138px' }"
-  >
-    <Descriptions.Item label="Redis 版本">
-      {{ redisData?.info?.redis_version }}
-    </Descriptions.Item>
-    <Descriptions.Item label="运行模式">
-      {{ redisData?.info?.redis_mode === 'standalone' ? '单机' : '集群' }}
-    </Descriptions.Item>
-    <Descriptions.Item label="端口">
-      {{ redisData?.info?.tcp_port }}
-    </Descriptions.Item>
-    <Descriptions.Item label="客户端数">
-      {{ redisData?.info?.connected_clients }}
-    </Descriptions.Item>
-    <Descriptions.Item label="运行时间(天)">
-      {{ redisData?.info?.uptime_in_days }}
-    </Descriptions.Item>
-    <Descriptions.Item label="使用内存">
-      {{ redisData?.info?.used_memory_human }}
-    </Descriptions.Item>
-    <Descriptions.Item label="使用 CPU">
-      {{
-        redisData?.info
-          ? parseFloat(redisData?.info?.used_cpu_user_children).toFixed(2)
-          : ''
-      }}
-    </Descriptions.Item>
-    <Descriptions.Item label="内存配置">
-      {{ redisData?.info?.maxmemory_human }}
-    </Descriptions.Item>
-    <Descriptions.Item label="AOF 是否开启">
-      {{ redisData?.info?.aof_enabled === '0' ? '否' : '是' }}
-    </Descriptions.Item>
-    <Descriptions.Item label="RDB 是否成功">
-      {{ redisData?.info?.rdb_last_bgsave_status }}
-    </Descriptions.Item>
-    <Descriptions.Item label="Key 数量">
-      {{ redisData?.dbSize }}
-    </Descriptions.Item>
-    <Descriptions.Item label="网络入口/出口">
-      {{ redisData?.info?.instantaneous_input_kbps }}kps /
-      {{ redisData?.info?.instantaneous_output_kbps }}kps
-    </Descriptions.Item>
-  </Descriptions>
+  <Descriptions :data="redisData" />
 </template>
diff --git a/apps/web-antd/src/views/infra/redis/modules/memory.vue b/apps/web-antd/src/views/infra/redis/modules/memory.vue
index 6eeda8958..5220c4631 100644
--- a/apps/web-antd/src/views/infra/redis/modules/memory.vue
+++ b/apps/web-antd/src/views/infra/redis/modules/memory.vue
@@ -94,7 +94,7 @@ function renderMemoryChart() {
         detail: {
           show: true,
           offsetCenter: [0, '50%'],
-          color: 'auto',
+          color: 'inherit',
           fontSize: 30,
           formatter: usedMemory,
         },
diff --git a/apps/web-antd/src/views/iot/alert/config/data.ts b/apps/web-antd/src/views/iot/alert/config/data.ts
index 379867edb..c45a95a74 100644
--- a/apps/web-antd/src/views/iot/alert/config/data.ts
+++ b/apps/web-antd/src/views/iot/alert/config/data.ts
@@ -63,7 +63,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '关联场景联动规则',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleRuleSceneList(),
+        api: getSimpleRuleSceneList,
         labelField: 'name',
         valueField: 'id',
         mode: 'multiple',
@@ -76,7 +76,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '接收的用户',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         mode: 'multiple',
@@ -124,7 +124,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'createTime',
       label: '创建时间',
       component: 'RangePicker',
-      componentProps: getRangePickerDefaultProps(),
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/iot/alert/record/data.ts b/apps/web-antd/src/views/iot/alert/record/data.ts
index 70b13b267..2c5ef9a84 100644
--- a/apps/web-antd/src/views/iot/alert/record/data.ts
+++ b/apps/web-antd/src/views/iot/alert/record/data.ts
@@ -17,7 +17,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '告警配置',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleAlertConfigList(),
+        api: getSimpleAlertConfigList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择告警配置',
@@ -40,7 +40,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '产品',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleProductList(),
+        api: getSimpleProductList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品',
@@ -53,7 +53,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '设备',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleDeviceList(),
+        api: getSimpleDeviceList,
         labelField: 'deviceName',
         valueField: 'id',
         placeholder: '请选择设备',
@@ -75,7 +75,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'createTime',
       label: '创建时间',
       component: 'RangePicker',
-      componentProps: getRangePickerDefaultProps(),
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/iot/device/device/data.ts b/apps/web-antd/src/views/iot/device/device/data.ts
index a2fef45e8..424f0ef92 100644
--- a/apps/web-antd/src/views/iot/device/device/data.ts
+++ b/apps/web-antd/src/views/iot/device/device/data.ts
@@ -28,7 +28,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '产品',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleProductList(),
+        api: getSimpleProductList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品',
@@ -89,7 +89,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '设备分组',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleDeviceGroupList(),
+        api: getSimpleDeviceGroupList,
         labelField: 'name',
         valueField: 'id',
         mode: 'multiple',
@@ -156,7 +156,7 @@ export function useGroupFormSchema(): VbenFormSchema[] {
       label: '设备分组',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleDeviceGroupList(),
+        api: getSimpleDeviceGroupList,
         labelField: 'name',
         valueField: 'id',
         mode: 'multiple',
@@ -199,7 +199,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '产品',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleProductList(),
+        api: getSimpleProductList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品',
@@ -249,7 +249,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '设备分组',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleDeviceGroupList(),
+        api: getSimpleDeviceGroupList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择设备分组',
diff --git a/apps/web-antd/src/views/iot/device/group/data.ts b/apps/web-antd/src/views/iot/device/group/data.ts
index 3ea5a12da..0bc313e52 100644
--- a/apps/web-antd/src/views/iot/device/group/data.ts
+++ b/apps/web-antd/src/views/iot/device/group/data.ts
@@ -34,7 +34,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '父级分组',
       component: 'ApiTreeSelect',
       componentProps: {
-        api: () => getSimpleDeviceGroupList(),
+        api: getSimpleDeviceGroupList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择父级分组',
diff --git a/apps/web-antd/src/views/iot/ota/data.ts b/apps/web-antd/src/views/iot/ota/data.ts
index 287cb00bc..ff9ba6ee1 100644
--- a/apps/web-antd/src/views/iot/ota/data.ts
+++ b/apps/web-antd/src/views/iot/ota/data.ts
@@ -29,7 +29,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '所属产品',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleProductList(),
+        api: getSimpleProductList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品',
@@ -85,7 +85,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '产品',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleProductList(),
+        api: getSimpleProductList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品',
@@ -96,7 +96,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'createTime',
       label: '创建时间',
       component: 'RangePicker',
-      componentProps: getRangePickerDefaultProps(),
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/iot/ota/firmware/data.ts b/apps/web-antd/src/views/iot/ota/firmware/data.ts
index de4195809..7b684dba9 100644
--- a/apps/web-antd/src/views/iot/ota/firmware/data.ts
+++ b/apps/web-antd/src/views/iot/ota/firmware/data.ts
@@ -29,7 +29,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '所属产品',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleProductList(),
+        api: getSimpleProductList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品',
@@ -86,7 +86,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '产品',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleProductList(),
+        api: getSimpleProductList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品',
@@ -97,7 +97,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'createTime',
       label: '创建时间',
       component: 'RangePicker',
-      componentProps: getRangePickerDefaultProps(),
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/iot/ota/firmware/index.vue b/apps/web-antd/src/views/iot/ota/firmware/index.vue
index 097f85bad..e0f3fb906 100644
--- a/apps/web-antd/src/views/iot/ota/firmware/index.vue
+++ b/apps/web-antd/src/views/iot/ota/firmware/index.vue
@@ -2,6 +2,8 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { IoTOtaFirmwareApi } from '#/api/iot/ota/firmware';
 
+import { useRouter } from 'vue-router';
+
 import { Page, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
@@ -16,6 +18,8 @@ import { useGridColumns, useGridFormSchema } from './data';
 
 defineOptions({ name: 'IoTOtaFirmware' });
 
+const { push } = useRouter();
+
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
@@ -36,11 +40,6 @@ function handleEdit(row: IoTOtaFirmwareApi.Firmware) {
   formModalApi.setData({ type: 'update', id: row.id }).open();
 }
 
-/** 查看固件详情 */
-function handleDetail(row: IoTOtaFirmwareApi.Firmware) {
-  formModalApi.setData({ type: 'view', id: row.id }).open();
-}
-
 /** 删除固件 */
 async function handleDelete(row: IoTOtaFirmwareApi.Firmware) {
   const hideLoading = message.loading({
@@ -58,6 +57,11 @@ async function handleDelete(row: IoTOtaFirmwareApi.Firmware) {
   }
 }
 
+/** 查看固件详情 */
+function handleDetail(row: IoTOtaFirmwareApi.Firmware) {
+  push({ name: 'IoTOtaFirmwareDetail', params: { id: row.id } });
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -113,16 +117,23 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
       <!-- 固件文件列 -->
       <template #fileUrl="{ row }">
-        <a
+        <div
           v-if="row.fileUrl"
-          :href="row.fileUrl"
-          target="_blank"
-          download
-          class="text-primary cursor-pointer hover:underline"
+          class="inline-flex items-center gap-1.5 align-middle leading-none"
         >
-          <IconifyIcon icon="ant-design:download-outlined" class="mr-1" />
-          下载固件
-        </a>
+          <IconifyIcon
+            icon="ant-design:download-outlined"
+            class="text-primary shrink-0 align-middle text-base"
+          />
+          <a
+            :href="row.fileUrl"
+            target="_blank"
+            download
+            class="text-primary cursor-pointer align-middle hover:underline"
+          >
+            下载固件
+          </a>
+        </div>
         <span v-else class="text-gray-400">无文件</span>
       </template>
 
diff --git a/apps/web-antd/src/views/iot/ota/modules/detail/index.vue b/apps/web-antd/src/views/iot/ota/modules/detail/index.vue
index 8bd43420c..ca6613146 100644
--- a/apps/web-antd/src/views/iot/ota/modules/detail/index.vue
+++ b/apps/web-antd/src/views/iot/ota/modules/detail/index.vue
@@ -8,8 +8,8 @@ import { formatDate } from '@vben/utils';
 
 import { Card, Col, Descriptions, Row } from 'ant-design-vue';
 
-import * as IoTOtaFirmwareApi from '#/api/iot/ota/firmware';
-import * as IoTOtaTaskRecordApi from '#/api/iot/ota/task/record';
+import { getOtaFirmware } from '#/api/iot/ota/firmware';
+import { getOtaTaskRecordStatusStatistics } from '#/api/iot/ota/task/record';
 import { IoTOtaTaskRecordStatusEnum } from '#/views/iot/utils/constants';
 
 import OtaTaskList from '../task/OtaTaskList.vue';
@@ -30,7 +30,7 @@ const firmwareStatistics = ref<Record<string, number>>({});
 async function getFirmwareInfo() {
   firmwareLoading.value = true;
   try {
-    firmware.value = await IoTOtaFirmwareApi.getOtaFirmware(firmwareId.value);
+    firmware.value = await getOtaFirmware(firmwareId.value);
   } finally {
     firmwareLoading.value = false;
   }
@@ -40,10 +40,9 @@ async function getFirmwareInfo() {
 async function getStatistics() {
   firmwareStatisticsLoading.value = true;
   try {
-    firmwareStatistics.value =
-      await IoTOtaTaskRecordApi.getOtaTaskRecordStatusStatistics(
-        firmwareId.value,
-      );
+    firmwareStatistics.value = await getOtaTaskRecordStatusStatistics(
+      firmwareId.value,
+    );
   } finally {
     firmwareStatisticsLoading.value = false;
   }
@@ -59,8 +58,8 @@ onMounted(() => {
 <template>
   <div class="p-4">
     <!-- 固件信息 -->
-    <Card title="固件信息" class="mb-5" :loading="firmwareLoading">
-      <Descriptions :column="3" bordered>
+    <Card title="固件信息" class="mb-3" :loading="firmwareLoading">
+      <Descriptions :column="3" bordered size="small">
         <Descriptions.Item label="固件名称">
           {{ firmware?.name }}
         </Descriptions.Item>
@@ -86,15 +85,15 @@ onMounted(() => {
     <!-- 升级设备统计 -->
     <Card
       title="升级设备统计"
-      class="mb-5"
+      class="mb-3"
       :loading="firmwareStatisticsLoading"
     >
-      <Row :gutter="20" class="py-5">
+      <Row :gutter="20" class="py-3">
         <Col :span="6">
           <div
-            class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
+            class="rounded border border-solid border-gray-200 bg-gray-50 p-3 text-center"
           >
-            <div class="mb-2 text-3xl font-bold text-blue-500">
+            <div class="mb-1 text-3xl font-bold text-blue-500">
               {{
                 Object.values(firmwareStatistics).reduce(
                   (sum: number, count) => sum + (count || 0),
@@ -107,9 +106,9 @@ onMounted(() => {
         </Col>
         <Col :span="3">
           <div
-            class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
+            class="rounded border border-solid border-gray-200 bg-gray-50 p-3 text-center"
           >
-            <div class="mb-2 text-3xl font-bold text-gray-400">
+            <div class="mb-1 text-3xl font-bold text-gray-400">
               {{
                 firmwareStatistics[IoTOtaTaskRecordStatusEnum.PENDING.value] ||
                 0
@@ -120,9 +119,9 @@ onMounted(() => {
         </Col>
         <Col :span="3">
           <div
-            class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
+            class="rounded border border-solid border-gray-200 bg-gray-50 p-3 text-center"
           >
-            <div class="mb-2 text-3xl font-bold text-blue-400">
+            <div class="mb-1 text-3xl font-bold text-blue-400">
               {{
                 firmwareStatistics[IoTOtaTaskRecordStatusEnum.PUSHED.value] || 0
               }}
@@ -132,9 +131,9 @@ onMounted(() => {
         </Col>
         <Col :span="3">
           <div
-            class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
+            class="rounded border border-solid border-gray-200 bg-gray-50 p-3 text-center"
           >
-            <div class="mb-2 text-3xl font-bold text-yellow-500">
+            <div class="mb-1 text-3xl font-bold text-yellow-500">
               {{
                 firmwareStatistics[
                   IoTOtaTaskRecordStatusEnum.UPGRADING.value
@@ -146,9 +145,9 @@ onMounted(() => {
         </Col>
         <Col :span="3">
           <div
-            class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
+            class="rounded border border-solid border-gray-200 bg-gray-50 p-3 text-center"
           >
-            <div class="mb-2 text-3xl font-bold text-green-500">
+            <div class="mb-1 text-3xl font-bold text-green-500">
               {{
                 firmwareStatistics[IoTOtaTaskRecordStatusEnum.SUCCESS.value] ||
                 0
@@ -159,9 +158,9 @@ onMounted(() => {
         </Col>
         <Col :span="3">
           <div
-            class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
+            class="rounded border border-solid border-gray-200 bg-gray-50 p-3 text-center"
           >
-            <div class="mb-2 text-3xl font-bold text-red-500">
+            <div class="mb-1 text-3xl font-bold text-red-500">
               {{
                 firmwareStatistics[IoTOtaTaskRecordStatusEnum.FAILURE.value] ||
                 0
@@ -172,9 +171,9 @@ onMounted(() => {
         </Col>
         <Col :span="3">
           <div
-            class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
+            class="rounded border border-solid border-gray-200 bg-gray-50 p-3 text-center"
           >
-            <div class="mb-2 text-3xl font-bold text-gray-400">
+            <div class="mb-1 text-3xl font-bold text-gray-400">
               {{
                 firmwareStatistics[IoTOtaTaskRecordStatusEnum.CANCELED.value] ||
                 0
diff --git a/apps/web-antd/src/views/iot/ota/modules/firmware-detail/index.vue b/apps/web-antd/src/views/iot/ota/modules/firmware-detail/index.vue
index 8bd43420c..04533924d 100644
--- a/apps/web-antd/src/views/iot/ota/modules/firmware-detail/index.vue
+++ b/apps/web-antd/src/views/iot/ota/modules/firmware-detail/index.vue
@@ -8,8 +8,8 @@ import { formatDate } from '@vben/utils';
 
 import { Card, Col, Descriptions, Row } from 'ant-design-vue';
 
-import * as IoTOtaFirmwareApi from '#/api/iot/ota/firmware';
-import * as IoTOtaTaskRecordApi from '#/api/iot/ota/task/record';
+import { getOtaFirmware } from '#/api/iot/ota/firmware';
+import { getOtaTaskRecordStatusStatistics } from '#/api/iot/ota/task/record';
 import { IoTOtaTaskRecordStatusEnum } from '#/views/iot/utils/constants';
 
 import OtaTaskList from '../task/OtaTaskList.vue';
@@ -30,7 +30,7 @@ const firmwareStatistics = ref<Record<string, number>>({});
 async function getFirmwareInfo() {
   firmwareLoading.value = true;
   try {
-    firmware.value = await IoTOtaFirmwareApi.getOtaFirmware(firmwareId.value);
+    firmware.value = await getOtaFirmware(firmwareId.value);
   } finally {
     firmwareLoading.value = false;
   }
@@ -40,10 +40,9 @@ async function getFirmwareInfo() {
 async function getStatistics() {
   firmwareStatisticsLoading.value = true;
   try {
-    firmwareStatistics.value =
-      await IoTOtaTaskRecordApi.getOtaTaskRecordStatusStatistics(
-        firmwareId.value,
-      );
+    firmwareStatistics.value = await getOtaTaskRecordStatusStatistics(
+      firmwareId.value,
+    );
   } finally {
     firmwareStatisticsLoading.value = false;
   }
diff --git a/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskDetail.vue b/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskDetail.vue
index 8a19d63d7..8768c2bf6 100644
--- a/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskDetail.vue
+++ b/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskDetail.vue
@@ -21,8 +21,12 @@ import {
   Tag,
 } from 'ant-design-vue';
 
-import * as IoTOtaTaskApi from '#/api/iot/ota/task';
-import * as IoTOtaTaskRecordApi from '#/api/iot/ota/task/record';
+import { getOtaTask } from '#/api/iot/ota/task';
+import {
+  cancelOtaTaskRecord,
+  getOtaTaskRecordPage,
+  getOtaTaskRecordStatusStatistics,
+} from '#/api/iot/ota/task/record';
 import { IoTOtaTaskRecordStatusEnum } from '#/views/iot/utils/constants';
 
 /** OTA 任务详情组件 */
@@ -119,7 +123,7 @@ async function getTaskInfo() {
   }
   taskLoading.value = true;
   try {
-    task.value = await IoTOtaTaskApi.getOtaTask(taskId.value);
+    task.value = await getOtaTask(taskId.value);
   } finally {
     taskLoading.value = false;
   }
@@ -132,11 +136,10 @@ async function getStatistics() {
   }
   taskStatisticsLoading.value = true;
   try {
-    taskStatistics.value =
-      await IoTOtaTaskRecordApi.getOtaTaskRecordStatusStatistics(
-        undefined,
-        taskId.value,
-      );
+    taskStatistics.value = await getOtaTaskRecordStatusStatistics(
+      undefined,
+      taskId.value,
+    );
   } finally {
     taskStatisticsLoading.value = false;
   }
@@ -150,7 +153,7 @@ async function getRecordList() {
   recordLoading.value = true;
   try {
     queryParams.taskId = taskId.value;
-    const data = await IoTOtaTaskRecordApi.getOtaTaskRecordPage(queryParams);
+    const data = await getOtaTaskRecordPage(queryParams);
     recordList.value = data.list || [];
     recordTotal.value = data.total || 0;
   } finally {
@@ -181,7 +184,7 @@ async function handleCancelUpgrade(record: OtaTaskRecord) {
     content: '确认要取消该设备的升级任务吗？',
     async onOk() {
       try {
-        await IoTOtaTaskRecordApi.cancelOtaTaskRecord(record.id!);
+        await cancelOtaTaskRecord(record.id!);
         message.success('取消成功');
         await getRecordList();
         await getStatistics();
diff --git a/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskForm.vue b/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskForm.vue
index 0971ac2ef..bb3818cc5 100644
--- a/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskForm.vue
+++ b/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskForm.vue
@@ -8,8 +8,8 @@ import { useVbenModal } from '@vben/common-ui';
 
 import { Form, Input, message, Select, Spin } from 'ant-design-vue';
 
-import * as DeviceApi from '#/api/iot/device/device';
-import * as IoTOtaTaskApi from '#/api/iot/ota/task';
+import { getDeviceListByProductId } from '#/api/iot/device/device';
+import { createOtaTask } from '#/api/iot/ota/task';
 import { IoTOtaTaskDeviceScopeEnum } from '#/views/iot/utils/constants';
 
 /** IoT OTA 升级任务表单 */
@@ -82,7 +82,7 @@ const [Modal, modalApi] = useVbenModal({
     try {
       await formRef.value.validate();
       modalApi.lock();
-      await IoTOtaTaskApi.createOtaTask(formData.value);
+      await createOtaTask(formData.value);
       message.success('创建成功');
       await modalApi.close();
       emit('success');
@@ -98,8 +98,7 @@ const [Modal, modalApi] = useVbenModal({
     // 加载设备列表
     formLoading.value = true;
     try {
-      devices.value =
-        (await DeviceApi.getDeviceListByProductId(props.productId)) || [];
+      devices.value = (await getDeviceListByProductId(props.productId)) || [];
     } finally {
       formLoading.value = false;
     }
diff --git a/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskList.vue b/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskList.vue
index 130f344fc..14f8cfa98 100644
--- a/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskList.vue
+++ b/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskList.vue
@@ -19,7 +19,7 @@ import {
   Tag,
 } from 'ant-design-vue';
 
-import * as IoTOtaTaskApi from '#/api/iot/ota/task';
+import { getOtaTaskPage } from '#/api/iot/ota/task';
 import { IoTOtaTaskStatusEnum } from '#/views/iot/utils/constants';
 
 import OtaTaskDetail from './OtaTaskDetail.vue';
@@ -52,7 +52,7 @@ const taskDetailRef = ref(); // 任务详情引用
 async function getTaskList() {
   taskLoading.value = true;
   try {
-    const data = await IoTOtaTaskApi.getOtaTaskPage(queryParams);
+    const data = await getOtaTaskPage(queryParams);
     taskList.value = data.list;
     taskTotal.value = data.total;
   } finally {
diff --git a/apps/web-antd/src/views/iot/product/category/data.ts b/apps/web-antd/src/views/iot/product/category/data.ts
index d7bad5034..2604b0406 100644
--- a/apps/web-antd/src/views/iot/product/category/data.ts
+++ b/apps/web-antd/src/views/iot/product/category/data.ts
@@ -34,7 +34,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '父级分类',
       component: 'ApiTreeSelect',
       componentProps: {
-        api: () => getSimpleProductCategoryList(),
+        api: getSimpleProductCategoryList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择父级分类',
diff --git a/apps/web-antd/src/views/iot/product/product/data.ts b/apps/web-antd/src/views/iot/product/product/data.ts
index 5ba2a2516..e1d2d27fd 100644
--- a/apps/web-antd/src/views/iot/product/product/data.ts
+++ b/apps/web-antd/src/views/iot/product/product/data.ts
@@ -93,7 +93,7 @@ export function useFormSchema(formApi?: any): VbenFormSchema[] {
       label: '产品分类',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleProductCategoryList(),
+        api: getSimpleProductCategoryList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品分类',
@@ -246,7 +246,7 @@ export function useBasicFormSchema(formApi?: any): VbenFormSchema[] {
       label: '产品分类',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleProductCategoryList(),
+        api: getSimpleProductCategoryList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品分类',
diff --git a/apps/web-antd/src/views/iot/rule/data/data.ts b/apps/web-antd/src/views/iot/rule/data/data.ts
index 476fd9aa5..6c94b2792 100644
--- a/apps/web-antd/src/views/iot/rule/data/data.ts
+++ b/apps/web-antd/src/views/iot/rule/data/data.ts
@@ -24,7 +24,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '产品',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleProductList(),
+        api: getSimpleProductList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品',
@@ -45,7 +45,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'createTime',
       label: '创建时间',
       component: 'RangePicker',
-      componentProps: getRangePickerDefaultProps(),
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/iot/rule/data/rule/data.ts b/apps/web-antd/src/views/iot/rule/data/rule/data.ts
index 8237e2f8b..d4e453b4b 100644
--- a/apps/web-antd/src/views/iot/rule/data/rule/data.ts
+++ b/apps/web-antd/src/views/iot/rule/data/rule/data.ts
@@ -32,7 +32,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'createTime',
       label: '创建时间',
       component: 'RangePicker',
-      componentProps: getRangePickerDefaultProps(),
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/iot/rule/data/sink/data.ts b/apps/web-antd/src/views/iot/rule/data/sink/data.ts
index bc70eae18..9af434569 100644
--- a/apps/web-antd/src/views/iot/rule/data/sink/data.ts
+++ b/apps/web-antd/src/views/iot/rule/data/sink/data.ts
@@ -42,7 +42,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'createTime',
       label: '创建时间',
       component: 'RangePicker',
-      componentProps: getRangePickerDefaultProps(),
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/iot/rule/scene/data.ts b/apps/web-antd/src/views/iot/rule/scene/data.ts
index 743c53394..fd948f9bf 100644
--- a/apps/web-antd/src/views/iot/rule/scene/data.ts
+++ b/apps/web-antd/src/views/iot/rule/scene/data.ts
@@ -77,7 +77,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'createTime',
       label: '创建时间',
       component: 'RangePicker',
-      componentProps: getRangePickerDefaultProps(),
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/RuleSceneForm.vue b/apps/web-antd/src/views/iot/rule/scene/form/RuleSceneForm.vue
index e2004c963..f801e2ab1 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/RuleSceneForm.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/RuleSceneForm.vue
@@ -234,7 +234,9 @@ async function handleSubmit() {
   // 校验表单
   if (!formRef.value) return;
   const valid = await formRef.value.validate();
-  if (!valid) return;
+  if (!valid) {
+    return;
+  }
 
   // 提交请求
   submitLoading.value = true;
diff --git a/apps/web-antd/src/views/mall/home/modules/member-statistics-card.vue b/apps/web-antd/src/views/mall/home/modules/member-statistics-card.vue
index cc11ded12..770249117 100644
--- a/apps/web-antd/src/views/mall/home/modules/member-statistics-card.vue
+++ b/apps/web-antd/src/views/mall/home/modules/member-statistics-card.vue
@@ -10,7 +10,7 @@ import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 import { Card, Radio, RadioGroup, Spin } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberRegisterCountList } from '#/api/mall/statistics/member';
 
 import {
   getMemberStatisticsChartOptions,
@@ -41,7 +41,7 @@ const timeRangeConfig = {
 const timeRangeType = ref(TimeRangeTypeEnum.DAY30); // 日期快捷选择按钮, 默认 30 天
 
 /** 时间范围类型单选按钮选中 */
-const handleTimeRangeTypeChange = async () => {
+async function handleTimeRangeTypeChange() {
   // 设置时间范围
   let beginTime: Dayjs;
   let endTime: Dayjs;
@@ -71,13 +71,13 @@ const handleTimeRangeTypeChange = async () => {
     }
   }
   // 发送时间范围选中事件
-  await getMemberRegisterCountList(beginTime, endTime);
-};
+  await loadMemberRegisterCountList(beginTime, endTime);
+}
 
-async function getMemberRegisterCountList(beginTime: Dayjs, endTime: Dayjs) {
+async function loadMemberRegisterCountList(beginTime: Dayjs, endTime: Dayjs) {
   loading.value = true;
   try {
-    const list = await MemberStatisticsApi.getMemberRegisterCountList(
+    const list = await getMemberRegisterCountList(
       beginTime.toDate(),
       endTime.toDate(),
     );
diff --git a/apps/web-antd/src/views/mall/home/modules/operation-data-card.vue b/apps/web-antd/src/views/mall/home/modules/operation-data-card.vue
index 1bca28f21..a0f46c2aa 100644
--- a/apps/web-antd/src/views/mall/home/modules/operation-data-card.vue
+++ b/apps/web-antd/src/views/mall/home/modules/operation-data-card.vue
@@ -6,9 +6,9 @@ import { CountTo } from '@vben/common-ui';
 
 import { Card } from 'ant-design-vue';
 
-import * as ProductSpuApi from '#/api/mall/product/spu';
-import * as PayStatisticsApi from '#/api/mall/statistics/pay';
-import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import { getTabsCount } from '#/api/mall/product/spu';
+import { getWalletRechargePrice } from '#/api/mall/statistics/pay';
+import { getOrderCount } from '#/api/mall/statistics/trade';
 
 /** 运营数据卡片 */
 defineOptions({ name: 'OperationDataCard' });
@@ -51,8 +51,8 @@ const data = reactive({
 });
 
 /** 查询订单数据 */
-const getOrderData = async () => {
-  const orderCount = await TradeStatisticsApi.getOrderCount();
+async function loadOrderData() {
+  const orderCount = await getOrderCount();
   if (orderCount.undelivered) {
     data.orderUndelivered.value = orderCount.undelivered;
   }
@@ -65,40 +65,39 @@ const getOrderData = async () => {
   if (orderCount.auditingWithdraw) {
     data.withdrawAuditing.value = orderCount.auditingWithdraw;
   }
-};
+}
 
 /** 查询商品数据 */
-const getProductData = async () => {
-  const productCount = await ProductSpuApi.getTabsCount();
+async function loadProductData() {
+  const productCount = await getTabsCount();
   data.productForSale.value = productCount['0'] || 0;
   data.productInWarehouse.value = productCount['1'] || 0;
   data.productAlertStock.value = productCount['3'] || 0;
-};
+}
 
 /** 查询钱包充值数据 */
-const getWalletRechargeData = async () => {
-  const paySummary = await PayStatisticsApi.getWalletRechargePrice();
+async function loadWalletRechargeData() {
+  const paySummary = await getWalletRechargePrice();
   data.rechargePrice.value = paySummary.rechargePrice;
-};
+}
 
 /** 跳转到对应页面 */
-// TODO @xingyu：貌似通过 name 的方式，都无法跳转，找不到路由？
-const handleClick = (routerName: string) => {
+function handleClick(routerName: string) {
   router.push({ name: routerName });
-};
+}
 
 /** 激活时 */
 onActivated(() => {
-  getOrderData();
-  getProductData();
-  getWalletRechargeData();
+  loadOrderData();
+  loadProductData();
+  loadWalletRechargeData();
 });
 
 /** 初始化 */
 onMounted(() => {
-  getOrderData();
-  getProductData();
-  getWalletRechargeData();
+  loadOrderData();
+  loadProductData();
+  loadWalletRechargeData();
 });
 </script>
 
diff --git a/apps/web-antd/src/views/mall/home/modules/shortcut-card.vue b/apps/web-antd/src/views/mall/home/modules/shortcut-card.vue
index 730d8adbf..ea3fb3a33 100644
--- a/apps/web-antd/src/views/mall/home/modules/shortcut-card.vue
+++ b/apps/web-antd/src/views/mall/home/modules/shortcut-card.vue
@@ -63,7 +63,6 @@ const menuList = [
 ];
 
 /** 跳转到菜单对应页面 */
-// TODO @xingyu：貌似通过 name 的方式，都无法跳转，找不到路由？
 function handleMenuClick(routerName: string) {
   router.push({ name: routerName });
 }
diff --git a/apps/web-antd/src/views/mall/home/modules/trade-trend-card.vue b/apps/web-antd/src/views/mall/home/modules/trade-trend-card.vue
index 0d5352789..2c9d72583 100644
--- a/apps/web-antd/src/views/mall/home/modules/trade-trend-card.vue
+++ b/apps/web-antd/src/views/mall/home/modules/trade-trend-card.vue
@@ -11,7 +11,7 @@ import { fenToYuan } from '@vben/utils';
 import { Card, Radio, RadioGroup, Spin } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
-import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import { getOrderCountTrendComparison } from '#/api/mall/statistics/trade';
 
 import {
   getTradeTrendChartOptions,
@@ -46,7 +46,7 @@ const timeRangeConfig = {
 const timeRangeType = ref(TimeRangeTypeEnum.DAY30); // 日期快捷选择按钮, 默认 30 天
 
 /** 时间范围类型单选按钮选中 */
-const handleTimeRangeTypeChange = async () => {
+async function handleTimeRangeTypeChange() {
   // 设置时间范围
   let beginTime: Dayjs;
   let endTime: Dayjs;
@@ -76,15 +76,15 @@ const handleTimeRangeTypeChange = async () => {
     }
   }
   // 发送时间范围选中事件
-  await getOrderCountTrendComparison(beginTime, endTime);
-};
+  await loadOrderCountTrendComparison(beginTime, endTime);
+}
 
 /** 查询订单数量趋势对照数据 */
-async function getOrderCountTrendComparison(beginTime: Dayjs, endTime: Dayjs) {
+async function loadOrderCountTrendComparison(beginTime: Dayjs, endTime: Dayjs) {
   loading.value = true;
   try {
     // 1. 查询数据
-    const list = await TradeStatisticsApi.getOrderCountTrendComparison(
+    const list = await getOrderCountTrendComparison(
       timeRangeType.value,
       beginTime.toDate(),
       endTime.toDate(),
diff --git a/apps/web-antd/src/views/mall/product/category/components/product-category-select.vue b/apps/web-antd/src/views/mall/product/category/components/product-category-select.vue
new file mode 100644
index 000000000..dedb2d2fa
--- /dev/null
+++ b/apps/web-antd/src/views/mall/product/category/components/product-category-select.vue
@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+
+import { handleTree } from '@vben/utils';
+
+import { getCategoryList } from '#/api/mall/product/category';
+
+/** 商品分类选择组件 */
+defineOptions({ name: 'ProductCategorySelect' });
+
+const props = defineProps({
+  // 选中的ID
+  modelValue: {
+    type: [Number, Array<Number>],
+    default: undefined,
+  },
+  // 是否多选
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  // 上级品类的编号
+  parentId: {
+    type: Number,
+    default: undefined,
+  },
+});
+
+/** 分类选择 */
+const emit = defineEmits(['update:modelValue']);
+
+/** 选中的分类 ID */
+const selectCategoryId = computed({
+  get: () => {
+    return props.modelValue;
+  },
+  set: (val: number | number[]) => {
+    emit('update:modelValue', val);
+  },
+});
+
+/** 初始化 */
+const categoryList = ref<any[]>([]); // 分类树
+onMounted(async () => {
+  const data = await getCategoryList({
+    parentId: props.parentId,
+  });
+  categoryList.value = handleTree(data, 'id', 'parentId');
+});
+</script>
+<template>
+  <TreeSelect
+    v-model:value="selectCategoryId"
+    :tree-data="categoryList"
+    :field-names="{
+      children: 'children',
+      label: 'name',
+      value: 'id',
+    }"
+    :multiple="multiple"
+    :tree-checkable="multiple"
+    class="w-1/1"
+    placeholder="请选择商品分类"
+    allow-clear
+    tree-default-expand-all
+  />
+</template>
diff --git a/apps/web-antd/src/views/mall/product/category/index.vue b/apps/web-antd/src/views/mall/product/category/index.vue
index 7733ceb0e..ec1d4c315 100644
--- a/apps/web-antd/src/views/mall/product/category/index.vue
+++ b/apps/web-antd/src/views/mall/product/category/index.vue
@@ -64,7 +64,7 @@ function handleExpand() {
 }
 
 /** 查看商品操作 */
-const router = useRouter(); // 路由
+const router = useRouter();
 function handleViewSpu(id: number) {
   router.push({
     path: '/mall/product/spu',
diff --git a/apps/web-antd/src/views/mall/product/comment/data.ts b/apps/web-antd/src/views/mall/product/comment/data.ts
index c0ca716d3..62f9f956d 100644
--- a/apps/web-antd/src/views/mall/product/comment/data.ts
+++ b/apps/web-antd/src/views/mall/product/comment/data.ts
@@ -23,7 +23,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '商品',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSpuSimpleList(),
+        api: getSpuSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择商品',
@@ -101,7 +101,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'replyStatus',
       label: '回复状态',
-      component: 'Select',
+      component: 'RadioGroup',
       componentProps: {
         options: [
           { label: '已回复', value: true },
diff --git a/apps/web-antd/src/views/mall/product/comment/index.vue b/apps/web-antd/src/views/mall/product/comment/index.vue
index cbae411d4..8a5071615 100644
--- a/apps/web-antd/src/views/mall/product/comment/index.vue
+++ b/apps/web-antd/src/views/mall/product/comment/index.vue
@@ -70,17 +70,13 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新状态
-        const res = await updateCommentVisible({
+        await updateCommentVisible({
           id: row.id!,
           visible: newStatus,
         });
-        if (res) {
-          // 提示并返回成功
-          message.success(`${text}成功`);
-          resolve(true);
-        } else {
-          reject(new Error('操作失败'));
-        }
+        // 提示并返回成功
+        message.success(`${text}成功`);
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-antd/src/views/mall/product/spu/data.ts b/apps/web-antd/src/views/mall/product/spu/data.ts
index 138a2b53c..4373022bd 100644
--- a/apps/web-antd/src/views/mall/product/spu/data.ts
+++ b/apps/web-antd/src/views/mall/product/spu/data.ts
@@ -2,11 +2,17 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallSpuApi } from '#/api/mall/product/spu';
 
-import { handleTree } from '@vben/utils';
+import { fenToYuan, handleTree, treeToString } from '@vben/utils';
 
 import { getCategoryList } from '#/api/mall/product/category';
 import { getRangePickerDefaultProps } from '#/utils';
 
+/** 关联数据 */
+let categoryList: any[] = [];
+getCategoryList({}).then((data) => {
+  categoryList = handleTree(data, 'id', 'parentId', 'children');
+});
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -14,16 +20,19 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '商品名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入商品名称',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'categoryId',
       label: '商品分类',
       component: 'ApiTreeSelect',
       componentProps: {
-        api: async () => {
-          const res = await getCategoryList({});
-          return handleTree(res, 'id', 'parentId', 'children');
-        },
+        placeholder: '请选择商品分类',
+        allowClear: true,
+        options: categoryList,
         fieldNames: { label: 'name', value: 'id', children: 'children' },
       },
     },
@@ -47,16 +56,11 @@ export function useGridColumns(
   ) => PromiseLike<boolean | undefined>,
 ): VxeTableGridOptions['columns'] {
   return [
-    {
-      type: 'expand',
-      width: 80,
-      slots: { content: 'expand_content' },
-      fixed: 'left',
-    },
     {
       field: 'id',
       title: '商品编号',
       fixed: 'left',
+      minWidth: 100,
     },
     {
       field: 'name',
@@ -67,30 +71,23 @@ export function useGridColumns(
     {
       field: 'picUrl',
       title: '商品图片',
+      minWidth: 100,
       cellRender: {
         name: 'CellImage',
       },
     },
     {
-      field: 'price',
-      title: '价格',
-      formatter: 'formatAmount2',
-    },
-    {
-      field: 'salesCount',
-      title: '销量',
-    },
-    {
-      field: 'stock',
-      title: '库存',
-    },
-    {
-      field: 'sort',
-      title: '排序',
+      field: 'categoryId',
+      title: '商品分类',
+      minWidth: 150,
+      formatter: ({ row }) => {
+        return treeToString(categoryList, row.categoryId);
+      },
     },
     {
       field: 'status',
       title: '销售状态',
+      minWidth: 100,
       cellRender: {
         attrs: { beforeChange: onStatusChange },
         name: 'CellSwitch',
@@ -102,9 +99,57 @@ export function useGridColumns(
         },
       },
     },
+    {
+      field: 'price',
+      title: '价格',
+      minWidth: 100,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'marketPrice',
+      title: '市场价',
+      minWidth: 100,
+      formatter: ({ row }) => {
+        return `${fenToYuan(row.marketPrice)} 元`;
+      },
+    },
+    {
+      field: 'costPrice',
+      title: '成本价',
+      minWidth: 100,
+      formatter: ({ row }) => {
+        return `${fenToYuan(row.costPrice)} 元`;
+      },
+    },
+    {
+      field: 'salesCount',
+      title: '销量',
+      minWidth: 80,
+    },
+    {
+      field: 'virtualSalesCount',
+      title: '虚拟销量',
+      minWidth: 100,
+    },
+    {
+      field: 'stock',
+      title: '库存',
+      minWidth: 80,
+    },
+    {
+      field: 'browseCount',
+      title: '浏览量',
+      minWidth: 100,
+    },
+    {
+      field: 'sort',
+      title: '排序',
+      minWidth: 80,
+    },
     {
       field: 'createTime',
       title: '创建时间',
+      minWidth: 160,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/mall/product/spu/modules/form-data.ts b/apps/web-antd/src/views/mall/product/spu/form/data.ts
similarity index 76%
rename from apps/web-antd/src/views/mall/product/spu/modules/form-data.ts
rename to apps/web-antd/src/views/mall/product/spu/form/data.ts
index ad5cf83e5..d2ff7eeb5 100644
--- a/apps/web-antd/src/views/mall/product/spu/modules/form-data.ts
+++ b/apps/web-antd/src/views/mall/product/spu/form/data.ts
@@ -4,7 +4,6 @@ import { DeliveryTypeEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { handleTree } from '@vben/utils';
 
-import { z } from '#/adapter/form';
 import { getSimpleBrandList } from '#/api/mall/product/brand';
 import { getCategoryList } from '#/api/mall/product/category';
 import { getSimpleTemplateList } from '#/api/mall/trade/delivery/expressTemplate';
@@ -33,7 +32,6 @@ export function useInfoFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'categoryId',
       label: '分类名称',
-      // component: 'ApiCascader',
       component: 'ApiTreeSelect',
       componentProps: {
         api: async () => {
@@ -50,7 +48,7 @@ export function useInfoFormSchema(): VbenFormSchema[] {
       label: '商品品牌',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleBrandList(),
+        api: getSimpleBrandList,
         labelField: 'name',
         valueField: 'id',
         allowClear: true,
@@ -104,7 +102,10 @@ export function useInfoFormSchema(): VbenFormSchema[] {
 }
 
 /** 价格库存的表单 */
-export function useSkuFormSchema(): VbenFormSchema[] {
+export function useSkuFormSchema(
+  propertyList: any[] = [],
+  isDetail: boolean = false,
+): VbenFormSchema[] {
   return [
     {
       fieldName: 'id',
@@ -152,7 +153,51 @@ export function useSkuFormSchema(): VbenFormSchema[] {
       },
       rules: 'required',
     },
-    // TODO @xingyu：待补充商品属性
+    // 单规格时显示的 SkuList
+    {
+      fieldName: 'singleSkuList',
+      label: '',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['specType'],
+        // 当 specType 为 false（单规格）时显示
+        show: (values) => values.specType === false,
+      },
+    },
+    // 多规格时显示的商品属性（占位，实际通过插槽渲染）
+    {
+      fieldName: 'productAttributes',
+      label: '商品属性',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['specType'],
+        // 当 specType 为 true（多规格）时显示
+        show: (values) => values.specType === true,
+      },
+    },
+    // 多规格 - 批量设置
+    {
+      fieldName: 'batchSkuList',
+      label: '批量设置',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['specType'],
+        // 当 specType 为 true（多规格）且 propertyList 有数据时显示，且非详情模式
+        show: (values) =>
+          values.specType === true && propertyList.length > 0 && !isDetail,
+      },
+    },
+    // 多规格 - 规格列表
+    {
+      fieldName: 'multiSkuList',
+      label: '规格列表',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['specType'],
+        // 当 specType 为 true（多规格）且 propertyList 有数据时显示
+        show: (values) => values.specType === true && propertyList.length > 0,
+      },
+    },
   ];
 }
 
@@ -181,7 +226,7 @@ export function useDeliveryFormSchema(): VbenFormSchema[] {
       label: '运费模板',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleTemplateList(),
+        api: getSimpleTemplateList,
         labelField: 'name',
         valueField: 'id',
       },
@@ -238,7 +283,7 @@ export function useOtherFormSchema(): VbenFormSchema[] {
       componentProps: {
         min: 0,
       },
-      rules: z.number().min(0).optional().default(0),
+      rules: 'required',
     },
     {
       fieldName: 'giveIntegral',
@@ -247,7 +292,7 @@ export function useOtherFormSchema(): VbenFormSchema[] {
       componentProps: {
         min: 0,
       },
-      rules: z.number().min(0).optional().default(0),
+      rules: 'required',
     },
     {
       fieldName: 'virtualSalesCount',
@@ -256,7 +301,7 @@ export function useOtherFormSchema(): VbenFormSchema[] {
       componentProps: {
         min: 0,
       },
-      rules: z.number().min(0).optional().default(0),
+      rules: 'required',
     },
   ];
 }
diff --git a/apps/web-antd/src/views/mall/product/spu/form/index.ts b/apps/web-antd/src/views/mall/product/spu/form/index.ts
new file mode 100644
index 000000000..3ba57c4d9
--- /dev/null
+++ b/apps/web-antd/src/views/mall/product/spu/form/index.ts
@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+// TODO @puhui999：这个是不是 api 后端有定义类似的？如果是，是不是放到 api 哈？
+export interface PropertyAndValues {
+  id: number;
+  name: string;
+  values?: PropertyAndValues[];
+}
+
+export interface RuleConfig {
+  // 需要校验的字段
+  // 例：name: 'name' 则表示校验 sku.name 的值
+  // 例：name: 'productConfig.stock' 则表示校验 sku.productConfig.name 的值,此处 productConfig 表示我在 Sku 上扩展的属性
+  name: string;
+  // 校验规格为一个毁掉函数，其中 arg 为需要校验的字段的值。
+  // 例：需要校验价格必须大于0.01
+  // {
+  //  name:'price',
+  //  rule:(arg: number) => arg > 0.01
+  // }
+  rule: (arg: any) => boolean;
+  // 校验不通过时的消息提示
+  message: string;
+}
+
+// TODO @puhui999：这个是只有 index.ts 在用么？还是别的模块也会用
+/** 获得商品的规格列表 - 商品相关的公共函数 */
+const getPropertyList = (spu: MallSpuApi.Spu): PropertyAndValues[] => {
+  //  直接拿返回的 skus 属性逆向生成出 propertyList
+  const properties: PropertyAndValues[] = [];
+  // 只有是多规格才处理
+  if (spu.specType) {
+    spu.skus?.forEach((sku) => {
+      sku.properties?.forEach(
+        ({ propertyId, propertyName, valueId, valueName }) => {
+          // 添加属性
+          if (!properties?.some((item) => item.id === propertyId)) {
+            properties.push({
+              id: propertyId!,
+              name: propertyName!,
+              values: [],
+            });
+          }
+          // 添加属性值
+          const index = properties?.findIndex((item) => item.id === propertyId);
+          if (
+            !properties[index]?.values?.some((value) => value.id === valueId)
+          ) {
+            properties[index]?.values?.push({ id: valueId!, name: valueName! });
+          }
+        },
+      );
+    });
+  }
+  return properties;
+};
+
+export { getPropertyList };
+
+// 导出组件
+// TODO @puhui999：如果 sku-list.vue 要对外，可以考虑在 spu 下面，搞个 components 模块；（目前看，别的模块应该会用到哈。）；modules 是当前模块用到的，components 是跨模块要用到的。
+export { default as SkuList } from './modules/sku-list.vue';
diff --git a/apps/web-antd/src/views/mall/product/spu/form/index.vue b/apps/web-antd/src/views/mall/product/spu/form/index.vue
new file mode 100644
index 000000000..8e9144cca
--- /dev/null
+++ b/apps/web-antd/src/views/mall/product/spu/form/index.vue
@@ -0,0 +1,418 @@
+<script lang="ts" setup>
+import type { PropertyAndValues, RuleConfig } from './index';
+
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+import { convertToInteger, formatToFraction } from '@vben/utils';
+
+import { Button, Card, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createSpu, getSpu, updateSpu } from '#/api/mall/product/spu';
+
+import {
+  useDeliveryFormSchema,
+  useDescriptionFormSchema,
+  useInfoFormSchema,
+  useOtherFormSchema,
+  useSkuFormSchema,
+} from './data';
+import { getPropertyList } from './index';
+import ProductAttributes from './modules/product-attributes.vue';
+import ProductPropertyAddForm from './modules/product-property-add-form.vue';
+import SkuList from './modules/sku-list.vue';
+
+const spuId = ref<number>();
+const { params, name } = useRoute();
+const { closeCurrentTab } = useTabs();
+const activeTabName = ref('info');
+const tabList = ref([
+  {
+    key: 'info',
+    tab: '基础设置',
+  },
+  {
+    key: 'sku',
+    tab: '价格库存',
+  },
+  {
+    key: 'delivery',
+    tab: '物流设置',
+  },
+  {
+    key: 'description',
+    tab: '商品详情',
+  },
+  {
+    key: 'other',
+    tab: '其它设置',
+  },
+]);
+
+const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const isDetail = ref(name === 'ProductSpuDetail'); // 是否查看详情
+const skuListRef = ref(); // 商品属性列表 Ref
+
+const formData = ref<MallSpuApi.Spu>({
+  name: '',
+  categoryId: undefined,
+  keyword: '',
+  picUrl: '',
+  sliderPicUrls: [],
+  introduction: '',
+  deliveryTypes: [],
+  deliveryTemplateId: undefined,
+  brandId: undefined,
+  specType: false,
+  subCommissionType: false,
+  skus: [
+    {
+      price: 0,
+      marketPrice: 0,
+      costPrice: 0,
+      barCode: '',
+      picUrl: '',
+      stock: 0,
+      weight: 0,
+      volume: 0,
+      firstBrokeragePrice: 0,
+      secondBrokeragePrice: 0,
+    },
+  ],
+  description: '',
+  sort: 0,
+  giveIntegral: 0,
+  virtualSalesCount: 0,
+}); // spu 表单数据
+const propertyList = ref<PropertyAndValues[]>([]); // 商品属性列表
+const ruleConfig: RuleConfig[] = [
+  {
+    name: 'stock',
+    rule: (arg) => arg >= 0,
+    message: '商品库存必须大于等于 1 ！！！',
+  },
+  {
+    name: 'price',
+    rule: (arg) => arg >= 0.01,
+    message: '商品销售价格必须大于等于 0.01 元！！！',
+  },
+  {
+    name: 'marketPrice',
+    rule: (arg) => arg >= 0.01,
+    message: '商品市场价格必须大于等于 0.01 元！！！',
+  },
+  {
+    name: 'costPrice',
+    rule: (arg) => arg >= 0.01,
+    message: '商品成本价格必须大于等于 0.00 元！！！',
+  },
+]; // sku 相关属性校验规则
+
+const [InfoForm, infoFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useInfoFormSchema(),
+  showDefaultActions: false,
+});
+
+const [SkuForm, skuFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useSkuFormSchema(propertyList.value, isDetail.value),
+  showDefaultActions: false,
+  handleValuesChange: (values, fieldsChanged) => {
+    if (fieldsChanged.includes('subCommissionType')) {
+      formData.value.subCommissionType = values.subCommissionType;
+      handleChangeSubCommissionType();
+    }
+    if (fieldsChanged.includes('specType')) {
+      formData.value.specType = values.specType;
+      handleChangeSpec();
+    }
+  },
+});
+
+const [ProductPropertyAddFormModal, productPropertyAddFormApi] = useVbenModal({
+  connectedComponent: ProductPropertyAddForm,
+  destroyOnClose: true,
+});
+
+const [DeliveryForm, deliveryFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useDeliveryFormSchema(),
+  showDefaultActions: false,
+});
+
+const [DescriptionForm, descriptionFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'vertical',
+  schema: useDescriptionFormSchema(),
+  showDefaultActions: false,
+});
+
+const [OtherForm, otherFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useOtherFormSchema(),
+  showDefaultActions: false,
+});
+
+/** tab 切换 */
+function handleTabChange(key: string) {
+  activeTabName.value = key;
+}
+
+/** 提交表单 */
+async function handleSubmit() {
+  const values: MallSpuApi.Spu = await infoFormApi
+    .merge(skuFormApi)
+    .merge(deliveryFormApi)
+    .merge(descriptionFormApi)
+    .merge(otherFormApi)
+    .submitAllForm(true);
+  values.skus = formData.value.skus;
+  if (values.skus) {
+    try {
+      // 校验 sku
+      skuListRef.value.validateSku();
+    } catch {
+      message.error('【库存价格】不完善，请填写相关信息');
+      return;
+    }
+    values.skus.forEach((item) => {
+      // 金额转换：元转分
+      item.price = convertToInteger(item.price);
+      item.marketPrice = convertToInteger(item.marketPrice);
+      item.costPrice = convertToInteger(item.costPrice);
+      item.firstBrokeragePrice = convertToInteger(item.firstBrokeragePrice);
+      item.secondBrokeragePrice = convertToInteger(item.secondBrokeragePrice);
+    });
+  }
+  // 处理轮播图列表 TODO @puhui999：这个是必须的哇？
+  const newSliderPicUrls: any[] = [];
+  values.sliderPicUrls!.forEach((item: any) => {
+    // 如果是前端选的图
+    typeof item === 'object'
+      ? newSliderPicUrls.push(item.url)
+      : newSliderPicUrls.push(item);
+  });
+  values.sliderPicUrls = newSliderPicUrls;
+
+  // 提交数据
+  await (spuId.value ? updateSpu(values) : createSpu(values));
+}
+
+/** 获得详情 */
+async function getDetail() {
+  if (isDetail.value) {
+    isDetail.value = true;
+    infoFormApi.setDisabled(true);
+    skuFormApi.setDisabled(true);
+    deliveryFormApi.setDisabled(true);
+    descriptionFormApi.setDisabled(true);
+    otherFormApi.setDisabled(true);
+  }
+  // 将 SKU 的属性，整理成 PropertyAndValues 数组
+  propertyList.value = getPropertyList(formData.value);
+  formLoading.value = true;
+  try {
+    const res = await getSpu(spuId.value!);
+    // 金额转换：元转分
+    res.skus?.forEach((item) => {
+      item.price = formatToFraction(item.price);
+      item.marketPrice = formatToFraction(item.marketPrice);
+      item.costPrice = formatToFraction(item.costPrice);
+      item.firstBrokeragePrice = formatToFraction(item.firstBrokeragePrice);
+      item.secondBrokeragePrice = formatToFraction(item.secondBrokeragePrice);
+    });
+    formData.value = res;
+    // 初始化各表单值
+    infoFormApi.setValues(res).then();
+    skuFormApi.setValues(res).then();
+    deliveryFormApi.setValues(res).then();
+    descriptionFormApi.setValues(res).then();
+    otherFormApi.setValues(res).then();
+    // 将 SKU 的属性，整理成 PropertyAndValues 数组
+    propertyList.value = getPropertyList(formData.value);
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+// =========== sku form 逻辑 ===========
+
+/** 打开属性添加表单 */
+function openPropertyAddForm() {
+  productPropertyAddFormApi.open();
+}
+
+/** 调用 SkuList generateTableData 方法*/
+function generateSkus(propertyList: PropertyAndValues[]) {
+  skuListRef.value.generateTableData(propertyList);
+}
+
+/** 分销类型 */
+function handleChangeSubCommissionType() {
+  // 默认为零，类型切换后也要重置为零
+  for (const item of formData.value.skus!) {
+    item.firstBrokeragePrice = 0;
+    item.secondBrokeragePrice = 0;
+  }
+}
+
+/** 选择规格 */
+function handleChangeSpec() {
+  // 重置商品属性列表
+  propertyList.value = [];
+  // 重置 sku 列表
+  formData.value.skus = [
+    {
+      price: 0,
+      marketPrice: 0,
+      costPrice: 0,
+      barCode: '',
+      picUrl: '',
+      stock: 0,
+      weight: 0,
+      volume: 0,
+      firstBrokeragePrice: 0,
+      secondBrokeragePrice: 0,
+    },
+  ];
+}
+
+/** 监听 sku form schema 变化，更新表单 */
+watch(
+  propertyList,
+  () => {
+    skuFormApi.updateSchema(
+      useSkuFormSchema(propertyList.value, isDetail.value),
+    );
+  },
+  { deep: true },
+);
+
+/** 初始化 */
+onMounted(async () => {
+  spuId.value = params.id as unknown as number;
+  if (!spuId.value) {
+    return;
+  }
+  await getDetail();
+});
+</script>
+
+<template>
+  <div>
+    <ProductPropertyAddFormModal :property-list="propertyList" />
+
+    <Page auto-content-height>
+      <Card
+        class="h-full w-full"
+        :loading="formLoading"
+        :tab-list="tabList"
+        :active-key="activeTabName"
+        @tab-change="handleTabChange"
+      >
+        <template #tabBarExtraContent>
+          <Button type="primary" v-if="!isDetail" @click="handleSubmit">
+            保存
+          </Button>
+          <Button type="default" v-else @click="() => closeCurrentTab()">
+            返回列表
+          </Button>
+        </template>
+
+        <InfoForm class="w-3/5" v-show="activeTabName === 'info'" />
+        <SkuForm class="w-full" v-show="activeTabName === 'sku'">
+          <template #singleSkuList>
+            <SkuList
+              ref="skuListRef"
+              :is-detail="isDetail"
+              :prop-form-data="formData"
+              :property-list="propertyList"
+              :rule-config="ruleConfig"
+            />
+          </template>
+          <template #productAttributes>
+            <div>
+              <Button class="mb-10px mr-15px" @click="openPropertyAddForm">
+                添加属性
+              </Button>
+              <ProductAttributes
+                :is-detail="isDetail"
+                :property-list="propertyList"
+                @success="generateSkus"
+              />
+            </div>
+          </template>
+          <template #batchSkuList>
+            <SkuList
+              :is-batch="true"
+              :is-detail="isDetail"
+              :prop-form-data="formData"
+              :property-list="propertyList"
+            />
+          </template>
+          <template #multiSkuList>
+            <SkuList
+              ref="skuListRef"
+              :is-detail="isDetail"
+              :prop-form-data="formData"
+              :property-list="propertyList"
+              :rule-config="ruleConfig"
+            />
+          </template>
+        </SkuForm>
+        <DeliveryForm class="w-3/5" v-show="activeTabName === 'delivery'" />
+        <DescriptionForm
+          class="w-3/5"
+          v-show="activeTabName === 'description'"
+        />
+        <OtherForm class="w-3/5" v-show="activeTabName === 'other'" />
+      </Card>
+    </Page>
+  </div>
+</template>
+<style lang="scss" scoped>
+// TODO @puhui999：这个样式是必须的哇？
+:deep(.ant-tabs-tab-btn) {
+  font-size: 14px !important;
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/product/spu/form/modules/product-attributes.vue b/apps/web-antd/src/views/mall/product/spu/form/modules/product-attributes.vue
new file mode 100644
index 000000000..23dba4059
--- /dev/null
+++ b/apps/web-antd/src/views/mall/product/spu/form/modules/product-attributes.vue
@@ -0,0 +1,230 @@
+<!-- 商品发布 - 库存价格 - 属性列表 -->
+<script lang="ts" setup>
+import type { PropertyAndValues } from '../index';
+
+import type { MallPropertyApi } from '#/api/mall/product/property';
+
+import { computed, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Col, Divider, message, Select, Tag } from 'ant-design-vue';
+
+import {
+  createPropertyValue,
+  getPropertyValueSimpleList,
+} from '#/api/mall/product/property';
+import { $t } from '#/locales';
+
+defineOptions({ name: 'ProductAttributes' });
+
+const props = withDefaults(defineProps<Props>(), {
+  propertyList: () => [],
+  isDetail: false,
+});
+
+const emit = defineEmits(['success']);
+
+interface Props {
+  propertyList?: PropertyAndValues[];
+  isDetail?: boolean;
+}
+
+const inputValue = ref<string[]>([]); // 输入框值（tags 模式使用数组）
+const attributeIndex = ref<null | number>(null); // 获取焦点时记录当前属性项的 index
+const inputVisible = computed(() => (index: number) => {
+  if (attributeIndex.value === null) {
+    return false;
+  }
+  if (attributeIndex.value === index) {
+    return true;
+  }
+}); // 输入框显隐控制
+
+interface InputRefItem {
+  inputRef?: {
+    attributes: {
+      id: string;
+    };
+  };
+  focus: () => void;
+}
+
+const inputRef = ref<InputRefItem[]>([]); // 标签输入框 Ref
+const attributeList = ref<PropertyAndValues[]>([]); // 商品属性列表
+const attributeOptions = ref<MallPropertyApi.PropertyValue[]>([]); // 商品属性值下拉框
+
+/** 解决 ref 在 v-for 中的获取问题*/
+function setInputRef(el: any) {
+  if (el === null || el === undefined) return;
+  // 如果不存在 id 相同的元素才添加
+  if (
+    !inputRef.value.some(
+      (item) => item.inputRef?.attributes.id === el.inputRef?.attributes.id,
+    )
+  ) {
+    inputRef.value.push(el);
+  }
+}
+
+watch(
+  () => props.propertyList,
+  (data) => {
+    if (!data) {
+      return;
+    }
+    attributeList.value = data;
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+
+/** 删除属性值 */
+function handleCloseValue(index: number, value: PropertyAndValues) {
+  if (attributeList.value[index]) {
+    attributeList.value[index].values = attributeList.value?.[
+      index
+    ]?.values?.filter((item) => item.id !== value.id);
+  }
+}
+
+/** 删除属性 */
+function handleCloseProperty(item: PropertyAndValues) {
+  attributeList.value = attributeList.value.filter(
+    (attribute) => attribute.id !== item.id,
+  );
+  emit('success', attributeList.value);
+}
+
+/** 显示输入框并获取焦点 */
+async function showInput(index: number) {
+  attributeIndex.value = index;
+  inputRef.value?.[index]?.focus();
+  // 获取属性下拉选项
+  await getAttributeOptions(attributeList.value?.[index]?.id!);
+}
+
+/** 定义 success 事件，用于操作成功后的回调 */
+async function handleInputConfirm(index: number, propertyId: number) {
+  // 从数组中取最后一个输入的值（tags 模式下 inputValue 是数组）
+  const currentValue = inputValue.value?.[inputValue.value.length - 1]?.trim();
+
+  if (currentValue) {
+    // 1. 重复添加校验
+    if (
+      attributeList.value?.[index]?.values?.find(
+        (item) => item.name === currentValue,
+      )
+    ) {
+      message.warning('已存在相同属性值，请重试');
+      attributeIndex.value = null;
+      inputValue.value = [];
+      return;
+    }
+
+    // 2.1 情况一：属性值已存在，则直接使用并结束
+    const existValue = attributeOptions.value.find(
+      (item) => item.name === currentValue,
+    );
+    if (existValue) {
+      attributeIndex.value = null;
+      inputValue.value = [];
+      attributeList.value?.[index]?.values?.push({
+        id: existValue.id!,
+        name: existValue.name,
+      });
+      emit('success', attributeList.value);
+      return;
+    }
+
+    // 2.2 情况二：新属性值，则进行保存
+    try {
+      const id = await createPropertyValue({
+        propertyId,
+        name: currentValue,
+      });
+      attributeList.value?.[index]?.values?.push({
+        id,
+        name: currentValue,
+      });
+      message.success($t('ui.actionMessage.operationSuccess'));
+      emit('success', attributeList.value);
+    } catch {
+      message.error($t('ui.actionMessage.operationFailed'));
+    }
+  }
+  attributeIndex.value = null;
+  inputValue.value = [];
+}
+
+/** 获取商品属性下拉选项 */
+async function getAttributeOptions(propertyId: number) {
+  attributeOptions.value = await getPropertyValueSimpleList(propertyId);
+}
+</script>
+
+<template>
+  <Col v-for="(attribute, index) in attributeList" :key="index">
+    <Divider class="my-4" />
+    <!-- TODO @puhui999：1）间隙可以看看；2)vue3 + element-plus 添加属性这个按钮，是和属性名在一排，感觉更好看点。 -->
+    <div class="mt-1">
+      <span class="mx-1">属性名：</span>
+      <Tag
+        :closable="!isDetail"
+        class="mx-1"
+        color="success"
+        @close="handleCloseProperty(attribute)"
+      >
+        {{ attribute.name }}
+      </Tag>
+    </div>
+    <div class="mt-2">
+      <span class="mx-1">属性值：</span>
+      <Tag
+        v-for="(value, valueIndex) in attribute.values"
+        :key="valueIndex"
+        :closable="!isDetail"
+        class="mx-1"
+        @close="handleCloseValue(index, value)"
+      >
+        <!-- TODO @puhui999：这里貌似爆红？！idea -->
+        {{ value.name }}
+      </Tag>
+      <Select
+        v-show="inputVisible(index)"
+        :id="`input${index}`"
+        :ref="setInputRef"
+        v-model:value="inputValue"
+        allow-clear
+        mode="tags"
+        :max-tag-count="1"
+        :filter-option="true"
+        size="small"
+        style="width: 100px"
+        @blur="handleInputConfirm(index, attribute.id)"
+        @change="handleInputConfirm(index, attribute.id)"
+        @keyup.enter="handleInputConfirm(index, attribute.id)"
+      >
+        <Select.Option
+          v-for="item2 in attributeOptions"
+          :key="item2.id"
+          :value="item2.name"
+        >
+          {{ item2.name }}
+        </Select.Option>
+      </Select>
+      <Tag
+        v-show="!inputVisible(index)"
+        @click="showInput(index)"
+        class="mx-1 border-dashed bg-gray-100"
+      >
+        <div class="flex items-center">
+          <IconifyIcon class="mr-2" icon="lucide:plus" />
+          添加
+        </div>
+      </Tag>
+    </div>
+  </Col>
+</template>
diff --git a/apps/web-antd/src/views/mall/product/spu/form/modules/product-property-add-form.vue b/apps/web-antd/src/views/mall/product/spu/form/modules/product-property-add-form.vue
new file mode 100644
index 000000000..f6b4f0548
--- /dev/null
+++ b/apps/web-antd/src/views/mall/product/spu/form/modules/product-property-add-form.vue
@@ -0,0 +1,147 @@
+<!-- 商品发布 - 库存价格 - 添加属性 -->
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { MallPropertyApi } from '#/api/mall/product/property';
+
+import { ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createProperty,
+  getPropertySimpleList,
+} from '#/api/mall/product/property';
+import { $t } from '#/locales';
+
+defineOptions({ name: 'ProductPropertyAddForm' });
+
+const props = defineProps({
+  propertyList: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits<{
+  success: [];
+}>();
+
+const attributeList = ref<any[]>([]); // 商品属性列表
+const attributeOptions = ref<MallPropertyApi.Property[]>([]); // 商品属性名称下拉框
+
+watch(
+  () => props.propertyList,
+  (data) => {
+    if (!data) {
+      return;
+    }
+    attributeList.value = data as any[];
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+
+const formSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'name',
+    label: '属性名称',
+    component: 'ApiSelect',
+    componentProps: {
+      api: async () => {
+        const data = await getPropertySimpleList();
+        attributeOptions.value = data;
+        return data.map((item: MallPropertyApi.Property) => ({
+          label: item.name,
+          value: item.name,
+        }));
+      },
+      showSearch: true,
+      filterOption: true,
+      placeholder: '请选择属性名称。如果不存在，可手动输入选择',
+      mode: 'tags',
+      allowClear: true,
+    },
+    rules: 'required',
+  },
+];
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: formSchema,
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    const values = await formApi.getValues();
+    // name 为数组，遍历数组，进行重复添加校验
+    const names = values.name;
+    for (const name of names) {
+      // 重复添加校验
+      for (const attrItem of attributeList.value) {
+        if (attrItem.name === name) {
+          message.error('该属性已存在，请勿重复添加');
+          return;
+        }
+      }
+    }
+
+    for (const name of names) {
+      const existProperty = attributeOptions.value.find(
+        (item: MallPropertyApi.Property) => item.name === name,
+      );
+      if (existProperty) {
+        // 情况一：如果属性已存在，则直接使用并结束
+        attributeList.value.push({
+          id: existProperty.id,
+          name,
+          values: [],
+        });
+      } else {
+        // 情况二：如果是不存在的属性，则需要执行新增
+        const propertyId = await createProperty({ name });
+        attributeList.value.push({
+          id: propertyId,
+          name,
+          values: [],
+        });
+      }
+    }
+    message.success($t('ui.actionMessage.operationSuccess'));
+    modalApi.unlock();
+    await modalApi.close();
+    emit('success');
+  },
+
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    await formApi.resetForm();
+  },
+});
+</script>
+
+<template>
+  <Modal title="添加商品属性">
+    <Form />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mall/product/spu/form/modules/sku-list.vue b/apps/web-antd/src/views/mall/product/spu/form/modules/sku-list.vue
new file mode 100644
index 000000000..b3df262c1
--- /dev/null
+++ b/apps/web-antd/src/views/mall/product/spu/form/modules/sku-list.vue
@@ -0,0 +1,610 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import type { PropertyAndValues, RuleConfig } from '../index';
+
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { ref, watch } from 'vue';
+
+import { copyValueToTarget, formatToFraction, isEmpty } from '@vben/utils';
+
+import { Button, Image, Input, InputNumber, message } from 'ant-design-vue';
+
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import { ImageUpload } from '#/components/upload';
+
+defineOptions({ name: 'SkuList' });
+
+const props = withDefaults(
+  defineProps<{
+    isActivityComponent?: boolean; // 是否作为 sku 活动配置组件
+    isBatch?: boolean; // 是否作为批量操作组件
+    isComponent?: boolean; // 是否作为 sku 选择组件
+    isDetail?: boolean; // 是否作为 sku 详情组件
+    propertyList?: PropertyAndValues[];
+    propFormData?: MallSpuApi.Spu;
+    ruleConfig?: RuleConfig[];
+  }>(),
+  {
+    propFormData: () => ({}) as MallSpuApi.Spu,
+    propertyList: () => [],
+    ruleConfig: () => [],
+    isBatch: false,
+    isDetail: false,
+    isComponent: false,
+    isActivityComponent: false,
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'selectionChange', value: MallSpuApi.Sku[]): void;
+}>();
+
+const { isBatch, isDetail, isComponent, isActivityComponent } = props;
+
+const formData: Ref<MallSpuApi.Spu | undefined> = ref<MallSpuApi.Spu>(); // 表单数据
+const skuList = ref<MallSpuApi.Sku[]>([
+  {
+    price: 0,
+    marketPrice: 0,
+    costPrice: 0,
+    barCode: '',
+    picUrl: '',
+    stock: 0,
+    weight: 0,
+    volume: 0,
+    firstBrokeragePrice: 0,
+    secondBrokeragePrice: 0,
+  },
+]); // 批量添加时的临时数据
+
+/** 批量添加 */
+function batchAdd() {
+  validateProperty();
+  formData.value!.skus!.forEach((item: MallSpuApi.Sku) => {
+    copyValueToTarget(item, skuList.value[0]);
+  });
+}
+
+/** 校验商品属性属性值 */
+function validateProperty() {
+  // 校验商品属性属性值是否为空，有一个为空都不给过
+  const warningInfo = '存在属性属性值为空，请先检查完善属性值后重试！！！';
+  for (const item of props.propertyList as PropertyAndValues[]) {
+    if (!item.values || isEmpty(item.values)) {
+      message.warning(warningInfo);
+      throw new Error(warningInfo);
+    }
+  }
+}
+
+/** 删除 sku */
+function deleteSku(row: MallSpuApi.Sku) {
+  const index = formData.value!.skus!.findIndex(
+    // 直接把列表转成字符串比较
+    (sku: MallSpuApi.Sku) =>
+      JSON.stringify(sku.properties) === JSON.stringify(row.properties),
+  );
+  formData.value!.skus!.splice(index, 1);
+}
+
+const tableHeaders = ref<{ label: string; prop: string }[]>([]); // 多属性表头
+
+/** 保存时，每个商品规格的表单要校验下。例如说,销售金额最低是 0.01 这种 */
+function validateSku() {
+  validateProperty();
+  let warningInfo = '请检查商品各行相关属性配置，';
+  let validate = true; // 默认通过
+  for (const sku of formData.value!.skus!) {
+    // 作为活动组件的校验
+    for (const rule of props?.ruleConfig as RuleConfig[]) {
+      const arg = getValue(sku, rule.name);
+      if (!rule.rule(arg)) {
+        validate = false; // 只要有一个不通过则直接不通过
+        warningInfo += rule.message;
+        break;
+      }
+    }
+    // 只要有一个不通过则结束后续的校验
+    if (!validate) {
+      message.warning(warningInfo);
+      throw new Error(warningInfo);
+    }
+  }
+}
+
+// TODO @puhui999：是不是可以通过 getNestedValue  简化？
+function getValue(obj: any, arg: string): unknown {
+  const keys = arg.split('.');
+  let value: any = obj;
+  for (const key of keys) {
+    if (value && typeof value === 'object' && key in value) {
+      value = value[key];
+    } else {
+      value = undefined;
+      break;
+    }
+  }
+  return value;
+}
+
+/**
+ * 选择时触发
+ *
+ * @param records 传递过来的选中的 sku 是一个数组
+ */
+function handleSelectionChange({ records }: { records: MallSpuApi.Sku[] }) {
+  emit('selectionChange', records);
+}
+
+/** 将传进来的值赋值给 skuList */
+watch(
+  () => props.propFormData,
+  (data) => {
+    if (!data) {
+      return;
+    }
+    formData.value = data;
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+
+/** 生成表数据 */
+function generateTableData(propertyList: PropertyAndValues[]) {
+  // 构建数据结构
+  const propertyValues = propertyList.map((item: PropertyAndValues) =>
+    (item.values || []).map((v: { id: number; name: string }) => ({
+      propertyId: item.id,
+      propertyName: item.name,
+      valueId: v.id,
+      valueName: v.name,
+    })),
+  );
+  const buildSkuList = build(propertyValues);
+  // 如果回显的 sku 属性和添加的属性不一致则重置 skus 列表
+  if (!validateData(propertyList)) {
+    // 如果不一致则重置表数据，默认添加新的属性重新生成 sku 列表
+    formData.value!.skus = [];
+  }
+  for (const item of buildSkuList) {
+    const row = {
+      properties: Array.isArray(item) ? item : [item], // 如果只有一个属性的话返回的是一个 property 对象
+      price: 0,
+      marketPrice: 0,
+      costPrice: 0,
+      barCode: '',
+      picUrl: '',
+      stock: 0,
+      weight: 0,
+      volume: 0,
+      firstBrokeragePrice: 0,
+      secondBrokeragePrice: 0,
+    };
+    // 如果存在属性相同的 sku 则不做处理
+    const index = formData.value!.skus!.findIndex(
+      (sku: MallSpuApi.Sku) =>
+        JSON.stringify(sku.properties) === JSON.stringify(row.properties),
+    );
+    if (index !== -1) {
+      continue;
+    }
+    formData.value!.skus!.push(row);
+  }
+}
+
+/** 生成 skus 前置校验 */
+function validateData(propertyList: PropertyAndValues[]): boolean {
+  const skuPropertyIds: number[] = [];
+  formData.value!.skus!.forEach((sku: MallSpuApi.Sku) =>
+    sku.properties
+      ?.map((property: MallSpuApi.Property) => property.propertyId)
+      ?.forEach((propertyId?: number) => {
+        if (!skuPropertyIds.includes(propertyId!)) {
+          skuPropertyIds.push(propertyId!);
+        }
+      }),
+  );
+  const propertyIds = propertyList.map((item: PropertyAndValues) => item.id);
+  return skuPropertyIds.length === propertyIds.length;
+}
+
+/** 构建所有排列组合 */
+function build(
+  propertyValuesList: MallSpuApi.Property[][],
+): (MallSpuApi.Property | MallSpuApi.Property[])[] {
+  if (propertyValuesList.length === 0) {
+    return [];
+  } else if (propertyValuesList.length === 1) {
+    return propertyValuesList[0] || [];
+  } else {
+    const result: MallSpuApi.Property[][] = [];
+    const rest = build(propertyValuesList.slice(1));
+    const firstList = propertyValuesList[0];
+    if (!firstList) return [];
+
+    for (const element of firstList) {
+      for (const element_ of rest) {
+        // 第一次不是数组结构，后面的都是数组结构
+        if (Array.isArray(element_)) {
+          result.push([element!, ...(element_ as MallSpuApi.Property[])]);
+        } else {
+          result.push([element!, element_ as MallSpuApi.Property]);
+        }
+      }
+    }
+    return result;
+  }
+}
+
+/** 监听属性列表，生成相关参数和表头 */
+watch(
+  () => props.propertyList as PropertyAndValues[],
+  (propertyList: PropertyAndValues[]) => {
+    // 如果不是多规格则结束
+    if (!formData.value!.specType) {
+      return;
+    }
+    // 如果当前组件作为批量添加数据使用，则重置表数据
+    if (props.isBatch) {
+      skuList.value = [
+        {
+          price: 0,
+          marketPrice: 0,
+          costPrice: 0,
+          barCode: '',
+          picUrl: '',
+          stock: 0,
+          weight: 0,
+          volume: 0,
+          firstBrokeragePrice: 0,
+          secondBrokeragePrice: 0,
+        },
+      ];
+    }
+
+    // 判断代理对象是否为空
+    if (JSON.stringify(propertyList) === '[]') {
+      return;
+    }
+    // 重置表头
+    tableHeaders.value = [];
+    // 生成表头
+    propertyList.forEach((item, index) => {
+      // name加属性项index区分属性值
+      tableHeaders.value.push({ prop: `name${index}`, label: item.name });
+    });
+    // 如果回显的 sku 属性和添加的属性一致则不处理
+    if (validateData(propertyList)) {
+      return;
+    }
+    // 添加新属性没有属性值也不做处理
+    if (propertyList.some((item) => !item.values || isEmpty(item.values))) {
+      return;
+    }
+    // 生成 table 数据，即 sku 列表
+    generateTableData(propertyList);
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+
+const activitySkuListRef = ref();
+
+function getSkuTableRef() {
+  return activitySkuListRef.value;
+}
+
+defineExpose({ generateTableData, validateSku, getSkuTableRef });
+</script>
+
+<template>
+  <div>
+    <!-- 情况一：添加/修改 -->
+    <!-- TODO @puhui999：有可以通过 grid 来做么？主要考虑，这样不直接使用 vxe 标签，抽象程度更高； -->
+    <VxeTable
+      v-if="!isDetail && !isActivityComponent"
+      :data="isBatch ? skuList : formData?.skus || []"
+      border
+      max-height="500"
+      size="small"
+      class="w-full"
+    >
+      <VxeColumn align="center" title="图片" min-width="120">
+        <template #default="{ row }">
+          <ImageUpload
+            v-model:value="row.picUrl"
+            :max-number="1"
+            :max-size="2"
+            :show-description="false"
+          />
+        </template>
+      </VxeColumn>
+      <template v-if="formData?.specType && !isBatch">
+        <!-- 根据商品属性动态添加 -->
+        <VxeColumn
+          v-for="(item, index) in tableHeaders"
+          :key="index"
+          :title="item.label"
+          align="center"
+          min-width="120"
+        >
+          <template #default="{ row }">
+            <span class="font-bold text-[#40aaff]">
+              {{ row.properties?.[index]?.valueName }}
+            </span>
+          </template>
+        </VxeColumn>
+      </template>
+      <VxeColumn align="center" title="商品条码" min-width="168">
+        <template #default="{ row }">
+          <Input v-model:value="row.barCode" class="w-full" />
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="销售价" min-width="168">
+        <template #default="{ row }">
+          <InputNumber
+            v-model:value="row.price"
+            :min="0"
+            :precision="2"
+            :step="0.1"
+            class="w-full"
+          />
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="市场价" min-width="168">
+        <template #default="{ row }">
+          <InputNumber
+            v-model:value="row.marketPrice"
+            :min="0"
+            :precision="2"
+            :step="0.1"
+            class="w-full"
+          />
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="成本价" min-width="168">
+        <template #default="{ row }">
+          <InputNumber
+            v-model:value="row.costPrice"
+            :min="0"
+            :precision="2"
+            :step="0.1"
+            class="w-full"
+          />
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="库存" min-width="168">
+        <template #default="{ row }">
+          <InputNumber v-model:value="row.stock" :min="0" class="w-full" />
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="重量(kg)" min-width="168">
+        <template #default="{ row }">
+          <InputNumber
+            v-model:value="row.weight"
+            :min="0"
+            :precision="2"
+            :step="0.1"
+            class="w-full"
+          />
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="体积(m^3)" min-width="168">
+        <template #default="{ row }">
+          <InputNumber
+            v-model:value="row.volume"
+            :min="0"
+            :precision="2"
+            :step="0.1"
+            class="w-full"
+          />
+        </template>
+      </VxeColumn>
+      <template v-if="formData?.subCommissionType">
+        <VxeColumn align="center" title="一级返佣(元)" min-width="168">
+          <template #default="{ row }">
+            <InputNumber
+              v-model:value="row.firstBrokeragePrice"
+              :min="0"
+              :precision="2"
+              :step="0.1"
+              class="w-full"
+            />
+          </template>
+        </VxeColumn>
+        <VxeColumn align="center" title="二级返佣(元)" min-width="168">
+          <template #default="{ row }">
+            <InputNumber
+              v-model:value="row.secondBrokeragePrice"
+              :min="0"
+              :precision="2"
+              :step="0.1"
+              class="w-full"
+            />
+          </template>
+        </VxeColumn>
+      </template>
+      <VxeColumn
+        v-if="formData?.specType"
+        align="center"
+        fixed="right"
+        title="操作"
+        width="100"
+      >
+        <template #default="{ row }">
+          <Button v-if="isBatch" type="link" size="small" @click="batchAdd">
+            批量添加
+          </Button>
+          <Button
+            v-else
+            type="link"
+            size="small"
+            danger
+            @click="deleteSku(row)"
+          >
+            删除
+          </Button>
+        </template>
+      </VxeColumn>
+    </VxeTable>
+
+    <!-- 情况二：详情 -->
+    <VxeTable
+      v-if="isDetail"
+      ref="activitySkuListRef"
+      :data="formData?.skus || []"
+      border
+      max-height="500"
+      size="small"
+      class="w-full"
+      :checkbox-config="isComponent ? { reserve: true } : undefined"
+      @checkbox-change="handleSelectionChange"
+      @checkbox-all="handleSelectionChange"
+    >
+      <VxeColumn v-if="isComponent" type="checkbox" width="45" />
+      <VxeColumn align="center" title="图片" min-width="120">
+        <template #default="{ row }">
+          <Image
+            v-if="row.picUrl"
+            :src="row.picUrl"
+            class="h-[50px] w-[50px] cursor-pointer"
+            :preview="true"
+          />
+        </template>
+      </VxeColumn>
+      <template v-if="formData?.specType && !isBatch">
+        <!-- 根据商品属性动态添加 -->
+        <VxeColumn
+          v-for="(item, index) in tableHeaders"
+          :key="index"
+          :title="item.label"
+          align="center"
+          min-width="80"
+        >
+          <template #default="{ row }">
+            <span class="font-bold text-[#40aaff]">
+              {{ row.properties?.[index]?.valueName }}
+            </span>
+          </template>
+        </VxeColumn>
+      </template>
+      <VxeColumn align="center" title="商品条码" min-width="100">
+        <template #default="{ row }">
+          {{ row.barCode }}
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="销售价(元)" min-width="80">
+        <template #default="{ row }">
+          {{ row.price }}
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="市场价(元)" min-width="80">
+        <template #default="{ row }">
+          {{ row.marketPrice }}
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="成本价(元)" min-width="80">
+        <template #default="{ row }">
+          {{ row.costPrice }}
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="库存" min-width="80">
+        <template #default="{ row }">
+          {{ row.stock }}
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="重量(kg)" min-width="80">
+        <template #default="{ row }">
+          {{ row.weight }}
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="体积(m^3)" min-width="80">
+        <template #default="{ row }">
+          {{ row.volume }}
+        </template>
+      </VxeColumn>
+      <template v-if="formData?.subCommissionType">
+        <VxeColumn align="center" title="一级返佣(元)" min-width="80">
+          <template #default="{ row }">
+            {{ row.firstBrokeragePrice }}
+          </template>
+        </VxeColumn>
+        <VxeColumn align="center" title="二级返佣(元)" min-width="80">
+          <template #default="{ row }">
+            {{ row.secondBrokeragePrice }}
+          </template>
+        </VxeColumn>
+      </template>
+    </VxeTable>
+
+    <!-- 情况三：作为活动组件 -->
+    <VxeTable
+      v-if="isActivityComponent"
+      :data="formData?.skus || []"
+      border
+      max-height="500"
+      size="small"
+      class="w-full"
+    >
+      <VxeColumn v-if="isComponent" type="checkbox" width="45" />
+      <VxeColumn align="center" title="图片" min-width="120">
+        <template #default="{ row }">
+          <Image
+            :src="row.picUrl"
+            class="h-[60px] w-[60px] cursor-pointer"
+            :preview="true"
+          />
+        </template>
+      </VxeColumn>
+      <template v-if="formData?.specType">
+        <!-- 根据商品属性动态添加 -->
+        <VxeColumn
+          v-for="(item, index) in tableHeaders"
+          :key="index"
+          :title="item.label"
+          align="center"
+          min-width="80"
+        >
+          <template #default="{ row }">
+            <span class="font-bold text-[#40aaff]">
+              {{ row.properties?.[index]?.valueName }}
+            </span>
+          </template>
+        </VxeColumn>
+      </template>
+      <VxeColumn align="center" title="商品条码" min-width="100">
+        <template #default="{ row }">
+          {{ row.barCode }}
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="销售价(元)" min-width="80">
+        <template #default="{ row }">
+          {{ formatToFraction(row.price) }}
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="市场价(元)" min-width="80">
+        <template #default="{ row }">
+          {{ formatToFraction(row.marketPrice) }}
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="成本价(元)" min-width="80">
+        <template #default="{ row }">
+          {{ formatToFraction(row.costPrice) }}
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="库存" min-width="80">
+        <template #default="{ row }">
+          {{ row.stock }}
+        </template>
+      </VxeColumn>
+      <!-- 方便扩展每个活动配置的属性不一样  -->
+      <slot name="extension"></slot>
+    </VxeTable>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mall/product/spu/form/modules/sku-table-select.vue b/apps/web-antd/src/views/mall/product/spu/form/modules/sku-table-select.vue
new file mode 100644
index 000000000..0900c360e
--- /dev/null
+++ b/apps/web-antd/src/views/mall/product/spu/form/modules/sku-table-select.vue
@@ -0,0 +1,138 @@
+<!-- SKU 选择弹窗组件 -->
+<script lang="ts" setup>
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { fenToYuan } from '@vben/utils';
+
+import { Input, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSpu } from '#/api/mall/product/spu';
+
+interface SpuData {
+  spuId: number;
+}
+
+const emit = defineEmits<{
+  change: [sku: MallSpuApi.Sku];
+}>();
+
+const selectedSkuId = ref<number>();
+const spuId = ref<number>();
+
+/** 配置列 */
+// TODO @puhui999：貌似列太宽了？
+const gridColumns = computed<VxeGridProps['columns']>(() => [
+  {
+    field: 'id',
+    title: '#',
+    width: 60,
+    align: 'center',
+    slots: { default: 'radio-column' },
+  },
+  {
+    field: 'picUrl',
+    title: '图片',
+    width: 100,
+    align: 'center',
+    cellRender: {
+      name: 'CellImage',
+    },
+  },
+  {
+    field: 'properties',
+    title: '规格',
+    minWidth: 120,
+    align: 'center',
+    formatter: ({ cellValue }) => {
+      return (
+        cellValue?.map((p: MallSpuApi.Property) => p.valueName)?.join(' ') ||
+        '-'
+      );
+    },
+  },
+  {
+    field: 'price',
+    title: '销售价(元)',
+    width: 120,
+    align: 'center',
+    formatter: ({ cellValue }) => {
+      return fenToYuan(cellValue);
+    },
+  },
+]);
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: gridColumns.value,
+    height: 400,
+    border: true,
+    showOverflow: true,
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          if (!spuId.value) {
+            return { items: [], total: 0 };
+          }
+          try {
+            const spu = await getSpu(spuId.value);
+            return {
+              items: spu.skus || [],
+              total: spu.skus?.length || 0,
+            };
+          } catch (error) {
+            message.error('加载 SKU 数据失败');
+            console.error(error);
+            return { items: [], total: 0 };
+          }
+        },
+      },
+    },
+  },
+});
+
+/** 处理选中 */
+function handleSelected(row: MallSpuApi.Sku) {
+  emit('change', row);
+  modalApi.close();
+  selectedSkuId.value = undefined;
+}
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  onOpenChange: async (isOpen: boolean) => {
+    if (!isOpen) {
+      selectedSkuId.value = undefined;
+      spuId.value = undefined;
+      return;
+    }
+    const data = modalApi.getData<SpuData>();
+    // TODO @puhui999：这里要不 if return，让括号的层级简单点。
+    if (data?.spuId) {
+      spuId.value = data.spuId;
+      // 触发数据查询
+      await gridApi.query();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[700px]" title="选择规格">
+    <Grid>
+      <template #radio-column="{ row }">
+        <Input
+          v-model="selectedSkuId"
+          :value="row.id"
+          class="cursor-pointer"
+          type="radio"
+          @change="handleSelected(row)"
+        />
+      </template>
+    </Grid>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mall/product/spu/form/modules/spu-table-select.vue b/apps/web-antd/src/views/mall/product/spu/form/modules/spu-table-select.vue
new file mode 100644
index 000000000..19cb654d2
--- /dev/null
+++ b/apps/web-antd/src/views/mall/product/spu/form/modules/spu-table-select.vue
@@ -0,0 +1,346 @@
+<!-- SPU 商品选择弹窗组件 -->
+<script lang="ts" setup>
+// TODO @puhui999：这个是不是可以放到 components 里？，和商品发布，关系不大
+import type { CheckboxChangeEvent } from 'ant-design-vue/es/checkbox/interface';
+
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { handleTree } from '@vben/utils';
+
+import { Checkbox, Radio } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCategoryList } from '#/api/mall/product/category';
+import { getSpuPage } from '#/api/mall/product/spu';
+import { getRangePickerDefaultProps } from '#/utils';
+
+interface SpuTableSelectProps {
+  multiple?: boolean; // 是否多选模式
+}
+
+const props = withDefaults(defineProps<SpuTableSelectProps>(), {
+  multiple: false,
+});
+
+const emit = defineEmits<{
+  change: [spu: MallSpuApi.Spu | MallSpuApi.Spu[]];
+}>();
+
+const selectedSpuId = ref<number>(); // 单选：选中的 SPU ID
+const checkedStatus = ref<Record<number, boolean>>({}); // 多选：选中状态 map
+const checkedSpus = ref<MallSpuApi.Spu[]>([]); // 多选：选中的 SPU 列表
+const isCheckAll = ref(false); // 多选：全选状态
+const isIndeterminate = ref(false); // 多选：半选状态
+
+const categoryList = ref<any[]>([]); // 分类列表（扁平）
+const categoryTreeList = ref<any[]>([]); // 分类树
+
+const formSchema = computed<VbenFormSchema[]>(() => {
+  return [
+    {
+      fieldName: 'name',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入商品名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'categoryId',
+      label: '商品分类',
+      component: 'TreeSelect',
+      componentProps: {
+        treeData: categoryTreeList.value,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+        treeCheckStrictly: true,
+        placeholder: '请选择商品分类',
+        allowClear: true,
+        showSearch: true,
+        treeNodeFilterProp: 'name',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+});
+
+const gridColumns = computed<VxeGridProps['columns']>(() => {
+  const columns: VxeGridProps['columns'] = [];
+
+  // 多选模式：添加多选列
+  if (props.multiple) {
+    columns.push({
+      field: 'checkbox',
+      title: '',
+      width: 55,
+      align: 'center',
+      slots: { default: 'checkbox-column', header: 'checkbox-header' },
+    });
+  } else {
+    // 单选模式：添加单选列
+    columns.push({
+      field: 'radio',
+      title: '#',
+      width: 55,
+      align: 'center',
+      slots: { default: 'radio-column' },
+    });
+  }
+
+  // 其它列
+  columns.push(
+    {
+      field: 'id',
+      title: '商品编号',
+      minWidth: 100,
+      align: 'center',
+    },
+    {
+      field: 'picUrl',
+      title: '商品图',
+      width: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'name',
+      title: '商品名称',
+      minWidth: 200,
+    },
+    {
+      field: 'categoryId',
+      title: '商品分类',
+      minWidth: 120,
+      formatter: ({ cellValue }) => {
+        const category = categoryList.value?.find((c) => c.id === cellValue);
+        return category?.name || '-';
+      },
+    },
+  );
+
+  return columns;
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: formSchema.value,
+    layout: 'horizontal',
+    collapsed: false,
+  },
+  gridOptions: {
+    columns: gridColumns.value,
+    height: 500,
+    border: true,
+    showOverflow: true,
+    proxyConfig: {
+      ajax: {
+        async query({ page }: any, formValues: any) {
+          // TODO @puhui999：这里是不是不 try catch？
+          try {
+            const params = {
+              pageNo: page.currentPage,
+              pageSize: page.pageSize,
+              tabType: 0, // 默认获取上架的商品
+              name: formValues.name || undefined,
+              categoryId: formValues.categoryId || undefined,
+              createTime: formValues.createTime || undefined,
+            };
+
+            // TODO @puhui999：一次性的，是不是不声明 params，直接放到 getSpuPage 里？
+            const data = await getSpuPage(params);
+
+            // 初始化多选状态
+            if (props.multiple && data.list) {
+              data.list.forEach((spu) => {
+                if (checkedStatus.value[spu.id!] === undefined) {
+                  checkedStatus.value[spu.id!] = false;
+                }
+              });
+              calculateIsCheckAll();
+            }
+
+            return {
+              items: data.list || [],
+              total: data.total || 0,
+            };
+          } catch (error) {
+            console.error('加载商品数据失败:', error);
+            return { items: [], total: 0 };
+          }
+        },
+      },
+    },
+  },
+});
+
+// TODO @puhui999：如下的选中方法，可以因为 Grid 做简化么？
+/** 单选：处理选中 */
+function handleSingleSelected(row: MallSpuApi.Spu) {
+  selectedSpuId.value = row.id;
+  emit('change', row);
+  modalApi.close();
+}
+
+/** 多选：全选/全不选 */
+function handleCheckAll(e: CheckboxChangeEvent) {
+  const checked = e.target.checked;
+  isCheckAll.value = checked;
+  isIndeterminate.value = false;
+
+  const currentList = gridApi.grid.getData();
+  currentList.forEach((spu: MallSpuApi.Spu) => {
+    handleCheckOne(checked, spu, false);
+  });
+  calculateIsCheckAll();
+}
+
+/** 多选：选中单个 */
+function handleCheckOne(
+  checked: boolean,
+  spu: MallSpuApi.Spu,
+  needCalc = true,
+) {
+  if (checked) {
+    // 避免重复添加
+    const exists = checkedSpus.value.some((item) => item.id === spu.id);
+    if (!exists) {
+      checkedSpus.value.push(spu);
+    }
+    checkedStatus.value[spu.id!] = true;
+  } else {
+    const index = checkedSpus.value.findIndex((item) => item.id === spu.id);
+    if (index !== -1) {
+      checkedSpus.value.splice(index, 1);
+    }
+    checkedStatus.value[spu.id!] = false;
+    isCheckAll.value = false;
+  }
+
+  if (needCalc) {
+    calculateIsCheckAll();
+  }
+}
+
+/** 多选：计算全选状态 */
+function calculateIsCheckAll() {
+  const currentList = gridApi.grid.getData();
+  if (currentList.length === 0) {
+    isCheckAll.value = false;
+    isIndeterminate.value = false;
+    return;
+  }
+
+  const checkedCount = currentList.filter(
+    (spu: MallSpuApi.Spu) => checkedStatus.value[spu.id!],
+  ).length;
+
+  isCheckAll.value = checkedCount === currentList.length;
+  isIndeterminate.value = checkedCount > 0 && checkedCount < currentList.length;
+}
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  // 多选模式时显示确认按钮
+  onConfirm: props.multiple
+    ? () => {
+        emit('change', [...checkedSpus.value]);
+        modalApi.close();
+      }
+    : undefined,
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      // TODO @puhui999：是不是直接清理，不要判断 selectedSpuId.value
+      if (!props.multiple) {
+        selectedSpuId.value = undefined;
+      }
+      return;
+    }
+
+    // 打开时处理初始数据
+    const data = modalApi.getData<MallSpuApi.Spu | MallSpuApi.Spu[]>();
+
+    // 重置多选状态
+    if (props.multiple) {
+      checkedSpus.value = [];
+      checkedStatus.value = {};
+      isCheckAll.value = false;
+      isIndeterminate.value = false;
+      // 恢复已选中的数据
+      if (Array.isArray(data) && data.length > 0) {
+        checkedSpus.value = [...data];
+        checkedStatus.value = Object.fromEntries(
+          data.map((spu) => [spu.id!, true]),
+        );
+      }
+    } else {
+      // 单选模式：恢复已选中的 ID
+      if (data && !Array.isArray(data)) {
+        selectedSpuId.value = data.id;
+      }
+    }
+
+    // 触发查询
+    // TODO @puhui999：貌似不用这里再查询一次，100% 会查询的，记忆中是；
+    await gridApi.query();
+  },
+});
+
+/** 初始化分类数据 */
+onMounted(async () => {
+  categoryList.value = await getCategoryList({});
+  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
+});
+</script>
+
+<template>
+  <Modal :class="props.multiple ? 'w-[900px]' : 'w-[800px]'" title="选择商品">
+    <Grid>
+      <!-- 单选列 -->
+      <template v-if="!props.multiple" #radio-column="{ row }">
+        <Radio
+          :checked="selectedSpuId === row.id"
+          :value="row.id"
+          class="cursor-pointer"
+          @click="handleSingleSelected(row)"
+        />
+      </template>
+
+      <!-- 多选表头 -->
+      <template v-if="props.multiple" #checkbox-header>
+        <Checkbox
+          v-model:checked="isCheckAll"
+          :indeterminate="isIndeterminate"
+          class="cursor-pointer"
+          @change="handleCheckAll"
+        />
+      </template>
+
+      <!-- 多选列 -->
+      <template v-if="props.multiple" #checkbox-column="{ row }">
+        <Checkbox
+          v-model:checked="checkedStatus[row.id]"
+          class="cursor-pointer"
+          @change="(e) => handleCheckOne(e.target.checked, row)"
+        />
+      </template>
+    </Grid>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mall/product/spu/index.vue b/apps/web-antd/src/views/mall/product/spu/index.vue
index 2bc81a0a9..dbeefd6d7 100644
--- a/apps/web-antd/src/views/mall/product/spu/index.vue
+++ b/apps/web-antd/src/views/mall/product/spu/index.vue
@@ -2,23 +2,16 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallSpuApi } from '#/api/mall/product/spu';
 
-// TODO @xingyu：所有 mall 的 search 少了，请输入 xxx；表单也是类似
 import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { confirm, DocAlert, Page } from '@vben/common-ui';
 import { ProductSpuStatusEnum } from '@vben/constants';
-import {
-  downloadFileFromBlobPart,
-  fenToYuan,
-  handleTree,
-  treeToString,
-} from '@vben/utils';
+import { downloadFileFromBlobPart } from '@vben/utils';
 
-import { Descriptions, message, Tabs } from 'ant-design-vue';
+import { message, Tabs } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getCategoryList } from '#/api/mall/product/category';
 import {
   deleteSpu,
   exportSpu,
@@ -31,12 +24,8 @@ import { $t } from '#/locales';
 import { useGridColumns, useGridFormSchema } from './data';
 
 const { push } = useRouter();
-const route = useRoute(); // 路由
+const route = useRoute();
 const tabType = ref(0);
-
-const categoryList = ref();
-
-// tabs 数据
 const tabsData = ref([
   {
     name: '出售中',
@@ -71,13 +60,19 @@ async function handleRefresh() {
   await getTabCount();
 }
 
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportSpu(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '商品.xls', source: data });
+}
+
 /** 获得每个 Tab 的数量 */
 async function getTabCount() {
   const res = await getTabsCount();
   for (const objName in res) {
     const index = Number(objName);
     if (tabsData.value[index]) {
-      tabsData.value[index].count = res[objName] as number;
+      tabsData.value[index].count = res[objName]!;
     }
   }
 }
@@ -87,12 +82,6 @@ function handleCreate() {
   push({ name: 'ProductSpuAdd' });
 }
 
-/** 导出表格 */
-async function handleExport() {
-  const data = await exportSpu(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '商品.xls', source: data });
-}
-
 /** 编辑商品 */
 function handleEdit(row: MallSpuApi.Spu) {
   push({ name: 'ProductSpuEdit', params: { id: row.id } });
@@ -105,34 +94,14 @@ async function handleDelete(row: MallSpuApi.Spu) {
     duration: 0,
   });
   try {
-    await deleteSpu(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
-    handleRefresh();
+    await deleteSpu(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    await handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
-/** 添加到仓库 / 回收站的状态 */
-async function handleStatus02Change(row: MallSpuApi.Spu, newStatus: number) {
-  // 二次确认
-  const text =
-    newStatus === ProductSpuStatusEnum.RECYCLE.status
-      ? '加入到回收站'
-      : '恢复到仓库';
-  confirm(`确认要"${row.name}"${text}吗？`)
-    .then(async () => {
-      await updateStatus({ id: row.id as number, status: newStatus });
-      message.success(`${text}成功`);
-      await handleRefresh();
-    })
-    .catch(() => {
-      message.error(`${text}失败`);
-    });
-}
-
 /** 更新状态 */
 async function handleStatusChange(
   newStatus: number,
@@ -140,23 +109,19 @@ async function handleStatusChange(
 ): Promise<boolean | undefined> {
   return new Promise((resolve, reject) => {
     // 二次确认
-    const text = row.status ? '上架' : '下架';
+    const text = newStatus ? '上架' : '下架';
     confirm({
       content: `确认要${text + row.name}吗?`,
     })
       .then(async () => {
         // 更新状态
-        const res = await updateStatus({
-          id: row.id as number,
+        await updateStatus({
+          id: row.id!,
           status: newStatus,
         });
-        if (res) {
-          // 提示并返回成功
-          message.success(`${text}成功`);
-          resolve(true);
-        } else {
-          reject(new Error('操作失败'));
-        }
+        // 提示并返回成功
+        message.success(`${text}成功`);
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
@@ -164,6 +129,28 @@ async function handleStatusChange(
   });
 }
 
+/** 添加到仓库 / 回收站的状态 */
+async function handleStatus02Change(row: MallSpuApi.Spu, newStatus: number) {
+  const text =
+    newStatus === ProductSpuStatusEnum.RECYCLE.status
+      ? '加入到回收站'
+      : '恢复到仓库';
+  await confirm({
+    content: `确认要"${row.name}"${text}吗？`,
+  });
+  const hideLoading = message.loading({
+    content: `正在${text}中...`,
+    duration: 0,
+  });
+  try {
+    await updateStatus({ id: row.id!, status: newStatus });
+    message.success(`${text}成功`);
+    await handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
 /** 查看商品详情 */
 function handleDetail(row: MallSpuApi.Spu) {
   push({ name: 'ProductSpuDetail', params: { id: row.id } });
@@ -176,12 +163,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useGridColumns(handleStatusChange),
     height: 'auto',
-    cellConfig: {
-      height: 80,
-    },
-    expandConfig: {
-      height: 100,
-    },
     keepSource: true,
     proxyConfig: {
       ajax: {
@@ -197,7 +178,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
-      resizable: true,
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -218,9 +199,8 @@ onMounted(async () => {
       categoryId: Number(route.query.categoryId),
     });
   }
+  // 获得每个 Tab 的数量
   await getTabCount();
-  const categoryRes = await getCategoryList({});
-  categoryList.value = handleTree(categoryRes, 'id', 'parentId', 'children');
 });
 </script>
 
@@ -234,9 +214,8 @@ onMounted(async () => {
     </template>
 
     <Grid>
-      <template #top>
-        <!-- TODO @xingyu：tabs 可以考虑往上以一些，和操作按钮在一排 -->
-        <Tabs class="border-none" @change="onChangeTab">
+      <template #toolbar-actions>
+        <Tabs @change="onChangeTab" class="w-full">
           <Tabs.TabPane
             v-for="item in tabsData"
             :key="item.type"
@@ -264,39 +243,6 @@ onMounted(async () => {
           ]"
         />
       </template>
-      <template #expand_content="{ row }">
-        <!-- TODO @xingyu：展开的样子，有点丑 -->
-        <Descriptions
-          :column="4"
-          class="m-4"
-          :label-style="{
-            width: '100px',
-            fontWeight: 'bold',
-            fontSize: '14px',
-          }"
-          :content-style="{ width: '100px', fontSize: '14px' }"
-        >
-          <Descriptions.Item label="商品分类">
-            {{ treeToString(categoryList, row.categoryId!) }}
-          </Descriptions.Item>
-          <Descriptions.Item label="商品名称">
-            {{ row.name }}
-          </Descriptions.Item>
-
-          <Descriptions.Item label="市场价">
-            {{ fenToYuan(row.marketPrice as number) }} 元
-          </Descriptions.Item>
-          <Descriptions.Item label="成本价">
-            {{ fenToYuan(row.costPrice as number) }} 元
-          </Descriptions.Item>
-          <Descriptions.Item label="浏览量">
-            {{ row.browseCount }}
-          </Descriptions.Item>
-          <Descriptions.Item label="虚拟销量">
-            {{ row.virtualSalesCount }}
-          </Descriptions.Item>
-        </Descriptions>
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
diff --git a/apps/web-antd/src/views/mall/product/spu/modules/detail.vue b/apps/web-antd/src/views/mall/product/spu/modules/detail.vue
deleted file mode 100644
index c64076447..000000000
--- a/apps/web-antd/src/views/mall/product/spu/modules/detail.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts" setup>
-import { Page } from '@vben/common-ui';
-</script>
-
-<template>
-  <Page>
-    <!-- TODO @xingyu：待开发 -->
-    <div>detail</div>
-  </Page>
-</template>
diff --git a/apps/web-antd/src/views/mall/product/spu/modules/form.vue b/apps/web-antd/src/views/mall/product/spu/modules/form.vue
deleted file mode 100644
index 3cfb43dab..000000000
--- a/apps/web-antd/src/views/mall/product/spu/modules/form.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<script lang="ts" setup>
-import type { MallSpuApi } from '#/api/mall/product/spu';
-
-import { onMounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
-
-import { ContentWrap, Page } from '@vben/common-ui';
-import { convertToInteger, formatToFraction } from '@vben/utils';
-
-import { Button, Tabs } from 'ant-design-vue';
-
-import { useVbenForm } from '#/adapter/form';
-import { createSpu, getSpu, updateSpu } from '#/api/mall/product/spu';
-
-import {
-  useDeliveryFormSchema,
-  useDescriptionFormSchema,
-  useInfoFormSchema,
-  useOtherFormSchema,
-  useSkuFormSchema,
-} from './form-data';
-
-const spuId = ref<number>();
-const { params } = useRoute();
-
-const activeTabName = ref('info');
-
-const [InfoForm, infoFormApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
-  },
-  layout: 'horizontal',
-  schema: useInfoFormSchema(),
-  showDefaultActions: false,
-});
-
-const [SkuForm, skuFormApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
-  },
-  layout: 'horizontal',
-  schema: useSkuFormSchema(),
-  showDefaultActions: false,
-});
-
-const [DeliveryForm, deliveryFormApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
-  },
-  layout: 'horizontal',
-  schema: useDeliveryFormSchema(),
-  showDefaultActions: false,
-});
-
-const [DescriptionForm, descriptionFormApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
-  },
-  layout: 'vertical',
-  schema: useDescriptionFormSchema(),
-  showDefaultActions: false,
-});
-
-const [OtherForm, otherFormApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
-  },
-  layout: 'horizontal',
-  schema: useOtherFormSchema(),
-  showDefaultActions: false,
-});
-
-async function onSubmit() {
-  const values: MallSpuApi.Spu = await infoFormApi
-    .merge(skuFormApi)
-    .merge(deliveryFormApi)
-    .merge(descriptionFormApi)
-    .merge(otherFormApi)
-    .submitAllForm(true);
-
-  if (values.skus) {
-    values.skus.forEach((item) => {
-      // sku相关价格元转分
-      item.price = convertToInteger(item.price);
-      item.marketPrice = convertToInteger(item.marketPrice);
-      item.costPrice = convertToInteger(item.costPrice);
-      item.firstBrokeragePrice = convertToInteger(item.firstBrokeragePrice);
-      item.secondBrokeragePrice = convertToInteger(item.secondBrokeragePrice);
-    });
-  }
-  // 处理轮播图列表
-  const newSliderPicUrls: any[] = [];
-  values.sliderPicUrls!.forEach((item: any) => {
-    // 如果是前端选的图
-    typeof item === 'object'
-      ? newSliderPicUrls.push(item.url)
-      : newSliderPicUrls.push(item);
-  });
-  values.sliderPicUrls = newSliderPicUrls;
-
-  await (spuId.value ? updateSpu(values) : createSpu(values));
-}
-
-async function initDate() {
-  spuId.value = params.id as unknown as number;
-  if (!spuId.value) {
-    return;
-  }
-  const res = await getSpu(spuId.value);
-  if (res.skus) {
-    res.skus.forEach((item) => {
-      // 回显价格分转元
-      item.price = formatToFraction(item.price);
-      item.marketPrice = formatToFraction(item.marketPrice);
-      item.costPrice = formatToFraction(item.costPrice);
-      item.firstBrokeragePrice = formatToFraction(item.firstBrokeragePrice);
-      item.secondBrokeragePrice = formatToFraction(item.secondBrokeragePrice);
-    });
-  }
-  infoFormApi.setValues(res);
-  skuFormApi.setValues(res);
-  deliveryFormApi.setValues(res);
-  descriptionFormApi.setValues(res);
-  otherFormApi.setValues(res);
-}
-
-onMounted(async () => {
-  await initDate();
-});
-</script>
-
-<template>
-  <Page auto-content-height>
-    <ContentWrap class="h-full w-full pb-8">
-      <template #extra>
-        <Button type="primary" @click="onSubmit">保存</Button>
-      </template>
-      <Tabs v-model:active-key="activeTabName">
-        <Tabs.TabPane tab="基础设置" key="info">
-          <InfoForm class="w-3/5" />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="价格库存" key="sku">
-          <SkuForm class="w-3/5" />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="物流设置" key="delivery">
-          <DeliveryForm class="w-3/5" />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="商品详情" key="description">
-          <DescriptionForm class="w-3/5" />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="其它设置" key="other">
-          <OtherForm class="w-3/5" />
-        </Tabs.TabPane>
-      </Tabs>
-    </ContentWrap>
-  </Page>
-</template>
diff --git a/apps/web-antd/src/views/mall/promotion/article/data.ts b/apps/web-antd/src/views/mall/promotion/article/data.ts
index 7822a3cb7..9e93bd58c 100644
--- a/apps/web-antd/src/views/mall/promotion/article/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/article/data.ts
@@ -38,7 +38,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '文章分类',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleArticleCategoryList(),
+        api: getSimpleArticleCategoryList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择文章分类',
@@ -144,7 +144,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '文章分类',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleArticleCategoryList(),
+        api: getSimpleArticleCategoryList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择文章分类',
diff --git a/apps/web-antd/src/views/mall/promotion/banner/data.ts b/apps/web-antd/src/views/mall/promotion/banner/data.ts
index f1b166ee4..a168e6492 100644
--- a/apps/web-antd/src/views/mall/promotion/banner/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/banner/data.ts
@@ -143,7 +143,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'status',
       minWidth: 150,
       cellRender: {
-        name: 'CellDictTag',
+        name: 'CellDict',
         props: {
           dictType: DICT_TYPE.COMMON_STATUS,
         },
@@ -154,7 +154,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'position',
       minWidth: 150,
       cellRender: {
-        name: 'CellDictTag',
+        name: 'CellDict',
         props: {
           dictType: DICT_TYPE.PROMOTION_BANNER_POSITION,
         },
diff --git a/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue b/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
new file mode 100644
index 000000000..2cbd8d12d
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
@@ -0,0 +1,231 @@
+<script lang="ts" setup>
+import type { AppLink } from './data';
+
+import { nextTick, ref } from 'vue';
+
+import { getUrlNumberValue } from '@vben/utils';
+
+import { Button, Form, FormItem, Modal, Tooltip } from 'ant-design-vue';
+
+import ProductCategorySelect from '#/views/mall/product/category/components/product-category-select.vue';
+
+import { APP_LINK_GROUP_LIST, APP_LINK_TYPE_ENUM } from './data';
+
+/** APP 链接选择弹框 */
+defineOptions({ name: 'AppLinkSelectDialog' });
+
+const emit = defineEmits<{
+  appLinkChange: [appLink: AppLink];
+  change: [link: string];
+}>();
+
+const activeGroup = ref(APP_LINK_GROUP_LIST[0]?.name); // 选中的分组，默认选中第一个
+const activeAppLink = ref({} as AppLink); // 选中的 APP 链接
+
+const linkScrollbar = ref<HTMLDivElement>(); // 右侧滚动条
+const groupTitleRefs = ref<HTMLInputElement[]>([]); // 分组标题引用列表
+const groupScrollbar = ref<HTMLDivElement>(); // 分组滚动条
+const groupBtnRefs = ref<HTMLButtonElement[]>([]); // 分组引用列表
+
+const detailSelectDialog = ref<{
+  id?: number;
+  type?: APP_LINK_TYPE_ENUM;
+  visible: boolean;
+}>({
+  visible: false,
+  id: undefined,
+  type: undefined,
+}); // 详情选择对话框
+
+/** 打开弹窗 */
+const dialogVisible = ref(false);
+const open = (link: string) => {
+  activeAppLink.value.path = link;
+  dialogVisible.value = true;
+  // 滚动到当前的链接
+  const group = APP_LINK_GROUP_LIST.find((group) =>
+    group.links.some((linkItem) => {
+      const sameLink = isSameLink(linkItem.path, link);
+      if (sameLink) {
+        activeAppLink.value = { ...linkItem, path: link };
+      }
+      return sameLink;
+    }),
+  );
+  if (group) {
+    // 使用 nextTick 的原因：可能 Dom 还没生成，导致滚动失败
+    nextTick(() => handleGroupSelected(group.name));
+  }
+};
+defineExpose({ open });
+
+/** 处理 APP 链接选中 */
+const handleAppLinkSelected = (appLink: AppLink) => {
+  if (!isSameLink(appLink.path, activeAppLink.value.path)) {
+    activeAppLink.value = appLink;
+  }
+  switch (appLink.type) {
+    case APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST: {
+      detailSelectDialog.value.visible = true;
+      detailSelectDialog.value.type = appLink.type;
+      // 返显
+      detailSelectDialog.value.id =
+        getUrlNumberValue(
+          'id',
+          `http://127.0.0.1${activeAppLink.value.path}`,
+        ) || undefined;
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+};
+
+function handleSubmit() {
+  dialogVisible.value = false;
+  emit('change', activeAppLink.value.path);
+  emit('appLinkChange', activeAppLink.value);
+}
+
+/**
+ * 处理右侧链接列表滚动
+ * @param {object} param0 滚动事件参数
+ * @param {number} param0.scrollTop 滚动条的位置
+ */
+function handleScroll({ scrollTop }: { scrollTop: number }) {
+  const titleEl = groupTitleRefs.value.find((titleEl: HTMLInputElement) => {
+    // 获取标题的位置信息
+    const { offsetHeight, offsetTop } = titleEl;
+    // 判断标题是否在可视范围内
+    return scrollTop >= offsetTop && scrollTop < offsetTop + offsetHeight;
+  });
+  // 只需处理一次
+  if (titleEl && activeGroup.value !== titleEl.textContent) {
+    activeGroup.value = titleEl.textContent || '';
+    // 同步左侧的滚动条位置
+    scrollToGroupBtn(activeGroup.value);
+  }
+}
+
+/** 处理分组选中 */
+function handleGroupSelected(group: string) {
+  activeGroup.value = group;
+  const titleRef = groupTitleRefs.value.find(
+    (item: HTMLInputElement) => item.textContent === group,
+  );
+  if (titleRef && linkScrollbar.value) {
+    // 滚动分组标题
+    linkScrollbar.value.scrollTop = titleRef.offsetTop;
+  }
+}
+
+/** 自动滚动分组按钮，确保分组按钮保持在可视区域内 */
+function scrollToGroupBtn(group: string) {
+  const groupBtn = groupBtnRefs.value.find(
+    (ref: HTMLButtonElement | undefined) => ref?.textContent === group,
+  );
+  if (groupBtn && groupScrollbar.value) {
+    groupScrollbar.value.scrollTop = groupBtn.offsetTop;
+  }
+}
+
+/** 是否为相同的链接（不比较参数，只比较链接） */
+function isSameLink(link1: string, link2: string) {
+  return link2 ? link1.split('?')[0] === link2.split('?')[0] : false;
+}
+
+/** 处理详情选择 */
+function handleProductCategorySelected(id: number) {
+  // TODO @AI：这里有点问题；activeAppLink 地址；
+  const url = new URL(activeAppLink.value.path, 'http://127.0.0.1');
+  // 修改 id 参数
+  url.searchParams.set('id', `${id}`);
+  // 排除域名
+  activeAppLink.value.path = `${url.pathname}${url.search}`;
+  // 关闭对话框
+  detailSelectDialog.value.visible = false;
+  // 重置 id
+  detailSelectDialog.value.id = undefined;
+}
+</script>
+<template>
+  <Modal v-model:open="dialogVisible" title="选择链接" width="65%">
+    <div class="flex h-[500px] gap-2">
+      <!-- 左侧分组列表 -->
+      <div class="flex h-full flex-col overflow-y-auto" ref="groupScrollbar">
+        <Button
+          v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
+          :key="groupIndex"
+          class="mb-1 ml-0 mr-4 w-[90px] justify-start"
+          :class="[{ active: activeGroup === group.name }]"
+          ref="groupBtnRefs"
+          :type="activeGroup === group.name ? 'primary' : 'default'"
+          @click="handleGroupSelected(group.name)"
+        >
+          {{ group.name }}
+        </Button>
+      </div>
+      <!-- 右侧链接列表 -->
+      <div
+        class="h-full flex-1 overflow-y-auto"
+        @scroll="handleScroll"
+        ref="linkScrollbar"
+      >
+        <div
+          v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
+          :key="groupIndex"
+        >
+          <!-- 分组标题 -->
+          <div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
+          <!-- 链接列表 -->
+          <Tooltip
+            v-for="(appLink, appLinkIndex) in group.links"
+            :key="appLinkIndex"
+            :title="appLink.path"
+            placement="bottom"
+            :mouse-enter-delay="0.3"
+          >
+            <Button
+              class="mb-2 ml-0 mr-2"
+              :type="
+                isSameLink(appLink.path, activeAppLink.path)
+                  ? 'primary'
+                  : 'default'
+              "
+              @click="handleAppLinkSelected(appLink)"
+            >
+              {{ appLink.name }}
+            </Button>
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+    <!-- 底部对话框操作按钮 -->
+    <template #footer>
+      <Button type="primary" @click="handleSubmit">确 定</Button>
+      <Button @click="dialogVisible = false">取 消</Button>
+    </template>
+  </Modal>
+  <Modal v-model:open="detailSelectDialog.visible" title="" width="50%">
+    <Form class="min-h-[200px]">
+      <FormItem
+        label="选择分类"
+        v-if="
+          detailSelectDialog.type === APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST
+        "
+      >
+        <ProductCategorySelect
+          v-model="detailSelectDialog.id"
+          :parent-id="0"
+          @update:model-value="handleProductCategorySelected"
+        />
+      </FormItem>
+    </Form>
+  </Modal>
+</template>
+<style lang="scss" scoped>
+:deep(.ant-btn + .ant-btn) {
+  margin-left: 0 !important;
+}
+</style>
diff --git a/apps/web-ele/src/components/app-link-input/data.ts b/apps/web-antd/src/views/mall/promotion/components/app-link-input/data.ts
similarity index 84%
rename from apps/web-ele/src/components/app-link-input/data.ts
rename to apps/web-antd/src/views/mall/promotion/components/app-link-input/data.ts
index 550b88d76..3eb3db71f 100644
--- a/apps/web-ele/src/components/app-link-input/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/app-link-input/data.ts
@@ -1,48 +1,32 @@
-// APP 链接分组
+/** APP 链接分组 */
 export interface AppLinkGroup {
-  // 分组名称
-  name: string;
-  // 链接列表
-  links: AppLink[];
+  name: string; // 分组名称
+  links: AppLink[]; // 链接列表
 }
 
-// APP 链接
+/** APP 链接 */
 export interface AppLink {
-  // 链接名称
-  name: string;
-  // 链接地址
-  path: string;
-  // 链接的类型
-  type?: APP_LINK_TYPE_ENUM;
+  name: string; // 链接名称
+  path: string; // 链接地址
+  type?: APP_LINK_TYPE_ENUM; // 链接的类型
 }
 
-// APP 链接类型（需要特殊处理，例如商品详情）
+/** APP 链接类型（需要特殊处理，例如商品详情） */
 export enum APP_LINK_TYPE_ENUM {
-  // 拼团活动
-  ACTIVITY_COMBINATION,
-  // 积分商城活动
-  ACTIVITY_POINT,
-  // 秒杀活动
-  ACTIVITY_SECKILL,
-  // 文章详情
-  ARTICLE_DETAIL,
-  // 优惠券详情
-  COUPON_DETAIL,
-  // 自定义页面详情
-  DIY_PAGE_DETAIL,
-  // 品类列表
-  PRODUCT_CATEGORY_LIST,
-  // 拼团商品详情
-  PRODUCT_DETAIL_COMBINATION,
-  // 商品详情
-  PRODUCT_DETAIL_NORMAL,
-  // 秒杀商品详情
-  PRODUCT_DETAIL_SECKILL,
-  // 商品列表
-  PRODUCT_LIST,
+  ACTIVITY_COMBINATION, // 拼团活动
+  ACTIVITY_POINT, // 积分商城活动
+  ACTIVITY_SECKILL, // 秒杀活动
+  ARTICLE_DETAIL, // 文章详情
+  COUPON_DETAIL, // 优惠券详情
+  DIY_PAGE_DETAIL, // 自定义页面详情
+  PRODUCT_CATEGORY_LIST, // 品类列表
+  PRODUCT_DETAIL_COMBINATION, // 拼团商品详情
+  PRODUCT_DETAIL_NORMAL, // 商品详情
+  PRODUCT_DETAIL_SECKILL, // 秒杀商品详情
+  PRODUCT_LIST, // 商品列表
 }
 
-// APP 链接列表（做一下持久化？）
+/** APP 链接列表（做一下持久化？） */
 export const APP_LINK_GROUP_LIST = [
   {
     name: '商城',
diff --git a/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue b/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
new file mode 100644
index 000000000..8be7cada4
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+import { Button, Input, InputGroup } from 'ant-design-vue';
+
+import AppLinkSelectDialog from './app-link-select-dialog.vue';
+
+/** APP 链接输入框 */
+defineOptions({ name: 'AppLinkInput' });
+
+// 定义属性
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  }, // 当前选中的链接
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [link: string];
+}>();
+
+const dialogRef = ref(); // 选择对话框
+
+const appLink = ref(''); // 当前的链接
+const handleOpenDialog = () => dialogRef.value?.open(appLink.value); // 处理打开对话框
+const handleLinkSelected = (link: string) => (appLink.value = link); // 处理 APP 链接选中
+
+watch(
+  () => props.modelValue,
+  () => (appLink.value = props.modelValue),
+  { immediate: true },
+);
+
+watch(
+  () => appLink.value,
+  () => emit('update:modelValue', appLink.value),
+);
+</script>
+<template>
+  <InputGroup compact>
+    <Input
+      v-model:value="appLink"
+      placeholder="输入或选择链接"
+      class="flex-1"
+    />
+    <Button @click="handleOpenDialog">选择</Button>
+  </InputGroup>
+
+  <AppLinkSelectDialog ref="dialogRef" @change="handleLinkSelected" />
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue b/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
new file mode 100644
index 000000000..1ce5abf52
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+// import { PREDEFINE_COLORS } from '@vben/constants';
+
+import { Input, InputGroup } from 'ant-design-vue';
+
+/** 颜色输入框 */
+defineOptions({ name: 'ColorInput' });
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const color = computed({
+  get: () => {
+    return props.modelValue;
+  },
+  set: (val: string) => {
+    emit('update:modelValue', val);
+  },
+});
+</script>
+
+<template>
+  <InputGroup compact>
+    <!-- TODO 芋艿：后续在处理，antd 不支持该组件；
+    <ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
+    -->
+    <Input v-model:value="color" class="flex-1" />
+  </InputGroup>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
new file mode 100644
index 000000000..10cf7ae2e
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import type { ComponentStyle } from '../util';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Form,
+  FormItem,
+  Radio,
+  RadioGroup,
+  Slider,
+  TabPane,
+  Tabs,
+  Tree,
+} from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
+
+/**
+ * 组件容器属性：目前右边部分
+ * 用于包裹组件，为组件提供 背景、外边距、内边距、边框等样式
+ */
+defineOptions({ name: 'ComponentContainer' });
+
+const props = defineProps<{ modelValue: ComponentStyle }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+
+const treeData = [
+  {
+    label: '外部边距',
+    prop: 'margin',
+    children: [
+      {
+        label: '上',
+        prop: 'marginTop',
+      },
+      {
+        label: '右',
+        prop: 'marginRight',
+      },
+      {
+        label: '下',
+        prop: 'marginBottom',
+      },
+      {
+        label: '左',
+        prop: 'marginLeft',
+      },
+    ],
+  },
+  {
+    label: '内部边距',
+    prop: 'padding',
+    children: [
+      {
+        label: '上',
+        prop: 'paddingTop',
+      },
+      {
+        label: '右',
+        prop: 'paddingRight',
+      },
+      {
+        label: '下',
+        prop: 'paddingBottom',
+      },
+      {
+        label: '左',
+        prop: 'paddingLeft',
+      },
+    ],
+  },
+  {
+    label: '边框圆角',
+    prop: 'borderRadius',
+    children: [
+      {
+        label: '上左',
+        prop: 'borderTopLeftRadius',
+      },
+      {
+        label: '上右',
+        prop: 'borderTopRightRadius',
+      },
+      {
+        label: '下右',
+        prop: 'borderBottomRightRadius',
+      },
+      {
+        label: '下左',
+        prop: 'borderBottomLeftRadius',
+      },
+    ],
+  },
+];
+
+const handleSliderChange = (prop: string) => {
+  switch (prop) {
+    case 'borderRadius': {
+      formData.value.borderTopLeftRadius = formData.value.borderRadius;
+      formData.value.borderTopRightRadius = formData.value.borderRadius;
+      formData.value.borderBottomRightRadius = formData.value.borderRadius;
+      formData.value.borderBottomLeftRadius = formData.value.borderRadius;
+      break;
+    }
+    case 'margin': {
+      formData.value.marginTop = formData.value.margin;
+      formData.value.marginRight = formData.value.margin;
+      formData.value.marginBottom = formData.value.margin;
+      formData.value.marginLeft = formData.value.margin;
+      break;
+    }
+    case 'padding': {
+      formData.value.paddingTop = formData.value.padding;
+      formData.value.paddingRight = formData.value.padding;
+      formData.value.paddingBottom = formData.value.padding;
+      formData.value.paddingLeft = formData.value.padding;
+      break;
+    }
+  }
+};
+</script>
+
+<template>
+  <Tabs>
+    <!-- 每个组件的自定义内容 -->
+    <TabPane tab="内容" key="content" v-if="$slots.default">
+      <slot></slot>
+    </TabPane>
+
+    <!-- 每个组件的通用内容 -->
+    <TabPane tab="样式" key="style">
+      <Card title="组件样式" class="property-group">
+        <Form
+          :model="formData"
+          label-col="{ span: 6 }"
+          wrapper-col="{ span: 18 }"
+        >
+          <FormItem label="组件背景" name="bgType">
+            <RadioGroup v-model:value="formData.bgType">
+              <Radio value="color">纯色</Radio>
+              <Radio value="img">图片</Radio>
+            </RadioGroup>
+          </FormItem>
+          <FormItem
+            label="选择颜色"
+            name="bgColor"
+            v-if="formData.bgType === 'color'"
+          >
+            <ColorInput v-model="formData.bgColor" />
+          </FormItem>
+          <FormItem label="上传图片" name="bgImg" v-else>
+            <UploadImg
+              v-model="formData.bgImg"
+              :limit="1"
+              :show-description="false"
+            >
+              <template #tip>建议宽度 750px</template>
+            </UploadImg>
+          </FormItem>
+          <Tree
+            :tree-data="treeData"
+            :expand-on-click-node="false"
+            default-expand-all
+          >
+            <template #title="{ data, node }">
+              <FormItem
+                :label="data.label"
+                :name="data.prop"
+                class="mb-0 w-full"
+              >
+                <Slider
+                  v-model:value="
+                    formData[data.prop as keyof ComponentStyle] as number
+                  "
+                  :max="100"
+                  :min="0"
+                  @change="handleSliderChange(data.prop)"
+                />
+              </FormItem>
+            </template>
+          </Tree>
+          <slot name="style" :style="formData"></slot>
+        </Form>
+      </Card>
+    </TabPane>
+  </Tabs>
+</template>
+
+<style scoped lang="scss">
+:deep(.ant-slider) {
+  margin-right: 16px;
+}
+
+:deep(.ant-input-number) {
+  width: 50px;
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
new file mode 100644
index 000000000..fc8546957
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import type { ComponentStyle, DiyComponent } from '../util';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Tooltip } from 'ant-design-vue';
+
+import { VerticalButtonGroup } from '#/views/mall/promotion/components';
+
+import { components } from './mobile';
+
+/**
+ * 组件容器：目前在中间部分
+ * 用于包裹组件，为组件提供 背景、外边距、内边距、边框等样式
+ */
+defineOptions({ name: 'ComponentContainer', components });
+
+const props = defineProps({
+  component: {
+    type: Object as () => DiyComponentWithStyle,
+    required: true,
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  canMoveUp: {
+    type: Boolean,
+    default: false,
+  },
+  canMoveDown: {
+    type: Boolean,
+    default: false,
+  },
+  showToolbar: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emits = defineEmits<{
+  (e: 'move', direction: number): void;
+  (e: 'copy'): void;
+  (e: 'delete'): void;
+}>();
+
+type DiyComponentWithStyle = DiyComponent<any> & {
+  property: { style?: ComponentStyle };
+};
+/**
+ * 组件样式
+ */
+const style = computed(() => {
+  const componentStyle = props.component.property.style;
+  if (!componentStyle) {
+    return {};
+  }
+  return {
+    marginTop: `${componentStyle.marginTop || 0}px`,
+    marginBottom: `${componentStyle.marginBottom || 0}px`,
+    marginLeft: `${componentStyle.marginLeft || 0}px`,
+    marginRight: `${componentStyle.marginRight || 0}px`,
+    paddingTop: `${componentStyle.paddingTop || 0}px`,
+    paddingRight: `${componentStyle.paddingRight || 0}px`,
+    paddingBottom: `${componentStyle.paddingBottom || 0}px`,
+    paddingLeft: `${componentStyle.paddingLeft || 0}px`,
+    borderTopLeftRadius: `${componentStyle.borderTopLeftRadius || 0}px`,
+    borderTopRightRadius: `${componentStyle.borderTopRightRadius || 0}px`,
+    borderBottomRightRadius: `${componentStyle.borderBottomRightRadius || 0}px`,
+    borderBottomLeftRadius: `${componentStyle.borderBottomLeftRadius || 0}px`,
+    overflow: 'hidden',
+    background:
+      componentStyle.bgType === 'color'
+        ? componentStyle.bgColor
+        : `url(${componentStyle.bgImg})`,
+  };
+});
+
+/**
+ * 移动组件
+ * @param direction 移动方向
+ */
+const handleMoveComponent = (direction: number) => {
+  emits('move', direction);
+};
+
+/**
+ * 复制组件
+ */
+const handleCopyComponent = () => {
+  emits('copy');
+};
+
+/**
+ * 删除组件
+ */
+const handleDeleteComponent = () => {
+  emits('delete');
+};
+</script>
+<template>
+  <div class="component" :class="[{ active }]">
+    <div
+      :style="{
+        ...style,
+      }"
+    >
+      <component :is="component.id" :property="component.property" />
+    </div>
+    <div class="component-wrap">
+      <!-- 左侧：组件名（悬浮的小贴条） -->
+      <div class="component-name" v-if="component.name">
+        {{ component.name }}
+      </div>
+      <!-- 右侧：组件操作工具栏 -->
+      <div
+        class="component-toolbar"
+        v-if="showToolbar && component.name && active"
+      >
+        <VerticalButtonGroup type="primary">
+          <Tooltip title="上移" placement="right">
+            <Button
+              :disabled="!canMoveUp"
+              @click.stop="handleMoveComponent(-1)"
+            >
+              <IconifyIcon icon="ep:arrow-up" />
+            </Button>
+          </Tooltip>
+          <Tooltip title="下移" placement="right">
+            <Button
+              :disabled="!canMoveDown"
+              @click.stop="handleMoveComponent(1)"
+            >
+              <IconifyIcon icon="ep:arrow-down" />
+            </Button>
+          </Tooltip>
+          <Tooltip title="复制" placement="right">
+            <Button @click.stop="handleCopyComponent()">
+              <IconifyIcon icon="ep:copy-document" />
+            </Button>
+          </Tooltip>
+          <Tooltip title="删除" placement="right">
+            <Button @click.stop="handleDeleteComponent()">
+              <IconifyIcon icon="ep:delete" />
+            </Button>
+          </Tooltip>
+        </VerticalButtonGroup>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+$active-border-width: 2px;
+$hover-border-width: 1px;
+$name-position: -85px;
+$toolbar-position: -55px;
+
+/* 组件 */
+.component {
+  position: relative;
+  cursor: move;
+
+  .component-wrap {
+    position: absolute;
+    top: 0;
+    left: -$active-border-width;
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    /* 鼠标放到组件上时 */
+    &:hover {
+      border: $hover-border-width dashed var(--ant-color-primary);
+      box-shadow: 0 0 5px 0 rgb(24 144 255 / 30%);
+
+      .component-name {
+        top: $hover-border-width;
+
+        /* 防止加了边框之后，位置移动 */
+        left: $name-position - $hover-border-width;
+      }
+    }
+
+    /* 左侧：组件名称 */
+    .component-name {
+      position: absolute;
+      top: $active-border-width;
+      left: $name-position;
+      display: block;
+      width: 80px;
+      height: 25px;
+      font-size: 12px;
+      line-height: 25px;
+      color: #6a6a6a;
+      text-align: center;
+      background: #fff;
+      box-shadow:
+        0 0 4px #00000014,
+        0 2px 6px #0000000f,
+        0 4px 8px 2px #0000000a;
+
+      /* 右侧小三角 */
+      &::after {
+        position: absolute;
+        top: 7.5px;
+        right: -10px;
+        width: 0;
+        height: 0;
+        content: ' ';
+        border: 5px solid transparent;
+        border-left-color: #fff;
+      }
+    }
+
+    /* 右侧：组件操作工具栏 */
+    .component-toolbar {
+      position: absolute;
+      top: 0;
+      right: $toolbar-position;
+      display: none;
+
+      /* 左侧小三角 */
+      &::before {
+        position: absolute;
+        top: 10px;
+        left: -10px;
+        width: 0;
+        height: 0;
+        content: ' ';
+        border: 5px solid transparent;
+        border-right-color: #2d8cf0;
+      }
+    }
+  }
+
+  /* 组件选中时 */
+  &.active {
+    margin-bottom: 4px;
+
+    .component-wrap {
+      margin-bottom: $active-border-width + $active-border-width;
+      border: $active-border-width solid var(--ant-color-primary) !important;
+      box-shadow: 0 0 10px 0 rgb(24 144 255 / 30%);
+
+      .component-name {
+        top: 0 !important;
+
+        /* 防止加了边框之后，位置移动 */
+        left: $name-position - $active-border-width !important;
+        color: #fff;
+        background: var(--ant-color-primary);
+
+        &::after {
+          border-left-color: var(--ant-color-primary);
+        }
+      }
+
+      .component-toolbar {
+        display: block;
+      }
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
new file mode 100644
index 000000000..56907c105
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import type { DiyComponent, DiyComponentLibrary } from '../util';
+
+import { reactive, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import { Collapse, CollapsePanel } from 'ant-design-vue';
+import draggable from 'vuedraggable';
+
+import { componentConfigs } from './mobile/index';
+
+/** 组件库：目前左侧的【基础组件】、【图文组件】部分 */
+defineOptions({ name: 'ComponentLibrary' });
+
+// 组件列表
+const props = defineProps<{
+  list: DiyComponentLibrary[];
+}>();
+// 组件分组
+const groups = reactive<any[]>([]);
+// 展开的折叠面板
+const extendGroups = reactive<string[]>([]);
+
+// 监听 list 属性，按照 DiyComponentLibrary 的 name 分组
+watch(
+  () => props.list,
+  () => {
+    // 清除旧数据
+    extendGroups.length = 0;
+    groups.length = 0;
+    // 重新生成数据
+    props.list.forEach((group) => {
+      // 是否展开分组
+      if (group.extended) {
+        extendGroups.push(group.name);
+      }
+      // 查找组件
+      const components = group.components
+        .map((name) => componentConfigs[name] as DiyComponent<any>)
+        .filter(Boolean);
+      if (components.length > 0) {
+        groups.push({
+          name: group.name,
+          components,
+        });
+      }
+    });
+  },
+  {
+    immediate: true,
+  },
+);
+
+// 克隆组件
+const handleCloneComponent = (component: DiyComponent<any>) => {
+  const instance = cloneDeep(component);
+  instance.uid = Date.now();
+  return instance;
+};
+</script>
+
+<template>
+  <div class="editor-left w-[261px]">
+    <div class="h-full overflow-y-auto">
+      <Collapse v-model:active-key="extendGroups">
+        <CollapsePanel
+          v-for="group in groups"
+          :key="group.name"
+          :header="group.name"
+        >
+          <draggable
+            class="component-container"
+            ghost-class="draggable-ghost"
+            item-key="index"
+            :list="group.components"
+            :sort="false"
+            :group="{ name: 'component', pull: 'clone', put: false }"
+            :clone="handleCloneComponent"
+            :animation="200"
+            :force-fallback="true"
+          >
+            <template #item="{ element }">
+              <div>
+                <div class="drag-placement">组件放置区域</div>
+                <div class="component">
+                  <IconifyIcon :icon="element.icon" :size="32" />
+                  <span class="mt-1 text-xs">{{ element.name }}</span>
+                </div>
+              </div>
+            </template>
+          </draggable>
+        </CollapsePanel>
+      </Collapse>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.editor-left {
+  z-index: 1;
+  flex-shrink: 0;
+  user-select: none;
+  box-shadow: 8px 0 8px -8px rgb(0 0 0 / 12%);
+
+  :deep(.ant-collapse) {
+    border-top: none;
+  }
+
+  :deep(.ant-collapse-item) {
+    border-bottom: none;
+  }
+
+  :deep(.ant-collapse-content) {
+    padding-bottom: 0;
+  }
+
+  :deep(.ant-collapse-header) {
+    height: 32px;
+    padding: 0 24px !important;
+    line-height: 32px;
+    background-color: var(--ant-color-bg-layout);
+    border-bottom: none;
+  }
+
+  .component-container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .component {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 86px;
+    height: 86px;
+    cursor: move;
+    border-right: 1px solid var(--ant-color-border-secondary);
+    border-bottom: 1px solid var(--ant-color-border-secondary);
+
+    .anticon {
+      margin-bottom: 4px;
+      color: gray;
+    }
+  }
+
+  .component.active,
+  .component:hover {
+    color: var(--ant-color-white);
+    background: var(--ant-color-primary);
+
+    .anticon {
+      color: var(--ant-color-white);
+    }
+  }
+
+  .component:nth-of-type(3n) {
+    border-right: none;
+  }
+}
+
+/* 拖拽占位提示，默认不显示 */
+.drag-placement {
+  display: none;
+  color: #fff;
+}
+
+.drag-area {
+  /* 拖拽到手机区域时的样式 */
+  .draggable-ghost {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 40px;
+
+    /* 条纹背景 */
+    background: linear-gradient(
+      45deg,
+      #91a8d5 0,
+      #91a8d5 10%,
+      #94b4eb 10%,
+      #94b4eb 50%,
+      #91a8d5 50%,
+      #91a8d5 60%,
+      #94b4eb 60%,
+      #94b4eb
+    );
+    background-size: 1rem 1rem;
+    transition: all 0.5s;
+
+    span {
+      display: inline-block;
+      width: 140px;
+      height: 25px;
+      font-size: 12px;
+      line-height: 25px;
+      color: #fff;
+      text-align: center;
+      background: #5487df;
+    }
+
+    /* 拖拽时隐藏组件 */
+    .component {
+      display: none;
+    }
+
+    /* 拖拽时显示占位提示 */
+    .drag-placement {
+      display: block;
+    }
+  }
+}
+</style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/Carousel/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
similarity index 93%
rename from apps/web-ele/src/components/diy-editor/components/mobile/Carousel/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
index 749d36a32..f63a0bcb6 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/Carousel/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 轮播图属性 */
 export interface CarouselProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue
new file mode 100644
index 000000000..74a2fcf0a
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { CarouselProperty } from './config';
+
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+/** 轮播图 */
+defineOptions({ name: 'Carousel' });
+
+defineProps<{ property: CarouselProperty }>();
+
+const currentIndex = ref(0);
+const handleIndexChange = (index: number) => {
+  currentIndex.value = index + 1;
+};
+</script>
+<template>
+  <!-- 无图片 -->
+  <div
+    class="flex h-[250px] items-center justify-center bg-gray-300"
+    v-if="property.items.length === 0"
+  >
+    <IconifyIcon icon="tdesign:image" class="text-[120px] text-gray-800" />
+  </div>
+  <div v-else class="relative">
+    <Carousel
+      :autoplay="property.autoplay"
+      :autoplay-speed="property.interval * 1000"
+      :dots="property.indicator !== 'number'"
+      @change="handleIndexChange"
+      class="h-[174px]"
+    >
+      <div v-for="(item, index) in property.items" :key="index">
+        <Image
+          class="h-full w-full object-cover"
+          :src="item.imgUrl"
+          :preview="false"
+        />
+      </div>
+    </Carousel>
+    <div
+      v-if="property.indicator === 'number'"
+      class="absolute bottom-[10px] right-[10px] rounded-xl bg-black px-[8px] py-[2px] text-[10px] text-white opacity-40"
+    >
+      {{ currentIndex }} / {{ property.items.length }}
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
new file mode 100644
index 000000000..3dcc075e5
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import type { CarouselProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+
+import UploadFile from '#/components/upload/file-upload.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+// 轮播图属性面板
+defineOptions({ name: 'CarouselProperty' });
+
+const props = defineProps<{ modelValue: CarouselProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <ElForm label-width="80px" :model="formData">
+      <ElCard header="样式设置" class="property-group" shadow="never">
+        <ElFormItem label="样式" prop="type">
+          <ElRadioGroup v-model="formData.type">
+            <ElTooltip class="item" content="默认" placement="bottom">
+              <ElRadioButton value="default">
+                <IconifyIcon icon="system-uicons:carousel" />
+              </ElRadioButton>
+            </ElTooltip>
+            <ElTooltip class="item" content="卡片" placement="bottom">
+              <ElRadioButton value="card">
+                <IconifyIcon icon="ic:round-view-carousel" />
+              </ElRadioButton>
+            </ElTooltip>
+          </ElRadioGroup>
+        </ElFormItem>
+        <ElFormItem label="指示器" prop="indicator">
+          <ElRadioGroup v-model="formData.indicator">
+            <ElRadio value="dot">小圆点</ElRadio>
+            <ElRadio value="number">数字</ElRadio>
+          </ElRadioGroup>
+        </ElFormItem>
+        <ElFormItem label="是否轮播" prop="autoplay">
+          <ElSwitch v-model="formData.autoplay" />
+        </ElFormItem>
+        <ElFormItem label="播放间隔" prop="interval" v-if="formData.autoplay">
+          <ElSlider
+            v-model="formData.interval"
+            :max="10"
+            :min="0.5"
+            :step="0.5"
+            show-input
+            input-size="small"
+            :show-input-controls="false"
+          />
+          <ElText type="info">单位：秒</ElText>
+        </ElFormItem>
+      </ElCard>
+      <ElCard header="内容设置" class="property-group" shadow="never">
+        <Draggable v-model="formData.items" :empty-item="{ type: 'img' }">
+          <template #default="{ element }">
+            <ElFormItem
+              label="类型"
+              prop="type"
+              class="mb-2"
+              label-width="40px"
+            >
+              <ElRadioGroup v-model="element.type">
+                <ElRadio value="img">图片</ElRadio>
+                <ElRadio value="video">视频</ElRadio>
+              </ElRadioGroup>
+            </ElFormItem>
+            <ElFormItem
+              label="图片"
+              class="mb-2"
+              label-width="40px"
+              v-if="element.type === 'img'"
+            >
+              <UploadImg
+                v-model="element.imgUrl"
+                draggable="false"
+                height="80px"
+                width="100%"
+                class="min-w-[80px]"
+                :show-description="false"
+              />
+            </ElFormItem>
+            <template v-else>
+              <ElFormItem label="封面" class="mb-2" label-width="40px">
+                <UploadImg
+                  v-model="element.imgUrl"
+                  draggable="false"
+                  :show-description="false"
+                  height="80px"
+                  width="100%"
+                  class="min-w-[80px]"
+                />
+              </ElFormItem>
+              <ElFormItem label="视频" class="mb-2" label-width="40px">
+                <UploadFile
+                  v-model="element.videoUrl"
+                  :file-type="['mp4']"
+                  :limit="1"
+                  :file-size="100"
+                  class="min-w-[80px]"
+                />
+              </ElFormItem>
+            </template>
+            <ElFormItem label="链接" class="mb-2" label-width="40px">
+              <AppLinkInput v-model="element.url" />
+            </ElFormItem>
+          </template>
+        </Draggable>
+      </ElCard>
+    </ElForm>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/Divider/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/config.ts
similarity index 89%
rename from apps/web-ele/src/components/diy-editor/components/mobile/Divider/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/config.ts
index 7147ef9b2..17e5a79bf 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/Divider/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/config.ts
@@ -1,4 +1,4 @@
-import type { DiyComponent } from '#/components/diy-editor/util';
+import type { DiyComponent } from '../../../util';
 
 /** 分割线属性 */
 export interface DividerProperty {
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/Divider/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/Divider/index.vue
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/index.vue
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue
new file mode 100644
index 000000000..3f479b8c2
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue
@@ -0,0 +1,4 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/Popover/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts
similarity index 88%
rename from apps/web-ele/src/components/diy-editor/components/mobile/Popover/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts
index b842d19f5..6f365b735 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/Popover/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts
@@ -1,4 +1,4 @@
-import type { DiyComponent } from '#/components/diy-editor/util';
+import type { DiyComponent } from '../../../util';
 
 /** 弹窗广告属性 */
 export interface PopoverProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue
new file mode 100644
index 000000000..b193e8366
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { PopoverProperty } from './config';
+
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Image } from 'ant-design-vue';
+
+/** 弹窗广告 */
+defineOptions({ name: 'Popover' });
+// 定义属性
+defineProps<{ property: PopoverProperty }>();
+
+// 处理选中
+const activeIndex = ref(0);
+const handleActive = (index: number) => {
+  activeIndex.value = index;
+};
+</script>
+<template>
+  <div
+    v-for="(item, index) in property.list"
+    :key="index"
+    class="absolute bottom-1/2 right-1/2 h-[454px] w-[292px] rounded border border-gray-300 bg-white p-0.5"
+    :style="{
+      zIndex: 100 + index + (activeIndex === index ? 100 : 0),
+      marginRight: `${-146 - index * 20}px`,
+      marginBottom: `${-227 - index * 20}px`,
+    }"
+    @click="handleActive(index)"
+  >
+    <Image :src="item.imgUrl" fit="contain" class="h-full w-full">
+      <template #error>
+        <div class="flex h-full w-full items-center justify-center">
+          <IconifyIcon icon="ep:picture" />
+        </div>
+      </template>
+    </Image>
+    <div class="absolute right-1 top-1 text-xs">{{ index + 1 }}</div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue
new file mode 100644
index 000000000..3f479b8c2
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue
@@ -0,0 +1,4 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/component.tsx b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/component.tsx
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
similarity index 90%
rename from apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
index ddfc1857a..4392494d3 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 商品卡片属性 */
 export interface CouponCardProperty {
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
new file mode 100644
index 000000000..39668774c
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import type { CouponCardProperty } from './config';
+
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { onMounted, ref, watch } from 'vue';
+
+import {
+  CouponDiscount,
+  CouponDiscountDesc,
+  CouponValidTerm,
+} from './component';
+
+/** 商品卡片 */
+defineOptions({ name: 'CouponCard' });
+// 定义属性
+const props = defineProps<{ property: CouponCardProperty }>();
+// 商品列表
+const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]);
+watch(
+  () => props.property.couponIds,
+  async () => {
+    if (props.property.couponIds?.length > 0) {
+      couponList.value = await getCouponTemplateList(props.property.couponIds);
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+// 手机宽度
+const phoneWidth = ref(375);
+// 容器
+const containerRef = ref();
+// 滚动条宽度
+const scrollbarWidth = ref('100%');
+// 优惠券的宽度
+const couponWidth = ref(375);
+// 计算布局参数
+watch(
+  () => [props.property, phoneWidth, couponList.value.length],
+  () => {
+    // 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数
+    couponWidth.value =
+      (phoneWidth.value - props.property.space * (props.property.columns - 1)) /
+      props.property.columns;
+    // 显示滚动条
+    scrollbarWidth.value = `${
+      couponWidth.value * couponList.value.length +
+      props.property.space * (couponList.value.length - 1)
+    }px`;
+  },
+  { immediate: true, deep: true },
+);
+onMounted(() => {
+  // 提取手机宽度
+  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
+});
+</script>
+<template>
+  <div class="z-10 min-h-[30px]" wrap-class="w-full" ref="containerRef">
+    <div
+      class="flex flex-row text-xs"
+      :style="{
+        gap: `${property.space}px`,
+        width: scrollbarWidth,
+      }"
+    >
+      <div
+        class="box-content"
+        :style="{
+          background: property.bgImg
+            ? `url(${property.bgImg}) 100% center / 100% 100% no-repeat`
+            : '#fff',
+          width: `${couponWidth}px`,
+          color: property.textColor,
+        }"
+        v-for="(coupon, index) in couponList"
+        :key="index"
+      >
+        <!-- 布局1：1列-->
+        <div
+          v-if="property.columns === 1"
+          class="ml-4 flex flex-row justify-between p-2"
+        >
+          <div class="flex flex-col justify-evenly gap-1">
+            <!-- 优惠值 -->
+            <CouponDiscount :coupon="coupon" />
+            <!-- 优惠描述 -->
+            <CouponDiscountDesc :coupon="coupon" />
+            <!-- 有效期 -->
+            <CouponValidTerm :coupon="coupon" />
+          </div>
+          <div class="flex flex-col justify-evenly">
+            <div
+              class="rounded-full px-2 py-0.5"
+              :style="{
+                color: property.button.color,
+                background: property.button.bgColor,
+              }"
+            >
+              立即领取
+            </div>
+          </div>
+        </div>
+        <!-- 布局2：2列-->
+        <div
+          v-else-if="property.columns === 2"
+          class="ml-4 flex flex-row justify-between p-2"
+        >
+          <div class="flex flex-col justify-evenly gap-1">
+            <!-- 优惠值 -->
+            <CouponDiscount :coupon="coupon" />
+            <!-- 优惠描述 -->
+            <CouponDiscountDesc :coupon="coupon" />
+            <!-- 领取说明 -->
+            <div v-if="coupon.totalCount >= 0">
+              仅剩：{{ coupon.totalCount - coupon.takeCount }}张
+            </div>
+            <div v-else-if="coupon.totalCount === -1">仅剩：不限制</div>
+          </div>
+          <div class="flex flex-col">
+            <div
+              class="h-full w-5 rounded-full px-0.5 py-2 text-center"
+              :style="{
+                color: property.button.color,
+                background: property.button.bgColor,
+              }"
+            >
+              立即领取
+            </div>
+          </div>
+        </div>
+        <!-- 布局3：3列-->
+        <div v-else class="flex flex-col items-center justify-around gap-1 p-1">
+          <!-- 优惠值 -->
+          <CouponDiscount :coupon="coupon" />
+          <!-- 优惠描述 -->
+          <CouponDiscountDesc :coupon="coupon" />
+          <div
+            class="rounded-full px-2 py-0.5"
+            :style="{
+              color: property.button.color,
+              background: property.button.bgColor,
+            }"
+          >
+            立即领取
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
new file mode 100644
index 000000000..3f479b8c2
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
@@ -0,0 +1,4 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts
similarity index 91%
rename from apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts
index 7972bd3bc..22b98581c 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts
@@ -1,4 +1,4 @@
-import type { DiyComponent } from '#/components/diy-editor/util';
+import type { DiyComponent } from '../../../util';
 
 // 悬浮按钮属性
 export interface FloatingActionButtonProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
new file mode 100644
index 000000000..89b74ad2e
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { FloatingActionButtonProperty } from './config';
+
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Image, message } from 'ant-design-vue';
+
+/** 悬浮按钮 */
+defineOptions({ name: 'FloatingActionButton' });
+// 定义属性
+defineProps<{ property: FloatingActionButtonProperty }>();
+
+// 是否展开
+const expanded = ref(false);
+// 处理展开/折叠
+const handleToggleFab = () => {
+  expanded.value = !expanded.value;
+};
+
+const handleActive = (index: number) => {
+  message.success(`点击了${index}`);
+};
+</script>
+<template>
+  <div
+    class="absolute bottom-8 right-[calc(50%-375px/2+32px)] z-20 flex items-center gap-3"
+    :class="[
+      {
+        'flex-row': property.direction === 'horizontal',
+        'flex-col': property.direction === 'vertical',
+      },
+    ]"
+  >
+    <template v-if="expanded">
+      <div
+        v-for="(item, index) in property.list"
+        :key="index"
+        class="flex flex-col items-center"
+        @click="handleActive(index)"
+      >
+        <Image :src="item.imgUrl" fit="contain" class="h-7 w-7">
+          <template #error>
+            <div class="flex h-full w-full items-center justify-center">
+              <IconifyIcon icon="ep:picture" :color="item.textColor" />
+            </div>
+          </template>
+        </Image>
+        <span
+          v-if="property.showText"
+          class="mt-1 text-xs"
+          :style="{ color: item.textColor }"
+        >
+          {{ item.text }}
+        </span>
+      </div>
+    </template>
+    <!-- todo: @owen 使用APP主题色 -->
+    <el-button type="primary" size="large" circle @click="handleToggleFab">
+      <IconifyIcon
+        icon="ep:plus"
+        class="fab-icon"
+        :class="[{ active: expanded }]"
+      />
+    </el-button>
+  </div>
+  <!-- 模态背景：展开时显示，点击后折叠 -->
+  <div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div>
+</template>
+
+<style scoped lang="scss">
+/* 模态背景 */
+.modal-bg {
+  position: absolute;
+  top: 0;
+  left: calc(50% - 375px / 2);
+  z-index: 11;
+  width: 375px;
+  height: 100%;
+  background-color: rgb(0 0 0 / 40%);
+}
+
+.fab-icon {
+  transform: rotate(0deg);
+  transition: transform 0.3s;
+
+  &.active {
+    transform: rotate(135deg);
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
new file mode 100644
index 000000000..3f479b8c2
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
@@ -0,0 +1,4 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
similarity index 97%
rename from apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
index 93a264b5e..2bac4c39e 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
@@ -1,6 +1,6 @@
 import type { StyleValue } from 'vue';
 
-import type { HotZoneItemProperty } from '#/components/diy-editor/components/mobile/HotZone/config';
+import type { HotZoneItemProperty } from '../../config';
 
 // 热区的最小宽高
 export const HOT_ZONE_MIN_SIZE = 100;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
new file mode 100644
index 000000000..3f479b8c2
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
@@ -0,0 +1,4 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
similarity index 89%
rename from apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
index 71e39d9cd..464881740 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 热区属性 */
 export interface HotZoneProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
new file mode 100644
index 000000000..37bab23f1
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { HotZoneProperty } from './config';
+
+/** 热区 */
+defineOptions({ name: 'HotZone' });
+const props = defineProps<{ property: HotZoneProperty }>();
+</script>
+
+<template>
+  <div class="min-h-30px relative h-full w-full">
+    <Image
+      :src="props.property.imgUrl"
+      class="pointer-events-none h-full w-full select-none"
+    />
+    <div
+      v-for="(item, index) in props.property.list"
+      :key="index"
+      class="hot-zone"
+      :style="{
+        width: `${item.width}px`,
+        height: `${item.height}px`,
+        top: `${item.top}px`,
+        left: `${item.left}px`,
+      }"
+    >
+      {{ item.name }}
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.hot-zone {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: var(--el-color-primary);
+  cursor: move;
+  background: var(--el-color-primary-light-7);
+  border: 1px solid var(--el-color-primary);
+  opacity: 0.8;
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
new file mode 100644
index 000000000..4f4702812
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { HotZoneProperty } from './config';
+
+import { ref } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+
+import { Button, Form, FormItem, Typography } from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+import HotZoneEditDialog from './components/hot-zone-edit-dialog/index.vue';
+
+/** 热区属性面板 */
+defineOptions({ name: 'HotZoneProperty' });
+
+const props = defineProps<{ modelValue: HotZoneProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+
+// 热区编辑对话框
+const editDialogRef = ref();
+// 打开热区编辑对话框
+const handleOpenEditDialog = () => {
+  editDialogRef.value.open();
+};
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <!-- 表单 -->
+    <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData" class="mt-2">
+      <FormItem label="上传图片" prop="imgUrl">
+        <UploadImg
+          v-model="formData.imgUrl"
+          height="50px"
+          width="auto"
+          class="min-w-[80px]"
+          :show-description="false"
+        >
+          <template #tip>
+            <Typography.Text type="secondary" class="text-xs"> 推荐宽度 750</Typography.Text>
+          </template>
+        </UploadImg>
+      </FormItem>
+    </Form>
+
+    <Button type="primary" class="w-full" @click="handleOpenEditDialog">
+      设置热区
+    </Button>
+  </ComponentContainerProperty>
+  <!-- 热区编辑对话框 -->
+  <HotZoneEditDialog
+    ref="editDialogRef"
+    v-model="formData.list"
+    :img-url="formData.imgUrl"
+  />
+</template>
+
+<style scoped lang="scss">
+.hot-zone {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: #fff;
+  cursor: move;
+  background: #409effbf;
+  border: 1px solid var(--el-color-primary);
+
+  /* 控制点 */
+  .ctrl-dot {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    background-color: #fff;
+    border-radius: 50%;
+  }
+}
+</style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
similarity index 84%
rename from apps/web-ele/src/components/diy-editor/components/mobile/image-bar/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
index 53a87403c..0025ff4db 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 图片展示属性 */
 export interface ImageBarProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue
new file mode 100644
index 000000000..5be469d97
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { ImageBarProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+/** 图片展示 */
+defineOptions({ name: 'ImageBar' });
+
+defineProps<{ property: ImageBarProperty }>();
+</script>
+<template>
+  <!-- 无图片 -->
+  <div
+    class="flex h-12 items-center justify-center bg-gray-300"
+    v-if="!property.imgUrl"
+  >
+    <IconifyIcon icon="ep:picture" class="text-3xl text-gray-600" />
+  </div>
+  <Image
+    class="min-h-8 w-full"
+    v-else
+    :src="property.imgUrl"
+    :preview="false"
+  />
+</template>
+
+<style scoped lang="scss">
+/* 图片 */
+img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
new file mode 100644
index 000000000..1b54f850c
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { ImageBarProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+
+import { Form, FormItem } from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import { AppLinkInput } from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+// 图片展示属性面板
+defineOptions({ name: 'ImageBarProperty' });
+
+const props = defineProps<{ modelValue: ImageBarProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData">
+      <FormItem label="上传图片" prop="imgUrl">
+        <UploadImg
+          v-model="formData.imgUrl"
+          draggable="false"
+          height="80px"
+          width="100%"
+          class="min-w-[80px]"
+          :show-description="false"
+        >
+          <template #tip> 建议宽度750 </template>
+        </UploadImg>
+      </FormItem>
+      <FormItem label="链接" prop="url">
+        <AppLinkInput v-model="formData.url" />
+      </FormItem>
+    </Form>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/index.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/index.ts
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/index.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/index.ts
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
similarity index 91%
rename from apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
index b364fbb35..ef03fc9a6 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 广告魔方属性 */
 export interface MagicCubeProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
new file mode 100644
index 000000000..1b3418b18
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { MagicCubeProperty } from './config';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+/** 广告魔方 */
+defineOptions({ name: 'MagicCube' });
+const props = defineProps<{ property: MagicCubeProperty }>();
+// 一个方块的大小
+const CUBE_SIZE = 93.75;
+/**
+ * 计算方块的行数
+ * 行数用于计算魔方的总体高度，存在以下情况：
+ * 1. 没有数据时，默认就只显示一行的高度
+ * 2. 底部的空白不算高度，例如只有第一行有数据，那么就只显示一行的高度
+ * 3. 顶部及中间的空白算高度，例如一共有四行，只有最后一行有数据，那么也显示四行的高度
+ */
+const rowCount = computed(() => {
+  let count = 0;
+  if (props.property.list.length > 0) {
+    // 最大行号
+    count = Math.max(
+      ...props.property.list.map((item) => item.top + item.height),
+    );
+  }
+  // 保证至少有一行
+  return count === 0 ? 1 : count;
+});
+</script>
+
+<template>
+  <div
+    class="relative"
+    :style="{
+      height: `${rowCount * CUBE_SIZE}px`,
+      width: `${4 * CUBE_SIZE}px`,
+      padding: `${property.space}px`,
+    }"
+  >
+    <div
+      v-for="(item, index) in property.list"
+      :key="index"
+      class="absolute"
+      :style="{
+        width: `${item.width * CUBE_SIZE - property.space}px`,
+        height: `${item.height * CUBE_SIZE - property.space}px`,
+        top: `${item.top * CUBE_SIZE}px`,
+        left: `${item.left * CUBE_SIZE}px`,
+      }"
+    >
+      <Image
+        class="h-full w-full"
+        fit="cover"
+        :src="item.imgUrl"
+        :style="{
+          borderTopLeftRadius: `${property.borderRadiusTop}px`,
+          borderTopRightRadius: `${property.borderRadiusTop}px`,
+          borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
+          borderBottomRightRadius: `${property.borderRadiusBottom}px`,
+        }"
+      >
+        <template #error>
+          <div class="image-slot">
+            <div
+              class="flex items-center justify-center"
+              :style="{
+                width: `${item.width * CUBE_SIZE}px`,
+                height: `${item.height * CUBE_SIZE}px`,
+              }"
+            >
+              <IconifyIcon icon="ep-picture" color="gray" :size="CUBE_SIZE" />
+            </div>
+          </div>
+        </template>
+      </Image>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
new file mode 100644
index 000000000..3f479b8c2
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
@@ -0,0 +1,4 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
similarity index 94%
rename from apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
index 4ae675a49..db6b55264 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 import { cloneDeep } from '@vben/utils';
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue
new file mode 100644
index 000000000..c1ff5d207
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { MenuGridProperty } from './config';
+
+/** 宫格导航 */
+defineOptions({ name: 'MenuGrid' });
+defineProps<{ property: MenuGridProperty }>();
+</script>
+
+<template>
+  <div class="flex flex-row flex-wrap">
+    <div
+      v-for="(item, index) in property.list"
+      :key="index"
+      class="relative flex flex-col items-center pb-3.5 pt-5"
+      :style="{ width: `${100 * (1 / property.column)}%` }"
+    >
+      <!-- 右上角角标 -->
+      <span
+        v-if="item.badge?.show"
+        class="absolute left-1/2 top-2.5 z-10 h-5 rounded-full px-1.5 text-center text-xs leading-5"
+        :style="{
+          color: item.badge.textColor,
+          backgroundColor: item.badge.bgColor,
+        }"
+      >
+        {{ item.badge.text }}
+      </span>
+      <Image
+        v-if="item.iconUrl"
+        class="h-7 w-7"
+        :src="item.iconUrl"
+        :preview="false"
+      />
+      <span
+        class="mt-2 h-4 text-xs leading-4"
+        :style="{ color: item.titleColor }"
+      >
+        {{ item.title }}
+      </span>
+      <span
+        class="mt-1.5 h-3 text-xs leading-3"
+        :style="{ color: item.subtitleColor }"
+      >
+        {{ item.subtitle }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
new file mode 100644
index 000000000..c1506a4ca
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import type { MenuGridProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Form,
+  FormItem,
+  Radio,
+  RadioGroup,
+  Switch,
+} from 'ant-design-vue';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
+
+import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config';
+
+/** 宫格导航属性面板 */
+defineOptions({ name: 'MenuGridProperty' });
+
+const props = defineProps<{ modelValue: MenuGridProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <!-- 表单 -->
+    <Form label-width="80px" :model="formData" class="mt-2">
+      <FormItem label="每行数量" prop="column">
+        <RadioGroup v-model="formData.column">
+          <Radio :value="3">3个</Radio>
+          <Radio :value="4">4个</Radio>
+        </RadioGroup>
+      </FormItem>
+
+      <Card header="菜单设置" class="property-group" shadow="never">
+        <Draggable
+          v-model="formData.list"
+          :empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY"
+        >
+          <template #default="{ element }">
+            <FormItem label="图标" prop="iconUrl">
+              <UploadImg
+                v-model="element.iconUrl"
+                height="80px"
+                width="80px"
+                :show-description="false"
+              >
+                <template #tip> 建议尺寸：44 * 44 </template>
+              </UploadImg>
+            </FormItem>
+            <FormItem label="标题" prop="title">
+              <InputWithColor
+                v-model="element.title"
+                v-model:color="element.titleColor"
+              />
+            </FormItem>
+            <FormItem label="副标题" prop="subtitle">
+              <InputWithColor
+                v-model="element.subtitle"
+                v-model:color="element.subtitleColor"
+              />
+            </FormItem>
+            <FormItem label="链接" prop="url">
+              <AppLinkInput v-model="element.url" />
+            </FormItem>
+            <FormItem label="显示角标" prop="badge.show">
+              <Switch v-model="element.badge.show" />
+            </FormItem>
+            <template v-if="element.badge.show">
+              <FormItem label="角标内容" prop="badge.text">
+                <InputWithColor
+                  v-model="element.badge.text"
+                  v-model:color="element.badge.textColor"
+                />
+              </FormItem>
+              <FormItem label="背景颜色" prop="badge.bgColor">
+                <ColorInput v-model="element.badge.bgColor" />
+              </FormItem>
+            </template>
+          </template>
+        </Draggable>
+      </Card>
+    </Form>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/menu-list/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
similarity index 91%
rename from apps/web-ele/src/components/diy-editor/components/mobile/menu-list/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
index 4be256749..6567c553d 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/menu-list/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 import { cloneDeep } from '@vben/utils';
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
new file mode 100644
index 000000000..2997b98dc
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { MenuListProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Image } from 'ant-design-vue';
+
+/** 列表导航 */
+defineOptions({ name: 'MenuList' });
+defineProps<{ property: MenuListProperty }>();
+</script>
+
+<template>
+  <div class="flex min-h-[42px] flex-col">
+    <div
+      v-for="(item, index) in property.list"
+      :key="index"
+      class="item flex h-[42px] flex-row items-center justify-between gap-1 px-3"
+    >
+      <div class="flex flex-1 flex-row items-center gap-2">
+        <Image v-if="item.iconUrl" class="h-4 w-4" :src="item.iconUrl" />
+        <span class="text-base" :style="{ color: item.titleColor }">{{
+          item.title
+        }}</span>
+      </div>
+      <div class="item-center flex flex-row justify-center gap-1">
+        <span class="text-xs" :style="{ color: item.subtitleColor }">{{
+          item.subtitle
+        }}</span>
+        <IconifyIcon icon="ep:arrow-right" color="#000" :size="16" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.item + .item {
+  border-top: 1px solid #eee;
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
new file mode 100644
index 000000000..3f479b8c2
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
@@ -0,0 +1,4 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
similarity index 93%
rename from apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
index 535287d40..27138ebee 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 import { cloneDeep } from '@vben/utils';
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
new file mode 100644
index 000000000..e92f0a5aa
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import type { MenuSwiperItemProperty, MenuSwiperProperty } from './config';
+
+import { ref, watch } from 'vue';
+
+/** 菜单导航 */
+defineOptions({ name: 'MenuSwiper' });
+const props = defineProps<{ property: MenuSwiperProperty }>();
+// 标题的高度
+const TITLE_HEIGHT = 20;
+// 图标的高度
+const ICON_SIZE = 32;
+// 垂直间距：一行上下的间距
+const SPACE_Y = 16;
+
+// 分页
+const pages = ref<MenuSwiperItemProperty[][]>([]);
+// 轮播图高度
+const carouselHeight = ref(0);
+// 行高
+const rowHeight = ref(0);
+// 列宽
+const columnWidth = ref('');
+watch(
+  () => props.property,
+  () => {
+    // 计算列宽：每一列的百分比
+    columnWidth.value = `${100 * (1 / props.property.column)}%`;
+    // 计算行高：图标 + 文字（仅显示图片时为0） + 垂直间距 * 2
+    rowHeight.value =
+      (props.property.layout === 'iconText'
+        ? ICON_SIZE + TITLE_HEIGHT
+        : ICON_SIZE) +
+      SPACE_Y * 2;
+    // 计算轮播的高度：行数 * 行高
+    carouselHeight.value = props.property.row * rowHeight.value;
+
+    // 每页数量：行数 * 列数
+    const pageSize = props.property.row * props.property.column;
+    // 清空分页
+    pages.value = [];
+    // 每一页的菜单
+    let pageItems: MenuSwiperItemProperty[] = [];
+    for (const item of props.property.list) {
+      // 本页满员，新建下一页
+      if (pageItems.length === pageSize) {
+        pageItems = [];
+      }
+      // 增加一页
+      if (pageItems.length === 0) {
+        pages.value.push(pageItems);
+      }
+      // 本页增加一个
+      pageItems.push(item);
+    }
+  },
+  { immediate: true, deep: true },
+);
+</script>
+
+<template>
+  <Carousel
+    :autoplay="false"
+    arrows
+    dots
+    :style="{ height: `${carouselHeight}px` }"
+  >
+    <div v-for="(page, pageIndex) in pages" :key="pageIndex">
+      <div class="flex flex-row flex-wrap">
+        <div
+          v-for="(item, index) in page"
+          :key="index"
+          class="relative flex flex-col items-center justify-center"
+          :style="{ width: columnWidth, height: `${rowHeight}px` }"
+        >
+          <!-- 图标 + 角标 -->
+          <div class="relative" :class="`h-${ICON_SIZE}px w-${ICON_SIZE}px`">
+            <!-- 右上角角标 -->
+            <span
+              v-if="item.badge?.show"
+              class="absolute -right-2.5 -top-2.5 z-10 h-5 rounded-[10px] px-1.5 text-center text-xs leading-5"
+              :style="{
+                color: item.badge.textColor,
+                backgroundColor: item.badge.bgColor,
+              }"
+            >
+              {{ item.badge.text }}
+            </span>
+            <Image
+              v-if="item.iconUrl"
+              :src="item.iconUrl"
+              class="h-full w-full"
+              :preview="false"
+            />
+          </div>
+          <!-- 标题 -->
+          <span
+            v-if="property.layout === 'iconText'"
+            class="text-xs"
+            :style="{
+              color: item.titleColor,
+              height: `${TITLE_HEIGHT}px`,
+              lineHeight: `${TITLE_HEIGHT}px`,
+            }"
+          >
+            {{ item.title }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </Carousel>
+</template>
+
+<style lang="scss">
+// Ant Design Vue Carousel 样式调整
+:deep(.ant-carousel .ant-carousel-dots) {
+  .ant-carousel-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 6px;
+
+    button {
+      width: 6px;
+      height: 6px;
+      background: #ff6000;
+      border-radius: 6px;
+    }
+  }
+
+  .ant-carousel-dot-active button {
+    width: 12px;
+    background: #ff6000;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
new file mode 100644
index 000000000..3f479b8c2
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
@@ -0,0 +1,4 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
new file mode 100644
index 000000000..faed4f2e9
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import type { NavigationBarCellProperty } from '../config';
+
+import type { Rect } from '#/views/mall/promotion/components/magic-cube-editor/util';
+
+import { computed, ref } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+import { FormItem, Input, Radio, RadioGroup, Slider } from 'ant-design-vue';
+
+import appNavBarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
+import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  ColorInput,
+  MagicCubeEditor,
+} from '#/views/mall/promotion/components';
+
+// 导航栏属性面板
+defineOptions({ name: 'NavigationBarCellProperty' });
+
+const props = defineProps({
+  isMp: {
+    type: Boolean,
+    default: true,
+  },
+  modelValue: {
+    type: Array as () => NavigationBarCellProperty[],
+    default: () => [],
+  },
+});
+const emit = defineEmits(['update:modelValue']);
+const cellList = useVModel(props, 'modelValue', emit);
+
+// 单元格数量：小程序6个（右侧胶囊按钮占了2个），其它平台8个
+const cellCount = computed(() => (props.isMp ? 6 : 8));
+
+// 转换为Rect格式的数据
+const rectList = computed<Rect[]>(() => {
+  return cellList.value.map((cell) => ({
+    left: cell.left,
+    top: cell.top,
+    width: cell.width,
+    height: cell.height,
+    right: cell.left + cell.width,
+    bottom: cell.top + cell.height,
+  }));
+});
+
+// 选中的热区
+const selectedHotAreaIndex = ref(0);
+const handleHotAreaSelected = (
+  cellValue: NavigationBarCellProperty,
+  index: number,
+) => {
+  selectedHotAreaIndex.value = index;
+  if (!cellValue.type) {
+    cellValue.type = 'text';
+    cellValue.textColor = '#111111';
+  }
+};
+</script>
+
+<template>
+  <div class="h-40px flex items-center justify-center">
+    <MagicCubeEditor
+      v-model="rectList"
+      :cols="cellCount"
+      :cube-size="38"
+      :rows="1"
+      class="m-b-16px"
+      @hot-area-selected="handleHotAreaSelected"
+    />
+    <img
+      v-if="isMp"
+      alt=""
+      style="width: 76px; height: 30px"
+      :src="appNavBarMp"
+    />
+  </div>
+  <template v-for="(cell, cellIndex) in cellList" :key="cellIndex">
+    <template v-if="selectedHotAreaIndex === Number(cellIndex)">
+      <FormItem label="类型">
+        <RadioGroup v-model:value="cell.type">
+          <Radio value="text">文字</Radio>
+          <Radio value="image">图片</Radio>
+          <Radio value="search">搜索框</Radio>
+        </RadioGroup>
+      </FormItem>
+      <!-- 1. 文字 -->
+      <template v-if="cell.type === 'text'">
+        <FormItem label="内容">
+          <Input v-model:value="cell!.text" :maxlength="10" show-count />
+        </FormItem>
+        <FormItem label="颜色">
+          <ColorInput v-model="cell!.textColor" />
+        </FormItem>
+        <FormItem label="链接">
+          <AppLinkInput v-model="cell.url" />
+        </FormItem>
+      </template>
+      <!-- 2. 图片 -->
+      <template v-else-if="cell.type === 'image'">
+        <FormItem label="图片">
+          <UploadImg
+            v-model="cell.imgUrl"
+            :limit="1"
+            height="56px"
+            width="56px"
+            :show-description="false"
+          >
+            <template #tip>建议尺寸 56*56</template>
+          </UploadImg>
+        </FormItem>
+        <FormItem label="链接">
+          <AppLinkInput v-model="cell.url" />
+        </FormItem>
+      </template>
+      <!-- 3. 搜索框 -->
+      <template v-else>
+        <FormItem label="提示文字">
+          <Input v-model:value="cell.placeholder" :maxlength="10" show-count />
+        </FormItem>
+        <FormItem label="圆角">
+          <Slider v-model:value="cell.borderRadius" :max="100" :min="0" />
+        </FormItem>
+      </template>
+    </template>
+  </template>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts
similarity index 96%
rename from apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts
index 38325d5a9..fd675b16e 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts
@@ -1,4 +1,4 @@
-import type { DiyComponent } from '#/components/diy-editor/util';
+import type { DiyComponent } from '../../../util';
 
 /** 顶部导航栏属性 */
 export interface NavigationBarProperty {
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
similarity index 93%
rename from apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/index.vue
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
index 4a32acb80..9e3b17a07 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import type { StyleValue } from 'vue';
 
+import type { SearchProperty } from '../search-bar/config';
 import type {
   NavigationBarCellProperty,
   NavigationBarProperty,
 } from './config';
 
-import type { SearchProperty } from '#/components/diy-editor/components/mobile/search-bar/config';
-
 import { computed } from 'vue';
 
 import appNavbarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
-import SearchBar from '#/components/diy-editor/components/mobile/search-bar/index.vue';
+
+import SearchBar from '../search-bar/index.vue';
 
 /** 页面顶部导航栏 */
 defineOptions({ name: 'NavigationBar' });
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
new file mode 100644
index 000000000..9bca36269
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import type { NavigationBarProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Checkbox,
+  Form,
+  FormItem,
+  Radio,
+  RadioGroup,
+  Tooltip,
+} from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
+
+import NavigationBarCellProperty from './components/cell-property.vue';
+
+// 导航栏属性面板
+defineOptions({ name: 'NavigationBarProperty' });
+const props = defineProps<{ modelValue: NavigationBarProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+// 表单校验
+const rules: Record<string, any> = {
+  name: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
+};
+
+const formData = useVModel(props, 'modelValue', emit);
+if (!formData.value._local) {
+  formData.value._local = { previewMp: true, previewOther: false };
+}
+</script>
+
+<template>
+  <Form
+    :label-col="{ span: 6 }"
+    :wrapper-col="{ span: 18 }"
+    :model="formData"
+    :rules="rules"
+  >
+    <FormItem label="样式" name="styleType">
+      <RadioGroup v-model:value="formData!.styleType">
+        <Radio value="normal">标准</Radio>
+        <Tooltip
+          title="沉侵式头部仅支持微信小程序、APP，建议页面第一个组件为图片展示类组件"
+          placement="top"
+        >
+          <Radio value="inner">沉浸式</Radio>
+        </Tooltip>
+      </RadioGroup>
+    </FormItem>
+    <FormItem
+      label="常驻显示"
+      name="alwaysShow"
+      v-if="formData.styleType === 'inner'"
+    >
+      <RadioGroup v-model:value="formData!.alwaysShow">
+        <Radio :value="false">关闭</Radio>
+        <Tooltip
+          title="常驻显示关闭后,头部小组件将在页面滑动时淡入"
+          placement="top"
+        >
+          <Radio :value="true">开启</Radio>
+        </Tooltip>
+      </RadioGroup>
+    </FormItem>
+    <FormItem label="背景类型" name="bgType">
+      <RadioGroup v-model:value="formData.bgType">
+        <Radio value="color">纯色</Radio>
+        <Radio value="img">图片</Radio>
+      </RadioGroup>
+    </FormItem>
+    <FormItem
+      label="背景颜色"
+      name="bgColor"
+      v-if="formData.bgType === 'color'"
+    >
+      <ColorInput v-model="formData.bgColor" />
+    </FormItem>
+    <FormItem label="背景图片" name="bgImg" v-else>
+      <div class="flex items-center">
+        <UploadImg
+          v-model="formData.bgImg"
+          :limit="1"
+          width="56px"
+          height="56px"
+          :show-description="false"
+        />
+        <span class="mb-2 ml-2 text-xs text-gray-400">建议宽度：750</span>
+      </div>
+    </FormItem>
+    <Card class="property-group" :bordered="false">
+      <template #title>
+        <div class="flex items-center justify-between">
+          <span>内容（小程序）</span>
+          <FormItem name="_local.previewMp" class="mb-0">
+            <Checkbox
+              v-model:checked="formData._local.previewMp"
+              @change="
+                formData._local.previewOther = !formData._local.previewMp
+              "
+            >
+              预览
+            </Checkbox>
+          </FormItem>
+        </div>
+      </template>
+      <NavigationBarCellProperty v-model="formData.mpCells" is-mp />
+    </Card>
+    <Card class="property-group" :bordered="false">
+      <template #title>
+        <div class="flex items-center justify-between">
+          <span>内容（非小程序）</span>
+          <FormItem name="_local.previewOther" class="mb-0">
+            <Checkbox
+              v-model:checked="formData._local.previewOther"
+              @change="
+                formData._local.previewMp = !formData._local.previewOther
+              "
+            >
+              预览
+            </Checkbox>
+          </FormItem>
+        </div>
+      </template>
+      <NavigationBarCellProperty v-model="formData.otherCells" :is-mp="false" />
+    </Card>
+  </Form>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
similarity index 91%
rename from apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
index 31dc13794..2d4acffb2 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 公告栏属性 */
 export interface NoticeBarProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
new file mode 100644
index 000000000..d74b741d4
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { NoticeBarProperty } from './config';
+
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Divider, Image } from 'ant-design-vue';
+
+/** 公告栏 */
+defineOptions({ name: 'NoticeBar' });
+
+const props = defineProps<{ property: NoticeBarProperty }>();
+
+// 自动轮播
+const activeIndex = ref(0);
+setInterval(() => {
+  const contents = props.property.contents || [];
+  activeIndex.value = (activeIndex.value + 1) % (contents.length || 1);
+}, 3000);
+</script>
+
+<template>
+  <div
+    class="flex items-center py-1 text-xs"
+    :style="{
+      backgroundColor: property.backgroundColor,
+      color: property.textColor,
+    }"
+  >
+    <Image :src="property.iconUrl" class="h-[18px]" :preview="false" />
+    <Divider type="vertical" />
+    <div class="flex-1 pr-2 h-6 truncate leading-6">
+      {{ property.contents?.[activeIndex]?.text }}
+    </div>
+    <IconifyIcon icon="ep:arrow-right" />
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
new file mode 100644
index 000000000..3f479b8c2
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
@@ -0,0 +1,4 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/page-config/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts
similarity index 87%
rename from apps/web-ele/src/components/diy-editor/components/mobile/page-config/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts
index 29855bb73..73032a84a 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/page-config/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts
@@ -1,4 +1,4 @@
-import type { DiyComponent } from '#/components/diy-editor/util';
+import type { DiyComponent } from '../../../util';
 
 /** 页面设置属性 */
 export interface PageConfigProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
new file mode 100644
index 000000000..135d303d2
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { PageConfigProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import { Form, FormItem, Textarea } from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
+
+// 导航栏属性面板
+defineOptions({ name: 'PageConfigProperty' });
+const props = defineProps<{ modelValue: PageConfigProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+// 表单校验
+const rules = {};
+
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <Form
+    :model="formData"
+    :rules="rules"
+    :label-col="{ span: 6 }"
+    :wrapper-col="{ span: 18 }"
+  >
+    <FormItem label="页面描述" name="description">
+      <Textarea
+        v-model:value="formData!.description"
+        placeholder="用户通过微信分享给朋友时，会自动显示页面描述"
+        :rows="3"
+      />
+    </FormItem>
+    <FormItem label="背景颜色" name="backgroundColor">
+      <ColorInput v-model="formData!.backgroundColor" />
+    </FormItem>
+    <FormItem label="背景图片" name="backgroundImage">
+      <UploadImg
+        v-model="formData!.backgroundImage"
+        :limit="1"
+        :show-description="false"
+      >
+        <template #tip>建议宽度 750px</template>
+      </UploadImg>
+    </FormItem>
+  </Form>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/product-card/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
similarity index 96%
rename from apps/web-ele/src/components/diy-editor/components/mobile/product-card/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
index ea3c9e4da..d165b01f6 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/product-card/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 商品卡片属性 */
 export interface ProductCardProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
new file mode 100644
index 000000000..16f91e1e1
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import type { ProductCardProperty } from './config';
+
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { ref, watch } from 'vue';
+
+import { fenToYuan } from '@vben/utils';
+
+import { Image } from 'ant-design-vue';
+
+import { getSpuDetailList } from '#/api/mall/product/spu';
+
+/** 商品卡片 */
+defineOptions({ name: 'ProductCard' });
+// 定义属性
+const props = defineProps<{ property: ProductCardProperty }>();
+// 商品列表
+const spuList = ref<MallSpuApi.Spu[]>([]);
+watch(
+  () => props.property.spuIds,
+  async () => {
+    spuList.value = await getSpuDetailList(props.property.spuIds);
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+/**
+ * 计算商品的间距
+ * @param index 商品索引
+ */
+const calculateSpace = (index: number) => {
+  // 商品的列数
+  const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
+  // 第一列没有左边距
+  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`;
+  // 第一行没有上边距
+  const marginTop = index < columns ? '0' : `${props.property.space}px`;
+
+  return { marginLeft, marginTop };
+};
+
+// 容器
+const containerRef = ref();
+// 计算商品的宽度
+const calculateWidth = () => {
+  let width = '100%';
+  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
+  if (props.property.layoutType === 'twoCol') {
+    width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
+  }
+  return { width };
+};
+</script>
+<template>
+  <div
+    class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
+    ref="containerRef"
+  >
+    <div
+      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+      :style="{
+        ...calculateSpace(index),
+        ...calculateWidth(),
+        borderTopLeftRadius: `${property.borderRadiusTop}px`,
+        borderTopRightRadius: `${property.borderRadiusTop}px`,
+        borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
+        borderBottomRightRadius: `${property.borderRadiusBottom}px`,
+      }"
+      v-for="(spu, index) in spuList"
+      :key="index"
+    >
+      <!-- 角标 -->
+      <div
+        v-if="property.badge.show && property.badge.imgUrl"
+        class="absolute left-0 top-0 z-[1] items-center justify-center"
+      >
+        <Image
+          fit="cover"
+          :src="property.badge.imgUrl"
+          class="h-[26px] w-[38px]"
+        />
+      </div>
+      <!-- 商品封面图 -->
+      <div
+        class="h-[140px]"
+        :class="[
+          {
+            'w-full': property.layoutType !== 'oneColSmallImg',
+            'w-[140px]': property.layoutType === 'oneColSmallImg',
+          },
+        ]"
+      >
+        <Image fit="cover" class="h-full w-full" :src="spu.picUrl" />
+      </div>
+      <div
+        class="box-border flex flex-col gap-[8px] p-[8px]"
+        :class="[
+          {
+            'w-full': property.layoutType !== 'oneColSmallImg',
+            'w-[calc(100%-140px-16px)]':
+              property.layoutType === 'oneColSmallImg',
+          },
+        ]"
+      >
+        <!-- 商品名称 -->
+        <div
+          v-if="property.fields.name.show"
+          class="text-[14px]"
+          :class="[
+            {
+              truncate: property.layoutType !== 'oneColSmallImg',
+              'line-clamp-2 overflow-ellipsis':
+                property.layoutType === 'oneColSmallImg',
+            },
+          ]"
+          :style="{ color: property.fields.name.color }"
+        >
+          {{ spu.name }}
+        </div>
+        <!-- 商品简介 -->
+        <div
+          v-if="property.fields.introduction.show"
+          class="truncate text-[12px]"
+          :style="{ color: property.fields.introduction.color }"
+        >
+          {{ spu.introduction }}
+        </div>
+        <div>
+          <!-- 价格 -->
+          <span
+            v-if="property.fields.price.show"
+            class="text-[16px]"
+            :style="{ color: property.fields.price.color }"
+          >
+            ￥{{ fenToYuan(spu.price as any) }}
+          </span>
+          <!-- 市场价 -->
+          <span
+            v-if="property.fields.marketPrice.show && spu.marketPrice"
+            class="ml-[4px] text-[10px] line-through"
+            :style="{ color: property.fields.marketPrice.color }"
+            >￥{{ fenToYuan(spu.marketPrice) }}
+          </span>
+        </div>
+        <div class="text-[12px]">
+          <!-- 销量 -->
+          <span
+            v-if="property.fields.salesCount.show"
+            :style="{ color: property.fields.salesCount.color }"
+          >
+            已售{{ (spu.salesCount || 0) + (spu.virtualSalesCount || 0) }}件
+          </span>
+          <!-- 库存 -->
+          <span
+            v-if="property.fields.stock.show"
+            :style="{ color: property.fields.stock.color }"
+          >
+            库存{{ spu.stock || 0 }}
+          </span>
+        </div>
+      </div>
+      <!-- 购买按钮 -->
+      <div class="absolute bottom-[8px] right-[8px]">
+        <!-- 文字按钮 -->
+        <span
+          v-if="property.btnBuy.type === 'text'"
+          class="rounded-full px-[12px] py-[4px] text-[12px] text-white"
+          :style="{
+            background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`,
+          }"
+        >
+          {{ property.btnBuy.text }}
+        </span>
+        <!-- 图片按钮 -->
+        <Image
+          v-else
+          class="h-[28px] w-[28px] rounded-full"
+          fit="cover"
+          :src="property.btnBuy.imgUrl"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
new file mode 100644
index 000000000..3f479b8c2
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
@@ -0,0 +1,4 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/product-list/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
similarity index 93%
rename from apps/web-ele/src/components/diy-editor/components/mobile/product-list/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
index 0f68a515f..20b4d37af 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/product-list/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 商品栏属性 */
 export interface ProductListProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
new file mode 100644
index 000000000..d334376ee
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { ProductListProperty } from './config';
+
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { onMounted, ref, watch } from 'vue';
+
+import { fenToYuan } from '@vben/utils';
+
+import { getSpuDetailList } from '#/api/mall/product/spu';
+
+/** 商品栏 */
+defineOptions({ name: 'ProductList' });
+// 定义属性
+const props = defineProps<{ property: ProductListProperty }>();
+// 商品列表
+const spuList = ref<MallSpuApi.Spu[]>([]);
+watch(
+  () => props.property.spuIds,
+  async () => {
+    spuList.value = await getSpuDetailList(props.property.spuIds);
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+// 手机宽度
+const phoneWidth = ref(375);
+// 容器
+const containerRef = ref();
+// 商品的列数
+const columns = ref(2);
+// 滚动条宽度
+const scrollbarWidth = ref('100%');
+// 商品图大小
+const imageSize = ref('0');
+// 商品网络列数
+const gridTemplateColumns = ref('');
+// 计算布局参数
+watch(
+  () => [props.property, phoneWidth, spuList.value.length],
+  () => {
+    // 计算列数
+    columns.value = props.property.layoutType === 'twoCol' ? 2 : 3;
+    // 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数
+    const productWidth =
+      (phoneWidth.value - props.property.space * (columns.value - 1)) /
+      columns.value;
+    // 商品图布局：2列时，左右布局 3列时，上下布局
+    imageSize.value = columns.value === 2 ? '64px' : `${productWidth}px`;
+    // 根据布局类型，计算行数、列数
+    if (props.property.layoutType === 'horizSwiper') {
+      // 单行显示
+      gridTemplateColumns.value = `repeat(auto-fill, ${productWidth}px)`;
+      // 显示滚动条
+      scrollbarWidth.value = `${
+        productWidth * spuList.value.length +
+        props.property.space * (spuList.value.length - 1)
+      }px`;
+    } else {
+      // 指定列数
+      gridTemplateColumns.value = `repeat(${columns.value}, auto)`;
+      // 不滚动
+      scrollbarWidth.value = '100%';
+    }
+  },
+  { immediate: true, deep: true },
+);
+onMounted(() => {
+  // 提取手机宽度
+  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
+});
+</script>
+<template>
+  <div class="z-10 min-h-[30px]" wrap-class="w-full" ref="containerRef">
+    <!-- 商品网格 -->
+    <div
+      class="grid overflow-x-auto"
+      :style="{
+        gridGap: `${property.space}px`,
+        gridTemplateColumns,
+        width: scrollbarWidth,
+      }"
+    >
+      <!-- 商品 -->
+      <div
+        class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+        :style="{
+          borderTopLeftRadius: `${property.borderRadiusTop}px`,
+          borderTopRightRadius: `${property.borderRadiusTop}px`,
+          borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
+          borderBottomRightRadius: `${property.borderRadiusBottom}px`,
+        }"
+        v-for="(spu, index) in spuList"
+        :key="index"
+      >
+        <!-- 角标 -->
+        <div
+          v-if="property.badge.show"
+          class="absolute left-0 top-0 z-10 items-center justify-center"
+        >
+          <Image
+            fit="cover"
+            :src="property.badge.imgUrl"
+            class="h-[26px] w-[38px]"
+          />
+        </div>
+        <!-- 商品封面图 -->
+        <Image
+          fit="cover"
+          :src="spu.picUrl"
+          :style="{ width: imageSize, height: imageSize }"
+        />
+        <div
+          class="box-border flex flex-col gap-2 p-2"
+          :class="[
+            {
+              'w-[calc(100%-64px)]': columns === 2,
+              'w-full': columns === 3,
+            },
+          ]"
+        >
+          <!-- 商品名称 -->
+          <div
+            v-if="property.fields.name.show"
+            class="truncate text-xs"
+            :style="{ color: property.fields.name.color }"
+          >
+            {{ spu.name }}
+          </div>
+          <div>
+            <!-- 商品价格 -->
+            <span
+              v-if="property.fields.price.show"
+              class="text-xs"
+              :style="{ color: property.fields.price.color }"
+            >
+              ￥{{ fenToYuan(spu.price || 0) }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
new file mode 100644
index 000000000..b61965680
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { ProductListProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Checkbox,
+  Form,
+  FormItem,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Switch,
+  Tooltip,
+} from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+// TODO: 添加组件
+// import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';
+
+// 商品栏属性面板
+defineOptions({ name: 'ProductListProperty' });
+
+const props = defineProps<{ modelValue: ProductListProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+      :model="formData"
+    >
+      <Card title="商品列表" class="property-group" :bordered="false">
+        <!-- <SpuShowcase v-model="formData.spuIds" /> -->
+      </Card>
+      <Card title="商品样式" class="property-group" :bordered="false">
+        <FormItem label="布局" prop="type">
+          <RadioGroup v-model:value="formData.layoutType">
+            <Tooltip title="双列" placement="bottom">
+              <RadioButton value="twoCol">
+                <IconifyIcon icon="fluent:text-column-two-24-filled" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="三列" placement="bottom">
+              <RadioButton value="threeCol">
+                <IconifyIcon icon="fluent:text-column-three-24-filled" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="水平滑动" placement="bottom">
+              <RadioButton value="horizSwiper">
+                <IconifyIcon icon="system-uicons:carousel" />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="商品名称" prop="fields.name.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.name.color" />
+            <Checkbox v-model:checked="formData.fields.name.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品价格" prop="fields.price.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.price.color" />
+            <Checkbox v-model:checked="formData.fields.price.show" />
+          </div>
+        </FormItem>
+      </Card>
+      <Card title="角标" class="property-group" :bordered="false">
+        <FormItem label="角标" prop="badge.show">
+          <Switch v-model:checked="formData.badge.show" />
+        </FormItem>
+        <FormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
+          <UploadImg
+            v-model="formData.badge.imgUrl"
+            height="44px"
+            width="72px"
+            :show-description="false"
+          >
+            <template #tip> 建议尺寸：36 * 22 </template>
+          </UploadImg>
+        </FormItem>
+      </Card>
+      <Card title="商品样式" class="property-group" :bordered="false">
+        <FormItem label="上圆角" prop="borderRadiusTop">
+          <Slider
+            v-model:value="formData.borderRadiusTop"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+        <FormItem label="下圆角" prop="borderRadiusBottom">
+          <Slider
+            v-model:value="formData.borderRadiusBottom"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+        <FormItem label="间隔" prop="space">
+          <Slider v-model:value="formData.space" :max="100" :min="0" />
+        </FormItem>
+      </Card>
+    </Form>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
similarity index 84%
rename from apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
index 9ad0304bc..9a1fc4194 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 营销文章属性 */
 export interface PromotionArticleProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
new file mode 100644
index 000000000..aa9fd467c
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { PromotionArticleProperty } from './config';
+
+import type { MallArticleApi } from '#/api/mall/promotion/article';
+
+import { ref, watch } from 'vue';
+
+import { getArticle } from '#/api/mall/promotion/article';
+
+/** 营销文章 */
+defineOptions({ name: 'PromotionArticle' });
+// 定义属性
+const props = defineProps<{ property: PromotionArticleProperty }>();
+// 商品列表
+const article = ref<MallArticleApi.Article>();
+
+watch(
+  () => props.property.id,
+  async () => {
+    if (props.property.id) {
+      article.value = await getArticle(props.property.id);
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+<template>
+  <div class="min-h-[30px]" v-dompurify-html="article?.content"></div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
new file mode 100644
index 000000000..d2b473ad8
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { PromotionArticleProperty } from './config';
+
+import type { MallArticleApi } from '#/api/mall/promotion/article';
+
+import { onMounted, ref } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+import { Form, FormItem, Select } from 'ant-design-vue';
+
+import { getArticlePage } from '#/api/mall/promotion/article';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+// 营销文章属性面板
+defineOptions({ name: 'PromotionArticleProperty' });
+
+const props = defineProps<{ modelValue: PromotionArticleProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+// 文章列表
+const articles = ref<MallArticleApi.Article[]>([]);
+
+// 加载中
+const loading = ref(false);
+// 查询文章列表
+const queryArticleList = async (title?: string) => {
+  loading.value = true;
+  const { list } = await getArticlePage({
+    title,
+    pageNo: 1,
+    pageSize: 10,
+  });
+  articles.value = list;
+  loading.value = false;
+};
+
+// 初始化
+onMounted(() => {
+  queryArticleList();
+});
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+      :model="formData"
+    >
+      <FormItem label="文章" prop="id">
+        <Select
+          v-model:value="formData.id"
+          placeholder="请选择文章"
+          class="w-full"
+          filterable
+          :loading="loading"
+          :options="
+            articles.map((item) => ({ label: item.title, value: item.id }))
+          "
+          @search="queryArticleList"
+        />
+      </FormItem>
+    </Form>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
similarity index 96%
rename from apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
index fba3a4a85..f0497dc19 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 拼团属性 */
 export interface PromotionCombinationProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
new file mode 100644
index 000000000..fad665dcc
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import type { PromotionCombinationProperty } from './config';
+
+import type { MallSpuApi } from '#/api/mall/product/spu';
+import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
+
+import { ref, watch } from 'vue';
+
+import { fenToYuan } from '@vben/utils';
+
+import { Image } from 'ant-design-vue';
+
+import { getSpuDetailList } from '#/api/mall/product/spu';
+import { getCombinationActivityListByIds } from '#/api/mall/promotion/combination/combinationActivity';
+
+/** 拼团卡片 */
+defineOptions({ name: 'PromotionCombination' });
+// 定义属性
+const props = defineProps<{ property: PromotionCombinationProperty }>();
+// 商品列表
+const spuList = ref<MallSpuApi.Spu[]>([]);
+const spuIdList = ref<number[]>([]);
+const combinationActivityList = ref<
+  MallCombinationActivityApi.CombinationActivity[]
+>([]);
+
+watch(
+  () => props.property.activityIds,
+  async () => {
+    try {
+      // 新添加的拼团组件，是没有活动ID的
+      const activityIds = props.property.activityIds;
+      // 检查活动ID的有效性
+      if (Array.isArray(activityIds) && activityIds.length > 0) {
+        // 获取拼团活动详情列表
+        combinationActivityList.value =
+          await getCombinationActivityListByIds(activityIds);
+
+        // 获取拼团活动的 SPU 详情列表
+        spuList.value = [];
+        spuIdList.value = combinationActivityList.value
+          .map((activity) => activity.spuId)
+          .filter((spuId): spuId is number => typeof spuId === 'number');
+        if (spuIdList.value.length > 0) {
+          spuList.value = await getSpuDetailList(spuIdList.value);
+        }
+
+        // 更新 SPU 的最低价格
+        combinationActivityList.value.forEach((activity) => {
+          // 匹配spuId
+          const spu = spuList.value.find((spu) => spu.id === activity.spuId);
+          if (spu) {
+            // 赋值活动价格，哪个最便宜就赋值哪个
+            spu.price = Math.min(
+              activity.combinationPrice || Infinity,
+              spu.price || Infinity,
+            );
+          }
+        });
+      }
+    } catch (error) {
+      console.error('获取拼团活动细节或 SPU 细节时出错:', error);
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+/**
+ * 计算商品的间距
+ * @param index 商品索引
+ */
+const calculateSpace = (index: number) => {
+  // 商品的列数
+  const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
+  // 第一列没有左边距
+  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`;
+  // 第一行没有上边距
+  const marginTop = index < columns ? '0' : `${props.property.space}px`;
+
+  return { marginLeft, marginTop };
+};
+
+// 容器
+const containerRef = ref();
+// 计算商品的宽度
+const calculateWidth = () => {
+  let width = '100%';
+  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
+  if (props.property.layoutType === 'twoCol') {
+    width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
+  }
+  return { width };
+};
+</script>
+<template>
+  <div
+    class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
+    ref="containerRef"
+  >
+    <div
+      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+      :style="{
+        ...calculateSpace(index),
+        ...calculateWidth(),
+        borderTopLeftRadius: `${property.borderRadiusTop}px`,
+        borderTopRightRadius: `${property.borderRadiusTop}px`,
+        borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
+        borderBottomRightRadius: `${property.borderRadiusBottom}px`,
+      }"
+      v-for="(spu, index) in spuList"
+      :key="index"
+    >
+      <!-- 角标 -->
+      <div
+        v-if="property.badge.show"
+        class="absolute left-0 top-0 z-[1] items-center justify-center"
+      >
+        <Image
+          fit="cover"
+          :src="property.badge.imgUrl"
+          class="h-[26px] w-[38px]"
+        />
+      </div>
+      <!-- 商品封面图 -->
+      <div
+        class="h-[140px]"
+        :class="[
+          {
+            'w-full': property.layoutType !== 'oneColSmallImg',
+            'w-[140px]': property.layoutType === 'oneColSmallImg',
+          },
+        ]"
+      >
+        <Image fit="cover" class="h-full w-full" :src="spu.picUrl" />
+      </div>
+      <div
+        class="box-border flex flex-col gap-2 p-2"
+        :class="[
+          {
+            'w-full': property.layoutType !== 'oneColSmallImg',
+            'w-[calc(100%-140px-16px)]':
+              property.layoutType === 'oneColSmallImg',
+          },
+        ]"
+      >
+        <!-- 商品名称 -->
+        <div
+          v-if="property.fields.name.show"
+          class="text-[14px]"
+          :class="[
+            {
+              truncate: property.layoutType !== 'oneColSmallImg',
+              'line-clamp-2 overflow-ellipsis':
+                property.layoutType === 'oneColSmallImg',
+            },
+          ]"
+          :style="{ color: property.fields.name.color }"
+        >
+          {{ spu.name }}
+        </div>
+        <!-- 商品简介 -->
+        <div
+          v-if="property.fields.introduction.show"
+          class="truncate text-[12px]"
+          :style="{ color: property.fields.introduction.color }"
+        >
+          {{ spu.introduction }}
+        </div>
+        <div>
+          <!-- 价格 -->
+          <span
+            v-if="property.fields.price.show"
+            class="text-[16px]"
+            :style="{ color: property.fields.price.color }"
+          >
+            ￥{{ fenToYuan(spu.price || Infinity) }}
+          </span>
+          <!-- 市场价 -->
+          <span
+            v-if="property.fields.marketPrice.show && spu.marketPrice"
+            class="ml-[4px] text-[10px] line-through"
+            :style="{ color: property.fields.marketPrice.color }"
+          >
+            ￥{{ fenToYuan(spu.marketPrice) }}
+          </span>
+        </div>
+        <div class="text-[12px]">
+          <!-- 销量 -->
+          <span
+            v-if="property.fields.salesCount.show"
+            :style="{ color: property.fields.salesCount.color }"
+          >
+            已售{{ (spu.salesCount || 0) + (spu.virtualSalesCount || 0) }}件
+          </span>
+          <!-- 库存 -->
+          <span
+            v-if="property.fields.stock.show"
+            :style="{ color: property.fields.stock.color }"
+          >
+            库存{{ spu.stock || 0 }}
+          </span>
+        </div>
+      </div>
+      <!-- 购买按钮 -->
+      <div class="absolute bottom-[8px] right-[8px]">
+        <!-- 文字按钮 -->
+        <span
+          v-if="property.btnBuy.type === 'text'"
+          class="rounded-full px-[12px] py-[4px] text-[12px] text-white"
+          :style="{
+            background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`,
+          }"
+        >
+          {{ property.btnBuy.text }}
+        </span>
+        <!-- 图片按钮 -->
+        <Image
+          v-else
+          class="h-[28px] w-[28px] rounded-full"
+          fit="cover"
+          :src="property.btnBuy.imgUrl"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
new file mode 100644
index 000000000..a46029f10
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import type { PromotionCombinationProperty } from './config';
+
+import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
+
+import { onMounted, ref } from 'vue';
+
+import { CommonStatusEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Checkbox,
+  Form,
+  FormItem,
+  Input,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Switch,
+  Tooltip,
+} from 'ant-design-vue';
+
+import { getCombinationActivityPage } from '#/api/mall/promotion/combination/combinationActivity';
+import UploadImg from '#/components/upload/image-upload.vue';
+// import CombinationShowcase from '#/views/mall/promotion/combination/components/combination-showcase.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
+
+// 拼团属性面板
+defineOptions({ name: 'PromotionCombinationProperty' });
+
+const props = defineProps<{ modelValue: PromotionCombinationProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+// 活动列表
+const activityList = ref<MallCombinationActivityApi.CombinationActivity[]>([]);
+onMounted(async () => {
+  const { list } = await getCombinationActivityPage({
+    pageNo: 1,
+    pageSize: 10,
+    status: CommonStatusEnum.ENABLE,
+  });
+  activityList.value = list;
+});
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+      :model="formData"
+    >
+      <Card title="拼团活动" class="property-group" :bordered="false">
+        <CombinationShowcase v-model="formData.activityIds" />
+      </Card>
+      <Card title="商品样式" class="property-group" :bordered="false">
+        <FormItem label="布局" prop="type">
+          <RadioGroup v-model:value="formData.layoutType">
+            <Tooltip title="单列大图" placement="bottom">
+              <RadioButton value="oneColBigImg">
+                <IconifyIcon icon="fluent:text-column-one-24-filled" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="单列小图" placement="bottom">
+              <RadioButton value="oneColSmallImg">
+                <IconifyIcon icon="fluent:text-column-two-left-24-filled" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="双列" placement="bottom">
+              <RadioButton value="twoCol">
+                <IconifyIcon icon="fluent:text-column-two-24-filled" />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="商品名称" prop="fields.name.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.name.color" />
+            <Checkbox v-model:checked="formData.fields.name.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品简介" prop="fields.introduction.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.introduction.color" />
+            <Checkbox v-model:checked="formData.fields.introduction.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品价格" prop="fields.price.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.price.color" />
+            <Checkbox v-model:checked="formData.fields.price.show" />
+          </div>
+        </FormItem>
+        <FormItem label="市场价" prop="fields.marketPrice.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.marketPrice.color" />
+            <Checkbox v-model:checked="formData.fields.marketPrice.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品销量" prop="fields.salesCount.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.salesCount.color" />
+            <Checkbox v-model:checked="formData.fields.salesCount.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品库存" prop="fields.stock.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.stock.color" />
+            <Checkbox v-model:checked="formData.fields.stock.show" />
+          </div>
+        </FormItem>
+      </Card>
+      <Card title="角标" class="property-group" :bordered="false">
+        <FormItem label="角标" prop="badge.show">
+          <Switch v-model:checked="formData.badge.show" />
+        </FormItem>
+        <FormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
+          <UploadImg v-model="formData.badge.imgUrl" height="44px" width="72px">
+            <template #tip> 建议尺寸：36 * 22</template>
+          </UploadImg>
+        </FormItem>
+      </Card>
+      <Card title="按钮" class="property-group" :bordered="false">
+        <FormItem label="按钮类型" prop="btnBuy.type">
+          <RadioGroup v-model:value="formData.btnBuy.type">
+            <RadioButton value="text">文字</RadioButton>
+            <RadioButton value="img">图片</RadioButton>
+          </RadioGroup>
+        </FormItem>
+        <template v-if="formData.btnBuy.type === 'text'">
+          <FormItem label="按钮文字" prop="btnBuy.text">
+            <Input v-model:value="formData.btnBuy.text" />
+          </FormItem>
+          <FormItem label="左侧背景" prop="btnBuy.bgBeginColor">
+            <ColorInput v-model="formData.btnBuy.bgBeginColor" />
+          </FormItem>
+          <FormItem label="右侧背景" prop="btnBuy.bgEndColor">
+            <ColorInput v-model="formData.btnBuy.bgEndColor" />
+          </FormItem>
+        </template>
+        <template v-else>
+          <FormItem label="图片" prop="btnBuy.imgUrl">
+            <UploadImg
+              v-model="formData.btnBuy.imgUrl"
+              height="56px"
+              width="56px"
+              :show-description="false"
+            >
+              <template #tip> 建议尺寸：56 * 56</template>
+            </UploadImg>
+          </FormItem>
+        </template>
+      </Card>
+      <Card title="商品样式" class="property-group" :bordered="false">
+        <FormItem label="上圆角" prop="borderRadiusTop">
+          <Slider
+            v-model:value="formData.borderRadiusTop"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+        <FormItem label="下圆角" prop="borderRadiusBottom">
+          <Slider
+            v-model:value="formData.borderRadiusBottom"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+        <FormItem label="间隔" prop="space">
+          <Slider v-model:value="formData.space" :max="100" :min="0" />
+        </FormItem>
+      </Card>
+    </Form>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
similarity index 96%
rename from apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
index 4484f3125..738ca3b31 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 积分商城属性 */
 export interface PromotionPointProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
new file mode 100644
index 000000000..f10888fce
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
@@ -0,0 +1,233 @@
+<script lang="ts" setup>
+import type { PromotionPointProperty } from './config';
+
+import type { MallPointActivityApi } from '#/api/mall/promotion/point';
+
+import { ref, watch } from 'vue';
+
+import { fenToYuan } from '@vben/utils';
+
+import { Image } from 'ant-design-vue';
+
+import { getSpuDetailList } from '#/api/mall/product/spu';
+import { getPointActivityListByIds } from '#/api/mall/promotion/point';
+
+/** 积分商城卡片 */
+defineOptions({ name: 'PromotionPoint' });
+// 定义属性
+const props = defineProps<{ property: PromotionPointProperty }>();
+// 商品列表
+const spuList = ref<MallPointActivityApi.SpuExtensionWithPoint[]>([]);
+const spuIdList = ref<number[]>([]);
+const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]);
+
+watch(
+  () => props.property.activityIds,
+  async () => {
+    try {
+      // 新添加的积分商城组件，是没有活动ID的
+      const activityIds = props.property.activityIds;
+      // 检查活动ID的有效性
+      if (Array.isArray(activityIds) && activityIds.length > 0) {
+        // 获取积分商城活动详情列表
+        pointActivityList.value = await getPointActivityListByIds(activityIds);
+
+        // 获取积分商城活动的 SPU 详情列表
+        spuList.value = [];
+        spuIdList.value = pointActivityList.value.map(
+          (activity) => activity.spuId,
+        );
+        if (spuIdList.value.length > 0) {
+          spuList.value = (await getSpuDetailList(
+            spuIdList.value,
+          )) as MallPointActivityApi.SpuExtensionWithPoint[];
+        }
+
+        // 更新 SPU 的最低兑换积分和所需兑换金额
+        pointActivityList.value.forEach((activity) => {
+          // 匹配spuId
+          const spu = spuList.value.find((spu) => spu.id === activity.spuId);
+          if (spu) {
+            spu.pointStock = activity.stock;
+            spu.pointTotalStock = activity.totalStock;
+            spu.point = activity.point;
+            spu.pointPrice = activity.price;
+          }
+        });
+      }
+    } catch (error) {
+      console.error('获取积分商城活动细节或 SPU 细节时出错:', error);
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+/**
+ * 计算商品的间距
+ * @param index 商品索引
+ */
+const calculateSpace = (index: number) => {
+  // 商品的列数
+  const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
+  // 第一列没有左边距
+  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`;
+  // 第一行没有上边距
+  const marginTop = index < columns ? '0' : `${props.property.space}px`;
+
+  return { marginLeft, marginTop };
+};
+
+// 容器
+const containerRef = ref();
+// 计算商品的宽度
+const calculateWidth = () => {
+  let width = '100%';
+  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
+  if (props.property.layoutType === 'twoCol') {
+    width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
+  }
+  return { width };
+};
+</script>
+<template>
+  <div
+    ref="containerRef"
+    class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
+  >
+    <div
+      v-for="(spu, index) in spuList"
+      :key="index"
+      :style="{
+        ...calculateSpace(index),
+        ...calculateWidth(),
+        borderTopLeftRadius: `${property.borderRadiusTop}px`,
+        borderTopRightRadius: `${property.borderRadiusTop}px`,
+        borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
+        borderBottomRightRadius: `${property.borderRadiusBottom}px`,
+      }"
+      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+    >
+      <!-- 角标 -->
+      <div
+        v-if="property.badge.show"
+        class="absolute left-0 top-0 z-[1] items-center justify-center"
+      >
+        <Image
+          :src="property.badge.imgUrl"
+          class="h-[26px] w-[38px]"
+          fit="cover"
+        />
+      </div>
+      <!-- 商品封面图 -->
+      <div
+        class="h-[140px]"
+        :class="[
+          {
+            'w-full': property.layoutType !== 'oneColSmallImg',
+            'w-[140px]': property.layoutType === 'oneColSmallImg',
+          },
+        ]"
+      >
+        <Image :src="spu.picUrl" class="h-full w-full" fit="cover" />
+      </div>
+      <div
+        class="box-border flex flex-col gap-2 p-2"
+        :class="[
+          {
+            'w-full': property.layoutType !== 'oneColSmallImg',
+            'w-[calc(100%-140px-16px)]':
+              property.layoutType === 'oneColSmallImg',
+          },
+        ]"
+      >
+        <!-- 商品名称 -->
+        <div
+          v-if="property.fields.name.show"
+          class="text-[14px]"
+          :class="[
+            {
+              truncate: property.layoutType !== 'oneColSmallImg',
+              'line-clamp-2 overflow-ellipsis':
+                property.layoutType === 'oneColSmallImg',
+            },
+          ]"
+          :style="{ color: property.fields.name.color }"
+        >
+          {{ spu.name }}
+        </div>
+        <!-- 商品简介 -->
+        <div
+          v-if="property.fields.introduction.show"
+          :style="{ color: property.fields.introduction.color }"
+          class="truncate text-[12px]"
+        >
+          {{ spu.introduction }}
+        </div>
+        <div>
+          <!-- 积分 -->
+          <span
+            v-if="property.fields.price.show"
+            :style="{ color: property.fields.price.color }"
+            class="text-[16px]"
+          >
+            {{ spu.point }}积分
+            {{
+              !spu.pointPrice || spu.pointPrice === 0
+                ? ''
+                : `+${fenToYuan(spu.pointPrice)}元`
+            }}
+          </span>
+          <!-- 市场价 -->
+          <span
+            v-if="property.fields.marketPrice.show && spu.marketPrice"
+            :style="{ color: property.fields.marketPrice.color }"
+            class="ml-[4px] text-[10px] line-through"
+          >
+            ￥{{ fenToYuan(spu.marketPrice) }}
+          </span>
+        </div>
+        <div class="text-[12px]">
+          <!-- 销量 -->
+          <span
+            v-if="property.fields.salesCount.show"
+            :style="{ color: property.fields.salesCount.color }"
+          >
+            已兑{{ (spu.pointTotalStock || 0) - (spu.pointStock || 0) }}件
+          </span>
+          <!-- 库存 -->
+          <span
+            v-if="property.fields.stock.show"
+            :style="{ color: property.fields.stock.color }"
+          >
+            库存{{ spu.pointTotalStock || 0 }}
+          </span>
+        </div>
+      </div>
+      <!-- 购买按钮 -->
+      <div class="absolute bottom-[8px] right-[8px]">
+        <!-- 文字按钮 -->
+        <span
+          v-if="property.btnBuy.type === 'text'"
+          :style="{
+            background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`,
+          }"
+          class="rounded-full px-[12px] py-[4px] text-[12px] text-white"
+        >
+          {{ property.btnBuy.text }}
+        </span>
+        <!-- 图片按钮 -->
+        <Image
+          v-else
+          :src="property.btnBuy.imgUrl"
+          class="h-[28px] w-[28px] rounded-full"
+          fit="cover"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
new file mode 100644
index 000000000..3f479b8c2
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
@@ -0,0 +1,4 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
similarity index 96%
rename from apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
index fcba6c7e0..a38d9455b 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 秒杀属性 */
 export interface PromotionSeckillProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
new file mode 100644
index 000000000..236cd4563
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import type { PromotionSeckillProperty } from './config';
+
+import type { MallSpuApi } from '#/api/mall/product/spu';
+import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
+
+import { ref, watch } from 'vue';
+
+import { fenToYuan } from '@vben/utils';
+
+import { Image } from 'ant-design-vue';
+
+import { getSpuDetailList } from '#/api/mall/product/spu';
+import { getSeckillActivityListByIds } from '#/api/mall/promotion/seckill/seckillActivity';
+
+/** 秒杀卡片 */
+defineOptions({ name: 'PromotionSeckill' });
+// 定义属性
+const props = defineProps<{ property: PromotionSeckillProperty }>();
+// 商品列表
+const spuList = ref<MallSpuApi.Spu[]>([]);
+const spuIdList = ref<number[]>([]);
+const seckillActivityList = ref<MallSeckillActivityApi.SeckillActivity[]>([]);
+
+watch(
+  () => props.property.activityIds,
+  async () => {
+    try {
+      // 新添加的秒杀组件，是没有活动ID的
+      const activityIds = props.property.activityIds;
+      // 检查活动ID的有效性
+      if (Array.isArray(activityIds) && activityIds.length > 0) {
+        // 获取秒杀活动详情列表
+        seckillActivityList.value =
+          await getSeckillActivityListByIds(activityIds);
+
+        // 获取秒杀活动的 SPU 详情列表
+        spuList.value = [];
+        spuIdList.value = seckillActivityList.value
+          .map((activity) => activity.spuId)
+          .filter((spuId): spuId is number => typeof spuId === 'number');
+        if (spuIdList.value.length > 0) {
+          spuList.value = await getSpuDetailList(spuIdList.value);
+        }
+
+        // 更新 SPU 的最低价格
+        seckillActivityList.value.forEach((activity) => {
+          // 匹配spuId
+          const spu = spuList.value.find((spu) => spu.id === activity.spuId);
+          if (spu) {
+            // 赋值活动价格，哪个最便宜就赋值哪个
+            spu.price = Math.min(
+              activity.seckillPrice || Infinity,
+              spu.price || Infinity,
+            );
+          }
+        });
+      }
+    } catch (error) {
+      console.error('获取秒杀活动细节或 SPU 细节时出错:', error);
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+/**
+ * 计算商品的间距
+ * @param index 商品索引
+ */
+const calculateSpace = (index: number) => {
+  // 商品的列数
+  const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
+  // 第一列没有左边距
+  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`;
+  // 第一行没有上边距
+  const marginTop = index < columns ? '0' : `${props.property.space}px`;
+
+  return { marginLeft, marginTop };
+};
+
+// 容器
+const containerRef = ref();
+// 计算商品的宽度
+const calculateWidth = () => {
+  let width = '100%';
+  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
+  if (props.property.layoutType === 'twoCol') {
+    width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
+  }
+  return { width };
+};
+</script>
+<template>
+  <div
+    class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
+    ref="containerRef"
+  >
+    <div
+      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+      :style="{
+        ...calculateSpace(index),
+        ...calculateWidth(),
+        borderTopLeftRadius: `${property.borderRadiusTop}px`,
+        borderTopRightRadius: `${property.borderRadiusTop}px`,
+        borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
+        borderBottomRightRadius: `${property.borderRadiusBottom}px`,
+      }"
+      v-for="(spu, index) in spuList"
+      :key="index"
+    >
+      <!-- 角标 -->
+      <div
+        v-if="property.badge.show"
+        class="absolute left-0 top-0 z-[1] items-center justify-center"
+      >
+        <Image
+          fit="cover"
+          :src="property.badge.imgUrl"
+          class="h-[26px] w-[38px]"
+        />
+      </div>
+      <!-- 商品封面图 -->
+      <div
+        class="h-[140px]"
+        :class="[
+          {
+            'w-full': property.layoutType !== 'oneColSmallImg',
+            'w-[140px]': property.layoutType === 'oneColSmallImg',
+          },
+        ]"
+      >
+        <Image fit="cover" class="h-full w-full" :src="spu.picUrl" />
+      </div>
+      <div
+        class="box-border flex flex-col gap-2 p-2"
+        :class="[
+          {
+            'w-full': property.layoutType !== 'oneColSmallImg',
+            'w-[calc(100%-140px-16px)]':
+              property.layoutType === 'oneColSmallImg',
+          },
+        ]"
+      >
+        <!-- 商品名称 -->
+        <div
+          v-if="property.fields.name.show"
+          class="text-sm"
+          :class="[
+            {
+              truncate: property.layoutType !== 'oneColSmallImg',
+              'line-clamp-2 overflow-ellipsis':
+                property.layoutType === 'oneColSmallImg',
+            },
+          ]"
+          :style="{ color: property.fields.name.color }"
+        >
+          {{ spu.name }}
+        </div>
+        <!-- 商品简介 -->
+        <div
+          v-if="property.fields.introduction.show"
+          class="truncate text-xs"
+          :style="{ color: property.fields.introduction.color }"
+        >
+          {{ spu.introduction }}
+        </div>
+        <div>
+          <!-- 价格 -->
+          <span
+            v-if="property.fields.price.show"
+            class="text-base"
+            :style="{ color: property.fields.price.color }"
+          >
+            ￥{{ fenToYuan(spu.price || Infinity) }}
+          </span>
+          <!-- 市场价 -->
+          <span
+            v-if="property.fields.marketPrice.show && spu.marketPrice"
+            class="ml-1 text-[10px] line-through"
+            :style="{ color: property.fields.marketPrice.color }"
+          >
+            ￥{{ fenToYuan(spu.marketPrice) }}
+          </span>
+        </div>
+        <div class="text-xs">
+          <!-- 销量 -->
+          <span
+            v-if="property.fields.salesCount.show"
+            :style="{ color: property.fields.salesCount.color }"
+          >
+            已售{{ (spu.salesCount || 0) + (spu.virtualSalesCount || 0) }}件
+          </span>
+          <!-- 库存 -->
+          <span
+            v-if="property.fields.stock.show"
+            :style="{ color: property.fields.stock.color }"
+          >
+            库存{{ spu.stock || 0 }}
+          </span>
+        </div>
+      </div>
+      <!-- 购买按钮 -->
+      <div class="absolute bottom-2 right-2">
+        <!-- 文字按钮 -->
+        <span
+          v-if="property.btnBuy.type === 'text'"
+          class="rounded-full px-3 py-1 text-xs text-white"
+          :style="{
+            background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`,
+          }"
+        >
+          {{ property.btnBuy.text }}
+        </span>
+        <!-- 图片按钮 -->
+        <Image
+          v-else
+          class="h-7 w-7 rounded-full"
+          fit="cover"
+          :src="property.btnBuy.imgUrl"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
new file mode 100644
index 000000000..3f479b8c2
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
@@ -0,0 +1,4 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/search-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
similarity index 92%
rename from apps/web-ele/src/components/diy-editor/components/mobile/search-bar/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
index 64ab098a4..01d5894d1 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/search-bar/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 搜索框属性 */
 export interface SearchProperty {
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/search-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/search-bar/index.vue
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
new file mode 100644
index 000000000..3f479b8c2
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
@@ -0,0 +1,4 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts
similarity index 98%
rename from apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts
index bc9488e1c..0404f3647 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts
@@ -1,4 +1,4 @@
-import type { DiyComponent } from '#/components/diy-editor/util';
+import type { DiyComponent } from '../../../util';
 
 /** 底部导航菜单属性 */
 export interface TabBarProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
new file mode 100644
index 000000000..827c7358d
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { TabBarProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Image } from 'ant-design-vue';
+
+/** 页面底部导航栏 */
+defineOptions({ name: 'TabBar' });
+
+defineProps<{ property: TabBarProperty }>();
+</script>
+<template>
+  <div class="tab-bar">
+    <div
+      class="tab-bar-bg"
+      :style="{
+        background:
+          property.style.bgType === 'color'
+            ? property.style.bgColor
+            : `url(${property.style.bgImg})`,
+        backgroundSize: '100% 100%',
+        backgroundRepeat: 'no-repeat',
+      }"
+    >
+      <div
+        v-for="(item, index) in property.items"
+        :key="index"
+        class="tab-bar-item"
+      >
+        <Image :src="index === 0 ? item.activeIconUrl : item.iconUrl">
+          <template #error>
+            <div class="flex h-full w-full items-center justify-center">
+              <IconifyIcon icon="ep:picture" />
+            </div>
+          </template>
+        </Image>
+        <span
+          :style="{
+            color:
+              index === 0 ? property.style.activeColor : property.style.color,
+          }"
+        >
+          {{ item.text }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.tab-bar {
+  z-index: 2;
+  width: 100%;
+
+  .tab-bar-bg {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    padding: 8px 0;
+
+    .tab-bar-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      font-size: 12px;
+
+      :deep(img),
+      .el-icon {
+        width: 26px;
+        height: 26px;
+        border-radius: 4px;
+      }
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
new file mode 100644
index 000000000..ec0cb01c7
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import type { TabBarProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Form,
+  FormItem,
+  Input,
+  RadioButton,
+  RadioGroup,
+  Select,
+  SelectOption,
+} from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  ColorInput,
+  Draggable,
+} from '#/views/mall/promotion/components';
+
+import { component, THEME_LIST } from './config';
+// 底部导航栏
+defineOptions({ name: 'TabBarProperty' });
+
+const props = defineProps<{ modelValue: TabBarProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+
+// 将数据库的值更新到右侧属性栏
+component.property.items = formData.value.items;
+
+// 要的主题
+const handleThemeChange = () => {
+  const theme = THEME_LIST.find((theme) => theme.id === formData.value.theme);
+  if (theme?.color) {
+    formData.value.style.activeColor = theme.color;
+  }
+};
+</script>
+
+<template>
+  <div class="tab-bar">
+    <!-- 表单 -->
+    <Form
+      :model="formData"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <FormItem label="主题" name="theme">
+        <Select v-model:value="formData!.theme" @change="handleThemeChange">
+          <SelectOption
+            v-for="(theme, index) in THEME_LIST"
+            :key="index"
+            :label="theme.name"
+            :value="theme.id"
+          >
+            <div class="flex items-center justify-between">
+              <IconifyIcon :icon="theme.icon" :color="theme.color" />
+              <span>{{ theme.name }}</span>
+            </div>
+          </SelectOption>
+        </Select>
+      </FormItem>
+      <FormItem label="默认颜色">
+        <ColorInput v-model="formData!.style.color" />
+      </FormItem>
+      <FormItem label="选中颜色">
+        <ColorInput v-model="formData!.style.activeColor" />
+      </FormItem>
+      <FormItem label="导航背景">
+        <RadioGroup v-model:value="formData!.style.bgType">
+          <RadioButton value="color">纯色</RadioButton>
+          <RadioButton value="img">图片</RadioButton>
+        </RadioGroup>
+      </FormItem>
+      <FormItem label="选择颜色" v-if="formData!.style.bgType === 'color'">
+        <ColorInput v-model="formData!.style.bgColor" />
+      </FormItem>
+      <FormItem label="选择图片" v-if="formData!.style.bgType === 'img'">
+        <UploadImg
+          v-model="formData!.style.bgImg"
+          width="100%"
+          height="50px"
+          class="min-w-[200px]"
+          :show-description="false"
+        >
+          <template #tip> 建议尺寸 375 * 50 </template>
+        </UploadImg>
+      </FormItem>
+
+      <div class="mb-2 text-base">图标设置</div>
+      <div class="mb-2 text-xs text-gray-500">
+        拖动左上角的小圆点可对其排序, 图标建议尺寸 44*44
+      </div>
+      <Draggable v-model="formData.items" :limit="5">
+        <template #default="{ element }">
+          <div class="mb-2 flex items-center justify-around">
+            <div class="flex flex-col items-center justify-between">
+              <UploadImg
+                v-model="element.iconUrl"
+                width="40px"
+                height="40px"
+                :show-delete="false"
+                :show-description="false"
+              />
+              <div class="text-xs">未选中</div>
+            </div>
+            <div>
+              <UploadImg
+                v-model="element.activeIconUrl"
+                width="40px"
+                height="40px"
+                :show-delete="false"
+                :show-description="false"
+              />
+              <div class="text-xs">已选中</div>
+            </div>
+          </div>
+          <FormItem
+            name="text"
+            label="文字"
+            :label-col="{ span: 4 }"
+            :wrapper-col="{ span: 20 }"
+            class="mb-2"
+          >
+            <Input v-model:value="element.text" placeholder="请输入文字" />
+          </FormItem>
+          <FormItem
+            name="url"
+            label="链接"
+            :label-col="{ span: 4 }"
+            :wrapper-col="{ span: 20 }"
+            class="mb-0"
+          >
+            <AppLinkInput v-model="element.url" />
+          </FormItem>
+        </template>
+      </Draggable>
+    </Form>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
similarity index 94%
rename from apps/web-ele/src/components/diy-editor/components/mobile/title-bar/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
index 64d49ad6c..f442e7dc5 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 标题栏属性 */
 export interface TitleBarProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
new file mode 100644
index 000000000..5bd0eb977
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { TitleBarProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Image } from 'ant-design-vue';
+
+/** 标题栏 */
+defineOptions({ name: 'TitleBar' });
+
+defineProps<{ property: TitleBarProperty }>();
+</script>
+<template>
+  <div class="title-bar" :style="{ height: `${property.height}px` }">
+    <Image
+      v-if="property.bgImgUrl"
+      :src="property.bgImgUrl"
+      fit="cover"
+      class="w-full"
+    />
+    <div
+      class="absolute left-0 top-0 flex h-full w-full flex-col justify-center"
+    >
+      <!-- 标题 -->
+      <div
+        :style="{
+          fontSize: `${property.titleSize}px`,
+          fontWeight: property.titleWeight,
+          color: property.titleColor,
+          textAlign: property.textAlign,
+          marginLeft: `${property.marginLeft}px`,
+          marginBottom: '4px',
+        }"
+        v-if="property.title"
+      >
+        {{ property.title }}
+      </div>
+      <!-- 副标题 -->
+      <div
+        :style="{
+          fontSize: `${property.descriptionSize}px`,
+          fontWeight: property.descriptionWeight,
+          color: property.descriptionColor,
+          textAlign: property.textAlign,
+          marginLeft: `${property.marginLeft}px`,
+        }"
+        v-if="property.description"
+      >
+        {{ property.description }}
+      </div>
+    </div>
+    <!-- 更多 -->
+    <div
+      class="more"
+      v-show="property.more.show"
+      :style="{
+        color: property.descriptionColor,
+      }"
+    >
+      <span v-if="property.more.type !== 'icon'">
+        {{ property.more.text }}
+      </span>
+      <IconifyIcon icon="ep:arrow-right" v-if="property.more.type !== 'text'" />
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.title-bar {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 20px;
+
+  /* 更多 */
+  .more {
+    position: absolute;
+    top: 0;
+    right: 8px;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+    font-size: 10px;
+    color: #969799;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
new file mode 100644
index 000000000..3f479b8c2
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
@@ -0,0 +1,4 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-card/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
similarity index 81%
rename from apps/web-ele/src/components/diy-editor/components/mobile/user-card/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
index e674a0a32..2dae34da2 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/user-card/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户卡片属性 */
 export interface UserCardProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
new file mode 100644
index 000000000..07e0e7304
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { UserCardProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+/** 用户卡片 */
+defineOptions({ name: 'UserCard' });
+// 定义属性
+defineProps<{ property: UserCardProperty }>();
+</script>
+<template>
+  <div class="flex flex-col">
+    <div class="flex items-center justify-between px-[18px] py-[24px]">
+      <div class="flex flex-1 items-center gap-[16px]">
+        <Avatar :size="60">
+          <IconifyIcon icon="ep:avatar" :size="60" />
+        </Avatar>
+        <span class="text-[18px] font-bold">芋道源码</span>
+      </div>
+      <IconifyIcon icon="tdesign:qrcode" :size="20" />
+    </div>
+    <div
+      class="flex items-center justify-between bg-white px-[20px] py-[8px] text-[12px]"
+    >
+      <span class="text-[#ff690d]">点击绑定手机号</span>
+      <span class="rounded-[26px] bg-[#ff6100] px-[8px] py-[5px] text-white">
+        去绑定
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-card/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue
similarity index 81%
rename from apps/web-ele/src/components/diy-editor/components/mobile/user-card/property.vue
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue
index 38f5d2b5d..79a7eb080 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/user-card/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue
@@ -3,7 +3,7 @@ import type { UserCardProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
 
-import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import ComponentContainerProperty from '../../component-container-property.vue';
 
 // 用户卡片属性面板
 defineOptions({ name: 'UserCardProperty' });
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
similarity index 82%
rename from apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
index efcb7f2ef..7e5dcd1f9 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户卡券属性 */
 export interface UserCouponProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
new file mode 100644
index 000000000..95d2ee6ff
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { UserCouponProperty } from './config';
+
+/** 用户卡券 */
+defineOptions({ name: 'UserCoupon' });
+// 定义属性
+defineProps<{ property: UserCouponProperty }>();
+</script>
+<template>
+  <Image
+    src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/couponCardStyle.png"
+  />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/property.vue
similarity index 81%
rename from apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/property.vue
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/property.vue
index c9fb1fbfb..488bf3168 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/property.vue
@@ -3,7 +3,7 @@ import type { UserCouponProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
 
-import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import ComponentContainerProperty from '../../component-container-property.vue';
 
 // 用户卡券属性面板
 defineOptions({ name: 'UserCouponProperty' });
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-order/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
similarity index 82%
rename from apps/web-ele/src/components/diy-editor/components/mobile/user-order/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
index 0c2e825a3..25ca85065 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/user-order/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户订单属性 */
 export interface UserOrderProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
new file mode 100644
index 000000000..1eac1ee13
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { UserOrderProperty } from './config';
+
+/** 用户订单 */
+defineOptions({ name: 'UserOrder' });
+// 定义属性
+defineProps<{ property: UserOrderProperty }>();
+</script>
+<template>
+  <Image
+    src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png"
+  />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-order/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue
similarity index 81%
rename from apps/web-ele/src/components/diy-editor/components/mobile/user-order/property.vue
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue
index d403c325b..48f0c0a41 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/user-order/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue
@@ -3,7 +3,7 @@ import type { UserOrderProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
 
-import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import ComponentContainerProperty from '../../component-container-property.vue';
 
 // 用户订单属性面板
 defineOptions({ name: 'UserOrderProperty' });
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
similarity index 83%
rename from apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
index 8393760b4..2b10d32fb 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户资产属性 */
 export interface UserWalletProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
new file mode 100644
index 000000000..7180a0c4d
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { UserWalletProperty } from './config';
+
+/** 用户资产 */
+defineOptions({ name: 'UserWallet' });
+// 定义属性
+defineProps<{ property: UserWalletProperty }>();
+</script>
+<template>
+  <Image
+    src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/walletCardStyle.png"
+  />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue
similarity index 81%
rename from apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/property.vue
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue
index 851e7f2f1..5c01b828e 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue
@@ -3,7 +3,7 @@ import type { UserWalletProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
 
-import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import ComponentContainerProperty from '../../component-container-property.vue';
 
 // 用户资产属性面板
 defineOptions({ name: 'UserWalletProperty' });
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/video-player/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
similarity index 89%
rename from apps/web-ele/src/components/diy-editor/components/mobile/video-player/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
index dc2dd8866..bc9195575 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/video-player/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 视频播放属性 */
 export interface VideoPlayerProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
new file mode 100644
index 000000000..f7a105c4a
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { VideoPlayerProperty } from './config';
+
+import { Image } from 'ant-design-vue';
+
+/** 视频播放 */
+defineOptions({ name: 'VideoPlayer' });
+
+defineProps<{ property: VideoPlayerProperty }>();
+</script>
+<template>
+  <div class="w-full" :style="{ height: `${property.style.height}px` }">
+    <Image class="w-full" :src="property.posterUrl" v-if="property.posterUrl" />
+    <video
+      v-else
+      class="w-full"
+      :src="property.videoUrl"
+      :poster="property.posterUrl"
+      :autoplay="property.autoplay"
+      controls
+    ></video>
+  </div>
+</template>
+
+<style scoped lang="scss">
+/* 图片 */
+img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
new file mode 100644
index 000000000..453b23a63
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { VideoPlayerProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import { Form, FormItem, Slider, Switch } from 'ant-design-vue';
+
+import UploadFile from '#/components/upload/file-upload.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+// 视频播放属性面板
+defineOptions({ name: 'VideoPlayerProperty' });
+
+const props = defineProps<{ modelValue: VideoPlayerProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <template #style>
+      <FormItem label="高度" name="height">
+        <Slider v-model:value="formData.style.height" :max="500" :min="100" />
+      </FormItem>
+    </template>
+    <Form
+      :model="formData"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <FormItem label="上传视频" name="videoUrl">
+        <UploadFile
+          v-model="formData.videoUrl"
+          :file-type="['mp4']"
+          :limit="1"
+          :file-size="100"
+          class="min-w-[80px]"
+        />
+      </FormItem>
+      <FormItem label="上传封面" name="posterUrl">
+        <UploadImg
+          v-model="formData.posterUrl"
+          draggable="false"
+          height="80px"
+          width="100%"
+          class="min-w-[80px]"
+          :show-description="false"
+        >
+          <template #tip> 建议宽度750 </template>
+        </UploadImg>
+      </FormItem>
+      <FormItem label="自动播放" name="autoplay">
+        <Switch v-model:checked="formData.autoplay" />
+      </FormItem>
+    </Form>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
new file mode 100644
index 000000000..1ae7934ea
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
@@ -0,0 +1,626 @@
+<script lang="ts" setup>
+import type { DiyComponent, DiyComponentLibrary, PageConfig } from './util';
+
+import { onMounted, ref, unref, watch } from 'vue';
+
+import { IFrame } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep, isEmpty, isString } from '@vben/utils';
+
+import { useQRCode } from '@vueuse/integrations/useQRCode';
+import { Button, Card, Modal, Tag, Tooltip } from 'ant-design-vue';
+import draggable from 'vuedraggable';
+
+import statusBarImg from '#/assets/imgs/diy/statusBar.png';
+
+import ComponentContainer from './components/component-container.vue';
+import ComponentLibrary from './components/component-library.vue';
+import { componentConfigs, components } from './components/mobile';
+import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/navigation-bar/config';
+import { component as PAGE_CONFIG_COMPONENT } from './components/mobile/page-config/config';
+import { component as TAB_BAR_COMPONENT } from './components/mobile/tab-bar/config';
+
+/** 页面装修详情页 */
+defineOptions({
+  name: 'DiyPageDetail',
+  components,
+});
+
+/** 定义属性 */
+const props = defineProps({
+  modelValue: { type: [String, Object], required: true }, // 页面配置，支持 Json 字符串
+  title: { type: String, default: '' }, // 标题
+  libs: { type: Array<DiyComponentLibrary>, default: () => [] }, // 组件库
+  showNavigationBar: { type: Boolean, default: true }, // 是否显示顶部导航栏
+  showTabBar: { type: Boolean, default: false }, // 是否显示底部导航菜单
+  showPageConfig: { type: Boolean, default: true }, // 是否显示页面配置
+  previewUrl: { type: String, default: '' }, // 预览地址：提供了预览地址，才会显示预览按钮
+});
+
+const emits = defineEmits(['reset', 'preview', 'save', 'update:modelValue']); // 工具栏操作
+
+const qrcode = useQRCode(props.previewUrl, {
+  errorCorrectionLevel: 'H',
+  margin: 4,
+}); // 预览二维码
+
+const componentLibrary = ref(); // 左侧组件库
+const pageConfigComponent = ref<DiyComponent<any>>(
+  cloneDeep(PAGE_CONFIG_COMPONENT),
+); // 页面设置组件
+const navigationBarComponent = ref<DiyComponent<any>>(
+  cloneDeep(NAVIGATION_BAR_COMPONENT),
+); // 顶部导航栏
+const tabBarComponent = ref<DiyComponent<any>>(cloneDeep(TAB_BAR_COMPONENT)); // 底部导航菜单
+
+const selectedComponent = ref<DiyComponent<any>>(); // 选中的组件，默认选中顶部导航栏
+const selectedComponentIndex = ref<number>(-1); // 选中的组件索引
+const pageComponents = ref<DiyComponent<any>[]>([]); // 组件列表
+
+/**
+ * 监听传入的页面配置
+ * 解析出 pageConfigComponent 页面整体的配置，navigationBarComponent、pageComponents、tabBarComponent 页面上、中、下的配置
+ */
+watch(
+  () => props.modelValue,
+  () => {
+    const modelValue =
+      isString(props.modelValue) && !isEmpty(props.modelValue)
+        ? (JSON.parse(props.modelValue) as PageConfig)
+        : props.modelValue;
+    // TODO @AI：这里可以简化么？idea 提示 Invalid 'typeof' check: 'modelValue' cannot have type 'string'
+    pageConfigComponent.value.property =
+      (typeof modelValue !== 'string' && modelValue?.page) ||
+      PAGE_CONFIG_COMPONENT.property;
+    navigationBarComponent.value.property =
+      (typeof modelValue !== 'string' && modelValue?.navigationBar) ||
+      NAVIGATION_BAR_COMPONENT.property;
+    tabBarComponent.value.property =
+      (typeof modelValue !== 'string' && modelValue?.tabBar) ||
+      TAB_BAR_COMPONENT.property;
+    // 查找对应的页面组件
+    pageComponents.value = (
+      (typeof modelValue !== 'string' && modelValue?.components) ||
+      []
+    ).map((item: any) => {
+      const component = componentConfigs[item.id];
+      return { ...component, property: item.property };
+    });
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 选择组件修改其属性后更新它的配置 */
+watch(
+  selectedComponent,
+  (val: any) => {
+    if (!val || selectedComponentIndex.value === -1) {
+      return;
+    }
+    pageComponents.value[selectedComponentIndex.value] =
+      selectedComponent.value!;
+  },
+  { deep: true },
+);
+
+/** 保存 */
+function handleSave() {
+  // 发送保存通知，由外部保存
+  emits('save');
+}
+
+/** 监听配置修改 */
+function pageConfigChange() {
+  const pageConfig = {
+    page: pageConfigComponent.value.property,
+    navigationBar: navigationBarComponent.value.property,
+    tabBar: tabBarComponent.value.property,
+    components: pageComponents.value.map((component) => {
+      // 只保留 APP 有用的字段
+      return { id: component.id, property: component.property };
+    }),
+  } as PageConfig;
+  if (!props.showTabBar) {
+    delete pageConfig.tabBar;
+  }
+  // 发送数据更新通知
+  const modelValue = isString(props.modelValue)
+    ? JSON.stringify(pageConfig)
+    : pageConfig;
+  emits('update:modelValue', modelValue);
+}
+
+watch(
+  () => [
+    pageConfigComponent.value.property,
+    navigationBarComponent.value.property,
+    tabBarComponent.value.property,
+    pageComponents.value,
+  ],
+  () => {
+    pageConfigChange();
+  },
+  { deep: true },
+);
+
+/** 处理页面选中：显示属性表单 */
+function handlePageSelected(event: any) {
+  if (!props.showPageConfig) {
+    return;
+  }
+  // 配置了样式 page-prop-area 的元素，才显示页面设置
+  if (event?.target?.classList?.contains('page-prop-area')) {
+    handleComponentSelected(unref(pageConfigComponent));
+  }
+}
+
+/**
+ * 选中组件
+ *
+ * @param component 组件
+ * @param index 组件的索引
+ */
+function handleComponentSelected(
+  component: DiyComponent<any>,
+  index: number = -1,
+) {
+  selectedComponent.value = component;
+  selectedComponentIndex.value = index;
+}
+
+/** 选中顶部导航栏 */
+function handleNavigationBarSelected() {
+  handleComponentSelected(unref(navigationBarComponent));
+}
+
+/** 选中底部导航菜单 */
+function handleTabBarSelected() {
+  handleComponentSelected(unref(tabBarComponent));
+}
+
+/** 组件变动（拖拽） */
+function handleComponentChange(dragEvent: any) {
+  // 新增，即从组件库拖拽添加组件
+  if (dragEvent.added) {
+    const { element, newIndex } = dragEvent.added;
+    handleComponentSelected(element, newIndex);
+  } else if (dragEvent.moved) {
+    // 拖拽排序
+    const { newIndex } = dragEvent.moved;
+    // 保持选中
+    selectedComponentIndex.value = newIndex;
+  }
+}
+
+/** 交换组件 */
+function swapComponent(oldIndex: number, newIndex: number) {
+  const temp = pageComponents.value[oldIndex]!;
+  pageComponents.value[oldIndex] = pageComponents.value[newIndex]!;
+  pageComponents.value[newIndex] = temp;
+  // 保持选中
+  selectedComponentIndex.value = newIndex;
+}
+
+/** 移动组件（上移、下移） */
+function handleMoveComponent(index: number, direction: number) {
+  const newIndex = index + direction;
+  if (newIndex < 0 || newIndex >= pageComponents.value.length) {
+    return;
+  }
+  swapComponent(index, newIndex);
+}
+
+/** 复制组件 */
+function handleCopyComponent(index: number) {
+  const component = pageComponents.value[index];
+  if (component) {
+    const clonedComponent = cloneDeep(component);
+    clonedComponent.uid = Date.now();
+    pageComponents.value.splice(index + 1, 0, clonedComponent);
+  }
+}
+
+/** 删除组件 */
+function handleDeleteComponent(index: number) {
+  // 删除组件
+  pageComponents.value.splice(index, 1);
+  if (index < pageComponents.value.length) {
+    // 1. 不是最后一个组件时，删除后选中下面的组件
+    const bottomIndex = index;
+    const component = pageComponents.value[bottomIndex];
+    if (component) {
+      handleComponentSelected(component, bottomIndex);
+    }
+  } else if (pageComponents.value.length > 0) {
+    // 2. 不是第一个组件时，删除后选中上面的组件
+    const topIndex = index - 1;
+    const component = pageComponents.value[topIndex];
+    if (component) {
+      handleComponentSelected(component, topIndex);
+    }
+  } else {
+    // 3. 组件全部删除之后，显示页面设置
+    handleComponentSelected(unref(pageConfigComponent));
+  }
+}
+
+/** 重置 */
+function handleReset() {
+  emits('reset');
+}
+
+// TODO @AI：搞成 modal 来？
+/** 预览 */
+const previewDialogVisible = ref(false);
+function handlePreview() {
+  previewDialogVisible.value = true;
+  emits('preview');
+}
+
+/** 设置默认选中的组件 */
+function setDefaultSelectedComponent() {
+  if (props.showPageConfig) {
+    selectedComponent.value = unref(pageConfigComponent);
+  } else if (props.showNavigationBar) {
+    selectedComponent.value = unref(navigationBarComponent);
+  } else if (props.showTabBar) {
+    selectedComponent.value = unref(tabBarComponent);
+  }
+}
+
+watch(
+  () => [props.showPageConfig, props.showNavigationBar, props.showTabBar],
+  () => setDefaultSelectedComponent(),
+);
+
+/** 初始化 */
+onMounted(() => {
+  setDefaultSelectedComponent();
+});
+</script>
+<template>
+  <div>
+    <div class="editor flex h-full flex-col">
+      <!-- 顶部：工具栏 -->
+      <div class="editor-header flex items-center">
+        <!-- 左侧操作区 -->
+        <slot name="toolBarLeft"></slot>
+        <!-- 中心操作区 -->
+        <div class="header-center flex flex-1 items-center justify-center">
+          <span>{{ title }}</span>
+        </div>
+        <!-- 右侧操作区 -->
+        <div class="header-right flex">
+          <Tooltip title="重置">
+            <Button @click="handleReset">
+              <IconifyIcon :size="24" icon="system-uicons:reset-alt" />
+            </Button>
+          </Tooltip>
+          <Tooltip v-if="previewUrl" title="预览">
+            <Button @click="handlePreview">
+              <IconifyIcon :size="24" icon="ep:view" />
+            </Button>
+          </Tooltip>
+          <Tooltip title="保存">
+            <Button @click="handleSave">
+              <IconifyIcon :size="24" icon="ep:check" />
+            </Button>
+          </Tooltip>
+        </div>
+      </div>
+
+      <!-- 中心区域 -->
+      <div class="editor-container flex flex-1">
+        <!-- 左侧：组件库（ComponentLibrary） -->
+        <ComponentLibrary
+          v-if="libs && libs.length > 0"
+          ref="componentLibrary"
+          :list="libs"
+        />
+        <!-- 中心：设计区域（ComponentContainer） -->
+        <div class="editor-center page-prop-area" @click="handlePageSelected">
+          <!-- 手机顶部 -->
+          <div class="editor-design-top">
+            <!-- 手机顶部状态栏 -->
+            <img alt="" class="status-bar" :src="statusBarImg" />
+            <!-- 手机顶部导航栏 -->
+            <ComponentContainer
+              v-if="showNavigationBar"
+              :active="selectedComponent?.id === navigationBarComponent.id"
+              :component="navigationBarComponent"
+              :show-toolbar="false"
+              class="cursor-pointer"
+              @click="handleNavigationBarSelected"
+            />
+          </div>
+          <!-- 绝对定位的组件：例如 弹窗、浮动按钮等 -->
+          <div
+            v-for="(component, index) in pageComponents"
+            :key="index"
+            @click="handleComponentSelected(component, index)"
+          >
+            <component
+              :is="component.id"
+              v-if="
+                component.position === 'fixed' &&
+                selectedComponent?.uid === component.uid
+              "
+              :property="component.property"
+            />
+          </div>
+          <!-- 手机页面编辑区域 -->
+          <div
+            class="editor-design-center page-prop-area phone-container overflow-y-auto"
+            :style="{
+              backgroundColor: pageConfigComponent.property.backgroundColor,
+              backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`,
+              height: 'calc(100vh - 135px - 120px)',
+            }"
+          >
+            <draggable
+              v-model="pageComponents"
+              :animation="200"
+              :force-fallback="true"
+              class="page-prop-area drag-area"
+              filter=".component-toolbar"
+              ghost-class="draggable-ghost"
+              group="component"
+              item-key="index"
+              @change="handleComponentChange"
+            >
+              <template #item="{ element, index }">
+                <ComponentContainer
+                  v-if="!element.position || element.position === 'center'"
+                  :active="selectedComponentIndex === index"
+                  :can-move-down="index < pageComponents.length - 1"
+                  :can-move-up="index > 0"
+                  :component="element"
+                  @click="handleComponentSelected(element, index)"
+                  @copy="handleCopyComponent(index)"
+                  @delete="handleDeleteComponent(index)"
+                  @move="
+                    (direction: number) => handleMoveComponent(index, direction)
+                  "
+                />
+              </template>
+            </draggable>
+          </div>
+          <!-- 手机底部导航 -->
+          <div
+            v-if="showTabBar"
+            class="editor-design-bottom component cursor-pointer"
+          >
+            <ComponentContainer
+              :active="selectedComponent?.id === tabBarComponent.id"
+              :component="tabBarComponent"
+              :show-toolbar="false"
+              @click="handleTabBarSelected"
+            />
+          </div>
+          <!-- 固定布局的组件 操作按钮区 -->
+          <div class="fixed-component-action-group gap-2">
+            <Tag
+              v-if="showPageConfig"
+              :color="
+                selectedComponent?.uid === pageConfigComponent.uid
+                  ? 'blue'
+                  : 'default'
+              "
+              class="cursor-pointer"
+              @click="handleComponentSelected(pageConfigComponent)"
+            >
+              <IconifyIcon :icon="pageConfigComponent.icon" :size="12" />
+              <span>{{ pageConfigComponent.name }}</span>
+            </Tag>
+            <template v-for="(component, index) in pageComponents" :key="index">
+              <Tag
+                v-if="component.position === 'fixed'"
+                :color="
+                  selectedComponent?.uid === component.uid ? 'blue' : 'default'
+                "
+                closable
+                class="cursor-pointer"
+                @click="handleComponentSelected(component)"
+                @close="handleDeleteComponent(index)"
+              >
+                <IconifyIcon :icon="component.icon" :size="12" />
+                <span>{{ component.name }}</span>
+              </Tag>
+            </template>
+          </div>
+        </div>
+        <!-- 右侧：属性面板（ComponentContainerProperty） -->
+        <div v-if="selectedComponent?.property" class="editor-right w-[350px]">
+          <Card
+            class="h-full"
+            :body-style="{ height: 'calc(100% - 57px)', padding: 0 }"
+          >
+            <!-- 组件名称 -->
+            <template #title>
+              <div class="flex items-center gap-2">
+                <IconifyIcon :icon="selectedComponent?.icon" color="gray" />
+                <span>{{ selectedComponent?.name }}</span>
+              </div>
+            </template>
+            <div class="property h-full overflow-y-auto p-4">
+              <component
+                :is="`${selectedComponent?.id}Property`"
+                :key="selectedComponent?.uid || selectedComponent?.id"
+                v-model="selectedComponent.property"
+              />
+            </div>
+          </Card>
+        </div>
+      </div>
+    </div>
+
+    <!-- 预览弹框 -->
+    <Modal v-model:open="previewDialogVisible" title="预览" width="700">
+      <div class="flex justify-around">
+        <IFrame
+          :src="previewUrl"
+          class="h-[667px] w-[375px] rounded-lg border-4 border-solid p-0.5"
+        />
+        <div class="flex flex-col">
+          <div class="text-base">手机扫码预览</div>
+          <img :src="qrcode" alt="qrcode" class="w-1/2" />
+          <!-- <Qrcode :text="previewUrl" logo="/logo.gif" /> -->
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>
+<style lang="scss" scoped>
+/* 手机宽度 */
+$phone-width: 375px;
+
+/* 根节点样式 */
+.editor {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  /* 顶部：工具栏 */
+  .editor-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 42px;
+    padding: 0;
+    background-color: var(--ant-color-bg-container);
+    border-bottom: solid 1px var(--ant-color-border);
+
+    /* 工具栏：右侧按钮 */
+    .header-right {
+      height: 100%;
+
+      .ant-btn {
+        height: 100%;
+      }
+    }
+
+    /* 隐藏工具栏按钮的边框 */
+    :deep(.ant-radio-button-wrapper),
+    :deep(.ant-btn) {
+      border-top: none !important;
+      border-bottom: none !important;
+      border-radius: 0 !important;
+    }
+  }
+
+  /* 中心操作区 */
+  .editor-container {
+    height: calc(100vh - 135px);
+
+    /* 右侧属性面板 */
+    :deep(.editor-right) {
+      flex-shrink: 0;
+      overflow: hidden;
+      box-shadow: -8px 0 8px -8px rgb(0 0 0 / 12%);
+
+      /* 属性面板顶部：减少内边距 */
+      :deep(.ant-card-head) {
+        padding: 8px 16px;
+      }
+
+      /* 属性面板分组 */
+      :deep(.property-group) {
+        margin: 0 -20px;
+
+        &.ant-card {
+          border: none;
+        }
+
+        /* 属性分组名称 */
+        .ant-card-head {
+          padding: 8px 32px;
+          background: var(--ant-color-bg-layout);
+          border: none;
+        }
+
+        .ant-card-body {
+          border: none;
+        }
+      }
+    }
+
+    /* 中心区域 */
+    .editor-center {
+      position: relative;
+      display: flex;
+      flex: 1 1 0;
+      flex-direction: column;
+      justify-content: center;
+      width: 100%;
+      margin: 16px 0 0;
+      overflow: hidden;
+      background-color: var(--app-content-bg-color);
+
+      /* 手机顶部 */
+      .editor-design-top {
+        display: flex;
+        flex-direction: column;
+        width: $phone-width;
+        margin: 0 auto;
+
+        /* 手机顶部状态栏 */
+        .status-bar {
+          width: $phone-width;
+          height: 20px;
+          background-color: #fff;
+        }
+      }
+
+      /* 手机底部导航 */
+      .editor-design-bottom {
+        width: $phone-width;
+        margin: 0 auto;
+      }
+
+      /* 手机页面编辑区域 */
+      :deep(.editor-design-center) {
+        width: 100%;
+
+        /* 主体内容 */
+        .phone-container {
+          position: relative;
+          width: $phone-width;
+          height: 100%;
+          margin: 0 auto;
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+
+          .drag-area {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+
+      /* 固定布局的组件 操作按钮区 */
+      .fixed-component-action-group {
+        position: absolute;
+        top: 0;
+        right: 16px;
+        display: flex;
+        flex-direction: column;
+
+        :deep(.ant-tag) {
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          width: 100%;
+          border: none;
+          box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
+
+          .anticon {
+            margin-right: 4px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/apps/web-ele/src/components/diy-editor/util.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/util.ts
similarity index 57%
rename from apps/web-ele/src/components/diy-editor/util.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/util.ts
index 2d29f8a4e..a8f33d2fa 100644
--- a/apps/web-ele/src/components/diy-editor/util.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/util.ts
@@ -1,38 +1,30 @@
-import type { NavigationBarProperty } from '#/components/diy-editor/components/mobile/NavigationBar/config';
-import type { PageConfigProperty } from '#/components/diy-editor/components/mobile/PageConfig/config';
-import type { TabBarProperty } from '#/components/diy-editor/components/mobile/TabBar/config';
+import type { NavigationBarProperty } from './components/mobile/navigation-bar/config';
+import type { PageConfigProperty } from './components/mobile/page-config/config';
+import type { TabBarProperty } from './components/mobile/tab-bar/config';
 
-// 页面装修组件
+/** 页面装修组件 */
 export interface DiyComponent<T> {
-  // 用于区分同一种组件的不同实例
-  uid?: number;
-  // 组件唯一标识
-  id: string;
-  // 组件名称
-  name: string;
-  // 组件图标
-  icon: string;
+  uid?: number; // 用于区分同一种组件的不同实例
+  id: string; // 组件唯一标识
+  name: string; // 组件名称
+  icon: string; // 组件图标
   /*
    组件位置：
-   top: 固定于手机顶部，例如 顶部的导航栏
-   bottom: 固定于手机底部，例如 底部的菜单导航栏
-   center: 位于手机中心，每个组件占一行，顺序向下排列
-   空：同center
-   fixed: 由组件自己决定位置，如弹窗位于手机中心、浮动按钮一般位于手机右下角
+    top: 固定于手机顶部，例如 顶部的导航栏
+    bottom: 固定于手机底部，例如 底部的菜单导航栏
+    center: 位于手机中心，每个组件占一行，顺序向下排列
+    空：同 center
+    fixed: 由组件自己决定位置，如弹窗位于手机中心、浮动按钮一般位于手机右下角
   */
   position?: '' | 'bottom' | 'center' | 'fixed' | 'top';
-  // 组件属性
-  property: T;
+  property: T; // 组件属性
 }
 
-// 页面装修组件库
+/** 页面装修组件库 */
 export interface DiyComponentLibrary {
-  // 组件库名称
-  name: string;
-  // 是否展开
-  extended: boolean;
-  // 组件列表
-  components: string[];
+  name: string; // 组件库名称
+  extended: boolean; // 是否展开
+  components: string[]; // 组件列表
 }
 
 // 组件样式
@@ -63,21 +55,18 @@ export interface ComponentStyle {
   borderBottomLeftRadius: number;
 }
 
-// 页面配置
+/** 页面配置 */
 export interface PageConfig {
-  // 页面属性
-  page: PageConfigProperty;
-  // 顶部导航栏属性
-  navigationBar: NavigationBarProperty;
-  // 底部导航菜单属性
-  tabBar?: TabBarProperty;
-  // 页面组件列表
-  components: PageComponent[];
-}
-// 页面组件，只保留组件ID，组件属性
-export type PageComponent = Pick<DiyComponent<any>, 'id' | 'property'>;
+  page: PageConfigProperty; // 页面属性
+  navigationBar: NavigationBarProperty; // 顶部导航栏属性
+  tabBar?: TabBarProperty; // 底部导航菜单属性
 
-// 页面组件库
+  components: PageComponent[]; // 页面组件列表
+}
+
+export type PageComponent = Pick<DiyComponent<any>, 'id' | 'property'>; // 页面组件，只保留组件 ID，组件属性
+
+/** 页面组件库 */
 export const PAGE_LIBS = [
   {
     name: '基础组件',
diff --git a/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue b/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
new file mode 100644
index 000000000..8bb352329
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import { Button, Tooltip } from 'ant-design-vue';
+import VueDraggable from 'vuedraggable';
+
+/** 拖拽组件封装 */
+defineOptions({ name: 'Draggable' });
+
+/** 定义属性 */
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => [],
+  }, // 绑定值
+  emptyItem: {
+    type: Object,
+    default: () => ({}),
+  }, // 空的元素：点击添加按钮时，创建元素并添加到列表；默认为空对象
+  limit: {
+    type: Number,
+    default: Number.MAX_VALUE,
+  }, // 数量限制：默认为 0，表示不限制
+  min: {
+    type: Number,
+    default: 1,
+  }, // 最小数量：默认为1
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
+
+/** 处理添加 */
+function handleAdd() {
+  return formData.value.push(cloneDeep(props.emptyItem || {}));
+}
+
+/** 处理删除 */
+const handleDelete = function (index: number) {
+  return formData.value.splice(index, 1);
+};
+</script>
+
+<template>
+  <div class="text-xs text-gray-500">拖动左上角的小圆点可对其排序</div>
+  <VueDraggable
+    :list="formData"
+    :force-fallback="true"
+    :animation="200"
+    handle=".drag-icon"
+    class="mt-2"
+    item-key="index"
+  >
+    <template #item="{ element, index }">
+      <div class="mb-1 flex flex-col gap-1 rounded border border-gray-200 p-2">
+        <!-- 操作按钮区 -->
+        <div
+          class="-m-2 mb-1 flex flex-row items-center justify-between p-2"
+          style="background-color: var(--app-content-bg-color)"
+        >
+          <Tooltip title="拖动排序">
+            <IconifyIcon
+              icon="ic:round-drag-indicator"
+              class="drag-icon cursor-move"
+              style="color: #8a909c"
+            />
+          </Tooltip>
+          <Tooltip title="删除">
+            <IconifyIcon
+              icon="ep:delete"
+              class="cursor-pointer text-red-500"
+              v-if="formData.length > min"
+              @click="handleDelete(index)"
+            />
+          </Tooltip>
+        </div>
+        <!-- 内容区 -->
+        <slot :element="element" :index="index"></slot>
+      </div>
+    </template>
+  </VueDraggable>
+  <Tooltip :title="limit < 1 ? undefined : `最多添加${limit}个`">
+    <Button
+      type="primary"
+      ghost
+      class="mt-1 w-full"
+      :disabled="limit > 0 && formData.length >= limit"
+      @click="handleAdd"
+    >
+      <IconifyIcon icon="ep:plus" /><span>添加</span>
+    </Button>
+  </Tooltip>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/index.ts b/apps/web-antd/src/views/mall/promotion/components/index.ts
new file mode 100644
index 000000000..a088806e2
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/index.ts
@@ -0,0 +1,9 @@
+export { default as AppLinkInput } from './app-link-input/index.vue';
+export { default as ColorInput } from './color-input/index.vue';
+export { default as DiyEditor } from './diy-editor/index.vue';
+export { type DiyComponentLibrary, PAGE_LIBS } from './diy-editor/util';
+export { default as Draggable } from './draggable/index.vue';
+export { default as InputWithColor } from './input-with-color/index.vue';
+
+export { default as MagicCubeEditor } from './magic-cube-editor/index.vue';
+export { default as VerticalButtonGroup } from './vertical-button-group/index.vue';
diff --git a/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue b/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
new file mode 100644
index 000000000..25b08a03e
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+// import { PREDEFINE_COLORS } from '@vben/constants';
+
+import { useVModels } from '@vueuse/core';
+import { Input, InputGroup } from 'ant-design-vue';
+
+/** 带颜色选择器输入框 */
+defineOptions({ name: 'InputWithColor' });
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  color: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'update:color']);
+
+const { modelValue, color } = useVModels(props, emit);
+</script>
+
+<template>
+  <InputGroup compact>
+    <Input v-model:value="modelValue" v-bind="$attrs" class="flex-1" />
+    <!-- TODO 芋艿：后续在处理，antd 不支持该组件；
+    <ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
+    -->
+  </InputGroup>
+</template>
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/magic-cube-editor/index.vue b/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue
similarity index 88%
rename from apps/web-ele/src/components/magic-cube-editor/index.vue
rename to apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue
index 809991d95..d260ded9c 100644
--- a/apps/web-ele/src/components/magic-cube-editor/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-// TODO @芋艿：后续合并到 diy-editor 里，并不是通用的；
 import type { Point, Rect } from './util';
 
 import { ref, watch } from 'vue';
@@ -8,6 +7,7 @@ import { IconifyIcon } from '@vben/icons';
 
 import { createRect, isContains, isOverlap } from './util';
 
+// TODO @AI: 改成标准注释
 // 魔方编辑器
 // 有两部分组成：
 // 1. 魔方矩阵：位于底层，由方块组件的二维表格，用于创建热区
@@ -19,42 +19,38 @@ import { createRect, isContains, isOverlap } from './util';
 // 2. 热区：位于顶层，采用绝对定位，覆盖在魔方矩阵上面。
 defineOptions({ name: 'MagicCubeEditor' });
 
-// 定义属性
+/** 定义属性 */
 const props = defineProps({
-  // 热区列表
   modelValue: {
     type: Array as () => Rect[],
     default: () => [],
-  },
-  // 行数，默认 4 行
+  }, // 热区列表
   rows: {
     type: Number,
     default: 4,
-  },
-  // 列数，默认 4 列
+  }, // 行数，默认 4 行
+
   cols: {
     type: Number,
     default: 4,
-  },
-  // 方块大小，单位px，默认75px
+  }, // 列数，默认 4 列
+
   cubeSize: {
     type: Number,
     default: 75,
-  },
+  }, // 方块大小，单位px，默认75px
 });
 
-// 发送模型更新
-const emit = defineEmits(['update:modelValue', 'hotAreaSelected']);
+const emit = defineEmits(['update:modelValue', 'hotAreaSelected']); // 发送模型更新
 
-/**
- * 方块
- * @property active 是否激活
- */
-type Cube = Point & { active: boolean };
+/** 方块 */
+type Cube = {
+  active: boolean; // 是否激活
+} & Point;
 
-// 魔方矩阵：所有的方块
-const cubes = ref<Cube[][]>([]);
-// 监听行数、列数变化
+const cubes = ref<Cube[][]>([]); // 魔方矩阵：所有的方块
+
+/** 监听行数、列数变化 */
 watch(
   () => [props.rows, props.cols],
   () => {
@@ -73,19 +69,17 @@ watch(
   { immediate: true },
 );
 
-// 热区列表
-const hotAreas = ref<Rect[]>([]);
-// 初始化热区
+const hotAreas = ref<Rect[]>([]); // 热区列表
+/** 初始化热区 */
 watch(
   () => props.modelValue,
   () => (hotAreas.value = props.modelValue || []),
   { immediate: true },
 );
 
-// 热区起始方块
-const hotAreaBeginCube = ref<Cube>();
-// 是否开启了热区选择模式
-const isHotAreaSelectMode = () => !!hotAreaBeginCube.value;
+const hotAreaBeginCube = ref<Cube>(); // 热区起始方块
+const isHotAreaSelectMode = () => !!hotAreaBeginCube.value; // 是否开启了热区选择模式
+
 /**
  * 处理鼠标点击方块
  *
@@ -94,7 +88,9 @@ const isHotAreaSelectMode = () => !!hotAreaBeginCube.value;
  */
 const handleCubeClick = (currentRow: number, currentCol: number) => {
   const currentCube = cubes.value[currentRow]?.[currentCol];
-  if (!currentCube) return;
+  if (!currentCube) {
+    return;
+  }
 
   // 情况1：进入热区选择模式
   if (!isHotAreaSelectMode()) {
@@ -116,6 +112,7 @@ const handleCubeClick = (currentRow: number, currentCol: number) => {
   // 发送热区变动通知
   emitUpdateModelValue();
 };
+
 /**
  * 处理鼠标经过方块
  *
@@ -124,11 +121,15 @@ const handleCubeClick = (currentRow: number, currentCol: number) => {
  */
 const handleCellHover = (currentRow: number, currentCol: number) => {
   // 当前没有进入热区选择模式
-  if (!isHotAreaSelectMode()) return;
+  if (!isHotAreaSelectMode()) {
+    return;
+  }
 
   // 当前已选的区域
   const currentCube = cubes.value[currentRow]?.[currentCol];
-  if (!currentCube) return;
+  if (!currentCube) {
+    return;
+  }
 
   const currentSelectedArea = createRect(hotAreaBeginCube.value!, currentCube);
   // 热区不允许重叠
@@ -147,24 +148,23 @@ const handleCellHover = (currentRow: number, currentCol: number) => {
     cube.active = isContains(currentSelectedArea, cube);
   });
 };
+
 /**
  * 处理热区删除
  *
  * @param index 热区索引
  */
-const handleDeleteHotArea = (index: number) => {
+function handleDeleteHotArea(index: number) {
   hotAreas.value.splice(index, 1);
   // 结束热区选择模式
   exitHotAreaSelectMode();
   // 发送热区变动通知
   emitUpdateModelValue();
-};
+}
 
-// 发送热区变动通知
-const emitUpdateModelValue = () => emit('update:modelValue', hotAreas.value);
+const emitUpdateModelValue = () => emit('update:modelValue', hotAreas.value); // 发送热区变动通知
 
-// 热区选中
-const selectedHotAreaIndex = ref(0);
+const selectedHotAreaIndex = ref(0); // 热区选中
 const handleHotAreaSelected = (hotArea: Rect, index: number) => {
   selectedHotAreaIndex.value = index;
   emit('hotAreaSelected', hotArea, index);
diff --git a/apps/web-ele/src/components/magic-cube-editor/util.ts b/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/util.ts
similarity index 100%
rename from apps/web-ele/src/components/magic-cube-editor/util.ts
rename to apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/util.ts
diff --git a/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue b/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
new file mode 100644
index 000000000..f7b609c1d
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ButtonGroup } from 'ant-design-vue';
+
+/**
+ * 垂直按钮组
+ * Element 官方的按钮组只支持水平显示，通过重写样式实现垂直布局
+ */
+defineOptions({ name: 'VerticalButtonGroup' });
+</script>
+
+<template>
+  <ButtonGroup direction="vertical" v-bind="$attrs">
+    <slot></slot>
+  </ButtonGroup>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/index.vue b/apps/web-antd/src/views/mall/promotion/coupon/index.vue
index 64d0c1e3d..110dd01ba 100644
--- a/apps/web-antd/src/views/mall/promotion/coupon/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/coupon/index.vue
@@ -113,8 +113,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </template>
 
     <Grid>
-      <template #top>
-        <Tabs class="-mt-11" @change="handleTabChange">
+      <template #toolbar-actions>
+        <Tabs class="w-full" @change="handleTabChange">
           <TabPane
             v-for="tab in statusTabs"
             :key="tab.value"
@@ -143,8 +143,3 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </Grid>
   </Page>
 </template>
-<style scoped>
-:deep(.vxe-toolbar div) {
-  z-index: 1;
-}
-</style>
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/template/index.vue b/apps/web-antd/src/views/mall/promotion/coupon/template/index.vue
index eee46b6a9..050a4fb6b 100644
--- a/apps/web-antd/src/views/mall/promotion/coupon/template/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/coupon/template/index.vue
@@ -66,14 +66,10 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新优惠券模板状态
-        const res = await updateCouponTemplateStatus(row.id!, newStatus);
-        if (res) {
-          // 提示并返回成功
-          message.success($t('ui.actionMessage.operationSuccess'));
-          resolve(true);
-        } else {
-          reject(new Error('更新失败'));
-        }
+        await updateCouponTemplateStatus(row.id!, newStatus);
+        // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-antd/src/views/mall/promotion/diy/page/data.ts b/apps/web-antd/src/views/mall/promotion/diy/page/data.ts
index 5e6682825..cec26ffcf 100644
--- a/apps/web-antd/src/views/mall/promotion/diy/page/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/diy/page/data.ts
@@ -1,6 +1,8 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
+import { getRangePickerDefaultProps } from '#/utils';
+
 /** 表单配置 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -51,7 +53,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入页面名称',
-        allowClear: true,
+        clearable: true,
       },
     },
     {
@@ -59,9 +61,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '创建时间',
       component: 'RangePicker',
       componentProps: {
-        placeholder: ['开始时间', '结束时间'],
+        ...getRangePickerDefaultProps(),
         allowClear: true,
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
       },
     },
   ];
diff --git a/apps/web-antd/src/views/mall/promotion/diy/page/decorate/index.vue b/apps/web-antd/src/views/mall/promotion/diy/page/decorate/index.vue
new file mode 100644
index 000000000..322ad56c8
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/diy/page/decorate/index.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { MallDiyPageApi } from '#/api/mall/promotion/diy/page';
+
+import { onMounted, ref, unref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { message } from 'ant-design-vue';
+
+import {
+  getDiyPageProperty,
+  updateDiyPageProperty,
+} from '#/api/mall/promotion/diy/page';
+import { DiyEditor, PAGE_LIBS } from '#/views/mall/promotion/components';
+
+/** 装修页面表单 */
+defineOptions({ name: 'DiyPageDecorate' });
+
+const route = useRoute();
+
+const formData = ref<MallDiyPageApi.DiyPage>();
+
+/** 获取详情 */
+async function getPageDetail(id: any) {
+  const hideLoading = message.loading({
+    content: '加载中...',
+    duration: 0,
+  });
+  try {
+    formData.value = await getDiyPageProperty(id);
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 提交表单 */
+async function submitForm() {
+  const hideLoading = message.loading({
+    content: '保存中...',
+    duration: 0,
+  });
+  try {
+    await updateDiyPageProperty(unref(formData)!);
+    message.success('保存成功');
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  if (!route.params.id) {
+    message.warning('参数错误，页面编号不能为空！');
+    return;
+  }
+  formData.value = {} as MallDiyPageApi.DiyPage;
+  getPageDetail(route.params.id);
+});
+</script>
+<template>
+  <DiyEditor
+    v-if="formData?.id"
+    v-model="formData!.property"
+    :title="formData!.name"
+    :libs="PAGE_LIBS"
+    @save="submitForm"
+  />
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/diy/page/index.vue b/apps/web-antd/src/views/mall/promotion/diy/page/index.vue
index 65bc4da59..c1af949b1 100644
--- a/apps/web-antd/src/views/mall/promotion/diy/page/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/diy/page/index.vue
@@ -6,6 +6,8 @@ import { useRouter } from 'vue-router';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
+import { message } from 'ant-design-vue';
+
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteDiyPage, getDiyPagePage } from '#/api/mall/promotion/diy/page';
 import { $t } from '#/locales';
@@ -37,7 +39,6 @@ function handleEdit(row: MallDiyPageApi.DiyPage) {
   formModalApi.setData(row).open();
 }
 
-// TODO @xingyu：装修未实现
 /** 装修页面 */
 function handleDecorate(row: MallDiyPageApi.DiyPage) {
   push({ name: 'DiyPageDecorate', params: { id: row.id } });
@@ -45,8 +46,17 @@ function handleDecorate(row: MallDiyPageApi.DiyPage) {
 
 /** 删除 DIY 页面 */
 async function handleDelete(row: MallDiyPageApi.DiyPage) {
-  await deleteDiyPage(row.id as number);
-  handleRefresh();
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteDiyPage(row.id as number);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
diff --git a/apps/web-antd/src/views/mall/promotion/diy/page/modules/form.vue b/apps/web-antd/src/views/mall/promotion/diy/page/modules/form.vue
index 5045bf240..b3e383e83 100644
--- a/apps/web-antd/src/views/mall/promotion/diy/page/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/diy/page/modules/form.vue
@@ -45,12 +45,6 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as MallDiyPageApi.DiyPage;
-
-    // 确保必要的默认值
-    if (!data.previewPicUrls) {
-      data.previewPicUrls = [];
-    }
-
     try {
       await (formData.value?.id ? updateDiyPage(data) : createDiyPage(data));
       // 关闭并提示
@@ -84,7 +78,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/diy/template/data.ts b/apps/web-antd/src/views/mall/promotion/diy/template/data.ts
index 8c736f1ac..e3c8f1421 100644
--- a/apps/web-antd/src/views/mall/promotion/diy/template/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/diy/template/data.ts
@@ -3,6 +3,8 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { DICT_TYPE } from '@vben/constants';
 
+import { getRangePickerDefaultProps } from '#/utils';
+
 /** 表单配置 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -53,7 +55,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入模板名称',
-        allowClear: true,
+        clearable: true,
       },
     },
     {
@@ -61,9 +63,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '创建时间',
       component: 'RangePicker',
       componentProps: {
-        placeholder: ['开始时间', '结束时间'],
+        ...getRangePickerDefaultProps(),
         allowClear: true,
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
       },
     },
   ];
diff --git a/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue b/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue
new file mode 100644
index 000000000..261d1f5e3
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue
@@ -0,0 +1,209 @@
+<script lang="ts" setup>
+import type { MallDiyPageApi } from '#/api/mall/promotion/diy/page';
+import type { MallDiyTemplateApi } from '#/api/mall/promotion/diy/template';
+import type { DiyComponentLibrary } from '#/views/mall/promotion/components'; // 商城的 DIY 组件，在 DiyEditor 目录下
+
+import { onMounted, reactive, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { useTabs } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+import { isEmpty } from '@vben/utils';
+
+import { message, Radio, RadioGroup, Tooltip } from 'ant-design-vue';
+
+import { updateDiyPageProperty } from '#/api/mall/promotion/diy/page';
+import {
+  getDiyTemplateProperty,
+  updateDiyTemplateProperty,
+} from '#/api/mall/promotion/diy/template';
+import { DiyEditor, PAGE_LIBS } from '#/views/mall/promotion/components';
+
+/** 装修模板表单 */
+defineOptions({ name: 'DiyTemplateDecorate' });
+
+const route = useRoute();
+const { refreshTab } = useTabs();
+
+const DIY_PAGE_INDEX_KEY = 'diy_page_index'; // 特殊：存储 reset 重置时，当前 selectedTemplateItem 值，从而进行恢复
+
+const selectedTemplateItem = ref(0);
+const templateItems = reactive([
+  { name: '基础设置', icon: 'ep:iphone' },
+  { name: '首页', icon: 'ep:home-filled' },
+  { name: '我的', icon: 'ep:user-filled' },
+]); // 左上角工具栏操作按钮
+
+const formData = ref<MallDiyTemplateApi.DiyTemplateProperty>();
+const currentFormData = ref<
+  MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty
+>({
+  property: '',
+} as MallDiyPageApi.DiyPage); // 当前编辑的属性
+const currentFormDataMap = ref<
+  Map<string, MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty>
+>(new Map()); // templateItem 对应的缓存
+
+const previewUrl = ref(''); // 商城 H5 预览地址
+
+const templateLibs = [] as DiyComponentLibrary[]; // 模板组件库
+const libs = ref<DiyComponentLibrary[]>(templateLibs); // 当前组件库
+
+/** 获取详情 */
+async function getPageDetail(id: any) {
+  const hideLoading = message.loading({
+    content: '加载中...',
+    duration: 0,
+  });
+  try {
+    formData.value = await getDiyTemplateProperty(id);
+
+    // 拼接手机预览链接
+    const domain = import.meta.env.VITE_MALL_H5_DOMAIN;
+    const accessStore = useAccessStore();
+    previewUrl.value = `${domain}?templateId=${formData.value.id}&${accessStore.tenantId}`;
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 模板选项切换 */
+function handleTemplateItemChange(val: any) {
+  // 缓存模版编辑数据
+  currentFormDataMap.value.set(
+    templateItems[selectedTemplateItem.value]?.name || '',
+    currentFormData.value!,
+  );
+  // 读取模版缓存
+  const data = currentFormDataMap.value.get(templateItems[val]?.name || '');
+
+  // 切换模版
+  selectedTemplateItem.value = val;
+
+  // 情况一：编辑模板
+  if (val === 0) {
+    libs.value = templateLibs;
+    currentFormData.value = (isEmpty(data) ? formData.value : data) as
+      | MallDiyPageApi.DiyPage
+      | MallDiyTemplateApi.DiyTemplateProperty;
+    return;
+  }
+
+  // 情况二：编辑页面
+  libs.value = PAGE_LIBS;
+  currentFormData.value = (
+    isEmpty(data)
+      ? formData.value!.pages.find(
+          (page: MallDiyPageApi.DiyPage) =>
+            page.name === templateItems[val]?.name,
+        )
+      : data
+  ) as MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty;
+}
+
+/** 提交表单 */
+async function submitForm() {
+  const hideLoading = message.loading({
+    content: '保存中...',
+    duration: 0,
+  });
+  try {
+    // 对所有的 templateItems 都进行保存，有缓存则保存缓存，解决都有修改时只保存了当前所编辑的 templateItem，导致装修效果存在差异
+    for (const [i, templateItem] of templateItems.entries()) {
+      const data = currentFormDataMap.value.get(templateItem.name) as any;
+      // 情况一：基础设置
+      if (i === 0) {
+        // 提交模板属性
+        await updateDiyTemplateProperty(isEmpty(data) ? formData.value! : data);
+        continue;
+      }
+      // 提交页面属性
+      // 情况二：提交当前正在编辑的页面
+      if (currentFormData.value?.name.includes(templateItem.name)) {
+        await updateDiyPageProperty(currentFormData.value!);
+        continue;
+      }
+      // 情况三：提交页面编辑缓存
+      if (!isEmpty(data)) {
+        await updateDiyPageProperty(data!);
+      }
+    }
+    message.success('保存成功');
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 刷新当前 Tab */
+function handleEditorReset() {
+  sessionStorage.setItem(DIY_PAGE_INDEX_KEY, `${selectedTemplateItem.value}`);
+  refreshTab();
+}
+
+/** 恢复当前 Tab 之前的 index（selectedTemplateItem） */
+function recoverPageIndex() {
+  // 恢复重置前的页面，默认是第一个页面
+  const pageIndex = Number(sessionStorage.getItem(DIY_PAGE_INDEX_KEY)) || 0;
+  // 移除标记
+  sessionStorage.removeItem(DIY_PAGE_INDEX_KEY);
+
+  // 重新初始化数据
+  currentFormData.value = formData.value as
+    | MallDiyPageApi.DiyPage
+    | MallDiyTemplateApi.DiyTemplateProperty;
+  currentFormDataMap.value = new Map<
+    string,
+    MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty
+  >();
+  // 切换页面
+  if (pageIndex !== selectedTemplateItem.value) {
+    handleTemplateItemChange(pageIndex);
+  }
+}
+
+/** 初始化 */
+onMounted(async () => {
+  if (!route.params.id) {
+    message.warning('参数错误，页面编号不能为空！');
+    return;
+  }
+  // 查询详情
+  formData.value = {} as MallDiyTemplateApi.DiyTemplateProperty;
+  await getPageDetail(route.params.id);
+  // 恢复重置前的页面
+  recoverPageIndex();
+});
+</script>
+<template>
+  <DiyEditor
+    v-if="formData?.id"
+    v-model="currentFormData!.property"
+    :libs="libs"
+    :preview-url="previewUrl"
+    :show-navigation-bar="selectedTemplateItem !== 0"
+    :show-page-config="selectedTemplateItem !== 0"
+    :show-tab-bar="selectedTemplateItem === 0"
+    :title="templateItems[selectedTemplateItem]?.name || ''"
+    @reset="handleEditorReset"
+    @save="submitForm"
+  >
+    <template #toolBarLeft>
+      <RadioGroup
+        :value="selectedTemplateItem"
+        class="h-full!"
+        @change="handleTemplateItemChange"
+      >
+        <Tooltip
+          v-for="(item, index) in templateItems"
+          :key="index"
+          :title="item.name"
+        >
+          <Radio.Button :value="index">
+            <IconifyIcon :icon="item.icon" :size="24" />
+          </Radio.Button>
+        </Tooltip>
+      </RadioGroup>
+    </template>
+  </DiyEditor>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/diy/template/index.vue b/apps/web-antd/src/views/mall/promotion/diy/template/index.vue
index da7be750e..ec43bcea0 100644
--- a/apps/web-antd/src/views/mall/promotion/diy/template/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/diy/template/index.vue
@@ -43,7 +43,6 @@ function handleEdit(row: MallDiyTemplateApi.DiyTemplate) {
   formModalApi.setData(row).open();
 }
 
-// TODO @xingyu：装修未实现
 /** 装修模板 */
 function handleDecorate(row: MallDiyTemplateApi.DiyTemplate) {
   router.push({ name: 'DiyTemplateDecorate', params: { id: row.id } });
@@ -51,20 +50,33 @@ function handleDecorate(row: MallDiyTemplateApi.DiyTemplate) {
 
 /** 使用模板 */
 async function handleUse(row: MallDiyTemplateApi.DiyTemplate) {
-  confirm({
-    content: `是否使用模板"${row.name}"?`,
-  }).then(async () => {
-    // 发起删除
+  await confirm(`是否使用模板"${row.name}"?`);
+  const hideLoading = message.loading({
+    content: `正在使用模板"${row.name}"...`,
+    duration: 0,
+  });
+  try {
     await useDiyTemplate(row.id as number);
     message.success('使用成功');
     handleRefresh();
-  });
+  } finally {
+    hideLoading();
+  }
 }
 
-/** 删除DIY模板 */
+/** 删除 DIY 模板 */
 async function handleDelete(row: MallDiyTemplateApi.DiyTemplate) {
-  await deleteDiyTemplate(row.id as number);
-  handleRefresh();
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteDiyTemplate(row.id as number);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -142,14 +154,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
             },
             {
               label: '使用',
-              type: 'link' as const,
+              type: 'link',
               auth: ['promotion:diy-template:use'],
               ifShow: !row.used,
               onClick: handleUse.bind(null, row),
             },
             {
               label: $t('common.delete'),
-              type: 'link' as const,
+              type: 'link',
               danger: true,
               icon: ACTION_ICON.DELETE,
               auth: ['promotion:diy-template:delete'],
diff --git a/apps/web-antd/src/views/mall/promotion/diy/template/modules/form.vue b/apps/web-antd/src/views/mall/promotion/diy/template/modules/form.vue
index c262b70c7..339c949e9 100644
--- a/apps/web-antd/src/views/mall/promotion/diy/template/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/diy/template/modules/form.vue
@@ -16,9 +16,7 @@ import { $t } from '#/locales';
 
 import { useFormSchema } from '../data';
 
-/** 提交表单 */
 const emit = defineEmits(['success']);
-
 const formData = ref<MallDiyTemplateApi.DiyTemplate>();
 const getTitle = computed(() => {
   return formData.value?.id
@@ -47,15 +45,6 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as MallDiyTemplateApi.DiyTemplate;
-
-    // 确保必要的默认值
-    if (!data.previewPicUrls) {
-      data.previewPicUrls = [];
-    }
-    if (data.used === undefined) {
-      data.used = false;
-    }
-
     try {
       await (formData.value?.id
         ? updateDiyTemplate(data)
@@ -91,7 +80,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/point/activity/data.ts b/apps/web-antd/src/views/mall/promotion/point/activity/data.ts
index 63353aa68..e65e58b0b 100644
--- a/apps/web-antd/src/views/mall/promotion/point/activity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/point/activity/data.ts
@@ -2,48 +2,8 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { DICT_TYPE } from '@vben/constants';
-
-/** 表单配置 */
-export function useFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'id',
-      component: 'Input',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    {
-      fieldName: 'spuId',
-      label: '积分商城活动商品',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请选择商品',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'sort',
-      label: '排序',
-      component: 'InputNumber',
-      componentProps: {
-        placeholder: '请输入排序',
-        min: 0,
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'remark',
-      label: '备注',
-      component: 'Textarea',
-      componentProps: {
-        placeholder: '请输入备注',
-        rows: 4,
-      },
-    },
-  ];
-}
+import { getDictOptions } from '@vben/hooks';
+import { fenToYuan } from '@vben/utils';
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -53,15 +13,15 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '活动状态',
       component: 'Select',
       componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
         placeholder: '请选择活动状态',
         allowClear: true,
-        dictType: DICT_TYPE.COMMON_STATUS,
       },
     },
   ];
 }
 
-/** 列表的字段 */
+/** 列表的表格列 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
@@ -75,6 +35,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 80,
       cellRender: {
         name: 'CellImage',
+        props: {
+          height: 40,
+        },
       },
     },
     {
@@ -86,18 +49,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'marketPrice',
       title: '原价',
       minWidth: 100,
-      formatter: 'formatAmount2',
-    },
-    {
-      field: 'point',
-      title: '兑换积分',
-      minWidth: 100,
-    },
-    {
-      field: 'price',
-      title: '兑换金额',
-      minWidth: 100,
-      formatter: 'formatAmount2',
+      formatter: ({ row }) => `￥${fenToYuan(row.marketPrice)}`,
     },
     {
       field: 'status',
@@ -122,7 +74,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'redeemedQuantity',
       title: '已兑换数量',
       minWidth: 100,
-      slots: { default: 'redeemedQuantity' },
+      formatter: ({ row }) => {
+        return (row.totalStock || 0) - (row.stock || 0);
+      },
     },
     {
       field: 'createTime',
@@ -138,3 +92,48 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
   ];
 }
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        placeholder: '请输入排序',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+      },
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'spuId',
+      label: '活动商品',
+      component: 'Input',
+      rules: 'required',
+      formItemClass: 'col-span-2',
+      renderComponentContent: () => ({
+        default: () => null,
+      }),
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mall/promotion/point/activity/index.vue b/apps/web-antd/src/views/mall/promotion/point/activity/index.vue
index a592d589e..d0ce962db 100644
--- a/apps/web-antd/src/views/mall/promotion/point/activity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/activity/index.vue
@@ -1,10 +1,7 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MallPointActivityApi } from '#/api/mall/promotion/point';
 
-import { computed } from 'vue';
-
-import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { Page, useVbenModal } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
@@ -17,51 +14,58 @@ import {
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import PointActivityForm from './modules/form.vue';
+import Form from './modules/form.vue';
 
 defineOptions({ name: 'PromotionPointActivity' });
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: PointActivityForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
-/** 获得商品已兑换数量 */
-const getRedeemedQuantity = computed(
-  () => (row: MallPointActivityApi.PointActivity) =>
-    (row.totalStock || 0) - (row.stock || 0),
-);
-
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
 }
 
-/** 创建积分活动 */
+/** 创建积分商城活动 */
 function handleCreate() {
   formModalApi.setData(null).open();
 }
 
-/** 编辑积分活动 */
-function handleEdit(row: MallPointActivityApi.PointActivity) {
+/** 编辑积分商城活动 */
+function handleEdit(row: any) {
   formModalApi.setData(row).open();
 }
 
-/** 关闭积分活动 */
-function handleClose(row: MallPointActivityApi.PointActivity) {
-  confirm({
-    content: '确认关闭该积分商城活动吗？',
-  }).then(async () => {
+/** 关闭积分商城活动 */
+async function handleClose(row: any) {
+  const hideLoading = message.loading({
+    content: '正在关闭中...',
+    duration: 0,
+  });
+  try {
     await closePointActivity(row.id);
     message.success('关闭成功');
     handleRefresh();
-  });
+  } finally {
+    hideLoading();
+  }
 }
 
-/** 删除积分活动 */
-async function handleDelete(row: MallPointActivityApi.PointActivity) {
-  await deletePointActivity(row.id);
-  handleRefresh();
+/** 删除积分商城活动 */
+async function handleDelete(row: any) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.spuName]),
+    duration: 0,
+  });
+  try {
+    await deletePointActivity(row.id);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.spuName]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -91,21 +95,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<MallPointActivityApi.PointActivity>,
+  } as VxeTableGridOptions,
 });
 </script>
 
 <template>
   <Page auto-content-height>
-    <template #doc>
-      <DocAlert
-        title="【营销】积分商城活动"
-        url="https://doc.iocoder.cn/mall/promotion-point/"
-      />
-    </template>
-
     <FormModal @success="handleRefresh" />
-
     <Grid table-title="积分商城活动列表">
       <template #toolbar-tools>
         <TableAction
@@ -120,9 +116,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
-      <template #redeemedQuantity="{ row }">
-        {{ getRedeemedQuantity(row) }}
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
@@ -137,17 +130,21 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: '关闭',
               type: 'link',
               danger: true,
-              auth: ['promotion:point-activity:close'],
+              icon: ACTION_ICON.CLOSE,
               ifShow: row.status === 0,
-              onClick: handleClose.bind(null, row),
+              auth: ['promotion:point-activity:close'],
+              popConfirm: {
+                title: '确认关闭该积分商城活动吗？',
+                confirm: handleClose.bind(null, row),
+              },
             },
             {
               label: $t('common.delete'),
               type: 'link',
               danger: true,
               icon: ACTION_ICON.DELETE,
-              auth: ['promotion:point-activity:delete'],
               ifShow: row.status !== 0,
+              auth: ['promotion:point-activity:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.spuName]),
                 confirm: handleDelete.bind(null, row),
diff --git a/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue b/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
index f8103ef7a..94ab444c2 100644
--- a/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
@@ -1,19 +1,28 @@
 <script lang="ts" setup>
 import type { MallPointActivityApi } from '#/api/mall/promotion/point';
+import type { RuleConfig } from '#/views/mall/product/spu/form';
+import type { SpuProperty } from '#/views/mall/promotion/components/types';
 
 import { computed, ref } from 'vue';
 
-import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { useVbenModal } from '@vben/common-ui';
+import { convertToInteger, formatToFraction } from '@vben/utils';
 
-import { message } from 'ant-design-vue';
+import { Button, InputNumber, message } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter/form';
+import { VxeColumn } from '#/adapter/vxe-table';
+import { getSpu } from '#/api/mall/product/spu';
 import {
   createPointActivity,
   getPointActivity,
   updatePointActivity,
 } from '#/api/mall/promotion/point';
 import { $t } from '#/locales';
+import { getPropertyList } from '#/views/mall/product/spu/form';
 
+// TODO @puhui999：有问题
+// import { SpuAndSkuList, SpuSkuSelect } from '../../../components';
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
@@ -29,13 +38,106 @@ const [Form, formApi] = useVbenForm({
     componentProps: {
       class: 'w-full',
     },
-    labelWidth: 120,
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
   },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
 });
 
+// ================= 商品选择相关 =================
+
+const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
+const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref
+
+const ruleConfig: RuleConfig[] = [
+  {
+    name: 'productConfig.stock',
+    rule: (arg) => arg >= 1,
+    message: '商品可兑换库存必须大于等于 1 ！！！',
+  },
+  {
+    name: 'productConfig.point',
+    rule: (arg) => arg >= 1,
+    message: '商品所需兑换积分必须大于等于 1 ！！！',
+  },
+  {
+    name: 'productConfig.count',
+    rule: (arg) => arg >= 1,
+    message: '商品可兑换次数必须大于等于 1 ！！！',
+  },
+]; // SKU 规则配置
+
+const spuList = ref<any[]>([]); // 选择的 SPU 列表
+const spuPropertyList = ref<SpuProperty<any>[]>([]); // SPU 属性列表
+
+/** 打开商品选择器 */
+// TODO @puhui999：spuSkuSelectRef.value.open is not a function
+function openSpuSelect() {
+  spuSkuSelectRef.value.open();
+}
+
+/** 选择商品后的回调 */
+async function handleSpuSelected(spuId: number, skuIds?: number[]) {
+  await formApi.setFieldValue('spuId', spuId);
+  await getSpuDetails(spuId, skuIds);
+}
+
+/** 获取 SPU 详情 */
+async function getSpuDetails(
+  spuId: number,
+  skuIds?: number[],
+  products?: MallPointActivityApi.PointProduct[],
+) {
+  const res = await getSpu(spuId);
+  if (!res) {
+    return;
+  }
+
+  spuList.value = [];
+
+  // 筛选指定的 SKU
+  const selectSkus =
+    skuIds === undefined
+      ? res.skus
+      : res.skus?.filter((sku) => skuIds.includes(sku.id!));
+  // 为每个 SKU 配置积分商城相关的配置
+  selectSkus?.forEach((sku: any) => {
+    let config: MallPointActivityApi.PointProduct = {
+      skuId: sku.id!,
+      stock: 0,
+      price: 0,
+      point: 0,
+      count: 0,
+    };
+    // 如果是编辑模式，回填已有配置
+    if (products !== undefined) {
+      const product = products.find((item) => item.skuId === sku.id);
+      if (product) {
+        product.price = formatToFraction(product.price) as unknown as number;
+      }
+      config = product || config;
+    }
+    sku.productConfig = config;
+  });
+  res.skus = selectSkus;
+
+  const spuProperties: SpuProperty[] = [];
+  spuProperties.push({
+    spuId: res.id!,
+    spuDetail: res,
+    propertyList: getPropertyList(res),
+  });
+
+  // TODO @puhui999：貌似直接 = 下面的，不用 push？
+  spuList.value.push(res);
+  // TODO @puhui999：貌似直接 = 下面的，不用 push？
+  spuPropertyList.value = spuProperties;
+}
+
+// ================= end =================
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -43,19 +145,18 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
-    // 提交表单
-    const data =
-      (await formApi.getValues()) as MallPointActivityApi.PointActivity;
-
-    // 确保必要的默认值
-    if (!data.products) {
-      data.products = [];
-    }
-    if (!data.sort) {
-      data.sort = 0;
-    }
-
     try {
+      // 获取积分商城商品配置
+      const products: MallPointActivityApi.PointProduct[] =
+        spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [];
+      // 价格需要转为分
+      products.forEach((item) => {
+        item.price = convertToInteger(item.price);
+      });
+      // 提交表单
+      const data =
+        (await formApi.getValues()) as MallPointActivityApi.PointActivity;
+      data.products = products;
       await (formData.value?.id
         ? updatePointActivity(data)
         : createPointActivity(data));
@@ -70,6 +171,8 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
+      spuList.value = [];
+      spuPropertyList.value = [];
       return;
     }
     // 加载数据
@@ -80,6 +183,11 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     try {
       formData.value = await getPointActivity(data.id);
+      await getSpuDetails(
+        formData.value.spuId,
+        formData.value.products?.map((sku) => sku.skuId),
+        formData.value.products,
+      );
       // 设置到 values
       await formApi.setValues(formData.value);
     } finally {
@@ -90,16 +198,76 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-3/5" :title="getTitle">
-    <div class="p-4">
-      <div class="mb-4 rounded border border-yellow-200 bg-yellow-50 p-4">
-        <p class="text-yellow-800">
-          <strong>注意：</strong>
-          积分活动涉及复杂的商品选择和SKU配置，当前为简化版本。
-          完整的商品选择和积分配置功能需要在后续版本中完善。
-        </p>
-      </div>
-      <Form />
-    </div>
+  <Modal :title="getTitle" class="w-[70%]">
+    <Form class="mx-4">
+      <!-- 商品选择 -->
+      <template #spuId>
+        <div class="w-full">
+          <Button v-if="!formData?.id" type="primary" @click="openSpuSelect">
+            选择商品
+          </Button>
+
+          <!-- SPU 和 SKU 列表展示 -->
+          <SpuAndSkuList
+            v-if="spuList.length > 0"
+            ref="spuAndSkuListRef"
+            :rule-config="ruleConfig"
+            :spu-list="spuList"
+            :spu-property-list="spuPropertyList"
+            class="mt-4"
+          >
+            <!-- 扩展列：积分商城特有配置 -->
+            <template #default>
+              <VxeColumn align="center" min-width="168" title="可兑换库存">
+                <template #default="{ row: sku }">
+                  <InputNumber
+                    v-model:value="sku.productConfig.stock"
+                    :max="sku.stock"
+                    :min="0"
+                    class="w-full"
+                  />
+                </template>
+              </VxeColumn>
+              <VxeColumn align="center" min-width="168" title="可兑换次数">
+                <template #default="{ row: sku }">
+                  <InputNumber
+                    v-model:value="sku.productConfig.count"
+                    :min="0"
+                    class="w-full"
+                  />
+                </template>
+              </VxeColumn>
+              <VxeColumn align="center" min-width="168" title="所需积分">
+                <template #default="{ row: sku }">
+                  <InputNumber
+                    v-model:value="sku.productConfig.point"
+                    :min="0"
+                    class="w-full"
+                  />
+                </template>
+              </VxeColumn>
+              <VxeColumn align="center" min-width="168" title="所需金额(元)">
+                <template #default="{ row: sku }">
+                  <InputNumber
+                    v-model:value="sku.productConfig.price"
+                    :min="0"
+                    :precision="2"
+                    :step="0.1"
+                    class="w-full"
+                  />
+                </template>
+              </VxeColumn>
+            </template>
+          </SpuAndSkuList>
+        </div>
+      </template>
+    </Form>
+
+    <!-- 商品选择器弹窗 -->
+    <SpuSkuSelect
+      ref="spuSkuSelectRef"
+      :is-select-sku="true"
+      @confirm="handleSpuSelected"
+    />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/point/components/index.ts b/apps/web-antd/src/views/mall/promotion/point/components/index.ts
new file mode 100644
index 000000000..6dfdb2999
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/point/components/index.ts
@@ -0,0 +1,2 @@
+export { default as PointShowcase } from './point-showcase.vue';
+export { default as PointTableSelect } from './point-table-select.vue';
diff --git a/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue b/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
new file mode 100644
index 000000000..d32122407
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
@@ -0,0 +1,164 @@
+<!-- 积分活动橱窗组件 - 用于装修时展示和选择积分活动 -->
+<script lang="ts" setup>
+// TODO @puhui999：看看是不是整体优化下代码风格，参考别的模块
+import type { MallPointActivityApi } from '#/api/mall/promotion/point';
+
+import { computed, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Image, Tooltip } from 'ant-design-vue';
+
+import { getPointActivityListByIds } from '#/api/mall/promotion/point';
+
+import PointTableSelect from './point-table-select.vue';
+
+interface PointShowcaseProps {
+  modelValue: number | number[];
+  limit?: number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<PointShowcaseProps>(), {
+  limit: Number.MAX_VALUE,
+  disabled: false,
+});
+
+const emit = defineEmits<{
+  change: [value: any];
+  'update:modelValue': [value: number | number[]];
+}>();
+
+// 积分活动列表
+const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]);
+
+// 计算是否可以添加
+const canAdd = computed(() => {
+  if (props.disabled) return false;
+  if (!props.limit) return true;
+  return pointActivityList.value.length < props.limit;
+});
+
+// 积分活动选择器引用
+const pointActivityTableSelectRef = ref();
+
+/**
+ * 打开积分活动选择器
+ */
+function openPointActivityTableSelect() {
+  pointActivityTableSelectRef.value.open(pointActivityList.value);
+}
+
+/**
+ * 选择活动后触发
+ */
+function handleActivitySelected(
+  activityList:
+    | MallPointActivityApi.PointActivity
+    | MallPointActivityApi.PointActivity[],
+) {
+  pointActivityList.value = Array.isArray(activityList)
+    ? activityList
+    : [activityList];
+  emitActivityChange();
+}
+
+/**
+ * 删除活动
+ */
+function handleRemoveActivity(index: number) {
+  pointActivityList.value.splice(index, 1);
+  emitActivityChange();
+}
+
+/**
+ * 发送变更事件
+ */
+function emitActivityChange() {
+  if (props.limit === 1) {
+    const pointActivity =
+      pointActivityList.value.length > 0 ? pointActivityList.value[0] : null;
+    emit('update:modelValue', pointActivity?.id || 0);
+    emit('change', pointActivity);
+  } else {
+    emit(
+      'update:modelValue',
+      pointActivityList.value.map((pointActivity) => pointActivity.id),
+    );
+    emit('change', pointActivityList.value);
+  }
+}
+
+// 监听 modelValue 变化
+watch(
+  () => props.modelValue,
+  async () => {
+    const ids = Array.isArray(props.modelValue)
+      ? props.modelValue
+      : (props.modelValue
+        ? [props.modelValue]
+        : []);
+
+    // 不需要返显
+    if (ids.length === 0) {
+      pointActivityList.value = [];
+      return;
+    }
+
+    // 只有活动发生变化之后，才会查询活动
+    if (
+      pointActivityList.value.length === 0 ||
+      pointActivityList.value.some(
+        (pointActivity) => !ids.includes(pointActivity.id!),
+      )
+    ) {
+      pointActivityList.value = await getPointActivityListByIds(ids);
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-2">
+    <!-- 活动图片列表 -->
+    <div
+      v-for="(pointActivity, index) in pointActivityList"
+      :key="pointActivity.id"
+      class="relative flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300"
+    >
+      <Tooltip :title="pointActivity.spuName">
+        <div class="relative h-full w-full">
+          <Image
+            :preview="true"
+            :src="pointActivity.picUrl"
+            class="h-full w-full rounded-lg object-cover"
+          />
+          <IconifyIcon
+            v-show="!disabled"
+            icon="ep:circle-close-filled"
+            class="absolute -right-2 -top-2 z-10 h-5 w-5 cursor-pointer text-red-500 hover:text-red-600"
+            @click="handleRemoveActivity(index)"
+          />
+        </div>
+      </Tooltip>
+    </div>
+
+    <!-- 添加按钮 -->
+    <Tooltip v-if="canAdd" title="选择活动">
+      <div
+        class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300 hover:border-blue-400"
+        @click="openPointActivityTableSelect"
+      >
+        <IconifyIcon icon="ep:plus" class="text-lg text-gray-400" />
+      </div>
+    </Tooltip>
+  </div>
+
+  <!-- 积分活动选择对话框 -->
+  <PointTableSelect
+    ref="pointActivityTableSelectRef"
+    :multiple="limit != 1"
+    @change="handleActivitySelected"
+  />
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue b/apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue
new file mode 100644
index 000000000..018fe48d5
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue
@@ -0,0 +1,355 @@
+<!-- 积分活动表格选择器 -->
+<script lang="ts" setup>
+// TODO @puhui999：看看是不是整体优化下代码风格，参考别的模块
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { MallPointActivityApi } from '#/api/mall/promotion/point';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { Checkbox, Radio } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getPointActivityPage } from '#/api/mall/promotion/point';
+
+interface PointTableSelectProps {
+  multiple?: boolean;
+}
+
+const props = withDefaults(defineProps<PointTableSelectProps>(), {
+  multiple: false,
+});
+
+const emit = defineEmits<{
+  change: [
+    value:
+      | MallPointActivityApi.PointActivity
+      | MallPointActivityApi.PointActivity[],
+  ];
+}>();
+
+// 单选：选中的活动 ID
+const selectedActivityId = ref<number>();
+// 多选：选中状态映射
+const checkedStatus = ref<Record<number, boolean>>({});
+// 多选：选中的活动列表
+const checkedActivities = ref<MallPointActivityApi.PointActivity[]>([]);
+
+// 全选状态
+const isCheckAll = ref(false);
+const isIndeterminate = ref(false);
+
+// 搜索表单配置
+const formSchema = computed<VbenFormSchema[]>(() => {
+  return [
+    {
+      fieldName: 'status',
+      label: '活动状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择活动状态',
+        allowClear: true,
+      },
+    },
+  ];
+});
+
+// 列配置
+const gridColumns = computed<VxeGridProps['columns']>(() => {
+  const columns: VxeGridProps['columns'] = [];
+
+  // 多选模式
+  if (props.multiple) {
+    columns.push({
+      field: 'checkbox',
+      title: '',
+      width: 55,
+      align: 'center',
+      slots: { default: 'checkbox-column', header: 'checkbox-header' },
+    });
+  } else {
+    // 单选模式
+    columns.push({
+      field: 'radio',
+      title: '#',
+      width: 55,
+      align: 'center',
+      slots: { default: 'radio-column' },
+    });
+  }
+
+  columns.push(
+    {
+      field: 'id',
+      title: '活动编号',
+      minWidth: 80,
+    },
+    {
+      field: 'picUrl',
+      title: '商品图片',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          height: 40,
+        },
+      },
+    },
+    {
+      field: 'spuName',
+      title: '商品标题',
+      minWidth: 300,
+    },
+    {
+      field: 'marketPrice',
+      title: '原价',
+      minWidth: 100,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'status',
+      title: '活动状态',
+      minWidth: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: {
+          type: DICT_TYPE.COMMON_STATUS,
+        },
+      },
+    },
+    {
+      field: 'stock',
+      title: '库存',
+      minWidth: 80,
+      align: 'center',
+    },
+    {
+      field: 'totalStock',
+      title: '总库存',
+      minWidth: 80,
+      align: 'center',
+    },
+    {
+      field: 'redeemedQuantity',
+      title: '已兑换数量',
+      minWidth: 100,
+      align: 'center',
+      formatter: ({ row }) => (row.totalStock || 0) - (row.stock || 0),
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      align: 'center',
+      formatter: 'formatDateTime',
+    },
+  );
+
+  return columns;
+});
+
+// 初始化表格
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: formSchema.value,
+  },
+  gridOptions: {
+    columns: gridColumns.value,
+    height: 500,
+    border: true,
+    showOverflow: true,
+    proxyConfig: {
+      ajax: {
+        async query({ page }: any, formValues: any) {
+          try {
+            const params: any = {
+              pageNo: page.currentPage,
+              pageSize: page.pageSize,
+            };
+            if (formValues.status !== undefined) {
+              params.status = formValues.status;
+            }
+            const data = await getPointActivityPage(params);
+            const list = data.list || [];
+
+            // 初始化 checkbox 绑定
+            list.forEach(
+              (activityVO) =>
+                (checkedStatus.value[activityVO.id] =
+                  checkedStatus.value[activityVO.id] || false),
+            );
+
+            // 计算全选框状态
+            calculateIsCheckAll(list);
+
+            return {
+              items: list,
+              total: data.total || 0,
+            };
+          } catch (error) {
+            console.error('加载积分活动数据失败:', error);
+            return { items: [], total: 0 };
+          }
+        },
+      },
+    },
+  },
+});
+
+/**
+ * 单选：处理选中
+ */
+function handleSingleSelected(row: MallPointActivityApi.PointActivity) {
+  selectedActivityId.value = row.id;
+  emit('change', row);
+  modalApi.close();
+}
+
+/**
+ * 多选：全选/全不选
+ */
+function handleCheckAll(e: any) {
+  const checked = e.target.checked;
+  isCheckAll.value = checked;
+  isIndeterminate.value = false;
+
+  const list = gridApi.grid.getData();
+  list.forEach((pointActivity) =>
+    handleCheckOne(checked, pointActivity, false),
+  );
+}
+
+/**
+ * 多选：选中一行
+ */
+function handleCheckOne(
+  checked: boolean,
+  pointActivity: MallPointActivityApi.PointActivity,
+  isCalcCheckAll: boolean,
+) {
+  if (checked) {
+    checkedActivities.value.push(pointActivity);
+    checkedStatus.value[pointActivity.id] = true;
+  } else {
+    const index = findCheckedIndex(pointActivity);
+    if (index > -1) {
+      checkedActivities.value.splice(index, 1);
+      checkedStatus.value[pointActivity.id] = false;
+      isCheckAll.value = false;
+    }
+  }
+
+  // 计算全选框状态
+  if (isCalcCheckAll) {
+    const list = gridApi.grid.getData();
+    calculateIsCheckAll(list);
+  }
+}
+
+/**
+ * 查找活动在已选中列表中的索引
+ */
+function findCheckedIndex(activityVO: MallPointActivityApi.PointActivity) {
+  return checkedActivities.value.findIndex((item) => item.id === activityVO.id);
+}
+
+/**
+ * 计算全选框状态
+ */
+function calculateIsCheckAll(list: MallPointActivityApi.PointActivity[]) {
+  isCheckAll.value = list.every(
+    (activityVO) => checkedStatus.value[activityVO.id],
+  );
+  isIndeterminate.value =
+    !isCheckAll.value &&
+    list.some((activityVO) => checkedStatus.value[activityVO.id]);
+}
+
+/**
+ * 多选：确认选择
+ */
+function handleConfirm() {
+  emit('change', [...checkedActivities.value]);
+  modalApi.close();
+}
+
+/**
+ * 打开对话框
+ */
+function open(pointList?: MallPointActivityApi.PointActivity[]) {
+  // 重置
+  checkedActivities.value = [];
+  checkedStatus.value = {};
+  isCheckAll.value = false;
+  isIndeterminate.value = false;
+
+  // 处理已选中
+  if (pointList && pointList.length > 0) {
+    checkedActivities.value = [...pointList];
+    checkedStatus.value = Object.fromEntries(
+      pointList.map((activityVO) => [activityVO.id, true]),
+    );
+  }
+
+  modalApi.open();
+}
+
+// 暴露 open 方法
+defineExpose({ open });
+
+// 初始化弹窗
+const [Modal, modalApi] = useVbenModal({
+  onConfirm: props.multiple ? handleConfirm : undefined,
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      // 关闭时清理状态
+      if (!props.multiple) {
+        selectedActivityId.value = undefined;
+      }
+      return;
+    }
+
+    // 打开时触发查询
+    await gridApi.query();
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[70%]" title="选择活动">
+    <Grid>
+      <!-- 多选：表头 checkbox -->
+      <template v-if="props.multiple" #checkbox-header>
+        <Checkbox
+          v-model:checked="isCheckAll"
+          :indeterminate="isIndeterminate"
+          @change="handleCheckAll"
+        />
+      </template>
+
+      <!-- 多选：行 checkbox -->
+      <template v-if="props.multiple" #checkbox-column="{ row }">
+        <Checkbox
+          v-model:checked="checkedStatus[row.id]"
+          @change="(e: any) => handleCheckOne(e.target.checked, row, true)"
+        />
+      </template>
+
+      <!-- 单选：行 radio -->
+      <template v-if="!props.multiple" #radio-column="{ row }">
+        <Radio
+          :checked="selectedActivityId === row.id"
+          :value="row.id"
+          class="cursor-pointer"
+          @click="handleSingleSelected(row)"
+        />
+      </template>
+    </Grid>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/components/index.ts b/apps/web-antd/src/views/mall/promotion/rewardActivity/components/index.ts
new file mode 100644
index 000000000..93b72c326
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/components/index.ts
@@ -0,0 +1,2 @@
+export { default as RewardRuleCouponSelect } from './reward-rule-coupon-select.vue';
+export { default as RewardRule } from './reward-rule.vue';
diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/components/reward-rule-coupon-select.vue b/apps/web-antd/src/views/mall/promotion/rewardActivity/components/reward-rule-coupon-select.vue
new file mode 100644
index 000000000..e2844fc11
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/components/reward-rule-coupon-select.vue
@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
+
+import { nextTick, onMounted, ref } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+import { Button, Input } from 'ant-design-vue';
+
+// import { CouponSelect } from '@/views/mall/promotion/coupon/components'; // TODO: 根据实际路径调整
+// import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate'; // TODO: API
+// import { discountFormat } from '@/views/mall/promotion/coupon/formatter'; // TODO: 根据实际路径调整
+
+// TODO @puhui999：这里报错了。
+defineOptions({ name: 'RewardRuleCouponSelect' });
+
+const props = defineProps<{
+  modelValue: MallRewardActivityApi.RewardRule;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', v: any): void;
+}>();
+
+const rewardRule = useVModel(props, 'modelValue', emits);
+const list = ref<any[]>([]); // TODO: 改为 GiveCouponVO[] 类型
+
+const CouponTemplateTakeTypeEnum = {
+  ADMIN: { type: 2 },
+};
+
+/** 选择优惠券 */
+// const couponSelectRef = ref<InstanceType<typeof CouponSelect>>();
+function selectCoupon() {
+  // couponSelectRef.value?.open();
+}
+
+/** 选择优惠券后的回调 */
+function handleCouponChange(val: any[]) {
+  for (const item of val) {
+    if (list.value.some((v) => v.id === item.id)) {
+      continue;
+    }
+    list.value.push(item);
+  }
+}
+
+/** 删除优惠券 */
+function deleteCoupon(index: number) {
+  list.value.splice(index, 1);
+}
+
+/** 初始化赠送的优惠券列表 */
+async function initGiveCouponList() {
+  // if (!rewardRule.value || !rewardRule.value.giveCouponTemplateCounts) {
+  //   return;
+  // }
+  // const tempLateIds = Object.keys(rewardRule.value.giveCouponTemplateCounts);
+  // const data = await getCouponTemplateList(tempLateIds);
+  // if (!data) {
+  //   return;
+  // }
+  // data.forEach((coupon) => {
+  //   list.value.push({
+  //     ...coupon,
+  //     giveCount: rewardRule.value.giveCouponTemplateCounts![coupon.id],
+  //   });
+  // });
+}
+
+/** 设置赠送的优惠券 */
+function setGiveCouponList() {
+  if (!rewardRule.value) {
+    return;
+  }
+  rewardRule.value.giveCouponTemplateCounts = {};
+  list.value.forEach((rule) => {
+    rewardRule.value.giveCouponTemplateCounts![rule.id] = rule.giveCount!;
+  });
+}
+
+defineExpose({ setGiveCouponList });
+
+onMounted(async () => {
+  await nextTick();
+  await initGiveCouponList();
+});
+</script>
+
+<template>
+  <div class="w-full">
+    <Button type="link" class="ml-2" @click="selectCoupon">添加优惠劵</Button>
+
+    <div
+      v-for="(item, index) in list"
+      :key="item.id"
+      class="coupon-list-item mb-2 flex justify-between rounded-lg border border-dashed border-gray-300 p-2"
+    >
+      <div class="coupon-list-item-left flex flex-wrap items-center gap-2">
+        <div>优惠券名称：{{ item.name }}</div>
+        <div>
+          范围：
+          <!-- <DictTag :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE" :value="item.productScope" /> -->
+          {{ item.productScope }}
+        </div>
+        <div class="flex items-center">
+          优惠：
+          <!-- <DictTag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="item.discountType" /> -->
+          <!-- {{ discountFormat(item) }} -->
+          {{ item.discountType }}
+        </div>
+      </div>
+      <div class="coupon-list-item-right flex items-center gap-2">
+        <span>送</span>
+        <Input
+          v-model:value="item.giveCount"
+          class="!w-150px"
+          placeholder=""
+          type="number"
+        />
+        <span>张</span>
+        <Button type="link" danger @click="deleteCoupon(index)">删除</Button>
+      </div>
+    </div>
+
+    <!-- 优惠券选择 -->
+    <!-- <CouponSelect
+      ref="couponSelectRef"
+      :take-type="CouponTemplateTakeTypeEnum.ADMIN.type"
+      @change="handleCouponChange"
+    /> -->
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/components/reward-rule.vue b/apps/web-antd/src/views/mall/promotion/rewardActivity/components/reward-rule.vue
new file mode 100644
index 000000000..9a79230ea
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/components/reward-rule.vue
@@ -0,0 +1,185 @@
+<script lang="ts" setup>
+// TODO @puhui999：在优化下代码；
+import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
+
+import { computed, ref } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Button,
+  Col,
+  Form,
+  FormItem,
+  Input,
+  InputNumber,
+  Row,
+  Switch,
+  Tag,
+} from 'ant-design-vue';
+
+import RewardRuleCouponSelect from './reward-rule-coupon-select.vue';
+
+defineOptions({ name: 'RewardRule' });
+
+const props = defineProps<{
+  modelValue: MallRewardActivityApi.RewardActivity;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', v: any): void;
+}>();
+
+const formData = useVModel(props, 'modelValue', emits);
+const rewardRuleCouponSelectRef =
+  ref<InstanceType<typeof RewardRuleCouponSelect>[]>();
+
+const PromotionConditionTypeEnum = {
+  PRICE: { type: 10 },
+  COUNT: { type: 20 },
+};
+
+const isPriceCondition = computed(() => {
+  return (
+    formData.value?.conditionType === PromotionConditionTypeEnum.PRICE.type
+  );
+});
+
+/** 删除优惠规则 */
+function deleteRule(ruleIndex: number) {
+  formData.value.rules.splice(ruleIndex, 1);
+}
+
+/** 添加优惠规则 */
+function addRule() {
+  if (!formData.value.rules) {
+    formData.value.rules = [];
+  }
+  formData.value.rules.push({
+    limit: 0,
+    discountPrice: 0,
+    freeDelivery: false,
+    point: 0,
+  });
+}
+
+/** 设置规则优惠券-提交时 */
+function setRuleCoupon() {
+  if (!rewardRuleCouponSelectRef.value) {
+    return;
+  }
+  rewardRuleCouponSelectRef.value.forEach((item: any) =>
+    item.setGiveCouponList(),
+  );
+}
+
+defineExpose({ setRuleCoupon });
+</script>
+
+<template>
+  <Row>
+    <template v-if="formData.rules">
+      <Col v-for="(rule, index) in formData.rules" :key="index" :span="24">
+        <div class="mb-4">
+          <span class="font-bold">活动层级{{ index + 1 }}</span>
+          <Button
+            v-if="index !== 0"
+            type="link"
+            danger
+            class="ml-2"
+            @click="deleteRule(index)"
+          >
+            删除
+          </Button>
+        </div>
+
+        <Form :model="rule">
+          <FormItem label="优惠门槛:" :label-col="{ span: 4 }">
+            <div class="flex items-center gap-2">
+              <span>满</span>
+              <InputNumber
+                v-if="isPriceCondition"
+                v-model:value="rule.limit"
+                :min="0"
+                :precision="2"
+                :step="0.1"
+                class="!w-150px"
+                placeholder=""
+                controls-position="right"
+              />
+              <Input
+                v-else
+                v-model:value="rule.limit"
+                :min="0"
+                class="!w-150px"
+                placeholder=""
+                type="number"
+              />
+              <span>{{ isPriceCondition ? '元' : '件' }}</span>
+            </div>
+          </FormItem>
+
+          <FormItem label="优惠内容:" :label-col="{ span: 4 }">
+            <div class="flex flex-col gap-4">
+              <!-- 订单金额优惠 -->
+              <div class="flex items-center gap-2">
+                <span>订单金额优惠</span>
+              </div>
+              <div class="ml-4 flex items-center gap-2">
+                <span>减</span>
+                <InputNumber
+                  v-model:value="rule.discountPrice"
+                  :min="0"
+                  :precision="2"
+                  :step="0.1"
+                  class="!w-150px"
+                  controls-position="right"
+                />
+                <span>元</span>
+              </div>
+
+              <!-- 包邮 -->
+              <div class="flex items-center gap-2">
+                <span>包邮：</span>
+                <Switch
+                  v-model:checked="rule.freeDelivery"
+                  checked-children="是"
+                  un-checked-children="否"
+                />
+              </div>
+
+              <!-- 送积分 -->
+              <div class="flex items-center gap-2">
+                <span>送积分：</span>
+                <span>送</span>
+                <Input
+                  v-model:value="rule.point"
+                  class="!w-150px"
+                  placeholder=""
+                  type="number"
+                />
+                <span>积分</span>
+              </div>
+
+              <!-- 送优惠券 -->
+              <div class="flex items-center gap-2">
+                <span>送优惠券：</span>
+                <RewardRuleCouponSelect
+                  ref="rewardRuleCouponSelectRef"
+                  :model-value="rule"
+                />
+              </div>
+            </div>
+          </FormItem>
+        </Form>
+      </Col>
+    </template>
+
+    <Col :span="24" class="mt-4">
+      <Button type="primary" @click="addRule">添加优惠规则</Button>
+    </Col>
+
+    <Col :span="24" class="mt-4">
+      <Tag color="warning">赠送积分为 0 时不赠送。未选优惠券时不赠送。</Tag>
+    </Col>
+  </Row>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts b/apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts
index 435298fcc..238a23961 100644
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts
@@ -3,80 +3,9 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
+import { $t } from '@vben/locales';
 
-/** 表单配置 */
-export function useFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'id',
-      component: 'Input',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    {
-      fieldName: 'name',
-      label: '活动名称',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入活动名称',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'startTime',
-      label: '开始时间',
-      component: 'DatePicker',
-      componentProps: {
-        placeholder: '请选择开始时间',
-        showTime: true,
-        valueFormat: 'x',
-        format: 'YYYY-MM-DD HH:mm:ss',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'endTime',
-      label: '结束时间',
-      component: 'DatePicker',
-      componentProps: {
-        placeholder: '请选择结束时间',
-        showTime: true,
-        valueFormat: 'x',
-        format: 'YYYY-MM-DD HH:mm:ss',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'conditionType',
-      label: '条件类型',
-      component: 'RadioGroup',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.PROMOTION_CONDITION_TYPE, 'number'),
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'productScope',
-      label: '商品范围',
-      component: 'RadioGroup',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.PROMOTION_PRODUCT_SCOPE, 'number'),
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'remark',
-      label: '备注',
-      component: 'Textarea',
-      componentProps: {
-        placeholder: '请输入备注',
-        rows: 4,
-      },
-    },
-  ];
-}
+import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -95,9 +24,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '活动状态',
       component: 'Select',
       componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
         placeholder: '请选择活动状态',
         allowClear: true,
-        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
       },
     },
     {
@@ -105,26 +34,25 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '活动时间',
       component: 'RangePicker',
       componentProps: {
-        placeholder: ['活动开始日期', '活动结束日期'],
+        ...getRangePickerDefaultProps(),
         allowClear: true,
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
       },
     },
   ];
 }
 
-/** 列表的字段 */
+/** 列表的表格列 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'name',
       title: '活动名称',
-      minWidth: 140,
+      minWidth: 200,
     },
     {
       field: 'productScope',
       title: '活动范围',
-      minWidth: 100,
+      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.PROMOTION_PRODUCT_SCOPE },
@@ -159,9 +87,76 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 180,
+      width: 200,
       fixed: 'right',
       slots: { default: 'actions' },
     },
   ];
 }
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '活动名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入活动名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'startAndEndTime',
+      label: '活动时间',
+      component: 'RangePicker',
+      componentProps: {
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        placeholder: [$t('common.startTimeText'), $t('common.endTimeText')],
+      },
+      rules: 'required',
+    },
+    // TODO @puhui999：增加一个 defaultValue
+    {
+      fieldName: 'conditionType',
+      label: '条件类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PROMOTION_CONDITION_TYPE, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      defaultValue: PromotionConditionTypeEnum.PRICE.type,
+      rules: 'required',
+    },
+    {
+      fieldName: 'productScope',
+      label: '活动范围',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PROMOTION_PRODUCT_SCOPE, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue b/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue
index 7641805a4..044ef6df4 100644
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue
@@ -2,7 +2,7 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
 
-import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { Page, useVbenModal } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
@@ -15,12 +15,12 @@ import {
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import RewardActivityForm from './modules/form.vue';
+import Form from './modules/form.vue';
 
 defineOptions({ name: 'PromotionRewardActivity' });
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: RewardActivityForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
@@ -36,45 +36,33 @@ function handleCreate() {
 
 /** 编辑满减送活动 */
 function handleEdit(row: MallRewardActivityApi.RewardActivity) {
-  formModalApi.setData(row).open();
+  formModalApi.setData({ id: row.id }).open();
 }
 
-/** 关闭活动 */
+/** 关闭满减送活动 */
 async function handleClose(row: MallRewardActivityApi.RewardActivity) {
-  try {
-    await confirm({
-      content: '确认关闭该满减送活动吗？',
-    });
-  } catch {
-    return;
-  }
-
   const hideLoading = message.loading({
-    content: '正在关闭中',
+    content: '正在关闭中...',
     duration: 0,
   });
   try {
-    await closeRewardActivity(row.id as number);
-    message.success({
-      content: '关闭成功',
-    });
+    await closeRewardActivity(row.id!);
+    message.success('关闭成功');
     handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
-/** 删除活动 */
+/** 删除满减送活动 */
 async function handleDelete(row: MallRewardActivityApi.RewardActivity) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
   });
   try {
-    await deleteRewardActivity(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteRewardActivity(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -108,61 +96,52 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<MallRewardActivityApi.RewardActivity>,
+  } as VxeTableGridOptions,
 });
 </script>
 
 <template>
   <Page auto-content-height>
-    <template #doc>
-      <DocAlert
-        title="【营销】满减送"
-        url="https://doc.iocoder.cn/mall/promotion-record/"
-      />
-    </template>
-
     <FormModal @success="handleRefresh" />
-
-    <Grid table-title="满减送活动列表">
+    <Grid table-title="满减送活动">
       <template #toolbar-tools>
         <TableAction
           :actions="[
             {
-              label: $t('ui.actionTitle.create', ['满减送活动']),
+              label: $t('ui.actionTitle.create', ['活动']),
               type: 'primary',
               icon: ACTION_ICON.ADD,
-              auth: ['promotion:reward-activity:create'],
               onClick: handleCreate,
             },
           ]"
         />
       </template>
       <template #actions="{ row }">
+        <!-- TODO @AI：table action 的权限标识；参考 /Users/yunai/Java/yudao-ui-admin-vue3/src/views/mall/promotion/rewardActivity/index.vue -->
         <TableAction
           :actions="[
             {
               label: $t('common.edit'),
               type: 'link',
               icon: ACTION_ICON.EDIT,
-              auth: ['promotion:reward-activity:update'],
               onClick: handleEdit.bind(null, row),
             },
             {
               label: '关闭',
               type: 'link',
               danger: true,
-              icon: ACTION_ICON.DELETE,
-              auth: ['promotion:reward-activity:close'],
+              icon: ACTION_ICON.CLOSE,
               ifShow: row.status === 0,
-              onClick: handleClose.bind(null, row),
+              popConfirm: {
+                title: '确认关闭该满减活动吗？',
+                confirm: handleClose.bind(null, row),
+              },
             },
             {
               label: $t('common.delete'),
               type: 'link',
               danger: true,
               icon: ACTION_ICON.DELETE,
-              auth: ['promotion:reward-activity:delete'],
-              ifShow: row.status !== 0,
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),
@@ -174,3 +153,4 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </Grid>
   </Page>
 </template>
+
diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
index cd2dc5e1d..4efc7ff96 100644
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
@@ -1,27 +1,42 @@
 <script lang="ts" setup>
+import type { VbenFormProps } from '#/adapter/form';
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
 
-import { computed, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 
-import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { useVbenModal } from '@vben/common-ui';
+import {
+  PromotionConditionTypeEnum,
+  PromotionProductScopeEnum,
+} from '@vben/constants';
+import { convertToInteger, formatToFraction } from '@vben/utils';
 
-import { message } from 'ant-design-vue';
+import { Alert, FormItem, message } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter/form';
 import {
   createRewardActivity,
   getReward,
   updateRewardActivity,
 } from '#/api/mall/promotion/reward/rewardActivity';
 import { $t } from '#/locales';
+// TODO @puhui999：有问题
+// import { SpuAndSkuList } from '#/views/mall/promotion/components';
 
+import RewardRule from '../components/reward-rule.vue';
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
-const formData = ref<MallRewardActivityApi.RewardActivity>();
+// TODO @puhui999：代码风格，和别的 form 保持一致；
+const formData = ref<MallRewardActivityApi.RewardActivity>({
+  conditionType: PromotionConditionTypeEnum.PRICE.type,
+  productScope: PromotionProductScopeEnum.ALL.scope,
+  rules: [],
+});
 const getTitle = computed(() => {
   return formData.value?.id
-    ? $t('ui.actionTitle.edit', ['满减送活动'])
-    : $t('ui.actionTitle.create', ['满减送活动']);
+    ? $t('ui.actionTitle.edit', ['满减送'])
+    : $t('ui.actionTitle.create', ['满减送']);
 });
 
 const [Form, formApi] = useVbenForm({
@@ -29,14 +44,13 @@ const [Form, formApi] = useVbenForm({
     componentProps: {
       class: 'w-full',
     },
-    labelWidth: 100,
-  },
-  wrapperClass: 'grid-cols-2',
-  layout: 'horizontal',
+  } as VbenFormProps['commonConfig'],
   schema: useFormSchema(),
   showDefaultActions: false,
 });
 
+const rewardRuleRef = ref<InstanceType<typeof RewardRule>>();
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -44,19 +58,30 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
-    // 提交表单
-    const data =
-      (await formApi.getValues()) as MallRewardActivityApi.RewardActivity;
-
-    // 确保必要的默认值
-    if (!data.rules) {
-      data.rules = [];
-    }
-
     try {
+      const data = await formApi.getValues();
+      // 设置活动规则优惠券
+      rewardRuleRef.value?.setRuleCoupon();
+      // 时间段转换
+      if (data.startAndEndTime && Array.isArray(data.startAndEndTime)) {
+        data.startTime = data.startAndEndTime[0];
+        data.endTime = data.startAndEndTime[1];
+        delete data.startAndEndTime;
+      }
+      // 规则元转分
+      data.rules?.forEach((item: any) => {
+        item.discountPrice = convertToInteger(item.discountPrice || 0);
+        if (data.conditionType === PromotionConditionTypeEnum.PRICE.type) {
+          item.limit = convertToInteger(item.limit || 0);
+        }
+      });
+      // 设置商品范围
+      setProductScopeValues(data);
+
+      // 提交表单
       await (formData.value?.id
-        ? updateRewardActivity(data)
-        : createRewardActivity(data));
+        ? updateRewardActivity(<MallRewardActivityApi.RewardActivity>data)
+        : createRewardActivity(<MallRewardActivityApi.RewardActivity>data));
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -67,7 +92,11 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      formData.value = {
+        conditionType: PromotionConditionTypeEnum.PRICE.type,
+        productScope: PromotionProductScopeEnum.ALL.scope,
+        rules: [],
+      };
       return;
     }
     // 加载数据
@@ -77,27 +106,106 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     try {
-      formData.value = await getReward(data.id);
+      const result = await getReward(data.id);
+      // 转区段时间
+      result.startAndEndTime = [result.startTime, result.endTime];
+      // 规则分转元
+      result.rules?.forEach((item: any) => {
+        item.discountPrice = formatToFraction(item.discountPrice || 0);
+        if (result.conditionType === PromotionConditionTypeEnum.PRICE.type) {
+          item.limit = formatToFraction(item.limit || 0);
+        }
+      });
+
+      formData.value = result;
       // 设置到 values
-      await formApi.setValues(formData.value);
+      await formApi.setValues(result);
+
+      // 获得商品范围
+      await getProductScope();
     } finally {
       modalApi.unlock();
     }
   },
 });
+
+/** 获得商品范围 */
+// TODO @puhui999：可以参考下优惠劵模版的做法；可见 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts 的 295 行；
+async function getProductScope() {
+  switch (formData.value.productScope) {
+    case PromotionProductScopeEnum.CATEGORY.scope: {
+      await nextTick();
+      let productCategoryIds = formData.value.productScopeValues as any;
+      if (
+        Array.isArray(productCategoryIds) &&
+        productCategoryIds.length === 1
+      ) {
+        // 单选时使用数组不能反显
+        productCategoryIds = productCategoryIds[0];
+      }
+      // 设置品类编号
+      formData.value.productCategoryIds = productCategoryIds;
+      break;
+    }
+    case PromotionProductScopeEnum.SPU.scope: {
+      // 设置商品编号
+      formData.value.productSpuIds = formData.value.productScopeValues;
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+}
+
+/** 设置商品范围 */
+function setProductScopeValues(data: any) {
+  switch (formData.value.productScope) {
+    case PromotionProductScopeEnum.CATEGORY.scope: {
+      data.productScopeValues = Array.isArray(formData.value.productCategoryIds)
+        ? formData.value.productCategoryIds
+        : [formData.value.productCategoryIds];
+      break;
+    }
+    case PromotionProductScopeEnum.SPU.scope: {
+      data.productScopeValues = formData.value.productSpuIds;
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+}
 </script>
 
 <template>
-  <Modal class="w-4/5" :title="getTitle">
-    <Form />
+  <Modal :title="getTitle" class="!w-[65%]">
+    <!-- TODO @puhui999：貌似可以不要？ -->
+    <Alert
+      description="【营销】满减送"
+      message="提示"
+      show-icon
+      type="info"
+      class="mb-4"
+    />
+    <Form class="mx-4" />
 
-    <!-- 简化说明 -->
-    <div class="mt-4 rounded bg-blue-50 p-4">
-      <p class="text-sm text-blue-600">
-        <strong>说明：</strong> 当前为简化版本的满减送活动表单。
-        复杂的商品选择、优惠规则配置等功能已简化，仅保留基础字段配置。
-        如需完整功能，请参考原始 Element UI 版本的实现。
-      </p>
-    </div>
+    <!-- 优惠设置 -->
+    <FormItem label="优惠设置">
+      <RewardRule ref="rewardRuleRef" v-model="formData" />
+    </FormItem>
+    <!-- 商品范围选择 -->
+    <FormItem
+      v-if="formData.productScope === PromotionProductScopeEnum.SPU.scope"
+      label="选择商品"
+    >
+      <SpuAndSkuList
+        v-model:spu-ids="formData.productSpuIds"
+        :rule-config="[]"
+        :spu-property-list="[]"
+        :deletable="true"
+        :spu-list="[]"
+      />
+    </FormItem>
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/seckill/config/index.vue b/apps/web-antd/src/views/mall/promotion/seckill/config/index.vue
index c598fdcff..932e0235f 100644
--- a/apps/web-antd/src/views/mall/promotion/seckill/config/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/seckill/config/index.vue
@@ -67,14 +67,10 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新状态
-        const res = await updateSeckillConfigStatus(row.id, newStatus);
-        if (res) {
-          // 提示并返回成功
-          message.success(`${text}成功`);
-          resolve(true);
-        } else {
-          reject(new Error('操作失败'));
-        }
+        await updateSeckillConfigStatus(row.id, newStatus);
+        // 提示并返回成功
+        message.success(`${text}成功`);
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-antd/src/views/mall/statistics/member/index.vue b/apps/web-antd/src/views/mall/statistics/member/index.vue
index da8c8b243..8ccd67237 100644
--- a/apps/web-antd/src/views/mall/statistics/member/index.vue
+++ b/apps/web-antd/src/views/mall/statistics/member/index.vue
@@ -8,7 +8,7 @@ import { fenToYuan } from '@vben/utils';
 
 import { Col, Row } from 'ant-design-vue';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberSummary } from '#/api/mall/statistics/member';
 
 import MemberAreaCard from './modules/area-card.vue';
 import MemberFunnelCard from './modules/funnel-card.vue';
@@ -22,15 +22,15 @@ const loading = ref(true); // 加载中
 const summary = ref<MallMemberStatisticsApi.Summary>(); // 会员统计数据
 
 /** 查询会员统计 */
-async function getMemberSummary() {
-  summary.value = await MemberStatisticsApi.getMemberSummary();
+async function loadMemberSummary() {
+  summary.value = await getMemberSummary();
 }
 
 /** 初始化 */
 onMounted(async () => {
   loading.value = true;
   try {
-    await getMemberSummary();
+    await loadMemberSummary();
   } finally {
     loading.value = false;
   }
diff --git a/apps/web-antd/src/views/mall/statistics/member/modules/area-card.vue b/apps/web-antd/src/views/mall/statistics/member/modules/area-card.vue
index 9f2440ff4..dc7c67e1a 100644
--- a/apps/web-antd/src/views/mall/statistics/member/modules/area-card.vue
+++ b/apps/web-antd/src/views/mall/statistics/member/modules/area-card.vue
@@ -10,7 +10,7 @@ import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 import { Card, Spin } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberAreaStatisticsList } from '#/api/mall/statistics/member';
 
 import { getAreaChartOptions, getAreaTableColumns } from './area-chart-options';
 
@@ -44,10 +44,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 按照省份，查询会员统计列表 */
-async function getMemberAreaStatisticsList() {
+async function loadMemberAreaStatisticsList() {
   loading.value = true;
   try {
-    const list = await MemberStatisticsApi.getMemberAreaStatisticsList();
+    const list = await getMemberAreaStatisticsList();
     areaStatisticsList.value = list.map(
       (item: MallMemberStatisticsApi.AreaStatistics) => ({
         ...item,
@@ -80,7 +80,7 @@ function areaReplace(areaName: string): string {
 
 /** 初始化 */
 onMounted(() => {
-  getMemberAreaStatisticsList();
+  loadMemberAreaStatisticsList();
 });
 </script>
 
diff --git a/apps/web-antd/src/views/mall/statistics/member/modules/funnel-card.vue b/apps/web-antd/src/views/mall/statistics/member/modules/funnel-card.vue
index 72437d9fe..fc1a7a4a0 100644
--- a/apps/web-antd/src/views/mall/statistics/member/modules/funnel-card.vue
+++ b/apps/web-antd/src/views/mall/statistics/member/modules/funnel-card.vue
@@ -7,7 +7,7 @@ import { fenToYuan } from '@vben/utils';
 
 import { Card } from 'ant-design-vue';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberAnalyse } from '#/api/mall/statistics/member';
 import { ShortcutDateRangePicker } from '#/components/shortcut-date-range-picker';
 
 /** 会员概览卡片 */
@@ -23,7 +23,7 @@ async function loadData(times: [Dayjs, Dayjs]) {
   }
   loading.value = true;
   try {
-    analyseData.value = await MemberStatisticsApi.getMemberAnalyse({
+    analyseData.value = await getMemberAnalyse({
       times,
     });
   } finally {
diff --git a/apps/web-antd/src/views/mall/statistics/member/modules/sex-card.vue b/apps/web-antd/src/views/mall/statistics/member/modules/sex-card.vue
index 2938b8eb3..567ecc424 100644
--- a/apps/web-antd/src/views/mall/statistics/member/modules/sex-card.vue
+++ b/apps/web-antd/src/views/mall/statistics/member/modules/sex-card.vue
@@ -11,7 +11,7 @@ import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 import { Card, Spin } from 'ant-design-vue';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberSexStatisticsList } from '#/api/mall/statistics/member';
 
 import { getSexChartOptions } from './sex-chart-options';
 
@@ -23,10 +23,10 @@ const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
 
 /** 按照性别，查询会员统计列表 */
-async function getMemberSexStatisticsList() {
+async function loadMemberSexStatisticsList() {
   loading.value = true;
   try {
-    const list = await MemberStatisticsApi.getMemberSexStatisticsList();
+    const list = await getMemberSexStatisticsList();
     const dictDataList = getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number');
     dictDataList.push({ label: '未知', value: null } as any);
     const chartData = dictDataList.map((dictData: any) => {
@@ -49,7 +49,7 @@ async function getMemberSexStatisticsList() {
 
 /** 初始化 */
 onMounted(() => {
-  getMemberSexStatisticsList();
+  loadMemberSexStatisticsList();
 });
 </script>
 
diff --git a/apps/web-antd/src/views/mall/statistics/member/modules/terminal-card.vue b/apps/web-antd/src/views/mall/statistics/member/modules/terminal-card.vue
index fc5075504..bb3103704 100644
--- a/apps/web-antd/src/views/mall/statistics/member/modules/terminal-card.vue
+++ b/apps/web-antd/src/views/mall/statistics/member/modules/terminal-card.vue
@@ -8,7 +8,7 @@ import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 import { Card, Spin } from 'ant-design-vue';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberTerminalStatisticsList } from '#/api/mall/statistics/member';
 
 import { getTerminalChartOptions } from './terminal-chart-options';
 
@@ -20,10 +20,10 @@ const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
 
 /** 按照终端，查询会员统计列表 */
-const getMemberTerminalStatisticsList = async () => {
+const loadMemberTerminalStatisticsList = async () => {
   loading.value = true;
   try {
-    const list = await MemberStatisticsApi.getMemberTerminalStatisticsList();
+    const list = await getMemberTerminalStatisticsList();
     const dictDataList = getDictOptions('terminal', 'number');
     const chartData = dictDataList.map((dictData: any) => {
       const userCount = list.find(
@@ -43,7 +43,7 @@ const getMemberTerminalStatisticsList = async () => {
 
 /** 初始化 */
 onMounted(() => {
-  getMemberTerminalStatisticsList();
+  loadMemberTerminalStatisticsList();
 });
 </script>
 
diff --git a/apps/web-antd/src/views/mall/statistics/product/modules/rank-card.vue b/apps/web-antd/src/views/mall/statistics/product/modules/rank-card.vue
index a2f9fdea5..ea58c3986 100644
--- a/apps/web-antd/src/views/mall/statistics/product/modules/rank-card.vue
+++ b/apps/web-antd/src/views/mall/statistics/product/modules/rank-card.vue
@@ -11,7 +11,7 @@ import { formatDateTime } from '@vben/utils';
 import { Card } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as ProductStatisticsApi from '#/api/mall/statistics/product';
+import { getProductStatisticsRankPage } from '#/api/mall/statistics/product';
 import ShortcutDateRangePicker from '#/components/shortcut-date-range-picker/shortcut-date-range-picker.vue';
 
 /** 商品排行 */
@@ -104,7 +104,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page, sorts }) => {
-          return await ProductStatisticsApi.getProductStatisticsRankPage({
+          return await getProductStatisticsRankPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
diff --git a/apps/web-antd/src/views/mall/statistics/product/modules/summary-card.vue b/apps/web-antd/src/views/mall/statistics/product/modules/summary-card.vue
index e05144d48..9f2fde400 100644
--- a/apps/web-antd/src/views/mall/statistics/product/modules/summary-card.vue
+++ b/apps/web-antd/src/views/mall/statistics/product/modules/summary-card.vue
@@ -21,8 +21,13 @@ import {
 import { Button, Card, Col, Row, Spin } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
-import * as ProductStatisticsApi from '#/api/mall/statistics/product';
+import {
+  exportProductStatisticsExcel,
+  getProductStatisticsAnalyse,
+  getProductStatisticsList,
+} from '#/api/mall/statistics/product';
 import ShortcutDateRangePicker from '#/components/shortcut-date-range-picker/shortcut-date-range-picker.vue';
+import { $t } from '#/locales';
 
 import { getProductSummaryChartOptions } from './summary-chart-options';
 
@@ -51,7 +56,7 @@ const calculateRelativeRate = (value?: number, reference?: number): string => {
 /** 处理日期范围变化 */
 const handleDateRangeChange = (times?: [Dayjs, Dayjs]) => {
   if (times?.length !== 2) {
-    getProductTrendData();
+    loadProductTrendData();
     return;
   }
   // 处理时间: 开始与截止在同一天的, 折线图出不来, 需要延长一天
@@ -65,29 +70,29 @@ const handleDateRangeChange = (times?: [Dayjs, Dayjs]) => {
   ];
 
   // 查询数据
-  getProductTrendData();
+  loadProductTrendData();
 };
 
 /** 处理商品状况查询 */
-const getProductTrendData = async () => {
+const loadProductTrendData = async () => {
   trendLoading.value = true;
   try {
-    await Promise.all([getProductTrendSummary(), getProductStatisticsList()]);
+    await Promise.all([loadProductTrendSummary(), loadProductStatisticsList()]);
   } finally {
     trendLoading.value = false;
   }
 };
 
 /** 查询商品状况数据统计 */
-async function getProductTrendSummary() {
-  trendSummary.value = await ProductStatisticsApi.getProductStatisticsAnalyse({
+async function loadProductTrendSummary() {
+  trendSummary.value = await getProductStatisticsAnalyse({
     times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
   });
 }
 
 /** 查询商品状况数据列表 */
-async function getProductStatisticsList() {
-  const list = await ProductStatisticsApi.getProductStatisticsList({
+async function loadProductStatisticsList() {
+  const list = await getProductStatisticsList({
     times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
   });
 
@@ -104,13 +109,11 @@ async function handleExport() {
     });
     // 发起导出
     exportLoading.value = true;
-    const data = await ProductStatisticsApi.exportProductStatisticsExcel({
+    const data = await exportProductStatisticsExcel({
       times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
     });
     // 处理下载
     downloadFileFromBlobPart({ fileName: '商品状况.xlsx', source: data });
-  } catch {
-    // 用户取消导出
   } finally {
     exportLoading.value = false;
   }
@@ -127,7 +130,7 @@ async function handleExport() {
             <template #icon>
               <IconifyIcon icon="lucide:download" />
             </template>
-            导出
+            {{ $t('page.action.export') }}
           </Button>
         </ShortcutDateRangePicker>
       </div>
@@ -221,7 +224,6 @@ async function handleExport() {
           "
         />
       </Col>
-
       <Col :xl="8" :md="8" :sm="24" class="mb-4">
         <SummaryCard
           title="退款金额"
diff --git a/apps/web-antd/src/views/mall/statistics/trade/index.vue b/apps/web-antd/src/views/mall/statistics/trade/index.vue
index d2261fe71..6e87786f9 100644
--- a/apps/web-antd/src/views/mall/statistics/trade/index.vue
+++ b/apps/web-antd/src/views/mall/statistics/trade/index.vue
@@ -4,15 +4,14 @@ import type { MallTradeStatisticsApi } from '#/api/mall/statistics/trade';
 
 import { onMounted, ref } from 'vue';
 
-import { DocAlert, Page } from '@vben/common-ui';
+import { DocAlert, Page, StatisticCard } from '@vben/common-ui';
 import { fenToYuan } from '@vben/utils';
 
 import { Col, Row } from 'ant-design-vue';
 
-import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import { getTradeStatisticsSummary } from '#/api/mall/statistics/trade';
 
-import TradeStatisticCard from './modules/trade-statistic-card.vue';
-import TradeTrendCard from './modules/trade-trend-card.vue';
+import TradeTrendCard from './modules/trend-card.vue';
 
 /** 交易统计 */
 defineOptions({ name: 'TradeStatistics' });
@@ -22,22 +21,24 @@ const summary =
   ref<DataComparisonRespVO<MallTradeStatisticsApi.TradeSummary>>(); // 交易统计数据
 
 /** 计算环比百分比 */
-const calculateRelativeRate = (value?: number, reference?: number): string => {
+function calculateRelativeRate(value?: number, reference?: number): string {
   const refValue = Number(reference || 0);
   const curValue = Number(value || 0);
-  if (!refValue || refValue === 0) return '0.00';
+  if (!refValue || refValue === 0) {
+    return '0.00';
+  }
   return (((curValue - refValue) / refValue) * 100).toFixed(2);
-};
+}
 
 /** 查询交易统计 */
-const getTradeStatisticsSummary = async () => {
-  summary.value = await TradeStatisticsApi.getTradeStatisticsSummary();
-};
+async function loadTradeStatisticsSummary() {
+  summary.value = await getTradeStatisticsSummary();
+}
 
 /** 初始化 */
 onMounted(async () => {
   loading.value = true;
-  await getTradeStatisticsSummary();
+  await loadTradeStatisticsSummary();
   loading.value = false;
 });
 </script>
@@ -51,11 +52,11 @@ onMounted(async () => {
       />
     </template>
 
+    <!-- 交易概览卡片 -->
     <div class="flex flex-col gap-4">
-      <!-- 交易概览卡片 -->
       <Row :gutter="16">
         <Col :sm="6" :xs="12">
-          <TradeStatisticCard
+          <StatisticCard
             tooltip="昨日订单数量"
             title="昨日订单数量"
             :value="summary?.value?.yesterdayOrderCount || 0"
@@ -68,7 +69,7 @@ onMounted(async () => {
           />
         </Col>
         <Col :sm="6" :xs="12">
-          <TradeStatisticCard
+          <StatisticCard
             tooltip="本月订单数量"
             title="本月订单数量"
             :value="summary?.value?.monthOrderCount || 0"
@@ -81,7 +82,7 @@ onMounted(async () => {
           />
         </Col>
         <Col :sm="6" :xs="12">
-          <TradeStatisticCard
+          <StatisticCard
             tooltip="昨日支付金额"
             title="昨日支付金额"
             prefix="￥"
@@ -96,7 +97,7 @@ onMounted(async () => {
           />
         </Col>
         <Col :sm="6" :xs="12">
-          <TradeStatisticCard
+          <StatisticCard
             tooltip="本月支付金额"
             title="本月支付金额"
             prefix="￥"
diff --git a/apps/web-antd/src/views/mall/statistics/trade/modules/trade-statistic-card.vue b/apps/web-antd/src/views/mall/statistics/trade/modules/trade-statistic-card.vue
deleted file mode 100644
index af775ac9c..000000000
--- a/apps/web-antd/src/views/mall/statistics/trade/modules/trade-statistic-card.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-
-import { VbenCountToAnimator } from '@vben/common-ui';
-import { IconifyIcon } from '@vben/icons';
-
-import { Card, Tooltip } from 'ant-design-vue';
-
-/** 交易统计值组件 */
-defineOptions({ name: 'TradeStatisticCard' });
-
-const props = withDefaults(defineProps<Props>(), {
-  tooltip: '',
-  title: '',
-  prefix: '',
-  value: 0,
-  decimals: 0,
-  percent: 0,
-});
-
-interface Props {
-  tooltip?: string;
-  title?: string;
-  prefix?: string;
-  value?: number | string;
-  decimals?: number;
-  percent?: number | string;
-}
-
-/** 计算环比百分比 */
-const percentValue = computed(() => {
-  return Number(props.percent);
-});
-
-/** 格式化数值 */
-const formattedValue = computed(() => {
-  return Number(props.value);
-});
-</script>
-
-<template>
-  <Card :bordered="false" class="h-full">
-    <div class="flex flex-col gap-2 p-2">
-      <div class="flex items-center justify-between text-gray-500">
-        <span class="text-sm">{{ title }}</span>
-        <Tooltip v-if="tooltip" :title="tooltip" placement="top">
-          <IconifyIcon
-            icon="lucide:circle-alert"
-            class="size-4 cursor-help text-gray-400 hover:text-gray-600"
-          />
-        </Tooltip>
-      </div>
-      <div class="mb-4 text-3xl font-medium">
-        <VbenCountToAnimator
-          :prefix="prefix"
-          :end-val="formattedValue"
-          :decimals="decimals"
-        />
-      </div>
-      <div class="flex flex-row gap-1 text-sm">
-        <span class="text-gray-500">环比</span>
-        <span
-          :class="percentValue > 0 ? 'text-red-500' : 'text-green-500'"
-          class="flex items-center gap-0.5"
-        >
-          {{ Math.abs(percentValue).toFixed(2) }}%
-          <IconifyIcon
-            :icon="
-              percentValue > 0 ? 'lucide:trending-up' : 'lucide:trending-down'
-            "
-            class="size-3"
-          />
-        </span>
-      </div>
-    </div>
-  </Card>
-</template>
diff --git a/apps/web-antd/src/views/mall/statistics/trade/modules/trade-trend-card.vue b/apps/web-antd/src/views/mall/statistics/trade/modules/trend-card.vue
similarity index 67%
rename from apps/web-antd/src/views/mall/statistics/trade/modules/trade-trend-card.vue
rename to apps/web-antd/src/views/mall/statistics/trade/modules/trend-card.vue
index 113ceabfc..1dd4fc24b 100644
--- a/apps/web-antd/src/views/mall/statistics/trade/modules/trade-trend-card.vue
+++ b/apps/web-antd/src/views/mall/statistics/trade/modules/trend-card.vue
@@ -6,20 +6,30 @@ import type { EchartsUIType } from '@vben/plugins/echarts';
 import type { DataComparisonRespVO } from '#/api/mall/statistics/common';
 import type { MallTradeStatisticsApi } from '#/api/mall/statistics/trade';
 
-import { onMounted, ref } from 'vue';
+import { ref } from 'vue';
 
-import { SummaryCard } from '@vben/common-ui';
+import { confirm, SummaryCard } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
-import { fenToYuan } from '@vben/utils';
+import {
+  downloadFileFromBlobPart,
+  fenToYuan,
+  formatDateTime,
+  isSameDay,
+} from '@vben/utils';
 
-import { Button, Card, Col, message, Row, Skeleton } from 'ant-design-vue';
+import { Button, Card, Col, Row, Spin } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
-import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import {
+  exportTradeStatisticsExcel,
+  getTradeStatisticsAnalyse,
+  getTradeStatisticsList,
+} from '#/api/mall/statistics/trade';
 import ShortcutDateRangePicker from '#/components/shortcut-date-range-picker/shortcut-date-range-picker.vue';
+import { $t } from '#/locales';
 
-import { getTradeTrendChartOptions } from './trade-trend-chart-options';
+import { getTradeTrendChartOptions } from './trend-chart-options';
 
 /** 交易趋势 */
 defineOptions({ name: 'TradeTrendCard' });
@@ -28,7 +38,7 @@ const trendLoading = ref(true); // 交易状态加载中
 const exportLoading = ref(false); // 导出的加载中
 const trendSummary =
   ref<DataComparisonRespVO<MallTradeStatisticsApi.TradeTrendSummary>>(); // 交易状况统计数据
-const shortcutDateRangePicker = ref();
+const searchTimes = ref<string[]>([]);
 
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
@@ -37,112 +47,80 @@ const { renderEcharts } = useEcharts(chartRef);
 const calculateRelativeRate = (value?: number, reference?: number): string => {
   const refValue = Number(reference || 0);
   const curValue = Number(value || 0);
-  if (!refValue || refValue === 0) return '0.00';
+  if (!refValue || refValue === 0) {
+    return '0.00';
+  }
   return (((curValue - refValue) / refValue) * 100).toFixed(2);
 };
 
+/** 处理日期范围变化 */
+const handleDateRangeChange = (times?: [Dayjs, Dayjs]) => {
+  if (times?.length !== 2) {
+    loadTradeTrendData();
+    return;
+  }
+  // 处理时间: 开始与截止在同一天的, 折线图出不来, 需要延长一天
+  let adjustedTimes = times;
+  if (isSameDay(times[0], times[1])) {
+    adjustedTimes = [dayjs(times[0]).subtract(1, 'd'), times[1]];
+  }
+  searchTimes.value = [
+    formatDateTime(adjustedTimes[0]) as string,
+    formatDateTime(adjustedTimes[1]) as string,
+  ];
+
+  // 查询数据
+  loadTradeTrendData();
+};
+
 /** 处理交易状况查询 */
-const getTradeTrendData = async (times?: [Dayjs, Dayjs]) => {
+async function loadTradeTrendData() {
   trendLoading.value = true;
   try {
-    let queryTimes = times;
-    if (!queryTimes && shortcutDateRangePicker.value?.times) {
-      queryTimes = shortcutDateRangePicker.value.times;
-    }
-
-    // 1. 处理时间: 开始与截止在同一天的, 折线图出不来, 需要延长一天
-    if (queryTimes && isSameDay(queryTimes[0], queryTimes[1])) {
-      // 前天
-      queryTimes[0] = dayjs(queryTimes[0]).subtract(1, 'd');
-    }
-
-    // 查询数据
     await Promise.all([
-      getTradeStatisticsAnalyse(queryTimes),
-      getTradeStatisticsList(queryTimes),
+      loadTradeStatisticsAnalyse(),
+      loadTradeStatisticsList(),
     ]);
   } finally {
     trendLoading.value = false;
   }
-};
-
-/** 判断是否同一天 */
-const isSameDay = (date1: Dayjs, date2: Dayjs): boolean => {
-  return date1.format('YYYY-MM-DD') === date2.format('YYYY-MM-DD');
-};
+}
 
 /** 查询交易状况数据统计 */
-const getTradeStatisticsAnalyse = async (times?: [Dayjs, Dayjs]) => {
-  const queryTimes = times
-    ? { times: [times[0].toDate(), times[1].toDate()] }
-    : undefined;
-  trendSummary.value = await TradeStatisticsApi.getTradeStatisticsAnalyse(
-    queryTimes as any,
-  );
-};
+async function loadTradeStatisticsAnalyse() {
+  trendSummary.value = await getTradeStatisticsAnalyse({
+    times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
+  });
+}
 
 /** 查询交易状况数据列表 */
-const getTradeStatisticsList = async (times?: [Dayjs, Dayjs]) => {
-  // 查询数据
-  const queryTimes = times
-    ? { times: [times[0].toDate(), times[1].toDate()] }
-    : undefined;
-  const list: MallTradeStatisticsApi.TradeTrendSummary[] =
-    await TradeStatisticsApi.getTradeStatisticsList(queryTimes as any);
+async function loadTradeStatisticsList() {
+  const list = await getTradeStatisticsList({
+    times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
+  });
 
-  // 处理数据
-  const processedList = list.map((item) => ({
-    ...item,
-    turnoverPrice: Number(fenToYuan(item.turnoverPrice)),
-    orderPayPrice: Number(fenToYuan(item.orderPayPrice)),
-    rechargePrice: Number(fenToYuan(item.rechargePrice)),
-    expensePrice: Number(fenToYuan(item.expensePrice)),
-  }));
-
-  // 更新 Echarts 数据
-  await renderEcharts(getTradeTrendChartOptions(processedList));
-};
+  // 渲染图表
+  await renderEcharts(getTradeTrendChartOptions(list));
+}
 
 /** 导出按钮操作 */
-const handleExport = async () => {
+async function handleExport() {
   try {
     // 导出的二次确认
-    await message.confirm({
+    await confirm({
       content: '确认导出交易状况数据吗？',
-      okText: '确定',
-      cancelText: '取消',
     });
     // 发起导出
     exportLoading.value = true;
-    const times = shortcutDateRangePicker.value?.times;
-    const queryTimes = times
-      ? { times: [times[0].toDate(), times[1].toDate()] }
-      : undefined;
-    const data = await TradeStatisticsApi.exportTradeStatisticsExcel(
-      queryTimes as any,
-    );
-
-    // 处理下载
-    const blob = new Blob([data], {
-      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    const data = await exportTradeStatisticsExcel({
+      times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
     });
-    const url = window.URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = '交易状况.xlsx';
-    link.click();
-    window.URL.revokeObjectURL(url);
-  } catch {
-    // 用户取消导出
+    // 处理下载
+    downloadFileFromBlobPart({ fileName: '交易状况.xlsx', source: data });
   } finally {
     exportLoading.value = false;
   }
-};
-
-/** 初始化 */
-onMounted(async () => {
-  await getTradeTrendData();
-});
+}
 </script>
 
 <template>
@@ -150,15 +128,12 @@ onMounted(async () => {
     <template #extra>
       <!-- 查询条件 -->
       <div class="flex items-center gap-2">
-        <ShortcutDateRangePicker
-          ref="shortcutDateRangePicker"
-          @change="getTradeTrendData"
-        >
+        <ShortcutDateRangePicker @change="handleDateRangeChange">
           <Button class="ml-4" @click="handleExport" :loading="exportLoading">
             <template #icon>
               <IconifyIcon icon="lucide:download" />
             </template>
-            导出
+            {{ $t('page.action.export') }}
           </Button>
         </ShortcutDateRangePicker>
       </div>
@@ -222,7 +197,6 @@ onMounted(async () => {
           "
         />
       </Col>
-
       <Col :md="6" :sm="12" :xs="24" class="mb-4">
         <SummaryCard
           title="支出金额"
@@ -241,7 +215,6 @@ onMounted(async () => {
           "
         />
       </Col>
-
       <Col :md="6" :sm="12" :xs="24" class="mb-4">
         <SummaryCard
           title="余额支付金额"
@@ -260,7 +233,6 @@ onMounted(async () => {
           "
         />
       </Col>
-
       <Col :md="6" :sm="12" :xs="24" class="mb-4">
         <SummaryCard
           title="支付佣金金额"
@@ -307,8 +279,8 @@ onMounted(async () => {
     </Row>
 
     <!-- 折线图 -->
-    <Skeleton :loading="trendLoading" :active="true">
-      <EchartsUI ref="chartRef" class="h-[500px]" />
-    </Skeleton>
+    <Spin :spinning="trendLoading">
+      <EchartsUI ref="chartRef" />
+    </Spin>
   </Card>
 </template>
diff --git a/apps/web-antd/src/views/mall/statistics/trade/modules/trade-trend-chart-options.ts b/apps/web-antd/src/views/mall/statistics/trade/modules/trend-chart-options.ts
similarity index 82%
rename from apps/web-antd/src/views/mall/statistics/trade/modules/trade-trend-chart-options.ts
rename to apps/web-antd/src/views/mall/statistics/trade/modules/trend-chart-options.ts
index a9af51446..5c85460fb 100644
--- a/apps/web-antd/src/views/mall/statistics/trade/modules/trade-trend-chart-options.ts
+++ b/apps/web-antd/src/views/mall/statistics/trade/modules/trend-chart-options.ts
@@ -1,21 +1,30 @@
-import type { EChartsOption } from 'echarts';
-
 import type { MallTradeStatisticsApi } from '#/api/mall/statistics/trade';
 
+import { fenToYuan } from '@vben/utils';
+
 /** 交易趋势折线图配置 */
 export function getTradeTrendChartOptions(
   data: MallTradeStatisticsApi.TradeTrendSummary[],
-): EChartsOption {
+): any {
+  // 处理数据：将分转换为元
+  const processedData = data.map((item) => ({
+    ...item,
+    turnoverPrice: Number(fenToYuan(item.turnoverPrice)),
+    orderPayPrice: Number(fenToYuan(item.orderPayPrice)),
+    rechargePrice: Number(fenToYuan(item.rechargePrice)),
+    expensePrice: Number(fenToYuan(item.expensePrice)),
+  }));
+
   return {
     dataset: {
       dimensions: [
-        'time',
+        'date',
         'turnoverPrice',
         'orderPayPrice',
         'rechargePrice',
         'expensePrice',
       ],
-      source: data,
+      source: processedData,
     },
     grid: {
       left: 20,
@@ -94,11 +103,15 @@ export function getTradeTrendChartOptions(
     },
     yAxis: {
       type: 'value',
+      axisLine: {
+        show: false,
+      },
       axisTick: {
         show: false,
       },
       axisLabel: {
         formatter: '￥{value}',
+        color: '#7F8B9C',
       },
       splitLine: {
         show: true,
diff --git a/apps/web-antd/src/views/mall/trade/afterSale/data.ts b/apps/web-antd/src/views/mall/trade/afterSale/data.ts
index fb0126017..150a9fff9 100644
--- a/apps/web-antd/src/views/mall/trade/afterSale/data.ts
+++ b/apps/web-antd/src/views/mall/trade/afterSale/data.ts
@@ -146,7 +146,7 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
       width: 100,
       align: 'center',
       cellRender: {
-        name: 'CellDictTag',
+        name: 'CellDict',
         props: {
           dictType: DICT_TYPE.TRADE_AFTER_SALE_STATUS,
         },
@@ -158,7 +158,7 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
       width: 100,
       align: 'center',
       cellRender: {
-        name: 'CellDictTag',
+        name: 'CellDict',
         props: {
           dictType: DICT_TYPE.TRADE_AFTER_SALE_WAY,
         },
diff --git a/apps/web-antd/src/views/mall/trade/afterSale/detail/data.ts b/apps/web-antd/src/views/mall/trade/afterSale/detail/data.ts
index b43034af6..66fed1092 100644
--- a/apps/web-antd/src/views/mall/trade/afterSale/detail/data.ts
+++ b/apps/web-antd/src/views/mall/trade/afterSale/detail/data.ts
@@ -1,4 +1,3 @@
-import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -20,19 +19,19 @@ export function useOrderInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'order.deliveryType',
       label: '配送方式',
-      content: (data: MallAfterSaleApi.AfterSale) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_DELIVERY_TYPE,
-          value: data?.order?.deliveryType,
+          value: val,
         }),
     },
     {
       field: 'order.type',
       label: '订单类型',
-      content: (data: MallAfterSaleApi.AfterSale) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_ORDER_TYPE,
-          value: data?.order?.type,
+          value: val,
         }),
     },
     {
@@ -46,10 +45,10 @@ export function useOrderInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'order.terminal',
       label: '订单来源',
-      content: (data: MallAfterSaleApi.AfterSale) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TERMINAL,
-          value: data?.order?.terminal,
+          value: val,
         }),
     },
     {
@@ -67,10 +66,10 @@ export function useOrderInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'order.payChannelCode',
       label: '付款方式',
-      content: (data: MallAfterSaleApi.AfterSale) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_CHANNEL_CODE,
-          value: data?.order?.payChannelCode,
+          value: val,
         }),
     },
     {
@@ -90,32 +89,30 @@ export function useAfterSaleInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'auditTime',
       label: '申请时间',
-      content: (data: MallAfterSaleApi.AfterSale) =>
-        formatDate(data?.auditTime) as string,
+      render: (val) => formatDate(val) as string,
     },
     {
       field: 'type',
       label: '售后类型',
-      content: (data: MallAfterSaleApi.AfterSale) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_AFTER_SALE_TYPE,
-          value: data?.type,
+          value: val,
         }),
     },
     {
       field: 'way',
       label: '售后方式',
-      content: (data: MallAfterSaleApi.AfterSale) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_AFTER_SALE_WAY,
-          value: data?.way,
+          value: val,
         }),
     },
     {
       field: 'refundPrice',
       label: '退款金额',
-      content: (data: MallAfterSaleApi.AfterSale) =>
-        fenToYuan(data?.refundPrice ?? 0),
+      render: (val) => fenToYuan(val ?? 0),
     },
     {
       field: 'applyReason',
@@ -128,8 +125,8 @@ export function useAfterSaleInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'applyPicUrls',
       label: '凭证图片',
-      content: (data) => {
-        const images = data?.applyPicUrls || [];
+      render: (val) => {
+        const images = val || [];
         return h(
           'div',
           { class: 'flex gap-10px' },
@@ -153,16 +150,16 @@ export function useRefundStatusSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '退款状态',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_AFTER_SALE_STATUS,
-          value: data?.status,
+          value: val,
         }),
     },
     {
       field: 'reminder',
       label: '提醒',
-      content: () =>
+      render: () =>
         h('div', { class: 'text-red-500 mb-10px' }, [
           h('div', '如果未发货，请点击同意退款给买家。'),
           h('div', '如果实际已发货，请主动与买家联系。'),
diff --git a/apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue b/apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue
index 64da0f235..c2a1fd9ac 100644
--- a/apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue
+++ b/apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue
@@ -49,29 +49,23 @@ const afterSale = ref<MallAfterSaleApi.AfterSale>({
 });
 
 const [OrderDescriptions] = useDescription({
-  componentProps: {
-    title: '订单信息',
-    bordered: false,
-    column: 3,
-  },
+  title: '订单信息',
+  bordered: false,
+  column: 3,
   schema: useOrderInfoSchema(),
 });
 
 const [AfterSaleDescriptions] = useDescription({
-  componentProps: {
-    title: '售后信息',
-    bordered: false,
-    column: 3,
-  },
+  title: '售后信息',
+  bordered: false,
+  column: 3,
   schema: useAfterSaleInfoSchema(),
 });
 
 const [RefundStatusDescriptions] = useDescription({
-  componentProps: {
-    title: '退款状态',
-    bordered: false,
-    column: 1,
-  },
+  title: '退款状态',
+  bordered: false,
+  column: 1,
   schema: useRefundStatusSchema(),
 });
 
@@ -206,7 +200,7 @@ async function handleRefund() {
 /** 返回列表页 */
 function handleBack() {
   tabs.closeCurrentTab();
-  router.push('/mall/trade/afterSale');
+  router.push({ name: 'TradeAfterSale' });
 }
 
 /** 初始化 */
diff --git a/apps/web-antd/src/views/mall/trade/afterSale/index.vue b/apps/web-antd/src/views/mall/trade/afterSale/index.vue
index e0e63eb76..c071fc038 100644
--- a/apps/web-antd/src/views/mall/trade/afterSale/index.vue
+++ b/apps/web-antd/src/views/mall/trade/afterSale/index.vue
@@ -98,10 +98,10 @@ onMounted(() => {
     </template>
 
     <Grid>
-      <template #top>
+      <template #toolbar-actions>
         <Tabs
           v-model:active-key="statusTab"
-          class="-mt-11"
+          class="w-full"
           @change="handleChangeStatus"
         >
           <Tabs.TabPane
@@ -154,8 +154,3 @@ onMounted(() => {
     </Grid>
   </Page>
 </template>
-<style scoped>
-:deep(.vxe-toolbar div) {
-  z-index: 1;
-}
-</style>
diff --git a/apps/web-antd/src/views/mall/trade/afterSale/modules/disagree-form.vue b/apps/web-antd/src/views/mall/trade/afterSale/modules/disagree-form.vue
index 3fa89a4d1..434d31ec4 100644
--- a/apps/web-antd/src/views/mall/trade/afterSale/modules/disagree-form.vue
+++ b/apps/web-antd/src/views/mall/trade/afterSale/modules/disagree-form.vue
@@ -9,7 +9,7 @@ import { $t } from '@vben/locales';
 import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import * as AfterSaleApi from '#/api/mall/trade/afterSale/index';
+import { disagreeAfterSale } from '#/api/mall/trade/afterSale';
 
 import { useDisagreeFormSchema } from '../data';
 
@@ -40,7 +40,7 @@ const [Modal, modalApi] = useVbenModal({
     try {
       const data =
         (await formApi.getValues()) as MallAfterSaleApi.DisagreeRequest;
-      await AfterSaleApi.disagreeAfterSale(data);
+      await disagreeAfterSale(data);
       // 关闭并提示
       await modalApi.close();
       emit('success');
diff --git a/apps/web-antd/src/views/mall/trade/brokerage/user/data.ts b/apps/web-antd/src/views/mall/trade/brokerage/user/data.ts
index bf7a66a72..58ff07082 100644
--- a/apps/web-antd/src/views/mall/trade/brokerage/user/data.ts
+++ b/apps/web-antd/src/views/mall/trade/brokerage/user/data.ts
@@ -23,7 +23,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'brokerageEnabled',
       label: '推广资格',
-      component: 'Select',
+      component: 'RadioGroup',
       componentProps: {
         placeholder: '请选择推广资格',
         allowClear: true,
diff --git a/apps/web-antd/src/views/mall/trade/brokerage/user/index.vue b/apps/web-antd/src/views/mall/trade/brokerage/user/index.vue
index b0e4217ed..eb263d892 100644
--- a/apps/web-antd/src/views/mall/trade/brokerage/user/index.vue
+++ b/apps/web-antd/src/views/mall/trade/brokerage/user/index.vue
@@ -94,18 +94,14 @@ async function handleBrokerageEnabledChange(
     })
       .then(async () => {
         // 更新推广资格
-        const res = await updateBrokerageEnabled({
+        await updateBrokerageEnabled({
           id: row.id!,
           enabled: newEnabled,
         });
-        if (res) {
-          // 提示并返回成功
-          message.success($t('ui.actionMessage.operationSuccess'));
-          handleRefresh();
-          resolve(true);
-        } else {
-          reject(new Error('更新失败'));
-        }
+        // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
+        handleRefresh();
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-antd/src/views/mall/trade/delivery/pickUpOrder/index.vue b/apps/web-antd/src/views/mall/trade/delivery/pickUpOrder/index.vue
index e4c399ebe..ff67f58c3 100644
--- a/apps/web-antd/src/views/mall/trade/delivery/pickUpOrder/index.vue
+++ b/apps/web-antd/src/views/mall/trade/delivery/pickUpOrder/index.vue
@@ -4,7 +4,7 @@ import type { MallOrderApi } from '#/api/mall/trade/order';
 
 import { h, ref } from 'vue';
 
-import { Page, prompt } from '@vben/common-ui';
+import { Page, prompt, SummaryCard } from '@vben/common-ui';
 import { DeliveryTypeEnum } from '@vben/constants';
 import { $t } from '@vben/locales';
 import { fenToYuan } from '@vben/utils';
@@ -17,7 +17,6 @@ import {
   getOrderSummary,
   pickUpOrderByVerifyCode,
 } from '#/api/mall/trade/order';
-import { SummaryCard } from '#/components/summary-card';
 
 import { useGridColumns, useGridFormSchema } from './data';
 
diff --git a/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/data.ts b/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/data.ts
index 11721f910..666db4f8f 100644
--- a/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/data.ts
+++ b/apps/web-antd/src/views/mall/trade/delivery/pickUpStore/data.ts
@@ -65,7 +65,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiTreeSelect',
       rules: 'required',
       componentProps: {
-        api: () => getAreaTree(),
+        api: getAreaTree,
         fieldNames: { label: 'name', value: 'id', children: 'children' },
         placeholder: '请选择省市区',
       },
@@ -146,7 +146,7 @@ export function useBindFormSchema(): VbenFormSchema[] {
       label: '门店店员',
       rules: 'required',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         mode: 'tags',
diff --git a/apps/web-antd/src/views/mall/trade/order/data.ts b/apps/web-antd/src/views/mall/trade/order/data.ts
index fce6ac5cc..775e76a51 100644
--- a/apps/web-antd/src/views/mall/trade/order/data.ts
+++ b/apps/web-antd/src/views/mall/trade/order/data.ts
@@ -74,7 +74,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '快递公司',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleDeliveryExpressList(),
+        api: getSimpleDeliveryExpressList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择快递公司',
@@ -90,7 +90,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '自提门店',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleDeliveryPickUpStoreList(),
+        api: getSimpleDeliveryPickUpStoreList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择自提门店',
@@ -369,7 +369,7 @@ export function useAddressFormSchema(): VbenFormSchema[] {
       label: '所在地',
       component: 'ApiTreeSelect',
       componentProps: {
-        api: () => getAreaTree(),
+        api: getAreaTree,
         labelField: 'name',
         valueField: 'id',
         childrenField: 'children',
@@ -422,7 +422,7 @@ export function useDeliveryFormSchema(): VbenFormSchema[] {
       label: '物流公司',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleDeliveryExpressList(),
+        api: getSimpleDeliveryExpressList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择物流公司',
diff --git a/apps/web-antd/src/views/mall/trade/order/detail/data.ts b/apps/web-antd/src/views/mall/trade/order/detail/data.ts
index 74dfbcfda..febf4ed5e 100644
--- a/apps/web-antd/src/views/mall/trade/order/detail/data.ts
+++ b/apps/web-antd/src/views/mall/trade/order/detail/data.ts
@@ -1,5 +1,4 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MallOrderApi } from '#/api/mall/trade/order';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -23,19 +22,19 @@ export function useOrderInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'type',
       label: '订单类型',
-      content: (data: MallOrderApi.Order) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_ORDER_TYPE,
-          value: data?.type,
+          value: val,
         }),
     },
     {
       field: 'terminal',
       label: '订单来源',
-      content: (data: MallOrderApi.Order) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TERMINAL,
-          value: data?.terminal,
+          value: val,
         }),
     },
     {
@@ -53,10 +52,10 @@ export function useOrderInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'payChannelCode',
       label: '付款方式',
-      content: (data: MallOrderApi.Order) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_CHANNEL_CODE,
-          value: data?.payChannelCode,
+          value: val,
         }),
     },
     {
@@ -72,16 +71,16 @@ export function useOrderStatusSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '订单状态',
-      content: (data: MallOrderApi.Order) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_ORDER_STATUS,
-          value: data?.status,
+          value: val,
         }),
     },
     {
       field: 'reminder',
       label: '提醒',
-      content: () =>
+      render: () =>
         h('div', { class: 'space-y-1' }, [
           h('div', '买家付款成功后，货款将直接进入您的商户号（微信、支付宝）'),
           h('div', '请及时关注你发出的包裹状态，确保可以配送至买家手中'),
@@ -100,66 +99,46 @@ export function useOrderPriceSchema(): DescriptionItemSchema[] {
     {
       field: 'totalPrice',
       label: '商品总额',
-      content: (data: MallOrderApi.Order) =>
-        `${fenToYuan(data?.totalPrice ?? 0)} 元`,
+      render: (val) => `${fenToYuan(val ?? 0)} 元`,
     },
     {
       field: 'deliveryPrice',
       label: '运费金额',
-      content: (data: MallOrderApi.Order) =>
-        `${fenToYuan(data?.deliveryPrice ?? 0)} 元`,
+      render: (val) => `${fenToYuan(val ?? 0)} 元`,
     },
     {
       field: 'adjustPrice',
       label: '订单调价',
-      content: (data: MallOrderApi.Order) =>
-        `${fenToYuan(data?.adjustPrice ?? 0)} 元`,
+      render: (val) => `${fenToYuan(val ?? 0)} 元`,
     },
     {
       field: 'couponPrice',
       label: '优惠劵优惠',
-      content: (data: MallOrderApi.Order) =>
-        h(
-          'span',
-          { class: 'text-red-500' },
-          `${fenToYuan(data?.couponPrice ?? 0)} 元`,
-        ),
+      render: (val) =>
+        h('span', { class: 'text-red-500' }, `${fenToYuan(val ?? 0)} 元`),
     },
     {
       field: 'vipPrice',
       label: 'VIP 优惠',
-      content: (data: MallOrderApi.Order) =>
-        h(
-          'span',
-          { class: 'text-red-500' },
-          `${fenToYuan(data?.vipPrice ?? 0)} 元`,
-        ),
+      render: (val) =>
+        h('span', { class: 'text-red-500' }, `${fenToYuan(val ?? 0)} 元`),
     },
     {
       field: 'discountPrice',
       label: '活动优惠',
-      content: (data: MallOrderApi.Order) =>
-        h(
-          'span',
-          { class: 'text-red-500' },
-          `${fenToYuan(data?.discountPrice ?? 0)} 元`,
-        ),
+      render: (val) =>
+        h('span', { class: 'text-red-500' }, `${fenToYuan(val ?? 0)} 元`),
     },
     {
       field: 'pointPrice',
       label: '积分抵扣',
-      content: (data: MallOrderApi.Order) =>
-        h(
-          'span',
-          { class: 'text-red-500' },
-          `${fenToYuan(data?.pointPrice ?? 0)} 元`,
-        ),
+      render: (val) =>
+        h('span', { class: 'text-red-500' }, `${fenToYuan(val ?? 0)} 元`),
     },
     {
       field: 'payPrice',
       label: '应付金额',
-      content: (data: MallOrderApi.Order) =>
-        `${fenToYuan(data?.payPrice ?? 0)} 元`,
+      render: (val) => `${fenToYuan(val ?? 0)} 元`,
     },
   ];
 }
@@ -170,10 +149,10 @@ export function useDeliveryInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'deliveryType',
       label: '配送方式',
-      content: (data: MallOrderApi.Order) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_DELIVERY_TYPE,
-          value: data?.deliveryType,
+          value: val,
         }),
     },
     {
@@ -187,14 +166,12 @@ export function useDeliveryInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'receiverAddress',
       label: '收货地址',
-      content: (data: MallOrderApi.Order) =>
-        `${data?.receiverAreaName} ${data?.receiverDetailAddress}`.trim(),
+      render: (val, data) => `${data?.receiverAreaName} ${val}`.trim(),
     },
     {
       field: 'deliveryTime',
       label: '发货时间',
-      content: (data: MallOrderApi.Order) =>
-        formatDateTime(data?.deliveryTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/mall/trade/order/detail/index.vue b/apps/web-antd/src/views/mall/trade/order/detail/index.vue
index d94b89777..89a2a1bfa 100644
--- a/apps/web-antd/src/views/mall/trade/order/detail/index.vue
+++ b/apps/web-antd/src/views/mall/trade/order/detail/index.vue
@@ -18,9 +18,13 @@ import { useTabs } from '@vben/hooks';
 import { Card, message, Tag } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as DeliveryExpressApi from '#/api/mall/trade/delivery/express';
-import * as DeliveryPickUpStoreApi from '#/api/mall/trade/delivery/pickUpStore';
-import * as TradeOrderApi from '#/api/mall/trade/order';
+import { getSimpleDeliveryExpressList } from '#/api/mall/trade/delivery/express';
+import { getDeliveryPickUpStore } from '#/api/mall/trade/delivery/pickUpStore';
+import {
+  getExpressTrackList,
+  getOrder,
+  pickUpOrder,
+} from '#/api/mall/trade/order';
 import { useDescription } from '#/components/description';
 import { DictTag } from '#/components/dict-tag';
 import { TableAction } from '#/components/table-action';
@@ -57,38 +61,30 @@ const expressTrackList = ref<any[]>([]);
 const pickUpStore = ref<MallDeliveryPickUpStoreApi.PickUpStore | undefined>();
 
 const [OrderInfoDescriptions] = useDescription({
-  componentProps: {
-    title: '订单信息',
-    bordered: false,
-    column: 3,
-  },
+  title: '订单信息',
+  bordered: false,
+  column: 3,
   schema: useOrderInfoSchema(),
 });
 
 const [OrderStatusDescriptions] = useDescription({
-  componentProps: {
-    title: '订单状态',
-    bordered: false,
-    column: 1,
-  },
+  title: '订单状态',
+  bordered: false,
+  column: 1,
   schema: useOrderStatusSchema(),
 });
 
 const [OrderPriceDescriptions] = useDescription({
-  componentProps: {
-    title: '费用信息',
-    bordered: false,
-    column: 4,
-  },
+  title: '费用信息',
+  bordered: false,
+  column: 4,
   schema: useOrderPriceSchema(),
 });
 
 const [DeliveryInfoDescriptions] = useDescription({
-  componentProps: {
-    title: '收货信息',
-    bordered: false,
-    column: 3,
-  },
+  title: '收货信息',
+  bordered: false,
+  column: 3,
   schema: useDeliveryInfoSchema(),
 });
 
@@ -165,7 +161,7 @@ const [PriceFormModal, priceFormModalApi] = useVbenModal({
 async function getDetail() {
   loading.value = true;
   try {
-    const res = await TradeOrderApi.getOrder(orderId.value);
+    const res = await getOrder(orderId.value);
     if (res === null) {
       message.error('交易订单不存在');
       handleBack();
@@ -177,12 +173,9 @@ async function getDetail() {
 
     // 如果配送方式为快递，则查询物流公司
     if (res.deliveryType === DeliveryTypeEnum.EXPRESS.type) {
-      deliveryExpressList.value =
-        await DeliveryExpressApi.getSimpleDeliveryExpressList();
+      deliveryExpressList.value = await getSimpleDeliveryExpressList();
       if (res.logisticsId) {
-        expressTrackList.value = await TradeOrderApi.getExpressTrackList(
-          res.id!,
-        );
+        expressTrackList.value = await getExpressTrackList(res.id!);
         expressTrackGridApi.setGridOptions({
           data: expressTrackList.value || [],
         });
@@ -191,9 +184,7 @@ async function getDetail() {
       res.deliveryType === DeliveryTypeEnum.PICK_UP.type &&
       res.pickUpStoreId
     ) {
-      pickUpStore.value = await DeliveryPickUpStoreApi.getDeliveryPickUpStore(
-        res.pickUpStoreId,
-      );
+      pickUpStore.value = await getDeliveryPickUpStore(res.pickUpStoreId);
     }
   } finally {
     loading.value = false;
@@ -225,7 +216,7 @@ const handlePickUp = async () => {
     duration: 0,
   });
   try {
-    await TradeOrderApi.pickUpOrder(order.value.id!);
+    await pickUpOrder(order.value.id!);
     message.success('核销成功');
     await getDetail();
   } finally {
@@ -236,7 +227,7 @@ const handlePickUp = async () => {
 /** 返回列表页 */
 function handleBack() {
   tabs.closeCurrentTab();
-  router.push('/mall/trade/order');
+  router.push({ name: 'TradeOrder' });
 }
 
 /** 初始化 */
diff --git a/apps/web-antd/src/views/member/user/data.ts b/apps/web-antd/src/views/member/user/data.ts
index b473bf6a0..6849775ec 100644
--- a/apps/web-antd/src/views/member/user/data.ts
+++ b/apps/web-antd/src/views/member/user/data.ts
@@ -90,7 +90,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '所在地',
       component: 'ApiTreeSelect',
       componentProps: {
-        api: () => getAreaTree(),
+        api: getAreaTree,
         fieldNames: { label: 'name', value: 'id', children: 'children' },
         placeholder: '请选择所在地',
       },
@@ -100,7 +100,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '用户标签',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleTagList(),
+        api: getSimpleTagList,
         labelField: 'name',
         valueField: 'id',
         mode: 'multiple',
@@ -112,7 +112,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '用户分组',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleGroupList(),
+        api: getSimpleGroupList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择用户分组',
@@ -173,7 +173,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '用户标签',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleTagList(),
+        api: getSimpleTagList,
         labelField: 'name',
         valueField: 'id',
         mode: 'multiple',
@@ -186,7 +186,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '用户等级',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleLevelList(),
+        api: getSimpleLevelList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择用户等级',
@@ -198,7 +198,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '用户分组',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleGroupList(),
+        api: getSimpleGroupList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择用户分组',
@@ -327,7 +327,7 @@ export function useLevelFormSchema(): VbenFormSchema[] {
       label: '用户等级',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleLevelList(),
+        api: getSimpleLevelList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择用户等级',
diff --git a/apps/web-antd/src/views/member/user/detail/modules/account-info.vue b/apps/web-antd/src/views/member/user/detail/modules/account-info.vue
index 9007df933..d148e5158 100644
--- a/apps/web-antd/src/views/member/user/detail/modules/account-info.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/account-info.vue
@@ -24,37 +24,37 @@ const [Descriptions] = useDescription({
     {
       field: 'levelName',
       label: '等级',
-      content: (data) => data.levelName || '-',
+      render: (val) => val || '-',
     },
     {
       field: 'experience',
       label: '成长值',
-      content: (data) => data.experience || 0,
+      render: (val) => val || 0,
     },
     {
       field: 'point',
       label: '当前积分',
-      content: (data) => data.point || 0,
+      render: (val) => val || 0,
     },
     {
       field: 'totalPoint',
       label: '总积分',
-      content: (data) => data.totalPoint || 0,
+      render: (val) => val || 0,
     },
     {
       field: 'balance',
       label: '当前余额',
-      content: (data) => fenToYuan(data.balance || 0),
+      render: (val) => fenToYuan(val || 0),
     },
     {
       field: 'totalExpense',
       label: '支出金额',
-      content: (data) => fenToYuan(data.totalExpense || 0),
+      render: (val) => fenToYuan(val || 0),
     },
     {
       field: 'totalRecharge',
       label: '充值金额',
-      content: (data) => fenToYuan(data.totalRecharge || 0),
+      render: (val) => fenToYuan(val || 0),
     },
   ],
 });
diff --git a/apps/web-antd/src/views/mp/account/data.ts b/apps/web-antd/src/views/mp/account/data.ts
index 8eca221a0..eb57a796a 100644
--- a/apps/web-antd/src/views/mp/account/data.ts
+++ b/apps/web-antd/src/views/mp/account/data.ts
@@ -38,7 +38,7 @@ export function useFormSchema(): VbenFormSchema[] {
       help: '在微信公众平台（mp.weixin.qq.com）的菜单 [设置与开发 - 公众号设置 - 基本设置] 中能找到「开发者ID(AppID)」',
       rules: 'required',
       componentProps: {
-        placeholder: '请输入appId',
+        placeholder: '请输入公众号 appId',
       },
     },
     {
@@ -48,7 +48,7 @@ export function useFormSchema(): VbenFormSchema[] {
       help: '在微信公众平台（mp.weixin.qq.com）的菜单 [设置与开发 - 公众号设置 - 基本设置] 中能找到「开发者密码(AppSecret)」',
       rules: 'required',
       componentProps: {
-        placeholder: '请输入appSecret',
+        placeholder: '请输入公众号 appSecret',
       },
     },
     {
@@ -57,7 +57,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Input',
       rules: 'required',
       componentProps: {
-        placeholder: '请输入token',
+        placeholder: '请输入公众号 token',
       },
     },
     {
@@ -65,7 +65,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '消息加解密密钥',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入aesKey',
+        placeholder: '请输入消息加解密密钥',
       },
     },
     {
@@ -88,6 +88,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入名称',
+        allowClear: true,
       },
     },
   ];
@@ -99,18 +100,22 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
     {
       title: '名称',
       field: 'name',
+      minWidth: 150,
     },
     {
       title: '微信号',
       field: 'account',
+      minWidth: 180,
     },
     {
       title: 'appId',
       field: 'appId',
+      minWidth: 180,
     },
     {
       title: '服务器地址(URL)',
       field: 'utl',
+      minWidth: 360,
       slots: {
         default: ({ row }) => {
           return `http://服务端地址/admin-api/mp/open/${row.appId}`;
@@ -120,17 +125,17 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
     {
       title: '二维码',
       field: 'qrCodeUrl',
-      slots: {
-        default: 'qrCodeUrl',
-      },
+      minWidth: 120,
+      cellRender: { name: 'CellImage' },
     },
     {
       title: '备注',
       field: 'remark',
+      minWidth: 150,
     },
     {
       title: '操作',
-      width: 260,
+      width: 200,
       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 4f1ca82ac..cd3434189 100644
--- a/apps/web-antd/src/views/mp/account/index.vue
+++ b/apps/web-antd/src/views/mp/account/index.vue
@@ -45,10 +45,8 @@ async function handleDelete(row: MpAccountApi.Account) {
     duration: 0,
   });
   try {
-    await deleteAccount(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteAccount(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -58,14 +56,12 @@ async function handleDelete(row: MpAccountApi.Account) {
 /** 生成二维码 */
 async function handleGenerateQrCode(row: MpAccountApi.Account) {
   const hideLoading = message.loading({
-    content: '生成二维码',
+    content: '正在生成二维码中...',
     duration: 0,
   });
   try {
-    await generateAccountQrCode(row.id as number);
-    message.success({
-      content: '生成二维码成功',
-    });
+    await generateAccountQrCode(row.id!);
+    message.success($t('ui.actionMessage.operationSuccess'));
     handleRefresh();
   } finally {
     hideLoading();
@@ -75,14 +71,12 @@ async function handleGenerateQrCode(row: MpAccountApi.Account) {
 /** 清空 API 配额 */
 async function handleCleanQuota(row: MpAccountApi.Account) {
   const hideLoading = message.loading({
-    content: '正在清空 API 配额',
+    content: $t('ui.actionMessage.processing', ['清空 API 配额']),
     duration: 0,
   });
   try {
-    await clearAccountQuota(row.id as number);
-    message.success({
-      content: '清空 API 配额成功',
-    });
+    await clearAccountQuota(row.id!);
+    message.success($t('ui.actionMessage.operationSuccess'));
   } finally {
     hideLoading();
   }
@@ -109,6 +103,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -135,22 +130,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </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="[
@@ -172,14 +151,23 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 confirm: handleDelete.bind(null, row),
               },
             },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '生成二维码',
+              type: 'link',
+              icon: 'qrcode',
+              auth: ['mp:account:qr-code'],
+              onClick: handleGenerateQrCode.bind(null, row),
+            },
             {
               label: '清空 API 配额',
               type: 'link',
               danger: true,
-              icon: ACTION_ICON.DELETE,
+              icon: 'clear',
               auth: ['mp:account:clear-quota'],
               popConfirm: {
-                title: '清空 API 配额',
+                title: '你确认要清空 API 配额？',
                 confirm: handleCleanQuota.bind(null, row),
               },
             },
diff --git a/apps/web-antd/src/views/mp/account/modules/form.vue b/apps/web-antd/src/views/mp/account/modules/form.vue
index 9423073a2..cb2b79ed3 100644
--- a/apps/web-antd/src/views/mp/account/modules/form.vue
+++ b/apps/web-antd/src/views/mp/account/modules/form.vue
@@ -76,7 +76,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/mp/statistics/chart-options.ts b/apps/web-antd/src/views/mp/statistics/chart-options.ts
new file mode 100644
index 000000000..b9d321dd3
--- /dev/null
+++ b/apps/web-antd/src/views/mp/statistics/chart-options.ts
@@ -0,0 +1,163 @@
+import type { MpStatisticsApi } from '#/api/mp/statistics';
+
+/** 用户增减数据图表配置项 */
+export function userSummaryOption(
+  data: MpStatisticsApi.UserSummary[],
+  dates: string[],
+): any {
+  return {
+    color: ['#67C23A', '#E5323E'],
+    legend: {
+      data: ['新增用户', '取消关注的用户'],
+    },
+    tooltip: {},
+    xAxis: {
+      data: dates,
+    },
+    yAxis: {
+      minInterval: 1,
+    },
+    series: [
+      {
+        name: '新增用户',
+        type: 'bar',
+        label: {
+          show: true,
+        },
+        barGap: 0,
+        data: data.map((item) => item.newUser), // 新增用户的数据
+      },
+      {
+        name: '取消关注的用户',
+        type: 'bar',
+        label: {
+          show: true,
+        },
+        data: data.map((item) => item.cancelUser), // 取消关注的用户的数据
+      },
+    ],
+  };
+}
+
+/** 累计用户数据图表配置项 */
+export function userCumulateOption(
+  data: MpStatisticsApi.UserCumulate[],
+  dates: string[],
+): any {
+  return {
+    legend: {
+      data: ['累计用户量'],
+    },
+    xAxis: {
+      type: 'category',
+      data: dates,
+    },
+    yAxis: {
+      minInterval: 1,
+    },
+    series: [
+      {
+        name: '累计用户量',
+        data: data.map((item) => item.cumulateUser), // 累计用户量的数据
+        type: 'line',
+        smooth: true,
+        label: {
+          show: true,
+        },
+      },
+    ],
+  };
+}
+
+/** 消息发送概况数据图表配置项 */
+export function upstreamMessageOption(
+  data: MpStatisticsApi.UpstreamMessage[],
+  dates: string[],
+): any {
+  return {
+    color: ['#67C23A', '#E5323E'],
+    legend: {
+      data: ['用户发送人数', '用户发送条数'],
+    },
+    tooltip: {},
+    xAxis: {
+      data: dates, // X 轴的日期范围
+    },
+    yAxis: {
+      minInterval: 1,
+    },
+    series: [
+      {
+        name: '用户发送人数',
+        type: 'line',
+        smooth: true,
+        label: {
+          show: true,
+        },
+        data: data.map((item) => item.msgUser), // 用户发送人数的数据
+      },
+      {
+        name: '用户发送条数',
+        type: 'line',
+        smooth: true,
+        label: {
+          show: true,
+        },
+        data: data.map((item) => item.msgCount), // 用户发送条数的数据
+      },
+    ],
+  };
+}
+
+/** 接口分析况数据图表配置项 */
+export function interfaceSummaryOption(
+  data: MpStatisticsApi.InterfaceSummary[],
+  dates: string[],
+): any {
+  return {
+    color: ['#67C23A', '#E5323E', '#E6A23C', '#409EFF'],
+    legend: {
+      data: ['被动回复用户消息的次数', '失败次数', '最大耗时', '总耗时'],
+    },
+    tooltip: {},
+    xAxis: {
+      data: dates, // X 轴的日期范围
+    },
+    yAxis: {},
+    series: [
+      {
+        name: '被动回复用户消息的次数',
+        type: 'bar',
+        label: {
+          show: true,
+        },
+        barGap: 0,
+        data: data.map((item) => item.callbackCount), // 被动回复用户消息的次数的数据
+      },
+      {
+        name: '失败次数',
+        type: 'bar',
+        label: {
+          show: true,
+        },
+        data: data.map((item) => item.failCount), // 失败次数的数据
+      },
+      {
+        name: '最大耗时',
+        type: 'bar',
+        label: {
+          show: true,
+        },
+        data: data.map((item) => item.maxTimeCost), // 最大耗时的数据
+      },
+      {
+        name: '总耗时',
+        type: 'bar',
+        label: {
+          show: true,
+        },
+        data: data.map((item) => item.totalTimeCost), // 总耗时的数据
+      },
+    ],
+  };
+}
diff --git a/apps/web-antd/src/views/mp/statistics/data.ts b/apps/web-antd/src/views/mp/statistics/data.ts
new file mode 100644
index 000000000..2572aed30
--- /dev/null
+++ b/apps/web-antd/src/views/mp/statistics/data.ts
@@ -0,0 +1,42 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { MpAccountApi } from '#/api/mp/account';
+
+import { beginOfDay, endOfDay, formatDateTime } from '@vben/utils';
+
+import { getSimpleAccountList } from '#/api/mp/account';
+
+/** 关联数据 */
+let accountList: MpAccountApi.AccountSimple[] = [];
+getSimpleAccountList().then((data) => (accountList = data));
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: 'ApiSelect',
+      componentProps: {
+        options: accountList.map((item) => ({
+          label: item.name,
+          value: item.id,
+        })),
+        placeholder: '请选择公众号',
+      },
+      defaultValue: accountList[0]?.id,
+    },
+    {
+      fieldName: 'dateRange',
+      label: '时间范围',
+      component: 'RangePicker',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      },
+      defaultValue: [
+        formatDateTime(beginOfDay(new Date(Date.now() - 3600 * 1000 * 24 * 7))),
+        formatDateTime(endOfDay(new Date(Date.now() - 3600 * 1000 * 24))),
+      ] as [Date, Date],
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mp/statistics/index.vue b/apps/web-antd/src/views/mp/statistics/index.vue
index 034e0e623..d596eb947 100644
--- a/apps/web-antd/src/views/mp/statistics/index.vue
+++ b/apps/web-antd/src/views/mp/statistics/index.vue
@@ -1,28 +1,139 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { EchartsUIType } from '@vben/plugins/echarts';
 
-import { Button } from 'ant-design-vue';
+import { onMounted, ref } from 'vue';
+
+import { ContentWrap, Page } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import { addTime, betweenDay, formatDate } from '@vben/utils';
+
+import { Card, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  getInterfaceSummary,
+  getUpstreamMessage,
+  getUserCumulate,
+  getUserSummary,
+} from '#/api/mp/statistics';
+
+import {
+  interfaceSummaryOption,
+  upstreamMessageOption,
+  userCumulateOption,
+  userSummaryOption,
+} from './chart-options';
+import { useGridFormSchema } from './data';
+
+const userSummaryRef = ref<EchartsUIType>();
+const { renderEcharts: renderUserSummaryEcharts } = useEcharts(userSummaryRef);
+
+const userCumulateRef = ref<EchartsUIType>();
+const { renderEcharts: renderUserCumulateEcharts } =
+  useEcharts(userCumulateRef);
+
+const upstreamMessageRef = ref<EchartsUIType>();
+const { renderEcharts: renderUpstreamMessageEcharts } =
+  useEcharts(upstreamMessageRef);
+
+const interfaceSummaryRef = ref<EchartsUIType>();
+const { renderEcharts: renderInterfaceSummaryEcharts } =
+  useEcharts(interfaceSummaryRef);
+
+/** 加载数据 */
+async function getSummary(values: Record<string, any>) {
+  const accountId = values.accountId;
+  if (!accountId) {
+    message.warning('请先选择公众号');
+    return;
+  }
+  const dateRange = values.dateRange;
+  if (!dateRange) {
+    message.warning('请先选择时间范围');
+    return;
+  }
+  // 必须选择 7 天内，因为公众号有时间跨度限制为 7
+  if (betweenDay(dateRange[0], dateRange[1]) >= 7) {
+    message.error('时间间隔 7 天以内，请重新选择');
+    return;
+  }
+  // 处理日期
+  const days = betweenDay(dateRange[0], dateRange[1]);
+  const dates = Array.from(
+    { length: days },
+    (_, index) =>
+      formatDate(addTime(dateRange[0], index), 'YYYY-MM-DD') as string,
+  );
+
+  // 用户增减数据
+  const userSummaryData = await getUserSummary({
+    accountId,
+    date: dateRange,
+  });
+  await renderUserSummaryEcharts(userSummaryOption(userSummaryData, dates));
+  // 累计用户数据
+  const userCumulateData = await getUserCumulate({
+    accountId,
+    date: dateRange,
+  });
+  await renderUserCumulateEcharts(userCumulateOption(userCumulateData, dates));
+  // 消息发送概况数据
+  const upstreamMessageData = await getUpstreamMessage({
+    accountId,
+    date: dateRange,
+  });
+  await renderUpstreamMessageEcharts(
+    upstreamMessageOption(upstreamMessageData, dates),
+  );
+  // 接口分析数据
+  const interfaceSummaryData = await getInterfaceSummary({
+    accountId,
+    date: dateRange,
+  });
+  await renderInterfaceSummaryEcharts(
+    interfaceSummaryOption(interfaceSummaryData, dates),
+  );
+}
+
+const [QueryForm, queryFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  layout: 'horizontal',
+  schema: useGridFormSchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2',
+  handleSubmit: getSummary,
+});
+
+/** 初始化 */
+onMounted(() => {
+  queryFormApi.submitForm();
+});
 </script>
 
 <template>
-  <Page>
-    <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/statistics/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/statistics/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <ContentWrap class="h-full w-full">
+      <QueryForm />
+
+      <div class="flex h-1/3 w-full gap-4">
+        <Card class="h-full w-1/2" title="用户增减数据">
+          <EchartsUI ref="userSummaryRef" />
+        </Card>
+        <Card class="h-full w-1/2" title="累计用户数据">
+          <EchartsUI ref="userCumulateRef" />
+        </Card>
+      </div>
+      <div class="mt-4 flex h-1/3 w-full gap-4">
+        <Card class="h-full w-1/2" title="消息发送概况数据">
+          <EchartsUI ref="upstreamMessageRef" />
+        </Card>
+        <Card class="h-full w-1/2" title="接口分析数据">
+          <EchartsUI ref="interfaceSummaryRef" />
+        </Card>
+      </div>
+    </ContentWrap>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/mp/tag/data.ts b/apps/web-antd/src/views/mp/tag/data.ts
index bdb857050..e8efd6fba 100644
--- a/apps/web-antd/src/views/mp/tag/data.ts
+++ b/apps/web-antd/src/views/mp/tag/data.ts
@@ -1,5 +1,12 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+import type { MpAccountApi } from '#/api/mp/account';
+
+import { getSimpleAccountList } from '#/api/mp/account';
+
+/** 关联数据 */
+let accountList: MpAccountApi.AccountSimple[] = [];
+getSimpleAccountList().then((data) => (accountList = data));
 
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
@@ -33,25 +40,48 @@ export function useFormSchema(): VbenFormSchema[] {
   ];
 }
 
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: 'ApiSelect',
+      componentProps: {
+        options: accountList.map((item) => ({
+          label: item.name,
+          value: item.id,
+        })),
+        placeholder: '请选择公众号',
+      },
+      defaultValue: accountList[0]?.id,
+    },
+  ];
+}
+
 /** 表格列配置 */
 export function useGridColumns(): VxeGridPropTypes.Columns {
   return [
     {
       title: '编号',
       field: 'id',
+      minWidth: 80,
     },
     {
       title: '标签名称',
       field: 'name',
+      minWidth: 150,
     },
     {
       title: '粉丝数',
       field: 'count',
+      minWidth: 100,
     },
     {
       title: '创建时间',
       field: 'createTime',
       formatter: 'formatDateTime',
+      minWidth: 180,
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/mp/tag/index.vue b/apps/web-antd/src/views/mp/tag/index.vue
index 1973fd06c..a9a8b2c31 100644
--- a/apps/web-antd/src/views/mp/tag/index.vue
+++ b/apps/web-antd/src/views/mp/tag/index.vue
@@ -2,72 +2,47 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MpTagApi } from '#/api/mp/tag';
 
-import { onMounted, ref } from 'vue';
-
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 
 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 { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
 
-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.formApi.setValues({
-      accountId: accountId.value,
-    });
-  } else {
-    message.error('未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置');
-    // await push({ name: 'MpAccount' });
-    // tabs.closeCurrentTab();
-  }
-  gridApi.setState({
-    formOptions: {
-      schema: [
-        {
-          fieldName: 'accountId',
-          label: '公众号',
-          component: 'Select',
-          componentProps: {
-            options: accountOptions.value || [],
-          },
-        },
-      ],
-    },
-  });
-}
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
 }
 
 /** 创建标签 */
-function handleCreate() {
-  formModalApi.setData({ accountId: accountId.value }).open();
+async function handleCreate() {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId) {
+    message.warning('请先选择公众号');
+    return;
+  }
+  formModalApi.setData({ accountId }).open();
 }
 
 /** 编辑标签 */
-function handleEdit(row: MpTagApi.Tag) {
-  formModalApi.setData({ row, accountId: accountId.value }).open();
+async function handleEdit(row: MpTagApi.Tag) {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId) {
+    message.warning('请先选择公众号');
+    return;
+  }
+  formModalApi.setData({ row, accountId }).open();
 }
 
 /** 删除标签 */
@@ -77,26 +52,31 @@ async function handleDelete(row: MpTagApi.Tag) {
     duration: 0,
   });
   try {
-    await deleteTag(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteTag(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
   }
 }
+
 /** 同步标签 */
 async function handleSync() {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId) {
+    message.warning('请先选择公众号');
+    return;
+  }
+
+  await confirm('是否确认同步标签？');
   const hideLoading = message.loading({
-    content: '是否确认同步标签？',
+    content: '正在同步标签...',
     duration: 0,
   });
   try {
-    await syncTag(accountId.value);
-    message.success({
-      content: '同步标签成功',
-    });
+    await syncTag(accountId);
+    message.success('同步标签成功');
     handleRefresh();
   } finally {
     hideLoading();
@@ -105,7 +85,7 @@ async function handleSync() {
 
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
-    schema: [],
+    schema: useGridFormSchema(),
   },
   gridOptions: {
     columns: useGridColumns(),
@@ -114,7 +94,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          accountId.value = formValues.accountId;
           return await getTagPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
@@ -125,6 +104,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -132,10 +112,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<MpTagApi.Tag>,
 });
-
-onMounted(async () => {
-  await getAccountList();
-});
 </script>
 
 <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
index 66295e075..bd19e7d3d 100644
--- a/apps/web-antd/src/views/mp/tag/modules/form.vue
+++ b/apps/web-antd/src/views/mp/tag/modules/form.vue
@@ -66,7 +66,7 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     try {
-      formData.value = await getTag(data.row.id as number);
+      formData.value = await getTag(data.row.id!);
       // 设置到 values
       await formApi.setValues(formData.value);
     } finally {
@@ -77,7 +77,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/mp/user/data.ts b/apps/web-antd/src/views/mp/user/data.ts
new file mode 100644
index 000000000..19827ebf0
--- /dev/null
+++ b/apps/web-antd/src/views/mp/user/data.ts
@@ -0,0 +1,138 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpAccountApi } from '#/api/mp/account';
+
+import { getSimpleAccountList } from '#/api/mp/account';
+
+let accountList: MpAccountApi.AccountSimple[] = [];
+getSimpleAccountList().then((data) => (accountList = data));
+
+/** 修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '昵称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入昵称',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: 'Select',
+      componentProps: {
+        options: accountList.map((item) => ({
+          label: item.name,
+          value: item.id,
+        })),
+        placeholder: '请选择公众号',
+      },
+      defaultValue: accountList[0]?.id,
+    },
+    {
+      fieldName: 'openid',
+      label: '用户标识',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户标识',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '昵称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入昵称',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'openid',
+      title: '用户标识',
+      minWidth: 260,
+    },
+    {
+      field: 'headImageUrl',
+      title: '用户头像',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'nickname',
+      title: '昵称',
+      minWidth: 120,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 120,
+    },
+    {
+      field: 'tagIds',
+      title: '标签',
+      minWidth: 200,
+      cellRender: {
+        name: 'CellTags',
+      },
+    },
+    {
+      field: 'subscribeStatus',
+      title: '订阅状态',
+      minWidth: 100,
+      align: 'center',
+      formatter: ({ cellValue }) => {
+        return cellValue === 0 ? '已订阅' : '未订阅';
+      },
+    },
+    {
+      field: 'subscribeTime',
+      title: '订阅时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mp/user/index.vue b/apps/web-antd/src/views/mp/user/index.vue
index ff762f40e..9e87e76e8 100644
--- a/apps/web-antd/src/views/mp/user/index.vue
+++ b/apps/web-antd/src/views/mp/user/index.vue
@@ -1,29 +1,126 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpUserApi } from '#/api/mp/user';
 
-import { Button } from 'ant-design-vue';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getUserPage, syncUser } from '#/api/mp/user';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+defineOptions({ name: 'MpUser' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 编辑用户 */
+function handleEdit(row: MpUserApi.User) {
+  formModalApi.setData({ id: row.id }).open();
+}
+
+/** 同步粉丝 */
+async function handleSync() {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId) {
+    message.warning('请先选择公众号');
+    return;
+  }
+
+  await confirm('是否确认同步粉丝？');
+  const hideLoading = message.loading({
+    content: '正在同步粉丝...',
+    duration: 0,
+  });
+  try {
+    await syncUser(accountId);
+    message.success(
+      '开始从微信公众号同步粉丝信息，同步需要一段时间，建议稍后再查询',
+    );
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getUserPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MpUserApi.User>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert title="公众号粉丝" url="https://doc.iocoder.cn/mp/user/" />
-    <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/user/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/user/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="公众号粉丝" url="https://doc.iocoder.cn/mp/user/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+
+    <Grid table-title="粉丝列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '同步',
+              type: 'primary',
+              icon: ACTION_ICON.REFRESH,
+              auth: ['mp:user:sync'],
+              onClick: handleSync,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['mp:user:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/mp/user/modules/form.vue b/apps/web-antd/src/views/mp/user/modules/form.vue
new file mode 100644
index 000000000..a2854f78d
--- /dev/null
+++ b/apps/web-antd/src/views/mp/user/modules/form.vue
@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import type { MpUserApi } from '#/api/mp/user';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { getUser, updateUser } from '#/api/mp/user';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MpUserApi.User>();
+const getTitle = computed(() => {
+  return $t('ui.actionTitle.edit', ['粉丝']);
+});
+
+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 values = (await formApi.getValues()) as MpUserApi.User;
+    try {
+      await updateUser({ ...formData.value, ...values });
+      /** 关闭并提示 */
+      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<{ id: number }>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getUser(data.id);
+      /** 设置到 values */
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-[600px]">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/pay/app/index.vue b/apps/web-antd/src/views/pay/app/index.vue
index 8163d616c..671aa1aa1 100644
--- a/apps/web-antd/src/views/pay/app/index.vue
+++ b/apps/web-antd/src/views/pay/app/index.vue
@@ -72,17 +72,13 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新状态
-        const res = await updateAppStatus({
+        await updateAppStatus({
           id: row.id!,
           status: newStatus,
         });
-        if (res) {
-          // 提示并返回成功
-          message.success(`${text}成功`);
-          resolve(true);
-        } else {
-          reject(new Error('更新失败'));
-        }
+        // 提示并返回成功
+        message.success(`${text}成功`);
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-antd/src/views/pay/notify/data.ts b/apps/web-antd/src/views/pay/notify/data.ts
index b0ee4985c..90b54dfeb 100644
--- a/apps/web-antd/src/views/pay/notify/data.ts
+++ b/apps/web-antd/src/views/pay/notify/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { PayNotifyApi } from '#/api/pay/notify';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -21,7 +20,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '应用编号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getAppList(),
+        api: getAppList,
         labelField: 'name',
         valueField: 'id',
         autoSelect: 'first',
@@ -91,7 +90,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         ...getRangePickerDefaultProps(),
         allowClear: true,
-        placeholder: ['开始日期', '结束日期'],
       },
     },
   ];
@@ -182,10 +180,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'type',
       label: '通知类型',
-      content: (data: PayNotifyApi.NotifyTask) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_NOTIFY_TYPE,
-          value: data?.type,
+          value: val,
         }),
     },
     {
@@ -195,10 +193,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '通知状态',
-      content: (data: PayNotifyApi.NotifyTask) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_NOTIFY_STATUS,
-          value: data?.status,
+          value: val,
         }),
     },
     {
@@ -208,14 +206,12 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'lastExecuteTime',
       label: '最后通知时间',
-      content: (data: PayNotifyApi.NotifyTask) =>
-        formatDateTime(data?.lastExecuteTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'nextNotifyTime',
       label: '下次通知时间',
-      content: (data: PayNotifyApi.NotifyTask) =>
-        formatDateTime(data?.nextNotifyTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'notifyTimes',
@@ -228,14 +224,12 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: PayNotifyApi.NotifyTask) =>
-        formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'updateTime',
       label: '更新时间',
-      content: (data: PayNotifyApi.NotifyTask) =>
-        formatDateTime(data?.updateTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/pay/order/data.ts b/apps/web-antd/src/views/pay/order/data.ts
index 7acf14000..c088704a2 100644
--- a/apps/web-antd/src/views/pay/order/data.ts
+++ b/apps/web-antd/src/views/pay/order/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { PayOrderApi } from '#/api/pay/order';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -184,53 +183,46 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '支付状态',
-      content: (data: any) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_ORDER_STATUS,
-          value: data?.status,
+          value: val,
         }),
     },
     {
       field: 'price',
       label: '支付金额',
-      content: (data: PayOrderApi.Order) =>
-        `￥${erpPriceInputFormatter(data?.price)}`,
+      render: (val) => `￥${erpPriceInputFormatter(val)}`,
     },
     {
       field: 'channelFeePrice',
       label: '手续费',
-      content: (data: PayOrderApi.Order) =>
-        `￥${erpPriceInputFormatter(data?.channelFeePrice)}`,
+      render: (val) => `￥${erpPriceInputFormatter(val)}`,
     },
     {
       field: 'channelFeeRate',
       label: '手续费比例',
-      content: (data: PayOrderApi.Order) =>
-        `${erpPriceInputFormatter(data?.channelFeeRate)}%`,
+      render: (val) => `${erpPriceInputFormatter(val)}%`,
     },
     {
       field: 'successTime',
       label: '支付时间',
-      content: (data: PayOrderApi.Order) =>
-        formatDateTime(data?.successTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'expireTime',
       label: '失效时间',
-      content: (data: PayOrderApi.Order) =>
-        formatDateTime(data?.expireTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: PayOrderApi.Order) =>
-        formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'updateTime',
       label: '更新时间',
-      content: (data: PayOrderApi.Order) =>
-        formatDateTime(data?.updateTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'subject',
@@ -243,10 +235,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'channelCode',
       label: '支付渠道',
-      content: (data: PayOrderApi.Order) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_CHANNEL_CODE,
-          value: data?.channelCode,
+          value: val,
         }),
     },
     {
@@ -256,10 +248,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'channelOrderNo',
       label: '渠道单号',
-      content: (data: PayOrderApi.Order) =>
-        data?.channelOrderNo
-          ? h(Tag, { color: 'green' }, () => data.channelOrderNo)
-          : '',
+      render: (val) => (val ? h(Tag, { color: 'green' }, () => val) : ''),
     },
     {
       field: 'channelUserId',
@@ -268,8 +257,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'refundPrice',
       label: '退款金额',
-      content: (data: PayOrderApi.Order) =>
-        `￥${erpPriceInputFormatter(data?.refundPrice)}`,
+      render: (val) => `￥${erpPriceInputFormatter(val)}`,
     },
     {
       field: 'notifyUrl',
diff --git a/apps/web-antd/src/views/pay/refund/data.ts b/apps/web-antd/src/views/pay/refund/data.ts
index 69eee7224..974acfe25 100644
--- a/apps/web-antd/src/views/pay/refund/data.ts
+++ b/apps/web-antd/src/views/pay/refund/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { PayRefundApi } from '#/api/pay/refund';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -173,26 +172,22 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'merchantRefundId',
       label: '商户退款单号',
-      content: (data: PayRefundApi.Refund) =>
-        h(Tag, {}, () => data?.merchantRefundId || '-'),
+      render: (val) => h(Tag, {}, () => val || '-'),
     },
     {
       field: 'channelRefundNo',
       label: '渠道退款单号',
-      content: (data: PayRefundApi.Refund) =>
-        h(Tag, { color: 'success' }, () => data?.channelRefundNo || '-'),
+      render: (val) => h(Tag, { color: 'success' }, () => val || '-'),
     },
     {
       field: 'merchantOrderId',
       label: '商户支付单号',
-      content: (data: PayRefundApi.Refund) =>
-        h(Tag, {}, () => data?.merchantOrderId || '-'),
+      render: (val) => h(Tag, {}, () => val || '-'),
     },
     {
       field: 'channelOrderNo',
       label: '渠道支付单号',
-      content: (data: PayRefundApi.Refund) =>
-        h(Tag, { color: 'success' }, () => data?.channelOrderNo || '-'),
+      render: (val) => h(Tag, { color: 'success' }, () => val || '-'),
     },
     {
       field: 'appId',
@@ -205,58 +200,55 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'payPrice',
       label: '支付金额',
-      content: (data: PayRefundApi.Refund) =>
+      render: (val) =>
         h(
           Tag,
           { color: 'success' },
-          () => `￥${erpPriceInputFormatter(data?.payPrice || 0)}`,
+          () => `￥${erpPriceInputFormatter(val || 0)}`,
         ),
     },
     {
       field: 'refundPrice',
       label: '退款金额',
-      content: (data: PayRefundApi.Refund) =>
+      render: (val) =>
         h(
           Tag,
           { color: 'danger' },
-          () => `￥${erpPriceInputFormatter(data?.refundPrice || 0)}`,
+          () => `￥${erpPriceInputFormatter(val || 0)}`,
         ),
     },
     {
       field: 'status',
       label: '退款状态',
-      content: (data: any) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_REFUND_STATUS,
-          value: data?.status,
+          value: val,
         }),
     },
     {
       field: 'successTime',
       label: '退款时间',
-      content: (data: PayRefundApi.Refund) =>
-        formatDateTime(data?.successTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: PayRefundApi.Refund) =>
-        formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'updateTime',
       label: '更新时间',
-      content: (data: PayRefundApi.Refund) =>
-        formatDateTime(data?.updateTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     // 渠道信息部分
     {
       field: 'channelCode',
       label: '退款渠道',
-      content: (data: PayRefundApi.Refund) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_CHANNEL_CODE,
-          value: data?.channelCode,
+          value: val,
         }),
     },
     {
diff --git a/apps/web-antd/src/views/pay/transfer/data.ts b/apps/web-antd/src/views/pay/transfer/data.ts
index 0a8d7c401..9f33dfe82 100644
--- a/apps/web-antd/src/views/pay/transfer/data.ts
+++ b/apps/web-antd/src/views/pay/transfer/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { PayTransferApi } from '#/api/pay/transfer';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -191,14 +190,12 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'merchantTransferId',
       label: '商户单号',
-      content: (data: PayTransferApi.Transfer) =>
-        h(Tag, {}, () => data?.merchantTransferId),
+      render: (val) => h(Tag, {}, () => val),
     },
     {
       field: 'no',
       label: '转账单号',
-      content: (data: PayTransferApi.Transfer) =>
-        h(Tag, { color: 'orange' }, () => data?.no),
+      render: (val) => h(Tag, { color: 'orange' }, () => val),
     },
     {
       field: 'appId',
@@ -207,33 +204,31 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '转账状态',
-      content: (data: any) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_TRANSFER_STATUS,
-          value: data?.status,
+          value: val,
         }),
     },
     {
       field: 'price',
       label: '转账金额',
-      content: (data: PayTransferApi.Transfer) =>
+      render: (val) =>
         h(
           Tag,
           { color: 'success' },
-          () => `￥${erpPriceInputFormatter(data?.price || 0)}`,
+          () => `￥${erpPriceInputFormatter(val || 0)}`,
         ),
     },
     {
       field: 'successTime',
       label: '转账时间',
-      content: (data: PayTransferApi.Transfer) =>
-        formatDateTime(data?.successTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: PayTransferApi.Transfer) =>
-        formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'userName',
@@ -246,10 +241,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'channelCode',
       label: '支付渠道',
-      content: (data: PayTransferApi.Transfer) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_CHANNEL_CODE,
-          value: data?.channelCode,
+          value: val,
         }),
     },
     {
@@ -259,10 +254,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'channelTransferNo',
       label: '渠道单号',
-      content: (data: PayTransferApi.Transfer) =>
-        data?.channelTransferNo
-          ? h(Tag, { color: 'success' }, () => data.channelTransferNo)
-          : '',
+      render: (val) => (val ? h(Tag, { color: 'success' }, () => val) : ''),
     },
     {
       field: 'notifyUrl',
diff --git a/apps/web-antd/src/views/system/dept/data.ts b/apps/web-antd/src/views/system/dept/data.ts
index 09b222441..f5421c429 100644
--- a/apps/web-antd/src/views/system/dept/data.ts
+++ b/apps/web-antd/src/views/system/dept/data.ts
@@ -72,7 +72,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '负责人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择负责人',
diff --git a/apps/web-antd/src/views/system/dict/data.ts b/apps/web-antd/src/views/system/dict/data.ts
index b20fab3e9..a2c6ede66 100644
--- a/apps/web-antd/src/views/system/dict/data.ts
+++ b/apps/web-antd/src/views/system/dict/data.ts
@@ -187,7 +187,7 @@ export function useDataFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: (values) => {
         return {
-          api: () => getSimpleDictTypeList(),
+          api: getSimpleDictTypeList,
           placeholder: '请输入字典类型',
           labelField: 'name',
           valueField: 'type',
diff --git a/apps/web-antd/src/views/system/loginlog/data.ts b/apps/web-antd/src/views/system/loginlog/data.ts
index 911b021a6..24433e9ac 100644
--- a/apps/web-antd/src/views/system/loginlog/data.ts
+++ b/apps/web-antd/src/views/system/loginlog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemLoginLogApi } from '#/api/system/login-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -110,10 +109,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'logType',
       label: '操作类型',
-      content: (data: SystemLoginLogApi.LoginLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_LOGIN_TYPE,
-          value: data?.logType,
+          value: val,
         });
       },
     },
@@ -132,19 +131,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'result',
       label: '登录结果',
-      content: (data: SystemLoginLogApi.LoginLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_LOGIN_RESULT,
-          value: data?.result,
+          value: val,
         });
       },
     },
     {
       field: 'createTime',
       label: '登录日期',
-      content: (data: SystemLoginLogApi.LoginLog) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/system/mail/log/data.ts b/apps/web-antd/src/views/system/mail/log/data.ts
index b5113c564..3a12081d5 100644
--- a/apps/web-antd/src/views/system/mail/log/data.ts
+++ b/apps/web-antd/src/views/system/mail/log/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemMailLogApi } from '#/api/system/mail/log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -59,7 +58,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '邮箱账号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleMailAccountList(),
+        api: getSimpleMailAccountList,
         labelField: 'mail',
         valueField: 'id',
         allowClear: true,
@@ -164,8 +163,8 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: SystemMailLogApi.MailLog) => {
-        return formatDateTime(data?.createTime || '') as string;
+      render: (val) => {
+        return formatDateTime(val) as string;
       },
     },
     {
@@ -175,14 +174,14 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userId',
       label: '接收用户',
-      content: (data: SystemMailLogApi.MailLog) => {
-        if (data?.userType && data?.userId) {
+      render: (val, data) => {
+        if (data?.userType && val) {
           return h('div', [
             h(DictTag, {
               type: DICT_TYPE.USER_TYPE,
               value: data.userType,
             }),
-            ` (${data.userId})`,
+            ` (${val})`,
           ]);
         }
         return '无';
@@ -191,10 +190,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'toMails',
       label: '接收信息',
-      content: (data: SystemMailLogApi.MailLog) => {
+      render: (val, data) => {
         const lines: string[] = [];
-        if (data?.toMails && data.toMails.length > 0) {
-          lines.push(`收件：${data.toMails.join('、')}`);
+        if (val && val.length > 0) {
+          lines.push(`收件：${val.join('、')}`);
         }
         if (data?.ccMails && data.ccMails.length > 0) {
           lines.push(`抄送：${data.ccMails.join('、')}`);
@@ -227,28 +226,26 @@ export function useDetailSchema(): DescriptionItemSchema[] {
       field: 'templateContent',
       label: '邮件内容',
       span: 2,
-      content: (data: SystemMailLogApi.MailLog) => {
+      render: (val) => {
         return h('div', {
-          innerHTML: data?.templateContent || '',
+          innerHTML: val || '',
         });
       },
     },
     {
       field: 'sendStatus',
       label: '发送状态',
-      content: (data: SystemMailLogApi.MailLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS,
-          value: data?.sendStatus,
+          value: val,
         });
       },
     },
     {
       field: 'sendTime',
       label: '发送时间',
-      content: (data: SystemMailLogApi.MailLog) => {
-        return formatDateTime(data?.sendTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'sendMessageId',
diff --git a/apps/web-antd/src/views/system/mail/template/data.ts b/apps/web-antd/src/views/system/mail/template/data.ts
index f466a8319..f7345abb5 100644
--- a/apps/web-antd/src/views/system/mail/template/data.ts
+++ b/apps/web-antd/src/views/system/mail/template/data.ts
@@ -42,7 +42,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '邮箱账号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleMailAccountList(),
+        api: getSimpleMailAccountList,
         labelField: 'mail',
         valueField: 'id',
         placeholder: '请选择邮箱账号',
@@ -185,7 +185,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '邮箱账号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleMailAccountList(),
+        api: getSimpleMailAccountList,
         labelField: 'mail',
         valueField: 'id',
         allowClear: true,
diff --git a/apps/web-antd/src/views/system/notify/message/data.ts b/apps/web-antd/src/views/system/notify/message/data.ts
index b52841f44..c6a315229 100644
--- a/apps/web-antd/src/views/system/notify/message/data.ts
+++ b/apps/web-antd/src/views/system/notify/message/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -166,10 +165,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userType',
       label: '用户类型',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.USER_TYPE,
-          value: data?.userType,
+          value: val,
         });
       },
     },
@@ -196,9 +195,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'templateParams',
       label: '模版参数',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         try {
-          return JSON.stringify(data?.templateParams);
+          return JSON.stringify(val);
         } catch {
           return '';
         }
@@ -207,36 +206,32 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'templateType',
       label: '模版类型',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
-          value: data?.templateType,
+          value: val,
         });
       },
     },
     {
       field: 'readStatus',
       label: '是否已读',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_BOOLEAN_STRING,
-          value: data?.readStatus,
+          value: val,
         });
       },
     },
     {
       field: 'readTime',
       label: '阅读时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.readTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/system/notify/my/data.ts b/apps/web-antd/src/views/system/notify/my/data.ts
index c24d4433b..b31d437c2 100644
--- a/apps/web-antd/src/views/system/notify/my/data.ts
+++ b/apps/web-antd/src/views/system/notify/my/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -103,36 +102,32 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '发送时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'templateType',
       label: '消息类型',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
-          value: data?.templateType,
+          value: val,
         });
       },
     },
     {
       field: 'readStatus',
       label: '是否已读',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_BOOLEAN_STRING,
-          value: data?.readStatus,
+          value: val,
         });
       },
     },
     {
       field: 'readTime',
       label: '阅读时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.readTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'templateContent',
diff --git a/apps/web-antd/src/views/system/notify/template/data.ts b/apps/web-antd/src/views/system/notify/template/data.ts
index d9d823938..d22b16ce9 100644
--- a/apps/web-antd/src/views/system/notify/template/data.ts
+++ b/apps/web-antd/src/views/system/notify/template/data.ts
@@ -195,7 +195,7 @@ export function useSendNotifyFormSchema(): VbenFormSchema[] {
       label: '接收人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择接收人',
diff --git a/apps/web-antd/src/views/system/operatelog/data.ts b/apps/web-antd/src/views/system/operatelog/data.ts
index d64971cc9..3144daa90 100644
--- a/apps/web-antd/src/views/system/operatelog/data.ts
+++ b/apps/web-antd/src/views/system/operatelog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemOperateLogApi } from '#/api/system/operate-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { formatDateTime } from '@vben/utils';
@@ -16,7 +15,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '操作人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         allowClear: true,
@@ -134,7 +133,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'traceId',
       label: '链路追踪',
-      hidden: (data: SystemOperateLogApi.OperateLog) => !data?.traceId,
+      show: (data) => !data?.traceId,
     },
     {
       field: 'userId',
@@ -167,13 +166,14 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'extra',
       label: '操作拓展参数',
-      hidden: (data: SystemOperateLogApi.OperateLog) => !data?.extra,
+      show: (val) => !val,
     },
     {
+      field: 'requestUrl',
       label: '请求 URL',
-      content: (data: SystemOperateLogApi.OperateLog) => {
-        if (data?.requestMethod && data?.requestUrl) {
-          return `${data.requestMethod} ${data.requestUrl}`;
+      render: (val, data) => {
+        if (data?.requestMethod && val) {
+          return `${data.requestMethod} ${val}`;
         }
         return '';
       },
@@ -181,9 +181,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '操作时间',
-      content: (data: SystemOperateLogApi.OperateLog) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'bizId',
diff --git a/apps/web-antd/src/views/system/sms/log/data.ts b/apps/web-antd/src/views/system/sms/log/data.ts
index b31cd0bf9..3babce416 100644
--- a/apps/web-antd/src/views/system/sms/log/data.ts
+++ b/apps/web-antd/src/views/system/sms/log/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemSmsLogApi } from '#/api/system/sms/log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -30,7 +29,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '短信渠道',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleSmsChannelList(),
+        api: getSimpleSmsChannelList,
         labelField: 'signature',
         valueField: 'id',
         allowClear: true,
@@ -179,9 +178,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: SystemSmsLogApi.SmsLog) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'mobile',
@@ -198,10 +195,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'templateType',
       label: '模板类型',
-      content: (data: SystemSmsLogApi.SmsLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE,
-          value: data?.templateType,
+          value: val,
         });
       },
     },
@@ -212,19 +209,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'sendStatus',
       label: '发送状态',
-      content: (data: SystemSmsLogApi.SmsLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SMS_SEND_STATUS,
-          value: data?.sendStatus,
+          value: val,
         });
       },
     },
     {
       field: 'sendTime',
       label: '发送时间',
-      content: (data: SystemSmsLogApi.SmsLog) => {
-        return formatDateTime(data?.sendTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'apiSendCode',
@@ -237,19 +232,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'receiveStatus',
       label: '接收状态',
-      content: (data: SystemSmsLogApi.SmsLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS,
-          value: data?.receiveStatus,
+          value: val,
         });
       },
     },
     {
       field: 'receiveTime',
       label: '接收时间',
-      content: (data: SystemSmsLogApi.SmsLog) => {
-        return formatDateTime(data?.receiveTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'apiReceiveCode',
diff --git a/apps/web-antd/src/views/system/sms/template/data.ts b/apps/web-antd/src/views/system/sms/template/data.ts
index 104f34cfb..13786c56a 100644
--- a/apps/web-antd/src/views/system/sms/template/data.ts
+++ b/apps/web-antd/src/views/system/sms/template/data.ts
@@ -52,7 +52,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '短信渠道',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleSmsChannelList(),
+        api: getSimpleSmsChannelList,
         labelField: 'signature',
         valueField: 'id',
         placeholder: '请选择短信渠道',
@@ -146,7 +146,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '短信渠道',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleSmsChannelList(),
+        api: getSimpleSmsChannelList,
         labelField: 'signature',
         valueField: 'id',
         allowClear: true,
diff --git a/apps/web-antd/src/views/system/social/user/data.ts b/apps/web-antd/src/views/system/social/user/data.ts
index cbef1b093..2c1604f95 100644
--- a/apps/web-antd/src/views/system/social/user/data.ts
+++ b/apps/web-antd/src/views/system/social/user/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemSocialUserApi } from '#/api/system/social/user';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -8,6 +7,8 @@ import { h } from 'vue';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
+import { Image } from 'ant-design-vue';
+
 import { DictTag } from '#/components/dict-tag';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -111,10 +112,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'type',
       label: '社交平台',
-      content: (data: SystemSocialUserApi.SocialUser) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SOCIAL_TYPE,
-          value: data?.type,
+          value: val,
         });
       },
     },
@@ -125,20 +126,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'avatar',
       label: '用户头像',
-      // TODO @芋艿：使用 antd 的 Image 组件
-      content: (data: SystemSocialUserApi.SocialUser) => {
-        if (data?.avatar) {
-          return h('img', {
-            src: data.avatar,
-            style: 'width: 30px; height: 30px; cursor: pointer;',
-            onClick: () => {
-              // 可以添加图片预览功能
-              window.open(data.avatar, '_blank');
-            },
-          });
-        }
-        return '无';
-      },
+      render: (val) => (val ? h(Image, { src: val }) : '无'),
     },
     {
       field: 'token',
diff --git a/apps/web-antd/src/views/system/tenant/data.ts b/apps/web-antd/src/views/system/tenant/data.ts
index cfc6c5c21..d2a7dbf70 100644
--- a/apps/web-antd/src/views/system/tenant/data.ts
+++ b/apps/web-antd/src/views/system/tenant/data.ts
@@ -35,7 +35,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '租户套餐',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getTenantPackageList(),
+        api: getTenantPackageList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择租户套餐',
diff --git a/apps/web-antd/src/views/system/user/data.ts b/apps/web-antd/src/views/system/user/data.ts
index 8ef2be2f0..fca5ddefd 100644
--- a/apps/web-antd/src/views/system/user/data.ts
+++ b/apps/web-antd/src/views/system/user/data.ts
@@ -67,7 +67,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '岗位',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimplePostList(),
+        api: getSimplePostList,
         labelField: 'name',
         valueField: 'id',
         mode: 'multiple',
@@ -213,7 +213,7 @@ export function useAssignRoleFormSchema(): VbenFormSchema[] {
       label: '角色',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleRoleList(),
+        api: getSimpleRoleList,
         labelField: 'name',
         valueField: 'id',
         mode: 'multiple',
diff --git a/apps/web-antd/src/views/system/user/index.vue b/apps/web-antd/src/views/system/user/index.vue
index 45cbe722e..5d1267a8f 100644
--- a/apps/web-antd/src/views/system/user/index.vue
+++ b/apps/web-antd/src/views/system/user/index.vue
@@ -144,14 +144,10 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新用户状态
-        const res = await updateUserStatus(row.id!, newStatus);
-        if (res) {
-          // 提示并返回成功
-          message.success($t('ui.actionMessage.operationSuccess'));
-          resolve(true);
-        } else {
-          reject(new Error('更新失败'));
-        }
+        await updateUserStatus(row.id!, newStatus);
+        // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-ele/package.json b/apps/web-ele/package.json
index e016d1a87..aa96e8564 100644
--- a/apps/web-ele/package.json
+++ b/apps/web-ele/package.json
@@ -44,6 +44,7 @@
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vueuse/core": "catalog:",
+    "@vueuse/integrations": "catalog:",
     "cropperjs": "catalog:",
     "dayjs": "catalog:",
     "element-plus": "catalog:",
diff --git a/apps/web-ele/public/wx-xingyu.png b/apps/web-ele/public/wx-xingyu.png
index 5e4b6017d..da2e45a34 100644
Binary files a/apps/web-ele/public/wx-xingyu.png and b/apps/web-ele/public/wx-xingyu.png differ
diff --git a/apps/web-ele/src/api/ai/mindmap/index.ts b/apps/web-ele/src/api/ai/mindmap/index.ts
index 69e437341..192b9950f 100644
--- a/apps/web-ele/src/api/ai/mindmap/index.ts
+++ b/apps/web-ele/src/api/ai/mindmap/index.ts
@@ -6,6 +6,7 @@ import { requestClient } from '#/api/request';
 
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
 const accessStore = useAccessStore();
+
 export namespace AiMindmapApi {
   // AI 思维导图
   export interface MindMap {
@@ -19,7 +20,7 @@ export namespace AiMindmapApi {
   }
 
   // AI 思维导图生成
-  export interface AiMindMapGenerateReq {
+  export interface AiMindMapGenerateReqVO {
     prompt: string;
   }
 }
@@ -32,7 +33,7 @@ export function generateMindMap({
   ctrl,
 }: {
   ctrl: AbortController;
-  data: AiMindmapApi.AiMindMapGenerateReq;
+  data: AiMindmapApi.AiMindMapGenerateReqVO;
   onClose?: (...args: any[]) => void;
   onError?: (...args: any[]) => void;
   onMessage?: (res: any) => void;
@@ -53,12 +54,12 @@ export function generateMindMap({
   });
 }
 
-// 查询思维导图分页
+/** 查询思维导图分页 */
 export function getMindMapPage(params: any) {
   return requestClient.get(`/ai/mind-map/page`, { params });
 }
 
-// 删除思维导图
+/** 删除思维导图 */
 export function deleteMindMap(id: number) {
   return requestClient.delete(`/ai/mind-map/delete?id=${id}`);
 }
diff --git a/apps/web-ele/src/api/ai/model/apiKey/index.ts b/apps/web-ele/src/api/ai/model/apiKey/index.ts
index 80dcbec1a..2ffc842d8 100644
--- a/apps/web-ele/src/api/ai/model/apiKey/index.ts
+++ b/apps/web-ele/src/api/ai/model/apiKey/index.ts
@@ -13,7 +13,7 @@ export namespace AiModelApiKeyApi {
   }
 }
 
-// 查询 API 密钥分页
+/** 查询 API 密钥分页 */
 export function getApiKeyPage(params: PageParam) {
   return requestClient.get<PageResult<AiModelApiKeyApi.ApiKey>>(
     '/ai/api-key/page',
@@ -21,28 +21,29 @@ export function getApiKeyPage(params: PageParam) {
   );
 }
 
-// 获得 API 密钥列表
+/** 获得 API 密钥列表 */
 export function getApiKeySimpleList() {
   return requestClient.get<AiModelApiKeyApi.ApiKey[]>(
     '/ai/api-key/simple-list',
   );
 }
 
-// 查询 API 密钥详情
+/** 查询 API 密钥详情 */
 export function getApiKey(id: number) {
   return requestClient.get<AiModelApiKeyApi.ApiKey>(`/ai/api-key/get?id=${id}`);
 }
-// 新增 API 密钥
+
+/** 新增 API 密钥 */
 export function createApiKey(data: AiModelApiKeyApi.ApiKey) {
   return requestClient.post('/ai/api-key/create', data);
 }
 
-// 修改 API 密钥
+/** 修改 API 密钥 */
 export function updateApiKey(data: AiModelApiKeyApi.ApiKey) {
   return requestClient.put('/ai/api-key/update', data);
 }
 
-// 删除 API 密钥
+/** 删除 API 密钥 */
 export function deleteApiKey(id: number) {
   return requestClient.delete(`/ai/api-key/delete?id=${id}`);
 }
diff --git a/apps/web-ele/src/api/ai/model/chatRole/index.ts b/apps/web-ele/src/api/ai/model/chatRole/index.ts
index d52dbfee5..266ca3474 100644
--- a/apps/web-ele/src/api/ai/model/chatRole/index.ts
+++ b/apps/web-ele/src/api/ai/model/chatRole/index.ts
@@ -20,7 +20,7 @@ export namespace AiModelChatRoleApi {
   }
 
   // AI 聊天角色 分页请求
-  export interface ChatRolePageReq {
+  export interface ChatRolePageReqVO {
     name?: string; // 角色名称
     category?: string; // 角色类别
     publicStatus: boolean; // 是否公开
@@ -29,7 +29,7 @@ export namespace AiModelChatRoleApi {
   }
 }
 
-// 查询聊天角色分页
+/** 查询聊天角色分页 */
 export function getChatRolePage(params: PageParam) {
   return requestClient.get<PageResult<AiModelChatRoleApi.ChatRole>>(
     '/ai/chat-role/page',
@@ -37,49 +37,49 @@ export function getChatRolePage(params: PageParam) {
   );
 }
 
-// 查询聊天角色详情
+/** 查询聊天角色详情 */
 export function getChatRole(id: number) {
   return requestClient.get<AiModelChatRoleApi.ChatRole>(
     `/ai/chat-role/get?id=${id}`,
   );
 }
-// 新增聊天角色
+
+/** 新增聊天角色 */
 export function createChatRole(data: AiModelChatRoleApi.ChatRole) {
   return requestClient.post('/ai/chat-role/create', data);
 }
 
-// 修改聊天角色
+/** 修改聊天角色 */
 export function updateChatRole(data: AiModelChatRoleApi.ChatRole) {
   return requestClient.put('/ai/chat-role/update', data);
 }
 
-// 删除聊天角色
+/** 删除聊天角色 */
 export function deleteChatRole(id: number) {
   return requestClient.delete(`/ai/chat-role/delete?id=${id}`);
 }
 
-// ======= chat 聊天
-// 获取 my role
-export function getMyPage(params: AiModelChatRoleApi.ChatRolePageReq) {
+/** 获取 my role */
+export function getMyPage(params: AiModelChatRoleApi.ChatRolePageReqVO) {
   return requestClient.get('/ai/chat-role/my-page', { params });
 }
 
-// 获取角色分类
+/** 获取角色分类 */
 export function getCategoryList() {
   return requestClient.get('/ai/chat-role/category-list');
 }
 
-// 创建角色
+/** 创建角色 */
 export function createMy(data: AiModelChatRoleApi.ChatRole) {
   return requestClient.post('/ai/chat-role/create-my', data);
 }
 
-// 更新角色
+/** 更新角色 */
 export function updateMy(data: AiModelChatRoleApi.ChatRole) {
   return requestClient.put('/ai/chat-role/update', data);
 }
 
-// 删除角色 my
+/** 删除角色 my */
 export function deleteMy(id: number) {
   return requestClient.delete(`/ai/chat-role/delete-my?id=${id}`);
 }
diff --git a/apps/web-ele/src/api/ai/model/model/index.ts b/apps/web-ele/src/api/ai/model/model/index.ts
index deafcee82..364327cc1 100644
--- a/apps/web-ele/src/api/ai/model/model/index.ts
+++ b/apps/web-ele/src/api/ai/model/model/index.ts
@@ -18,7 +18,7 @@ export namespace AiModelModelApi {
   }
 }
 
-// 查询模型分页
+/** 查询模型分页 */
 export function getModelPage(params: PageParam) {
   return requestClient.get<PageResult<AiModelModelApi.Model>>(
     '/ai/model/page',
@@ -26,7 +26,7 @@ export function getModelPage(params: PageParam) {
   );
 }
 
-// 获得模型列表
+/** 获得模型列表 */
 export function getModelSimpleList(type?: number) {
   return requestClient.get<AiModelModelApi.Model[]>('/ai/model/simple-list', {
     params: {
@@ -35,21 +35,22 @@ export function getModelSimpleList(type?: number) {
   });
 }
 
-// 查询模型详情
+/** 查询模型详情 */
 export function getModel(id: number) {
   return requestClient.get<AiModelModelApi.Model>(`/ai/model/get?id=${id}`);
 }
-// 新增模型
+
+/** 新增模型 */
 export function createModel(data: AiModelModelApi.Model) {
   return requestClient.post('/ai/model/create', data);
 }
 
-// 修改模型
+/** 修改模型 */
 export function updateModel(data: AiModelModelApi.Model) {
   return requestClient.put('/ai/model/update', data);
 }
 
-// 删除模型
+/** 删除模型 */
 export function deleteModel(id: number) {
   return requestClient.delete(`/ai/model/delete?id=${id}`);
 }
diff --git a/apps/web-ele/src/api/ai/model/tool/index.ts b/apps/web-ele/src/api/ai/model/tool/index.ts
index 6fac9d74b..03abc4e7b 100644
--- a/apps/web-ele/src/api/ai/model/tool/index.ts
+++ b/apps/web-ele/src/api/ai/model/tool/index.ts
@@ -11,33 +11,34 @@ export namespace AiModelToolApi {
   }
 }
 
-// 查询工具分页
+/** 查询工具分页 */
 export function getToolPage(params: PageParam) {
   return requestClient.get<PageResult<AiModelToolApi.Tool>>('/ai/tool/page', {
     params,
   });
 }
 
-// 查询工具详情
+/** 查询工具详情 */
 export function getTool(id: number) {
   return requestClient.get<AiModelToolApi.Tool>(`/ai/tool/get?id=${id}`);
 }
-// 新增工具
+
+/** 新增工具 */
 export function createTool(data: AiModelToolApi.Tool) {
   return requestClient.post('/ai/tool/create', data);
 }
 
-// 修改工具
+/** 修改工具 */
 export function updateTool(data: AiModelToolApi.Tool) {
   return requestClient.put('/ai/tool/update', data);
 }
 
-// 删除工具
+/** 删除工具 */
 export function deleteTool(id: number) {
   return requestClient.delete(`/ai/tool/delete?id=${id}`);
 }
 
-// 获取工具简单列表
+/** 获取工具简单列表 */
 export function getToolSimpleList() {
   return requestClient.get<AiModelToolApi.Tool[]>('/ai/tool/simple-list');
 }
diff --git a/apps/web-ele/src/api/ai/write/index.ts b/apps/web-ele/src/api/ai/write/index.ts
index 4ca1fc7aa..a9863d27d 100644
--- a/apps/web-ele/src/api/ai/write/index.ts
+++ b/apps/web-ele/src/api/ai/write/index.ts
@@ -9,8 +9,10 @@ import { requestClient } from '#/api/request';
 
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
 const accessStore = useAccessStore();
+
 export namespace AiWriteApi {
   export interface Write {
+    id?: number;
     type: AiWriteTypeEnum.REPLY | AiWriteTypeEnum.WRITING; // 1:撰写 2:回复
     prompt: string; // 写作内容提示 1。撰写 2回复
     originalContent: string; // 原文
@@ -26,29 +28,12 @@ export namespace AiWriteApi {
     createTime?: Date; // 创建时间
   }
 
-  export interface AiWritePageReq extends PageParam {
+  export interface AiWritePageReqVO extends PageParam {
     userId?: number; // 用户编号
     type?: AiWriteTypeEnum; //  写作类型
     platform?: string; // 平台
     createTime?: [string, string]; // 创建时间
   }
-
-  export interface AiWriteResp {
-    id: number;
-    userId: number;
-    type: number;
-    platform: string;
-    model: string;
-    prompt: string;
-    generatedContent: string;
-    originalContent: string;
-    length: number;
-    format: number;
-    tone: number;
-    language: number;
-    errorMessage: string;
-    createTime: string;
-  }
 }
 
 export function writeStream({
@@ -80,15 +65,14 @@ export function writeStream({
   });
 }
 
-// 获取写作列表
-export function getWritePage(params: any) {
-  return requestClient.get<PageResult<AiWriteApi.AiWritePageReq>>(
-    `/ai/write/page`,
-    { params },
-  );
+/** 获取写作列表 */
+export function getWritePage(params: AiWriteApi.AiWritePageReqVO) {
+  return requestClient.get<PageResult<AiWriteApi.Write>>(`/ai/write/page`, {
+    params,
+  });
 }
 
-// 删除音乐
+/** 删除写作记录 */
 export function deleteWrite(id: number) {
   return requestClient.delete(`/ai/write/delete`, { params: { id } });
 }
diff --git a/apps/web-ele/src/api/bpm/category/index.ts b/apps/web-ele/src/api/bpm/category/index.ts
index d8b5a9b3d..64cf36cb4 100644
--- a/apps/web-ele/src/api/bpm/category/index.ts
+++ b/apps/web-ele/src/api/bpm/category/index.ts
@@ -10,7 +10,7 @@ export namespace BpmCategoryApi {
     code: string;
     status: number;
     description?: string;
-    sort: number; // 分类排序
+    sort: number;
   }
 }
 
diff --git a/apps/web-ele/src/api/bpm/definition/index.ts b/apps/web-ele/src/api/bpm/definition/index.ts
index befd60650..502d5e366 100644
--- a/apps/web-ele/src/api/bpm/definition/index.ts
+++ b/apps/web-ele/src/api/bpm/definition/index.ts
@@ -6,7 +6,10 @@ export namespace BpmProcessDefinitionApi {
   /** 流程定义 */
   export interface ProcessDefinition {
     id: string;
+    key?: string;
     version: number;
+    name: string;
+    description: string;
     deploymentTime: number;
     suspensionState: number;
     modelType: number;
@@ -15,6 +18,7 @@ export namespace BpmProcessDefinitionApi {
     bpmnXml?: string;
     simpleModel?: string;
     formFields?: string[];
+    icon?: string;
   }
 }
 
diff --git a/apps/web-ele/src/api/bpm/form/index.ts b/apps/web-ele/src/api/bpm/form/index.ts
index 0789071b2..99c1299e9 100644
--- a/apps/web-ele/src/api/bpm/form/index.ts
+++ b/apps/web-ele/src/api/bpm/form/index.ts
@@ -5,7 +5,7 @@ import { requestClient } from '#/api/request';
 export namespace BpmFormApi {
   /** 流程表单 */
   export interface Form {
-    id?: number | undefined;
+    id?: number;
     name: string;
     conf: string;
     fields: string[];
@@ -23,7 +23,7 @@ export async function getFormPage(params: PageParam) {
 }
 
 /** 获取表单详情 */
-export async function getFormDetail(id: number) {
+export async function getForm(id: number) {
   return requestClient.get<BpmFormApi.Form>(`/bpm/form/get?id=${id}`);
 }
 
diff --git a/apps/web-ele/src/api/bpm/model/index.ts b/apps/web-ele/src/api/bpm/model/index.ts
index 443b85c5e..cd2afbc84 100644
--- a/apps/web-ele/src/api/bpm/model/index.ts
+++ b/apps/web-ele/src/api/bpm/model/index.ts
@@ -52,7 +52,7 @@ export interface ModelCategoryInfo {
 }
 
 /** 获取流程模型列表 */
-export async function getModelList(name: string | undefined) {
+export async function getModelList(name?: string) {
   return requestClient.get<BpmModelApi.Model[]>('/bpm/model/list', {
     params: { name },
   });
diff --git a/apps/web-ele/src/api/bpm/processInstance/index.ts b/apps/web-ele/src/api/bpm/processInstance/index.ts
index 369e0dddd..ecbc03855 100644
--- a/apps/web-ele/src/api/bpm/processInstance/index.ts
+++ b/apps/web-ele/src/api/bpm/processInstance/index.ts
@@ -1,5 +1,8 @@
+import type {
+  BpmCandidateStrategyEnum,
+  BpmNodeTypeEnum,
+} from '@vben/constants';
 import type { PageParam, PageResult } from '@vben/request';
-import type { BpmCandidateStrategyEnum, BpmNodeTypeEnum } from '@vben/utils';
 
 import type { BpmTaskApi } from '../task';
 
@@ -12,6 +15,7 @@ export namespace BpmProcessInstanceApi {
   export interface Task {
     id: number;
     name: string;
+    assigneeUser?: User;
   }
 
   export interface User {
@@ -35,11 +39,12 @@ export namespace BpmProcessInstanceApi {
     candidateStrategy?: BpmCandidateStrategyEnum;
     candidateUsers?: User[];
     endTime?: Date;
-    id: number;
+    id: string;
     name: string;
     nodeType: BpmNodeTypeEnum;
     startTime?: Date;
     status: number;
+    processInstanceId?: string;
     tasks: ApprovalTaskInfo[];
   }
 
@@ -47,6 +52,7 @@ export namespace BpmProcessInstanceApi {
   export interface ProcessInstance {
     businessKey: string;
     category: string;
+    categoryName?: string;
     createTime: string;
     endTime: string;
     fields: string[];
@@ -60,6 +66,10 @@ export namespace BpmProcessInstanceApi {
     startTime?: Date;
     startUser?: User;
     status: number;
+    summary?: {
+      key: string;
+      value: string;
+    }[];
     tasks?: BpmProcessInstanceApi.Task[];
   }
 
diff --git a/apps/web-ele/src/api/bpm/task/index.ts b/apps/web-ele/src/api/bpm/task/index.ts
index 510ea1747..63e1af886 100644
--- a/apps/web-ele/src/api/bpm/task/index.ts
+++ b/apps/web-ele/src/api/bpm/task/index.ts
@@ -13,6 +13,7 @@ export namespace BpmTaskApi {
     status: number; // 监听器状态
     event: string; // 监听事件
     valueType: string; // 监听器值类型
+    processInstance?: BpmProcessInstanceApi.ProcessInstance; // 流程实例
   }
 
   // 流程任务
@@ -130,3 +131,10 @@ export const getChildrenTaskList = async (id: string) => {
     `/bpm/task/list-by-parent-task-id?parentTaskId=${id}`,
   );
 };
+
+// 撤回任务
+export const withdrawTask = async (taskId: string) => {
+  return await requestClient.put('/bpm/task/withdraw', null, {
+    params: { taskId },
+  });
+};
diff --git a/apps/web-ele/src/api/mp/statistics/index.ts b/apps/web-ele/src/api/mp/statistics/index.ts
index e36073820..47200ff2b 100644
--- a/apps/web-ele/src/api/mp/statistics/index.ts
+++ b/apps/web-ele/src/api/mp/statistics/index.ts
@@ -1,13 +1,10 @@
-import type { PageParam } from '@vben/request';
-
 import { requestClient } from '#/api/request';
 
 export namespace MpStatisticsApi {
   /** 统计查询参数 */
-  export interface StatisticsQuery extends PageParam {
+  export interface StatisticsQuery {
     accountId: number;
-    beginDate: string;
-    endDate: string;
+    date: Date[];
   }
 
   /** 消息发送概况数据 */
diff --git a/apps/web-ele/src/components/description/description.vue b/apps/web-ele/src/components/description/description.vue
index 0c5a49b36..527c886f2 100644
--- a/apps/web-ele/src/components/description/description.vue
+++ b/apps/web-ele/src/components/description/description.vue
@@ -1,79 +1,172 @@
 <script lang="tsx">
-import type { DescriptionProps } from 'element-plus';
+import type { CSSProperties, PropType, Slots } from 'vue';
 
-import type { PropType } from 'vue';
+import type { DescriptionItemSchema, DescriptionProps } from './typing';
 
-import type { DescriptionItemSchema, DescriptionsOptions } from './typing';
+import { computed, defineComponent, ref, unref, useAttrs } from 'vue';
 
-import { defineComponent } from 'vue';
-
-import { get } from '@vben/utils';
+import { get, getNestedValue, isFunction } from '@vben/utils';
 
 import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
 
-/** 对 Descriptions 进行二次封装 */
-const Description = defineComponent({
-  name: 'Descriptions',
-  props: {
-    data: {
-      type: Object as PropType<Record<string, any>>,
-      default: () => ({}),
-    },
-    schema: {
-      type: Array as PropType<DescriptionItemSchema[]>,
-      default: () => [],
-    },
-    // Descriptions 原生 props
-    componentProps: {
-      type: Object as PropType<DescriptionProps>,
-      default: () => ({}),
+const props = {
+  // TODO @星语：bordered 不生效；之前好像是 border
+  bordered: { default: true, type: Boolean },
+  column: {
+    default: () => {
+      return { lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4 };
     },
+    type: [Number, Object],
   },
+  data: { type: Object },
+  schema: {
+    default: () => [],
+    type: Array as PropType<DescriptionItemSchema[]>,
+  },
+  size: {
+    default: 'default',
+    type: String,
+    validator: (v: string) =>
+      ['default', 'middle', 'small', undefined].includes(v),
+  },
+  title: { default: '', type: String },
+  direction: { default: 'horizontal', type: String },
+};
 
-  setup(props: DescriptionsOptions) {
-    // TODO @puhui999：每个 field 的 slot 的考虑
-    // TODO @puhui999：from 5.0：extra: () => getSlot(slots, 'extra')
-    /** 过滤掉不需要展示的 */
-    const shouldShowItem = (item: DescriptionItemSchema) => {
-      if (item.hidden === undefined) return true;
-      return typeof item.hidden === 'function'
-        ? !item.hidden(props.data)
-        : !item.hidden;
-    };
-    /** 渲染内容 */
-    const renderContent = (item: DescriptionItemSchema) => {
-      if (item.content) {
-        return typeof item.content === 'function'
-          ? item.content(props.data)
-          : item.content;
+function getSlot(slots: Slots, slot: string, data?: any) {
+  if (!slots || !Reflect.has(slots, slot)) {
+    return null;
+  }
+  if (!isFunction(slots[slot])) {
+    console.error(`${slot} is not a function!`);
+    return null;
+  }
+  const slotFn = slots[slot];
+  if (!slotFn) return null;
+  return slotFn({ data });
+}
+
+export default defineComponent({
+  name: 'Description',
+  props,
+  setup(props, { slots }) {
+    const propsRef = ref<null | Partial<DescriptionProps>>(null);
+
+    const prefixCls = 'description';
+    const attrs = useAttrs();
+
+    const getMergeProps = computed(() => {
+      return {
+        ...props,
+        ...(unref(propsRef) as any),
+      } as DescriptionProps;
+    });
+
+    const getProps = computed(() => {
+      const opt = {
+        ...unref(getMergeProps),
+      };
+      return opt as DescriptionProps;
+    });
+
+    const getDescriptionsProps = computed(() => {
+      return { ...unref(attrs), ...unref(getProps) } as DescriptionProps;
+    });
+
+    // 防止换行
+    function renderLabel({
+      label,
+      labelMinWidth,
+      labelStyle,
+    }: DescriptionItemSchema) {
+      if (!labelStyle && !labelMinWidth) {
+        return label;
       }
-      return item.field ? get(props.data, item.field) : null;
-    };
 
-    return () => (
-      <ElDescriptions
-        {...props}
-        border={props.componentProps?.border}
-        column={props.componentProps?.column}
-        direction={props.componentProps?.direction}
-        extra={props.componentProps?.extra}
-        size={props.componentProps?.size}
-        title={props.componentProps?.title}
-      >
-        {props.schema?.filter(shouldShowItem).map((item) => (
-          <ElDescriptionsItem
-            key={item.field || String(item.label)}
-            label={item.label as string}
-            span={item.span}
-          >
-            {renderContent(item)}
-          </ElDescriptionsItem>
-        ))}
-      </ElDescriptions>
-    );
+      const labelStyles: CSSProperties = {
+        ...labelStyle,
+        minWidth: `${labelMinWidth}px `,
+      };
+      return <div style={labelStyles}>{label}</div>;
+    }
+
+    function renderItem() {
+      const { data, schema } = unref(getProps);
+      return unref(schema)
+        .map((item) => {
+          const { contentMinWidth, field, render, show, span } = item;
+
+          if (show && isFunction(show) && !show(data)) {
+            return null;
+          }
+
+          function getContent() {
+            const _data = unref(getProps)?.data;
+            if (!_data) {
+              return null;
+            }
+            const getField = field.includes('.')
+              ? (getNestedValue(_data, field) ?? get(_data, field))
+              : get(_data, field);
+            // if (
+            //   getField &&
+            //   !Object.prototype.hasOwnProperty.call(toRefs(_data), field)
+            // ) {
+            //   return isFunction(render) ? render('', _data) : (getField ?? '');
+            // }
+            return isFunction(render)
+              ? render(getField, _data)
+              : (getField ?? '');
+          }
+
+          const width = contentMinWidth;
+          return (
+            <ElDescriptionsItem key={field} span={span}>
+              {{
+                label: () => {
+                  return renderLabel(item);
+                },
+                default: () => {
+                  if (item.slot) {
+                    // TODO @xingyu：这里要 inline 掉么？
+                    const slotContent = getSlot(slots, item.slot, data);
+                    return slotContent;
+                  }
+                  if (!contentMinWidth) {
+                    return getContent();
+                  }
+                  const style: CSSProperties = {
+                    minWidth: `${width}px`,
+                  };
+                  return <div style={style}>{getContent()}</div>;
+                },
+              }}
+            </ElDescriptionsItem>
+          );
+        })
+        .filter((item) => !!item);
+    }
+
+    function renderDesc() {
+      const extraSlot = getSlot(slots, 'extra');
+      const slotsObj: any = {
+        default: () => renderItem(),
+      };
+      if (extraSlot) {
+        slotsObj.extra = () => extraSlot;
+      }
+      return (
+        <ElDescriptions
+          class={`${prefixCls}`}
+          title={unref(getMergeProps).title}
+          {...(unref(getDescriptionsProps) as any)}
+        >
+          {slotsObj}
+        </ElDescriptions>
+      );
+    }
+
+    return () => renderDesc();
   },
 });
-
-// TODO @puhui999：from 5.0：emits: ['register'] 事件
-export default Description;
 </script>
diff --git a/apps/web-ele/src/components/description/typing.ts b/apps/web-ele/src/components/description/typing.ts
index 5a6e64751..eb16c33d2 100644
--- a/apps/web-ele/src/components/description/typing.ts
+++ b/apps/web-ele/src/components/description/typing.ts
@@ -1,27 +1,41 @@
-import type { DescriptionProps } from 'element-plus';
+import type { DescriptionProps as ElDescriptionProps } from 'element-plus';
+import type { JSX } from 'vue/jsx-runtime';
 
 import type { CSSProperties, VNode } from 'vue';
 
-// TODO @puhui999：【content】这个纠结下；1）vben2.0 是 render；https://doc.vvbin.cn/components/desc.html#usage 2）
-// TODO @puhui999：vben2.0 还有 sapn【done】、labelMinWidth、contentMinWidth
-// TODO @puhui999：【hidden】这个纠结下；1）vben2.0 是 show；
+import type { Recordable } from '@vben/types';
+
 export interface DescriptionItemSchema {
-  label: string | VNode; // 内容的描述
-  field?: string; // 对应 data 中的字段名
-  content?: ((data: any) => string | VNode) | string | VNode; // 自定义需要展示的内容，比如说 dict-tag
-  span?: number; // 包含列的数量
-  labelStyle?: CSSProperties; // 自定义标签样式
-  contentStyle?: CSSProperties; // 自定义内容样式
-  hidden?: ((data: any) => boolean) | boolean; // 是否显示
+  labelMinWidth?: number;
+  contentMinWidth?: number;
+  // 自定义标签样式
+  labelStyle?: CSSProperties;
+  // 对应 data 中的字段名
+  field: string;
+  // 内容的描述
+  label: JSX.Element | string | VNode;
+  // 包含列的数量
+  span?: number;
+  // 是否显示
+  show?: (...arg: any) => boolean;
+  // 插槽名称
+  slot?: string;
+  // 自定义需要展示的内容
+  render?: (
+    val: any,
+    data?: Recordable<any>,
+  ) => Element | JSX.Element | number | string | undefined | VNode;
 }
 
-// TODO @puhui999：vben2.0 还有 title【done】、bordered【done】d、useCollapse、collapseOptions
-// TODO @puhui999：from 5.0：bordered 默认为 true
-// TODO @puhui999：from 5.0：column 默认为 lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4
-// TODO @puhui999：from 5.0：size 默认为 small；有 'default', 'middle', 'small', undefined
-// TODO @puhui999：from 5.0：useCollapse 默认为 true
-export interface DescriptionsOptions {
-  data?: Record<string, any>; // 数据
-  schema?: DescriptionItemSchema[]; // 描述项配置
-  componentProps?: DescriptionProps; // antd Descriptions 组件参数
+export interface DescriptionProps extends ElDescriptionProps {
+  // 描述项配置
+  schema: DescriptionItemSchema[];
+  // 数据
+  data: Recordable<any>;
+  // 是否包含边框
+  bordered?: boolean;
+}
+
+export interface DescInstance {
+  setDescProps(descProps: Partial<DescriptionProps>): void;
 }
diff --git a/apps/web-ele/src/components/description/use-description.ts b/apps/web-ele/src/components/description/use-description.ts
index c131be26a..fd24920f0 100644
--- a/apps/web-ele/src/components/description/use-description.ts
+++ b/apps/web-ele/src/components/description/use-description.ts
@@ -1,71 +1,31 @@
-import type { DescriptionsOptions } from './typing';
+import type { Component } from 'vue';
 
-import { defineComponent, h, isReactive, reactive, watch } from 'vue';
+import type { DescInstance, DescriptionProps } from './typing';
+
+import { h, reactive } from 'vue';
 
 import Description from './description.vue';
 
-/** 描述列表 api 定义 */
-class DescriptionApi {
-  private state = reactive<Record<string, any>>({});
+export function useDescription(options?: Partial<DescriptionProps>) {
+  const propsState = reactive<Partial<DescriptionProps>>(options || {});
 
-  constructor(options: DescriptionsOptions) {
-    this.state = { ...options };
-  }
+  const api: DescInstance = {
+    setDescProps: (descProps: Partial<DescriptionProps>): void => {
+      Object.assign(propsState, descProps);
+    },
+  };
 
-  getState(): DescriptionsOptions {
-    return this.state as DescriptionsOptions;
-  }
-
-  // TODO @puhui999：【setState】纠结下：1）vben2.0 是 data https://doc.vvbin.cn/components/desc.html#usage；
-  setState(newState: Partial<DescriptionsOptions>) {
-    this.state = { ...this.state, ...newState };
-  }
-}
-
-export type ExtendedDescriptionApi = DescriptionApi;
-
-export function useDescription(options: DescriptionsOptions) {
-  const IS_REACTIVE = isReactive(options);
-  const api = new DescriptionApi(options);
-  // 扩展API
-  const extendedApi: ExtendedDescriptionApi = api as never;
-  const Desc = defineComponent({
+  // 创建一个包装组件，将 propsState 合并到 props 中
+  const DescriptionWrapper: Component = {
     name: 'UseDescription',
     inheritAttrs: false,
-    setup(_, { attrs, slots }) {
-      // 合并props和attrs到state
-      api.setState({ ...attrs });
-
-      return () =>
-        h(
-          Description,
-          {
-            ...api.getState(),
-            ...attrs,
-          },
-          slots,
-        );
+    setup(_props, { attrs, slots }) {
+      return () => {
+        // @ts-ignore - 避免类型实例化过深
+        return h(Description, { ...propsState, ...attrs }, slots);
+      };
     },
-  });
+  };
 
-  // 响应式支持
-  if (IS_REACTIVE) {
-    watch(
-      () => options.schema,
-      (newSchema) => {
-        api.setState({ schema: newSchema });
-      },
-      { immediate: true, deep: true },
-    );
-
-    watch(
-      () => options.data,
-      (newData) => {
-        api.setState({ data: newData });
-      },
-      { immediate: true, deep: true },
-    );
-  }
-
-  return [Desc, extendedApi] as const;
+  return [DescriptionWrapper, api] as const;
 }
diff --git a/apps/web-ele/src/components/form-create/rules/use-dict-select.ts b/apps/web-ele/src/components/form-create/rules/use-dict-select.ts
index c9c438e8b..104277195 100644
--- a/apps/web-ele/src/components/form-create/rules/use-dict-select.ts
+++ b/apps/web-ele/src/components/form-create/rules/use-dict-select.ts
@@ -1,8 +1,10 @@
+import type { SystemDictTypeApi } from '#/api/system/dict/type';
+
 import { onMounted, ref } from 'vue';
 
 import { buildUUID, cloneDeep } from '@vben/utils';
 
-import * as DictDataApi from '#/api/system/dict/type';
+import { getSimpleDictTypeList } from '#/api/system/dict/type';
 import {
   localeProps,
   makeRequiredRule,
@@ -18,12 +20,12 @@ export const useDictSelectRule = () => {
   const rules = cloneDeep(selectRule);
   const dictOptions = ref<{ label: string; value: string }[]>([]); // 字典类型下拉数据
   onMounted(async () => {
-    const data = await DictDataApi.getSimpleDictTypeList();
+    const data = await getSimpleDictTypeList();
     if (!data || data.length === 0) {
       return;
     }
     dictOptions.value =
-      data?.map((item: DictDataApi.SystemDictTypeApi.DictType) => ({
+      data?.map((item: SystemDictTypeApi.DictType) => ({
         label: item.name,
         value: item.type,
       })) ?? [];
diff --git a/apps/web-ele/src/components/form-create/typing.ts b/apps/web-ele/src/components/form-create/typing.ts
index 13f98f973..35c1a39fc 100644
--- a/apps/web-ele/src/components/form-create/typing.ts
+++ b/apps/web-ele/src/components/form-create/typing.ts
@@ -1,9 +1,7 @@
-import type { Rule } from '@form-create/element-ui'; // 左侧拖拽按钮
-
 /** 数据字典 Select 选择器组件 Props 类型 */
 export interface DictSelectProps {
   dictType: string; // 字典类型
-  valueType?: 'bool' | 'int' | 'str'; // 字典值类型 TODO @芋艿：'boolean' | 'number' | 'string'；需要和 vue3 一起统一！
+  valueType?: 'bool' | 'int' | 'str'; // 字典值类型
   selectType?: 'checkbox' | 'radio' | 'select'; // 选择器类型，下拉框 select、多选框 checkbox、单选框 radio
   formCreateInject?: any;
 }
@@ -22,25 +20,6 @@ export interface Menu {
   list: MenuItem[];
 }
 
-export type MenuList = Array<Menu>;
-
-// TODO @dhb52：MenuList、Menu、MenuItem、DragRule 这几个，是不是没用到呀？
-// 拖拽组件的规则
-export interface DragRule {
-  icon: string;
-  name: string;
-  label: string;
-  children?: string;
-  inside?: true;
-  drag?: string | true;
-  dragBtn?: false;
-  mask?: false;
-
-  rule(): Rule;
-
-  props(v: any, v1: any): Rule[];
-}
-
 /** 通用 API 下拉组件 Props 类型 */
 export interface ApiSelectProps {
   name: string; // 组件名称
diff --git a/apps/web-ele/src/components/summary-card/index.ts b/apps/web-ele/src/components/summary-card/index.ts
deleted file mode 100644
index 598d73d61..000000000
--- a/apps/web-ele/src/components/summary-card/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as SummaryCard } from './summary-card.vue';
-export type { SummaryCardProps } from './typing';
diff --git a/apps/web-ele/src/components/summary-card/summary-card.vue b/apps/web-ele/src/components/summary-card/summary-card.vue
deleted file mode 100644
index 55fe7d17d..000000000
--- a/apps/web-ele/src/components/summary-card/summary-card.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script lang="ts" setup>
-import type { SummaryCardProps } from './typing';
-
-import { CountTo } from '@vben/common-ui';
-import { IconifyIcon } from '@vben/icons';
-
-import { ElTooltip } from 'element-plus';
-
-/** 统计卡片 */
-defineOptions({ name: 'SummaryCard' });
-
-defineProps<SummaryCardProps>();
-</script>
-<template>
-  <div
-    class="flex flex-row items-center gap-3 rounded bg-[var(--el-bg-color-overlay)] p-4"
-  >
-    <div
-      class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded"
-      :class="`${iconColor} ${iconBgColor}`"
-    >
-      <IconifyIcon v-if="icon" :icon="icon" class="!text-6" />
-    </div>
-    <div class="flex flex-col gap-1">
-      <div class="flex items-center gap-1">
-        <span class="text-base">{{ title }}</span>
-        <ElTooltip :content="tooltip" placement="topLeft" v-if="tooltip">
-          <IconifyIcon
-            icon="lucide:circle-alert"
-            class="item-center !text-3 flex"
-          />
-        </ElTooltip>
-      </div>
-      <div class="flex flex-row items-baseline gap-2">
-        <div class="text-lg">
-          <CountTo
-            :prefix="prefix"
-            :end-val="value ?? 0"
-            :decimals="decimals ?? 0"
-          />
-        </div>
-        <span
-          v-if="percent !== undefined"
-          :class="Number(percent) > 0 ? 'text-red-500' : 'text-green-500'"
-        >
-          <span class="text-sm">{{ Math.abs(Number(percent)) }}%</span>
-          <IconifyIcon
-            :icon="
-              Number(percent) > 0 ? 'lucide:chevron-up' : 'lucide:chevron-down'
-            "
-            class="ml-0.5 !text-sm"
-          />
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/apps/web-ele/src/components/summary-card/typing.ts b/apps/web-ele/src/components/summary-card/typing.ts
deleted file mode 100644
index 0ef1fdc6f..000000000
--- a/apps/web-ele/src/components/summary-card/typing.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export interface SummaryCardProps {
-  title: string;
-  tooltip?: string;
-  icon?: string;
-  iconColor?: string;
-  iconBgColor?: string;
-  prefix?: string;
-  value?: number;
-  decimals?: number;
-  percent?: number | string;
-}
diff --git a/apps/web-ele/src/components/upload/image-upload.vue b/apps/web-ele/src/components/upload/image-upload.vue
index e8cc6a889..322c2cde1 100644
--- a/apps/web-ele/src/components/upload/image-upload.vue
+++ b/apps/web-ele/src/components/upload/image-upload.vue
@@ -11,7 +11,7 @@ import type { UploadListType } from './typing';
 
 import type { AxiosProgressEvent } from '#/api/infra/file';
 
-import { nextTick, ref, toRefs, watch } from 'vue';
+import { ref, toRefs, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
@@ -25,6 +25,7 @@ import { useUpload, useUploadType } from './use-upload';
 
 defineOptions({ name: 'ImageUpload', inheritAttrs: false });
 
+// TODO @xingyu：这个要不要抽时间看看，upload 组件，和 antd 要不要进一步对齐下；（主要是代码风格。微信沟通~~~）
 const props = withDefaults(
   defineProps<{
     // 根据后缀，或者其他
@@ -208,6 +209,20 @@ async function customRequest(options: UploadRequestOptions) {
       } as unknown as UploadProgressEvent);
     };
     const res = await api?.(options.file, progressEvent);
+
+    // TODO @xingyu：看看有没更好的实现代码。
+    // 更新 fileList 中对应文件的 URL 为服务器返回的真实 URL
+    const uploadedFile = fileList.value.find(
+      (file) => file.uid === (options.file as any).uid,
+    );
+    if (uploadedFile) {
+      const responseData = res?.data || res;
+      uploadedFile.url =
+        props.resultField && responseData[props.resultField]
+          ? responseData[props.resultField]
+          : responseData.url || responseData;
+    }
+
     options.onSuccess!(res);
     ElMessage.success($t('ui.upload.uploadSuccess'));
 
@@ -237,21 +252,6 @@ function getValue() {
   }
   return list;
 }
-
-// 编辑按钮：触发文件选择
-const triggerEdit = () => {
-  if (props.disabled) return;
-  // 只查找当前 upload-box 下的 input
-  nextTick(() => {
-    const uploadBox = document.querySelector('.upload-box');
-    if (uploadBox) {
-      const input = uploadBox.querySelector(
-        'input[type="file"]',
-      ) as HTMLInputElement | null;
-      if (input) input.click();
-    }
-  });
-};
 </script>
 
 <template>
@@ -277,10 +277,6 @@ const triggerEdit = () => {
             <IconifyIcon icon="lucide:circle-plus" />
             <span>详情</span>
           </div>
-          <div v-if="!disabled" class="handle-icon" @click="triggerEdit">
-            <IconifyIcon icon="lucide:edit" />
-            <span>编辑</span>
-          </div>
           <div
             v-if="!disabled"
             class="handle-icon"
@@ -317,6 +313,7 @@ const triggerEdit = () => {
         </div>
       </ElUpload>
     </template>
+    <!-- TODO @xingyu：相比 antd 来说，EL 有点丑；貌似是这里展示的位置不太对； -->
     <div v-if="showDescription" class="mt-2 text-xs text-gray-500">
       {{ getStringAccept }}
     </div>
diff --git a/apps/web-ele/src/router/routes/modules/bpm.ts b/apps/web-ele/src/router/routes/modules/bpm.ts
new file mode 100644
index 000000000..d732af975
--- /dev/null
+++ b/apps/web-ele/src/router/routes/modules/bpm.ts
@@ -0,0 +1,117 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/bpm',
+    name: 'bpm',
+    meta: {
+      title: '工作流',
+      hideInMenu: true,
+    },
+    children: [
+      // {
+      //   path: 'task',
+      //   name: 'BpmTask',
+      //   meta: {
+      //     title: '审批中心',
+      //     icon: 'ant-design:history-outlined',
+      //   },
+      //   children: [
+      //     {
+      //       path: 'my',
+      //       name: 'BpmTaskMy',
+      //       component: () => import('#/views/bpm/processInstance/index.vue'),
+      //       meta: {
+      //         title: '我的流程',
+      //       },
+      //     },
+      //   ],
+      // },
+      // {
+      //   path: 'process-instance/detail',
+      //   component: () => import('#/views/bpm/processInstance/detail/index.vue'),
+      //   name: 'BpmProcessInstanceDetail',
+      //   meta: {
+      //     title: '流程详情',
+      //     activePath: '/bpm/task/my',
+      //     icon: 'ant-design:history-outlined',
+      //     keepAlive: false,
+      //     hideInMenu: true,
+      //   },
+      //   props: (route) => {
+      //     return {
+      //       id: route.query.id,
+      //       taskId: route.query.taskId,
+      //       activityId: route.query.activityId,
+      //     };
+      //   },
+      // },
+      {
+        path: '/bpm/manager/form/edit',
+        name: 'BpmFormEditor',
+        component: () => import('#/views/bpm/form/designer/index.vue'),
+        meta: {
+          title: '设计流程表单',
+          activePath: '/bpm/manager/form',
+        },
+        props: (route) => {
+          return {
+            id: route.query.id,
+            type: route.query.type,
+            copyId: route.query.copyId,
+          };
+        },
+      },
+      // {
+      //   path: 'manager/model/create',
+      //   component: () => import('#/views/bpm/model/form/index.vue'),
+      //   name: 'BpmModelCreate',
+      //   meta: {
+      //     title: '创建流程',
+      //     activePath: '/bpm/manager/model',
+      //     icon: 'carbon:flow-connection',
+      //     hideInMenu: true,
+      //     keepAlive: true,
+      //   },
+      // },
+      // {
+      //   path: 'manager/model/:type/:id',
+      //   component: () => import('#/views/bpm/model/form/index.vue'),
+      //   name: 'BpmModelUpdate',
+      //   meta: {
+      //     title: '修改流程',
+      //     activePath: '/bpm/manager/model',
+      //     icon: 'carbon:flow-connection',
+      //     hideInMenu: true,
+      //     keepAlive: true,
+      //   },
+      // },
+      // {
+      //   path: 'manager/definition',
+      //   component: () => import('#/views/bpm/model/definition/index.vue'),
+      //   name: 'BpmProcessDefinition',
+      //   meta: {
+      //     title: '流程定义',
+      //     activePath: '/bpm/manager/model',
+      //     icon: 'carbon:flow-modeler',
+      //     hideInMenu: true,
+      //     keepAlive: true,
+      //   },
+      // },
+      {
+        path: 'process-instance/report',
+        component: () => import('#/views/bpm/processInstance/report/index.vue'),
+        name: 'BpmProcessInstanceReport',
+        meta: {
+          title: '数据报表',
+          activePath: '/bpm/manager/model',
+          icon: 'carbon:data-2',
+          hideInMenu: true,
+          keepAlive: true,
+        },
+      },
+    ],
+  },
+];
+
+export default routes;
diff --git a/apps/web-ele/src/router/routes/modules/diy.ts b/apps/web-ele/src/router/routes/modules/diy.ts
deleted file mode 100644
index 68bccd3ca..000000000
--- a/apps/web-ele/src/router/routes/modules/diy.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router';
-
-// TODO @chihuo：这个合并到 mall.ts 里
-const routes: RouteRecordRaw[] = [
-  {
-    path: '/diy',
-    name: 'DiyCenter',
-    meta: {
-      title: '营销中心',
-      icon: 'lucide:shopping-bag',
-      keepAlive: true,
-      hideInMenu: true,
-    },
-    children: [
-      {
-        path: String.raw`template/decorate/:id(\d+)`,
-        name: 'DiyTemplateDecorate',
-        meta: {
-          title: '模板装修',
-          activePath: '/mall/promotion/diy-template/diy-template',
-        },
-        component: () =>
-          import('#/views/mall/promotion/diy/template/modules/decorate.vue'),
-      },
-      {
-        path: 'page/decorate/:id',
-        name: 'DiyPageDecorate',
-        meta: {
-          title: '页面装修',
-          noCache: false,
-          hidden: true,
-          activePath: '/mall/promotion/diy-template/diy-page',
-        },
-        component: () =>
-          import('#/views/mall/promotion/diy/page/modules/decorate.vue'),
-      },
-    ],
-  },
-];
-
-export default routes;
diff --git a/apps/web-ele/src/router/routes/modules/mall.ts b/apps/web-ele/src/router/routes/modules/mall.ts
index d84e1c703..1c2f40496 100644
--- a/apps/web-ele/src/router/routes/modules/mall.ts
+++ b/apps/web-ele/src/router/routes/modules/mall.ts
@@ -80,6 +80,40 @@ const routes: RouteRecordRaw[] = [
       },
     ],
   },
+  {
+    path: '/diy',
+    name: 'DiyCenter',
+    meta: {
+      title: '营销中心',
+      icon: 'lucide:shopping-bag',
+      keepAlive: true,
+      hideInMenu: true,
+    },
+    children: [
+      {
+        path: String.raw`template/decorate/:id(\d+)`,
+        name: 'DiyTemplateDecorate',
+        meta: {
+          title: '模板装修',
+          activePath: '/mall/promotion/diy-template/diy-template',
+        },
+        component: () =>
+          import('#/views/mall/promotion/diy/template/decorate/index.vue'),
+      },
+      {
+        path: 'page/decorate/:id',
+        name: 'DiyPageDecorate',
+        meta: {
+          title: '页面装修',
+          noCache: false,
+          hidden: true,
+          activePath: '/mall/promotion/diy-template/diy-page',
+        },
+        component: () =>
+          import('#/views/mall/promotion/diy/page/decorate/index.vue'),
+      },
+    ],
+  },
 ];
 
 export default routes;
diff --git a/apps/web-ele/src/views/_core/authentication/sso-login.vue b/apps/web-ele/src/views/_core/authentication/sso-login.vue
index 1bc7ad9b1..aba72ac83 100644
--- a/apps/web-ele/src/views/_core/authentication/sso-login.vue
+++ b/apps/web-ele/src/views/_core/authentication/sso-login.vue
@@ -11,7 +11,7 @@ import { authorize, getAuthorize } from '#/api/system/oauth2/open';
 
 defineOptions({ name: 'SSOLogin' });
 
-const { query } = useRoute(); // 路由参数
+const { query } = useRoute();
 
 const client = ref({
   name: '',
diff --git a/apps/web-ele/src/views/ai/chat/manager/data.ts b/apps/web-ele/src/views/ai/chat/manager/data.ts
new file mode 100644
index 000000000..266d44ce6
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/manager/data.ts
@@ -0,0 +1,223 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { DICT_TYPE } from '@vben/constants';
+
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 关联数据 */
+let userList: SystemUserApi.User[] = [];
+getSimpleUserList().then((data) => (userList = data));
+
+/** 列表的搜索表单 */
+export function useGridFormSchemaConversation(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户编号',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'title',
+      label: '聊天标题',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入聊天标题',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumnsConversation(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '对话编号',
+      fixed: 'left',
+      minWidth: 180,
+    },
+    {
+      field: 'title',
+      title: '对话标题',
+      minWidth: 180,
+      fixed: 'left',
+    },
+    {
+      title: '用户',
+      minWidth: 180,
+      field: 'userId',
+      formatter: ({ cellValue }) => {
+        if (cellValue === 0) {
+          return '系统';
+        }
+        return userList.find((user) => user.id === cellValue)?.nickname || '-';
+      },
+    },
+    {
+      field: 'roleName',
+      title: '角色',
+      minWidth: 180,
+    },
+    {
+      field: 'model',
+      title: '模型标识',
+      minWidth: 180,
+    },
+    {
+      field: 'messageCount',
+      title: '消息数',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'temperature',
+      title: '温度参数',
+      minWidth: 80,
+    },
+    {
+      title: '回复数 Token 数',
+      field: 'maxTokens',
+      minWidth: 120,
+    },
+    {
+      title: '上下文数量',
+      field: 'maxContexts',
+      minWidth: 120,
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchemaMessage(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'conversationId',
+      label: '对话编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入对话编号',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        placeholder: '请选择用户编号',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumnsMessage(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '消息编号',
+      fixed: 'left',
+      minWidth: 180,
+    },
+    {
+      field: 'conversationId',
+      title: '对话编号',
+      minWidth: 180,
+      fixed: 'left',
+    },
+    {
+      title: '用户',
+      minWidth: 180,
+      field: 'userId',
+      formatter: ({ cellValue }) =>
+        userList.find((user) => user.id === cellValue)?.nickname || '-',
+    },
+    {
+      field: 'roleName',
+      title: '角色',
+      minWidth: 180,
+    },
+    {
+      field: 'type',
+      title: '消息类型',
+      minWidth: 100,
+    },
+    {
+      field: 'model',
+      title: '模型标识',
+      minWidth: 180,
+    },
+    {
+      field: 'content',
+      title: '消息内容',
+      minWidth: 300,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'replyId',
+      title: '回复消息编号',
+      minWidth: 180,
+    },
+    {
+      title: '携带上下文',
+      field: 'useContext',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+      minWidth: 100,
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/chat/manager/index.vue b/apps/web-ele/src/views/ai/chat/manager/index.vue
new file mode 100644
index 000000000..e87c3d30f
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/manager/index.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { ElTabs } from 'element-plus';
+
+import ChatConversationList from './modules/conversation-list.vue';
+import ChatMessageList from './modules/message-list.vue';
+
+const activeTabName = ref('conversation');
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="AI 对话聊天" url="https://doc.iocoder.cn/ai/chat/" />
+    </template>
+
+    <ElTabs v-model:model-value="activeTabName">
+      <ElTabs.TabPane label="对话列表" name="conversation">
+        <ChatConversationList />
+      </ElTabs.TabPane>
+      <ElTabs.TabPane label="消息列表" name="message">
+        <ChatMessageList />
+      </ElTabs.TabPane>
+    </ElTabs>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/chat/manager/modules/conversation-list.vue b/apps/web-ele/src/views/ai/chat/manager/modules/conversation-list.vue
new file mode 100644
index 000000000..b6ea3dcc9
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/manager/modules/conversation-list.vue
@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
+
+import { Page } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteChatConversationByAdmin,
+  getChatConversationPage,
+} from '#/api/ai/chat/conversation';
+import { $t } from '#/locales';
+
+import {
+  useGridColumnsConversation,
+  useGridFormSchemaConversation,
+} from '../data';
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 删除对话 */
+async function handleDelete(row: AiChatConversationApi.ChatConversation) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.id]),
+  });
+  try {
+    await deleteChatConversationByAdmin(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchemaConversation(),
+  },
+  gridOptions: {
+    columns: useGridColumnsConversation(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getChatConversationPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiChatConversationApi.ChatConversation>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="对话列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:chat-conversation:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/chat/manager/modules/message-list.vue b/apps/web-ele/src/views/ai/chat/manager/modules/message-list.vue
new file mode 100644
index 000000000..f5682141b
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/manager/modules/message-list.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
+
+import { Page } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteChatMessageByAdmin,
+  getChatMessagePage,
+} from '#/api/ai/chat/message';
+import { $t } from '#/locales';
+
+import { useGridColumnsMessage, useGridFormSchemaMessage } from '../data';
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 删除消息 */
+async function handleDelete(row: AiChatConversationApi.ChatConversation) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.id]),
+  });
+  try {
+    await deleteChatMessageByAdmin(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchemaMessage(),
+  },
+  gridOptions: {
+    columns: useGridColumnsMessage(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getChatMessagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiChatConversationApi.ChatConversation>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="消息列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:chat-message:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/image/manager/data.ts b/apps/web-ele/src/views/ai/image/manager/data.ts
new file mode 100644
index 000000000..68cc3c4ee
--- /dev/null
+++ b/apps/web-ele/src/views/ai/image/manager/data.ts
@@ -0,0 +1,180 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+let userList: SystemUserApi.User[] = [];
+async function getUserData() {
+  userList = await getSimpleUserList();
+}
+
+getUserData();
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        placeholder: '请选择用户编号',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'platform',
+      label: '平台',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择平台',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '绘画状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择绘画状态',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.AI_IMAGE_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'publicStatus',
+      label: '是否发布',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择是否发布',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  onPublicStatusChange?: (
+    newStatus: boolean,
+    row: any,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 180,
+      fixed: 'left',
+    },
+    {
+      field: 'picUrl',
+      title: '图片',
+      minWidth: 110,
+      fixed: 'left',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'userId',
+      title: '用户',
+      minWidth: 180,
+      formatter: ({ cellValue }) =>
+        userList.find((user) => user.id === cellValue)?.nickname || '-',
+    },
+    {
+      field: 'platform',
+      title: '平台',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_PLATFORM },
+      },
+    },
+    {
+      field: 'model',
+      title: '模型',
+      minWidth: 180,
+    },
+    {
+      field: 'status',
+      title: '绘画状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_IMAGE_STATUS },
+      },
+    },
+    {
+      minWidth: 100,
+      title: '是否发布',
+      field: 'publicStatus',
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onPublicStatusChange },
+        name: 'CellSwitch',
+        props: {
+          activeValue: true,
+          inactiveValue: false,
+        },
+      },
+    },
+    {
+      field: 'prompt',
+      title: '提示词',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'width',
+      title: '宽度',
+      minWidth: 180,
+    },
+    {
+      field: 'height',
+      title: '高度',
+      minWidth: 180,
+    },
+    {
+      field: 'errorMessage',
+      title: '错误信息',
+      minWidth: 180,
+    },
+    {
+      field: 'taskId',
+      title: '任务编号',
+      minWidth: 180,
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/image/manager/index.vue b/apps/web-ele/src/views/ai/image/manager/index.vue
new file mode 100644
index 000000000..576490053
--- /dev/null
+++ b/apps/web-ele/src/views/ai/image/manager/index.vue
@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiImageApi } from '#/api/ai/image';
+
+import { confirm, DocAlert, Page } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteImage, getImagePage, updateImage } from '#/api/ai/image';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 删除图片 */
+async function handleDelete(row: AiImageApi.Image) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.id]),
+  });
+  try {
+    await deleteImage(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 修改是否发布 */
+async function handleUpdatePublicStatusChange(
+  newStatus: boolean,
+  row: AiImageApi.Image,
+): Promise<boolean | undefined> {
+  const text = newStatus ? '公开' : '私有';
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `确认要将该图片切换为【${text}】吗？`,
+    })
+      .then(async () => {
+        // 更新图片状态
+        await updateImage({
+          id: row.id,
+          publicStatus: newStatus,
+        });
+        // 提示并返回成功
+        ElMessage.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(handleUpdatePublicStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getImagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiImageApi.Image>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="AI 绘图创作" url="https://doc.iocoder.cn/ai/image/" />
+    </template>
+    <Grid table-title="绘画管理列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:image:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/mindmap/index/index.vue b/apps/web-ele/src/views/ai/mindmap/index/index.vue
new file mode 100644
index 000000000..0bdb46eca
--- /dev/null
+++ b/apps/web-ele/src/views/ai/mindmap/index/index.vue
@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import type { AiMindmapApi } from '#/api/ai/mindmap';
+
+import { nextTick, onMounted, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { MindMapContentExample } from '@vben/constants';
+
+import { ElMessage } from 'element-plus';
+
+import { generateMindMap } from '#/api/ai/mindmap';
+
+import Left from './modules/left.vue';
+import Right from './modules/right.vue';
+
+const ctrl = ref<AbortController>(); // 请求控制
+const isGenerating = ref(false); // 是否正在生成思维导图
+const isStart = ref(false); // 开始生成，用来清空思维导图
+const isEnd = ref(true); // 用来判断结束的时候渲染思维导图
+const generatedContent = ref(''); // 生成思维导图结果
+
+const leftRef = ref<InstanceType<typeof Left>>(); // 左边组件
+const rightRef = ref(); // 右边组件
+
+/** 使用已有内容直接生成 */
+function directGenerate(existPrompt: string) {
+  isEnd.value = false; // 先设置为 false 再设置为 true，让子组建的 watch 能够监听到
+  generatedContent.value = existPrompt;
+  isEnd.value = true;
+}
+
+/** 提交生成 */
+function handleSubmit(data: AiMindmapApi.AiMindMapGenerateReqVO) {
+  isGenerating.value = true;
+  isStart.value = true;
+  isEnd.value = false;
+  ctrl.value = new AbortController(); // 请求控制赋值
+  generatedContent.value = ''; // 清空生成数据
+  generateMindMap({
+    data,
+    onMessage: async (res: any) => {
+      const { code, data, msg } = JSON.parse(res.data);
+      if (code !== 0) {
+        ElMessage.error(`生成思维导图异常! ${msg}`);
+        handleStopStream();
+        return;
+      }
+      generatedContent.value = generatedContent.value + data;
+      await nextTick();
+      rightRef.value?.scrollBottom();
+    },
+    onClose() {
+      isEnd.value = true;
+      leftRef.value?.setGeneratedContent(generatedContent.value);
+      handleStopStream();
+    },
+    onError(err) {
+      console.error('生成思维导图失败', err);
+      handleStopStream();
+      // 需要抛出异常，禁止重试
+      throw err;
+    },
+    ctrl: ctrl.value,
+  });
+}
+
+/** 停止 stream 生成 */
+function handleStopStream() {
+  isGenerating.value = false;
+  isStart.value = false;
+  ctrl.value?.abort();
+}
+
+/** 初始化 */
+onMounted(() => {
+  generatedContent.value = MindMapContentExample;
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="absolute bottom-0 left-0 right-0 top-0 m-4 flex">
+      <Left
+        ref="leftRef"
+        class="mr-4"
+        :is-generating="isGenerating"
+        @submit="handleSubmit"
+        @direct-generate="directGenerate"
+      />
+      <Right
+        ref="rightRef"
+        :generated-content="generatedContent"
+        :is-end="isEnd"
+        :is-generating="isGenerating"
+        :is-start="isStart"
+      />
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/mindmap/index/modules/left.vue b/apps/web-ele/src/views/ai/mindmap/index/modules/left.vue
new file mode 100644
index 000000000..39fd218c8
--- /dev/null
+++ b/apps/web-ele/src/views/ai/mindmap/index/modules/left.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+
+import { MindMapContentExample } from '@vben/constants';
+
+import { ElButton, ElInput } from 'element-plus';
+
+defineProps<{
+  isGenerating: boolean;
+}>();
+
+const emits = defineEmits(['submit', 'directGenerate']);
+
+const formData = reactive({
+  prompt: '',
+});
+
+const generatedContent = ref(MindMapContentExample); // 已有的内容
+
+defineExpose({
+  setGeneratedContent(newContent: string) {
+    // 设置已有的内容，在生成结束的时候将结果赋值给该值
+    generatedContent.value = newContent;
+  },
+});
+</script>
+<template>
+  <div class="bg-card flex w-80 flex-col rounded-lg p-5">
+    <h3 class="text-primary h-7 w-full text-center text-xl leading-7">
+      思维导图创作中心
+    </h3>
+    <div class="mt-4 flex-grow overflow-y-auto">
+      <div>
+        <b>您的需求？</b>
+        <ElInput
+          v-model="formData.prompt"
+          type="textarea"
+          :maxlength="1024"
+          :rows="8"
+          class="mt-4 w-full"
+          placeholder="请输入提示词，让AI帮你完善"
+          show-word-limit
+        />
+        <ElButton
+          class="mt-4 !w-full"
+          type="primary"
+          :loading="isGenerating"
+          @click="emits('submit', formData)"
+        >
+          智能生成思维导图
+        </ElButton>
+      </div>
+      <div class="mt-7">
+        <b>使用已有内容生成？</b>
+        <ElInput
+          v-model="generatedContent"
+          type="textarea"
+          :maxlength="1024"
+          :rows="8"
+          class="mt-4 w-full"
+          placeholder="例如：童话里的小屋应该是什么样子？"
+          show-word-limit
+        />
+        <ElButton
+          class="mt-4 !w-full"
+          type="primary"
+          @click="emits('directGenerate', generatedContent)"
+          :disabled="isGenerating"
+        >
+          直接生成
+        </ElButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/mindmap/index/modules/right.vue b/apps/web-ele/src/views/ai/mindmap/index/modules/right.vue
new file mode 100644
index 000000000..5adc66aaf
--- /dev/null
+++ b/apps/web-ele/src/views/ai/mindmap/index/modules/right.vue
@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import {
+  MarkdownIt,
+  Markmap,
+  Toolbar,
+  Transformer,
+} from '@vben/plugins/markmap';
+import { downloadImageByCanvas } from '@vben/utils';
+
+import { ElButton, ElCard, ElMessage } from 'element-plus';
+
+const props = defineProps<{
+  generatedContent: string; // 生成结果
+  isEnd: boolean; // 是否结束
+  isGenerating: boolean; // 是否正在生成
+  isStart: boolean; // 开始状态，开始时需要清除 html
+}>();
+
+const md = MarkdownIt();
+const contentRef = ref<HTMLDivElement>(); // 右侧出来 header 以下的区域
+const mdContainerRef = ref<HTMLDivElement>(); // markdown 的容器，用来滚动到底下的
+const mindMapRef = ref<HTMLDivElement>(); // 思维导图的容器
+const svgRef = ref<SVGElement>(); // 思维导图的渲染 svg
+const toolBarRef = ref<HTMLDivElement>(); // 思维导图右下角的工具栏，缩放等
+const html = ref(''); // 生成过程中的文本
+const contentAreaHeight = ref(0); // 生成区域的高度，出去 header 部分
+let markMap: Markmap | null = null;
+const transformer = new Transformer();
+let resizeObserver: null | ResizeObserver = null;
+const initialized = false;
+
+/** 初始化 */
+onMounted(() => {
+  resizeObserver = new ResizeObserver(() => {
+    contentAreaHeight.value = contentRef.value?.clientHeight || 0;
+    // 先更新高度，再更新思维导图
+    if (contentAreaHeight.value && !initialized) {
+      // 初始化思维导图
+      try {
+        if (!markMap) {
+          markMap = Markmap.create(svgRef.value!);
+          const { el } = Toolbar.create(markMap);
+          toolBarRef.value?.append(el);
+        }
+        nextTick(update);
+      } catch {
+        ElMessage.error('思维导图初始化失败');
+      }
+    }
+  });
+  if (contentRef.value) {
+    resizeObserver.observe(contentRef.value);
+  }
+});
+
+/** 卸载 */
+onBeforeUnmount(() => {
+  if (resizeObserver && contentRef.value) {
+    resizeObserver.unobserve(contentRef.value);
+  }
+});
+
+/** 监听 props 变化 */
+watch(props, ({ generatedContent, isGenerating, isEnd, isStart }) => {
+  // 开始生成的时候清空一下 markdown 的内容
+  if (isStart) {
+    html.value = '';
+  }
+  // 生成内容的时候使用 markdown 来渲染
+  if (isGenerating) {
+    html.value = md.render(generatedContent);
+  }
+  // 生成结束时更新思维导图
+  if (isEnd) {
+    update();
+  }
+});
+
+/** 更新思维导图的展示 */
+function update() {
+  try {
+    const { root } = transformer.transform(
+      processContent(props.generatedContent),
+    );
+    markMap?.setData(root);
+    markMap?.fit();
+  } catch (error: any) {
+    console.error(error);
+  }
+}
+
+/** 处理内容 */
+function processContent(text: string) {
+  const arr: string[] = [];
+  const lines = text.split('\n');
+  for (let line of lines) {
+    if (line.includes('```')) {
+      continue;
+    }
+    // eslint-disable-next-line unicorn/prefer-string-replace-all
+    line = line.replace(/([*_~`>])|(\d+\.)\s/g, '');
+    arr.push(line);
+  }
+  return arr.join('\n');
+}
+
+/** 下载图片：download SVG to png file */
+function downloadImage() {
+  const svgElement = mindMapRef.value;
+  // 将 SVG 渲染到图片对象
+  const serializer = new XMLSerializer();
+  const source = `<?xml version="1.0" standalone="no"?>\r\n${serializer.serializeToString(svgRef.value!)}`;
+  const base64Url = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(source)}`;
+  downloadImageByCanvas({
+    url: base64Url,
+    canvasWidth: svgElement?.offsetWidth,
+    canvasHeight: svgElement?.offsetHeight,
+    drawWithImageSize: false,
+  });
+}
+
+defineExpose({
+  scrollBottom() {
+    mdContainerRef.value?.scrollTo(0, mdContainerRef.value?.scrollHeight);
+  },
+});
+</script>
+
+<template>
+  <ElCard class="my-card flex h-full flex-grow flex-col">
+    <template #header>
+      <div class="m-0 flex shrink-0 items-center justify-between px-7">
+        <h3>思维导图预览</h3>
+        <ElButton
+          type="primary"
+          size="small"
+          class="flex"
+          @click="downloadImage"
+        >
+          <template #icon>
+            <div class="flex items-center justify-center">
+              <IconifyIcon icon="lucide:copy" />
+            </div>
+          </template>
+          下载图片
+        </ElButton>
+      </div>
+    </template>
+    <div ref="contentRef" class="hide-scroll-bar box-border h-full">
+      <div
+        v-if="isGenerating"
+        ref="mdContainerRef"
+        class="wh-full overflow-y-auto"
+      >
+        <div
+          class="flex flex-col items-center justify-center"
+          v-html="html"
+        ></div>
+      </div>
+      <div ref="mindMapRef" class="wh-full">
+        <svg
+          ref="svgRef"
+          :style="{ height: `${contentAreaHeight}px` }"
+          class="w-full"
+        />
+        <div ref="toolBarRef" class="absolute bottom-2.5 right-5"></div>
+      </div>
+    </div>
+  </ElCard>
+</template>
+
+<style lang="scss" scoped>
+// 定义一个 mixin 替代 extend
+@mixin hide-scroll-bar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
+
+.hide-scroll-bar {
+  @include hide-scroll-bar;
+}
+
+.my-card {
+  :deep(.el-card__body) {
+    box-sizing: border-box;
+    flex-grow: 1;
+    padding: 0;
+    overflow-y: auto;
+
+    @include hide-scroll-bar;
+  }
+}
+
+// markmap的tool样式覆盖
+:deep(.markmap) {
+  width: 100%;
+}
+
+:deep(.mm-toolbar-brand) {
+  display: none;
+}
+
+:deep(.mm-toolbar) {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/apps/web-ele/src/views/ai/mindmap/manager/data.ts b/apps/web-ele/src/views/ai/mindmap/manager/data.ts
new file mode 100644
index 000000000..967981d40
--- /dev/null
+++ b/apps/web-ele/src/views/ai/mindmap/manager/data.ts
@@ -0,0 +1,97 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 关联数据 */
+let userList: SystemUserApi.User[] = [];
+getSimpleUserList().then((data) => (userList = data));
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        placeholder: '请选择用户',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'prompt',
+      label: '提示词',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入提示词',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 180,
+      fixed: 'left',
+    },
+    {
+      field: 'userId',
+      title: '用户',
+      minWidth: 180,
+      formatter: ({ cellValue }) =>
+        userList.find((user) => user.id === cellValue)?.nickname || '-',
+    },
+    {
+      field: 'prompt',
+      title: '提示词',
+      minWidth: 180,
+    },
+    {
+      field: 'generatedContent',
+      title: '思维导图',
+      minWidth: 300,
+    },
+    {
+      field: 'model',
+      title: '模型',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'errorMessage',
+      title: '错误信息',
+      minWidth: 180,
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/mindmap/manager/index.vue b/apps/web-ele/src/views/ai/mindmap/manager/index.vue
new file mode 100644
index 000000000..3241dc59b
--- /dev/null
+++ b/apps/web-ele/src/views/ai/mindmap/manager/index.vue
@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiMindmapApi } from '#/api/ai/mindmap';
+
+import { DocAlert, Page, useVbenDrawer } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteMindMap, getMindMapPage } from '#/api/ai/mindmap';
+import { $t } from '#/locales';
+
+import Right from '../index/modules/right.vue';
+import { useGridColumns, useGridFormSchema } from './data';
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  header: false,
+  footer: false,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 删除思维导图记录 */
+async function handleDelete(row: AiMindmapApi.MindMap) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.id]),
+  });
+  try {
+    await deleteMindMap(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 预览思维导图 */
+async function openPreview(row: AiMindmapApi.MindMap) {
+  drawerApi.setData(row.generatedContent).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getMindMapPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiMindmapApi.MindMap>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="AI 思维导图" url="https://doc.iocoder.cn/ai/mindmap/" />
+    </template>
+
+    <Drawer class="w-3/5">
+      <Right
+        :generated-content="drawerApi.getData() as any"
+        :is-end="true"
+        :is-generating="false"
+        :is-start="false"
+      />
+    </Drawer>
+    <Grid table-title="思维导图管理列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.cropper.preview'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['ai:api-key:update'],
+              disabled: !row.generatedContent,
+              onClick: openPreview.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:mind-map:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/model/apiKey/data.ts b/apps/web-ele/src/views/ai/model/apiKey/data.ts
new file mode 100644
index 000000000..1c307ed55
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/apiKey/data.ts
@@ -0,0 +1,147 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'platform',
+      label: '所属平台',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择所属平台',
+        options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
+        allowClear: true,
+      },
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '名称',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入名称',
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'apiKey',
+      label: '密钥',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入密钥',
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'url',
+      label: '自定义 API URL',
+      componentProps: {
+        placeholder: '请输入自定义 API URL',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'platform',
+      label: '平台',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请选择平台',
+        options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请选择状态',
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'platform',
+      title: '所属平台',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_PLATFORM },
+      },
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '名称',
+      minWidth: 120,
+    },
+    {
+      field: 'apiKey',
+      title: '密钥',
+      minWidth: 140,
+    },
+    {
+      field: 'url',
+      title: '自定义 API URL',
+      minWidth: 180,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+      minWidth: 80,
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/model/apiKey/index.vue b/apps/web-ele/src/views/ai/model/apiKey/index.vue
new file mode 100644
index 000000000..a6b5181ad
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/apiKey/index.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiModelApiKeyApi } from '#/api/ai/model/apiKey';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteApiKey, getApiKeyPage } from '#/api/ai/model/apiKey';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建 API 密钥 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑 API 密钥 */
+function handleEdit(row: AiModelApiKeyApi.ApiKey) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除 API 密钥 */
+async function handleDelete(row: AiModelApiKeyApi.ApiKey) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteApiKey(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getApiKeyPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiModelApiKeyApi.ApiKey>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="AI 手册" url="https://doc.iocoder.cn/ai/build/" />
+    </template>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="API  密钥列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['API  密钥']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['ai:api-key:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['ai:api-key:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:api-key:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/model/apiKey/modules/form.vue b/apps/web-ele/src/views/ai/model/apiKey/modules/form.vue
new file mode 100644
index 000000000..c7e5388ea
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/apiKey/modules/form.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { AiModelApiKeyApi } from '#/api/ai/model/apiKey';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createApiKey, getApiKey, updateApiKey } from '#/api/ai/model/apiKey';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<AiModelApiKeyApi.ApiKey>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['API  密钥'])
+    : $t('ui.actionTitle.create', ['API  密钥']);
+});
+
+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 AiModelApiKeyApi.ApiKey;
+    try {
+      await (formData.value?.id ? updateApiKey(data) : createApiKey(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<AiModelApiKeyApi.ApiKey>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getApiKey(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/ai/model/chatRole/data.ts b/apps/web-ele/src/views/ai/model/chatRole/data.ts
new file mode 100644
index 000000000..21dc394de
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/chatRole/data.ts
@@ -0,0 +1,312 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { AiModelTypeEnum, CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getSimpleKnowledgeList } from '#/api/ai/knowledge/knowledge';
+import { getModelSimpleList } from '#/api/ai/model/model';
+import { getToolSimpleList } from '#/api/ai/model/tool';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'formType',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '角色名称',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入角色名称',
+      },
+    },
+    {
+      component: 'ImageUpload',
+      fieldName: 'avatar',
+      label: '角色头像',
+      rules: 'required',
+    },
+    {
+      fieldName: 'modelId',
+      label: '绑定模型',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择绑定模型',
+        api: () => getModelSimpleList(AiModelTypeEnum.CHAT),
+        labelField: 'name',
+        valueField: 'id',
+        allowClear: true,
+      },
+      dependencies: {
+        triggerFields: ['formType'],
+        show: (values) => {
+          return values.formType === 'create' || values.formType === 'update';
+        },
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'category',
+      label: '角色类别',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入角色类别',
+      },
+      dependencies: {
+        triggerFields: ['formType'],
+        show: (values) => {
+          return values.formType === 'create' || values.formType === 'update';
+        },
+      },
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'description',
+      label: '角色描述',
+      componentProps: {
+        placeholder: '请输入角色描述',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'systemMessage',
+      label: '角色设定',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入角色设定',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'knowledgeIds',
+      label: '引用知识库',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择引用知识库',
+        api: getSimpleKnowledgeList,
+        labelField: 'name',
+        mode: 'multiple',
+        valueField: 'id',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'toolIds',
+      label: '引用工具',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择引用工具',
+        api: getToolSimpleList,
+        mode: 'multiple',
+        labelField: 'name',
+        valueField: 'id',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'mcpClientNames',
+      label: '引用 MCP',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择 MCP',
+        options: getDictOptions(DICT_TYPE.AI_MCP_CLIENT_NAME, 'string'),
+        mode: 'multiple',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'publicStatus',
+      label: '是否公开',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+      },
+      defaultValue: true,
+      dependencies: {
+        triggerFields: ['formType'],
+        show: (values) => {
+          return values.formType === 'create' || values.formType === 'update';
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'sort',
+      label: '角色排序',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入角色排序',
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      dependencies: {
+        triggerFields: ['formType'],
+        show: (values) => {
+          return values.formType === 'create' || values.formType === 'update';
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      dependencies: {
+        triggerFields: ['formType'],
+        show: (values) => {
+          return values.formType === 'create' || values.formType === 'update';
+        },
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '角色名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'category',
+      label: '角色类别',
+      component: 'Input',
+    },
+    {
+      fieldName: 'publicStatus',
+      label: '是否公开',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择是否公开',
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        allowClear: true,
+      },
+      defaultValue: true,
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '角色名称',
+      minWidth: 100,
+    },
+    {
+      title: '绑定模型',
+      field: 'modelName',
+      minWidth: 100,
+    },
+    {
+      title: '角色头像',
+      field: 'avatar',
+      minWidth: 140,
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          width: 40,
+          height: 40,
+        },
+      },
+    },
+    {
+      title: '角色类别',
+      field: 'category',
+      minWidth: 100,
+    },
+    {
+      title: '角色描述',
+      field: 'description',
+      minWidth: 100,
+    },
+    {
+      title: '角色设定',
+      field: 'systemMessage',
+      minWidth: 100,
+    },
+    {
+      title: '知识库',
+      field: 'knowledgeIds',
+      minWidth: 100,
+      formatter: ({ cellValue }) => {
+        return !cellValue || cellValue.length === 0
+          ? '-'
+          : `引用${cellValue.length}个`;
+      },
+    },
+    {
+      title: '工具',
+      field: 'toolIds',
+      minWidth: 100,
+      formatter: ({ cellValue }) => {
+        return !cellValue || cellValue.length === 0
+          ? '-'
+          : `引用${cellValue.length}个`;
+      },
+    },
+    {
+      title: 'MCP',
+      field: 'mcpClientNames',
+      minWidth: 100,
+      formatter: ({ cellValue }) => {
+        return !cellValue || cellValue.length === 0
+          ? '-'
+          : `引用${cellValue.length}个`;
+      },
+    },
+    {
+      field: 'publicStatus',
+      title: '是否公开',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+      minWidth: 80,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+      minWidth: 80,
+    },
+    {
+      title: '角色排序',
+      field: 'sort',
+      minWidth: 80,
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/model/chatRole/index.vue b/apps/web-ele/src/views/ai/model/chatRole/index.vue
new file mode 100644
index 000000000..16e784047
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/chatRole/index.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiModelChatRoleApi } from '#/api/ai/model/chatRole';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteChatRole, getChatRolePage } from '#/api/ai/model/chatRole';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建聊天角色 */
+function handleCreate() {
+  formModalApi.setData({ formType: 'create' }).open();
+}
+
+/** 编辑聊天角色 */
+function handleEdit(row: AiModelChatRoleApi.ChatRole) {
+  formModalApi.setData({ formType: 'update', ...row }).open();
+}
+
+/** 删除聊天角色 */
+async function handleDelete(row: AiModelChatRoleApi.ChatRole) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteChatRole(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getChatRolePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiModelChatRoleApi.ChatRole>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="AI 对话聊天" url="https://doc.iocoder.cn/ai/chat/" />
+    </template>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="聊天角色列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['聊天角色']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['ai:chat-role:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['ai:chat-role:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:chat-role:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/model/chatRole/modules/form.vue b/apps/web-ele/src/views/ai/model/chatRole/modules/form.vue
new file mode 100644
index 000000000..11b9e0eb9
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/chatRole/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { AiModelChatRoleApi } from '#/api/ai/model/chatRole';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createChatRole,
+  getChatRole,
+  updateChatRole,
+} from '#/api/ai/model/chatRole';
+import {} from '#/api/bpm/model';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<AiModelChatRoleApi.ChatRole>();
+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 AiModelChatRoleApi.ChatRole;
+    try {
+      await (formData.value?.id ? updateChatRole(data) : createChatRole(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<AiModelChatRoleApi.ChatRole>();
+    if (!data || !data.id) {
+      await formApi.setValues(data);
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getChatRole(data.id);
+      // 设置到 values
+      await formApi.setValues({ ...data, ...formData.value });
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/ai/model/model/data.ts b/apps/web-ele/src/views/ai/model/model/data.ts
new file mode 100644
index 000000000..2d798bbdf
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/model/data.ts
@@ -0,0 +1,272 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiModelApiKeyApi } from '#/api/ai/model/apiKey';
+
+import { AiModelTypeEnum, CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getApiKeySimpleList } from '#/api/ai/model/apiKey';
+
+/** 关联数据 */
+let apiKeyList: AiModelApiKeyApi.ApiKey[] = [];
+getApiKeySimpleList().then((data) => (apiKeyList = data));
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'platform',
+      label: '所属平台',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择所属平台',
+        options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
+        allowClear: true,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'type',
+      label: '模型类型',
+      component: 'Select',
+      componentProps: (values) => {
+        return {
+          placeholder: '请输入模型类型',
+          disabled: !!values.id,
+          options: getDictOptions(DICT_TYPE.AI_MODEL_TYPE, 'number'),
+          allowClear: true,
+        };
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'keyId',
+      label: 'API 秘钥',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择 API 秘钥',
+        api: getApiKeySimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        allowClear: true,
+      },
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '模型名字',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入模型名字',
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'model',
+      label: '模型标识',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入模型标识',
+      },
+    },
+    {
+      fieldName: 'sort',
+      label: '模型排序',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入模型排序',
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'temperature',
+      label: '温度参数',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入温度参数',
+        controlsPosition: 'right',
+        class: '!w-full',
+        min: 0,
+        max: 2,
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => {
+          return [AiModelTypeEnum.CHAT].includes(values.type);
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'maxTokens',
+      label: '回复数 Token 数',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        max: 8192,
+        placeholder: '请输入回复数 Token 数',
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => {
+          return [AiModelTypeEnum.CHAT].includes(values.type);
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'maxContexts',
+      label: '上下文数量',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        max: 20,
+        placeholder: '请输入上下文数量',
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => {
+          return [AiModelTypeEnum.CHAT].includes(values.type);
+        },
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '模型名字',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模型名字',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'model',
+      label: '模型标识',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模型标识',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'platform',
+      label: '模型平台',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模型平台',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'platform',
+      title: '所属平台',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_PLATFORM },
+      },
+      minWidth: 100,
+    },
+    {
+      field: 'type',
+      title: '模型类型',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_MODEL_TYPE },
+      },
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '模型名字',
+      minWidth: 180,
+    },
+    {
+      title: '模型标识',
+      field: 'model',
+      minWidth: 180,
+    },
+    {
+      title: 'API 秘钥',
+      field: 'keyId',
+      formatter: ({ cellValue }) => {
+        return (
+          apiKeyList.find((apiKey) => apiKey.id === cellValue)?.name || '-'
+        );
+      },
+      minWidth: 140,
+    },
+    {
+      title: '排序',
+      field: 'sort',
+      minWidth: 80,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+      minWidth: 80,
+    },
+    {
+      field: 'temperature',
+      title: '温度参数',
+      minWidth: 100,
+    },
+    {
+      title: '回复数 Token 数',
+      field: 'maxTokens',
+      minWidth: 140,
+    },
+    {
+      title: '上下文数量',
+      field: 'maxContexts',
+      minWidth: 120,
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/model/model/index.vue b/apps/web-ele/src/views/ai/model/model/index.vue
new file mode 100644
index 000000000..04488099c
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/model/index.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiModelModelApi } from '#/api/ai/model/model';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteModel, getModelPage } from '#/api/ai/model/model';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建模型配置 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑模型配置 */
+function handleEdit(row: AiModelModelApi.Model) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除模型配置 */
+async function handleDelete(row: AiModelModelApi.Model) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteModel(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getModelPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiModelModelApi.Model>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="AI 手册" url="https://doc.iocoder.cn/ai/build/" />
+    </template>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="模型配置列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['模型配置']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['ai:model:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['ai:model:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:model:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/model/model/modules/form.vue b/apps/web-ele/src/views/ai/model/model/modules/form.vue
new file mode 100644
index 000000000..14a1bdc43
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/model/modules/form.vue
@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import type { AiModelModelApi } from '#/api/ai/model/model';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createModel, getModel, updateModel } from '#/api/ai/model/model';
+import {} from '#/api/bpm/model';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<AiModelModelApi.Model>();
+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 AiModelModelApi.Model;
+    try {
+      await (formData.value?.id ? updateModel(data) : createModel(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<AiModelModelApi.Model>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getModel(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/ai/model/tool/data.ts b/apps/web-ele/src/views/ai/model/tool/data.ts
new file mode 100644
index 000000000..d8897ed70
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/tool/data.ts
@@ -0,0 +1,123 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getRangePickerDefaultProps } from '#/utils';
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '工具名称',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入工具名称',
+      },
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'description',
+      label: '工具描述',
+      componentProps: {
+        placeholder: '请输入工具描述',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      defaultValue: CommonStatusEnum.ENABLE,
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '工具名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入工具名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '工具编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '工具名称',
+      minWidth: 120,
+    },
+    {
+      field: 'description',
+      title: '工具描述',
+      minWidth: 140,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+      minWidth: 80,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/model/tool/index.vue b/apps/web-ele/src/views/ai/model/tool/index.vue
new file mode 100644
index 000000000..18c2dd3bb
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/tool/index.vue
@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiModelToolApi } from '#/api/ai/model/tool';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteTool, getToolPage } from '#/api/ai/model/tool';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建工具 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑工具 */
+function handleEdit(row: AiModelToolApi.Tool) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除工具 */
+async function handleDelete(row: AiModelToolApi.Tool) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteTool(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getToolPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiModelToolApi.Tool>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="AI 工具调用（function calling）"
+        url="https://doc.iocoder.cn/ai/tool/"
+      />
+    </template>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="工具列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['工具']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['ai:tool:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['ai:tool:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:tool:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/model/tool/modules/form.vue b/apps/web-ele/src/views/ai/model/tool/modules/form.vue
new file mode 100644
index 000000000..afe7c21d4
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/tool/modules/form.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { AiModelToolApi } from '#/api/ai/model/tool';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createTool, getTool, updateTool } from '#/api/ai/model/tool';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<AiModelToolApi.Tool>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['工具'])
+    : $t('ui.actionTitle.create', ['工具']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as AiModelToolApi.Tool;
+    try {
+      await (formData.value?.id ? updateTool(data) : createTool(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<AiModelToolApi.Tool>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getTool(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/ai/music/manager/data.ts b/apps/web-ele/src/views/ai/music/manager/data.ts
new file mode 100644
index 000000000..7b5c63a32
--- /dev/null
+++ b/apps/web-ele/src/views/ai/music/manager/data.ts
@@ -0,0 +1,202 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 关联数据 */
+let userList: SystemUserApi.User[] = [];
+getSimpleUserList().then((data) => (userList = data));
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        placeholder: '请选择用户编号',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'title',
+      label: '音乐名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入音乐名称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '绘画状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择绘画状态',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.AI_MUSIC_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'generateMode',
+      label: '生成模式',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择生成模式',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.AI_GENERATE_MODE, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'publicStatus',
+      label: '是否发布',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择是否发布',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  onPublicStatusChange?: (
+    newStatus: boolean,
+    row: any,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 180,
+      fixed: 'left',
+    },
+    {
+      title: '音乐名称',
+      minWidth: 180,
+      fixed: 'left',
+      field: 'title',
+    },
+    {
+      minWidth: 180,
+      title: '用户',
+      field: 'userId',
+      formatter: ({ cellValue }) => {
+        return userList.find((user) => user.id === cellValue)?.nickname || '-';
+      },
+    },
+    {
+      field: 'status',
+      title: '音乐状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_MUSIC_STATUS },
+      },
+    },
+    {
+      field: 'model',
+      title: '模型',
+      minWidth: 180,
+    },
+    {
+      title: '内容',
+      minWidth: 180,
+      slots: { default: 'content' },
+    },
+    {
+      field: 'duration',
+      title: '时长（秒）',
+      minWidth: 100,
+    },
+    {
+      field: 'prompt',
+      title: '提示词',
+      minWidth: 180,
+    },
+    {
+      field: 'lyric',
+      title: '歌词',
+      minWidth: 180,
+    },
+    {
+      field: 'gptDescriptionPrompt',
+      title: '描述',
+      minWidth: 180,
+    },
+    {
+      field: 'generateMode',
+      title: '生成模式',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_GENERATE_MODE },
+      },
+    },
+    {
+      field: 'tags',
+      title: '风格标签',
+      minWidth: 180,
+      cellRender: {
+        name: 'CellTags',
+      },
+    },
+    {
+      minWidth: 100,
+      title: '是否发布',
+      field: 'publicStatus',
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onPublicStatusChange },
+        name: 'CellSwitch',
+        props: {
+          activeValue: true,
+          inactiveValue: false,
+        },
+      },
+    },
+    {
+      field: 'taskId',
+      title: '任务编号',
+      minWidth: 180,
+    },
+    {
+      field: 'errorMessage',
+      title: '错误信息',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/music/manager/index.vue b/apps/web-ele/src/views/ai/music/manager/index.vue
new file mode 100644
index 000000000..2c27074b0
--- /dev/null
+++ b/apps/web-ele/src/views/ai/music/manager/index.vue
@@ -0,0 +1,153 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiMusicApi } from '#/api/ai/music';
+
+import { confirm, DocAlert, Page } from '@vben/common-ui';
+import { AiMusicStatusEnum } from '@vben/constants';
+
+import { ElButton, ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteMusic, getMusicPage, updateMusic } from '#/api/ai/music';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 删除音乐记录 */
+async function handleDelete(row: AiMusicApi.Music) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.id]),
+  });
+  try {
+    await deleteMusic(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 修改是否发布 */
+async function handleUpdatePublicStatusChange(
+  newStatus: boolean,
+  row: AiMusicApi.Music,
+): Promise<boolean | undefined> {
+  const text = newStatus ? '公开' : '私有';
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `确认要将该音乐切换为【${text}】吗？`,
+    })
+      .then(async () => {
+        // 更新音乐状态
+        await updateMusic({
+          id: row.id,
+          publicStatus: newStatus,
+        });
+        // 提示并返回成功
+        ElMessage.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(handleUpdatePublicStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getMusicPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiMusicApi.Music>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="AI 音乐创作" url="https://doc.iocoder.cn/ai/music/" />
+    </template>
+    <Grid table-title="音乐管理列表">
+      <template #toolbar-tools>
+        <TableAction :actions="[]" />
+      </template>
+
+      <template #content="{ row }">
+        <ElButton
+          type="primary"
+          link
+          v-if="row.audioUrl?.length > 0"
+          :href="row.audioUrl"
+          target="_blank"
+          class="p-0"
+        >
+          音乐
+        </ElButton>
+        <ElButton
+          type="primary"
+          link
+          v-if="row.videoUrl?.length > 0"
+          :href="row.videoUrl"
+          target="_blank"
+          class="p-0 !pl-1"
+        >
+          视频
+        </ElButton>
+        <ElButton
+          type="primary"
+          link
+          v-if="row.imageUrl?.length > 0"
+          :href="row.imageUrl"
+          target="_blank"
+          class="p-0 !pl-1"
+        >
+          封面
+        </ElButton>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:music:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/write/index/index.vue b/apps/web-ele/src/views/ai/write/index/index.vue
new file mode 100644
index 000000000..04b55144b
--- /dev/null
+++ b/apps/web-ele/src/views/ai/write/index/index.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { AiWriteApi } from '#/api/ai/write';
+
+import { nextTick, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { WriteExample } from '@vben/constants';
+
+import { ElMessage } from 'element-plus';
+
+import { writeStream } from '#/api/ai/write';
+
+import Left from './modules/left.vue';
+import Right from './modules/right.vue';
+
+const writeResult = ref(''); // 写作结果
+const isWriting = ref(false); // 是否正在写作中
+const abortController = ref<AbortController>(); // // 写作进行中 abort 控制器(控制 stream 写作)
+
+const rightRef = ref<InstanceType<typeof Right>>(); // 写作面板
+
+/** 提交写作 */
+function handleSubmit(data: Partial<AiWriteApi.Write>) {
+  abortController.value = new AbortController();
+  writeResult.value = '';
+  isWriting.value = true;
+  writeStream({
+    data,
+    onMessage: async (res: any) => {
+      const { code, data, msg } = JSON.parse(res.data);
+      if (code !== 0) {
+        ElMessage.error(`写作异常! ${msg}`);
+        handleStopStream();
+        return;
+      }
+      writeResult.value = writeResult.value + data;
+      // 滚动到底部
+      await nextTick();
+      rightRef.value?.scrollToBottom();
+    },
+    ctrl: abortController.value,
+    onClose: handleStopStream,
+    onError: (error: any) => {
+      console.error('写作异常', error);
+      handleStopStream();
+      // 需要抛出异常，禁止重试
+      throw error;
+    },
+  });
+}
+
+/** 停止 stream 生成 */
+function handleStopStream() {
+  abortController.value?.abort();
+  isWriting.value = false;
+}
+
+/** 点击示例触发 */
+function handleExampleClick(type: keyof typeof WriteExample) {
+  writeResult.value = WriteExample[type].data;
+}
+
+/** 点击重置的时候清空写作的结果*/
+function handleReset() {
+  writeResult.value = '';
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="absolute bottom-0 left-0 right-0 top-0 m-4 flex">
+      <Left
+        :is-writing="isWriting"
+        class="mr-4 h-full rounded-lg"
+        @submit="handleSubmit"
+        @reset="handleReset"
+        @example="handleExampleClick"
+      />
+      <Right
+        :is-writing="isWriting"
+        @stop-stream="handleStopStream"
+        ref="rightRef"
+        class="flex-grow"
+        v-model:content="writeResult"
+      />
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/write/index/modules/left.vue b/apps/web-ele/src/views/ai/write/index/modules/left.vue
new file mode 100644
index 000000000..7d69a277b
--- /dev/null
+++ b/apps/web-ele/src/views/ai/write/index/modules/left.vue
@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import type { AiWriteApi } from '#/api/ai/write';
+
+import { ref } from 'vue';
+
+import { AiWriteTypeEnum, DICT_TYPE, WriteExample } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+
+import { createReusableTemplate } from '@vueuse/core';
+import { ElButton, ElInput, ElMessage } from 'element-plus';
+
+import Tag from './tag.vue';
+
+type TabType = AiWriteApi.Write['type'];
+
+defineProps<{
+  isWriting: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'example', param: 'reply' | 'write'): void;
+  (e: 'reset'): void;
+  (e: 'submit', params: Partial<AiWriteApi.Write>): void;
+}>();
+
+function omit(obj: Record<string, any>, keysToOmit: string[]) {
+  const result: Record<string, any> = {};
+  for (const key in obj) {
+    if (!keysToOmit.includes(key)) {
+      result[key] = obj[key];
+    }
+  }
+  return result;
+}
+
+/** 点击示例的时候，将定义好的文章作为示例展示出来 */
+function example(type: 'reply' | 'write') {
+  formData.value = {
+    ...initData,
+    ...omit(WriteExample[type], ['data']),
+  };
+  emit('example', type);
+}
+
+/** 重置，将表单值作为初选值 */
+function reset() {
+  formData.value = { ...initData };
+  emit('reset');
+}
+
+const selectedTab = ref<TabType>(AiWriteTypeEnum.WRITING);
+const tabs: {
+  text: string;
+  value: TabType;
+}[] = [
+  { text: '撰写', value: AiWriteTypeEnum.WRITING },
+  { text: '回复', value: AiWriteTypeEnum.REPLY },
+];
+const [DefineTab, ReuseTab] = createReusableTemplate<{
+  active?: boolean;
+  itemClick: () => void;
+  text: string;
+}>();
+
+const [DefineLabel, ReuseLabel] = createReusableTemplate<{
+  class?: string;
+  hint?: string;
+  hintClick?: () => void;
+  label: string;
+}>();
+
+const initData: AiWriteApi.Write = {
+  type: 1,
+  prompt: '',
+  originalContent: '',
+  tone: 1,
+  language: 1,
+  length: 1,
+  format: 1,
+};
+const formData = ref<AiWriteApi.Write>({ ...initData });
+const recordFormData = {} as Record<AiWriteTypeEnum, AiWriteApi.Write>; // 用来记录切换之前所填写的数据，切换的时候给赋值回来
+
+/** 切换 tab */
+function handleSwitchTab(value: TabType) {
+  if (value !== selectedTab.value) {
+    // 保存之前的久数据
+    recordFormData[selectedTab.value] = formData.value;
+    selectedTab.value = value;
+    // 将之前的旧数据赋值回来
+    formData.value = { ...initData, ...recordFormData[value] };
+  }
+}
+
+/** 提交写作 */
+function handleSubmit() {
+  if (
+    selectedTab.value === AiWriteTypeEnum.REPLY &&
+    !formData.value.originalContent
+  ) {
+    ElMessage.warning('请输入原文');
+    return;
+  }
+  if (!formData.value.prompt) {
+    ElMessage.warning(`请输入${selectedTab.value === 1 ? '写作' : '回复'}内容`);
+    return;
+  }
+
+  emit('submit', {
+    // 撰写的时候没有 originalContent 字段
+    ...(selectedTab.value === 1
+      ? omit(formData.value, ['originalContent'])
+      : formData.value),
+    // 使用选中 tab 值覆盖当前的 type 类型
+    type: selectedTab.value,
+  });
+}
+</script>
+
+<template>
+  <DefineTab v-slot="{ active, text, itemClick }">
+    <span
+      :class="
+        active ? 'bg-primary-600 text-white shadow-md' : 'hover:bg-primary-200'
+      "
+      class="relative z-10 inline-block w-1/2 cursor-pointer rounded-full text-center leading-7 hover:text-black"
+      @click="itemClick"
+    >
+      {{ text }}
+    </span>
+  </DefineTab>
+  <!-- 定义 label 组件：长度/格式/语气/语言等 -->
+  <DefineLabel v-slot="{ label, hint, hintClick }">
+    <h3 class="mb-3 mt-5 flex items-center justify-between text-sm">
+      <span>{{ label }}</span>
+      <span
+        v-if="hint"
+        class="text-primary-500 flex cursor-pointer select-none items-center text-xs"
+        @click="hintClick"
+      >
+        <IconifyIcon icon="lucide:circle-help" />
+        {{ hint }}
+      </span>
+    </h3>
+  </DefineLabel>
+  <div class="flex flex-col" v-bind="$attrs">
+    <div class="bg-card flex w-full justify-center pt-2">
+      <div class="bg-card z-10 w-72 rounded-full p-1">
+        <div
+          :class="
+            selectedTab === AiWriteTypeEnum.REPLY &&
+            'after:translate-x-[100%] after:transform'
+          "
+          class="after:bg-card relative flex items-center after:absolute after:left-0 after:top-0 after:block after:h-7 after:w-1/2 after:rounded-full after:transition-transform after:content-['']"
+        >
+          <ReuseTab
+            v-for="tab in tabs"
+            :key="tab.value"
+            :active="tab.value === selectedTab"
+            :item-click="() => handleSwitchTab(tab.value)"
+            :text="tab.text"
+            class="relative z-20"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="bg-card box-border h-full w-96 flex-grow overflow-y-auto px-7 pb-2 lg:block"
+    >
+      <div>
+        <template v-if="selectedTab === AiWriteTypeEnum.WRITING">
+          <ReuseLabel
+            :hint-click="() => example('write')"
+            hint="示例"
+            label="写作内容"
+          />
+          <ElInput
+            v-model="formData.prompt"
+            type="textarea"
+            :maxlength="500"
+            :rows="5"
+            :input-style="{ boxShadow: 'none' }"
+            resize="none"
+            placeholder="请输入写作内容"
+            show-word-limit
+          />
+        </template>
+        <template v-else>
+          <ReuseLabel
+            :hint-click="() => example('reply')"
+            hint="示例"
+            label="原文"
+          />
+          <ElInput
+            v-model="formData.originalContent"
+            type="textarea"
+            :maxlength="500"
+            :rows="5"
+            :input-style="{ boxShadow: 'none' }"
+            resize="none"
+            placeholder="请输入原文"
+            show-word-limit
+          />
+          <ReuseLabel label="回复内容" />
+          <ElInput
+            v-model="formData.prompt"
+            type="textarea"
+            :maxlength="500"
+            :rows="5"
+            :input-style="{ boxShadow: 'none' }"
+            resize="none"
+            placeholder="请输入回复内容"
+            show-word-limit
+          />
+        </template>
+
+        <ReuseLabel label="长度" />
+        <Tag
+          v-model="formData.length"
+          :tags="getDictOptions(DICT_TYPE.AI_WRITE_LENGTH, 'number')"
+        />
+        <ReuseLabel label="格式" />
+        <Tag
+          v-model="formData.format"
+          :tags="getDictOptions(DICT_TYPE.AI_WRITE_FORMAT, 'number')"
+        />
+        <ReuseLabel label="语气" />
+        <Tag
+          v-model="formData.tone"
+          :tags="getDictOptions(DICT_TYPE.AI_WRITE_TONE, 'number')"
+        />
+        <ReuseLabel label="语言" />
+        <Tag
+          v-model="formData.language"
+          :tags="getDictOptions(DICT_TYPE.AI_WRITE_LANGUAGE, 'number')"
+        />
+
+        <div class="mt-3 flex items-center justify-center">
+          <ElButton :disabled="isWriting" class="mr-2" @click="reset">
+            重置
+          </ElButton>
+          <ElButton type="primary" :loading="isWriting" @click="handleSubmit">
+            生成
+          </ElButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/write/index/modules/right.vue b/apps/web-ele/src/views/ai/write/index/modules/right.vue
new file mode 100644
index 000000000..262a33554
--- /dev/null
+++ b/apps/web-ele/src/views/ai/write/index/modules/right.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useClipboard } from '@vueuse/core';
+import { ElButton, ElCard, ElInput, ElMessage } from 'element-plus';
+
+const props = defineProps({
+  content: {
+    type: String,
+    default: '',
+  }, // 生成的结果
+  isWriting: {
+    type: Boolean,
+    default: false,
+  }, // 是否正在生成文章
+});
+
+const emits = defineEmits(['update:content', 'stopStream']);
+const { copied, copy } = useClipboard();
+
+/** 通过计算属性，双向绑定，更改生成的内容，考虑到用户想要更改生成文章的情况 */
+const compContent = computed({
+  get() {
+    return props.content;
+  },
+  set(val) {
+    emits('update:content', val);
+  },
+});
+
+/** 滚动 */
+const contentRef = ref<HTMLDivElement>();
+defineExpose({
+  scrollToBottom() {
+    contentRef.value?.scrollTo(0, contentRef.value?.scrollHeight);
+  },
+});
+
+/** 点击复制的时候复制内容 */
+const showCopy = computed(() => props.content && !props.isWriting); // 是否展示复制按钮，在生成内容完成的时候展示
+function copyContent() {
+  copy(props.content);
+}
+
+/** 复制成功的时候 copied.value 为 true */
+watch(copied, (val) => {
+  if (val) {
+    ElMessage.success('复制成功');
+  }
+});
+</script>
+<template>
+  <ElCard class="flex h-full flex-col">
+    <template #header>
+      <h3 class="m-0 flex shrink-0 items-center justify-between px-7">
+        <span>预览</span>
+        <ElButton
+          type="primary"
+          v-show="showCopy"
+          @click="copyContent"
+          size="small"
+        >
+          <IconifyIcon icon="lucide:copy" />
+          复制
+        </ElButton>
+      </h3>
+    </template>
+    <div
+      ref="contentRef"
+      class="hide-scroll-bar box-border h-full overflow-y-auto"
+    >
+      <div
+        class="bg-card relative box-border min-h-full w-full flex-grow p-2 sm:p-5"
+      >
+        <ElButton
+          v-show="isWriting"
+          class="absolute bottom-1 left-1/2 z-40 flex -translate-x-1/2 sm:bottom-2"
+          @click="emits('stopStream')"
+          size="small"
+        >
+          <template #icon>
+            <div class="flex items-center justify-center">
+              <IconifyIcon icon="lucide:ban" />
+            </div>
+          </template>
+          终止生成
+        </ElButton>
+        <ElInput
+          id="inputId"
+          v-model="compContent"
+          type="textarea"
+          autosize
+          :input-style="{ boxShadow: 'none' }"
+          resize="none"
+          placeholder="生成的内容……"
+        />
+      </div>
+    </div>
+  </ElCard>
+</template>
+
+<style lang="scss" scoped>
+// 定义一个 mixin 替代 extend
+@mixin hide-scroll-bar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
+
+.hide-scroll-bar {
+  @include hide-scroll-bar;
+}
+
+.my-card {
+  :deep(.el-card__body) {
+    box-sizing: border-box;
+    flex-grow: 1;
+    padding: 0;
+    overflow-y: auto;
+
+    @include hide-scroll-bar;
+  }
+}
+
+// markmap 的 tool 样式覆盖
+:deep(.markmap) {
+  width: 100%;
+}
+
+:deep(.mm-toolbar-brand) {
+  display: none;
+}
+
+:deep(.mm-toolbar) {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/apps/web-ele/src/views/ai/write/index/modules/tag.vue b/apps/web-ele/src/views/ai/write/index/modules/tag.vue
new file mode 100644
index 000000000..f199a8dd1
--- /dev/null
+++ b/apps/web-ele/src/views/ai/write/index/modules/tag.vue
@@ -0,0 +1,33 @@
+<!-- 标签选项 -->
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    [k: string]: any;
+    modelValue: string;
+    tags?: { label: string; value: string }[];
+  }>(),
+  {
+    tags: () => [],
+  },
+);
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <span
+      v-for="tag in props.tags"
+      :key="tag.value"
+      class="bg-card border-card-100 mb-2 cursor-pointer rounded border-2 border-solid px-1 text-xs leading-6"
+      :class="
+        modelValue === tag.value && '!border-primary-500 !text-primary-500'
+      "
+      @click="emits('update:modelValue', tag.value)"
+    >
+      {{ tag.label }}
+    </span>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/write/manager/data.ts b/apps/web-ele/src/views/ai/write/manager/data.ts
new file mode 100644
index 000000000..02f39e8e5
--- /dev/null
+++ b/apps/web-ele/src/views/ai/write/manager/data.ts
@@ -0,0 +1,171 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 关联数据 */
+let userList: SystemUserApi.User[] = [];
+getSimpleUserList().then((data) => (userList = data));
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        placeholder: '请选择用户',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '写作类型',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请选择写作类型',
+        options: getDictOptions(DICT_TYPE.AI_WRITE_TYPE, 'number'),
+      },
+    },
+    {
+      fieldName: 'platform',
+      label: '平台',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请选择平台',
+        options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 180,
+      fixed: 'left',
+    },
+    {
+      minWidth: 180,
+      title: '用户',
+      field: 'userId',
+      formatter: ({ cellValue }) => {
+        return userList.find((user) => user.id === cellValue)?.nickname || '-';
+      },
+    },
+    {
+      field: 'type',
+      title: '写作类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_WRITE_TYPE },
+      },
+    },
+    {
+      field: 'platform',
+      title: '平台',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_WRITE_TYPE },
+      },
+    },
+    {
+      field: 'model',
+      title: '模型',
+      minWidth: 180,
+    },
+    {
+      field: 'prompt',
+      title: '生成内容提示',
+      minWidth: 180,
+    },
+    {
+      field: 'generatedContent',
+      title: '生成的内容',
+      minWidth: 180,
+    },
+    {
+      field: 'originalContent',
+      title: '原文',
+      minWidth: 180,
+    },
+    {
+      field: 'length',
+      title: '长度',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_WRITE_LENGTH },
+      },
+    },
+    {
+      field: 'format',
+      title: '格式',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_WRITE_FORMAT },
+      },
+    },
+    {
+      field: 'tone',
+      title: '语气',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_WRITE_TONE },
+      },
+    },
+    {
+      field: 'language',
+      title: '语言',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_WRITE_LANGUAGE },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'errorMessage',
+      title: '错误信息',
+      minWidth: 180,
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/write/manager/index.vue b/apps/web-ele/src/views/ai/write/manager/index.vue
new file mode 100644
index 000000000..fa73240a4
--- /dev/null
+++ b/apps/web-ele/src/views/ai/write/manager/index.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiWriteApi } from '#/api/ai/write';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteWrite, getWritePage } from '#/api/ai/write';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 删除写作记录 */
+async function handleDelete(row: AiWriteApi.Write) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.id]),
+  });
+  try {
+    await deleteWrite(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getWritePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiWriteApi.Write>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="AI 写作助手" url="https://doc.iocoder.cn/ai/write/" />
+    </template>
+    <Grid table-title="写作管理列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:write:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/category/data.ts b/apps/web-ele/src/views/bpm/category/data.ts
new file mode 100644
index 000000000..6aaf6e629
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/category/data.ts
@@ -0,0 +1,178 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '分类名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分类名',
+      },
+      rules: 'required',
+    },
+    {
+      label: '分类标志',
+      fieldName: 'code',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分类标志',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'description',
+      label: '分类描述',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入分类描述',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '分类状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'sort',
+      label: '分类排序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        placeholder: '请输入分类排序',
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+    },
+  ];
+}
+
+/** 重命名的表单 */
+export function useRenameFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '分类名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分类名',
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '分类名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分类名',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '分类标志',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分类标志',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '分类状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择分类状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '分类编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '分类名',
+      minWidth: 200,
+    },
+    {
+      field: 'code',
+      title: '分类标志',
+      minWidth: 200,
+    },
+    {
+      field: 'description',
+      title: '分类描述',
+      minWidth: 200,
+    },
+    {
+      field: 'status',
+      title: '分类状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'sort',
+      title: '分类排序',
+      minWidth: 100,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/category/index.vue b/apps/web-ele/src/views/bpm/category/index.vue
new file mode 100644
index 000000000..c747e8a96
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/category/index.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmCategoryApi } from '#/api/bpm/category';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteCategory, getCategoryPage } from '#/api/bpm/category';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建流程分类 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑流程分类 */
+function handleEdit(row: BpmCategoryApi.Category) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除流程分类 */
+async function handleDelete(row: BpmCategoryApi.Category) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteCategory(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCategoryPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmCategoryApi.Category>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="流程分类">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['流程分类']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['bpm:category:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['bpm:category:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['bpm:category:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/category/modules/form.vue b/apps/web-ele/src/views/bpm/category/modules/form.vue
new file mode 100644
index 000000000..4494d9d68
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/category/modules/form.vue
@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import type { BpmCategoryApi } from '#/api/bpm/category';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createCategory,
+  getCategory,
+  updateCategory,
+} from '#/api/bpm/category';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<BpmCategoryApi.Category>();
+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 BpmCategoryApi.Category;
+    try {
+      await (formData.value?.id ? updateCategory(data) : createCategory(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<BpmCategoryApi.Category>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getCategory(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/category/modules/rename-form.vue b/apps/web-ele/src/views/bpm/category/modules/rename-form.vue
new file mode 100644
index 000000000..5882fe948
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/category/modules/rename-form.vue
@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import type { BpmCategoryApi } from '#/api/bpm/category';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { getCategory, updateCategory } from '#/api/bpm/category';
+import { $t } from '#/locales';
+
+import { useRenameFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<BpmCategoryApi.Category>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useRenameFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = {
+      ...formData.value,
+      ...(await formApi.getValues()),
+    } as BpmCategoryApi.Category;
+    try {
+      await updateCategory(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<BpmCategoryApi.Category>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getCategory(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="重命名流程分类" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/form/data.ts b/apps/web-ele/src/views/bpm/form/data.ts
new file mode 100644
index 000000000..315c41db6
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/form/data.ts
@@ -0,0 +1,61 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '表单名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入表单名称',
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '表单名称',
+      minWidth: 200,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 200,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 200,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 240,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/form/designer/data.ts b/apps/web-ele/src/views/bpm/form/designer/data.ts
new file mode 100644
index 000000000..20740cbbb
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/form/designer/data.ts
@@ -0,0 +1,46 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '表单名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入表单名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/form/designer/index.vue b/apps/web-ele/src/views/bpm/form/designer/index.vue
new file mode 100644
index 000000000..f3e03e0c2
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/form/designer/index.vue
@@ -0,0 +1,154 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+
+import FcDesigner from '@form-create/designer';
+import { ElButton, ElMessage } from 'element-plus';
+
+import { getForm } from '#/api/bpm/form';
+import {
+  setConfAndFields,
+  useFormCreateDesigner,
+} from '#/components/form-create';
+import { router } from '#/router';
+
+import Form from './modules/form.vue';
+
+defineOptions({ name: 'BpmFormEditor' });
+
+const props = defineProps<{
+  copyId?: number | string;
+  id?: number | string;
+  type: 'copy' | 'create' | 'edit';
+}>();
+
+const loading = ref(false);
+const tabs = useTabs();
+const flowFormConfig = ref();
+const designerRef = ref<InstanceType<typeof FcDesigner>>();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const designerConfig = ref({
+  switchType: [], // 是否可以切换组件类型,或者可以相互切换的字段
+  autoActive: true, // 是否自动选中拖入的组件
+  useTemplate: false, // 是否生成 Vue 语法的模板组件
+  formOptions: {
+    form: {
+      labelWidth: '100px', // 设置默认的 label 宽度为 100px
+    },
+  }, // 定义表单配置默认值
+  fieldReadonly: false, // 配置field是否可以编辑
+  hiddenDragMenu: false, // 隐藏拖拽操作按钮
+  hiddenDragBtn: false, // 隐藏拖拽按钮
+  hiddenMenu: [], // 隐藏部分菜单
+  hiddenItem: [], // 隐藏部分组件
+  hiddenItemConfig: {}, // 隐藏组件的部分配置项
+  disabledItemConfig: {}, // 禁用组件的部分配置项
+  showSaveBtn: false, // 是否显示保存按钮
+  showConfig: true, // 是否显示右侧的配置界面
+  showBaseForm: true, // 是否显示组件的基础配置表单
+  showControl: true, // 是否显示组件联动
+  showPropsForm: true, // 是否显示组件的属性配置表单
+  showEventForm: true, // 是否显示组件的事件配置表单
+  showValidateForm: true, // 是否显示组件的验证配置表单
+  showFormConfig: true, // 是否显示表单配置
+  showInputData: true, // 是否显示录入按钮
+  showDevice: true, // 是否显示多端适配选项
+  appendConfigData: [], // 定义渲染规则所需的formData
+}); // 表单设计器配置
+
+useFormCreateDesigner(designerRef); // 表单设计器增强
+
+/** 计算属性：获取当前需要加载的表单 ID */
+const currentFormId = computed(() => {
+  switch (props.type) {
+    case 'copy': {
+      return props.copyId;
+    }
+    case 'create':
+    case 'edit': {
+      return props.id;
+    }
+    default: {
+      return undefined;
+    }
+  }
+});
+
+/** 加载表单配置 */
+async function loadFormConfig(id: number) {
+  loading.value = true;
+  try {
+    const formDetail = await getForm(id);
+    flowFormConfig.value = formDetail;
+    if (designerRef.value) {
+      setConfAndFields(designerRef, formDetail.conf, formDetail.fields);
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 初始化设计器 */
+async function initializeDesigner() {
+  const id = currentFormId.value;
+  if (props.type === 'copy' && !id) {
+    ElMessage.error('复制 ID 不能为空');
+    return;
+  }
+  if (id) {
+    await loadFormConfig(Number(id));
+  }
+}
+
+/** 保存表单 */
+function handleSave() {
+  formModalApi
+    .setData({
+      designer: designerRef.value,
+      formConfig: flowFormConfig.value,
+      action: props.type,
+    })
+    .open();
+}
+
+/** 返回列表页 */
+function handleBack() {
+  tabs.closeCurrentTab();
+  router.push({
+    name: 'BpmForm',
+  });
+}
+
+/** 初始化 */
+onMounted(() => {
+  initializeDesigner();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleBack" />
+
+    <FcDesigner
+      ref="designerRef"
+      height="90vh"
+      v-loading="loading"
+      :config="designerConfig"
+    >
+      <template #handle>
+        <ElButton size="small" type="primary" @click="handleSave">
+          <IconifyIcon icon="mdi:content-save" />
+          保存
+        </ElButton>
+      </template>
+    </FcDesigner>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/form/designer/modules/form.vue b/apps/web-ele/src/views/bpm/form/designer/modules/form.vue
new file mode 100644
index 000000000..9b9587030
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/form/designer/modules/form.vue
@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import type { FcDesigner } from '@form-create/designer';
+
+import type { BpmFormApi } from '#/api/bpm/form';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createForm, updateForm } from '#/api/bpm/form';
+import { encodeConf, encodeFields } from '#/components/form-create';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const designerComponent = ref<InstanceType<typeof FcDesigner>>();
+const formData = ref<BpmFormApi.Form>();
+const editorAction = ref<string>();
+
+const getTitle = computed(() => {
+  if (!formData.value?.id) {
+    return $t('ui.actionTitle.create', ['流程表单']);
+  }
+  return editorAction.value === 'copy'
+    ? $t('ui.actionTitle.copy', ['流程表单'])
+    : $t('ui.actionTitle.edit', ['流程表单']);
+});
+
+const [Form, formApi] = useVbenForm({
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    try {
+      // 获取表单数据
+      const data = (await formApi.getValues()) as BpmFormApi.Form;
+      // 编码表单配置和表单字段
+      data.conf = encodeConf(designerComponent);
+      data.fields = encodeFields(designerComponent);
+      // 保存表单数据
+      if (formData.value?.id) {
+        await (editorAction.value === 'copy'
+          ? createForm(data)
+          : updateForm(data));
+      } else {
+        await createForm(data);
+      }
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      designerComponent.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<any>();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    // 设置表单设计器组件
+    designerComponent.value = data.designer;
+    formData.value = data.formConfig;
+    editorAction.value = data.action;
+    // 如果是复制，表单名称后缀添加 _copy ，id 置空
+    if (editorAction.value === 'copy' && formData.value) {
+      formData.value = {
+        ...formData.value,
+        name: `${formData.value.name}_copy`,
+        id: undefined,
+      };
+    }
+    try {
+      // 设置到 values
+      if (formData.value) {
+        await formApi.setValues(formData.value);
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/form/index.vue b/apps/web-ele/src/views/bpm/form/index.vue
new file mode 100644
index 000000000..c4e612544
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/form/index.vue
@@ -0,0 +1,185 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmFormApi } from '#/api/bpm/form';
+
+import { onActivated } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteForm, getFormPage } from '#/api/bpm/form';
+import { router } from '#/router';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+defineOptions({ name: 'BpmForm' });
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 新增表单 */
+function handleCreate() {
+  router.push({
+    name: 'BpmFormEditor',
+    query: {
+      type: 'create',
+    },
+  });
+}
+
+/** 编辑表单 */
+function handleEdit(row: BpmFormApi.Form) {
+  router.push({
+    name: 'BpmFormEditor',
+    query: {
+      id: row.id,
+      type: 'edit',
+    },
+  });
+}
+
+/** 复制表单 */
+function handleCopy(row: BpmFormApi.Form) {
+  router.push({
+    name: 'BpmFormEditor',
+    query: {
+      copyId: row.id,
+      type: 'copy',
+    },
+  });
+}
+
+/** 删除表单 */
+async function handleDelete(row: BpmFormApi.Form) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteForm(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 查看表单详情 */
+async function handleDetail(row: BpmFormApi.Form) {
+  detailModalApi.setData(row).open();
+}
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getFormPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmFormApi.Form>,
+});
+
+/** 激活时 */
+onActivated(() => {
+  handleRefresh();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="审批接入（流程表单）"
+        url="https://doc.iocoder.cn/bpm/use-bpm-form/"
+      />
+    </template>
+
+    <DetailModal />
+    <Grid table-title="流程表单">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['流程表单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['bpm:form:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.copy'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.COPY,
+              auth: ['bpm:form:update'],
+              onClick: handleCopy.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['bpm:form:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:form:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['bpm:form:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/form/modules/detail.vue b/apps/web-ele/src/views/bpm/form/modules/detail.vue
new file mode 100644
index 000000000..ad23d235b
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/form/modules/detail.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import FormCreate from '@form-create/element-ui';
+
+import { getForm } from '#/api/bpm/form';
+import { setConfAndFields2 } from '#/components/form-create';
+
+const formConfig = ref<any>({});
+
+const [Modal, modalApi] = useVbenModal({
+  footer: false,
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formConfig.value = await getForm(data.id);
+      setConfAndFields2(
+        formConfig.value,
+        formConfig.value.conf,
+        formConfig.value.fields,
+      );
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    class="w-2/5"
+    title="流程表单详情"
+    :body-style="{
+      maxHeight: '100px',
+    }"
+  >
+    <FormCreate :option="formConfig.option" :rule="formConfig.rule" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/group/data.ts b/apps/web-ele/src/views/bpm/group/data.ts
new file mode 100644
index 000000000..4ecf77cf8
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/group/data.ts
@@ -0,0 +1,167 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { h } from 'vue';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { ElTag } from 'element-plus';
+
+import { z } from '#/adapter/form';
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 关联数据 */
+let userList: SystemUserApi.User[] = [];
+getSimpleUserList().then((data) => (userList = data));
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '组名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入组名',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'description',
+      label: '描述',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入描述',
+      },
+    },
+    {
+      fieldName: 'userIds',
+      label: '成员',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择成员',
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        mode: 'tags',
+      },
+      rules: z.array(z.number()).min(1, '请选择成员').default([]),
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '组名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入组名',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择状态',
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '组名',
+      minWidth: 200,
+    },
+    {
+      field: 'description',
+      title: '描述',
+      minWidth: 200,
+    },
+    {
+      field: 'userIds',
+      title: '成员',
+      minWidth: 200,
+      slots: {
+        default: ({ row }) => {
+          const userIds = row.userIds || [];
+          return userIds.map((userId: number) =>
+            h(
+              ElTag,
+              {
+                type: 'primary',
+                class: 'mr-1',
+              },
+              () => userList.find((u) => u.id === userId)?.nickname,
+            ),
+          );
+        },
+      },
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/group/index.vue b/apps/web-ele/src/views/bpm/group/index.vue
new file mode 100644
index 000000000..bc65d6112
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/group/index.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmUserGroupApi } from '#/api/bpm/userGroup';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteUserGroup, getUserGroupPage } from '#/api/bpm/userGroup';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建用户分组 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑用户分组 */
+function handleEdit(row: BpmUserGroupApi.UserGroup) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除用户分组 */
+async function handleDelete(row: BpmUserGroupApi.UserGroup) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteUserGroup(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getUserGroupPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmUserGroupApi.UserGroup>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="用户分组">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['用户分组']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['bpm:user-group:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['bpm:user-group:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['bpm:user-group:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/group/modules/form.vue b/apps/web-ele/src/views/bpm/group/modules/form.vue
new file mode 100644
index 000000000..c470eedde
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/group/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { BpmUserGroupApi } from '#/api/bpm/userGroup';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createUserGroup,
+  getUserGroup,
+  updateUserGroup,
+} from '#/api/bpm/userGroup';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<BpmUserGroupApi.UserGroup>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['用户分组'])
+    : $t('ui.actionTitle.create', ['用户分组']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as BpmUserGroupApi.UserGroup;
+    try {
+      await (formData.value?.id
+        ? updateUserGroup(data)
+        : createUserGroup(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<BpmUserGroupApi.UserGroup>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getUserGroup(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/processExpression/data.ts b/apps/web-ele/src/views/bpm/processExpression/data.ts
new file mode 100644
index 000000000..76b16d2e1
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processExpression/data.ts
@@ -0,0 +1,126 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'expression',
+      label: '表达式',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入表达式',
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 200,
+    },
+
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'expression',
+      title: '表达式',
+      minWidth: 200,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/processExpression/index.vue b/apps/web-ele/src/views/bpm/processExpression/index.vue
new file mode 100644
index 000000000..658ea4544
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processExpression/index.vue
@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmProcessExpressionApi } from '#/api/bpm/processExpression';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteProcessExpression,
+  getProcessExpressionPage,
+} from '#/api/bpm/processExpression';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建流程表达式 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑流程表达式 */
+function handleEdit(row: BpmProcessExpressionApi.ProcessExpression) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除流程表达式 */
+async function handleDelete(row: BpmProcessExpressionApi.ProcessExpression) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteProcessExpression(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getProcessExpressionPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmProcessExpressionApi.ProcessExpression>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="流程表达式"
+        url="https://doc.iocoder.cn/bpm/expression/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="流程表达式">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['流程表达式']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['bpm:process-expression:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['bpm:process-expression:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['bpm:process-expression:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/processExpression/modules/form.vue b/apps/web-ele/src/views/bpm/processExpression/modules/form.vue
new file mode 100644
index 000000000..9fb981483
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processExpression/modules/form.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { BpmProcessExpressionApi } from '#/api/bpm/processExpression';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createProcessExpression,
+  getProcessExpression,
+  updateProcessExpression,
+} from '#/api/bpm/processExpression';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<BpmProcessExpressionApi.ProcessExpression>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['流程表达式'])
+    : $t('ui.actionTitle.create', ['流程表达式']);
+});
+
+const [Form, formApi] = useVbenForm({
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as BpmProcessExpressionApi.ProcessExpression;
+    try {
+      await (formData.value?.id
+        ? updateProcessExpression(data)
+        : createProcessExpression(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<BpmProcessExpressionApi.ProcessExpression>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getProcessExpression(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/processInstance/data.ts b/apps/web-ele/src/views/bpm/processInstance/data.ts
new file mode 100644
index 000000000..883cc97e2
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/data.ts
@@ -0,0 +1,122 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getCategorySimpleList } from '#/api/bpm/category';
+import { getSimpleProcessDefinitionList } from '#/api/bpm/definition';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '流程名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入流程名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'processDefinitionId',
+      label: '所属流程',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择流程定义',
+        allowClear: true,
+        api: getSimpleProcessDefinitionList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'category',
+      label: '流程分类',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请输入流程分类',
+        allowClear: true,
+        api: getCategorySimpleList,
+        labelField: 'name',
+        valueField: 'code',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '流程状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
+          'number',
+        ),
+        placeholder: '请选择流程状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '发起时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '流程名称',
+      minWidth: 200,
+      fixed: 'left',
+    },
+    {
+      field: 'summary',
+      title: '摘要',
+      minWidth: 200,
+      slots: {
+        default: 'slot-summary',
+      },
+    },
+    {
+      field: 'categoryName',
+      title: '流程分类',
+      minWidth: 120,
+      fixed: 'left',
+    },
+    {
+      field: 'status',
+      title: '流程状态',
+      minWidth: 250,
+      slots: {
+        default: 'slot-status',
+      },
+    },
+    {
+      field: 'startTime',
+      title: '发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'endTime',
+      title: '结束时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/processInstance/index.vue b/apps/web-ele/src/views/bpm/processInstance/index.vue
new file mode 100644
index 000000000..d23bb872c
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/index.vue
@@ -0,0 +1,207 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { h } from 'vue';
+
+import { DocAlert, Page, prompt } from '@vben/common-ui';
+import { BpmProcessInstanceStatus, DICT_TYPE } from '@vben/constants';
+
+import { ElButton, ElInput, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProcessDefinition } from '#/api/bpm/definition';
+import {
+  cancelProcessInstanceByStartUser,
+  getProcessInstanceMyPage,
+} from '#/api/bpm/processInstance';
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
+import { router } from '#/router';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'BpmProcessInstanceMy' });
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 查看流程实例 */
+function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.id },
+  });
+}
+
+/** 重新发起流程 */
+async function handleCreate(row: BpmProcessInstanceApi.ProcessInstance) {
+  // 如果是【业务表单】，不支持重新发起
+  if (row?.id) {
+    const processDefinitionDetail = await getProcessDefinition(
+      row.processDefinitionId,
+    );
+    if (processDefinitionDetail.formType === 20) {
+      ElMessage.error(
+        '重新发起流程失败，原因：该流程使用业务表单，不支持重新发起',
+      );
+      return;
+    }
+  }
+  // 跳转发起流程界面
+  await router.push({
+    name: 'BpmProcessInstanceCreate',
+    query: { processInstanceId: row?.id },
+  });
+}
+
+/** 取消流程实例 */
+function handleCancel(row: BpmProcessInstanceApi.ProcessInstance) {
+  prompt({
+    component: () => {
+      return h(ElInput, {
+        placeholder: '请输入取消原因',
+        clearable: true,
+        rows: 2,
+        type: 'textarea',
+      });
+    },
+    content: '请输入取消原因',
+    title: '取消流程',
+    modelPropName: 'modelValue',
+  }).then(async (reason) => {
+    if (reason) {
+      await cancelProcessInstanceByStartUser(row.id, reason);
+      ElMessage.success('取消成功');
+      handleRefresh();
+    }
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getProcessInstanceMyPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstance>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="流程发起、取消、重新发起"
+        url="https://doc.iocoder.cn/bpm/process-instance"
+      />
+    </template>
+
+    <Grid table-title="流程状态">
+      <template #slot-summary="{ row }">
+        <div
+          class="flex flex-col py-2"
+          v-if="row.summary && row.summary.length > 0"
+        >
+          <div v-for="(item, index) in row.summary" :key="index">
+            <span class="text-gray-500">
+              {{ item.key }} : {{ item.value }}
+            </span>
+          </div>
+        </div>
+        <div v-else>-</div>
+      </template>
+      <template #slot-status="{ row }">
+        <template
+          v-if="
+            row.status === BpmProcessInstanceStatus.RUNNING &&
+            row.tasks!.length > 0
+          "
+        >
+          <!-- 单人审批 -->
+          <template v-if="row.tasks!.length === 1">
+            <span>
+              <ElButton link type="primary" @click="handleDetail(row)">
+                {{ row.tasks![0]!.assigneeUser?.nickname }}
+              </ElButton>
+              ({{ row.tasks![0]!.name }}) 审批中
+            </span>
+          </template>
+          <!-- 多人审批 -->
+          <template v-else>
+            <span>
+              <ElButton link type="primary" @click="handleDetail(row)">
+                {{ row.tasks![0]!.assigneeUser?.nickname }}
+              </ElButton>
+              等 {{ row.tasks!.length }} 人 ({{ row.tasks![0]!.name }})审批中
+            </span>
+          </template>
+        </template>
+        <!-- 非审批中状态 -->
+        <template v-else>
+          <DictTag
+            :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
+            :value="row.status"
+          />
+        </template>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:process-instance:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('ui.actionTitle.cancel'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              ifShow: row.status === BpmProcessInstanceStatus.RUNNING,
+              auth: ['bpm:process-instance:cancel'],
+              onClick: handleCancel.bind(null, row),
+            },
+            {
+              label: '重新发起',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.ADD,
+              ifShow: row.status !== BpmProcessInstanceStatus.RUNNING,
+              auth: ['bpm:process-instance:create'],
+              onClick: handleCreate.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
+
+
diff --git a/apps/web-ele/src/views/bpm/processInstance/manager/data.ts b/apps/web-ele/src/views/bpm/processInstance/manager/data.ts
new file mode 100644
index 000000000..a356cd076
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/manager/data.ts
@@ -0,0 +1,156 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getCategorySimpleList } from '#/api/bpm/category';
+import { getSimpleProcessDefinitionList } from '#/api/bpm/definition';
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'startUserId',
+      label: '发起人',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择发起人',
+        allowClear: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '流程名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入流程名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'processDefinitionId',
+      label: '所属流程',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择流程定义',
+        allowClear: true,
+        api: getSimpleProcessDefinitionList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'category',
+      label: '流程分类',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请输入流程分类',
+        allowClear: true,
+        api: getCategorySimpleList,
+        labelField: 'name',
+        valueField: 'code',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '流程状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
+          'number',
+        ),
+        placeholder: '请选择流程状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '发起时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '流程编号',
+      minWidth: 320,
+      fixed: 'left',
+    },
+    {
+      field: 'name',
+      title: '流程名称',
+      minWidth: 200,
+      fixed: 'left',
+    },
+    {
+      field: 'categoryName',
+      title: '流程分类',
+      minWidth: 120,
+      fixed: 'left',
+    },
+    {
+      field: 'startUser.nickname',
+      title: '流程发起人',
+      minWidth: 120,
+    },
+    {
+      field: 'startUser.deptName',
+      title: '发起部门',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '流程状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS },
+      },
+    },
+    {
+      field: 'startTime',
+      title: '发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'endTime',
+      title: '结束时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'durationInMillis',
+      title: '流程耗时',
+      minWidth: 180,
+      formatter: 'formatPast2',
+    },
+    {
+      field: 'tasks',
+      title: '当前审批任务',
+      minWidth: 320,
+      slots: { default: 'tasks' },
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/processInstance/manager/index.vue b/apps/web-ele/src/views/bpm/processInstance/manager/index.vue
new file mode 100644
index 000000000..0afcbc425
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/manager/index.vue
@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { h } from 'vue';
+
+import { DocAlert, Page, prompt } from '@vben/common-ui';
+import { BpmProcessInstanceStatus } from '@vben/constants';
+
+import { ElButton, ElInput, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  cancelProcessInstanceByAdmin,
+  getProcessInstanceManagerPage,
+} from '#/api/bpm/processInstance';
+import { $t } from '#/locales';
+import { router } from '#/router';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'BpmProcessInstanceManager' });
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 查看任务详情 */
+function handleTaskDetail(
+  row: BpmProcessInstanceApi.ProcessInstance,
+  task: BpmProcessInstanceApi.Task,
+) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.id, taskId: task.id },
+  });
+}
+
+/** 查看流程实例 */
+function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.id },
+  });
+}
+
+/** 取消流程实例 */
+function handleCancel(row: BpmProcessInstanceApi.ProcessInstance) {
+  prompt({
+    component: () => {
+      return h(ElInput, {
+        placeholder: '请输入取消原因',
+        clearable: true,
+        rows: 2,
+        type: 'textarea',
+      });
+    },
+    content: '请输入取消原因',
+    title: '取消流程',
+    modelPropName: 'modelValue',
+  }).then(async (reason) => {
+    if (reason) {
+      await cancelProcessInstanceByAdmin(row.id, reason);
+      ElMessage.success('取消成功');
+      handleRefresh();
+    }
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getProcessInstanceManagerPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstance>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm" />
+    </template>
+
+    <Grid table-title="流程实例">
+      <template #tasks="{ row }">
+        <template v-if="row.tasks && row.tasks.length > 0">
+          <ElButton
+            v-for="task in row.tasks"
+            :key="task.id"
+            link
+            type="primary"
+            @click="handleTaskDetail(row, task)"
+          >
+            {{ task.name }}
+          </ElButton>
+        </template>
+        <span v-else>-</span>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:process-instance:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('ui.actionTitle.cancel'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              ifShow: row.status === BpmProcessInstanceStatus.RUNNING,
+              auth: ['bpm:process-instance:cancel'],
+              onClick: handleCancel.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/processInstance/report/data.ts b/apps/web-ele/src/views/bpm/processInstance/report/data.ts
new file mode 100644
index 000000000..dc099b5bf
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/report/data.ts
@@ -0,0 +1,157 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type {
+  VxeGridPropTypes,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+interface FormField {
+  field: string;
+  title: string;
+  type: string;
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(
+  formFields: FormField[] = [],
+): VbenFormSchema[] {
+  // 基础搜索字段配置
+  const baseFormSchema: VbenFormSchema[] = [
+    {
+      fieldName: 'startUserId',
+      label: '发起人',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择发起人',
+        allowClear: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '流程名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入流程名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '流程状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择流程状态',
+        allowClear: true,
+        options: getDictOptions(
+          DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
+          'number',
+        ),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '发起时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'endTime',
+      label: '结束时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+
+  // 动态表单字段配置：目前支持 input 和 textarea 类型
+  const dynamicFormSchema: VbenFormSchema[] = formFields
+    .filter((item) => ['input', 'textarea'].includes(item.type))
+    .map((item) => ({
+      fieldName: `formFieldsParams.${item.field}`,
+      label: item.title,
+      component: 'Input',
+      componentProps: {
+        placeholder: `请输入${item.title}`,
+        allowClear: true,
+      },
+    }));
+
+  return [...baseFormSchema, ...dynamicFormSchema];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  formFields: FormField[] = [],
+): VxeTableGridOptions['columns'] {
+  // 基础列配置
+  const baseColumns: VxeGridPropTypes.Columns<BpmProcessInstanceApi.ProcessInstance> =
+    [
+      {
+        field: 'name',
+        title: '流程名称',
+        minWidth: 250,
+        fixed: 'left',
+      },
+      {
+        field: 'startUser.nickname',
+        title: '流程发起人',
+        minWidth: 200,
+      },
+      {
+        field: 'status',
+        title: '流程状态',
+        minWidth: 120,
+        cellRender: {
+          name: 'CellDict',
+          props: { type: DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS },
+        },
+      },
+      {
+        field: 'startTime',
+        title: '发起时间',
+        minWidth: 180,
+        formatter: 'formatDateTime',
+      },
+      {
+        field: 'endTime',
+        title: '结束时间',
+        minWidth: 180,
+        formatter: 'formatDateTime',
+      },
+    ];
+
+  // 动态表单字段列配置：根据表单字段生成对应的列，从 formVariables 中获取值
+  const formFieldColumns = formFields.map((item) => ({
+    field: `formVariables.${item.field}`,
+    title: item.title,
+    minWidth: 120,
+    formatter: ({ row }: any) => {
+      return row.formVariables?.[item.field] ?? '';
+    },
+  }));
+
+  return [
+    ...baseColumns,
+    ...formFieldColumns,
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/processInstance/report/index.vue b/apps/web-ele/src/views/bpm/processInstance/report/index.vue
new file mode 100644
index 000000000..5c8641a3d
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/report/index.vue
@@ -0,0 +1,163 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { h, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, prompt } from '@vben/common-ui';
+
+import { ElInput, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProcessDefinition } from '#/api/bpm/definition';
+import {
+  cancelProcessInstanceByAdmin,
+  getProcessInstanceManagerPage,
+} from '#/api/bpm/processInstance';
+import { parseFormFields } from '#/components/form-create';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'BpmProcessInstanceReport' });
+
+const router = useRouter();
+const { query } = useRoute();
+const processDefinitionId = query.processDefinitionId as string;
+
+const formFields = ref<any[]>([]);
+
+/** 获取流程定义 */
+async function getProcessDefinitionData() {
+  const processDefinition = await getProcessDefinition(processDefinitionId);
+  if (processDefinition?.formFields) {
+    formFields.value = parseFormCreateFields(processDefinition.formFields);
+  }
+}
+
+/** 解析表单字段 */
+function parseFormCreateFields(formFields?: string[]) {
+  const result: Array<Record<string, any>> = [];
+  if (formFields) {
+    formFields.forEach((fieldStr: string) => {
+      try {
+        parseFormFields(JSON.parse(fieldStr), result);
+      } catch (error) {
+        console.error('解析表单字段失败', error);
+      }
+    });
+  }
+  return result;
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 查看详情 */
+function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.id },
+  });
+}
+
+/** 取消流程实例 */
+function handleCancel(row: BpmProcessInstanceApi.ProcessInstance) {
+  prompt({
+    component: () => {
+      return h(ElInput, {
+        placeholder: '请输入取消原因',
+        clearable: true,
+        rows: 2,
+        type: 'textarea',
+      });
+    },
+    content: '请输入取消原因',
+    title: '取消流程',
+    modelPropName: 'modelValue',
+  }).then(async (reason) => {
+    if (reason) {
+      await cancelProcessInstanceByAdmin(row.id, reason);
+      ElMessage.success('取消成功');
+      handleRefresh();
+    }
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const { formFieldsParams = {}, ...restValues } = formValues || {};
+          const params = {
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...restValues,
+            processDefinitionKey: query.processDefinitionKey,
+            formFieldsParams: JSON.stringify(formFieldsParams),
+          };
+          return await getProcessInstanceManagerPage(params);
+        },
+      },
+    },
+  } as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstance>,
+});
+
+/** 初始化 */
+onMounted(async () => {
+  // 获取流程定义
+  await getProcessDefinitionData();
+  // 更新表单配置、表格列配置
+  gridApi.formApi.setState({
+    schema: useGridFormSchema(formFields.value),
+  });
+  await gridApi.grid.reloadColumn(useGridColumns(formFields.value) as any[]);
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="流程实例列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '详情',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:process-instance:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: '取消',
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['bpm:process-instance:cancel'],
+              ifShow: row.status === 1,
+              onClick: handleCancel.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/processListener/data.ts b/apps/web-ele/src/views/bpm/processListener/data.ts
new file mode 100644
index 000000000..339f2b8bf
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processListener/data.ts
@@ -0,0 +1,210 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+export const EVENT_EXECUTION_OPTIONS = [
+  {
+    label: 'start',
+    value: 'start',
+  },
+  {
+    label: 'end',
+    value: 'end',
+  },
+];
+
+export const EVENT_OPTIONS = [
+  { label: 'create', value: 'create' },
+  { label: 'assignment', value: 'assignment' },
+  { label: 'complete', value: 'complete' },
+  { label: 'delete', value: 'delete' },
+  { label: 'update', value: 'update' },
+  { label: 'timeout', value: 'timeout' },
+];
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'type',
+      label: '类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.BPM_PROCESS_LISTENER_TYPE, 'string'),
+        placeholder: '请选择类型',
+        allowClear: true,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'event',
+      label: '事件',
+      component: 'Select',
+      componentProps: {
+        options: EVENT_OPTIONS,
+        placeholder: '请选择事件',
+        allowClear: true,
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        trigger: (values) => (values.event = undefined),
+        componentProps: (values) => ({
+          options:
+            values.type === 'execution'
+              ? EVENT_EXECUTION_OPTIONS
+              : EVENT_OPTIONS,
+        }),
+      },
+    },
+    {
+      fieldName: 'valueType',
+      label: '值类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.BPM_PROCESS_LISTENER_VALUE_TYPE,
+          'string',
+        ),
+        placeholder: '请选择值类型',
+        allowClear: true,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'value',
+      label: '类路径|表达式',
+      component: 'Input',
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['valueType'],
+        trigger: (values) => (values.value = undefined),
+        componentProps: (values) => ({
+          placeholder:
+            values.valueType === 'class' ? '请输入类路径' : '请输入表达式',
+        }),
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '类型',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择类型',
+        options: getDictOptions(DICT_TYPE.BPM_PROCESS_LISTENER_TYPE, 'string'),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 200,
+    },
+    {
+      field: 'type',
+      title: '类型',
+      minWidth: 200,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_PROCESS_LISTENER_TYPE },
+      },
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'event',
+      title: '事件',
+      minWidth: 200,
+    },
+    {
+      field: 'valueType',
+      title: '值类型',
+      minWidth: 200,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_PROCESS_LISTENER_VALUE_TYPE },
+      },
+    },
+    {
+      field: 'value',
+      title: '值',
+      minWidth: 200,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/processListener/index.vue b/apps/web-ele/src/views/bpm/processListener/index.vue
new file mode 100644
index 000000000..fee637190
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processListener/index.vue
@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmProcessListenerApi } from '#/api/bpm/processListener';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteProcessListener,
+  getProcessListenerPage,
+} from '#/api/bpm/processListener';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建流程监听器 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑流程监听器 */
+function handleEdit(row: BpmProcessListenerApi.ProcessListener) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除流程监听器 */
+async function handleDelete(row: BpmProcessListenerApi.ProcessListener) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteProcessListener(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getProcessListenerPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmProcessListenerApi.ProcessListener>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="执行监听器、任务监听器"
+        url="https://doc.iocoder.cn/bpm/listener/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="流程监听器">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['流程监听器']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['bpm:process-listener:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['bpm:process-listener:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['bpm:process-listener:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/processListener/modules/form.vue b/apps/web-ele/src/views/bpm/processListener/modules/form.vue
new file mode 100644
index 000000000..0e9a92672
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processListener/modules/form.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { BpmProcessListenerApi } from '#/api/bpm/processListener';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createProcessListener,
+  getProcessListener,
+  updateProcessListener,
+} from '#/api/bpm/processListener';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<BpmProcessListenerApi.ProcessListener>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['流程监听器'])
+    : $t('ui.actionTitle.create', ['流程监听器']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as BpmProcessListenerApi.ProcessListener;
+    try {
+      await (formData.value?.id
+        ? updateProcessListener(data)
+        : createProcessListener(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<BpmProcessListenerApi.ProcessListener>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getProcessListener(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/task/copy/data.ts b/apps/web-ele/src/views/bpm/task/copy/data.ts
new file mode 100644
index 000000000..202887d73
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/task/copy/data.ts
@@ -0,0 +1,92 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '流程名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入流程名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '抄送时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'processInstanceName',
+      title: '流程名称',
+      minWidth: 200,
+    },
+    {
+      field: 'summary',
+      title: '摘要',
+      minWidth: 200,
+      formatter: ({ cellValue }) => {
+        return cellValue && cellValue.length > 0
+          ? cellValue
+              .map((item: any) => `${item.key} : ${item.value}`)
+              .join('\n')
+          : '-';
+      },
+    },
+    {
+      field: 'startUser.nickname',
+      title: '流程发起人',
+      minWidth: 120,
+    },
+    {
+      field: 'processInstanceStartTime',
+      title: '流程发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'activityName',
+      title: '抄送节点',
+      minWidth: 120,
+    },
+    {
+      field: 'createUser.nickname',
+      title: '抄送人',
+      minWidth: 120,
+      formatter: ({ cellValue }) => {
+        return cellValue || '-';
+      },
+    },
+    {
+      field: 'reason',
+      title: '抄送意见',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '抄送时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/task/copy/index.vue b/apps/web-ele/src/views/bpm/task/copy/index.vue
new file mode 100644
index 000000000..b60a02c3f
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/task/copy/index.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProcessInstanceCopyPage } from '#/api/bpm/processInstance';
+import { $t } from '#/locales';
+import { router } from '#/router';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'BpmCopyTask' });
+
+/** 任务详情 */
+function handleDetail(row: BpmProcessInstanceApi.Copy) {
+  const query = {
+    id: row.processInstanceId,
+    ...(row.activityId && { activityId: row.activityId }),
+  };
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query,
+  });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getProcessInstanceCopyPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmProcessInstanceApi.Copy>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="审批转办、委派、抄送"
+        url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+      />
+    </template>
+
+    <Grid table-title="抄送任务">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:task:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/task/done/data.ts b/apps/web-ele/src/views/bpm/task/done/data.ts
new file mode 100644
index 000000000..3c5e9f678
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/task/done/data.ts
@@ -0,0 +1,154 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getCategorySimpleList } from '#/api/bpm/category';
+import { getSimpleProcessDefinitionList } from '#/api/bpm/definition';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '任务名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入任务名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'processDefinitionKey',
+      label: '所属流程',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择流程定义',
+        allowClear: true,
+        api: getSimpleProcessDefinitionList,
+        labelField: 'name',
+        valueField: 'key',
+      },
+    },
+    {
+      fieldName: 'category',
+      label: '流程分类',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请输入流程分类',
+        allowClear: true,
+        api: getCategorySimpleList,
+        labelField: 'name',
+        valueField: 'code',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '审批状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.BPM_TASK_STATUS, 'number'),
+        placeholder: '请选择审批状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '发起时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'processInstance.name',
+      title: '流程',
+      minWidth: 200,
+    },
+    {
+      field: 'processInstance.summary',
+      title: '摘要',
+      minWidth: 200,
+      formatter: ({ cellValue }) => {
+        return cellValue && cellValue.length > 0
+          ? cellValue
+              .map((item: any) => `${item.key} : ${item.value}`)
+              .join('\n')
+          : '-';
+      },
+    },
+    {
+      field: 'processInstance.startUser.nickname',
+      title: '发起人',
+      minWidth: 120,
+    },
+    {
+      field: 'processInstance.createTime',
+      title: '发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'name',
+      title: '当前任务',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '任务开始时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'endTime',
+      title: '任务结束时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'status',
+      title: '审批状态',
+      minWidth: 180,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_TASK_STATUS },
+      },
+    },
+    {
+      field: 'reason',
+      title: '审批建议',
+      minWidth: 180,
+    },
+    {
+      field: 'durationInMillis',
+      title: '耗时',
+      minWidth: 180,
+      formatter: 'formatPast2',
+    },
+    {
+      field: 'processInstanceId',
+      title: '流程编号',
+      minWidth: 280,
+    },
+    {
+      field: 'id',
+      title: '任务编号',
+      minWidth: 280,
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/task/done/index.vue b/apps/web-ele/src/views/bpm/task/done/index.vue
new file mode 100644
index 000000000..cc1aba780
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/task/done/index.vue
@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmTaskApi } from '#/api/bpm/task';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getTaskDonePage, withdrawTask } from '#/api/bpm/task';
+import { router } from '#/router';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'BpmDoneTask' });
+
+/** 查看历史 */
+function handleHistory(row: BpmTaskApi.TaskManager) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstance.id,
+      taskId: row.id,
+    },
+  });
+}
+
+/** 撤回任务 */
+async function handleWithdraw(row: BpmTaskApi.TaskManager) {
+  const loadingInstance = ElLoading.service({
+    text: '正在撤回中...',
+  });
+  try {
+    await withdrawTask(row.id);
+    ElMessage.success('撤回成功');
+    await gridApi.query();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getTaskDonePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmTaskApi.TaskManager>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="审批通过、不通过、驳回"
+        url="https://doc.iocoder.cn/bpm/task-todo-done/"
+      />
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+      <DocAlert
+        title="审批转办、委派、抄送"
+        url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+      />
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+    </template>
+
+    <Grid table-title="已办任务">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '撤回',
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              popConfirm: {
+                title: '确定要撤回该任务吗？',
+                confirm: handleWithdraw.bind(null, row),
+              },
+            },
+            {
+              label: '历史',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              onClick: handleHistory.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/task/manager/data.ts b/apps/web-ele/src/views/bpm/task/manager/data.ts
new file mode 100644
index 000000000..947982b23
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/task/manager/data.ts
@@ -0,0 +1,104 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '任务名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入任务名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'processInstance.name',
+      title: '流程',
+      minWidth: 200,
+    },
+    {
+      field: 'processInstance.startUser.nickname',
+      title: '发起人',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '当前任务',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '任务开始时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'endTime',
+      title: '任务结束时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'assigneeUser.nickname',
+      title: '审批人',
+      minWidth: 180,
+    },
+    {
+      field: 'status',
+      title: '审批状态',
+      minWidth: 180,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_TASK_STATUS },
+      },
+    },
+    {
+      field: 'reason',
+      title: '审批建议',
+      minWidth: 180,
+    },
+    {
+      field: 'durationInMillis',
+      title: '耗时',
+      minWidth: 180,
+      formatter: 'formatPast2',
+    },
+    {
+      field: 'processInstanceId',
+      title: '流程编号',
+      minWidth: 280,
+    },
+    {
+      field: 'id',
+      title: '任务编号',
+      minWidth: 280,
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/task/manager/index.vue b/apps/web-ele/src/views/bpm/task/manager/index.vue
new file mode 100644
index 000000000..9490665dd
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/task/manager/index.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmTaskApi } from '#/api/bpm/task';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getTaskManagerPage } from '#/api/bpm/task';
+import { router } from '#/router';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'BpmManagerTask' });
+
+/** 查看历史 */
+function handleHistory(row: BpmTaskApi.TaskManager) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstance.id,
+    },
+  });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getTaskManagerPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmTaskApi.TaskManager>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
+    </template>
+
+    <Grid table-title="流程任务">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '历史',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:task:query'],
+              onClick: handleHistory.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/task/todo/data.ts b/apps/web-ele/src/views/bpm/task/todo/data.ts
new file mode 100644
index 000000000..0b1efd71c
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/task/todo/data.ts
@@ -0,0 +1,131 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getCategorySimpleList } from '#/api/bpm/category';
+import { getSimpleProcessDefinitionList } from '#/api/bpm/definition';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '任务名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入任务名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'processDefinitionKey',
+      label: '所属流程',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择流程定义',
+        allowClear: true,
+        api: getSimpleProcessDefinitionList,
+        labelField: 'name',
+        valueField: 'key',
+      },
+    },
+    {
+      fieldName: 'category',
+      label: '流程分类',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请输入流程分类',
+        allowClear: true,
+        api: getCategorySimpleList,
+        labelField: 'name',
+        valueField: 'code',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '流程状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
+          'number',
+        ),
+        placeholder: '请选择流程状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '发起时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'processInstance.name',
+      title: '流程',
+      minWidth: 200,
+    },
+    {
+      field: 'processInstance.summary',
+      title: '摘要',
+      minWidth: 200,
+      formatter: ({ cellValue }) => {
+        return cellValue && cellValue.length > 0
+          ? cellValue
+              .map((item: any) => `${item.key} : ${item.value}`)
+              .join('\n')
+          : '-';
+      },
+    },
+    {
+      field: 'processInstance.startUser.nickname',
+      title: '发起人',
+      minWidth: 120,
+    },
+    {
+      field: 'processInstance.createTime',
+      title: '发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'name',
+      title: '当前任务',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '任务时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'processInstanceId',
+      title: '流程编号',
+      minWidth: 280,
+    },
+    {
+      field: 'id',
+      title: '任务编号',
+      minWidth: 280,
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/task/todo/index.vue b/apps/web-ele/src/views/bpm/task/todo/index.vue
new file mode 100644
index 000000000..d80830739
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/task/todo/index.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmTaskApi } from '#/api/bpm/task';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getTaskTodoPage } from '#/api/bpm/task';
+import { router } from '#/router';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'BpmTodoTask' });
+
+/** 办理任务 */
+function handleAudit(row: BpmTaskApi.Task) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstance!.id,
+      taskId: row.id,
+    },
+  });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getTaskTodoPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmTaskApi.Task>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="审批通过、不通过、驳回"
+        url="https://doc.iocoder.cn/bpm/task-todo-done/"
+      />
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+      <DocAlert
+        title="审批转办、委派、抄送"
+        url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+      />
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+    </template>
+
+    <Grid table-title="待办任务">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '办理',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:task:query'],
+              onClick: handleAudit.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/dashboard/workspace/index.vue b/apps/web-ele/src/views/dashboard/workspace/index.vue
index 01a21c6e5..4e15e7d6c 100644
--- a/apps/web-ele/src/views/dashboard/workspace/index.vue
+++ b/apps/web-ele/src/views/dashboard/workspace/index.vue
@@ -49,12 +49,12 @@ const projectItems: WorkbenchProjectItem[] = [
   },
   {
     color: '#ff4d4f',
-    content: 'github.com/yudaocode/yudao-ui-mall-uniapp',
+    content: 'github.com/yudaocode/yudao-mall-uniapp',
     date: '2025-03-04',
     group: 'Vue3 + uniapp 商城手机端',
     icon: 'icon-park-outline:mall-bag',
-    title: 'yudao-ui-mall-uniapp',
-    url: 'https://github.com/yudaocode/yudao-ui-mall-uniapp',
+    title: 'yudao-mall-uniapp',
+    url: 'https://github.com/yudaocode/yudao-mall-uniapp',
   },
   {
     color: '#1890ff',
diff --git a/apps/web-ele/src/views/infra/apiAccessLog/data.ts b/apps/web-ele/src/views/infra/apiAccessLog/data.ts
index 93d736ee9..f10d3be8e 100644
--- a/apps/web-ele/src/views/infra/apiAccessLog/data.ts
+++ b/apps/web-ele/src/views/infra/apiAccessLog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraApiAccessLogApi } from '#/api/infra/api-access-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -181,10 +180,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userType',
       label: '用户类型',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.USER_TYPE,
-          value: data.userType,
+          value: val,
         });
       },
     },
@@ -197,10 +196,11 @@ export function useDetailSchema(): DescriptionItemSchema[] {
       label: '用户 UA',
     },
     {
+      field: 'requestMethod',
       label: '请求信息',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data?.requestMethod && data?.requestUrl) {
-          return `${data.requestMethod} ${data.requestUrl}`;
+      render: (val, data) => {
+        if (val && data?.requestUrl) {
+          return `${val} ${data.requestUrl}`;
         }
         return '';
       },
@@ -208,10 +208,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'requestParams',
       label: '请求参数',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data.requestParams) {
+      render: (val) => {
+        if (val) {
           return h(JsonViewer, {
-            value: JSON.parse(data.requestParams),
+            value: JSON.parse(val),
             previewMode: true,
           });
         }
@@ -224,26 +224,29 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     },
     {
       label: '请求时间',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
+      field: 'beginTime',
+      render: (val, data) => {
         if (data?.beginTime && data?.endTime) {
-          return `${formatDateTime(data.beginTime)} ~ ${formatDateTime(data.endTime)}`;
+          return `${formatDateTime(val)} ~ ${formatDateTime(data.endTime)}`;
         }
         return '';
       },
     },
     {
       label: '请求耗时',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        return data?.duration ? `${data.duration} ms` : '';
+      field: 'duration',
+      render: (val) => {
+        return val ? `${val} ms` : '';
       },
     },
     {
       label: '操作结果',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data?.resultCode === 0) {
+      field: 'resultCode',
+      render: (val, data) => {
+        if (val === 0) {
           return '正常';
         } else if (data && data.resultCode > 0) {
-          return `失败 | ${data.resultCode} | ${data.resultMsg}`;
+          return `失败 | ${val} | ${data.resultMsg}`;
         }
         return '';
       },
@@ -259,10 +262,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'operateType',
       label: '操作类型',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_OPERATE_TYPE,
-          value: data?.operateType,
+          value: val,
         });
       },
     },
diff --git a/apps/web-ele/src/views/infra/apiAccessLog/modules/detail.vue b/apps/web-ele/src/views/infra/apiAccessLog/modules/detail.vue
index bc317f930..3b0186176 100644
--- a/apps/web-ele/src/views/infra/apiAccessLog/modules/detail.vue
+++ b/apps/web-ele/src/views/infra/apiAccessLog/modules/detail.vue
@@ -11,15 +11,10 @@ import { useDetailSchema } from '../data';
 
 const formData = ref<InfraApiAccessLogApi.ApiAccessLog>();
 
+// TODO @xingyu：antd 和 el 这 2 个组件在这个模块的 detail.vue 不一样，看看是不是统一？还是就是区分的哈？
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 1,
-    direction: 'horizontal',
-    labelWidth: 110,
-    title: '',
-    extra: '',
-  },
+  column: 1,
+  labelWidth: 110,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/infra/apiErrorLog/data.ts b/apps/web-ele/src/views/infra/apiErrorLog/data.ts
index 8201f1206..e669a77f1 100644
--- a/apps/web-ele/src/views/infra/apiErrorLog/data.ts
+++ b/apps/web-ele/src/views/infra/apiErrorLog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraApiErrorLogApi } from '#/api/infra/api-error-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -158,10 +157,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userType',
       label: '用户类型',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.USER_TYPE,
-          value: data.userType,
+          value: val,
         });
       },
     },
@@ -176,9 +175,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'requestMethod',
       label: '请求信息',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        if (data?.requestMethod && data?.requestUrl) {
-          return `${data.requestMethod} ${data.requestUrl}`;
+      render: (val, data) => {
+        if (val && data?.requestUrl) {
+          return `${val} ${data.requestUrl}`;
         }
         return '';
       },
@@ -186,10 +185,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'requestParams',
       label: '请求参数',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        if (data.requestParams) {
+      render: (val) => {
+        if (val) {
           return h(JsonViewer, {
-            value: JSON.parse(data.requestParams),
+            value: JSON.parse(val),
             previewMode: true,
           });
         }
@@ -199,8 +198,8 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'exceptionTime',
       label: '异常时间',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        return formatDateTime(data?.exceptionTime || '') as string;
+      render: (val) => {
+        return formatDateTime(val) as string;
       },
     },
     {
@@ -210,12 +209,11 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'exceptionStackTrace',
       label: '异常堆栈',
-      hidden: (data: InfraApiErrorLogApi.ApiErrorLog) =>
-        !data?.exceptionStackTrace,
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        if (data?.exceptionStackTrace) {
+      show: (val) => !val,
+      render: (val) => {
+        if (val) {
           return h('textarea', {
-            value: data.exceptionStackTrace,
+            value: val,
             style:
               'width: 100%; min-height: 200px; max-height: 400px; resize: vertical;',
             readonly: true,
@@ -227,24 +225,24 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'processStatus',
       label: '处理状态',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS,
-          value: data?.processStatus,
+          value: val,
         });
       },
     },
     {
       field: 'processUserId',
       label: '处理人',
-      hidden: (data: InfraApiErrorLogApi.ApiErrorLog) => !data?.processUserId,
+      show: (val) => !val,
     },
     {
       field: 'processTime',
       label: '处理时间',
-      hidden: (data: InfraApiErrorLogApi.ApiErrorLog) => !data?.processTime,
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        return formatDateTime(data?.processTime || '') as string;
+      show: (val) => !val,
+      render: (val) => {
+        return formatDateTime(val) as string;
       },
     },
   ];
diff --git a/apps/web-ele/src/views/infra/apiErrorLog/modules/detail.vue b/apps/web-ele/src/views/infra/apiErrorLog/modules/detail.vue
index 22dd274b4..40a3a8aa2 100644
--- a/apps/web-ele/src/views/infra/apiErrorLog/modules/detail.vue
+++ b/apps/web-ele/src/views/infra/apiErrorLog/modules/detail.vue
@@ -12,14 +12,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<InfraApiErrorLogApi.ApiErrorLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 1,
-    direction: 'horizontal',
-    labelWidth: 110,
-    title: '',
-    extra: '',
-  },
+  column: 1,
+  labelWidth: 110,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/infra/build/index.vue b/apps/web-ele/src/views/infra/build/index.vue
index 733d04121..53ec087b9 100644
--- a/apps/web-ele/src/views/infra/build/index.vue
+++ b/apps/web-ele/src/views/infra/build/index.vue
@@ -27,7 +27,7 @@ const designer = ref(); // 表单设计器
 const designerConfig = ref({
   switchType: [], // 是否可以切换组件类型,或者可以相互切换的字段
   autoActive: true, // 是否自动选中拖入的组件
-  useTemplate: false, // 是否生成vue2语法的模板组件
+  useTemplate: false, // 是否生成 Vue 语法的模板组件
   formOptions: {
     form: {
       labelWidth: '100px', // 设置默认的 label 宽度为 100px
diff --git a/apps/web-ele/src/views/infra/codegen/data.ts b/apps/web-ele/src/views/infra/codegen/data.ts
index e27cffd84..a02a6e191 100644
--- a/apps/web-ele/src/views/infra/codegen/data.ts
+++ b/apps/web-ele/src/views/infra/codegen/data.ts
@@ -25,7 +25,7 @@ export function useImportTableFormSchema(): VbenFormSchema[] {
       label: '数据源',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getDataSourceConfigList(),
+        api: getDataSourceConfigList,
         labelField: 'name',
         valueField: 'id',
         autoSelect: 'first',
diff --git a/apps/web-ele/src/views/infra/codegen/edit/index.vue b/apps/web-ele/src/views/infra/codegen/edit/index.vue
index 93544e10b..5b612254e 100644
--- a/apps/web-ele/src/views/infra/codegen/edit/index.vue
+++ b/apps/web-ele/src/views/infra/codegen/edit/index.vue
@@ -85,7 +85,7 @@ async function submitForm() {
 const tabs = useTabs();
 function close() {
   tabs.closeCurrentTab();
-  router.push('/infra/codegen');
+  router.push({ name: 'InfraCodegen' });
 }
 
 /** 下一步 */
diff --git a/apps/web-ele/src/views/infra/job/data.ts b/apps/web-ele/src/views/infra/job/data.ts
index e2acb01aa..7dbe73b4a 100644
--- a/apps/web-ele/src/views/infra/job/data.ts
+++ b/apps/web-ele/src/views/infra/job/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraJobApi } from '#/api/infra/job';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h, markRaw } from 'vue';
@@ -197,10 +196,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '任务状态',
-      content: (data: InfraJobApi.Job) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_JOB_STATUS,
-          value: data?.status,
+          value: val,
         });
       },
     },
@@ -222,27 +221,27 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     },
     {
       label: '重试间隔',
-      content: (data: InfraJobApi.Job) => {
-        return data?.retryInterval ? `${data.retryInterval} 毫秒` : '无间隔';
+      field: 'retryInterval',
+      render: (val) => {
+        return val ? `${val} 毫秒` : '无间隔';
       },
     },
     {
       label: '监控超时时间',
-      content: (data: InfraJobApi.Job) => {
-        return data?.monitorTimeout && data.monitorTimeout > 0
-          ? `${data.monitorTimeout} 毫秒`
-          : '未开启';
+      field: 'monitorTimeout',
+      render: (val) => {
+        return val && val > 0 ? `${val} 毫秒` : '未开启';
       },
     },
     {
       field: 'nextTimes',
       label: '后续执行时间',
-      content: (data: InfraJobApi.Job) => {
-        if (!data?.nextTimes || data.nextTimes.length === 0) {
+      render: (val) => {
+        if (!val || val.length === 0) {
           return '无后续执行时间';
         }
         return h(ElTimeline, {}, () =>
-          data.nextTimes?.map((time: Date) =>
+          val?.map((time: Date) =>
             h(ElTimelineItem, {}, () => formatDateTime(time)),
           ),
         );
diff --git a/apps/web-ele/src/views/infra/job/logger/data.ts b/apps/web-ele/src/views/infra/job/logger/data.ts
index 1dfcd5f68..f057f4893 100644
--- a/apps/web-ele/src/views/infra/job/logger/data.ts
+++ b/apps/web-ele/src/views/infra/job/logger/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraJobLogApi } from '#/api/infra/job-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -154,9 +153,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'beginTime',
       label: '执行时间',
-      content: (data: InfraJobLogApi.JobLog) => {
-        if (data?.beginTime && data?.endTime) {
-          return `${formatDateTime(data.beginTime)} ~ ${formatDateTime(data.endTime)}`;
+      render: (val, data) => {
+        if (val && data?.endTime) {
+          return `${formatDateTime(val)} ~ ${formatDateTime(data.endTime)}`;
         }
         return '';
       },
@@ -164,17 +163,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'duration',
       label: '执行时长',
-      content: (data: InfraJobLogApi.JobLog) => {
-        return data?.duration ? `${data.duration} 毫秒` : '';
+      render: (val) => {
+        return val ? `${val} 毫秒` : '';
       },
     },
     {
       field: 'status',
       label: '任务状态',
-      content: (data: InfraJobLogApi.JobLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_JOB_LOG_STATUS,
-          value: data?.status,
+          value: val,
         });
       },
     },
diff --git a/apps/web-ele/src/views/infra/job/logger/modules/detail.vue b/apps/web-ele/src/views/infra/job/logger/modules/detail.vue
index 5309523b8..5a5e7a7ad 100644
--- a/apps/web-ele/src/views/infra/job/logger/modules/detail.vue
+++ b/apps/web-ele/src/views/infra/job/logger/modules/detail.vue
@@ -13,14 +13,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<InfraJobLogApi.JobLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 1,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  column: 1,
+  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/infra/job/modules/detail.vue b/apps/web-ele/src/views/infra/job/modules/detail.vue
index f25a57ab6..0ee8e5133 100644
--- a/apps/web-ele/src/views/infra/job/modules/detail.vue
+++ b/apps/web-ele/src/views/infra/job/modules/detail.vue
@@ -14,14 +14,8 @@ const formData = ref<InfraJobApi.Job>(); // 任务详情
 const nextTimes = ref<Date[]>([]); // 下一次执行时间
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 1,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  column: 1,
+  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/infra/redis/modules/info.vue b/apps/web-ele/src/views/infra/redis/modules/info.vue
index 5d4f02d88..bee9922bb 100644
--- a/apps/web-ele/src/views/infra/redis/modules/info.vue
+++ b/apps/web-ele/src/views/infra/redis/modules/info.vue
@@ -1,55 +1,73 @@
 <script lang="ts" setup>
 import type { InfraRedisApi } from '#/api/infra/redis';
 
-import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
+import { useDescription } from '#/components/description';
 
 defineProps<{
   redisData?: InfraRedisApi.RedisMonitorInfo;
 }>();
+
+const [Descriptions] = useDescription({
+  bordered: false,
+  column: 6,
+  schema: [
+    {
+      field: 'info.redis_version',
+      label: 'Redis 版本',
+    },
+    {
+      field: 'info.redis_mode',
+      label: '运行模式',
+      render: (val) => (val === 'standalone' ? '单机' : '集群'),
+    },
+    {
+      field: 'info.tcp_port',
+      label: '端口',
+    },
+    {
+      field: 'info.connected_clients',
+      label: '客户端数',
+    },
+    {
+      field: 'info.uptime_in_days',
+      label: '运行时间(天)',
+    },
+    {
+      field: 'info.used_memory_human',
+      label: '使用内存',
+    },
+    {
+      field: 'info.used_cpu_user_children',
+      label: '使用 CPU',
+      render: (val) => Number.parseFloat(val).toFixed(2),
+    },
+    {
+      field: 'info.maxmemory_human',
+      label: '内存配置',
+    },
+    {
+      field: 'info.aof_enabled',
+      label: 'AOF 是否开启',
+      render: (val) => (val === '0' ? '否' : '是'),
+    },
+    {
+      field: 'info.rdb_last_bgsave_status',
+      label: 'RDB 是否成功',
+    },
+    {
+      field: 'dbSize',
+      label: 'Key 数量',
+    },
+    {
+      field: 'info.instantaneous_input_kbps',
+      label: '网络入口/出口',
+      render: (val, data) =>
+        `${val}kps / ${data?.info?.instantaneous_output_kbps}kps`,
+    },
+  ],
+});
 </script>
 
 <template>
-  <ElDescriptions :column="6" border size="default" :label-width="138">
-    <ElDescriptionsItem label="Redis 版本">
-      {{ redisData?.info?.redis_version }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="运行模式">
-      {{ redisData?.info?.redis_mode === 'standalone' ? '单机' : '集群' }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="端口">
-      {{ redisData?.info?.tcp_port }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="客户端数">
-      {{ redisData?.info?.connected_clients }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="运行时间(天)">
-      {{ redisData?.info?.uptime_in_days }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="使用内存">
-      {{ redisData?.info?.used_memory_human }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="使用 CPU">
-      {{
-        redisData?.info
-          ? parseFloat(redisData?.info?.used_cpu_user_children).toFixed(2)
-          : ''
-      }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="内存配置">
-      {{ redisData?.info?.maxmemory_human }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="AOF 是否开启">
-      {{ redisData?.info?.aof_enabled === '0' ? '否' : '是' }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="RDB 是否成功">
-      {{ redisData?.info?.rdb_last_bgsave_status }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="Key 数量">
-      {{ redisData?.dbSize }}
-    </ElDescriptionsItem>
-    <ElDescriptionsItem label="网络入口/出口">
-      {{ redisData?.info?.instantaneous_input_kbps }}kps /
-      {{ redisData?.info?.instantaneous_output_kbps }}kps
-    </ElDescriptionsItem>
-  </ElDescriptions>
+  <Descriptions :data="redisData" />
 </template>
diff --git a/apps/web-ele/src/views/infra/redis/modules/memory.vue b/apps/web-ele/src/views/infra/redis/modules/memory.vue
index 6eeda8958..5220c4631 100644
--- a/apps/web-ele/src/views/infra/redis/modules/memory.vue
+++ b/apps/web-ele/src/views/infra/redis/modules/memory.vue
@@ -94,7 +94,7 @@ function renderMemoryChart() {
         detail: {
           show: true,
           offsetCenter: [0, '50%'],
-          color: 'auto',
+          color: 'inherit',
           fontSize: 30,
           formatter: usedMemory,
         },
diff --git a/apps/web-ele/src/views/mall/home/modules/member-statistics-card.vue b/apps/web-ele/src/views/mall/home/modules/member-statistics-card.vue
index e9e83c86e..91661214d 100644
--- a/apps/web-ele/src/views/mall/home/modules/member-statistics-card.vue
+++ b/apps/web-ele/src/views/mall/home/modules/member-statistics-card.vue
@@ -7,10 +7,10 @@ import { onMounted, ref } from 'vue';
 
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
-import { ElCard, ElRadio, ElRadioGroup } from 'element-plus';
 import dayjs from 'dayjs';
+import { ElCard, ElRadio, ElRadioGroup } from 'element-plus';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberRegisterCountList } from '#/api/mall/statistics/member';
 
 import {
   getMemberStatisticsChartOptions,
@@ -41,7 +41,7 @@ const timeRangeConfig = {
 const timeRangeType = ref(TimeRangeTypeEnum.DAY30); // 日期快捷选择按钮, 默认 30 天
 
 /** 时间范围类型单选按钮选中 */
-const handleTimeRangeTypeChange = async () => {
+async function handleTimeRangeTypeChange() {
   // 设置时间范围
   let beginTime: Dayjs;
   let endTime: Dayjs;
@@ -71,13 +71,13 @@ const handleTimeRangeTypeChange = async () => {
     }
   }
   // 发送时间范围选中事件
-  await getMemberRegisterCountList(beginTime, endTime);
-};
+  await loadMemberRegisterCountList(beginTime, endTime);
+}
 
-async function getMemberRegisterCountList(beginTime: Dayjs, endTime: Dayjs) {
+async function loadMemberRegisterCountList(beginTime: Dayjs, endTime: Dayjs) {
   loading.value = true;
   try {
-    const list = await MemberStatisticsApi.getMemberRegisterCountList(
+    const list = await getMemberRegisterCountList(
       beginTime.toDate(),
       endTime.toDate(),
     );
diff --git a/apps/web-ele/src/views/mall/home/modules/operation-data-card.vue b/apps/web-ele/src/views/mall/home/modules/operation-data-card.vue
index c9d0ad078..4f6354bfe 100644
--- a/apps/web-ele/src/views/mall/home/modules/operation-data-card.vue
+++ b/apps/web-ele/src/views/mall/home/modules/operation-data-card.vue
@@ -6,9 +6,9 @@ import { CountTo } from '@vben/common-ui';
 
 import { ElCard } from 'element-plus';
 
-import * as ProductSpuApi from '#/api/mall/product/spu';
-import * as PayStatisticsApi from '#/api/mall/statistics/pay';
-import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import { getTabsCount } from '#/api/mall/product/spu';
+import { getWalletRechargePrice } from '#/api/mall/statistics/pay';
+import { getOrderCount } from '#/api/mall/statistics/trade';
 
 /** 运营数据卡片 */
 defineOptions({ name: 'OperationDataCard' });
@@ -51,8 +51,8 @@ const data = reactive({
 });
 
 /** 查询订单数据 */
-const getOrderData = async () => {
-  const orderCount = await TradeStatisticsApi.getOrderCount();
+async function loadOrderData() {
+  const orderCount = await getOrderCount();
   if (orderCount.undelivered) {
     data.orderUndelivered.value = orderCount.undelivered;
   }
@@ -65,33 +65,32 @@ const getOrderData = async () => {
   if (orderCount.auditingWithdraw) {
     data.withdrawAuditing.value = orderCount.auditingWithdraw;
   }
-};
+}
 
 /** 查询商品数据 */
-const getProductData = async () => {
-  const productCount = await ProductSpuApi.getTabsCount();
+async function loadProductData() {
+  const productCount = await getTabsCount();
   data.productForSale.value = productCount['0'] || 0;
   data.productInWarehouse.value = productCount['1'] || 0;
   data.productAlertStock.value = productCount['3'] || 0;
-};
+}
 
 /** 查询钱包充值数据 */
-const getWalletRechargeData = async () => {
-  const paySummary = await PayStatisticsApi.getWalletRechargePrice();
+async function loadWalletRechargeData() {
+  const paySummary = await getWalletRechargePrice();
   data.rechargePrice.value = paySummary.rechargePrice;
-};
+}
 
 /** 跳转到对应页面 */
-// TODO @xingyu：貌似通过 name 的方式，都无法跳转，找不到路由？
-const handleClick = (routerName: string) => {
+function handleClick(routerName: string) {
   router.push({ name: routerName });
-};
+}
 
 /** 激活时 */
 onActivated(() => {
-  getOrderData();
-  getProductData();
-  getWalletRechargeData();
+  loadOrderData();
+  loadProductData();
+  loadWalletRechargeData();
 });
 
 /** 初始化 */
diff --git a/apps/web-ele/src/views/mall/home/modules/shortcut-card.vue b/apps/web-ele/src/views/mall/home/modules/shortcut-card.vue
index 8a44c3ea6..8bd97d6e8 100644
--- a/apps/web-ele/src/views/mall/home/modules/shortcut-card.vue
+++ b/apps/web-ele/src/views/mall/home/modules/shortcut-card.vue
@@ -63,7 +63,6 @@ const menuList = [
 ];
 
 /** 跳转到菜单对应页面 */
-// TODO @xingyu：貌似通过 name 的方式，都无法跳转，找不到路由？
 function handleMenuClick(routerName: string) {
   router.push({ name: routerName });
 }
diff --git a/apps/web-ele/src/views/mall/home/modules/trade-trend-card.vue b/apps/web-ele/src/views/mall/home/modules/trade-trend-card.vue
index 5a584cb21..70bca614e 100644
--- a/apps/web-ele/src/views/mall/home/modules/trade-trend-card.vue
+++ b/apps/web-ele/src/views/mall/home/modules/trade-trend-card.vue
@@ -8,10 +8,10 @@ import { onMounted, ref } from 'vue';
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 import { fenToYuan } from '@vben/utils';
 
-import { ElCard, ElRadio, ElRadioGroup } from 'element-plus';
 import dayjs from 'dayjs';
+import { ElCard, ElRadio, ElRadioGroup } from 'element-plus';
 
-import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import { getOrderCountTrendComparison } from '#/api/mall/statistics/trade';
 
 import {
   getTradeTrendChartOptions,
@@ -46,7 +46,7 @@ const timeRangeConfig = {
 const timeRangeType = ref(TimeRangeTypeEnum.DAY30); // 日期快捷选择按钮, 默认 30 天
 
 /** 时间范围类型单选按钮选中 */
-const handleTimeRangeTypeChange = async () => {
+async function handleTimeRangeTypeChange() {
   // 设置时间范围
   let beginTime: Dayjs;
   let endTime: Dayjs;
@@ -76,15 +76,15 @@ const handleTimeRangeTypeChange = async () => {
     }
   }
   // 发送时间范围选中事件
-  await getOrderCountTrendComparison(beginTime, endTime);
-};
+  await loadOrderCountTrendComparison(beginTime, endTime);
+}
 
 /** 查询订单数量趋势对照数据 */
-async function getOrderCountTrendComparison(beginTime: Dayjs, endTime: Dayjs) {
+async function loadOrderCountTrendComparison(beginTime: Dayjs, endTime: Dayjs) {
   loading.value = true;
   try {
     // 1. 查询数据
-    const list = await TradeStatisticsApi.getOrderCountTrendComparison(
+    const list = await getOrderCountTrendComparison(
       timeRangeType.value,
       beginTime.toDate(),
       endTime.toDate(),
diff --git a/apps/web-ele/src/views/mall/product/category/components/product-category-select.vue b/apps/web-ele/src/views/mall/product/category/components/product-category-select.vue
index 441542b5d..23169691e 100644
--- a/apps/web-ele/src/views/mall/product/category/components/product-category-select.vue
+++ b/apps/web-ele/src/views/mall/product/category/components/product-category-select.vue
@@ -3,7 +3,7 @@ import { computed, onMounted, ref } from 'vue';
 
 import { handleTree } from '@vben/utils';
 
-import * as ProductCategoryApi from '#/api/mall/product/category';
+import { getCategoryList } from '#/api/mall/product/category';
 
 /** 商品分类选择组件 */
 defineOptions({ name: 'ProductCategorySelect' });
@@ -42,8 +42,7 @@ const selectCategoryId = computed({
 /** 初始化 */
 const categoryList = ref<any[]>([]); // 分类树
 onMounted(async () => {
-  // 获得分类树
-  const data = await ProductCategoryApi.getCategoryList({
+  const data = await getCategoryList({
     parentId: props.parentId,
   });
   categoryList.value = handleTree(data, 'id', 'parentId');
diff --git a/apps/web-ele/src/views/mall/product/category/index.vue b/apps/web-ele/src/views/mall/product/category/index.vue
index 9b785ed44..14802a1e9 100644
--- a/apps/web-ele/src/views/mall/product/category/index.vue
+++ b/apps/web-ele/src/views/mall/product/category/index.vue
@@ -63,7 +63,7 @@ function handleExpand() {
 }
 
 /** 查看商品操作 */
-const router = useRouter(); // 路由
+const router = useRouter();
 function handleViewSpu(id: number) {
   router.push({
     path: '/mall/product/spu',
diff --git a/apps/web-ele/src/views/mall/product/comment/data.ts b/apps/web-ele/src/views/mall/product/comment/data.ts
index fe29e3153..7a3641ef2 100644
--- a/apps/web-ele/src/views/mall/product/comment/data.ts
+++ b/apps/web-ele/src/views/mall/product/comment/data.ts
@@ -23,7 +23,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '商品',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSpuSimpleList(),
+        api: getSpuSimpleList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择商品',
diff --git a/apps/web-ele/src/views/mall/product/comment/index.vue b/apps/web-ele/src/views/mall/product/comment/index.vue
index 7d37b78e9..373dbe7c0 100644
--- a/apps/web-ele/src/views/mall/product/comment/index.vue
+++ b/apps/web-ele/src/views/mall/product/comment/index.vue
@@ -71,17 +71,13 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新状态
-        const res = await updateCommentVisible({
+        await updateCommentVisible({
           id: row.id!,
           visible: newStatus,
         });
-        if (res) {
-          // 提示并返回成功
-          ElMessage.success(`${text}成功`);
-          resolve(true);
-        } else {
-          reject(new Error('操作失败'));
-        }
+        // 提示并返回成功
+        ElMessage.success(`${text}成功`);
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-ele/src/views/mall/product/property/data.ts b/apps/web-ele/src/views/mall/product/property/data.ts
index 4f724d28d..1fd2f2e87 100644
--- a/apps/web-ele/src/views/mall/product/property/data.ts
+++ b/apps/web-ele/src/views/mall/product/property/data.ts
@@ -113,7 +113,7 @@ export function useValueFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: (values) => {
         return {
-          api: () => getPropertySimpleList(),
+          api: getPropertySimpleList,
           placeholder: '请选择属性',
           labelField: 'name',
           valueField: 'id',
@@ -153,7 +153,7 @@ export function useValueGridFormSchema(): VbenFormSchema[] {
       label: '属性项',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getPropertySimpleList(),
+        api: getPropertySimpleList,
         placeholder: '请选择属性项',
         labelField: 'name',
         valueField: 'id',
diff --git a/apps/web-ele/src/views/mall/product/spu/index.vue b/apps/web-ele/src/views/mall/product/spu/index.vue
index 78952f038..61ae8d8d0 100644
--- a/apps/web-ele/src/views/mall/product/spu/index.vue
+++ b/apps/web-ele/src/views/mall/product/spu/index.vue
@@ -31,7 +31,7 @@ import { useGridColumns, useGridFormSchema } from './data';
 
 const { push } = useRouter();
 const tabType = ref(0);
-const route = useRoute(); // 路由
+const route = useRoute();
 const categoryList = ref();
 
 // tabs 数据
@@ -136,17 +136,13 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新状态
-        const res = await updateStatus({
+        await updateStatus({
           id: row.id as number,
           status: newStatus,
         });
-        if (res) {
-          // 提示并返回成功
-          ElMessage.success(`${text}成功`);
-          resolve(true);
-        } else {
-          reject(new Error('操作失败'));
-        }
+        // 提示并返回成功
+        ElMessage.success(`${text}成功`);
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
@@ -224,9 +220,8 @@ onMounted(async () => {
     </template>
 
     <Grid>
-      <template #top>
-        <!-- TODO @xingyu：tabs 可以考虑往上以一些，和操作按钮在一排 -->
-        <ElTabs class="border-none" @tab-change="onChangeTab">
+      <template #toolbar-actions>
+        <ElTabs class="w-full" @tab-change="onChangeTab" :stretch="true">
           <ElTabs.TabPane
             v-for="item in tabsData"
             :key="item.type"
diff --git a/apps/web-ele/src/views/mall/product/spu/modules/detail.vue b/apps/web-ele/src/views/mall/product/spu/modules/detail.vue
index b31f6f60a..78de39519 100644
--- a/apps/web-ele/src/views/mall/product/spu/modules/detail.vue
+++ b/apps/web-ele/src/views/mall/product/spu/modules/detail.vue
@@ -41,8 +41,8 @@ interface Brand {
   name: string;
 }
 
-const { push } = useRouter(); // 路由
-const { params } = useRoute(); // 查询参数
+const { push } = useRouter();
+const { params } = useRoute();
 
 const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const activeTab = ref('basic'); // 当前激活的标签页
diff --git a/apps/web-ele/src/views/mall/product/spu/modules/form-data.ts b/apps/web-ele/src/views/mall/product/spu/modules/form-data.ts
index ad5cf83e5..28941341e 100644
--- a/apps/web-ele/src/views/mall/product/spu/modules/form-data.ts
+++ b/apps/web-ele/src/views/mall/product/spu/modules/form-data.ts
@@ -50,7 +50,7 @@ export function useInfoFormSchema(): VbenFormSchema[] {
       label: '商品品牌',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleBrandList(),
+        api: getSimpleBrandList,
         labelField: 'name',
         valueField: 'id',
         allowClear: true,
@@ -181,7 +181,7 @@ export function useDeliveryFormSchema(): VbenFormSchema[] {
       label: '运费模板',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleTemplateList(),
+        api: getSimpleTemplateList,
         labelField: 'name',
         valueField: 'id',
       },
diff --git a/apps/web-ele/src/views/mall/promotion/article/data.ts b/apps/web-ele/src/views/mall/promotion/article/data.ts
index e758bdf5c..b2652227f 100644
--- a/apps/web-ele/src/views/mall/promotion/article/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/article/data.ts
@@ -38,7 +38,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '文章分类',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleArticleCategoryList(),
+        api: getSimpleArticleCategoryList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择文章分类',
@@ -140,7 +140,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '文章分类',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleArticleCategoryList(),
+        api: getSimpleArticleCategoryList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择文章分类',
diff --git a/apps/web-ele/src/views/mall/promotion/banner/data.ts b/apps/web-ele/src/views/mall/promotion/banner/data.ts
index df31aefb4..37f5ac085 100644
--- a/apps/web-ele/src/views/mall/promotion/banner/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/banner/data.ts
@@ -139,7 +139,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'status',
       minWidth: 150,
       cellRender: {
-        name: 'CellDictTag',
+        name: 'CellDict',
         props: {
           dictType: DICT_TYPE.COMMON_STATUS,
         },
@@ -150,7 +150,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'position',
       minWidth: 150,
       cellRender: {
-        name: 'CellDictTag',
+        name: 'CellDict',
         props: {
           dictType: DICT_TYPE.PROMOTION_BANNER_POSITION,
         },
diff --git a/apps/web-ele/src/components/app-link-input/app-link-select-dialog.vue b/apps/web-ele/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
similarity index 85%
rename from apps/web-ele/src/components/app-link-input/app-link-select-dialog.vue
rename to apps/web-ele/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
index 06d71be76..b2362962a 100644
--- a/apps/web-ele/src/components/app-link-input/app-link-select-dialog.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
@@ -13,17 +13,31 @@ import ProductCategorySelect from '#/views/mall/product/category/components/prod
 
 import { APP_LINK_GROUP_LIST, APP_LINK_TYPE_ENUM } from './data';
 
-// APP 链接选择弹框
+/** APP 链接选择弹框 */
 defineOptions({ name: 'AppLinkSelectDialog' });
-// 处理绑定值更新
+
 const emit = defineEmits<{
   appLinkChange: [appLink: AppLink];
   change: [link: string];
 }>();
-// 选中的分组，默认选中第一个
-const activeGroup = ref(APP_LINK_GROUP_LIST[0]?.name);
-// 选中的 APP 链接
-const activeAppLink = ref({} as AppLink);
+
+const activeGroup = ref(APP_LINK_GROUP_LIST[0]?.name); // 选中的分组，默认选中第一个
+const activeAppLink = ref({} as AppLink); // 选中的 APP 链接
+
+const linkScrollbar = ref<ScrollbarInstance>(); // 右侧滚动条
+const groupTitleRefs = ref<HTMLInputElement[]>([]); // 分组标题引用列表
+const groupScrollbar = ref<ScrollbarInstance>(); // 分组滚动条
+const groupBtnRefs = ref<ButtonInstance[]>([]); // 分组引用列表
+
+const detailSelectDialog = ref<{
+  id?: number;
+  type?: APP_LINK_TYPE_ENUM;
+  visible: boolean;
+}>({
+  visible: false,
+  id: undefined,
+  type: undefined,
+}); // 详情选择对话框
 
 /** 打开弹窗 */
 const dialogVisible = ref(false);
@@ -47,7 +61,7 @@ const open = (link: string) => {
 };
 defineExpose({ open });
 
-// 处理 APP 链接选中
+/** 处理 APP 链接选中 */
 const handleAppLinkSelected = (appLink: AppLink) => {
   if (!isSameLink(appLink.path, activeAppLink.value.path)) {
     activeAppLink.value = appLink;
@@ -70,20 +84,18 @@ const handleAppLinkSelected = (appLink: AppLink) => {
   }
 };
 
-const handleSubmit = () => {
+function handleSubmit() {
   dialogVisible.value = false;
   emit('change', activeAppLink.value.path);
   emit('appLinkChange', activeAppLink.value);
-};
+}
 
-// 分组标题引用列表
-const groupTitleRefs = ref<HTMLInputElement[]>([]);
 /**
  * 处理右侧链接列表滚动
  * @param {object} param0 滚动事件参数
  * @param {number} param0.scrollTop 滚动条的位置
  */
-const handleScroll = ({ scrollTop }: { scrollTop: number }) => {
+function handleScroll({ scrollTop }: { scrollTop: number }) {
   const titleEl = groupTitleRefs.value.find((titleEl: HTMLInputElement) => {
     // 获取标题的位置信息
     const { offsetHeight, offsetTop } = titleEl;
@@ -96,12 +108,10 @@ const handleScroll = ({ scrollTop }: { scrollTop: number }) => {
     // 同步左侧的滚动条位置
     scrollToGroupBtn(activeGroup.value);
   }
-};
+}
 
-// 右侧滚动条
-const linkScrollbar = ref<ScrollbarInstance>();
-// 处理分组选中
-const handleGroupSelected = (group: string) => {
+/** 处理分组选中 */
+function handleGroupSelected(group: string) {
   activeGroup.value = group;
   const titleRef = groupTitleRefs.value.find(
     (item: HTMLInputElement) => item.textContent === group,
@@ -110,39 +120,26 @@ const handleGroupSelected = (group: string) => {
     // 滚动分组标题
     linkScrollbar.value?.setScrollTop(titleRef.offsetTop);
   }
-};
+}
 
-// 分组滚动条
-const groupScrollbar = ref<ScrollbarInstance>();
-// 分组引用列表
-const groupBtnRefs = ref<ButtonInstance[]>([]);
-// 自动滚动分组按钮，确保分组按钮保持在可视区域内
-const scrollToGroupBtn = (group: string) => {
+/** 自动滚动分组按钮，确保分组按钮保持在可视区域内 */
+function scrollToGroupBtn(group: string) {
   const groupBtn = groupBtnRefs.value
     .map((btn: ButtonInstance) => btn.ref)
     .find((ref: HTMLButtonElement | undefined) => ref?.textContent === group);
   if (groupBtn) {
     groupScrollbar.value?.setScrollTop(groupBtn.offsetTop);
   }
-};
+}
 
-// 是否为相同的链接（不比较参数，只比较链接）
-const isSameLink = (link1: string, link2: string) => {
+/** 是否为相同的链接（不比较参数，只比较链接） */
+function isSameLink(link1: string, link2: string) {
   return link2 ? link1.split('?')[0] === link2.split('?')[0] : false;
-};
+}
 
-// 详情选择对话框
-const detailSelectDialog = ref<{
-  id?: number;
-  type?: APP_LINK_TYPE_ENUM;
-  visible: boolean;
-}>({
-  visible: false,
-  id: undefined,
-  type: undefined,
-});
-// 处理详情选择
-const handleProductCategorySelected = (id: number) => {
+/** 处理详情选择 */
+function handleProductCategorySelected(id: number) {
+  // TODO @AI：这里有点问题；activeAppLink 地址；
   const url = new URL(activeAppLink.value.path, 'http://127.0.0.1');
   // 修改 id 参数
   url.searchParams.set('id', `${id}`);
@@ -152,7 +149,7 @@ const handleProductCategorySelected = (id: number) => {
   detailSelectDialog.value.visible = false;
   // 重置 id
   detailSelectDialog.value.id = undefined;
-};
+}
 </script>
 <template>
   <el-dialog v-model="dialogVisible" title="选择链接" width="65%">
diff --git a/apps/web-ele/src/views/mall/promotion/components/app-link-input/data.ts b/apps/web-ele/src/views/mall/promotion/components/app-link-input/data.ts
new file mode 100644
index 000000000..3eb3db71f
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/app-link-input/data.ts
@@ -0,0 +1,220 @@
+/** APP 链接分组 */
+export interface AppLinkGroup {
+  name: string; // 分组名称
+  links: AppLink[]; // 链接列表
+}
+
+/** APP 链接 */
+export interface AppLink {
+  name: string; // 链接名称
+  path: string; // 链接地址
+  type?: APP_LINK_TYPE_ENUM; // 链接的类型
+}
+
+/** APP 链接类型（需要特殊处理，例如商品详情） */
+export enum APP_LINK_TYPE_ENUM {
+  ACTIVITY_COMBINATION, // 拼团活动
+  ACTIVITY_POINT, // 积分商城活动
+  ACTIVITY_SECKILL, // 秒杀活动
+  ARTICLE_DETAIL, // 文章详情
+  COUPON_DETAIL, // 优惠券详情
+  DIY_PAGE_DETAIL, // 自定义页面详情
+  PRODUCT_CATEGORY_LIST, // 品类列表
+  PRODUCT_DETAIL_COMBINATION, // 拼团商品详情
+  PRODUCT_DETAIL_NORMAL, // 商品详情
+  PRODUCT_DETAIL_SECKILL, // 秒杀商品详情
+  PRODUCT_LIST, // 商品列表
+}
+
+/** APP 链接列表（做一下持久化？） */
+export const APP_LINK_GROUP_LIST = [
+  {
+    name: '商城',
+    links: [
+      {
+        name: '首页',
+        path: '/pages/index/index',
+      },
+      {
+        name: '商品分类',
+        path: '/pages/index/category',
+        type: APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST,
+      },
+      {
+        name: '购物车',
+        path: '/pages/index/cart',
+      },
+      {
+        name: '个人中心',
+        path: '/pages/index/user',
+      },
+      {
+        name: '商品搜索',
+        path: '/pages/index/search',
+      },
+      {
+        name: '自定义页面',
+        path: '/pages/index/page',
+        type: APP_LINK_TYPE_ENUM.DIY_PAGE_DETAIL,
+      },
+      {
+        name: '客服',
+        path: '/pages/chat/index',
+      },
+      {
+        name: '系统设置',
+        path: '/pages/public/setting',
+      },
+      {
+        name: '常见问题',
+        path: '/pages/public/faq',
+      },
+    ],
+  },
+  {
+    name: '商品',
+    links: [
+      {
+        name: '商品列表',
+        path: '/pages/goods/list',
+        type: APP_LINK_TYPE_ENUM.PRODUCT_LIST,
+      },
+      {
+        name: '商品详情',
+        path: '/pages/goods/index',
+        type: APP_LINK_TYPE_ENUM.PRODUCT_DETAIL_NORMAL,
+      },
+      {
+        name: '拼团商品详情',
+        path: '/pages/goods/groupon',
+        type: APP_LINK_TYPE_ENUM.PRODUCT_DETAIL_COMBINATION,
+      },
+      {
+        name: '秒杀商品详情',
+        path: '/pages/goods/seckill',
+        type: APP_LINK_TYPE_ENUM.PRODUCT_DETAIL_SECKILL,
+      },
+    ],
+  },
+  {
+    name: '营销活动',
+    links: [
+      {
+        name: '拼团订单',
+        path: '/pages/activity/groupon/order',
+      },
+      {
+        name: '营销商品',
+        path: '/pages/activity/index',
+      },
+      {
+        name: '拼团活动',
+        path: '/pages/activity/groupon/list',
+        type: APP_LINK_TYPE_ENUM.ACTIVITY_COMBINATION,
+      },
+      {
+        name: '秒杀活动',
+        path: '/pages/activity/seckill/list',
+        type: APP_LINK_TYPE_ENUM.ACTIVITY_SECKILL,
+      },
+      {
+        name: '积分商城活动',
+        path: '/pages/activity/point/list',
+        type: APP_LINK_TYPE_ENUM.ACTIVITY_POINT,
+      },
+      {
+        name: '签到中心',
+        path: '/pages/app/sign',
+      },
+      {
+        name: '优惠券中心',
+        path: '/pages/coupon/list',
+      },
+      {
+        name: '优惠券详情',
+        path: '/pages/coupon/detail',
+        type: APP_LINK_TYPE_ENUM.COUPON_DETAIL,
+      },
+      {
+        name: '文章详情',
+        path: '/pages/public/richtext',
+        type: APP_LINK_TYPE_ENUM.ARTICLE_DETAIL,
+      },
+    ],
+  },
+  {
+    name: '分销商城',
+    links: [
+      {
+        name: '分销中心',
+        path: '/pages/commission/index',
+      },
+      {
+        name: '推广商品',
+        path: '/pages/commission/goods',
+      },
+      {
+        name: '分销订单',
+        path: '/pages/commission/order',
+      },
+      {
+        name: '我的团队',
+        path: '/pages/commission/team',
+      },
+    ],
+  },
+  {
+    name: '支付',
+    links: [
+      {
+        name: '充值余额',
+        path: '/pages/pay/recharge',
+      },
+      {
+        name: '充值记录',
+        path: '/pages/pay/recharge-log',
+      },
+    ],
+  },
+  {
+    name: '用户中心',
+    links: [
+      {
+        name: '用户信息',
+        path: '/pages/user/info',
+      },
+      {
+        name: '用户订单',
+        path: '/pages/order/list',
+      },
+      {
+        name: '售后订单',
+        path: '/pages/order/aftersale/list',
+      },
+      {
+        name: '商品收藏',
+        path: '/pages/user/goods-collect',
+      },
+      {
+        name: '浏览记录',
+        path: '/pages/user/goods-log',
+      },
+      {
+        name: '地址管理',
+        path: '/pages/user/address/list',
+      },
+      {
+        name: '用户佣金',
+        path: '/pages/user/wallet/commission',
+      },
+      {
+        name: '用户余额',
+        path: '/pages/user/wallet/money',
+      },
+      {
+        name: '用户积分',
+        path: '/pages/user/wallet/score',
+      },
+    ],
+  },
+] as AppLinkGroup[];
diff --git a/apps/web-ele/src/components/app-link-input/index.vue b/apps/web-ele/src/views/mall/promotion/components/app-link-input/index.vue
similarity index 73%
rename from apps/web-ele/src/components/app-link-input/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/app-link-input/index.vue
index 8604e581b..2118dda5b 100644
--- a/apps/web-ele/src/components/app-link-input/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/app-link-input/index.vue
@@ -1,33 +1,31 @@
 <script lang="ts" setup>
-// TODO @芋艿：后续合并到 diy-editor 里，并不是通用的；
+// TODO @AI：改成 El 标签风格，而不是 el-
+// TODO @AI：一些 modal 是否使用 Modal 组件，而不是 el-modal？
 import { ref, watch } from 'vue';
 
 import AppLinkSelectDialog from './app-link-select-dialog.vue';
 
-// APP 链接输入框
+/** APP 链接输入框 */
 defineOptions({ name: 'AppLinkInput' });
+
 // 定义属性
 const props = defineProps({
-  // 当前选中的链接
   modelValue: {
     type: String,
     default: '',
-  },
+  }, // 当前选中的链接
 });
-// setter
+
 const emit = defineEmits<{
   'update:modelValue': [link: string];
 }>();
-// 当前的链接
-const appLink = ref('');
-// 选择对话框
-const dialogRef = ref();
-// 处理打开对话框
-const handleOpenDialog = () => dialogRef.value?.open(appLink.value);
-// 处理 APP 链接选中
-const handleLinkSelected = (link: string) => (appLink.value = link);
 
-// getter
+const dialogRef = ref(); // 选择对话框
+
+const appLink = ref(''); // 当前的链接
+const handleOpenDialog = () => dialogRef.value?.open(appLink.value); // 处理打开对话框
+const handleLinkSelected = (link: string) => (appLink.value = link); // 处理 APP 链接选中
+
 watch(
   () => props.modelValue,
   () => (appLink.value = props.modelValue),
@@ -45,5 +43,6 @@ watch(
       <el-button @click="handleOpenDialog">选择</el-button>
     </template>
   </el-input>
+
   <AppLinkSelectDialog ref="dialogRef" @change="handleLinkSelected" />
 </template>
diff --git a/apps/web-ele/src/components/color-input/index.vue b/apps/web-ele/src/views/mall/promotion/components/color-input/index.vue
similarity index 88%
rename from apps/web-ele/src/components/color-input/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/color-input/index.vue
index a3beed791..fdc881853 100644
--- a/apps/web-ele/src/components/color-input/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/color-input/index.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-// TODO @芋艿：后续合并到 diy-editor 里，并不是通用的；
+// TODO @AI：改成 El 风格，而不是iel- 风格；
 import { computed } from 'vue';
 
 import { PREDEFINE_COLORS } from '@vben/constants';
 
-// 颜色输入框
+/** 颜色输入框 */
 defineOptions({ name: 'ColorInput' });
 
 const props = defineProps({
@@ -13,7 +13,9 @@ const props = defineProps({
     default: '',
   },
 });
+
 const emit = defineEmits(['update:modelValue']);
+
 const color = computed({
   get: () => {
     return props.modelValue;
diff --git a/apps/web-ele/src/components/diy-editor/components/component-container-property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
similarity index 97%
rename from apps/web-ele/src/components/diy-editor/components/component-container-property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
index 24062a191..beb68711d 100644
--- a/apps/web-ele/src/components/diy-editor/components/component-container-property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ComponentStyle } from '#/components/diy-editor/util';
+import type { ComponentStyle } from '../util';
 
 import { useVModel } from '@vueuse/core';
 import {
@@ -14,8 +14,8 @@ import {
   ElTree,
 } from 'element-plus';
 
-import ColorInput from '#/components/color-input/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
 
 /**
  * 组件容器属性：目前右边部分
diff --git a/apps/web-ele/src/components/diy-editor/components/component-container.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue
similarity index 94%
rename from apps/web-ele/src/components/diy-editor/components/component-container.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue
index 5a9b803d1..f5696f8a3 100644
--- a/apps/web-ele/src/components/diy-editor/components/component-container.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '#/components/diy-editor/util';
+import type { ComponentStyle, DiyComponent } from '../util';
 
 import { computed } from 'vue';
 
@@ -10,8 +7,9 @@ import { IconifyIcon } from '@vben/icons';
 
 import { ElButton, ElTooltip } from 'element-plus';
 
-import { components } from '#/components/diy-editor/components/mobile';
-import VerticalButtonGroup from '#/components/vertical-button-group/index.vue';
+import { VerticalButtonGroup } from '#/views/mall/promotion/components';
+
+import { components } from './mobile';
 
 /**
  * 组件容器：目前在中间部分
@@ -51,9 +49,8 @@ const emits = defineEmits<{
 type DiyComponentWithStyle = DiyComponent<any> & {
   property: { style?: ComponentStyle };
 };
-/**
- * 组件样式
- */
+
+/** 组件样式 */
 const style = computed(() => {
   const componentStyle = props.component.property.style;
   if (!componentStyle) {
@@ -80,24 +77,17 @@ const style = computed(() => {
   };
 });
 
-/**
- * 移动组件
- * @param direction 移动方向
- */
+/** 移动组件 */
 const handleMoveComponent = (direction: number) => {
   emits('move', direction);
 };
 
-/**
- * 复制组件
- */
+/** 复制组件 */
 const handleCopyComponent = () => {
   emits('copy');
 };
 
-/**
- * 删除组件
- */
+/** 删除组件 */
 const handleDeleteComponent = () => {
   emits('delete');
 };
diff --git a/apps/web-ele/src/components/diy-editor/components/component-library.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
similarity index 93%
rename from apps/web-ele/src/components/diy-editor/components/component-library.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
index 628c1c559..9428a4187 100644
--- a/apps/web-ele/src/components/diy-editor/components/component-library.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import type {
-  DiyComponent,
-  DiyComponentLibrary,
-} from '#/components/diy-editor/util';
+import type { DiyComponent, DiyComponentLibrary } from '../util';
 
 import { reactive, watch } from 'vue';
 
@@ -17,16 +14,15 @@ import { componentConfigs } from './mobile/index';
 /** 组件库：目前左侧的【基础组件】、【图文组件】部分 */
 defineOptions({ name: 'ComponentLibrary' });
 
-// 组件列表
+/** 组件列表 */
 const props = defineProps<{
   list: DiyComponentLibrary[];
 }>();
-// 组件分组
-const groups = reactive<any[]>([]);
-// 展开的折叠面板
-const extendGroups = reactive<string[]>([]);
 
-// 监听 list 属性，按照 DiyComponentLibrary 的 name 分组
+const groups = reactive<any[]>([]); // 组件分组
+const extendGroups = reactive<string[]>([]); // 展开的折叠面板
+
+/** 监听 list 属性，按照 DiyComponentLibrary 的 name 分组 */
 watch(
   () => props.list,
   () => {
@@ -56,7 +52,7 @@ watch(
   },
 );
 
-// 克隆组件
+/** 克隆组件 */
 const handleCloneComponent = (component: DiyComponent<any>) => {
   const instance = cloneDeep(component);
   instance.uid = Date.now();
@@ -132,6 +128,7 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
+    width: 261px;
   }
 
   .component {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
new file mode 100644
index 000000000..f63a0bcb6
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
@@ -0,0 +1,58 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+/** 轮播图属性 */
+export interface CarouselProperty {
+  // 类型：默认 | 卡片
+  type: 'card' | 'default';
+  // 指示器样式：点 | 数字
+  indicator: 'dot' | 'number';
+  // 是否自动播放
+  autoplay: boolean;
+  // 播放间隔
+  interval: number;
+  // 轮播内容
+  items: CarouselItemProperty[];
+  // 组件样式
+  style: ComponentStyle;
+}
+// 轮播内容属性
+export interface CarouselItemProperty {
+  // 类型：图片 | 视频
+  type: 'img' | 'video';
+  // 图片链接
+  imgUrl: string;
+  // 视频链接
+  videoUrl: string;
+  // 跳转链接
+  url: string;
+}
+
+// 定义组件
+export const component = {
+  id: 'Carousel',
+  name: '轮播图',
+  icon: 'system-uicons:carousel',
+  property: {
+    type: 'default',
+    indicator: 'dot',
+    autoplay: false,
+    interval: 3,
+    items: [
+      {
+        type: 'img',
+        imgUrl: 'https://static.iocoder.cn/mall/banner-01.jpg',
+        videoUrl: '',
+      },
+      {
+        type: 'img',
+        imgUrl: 'https://static.iocoder.cn/mall/banner-02.jpg',
+        videoUrl: '',
+      },
+    ] as CarouselItemProperty[],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<CarouselProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/Carousel/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/Carousel/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/Carousel/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
similarity index 94%
rename from apps/web-ele/src/components/diy-editor/components/mobile/Carousel/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
index 21da40439..1e23b0e32 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/Carousel/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
@@ -16,11 +16,11 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
-import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
-import Draggable from '#/components/draggable/index.vue';
 import UploadFile from '#/components/upload/file-upload.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
+import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
 
 // 轮播图属性面板
 defineOptions({ name: 'CarouselProperty' });
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/config.ts
new file mode 100644
index 000000000..17e5a79bf
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/config.ts
@@ -0,0 +1,29 @@
+import type { DiyComponent } from '../../../util';
+
+/** 分割线属性 */
+export interface DividerProperty {
+  // 高度
+  height: number;
+  // 线宽
+  lineWidth: number;
+  // 边距类型
+  paddingType: 'horizontal' | 'none';
+  // 颜色
+  lineColor: string;
+  // 类型
+  borderType: 'dashed' | 'dotted' | 'none' | 'solid';
+}
+
+// 定义组件
+export const component = {
+  id: 'Divider',
+  name: '分割线',
+  icon: 'tdesign:component-divider-vertical',
+  property: {
+    height: 30,
+    lineWidth: 1,
+    paddingType: 'none',
+    lineColor: '#dcdfe6',
+    borderType: 'solid',
+  },
+} as DiyComponent<DividerProperty>;
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/index.vue
new file mode 100644
index 000000000..1736db389
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/index.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { DividerProperty } from './config';
+
+/** 页面顶部导航栏 */
+defineOptions({ name: 'Divider' });
+
+defineProps<{ property: DividerProperty }>();
+</script>
+
+<template>
+  <div
+    class="flex items-center"
+    :style="{
+      height: `${property.height}px`,
+    }"
+  >
+    <div
+      class="w-full"
+      :style="{
+        borderTopStyle: property.borderType,
+        borderTopColor: property.lineColor,
+        borderTopWidth: `${property.lineWidth}px`,
+        margin: property.paddingType === 'none' ? '0' : '0px 16px',
+      }"
+    ></div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/Divider/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue
similarity index 97%
rename from apps/web-ele/src/components/diy-editor/components/mobile/Divider/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue
index 7746b73bd..27df10576 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/Divider/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue
@@ -13,7 +13,7 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import ColorInput from '#/components/input-with-color/index.vue';
+import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
 
 // 导航栏属性面板
 defineOptions({ name: 'DividerProperty' });
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts
new file mode 100644
index 000000000..6f365b735
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts
@@ -0,0 +1,26 @@
+import type { DiyComponent } from '../../../util';
+
+/** 弹窗广告属性 */
+export interface PopoverProperty {
+  list: PopoverItemProperty[];
+}
+
+export interface PopoverItemProperty {
+  // 图片地址
+  imgUrl: string;
+  // 跳转连接
+  url: string;
+  // 显示类型：仅显示一次、每次启动都会显示
+  showType: 'always' | 'once';
+}
+
+// 定义组件
+export const component = {
+  id: 'Popover',
+  name: '弹窗广告',
+  icon: 'carbon:popup',
+  position: 'fixed',
+  property: {
+    list: [{ showType: 'once' }],
+  },
+} as DiyComponent<PopoverProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/Popover/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/Popover/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/Popover/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue
similarity index 93%
rename from apps/web-ele/src/components/diy-editor/components/mobile/Popover/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue
index 0d69fd9db..7f41d413c 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/Popover/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue
@@ -10,9 +10,8 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
-import Draggable from '#/components/draggable/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
+import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
 
 // 弹窗广告属性面板
 defineOptions({ name: 'PopoverProperty' });
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx
new file mode 100644
index 000000000..d4dbfee44
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx
@@ -0,0 +1,4 @@
+// 导出所有优惠券相关组件
+export { CouponDiscount } from './coupon-discount';
+export { CouponDiscountDesc } from './coupon-discount-desc';
+export { CouponValidTerm } from './coupon-validTerm';
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
new file mode 100644
index 000000000..4392494d3
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
@@ -0,0 +1,47 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+/** 商品卡片属性 */
+export interface CouponCardProperty {
+  // 列数
+  columns: number;
+  // 背景图
+  bgImg: string;
+  // 文字颜色
+  textColor: string;
+  // 按钮样式
+  button: {
+    // 背景颜色
+    bgColor: string;
+    // 颜色
+    color: string;
+  };
+  // 间距
+  space: number;
+  // 优惠券编号列表
+  couponIds: number[];
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 定义组件
+export const component = {
+  id: 'CouponCard',
+  name: '优惠券',
+  icon: 'ep:ticket',
+  property: {
+    columns: 1,
+    bgImg: '',
+    textColor: '#E9B461',
+    button: {
+      color: '#434343',
+      bgColor: '',
+    },
+    space: 0,
+    couponIds: [],
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<CouponCardProperty>;
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
new file mode 100644
index 000000000..a79e1f0cb
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
@@ -0,0 +1,34 @@
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { defineComponent } from 'vue';
+
+import { PromotionDiscountTypeEnum } from '@vben/constants';
+import { floatToFixed2 } from '@vben/utils';
+
+// 优惠描述
+export const CouponDiscountDesc = defineComponent({
+  name: 'CouponDiscountDesc',
+  props: {
+    coupon: {
+      type: Object as () => MallCouponTemplateApi.CouponTemplate,
+      required: true,
+    },
+  },
+  setup(props) {
+    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
+    // 使用条件
+    const useCondition =
+      coupon.usePrice > 0 ? `满${floatToFixed2(coupon.usePrice)}元，` : '';
+    // 优惠描述
+    const discountDesc =
+      coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
+        ? `减${floatToFixed2(coupon.discountPrice)}元`
+        : `打${coupon.discountPercent / 10}折`;
+    return () => (
+      <div>
+        <span>{useCondition}</span>
+        <span>{discountDesc}</span>
+      </div>
+    );
+  },
+});
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
new file mode 100644
index 000000000..9f0c7f5b4
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
@@ -0,0 +1,34 @@
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { defineComponent } from 'vue';
+
+import { PromotionDiscountTypeEnum } from '@vben/constants';
+import { floatToFixed2 } from '@vben/utils';
+
+// 优惠值
+export const CouponDiscount = defineComponent({
+  name: 'CouponDiscount',
+  props: {
+    coupon: {
+      type: Object as () => MallCouponTemplateApi.CouponTemplate,
+      required: true,
+    },
+  },
+  setup(props) {
+    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
+    // 折扣
+    let value = `${coupon.discountPercent / 10}`;
+    let suffix = ' 折';
+    // 满减
+    if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
+      value = floatToFixed2(coupon.discountPrice);
+      suffix = ' 元';
+    }
+    return () => (
+      <div>
+        <span class={'text-20px font-bold'}>{value}</span>
+        <span>{suffix}</span>
+      </div>
+    );
+  },
+});
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx
new file mode 100644
index 000000000..7b2e373b2
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx
@@ -0,0 +1,28 @@
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { defineComponent } from 'vue';
+
+import { CouponTemplateValidityTypeEnum } from '@vben/constants';
+import { formatDate } from '@vben/utils';
+
+// 有效期
+export const CouponValidTerm = defineComponent({
+  name: 'CouponValidTerm',
+  props: {
+    coupon: {
+      type: Object as () => MallCouponTemplateApi.CouponTemplate,
+      required: true,
+    },
+  },
+  setup(props) {
+    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
+    const text =
+      coupon.validityType === CouponTemplateValidityTypeEnum.DATE.type
+        ? `有效期：${formatDate(coupon.validStartTime, 'YYYY-MM-DD')} 至 ${formatDate(
+            coupon.validEndTime,
+            'YYYY-MM-DD',
+          )}`
+        : `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`;
+    return () => <div>{text}</div>;
+  },
+});
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
similarity index 95%
rename from apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
index 447d97484..9778fdd62 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
@@ -24,10 +24,12 @@ import {
 } from 'element-plus';
 
 import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
-import ColorInput from '#/components/color-input/index.vue';
-import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
-import CouponSelect from '#/views/mall/promotion/coupon/components/coupon-select.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+// TODO: 添加组件
+// import CouponSelect from '#/views/mall/promotion/coupon/components/coupon-select.vue';
 
 // 优惠券卡片属性面板
 defineOptions({ name: 'CouponCardProperty' });
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts
new file mode 100644
index 000000000..22b98581c
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts
@@ -0,0 +1,36 @@
+import type { DiyComponent } from '../../../util';
+
+// 悬浮按钮属性
+export interface FloatingActionButtonProperty {
+  // 展开方向
+  direction: 'horizontal' | 'vertical';
+  // 是否显示文字
+  showText: boolean;
+  // 按钮列表
+  list: FloatingActionButtonItemProperty[];
+}
+
+// 悬浮按钮项属性
+export interface FloatingActionButtonItemProperty {
+  // 图片地址
+  imgUrl: string;
+  // 跳转连接
+  url: string;
+  // 文字
+  text: string;
+  // 文字颜色
+  textColor: string;
+}
+
+// 定义组件
+export const component = {
+  id: 'FloatingActionButton',
+  name: '悬浮按钮',
+  icon: 'tabler:float-right',
+  position: 'fixed',
+  property: {
+    direction: 'vertical',
+    showText: true,
+    list: [{ textColor: '#fff' }],
+  },
+} as DiyComponent<FloatingActionButtonProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
similarity index 91%
rename from apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
index 2be023a87..d6b0eb40b 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
@@ -11,10 +11,12 @@ import {
   ElSwitch,
 } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
-import Draggable from '#/components/draggable/index.vue';
-import InputWithColor from '#/components/input-with-color/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  Draggable,
+  InputWithColor,
+} from '#/views/mall/promotion/components';
 
 // 悬浮按钮属性面板
 defineOptions({ name: 'FloatingActionButtonProperty' });
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
new file mode 100644
index 000000000..2bac4c39e
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
@@ -0,0 +1,175 @@
+import type { StyleValue } from 'vue';
+
+import type { HotZoneItemProperty } from '../../config';
+
+// 热区的最小宽高
+export const HOT_ZONE_MIN_SIZE = 100;
+
+// 控制的类型
+export enum CONTROL_TYPE_ENUM {
+  LEFT,
+  TOP,
+  WIDTH,
+  HEIGHT,
+}
+
+// 定义热区的控制点
+export interface ControlDot {
+  position: string;
+  types: CONTROL_TYPE_ENUM[];
+  style: StyleValue;
+}
+
+// 热区的8个控制点
+export const CONTROL_DOT_LIST = [
+  {
+    position: '左上角',
+    types: [
+      CONTROL_TYPE_ENUM.LEFT,
+      CONTROL_TYPE_ENUM.TOP,
+      CONTROL_TYPE_ENUM.WIDTH,
+      CONTROL_TYPE_ENUM.HEIGHT,
+    ],
+    style: { left: '-5px', top: '-5px', cursor: 'nwse-resize' },
+  },
+  {
+    position: '上方中间',
+    types: [CONTROL_TYPE_ENUM.TOP, CONTROL_TYPE_ENUM.HEIGHT],
+    style: {
+      left: '50%',
+      top: '-5px',
+      cursor: 'n-resize',
+      transform: 'translateX(-50%)',
+    },
+  },
+  {
+    position: '右上角',
+    types: [
+      CONTROL_TYPE_ENUM.TOP,
+      CONTROL_TYPE_ENUM.WIDTH,
+      CONTROL_TYPE_ENUM.HEIGHT,
+    ],
+    style: { right: '-5px', top: '-5px', cursor: 'nesw-resize' },
+  },
+  {
+    position: '右侧中间',
+    types: [CONTROL_TYPE_ENUM.WIDTH],
+    style: {
+      right: '-5px',
+      top: '50%',
+      cursor: 'e-resize',
+      transform: 'translateX(-50%)',
+    },
+  },
+  {
+    position: '右下角',
+    types: [CONTROL_TYPE_ENUM.WIDTH, CONTROL_TYPE_ENUM.HEIGHT],
+    style: { right: '-5px', bottom: '-5px', cursor: 'nwse-resize' },
+  },
+  {
+    position: '下方中间',
+    types: [CONTROL_TYPE_ENUM.HEIGHT],
+    style: {
+      left: '50%',
+      bottom: '-5px',
+      cursor: 's-resize',
+      transform: 'translateX(-50%)',
+    },
+  },
+  {
+    position: '左下角',
+    types: [
+      CONTROL_TYPE_ENUM.LEFT,
+      CONTROL_TYPE_ENUM.WIDTH,
+      CONTROL_TYPE_ENUM.HEIGHT,
+    ],
+    style: { left: '-5px', bottom: '-5px', cursor: 'nesw-resize' },
+  },
+  {
+    position: '左侧中间',
+    types: [CONTROL_TYPE_ENUM.LEFT, CONTROL_TYPE_ENUM.WIDTH],
+    style: {
+      left: '-5px',
+      top: '50%',
+      cursor: 'w-resize',
+      transform: 'translateX(-50%)',
+    },
+  },
+] as ControlDot[];
+
+// region 热区的缩放
+// 热区的缩放比例
+export const HOT_ZONE_SCALE_RATE = 2;
+// 缩小：缩回适合手机屏幕的大小
+export const zoomOut = (list?: HotZoneItemProperty[]) => {
+  return (
+    list?.map((hotZone) => ({
+      ...hotZone,
+      left: (hotZone.left /= HOT_ZONE_SCALE_RATE),
+      top: (hotZone.top /= HOT_ZONE_SCALE_RATE),
+      width: (hotZone.width /= HOT_ZONE_SCALE_RATE),
+      height: (hotZone.height /= HOT_ZONE_SCALE_RATE),
+    })) || []
+  );
+};
+// 放大：作用是为了方便在电脑屏幕上编辑
+export const zoomIn = (list?: HotZoneItemProperty[]) => {
+  return (
+    list?.map((hotZone) => ({
+      ...hotZone,
+      left: (hotZone.left *= HOT_ZONE_SCALE_RATE),
+      top: (hotZone.top *= HOT_ZONE_SCALE_RATE),
+      width: (hotZone.width *= HOT_ZONE_SCALE_RATE),
+      height: (hotZone.height *= HOT_ZONE_SCALE_RATE),
+    })) || []
+  );
+};
+// endregion
+
+/**
+ * 封装热区拖拽
+ *
+ * 注：为什么不使用vueuse的useDraggable。在本场景下，其使用方式比较复杂
+ * @param hotZone 热区
+ * @param downEvent 鼠标按下事件
+ * @param callback 回调函数
+ */
+export const useDraggable = (
+  hotZone: HotZoneItemProperty,
+  downEvent: MouseEvent,
+  callback: (
+    left: number,
+    top: number,
+    width: number,
+    height: number,
+    moveWidth: number,
+    moveHeight: number,
+  ) => void,
+) => {
+  // 阻止事件冒泡
+  downEvent.stopPropagation();
+
+  // 移动前的鼠标坐标
+  const { clientX: startX, clientY: startY } = downEvent;
+  // 移动前的热区坐标、大小
+  const { left, top, width, height } = hotZone;
+
+  // 监听鼠标移动
+  const handleMouseMove = (e: MouseEvent) => {
+    // 移动宽度
+    const moveWidth = e.clientX - startX;
+    // 移动高度
+    const moveHeight = e.clientY - startY;
+    // 移动回调
+    callback(left, top, width, height, moveWidth, moveHeight);
+  };
+
+  // 松开鼠标后，结束拖拽
+  const handleMouseUp = () => {
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  };
+
+  document.addEventListener('mousemove', handleMouseMove);
+  document.addEventListener('mouseup', handleMouseUp);
+};
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
similarity index 97%
rename from apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
index 0a72633d6..f59459a3f 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import type { HotZoneItemProperty } from '../../config';
 import type { ControlDot } from './controller';
 
-import type { AppLink } from '#/components/app-link-input/data';
-import type { HotZoneItemProperty } from '#/components/diy-editor/components/mobile/HotZone/config';
+import type { AppLink } from '#/views/mall/promotion/components/app-link-input/data';
 
 import { ref } from 'vue';
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
new file mode 100644
index 000000000..464881740
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
@@ -0,0 +1,43 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+/** 热区属性 */
+export interface HotZoneProperty {
+  // 图片地址
+  imgUrl: string;
+  // 导航菜单列表
+  list: HotZoneItemProperty[];
+  // 组件样式
+  style: ComponentStyle;
+}
+
+/** 热区项目属性 */
+export interface HotZoneItemProperty {
+  // 链接的名称
+  name: string;
+  // 链接
+  url: string;
+  // 宽
+  width: number;
+  // 高
+  height: number;
+  // 上
+  top: number;
+  // 左
+  left: number;
+}
+
+// 定义组件
+export const component = {
+  id: 'HotZone',
+  name: '热区',
+  icon: 'tabler:hand-click',
+  property: {
+    imgUrl: '',
+    list: [] as HotZoneItemProperty[],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<HotZoneProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
similarity index 94%
rename from apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
index e3c602f65..bb3ebb667 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
@@ -6,9 +6,9 @@ import { ref } from 'vue';
 import { useVModel } from '@vueuse/core';
 import { ElButton, ElForm, ElFormItem, ElText } from 'element-plus';
 
-import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
 import HotZoneEditDialog from './components/hot-zone-edit-dialog/index.vue';
 
 /** 热区属性面板 */
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
new file mode 100644
index 000000000..0025ff4db
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
@@ -0,0 +1,27 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+/** 图片展示属性 */
+export interface ImageBarProperty {
+  // 图片链接
+  imgUrl: string;
+  // 跳转链接
+  url: string;
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 定义组件
+export const component = {
+  id: 'ImageBar',
+  name: '图片展示',
+  icon: 'ep:picture',
+  property: {
+    imgUrl: '',
+    url: '',
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<ImageBarProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/image-bar/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
similarity index 87%
rename from apps/web-ele/src/components/diy-editor/components/mobile/image-bar/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
index ce1b3ad5b..a379a8613 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
@@ -4,9 +4,10 @@ import type { ImageBarProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
-import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
+import { AppLinkInput } from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
 
 // 图片展示属性面板
 defineOptions({ name: 'ImageBarProperty' });
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/index.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/index.ts
new file mode 100644
index 000000000..454e06a0b
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/index.ts
@@ -0,0 +1,69 @@
+import { defineAsyncComponent } from 'vue';
+
+/*
+ * 组件注册
+ *
+ * 组件规范：
+ * 1. 每个子目录就是一个独立的组件，每个目录包括以下三个文件：
+ * 2. config.ts：组件配置，必选，用于定义组件、组件默认的属性、定义属性的类型
+ * 3. index.vue：组件展示，用于展示组件的渲染效果。可以不提供，如 Page（页面设置），只需要属性配置表单即可
+ * 4. property.vue：组件属性表单，用于配置组件，必选，
+ *
+ * 注：
+ * 组件ID以config.ts中配置的id为准，与组件目录的名称无关，但还是建议组件目录的名称与组件ID保持一致
+ */
+
+// 导入组件界面模块
+const viewModules: Record<string, any> = import.meta.glob('./*/*.vue');
+// 导入配置模块
+const configModules: Record<string, any> = import.meta.glob('./*/config.ts', {
+  eager: true,
+});
+
+// 界面模块
+const components: Record<string, any> = {};
+// 组件配置模块
+const componentConfigs: Record<string, any> = {};
+
+// 组件界面的类型
+type ViewType = 'index' | 'property';
+
+/**
+ * 注册组件的界面模块
+ *
+ * @param componentId 组件ID
+ * @param configPath 配置模块的文件路径
+ * @param viewType 组件界面的类型
+ */
+const registerComponentViewModule = (
+  componentId: string,
+  configPath: string,
+  viewType: ViewType,
+) => {
+  const viewPath = configPath.replace('config.ts', `${viewType}.vue`);
+  const viewModule = viewModules[viewPath];
+  if (viewModule) {
+    // 定义异步组件
+    components[componentId] = defineAsyncComponent(viewModule);
+  }
+};
+
+// 注册
+Object.keys(configModules).forEach((modulePath: string) => {
+  const component = configModules[modulePath].component;
+  const componentId = component?.id;
+  if (componentId) {
+    // 注册组件
+    componentConfigs[componentId] = component;
+    // 注册预览界面
+    registerComponentViewModule(componentId, modulePath, 'index');
+    // 注册属性配置表单
+    registerComponentViewModule(
+      `${componentId}Property`,
+      modulePath,
+      'property',
+    );
+  }
+});
+
+export { componentConfigs, components };
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
new file mode 100644
index 000000000..ef03fc9a6
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
@@ -0,0 +1,53 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+/** 广告魔方属性 */
+export interface MagicCubeProperty {
+  // 上圆角
+  borderRadiusTop: number;
+  // 下圆角
+  borderRadiusBottom: number;
+  // 间隔
+  space: number;
+  // 导航菜单列表
+  list: MagicCubeItemProperty[];
+  // 组件样式
+  style: ComponentStyle;
+}
+
+/** 广告魔方项目属性 */
+export interface MagicCubeItemProperty {
+  // 图标链接
+  imgUrl: string;
+  // 链接
+  url: string;
+  // 宽
+  width: number;
+  // 高
+  height: number;
+  // 上
+  top: number;
+  // 左
+  left: number;
+  // 右
+  right: number;
+  // 下
+  bottom: number;
+}
+
+// 定义组件
+export const component = {
+  id: 'MagicCube',
+  name: '广告魔方',
+  icon: 'bi:columns',
+  property: {
+    borderRadiusTop: 0,
+    borderRadiusBottom: 0,
+    space: 0,
+    list: [],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<MagicCubeProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
similarity index 91%
rename from apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
index 80efbae66..1f23095c6 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
@@ -6,10 +6,13 @@ import { ref } from 'vue';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElSlider, ElText } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
-import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
-import MagicCubeEditor from '#/components/magic-cube-editor/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  MagicCubeEditor,
+} from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
 
 /** 广告魔方属性面板 */
 defineOptions({ name: 'MagicCubeProperty' });
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
new file mode 100644
index 000000000..db6b55264
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
@@ -0,0 +1,80 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+import { cloneDeep } from '@vben/utils';
+
+/** 宫格导航属性 */
+export interface MenuGridProperty {
+  // 列数
+  column: number;
+  // 导航菜单列表
+  list: MenuGridItemProperty[];
+  // 组件样式
+  style: ComponentStyle;
+}
+
+/** 宫格导航项目属性 */
+export interface MenuGridItemProperty {
+  // 图标链接
+  iconUrl: string;
+  // 标题
+  title: string;
+  // 标题颜色
+  titleColor: string;
+  // 副标题
+  subtitle: string;
+  // 副标题颜色
+  subtitleColor: string;
+  // 链接
+  url: string;
+  // 角标
+  badge: {
+    // 角标背景颜色
+    bgColor: string;
+    // 是否显示
+    show: boolean;
+    // 角标文字
+    text: string;
+    // 角标文字颜色
+    textColor: string;
+  };
+}
+
+export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
+  title: '标题',
+  titleColor: '#333',
+  subtitle: '副标题',
+  subtitleColor: '#bbb',
+  badge: {
+    show: false,
+    textColor: '#fff',
+    bgColor: '#FF6000',
+  },
+} as MenuGridItemProperty;
+
+// 定义组件
+export const component = {
+  id: 'MenuGrid',
+  name: '宫格导航',
+  icon: 'bi:grid-3x3-gap',
+  property: {
+    column: 3,
+    list: [cloneDeep(EMPTY_MENU_GRID_ITEM_PROPERTY)],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+      marginLeft: 8,
+      marginRight: 8,
+      padding: 8,
+      paddingTop: 8,
+      paddingRight: 8,
+      paddingBottom: 8,
+      paddingLeft: 8,
+      borderRadius: 8,
+      borderTopLeftRadius: 8,
+      borderTopRightRadius: 8,
+      borderBottomRightRadius: 8,
+      borderBottomLeftRadius: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<MenuGridProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
similarity index 92%
rename from apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
index 88039d352..9db7ac2ad 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
@@ -11,11 +11,10 @@ import {
   ElSwitch,
 } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
-import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
-import Draggable from '#/components/draggable/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
+import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
 import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config';
 
 /** 宫格导航属性面板 */
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
new file mode 100644
index 000000000..6567c553d
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
@@ -0,0 +1,49 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+import { cloneDeep } from '@vben/utils';
+
+/** 列表导航属性 */
+export interface MenuListProperty {
+  // 导航菜单列表
+  list: MenuListItemProperty[];
+  // 组件样式
+  style: ComponentStyle;
+}
+
+/** 列表导航项目属性 */
+export interface MenuListItemProperty {
+  // 图标链接
+  iconUrl: string;
+  // 标题
+  title: string;
+  // 标题颜色
+  titleColor: string;
+  // 副标题
+  subtitle: string;
+  // 副标题颜色
+  subtitleColor: string;
+  // 链接
+  url: string;
+}
+
+export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
+  title: '标题',
+  titleColor: '#333',
+  subtitle: '副标题',
+  subtitleColor: '#bbb',
+};
+
+// 定义组件
+export const component = {
+  id: 'MenuList',
+  name: '列表导航',
+  icon: 'fa-solid:list',
+  property: {
+    list: [cloneDeep(EMPTY_MENU_LIST_ITEM_PROPERTY)],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<MenuListProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/menu-list/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/menu-list/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/menu-list/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
similarity index 86%
rename from apps/web-ele/src/components/diy-editor/components/mobile/menu-list/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
index a98edc254..c5b076936 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/menu-list/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
@@ -4,12 +4,14 @@ import type { MenuListProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElText } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
-import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
-import Draggable from '#/components/draggable/index.vue';
-import InputWithColor from '#/components/input-with-color/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  Draggable,
+  InputWithColor,
+} from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
 import { EMPTY_MENU_LIST_ITEM_PROPERTY } from './config';
 
 /** 列表导航属性面板 */
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
new file mode 100644
index 000000000..27138ebee
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
@@ -0,0 +1,67 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+import { cloneDeep } from '@vben/utils';
+
+/** 菜单导航属性 */
+export interface MenuSwiperProperty {
+  // 布局： 图标+文字 | 图标
+  layout: 'icon' | 'iconText';
+  // 行数
+  row: number;
+  // 列数
+  column: number;
+  // 导航菜单列表
+  list: MenuSwiperItemProperty[];
+  // 组件样式
+  style: ComponentStyle;
+}
+/** 菜单导航项目属性 */
+export interface MenuSwiperItemProperty {
+  // 图标链接
+  iconUrl: string;
+  // 标题
+  title: string;
+  // 标题颜色
+  titleColor: string;
+  // 链接
+  url: string;
+  // 角标
+  badge: {
+    // 角标背景颜色
+    bgColor: string;
+    // 是否显示
+    show: boolean;
+    // 角标文字
+    text: string;
+    // 角标文字颜色
+    textColor: string;
+  };
+}
+
+export const EMPTY_MENU_SWIPER_ITEM_PROPERTY = {
+  title: '标题',
+  titleColor: '#333',
+  badge: {
+    show: false,
+    textColor: '#fff',
+    bgColor: '#FF6000',
+  },
+} as MenuSwiperItemProperty;
+
+// 定义组件
+export const component = {
+  id: 'MenuSwiper',
+  name: '菜单导航',
+  icon: 'bi:grid-3x2-gap',
+  property: {
+    layout: 'iconText',
+    row: 1,
+    column: 3,
+    list: [cloneDeep(EMPTY_MENU_SWIPER_ITEM_PROPERTY)],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<MenuSwiperProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
similarity index 90%
rename from apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
index 62dd6e92d..54f58eae5 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
@@ -13,13 +13,15 @@ import {
   ElSwitch,
 } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
-import ColorInput from '#/components/color-input/index.vue';
-import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
-import Draggable from '#/components/draggable/index.vue';
-import InputWithColor from '#/components/input-with-color/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  ColorInput,
+  Draggable,
+  InputWithColor,
+} from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
 import { EMPTY_MENU_SWIPER_ITEM_PROPERTY } from './config';
 
 /** 菜单导航属性面板 */
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
similarity index 93%
rename from apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
index b34e00917..585a0f0a7 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { NavigationBarCellProperty } from '../config';
 
-import type { Rect } from '#/components/magic-cube-editor/util';
+import type { Rect } from '#/views/mall/promotion/components/magic-cube-editor/util';
 
 import { computed, ref } from 'vue';
 
@@ -15,10 +15,12 @@ import {
 } from 'element-plus';
 
 import appNavBarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
-import AppLinkInput from '#/components/app-link-input/index.vue';
-import ColorInput from '#/components/color-input/index.vue';
-import MagicCubeEditor from '#/components/magic-cube-editor/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  ColorInput,
+  MagicCubeEditor,
+} from '#/views/mall/promotion/components';
 
 // 导航栏属性面板
 defineOptions({ name: 'NavigationBarCellProperty' });
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts
new file mode 100644
index 000000000..fd675b16e
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts
@@ -0,0 +1,82 @@
+import type { DiyComponent } from '../../../util';
+
+/** 顶部导航栏属性 */
+export interface NavigationBarProperty {
+  // 背景类型
+  bgType: 'color' | 'img';
+  // 背景颜色
+  bgColor: string;
+  // 图片链接
+  bgImg: string;
+  // 样式类型：默认 | 沉浸式
+  styleType: 'inner' | 'normal';
+  // 常驻显示
+  alwaysShow: boolean;
+  // 小程序单元格列表
+  mpCells: NavigationBarCellProperty[];
+  // 其它平台单元格列表
+  otherCells: NavigationBarCellProperty[];
+  // 本地变量
+  _local: {
+    // 预览顶部导航（小程序）
+    previewMp: boolean;
+    // 预览顶部导航（非小程序）
+    previewOther: boolean;
+  };
+}
+
+/** 顶部导航栏 - 单元格 属性 */
+export interface NavigationBarCellProperty {
+  // 类型：文字 | 图片 | 搜索框
+  type: 'image' | 'search' | 'text';
+  // 宽度
+  width: number;
+  // 高度
+  height: number;
+  // 顶部位置
+  top: number;
+  // 左侧位置
+  left: number;
+  // 文字内容
+  text: string;
+  // 文字颜色
+  textColor: string;
+  // 图片地址
+  imgUrl: string;
+  // 图片链接
+  url: string;
+  // 搜索框：提示文字
+  placeholder: string;
+  // 搜索框：边框圆角半径
+  borderRadius: number;
+}
+
+// 定义组件
+export const component = {
+  id: 'NavigationBar',
+  name: '顶部导航栏',
+  icon: 'tabler:layout-navbar',
+  property: {
+    bgType: 'color',
+    bgColor: '#fff',
+    bgImg: '',
+    styleType: 'normal',
+    alwaysShow: true,
+    mpCells: [
+      {
+        type: 'text',
+        textColor: '#111111',
+      },
+    ],
+    otherCells: [
+      {
+        type: 'text',
+        textColor: '#111111',
+      },
+    ],
+    _local: {
+      previewMp: true,
+      previewOther: false,
+    },
+  },
+} as DiyComponent<NavigationBarProperty>;
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
new file mode 100644
index 000000000..9e3b17a07
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { StyleValue } from 'vue';
+
+import type { SearchProperty } from '../search-bar/config';
+import type {
+  NavigationBarCellProperty,
+  NavigationBarProperty,
+} from './config';
+
+import { computed } from 'vue';
+
+import appNavbarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
+
+import SearchBar from '../search-bar/index.vue';
+
+/** 页面顶部导航栏 */
+defineOptions({ name: 'NavigationBar' });
+
+const props = defineProps<{ property: NavigationBarProperty }>();
+
+// 背景
+const bgStyle = computed(() => {
+  const background =
+    props.property.bgType === 'img' && props.property.bgImg
+      ? `url(${props.property.bgImg}) no-repeat top center / 100% 100%`
+      : props.property.bgColor;
+  return { background };
+});
+// 单元格列表
+const cellList = computed(() =>
+  props.property._local?.previewMp
+    ? props.property.mpCells
+    : props.property.otherCells,
+);
+// 单元格宽度
+const cellWidth = computed(() => {
+  return props.property._local?.previewMp
+    ? (375 - 80 - 86) / 6
+    : (375 - 90) / 8;
+});
+// 获得单元格样式
+const getCellStyle = (cell: NavigationBarCellProperty) => {
+  return {
+    width: `${cell.width * cellWidth.value + (cell.width - 1) * 10}px`,
+    left: `${cell.left * cellWidth.value + (cell.left + 1) * 10}px`,
+    position: 'absolute',
+  } as StyleValue;
+};
+// 获得搜索框属性
+const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
+  return {
+    height: 30,
+    showScan: false,
+    placeholder: cell.placeholder,
+    borderRadius: cell.borderRadius,
+  } as SearchProperty;
+});
+</script>
+<template>
+  <div class="navigation-bar" :style="bgStyle">
+    <div class="flex h-full w-full items-center">
+      <div
+        v-for="(cell, cellIndex) in cellList"
+        :key="cellIndex"
+        :style="getCellStyle(cell)"
+      >
+        <span v-if="cell.type === 'text'">{{ cell.text }}</span>
+        <img
+          v-else-if="cell.type === 'image'"
+          :src="cell.imgUrl"
+          alt=""
+          class="h-full w-full"
+        />
+        <SearchBar v-else :property="getSearchProp(cell)" />
+      </div>
+    </div>
+    <img
+      v-if="property._local?.previewMp"
+      :src="appNavbarMp"
+      alt=""
+      style="width: 86px; height: 30px"
+    />
+  </div>
+</template>
+<style lang="scss" scoped>
+.navigation-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 50px;
+  padding: 0 6px;
+  background: #fff;
+
+  /* 左边 */
+  .left {
+    margin-left: 8px;
+  }
+
+  .center {
+    flex: 1;
+    font-size: 14px;
+    line-height: 35px;
+    color: #333;
+    text-align: center;
+  }
+
+  /* 右边 */
+  .right {
+    margin-right: 8px;
+  }
+}
+</style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
new file mode 100644
index 000000000..2d4acffb2
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
@@ -0,0 +1,46 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+/** 公告栏属性 */
+export interface NoticeBarProperty {
+  // 图标地址
+  iconUrl: string;
+  // 公告内容列表
+  contents: NoticeContentProperty[];
+  // 背景颜色
+  backgroundColor: string;
+  // 文字颜色
+  textColor: string;
+  // 组件样式
+  style: ComponentStyle;
+}
+
+/** 内容属性 */
+export interface NoticeContentProperty {
+  // 内容文字
+  text: string;
+  // 链接地址
+  url: string;
+}
+
+// 定义组件
+export const component = {
+  id: 'NoticeBar',
+  name: '公告栏',
+  icon: 'ep:bell',
+  property: {
+    iconUrl: 'http://mall.yudao.iocoder.cn/static/images/xinjian.png',
+    contents: [
+      {
+        text: '',
+        url: '',
+      },
+    ],
+    backgroundColor: '#fff',
+    textColor: '#333',
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<NoticeBarProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
similarity index 86%
rename from apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
index 935e5ec4d..055aa2e10 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
@@ -4,11 +4,14 @@ import type { NoticeBarProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElCard, ElForm, ElFormItem, ElInput } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
-import ColorInput from '#/components/color-input/index.vue';
-import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
-import Draggable from '#/components/draggable/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  ColorInput,
+  Draggable,
+} from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
 
 // 通知栏属性面板
 defineOptions({ name: 'NoticeBarProperty' });
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts
new file mode 100644
index 000000000..73032a84a
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts
@@ -0,0 +1,23 @@
+import type { DiyComponent } from '../../../util';
+
+/** 页面设置属性 */
+export interface PageConfigProperty {
+  // 页面描述
+  description: string;
+  // 页面背景颜色
+  backgroundColor: string;
+  // 页面背景图片
+  backgroundImage: string;
+}
+
+// 定义页面组件
+export const component = {
+  id: 'PageConfig',
+  name: '页面设置',
+  icon: 'ep:document',
+  property: {
+    description: '',
+    backgroundColor: '#f5f5f5',
+    backgroundImage: '',
+  },
+} as DiyComponent<PageConfigProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/page-config/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
similarity index 95%
rename from apps/web-ele/src/components/diy-editor/components/mobile/page-config/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
index 4dca2797e..9d904c0e8 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/page-config/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
@@ -4,8 +4,8 @@ import type { PageConfigProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElInput } from 'element-plus';
 
-import ColorInput from '#/components/input-with-color/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
 
 // 导航栏属性面板
 defineOptions({ name: 'PageConfigProperty' });
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
new file mode 100644
index 000000000..d165b01f6
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
@@ -0,0 +1,97 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+/** 商品卡片属性 */
+export interface ProductCardProperty {
+  // 布局类型：单列大图 | 单列小图 | 双列
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
+  // 商品字段
+  fields: {
+    // 商品简介
+    introduction: ProductCardFieldProperty;
+    // 商品市场价
+    marketPrice: ProductCardFieldProperty;
+    // 商品名称
+    name: ProductCardFieldProperty;
+    // 商品价格
+    price: ProductCardFieldProperty;
+    // 商品销量
+    salesCount: ProductCardFieldProperty;
+    // 商品库存
+    stock: ProductCardFieldProperty;
+  };
+  // 角标
+  badge: {
+    // 角标图片
+    imgUrl: string;
+    // 是否显示
+    show: boolean;
+  };
+  // 按钮
+  btnBuy: {
+    // 文字按钮：背景渐变起始颜色
+    bgBeginColor: string;
+    // 文字按钮：背景渐变结束颜色
+    bgEndColor: string;
+    // 图片按钮：图片地址
+    imgUrl: string;
+    // 文字
+    text: string;
+    // 类型：文字 | 图片
+    type: 'img' | 'text';
+  };
+  // 上圆角
+  borderRadiusTop: number;
+  // 下圆角
+  borderRadiusBottom: number;
+  // 间距
+  space: number;
+  // 商品编号列表
+  spuIds: number[];
+  // 组件样式
+  style: ComponentStyle;
+}
+// 商品字段
+export interface ProductCardFieldProperty {
+  // 是否显示
+  show: boolean;
+  // 颜色
+  color: string;
+}
+
+// 定义组件
+export const component = {
+  id: 'ProductCard',
+  name: '商品卡片',
+  icon: 'fluent:text-column-two-left-24-filled',
+  property: {
+    layoutType: 'oneColBigImg',
+    fields: {
+      name: { show: true, color: '#000' },
+      introduction: { show: true, color: '#999' },
+      price: { show: true, color: '#ff3000' },
+      marketPrice: { show: true, color: '#c4c4c4' },
+      salesCount: { show: true, color: '#c4c4c4' },
+      stock: { show: false, color: '#c4c4c4' },
+    },
+    badge: { show: false, imgUrl: '' },
+    btnBuy: {
+      type: 'text',
+      text: '立即购买',
+      // todo: @owen 根据主题色配置
+      bgBeginColor: '#FF6000',
+      bgEndColor: '#FE832A',
+      imgUrl: '',
+    },
+    borderRadiusTop: 6,
+    borderRadiusBottom: 6,
+    space: 8,
+    spuIds: [],
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<ProductCardProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/product-card/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/product-card/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/product-card/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
similarity index 96%
rename from apps/web-ele/src/components/diy-editor/components/mobile/product-card/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
index e0b3dfb77..728ae7827 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/product-card/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
@@ -17,9 +17,10 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import ColorInput from '#/components/color-input/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
-import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
+// TODO: 添加组件
+// import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';
 
 // 商品卡片属性面板
 defineOptions({ name: 'ProductCardProperty' });
@@ -33,7 +34,7 @@ const formData = useVModel(props, 'modelValue', emit);
   <ComponentContainerProperty v-model="formData.style">
     <ElForm label-width="80px" :model="formData">
       <ElCard header="商品列表" class="property-group" shadow="never">
-        <SpuShowcase v-model="formData.spuIds" />
+        <!-- <SpuShowcase v-model="formData.spuIds" /> -->
       </ElCard>
       <ElCard header="商品样式" class="property-group" shadow="never">
         <ElFormItem label="布局" prop="type">
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
new file mode 100644
index 000000000..20b4d37af
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
@@ -0,0 +1,64 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+/** 商品栏属性 */
+export interface ProductListProperty {
+  // 布局类型：双列 | 三列 | 水平滑动
+  layoutType: 'horizSwiper' | 'threeCol' | 'twoCol';
+  // 商品字段
+  fields: {
+    // 商品名称
+    name: ProductListFieldProperty;
+    // 商品价格
+    price: ProductListFieldProperty;
+  };
+  // 角标
+  badge: {
+    // 角标图片
+    imgUrl: string;
+    // 是否显示
+    show: boolean;
+  };
+  // 上圆角
+  borderRadiusTop: number;
+  // 下圆角
+  borderRadiusBottom: number;
+  // 间距
+  space: number;
+  // 商品编号列表
+  spuIds: number[];
+  // 组件样式
+  style: ComponentStyle;
+}
+// 商品字段
+export interface ProductListFieldProperty {
+  // 是否显示
+  show: boolean;
+  // 颜色
+  color: string;
+}
+
+// 定义组件
+export const component = {
+  id: 'ProductList',
+  name: '商品栏',
+  icon: 'fluent:text-column-two-24-filled',
+  property: {
+    layoutType: 'twoCol',
+    fields: {
+      name: { show: true, color: '#000' },
+      price: { show: true, color: '#ff3000' },
+    },
+    badge: { show: false, imgUrl: '' },
+    borderRadiusTop: 8,
+    borderRadiusBottom: 8,
+    space: 8,
+    spuIds: [],
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<ProductListProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/product-list/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/product-list/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/product-list/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
similarity index 91%
rename from apps/web-ele/src/components/diy-editor/components/mobile/product-list/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
index f4e6d9686..8e941b599 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/product-list/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { ProductListProperty } from './config';
 
+import { IconifyIcon } from '@vben/icons';
+
 import { useVModel } from '@vueuse/core';
 import {
   ElCard,
@@ -13,10 +15,12 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
-import ColorInput from '#/components/input-with-color/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
-import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';
+import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+// TODO: 添加组件
+// import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';
 
 // 商品栏属性面板
 defineOptions({ name: 'ProductListProperty' });
@@ -30,7 +34,7 @@ const formData = useVModel(props, 'modelValue', emit);
   <ComponentContainerProperty v-model="formData.style">
     <ElForm label-width="80px" :model="formData">
       <ElCard header="商品列表" class="property-group" shadow="never">
-        <SpuShowcase v-model="formData.spuIds" />
+        <!-- <SpuShowcase v-model="formData.spuIds" /> -->
       </ElCard>
       <ElCard header="商品样式" class="property-group" shadow="never">
         <ElFormItem label="布局" prop="type">
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
new file mode 100644
index 000000000..9a1fc4194
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
@@ -0,0 +1,25 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+/** 营销文章属性 */
+export interface PromotionArticleProperty {
+  // 文章编号
+  id: number;
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 定义组件
+export const component = {
+  id: 'PromotionArticle',
+  name: '营销文章',
+  icon: 'ph:article-medium',
+  property: {
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<PromotionArticleProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
similarity index 94%
rename from apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
index 82d3f35b4..7a701c54f 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
@@ -9,7 +9,8 @@ import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElOption, ElSelect } from 'element-plus';
 
 import * as ArticleApi from '#/api/mall/promotion/article/index';
-import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
 
 // 营销文章属性面板
 defineOptions({ name: 'PromotionArticleProperty' });
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
new file mode 100644
index 000000000..f0497dc19
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
@@ -0,0 +1,96 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+/** 拼团属性 */
+export interface PromotionCombinationProperty {
+  // 布局类型：单列 | 三列
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
+  // 商品字段
+  fields: {
+    // 商品简介
+    introduction: PromotionCombinationFieldProperty;
+    // 市场价
+    marketPrice: PromotionCombinationFieldProperty;
+    // 商品名称
+    name: PromotionCombinationFieldProperty;
+    // 商品价格
+    price: PromotionCombinationFieldProperty;
+    // 商品销量
+    salesCount: PromotionCombinationFieldProperty;
+    // 商品库存
+    stock: PromotionCombinationFieldProperty;
+  };
+  // 角标
+  badge: {
+    // 角标图片
+    imgUrl: string;
+    // 是否显示
+    show: boolean;
+  };
+  // 按钮
+  btnBuy: {
+    // 文字按钮：背景渐变起始颜色
+    bgBeginColor: string;
+    // 文字按钮：背景渐变结束颜色
+    bgEndColor: string;
+    // 图片按钮：图片地址
+    imgUrl: string;
+    // 文字
+    text: string;
+    // 类型：文字 | 图片
+    type: 'img' | 'text';
+  };
+  // 上圆角
+  borderRadiusTop: number;
+  // 下圆角
+  borderRadiusBottom: number;
+  // 间距
+  space: number;
+  // 拼团活动编号
+  activityIds: number[];
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 商品字段
+export interface PromotionCombinationFieldProperty {
+  // 是否显示
+  show: boolean;
+  // 颜色
+  color: string;
+}
+
+// 定义组件
+export const component = {
+  id: 'PromotionCombination',
+  name: '拼团',
+  icon: 'mdi:account-group',
+  property: {
+    layoutType: 'oneColBigImg',
+    fields: {
+      name: { show: true, color: '#000' },
+      introduction: { show: true, color: '#999' },
+      price: { show: true, color: '#ff3000' },
+      marketPrice: { show: true, color: '#c4c4c4' },
+      salesCount: { show: true, color: '#c4c4c4' },
+      stock: { show: false, color: '#c4c4c4' },
+    },
+    badge: { show: false, imgUrl: '' },
+    btnBuy: {
+      type: 'text',
+      text: '去拼团',
+      bgBeginColor: '#FF6000',
+      bgEndColor: '#FE832A',
+      imgUrl: '',
+    },
+    borderRadiusTop: 8,
+    borderRadiusBottom: 8,
+    space: 8,
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<PromotionCombinationProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
similarity index 99%
rename from apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
index dcccd7e6d..273580f44 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
@@ -20,9 +20,9 @@ import {
 } from 'element-plus';
 
 import * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
-import ColorInput from '#/components/color-input/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import CombinationShowcase from '#/views/mall/promotion/combination/components/combination-showcase.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
 
 // 拼团属性面板
 defineOptions({ name: 'PromotionCombinationProperty' });
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
new file mode 100644
index 000000000..738ca3b31
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
@@ -0,0 +1,96 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+/** 积分商城属性 */
+export interface PromotionPointProperty {
+  // 布局类型：单列 | 三列
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
+  // 商品字段
+  fields: {
+    // 商品简介
+    introduction: PromotionPointFieldProperty;
+    // 市场价
+    marketPrice: PromotionPointFieldProperty;
+    // 商品名称
+    name: PromotionPointFieldProperty;
+    // 商品价格
+    price: PromotionPointFieldProperty;
+    // 商品销量
+    salesCount: PromotionPointFieldProperty;
+    // 商品库存
+    stock: PromotionPointFieldProperty;
+  };
+  // 角标
+  badge: {
+    // 角标图片
+    imgUrl: string;
+    // 是否显示
+    show: boolean;
+  };
+  // 按钮
+  btnBuy: {
+    // 文字按钮：背景渐变起始颜色
+    bgBeginColor: string;
+    // 文字按钮：背景渐变结束颜色
+    bgEndColor: string;
+    // 图片按钮：图片地址
+    imgUrl: string;
+    // 文字
+    text: string;
+    // 类型：文字 | 图片
+    type: 'img' | 'text';
+  };
+  // 上圆角
+  borderRadiusTop: number;
+  // 下圆角
+  borderRadiusBottom: number;
+  // 间距
+  space: number;
+  // 秒杀活动编号
+  activityIds: number[];
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 商品字段
+export interface PromotionPointFieldProperty {
+  // 是否显示
+  show: boolean;
+  // 颜色
+  color: string;
+}
+
+// 定义组件
+export const component = {
+  id: 'PromotionPoint',
+  name: '积分商城',
+  icon: 'ep:present',
+  property: {
+    layoutType: 'oneColBigImg',
+    fields: {
+      name: { show: true, color: '#000' },
+      introduction: { show: true, color: '#999' },
+      price: { show: true, color: '#ff3000' },
+      marketPrice: { show: true, color: '#c4c4c4' },
+      salesCount: { show: true, color: '#c4c4c4' },
+      stock: { show: false, color: '#c4c4c4' },
+    },
+    badge: { show: false, imgUrl: '' },
+    btnBuy: {
+      type: 'text',
+      text: '立即兑换',
+      bgBeginColor: '#FF6000',
+      bgEndColor: '#FE832A',
+      imgUrl: '',
+    },
+    borderRadiusTop: 8,
+    borderRadiusBottom: 8,
+    space: 8,
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<PromotionPointProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
similarity index 99%
rename from apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
index adc87710d..6ce0b5099 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
@@ -16,7 +16,7 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import ColorInput from '#/components/color-input/index.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
 import PointShowcase from '#/views/mall/promotion/point/components/point-showcase.vue';
 
 // 秒杀属性面板
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
new file mode 100644
index 000000000..a38d9455b
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
@@ -0,0 +1,96 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+/** 秒杀属性 */
+export interface PromotionSeckillProperty {
+  // 布局类型：单列 | 三列
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
+  // 商品字段
+  fields: {
+    // 商品简介
+    introduction: PromotionSeckillFieldProperty;
+    // 市场价
+    marketPrice: PromotionSeckillFieldProperty;
+    // 商品名称
+    name: PromotionSeckillFieldProperty;
+    // 商品价格
+    price: PromotionSeckillFieldProperty;
+    // 商品销量
+    salesCount: PromotionSeckillFieldProperty;
+    // 商品库存
+    stock: PromotionSeckillFieldProperty;
+  };
+  // 角标
+  badge: {
+    // 角标图片
+    imgUrl: string;
+    // 是否显示
+    show: boolean;
+  };
+  // 按钮
+  btnBuy: {
+    // 文字按钮：背景渐变起始颜色
+    bgBeginColor: string;
+    // 文字按钮：背景渐变结束颜色
+    bgEndColor: string;
+    // 图片按钮：图片地址
+    imgUrl: string;
+    // 文字
+    text: string;
+    // 类型：文字 | 图片
+    type: 'img' | 'text';
+  };
+  // 上圆角
+  borderRadiusTop: number;
+  // 下圆角
+  borderRadiusBottom: number;
+  // 间距
+  space: number;
+  // 秒杀活动编号
+  activityIds: number[];
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 商品字段
+export interface PromotionSeckillFieldProperty {
+  // 是否显示
+  show: boolean;
+  // 颜色
+  color: string;
+}
+
+// 定义组件
+export const component = {
+  id: 'PromotionSeckill',
+  name: '秒杀',
+  icon: 'mdi:calendar-time',
+  property: {
+    layoutType: 'oneColBigImg',
+    fields: {
+      name: { show: true, color: '#000' },
+      introduction: { show: true, color: '#999' },
+      price: { show: true, color: '#ff3000' },
+      marketPrice: { show: true, color: '#c4c4c4' },
+      salesCount: { show: true, color: '#c4c4c4' },
+      stock: { show: false, color: '#c4c4c4' },
+    },
+    badge: { show: false, imgUrl: '' },
+    btnBuy: {
+      type: 'text',
+      text: '立即秒杀',
+      bgBeginColor: '#FF6000',
+      bgEndColor: '#FE832A',
+      imgUrl: '',
+    },
+    borderRadiusTop: 8,
+    borderRadiusBottom: 8,
+    space: 8,
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<PromotionSeckillProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
similarity index 99%
rename from apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
index b97b1d9e1..db6bf9b4a 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
@@ -22,8 +22,8 @@ import {
 } from 'element-plus';
 
 import * as SeckillActivityApi from '#/api/mall/promotion/seckill/seckillActivity';
-import ColorInput from '#/components/color-input/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
 import SeckillShowcase from '#/views/mall/promotion/seckill/components/seckill-showcase.vue';
 
 // 秒杀属性面板
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
new file mode 100644
index 000000000..01d5894d1
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
@@ -0,0 +1,43 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+/** 搜索框属性 */
+export interface SearchProperty {
+  height: number; // 搜索栏高度
+  showScan: boolean; // 显示扫一扫
+  borderRadius: number; // 框体样式
+  placeholder: string; // 占位文字
+  placeholderPosition: PlaceholderPosition; // 占位文字位置
+  backgroundColor: string; // 框体颜色
+  textColor: string; // 字体颜色
+  hotKeywords: string[]; // 热词
+  style: ComponentStyle;
+}
+
+// 文字位置
+export type PlaceholderPosition = 'center' | 'left';
+
+// 定义组件
+export const component = {
+  id: 'SearchBar',
+  name: '搜索框',
+  icon: 'ep:search',
+  property: {
+    height: 28,
+    showScan: false,
+    borderRadius: 0,
+    placeholder: '搜索商品',
+    placeholderPosition: 'left',
+    backgroundColor: 'rgb(238, 238, 238)',
+    textColor: 'rgb(150, 151, 153)',
+    hotKeywords: [],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+      paddingTop: 8,
+      paddingRight: 8,
+      paddingBottom: 8,
+      paddingLeft: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<SearchProperty>;
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue
new file mode 100644
index 000000000..e7c770304
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { SearchProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+/** 搜索框 */
+defineOptions({ name: 'SearchBar' });
+defineProps<{ property: SearchProperty }>();
+</script>
+
+<template>
+  <div
+    class="search-bar"
+    :style="{
+      color: property.textColor,
+    }"
+  >
+    <!-- 搜索框 -->
+    <div
+      class="inner"
+      :style="{
+        height: `${property.height}px`,
+        background: property.backgroundColor,
+        borderRadius: `${property.borderRadius}px`,
+      }"
+    >
+      <div
+        class="placeholder"
+        :style="{
+          justifyContent: property.placeholderPosition,
+        }"
+      >
+        <IconifyIcon icon="ep:search" />
+        <span>{{ property.placeholder || '搜索商品' }}</span>
+      </div>
+      <div class="right">
+        <!-- 搜索热词 -->
+        <span v-for="(keyword, index) in property.hotKeywords" :key="index">{{
+          keyword
+        }}</span>
+        <!-- 扫一扫 -->
+        <IconifyIcon
+          icon="ant-design:scan-outlined"
+          v-show="property.showScan"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.search-bar {
+  /* 搜索框 */
+  .inner {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: 28px;
+    font-size: 14px;
+
+    .placeholder {
+      display: flex;
+      gap: 2px;
+      align-items: center;
+      width: 100%;
+      padding: 0 8px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-all;
+      white-space: nowrap;
+    }
+
+    .right {
+      position: absolute;
+      right: 8px;
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+</style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/search-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
similarity index 95%
rename from apps/web-ele/src/components/diy-editor/components/mobile/search-bar/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
index 149f52fce..5e1822078 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/search-bar/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
@@ -18,8 +18,9 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
-import Draggable from '#/components/draggable/index.vue';
+import { Draggable } from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
 
 /** 搜索框属性面板 */
 defineOptions({ name: 'SearchProperty' });
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts
new file mode 100644
index 000000000..0404f3647
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts
@@ -0,0 +1,172 @@
+import type { DiyComponent } from '../../../util';
+
+/** 底部导航菜单属性 */
+export interface TabBarProperty {
+  // 选项列表
+  items: TabBarItemProperty[];
+  // 主题
+  theme: string;
+  // 样式
+  style: TabBarStyle;
+}
+
+// 选项属性
+export interface TabBarItemProperty {
+  // 标签文字
+  text: string;
+  // 链接
+  url: string;
+  // 默认图标链接
+  iconUrl: string;
+  // 选中的图标链接
+  activeIconUrl: string;
+}
+
+// 样式
+export interface TabBarStyle {
+  // 背景类型
+  bgType: 'color' | 'img';
+  // 背景颜色
+  bgColor: string;
+  // 图片链接
+  bgImg: string;
+  // 默认颜色
+  color: string;
+  // 选中的颜色
+  activeColor: string;
+}
+
+// 定义组件
+export const component = {
+  id: 'TabBar',
+  name: '底部导航',
+  icon: 'fluent:table-bottom-row-16-filled',
+  property: {
+    theme: 'red',
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      color: '#282828',
+      activeColor: '#fc4141',
+    },
+    items: [
+      {
+        text: '首页',
+        url: '/pages/index/index',
+        iconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-001.png',
+        activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-002.png',
+      },
+      {
+        text: '分类',
+        url: '/pages/index/category?id=3',
+        iconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-001.png',
+        activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-002.png',
+      },
+      {
+        text: '购物车',
+        url: '/pages/index/cart',
+        iconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-001.png',
+        activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-002.png',
+      },
+      {
+        text: '我的',
+        url: '/pages/index/user',
+        iconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-001.png',
+        activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-002.png',
+      },
+    ],
+  },
+} as DiyComponent<TabBarProperty>;
+
+export const THEME_LIST = [
+  {
+    id: 'red',
+    name: '中国红',
+    icon: 'icon-park-twotone:theme',
+    color: '#d10019',
+  },
+  {
+    id: 'orange',
+    name: '桔橙',
+    icon: 'icon-park-twotone:theme',
+    color: '#f37b1d',
+  },
+  {
+    id: 'gold',
+    name: '明黄',
+    icon: 'icon-park-twotone:theme',
+    color: '#fbbd08',
+  },
+  {
+    id: 'green',
+    name: '橄榄绿',
+    icon: 'icon-park-twotone:theme',
+    color: '#8dc63f',
+  },
+  {
+    id: 'cyan',
+    name: '天青',
+    icon: 'icon-park-twotone:theme',
+    color: '#1cbbb4',
+  },
+  {
+    id: 'blue',
+    name: '海蓝',
+    icon: 'icon-park-twotone:theme',
+    color: '#0081ff',
+  },
+  {
+    id: 'purple',
+    name: '姹紫',
+    icon: 'icon-park-twotone:theme',
+    color: '#6739b6',
+  },
+  {
+    id: 'brightRed',
+    name: '嫣红',
+    icon: 'icon-park-twotone:theme',
+    color: '#e54d42',
+  },
+  {
+    id: 'forestGreen',
+    name: '森绿',
+    icon: 'icon-park-twotone:theme',
+    color: '#39b54a',
+  },
+  {
+    id: 'mauve',
+    name: '木槿',
+    icon: 'icon-park-twotone:theme',
+    color: '#9c26b0',
+  },
+  {
+    id: 'pink',
+    name: '桃粉',
+    icon: 'icon-park-twotone:theme',
+    color: '#e03997',
+  },
+  {
+    id: 'brown',
+    name: '棕褐',
+    icon: 'icon-park-twotone:theme',
+    color: '#a5673f',
+  },
+  {
+    id: 'grey',
+    name: '玄灰',
+    icon: 'icon-park-twotone:theme',
+    color: '#8799a3',
+  },
+  {
+    id: 'gray',
+    name: '草灰',
+    icon: 'icon-park-twotone:theme',
+    color: '#aaaaaa',
+  },
+  {
+    id: 'black',
+    name: '墨黑',
+    icon: 'icon-park-twotone:theme',
+    color: '#333333',
+  },
+];
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
similarity index 95%
rename from apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
index fab41b648..a258901dd 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
@@ -15,10 +15,12 @@ import {
   ElText,
 } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
-import ColorInput from '#/components/color-input/index.vue';
-import Draggable from '#/components/draggable/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  ColorInput,
+  Draggable,
+} from '#/views/mall/promotion/components';
 
 import { component, THEME_LIST } from './config';
 // 底部导航栏
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
new file mode 100644
index 000000000..f442e7dc5
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
@@ -0,0 +1,73 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+/** 标题栏属性 */
+export interface TitleBarProperty {
+  // 背景图
+  bgImgUrl: string;
+  // 偏移
+  marginLeft: number;
+  // 显示位置
+  textAlign: 'center' | 'left';
+  // 主标题
+  title: string;
+  // 副标题
+  description: string;
+  // 标题大小
+  titleSize: number;
+  // 描述大小
+  descriptionSize: number;
+  // 标题粗细
+  titleWeight: number;
+  // 描述粗细
+  descriptionWeight: number;
+  // 标题颜色
+  titleColor: string;
+  // 描述颜色
+  descriptionColor: string;
+  // 高度
+  height: number;
+  // 查看更多
+  more: {
+    // 是否显示查看更多
+    show: false;
+    // 自定义文字
+    text: string;
+    // 样式选择
+    type: 'all' | 'icon' | 'text';
+    // 链接
+    url: string;
+  };
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 定义组件
+export const component = {
+  id: 'TitleBar',
+  name: '标题栏',
+  icon: 'material-symbols:line-start',
+  property: {
+    title: '主标题',
+    description: '副标题',
+    titleSize: 16,
+    descriptionSize: 12,
+    titleWeight: 400,
+    textAlign: 'left',
+    descriptionWeight: 200,
+    titleColor: 'rgba(50, 50, 51, 10)',
+    descriptionColor: 'rgba(150, 151, 153, 10)',
+    marginLeft: 0,
+    height: 40,
+    more: {
+      // 查看更多
+      show: false,
+      type: 'icon',
+      text: '查看更多',
+      url: '',
+    },
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+    } as ComponentStyle,
+  },
+} as DiyComponent<TitleBarProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/title-bar/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
similarity index 95%
rename from apps/web-ele/src/components/diy-editor/components/mobile/title-bar/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
index 45a4147c0..1fdafb90a 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
@@ -16,10 +16,13 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
-import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
-import InputWithColor from '#/components/input-with-color/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  InputWithColor,
+} from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
 
 // 导航栏属性面板
 defineOptions({ name: 'TitleBarProperty' });
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
new file mode 100644
index 000000000..2dae34da2
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
@@ -0,0 +1,21 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+/** 用户卡片属性 */
+export interface UserCardProperty {
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 定义组件
+export const component = {
+  id: 'UserCard',
+  name: '用户卡片',
+  icon: 'mdi:user-card-details',
+  property: {
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<UserCardProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-card/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/user-card/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue
new file mode 100644
index 000000000..79a7eb080
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { UserCardProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+// 用户卡片属性面板
+defineOptions({ name: 'UserCardProperty' });
+
+const props = defineProps<{ modelValue: UserCardProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
new file mode 100644
index 000000000..7e5dcd1f9
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
@@ -0,0 +1,23 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+/** 用户卡券属性 */
+export interface UserCouponProperty {
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 定义组件
+export const component = {
+  id: 'UserCoupon',
+  name: '用户卡券',
+  icon: 'ep:ticket',
+  property: {
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<UserCouponProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/property.vue
new file mode 100644
index 000000000..488bf3168
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/property.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { UserCouponProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+// 用户卡券属性面板
+defineOptions({ name: 'UserCouponProperty' });
+
+const props = defineProps<{ modelValue: UserCouponProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
new file mode 100644
index 000000000..25ca85065
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
@@ -0,0 +1,23 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+/** 用户订单属性 */
+export interface UserOrderProperty {
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 定义组件
+export const component = {
+  id: 'UserOrder',
+  name: '用户订单',
+  icon: 'ep:list',
+  property: {
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<UserOrderProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-order/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/user-order/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue
new file mode 100644
index 000000000..48f0c0a41
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { UserOrderProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+// 用户订单属性面板
+defineOptions({ name: 'UserOrderProperty' });
+
+const props = defineProps<{ modelValue: UserOrderProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
new file mode 100644
index 000000000..2b10d32fb
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
@@ -0,0 +1,23 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+/** 用户资产属性 */
+export interface UserWalletProperty {
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 定义组件
+export const component = {
+  id: 'UserWallet',
+  name: '用户资产',
+  icon: 'ep:wallet-filled',
+  property: {
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<UserWalletProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue
new file mode 100644
index 000000000..5c01b828e
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { UserWalletProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+// 用户资产属性面板
+defineOptions({ name: 'UserWalletProperty' });
+
+const props = defineProps<{ modelValue: UserWalletProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
new file mode 100644
index 000000000..bc9195575
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
@@ -0,0 +1,37 @@
+import type { ComponentStyle, DiyComponent } from '../../../util';
+
+/** 视频播放属性 */
+export interface VideoPlayerProperty {
+  // 视频链接
+  videoUrl: string;
+  // 封面链接
+  posterUrl: string;
+  // 是否自动播放
+  autoplay: boolean;
+  // 组件样式
+  style: VideoPlayerStyle;
+}
+
+// 视频播放样式
+export interface VideoPlayerStyle extends ComponentStyle {
+  // 视频高度
+  height: number;
+}
+
+// 定义组件
+export const component = {
+  id: 'VideoPlayer',
+  name: '视频播放',
+  icon: 'ep:video-play',
+  property: {
+    videoUrl: '',
+    posterUrl: '',
+    autoplay: false,
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+      height: 300,
+    } as VideoPlayerStyle,
+  },
+} as DiyComponent<VideoPlayerProperty>;
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/video-player/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
similarity index 100%
rename from apps/web-ele/src/components/diy-editor/components/mobile/video-player/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/video-player/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
similarity index 94%
rename from apps/web-ele/src/components/diy-editor/components/mobile/video-player/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
index d07835f25..67c355905 100644
--- a/apps/web-ele/src/components/diy-editor/components/mobile/video-player/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
@@ -4,10 +4,11 @@ import type { VideoPlayerProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElSlider, ElSwitch } from 'element-plus';
 
-import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import UploadFile from '#/components/upload/file-upload.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 // 视频播放属性面板
 defineOptions({ name: 'VideoPlayerProperty' });
 
diff --git a/apps/web-ele/src/components/diy-editor/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
similarity index 77%
rename from apps/web-ele/src/components/diy-editor/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
index 60c94775b..f6bb1758d 100644
--- a/apps/web-ele/src/components/diy-editor/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
@@ -1,19 +1,19 @@
 <script lang="ts" setup>
 import type { DiyComponent, DiyComponentLibrary, PageConfig } from './util';
 
-import { inject, onMounted, ref, unref, watch } from 'vue';
+import { onMounted, ref, unref, watch } from 'vue';
 
-import { IFrame } from '@vben/common-ui';
+import { useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep, isEmpty, isString } from '@vben/utils';
 
+import { useQRCode } from '@vueuse/integrations/useQRCode';
 import {
   ElAside,
-  ElButtonGroup,
   ElCard,
   ElContainer,
-  ElDialog,
   ElHeader,
+  ElImage,
   ElScrollbar,
   ElTag,
   ElText,
@@ -22,15 +22,12 @@ import {
 import draggable from 'vuedraggable';
 
 import statusBarImg from '#/assets/imgs/diy/statusBar.png';
-import {
-  componentConfigs,
-  components,
-} from '#/components/diy-editor/components/mobile';
-import { component as PAGE_CONFIG_COMPONENT } from '#/components/diy-editor/components/mobile/page-config/config';
 
 import ComponentContainer from './components/component-container.vue';
 import ComponentLibrary from './components/component-library.vue';
+import { componentConfigs, components } from './components/mobile';
 import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/navigation-bar/config';
+import { component as PAGE_CONFIG_COMPONENT } from './components/mobile/page-config/config';
 import { component as TAB_BAR_COMPONENT } from './components/mobile/tab-bar/config';
 
 /** 页面装修详情页 */
@@ -38,47 +35,42 @@ defineOptions({
   name: 'DiyPageDetail',
   components,
 });
-// 定义属性
-const props = defineProps({
-  // 页面配置，支持Json字符串
-  modelValue: { type: [String, Object], required: true },
-  // 标题
-  title: { type: String, default: '' },
-  // 组件库
-  libs: { type: Array<DiyComponentLibrary>, default: () => [] },
-  // 是否显示顶部导航栏
-  showNavigationBar: { type: Boolean, default: true },
-  // 是否显示底部导航菜单
-  showTabBar: { type: Boolean, default: false },
-  // 是否显示页面配置
-  showPageConfig: { type: Boolean, default: true },
-  // 预览地址：提供了预览地址，才会显示预览按钮
-  previewUrl: { type: String, default: '' },
-});
-// 工具栏操作
-const emits = defineEmits(['reset', 'preview', 'save', 'update:modelValue']);
 
-// 左侧组件库
-const componentLibrary = ref();
-// 页面设置组件
+/** 定义属性 */
+const props = defineProps({
+  modelValue: { type: [String, Object], required: true }, // 页面配置，支持 Json 字符串
+  title: { type: String, default: '' }, // 标题
+  libs: { type: Array<DiyComponentLibrary>, default: () => [] }, // 组件库
+  showNavigationBar: { type: Boolean, default: true }, // 是否显示顶部导航栏
+  showTabBar: { type: Boolean, default: false }, // 是否显示底部导航菜单
+  showPageConfig: { type: Boolean, default: true }, // 是否显示页面配置
+  previewUrl: { type: String, default: '' }, // 预览地址：提供了预览地址，才会显示预览按钮
+});
+
+const emits = defineEmits(['reset', 'save', 'update:modelValue']); // 工具栏操作
+
+const qrcode = useQRCode(props.previewUrl, {
+  errorCorrectionLevel: 'H',
+  margin: 4,
+}); // 预览二维码
+
+const componentLibrary = ref(); // 左侧组件库
 const pageConfigComponent = ref<DiyComponent<any>>(
   cloneDeep(PAGE_CONFIG_COMPONENT),
-);
-// 顶部导航栏
+); // 页面设置组件
 const navigationBarComponent = ref<DiyComponent<any>>(
   cloneDeep(NAVIGATION_BAR_COMPONENT),
-);
-// 底部导航菜单
-const tabBarComponent = ref<DiyComponent<any>>(cloneDeep(TAB_BAR_COMPONENT));
+); // 顶部导航栏
+const tabBarComponent = ref<DiyComponent<any>>(cloneDeep(TAB_BAR_COMPONENT)); // 底部导航菜单
 
-// 选中的组件，默认选中顶部导航栏
-const selectedComponent = ref<DiyComponent<any>>();
-// 选中的组件索引
-const selectedComponentIndex = ref<number>(-1);
-// 组件列表
-const pageComponents = ref<DiyComponent<any>[]>([]);
-// 监听传入的页面配置
-// 解析出 pageConfigComponent 页面整体的配置，navigationBarComponent、pageComponents、tabBarComponent 页面上、中、下的配置
+const selectedComponent = ref<DiyComponent<any>>(); // 选中的组件，默认选中顶部导航栏
+const selectedComponentIndex = ref<number>(-1); // 选中的组件索引
+const pageComponents = ref<DiyComponent<any>[]>([]); // 组件列表
+
+/**
+ * 监听传入的页面配置
+ * 解析出 pageConfigComponent 页面整体的配置，navigationBarComponent、pageComponents、tabBarComponent 页面上、中、下的配置
+ */
 watch(
   () => props.modelValue,
   () => {
@@ -86,16 +78,20 @@ watch(
       isString(props.modelValue) && !isEmpty(props.modelValue)
         ? (JSON.parse(props.modelValue) as PageConfig)
         : props.modelValue;
+    // noinspection SuspiciousTypeOfGuard
     pageConfigComponent.value.property =
       (typeof modelValue !== 'string' && modelValue?.page) ||
       PAGE_CONFIG_COMPONENT.property;
+    // noinspection SuspiciousTypeOfGuard
     navigationBarComponent.value.property =
       (typeof modelValue !== 'string' && modelValue?.navigationBar) ||
       NAVIGATION_BAR_COMPONENT.property;
+    // noinspection SuspiciousTypeOfGuard
     tabBarComponent.value.property =
       (typeof modelValue !== 'string' && modelValue?.tabBar) ||
       TAB_BAR_COMPONENT.property;
     // 查找对应的页面组件
+    // noinspection SuspiciousTypeOfGuard
     pageComponents.value = (
       (typeof modelValue !== 'string' && modelValue?.components) ||
       []
@@ -122,19 +118,20 @@ watch(
   { deep: true },
 );
 
-// 保存
-const handleSave = () => {
-  // 发送保存通知
+/** 保存 */
+function handleSave() {
+  // 发送保存通知，由外部保存
   emits('save');
-};
-// 监听配置修改
-const pageConfigChange = () => {
+}
+
+/** 监听配置修改 */
+function pageConfigChange() {
   const pageConfig = {
     page: pageConfigComponent.value.property,
     navigationBar: navigationBarComponent.value.property,
     tabBar: tabBarComponent.value.property,
     components: pageComponents.value.map((component) => {
-      // 只保留APP有用的字段
+      // 只保留 APP 有用的字段
       return { id: component.id, property: component.property };
     }),
   } as PageConfig;
@@ -146,7 +143,8 @@ const pageConfigChange = () => {
     ? JSON.stringify(pageConfig)
     : pageConfig;
   emits('update:modelValue', modelValue);
-};
+}
+
 watch(
   () => [
     pageConfigComponent.value.property,
@@ -159,15 +157,17 @@ watch(
   },
   { deep: true },
 );
-// 处理页面选中：显示属性表单
-const handlePageSelected = (event: any) => {
-  if (!props.showPageConfig) return;
 
+/** 处理页面选中：显示属性表单 */
+function handlePageSelected(event: any) {
+  if (!props.showPageConfig) {
+    return;
+  }
   // 配置了样式 page-prop-area 的元素，才显示页面设置
   if (event?.target?.classList?.contains('page-prop-area')) {
     handleComponentSelected(unref(pageConfigComponent));
   }
-};
+}
 
 /**
  * 选中组件
@@ -175,26 +175,26 @@ const handlePageSelected = (event: any) => {
  * @param component 组件
  * @param index 组件的索引
  */
-const handleComponentSelected = (
+function handleComponentSelected(
   component: DiyComponent<any>,
   index: number = -1,
-) => {
+) {
   selectedComponent.value = component;
   selectedComponentIndex.value = index;
-};
+}
 
-// 选中顶部导航栏
-const handleNavigationBarSelected = () => {
+/** 选中顶部导航栏 */
+function handleNavigationBarSelected() {
   handleComponentSelected(unref(navigationBarComponent));
-};
+}
 
-// 选中底部导航菜单
-const handleTabBarSelected = () => {
+/** 选中底部导航菜单 */
+function handleTabBarSelected() {
   handleComponentSelected(unref(tabBarComponent));
-};
+}
 
-// 组件变动（拖拽）
-const handleComponentChange = (dragEvent: any) => {
+/** 组件变动（拖拽） */
+function handleComponentChange(dragEvent: any) {
   // 新增，即从组件库拖拽添加组件
   if (dragEvent.added) {
     const { element, newIndex } = dragEvent.added;
@@ -205,41 +205,38 @@ const handleComponentChange = (dragEvent: any) => {
     // 保持选中
     selectedComponentIndex.value = newIndex;
   }
-};
+}
 
-// 交换组件
-const swapComponent = (oldIndex: number, newIndex: number) => {
+/** 交换组件 */
+function swapComponent(oldIndex: number, newIndex: number) {
   const temp = pageComponents.value[oldIndex]!;
   pageComponents.value[oldIndex] = pageComponents.value[newIndex]!;
   pageComponents.value[newIndex] = temp;
   // 保持选中
   selectedComponentIndex.value = newIndex;
-};
+}
 
 /** 移动组件（上移、下移） */
-const handleMoveComponent = (index: number, direction: number) => {
+function handleMoveComponent(index: number, direction: number) {
   const newIndex = index + direction;
-  if (newIndex < 0 || newIndex >= pageComponents.value.length) return;
-
+  if (newIndex < 0 || newIndex >= pageComponents.value.length) {
+    return;
+  }
   swapComponent(index, newIndex);
-};
+}
 
 /** 复制组件 */
-const handleCopyComponent = (index: number) => {
+function handleCopyComponent(index: number) {
   const component = pageComponents.value[index];
   if (component) {
     const clonedComponent = cloneDeep(component);
     clonedComponent.uid = Date.now();
     pageComponents.value.splice(index + 1, 0, clonedComponent);
   }
-};
+}
 
-/**
- * 删除组件
- * @param index 当前组件index
- */
-const handleDeleteComponent = (index: number) => {
-  // 删除组件
+/** 删除组件 */
+function handleDeleteComponent(index: number) {
   pageComponents.value.splice(index, 1);
   if (index < pageComponents.value.length) {
     // 1. 不是最后一个组件时，删除后选中下面的组件
@@ -259,25 +256,28 @@ const handleDeleteComponent = (index: number) => {
     // 3. 组件全部删除之后，显示页面设置
     handleComponentSelected(unref(pageConfigComponent));
   }
-};
+}
 
-// 注入无感刷新页面函数
-const reload = inject<() => void>('reload');
-// 重置
-const handleReset = () => {
-  if (reload) reload();
+/** 重置 */
+function handleReset() {
   emits('reset');
-};
+}
 
-// 预览
-const previewDialogVisible = ref(false);
-const handlePreview = () => {
-  previewDialogVisible.value = true;
-  emits('preview');
-};
+const [PreviewModal, previewModalApi] = useVbenModal({
+  showConfirmButton: false,
+  showCancelButton: false,
+  onCancel() {
+    previewModalApi.close();
+  },
+});
 
-// 设置默认选中的组件
-const setDefaultSelectedComponent = () => {
+/** 预览 */
+function handlePreview() {
+  previewModalApi.open();
+}
+
+/** 设置默认选中的组件 */
+function setDefaultSelectedComponent() {
   if (props.showPageConfig) {
     selectedComponent.value = unref(pageConfigComponent);
   } else if (props.showNavigationBar) {
@@ -285,12 +285,14 @@ const setDefaultSelectedComponent = () => {
   } else if (props.showTabBar) {
     selectedComponent.value = unref(tabBarComponent);
   }
-};
+}
 
 watch(
   () => [props.showPageConfig, props.showNavigationBar, props.showTabBar],
   () => setDefaultSelectedComponent(),
 );
+
+/** 初始化 */
 onMounted(() => {
   setDefaultSelectedComponent();
 });
@@ -307,35 +309,40 @@ onMounted(() => {
           <span>{{ title }}</span>
         </div>
         <!-- 右侧操作区 -->
-        <ElButtonGroup class="header-right">
+        <div>
           <ElTooltip content="重置">
-            <ElButton @click="handleReset">
+            <ElButton class="!m-0 !border-l !border-r-0" @click="handleReset">
               <IconifyIcon :size="24" icon="system-uicons:reset-alt" />
             </ElButton>
           </ElTooltip>
           <ElTooltip v-if="previewUrl" content="预览">
-            <ElButton @click="handlePreview">
+            <ElButton class="!m-0 !border-l !border-r-0" @click="handlePreview">
               <IconifyIcon :size="24" icon="ep:view" />
             </ElButton>
           </ElTooltip>
           <ElTooltip content="保存">
-            <ElButton @click="handleSave">
+            <ElButton class="!m-0 !border-l !border-r-0" @click="handleSave">
               <IconifyIcon :size="24" icon="ep:check" />
             </ElButton>
           </ElTooltip>
-        </ElButtonGroup>
+        </div>
       </ElHeader>
 
       <!-- 中心区域 -->
       <ElContainer class="editor-container">
         <!-- 左侧：组件库（ComponentLibrary） -->
-        <ComponentLibrary
-          v-if="libs && libs.length > 0"
-          ref="componentLibrary"
-          :list="libs"
-        />
+        <ElAside width="261px" class="editor-left">
+          <ComponentLibrary
+            v-if="libs && libs.length > 0"
+            ref="componentLibrary"
+            :list="libs"
+          />
+        </ElAside>
         <!-- 中心：设计区域（ComponentContainer） -->
-        <div class="editor-center page-prop-area" @click="handlePageSelected">
+        <ElContainer
+          class="editor-center page-prop-area"
+          @click="handlePageSelected"
+        >
           <!-- 手机顶部 -->
           <div class="editor-design-top">
             <!-- 手机顶部状态栏 -->
@@ -366,15 +373,7 @@ onMounted(() => {
             />
           </div>
           <!-- 手机页面编辑区域 -->
-          <ElScrollbar
-            :view-style="{
-              backgroundColor: pageConfigComponent.property.backgroundColor,
-              backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`,
-            }"
-            view-class="phone-container"
-            wrap-class="editor-design-center page-prop-area"
-            style="height: calc(100vh - 135px - 120px)"
-          >
+          <ElScrollbar class="phone-container">
             <draggable
               v-model="pageComponents"
               :animation="200"
@@ -419,42 +418,36 @@ onMounted(() => {
           <div class="fixed-component-action-group gap-2">
             <ElTag
               v-if="showPageConfig"
-              :effect="
+              :color="
                 selectedComponent?.uid === pageConfigComponent.uid
-                  ? 'dark'
-                  : 'plain'
-              "
-              :type="
-                selectedComponent?.uid === pageConfigComponent.uid
-                  ? 'primary'
-                  : 'info'
+                  ? 'blue'
+                  : 'default'
               "
+              :bordered="false"
               size="large"
               @click="handleComponentSelected(pageConfigComponent)"
             >
               <IconifyIcon :icon="pageConfigComponent.icon" :size="12" />
-              <span>{{ pageConfigComponent.name }}</span>
+              <ElText>{{ pageConfigComponent.name }}</ElText>
             </ElTag>
             <template v-for="(component, index) in pageComponents" :key="index">
               <ElTag
                 v-if="component.position === 'fixed'"
-                :effect="
-                  selectedComponent?.uid === component.uid ? 'dark' : 'plain'
-                "
-                :type="
-                  selectedComponent?.uid === component.uid ? 'primary' : 'info'
+                :color="
+                  selectedComponent?.uid === component.uid ? 'blue' : 'default'
                 "
+                :bordered="false"
                 closable
                 size="large"
                 @click="handleComponentSelected(component)"
                 @close="handleDeleteComponent(index)"
               >
                 <IconifyIcon :icon="component.icon" :size="12" />
-                <span>{{ component.name }}</span>
+                <ElText>{{ component.name }}</ElText>
               </ElTag>
             </template>
           </div>
-        </div>
+        </ElContainer>
         <!-- 右侧：属性面板（ComponentContainerProperty） -->
         <ElAside
           v-if="selectedComponent?.property"
@@ -464,13 +457,13 @@ onMounted(() => {
           <ElCard
             body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]"
             class="h-full"
-            shadow="never"
+            :bordered="false"
           >
             <!-- 组件名称 -->
             <template #header>
               <div class="flex items-center gap-2">
                 <IconifyIcon :icon="selectedComponent?.icon" color="gray" />
-                <span>{{ selectedComponent?.name }}</span>
+                <ElText>{{ selectedComponent?.name }}</ElText>
               </div>
             </template>
             <ElScrollbar
@@ -489,18 +482,18 @@ onMounted(() => {
     </ElContainer>
 
     <!-- 预览弹框 -->
-    <ElDialog v-model="previewDialogVisible" title="预览" width="700">
+    <PreviewModal title="预览" class="w-700px">
       <div class="flex justify-around">
-        <IFrame
+        <iframe
           :src="previewUrl"
           class="h-[667px] w-[375px] rounded-lg border-4 border-solid p-0.5"
-        />
+        ></iframe>
         <div class="flex flex-col">
           <ElText>手机扫码预览</ElText>
-          <Qrcode :text="previewUrl" logo="/logo.gif" />
+          <ElImage :src="qrcode" alt="qrcode" />
         </div>
       </div>
-    </ElDialog>
+    </PreviewModal>
   </div>
 </template>
 <style lang="scss" scoped>
@@ -523,15 +516,6 @@ $phone-width: 375px;
     background-color: var(--el-bg-color);
     border-bottom: solid 1px var(--el-border-color);
 
-    /* 工具栏：右侧按钮 */
-    .header-right {
-      height: 100%;
-
-      .el-button {
-        height: 100%;
-      }
-    }
-
     /* 隐藏工具栏按钮的边框 */
     :deep(.el-radio-button__inner),
     :deep(.el-button) {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/util.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/util.ts
new file mode 100644
index 000000000..a8f33d2fa
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/util.ts
@@ -0,0 +1,118 @@
+import type { NavigationBarProperty } from './components/mobile/navigation-bar/config';
+import type { PageConfigProperty } from './components/mobile/page-config/config';
+import type { TabBarProperty } from './components/mobile/tab-bar/config';
+
+/** 页面装修组件 */
+export interface DiyComponent<T> {
+  uid?: number; // 用于区分同一种组件的不同实例
+  id: string; // 组件唯一标识
+  name: string; // 组件名称
+  icon: string; // 组件图标
+  /*
+   组件位置：
+    top: 固定于手机顶部，例如 顶部的导航栏
+    bottom: 固定于手机底部，例如 底部的菜单导航栏
+    center: 位于手机中心，每个组件占一行，顺序向下排列
+    空：同 center
+    fixed: 由组件自己决定位置，如弹窗位于手机中心、浮动按钮一般位于手机右下角
+  */
+  position?: '' | 'bottom' | 'center' | 'fixed' | 'top';
+  property: T; // 组件属性
+}
+
+/** 页面装修组件库 */
+export interface DiyComponentLibrary {
+  name: string; // 组件库名称
+  extended: boolean; // 是否展开
+  components: string[]; // 组件列表
+}
+
+// 组件样式
+export interface ComponentStyle {
+  // 背景类型
+  bgType: 'color' | 'img';
+  // 背景颜色
+  bgColor: string;
+  // 背景图片
+  bgImg: string;
+  // 外边距
+  margin: number;
+  marginTop: number;
+  marginRight: number;
+  marginBottom: number;
+  marginLeft: number;
+  // 内边距
+  padding: number;
+  paddingTop: number;
+  paddingRight: number;
+  paddingBottom: number;
+  paddingLeft: number;
+  // 边框圆角
+  borderRadius: number;
+  borderTopLeftRadius: number;
+  borderTopRightRadius: number;
+  borderBottomRightRadius: number;
+  borderBottomLeftRadius: number;
+}
+
+/** 页面配置 */
+export interface PageConfig {
+  page: PageConfigProperty; // 页面属性
+  navigationBar: NavigationBarProperty; // 顶部导航栏属性
+  tabBar?: TabBarProperty; // 底部导航菜单属性
+
+  components: PageComponent[]; // 页面组件列表
+}
+
+export type PageComponent = Pick<DiyComponent<any>, 'id' | 'property'>; // 页面组件，只保留组件 ID，组件属性
+
+/** 页面组件库 */
+export const PAGE_LIBS = [
+  {
+    name: '基础组件',
+    extended: true,
+    components: [
+      'SearchBar',
+      'NoticeBar',
+      'MenuSwiper',
+      'MenuGrid',
+      'MenuList',
+      'Popover',
+      'FloatingActionButton',
+    ],
+  },
+  {
+    name: '图文组件',
+    extended: true,
+    components: [
+      'ImageBar',
+      'Carousel',
+      'TitleBar',
+      'VideoPlayer',
+      'Divider',
+      'MagicCube',
+      'HotZone',
+    ],
+  },
+  {
+    name: '商品组件',
+    extended: true,
+    components: ['ProductCard', 'ProductList'],
+  },
+  {
+    name: '用户组件',
+    extended: true,
+    components: ['UserCard', 'UserOrder', 'UserWallet', 'UserCoupon'],
+  },
+  {
+    name: '营销组件',
+    extended: true,
+    components: [
+      'PromotionCombination',
+      'PromotionSeckill',
+      'PromotionPoint',
+      'CouponCard',
+      'PromotionArticle',
+    ],
+  },
+] as DiyComponentLibrary[];
diff --git a/apps/web-ele/src/components/draggable/index.vue b/apps/web-ele/src/views/mall/promotion/components/draggable/index.vue
similarity index 80%
rename from apps/web-ele/src/components/draggable/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/draggable/index.vue
index 1178d142e..ad7f9f3df 100644
--- a/apps/web-ele/src/components/draggable/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/draggable/index.vue
@@ -5,43 +5,44 @@ import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-// 拖拽组件
 import VueDraggable from 'vuedraggable';
 
-// 拖拽组件封装
+/** 拖拽组件封装 */
 defineOptions({ name: 'Draggable' });
 
-// 定义属性
+/** 定义属性 */
 const props = defineProps({
-  // 绑定值
   modelValue: {
     type: Array,
     default: () => [],
-  },
-  // 空的元素：点击添加按钮时，创建元素并添加到列表；默认为空对象
+  }, // 绑定值
   emptyItem: {
     type: Object,
     default: () => ({}),
-  },
-  // 数量限制：默认为0，表示不限制
+  }, // 空的元素：点击添加按钮时，创建元素并添加到列表；默认为空对象
   limit: {
     type: Number,
     default: Number.MAX_VALUE,
-  },
-  // 最小数量：默认为1
+  }, // 数量限制：默认为 0，表示不限制
   min: {
     type: Number,
     default: 1,
-  },
+  }, // 最小数量：默认为1
 });
-// 定义事件
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 
-// 处理添加
-const handleAdd = () => formData.value.push(cloneDeep(props.emptyItem || {}));
-// 处理删除
-const handleDelete = (index: number) => formData.value.splice(index, 1);
+/** 处理添加 */
+function handleAdd() {
+  return formData.value.push(cloneDeep(props.emptyItem || {}));
+}
+
+/** 处理删除 */
+const handleDelete = function (index: number) {
+  return formData.value.splice(index, 1);
+};
 </script>
 
 <template>
@@ -57,6 +58,7 @@ const handleDelete = (index: number) => formData.value.splice(index, 1);
     <template #item="{ element, index }">
       <div class="mb-1 flex flex-col gap-1 rounded border border-gray-200 p-2">
         <!-- 操作按钮区 -->
+        <!-- TODO @AI：是不是用错了？看看项目里，有没替代的 -->
         <div
           class="-m-2 mb-1 flex flex-row items-center justify-between p-2"
           style="background-color: var(--app-content-bg-color)"
diff --git a/apps/web-ele/src/views/mall/promotion/components/index.ts b/apps/web-ele/src/views/mall/promotion/components/index.ts
new file mode 100644
index 000000000..a088806e2
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/index.ts
@@ -0,0 +1,9 @@
+export { default as AppLinkInput } from './app-link-input/index.vue';
+export { default as ColorInput } from './color-input/index.vue';
+export { default as DiyEditor } from './diy-editor/index.vue';
+export { type DiyComponentLibrary, PAGE_LIBS } from './diy-editor/util';
+export { default as Draggable } from './draggable/index.vue';
+export { default as InputWithColor } from './input-with-color/index.vue';
+
+export { default as MagicCubeEditor } from './magic-cube-editor/index.vue';
+export { default as VerticalButtonGroup } from './vertical-button-group/index.vue';
diff --git a/apps/web-ele/src/components/input-with-color/index.vue b/apps/web-ele/src/views/mall/promotion/components/input-with-color/index.vue
similarity index 89%
rename from apps/web-ele/src/components/input-with-color/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/input-with-color/index.vue
index 7c79ca354..d82567808 100644
--- a/apps/web-ele/src/components/input-with-color/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/input-with-color/index.vue
@@ -1,13 +1,10 @@
 <script lang="ts" setup>
 import { PREDEFINE_COLORS } from '@vben/constants';
 
-// TODO @芋艿：后续合并到 diy-editor 里，并不是通用的；
 import { useVModels } from '@vueuse/core';
 import { ElColorPicker, ElInput } from 'element-plus';
 
-/**
- * 带颜色选择器输入框
- */
+/** 带颜色选择器输入框 */
 defineOptions({ name: 'InputWithColor' });
 
 const props = defineProps({
@@ -20,7 +17,9 @@ const props = defineProps({
     default: '',
   },
 });
+
 const emit = defineEmits(['update:modelValue', 'update:color']);
+
 const { modelValue, color } = useVModels(props, emit);
 </script>
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/index.vue b/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/index.vue
new file mode 100644
index 000000000..d260ded9c
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/index.vue
@@ -0,0 +1,302 @@
+<script lang="ts" setup>
+import type { Point, Rect } from './util';
+
+import { ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { createRect, isContains, isOverlap } from './util';
+
+// TODO @AI: 改成标准注释
+// 魔方编辑器
+// 有两部分组成：
+// 1. 魔方矩阵：位于底层，由方块组件的二维表格，用于创建热区
+//    操作方法：
+//    1.1 点击其中一个方块就会进入热区选择模式
+//    1.2 再次点击另外一个方块时，结束热区选择模式
+//    1.3 在两个方块中间的区域创建热区
+//    如果两次点击的都是同一方块，就只创建一个格子的热区
+// 2. 热区：位于顶层，采用绝对定位，覆盖在魔方矩阵上面。
+defineOptions({ name: 'MagicCubeEditor' });
+
+/** 定义属性 */
+const props = defineProps({
+  modelValue: {
+    type: Array as () => Rect[],
+    default: () => [],
+  }, // 热区列表
+  rows: {
+    type: Number,
+    default: 4,
+  }, // 行数，默认 4 行
+
+  cols: {
+    type: Number,
+    default: 4,
+  }, // 列数，默认 4 列
+
+  cubeSize: {
+    type: Number,
+    default: 75,
+  }, // 方块大小，单位px，默认75px
+});
+
+const emit = defineEmits(['update:modelValue', 'hotAreaSelected']); // 发送模型更新
+
+/** 方块 */
+type Cube = {
+  active: boolean; // 是否激活
+} & Point;
+
+const cubes = ref<Cube[][]>([]); // 魔方矩阵：所有的方块
+
+/** 监听行数、列数变化 */
+watch(
+  () => [props.rows, props.cols],
+  () => {
+    // 清空魔方
+    cubes.value = [];
+    if (!props.rows || !props.cols) return;
+
+    // 初始化魔方
+    for (let row = 0; row < props.rows; row++) {
+      cubes.value[row] = [];
+      for (let col = 0; col < props.cols; col++) {
+        cubes.value[row]!.push({ x: col, y: row, active: false });
+      }
+    }
+  },
+  { immediate: true },
+);
+
+const hotAreas = ref<Rect[]>([]); // 热区列表
+/** 初始化热区 */
+watch(
+  () => props.modelValue,
+  () => (hotAreas.value = props.modelValue || []),
+  { immediate: true },
+);
+
+const hotAreaBeginCube = ref<Cube>(); // 热区起始方块
+const isHotAreaSelectMode = () => !!hotAreaBeginCube.value; // 是否开启了热区选择模式
+
+/**
+ * 处理鼠标点击方块
+ *
+ * @param currentRow 当前行号
+ * @param currentCol 当前列号
+ */
+const handleCubeClick = (currentRow: number, currentCol: number) => {
+  const currentCube = cubes.value[currentRow]?.[currentCol];
+  if (!currentCube) {
+    return;
+  }
+
+  // 情况1：进入热区选择模式
+  if (!isHotAreaSelectMode()) {
+    hotAreaBeginCube.value = currentCube;
+    hotAreaBeginCube.value!.active = true;
+    return;
+  }
+
+  // 情况2：结束热区选择模式
+  hotAreas.value.push(createRect(hotAreaBeginCube.value!, currentCube));
+  // 结束热区选择模式
+  exitHotAreaSelectMode();
+  // 创建后就选中热区
+  const hotAreaIndex = hotAreas.value.length - 1;
+  const hotArea = hotAreas.value[hotAreaIndex];
+  if (hotArea) {
+    handleHotAreaSelected(hotArea, hotAreaIndex);
+  }
+  // 发送热区变动通知
+  emitUpdateModelValue();
+};
+
+/**
+ * 处理鼠标经过方块
+ *
+ * @param currentRow 当前行号
+ * @param currentCol 当前列号
+ */
+const handleCellHover = (currentRow: number, currentCol: number) => {
+  // 当前没有进入热区选择模式
+  if (!isHotAreaSelectMode()) {
+    return;
+  }
+
+  // 当前已选的区域
+  const currentCube = cubes.value[currentRow]?.[currentCol];
+  if (!currentCube) {
+    return;
+  }
+
+  const currentSelectedArea = createRect(hotAreaBeginCube.value!, currentCube);
+  // 热区不允许重叠
+  for (const hotArea of hotAreas.value) {
+    // 检查是否重叠
+    if (isOverlap(hotArea, currentSelectedArea)) {
+      // 结束热区选择模式
+      exitHotAreaSelectMode();
+
+      return;
+    }
+  }
+
+  // 激活选中区域内部的方块
+  eachCube((_, __, cube) => {
+    cube.active = isContains(currentSelectedArea, cube);
+  });
+};
+
+/**
+ * 处理热区删除
+ *
+ * @param index 热区索引
+ */
+function handleDeleteHotArea(index: number) {
+  hotAreas.value.splice(index, 1);
+  // 结束热区选择模式
+  exitHotAreaSelectMode();
+  // 发送热区变动通知
+  emitUpdateModelValue();
+}
+
+const emitUpdateModelValue = () => emit('update:modelValue', hotAreas.value); // 发送热区变动通知
+
+const selectedHotAreaIndex = ref(0); // 热区选中
+const handleHotAreaSelected = (hotArea: Rect, index: number) => {
+  selectedHotAreaIndex.value = index;
+  emit('hotAreaSelected', hotArea, index);
+};
+
+/**
+ * 结束热区选择模式
+ */
+function exitHotAreaSelectMode() {
+  // 移除方块激活标记
+  eachCube((_, __, cube) => {
+    if (cube.active) {
+      cube.active = false;
+    }
+  });
+
+  // 清除起点
+  hotAreaBeginCube.value = undefined;
+}
+
+/**
+ * 迭代魔方矩阵
+ * @param callback 回调
+ */
+const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
+  for (const [x, row] of cubes.value.entries()) {
+    if (!row) continue;
+    for (const [y, cube] of row.entries()) {
+      if (cube) {
+        callback(x, y, cube);
+      }
+    }
+  }
+};
+</script>
+<template>
+  <div class="relative">
+    <table class="cube-table">
+      <!-- 底层：魔方矩阵 -->
+      <tbody>
+        <tr v-for="(rowCubes, row) in cubes" :key="row">
+          <td
+            v-for="(cube, col) in rowCubes"
+            :key="col"
+            class="cube"
+            :class="[{ active: cube.active }]"
+            :style="{
+              width: `${cubeSize}px`,
+              height: `${cubeSize}px`,
+            }"
+            @click="handleCubeClick(row, col)"
+            @mouseenter="handleCellHover(row, col)"
+          >
+            <IconifyIcon icon="ep-plus" />
+          </td>
+        </tr>
+      </tbody>
+      <!-- 顶层：热区 -->
+      <div
+        v-for="(hotArea, index) in hotAreas"
+        :key="index"
+        class="hot-area"
+        :style="{
+          top: `${cubeSize * hotArea.top}px`,
+          left: `${cubeSize * hotArea.left}px`,
+          height: `${cubeSize * hotArea.height}px`,
+          width: `${cubeSize * hotArea.width}px`,
+        }"
+        @click="handleHotAreaSelected(hotArea, index)"
+        @mouseover="exitHotAreaSelectMode"
+      >
+        <!-- 右上角热区删除按钮 -->
+        <div
+          v-if="
+            selectedHotAreaIndex === index && hotArea.width && hotArea.height
+          "
+          class="btn-delete"
+          @click="handleDeleteHotArea(index)"
+        >
+          <IconifyIcon icon="ep:circle-close-filled" />
+        </div>
+        <span v-if="hotArea.width">{{
+          `${hotArea.width}×${hotArea.height}`
+        }}</span>
+      </div>
+    </table>
+  </div>
+</template>
+<style lang="scss" scoped>
+.cube-table {
+  position: relative;
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  .cube {
+    box-sizing: border-box;
+    color: var(--el-text-color-secondary);
+    text-align: center;
+    cursor: pointer;
+    border: 1px solid var(--el-border-color);
+
+    &.active {
+      background: var(--el-color-primary-light-9);
+    }
+  }
+
+  .hot-area {
+    position: absolute;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--el-color-primary);
+    cursor: pointer;
+    border-spacing: 0;
+    border-collapse: collapse;
+    background: var(--el-color-primary-light-8);
+    border: 1px solid var(--el-color-primary);
+
+    .btn-delete {
+      position: absolute;
+      top: -8px;
+      right: -8px;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      background-color: #fff;
+      border-radius: 50%;
+    }
+  }
+}
+</style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/util.ts b/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/util.ts
new file mode 100644
index 000000000..1ee8fb5a4
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/util.ts
@@ -0,0 +1,72 @@
+// 坐标点
+export interface Point {
+  x: number;
+  y: number;
+}
+
+// 矩形
+export interface Rect {
+  // 左上角 X 轴坐标
+  left: number;
+  // 左上角 Y 轴坐标
+  top: number;
+  // 右下角 X 轴坐标
+  right: number;
+  // 右下角 Y 轴坐标
+  bottom: number;
+  // 矩形宽度
+  width: number;
+  // 矩形高度
+  height: number;
+}
+
+/**
+ * 判断两个矩形是否重叠
+ * @param a 矩形 A
+ * @param b 矩形 B
+ */
+export const isOverlap = (a: Rect, b: Rect): boolean => {
+  return (
+    a.left < b.left + b.width &&
+    a.left + a.width > b.left &&
+    a.top < b.top + b.height &&
+    a.height + a.top > b.top
+  );
+};
+/**
+ * 检查坐标点是否在矩形内
+ * @param hotArea 矩形
+ * @param point 坐标
+ */
+export const isContains = (hotArea: Rect, point: Point): boolean => {
+  return (
+    point.x >= hotArea.left &&
+    point.x < hotArea.right &&
+    point.y >= hotArea.top &&
+    point.y < hotArea.bottom
+  );
+};
+
+/**
+ * 在两个坐标点中间，创建一个矩形
+ *
+ * 存在以下情况：
+ * 1. 两个坐标点是同一个位置，只占一个位置的正方形，宽高都为 1
+ * 2. X 轴坐标相同，只占一行的矩形，高度为 1
+ * 3. Y 轴坐标相同，只占一列的矩形，宽度为 1
+ * 4. 多行多列的矩形
+ *
+ * @param a 坐标点一
+ * @param b 坐标点二
+ */
+export const createRect = (a: Point, b: Point): Rect => {
+  // 计算矩形的范围
+  const [left, left2] = [a.x, b.x].sort();
+  const [top, top2] = [a.y, b.y].sort();
+  const right = left2 + 1;
+  const bottom = top2 + 1;
+  const height = bottom - top;
+  const width = right - left;
+
+  return { left, right, top, bottom, height, width };
+};
diff --git a/apps/web-ele/src/components/vertical-button-group/index.vue b/apps/web-ele/src/views/mall/promotion/components/vertical-button-group/index.vue
similarity index 86%
rename from apps/web-ele/src/components/vertical-button-group/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/vertical-button-group/index.vue
index 9d78c1f0a..2c076afa5 100644
--- a/apps/web-ele/src/components/vertical-button-group/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/vertical-button-group/index.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-// TODO @芋艿：后续合并到 diy-editor 里，并不是通用的；
 /**
  * 垂直按钮组
- * Element官方的按钮组只支持水平显示，通过重写样式实现垂直布局
+ * Element 官方的按钮组只支持水平显示，通过重写样式实现垂直布局
  */
 defineOptions({ name: 'VerticalButtonGroup' });
 </script>
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/index.vue b/apps/web-ele/src/views/mall/promotion/coupon/index.vue
index df3569ada..9e626dff6 100644
--- a/apps/web-ele/src/views/mall/promotion/coupon/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/coupon/index.vue
@@ -112,10 +112,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </template>
 
     <Grid>
-      <template #top>
+      <template #toolbar-actions>
         <ElTabs
           :model-value="activeTab"
-          class="-mt-11"
+          class="w-full"
           @tab-change="handleTabChange"
         >
           <ElTabPane
@@ -147,8 +147,3 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </Grid>
   </Page>
 </template>
-<style scoped>
-:deep(.vxe-toolbar div) {
-  z-index: 1;
-}
-</style>
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/template/index.vue b/apps/web-ele/src/views/mall/promotion/coupon/template/index.vue
index 95be66c76..cbe999341 100644
--- a/apps/web-ele/src/views/mall/promotion/coupon/template/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/coupon/template/index.vue
@@ -65,14 +65,10 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新优惠券模板状态
-        const res = await updateCouponTemplateStatus(row.id!, newStatus);
-        if (res) {
-          // 提示并返回成功
-          ElMessage.success($t('ui.actionMessage.operationSuccess'));
-          resolve(true);
-        } else {
-          reject(new Error('更新失败'));
-        }
+        await updateCouponTemplateStatus(row.id!, newStatus);
+        // 提示并返回成功
+        ElMessage.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-ele/src/views/mall/promotion/diy/page/data.ts b/apps/web-ele/src/views/mall/promotion/diy/page/data.ts
index 554f6829d..cec26ffcf 100644
--- a/apps/web-ele/src/views/mall/promotion/diy/page/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/diy/page/data.ts
@@ -1,6 +1,8 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
+import { getRangePickerDefaultProps } from '#/utils';
+
 /** 表单配置 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -59,9 +61,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '创建时间',
       component: 'RangePicker',
       componentProps: {
-        placeholder: ['开始时间', '结束时间'],
-        clearable: true,
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
       },
     },
   ];
diff --git a/apps/web-ele/src/views/mall/promotion/diy/page/decorate/index.vue b/apps/web-ele/src/views/mall/promotion/diy/page/decorate/index.vue
new file mode 100644
index 000000000..2dddd5941
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/diy/page/decorate/index.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { MallDiyPageApi } from '#/api/mall/promotion/diy/page';
+
+import { onMounted, ref, unref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import {
+  getDiyPageProperty,
+  updateDiyPageProperty,
+} from '#/api/mall/promotion/diy/page';
+import { DiyEditor, PAGE_LIBS } from '#/views/mall/promotion/components';
+
+/** 装修页面表单 */
+defineOptions({ name: 'DiyPageDecorate' });
+
+const route = useRoute();
+
+const formData = ref<MallDiyPageApi.DiyPage>();
+
+/** 获取详情 */
+async function getPageDetail(id: any) {
+  const loadingInstance = ElLoading.service({
+    text: '加载中...',
+  });
+  try {
+    formData.value = await getDiyPageProperty(id);
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 提交表单 */
+async function submitForm() {
+  const loadingInstance = ElLoading.service({
+    text: '保存中...',
+  });
+  try {
+    await updateDiyPageProperty(unref(formData)!);
+    ElMessage.success('保存成功');
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  if (!route.params.id) {
+    ElMessage.warning('参数错误，页面编号不能为空！');
+    return;
+  }
+  formData.value = {} as MallDiyPageApi.DiyPage;
+  getPageDetail(route.params.id);
+});
+</script>
+<template>
+  <DiyEditor
+    v-if="formData?.id"
+    v-model="formData!.property"
+    :title="formData!.name"
+    :libs="PAGE_LIBS"
+    @save="submitForm"
+  />
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/diy/page/index.vue b/apps/web-ele/src/views/mall/promotion/diy/page/index.vue
index 8d9470c7a..af3b0cf18 100644
--- a/apps/web-ele/src/views/mall/promotion/diy/page/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/diy/page/index.vue
@@ -39,7 +39,6 @@ function handleEdit(row: MallDiyPageApi.DiyPage) {
   formModalApi.setData(row).open();
 }
 
-// TODO @霖：貌似跳转不过去；
 /** 装修页面 */
 function handleDecorate(row: MallDiyPageApi.DiyPage) {
   push({ name: 'DiyPageDecorate', params: { id: row.id } });
diff --git a/apps/web-ele/src/views/mall/promotion/diy/page/modules/decorate.vue b/apps/web-ele/src/views/mall/promotion/diy/page/modules/decorate.vue
deleted file mode 100644
index 396b11ff8..000000000
--- a/apps/web-ele/src/views/mall/promotion/diy/page/modules/decorate.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script setup lang="ts">
-import type { MallDiyPageApi } from '#/api/mall/promotion/diy/page';
-
-import { onMounted, ref, unref } from 'vue';
-import { useRoute } from 'vue-router';
-
-import { ElMessage } from 'element-plus';
-
-import * as DiyPageApi from '#/api/mall/promotion/diy/page';
-import { PAGE_LIBS } from '#/components/diy-editor/util';
-
-/** 装修页面表单 */
-defineOptions({ name: 'DiyPageDecorate' });
-
-const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formData = ref<MallDiyPageApi.DiyPage>();
-const formRef = ref(); // 表单 Ref
-
-// 获取详情
-const getPageDetail = async (id: any) => {
-  formLoading.value = true;
-  try {
-    formData.value = await DiyPageApi.getDiyPageProperty(id);
-  } finally {
-    formLoading.value = false;
-  }
-};
-
-// 提交表单
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef.value) return;
-  // 提交请求
-  formLoading.value = true;
-  try {
-    await DiyPageApi.updateDiyPageProperty(unref(formData)!);
-    ElMessage.success('保存成功');
-  } finally {
-    formLoading.value = false;
-  }
-};
-
-// 重置表单
-const resetForm = () => {
-  formData.value = {
-    id: undefined,
-    templateId: undefined,
-    name: '',
-    remark: '',
-    previewPicUrls: [],
-    property: '',
-  } as MallDiyPageApi.DiyPage;
-  formRef.value?.resetFields();
-};
-
-/** 初始化 */
-const route = useRoute();
-onMounted(() => {
-  resetForm();
-  if (!route.params.id) {
-    ElMessage.warning('参数错误，页面编号不能为空！');
-    return;
-  }
-  getPageDetail(route.params.id);
-});
-</script>
-<template>
-  <DiyEditor
-    v-if="formData && !formLoading"
-    v-model="formData.property"
-    :title="formData.name"
-    :libs="PAGE_LIBS"
-    @save="submitForm"
-  />
-</template>
diff --git a/apps/web-ele/src/views/mall/promotion/diy/page/modules/form.vue b/apps/web-ele/src/views/mall/promotion/diy/page/modules/form.vue
index e128ce9b8..b44b4a614 100644
--- a/apps/web-ele/src/views/mall/promotion/diy/page/modules/form.vue
+++ b/apps/web-ele/src/views/mall/promotion/diy/page/modules/form.vue
@@ -45,12 +45,6 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as MallDiyPageApi.DiyPage;
-
-    // 确保必要的默认值
-    if (!data.previewPicUrls) {
-      data.previewPicUrls = [];
-    }
-
     try {
       await (formData.value?.id ? updateDiyPage(data) : createDiyPage(data));
       // 关闭并提示
@@ -84,7 +78,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form />
   </Modal>
 </template>
diff --git a/apps/web-ele/src/views/mall/promotion/diy/template/data.ts b/apps/web-ele/src/views/mall/promotion/diy/template/data.ts
index ca09c59fa..e3c8f1421 100644
--- a/apps/web-ele/src/views/mall/promotion/diy/template/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/diy/template/data.ts
@@ -3,6 +3,8 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { DICT_TYPE } from '@vben/constants';
 
+import { getRangePickerDefaultProps } from '#/utils';
+
 /** 表单配置 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -61,9 +63,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '创建时间',
       component: 'RangePicker',
       componentProps: {
-        placeholder: ['开始时间', '结束时间'],
-        clearable: true,
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
       },
     },
   ];
diff --git a/apps/web-ele/src/views/mall/promotion/diy/template/modules/decorate.vue b/apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue
similarity index 65%
rename from apps/web-ele/src/views/mall/promotion/diy/template/modules/decorate.vue
rename to apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue
index b51f4c8f8..566dc0d5e 100644
--- a/apps/web-ele/src/views/mall/promotion/diy/template/modules/decorate.vue
+++ b/apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue
@@ -1,70 +1,77 @@
 <script lang="ts" setup>
 import type { MallDiyPageApi } from '#/api/mall/promotion/diy/page';
 import type { MallDiyTemplateApi } from '#/api/mall/promotion/diy/template';
-import type { DiyComponentLibrary } from '#/components/diy-editor/util'; // 商城的 DIY 组件，在 DiyEditor 目录下
+import type { DiyComponentLibrary } from '#/views/mall/promotion/components'; // 商城的 DIY 组件，在 DiyEditor 目录下
 
-import { onMounted, reactive, ref, unref } from 'vue';
-import { useRouter } from 'vue-router';
+import { onMounted, reactive, ref } from 'vue';
+import { useRoute } from 'vue-router';
 
+import { useTabs } from '@vben/hooks';
 import { IconifyIcon } from '@vben/icons';
 import { useAccessStore } from '@vben/stores';
 import { isEmpty } from '@vben/utils';
 
-import { ElMessage } from 'element-plus';
+import {
+  ElLoading,
+  ElMessage,
+  ElRadioButton,
+  ElRadioGroup,
+  ElTooltip,
+} from 'element-plus';
 
 import * as DiyPageApi from '#/api/mall/promotion/diy/page';
-// TODO @疯狂：要不要建个 decorate 目录，然后挪进去，改成 index.vue，这样可以更明确看到是个独立界面哈，更好找
 import * as DiyTemplateApi from '#/api/mall/promotion/diy/template';
-import DiyEditor from '#/components/diy-editor/index.vue';
-import { PAGE_LIBS } from '#/components/diy-editor/util';
+import { DiyEditor, PAGE_LIBS } from '#/views/mall/promotion/components';
 
 /** 装修模板表单 */
 defineOptions({ name: 'DiyTemplateDecorate' });
 
-// 左上角工具栏操作按钮
+const route = useRoute();
+const { refreshTab } = useTabs();
+
+const DIY_PAGE_INDEX_KEY = 'diy_page_index'; // 特殊：存储 reset 重置时，当前 selectedTemplateItem 值，从而进行恢复
+
 const selectedTemplateItem = ref(0);
 const templateItems = reactive([
   { name: '基础设置', icon: 'ep:iphone' },
   { name: '首页', icon: 'ep:home-filled' },
   { name: '我的', icon: 'ep:user-filled' },
-]);
+]); // 左上角工具栏操作按钮
 
-const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formData = ref<MallDiyTemplateApi.DiyTemplateProperty>();
-const formRef = ref(); // 表单 Ref
-// 当前编辑的属性
 const currentFormData = ref<
   MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty
 >({
   property: '',
-} as MallDiyPageApi.DiyPage);
-// templateItem 对应的缓存
+} as MallDiyPageApi.DiyPage); // 当前编辑的属性
 const currentFormDataMap = ref<
   Map<string, MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty>
->(new Map());
-// 商城 H5 预览地址
-const previewUrl = ref('');
+>(new Map()); // templateItem 对应的缓存
 
-// 获取详情
-const getPageDetail = async (id: any) => {
-  formLoading.value = true;
+const previewUrl = ref(''); // 商城 H5 预览地址
+
+const templateLibs = [] as DiyComponentLibrary[]; // 模板组件库
+const libs = ref<DiyComponentLibrary[]>(templateLibs); // 当前组件库
+
+/** 获取详情 */
+async function getPageDetail(id: any) {
+  const loadingInstance = ElLoading.service({
+    text: '加载中...',
+  });
   try {
     formData.value = await DiyTemplateApi.getDiyTemplateProperty(id);
+
     // 拼接手机预览链接
     const domain = import.meta.env.VITE_MALL_H5_DOMAIN;
     const accessStore = useAccessStore();
     previewUrl.value = `${domain}?templateId=${formData.value.id}&${accessStore.tenantId}`;
   } finally {
-    formLoading.value = false;
+    loadingInstance.close();
   }
-};
+}
 
-// 模板组件库
-const templateLibs = [] as DiyComponentLibrary[];
-// 当前组件库
-const libs = ref<DiyComponentLibrary[]>(templateLibs);
-// 模板选项切换
-const handleTemplateItemChange = (val: number) => {
+/** 模板选项切换 */
+function handleTemplateItemChange(val: any) {
   // 缓存模版编辑数据
   currentFormDataMap.value.set(
     templateItems[selectedTemplateItem.value]?.name || '',
@@ -75,7 +82,8 @@ const handleTemplateItemChange = (val: number) => {
 
   // 切换模版
   selectedTemplateItem.value = val;
-  // 编辑模板
+
+  // 情况一：编辑模板
   if (val === 0) {
     libs.value = templateLibs;
     currentFormData.value = (isEmpty(data) ? formData.value : data) as
@@ -84,7 +92,7 @@ const handleTemplateItemChange = (val: number) => {
     return;
   }
 
-  // 编辑页面
+  // 情况二：编辑页面
   libs.value = PAGE_LIBS;
   currentFormData.value = (
     isEmpty(data)
@@ -94,14 +102,13 @@ const handleTemplateItemChange = (val: number) => {
         )
       : data
   ) as MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty;
-};
+}
 
-// 提交表单
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef.value) return;
-  // 提交请求
-  formLoading.value = true;
+/** 提交表单 */
+async function submitForm() {
+  const loadingInstance = ElLoading.service({
+    text: '保存中...',
+  });
   try {
     // 对所有的 templateItems 都进行保存，有缓存则保存缓存，解决都有修改时只保存了当前所编辑的 templateItem，导致装修效果存在差异
     for (const [i, templateItem] of templateItems.entries()) {
@@ -110,14 +117,14 @@ const submitForm = async () => {
       if (i === 0) {
         // 提交模板属性
         await DiyTemplateApi.updateDiyTemplateProperty(
-          isEmpty(data) ? unref(formData)! : data,
+          isEmpty(data) ? formData.value! : data,
         );
         continue;
       }
       // 提交页面属性
       // 情况二：提交当前正在编辑的页面
       if (currentFormData.value?.name.includes(templateItem.name)) {
-        await DiyPageApi.updateDiyPageProperty(unref(currentFormData)!);
+        await DiyPageApi.updateDiyPageProperty(currentFormData.value!);
         continue;
       }
       // 情况三：提交页面编辑缓存
@@ -127,36 +134,18 @@ const submitForm = async () => {
     }
     ElMessage.success('保存成功');
   } finally {
-    formLoading.value = false;
+    loadingInstance.close();
   }
-};
+}
 
-// 重置表单
-const resetForm = () => {
-  formData.value = {
-    id: undefined,
-    name: '',
-    used: false,
-    usedTime: undefined,
-    remark: '',
-    previewPicUrls: [],
-    property: '',
-    pages: [],
-  } as MallDiyTemplateApi.DiyTemplateProperty;
-  formRef.value?.resetFields();
-};
-
-// 重置时记录当前编辑的页面
-const handleEditorReset = () => storePageIndex();
-
-// #region 无感刷新
-// 记录标识
-const DIY_PAGE_INDEX_KEY = 'diy_page_index';
-// 1. 记录
-const storePageIndex = () =>
+/** 刷新当前 Tab */
+function handleEditorReset() {
   sessionStorage.setItem(DIY_PAGE_INDEX_KEY, `${selectedTemplateItem.value}`);
-// 2. 恢复
-const recoverPageIndex = () => {
+  refreshTab();
+}
+
+/** 恢复当前 Tab 之前的 index（selectedTemplateItem） */
+function recoverPageIndex() {
   // 恢复重置前的页面，默认是第一个页面
   const pageIndex = Number(sessionStorage.getItem(DIY_PAGE_INDEX_KEY)) || 0;
   // 移除标记
@@ -174,26 +163,24 @@ const recoverPageIndex = () => {
   if (pageIndex !== selectedTemplateItem.value) {
     handleTemplateItemChange(pageIndex);
   }
-};
-// #endregion
+}
 
 /** 初始化 */
-const { currentRoute } = useRouter(); // 路由
 onMounted(async () => {
-  resetForm();
-  if (!currentRoute.value.params.id) {
+  if (!route.params.id) {
     ElMessage.warning('参数错误，页面编号不能为空！');
     return;
   }
   // 查询详情
-  await getPageDetail(currentRoute.value.params.id);
+  formData.value = {} as MallDiyTemplateApi.DiyTemplateProperty;
+  await getPageDetail(route.params.id);
   // 恢复重置前的页面
   recoverPageIndex();
 });
 </script>
 <template>
   <DiyEditor
-    v-if="formData && !formLoading"
+    v-if="formData?.id"
     v-model="currentFormData!.property"
     :libs="libs"
     :preview-url="previewUrl"
@@ -205,21 +192,21 @@ onMounted(async () => {
     @save="submitForm"
   >
     <template #toolBarLeft>
-      <el-radio-group
+      <ElRadioGroup
         :model-value="selectedTemplateItem"
         class="h-full!"
         @change="handleTemplateItemChange"
       >
-        <el-tooltip
+        <ElTooltip
           v-for="(item, index) in templateItems"
           :key="index"
           :content="item.name"
         >
-          <el-radio-button :value="index">
+          <ElRadioButton :value="index">
             <IconifyIcon :icon="item.icon" :size="24" />
-          </el-radio-button>
-        </el-tooltip>
-      </el-radio-group>
+          </ElRadioButton>
+        </ElTooltip>
+      </ElRadioGroup>
     </template>
   </DiyEditor>
 </template>
diff --git a/apps/web-ele/src/views/mall/promotion/diy/template/index.vue b/apps/web-ele/src/views/mall/promotion/diy/template/index.vue
index 74abcb732..df68ff883 100644
--- a/apps/web-ele/src/views/mall/promotion/diy/template/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/diy/template/index.vue
@@ -33,32 +33,37 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 创建DIY模板 */
+/** 创建 DIY 模板 */
 function handleCreate() {
   formModalApi.setData(null).open();
 }
 
-/** 编辑DIY模板 */
+/** 编辑 DIY 模板 */
 function handleEdit(row: MallDiyTemplateApi.DiyTemplate) {
   formModalApi.setData(row).open();
 }
 
 /** 装修模板 */
 function handleDecorate(row: MallDiyTemplateApi.DiyTemplate) {
-  // 跳转到装修页面
   router.push({ name: 'DiyTemplateDecorate', params: { id: row.id } });
 }
 
 /** 使用模板 */
 async function handleUse(row: MallDiyTemplateApi.DiyTemplate) {
   await confirm(`是否使用模板"${row.name}"?`);
-  // 发起删除
-  await useDiyTemplate(row.id as number);
-  ElMessage.success('使用成功');
-  handleRefresh();
+  const loadingInstance = ElLoading.service({
+    text: `正在使用模板"${row.name}"...`,
+  });
+  try {
+    await useDiyTemplate(row.id as number);
+    ElMessage.success('使用成功');
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
-/** 删除DIY模板 */
+/** 删除 DIY 模板 */
 async function handleDelete(row: MallDiyTemplateApi.DiyTemplate) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.name]),
diff --git a/apps/web-ele/src/views/mall/promotion/diy/template/modules/form.vue b/apps/web-ele/src/views/mall/promotion/diy/template/modules/form.vue
index 886d3946e..8e088d7cf 100644
--- a/apps/web-ele/src/views/mall/promotion/diy/template/modules/form.vue
+++ b/apps/web-ele/src/views/mall/promotion/diy/template/modules/form.vue
@@ -16,9 +16,7 @@ import { $t } from '#/locales';
 
 import { useFormSchema } from '../data';
 
-/** 提交表单 */
 const emit = defineEmits(['success']);
-
 const formData = ref<MallDiyTemplateApi.DiyTemplate>();
 const getTitle = computed(() => {
   return formData.value?.id
@@ -47,15 +45,6 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as MallDiyTemplateApi.DiyTemplate;
-
-    // 确保必要的默认值
-    if (!data.previewPicUrls) {
-      data.previewPicUrls = [];
-    }
-    if (data.used === undefined) {
-      data.used = false;
-    }
-
     try {
       await (formData.value?.id
         ? updateDiyTemplate(data)
@@ -91,7 +80,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form />
   </Modal>
 </template>
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/config/index.vue b/apps/web-ele/src/views/mall/promotion/seckill/config/index.vue
index de69c864e..073c763c2 100644
--- a/apps/web-ele/src/views/mall/promotion/seckill/config/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/seckill/config/index.vue
@@ -64,14 +64,10 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新状态
-        const res = await updateSeckillConfigStatus(row.id, newStatus);
-        if (res) {
-          // 提示并返回成功
-          ElMessage.success(`${text}成功`);
-          resolve(true);
-        } else {
-          reject(new Error('操作失败'));
-        }
+        await updateSeckillConfigStatus(row.id, newStatus);
+        // 提示并返回成功
+        ElMessage.success(`${text}成功`);
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-ele/src/views/mall/statistics/member/index.vue b/apps/web-ele/src/views/mall/statistics/member/index.vue
index 8b99dbde2..5a1a9221a 100644
--- a/apps/web-ele/src/views/mall/statistics/member/index.vue
+++ b/apps/web-ele/src/views/mall/statistics/member/index.vue
@@ -8,7 +8,7 @@ import { fenToYuan } from '@vben/utils';
 
 import { ElCol, ElRow } from 'element-plus';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberSummary } from '#/api/mall/statistics/member';
 
 import MemberAreaCard from './modules/area-card.vue';
 import MemberFunnelCard from './modules/funnel-card.vue';
@@ -22,15 +22,15 @@ const loading = ref(true); // 加载中
 const summary = ref<MallMemberStatisticsApi.Summary>(); // 会员统计数据
 
 /** 查询会员统计 */
-async function getMemberSummary() {
-  summary.value = await MemberStatisticsApi.getMemberSummary();
+async function loadMemberSummary() {
+  summary.value = await getMemberSummary();
 }
 
 /** 初始化 */
 onMounted(async () => {
   loading.value = true;
   try {
-    await getMemberSummary();
+    await loadMemberSummary();
   } finally {
     loading.value = false;
   }
diff --git a/apps/web-ele/src/views/mall/statistics/member/modules/area-card.vue b/apps/web-ele/src/views/mall/statistics/member/modules/area-card.vue
index 43d41aac7..9e2c820ed 100644
--- a/apps/web-ele/src/views/mall/statistics/member/modules/area-card.vue
+++ b/apps/web-ele/src/views/mall/statistics/member/modules/area-card.vue
@@ -10,7 +10,7 @@ import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 import { ElCard } from 'element-plus';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberAreaStatisticsList } from '#/api/mall/statistics/member';
 
 import { getAreaChartOptions, getAreaTableColumns } from './area-chart-options';
 
@@ -44,10 +44,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 按照省份，查询会员统计列表 */
-async function getMemberAreaStatisticsList() {
+async function loadMemberAreaStatisticsList() {
   loading.value = true;
   try {
-    const list = await MemberStatisticsApi.getMemberAreaStatisticsList();
+    const list = await getMemberAreaStatisticsList();
     areaStatisticsList.value = list.map(
       (item: MallMemberStatisticsApi.AreaStatistics) => ({
         ...item,
@@ -80,7 +80,7 @@ function areaReplace(areaName: string): string {
 
 /** 初始化 */
 onMounted(() => {
-  getMemberAreaStatisticsList();
+  loadMemberAreaStatisticsList();
 });
 </script>
 
diff --git a/apps/web-ele/src/views/mall/statistics/member/modules/funnel-card.vue b/apps/web-ele/src/views/mall/statistics/member/modules/funnel-card.vue
index e2d3252e2..845fd8502 100644
--- a/apps/web-ele/src/views/mall/statistics/member/modules/funnel-card.vue
+++ b/apps/web-ele/src/views/mall/statistics/member/modules/funnel-card.vue
@@ -7,7 +7,7 @@ import { fenToYuan } from '@vben/utils';
 
 import { ElCard } from 'element-plus';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberAnalyse } from '#/api/mall/statistics/member';
 import { ShortcutDateRangePicker } from '#/components/shortcut-date-range-picker';
 
 /** 会员概览卡片 */
@@ -23,7 +23,7 @@ async function loadData(times: [Dayjs, Dayjs]) {
   }
   loading.value = true;
   try {
-    analyseData.value = await MemberStatisticsApi.getMemberAnalyse({
+    analyseData.value = await getMemberAnalyse({
       times,
     });
   } finally {
diff --git a/apps/web-ele/src/views/mall/statistics/member/modules/sex-card.vue b/apps/web-ele/src/views/mall/statistics/member/modules/sex-card.vue
index 54a254dee..a41d8b469 100644
--- a/apps/web-ele/src/views/mall/statistics/member/modules/sex-card.vue
+++ b/apps/web-ele/src/views/mall/statistics/member/modules/sex-card.vue
@@ -11,7 +11,7 @@ import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 import { ElCard } from 'element-plus';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberSexStatisticsList } from '#/api/mall/statistics/member';
 
 import { getSexChartOptions } from './sex-chart-options';
 
@@ -23,10 +23,10 @@ const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
 
 /** 按照性别，查询会员统计列表 */
-async function getMemberSexStatisticsList() {
+async function loadMemberSexStatisticsList() {
   loading.value = true;
   try {
-    const list = await MemberStatisticsApi.getMemberSexStatisticsList();
+    const list = await getMemberSexStatisticsList();
     const dictDataList = getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number');
     dictDataList.push({ label: '未知', value: null } as any);
     const chartData = dictDataList.map((dictData: any) => {
@@ -49,7 +49,7 @@ async function getMemberSexStatisticsList() {
 
 /** 初始化 */
 onMounted(() => {
-  getMemberSexStatisticsList();
+  loadMemberSexStatisticsList();
 });
 </script>
 
diff --git a/apps/web-ele/src/views/mall/statistics/member/modules/terminal-card.vue b/apps/web-ele/src/views/mall/statistics/member/modules/terminal-card.vue
index 624dcf25c..50c088c19 100644
--- a/apps/web-ele/src/views/mall/statistics/member/modules/terminal-card.vue
+++ b/apps/web-ele/src/views/mall/statistics/member/modules/terminal-card.vue
@@ -8,7 +8,7 @@ import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 import { ElCard } from 'element-plus';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberTerminalStatisticsList } from '#/api/mall/statistics/member';
 
 import { getTerminalChartOptions } from './terminal-chart-options';
 
@@ -20,10 +20,10 @@ const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
 
 /** 按照终端，查询会员统计列表 */
-const getMemberTerminalStatisticsList = async () => {
+const loadMemberTerminalStatisticsList = async () => {
   loading.value = true;
   try {
-    const list = await MemberStatisticsApi.getMemberTerminalStatisticsList();
+    const list = await getMemberTerminalStatisticsList();
     const dictDataList = getDictOptions('terminal', 'number');
     const chartData = dictDataList.map((dictData: any) => {
       const userCount = list.find(
@@ -43,7 +43,7 @@ const getMemberTerminalStatisticsList = async () => {
 
 /** 初始化 */
 onMounted(() => {
-  getMemberTerminalStatisticsList();
+  loadMemberTerminalStatisticsList();
 });
 </script>
 
diff --git a/apps/web-ele/src/views/mall/statistics/product/modules/rank-card.vue b/apps/web-ele/src/views/mall/statistics/product/modules/rank-card.vue
index 2c6fbca6a..0a7e34e74 100644
--- a/apps/web-ele/src/views/mall/statistics/product/modules/rank-card.vue
+++ b/apps/web-ele/src/views/mall/statistics/product/modules/rank-card.vue
@@ -11,7 +11,7 @@ import { formatDateTime } from '@vben/utils';
 import { ElCard } from 'element-plus';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as ProductStatisticsApi from '#/api/mall/statistics/product';
+import { getProductStatisticsRankPage } from '#/api/mall/statistics/product';
 import ShortcutDateRangePicker from '#/components/shortcut-date-range-picker/shortcut-date-range-picker.vue';
 
 /** 商品排行 */
@@ -104,7 +104,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page, sorts }) => {
-          return await ProductStatisticsApi.getProductStatisticsRankPage({
+          return await getProductStatisticsRankPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
diff --git a/apps/web-ele/src/views/mall/statistics/product/modules/summary-card.vue b/apps/web-ele/src/views/mall/statistics/product/modules/summary-card.vue
index 6912559f8..156aace69 100644
--- a/apps/web-ele/src/views/mall/statistics/product/modules/summary-card.vue
+++ b/apps/web-ele/src/views/mall/statistics/product/modules/summary-card.vue
@@ -21,8 +21,13 @@ import {
 import dayjs from 'dayjs';
 import { ElButton, ElCard, ElCol, ElRow } from 'element-plus';
 
-import * as ProductStatisticsApi from '#/api/mall/statistics/product';
+import {
+  exportProductStatisticsExcel,
+  getProductStatisticsAnalyse,
+  getProductStatisticsList,
+} from '#/api/mall/statistics/product';
 import ShortcutDateRangePicker from '#/components/shortcut-date-range-picker/shortcut-date-range-picker.vue';
+import { $t } from '#/locales';
 
 import { getProductSummaryChartOptions } from './summary-chart-options';
 
@@ -51,7 +56,7 @@ const calculateRelativeRate = (value?: number, reference?: number): string => {
 /** 处理日期范围变化 */
 const handleDateRangeChange = (times?: [Dayjs, Dayjs]) => {
   if (times?.length !== 2) {
-    getProductTrendData();
+    loadProductTrendData();
     return;
   }
   // 处理时间: 开始与截止在同一天的, 折线图出不来, 需要延长一天
@@ -65,29 +70,29 @@ const handleDateRangeChange = (times?: [Dayjs, Dayjs]) => {
   ];
 
   // 查询数据
-  getProductTrendData();
+  loadProductTrendData();
 };
 
 /** 处理商品状况查询 */
-const getProductTrendData = async () => {
+const loadProductTrendData = async () => {
   trendLoading.value = true;
   try {
-    await Promise.all([getProductTrendSummary(), getProductStatisticsList()]);
+    await Promise.all([loadProductTrendSummary(), loadProductStatisticsList()]);
   } finally {
     trendLoading.value = false;
   }
 };
 
 /** 查询商品状况数据统计 */
-async function getProductTrendSummary() {
-  trendSummary.value = await ProductStatisticsApi.getProductStatisticsAnalyse({
+async function loadProductTrendSummary() {
+  trendSummary.value = await getProductStatisticsAnalyse({
     times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
   });
 }
 
 /** 查询商品状况数据列表 */
-async function getProductStatisticsList() {
-  const list = await ProductStatisticsApi.getProductStatisticsList({
+async function loadProductStatisticsList() {
+  const list = await getProductStatisticsList({
     times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
   });
 
@@ -104,13 +109,11 @@ async function handleExport() {
     });
     // 发起导出
     exportLoading.value = true;
-    const data = await ProductStatisticsApi.exportProductStatisticsExcel({
+    const data = await exportProductStatisticsExcel({
       times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
     });
     // 处理下载
     downloadFileFromBlobPart({ fileName: '商品状况.xlsx', source: data });
-  } catch {
-    // 用户取消导出
   } finally {
     exportLoading.value = false;
   }
@@ -133,7 +136,7 @@ async function handleExport() {
               <template #icon>
                 <IconifyIcon icon="lucide:download" />
               </template>
-              导出
+              {{ $t('page.action.export') }}
             </ElButton>
           </ShortcutDateRangePicker>
         </div>
@@ -228,7 +231,6 @@ async function handleExport() {
           "
         />
       </ElCol>
-
       <ElCol :xl="8" :md="8" :sm="24" class="mb-4">
         <SummaryCard
           title="退款金额"
diff --git a/apps/web-ele/src/views/mall/statistics/trade/components/trade-transaction-card.vue b/apps/web-ele/src/views/mall/statistics/trade/components/trade-transaction-card.vue
deleted file mode 100644
index ec630b99d..000000000
--- a/apps/web-ele/src/views/mall/statistics/trade/components/trade-transaction-card.vue
+++ /dev/null
@@ -1,281 +0,0 @@
-<script lang="ts" setup>
-import type { EchartsUIType } from '@vben/plugins/echarts';
-
-import type { MallDataComparisonResp } from '#/api/mall/statistics/common';
-import type { MallTradeStatisticsApi } from '#/api/mall/statistics/trade';
-import type { AnalysisOverviewIconItem } from '#/views/mall/home/components/data';
-
-import { reactive, ref } from 'vue';
-
-import { confirm } from '@vben/common-ui';
-import { IconifyIcon } from '@vben/icons';
-import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
-import {
-  calculateRelativeRate,
-  downloadFileFromBlobPart,
-  fenToYuan,
-  formatDate,
-  isSameDay,
-} from '@vben/utils';
-
-import dayjs from 'dayjs';
-
-import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
-import AnalysisChartCard from '#/views/mall/home/components/analysis-chart-card.vue';
-import AnalysisOverviewIcon from '#/views/mall/home/components/analysis-overview-icon.vue';
-import ShortcutDateRangePicker from '#/views/mall/home/components/shortcut-date-range-picker.vue';
-
-const chartRef = ref<EchartsUIType>();
-const { renderEcharts } = useEcharts(chartRef);
-const overviewItems = ref<AnalysisOverviewIconItem[]>();
-const summary =
-  ref<MallDataComparisonResp<MallTradeStatisticsApi.TradeTrendSummary>>();
-const shortcutDateRangePicker = ref();
-const exportLoading = ref(false); // 导出的加载中
-const trendLoading = ref(true); // 交易状态加载中
-const loadOverview = () => {
-  overviewItems.value = [
-    {
-      icon: 'fa-solid:yen-sign',
-      title: '营业额',
-      value: Number(fenToYuan(summary?.value?.value.turnoverPrice || 0)),
-      tooltip: '商品支付金额、充值金额',
-      iconColor: 'bg-blue-100',
-      iconBgColor: 'text-blue-500',
-      prefix: '￥',
-      decimals: 2,
-      percent: calculateRelativeRate(
-        summary?.value?.value?.turnoverPrice,
-        summary?.value?.reference?.turnoverPrice,
-      ),
-    },
-    {
-      icon: 'fa-solid:shopping-cart',
-      title: '商品支付金额',
-      value: Number(fenToYuan(summary.value?.value?.orderPayPrice || 0)),
-      tooltip:
-        '用户购买商品的实际支付金额，包括微信支付、余额支付、支付宝支付、线下支付金额（拼团商品在成团之后计入，线下支付订单在后台确认支付后计入）',
-      iconColor: 'bg-purple-100',
-      iconBgColor: 'text-purple-500',
-      prefix: '￥',
-      decimals: 2,
-      percent: calculateRelativeRate(
-        summary?.value?.value?.orderPayPrice,
-        summary?.value?.reference?.orderPayPrice,
-      ),
-    },
-    {
-      icon: 'fa-solid:money-check-alt',
-      title: '充值金额',
-      value: Number(fenToYuan(summary.value?.value?.rechargePrice || 0)),
-      tooltip: '用户成功充值的金额',
-      iconColor: 'bg-yellow-100',
-      iconBgColor: 'text-yellow-500',
-      prefix: '￥',
-      decimals: 2,
-      percent: calculateRelativeRate(
-        summary?.value?.value?.rechargePrice,
-        summary?.value?.reference?.rechargePrice,
-      ),
-    },
-    {
-      icon: 'ep:warning-filled',
-      title: '支出金额',
-      value: Number(fenToYuan(summary.value?.value?.expensePrice || 0)),
-      tooltip: '余额支付金额、支付佣金金额、商品退款金额',
-      iconColor: 'bg-green-100',
-      iconBgColor: 'text-green-500',
-      prefix: '￥',
-      decimals: 2,
-      percent: calculateRelativeRate(
-        summary?.value?.value?.expensePrice,
-        summary?.value?.reference?.expensePrice,
-      ),
-    },
-    {
-      icon: 'fa-solid:wallet',
-      title: '余额支付金额',
-      value: Number(fenToYuan(summary.value?.value?.walletPayPrice || 0)),
-      tooltip: '余额支付金额、支付佣金金额、商品退款金额',
-      iconColor: 'bg-cyan-100',
-      iconBgColor: 'text-cyan-500',
-      prefix: '￥',
-      decimals: 2,
-      percent: calculateRelativeRate(
-        summary?.value?.value?.walletPayPrice,
-        summary?.value?.reference?.walletPayPrice,
-      ),
-    },
-    {
-      icon: 'fa-solid:award',
-      title: '支付佣金金额',
-      value: Number(
-        fenToYuan(summary.value?.value?.brokerageSettlementPrice || 0),
-      ),
-      tooltip: '后台给推广员支付的推广佣金，以实际支付为准',
-      iconColor: 'bg-yellow-100',
-      iconBgColor: 'text-yellow-500',
-      prefix: '￥',
-      decimals: 2,
-      percent: calculateRelativeRate(
-        summary?.value?.value?.brokerageSettlementPrice,
-        summary?.value?.reference?.brokerageSettlementPrice,
-      ),
-    },
-    {
-      icon: 'fa-solid:times-circle',
-      title: '商品退款金额',
-      value: Number(fenToYuan(summary.value?.value?.afterSaleRefundPrice || 0)),
-      tooltip: '用户成功退款的商品金额',
-      iconColor: 'bg-blue-100',
-      iconBgColor: 'text-blue-500',
-      prefix: '￥',
-      decimals: 2,
-      percent: calculateRelativeRate(
-        summary?.value?.value?.afterSaleRefundPrice,
-        summary?.value?.reference?.afterSaleRefundPrice,
-      ),
-    },
-  ];
-};
-
-/** 导出按钮操作 */
-const handleExport = async () => {
-  try {
-    // 导出的二次确认
-    await confirm('确定要导出交易状况吗？');
-    // 发起导出
-    exportLoading.value = true;
-    const times = shortcutDateRangePicker.value.times;
-    const data = await TradeStatisticsApi.exportTradeStatisticsExcel({ times });
-    downloadFileFromBlobPart({ fileName: '交易状况.xls', source: data });
-  } finally {
-    exportLoading.value = false;
-  }
-};
-
-const getTradeTrendData = async () => {
-  trendLoading.value = true;
-  // 1. 处理时间: 开始与截止在同一天的, 折线图出不来, 需要延长一天
-  const times = shortcutDateRangePicker.value.times;
-  if (isSameDay(times[0], times[1])) {
-    // 前天
-    times[0] = formatDate(dayjs(times[0]).subtract(1, 'd').toDate());
-  }
-  // 查询数据
-  await Promise.all([getTradeStatisticsAnalyse(), getTradeStatisticsList()]);
-  trendLoading.value = false;
-
-  loadOverview();
-  renderEcharts(lineChartOptions as any);
-};
-
-/** 查询交易状况数据统计 */
-const getTradeStatisticsAnalyse = async () => {
-  const times = shortcutDateRangePicker.value.times;
-  summary.value = await TradeStatisticsApi.getTradeStatisticsAnalyse({
-    times,
-  });
-};
-
-/** 查询交易状况数据列表 */
-const getTradeStatisticsList = async () => {
-  // 查询数据
-  const times = shortcutDateRangePicker.value.times;
-  const list = await TradeStatisticsApi.getTradeStatisticsList({ times });
-  // 处理数据
-  for (const item of list) {
-    item.turnoverPrice = Number(fenToYuan(item.turnoverPrice));
-    item.orderPayPrice = Number(fenToYuan(item.orderPayPrice));
-    item.rechargePrice = Number(fenToYuan(item.rechargePrice));
-    item.expensePrice = Number(fenToYuan(item.expensePrice));
-  }
-  // 更新 Echarts 数据
-  if (lineChartOptions.dataset && lineChartOptions.dataset.source) {
-    lineChartOptions.dataset.source = list;
-  }
-};
-
-/** 折线图配置 */
-const lineChartOptions = reactive({
-  dataset: {
-    dimensions: [
-      'date',
-      'turnoverPrice',
-      'orderPayPrice',
-      'rechargePrice',
-      'expensePrice',
-    ],
-    source: [] as MallTradeStatisticsApi.TradeTrendSummary[],
-  },
-  grid: {
-    left: 20,
-    right: 20,
-    bottom: 20,
-    top: 80,
-    containLabel: true,
-  },
-  legend: {
-    top: 50,
-  },
-  series: [
-    { name: '营业额', type: 'line', smooth: true },
-    { name: '商品支付金额', type: 'line', smooth: true },
-    { name: '充值金额', type: 'line', smooth: true },
-    { name: '支出金额', type: 'line', smooth: true },
-  ],
-  toolbox: {
-    feature: {
-      // 数据区域缩放
-      dataZoom: {
-        yAxisIndex: false, // Y轴不缩放
-      },
-      brush: {
-        type: ['lineX', 'clear'] as const, // 区域缩放按钮、还原按钮
-      },
-      saveAsImage: { show: true, name: '交易状况' }, // 保存为图片
-    },
-  },
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      type: 'cross',
-    },
-    padding: [5, 10],
-  },
-  xAxis: {
-    type: 'category' as const,
-    boundaryGap: false,
-    axisTick: {
-      show: false,
-    },
-  },
-  yAxis: {
-    axisTick: {
-      show: false,
-    },
-  },
-});
-</script>
-<template>
-  <AnalysisChartCard title="交易状况">
-    <template #header-suffix>
-      <!-- 查询条件 -->
-      <ShortcutDateRangePicker
-        ref="shortcutDateRangePicker"
-        @change="getTradeTrendData"
-      >
-        <el-button
-          class="ml-4"
-          @click="handleExport"
-          :loading="exportLoading"
-          v-access:code="['statistics:trade:export']"
-        >
-          <IconifyIcon icon="ep:download" class="mr-1" />导出
-        </el-button>
-      </ShortcutDateRangePicker>
-    </template>
-    <AnalysisOverviewIcon v-model:model-value="overviewItems" />
-    <EchartsUI height="500px" ref="chartRef" />
-  </AnalysisChartCard>
-</template>
diff --git a/apps/web-ele/src/views/mall/statistics/trade/index.vue b/apps/web-ele/src/views/mall/statistics/trade/index.vue
index 4aae9367d..334c95b95 100644
--- a/apps/web-ele/src/views/mall/statistics/trade/index.vue
+++ b/apps/web-ele/src/views/mall/statistics/trade/index.vue
@@ -1,93 +1,120 @@
 <script lang="ts" setup>
-import type { MallDataComparisonResp } from '#/api/mall/statistics/common';
+import type { DataComparisonRespVO } from '#/api/mall/statistics/common';
 import type { MallTradeStatisticsApi } from '#/api/mall/statistics/trade';
-import type { AnalysisOverviewTradeItem } from '#/views/mall/home/components/data';
 
 import { onMounted, ref } from 'vue';
 
-import { DocAlert, Page } from '@vben/common-ui';
-import { calculateRelativeRate, fenToYuan } from '@vben/utils';
+import { DocAlert, Page, StatisticCard } from '@vben/common-ui';
+import { fenToYuan } from '@vben/utils';
 
-import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
-import analysisTradeOverview from '#/views/mall/home/components/analysis-trade-overview.vue';
+import { ElCol, ElRow } from 'element-plus';
 
-import TradeTransactionCard from './components/trade-transaction-card.vue';
+import { getTradeStatisticsSummary } from '#/api/mall/statistics/trade';
 
-const overviewItems = ref<AnalysisOverviewTradeItem[]>();
+import TradeTrendCard from './modules/trend-card.vue';
+
+/** 交易统计 */
+defineOptions({ name: 'TradeStatistics' });
+
+const loading = ref(true); // 加载中
 const summary =
-  ref<MallDataComparisonResp<MallTradeStatisticsApi.TradeSummary>>();
-const loadOverview = () => {
-  overviewItems.value = [
-    {
-      title: '昨日订单数量',
-      value: summary.value?.value?.yesterdayOrderCount || 0,
-      tooltip: '昨日订单数量',
-      percent: calculateRelativeRate(
-        summary?.value?.value?.yesterdayOrderCount,
-        summary.value?.reference?.yesterdayOrderCount,
-      ),
-    },
-    {
-      title: '本月订单数量',
-      value: summary.value?.value?.monthOrderCount || 0,
-      tooltip: '本月订单数量',
-      percent: calculateRelativeRate(
-        summary?.value?.value?.monthOrderCount,
-        summary.value?.reference?.monthOrderCount,
-      ),
-    },
-    {
-      title: '昨日支付金额',
-      value: Number(fenToYuan(summary.value?.value?.yesterdayPayPrice || 0)),
-      tooltip: '昨日支付金额',
-      prefix: '￥',
-      decimals: 2,
-      percent: calculateRelativeRate(
-        summary?.value?.value?.yesterdayPayPrice,
-        summary.value?.reference?.yesterdayPayPrice,
-      ),
-    },
-    {
-      title: '本月支付金额',
-      value: summary.value?.value?.monthPayPrice || 0,
-      tooltip: '本月支付金额',
-      prefix: '￥',
-      decimals: 2,
-      percent: calculateRelativeRate(
-        summary?.value?.value?.monthPayPrice,
-        summary.value?.reference?.monthPayPrice,
-      ),
-    },
-  ];
-};
+  ref<DataComparisonRespVO<MallTradeStatisticsApi.TradeSummary>>(); // 交易统计数据
+
+/** 计算环比百分比 */
+function calculateRelativeRate(value?: number, reference?: number): string {
+  const refValue = Number(reference || 0);
+  const curValue = Number(value || 0);
+  if (!refValue || refValue === 0) {
+    return '0.00';
+  }
+  return (((curValue - refValue) / refValue) * 100).toFixed(2);
+}
 
 /** 查询交易统计 */
-const getTradeStatisticsSummary = async () => {
-  summary.value = await TradeStatisticsApi.getTradeStatisticsSummary();
-};
+async function loadTradeStatisticsSummary() {
+  summary.value = await getTradeStatisticsSummary();
+}
 
 /** 初始化 */
 onMounted(async () => {
-  await getTradeStatisticsSummary();
-  loadOverview();
+  loading.value = true;
+  await loadTradeStatisticsSummary();
+  loading.value = false;
 });
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【统计】会员、商品、交易统计"
-      url="https://doc.iocoder.cn/mall/statistics/"
-    />
-    <!-- 统计值 -->
-    <div class="mb-4 mt-5 w-full md:flex">
-      <analysisTradeOverview
-        v-model:model-value="overviewItems"
-        class="mt-5 md:mr-4 md:mt-0 md:w-full"
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【统计】会员、商品、交易统计"
+        url="https://doc.iocoder.cn/mall/statistics/"
       />
-    </div>
-    <div class="mb-4 mt-5 w-full md:flex">
-      <TradeTransactionCard class="mt-5 md:mr-4 md:mt-0 md:w-full" />
+    </template>
+
+    <!-- 交易概览卡片 -->
+    <div class="flex flex-col gap-4">
+      <ElRow :gutter="16">
+        <ElCol :sm="6" :xs="12">
+          <StatisticCard
+            tooltip="昨日订单数量"
+            title="昨日订单数量"
+            :value="summary?.value?.yesterdayOrderCount || 0"
+            :percent="
+              calculateRelativeRate(
+                summary?.value?.yesterdayOrderCount,
+                summary?.reference?.yesterdayOrderCount,
+              )
+            "
+          />
+        </ElCol>
+        <ElCol :sm="6" :xs="12">
+          <StatisticCard
+            tooltip="本月订单数量"
+            title="本月订单数量"
+            :value="summary?.value?.monthOrderCount || 0"
+            :percent="
+              calculateRelativeRate(
+                summary?.value?.monthOrderCount,
+                summary?.reference?.monthOrderCount,
+              )
+            "
+          />
+        </ElCol>
+        <ElCol :sm="6" :xs="12">
+          <StatisticCard
+            tooltip="昨日支付金额"
+            title="昨日支付金额"
+            prefix="￥"
+            :decimals="2"
+            :value="Number(fenToYuan(summary?.value?.yesterdayPayPrice || 0))"
+            :percent="
+              calculateRelativeRate(
+                summary?.value?.yesterdayPayPrice,
+                summary?.reference?.yesterdayPayPrice,
+              )
+            "
+          />
+        </ElCol>
+        <ElCol :sm="6" :xs="12">
+          <StatisticCard
+            tooltip="本月支付金额"
+            title="本月支付金额"
+            prefix="￥"
+            :decimals="2"
+            :value="Number(fenToYuan(summary?.value?.monthPayPrice || 0))"
+            :percent="
+              calculateRelativeRate(
+                summary?.value?.monthPayPrice,
+                summary?.reference?.monthPayPrice,
+              )
+            "
+          />
+        </ElCol>
+      </ElRow>
+
+      <!-- 交易趋势 -->
+      <TradeTrendCard />
     </div>
   </Page>
 </template>
diff --git a/apps/web-ele/src/views/mall/statistics/trade/modules/trend-card.vue b/apps/web-ele/src/views/mall/statistics/trade/modules/trend-card.vue
new file mode 100644
index 000000000..3173e0bdd
--- /dev/null
+++ b/apps/web-ele/src/views/mall/statistics/trade/modules/trend-card.vue
@@ -0,0 +1,292 @@
+<script lang="ts" setup>
+import type { Dayjs } from 'dayjs';
+
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { DataComparisonRespVO } from '#/api/mall/statistics/common';
+import type { MallTradeStatisticsApi } from '#/api/mall/statistics/trade';
+
+import { ref } from 'vue';
+
+import { confirm, SummaryCard } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import {
+  downloadFileFromBlobPart,
+  fenToYuan,
+  formatDateTime,
+  isSameDay,
+} from '@vben/utils';
+
+import dayjs from 'dayjs';
+import { ElButton, ElCard, ElCol, ElRow } from 'element-plus';
+
+import {
+  exportTradeStatisticsExcel,
+  getTradeStatisticsAnalyse,
+  getTradeStatisticsList,
+} from '#/api/mall/statistics/trade';
+import ShortcutDateRangePicker from '#/components/shortcut-date-range-picker/shortcut-date-range-picker.vue';
+
+import { getTradeTrendChartOptions } from './trend-chart-options';
+
+/** 交易趋势 */
+defineOptions({ name: 'TradeTrendCard' });
+
+const trendLoading = ref(true); // 交易状态加载中
+const exportLoading = ref(false); // 导出的加载中
+const trendSummary =
+  ref<DataComparisonRespVO<MallTradeStatisticsApi.TradeTrendSummary>>(); // 交易状况统计数据
+const searchTimes = ref<string[]>([]);
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+/** 计算环比百分比 */
+const calculateRelativeRate = (value?: number, reference?: number): string => {
+  const refValue = Number(reference || 0);
+  const curValue = Number(value || 0);
+  if (!refValue || refValue === 0) {
+    return '0.00';
+  }
+  return (((curValue - refValue) / refValue) * 100).toFixed(2);
+};
+
+/** 处理日期范围变化 */
+const handleDateRangeChange = (times?: [Dayjs, Dayjs]) => {
+  if (times?.length !== 2) {
+    loadTradeTrendData();
+    return;
+  }
+  // 处理时间: 开始与截止在同一天的, 折线图出不来, 需要延长一天
+  let adjustedTimes = times;
+  if (isSameDay(times[0], times[1])) {
+    adjustedTimes = [dayjs(times[0]).subtract(1, 'd'), times[1]];
+  }
+  searchTimes.value = [
+    formatDateTime(adjustedTimes[0]) as string,
+    formatDateTime(adjustedTimes[1]) as string,
+  ];
+
+  // 查询数据
+  loadTradeTrendData();
+};
+
+/** 处理交易状况查询 */
+async function loadTradeTrendData() {
+  trendLoading.value = true;
+  try {
+    await Promise.all([
+      loadTradeStatisticsAnalyse(),
+      loadTradeStatisticsList(),
+    ]);
+  } finally {
+    trendLoading.value = false;
+  }
+}
+
+/** 查询交易状况数据统计 */
+async function loadTradeStatisticsAnalyse() {
+  trendSummary.value = await getTradeStatisticsAnalyse({
+    times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
+  });
+}
+
+/** 查询交易状况数据列表 */
+async function loadTradeStatisticsList() {
+  const list = await getTradeStatisticsList({
+    times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
+  });
+
+  // 渲染图表
+  await renderEcharts(getTradeTrendChartOptions(list));
+}
+
+/** 导出按钮操作 */
+async function handleExport() {
+  try {
+    // 导出的二次确认
+    await confirm({
+      content: '确认导出交易状况数据吗？',
+    });
+    // 发起导出
+    exportLoading.value = true;
+    const data = await exportTradeStatisticsExcel({
+      times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
+    });
+    // 处理下载
+    downloadFileFromBlobPart({ fileName: '交易状况.xlsx', source: data });
+  } finally {
+    exportLoading.value = false;
+  }
+}
+</script>
+
+<template>
+  <ElCard :bordered="false" shadow="never" class="h-full">
+    <template #header>
+      <div class="flex items-center justify-between">
+        <span class="text-base font-medium">交易状况</span>
+        <!-- 查询条件 -->
+        <div class="flex items-center gap-2">
+          <ShortcutDateRangePicker @change="handleDateRangeChange">
+            <ElButton
+              class="ml-4"
+              @click="handleExport"
+              :loading="exportLoading"
+            >
+              <template #icon>
+                <IconifyIcon icon="lucide:download" />
+              </template>
+              导出
+            </ElButton>
+          </ShortcutDateRangePicker>
+        </div>
+      </div>
+    </template>
+
+    <!-- 统计值 -->
+    <ElRow :gutter="16" class="mb-4">
+      <ElCol :md="6" :sm="12" :xs="24" class="mb-4">
+        <SummaryCard
+          title="营业额"
+          tooltip="商品支付金额、充值金额"
+          icon="lucide:banknote"
+          icon-color="text-blue-500"
+          icon-bg-color="bg-blue-100"
+          prefix="￥"
+          :decimals="2"
+          :value="Number(fenToYuan(trendSummary?.value?.turnoverPrice || 0))"
+          :percent="
+            calculateRelativeRate(
+              trendSummary?.value?.turnoverPrice,
+              trendSummary?.reference?.turnoverPrice,
+            )
+          "
+        />
+      </ElCol>
+
+      <ElCol :md="6" :sm="12" :xs="24" class="mb-4">
+        <SummaryCard
+          title="商品支付金额"
+          tooltip="用户购买商品的实际支付金额，包括微信支付、余额支付、支付宝支付、线下支付金额（拼团商品在成团之后计入，线下支付订单在后台确认支付后计入）"
+          icon="lucide:shopping-cart"
+          icon-color="text-purple-500"
+          icon-bg-color="bg-purple-100"
+          prefix="￥"
+          :decimals="2"
+          :value="Number(fenToYuan(trendSummary?.value?.orderPayPrice || 0))"
+          :percent="
+            calculateRelativeRate(
+              trendSummary?.value?.orderPayPrice,
+              trendSummary?.reference?.orderPayPrice,
+            )
+          "
+        />
+      </ElCol>
+
+      <ElCol :md="6" :sm="12" :xs="24" class="mb-4">
+        <SummaryCard
+          title="充值金额"
+          tooltip="用户成功充值的金额"
+          icon="lucide:credit-card"
+          icon-color="text-yellow-500"
+          icon-bg-color="bg-yellow-100"
+          prefix="￥"
+          :decimals="2"
+          :value="Number(fenToYuan(trendSummary?.value?.rechargePrice || 0))"
+          :percent="
+            calculateRelativeRate(
+              trendSummary?.value?.rechargePrice,
+              trendSummary?.reference?.rechargePrice,
+            )
+          "
+        />
+      </ElCol>
+      <ElCol :md="6" :sm="12" :xs="24" class="mb-4">
+        <SummaryCard
+          title="支出金额"
+          tooltip="余额支付金额、支付佣金金额、商品退款金额"
+          icon="lucide:trending-down"
+          icon-color="text-green-500"
+          icon-bg-color="bg-green-100"
+          prefix="￥"
+          :decimals="2"
+          :value="Number(fenToYuan(trendSummary?.value?.expensePrice || 0))"
+          :percent="
+            calculateRelativeRate(
+              trendSummary?.value?.expensePrice,
+              trendSummary?.reference?.expensePrice,
+            )
+          "
+        />
+      </ElCol>
+      <ElCol :md="6" :sm="12" :xs="24" class="mb-4">
+        <SummaryCard
+          title="余额支付金额"
+          tooltip="用户下单时使用余额实际支付的金额"
+          icon="lucide:wallet"
+          icon-color="text-cyan-500"
+          icon-bg-color="bg-cyan-100"
+          prefix="￥"
+          :decimals="2"
+          :value="Number(fenToYuan(trendSummary?.value?.walletPayPrice || 0))"
+          :percent="
+            calculateRelativeRate(
+              trendSummary?.value?.walletPayPrice,
+              trendSummary?.reference?.walletPayPrice,
+            )
+          "
+        />
+      </ElCol>
+      <ElCol :md="6" :sm="12" :xs="24" class="mb-4">
+        <SummaryCard
+          title="支付佣金金额"
+          tooltip="后台给推广员支付的推广佣金，以实际支付为准"
+          icon="lucide:gift"
+          icon-color="text-orange-500"
+          icon-bg-color="bg-orange-100"
+          prefix="￥"
+          :decimals="2"
+          :value="
+            Number(
+              fenToYuan(trendSummary?.value?.brokerageSettlementPrice || 0),
+            )
+          "
+          :percent="
+            calculateRelativeRate(
+              trendSummary?.value?.brokerageSettlementPrice,
+              trendSummary?.reference?.brokerageSettlementPrice,
+            )
+          "
+        />
+      </ElCol>
+
+      <ElCol :md="6" :sm="12" :xs="24" class="mb-4">
+        <SummaryCard
+          title="商品退款金额"
+          tooltip="用户成功退款的商品金额"
+          icon="lucide:undo-2"
+          icon-color="text-red-500"
+          icon-bg-color="bg-red-100"
+          prefix="￥"
+          :decimals="2"
+          :value="
+            Number(fenToYuan(trendSummary?.value?.afterSaleRefundPrice || 0))
+          "
+          :percent="
+            calculateRelativeRate(
+              trendSummary?.value?.afterSaleRefundPrice,
+              trendSummary?.reference?.afterSaleRefundPrice,
+            )
+          "
+        />
+      </ElCol>
+    </ElRow>
+
+    <!-- 折线图 -->
+    <div v-loading="trendLoading">
+      <EchartsUI ref="chartRef" />
+    </div>
+  </ElCard>
+</template>
diff --git a/apps/web-ele/src/views/mall/statistics/trade/modules/trend-chart-options.ts b/apps/web-ele/src/views/mall/statistics/trade/modules/trend-chart-options.ts
new file mode 100644
index 000000000..5c85460fb
--- /dev/null
+++ b/apps/web-ele/src/views/mall/statistics/trade/modules/trend-chart-options.ts
@@ -0,0 +1,124 @@
+import type { MallTradeStatisticsApi } from '#/api/mall/statistics/trade';
+
+import { fenToYuan } from '@vben/utils';
+
+/** 交易趋势折线图配置 */
+export function getTradeTrendChartOptions(
+  data: MallTradeStatisticsApi.TradeTrendSummary[],
+): any {
+  // 处理数据：将分转换为元
+  const processedData = data.map((item) => ({
+    ...item,
+    turnoverPrice: Number(fenToYuan(item.turnoverPrice)),
+    orderPayPrice: Number(fenToYuan(item.orderPayPrice)),
+    rechargePrice: Number(fenToYuan(item.rechargePrice)),
+    expensePrice: Number(fenToYuan(item.expensePrice)),
+  }));
+
+  return {
+    dataset: {
+      dimensions: [
+        'date',
+        'turnoverPrice',
+        'orderPayPrice',
+        'rechargePrice',
+        'expensePrice',
+      ],
+      source: processedData,
+    },
+    grid: {
+      left: 20,
+      right: 20,
+      bottom: 20,
+      top: 80,
+      containLabel: true,
+    },
+    legend: {
+      top: 50,
+    },
+    series: [
+      {
+        name: '营业额',
+        type: 'line',
+        smooth: true,
+        itemStyle: { color: '#1890FF' },
+      },
+      {
+        name: '商品支付金额',
+        type: 'line',
+        smooth: true,
+        itemStyle: { color: '#722ED1' },
+      },
+      {
+        name: '充值金额',
+        type: 'line',
+        smooth: true,
+        itemStyle: { color: '#FAAD14' },
+      },
+      {
+        name: '支出金额',
+        type: 'line',
+        smooth: true,
+        itemStyle: { color: '#52C41A' },
+      },
+    ],
+    toolbox: {
+      feature: {
+        // 数据区域缩放
+        dataZoom: {
+          yAxisIndex: false, // Y轴不缩放
+        },
+        brush: {
+          type: ['lineX', 'clear'], // 区域缩放按钮、还原按钮
+        },
+        saveAsImage: {
+          show: true,
+          name: '交易状况',
+        }, // 保存为图片
+      },
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+      },
+      padding: [5, 10],
+      formatter(params: any) {
+        let result = `<div><strong>${params[0].data.time}</strong></div>`;
+        params.forEach((item: any) => {
+          result += `<div style="margin: 4px 0;">
+            <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${item.color};"></span>
+            ${item.seriesName}: ￥${item.data[item.dimensionNames[item.encode.y[0]]]}
+          </div>`;
+        });
+        return result;
+      },
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      axisTick: {
+        show: false,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        formatter: '￥{value}',
+        color: '#7F8B9C',
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#F5F7F9',
+        },
+      },
+    },
+  };
+}
diff --git a/apps/web-ele/src/views/mall/trade/afterSale/data.ts b/apps/web-ele/src/views/mall/trade/afterSale/data.ts
index 2f3caa5b5..a995b0b96 100644
--- a/apps/web-ele/src/views/mall/trade/afterSale/data.ts
+++ b/apps/web-ele/src/views/mall/trade/afterSale/data.ts
@@ -146,7 +146,7 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
       width: 100,
       align: 'center',
       cellRender: {
-        name: 'CellDictTag',
+        name: 'CellDict',
         props: {
           dictType: DICT_TYPE.TRADE_AFTER_SALE_STATUS,
         },
@@ -158,7 +158,7 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
       width: 100,
       align: 'center',
       cellRender: {
-        name: 'CellDictTag',
+        name: 'CellDict',
         props: {
           dictType: DICT_TYPE.TRADE_AFTER_SALE_WAY,
         },
diff --git a/apps/web-ele/src/views/mall/trade/afterSale/detail/index.vue b/apps/web-ele/src/views/mall/trade/afterSale/detail/index.vue
index 6d26f76c8..c5230f2c6 100644
--- a/apps/web-ele/src/views/mall/trade/afterSale/detail/index.vue
+++ b/apps/web-ele/src/views/mall/trade/afterSale/detail/index.vue
@@ -211,7 +211,7 @@ async function handleRefund() {
 /** 返回列表页 */
 function handleBack() {
   tabs.closeCurrentTab();
-  router.push('/mall/trade/afterSale');
+  router.push({ name: 'TradeAfterSale' });
 }
 
 /** 初始化 */
diff --git a/apps/web-ele/src/views/mall/trade/afterSale/index.vue b/apps/web-ele/src/views/mall/trade/afterSale/index.vue
index 07e776c77..8afaae748 100644
--- a/apps/web-ele/src/views/mall/trade/afterSale/index.vue
+++ b/apps/web-ele/src/views/mall/trade/afterSale/index.vue
@@ -98,10 +98,10 @@ onMounted(() => {
     </template>
 
     <Grid>
-      <template #top>
+      <template #toolbar-actions>
         <ElTabs
           v-model="statusTab"
-          class="-mt-11"
+          class="w-full"
           @tab-change="handleChangeStatus"
         >
           <ElTabs.TabPane
@@ -155,8 +155,3 @@ onMounted(() => {
     </Grid>
   </Page>
 </template>
-<style scoped>
-:deep(.vxe-toolbar div) {
-  z-index: 1;
-}
-</style>
diff --git a/apps/web-ele/src/views/mall/trade/config/data.ts b/apps/web-ele/src/views/mall/trade/config/data.ts
index f933704cc..6e91a597f 100644
--- a/apps/web-ele/src/views/mall/trade/config/data.ts
+++ b/apps/web-ele/src/views/mall/trade/config/data.ts
@@ -56,7 +56,6 @@ export const schema: VbenFormSchema[] = [
       show: (values) => values.type === 'afterSale',
     },
   },
-  // TODO @xingyu：【缺陷】貌似 switch 在 schema 里报错了。直接。。。
   {
     fieldName: 'deliveryExpressFreeEnabled',
     label: '启用包邮',
diff --git a/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/index.vue b/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/index.vue
index b81832ded..878f38920 100644
--- a/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/index.vue
+++ b/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/index.vue
@@ -2,21 +2,14 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallOrderApi } from '#/api/mall/trade/order';
 
-import { h, ref } from 'vue';
+import { ref } from 'vue';
 
-import { Page, prompt } from '@vben/common-ui';
+import { Page, prompt, SummaryCard } from '@vben/common-ui';
 import { DeliveryTypeEnum } from '@vben/constants';
 import { $t } from '@vben/locales';
 import { fenToYuan } from '@vben/utils';
 
-import {
-  ElCard,
-  ElImage,
-  ElInput,
-  ElLoading,
-  ElMessage,
-  ElTag,
-} from 'element-plus';
+import { ElCard, ElImage, ElLoading, ElMessage, ElTag } from 'element-plus';
 
 import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -24,7 +17,6 @@ import {
   getOrderSummary,
   pickUpOrderByVerifyCode,
 } from '#/api/mall/trade/order';
-import { SummaryCard } from '#/components/summary-card';
 
 import { useGridColumns, useGridFormSchema } from './data';
 
@@ -45,36 +37,41 @@ async function getOrderSum() {
 /** 核销订单 */
 async function handlePickup(pickUpVerifyCode?: string) {
   // 如果没有传核销码，则弹窗输入
-  // TODO @xingyu：这个貌似不太行，帮忙看看~
-  if (!pickUpVerifyCode) {
-    await prompt({
-      component: () => {
-        return h(ElInput, {});
-      },
-      content: '请输入核销码',
+  if (pickUpVerifyCode) {
+    // 执行核销
+    const loadingInstance = ElLoading.service({
+      text: '订单核销中 ...',
+    });
+    try {
+      await pickUpOrderByVerifyCode(pickUpVerifyCode);
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+      handleRefresh();
+    } finally {
+      loadingInstance.close();
+    }
+  } else {
+    prompt<string>({
+      componentProps: { placeholder: '输入核销码' },
+      content: '输入核销码',
       title: '核销订单',
-      modelPropName: 'value',
-    }).then(async (val) => {
-      if (val) {
-        pickUpVerifyCode = val;
+      icon: 'question',
+      overlayBlur: 3,
+    }).then(async (res) => {
+      if (res) {
+        // 执行核销
+        const loadingInstance = ElLoading.service({
+          text: '订单核销中 ...',
+        });
+        try {
+          await pickUpOrderByVerifyCode(res);
+          ElMessage.success($t('ui.actionMessage.operationSuccess'));
+          handleRefresh();
+        } finally {
+          loadingInstance.close();
+        }
       }
     });
   }
-  if (!pickUpVerifyCode) {
-    return;
-  }
-
-  // 执行核销
-  const loadingInstance = ElLoading.service({
-    text: '订单核销中 ...',
-  });
-  try {
-    await pickUpOrderByVerifyCode(pickUpVerifyCode);
-    ElMessage.success($t('ui.actionMessage.operationSuccess'));
-    handleRefresh();
-  } finally {
-    loadingInstance.close();
-  }
 }
 
 const port = ref('');
diff --git a/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/data.ts b/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/data.ts
index cb193e7df..19922a003 100644
--- a/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/data.ts
+++ b/apps/web-ele/src/views/mall/trade/delivery/pickUpStore/data.ts
@@ -65,7 +65,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ApiTreeSelect',
       rules: 'required',
       componentProps: {
-        api: () => getAreaTree(),
+        api: getAreaTree,
         labelField: 'name',
         valueField: 'id',
         childrenField: 'children',
@@ -147,7 +147,7 @@ export function useBindFormSchema(): VbenFormSchema[] {
       label: '门店店员',
       rules: 'required',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         multiple: true,
diff --git a/apps/web-ele/src/views/mall/trade/order/data.ts b/apps/web-ele/src/views/mall/trade/order/data.ts
index 098e17d32..de16a0752 100644
--- a/apps/web-ele/src/views/mall/trade/order/data.ts
+++ b/apps/web-ele/src/views/mall/trade/order/data.ts
@@ -74,7 +74,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '快递公司',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleDeliveryExpressList(),
+        api: getSimpleDeliveryExpressList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择快递公司',
@@ -90,7 +90,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '自提门店',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleDeliveryPickUpStoreList(),
+        api: getSimpleDeliveryPickUpStoreList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择自提门店',
@@ -371,7 +371,7 @@ export function useAddressFormSchema(): VbenFormSchema[] {
       label: '所在地',
       component: 'ApiTreeSelect',
       componentProps: {
-        api: () => getAreaTree(),
+        api: getAreaTree,
         labelField: 'name',
         valueField: 'id',
         childrenField: 'children',
@@ -422,7 +422,7 @@ export function useDeliveryFormSchema(): VbenFormSchema[] {
       label: '物流公司',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleDeliveryExpressList(),
+        api: getSimpleDeliveryExpressList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择物流公司',
diff --git a/apps/web-ele/src/views/mall/trade/order/detail/index.vue b/apps/web-ele/src/views/mall/trade/order/detail/index.vue
index 0cf63f387..dbae802ef 100644
--- a/apps/web-ele/src/views/mall/trade/order/detail/index.vue
+++ b/apps/web-ele/src/views/mall/trade/order/detail/index.vue
@@ -235,7 +235,7 @@ const handlePickUp = async () => {
 /** 返回列表页 */
 function handleBack() {
   tabs.closeCurrentTab();
-  router.push('/mall/trade/order');
+  router.push({ name: 'TradeOrder' });
 }
 
 /** 初始化 */
diff --git a/apps/web-ele/src/views/member/user/data.ts b/apps/web-ele/src/views/member/user/data.ts
index b83f1d425..a9bf7b0fd 100644
--- a/apps/web-ele/src/views/member/user/data.ts
+++ b/apps/web-ele/src/views/member/user/data.ts
@@ -86,7 +86,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '所在地',
       component: 'ApiTreeSelect',
       componentProps: {
-        api: () => getAreaTree(),
+        api: getAreaTree,
         labelField: 'name',
         valueField: 'id',
         childrenField: 'children',
@@ -98,7 +98,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '用户标签',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleTagList(),
+        api: getSimpleTagList,
         labelField: 'name',
         valueField: 'id',
         multiple: true,
@@ -110,7 +110,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '用户分组',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleGroupList(),
+        api: getSimpleGroupList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择用户分组',
@@ -171,7 +171,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '用户标签',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleTagList(),
+        api: getSimpleTagList,
         labelField: 'name',
         valueField: 'id',
         multiple: true,
@@ -184,7 +184,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '用户等级',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleLevelList(),
+        api: getSimpleLevelList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择用户等级',
@@ -196,7 +196,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '用户分组',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleGroupList(),
+        api: getSimpleGroupList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择用户分组',
@@ -325,7 +325,7 @@ export function useLevelFormSchema(): VbenFormSchema[] {
       label: '用户等级',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleLevelList(),
+        api: getSimpleLevelList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择用户等级',
diff --git a/apps/web-ele/src/views/member/user/detail/modules/account-info.vue b/apps/web-ele/src/views/member/user/detail/modules/account-info.vue
index 597668090..f95cccad4 100644
--- a/apps/web-ele/src/views/member/user/detail/modules/account-info.vue
+++ b/apps/web-ele/src/views/member/user/detail/modules/account-info.vue
@@ -8,7 +8,7 @@ import { ElCard } from 'element-plus';
 
 import { useDescription } from '#/components/description';
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     mode?: 'kefu' | 'member';
     user: MemberUserApi.User;
@@ -20,49 +20,44 @@ withDefaults(
 );
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: false,
-    column: 2,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  border: false,
+  column: props.mode === 'member' ? 2 : 1,
+  labelWidth: 140,
   schema: [
     {
       field: 'levelName',
       label: '等级',
-      content: (data) => data.levelName || '-',
+      render: (val) => val || '-',
     },
     {
       field: 'experience',
       label: '成长值',
-      content: (data) => data.experience || 0,
+      render: (val) => val || 0,
     },
     {
       field: 'point',
       label: '当前积分',
-      content: (data) => data.point || 0,
+      render: (val) => val || 0,
     },
     {
       field: 'totalPoint',
       label: '总积分',
-      content: (data) => data.totalPoint || 0,
+      render: (val) => val || 0,
     },
     {
       field: 'balance',
       label: '当前余额',
-      content: (data) => fenToYuan(data.balance || 0),
+      render: (val) => fenToYuan(val || 0),
     },
     {
       field: 'totalExpense',
       label: '支出金额',
-      content: (data) => fenToYuan(data.totalExpense || 0),
+      render: (val) => fenToYuan(val || 0),
     },
     {
       field: 'totalRecharge',
       label: '充值金额',
-      content: (data) => fenToYuan(data.totalRecharge || 0),
+      render: (val) => fenToYuan(val || 0),
     },
   ],
 });
@@ -77,7 +72,6 @@ const [Descriptions] = useDescription({
       <slot name="extra"></slot>
     </template>
     <Descriptions
-      :column="mode === 'member' ? 2 : 1"
       :data="{
         ...user,
         ...wallet,
diff --git a/apps/web-ele/src/views/member/user/detail/modules/basic-info.vue b/apps/web-ele/src/views/member/user/detail/modules/basic-info.vue
index b423a1999..55f1e0d9c 100644
--- a/apps/web-ele/src/views/member/user/detail/modules/basic-info.vue
+++ b/apps/web-ele/src/views/member/user/detail/modules/basic-info.vue
@@ -11,7 +11,7 @@ import { ElAvatar, ElCard, ElCol, ElRow } from 'element-plus';
 import { useDescription } from '#/components/description';
 import { DictTag } from '#/components/dict-tag';
 
-withDefaults(
+const props = withDefaults(
   defineProps<{ mode?: 'kefu' | 'member'; user: MemberUserApi.User }>(),
   {
     mode: 'member',
@@ -19,14 +19,9 @@ withDefaults(
 );
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: false,
-    column: 2,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  border: false,
+  column: props.mode === 'member' ? 2 : 1,
+  labelWidth: 140,
   schema: [
     {
       field: 'name',
@@ -43,10 +38,10 @@ const [Descriptions] = useDescription({
     {
       field: 'sex',
       label: '性别',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.SYSTEM_USER_SEX,
-          value: data.sex,
+          value: val,
         }),
     },
     {
@@ -60,17 +55,17 @@ const [Descriptions] = useDescription({
     {
       field: 'birthday',
       label: '生日',
-      content: (data) => formatDate(data.birthday)?.toString() || '-',
+      render: (val) => formatDate(val)?.toString() || '-',
     },
     {
       field: 'createTime',
       label: '注册时间',
-      content: (data) => formatDate(data.createTime)?.toString() || '-',
+      render: (val) => formatDate(val)?.toString() || '-',
     },
     {
       field: 'loginDate',
       label: '最后登录时间',
-      content: (data) => formatDate(data.loginDate)?.toString() || '-',
+      render: (val) => formatDate(val)?.toString() || '-',
     },
   ],
 });
@@ -89,12 +84,12 @@ const [Descriptions] = useDescription({
         <ElAvatar :size="180" shape="square" :src="user.avatar" />
       </ElCol>
       <ElCol :span="18">
-        <Descriptions :column="2" :data="user" />
+        <Descriptions :data="user" />
       </ElCol>
     </ElRow>
     <template v-else-if="mode === 'kefu'">
       <ElAvatar :size="140" shape="square" :src="user.avatar" />
-      <Descriptions :column="1" :data="user" />
+      <Descriptions :data="user" />
     </template>
   </ElCard>
 </template>
diff --git a/apps/web-ele/src/views/member/user/detail/modules/user-order-list.vue b/apps/web-ele/src/views/member/user/detail/modules/user-order-list.vue
index e19da013f..c00784265 100644
--- a/apps/web-ele/src/views/member/user/detail/modules/user-order-list.vue
+++ b/apps/web-ele/src/views/member/user/detail/modules/user-order-list.vue
@@ -104,7 +104,7 @@ const [Grid] = useVbenVxeGrid({
         component: 'ApiSelect',
         componentProps: {
           clearable: true,
-          api: () => getSimpleDeliveryExpressList(),
+          api: getSimpleDeliveryExpressList,
           labelField: 'name',
           valueField: 'id',
           placeholder: '全部',
@@ -120,7 +120,7 @@ const [Grid] = useVbenVxeGrid({
         label: '自提门店',
         component: 'ApiSelect',
         componentProps: {
-          api: () => getSimpleDeliveryPickUpStoreList(),
+          api: getSimpleDeliveryPickUpStoreList,
           labelField: 'name',
           valueField: 'id',
         },
diff --git a/apps/web-ele/src/views/mp/account/data.ts b/apps/web-ele/src/views/mp/account/data.ts
new file mode 100644
index 000000000..d52015355
--- /dev/null
+++ b/apps/web-ele/src/views/mp/account/data.ts
@@ -0,0 +1,143 @@
+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: '请输入消息加解密密钥',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 搜索表单配置 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名称',
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeGridPropTypes.Columns {
+  return [
+    {
+      title: '名称',
+      field: 'name',
+      minWidth: 150,
+    },
+    {
+      title: '微信号',
+      field: 'account',
+      minWidth: 180,
+    },
+    {
+      title: 'appId',
+      field: 'appId',
+      minWidth: 180,
+    },
+    {
+      title: '服务器地址(URL)',
+      field: 'utl',
+      minWidth: 360,
+      slots: {
+        default: ({ row }) => {
+          return `http://服务端地址/admin-api/mp/open/${row.appId}`;
+        },
+      },
+    },
+    {
+      title: '二维码',
+      field: 'qrCodeUrl',
+      minWidth: 120,
+      cellRender: { name: 'CellImage' },
+    },
+    {
+      title: '备注',
+      field: 'remark',
+      minWidth: 150,
+    },
+    {
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mp/account/index.vue b/apps/web-ele/src/views/mp/account/index.vue
new file mode 100644
index 000000000..dd3f4785e
--- /dev/null
+++ b/apps/web-ele/src/views/mp/account/index.vue
@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpAccountApi } from '#/api/mp/account';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+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 handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建账号 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑账号 */
+function handleEdit(row: MpAccountApi.Account) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除账号 */
+async function handleDelete(row: MpAccountApi.Account) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteAccount(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 生成二维码 */
+async function handleGenerateQrCode(row: MpAccountApi.Account) {
+  const loadingInstance = ElLoading.service({
+    text: '正在生成二维码中...',
+  });
+  try {
+    await generateAccountQrCode(row.id!);
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 清空 API 配额 */
+async function handleCleanQuota(row: MpAccountApi.Account) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.processing', ['清空 API 配额']),
+  });
+  try {
+    await clearAccountQuota(row.id!);
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getAccountPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MpAccountApi.Account>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <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 #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['mp:account:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mp:account:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '生成二维码',
+              type: 'primary',
+              link: true,
+              auth: ['mp:account:qr-code'],
+              onClick: handleGenerateQrCode.bind(null, row),
+            },
+            {
+              label: '清空 API 配额',
+              type: 'danger',
+              link: true,
+              auth: ['mp:account:clear-quota'],
+              popConfirm: {
+                title: '你确认要清空 API 配额？',
+                confirm: handleCleanQuota.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mp/account/modules/form.vue b/apps/web-ele/src/views/mp/account/modules/form.vue
new file mode 100644
index 000000000..792f9e02b
--- /dev/null
+++ b/apps/web-ele/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 { ElMessage } from 'element-plus';
+
+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');
+      ElMessage.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);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mp/statistics/chart-options.ts b/apps/web-ele/src/views/mp/statistics/chart-options.ts
new file mode 100644
index 000000000..b9d321dd3
--- /dev/null
+++ b/apps/web-ele/src/views/mp/statistics/chart-options.ts
@@ -0,0 +1,163 @@
+import type { MpStatisticsApi } from '#/api/mp/statistics';
+
+/** 用户增减数据图表配置项 */
+export function userSummaryOption(
+  data: MpStatisticsApi.UserSummary[],
+  dates: string[],
+): any {
+  return {
+    color: ['#67C23A', '#E5323E'],
+    legend: {
+      data: ['新增用户', '取消关注的用户'],
+    },
+    tooltip: {},
+    xAxis: {
+      data: dates,
+    },
+    yAxis: {
+      minInterval: 1,
+    },
+    series: [
+      {
+        name: '新增用户',
+        type: 'bar',
+        label: {
+          show: true,
+        },
+        barGap: 0,
+        data: data.map((item) => item.newUser), // 新增用户的数据
+      },
+      {
+        name: '取消关注的用户',
+        type: 'bar',
+        label: {
+          show: true,
+        },
+        data: data.map((item) => item.cancelUser), // 取消关注的用户的数据
+      },
+    ],
+  };
+}
+
+/** 累计用户数据图表配置项 */
+export function userCumulateOption(
+  data: MpStatisticsApi.UserCumulate[],
+  dates: string[],
+): any {
+  return {
+    legend: {
+      data: ['累计用户量'],
+    },
+    xAxis: {
+      type: 'category',
+      data: dates,
+    },
+    yAxis: {
+      minInterval: 1,
+    },
+    series: [
+      {
+        name: '累计用户量',
+        data: data.map((item) => item.cumulateUser), // 累计用户量的数据
+        type: 'line',
+        smooth: true,
+        label: {
+          show: true,
+        },
+      },
+    ],
+  };
+}
+
+/** 消息发送概况数据图表配置项 */
+export function upstreamMessageOption(
+  data: MpStatisticsApi.UpstreamMessage[],
+  dates: string[],
+): any {
+  return {
+    color: ['#67C23A', '#E5323E'],
+    legend: {
+      data: ['用户发送人数', '用户发送条数'],
+    },
+    tooltip: {},
+    xAxis: {
+      data: dates, // X 轴的日期范围
+    },
+    yAxis: {
+      minInterval: 1,
+    },
+    series: [
+      {
+        name: '用户发送人数',
+        type: 'line',
+        smooth: true,
+        label: {
+          show: true,
+        },
+        data: data.map((item) => item.msgUser), // 用户发送人数的数据
+      },
+      {
+        name: '用户发送条数',
+        type: 'line',
+        smooth: true,
+        label: {
+          show: true,
+        },
+        data: data.map((item) => item.msgCount), // 用户发送条数的数据
+      },
+    ],
+  };
+}
+
+/** 接口分析况数据图表配置项 */
+export function interfaceSummaryOption(
+  data: MpStatisticsApi.InterfaceSummary[],
+  dates: string[],
+): any {
+  return {
+    color: ['#67C23A', '#E5323E', '#E6A23C', '#409EFF'],
+    legend: {
+      data: ['被动回复用户消息的次数', '失败次数', '最大耗时', '总耗时'],
+    },
+    tooltip: {},
+    xAxis: {
+      data: dates, // X 轴的日期范围
+    },
+    yAxis: {},
+    series: [
+      {
+        name: '被动回复用户消息的次数',
+        type: 'bar',
+        label: {
+          show: true,
+        },
+        barGap: 0,
+        data: data.map((item) => item.callbackCount), // 被动回复用户消息的次数的数据
+      },
+      {
+        name: '失败次数',
+        type: 'bar',
+        label: {
+          show: true,
+        },
+        data: data.map((item) => item.failCount), // 失败次数的数据
+      },
+      {
+        name: '最大耗时',
+        type: 'bar',
+        label: {
+          show: true,
+        },
+        data: data.map((item) => item.maxTimeCost), // 最大耗时的数据
+      },
+      {
+        name: '总耗时',
+        type: 'bar',
+        label: {
+          show: true,
+        },
+        data: data.map((item) => item.totalTimeCost), // 总耗时的数据
+      },
+    ],
+  };
+}
diff --git a/apps/web-ele/src/views/mp/statistics/data.ts b/apps/web-ele/src/views/mp/statistics/data.ts
new file mode 100644
index 000000000..2572aed30
--- /dev/null
+++ b/apps/web-ele/src/views/mp/statistics/data.ts
@@ -0,0 +1,42 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { MpAccountApi } from '#/api/mp/account';
+
+import { beginOfDay, endOfDay, formatDateTime } from '@vben/utils';
+
+import { getSimpleAccountList } from '#/api/mp/account';
+
+/** 关联数据 */
+let accountList: MpAccountApi.AccountSimple[] = [];
+getSimpleAccountList().then((data) => (accountList = data));
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: 'ApiSelect',
+      componentProps: {
+        options: accountList.map((item) => ({
+          label: item.name,
+          value: item.id,
+        })),
+        placeholder: '请选择公众号',
+      },
+      defaultValue: accountList[0]?.id,
+    },
+    {
+      fieldName: 'dateRange',
+      label: '时间范围',
+      component: 'RangePicker',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      },
+      defaultValue: [
+        formatDateTime(beginOfDay(new Date(Date.now() - 3600 * 1000 * 24 * 7))),
+        formatDateTime(endOfDay(new Date(Date.now() - 3600 * 1000 * 24))),
+      ] as [Date, Date],
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mp/statistics/index.vue b/apps/web-ele/src/views/mp/statistics/index.vue
new file mode 100644
index 000000000..5cbda917a
--- /dev/null
+++ b/apps/web-ele/src/views/mp/statistics/index.vue
@@ -0,0 +1,151 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, ref } from 'vue';
+
+import { ContentWrap, Page } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import { addTime, betweenDay, formatDate } from '@vben/utils';
+
+import { ElCard, ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  getInterfaceSummary,
+  getUpstreamMessage,
+  getUserCumulate,
+  getUserSummary,
+} from '#/api/mp/statistics';
+
+import {
+  interfaceSummaryOption,
+  upstreamMessageOption,
+  userCumulateOption,
+  userSummaryOption,
+} from './chart-options';
+import { useGridFormSchema } from './data';
+
+const userSummaryRef = ref<EchartsUIType>();
+const { renderEcharts: renderUserSummaryEcharts } = useEcharts(userSummaryRef);
+
+const userCumulateRef = ref<EchartsUIType>();
+const { renderEcharts: renderUserCumulateEcharts } =
+  useEcharts(userCumulateRef);
+
+const upstreamMessageRef = ref<EchartsUIType>();
+const { renderEcharts: renderUpstreamMessageEcharts } =
+  useEcharts(upstreamMessageRef);
+
+const interfaceSummaryRef = ref<EchartsUIType>();
+const { renderEcharts: renderInterfaceSummaryEcharts } =
+  useEcharts(interfaceSummaryRef);
+
+/** 加载数据 */
+async function getSummary(values: Record<string, any>) {
+  const accountId = values.accountId;
+  if (!accountId) {
+    ElMessage.warning('请先选择公众号');
+    return;
+  }
+  const dateRange = values.dateRange;
+  if (!dateRange) {
+    ElMessage.warning('请先选择时间范围');
+    return;
+  }
+  // 必须选择 7 天内，因为公众号有时间跨度限制为 7
+  if (betweenDay(dateRange[0], dateRange[1]) >= 7) {
+    ElMessage.error('时间间隔 7 天以内，请重新选择');
+    return;
+  }
+  // 处理日期
+  const days = betweenDay(dateRange[0], dateRange[1]);
+  const dates = Array.from(
+    { length: days },
+    (_, index) =>
+      formatDate(addTime(dateRange[0], index), 'YYYY-MM-DD') as string,
+  );
+
+  // 用户增减数据
+  const userSummaryData = await getUserSummary({
+    accountId,
+    date: dateRange,
+  });
+  await renderUserSummaryEcharts(userSummaryOption(userSummaryData, dates));
+  // 累计用户数据
+  const userCumulateData = await getUserCumulate({
+    accountId,
+    date: dateRange,
+  });
+  await renderUserCumulateEcharts(userCumulateOption(userCumulateData, dates));
+  // 消息发送概况数据
+  const upstreamMessageData = await getUpstreamMessage({
+    accountId,
+    date: dateRange,
+  });
+  await renderUpstreamMessageEcharts(
+    upstreamMessageOption(upstreamMessageData, dates),
+  );
+  // 接口分析数据
+  const interfaceSummaryData = await getInterfaceSummary({
+    accountId,
+    date: dateRange,
+  });
+  await renderInterfaceSummaryEcharts(
+    interfaceSummaryOption(interfaceSummaryData, dates),
+  );
+}
+
+const [QueryForm, queryFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  layout: 'horizontal',
+  schema: useGridFormSchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2',
+  handleSubmit: getSummary,
+});
+
+/** 初始化 */
+onMounted(() => {
+  queryFormApi.submitForm();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <ContentWrap class="h-full w-full">
+      <QueryForm />
+
+      <div class="flex h-1/3 w-full gap-4">
+        <ElCard class="h-full w-1/2">
+          <template #header>
+            <span>用户增减数据</span>
+          </template>
+          <EchartsUI ref="userSummaryRef" />
+        </ElCard>
+        <ElCard class="h-full w-1/2">
+          <template #header>
+            <span>累计用户数据</span>
+          </template>
+          <EchartsUI ref="userCumulateRef" />
+        </ElCard>
+      </div>
+      <div class="mt-4 flex h-1/3 w-full gap-4">
+        <ElCard class="h-full w-1/2">
+          <template #header>
+            <span>消息发送概况数据</span>
+          </template>
+          <EchartsUI ref="upstreamMessageRef" />
+        </ElCard>
+        <ElCard class="h-full w-1/2">
+          <template #header>
+            <span>接口分析数据</span>
+          </template>
+          <EchartsUI ref="interfaceSummaryRef" />
+        </ElCard>
+      </div>
+    </ContentWrap>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mp/tag/data.ts b/apps/web-ele/src/views/mp/tag/data.ts
new file mode 100644
index 000000000..e8efd6fba
--- /dev/null
+++ b/apps/web-ele/src/views/mp/tag/data.ts
@@ -0,0 +1,93 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+import type { MpAccountApi } from '#/api/mp/account';
+
+import { getSimpleAccountList } from '#/api/mp/account';
+
+/** 关联数据 */
+let accountList: MpAccountApi.AccountSimple[] = [];
+getSimpleAccountList().then((data) => (accountList = data));
+
+/** 新增/修改的表单 */
+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 useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: 'ApiSelect',
+      componentProps: {
+        options: accountList.map((item) => ({
+          label: item.name,
+          value: item.id,
+        })),
+        placeholder: '请选择公众号',
+      },
+      defaultValue: accountList[0]?.id,
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeGridPropTypes.Columns {
+  return [
+    {
+      title: '编号',
+      field: 'id',
+      minWidth: 80,
+    },
+    {
+      title: '标签名称',
+      field: 'name',
+      minWidth: 150,
+    },
+    {
+      title: '粉丝数',
+      field: 'count',
+      minWidth: 100,
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      formatter: 'formatDateTime',
+      minWidth: 180,
+    },
+    {
+      title: '操作',
+      width: 140,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mp/tag/index.vue b/apps/web-ele/src/views/mp/tag/index.vue
new file mode 100644
index 000000000..ad1490bb8
--- /dev/null
+++ b/apps/web-ele/src/views/mp/tag/index.vue
@@ -0,0 +1,166 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpTagApi } from '#/api/mp/tag';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteTag, getTagPage, syncTag } from '#/api/mp/tag';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建标签 */
+async function handleCreate() {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId) {
+    ElMessage.warning('请先选择公众号');
+    return;
+  }
+  formModalApi.setData({ accountId }).open();
+}
+
+/** 编辑标签 */
+async function handleEdit(row: MpTagApi.Tag) {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId) {
+    ElMessage.warning('请先选择公众号');
+    return;
+  }
+  formModalApi.setData({ row, accountId }).open();
+}
+
+/** 删除标签 */
+async function handleDelete(row: MpTagApi.Tag) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteTag(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 同步标签 */
+async function handleSync() {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId) {
+    ElMessage.warning('请先选择公众号');
+    return;
+  }
+
+  await confirm('是否确认同步标签？');
+  const loadingInstance = ElLoading.service({
+    text: '正在同步标签...',
+  });
+  try {
+    await syncTag(accountId);
+    ElMessage.success('同步标签成功');
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getTagPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MpTagApi.Tag>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <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: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['mp:tag:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: 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-ele/src/views/mp/tag/modules/form.vue b/apps/web-ele/src/views/mp/tag/modules/form.vue
new file mode 100644
index 000000000..ca1bf4a02
--- /dev/null
+++ b/apps/web-ele/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 { ElMessage } from 'element-plus';
+
+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');
+      ElMessage.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!);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mp/user/data.ts b/apps/web-ele/src/views/mp/user/data.ts
new file mode 100644
index 000000000..ccad88651
--- /dev/null
+++ b/apps/web-ele/src/views/mp/user/data.ts
@@ -0,0 +1,138 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpAccountApi } from '#/api/mp/account';
+
+import { getSimpleAccountList } from '#/api/mp/account';
+
+let accountList: MpAccountApi.AccountSimple[] = [];
+getSimpleAccountList().then((data) => (accountList = data));
+
+/** 修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '昵称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入昵称',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: 'Select',
+      componentProps: {
+        options: accountList.map((item) => ({
+          label: item.name,
+          value: item.id,
+        })),
+        placeholder: '请选择公众号',
+      },
+      defaultValue: accountList[0]?.id,
+    },
+    {
+      fieldName: 'openid',
+      label: '用户标识',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户标识',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '昵称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入昵称',
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'openid',
+      title: '用户标识',
+      minWidth: 260,
+    },
+    {
+      field: 'headImageUrl',
+      title: '用户头像',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'nickname',
+      title: '昵称',
+      minWidth: 120,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 120,
+    },
+    {
+      field: 'tagIds',
+      title: '标签',
+      minWidth: 200,
+      cellRender: {
+        name: 'CellTags',
+      },
+    },
+    {
+      field: 'subscribeStatus',
+      title: '订阅状态',
+      minWidth: 100,
+      align: 'center',
+      formatter: ({ cellValue }) => {
+        return cellValue === 0 ? '已订阅' : '未订阅';
+      },
+    },
+    {
+      field: 'subscribeTime',
+      title: '订阅时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mp/user/index.vue b/apps/web-ele/src/views/mp/user/index.vue
new file mode 100644
index 000000000..bdcd37652
--- /dev/null
+++ b/apps/web-ele/src/views/mp/user/index.vue
@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpUserApi } from '#/api/mp/user';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElMessage, ElLoading } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getUserPage, syncUser } from '#/api/mp/user';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+defineOptions({ name: 'MpUser' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 编辑用户 */
+function handleEdit(row: MpUserApi.User) {
+  formModalApi.setData({ id: row.id }).open();
+}
+
+/** 同步粉丝 */
+async function handleSync() {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId) {
+    ElMessage.warning('请先选择公众号');
+    return;
+  }
+
+  await confirm('是否确认同步粉丝？');
+  const loadingInstance = ElLoading.service({
+    text: '正在同步粉丝...',
+  });
+  try {
+    await syncUser(accountId);
+    ElMessage.success(
+      '开始从微信公众号同步粉丝信息，同步需要一段时间，建议稍后再查询',
+    );
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getUserPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MpUserApi.User>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="公众号粉丝" url="https://doc.iocoder.cn/mp/user/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+
+    <Grid table-title="粉丝列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '同步',
+              type: 'primary',
+              icon: ACTION_ICON.REFRESH,
+              auth: ['mp:user:sync'],
+              onClick: handleSync,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['mp:user:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mp/user/modules/form.vue b/apps/web-ele/src/views/mp/user/modules/form.vue
new file mode 100644
index 000000000..da5a96de6
--- /dev/null
+++ b/apps/web-ele/src/views/mp/user/modules/form.vue
@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import type { MpUserApi } from '#/api/mp/user';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { getUser, updateUser } from '#/api/mp/user';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MpUserApi.User>();
+const getTitle = computed(() => {
+  return $t('ui.actionTitle.edit', ['粉丝']);
+});
+
+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 values = (await formApi.getValues()) as MpUserApi.User;
+    try {
+      await updateUser({ ...formData.value, ...values });
+      /** 关闭并提示 */
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    /** 加载数据 */
+    const data = modalApi.getData<{ id: number }>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getUser(data.id);
+      /** 设置到 values */
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-[600px]">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/pay/app/index.vue b/apps/web-ele/src/views/pay/app/index.vue
index 6dfe7f8e5..57920fe12 100644
--- a/apps/web-ele/src/views/pay/app/index.vue
+++ b/apps/web-ele/src/views/pay/app/index.vue
@@ -71,17 +71,13 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新状态
-        const res = await updateAppStatus({
+        await updateAppStatus({
           id: row.id!,
           status: newStatus,
         });
-        if (res) {
-          // 提示并返回成功
-          ElMessage.success(`${text}成功`);
-          resolve(true);
-        } else {
-          reject(new Error('更新失败'));
-        }
+        // 提示并返回成功
+        ElMessage.success(`${text}成功`);
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-ele/src/views/pay/notify/data.ts b/apps/web-ele/src/views/pay/notify/data.ts
index 2dd815227..8d301628d 100644
--- a/apps/web-ele/src/views/pay/notify/data.ts
+++ b/apps/web-ele/src/views/pay/notify/data.ts
@@ -21,7 +21,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '应用编号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getAppList(),
+        api: getAppList,
         labelField: 'name',
         valueField: 'id',
         autoSelect: 'first',
diff --git a/apps/web-ele/src/views/pay/order/data.ts b/apps/web-ele/src/views/pay/order/data.ts
index 259137ef4..ff55e09f6 100644
--- a/apps/web-ele/src/views/pay/order/data.ts
+++ b/apps/web-ele/src/views/pay/order/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { PayOrderApi } from '#/api/pay/order';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -184,53 +183,46 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '支付状态',
-      content: (data: any) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_ORDER_STATUS,
-          value: data?.status,
+          value: val,
         }),
     },
     {
       field: 'price',
       label: '支付金额',
-      content: (data: PayOrderApi.Order) =>
-        `￥${erpPriceInputFormatter(data?.price)}`,
+      render: (val) => `￥${erpPriceInputFormatter(val)}`,
     },
     {
       field: 'channelFeePrice',
       label: '手续费',
-      content: (data: PayOrderApi.Order) =>
-        `￥${erpPriceInputFormatter(data?.channelFeePrice)}`,
+      render: (val) => `￥${erpPriceInputFormatter(val)}`,
     },
     {
       field: 'channelFeeRate',
       label: '手续费比例',
-      content: (data: PayOrderApi.Order) =>
-        `${erpPriceInputFormatter(data?.channelFeeRate)}%`,
+      render: (val) => `${erpPriceInputFormatter(val)}%`,
     },
     {
       field: 'successTime',
       label: '支付时间',
-      content: (data: PayOrderApi.Order) =>
-        formatDateTime(data?.successTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'expireTime',
       label: '失效时间',
-      content: (data: PayOrderApi.Order) =>
-        formatDateTime(data?.expireTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: PayOrderApi.Order) =>
-        formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'updateTime',
       label: '更新时间',
-      content: (data: PayOrderApi.Order) =>
-        formatDateTime(data?.updateTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'subject',
@@ -243,10 +235,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'channelCode',
       label: '支付渠道',
-      content: (data: PayOrderApi.Order) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_CHANNEL_CODE,
-          value: data?.channelCode,
+          value: val,
         }),
     },
     {
@@ -256,10 +248,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'channelOrderNo',
       label: '渠道单号',
-      content: (data: PayOrderApi.Order) =>
-        data?.channelOrderNo
-          ? h(ElTag, { color: 'green' }, () => data.channelOrderNo)
-          : '',
+      render: (val) => (val ? h(ElTag, { color: 'green' }, () => val) : ''),
     },
     {
       field: 'channelUserId',
@@ -268,8 +257,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'refundPrice',
       label: '退款金额',
-      content: (data: PayOrderApi.Order) =>
-        `￥${erpPriceInputFormatter(data?.refundPrice)}`,
+      render: (val) => `￥${erpPriceInputFormatter(val)}`,
     },
     {
       field: 'notifyUrl',
diff --git a/apps/web-ele/src/views/pay/order/modules/detail.vue b/apps/web-ele/src/views/pay/order/modules/detail.vue
index 7f52112ee..4072e4e45 100644
--- a/apps/web-ele/src/views/pay/order/modules/detail.vue
+++ b/apps/web-ele/src/views/pay/order/modules/detail.vue
@@ -13,14 +13,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<PayOrderApi.Order>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 2,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  column: 2,
+  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/pay/refund/data.ts b/apps/web-ele/src/views/pay/refund/data.ts
index db140679f..8e1afd615 100644
--- a/apps/web-ele/src/views/pay/refund/data.ts
+++ b/apps/web-ele/src/views/pay/refund/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { PayRefundApi } from '#/api/pay/refund';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -173,26 +172,22 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'merchantRefundId',
       label: '商户退款单号',
-      content: (data: PayRefundApi.Refund) =>
-        h(ElTag, {}, () => data?.merchantRefundId || '-'),
+      render: (val) => h(ElTag, {}, () => val || '-'),
     },
     {
       field: 'channelRefundNo',
       label: '渠道退款单号',
-      content: (data: PayRefundApi.Refund) =>
-        h(ElTag, { type: 'success' }, () => data?.channelRefundNo || '-'),
+      render: (val) => h(ElTag, { type: 'success' }, () => val || '-'),
     },
     {
       field: 'merchantOrderId',
       label: '商户支付单号',
-      content: (data: PayRefundApi.Refund) =>
-        h(ElTag, {}, () => data?.merchantOrderId || '-'),
+      render: (val) => h(ElTag, {}, () => val || '-'),
     },
     {
       field: 'channelOrderNo',
       label: '渠道支付单号',
-      content: (data: PayRefundApi.Refund) =>
-        h(ElTag, { type: 'success' }, () => data?.channelOrderNo || '-'),
+      render: (val) => h(ElTag, { type: 'success' }, () => val || '-'),
     },
     {
       field: 'appId',
@@ -205,58 +200,55 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'payPrice',
       label: '支付金额',
-      content: (data: PayRefundApi.Refund) =>
+      render: (val) =>
         h(
           ElTag,
           { type: 'success' },
-          () => `￥${erpPriceInputFormatter(data?.payPrice || 0)}`,
+          () => `￥${erpPriceInputFormatter(val || 0)}`,
         ),
     },
     {
       field: 'refundPrice',
       label: '退款金额',
-      content: (data: PayRefundApi.Refund) =>
+      render: (val) =>
         h(
           ElTag,
           { type: 'danger' },
-          () => `￥${erpPriceInputFormatter(data?.refundPrice || 0)}`,
+          () => `￥${erpPriceInputFormatter(val || 0)}`,
         ),
     },
     {
       field: 'status',
       label: '退款状态',
-      content: (data: any) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_REFUND_STATUS,
-          value: data?.status,
+          value: val,
         }),
     },
     {
       field: 'successTime',
       label: '退款时间',
-      content: (data: PayRefundApi.Refund) =>
-        formatDateTime(data?.successTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: PayRefundApi.Refund) =>
-        formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'updateTime',
       label: '更新时间',
-      content: (data: PayRefundApi.Refund) =>
-        formatDateTime(data?.updateTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     // 渠道信息部分
     {
       field: 'channelCode',
       label: '退款渠道',
-      content: (data: PayRefundApi.Refund) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_CHANNEL_CODE,
-          value: data?.channelCode,
+          value: val,
         }),
     },
     {
diff --git a/apps/web-ele/src/views/pay/refund/modules/detail.vue b/apps/web-ele/src/views/pay/refund/modules/detail.vue
index 1f3e380cb..7b02d9889 100644
--- a/apps/web-ele/src/views/pay/refund/modules/detail.vue
+++ b/apps/web-ele/src/views/pay/refund/modules/detail.vue
@@ -13,14 +13,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<PayRefundApi.Refund>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 2,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  column: 2,
+  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/pay/transfer/data.ts b/apps/web-ele/src/views/pay/transfer/data.ts
index 3ddbb0ea4..0e3b1a04c 100644
--- a/apps/web-ele/src/views/pay/transfer/data.ts
+++ b/apps/web-ele/src/views/pay/transfer/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { PayTransferApi } from '#/api/pay/transfer';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -191,14 +190,12 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'merchantTransferId',
       label: '商户单号',
-      content: (data: PayTransferApi.Transfer) =>
-        h(ElTag, {}, () => data?.merchantTransferId),
+      render: (val) => h(ElTag, {}, () => val),
     },
     {
       field: 'no',
       label: '转账单号',
-      content: (data: PayTransferApi.Transfer) =>
-        h(ElTag, { color: 'orange' }, () => data?.no),
+      render: (val) => h(ElTag, { color: 'orange' }, () => val),
     },
     {
       field: 'appId',
@@ -207,33 +204,31 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '转账状态',
-      content: (data: any) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_TRANSFER_STATUS,
-          value: data?.status,
+          value: val,
         }),
     },
     {
       field: 'price',
       label: '转账金额',
-      content: (data: PayTransferApi.Transfer) =>
+      render: (val) =>
         h(
           ElTag,
           { color: 'success' },
-          () => `￥${erpPriceInputFormatter(data?.price || 0)}`,
+          () => `￥${erpPriceInputFormatter(val || 0)}`,
         ),
     },
     {
       field: 'successTime',
       label: '转账时间',
-      content: (data: PayTransferApi.Transfer) =>
-        formatDateTime(data?.successTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: PayTransferApi.Transfer) =>
-        formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'userName',
@@ -246,10 +241,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'channelCode',
       label: '支付渠道',
-      content: (data: PayTransferApi.Transfer) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_CHANNEL_CODE,
-          value: data?.channelCode,
+          value: val,
         }),
     },
     {
@@ -259,10 +254,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'channelTransferNo',
       label: '渠道单号',
-      content: (data: PayTransferApi.Transfer) =>
-        data?.channelTransferNo
-          ? h(ElTag, { color: 'success' }, () => data.channelTransferNo)
-          : '',
+      render: (val) => (val ? h(ElTag, { color: 'success' }, () => val) : ''),
     },
     {
       field: 'notifyUrl',
diff --git a/apps/web-ele/src/views/pay/transfer/modules/detail.vue b/apps/web-ele/src/views/pay/transfer/modules/detail.vue
index 301f7aea1..deb23fabf 100644
--- a/apps/web-ele/src/views/pay/transfer/modules/detail.vue
+++ b/apps/web-ele/src/views/pay/transfer/modules/detail.vue
@@ -13,14 +13,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<PayTransferApi.Transfer>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 2,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  column: 2,
+  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/dept/data.ts b/apps/web-ele/src/views/system/dept/data.ts
index 7e4a6d611..0bc18c1bc 100644
--- a/apps/web-ele/src/views/system/dept/data.ts
+++ b/apps/web-ele/src/views/system/dept/data.ts
@@ -74,7 +74,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '负责人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择负责人',
diff --git a/apps/web-ele/src/views/system/dict/data.ts b/apps/web-ele/src/views/system/dict/data.ts
index 566c2f7a8..70775d4e7 100644
--- a/apps/web-ele/src/views/system/dict/data.ts
+++ b/apps/web-ele/src/views/system/dict/data.ts
@@ -183,7 +183,7 @@ export function useDataFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: (values) => {
         return {
-          api: () => getSimpleDictTypeList(),
+          api: getSimpleDictTypeList,
           placeholder: '请输入字典类型',
           labelField: 'name',
           valueField: 'type',
diff --git a/apps/web-ele/src/views/system/loginlog/data.ts b/apps/web-ele/src/views/system/loginlog/data.ts
index e30d26076..2be5cdf1c 100644
--- a/apps/web-ele/src/views/system/loginlog/data.ts
+++ b/apps/web-ele/src/views/system/loginlog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemLoginLogApi } from '#/api/system/login-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -110,10 +109,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'logType',
       label: '操作类型',
-      content: (data: SystemLoginLogApi.LoginLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_LOGIN_TYPE,
-          value: data?.logType,
+          value: val,
         });
       },
     },
@@ -132,19 +131,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'result',
       label: '登录结果',
-      content: (data: SystemLoginLogApi.LoginLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_LOGIN_RESULT,
-          value: data?.result,
+          value: val,
         });
       },
     },
     {
       field: 'createTime',
       label: '登录日期',
-      content: (data: SystemLoginLogApi.LoginLog) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-ele/src/views/system/loginlog/modules/detail.vue b/apps/web-ele/src/views/system/loginlog/modules/detail.vue
index 17b0a2f61..773069b9f 100644
--- a/apps/web-ele/src/views/system/loginlog/modules/detail.vue
+++ b/apps/web-ele/src/views/system/loginlog/modules/detail.vue
@@ -12,14 +12,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemLoginLogApi.LoginLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 1,
-    direction: 'horizontal',
-    labelWidth: 110,
-    title: '',
-    extra: '',
-  },
+  column: 1,
+  labelWidth: 110,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/mail/log/data.ts b/apps/web-ele/src/views/system/mail/log/data.ts
index ad0c5de7d..cef8cd7f3 100644
--- a/apps/web-ele/src/views/system/mail/log/data.ts
+++ b/apps/web-ele/src/views/system/mail/log/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemMailLogApi } from '#/api/system/mail/log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -59,7 +58,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '邮箱账号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleMailAccountList(),
+        api: getSimpleMailAccountList,
         labelField: 'mail',
         valueField: 'id',
         clearable: true,
@@ -164,8 +163,8 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: SystemMailLogApi.MailLog) => {
-        return formatDateTime(data?.createTime || '') as string;
+      render: (val) => {
+        return formatDateTime(val) as string;
       },
     },
     {
@@ -175,14 +174,14 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userId',
       label: '接收用户',
-      content: (data: SystemMailLogApi.MailLog) => {
-        if (data?.userType && data?.userId) {
+      render: (val, data) => {
+        if (data?.userType && val) {
           return h('div', [
             h(DictTag, {
               type: DICT_TYPE.USER_TYPE,
               value: data.userType,
             }),
-            ` (${data.userId})`,
+            ` (${val})`,
           ]);
         }
         return '无';
@@ -191,10 +190,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'toMails',
       label: '接收信息',
-      content: (data: SystemMailLogApi.MailLog) => {
+      render: (val, data) => {
         const lines: string[] = [];
-        if (data?.toMails && data.toMails.length > 0) {
-          lines.push(`收件：${data.toMails.join('、')}`);
+        if (val && val.length > 0) {
+          lines.push(`收件：${val.join('、')}`);
         }
         if (data?.ccMails && data.ccMails.length > 0) {
           lines.push(`抄送：${data.ccMails.join('、')}`);
@@ -227,28 +226,26 @@ export function useDetailSchema(): DescriptionItemSchema[] {
       field: 'templateContent',
       label: '邮件内容',
       span: 2,
-      content: (data: SystemMailLogApi.MailLog) => {
+      render: (val) => {
         return h('div', {
-          innerHTML: data?.templateContent || '',
+          innerHTML: val || '',
         });
       },
     },
     {
       field: 'sendStatus',
       label: '发送状态',
-      content: (data: SystemMailLogApi.MailLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS,
-          value: data?.sendStatus,
+          value: val,
         });
       },
     },
     {
       field: 'sendTime',
       label: '发送时间',
-      content: (data: SystemMailLogApi.MailLog) => {
-        return formatDateTime(data?.sendTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'sendMessageId',
diff --git a/apps/web-ele/src/views/system/mail/log/modules/detail.vue b/apps/web-ele/src/views/system/mail/log/modules/detail.vue
index c177f4adf..e70243d8b 100644
--- a/apps/web-ele/src/views/system/mail/log/modules/detail.vue
+++ b/apps/web-ele/src/views/system/mail/log/modules/detail.vue
@@ -12,14 +12,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemMailLogApi.MailLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 2,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  column: 2,
+  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/mail/template/data.ts b/apps/web-ele/src/views/system/mail/template/data.ts
index d567e3468..e57e92f17 100644
--- a/apps/web-ele/src/views/system/mail/template/data.ts
+++ b/apps/web-ele/src/views/system/mail/template/data.ts
@@ -42,7 +42,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '邮箱账号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleMailAccountList(),
+        api: getSimpleMailAccountList,
         labelField: 'mail',
         valueField: 'id',
         placeholder: '请选择邮箱账号',
@@ -177,7 +177,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '邮箱账号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleMailAccountList(),
+        api: getSimpleMailAccountList,
         labelField: 'mail',
         valueField: 'id',
         clearable: true,
diff --git a/apps/web-ele/src/views/system/notify/message/data.ts b/apps/web-ele/src/views/system/notify/message/data.ts
index 5954d8989..c786ee144 100644
--- a/apps/web-ele/src/views/system/notify/message/data.ts
+++ b/apps/web-ele/src/views/system/notify/message/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -166,10 +165,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userType',
       label: '用户类型',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.USER_TYPE,
-          value: data?.userType,
+          value: val,
         });
       },
     },
@@ -196,9 +195,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'templateParams',
       label: '模版参数',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         try {
-          return JSON.stringify(data?.templateParams);
+          return JSON.stringify(val);
         } catch {
           return '';
         }
@@ -207,36 +206,32 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'templateType',
       label: '模版类型',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
-          value: data?.templateType,
+          value: val,
         });
       },
     },
     {
       field: 'readStatus',
       label: '是否已读',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_BOOLEAN_STRING,
-          value: data?.readStatus,
+          value: val,
         });
       },
     },
     {
       field: 'readTime',
       label: '阅读时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.readTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-ele/src/views/system/notify/message/modules/detail.vue b/apps/web-ele/src/views/system/notify/message/modules/detail.vue
index dda2cdffd..8d9385ab9 100644
--- a/apps/web-ele/src/views/system/notify/message/modules/detail.vue
+++ b/apps/web-ele/src/views/system/notify/message/modules/detail.vue
@@ -12,14 +12,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 1,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  column: 1,
+  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/notify/my/data.ts b/apps/web-ele/src/views/system/notify/my/data.ts
index f57aa9294..21f051d6d 100644
--- a/apps/web-ele/src/views/system/notify/my/data.ts
+++ b/apps/web-ele/src/views/system/notify/my/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -103,36 +102,32 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '发送时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'templateType',
       label: '消息类型',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
-          value: data?.templateType,
+          value: val,
         });
       },
     },
     {
       field: 'readStatus',
       label: '是否已读',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_BOOLEAN_STRING,
-          value: data?.readStatus,
+          value: val,
         });
       },
     },
     {
       field: 'readTime',
       label: '阅读时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.readTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'templateContent',
diff --git a/apps/web-ele/src/views/system/notify/my/modules/detail.vue b/apps/web-ele/src/views/system/notify/my/modules/detail.vue
index dda2cdffd..8d9385ab9 100644
--- a/apps/web-ele/src/views/system/notify/my/modules/detail.vue
+++ b/apps/web-ele/src/views/system/notify/my/modules/detail.vue
@@ -12,14 +12,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 1,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  column: 1,
+  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/notify/template/data.ts b/apps/web-ele/src/views/system/notify/template/data.ts
index 285f83a7e..5aedc89dc 100644
--- a/apps/web-ele/src/views/system/notify/template/data.ts
+++ b/apps/web-ele/src/views/system/notify/template/data.ts
@@ -193,7 +193,7 @@ export function useSendNotifyFormSchema(): VbenFormSchema[] {
       label: '接收人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择接收人',
diff --git a/apps/web-ele/src/views/system/oauth2/client/data.ts b/apps/web-ele/src/views/system/oauth2/client/data.ts
index 0df5f9b92..5705cb06c 100644
--- a/apps/web-ele/src/views/system/oauth2/client/data.ts
+++ b/apps/web-ele/src/views/system/oauth2/client/data.ts
@@ -147,7 +147,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入权限',
       },
-      rules: 'required',
     },
     {
       fieldName: 'resourceIds',
@@ -156,7 +155,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入资源',
       },
-      rules: 'required',
     },
     {
       fieldName: 'additionalInformation',
diff --git a/apps/web-ele/src/views/system/operatelog/data.ts b/apps/web-ele/src/views/system/operatelog/data.ts
index 31c808d8a..67b321fe2 100644
--- a/apps/web-ele/src/views/system/operatelog/data.ts
+++ b/apps/web-ele/src/views/system/operatelog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemOperateLogApi } from '#/api/system/operate-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { formatDateTime } from '@vben/utils';
@@ -16,7 +15,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '操作人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         clearable: true,
@@ -134,7 +133,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'traceId',
       label: '链路追踪',
-      hidden: (data: SystemOperateLogApi.OperateLog) => !data?.traceId,
+      show: (val) => !val,
     },
     {
       field: 'userId',
@@ -167,13 +166,14 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'extra',
       label: '操作拓展参数',
-      hidden: (data: SystemOperateLogApi.OperateLog) => !data?.extra,
+      show: (val) => !val,
     },
     {
+      field: 'requestUrl',
       label: '请求 URL',
-      content: (data: SystemOperateLogApi.OperateLog) => {
-        if (data?.requestMethod && data?.requestUrl) {
-          return `${data.requestMethod} ${data.requestUrl}`;
+      render: (val, data) => {
+        if (data?.requestMethod && val) {
+          return `${data.requestMethod} ${val}`;
         }
         return '';
       },
@@ -181,9 +181,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '操作时间',
-      content: (data: SystemOperateLogApi.OperateLog) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'bizId',
diff --git a/apps/web-ele/src/views/system/operatelog/modules/detail.vue b/apps/web-ele/src/views/system/operatelog/modules/detail.vue
index 890674b3c..cf892c0f1 100644
--- a/apps/web-ele/src/views/system/operatelog/modules/detail.vue
+++ b/apps/web-ele/src/views/system/operatelog/modules/detail.vue
@@ -12,14 +12,9 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemOperateLogApi.OperateLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 1,
-    direction: 'horizontal',
-    labelWidth: 110,
-    title: '',
-    extra: '',
-  },
+  column: 1,
+  direction: 'horizontal',
+  labelWidth: 110,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/sms/log/data.ts b/apps/web-ele/src/views/system/sms/log/data.ts
index 52a36a3af..3657516b6 100644
--- a/apps/web-ele/src/views/system/sms/log/data.ts
+++ b/apps/web-ele/src/views/system/sms/log/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemSmsLogApi } from '#/api/system/sms/log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -30,7 +29,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '短信渠道',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleSmsChannelList(),
+        api: getSimpleSmsChannelList,
         labelField: 'signature',
         valueField: 'id',
         clearable: true,
@@ -179,9 +178,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: SystemSmsLogApi.SmsLog) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'mobile',
@@ -198,10 +195,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'templateType',
       label: '模板类型',
-      content: (data: SystemSmsLogApi.SmsLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE,
-          value: data?.templateType,
+          value: val,
         });
       },
     },
@@ -212,19 +209,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'sendStatus',
       label: '发送状态',
-      content: (data: SystemSmsLogApi.SmsLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SMS_SEND_STATUS,
-          value: data?.sendStatus,
+          value: val,
         });
       },
     },
     {
       field: 'sendTime',
       label: '发送时间',
-      content: (data: SystemSmsLogApi.SmsLog) => {
-        return formatDateTime(data?.sendTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'apiSendCode',
@@ -237,19 +232,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'receiveStatus',
       label: '接收状态',
-      content: (data: SystemSmsLogApi.SmsLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS,
-          value: data?.receiveStatus,
+          value: val,
         });
       },
     },
     {
       field: 'receiveTime',
       label: '接收时间',
-      content: (data: SystemSmsLogApi.SmsLog) => {
-        return formatDateTime(data?.receiveTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'apiReceiveCode',
diff --git a/apps/web-ele/src/views/system/sms/log/modules/detail.vue b/apps/web-ele/src/views/system/sms/log/modules/detail.vue
index 622efdb8f..4fcd48df9 100644
--- a/apps/web-ele/src/views/system/sms/log/modules/detail.vue
+++ b/apps/web-ele/src/views/system/sms/log/modules/detail.vue
@@ -12,14 +12,9 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemSmsLogApi.SmsLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 2,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  column: 2,
+  direction: 'horizontal',
+  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/sms/template/data.ts b/apps/web-ele/src/views/system/sms/template/data.ts
index 54701404d..0a3d3e814 100644
--- a/apps/web-ele/src/views/system/sms/template/data.ts
+++ b/apps/web-ele/src/views/system/sms/template/data.ts
@@ -52,7 +52,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '短信渠道',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleSmsChannelList(),
+        api: getSimpleSmsChannelList,
         labelField: 'signature',
         valueField: 'id',
         placeholder: '请选择短信渠道',
@@ -144,7 +144,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '短信渠道',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleSmsChannelList(),
+        api: getSimpleSmsChannelList,
         labelField: 'signature',
         valueField: 'id',
         clearable: true,
diff --git a/apps/web-ele/src/views/system/social/user/data.ts b/apps/web-ele/src/views/system/social/user/data.ts
index b3db14baf..77847d0a0 100644
--- a/apps/web-ele/src/views/system/social/user/data.ts
+++ b/apps/web-ele/src/views/system/social/user/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemSocialUserApi } from '#/api/system/social/user';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -8,6 +7,8 @@ import { h } from 'vue';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
+import { ElImage } from 'element-plus';
+
 import { DictTag } from '#/components/dict-tag';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -111,10 +112,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'type',
       label: '社交平台',
-      content: (data: SystemSocialUserApi.SocialUser) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SOCIAL_TYPE,
-          value: data?.type,
+          value: val,
         });
       },
     },
@@ -125,16 +126,13 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'avatar',
       label: '用户头像',
-      // TODO @芋艿：使用 antd 的 Image 组件
-      content: (data: SystemSocialUserApi.SocialUser) => {
-        if (data?.avatar) {
-          return h('img', {
-            src: data.avatar,
-            style: 'width: 30px; height: 30px; cursor: pointer;',
-            onClick: () => {
-              // 可以添加图片预览功能
-              window.open(data.avatar, '_blank');
-            },
+      render: (val) => {
+        if (val) {
+          return h(ElImage, {
+            src: val,
+            previewSrcList: [val],
+            class: 'w-10 h-10 cursor-pointer',
+            previewTeleported: true,
           });
         }
         return '无';
diff --git a/apps/web-ele/src/views/system/social/user/modules/detail.vue b/apps/web-ele/src/views/system/social/user/modules/detail.vue
index aa9caec0a..ffae89ce5 100644
--- a/apps/web-ele/src/views/system/social/user/modules/detail.vue
+++ b/apps/web-ele/src/views/system/social/user/modules/detail.vue
@@ -14,14 +14,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemSocialUserApi.SocialUser>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    border: true,
-    column: 1,
-    direction: 'horizontal',
-    title: '',
-    extra: '',
-    labelWidth: 185,
-  },
+  column: 1,
+  labelWidth: 185,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/tenant/data.ts b/apps/web-ele/src/views/system/tenant/data.ts
index ecacc0401..94d005338 100644
--- a/apps/web-ele/src/views/system/tenant/data.ts
+++ b/apps/web-ele/src/views/system/tenant/data.ts
@@ -35,7 +35,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '租户套餐',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getTenantPackageList(),
+        api: getTenantPackageList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择租户套餐',
diff --git a/apps/web-ele/src/views/system/user/data.ts b/apps/web-ele/src/views/system/user/data.ts
index d0f5ba5c1..43fc5e49a 100644
--- a/apps/web-ele/src/views/system/user/data.ts
+++ b/apps/web-ele/src/views/system/user/data.ts
@@ -70,7 +70,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '岗位',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimplePostList(),
+        api: getSimplePostList,
         labelField: 'name',
         valueField: 'id',
         multiple: true,
@@ -212,7 +212,7 @@ export function useAssignRoleFormSchema(): VbenFormSchema[] {
       label: '角色',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleRoleList(),
+        api: getSimpleRoleList,
         labelField: 'name',
         valueField: 'id',
         multiple: true,
diff --git a/apps/web-ele/src/views/system/user/index.vue b/apps/web-ele/src/views/system/user/index.vue
index 8eedb7023..e56a89878 100644
--- a/apps/web-ele/src/views/system/user/index.vue
+++ b/apps/web-ele/src/views/system/user/index.vue
@@ -142,14 +142,10 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新用户状态
-        const res = await updateUserStatus(row.id!, newStatus);
-        if (res) {
-          // 提示并返回成功
-          ElMessage.success($t('ui.actionMessage.operationSuccess'));
-          resolve(true);
-        } else {
-          reject(new Error('更新失败'));
-        }
+        await updateUserStatus(row.id!, newStatus);
+        // 提示并返回成功
+        ElMessage.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-naive/public/wx-xingyu.png b/apps/web-naive/public/wx-xingyu.png
new file mode 100644
index 000000000..da2e45a34
Binary files /dev/null and b/apps/web-naive/public/wx-xingyu.png differ
diff --git a/apps/web-naive/src/components/description/description.vue b/apps/web-naive/src/components/description/description.vue
index ef0239933..51f0df4d3 100644
--- a/apps/web-naive/src/components/description/description.vue
+++ b/apps/web-naive/src/components/description/description.vue
@@ -1,80 +1,198 @@
 <script lang="tsx">
-import type { DescriptionsProps } from 'naive-ui';
+import type { DescriptionsProps as NDescriptionsProps } from 'naive-ui';
 
-import type { PropType } from 'vue';
+import type { CSSProperties, PropType, Slots } from 'vue';
 
-import type { DescriptionItemSchema, DescriptionsOptions } from './typing';
+import type { DescriptionItemSchema, DescriptionProps } from './typing';
 
-import { defineComponent } from 'vue';
+import { computed, defineComponent, ref, unref, useAttrs } from 'vue';
 
-import { get } from '@vben/utils';
+import { get, getNestedValue, isFunction } from '@vben/utils';
 
-import { NDescriptions, NDescriptionsItem } from 'naive-ui';
+import { NCard, NDescriptions, NDescriptionsItem } from 'naive-ui';
 
-/** 对 Descriptions 进行二次封装 */
-const Description = defineComponent({
-  name: 'Descriptions',
-  props: {
-    data: {
-      type: Object as PropType<Record<string, any>>,
-      default: () => ({}),
-    },
-    schema: {
-      type: Array as PropType<DescriptionItemSchema[]>,
-      default: () => [],
-    },
-    // Descriptions 原生 props
-    componentProps: {
-      type: Object as PropType<DescriptionsProps>,
-      default: () => ({}),
+const props = {
+  bordered: { default: true, type: Boolean },
+  column: {
+    default: () => {
+      return { lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4 };
     },
+    type: [Number, Object],
   },
+  data: { type: Object },
+  schema: {
+    default: () => [],
+    type: Array as PropType<DescriptionItemSchema[]>,
+  },
+  size: {
+    default: 'small',
+    type: String,
+    validator: (v: string) =>
+      ['default', 'middle', 'small', undefined].includes(v),
+  },
+  title: { default: '', type: String },
+  useCard: { default: true, type: Boolean },
+  labelPlacement: { default: 'left', type: String as PropType<'left' | 'top'> },
+};
 
-  setup(props: DescriptionsOptions) {
-    // TODO @xingyu：每个 field 的 slot 的考虑
-    // TODO @xingyu：from 5.0：extra: () => getSlot(slots, 'extra')
-    /** 过滤掉不需要展示的 */
-    const shouldShowItem = (item: DescriptionItemSchema) => {
-      if (item.hidden === undefined) return true;
-      return typeof item.hidden === 'function'
-        ? !item.hidden(props.data)
-        : !item.hidden;
-    };
-    /** 渲染内容 */
-    const renderContent = (item: DescriptionItemSchema) => {
-      if (item.content) {
-        return typeof item.content === 'function'
-          ? item.content(props.data)
-          : item.content;
+function getSlot(slots: Slots, slot: string, data?: any) {
+  if (!slots || !Reflect.has(slots, slot)) {
+    return null;
+  }
+  if (!isFunction(slots[slot])) {
+    console.error(`${slot} is not a function!`);
+    return null;
+  }
+  const slotFn = slots[slot];
+  if (!slotFn) return null;
+  return slotFn({ data });
+}
+
+export default defineComponent({
+  name: 'Description',
+  props,
+  setup(props, { slots }) {
+    const propsRef = ref<null | Partial<DescriptionProps>>(null);
+
+    const prefixCls = 'description';
+    const attrs = useAttrs();
+
+    // Custom title component: get title
+    const getMergeProps = computed(() => {
+      return {
+        ...props,
+        ...(unref(propsRef) as any),
+      } as DescriptionProps;
+    });
+
+    const getProps = computed(() => {
+      const opt = {
+        ...unref(getMergeProps),
+        title: undefined,
+      };
+      return opt as DescriptionProps;
+    });
+
+    const useWrapper = computed(() => !!unref(getMergeProps).title);
+
+    const getDescriptionsProps = computed(() => {
+      return { ...unref(attrs), ...unref(getProps) } as NDescriptionsProps;
+    });
+
+    // 防止换行
+    function renderLabel({
+      label,
+      labelMinWidth,
+      labelStyle,
+    }: DescriptionItemSchema) {
+      if (!labelStyle && !labelMinWidth) {
+        return label;
       }
-      return item.field ? get(props.data, item.field) : null;
-    };
 
-    return () => (
-      <NDescriptions
-        {...props}
-        bordered={props.componentProps?.bordered}
-        column={props.componentProps?.column}
-        labelPlacement={props.componentProps?.labelPlacement || 'left'}
-        size={props.componentProps?.size}
-        title={props.componentProps?.title}
-      >
-        {props.schema?.filter(shouldShowItem).map((item) => (
-          <NDescriptionsItem
-            contentStyle={item.contentStyle}
-            key={item.field || String(item.label)}
-            label={item.label as string}
-            labelStyle={item.labelStyle}
-            span={item.span}
-          >
-            {renderContent(item)}
-          </NDescriptionsItem>
-        ))}
-      </NDescriptions>
-    );
+      const labelStyles: CSSProperties = {
+        ...labelStyle,
+        minWidth: `${labelMinWidth}px `,
+      };
+      return <div style={labelStyles}>{label}</div>;
+    }
+
+    function renderItem() {
+      const { data, schema } = unref(getProps);
+      return unref(schema)
+        .map((item) => {
+          const { contentMinWidth, field, render, show, span } = item;
+
+          if (show && isFunction(show) && !show(data)) {
+            return null;
+          }
+
+          function getContent() {
+            const _data = unref(getProps)?.data;
+            if (!_data) {
+              return null;
+            }
+            const getField = field.includes('.')
+              ? (getNestedValue(_data, field) ?? get(_data, field))
+              : get(_data, field);
+            // if (
+            //   getField &&
+            //   !Object.prototype.hasOwnProperty.call(toRefs(_data), field)
+            // ) {
+            //   return isFunction(render) ? render('', _data) : (getField ?? '');
+            // }
+            return isFunction(render)
+              ? render(getField, _data)
+              : (getField ?? '');
+          }
+
+          const width = contentMinWidth;
+          return (
+            <NDescriptionsItem key={field} span={span}>
+              {{
+                label: () => {
+                  return renderLabel(item);
+                },
+                default: () => {
+                  if (item.slot) {
+                    const slotContent = getSlot(slots, item.slot, data);
+                    return slotContent;
+                  }
+                  if (!contentMinWidth) {
+                    return getContent();
+                  }
+                  const style: CSSProperties = {
+                    minWidth: `${width}px`,
+                  };
+                  return <div style={style}>{getContent()}</div>;
+                },
+              }}
+            </NDescriptionsItem>
+          );
+        })
+        .filter((item) => !!item);
+    }
+
+    function renderDesc() {
+      return (
+        <NDescriptions
+          class={`${prefixCls}`}
+          {...(unref(getDescriptionsProps) as any)}
+        >
+          {renderItem()}
+        </NDescriptions>
+      );
+    }
+
+    function renderCard() {
+      const content = props.useCard ? renderDesc() : <div>{renderDesc()}</div>;
+      // Reduce the dom level
+      if (!props.useCard) {
+        return content;
+      }
+
+      const { title } = unref(getMergeProps);
+      const extraSlot = getSlot(slots, 'extra');
+
+      return (
+        <NCard
+          contentStyle={{ padding: '8px 0' }}
+          headerStyle={{
+            padding: '8px 16px',
+            fontSize: '14px',
+            minHeight: '24px',
+          }}
+          style={{ margin: 0 }}
+          title={title}
+        >
+          {{
+            default: () => content,
+            extra: () => extraSlot && <div>{extraSlot}</div>,
+          }}
+        </NCard>
+      );
+    }
+
+    return () => (unref(useWrapper) ? renderCard() : renderDesc());
   },
 });
-
-// TODO @xingyu：from 5.0：emits: ['register'] 事件
-export default Description;
 </script>
diff --git a/apps/web-naive/src/components/description/typing.ts b/apps/web-naive/src/components/description/typing.ts
index 7aadf72dd..9ee489678 100644
--- a/apps/web-naive/src/components/description/typing.ts
+++ b/apps/web-naive/src/components/description/typing.ts
@@ -1,27 +1,41 @@
-import type { DescriptionsProps } from 'naive-ui';
+import type { DescriptionsProps as NDescriptionsProps } from 'naive-ui';
+import type { JSX } from 'vue/jsx-runtime';
 
 import type { CSSProperties, VNode } from 'vue';
 
-// TODO @xingyu：【content】这个纠结下；1）vben2.0 是 render；https://doc.vvbin.cn/components/desc.html#usage 2）
-// TODO @xingyu：vben2.0 还有 sapn【done】、labelMinWidth、contentMinWidth
-// TODO @xingyu：【hidden】这个纠结下；1）vben2.0 是 show；
+import type { Recordable } from '@vben/types';
+
 export interface DescriptionItemSchema {
-  label: string | VNode; // 内容的描述
-  field?: string; // 对应 data 中的字段名
-  content?: ((data: any) => string | VNode) | string | VNode; // 自定义需要展示的内容，比如说 dict-tag
-  span?: number; // 包含列的数量
-  labelStyle?: CSSProperties; // 自定义标签样式
-  contentStyle?: CSSProperties; // 自定义内容样式
-  hidden?: ((data: any) => boolean) | boolean; // 是否显示
+  labelMinWidth?: number;
+  contentMinWidth?: number;
+  // 自定义标签样式
+  labelStyle?: CSSProperties;
+  // 对应 data 中的字段名
+  field: string;
+  // 内容的描述
+  label: JSX.Element | string | VNode;
+  // 包含列的数量
+  span?: number;
+  // 是否显示
+  show?: (...arg: any) => boolean;
+  // 插槽名称
+  slot?: string;
+  // 自定义需要展示的内容
+  render?: (
+    val: any,
+    data?: Recordable<any>,
+  ) => Element | JSX.Element | number | string | undefined | VNode;
 }
 
-// TODO @xingyu：vben2.0 还有 title【done】、bordered【done】d、useCollapse、collapseOptions
-// TODO @xingyu：from 5.0：bordered 默认为 true
-// TODO @xingyu：from 5.0：column 默认为 lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4
-// TODO @xingyu：from 5.0：size 默认为 small；有 'default', 'middle', 'small', undefined
-// TODO @xingyu：from 5.0：useCollapse 默认为 true
-export interface DescriptionsOptions {
-  data?: Record<string, any>; // 数据
-  schema?: DescriptionItemSchema[]; // 描述项配置
-  componentProps?: DescriptionsProps; // antd Descriptions 组件参数
+export interface DescriptionProps extends NDescriptionsProps {
+  // 是否包含卡片组件
+  useCard?: boolean;
+  // 描述项配置
+  schema: DescriptionItemSchema[];
+  // 数据
+  data: Recordable<any>;
+}
+
+export interface DescInstance {
+  setDescProps(descProps: Partial<DescriptionProps>): void;
 }
diff --git a/apps/web-naive/src/components/description/use-description.ts b/apps/web-naive/src/components/description/use-description.ts
index 7f99238bf..fd24920f0 100644
--- a/apps/web-naive/src/components/description/use-description.ts
+++ b/apps/web-naive/src/components/description/use-description.ts
@@ -1,71 +1,31 @@
-import type { DescriptionsOptions } from './typing';
+import type { Component } from 'vue';
 
-import { defineComponent, h, isReactive, reactive, watch } from 'vue';
+import type { DescInstance, DescriptionProps } from './typing';
+
+import { h, reactive } from 'vue';
 
 import Description from './description.vue';
 
-/** 描述列表 api 定义 */
-class DescriptionApi {
-  private state = reactive<Record<string, any>>({});
+export function useDescription(options?: Partial<DescriptionProps>) {
+  const propsState = reactive<Partial<DescriptionProps>>(options || {});
 
-  constructor(options: DescriptionsOptions) {
-    this.state = { ...options };
-  }
+  const api: DescInstance = {
+    setDescProps: (descProps: Partial<DescriptionProps>): void => {
+      Object.assign(propsState, descProps);
+    },
+  };
 
-  getState(): DescriptionsOptions {
-    return this.state as DescriptionsOptions;
-  }
-
-  // TODO @xingyu：【setState】纠结下：1）vben2.0 是 data https://doc.vvbin.cn/components/desc.html#usage；
-  setState(newState: Partial<DescriptionsOptions>) {
-    this.state = { ...this.state, ...newState };
-  }
-}
-
-export type ExtendedDescriptionApi = DescriptionApi;
-
-export function useDescription(options: DescriptionsOptions) {
-  const IS_REACTIVE = isReactive(options);
-  const api = new DescriptionApi(options);
-  // 扩展 API
-  const extendedApi: ExtendedDescriptionApi = api as never;
-  const Desc = defineComponent({
+  // 创建一个包装组件，将 propsState 合并到 props 中
+  const DescriptionWrapper: Component = {
     name: 'UseDescription',
     inheritAttrs: false,
-    setup(_, { attrs, slots }) {
-      // 合并props和attrs到state
-      api.setState({ ...attrs });
-
-      return () =>
-        h(
-          Description,
-          {
-            ...api.getState(),
-            ...attrs,
-          },
-          slots,
-        );
+    setup(_props, { attrs, slots }) {
+      return () => {
+        // @ts-ignore - 避免类型实例化过深
+        return h(Description, { ...propsState, ...attrs }, slots);
+      };
     },
-  });
+  };
 
-  // 响应式支持
-  if (IS_REACTIVE) {
-    watch(
-      () => options.schema,
-      (newSchema) => {
-        api.setState({ schema: newSchema });
-      },
-      { immediate: true, deep: true },
-    );
-
-    watch(
-      () => options.data,
-      (newData) => {
-        api.setState({ data: newData });
-      },
-      { immediate: true, deep: true },
-    );
-  }
-
-  return [Desc, extendedApi] as const;
+  return [DescriptionWrapper, api] as const;
 }
diff --git a/apps/web-naive/src/views/infra/apiAccessLog/data.ts b/apps/web-naive/src/views/infra/apiAccessLog/data.ts
index f4fc9f088..706928895 100644
--- a/apps/web-naive/src/views/infra/apiAccessLog/data.ts
+++ b/apps/web-naive/src/views/infra/apiAccessLog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraApiAccessLogApi } from '#/api/infra/api-access-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -181,10 +180,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userType',
       label: '用户类型',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.USER_TYPE,
-          value: data.userType,
+          value: val,
         });
       },
     },
@@ -197,10 +196,11 @@ export function useDetailSchema(): DescriptionItemSchema[] {
       label: '用户 UA',
     },
     {
+      field: 'requestMethod',
       label: '请求信息',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data?.requestMethod && data?.requestUrl) {
-          return `${data.requestMethod} ${data.requestUrl}`;
+      render: (val, data) => {
+        if (val && data?.requestUrl) {
+          return `${val} ${data.requestUrl}`;
         }
         return '';
       },
@@ -208,10 +208,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'requestParams',
       label: '请求参数',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data.requestParams) {
+      render: (val) => {
+        if (val) {
           return h(JsonViewer, {
-            value: JSON.parse(data.requestParams),
+            value: JSON.parse(val),
             previewMode: true,
           });
         }
@@ -224,26 +224,29 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     },
     {
       label: '请求时间',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data?.beginTime && data?.endTime) {
-          return `${formatDateTime(data.beginTime)} ~ ${formatDateTime(data.endTime)}`;
+      field: 'beginTime',
+      render: (val, data) => {
+        if (val && data?.endTime) {
+          return `${formatDateTime(val)} ~ ${formatDateTime(data.endTime)}`;
         }
         return '';
       },
     },
     {
       label: '请求耗时',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        return data?.duration ? `${data.duration} ms` : '';
+      field: 'duration',
+      render: (val) => {
+        return val ? `${val} ms` : '';
       },
     },
     {
       label: '操作结果',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
-        if (data?.resultCode === 0) {
+      field: 'resultCode',
+      render: (val, data) => {
+        if (val === 0) {
           return '正常';
-        } else if (data && data.resultCode > 0) {
-          return `失败 | ${data.resultCode} | ${data.resultMsg}`;
+        } else if (val > 0 && data?.resultMsg) {
+          return `失败 | ${val} | ${data.resultMsg}`;
         }
         return '';
       },
@@ -259,10 +262,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'operateType',
       label: '操作类型',
-      content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_OPERATE_TYPE,
-          value: data?.operateType,
+          value: val,
         });
       },
     },
diff --git a/apps/web-naive/src/views/infra/apiAccessLog/modules/detail.vue b/apps/web-naive/src/views/infra/apiAccessLog/modules/detail.vue
index 70869fe38..5fd1e5eeb 100644
--- a/apps/web-naive/src/views/infra/apiAccessLog/modules/detail.vue
+++ b/apps/web-naive/src/views/infra/apiAccessLog/modules/detail.vue
@@ -12,11 +12,7 @@ import { useDetailSchema } from '../data';
 const formData = ref<InfraApiAccessLogApi.ApiAccessLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    contentClass: 'mx-4',
-  },
+  column: 1,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/infra/apiErrorLog/data.ts b/apps/web-naive/src/views/infra/apiErrorLog/data.ts
index fcd977971..87316a97e 100644
--- a/apps/web-naive/src/views/infra/apiErrorLog/data.ts
+++ b/apps/web-naive/src/views/infra/apiErrorLog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraApiErrorLogApi } from '#/api/infra/api-error-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -158,10 +157,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userType',
       label: '用户类型',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.USER_TYPE,
-          value: data.userType,
+          value: val,
         });
       },
     },
@@ -176,9 +175,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'requestMethod',
       label: '请求信息',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        if (data?.requestMethod && data?.requestUrl) {
-          return `${data.requestMethod} ${data.requestUrl}`;
+      render: (val, data) => {
+        if (val && data?.requestUrl) {
+          return `${val} ${data.requestUrl}`;
         }
         return '';
       },
@@ -186,10 +185,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'requestParams',
       label: '请求参数',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        if (data.requestParams) {
+      render: (val) => {
+        if (val) {
           return h(JsonViewer, {
-            value: JSON.parse(data.requestParams),
+            value: JSON.parse(val),
             previewMode: true,
           });
         }
@@ -199,8 +198,8 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'exceptionTime',
       label: '异常时间',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        return formatDateTime(data?.exceptionTime || '') as string;
+      render: (val) => {
+        return formatDateTime(val) as string;
       },
     },
     {
@@ -210,12 +209,11 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'exceptionStackTrace',
       label: '异常堆栈',
-      hidden: (data: InfraApiErrorLogApi.ApiErrorLog) =>
-        !data?.exceptionStackTrace,
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        if (data?.exceptionStackTrace) {
+      show: (val) => !val,
+      render: (val) => {
+        if (val) {
           return h('textarea', {
-            value: data.exceptionStackTrace,
+            value: val,
             style:
               'width: 100%; min-height: 200px; max-height: 400px; resize: vertical;',
             readonly: true,
@@ -227,24 +225,24 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'processStatus',
       label: '处理状态',
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS,
-          value: data?.processStatus,
+          value: val,
         });
       },
     },
     {
       field: 'processUserId',
       label: '处理人',
-      hidden: (data: InfraApiErrorLogApi.ApiErrorLog) => !data?.processUserId,
+      show: (val) => !val,
     },
     {
       field: 'processTime',
       label: '处理时间',
-      hidden: (data: InfraApiErrorLogApi.ApiErrorLog) => !data?.processTime,
-      content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
-        return formatDateTime(data?.processTime || '') as string;
+      show: (val) => !val,
+      render: (val) => {
+        return formatDateTime(val) as string;
       },
     },
   ];
diff --git a/apps/web-naive/src/views/infra/apiErrorLog/modules/detail.vue b/apps/web-naive/src/views/infra/apiErrorLog/modules/detail.vue
index 3d4836696..b46a368e8 100644
--- a/apps/web-naive/src/views/infra/apiErrorLog/modules/detail.vue
+++ b/apps/web-naive/src/views/infra/apiErrorLog/modules/detail.vue
@@ -12,11 +12,7 @@ import { useDetailSchema } from '../data';
 const formData = ref<InfraApiErrorLogApi.ApiErrorLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    contentClass: 'mx-4',
-  },
+  column: 1,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/infra/codegen/data.ts b/apps/web-naive/src/views/infra/codegen/data.ts
index 2810eaa01..ed742d84f 100644
--- a/apps/web-naive/src/views/infra/codegen/data.ts
+++ b/apps/web-naive/src/views/infra/codegen/data.ts
@@ -25,7 +25,7 @@ export function useImportTableFormSchema(): VbenFormSchema[] {
       label: '数据源',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getDataSourceConfigList(),
+        api: getDataSourceConfigList,
         labelField: 'name',
         valueField: 'id',
         autoSelect: 'first',
diff --git a/apps/web-naive/src/views/infra/codegen/edit/index.vue b/apps/web-naive/src/views/infra/codegen/edit/index.vue
index 3018cbbee..4b0d5d8bd 100644
--- a/apps/web-naive/src/views/infra/codegen/edit/index.vue
+++ b/apps/web-naive/src/views/infra/codegen/edit/index.vue
@@ -86,7 +86,7 @@ async function submitForm() {
 const tabs = useTabs();
 function close() {
   tabs.closeCurrentTab();
-  router.push('/infra/codegen');
+  router.push({ name: 'InfraCodegen' });
 }
 
 /** 下一步 */
diff --git a/apps/web-naive/src/views/infra/job/data.ts b/apps/web-naive/src/views/infra/job/data.ts
index 5a72b3ead..e62160b82 100644
--- a/apps/web-naive/src/views/infra/job/data.ts
+++ b/apps/web-naive/src/views/infra/job/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraJobApi } from '#/api/infra/job';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h, markRaw } from 'vue';
@@ -191,10 +190,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '任务状态',
-      content: (data: InfraJobApi.Job) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_JOB_STATUS,
-          value: data?.status,
+          value: val,
         });
       },
     },
@@ -216,27 +215,27 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     },
     {
       label: '重试间隔',
-      content: (data: InfraJobApi.Job) => {
-        return data?.retryInterval ? `${data.retryInterval} 毫秒` : '无间隔';
+      field: 'retryInterval',
+      render: (val) => {
+        return val ? `${val} 毫秒` : '无间隔';
       },
     },
     {
       label: '监控超时时间',
-      content: (data: InfraJobApi.Job) => {
-        return data?.monitorTimeout && data.monitorTimeout > 0
-          ? `${data.monitorTimeout} 毫秒`
-          : '未开启';
+      field: 'monitorTimeout',
+      render: (val) => {
+        return val && val > 0 ? `${val} 毫秒` : '未开启';
       },
     },
     {
       field: 'nextTimes',
       label: '后续执行时间',
-      content: (data: InfraJobApi.Job) => {
-        if (!data?.nextTimes || data.nextTimes.length === 0) {
+      render: (val) => {
+        if (!val || val.length === 0) {
           return '无后续执行时间';
         }
         return h(NTimeline, {}, () =>
-          data.nextTimes?.map((time: Date) =>
+          val?.map((time: Date) =>
             h(NTimelineItem, {}, () => formatDateTime(time)),
           ),
         );
diff --git a/apps/web-naive/src/views/infra/job/logger/data.ts b/apps/web-naive/src/views/infra/job/logger/data.ts
index cf1ec6d88..f39199f57 100644
--- a/apps/web-naive/src/views/infra/job/logger/data.ts
+++ b/apps/web-naive/src/views/infra/job/logger/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { InfraJobLogApi } from '#/api/infra/job-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -148,9 +147,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'beginTime',
       label: '执行时间',
-      content: (data: InfraJobLogApi.JobLog) => {
-        if (data?.beginTime && data?.endTime) {
-          return `${formatDateTime(data.beginTime)} ~ ${formatDateTime(data.endTime)}`;
+      render: (val, data) => {
+        if (val && data?.endTime) {
+          return `${formatDateTime(val)} ~ ${formatDateTime(data.endTime)}`;
         }
         return '';
       },
@@ -158,17 +157,15 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'duration',
       label: '执行时长',
-      content: (data: InfraJobLogApi.JobLog) => {
-        return data?.duration ? `${data.duration} 毫秒` : '';
-      },
+      render: (val) => (val ? `${val} 毫秒` : ''),
     },
     {
       field: 'status',
       label: '任务状态',
-      content: (data: InfraJobLogApi.JobLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_JOB_LOG_STATUS,
-          value: data?.status,
+          value: val,
         });
       },
     },
diff --git a/apps/web-naive/src/views/infra/job/logger/modules/detail.vue b/apps/web-naive/src/views/infra/job/logger/modules/detail.vue
index 75b26d90a..a63352a78 100644
--- a/apps/web-naive/src/views/infra/job/logger/modules/detail.vue
+++ b/apps/web-naive/src/views/infra/job/logger/modules/detail.vue
@@ -13,11 +13,7 @@ import { useDetailSchema } from '../data';
 const formData = ref<InfraJobLogApi.JobLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    contentClass: 'mx-4',
-  },
+  column: 1,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/infra/job/modules/detail.vue b/apps/web-naive/src/views/infra/job/modules/detail.vue
index 0a8078ce5..4d58ca0a0 100644
--- a/apps/web-naive/src/views/infra/job/modules/detail.vue
+++ b/apps/web-naive/src/views/infra/job/modules/detail.vue
@@ -14,11 +14,7 @@ const formData = ref<InfraJobApi.Job>(); // 任务详情
 const nextTimes = ref<Date[]>([]); // 下一次执行时间
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    contentClass: 'mx-4',
-  },
+  column: 1,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/infra/redis/modules/memory.vue b/apps/web-naive/src/views/infra/redis/modules/memory.vue
index 6eeda8958..5220c4631 100644
--- a/apps/web-naive/src/views/infra/redis/modules/memory.vue
+++ b/apps/web-naive/src/views/infra/redis/modules/memory.vue
@@ -94,7 +94,7 @@ function renderMemoryChart() {
         detail: {
           show: true,
           offsetCenter: [0, '50%'],
-          color: 'auto',
+          color: 'inherit',
           fontSize: 30,
           formatter: usedMemory,
         },
diff --git a/apps/web-naive/src/views/system/dept/data.ts b/apps/web-naive/src/views/system/dept/data.ts
index ae9a462c6..b81ccbc2f 100644
--- a/apps/web-naive/src/views/system/dept/data.ts
+++ b/apps/web-naive/src/views/system/dept/data.ts
@@ -75,7 +75,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '负责人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择负责人',
diff --git a/apps/web-naive/src/views/system/dict/data.ts b/apps/web-naive/src/views/system/dict/data.ts
index 76d5be456..6049b56a1 100644
--- a/apps/web-naive/src/views/system/dict/data.ts
+++ b/apps/web-naive/src/views/system/dict/data.ts
@@ -186,7 +186,7 @@ export function useDataFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: (values) => {
         return {
-          api: () => getSimpleDictTypeList(),
+          api: getSimpleDictTypeList,
           placeholder: '请输入字典类型',
           labelField: 'name',
           valueField: 'type',
diff --git a/apps/web-naive/src/views/system/loginlog/data.ts b/apps/web-naive/src/views/system/loginlog/data.ts
index 03704e311..dfef348df 100644
--- a/apps/web-naive/src/views/system/loginlog/data.ts
+++ b/apps/web-naive/src/views/system/loginlog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemLoginLogApi } from '#/api/system/login-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -110,10 +109,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'logType',
       label: '操作类型',
-      content: (data: SystemLoginLogApi.LoginLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_LOGIN_TYPE,
-          value: data?.logType,
+          value: val,
         });
       },
     },
@@ -132,19 +131,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'result',
       label: '登录结果',
-      content: (data: SystemLoginLogApi.LoginLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_LOGIN_RESULT,
-          value: data?.result,
+          value: val,
         });
       },
     },
     {
       field: 'createTime',
       label: '登录日期',
-      content: (data: SystemLoginLogApi.LoginLog) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-naive/src/views/system/loginlog/modules/detail.vue b/apps/web-naive/src/views/system/loginlog/modules/detail.vue
index 9d3ceed35..4904fd4ad 100644
--- a/apps/web-naive/src/views/system/loginlog/modules/detail.vue
+++ b/apps/web-naive/src/views/system/loginlog/modules/detail.vue
@@ -12,11 +12,7 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemLoginLogApi.LoginLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    contentClass: 'mx-4',
-  },
+  column: 1,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/system/mail/log/data.ts b/apps/web-naive/src/views/system/mail/log/data.ts
index 3297b8eb4..d61137560 100644
--- a/apps/web-naive/src/views/system/mail/log/data.ts
+++ b/apps/web-naive/src/views/system/mail/log/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemMailLogApi } from '#/api/system/mail/log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -59,7 +58,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '邮箱账号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleMailAccountList(),
+        api: getSimpleMailAccountList,
         labelField: 'mail',
         valueField: 'id',
         clearable: true,
@@ -164,9 +163,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: SystemMailLogApi.MailLog) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'fromMail',
@@ -175,12 +172,12 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userId',
       label: '接收用户',
-      content: (data: SystemMailLogApi.MailLog) => {
-        if (data?.userType && data?.userId) {
+      render: (val, data) => {
+        if (val && data?.userId) {
           return h('div', [
             h(DictTag, {
               type: DICT_TYPE.USER_TYPE,
-              value: data.userType,
+              value: val,
             }),
             ` (${data.userId})`,
           ]);
@@ -191,10 +188,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'toMails',
       label: '接收信息',
-      content: (data: SystemMailLogApi.MailLog) => {
+      render: (val, data) => {
         const lines: string[] = [];
-        if (data?.toMails && data.toMails.length > 0) {
-          lines.push(`收件：${data.toMails.join('、')}`);
+        if (val && val.length > 0) {
+          lines.push(`收件：${val.join('、')}`);
         }
         if (data?.ccMails && data.ccMails.length > 0) {
           lines.push(`抄送：${data.ccMails.join('、')}`);
@@ -227,28 +224,22 @@ export function useDetailSchema(): DescriptionItemSchema[] {
       field: 'templateContent',
       label: '邮件内容',
       span: 2,
-      content: (data: SystemMailLogApi.MailLog) => {
-        return h('div', {
-          innerHTML: data?.templateContent || '',
-        });
-      },
+      render: (val) => h('div', { innerHTML: val || '' }),
     },
     {
       field: 'sendStatus',
       label: '发送状态',
-      content: (data: SystemMailLogApi.MailLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS,
-          value: data?.sendStatus,
+          value: val,
         });
       },
     },
     {
       field: 'sendTime',
       label: '发送时间',
-      content: (data: SystemMailLogApi.MailLog) => {
-        return formatDateTime(data?.sendTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'sendMessageId',
diff --git a/apps/web-naive/src/views/system/mail/log/modules/detail.vue b/apps/web-naive/src/views/system/mail/log/modules/detail.vue
index 8775e691d..63ad9ad09 100644
--- a/apps/web-naive/src/views/system/mail/log/modules/detail.vue
+++ b/apps/web-naive/src/views/system/mail/log/modules/detail.vue
@@ -12,11 +12,7 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemMailLogApi.MailLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 2,
-    contentClass: 'mx-4',
-  },
+  column: 2,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/system/mail/template/data.ts b/apps/web-naive/src/views/system/mail/template/data.ts
index 01aded480..fa20c0554 100644
--- a/apps/web-naive/src/views/system/mail/template/data.ts
+++ b/apps/web-naive/src/views/system/mail/template/data.ts
@@ -42,7 +42,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '邮箱账号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleMailAccountList(),
+        api: getSimpleMailAccountList,
         labelField: 'mail',
         valueField: 'id',
         placeholder: '请选择邮箱账号',
@@ -187,7 +187,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '邮箱账号',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleMailAccountList(),
+        api: getSimpleMailAccountList,
         labelField: 'mail',
         valueField: 'id',
         clearable: true,
diff --git a/apps/web-naive/src/views/system/notify/message/data.ts b/apps/web-naive/src/views/system/notify/message/data.ts
index 951671dd9..72d423d75 100644
--- a/apps/web-naive/src/views/system/notify/message/data.ts
+++ b/apps/web-naive/src/views/system/notify/message/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -166,10 +165,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'userType',
       label: '用户类型',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.USER_TYPE,
-          value: data?.userType,
+          value: val,
         });
       },
     },
@@ -196,9 +195,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'templateParams',
       label: '模版参数',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         try {
-          return JSON.stringify(data?.templateParams);
+          return JSON.stringify(val);
         } catch {
           return '';
         }
@@ -207,36 +206,32 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'templateType',
       label: '模版类型',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
-          value: data?.templateType,
+          value: val,
         });
       },
     },
     {
       field: 'readStatus',
       label: '是否已读',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_BOOLEAN_STRING,
-          value: data?.readStatus,
+          value: val,
         });
       },
     },
     {
       field: 'readTime',
       label: '阅读时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.readTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
diff --git a/apps/web-naive/src/views/system/notify/message/modules/detail.vue b/apps/web-naive/src/views/system/notify/message/modules/detail.vue
index 6e4c26eab..8305d2470 100644
--- a/apps/web-naive/src/views/system/notify/message/modules/detail.vue
+++ b/apps/web-naive/src/views/system/notify/message/modules/detail.vue
@@ -12,11 +12,7 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    contentClass: 'mx-4',
-  },
+  column: 1,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/system/notify/my/data.ts b/apps/web-naive/src/views/system/notify/my/data.ts
index 119f9097e..ca56be57b 100644
--- a/apps/web-naive/src/views/system/notify/my/data.ts
+++ b/apps/web-naive/src/views/system/notify/my/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -103,36 +102,32 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '发送时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'templateType',
       label: '消息类型',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
-          value: data?.templateType,
+          value: val,
         });
       },
     },
     {
       field: 'readStatus',
       label: '是否已读',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.INFRA_BOOLEAN_STRING,
-          value: data?.readStatus,
+          value: val,
         });
       },
     },
     {
       field: 'readTime',
       label: '阅读时间',
-      content: (data: SystemNotifyMessageApi.NotifyMessage) => {
-        return formatDateTime(data?.readTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'templateContent',
diff --git a/apps/web-naive/src/views/system/notify/my/modules/detail.vue b/apps/web-naive/src/views/system/notify/my/modules/detail.vue
index 6e4c26eab..8305d2470 100644
--- a/apps/web-naive/src/views/system/notify/my/modules/detail.vue
+++ b/apps/web-naive/src/views/system/notify/my/modules/detail.vue
@@ -12,11 +12,7 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    contentClass: 'mx-4',
-  },
+  column: 1,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/system/notify/template/data.ts b/apps/web-naive/src/views/system/notify/template/data.ts
index 398239bf2..67e09176b 100644
--- a/apps/web-naive/src/views/system/notify/template/data.ts
+++ b/apps/web-naive/src/views/system/notify/template/data.ts
@@ -196,7 +196,7 @@ export function useSendNotifyFormSchema(): VbenFormSchema[] {
       label: '接收人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         placeholder: '请选择接收人',
diff --git a/apps/web-naive/src/views/system/operatelog/data.ts b/apps/web-naive/src/views/system/operatelog/data.ts
index 096103466..fd4eed9f0 100644
--- a/apps/web-naive/src/views/system/operatelog/data.ts
+++ b/apps/web-naive/src/views/system/operatelog/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemOperateLogApi } from '#/api/system/operate-log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { formatDateTime } from '@vben/utils';
@@ -16,7 +15,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '操作人',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleUserList(),
+        api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
         clearable: true,
@@ -134,7 +133,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'traceId',
       label: '链路追踪',
-      hidden: (data: SystemOperateLogApi.OperateLog) => !data?.traceId,
+      show: (val) => !val,
     },
     {
       field: 'userId',
@@ -167,13 +166,14 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'extra',
       label: '操作拓展参数',
-      hidden: (data: SystemOperateLogApi.OperateLog) => !data?.extra,
+      show: (val) => !val,
     },
     {
+      field: 'requestUrl',
       label: '请求 URL',
-      content: (data: SystemOperateLogApi.OperateLog) => {
-        if (data?.requestMethod && data?.requestUrl) {
-          return `${data.requestMethod} ${data.requestUrl}`;
+      render: (val, data) => {
+        if (data?.requestMethod && val) {
+          return `${data.requestMethod} ${val}`;
         }
         return '';
       },
@@ -181,9 +181,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '操作时间',
-      content: (data: SystemOperateLogApi.OperateLog) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'bizId',
diff --git a/apps/web-naive/src/views/system/operatelog/modules/detail.vue b/apps/web-naive/src/views/system/operatelog/modules/detail.vue
index daa439f00..94f1c1059 100644
--- a/apps/web-naive/src/views/system/operatelog/modules/detail.vue
+++ b/apps/web-naive/src/views/system/operatelog/modules/detail.vue
@@ -12,11 +12,7 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemOperateLogApi.OperateLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    contentClass: 'mx-4',
-  },
+  column: 1,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/system/sms/log/data.ts b/apps/web-naive/src/views/system/sms/log/data.ts
index a18d2e6dc..6fea4bb36 100644
--- a/apps/web-naive/src/views/system/sms/log/data.ts
+++ b/apps/web-naive/src/views/system/sms/log/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemSmsLogApi } from '#/api/system/sms/log';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -30,7 +29,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '短信渠道',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleSmsChannelList(),
+        api: getSimpleSmsChannelList,
         labelField: 'signature',
         valueField: 'id',
         clearable: true,
@@ -179,9 +178,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: SystemSmsLogApi.SmsLog) => {
-        return formatDateTime(data?.createTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'mobile',
@@ -198,10 +195,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'templateType',
       label: '模板类型',
-      content: (data: SystemSmsLogApi.SmsLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE,
-          value: data?.templateType,
+          value: val,
         });
       },
     },
@@ -212,19 +209,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'sendStatus',
       label: '发送状态',
-      content: (data: SystemSmsLogApi.SmsLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SMS_SEND_STATUS,
-          value: data?.sendStatus,
+          value: val,
         });
       },
     },
     {
       field: 'sendTime',
       label: '发送时间',
-      content: (data: SystemSmsLogApi.SmsLog) => {
-        return formatDateTime(data?.sendTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'apiSendCode',
@@ -237,19 +232,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'receiveStatus',
       label: '接收状态',
-      content: (data: SystemSmsLogApi.SmsLog) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS,
-          value: data?.receiveStatus,
+          value: val,
         });
       },
     },
     {
       field: 'receiveTime',
       label: '接收时间',
-      content: (data: SystemSmsLogApi.SmsLog) => {
-        return formatDateTime(data?.receiveTime || '') as string;
-      },
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'apiReceiveCode',
diff --git a/apps/web-naive/src/views/system/sms/log/modules/detail.vue b/apps/web-naive/src/views/system/sms/log/modules/detail.vue
index fcc8bfc94..79c4ddcb7 100644
--- a/apps/web-naive/src/views/system/sms/log/modules/detail.vue
+++ b/apps/web-naive/src/views/system/sms/log/modules/detail.vue
@@ -12,11 +12,7 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemSmsLogApi.SmsLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 2,
-    contentClass: 'mx-4',
-  },
+  column: 2,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/system/sms/template/data.ts b/apps/web-naive/src/views/system/sms/template/data.ts
index 268c67ac6..d8b381040 100644
--- a/apps/web-naive/src/views/system/sms/template/data.ts
+++ b/apps/web-naive/src/views/system/sms/template/data.ts
@@ -52,7 +52,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '短信渠道',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleSmsChannelList(),
+        api: getSimpleSmsChannelList,
         labelField: 'signature',
         valueField: 'id',
         placeholder: '请选择短信渠道',
@@ -146,7 +146,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '短信渠道',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleSmsChannelList(),
+        api: getSimpleSmsChannelList,
         labelField: 'signature',
         valueField: 'id',
         clearable: true,
diff --git a/apps/web-naive/src/views/system/social/user/data.ts b/apps/web-naive/src/views/system/social/user/data.ts
index da5cba3d7..a8fdc904a 100644
--- a/apps/web-naive/src/views/system/social/user/data.ts
+++ b/apps/web-naive/src/views/system/social/user/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemSocialUserApi } from '#/api/system/social/user';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -8,6 +7,8 @@ import { h } from 'vue';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
+import { NImage } from 'naive-ui';
+
 import { DictTag } from '#/components/dict-tag';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -111,10 +112,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'type',
       label: '社交平台',
-      content: (data: SystemSocialUserApi.SocialUser) => {
+      render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_SOCIAL_TYPE,
-          value: data?.type,
+          value: val,
         });
       },
     },
@@ -125,16 +126,11 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'avatar',
       label: '用户头像',
-      // TODO @芋艿：使用 antd 的 Image 组件
-      content: (data: SystemSocialUserApi.SocialUser) => {
-        if (data?.avatar) {
-          return h('img', {
-            src: data.avatar,
+      render: (val) => {
+        if (val) {
+          return h(NImage, {
+            src: val,
             style: 'width: 30px; height: 30px; cursor: pointer;',
-            onClick: () => {
-              // 可以添加图片预览功能
-              window.open(data.avatar, '_blank');
-            },
           });
         }
         return '无';
diff --git a/apps/web-naive/src/views/system/social/user/modules/detail.vue b/apps/web-naive/src/views/system/social/user/modules/detail.vue
index 6234ae279..8faeec7b3 100644
--- a/apps/web-naive/src/views/system/social/user/modules/detail.vue
+++ b/apps/web-naive/src/views/system/social/user/modules/detail.vue
@@ -14,13 +14,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemSocialUserApi.SocialUser>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    size: 'middle',
-    class: 'mx-4',
-    labelStyle: { width: '185px' },
-  },
+  column: 1,
+  size: 'medium',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/views/system/tenant/data.ts b/apps/web-naive/src/views/system/tenant/data.ts
index 615f5607b..cc8cdb22e 100644
--- a/apps/web-naive/src/views/system/tenant/data.ts
+++ b/apps/web-naive/src/views/system/tenant/data.ts
@@ -9,7 +9,6 @@ import { z } from '#/adapter/form';
 import { getTenantPackageList } from '#/api/system/tenant-package';
 import { getRangePickerDefaultProps } from '#/utils';
 
-// TODO @xingyu：这个不用 ref 么？
 let tenantPackageList: SystemTenantPackageApi.TenantPackage[] = [];
 
 async function getTenantPackageData() {
@@ -40,7 +39,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '租户套餐',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getTenantPackageList(),
+        api: getTenantPackageList,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择租户套餐',
diff --git a/apps/web-naive/src/views/system/user/data.ts b/apps/web-naive/src/views/system/user/data.ts
index a6b896579..cf093063f 100644
--- a/apps/web-naive/src/views/system/user/data.ts
+++ b/apps/web-naive/src/views/system/user/data.ts
@@ -70,7 +70,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '岗位',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimplePostList(),
+        api: getSimplePostList,
         labelField: 'name',
         valueField: 'id',
         tag: true,
@@ -216,7 +216,7 @@ export function useAssignRoleFormSchema(): VbenFormSchema[] {
       label: '角色',
       component: 'ApiSelect',
       componentProps: {
-        api: () => getSimpleRoleList(),
+        api: getSimpleRoleList,
         labelField: 'name',
         valueField: 'id',
         tag: true,
diff --git a/apps/web-naive/src/views/system/user/index.vue b/apps/web-naive/src/views/system/user/index.vue
index 0dd926595..29c5a28a0 100644
--- a/apps/web-naive/src/views/system/user/index.vue
+++ b/apps/web-naive/src/views/system/user/index.vue
@@ -144,14 +144,10 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新用户状态
-        const res = await updateUserStatus(row.id!, newStatus);
-        if (res) {
-          // 提示并返回成功
-          message.success($t('ui.actionMessage.operationSuccess'));
-          resolve(true);
-        } else {
-          reject(new Error('更新失败'));
-        }
+        await updateUserStatus(row.id!, newStatus);
+        // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/packages/@core/base/shared/src/utils/util.ts b/packages/@core/base/shared/src/utils/util.ts
index ea7ddbedd..5e2316a89 100644
--- a/packages/@core/base/shared/src/utils/util.ts
+++ b/packages/@core/base/shared/src/utils/util.ts
@@ -48,23 +48,55 @@ export function getNestedValue<T>(obj: T, path: string): any {
  * @param key 参数键名
  * @param urlStr 链接地址，默认为当前浏览器的地址
  */
-export const getUrlNumberValue = (
+export function getUrlNumberValue(
   key: string,
   urlStr: string = location.href,
-): number => {
+): number {
   return Number(getUrlValue(key, urlStr));
-};
+}
 
 /**
  * 获取链接的参数值
  * @param key 参数键名
  * @param urlStr 链接地址，默认为当前浏览器的地址
  */
-export const getUrlValue = (
+export function getUrlValue(
   key: string,
   urlStr: string = location.href,
-): string => {
+): string {
   if (!urlStr || !key) return '';
   const url = new URL(decodeURIComponent(urlStr));
   return url.searchParams.get(key) ?? '';
-};
+}
+
+/**
+ * 将值复制到目标对象，且以目标对象属性为准，例：target: {a:1} source:{a:2,b:3} 结果为：{a:2}
+ * @param target 目标对象
+ * @param source 源对象
+ */
+export function copyValueToTarget(target: any, source: any) {
+  const newObj = Object.assign({}, target, source);
+  // 删除多余属性
+  Object.keys(newObj).forEach((key) => {
+    // 如果不是target中的属性则删除
+    if (!Object.keys(target).includes(key)) {
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+      delete newObj[key];
+    }
+  });
+  // 更新目标对象值
+  Object.assign(target, newObj);
+}
+
+/** 实现 groupBy 功能 */
+export function groupBy(array: any[], key: string) {
+  const result: Record<string, any[]> = {};
+  for (const item of array) {
+    const groupKey = item[key];
+    if (!result[groupKey]) {
+      result[groupKey] = [];
+    }
+    result[groupKey].push(item);
+  }
+  return result;
+}
\ No newline at end of file
diff --git a/packages/constants/src/dict-enum.ts b/packages/constants/src/dict-enum.ts
index 06c4182dd..c2ffca955 100644
--- a/packages/constants/src/dict-enum.ts
+++ b/packages/constants/src/dict-enum.ts
@@ -59,6 +59,7 @@ const PAY_DICT = {
   PAY_NOTIFY_STATUS: 'pay_notify_status', // 商户支付回调状态
   PAY_NOTIFY_TYPE: 'pay_notify_type', // 商户支付回调状态
   PAY_TRANSFER_STATUS: 'pay_transfer_status', // 转账订单状态
+  PAY_TRANSFER_TYPE: 'pay_transfer_type', // 转账类型
 } as const;
 
 /** ========== MP - 公众号模块 ========== */
@@ -142,6 +143,7 @@ const AI_DICT = {
   AI_WRITE_LENGTH: 'ai_write_length', // AI 写作长度
   AI_WRITE_TONE: 'ai_write_tone', // AI 写作语气
   AI_WRITE_TYPE: 'ai_write_type', // AI 写作类型
+  AI_MCP_CLIENT_NAME: 'ai_mcp_client_name', // AI MCP Client 名字
 } as const;
 
 /** ========== IOT - 物联网模块 ========== */
diff --git a/packages/effects/common-ui/src/components/card/statistic-card/index.ts b/packages/effects/common-ui/src/components/card/statistic-card/index.ts
new file mode 100644
index 000000000..7305e5e68
--- /dev/null
+++ b/packages/effects/common-ui/src/components/card/statistic-card/index.ts
@@ -0,0 +1,3 @@
+// add by 芋艿：统计卡片，目前 mall 模块在使用
+export { default as StatisticCard } from './statistic-card.vue';
+export * from './types';
diff --git a/packages/effects/common-ui/src/components/card/statistic-card/statistic-card.vue b/packages/effects/common-ui/src/components/card/statistic-card/statistic-card.vue
new file mode 100644
index 000000000..d48b40d62
--- /dev/null
+++ b/packages/effects/common-ui/src/components/card/statistic-card/statistic-card.vue
@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import type { StatisticCardProps } from './types';
+
+import {
+  Card,
+  CardContent,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  VbenCountToAnimator,
+  VbenIcon,
+} from '@vben-core/shadcn-ui';
+
+/** 统计卡片 */
+defineOptions({ name: 'StatisticCard' });
+
+withDefaults(defineProps<StatisticCardProps>(), {
+  percentLabel: '环比',
+});
+</script>
+
+<template>
+  <Card class="h-full">
+    <CardContent class="flex flex-col gap-2 p-6">
+      <div class="text-muted-foreground flex items-center justify-between">
+        <span class="text-sm">{{ title }}</span>
+        <TooltipProvider v-if="tooltip">
+          <Tooltip>
+            <TooltipTrigger>
+              <VbenIcon
+                icon="lucide:circle-alert"
+                class="text-muted-foreground size-4 cursor-help"
+              />
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{{ tooltip }}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+      <div class="mb-4 text-3xl font-medium">
+        <VbenCountToAnimator
+          :prefix="prefix"
+          :end-val="value ?? 0"
+          :decimals="decimals ?? 0"
+        />
+      </div>
+      <div class="flex flex-row gap-1 text-sm">
+        <span class="text-muted-foreground">{{ percentLabel }}</span>
+        <span
+          :class="
+            Number(percent) > 0
+              ? 'text-destructive'
+              : 'text-emerald-600 dark:text-emerald-400'
+          "
+          class="flex items-center gap-0.5"
+        >
+          {{ Math.abs(Number(percent ?? 0)).toFixed(2) }}%
+          <VbenIcon
+            :icon="
+              Number(percent) > 0
+                ? 'lucide:trending-up'
+                : 'lucide:trending-down'
+            "
+            class="size-3"
+          />
+        </span>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/packages/effects/common-ui/src/components/card/statistic-card/types.ts b/packages/effects/common-ui/src/components/card/statistic-card/types.ts
new file mode 100644
index 000000000..acc36a57b
--- /dev/null
+++ b/packages/effects/common-ui/src/components/card/statistic-card/types.ts
@@ -0,0 +1,16 @@
+export interface StatisticCardProps {
+  /** 标题 */
+  title: string;
+  /** 提示信息 */
+  tooltip?: string;
+  /** 前缀 */
+  prefix?: string;
+  /** 数值 */
+  value?: number;
+  /** 小数位数 */
+  decimals?: number;
+  /** 环比百分比 */
+  percent?: number | string;
+  /** 环比标签文本 */
+  percentLabel?: string;
+}
diff --git a/packages/effects/common-ui/src/components/summary-card/index.ts b/packages/effects/common-ui/src/components/card/summary-card/index.ts
similarity index 100%
rename from packages/effects/common-ui/src/components/summary-card/index.ts
rename to packages/effects/common-ui/src/components/card/summary-card/index.ts
diff --git a/packages/effects/common-ui/src/components/summary-card/summary-card.vue b/packages/effects/common-ui/src/components/card/summary-card/summary-card.vue
similarity index 100%
rename from packages/effects/common-ui/src/components/summary-card/summary-card.vue
rename to packages/effects/common-ui/src/components/card/summary-card/summary-card.vue
diff --git a/packages/effects/common-ui/src/components/summary-card/types.ts b/packages/effects/common-ui/src/components/card/summary-card/types.ts
similarity index 100%
rename from packages/effects/common-ui/src/components/summary-card/types.ts
rename to packages/effects/common-ui/src/components/card/summary-card/types.ts
diff --git a/packages/effects/common-ui/src/components/index.ts b/packages/effects/common-ui/src/components/index.ts
index efba68250..45409d5f9 100644
--- a/packages/effects/common-ui/src/components/index.ts
+++ b/packages/effects/common-ui/src/components/index.ts
@@ -4,7 +4,6 @@ export * from './col-page';
 export * from './content-wrap';
 export * from './count-to';
 export * from './doc-alert';
-export * from './summary-card';
 export * from './ellipsis-text';
 export * from './icon-picker';
 export * from './iframe';
@@ -12,6 +11,8 @@ export * from './json-viewer';
 export * from './loading';
 export * from './page';
 export * from './resize';
+export * from './card/statistic-card';
+export * from './card/summary-card';
 export * from './tippy';
 export * from './tree';
 export * from '@vben-core/form-ui';
diff --git a/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue b/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue
index 590c33428..236b4764d 100644
--- a/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue
+++ b/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue
@@ -41,22 +41,21 @@ defineEmits(['click']);
             'rounded-br-xl': index === items.length - 1,
           }"
           class="border-border group w-full cursor-pointer border-r border-t p-4 transition-all hover:shadow-xl md:w-1/2 lg:w-1/3"
+          @click="$emit('click', item)"
         >
           <div class="flex items-center">
             <VbenIcon
               :color="item.color"
               :icon="item.icon"
               class="size-8 transition-all duration-300 group-hover:scale-110"
-              @click="$emit('click', item)"
             />
             <span class="ml-4 text-lg font-medium">{{ item.title }}</span>
           </div>
           <div class="text-foreground/80 mt-4 flex h-10">
-            {{ item.content }}
+            {{ item.group }}
           </div>
           <div class="text-foreground/80 flex justify-between">
-            <span>{{ item.group }}</span>
-            <span>{{ item.date }}</span>
+            <span>{{ item.content }}</span>
           </div>
         </div>
       </template>
diff --git a/packages/effects/plugins/src/echarts/echarts.ts b/packages/effects/plugins/src/echarts/echarts.ts
index 2b85a0476..2dfe2a8a3 100644
--- a/packages/effects/plugins/src/echarts/echarts.ts
+++ b/packages/effects/plugins/src/echarts/echarts.ts
@@ -18,6 +18,7 @@ import type { ComposeOption } from 'echarts/core';
 
 import {
   BarChart,
+  FunnelChart,
   GaugeChart,
   LineChart,
   MapChart,
@@ -66,6 +67,7 @@ echarts.use([
   TransformComponent,
   BarChart,
   LineChart,
+  FunnelChart,
   GaugeChart,
   LabelLayout,
   UniversalTransition,
diff --git a/packages/icons/src/svg/icons/gpt.svg b/packages/icons/src/svg/icons/ai/gpt.svg
similarity index 100%
rename from packages/icons/src/svg/icons/gpt.svg
rename to packages/icons/src/svg/icons/ai/gpt.svg
diff --git a/packages/icons/src/svg/icons/bpm-approve.svg b/packages/icons/src/svg/icons/bpm/bpm-approve.svg
similarity index 100%
rename from packages/icons/src/svg/icons/bpm-approve.svg
rename to packages/icons/src/svg/icons/bpm/bpm-approve.svg
diff --git a/packages/icons/src/svg/icons/bpm-cancel.svg b/packages/icons/src/svg/icons/bpm/bpm-cancel.svg
similarity index 100%
rename from packages/icons/src/svg/icons/bpm-cancel.svg
rename to packages/icons/src/svg/icons/bpm/bpm-cancel.svg
diff --git a/packages/icons/src/svg/icons/bpm-reject.svg b/packages/icons/src/svg/icons/bpm/bpm-reject.svg
similarity index 100%
rename from packages/icons/src/svg/icons/bpm-reject.svg
rename to packages/icons/src/svg/icons/bpm/bpm-reject.svg
diff --git a/packages/icons/src/svg/icons/bpm-running.svg b/packages/icons/src/svg/icons/bpm/bpm-running.svg
similarity index 100%
rename from packages/icons/src/svg/icons/bpm-running.svg
rename to packages/icons/src/svg/icons/bpm/bpm-running.svg
diff --git a/packages/icons/src/svg/icons/alipay-app.svg b/packages/icons/src/svg/icons/pay/alipay-app.svg
similarity index 100%
rename from packages/icons/src/svg/icons/alipay-app.svg
rename to packages/icons/src/svg/icons/pay/alipay-app.svg
diff --git a/packages/icons/src/svg/icons/alipay-bar.svg b/packages/icons/src/svg/icons/pay/alipay-bar.svg
similarity index 100%
rename from packages/icons/src/svg/icons/alipay-bar.svg
rename to packages/icons/src/svg/icons/pay/alipay-bar.svg
diff --git a/packages/icons/src/svg/icons/alipay-pc.svg b/packages/icons/src/svg/icons/pay/alipay-pc.svg
similarity index 100%
rename from packages/icons/src/svg/icons/alipay-pc.svg
rename to packages/icons/src/svg/icons/pay/alipay-pc.svg
diff --git a/packages/icons/src/svg/icons/alipay-qr.svg b/packages/icons/src/svg/icons/pay/alipay-qr.svg
similarity index 100%
rename from packages/icons/src/svg/icons/alipay-qr.svg
rename to packages/icons/src/svg/icons/pay/alipay-qr.svg
diff --git a/packages/icons/src/svg/icons/alipay-wap.svg b/packages/icons/src/svg/icons/pay/alipay-wap.svg
similarity index 100%
rename from packages/icons/src/svg/icons/alipay-wap.svg
rename to packages/icons/src/svg/icons/pay/alipay-wap.svg
diff --git a/packages/icons/src/svg/icons/mock.svg b/packages/icons/src/svg/icons/pay/mock.svg
similarity index 100%
rename from packages/icons/src/svg/icons/mock.svg
rename to packages/icons/src/svg/icons/pay/mock.svg
diff --git a/packages/icons/src/svg/icons/wallet.svg b/packages/icons/src/svg/icons/pay/wallet.svg
similarity index 100%
rename from packages/icons/src/svg/icons/wallet.svg
rename to packages/icons/src/svg/icons/pay/wallet.svg
diff --git a/packages/icons/src/svg/icons/wx-app.svg b/packages/icons/src/svg/icons/pay/wx-app.svg
similarity index 100%
rename from packages/icons/src/svg/icons/wx-app.svg
rename to packages/icons/src/svg/icons/pay/wx-app.svg
diff --git a/packages/icons/src/svg/icons/wx-bar.svg b/packages/icons/src/svg/icons/pay/wx-bar.svg
similarity index 100%
rename from packages/icons/src/svg/icons/wx-bar.svg
rename to packages/icons/src/svg/icons/pay/wx-bar.svg
diff --git a/packages/icons/src/svg/icons/wx-lite.svg b/packages/icons/src/svg/icons/pay/wx-lite.svg
similarity index 100%
rename from packages/icons/src/svg/icons/wx-lite.svg
rename to packages/icons/src/svg/icons/pay/wx-lite.svg
diff --git a/packages/icons/src/svg/icons/wx-native.svg b/packages/icons/src/svg/icons/pay/wx-native.svg
similarity index 100%
rename from packages/icons/src/svg/icons/wx-native.svg
rename to packages/icons/src/svg/icons/pay/wx-native.svg
diff --git a/packages/icons/src/svg/icons/wx-pub.svg b/packages/icons/src/svg/icons/pay/wx-pub.svg
similarity index 100%
rename from packages/icons/src/svg/icons/wx-pub.svg
rename to packages/icons/src/svg/icons/pay/wx-pub.svg
diff --git a/packages/icons/src/svg/index.ts b/packages/icons/src/svg/index.ts
index 0da85d1fd..00fe7e65d 100644
--- a/packages/icons/src/svg/index.ts
+++ b/packages/icons/src/svg/index.ts
@@ -34,6 +34,12 @@ const SvgWxBarIcon = createIconifyIcon('svg:wx-bar');
 const SvgWalletIcon = createIconifyIcon('svg:wallet');
 const SvgMockIcon = createIconifyIcon('svg:mock');
 
+/** BPM */
+const SvgBpmRunningIcon = createIconifyIcon('svg:bpm-running');
+const SvgBpmApproveIcon = createIconifyIcon('svg:bpm-approve');
+const SvgBpmRejectIcon = createIconifyIcon('svg:bpm-reject');
+const SvgBpmCancelIcon = createIconifyIcon('svg:bpm-cancel');
+
 export {
   SvgAlipayAppIcon,
   SvgAlipayBarIcon,
@@ -46,6 +52,10 @@ export {
   SvgAvatar3Icon,
   SvgAvatar4Icon,
   SvgBellIcon,
+  SvgBpmApproveIcon,
+  SvgBpmCancelIcon,
+  SvgBpmRejectIcon,
+  SvgBpmRunningIcon,
   SvgCakeIcon,
   SvgCardIcon,
   SvgDingDingIcon,
diff --git a/packages/utils/src/helpers/generate-menus.ts b/packages/utils/src/helpers/generate-menus.ts
index fada2f573..04eeb02f8 100644
--- a/packages/utils/src/helpers/generate-menus.ts
+++ b/packages/utils/src/helpers/generate-menus.ts
@@ -93,11 +93,13 @@ function generateMenus(
  * 转换后端菜单数据为路由数据
  * @param menuList 后端菜单数据
  * @param parent 父级菜单
+ * @param nameSet 用于跟踪已使用的 name，防止重复
  * @returns 路由数据
  */
 function convertServerMenuToRouteRecordStringComponent(
   menuList: AppRouteRecordRaw[],
   parent = '',
+  nameSet: Set<string> = new Set(),
 ): RouteRecordStringComponent[] {
   const menus: RouteRecordStringComponent[] = [];
   menuList.forEach((menu) => {
@@ -139,6 +141,14 @@ function convertServerMenuToRouteRecordStringComponent(
       menu.path = `/${menu.path}`;
     }
 
+    // add by 芋艿：防止 name 重复，只有在 name 重复时，才自动添加 id
+    let finalName = menu.componentName || menu.name;
+    if (nameSet.has(finalName)) {
+      finalName = menu.name + menu.id;
+      console.error(`menu name duplicate: ${menu.name}, id: ${menu.id}`, menu);
+    }
+    nameSet.add(finalName);
+
     const buildMenu: RouteRecordStringComponent = {
       component: menu.component,
       meta: {
@@ -148,7 +158,7 @@ function convertServerMenuToRouteRecordStringComponent(
         orderNo: menu.sort,
         title: menu.name,
       },
-      name: menu.name + menu.id, // add by 芋艿：防止 name 重复，加上 id
+      name: finalName,
       path: menu.path,
     };
 
@@ -156,6 +166,7 @@ function convertServerMenuToRouteRecordStringComponent(
       buildMenu.children = convertServerMenuToRouteRecordStringComponent(
         menu.children,
         menu.path,
+        nameSet,
       );
     }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d8a78fdc1..d74811fa4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,7 +26,7 @@ catalogs:
       version: 19.8.1
     '@eslint/js':
       specifier: ^9.30.1
-      version: 9.37.0
+      version: 9.38.0
     '@faker-js/faker':
       specifier: ^9.9.0
       version: 9.9.0
@@ -44,7 +44,7 @@ catalogs:
       version: 3.2.31
     '@iconify/json':
       specifier: ^2.2.354
-      version: 2.2.395
+      version: 2.2.398
     '@iconify/tailwind':
       specifier: ^1.2.0
       version: 1.2.0
@@ -59,7 +59,7 @@ catalogs:
       version: 6.0.8
     '@jspm/generator':
       specifier: ^2.6.2
-      version: 2.7.3
+      version: 2.7.4
     '@manypkg/get-packages':
       specifier: ^3.0.0
       version: 3.1.0
@@ -71,7 +71,7 @@ catalogs:
       version: 2.18.2
     '@playwright/test':
       specifier: ^1.53.2
-      version: 1.56.0
+      version: 1.56.1
     '@pnpm/workspace.read-manifest':
       specifier: ^1000.2.0
       version: 1000.2.4
@@ -86,13 +86,13 @@ catalogs:
       version: 0.5.19
     '@tanstack/vue-query':
       specifier: ^5.81.5
-      version: 5.90.2
+      version: 5.90.5
     '@tanstack/vue-store':
       specifier: ^0.7.1
       version: 0.7.7
     '@tinyflow-ai/vue':
       specifier: ^1.1.1
-      version: 1.1.5
+      version: 1.1.7
     '@tinymce/tinymce-vue':
       specifier: ^6.1.0
       version: 6.3.0
@@ -134,7 +134,7 @@ catalogs:
       version: 14.1.2
     '@types/node':
       specifier: ^22.16.0
-      version: 22.18.10
+      version: 22.18.11
     '@types/nprogress':
       specifier: ^0.2.3
       version: 0.2.3
@@ -152,16 +152,16 @@ catalogs:
       version: 1.15.8
     '@typescript-eslint/eslint-plugin':
       specifier: ^8.35.1
-      version: 8.46.0
+      version: 8.46.1
     '@typescript-eslint/parser':
       specifier: ^8.35.1
-      version: 8.46.0
+      version: 8.46.1
     '@vee-validate/zod':
       specifier: ^4.15.1
       version: 4.15.1
     '@vite-pwa/vitepress':
       specifier: ^1.0.0
-      version: 1.0.0
+      version: 1.0.1
     '@vitejs/plugin-vue':
       specifier: ^6.0.1
       version: 6.0.1
@@ -275,10 +275,10 @@ catalogs:
       version: 5.6.0
     element-plus:
       specifier: ^2.10.2
-      version: 2.11.4
+      version: 2.11.5
     eslint:
       specifier: ^9.30.1
-      version: 9.37.0
+      version: 9.38.0
     eslint-config-turbo:
       specifier: ^2.5.4
       version: 2.5.8
@@ -317,13 +317,13 @@ catalogs:
       version: 59.0.1
     eslint-plugin-unused-imports:
       specifier: ^4.1.4
-      version: 4.2.0
+      version: 4.3.0
     eslint-plugin-vitest:
       specifier: ^0.5.4
       version: 0.5.4
     eslint-plugin-vue:
       specifier: ^10.2.0
-      version: 10.5.0
+      version: 10.5.1
     execa:
       specifier: ^9.6.0
       version: 9.6.0
@@ -422,7 +422,7 @@ catalogs:
       version: 2.3.0
     playwright:
       specifier: ^1.53.2
-      version: 1.56.0
+      version: 1.56.1
     postcss:
       specifier: ^8.5.6
       version: 8.5.6
@@ -449,7 +449,7 @@ catalogs:
       version: 0.6.14
     publint:
       specifier: ^0.3.12
-      version: 0.3.14
+      version: 0.3.15
     qrcode:
       specifier: ^1.5.4
       version: 1.5.4
@@ -467,7 +467,7 @@ catalogs:
       version: 6.0.1
     rollup:
       specifier: ^4.44.1
-      version: 4.52.4
+      version: 4.52.5
     rollup-plugin-visualizer:
       specifier: ^5.14.0
       version: 5.14.0
@@ -545,7 +545,7 @@ catalogs:
       version: 4.15.1
     vite:
       specifier: ^7.1.2
-      version: 7.1.9
+      version: 7.1.11
     vite-plugin-compression:
       specifier: ^0.5.1
       version: 0.5.1
@@ -560,7 +560,7 @@ catalogs:
       version: 1.0.7
     vite-plugin-pwa:
       specifier: ^1.0.1
-      version: 1.0.3
+      version: 1.1.0
     vite-plugin-vue-devtools:
       specifier: ^7.7.7
       version: 7.7.7
@@ -569,7 +569,7 @@ catalogs:
       version: 1.6.4
     vitepress-plugin-group-icons:
       specifier: ^1.6.1
-      version: 1.6.3
+      version: 1.6.4
     vitest:
       specifier: ^3.2.4
       version: 3.2.4
@@ -587,7 +587,7 @@ catalogs:
       version: 3.0.4
     vue-router:
       specifier: ^4.5.1
-      version: 4.5.1
+      version: 4.6.3
     vue-tippy:
       specifier: ^6.7.1
       version: 6.7.1
@@ -602,10 +602,10 @@ catalogs:
       version: 4.1.0
     vxe-pc-ui:
       specifier: ^4.9.29
-      version: 4.9.42
+      version: 4.10.2
     vxe-table:
       specifier: ^4.16.11
-      version: 4.16.21
+      version: 4.17.0
     watermark-js-plus:
       specifier: ^1.6.2
       version: 1.6.3
@@ -633,13 +633,13 @@ importers:
         version: 0.5.1
       '@changesets/cli':
         specifier: 'catalog:'
-        version: 2.29.7(@types/node@22.18.10)
+        version: 2.29.7(@types/node@22.18.11)
       '@playwright/test':
         specifier: 'catalog:'
-        version: 1.56.0
+        version: 1.56.1
       '@types/node':
         specifier: 'catalog:'
-        version: 22.18.10
+        version: 22.18.11
       '@vben/commitlint-config':
         specifier: workspace:*
         version: link:internal/lint-configs/commitlint-config
@@ -669,10 +669,10 @@ importers:
         version: link:scripts/vsh
       '@vitejs/plugin-vue':
         specifier: 'catalog:'
-        version: 6.0.1(vite@7.1.9(@types/node@22.18.10)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
+        version: 6.0.1(vite@7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
       '@vitejs/plugin-vue-jsx':
         specifier: 'catalog:'
-        version: 5.1.1(vite@7.1.9(@types/node@22.18.10)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
+        version: 5.1.1(vite@7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
       '@vue/test-utils':
         specifier: 'catalog:'
         version: 2.4.6
@@ -696,7 +696,7 @@ importers:
         version: 1.13.6
       playwright:
         specifier: 'catalog:'
-        version: 1.56.0
+        version: 1.56.1
       rimraf:
         specifier: 'catalog:'
         version: 6.0.1
@@ -714,10 +714,10 @@ importers:
         version: 3.6.1(sass@1.93.2)(typescript@5.9.3)(vue-tsc@2.2.10(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))
       vite:
         specifier: 'catalog:'
-        version: 7.1.9(@types/node@22.18.10)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+        version: 7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       vitest:
         specifier: 'catalog:'
-        version: 3.2.4(@types/node@22.18.10)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+        version: 3.2.4(@types/node@22.18.11)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       vue:
         specifier: ^3.5.17
         version: 3.5.22(typescript@5.9.3)
@@ -850,7 +850,7 @@ importers:
         version: 5.3.0(vue@3.5.22(typescript@5.9.3))
       vue-router:
         specifier: 'catalog:'
-        version: 4.5.1(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
       vue3-signature:
         specifier: 'catalog:'
         version: 0.2.4(vue@3.5.22(typescript@5.9.3))
@@ -911,6 +911,9 @@ importers:
       '@vueuse/core':
         specifier: 'catalog:'
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
+      '@vueuse/integrations':
+        specifier: 'catalog:'
+        version: 13.9.0(async-validator@4.2.5)(axios@1.12.2)(focus-trap@7.6.5)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(vue@3.5.22(typescript@5.9.3))
       cropperjs:
         specifier: 'catalog:'
         version: 1.6.2
@@ -919,7 +922,7 @@ importers:
         version: 1.11.18
       element-plus:
         specifier: 'catalog:'
-        version: 2.11.4(vue@3.5.22(typescript@5.9.3))
+        version: 2.11.5(vue@3.5.22(typescript@5.9.3))
       highlight.js:
         specifier: 'catalog:'
         version: 11.11.1
@@ -937,7 +940,7 @@ importers:
         version: 5.3.0(vue@3.5.22(typescript@5.9.3))
       vue-router:
         specifier: 'catalog:'
-        version: 4.5.1(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
       vuedraggable:
         specifier: 'catalog:'
         version: 4.1.0(vue@3.5.22(typescript@5.9.3))
@@ -1007,7 +1010,7 @@ importers:
         version: 3.5.22(typescript@5.9.3)
       vue-router:
         specifier: 'catalog:'
-        version: 4.5.1(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
 
   docs:
     dependencies:
@@ -1040,20 +1043,20 @@ importers:
         version: 1.9.17(vue@3.5.22(typescript@5.9.3))
       vitepress-plugin-group-icons:
         specifier: 'catalog:'
-        version: 1.6.3(markdown-it@14.1.0)(vite@5.4.20(@types/node@24.7.2)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))
+        version: 1.6.4(markdown-it@14.1.0)(vite@5.4.21(@types/node@24.8.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))
     devDependencies:
       '@nolebase/vitepress-plugin-git-changelog':
         specifier: 'catalog:'
-        version: 2.18.2(vitepress@1.6.4(@algolia/client-search@5.40.0)(@types/node@24.7.2)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))
+        version: 2.18.2(vitepress@1.6.4(@algolia/client-search@5.40.1)(@types/node@24.8.1)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))
       '@vben/vite-config':
         specifier: workspace:*
         version: link:../internal/vite-config
       '@vite-pwa/vitepress':
         specifier: 'catalog:'
-        version: 1.0.0(vite-plugin-pwa@1.0.3(vite@5.4.20(@types/node@24.7.2)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(workbox-build@7.3.0)(workbox-window@7.3.0))
+        version: 1.0.1(vite-plugin-pwa@1.1.0(vite@5.4.21(@types/node@24.8.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(workbox-build@7.3.0)(workbox-window@7.3.0))
       vitepress:
         specifier: 'catalog:'
-        version: 1.6.4(@algolia/client-search@5.40.0)(@types/node@24.7.2)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3)
+        version: 1.6.4(@algolia/client-search@5.40.1)(@types/node@24.8.1)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3)
       vue:
         specifier: ^3.5.17
         version: 3.5.22(typescript@5.9.3)
@@ -1062,7 +1065,7 @@ importers:
     dependencies:
       '@commitlint/cli':
         specifier: 'catalog:'
-        version: 19.8.1(@types/node@24.7.2)(typescript@5.9.3)
+        version: 19.8.1(@types/node@24.8.1)(typescript@5.9.3)
       '@commitlint/config-conventional':
         specifier: 'catalog:'
         version: 19.8.1
@@ -1083,65 +1086,65 @@ importers:
     dependencies:
       eslint-config-turbo:
         specifier: 'catalog:'
-        version: 2.5.8(eslint@9.37.0(jiti@2.6.1))(turbo@2.5.8)
+        version: 2.5.8(eslint@9.38.0(jiti@2.6.1))(turbo@2.5.8)
       eslint-plugin-command:
         specifier: 'catalog:'
-        version: 3.3.1(eslint@9.37.0(jiti@2.6.1))
+        version: 3.3.1(eslint@9.38.0(jiti@2.6.1))
       eslint-plugin-import-x:
         specifier: 'catalog:'
-        version: 4.16.1(@typescript-eslint/utils@8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))
+        version: 4.16.1(@typescript-eslint/utils@8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))
     devDependencies:
       '@eslint/js':
         specifier: 'catalog:'
-        version: 9.37.0
+        version: 9.38.0
       '@types/eslint':
         specifier: 'catalog:'
         version: 9.6.1
       '@typescript-eslint/eslint-plugin':
         specifier: 'catalog:'
-        version: 8.46.0(@typescript-eslint/parser@8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
+        version: 8.46.1(@typescript-eslint/parser@8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/parser':
         specifier: 'catalog:'
-        version: 8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
+        version: 8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
       eslint:
         specifier: 'catalog:'
-        version: 9.37.0(jiti@2.6.1)
+        version: 9.38.0(jiti@2.6.1)
       eslint-plugin-eslint-comments:
         specifier: 'catalog:'
-        version: 3.2.0(eslint@9.37.0(jiti@2.6.1))
+        version: 3.2.0(eslint@9.38.0(jiti@2.6.1))
       eslint-plugin-jsdoc:
         specifier: 'catalog:'
-        version: 50.8.0(eslint@9.37.0(jiti@2.6.1))
+        version: 50.8.0(eslint@9.38.0(jiti@2.6.1))
       eslint-plugin-jsonc:
         specifier: 'catalog:'
-        version: 2.21.0(eslint@9.37.0(jiti@2.6.1))
+        version: 2.21.0(eslint@9.38.0(jiti@2.6.1))
       eslint-plugin-n:
         specifier: 'catalog:'
-        version: 17.23.1(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
+        version: 17.23.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
       eslint-plugin-no-only-tests:
         specifier: 'catalog:'
         version: 3.3.0
       eslint-plugin-perfectionist:
         specifier: 'catalog:'
-        version: 4.15.1(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
+        version: 4.15.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
       eslint-plugin-prettier:
         specifier: 'catalog:'
-        version: 5.5.4(@types/eslint@9.6.1)(eslint@9.37.0(jiti@2.6.1))(prettier@3.6.2)
+        version: 5.5.4(@types/eslint@9.6.1)(eslint@9.38.0(jiti@2.6.1))(prettier@3.6.2)
       eslint-plugin-regexp:
         specifier: 'catalog:'
-        version: 2.10.0(eslint@9.37.0(jiti@2.6.1))
+        version: 2.10.0(eslint@9.38.0(jiti@2.6.1))
       eslint-plugin-unicorn:
         specifier: 'catalog:'
-        version: 59.0.1(eslint@9.37.0(jiti@2.6.1))
+        version: 59.0.1(eslint@9.38.0(jiti@2.6.1))
       eslint-plugin-unused-imports:
         specifier: 'catalog:'
-        version: 4.2.0(@typescript-eslint/eslint-plugin@8.46.0(@typescript-eslint/parser@8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))
+        version: 4.3.0(@typescript-eslint/eslint-plugin@8.46.1(@typescript-eslint/parser@8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))
       eslint-plugin-vitest:
         specifier: 'catalog:'
-        version: 0.5.4(@typescript-eslint/eslint-plugin@8.46.0(@typescript-eslint/parser@8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.7.2)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+        version: 0.5.4(@typescript-eslint/eslint-plugin@8.46.1(@typescript-eslint/parser@8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
       eslint-plugin-vue:
         specifier: 'catalog:'
-        version: 10.5.0(@typescript-eslint/parser@8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.37.0(jiti@2.6.1)))
+        version: 10.5.1(@typescript-eslint/parser@8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.38.0(jiti@2.6.1)))
       globals:
         specifier: 'catalog:'
         version: 16.4.0
@@ -1150,7 +1153,7 @@ importers:
         version: 2.4.1
       vue-eslint-parser:
         specifier: 'catalog:'
-        version: 10.2.0(eslint@9.37.0(jiti@2.6.1))
+        version: 10.2.0(eslint@9.38.0(jiti@2.6.1))
 
   internal/lint-configs/prettier-config:
     dependencies:
@@ -1247,7 +1250,7 @@ importers:
     dependencies:
       '@iconify/json':
         specifier: 'catalog:'
-        version: 2.2.395
+        version: 2.2.398
       '@iconify/tailwind':
         specifier: 'catalog:'
         version: 1.2.0
@@ -1296,16 +1299,16 @@ importers:
         version: link:../../packages/types
       vite:
         specifier: 'catalog:'
-        version: 7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+        version: 7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
 
   internal/vite-config:
     dependencies:
       '@intlify/unplugin-vue-i18n':
         specifier: 'catalog:'
-        version: 6.0.8(@vue/compiler-dom@3.5.22)(eslint@9.37.0(jiti@2.6.1))(rollup@4.52.4)(typescript@5.9.3)(vue-i18n@11.1.12(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
+        version: 6.0.8(@vue/compiler-dom@3.5.22)(eslint@9.38.0(jiti@2.6.1))(rollup@4.52.5)(typescript@5.9.3)(vue-i18n@11.1.12(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
       '@jspm/generator':
         specifier: 'catalog:'
-        version: 2.7.3
+        version: 2.7.4
       archiver:
         specifier: 'catalog:'
         version: 7.0.1
@@ -1326,10 +1329,10 @@ importers:
         version: 2.0.3
       vite-plugin-pwa:
         specifier: 'catalog:'
-        version: 1.0.3(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(workbox-build@7.3.0)(workbox-window@7.3.0)
+        version: 1.1.0(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(workbox-build@7.3.0)(workbox-window@7.3.0)
       vite-plugin-vue-devtools:
         specifier: 'catalog:'
-        version: 7.7.7(rollup@4.52.4)(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
+        version: 7.7.7(rollup@4.52.5)(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
     devDependencies:
       '@pnpm/workspace.read-manifest':
         specifier: 'catalog:'
@@ -1345,10 +1348,10 @@ importers:
         version: link:../node-utils
       '@vitejs/plugin-vue':
         specifier: 'catalog:'
-        version: 6.0.1(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
+        version: 6.0.1(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
       '@vitejs/plugin-vue-jsx':
         specifier: 'catalog:'
-        version: 5.1.1(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
+        version: 5.1.1(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
       dayjs:
         specifier: 'catalog:'
         version: 1.11.18
@@ -1357,25 +1360,25 @@ importers:
         version: 16.6.1
       rollup:
         specifier: 'catalog:'
-        version: 4.52.4
+        version: 4.52.5
       rollup-plugin-visualizer:
         specifier: 'catalog:'
-        version: 5.14.0(rollup@4.52.4)
+        version: 5.14.0(rollup@4.52.5)
       sass:
         specifier: 'catalog:'
         version: 1.93.2
       vite:
         specifier: 'catalog:'
-        version: 7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+        version: 7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       vite-plugin-compression:
         specifier: 'catalog:'
-        version: 0.5.1(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+        version: 0.5.1(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
       vite-plugin-dts:
         specifier: 'catalog:'
-        version: 4.5.4(@types/node@24.7.2)(rollup@4.52.4)(typescript@5.9.3)(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+        version: 4.5.4(@types/node@24.8.1)(rollup@4.52.5)(typescript@5.9.3)(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
       vite-plugin-html:
         specifier: 'catalog:'
-        version: 3.2.2(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+        version: 3.2.2(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
       vite-plugin-lazy-import:
         specifier: 'catalog:'
         version: 1.0.7
@@ -1468,7 +1471,7 @@ importers:
         version: 3.5.22(typescript@5.9.3)
       vue-router:
         specifier: 'catalog:'
-        version: 4.5.1(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
 
   packages/@core/composables:
     dependencies:
@@ -1748,7 +1751,7 @@ importers:
         version: 3.0.4(vue@3.5.22(typescript@5.9.3))
       vue-router:
         specifier: 'catalog:'
-        version: 4.5.1(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
       vue-tippy:
         specifier: 'catalog:'
         version: 6.7.1(vue@3.5.22(typescript@5.9.3))
@@ -1782,7 +1785,7 @@ importers:
         version: 3.5.22(typescript@5.9.3)
       vue-router:
         specifier: 'catalog:'
-        version: 4.5.1(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
       watermark-js-plus:
         specifier: 'catalog:'
         version: 1.6.3
@@ -1845,13 +1848,13 @@ importers:
         version: 3.5.22(typescript@5.9.3)
       vue-router:
         specifier: 'catalog:'
-        version: 4.5.1(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
 
   packages/effects/plugins:
     dependencies:
       '@tinyflow-ai/vue':
         specifier: 'catalog:'
-        version: 1.1.5(svelte@5.39.11)(vue@3.5.22(typescript@5.9.3))
+        version: 1.1.7(svelte@5.41.1)(vue@3.5.22(typescript@5.9.3))
       '@vben-core/form-ui':
         specifier: workspace:*
         version: link:../../@core/ui-kit/form-ui
@@ -1911,10 +1914,10 @@ importers:
         version: 3.5.22(typescript@5.9.3)
       vxe-pc-ui:
         specifier: 'catalog:'
-        version: 4.9.42(vue@3.5.22(typescript@5.9.3))
+        version: 4.10.2(vue@3.5.22(typescript@5.9.3))
       vxe-table:
         specifier: 'catalog:'
-        version: 4.16.21(vue@3.5.22(typescript@5.9.3))
+        version: 4.17.0(vue@3.5.22(typescript@5.9.3))
     devDependencies:
       '@types/codemirror':
         specifier: 'catalog:'
@@ -2003,7 +2006,7 @@ importers:
         version: 3.5.22(typescript@5.9.3)
       vue-router:
         specifier: 'catalog:'
-        version: 4.5.1(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
 
   packages/styles:
     dependencies:
@@ -2021,7 +2024,7 @@ importers:
         version: 3.5.22(typescript@5.9.3)
       vue-router:
         specifier: 'catalog:'
-        version: 4.5.1(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
 
   packages/utils:
     dependencies:
@@ -2033,13 +2036,13 @@ importers:
         version: link:../@core/base/typings
       vue-router:
         specifier: 'catalog:'
-        version: 4.5.1(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
 
   playground:
     dependencies:
       '@tanstack/vue-query':
         specifier: 'catalog:'
-        version: 5.90.2(vue@3.5.22(typescript@5.9.3))
+        version: 5.90.5(vue@3.5.22(typescript@5.9.3))
       '@vben-core/menu-ui':
         specifier: workspace:*
         version: link:../packages/@core/ui-kit/menu-ui
@@ -2105,7 +2108,7 @@ importers:
         version: 3.5.22(typescript@5.9.3)
       vue-router:
         specifier: 'catalog:'
-        version: 4.5.1(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
     devDependencies:
       '@types/json-bigint':
         specifier: 'catalog:'
@@ -2139,12 +2142,12 @@ importers:
         version: 1.4.7
       publint:
         specifier: 'catalog:'
-        version: 0.3.14
+        version: 0.3.15
 
 packages:
 
-  '@algolia/abtesting@1.6.0':
-    resolution: {integrity: sha512-c4M/Z/KWkEG+RHpZsWKDTTlApXu3fe4vlABNcpankWBhdMe4oPZ/r4JxEr2zKUP6K+BT66tnp8UbHmgOd/vvqQ==}
+  '@algolia/abtesting@1.6.1':
+    resolution: {integrity: sha512-wV/gNRkzb7sI9vs1OneG129hwe3Q5zPj7zigz3Ps7M5Lpo2hSorrOnXNodHEOV+yXE/ks4Pd+G3CDFIjFTWhMQ==}
     engines: {node: '>= 14.0.0'}
 
   '@algolia/autocomplete-core@1.17.7':
@@ -2167,56 +2170,56 @@ packages:
       '@algolia/client-search': '>= 4.9.1 < 6'
       algoliasearch: '>= 4.9.1 < 6'
 
-  '@algolia/client-abtesting@5.40.0':
-    resolution: {integrity: sha512-qegVlgHtmiS8m9nEsuKUVhlw1FHsIshtt5nhNnA6EYz3g+tm9+xkVZZMzkrMLPP7kpoheHJZAwz2MYnHtwFa9A==}
+  '@algolia/client-abtesting@5.40.1':
+    resolution: {integrity: sha512-cxKNATPY5t+Mv8XAVTI57altkaPH+DZi4uMrnexPxPHODMljhGYY+GDZyHwv9a+8CbZHcY372OkxXrDMZA4Lnw==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-analytics@5.40.0':
-    resolution: {integrity: sha512-Dw2c+6KGkw7mucnnxPyyMsIGEY8+hqv6oB+viYB612OMM3l8aNaWToBZMnNvXsyP+fArwq7XGR+k3boPZyV53A==}
+  '@algolia/client-analytics@5.40.1':
+    resolution: {integrity: sha512-XP008aMffJCRGAY8/70t+hyEyvqqV7YKm502VPu0+Ji30oefrTn2al7LXkITz7CK6I4eYXWRhN6NaIUi65F1OA==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-common@5.40.0':
-    resolution: {integrity: sha512-dbE4+MJIDsTghG3hUYWBq7THhaAmqNqvW9g2vzwPf5edU4IRmuYpKtY3MMotes8/wdTasWG07XoaVhplJBlvdg==}
+  '@algolia/client-common@5.40.1':
+    resolution: {integrity: sha512-gWfQuQUBtzUboJv/apVGZMoxSaB0M4Imwl1c9Ap+HpCW7V0KhjBddqF2QQt5tJZCOFsfNIgBbZDGsEPaeKUosw==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-insights@5.40.0':
-    resolution: {integrity: sha512-SH6zlROyGUCDDWg71DlCnbbZ/zEHYPZC8k901EAaBVhvY43Ju8Wa6LAcMPC4tahcDBgkG2poBy8nJZXvwEWAlQ==}
+  '@algolia/client-insights@5.40.1':
+    resolution: {integrity: sha512-RTLjST/t+lsLMouQ4zeLJq2Ss+UNkLGyNVu+yWHanx6kQ3LT5jv8UvPwyht9s7R6jCPnlSI77WnL80J32ZuyJg==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-personalization@5.40.0':
-    resolution: {integrity: sha512-EgHjJEEf7CbUL9gJHI1ULmAtAFeym2cFNSAi1uwHelWgLPcnLjYW2opruPxigOV7NcetkGu+t2pcWOWmZFuvKQ==}
+  '@algolia/client-personalization@5.40.1':
+    resolution: {integrity: sha512-2FEK6bUomBzEYkTKzD0iRs7Ljtjb45rKK/VSkyHqeJnG+77qx557IeSO0qVFE3SfzapNcoytTofnZum0BQ6r3Q==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-query-suggestions@5.40.0':
-    resolution: {integrity: sha512-HvE1jtCag95DR41tDh7cGwrMk4X0aQXPOBIhZRmsBPolMeqRJz0kvfVw8VCKvA1uuoAkjFfTG0X0IZED+rKXoA==}
+  '@algolia/client-query-suggestions@5.40.1':
+    resolution: {integrity: sha512-Nju4NtxAvXjrV2hHZNLKVJLXjOlW6jAXHef/CwNzk1b2qIrCWDO589ELi5ZHH1uiWYoYyBXDQTtHmhaOVVoyXg==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-search@5.40.0':
-    resolution: {integrity: sha512-nlr/MMgoLNUHcfWC5Ns2ENrzKx9x51orPc6wJ8Ignv1DsrUmKm0LUih+Tj3J+kxYofzqQIQRU495d4xn3ozMbg==}
+  '@algolia/client-search@5.40.1':
+    resolution: {integrity: sha512-Mw6pAUF121MfngQtcUb5quZVqMC68pSYYjCRZkSITC085S3zdk+h/g7i6FxnVdbSU6OztxikSDMh1r7Z+4iPlA==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/ingestion@1.40.0':
-    resolution: {integrity: sha512-OfHnhE+P0f+p3i90Kmshf9Epgesw5oPV1IEUOY4Mq1HV7cQk16gvklVN1EaY/T9sVavl+Vc3g4ojlfpIwZFA4g==}
+  '@algolia/ingestion@1.40.1':
+    resolution: {integrity: sha512-z+BPlhs45VURKJIxsR99NNBWpUEEqIgwt10v/fATlNxc4UlXvALdOsWzaFfe89/lbP5Bu4+mbO59nqBC87ZM/g==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/monitoring@1.40.0':
-    resolution: {integrity: sha512-SWANV32PTKhBYvwKozeWP9HOnVabOixAuPdFFGoqtysTkkwutrtGI/rrh80tvG+BnQAmZX0vUmD/RqFZVfr/Yg==}
+  '@algolia/monitoring@1.40.1':
+    resolution: {integrity: sha512-VJMUMbO0wD8Rd2VVV/nlFtLJsOAQvjnVNGkMkspFiFhpBA7s/xJOb+fJvvqwKFUjbKTUA7DjiSi1ljSMYBasXg==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/recommend@5.40.0':
-    resolution: {integrity: sha512-1Qxy9I5bSb3mrhPk809DllMa561zl5hLsMR6YhIqNkqQ0OyXXQokvJ2zApSxvd39veRZZnhN+oGe+XNoNwLgkw==}
+  '@algolia/recommend@5.40.1':
+    resolution: {integrity: sha512-ehvJLadKVwTp9Scg9NfzVSlBKH34KoWOQNTaN8i1Ac64AnO6iH2apJVSP6GOxssaghZ/s8mFQsDH3QIZoluFHA==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/requester-browser-xhr@5.40.0':
-    resolution: {integrity: sha512-MGt94rdHfkrVjfN/KwUfWcnaeohYbWGINrPs96f5J7ZyRYpVLF+VtPQ2FmcddFvK4gnKXSu8BAi81hiIhUpm3w==}
+  '@algolia/requester-browser-xhr@5.40.1':
+    resolution: {integrity: sha512-PbidVsPurUSQIr6X9/7s34mgOMdJnn0i6p+N6Ab+lsNhY5eiu+S33kZEpZwkITYBCIbhzDLOvb7xZD3gDi+USA==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/requester-fetch@5.40.0':
-    resolution: {integrity: sha512-wXQ05JZZ10Dr642QVAkAZ4ZZlU+lh5r6dIBGmm9WElz+1EaQ6BNYtEOTV6pkXuFYsZpeJA89JpDOiwBOP9j24w==}
+  '@algolia/requester-fetch@5.40.1':
+    resolution: {integrity: sha512-ThZ5j6uOZCF11fMw9IBkhigjOYdXGXQpj6h4k+T9UkZrF2RlKcPynFzDeRgaLdpYk8Yn3/MnFbwUmib7yxj5Lw==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/requester-node-http@5.40.0':
-    resolution: {integrity: sha512-5qCRoySnzpbQVg2IPLGFCm4LF75pToxI5tdjOYgUMNL/um91aJ4dH3SVdBEuFlVsalxl8mh3bWPgkUmv6NpJiQ==}
+  '@algolia/requester-node-http@5.40.1':
+    resolution: {integrity: sha512-H1gYPojO6krWHnUXu/T44DrEun/Wl95PJzMXRcM/szstNQczSbwq6wIFJPI9nyE95tarZfUNU3rgorT+wZ6iCQ==}
     engines: {node: '>= 14.0.0'}
 
   '@alloc/quick-lru@5.2.0':
@@ -2977,8 +2980,8 @@ packages:
   '@codemirror/state@6.5.2':
     resolution: {integrity: sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==}
 
-  '@codemirror/view@6.38.5':
-    resolution: {integrity: sha512-SFVsNAgsAoou+BjRewMqN+m9jaztB9wCWN9RSRgePqUbq8UVlvJfku5zB2KVhLPgH/h0RLk38tvd4tGeAhygnw==}
+  '@codemirror/view@6.38.6':
+    resolution: {integrity: sha512-qiS0z1bKs5WOvHIAC0Cybmv4AJSkAXgX5aD6Mqd2epSLlVJsQl8NG23jCVouIgkh4All/mrbdsf2UOLFnJw0tw==}
 
   '@commitlint/cli@19.8.1':
     resolution: {integrity: sha512-LXUdNIkspyxrlV6VDHWBmCZRtkEVRpBKxi2Gtw3J54cGWhLCTouVD/Q6ZSaSvd2YaDObWK8mDjrz3TIKtaQMAA==}
@@ -3085,8 +3088,8 @@ packages:
   '@cspell/dict-bash@4.2.1':
     resolution: {integrity: sha512-SBnzfAyEAZLI9KFS7DUG6Xc1vDFuLllY3jz0WHvmxe8/4xV3ufFE3fGxalTikc1VVeZgZmxYiABw4iGxVldYEg==}
 
-  '@cspell/dict-companies@3.2.5':
-    resolution: {integrity: sha512-H51R0w7c6RwJJPqH7Gs65tzP6ouZsYDEHmmol6MIIk0kQaOIBuFP2B3vIxHLUr2EPRVFZsMW8Ni7NmVyaQlwsg==}
+  '@cspell/dict-companies@3.2.6':
+    resolution: {integrity: sha512-cVWBk4DSUOthCsgOsoB+5L5F1Wk8lWGHnw5de75YCKSjOEV8/6kskwwDrPTIHkoGVzpIzIIQ/OdXhYwa2G+16A==}
 
   '@cspell/dict-cpp@6.0.12':
     resolution: {integrity: sha512-N4NsCTttVpMqQEYbf0VQwCj6np+pJESov0WieCN7R/0aByz4+MXEiDieWWisaiVi8LbKzs1mEj4ZTw5K/6O2UQ==}
@@ -3103,8 +3106,8 @@ packages:
   '@cspell/dict-dart@2.3.1':
     resolution: {integrity: sha512-xoiGnULEcWdodXI6EwVyqpZmpOoh8RA2Xk9BNdR7DLamV/QMvEYn8KJ7NlRiTSauJKPNkHHQ5EVHRM6sTS7jdg==}
 
-  '@cspell/dict-data-science@2.0.9':
-    resolution: {integrity: sha512-wTOFMlxv06veIwKdXUwdGxrQcK44Zqs426m6JGgHIB/GqvieZQC5n0UI+tUm5OCxuNyo4OV6mylT4cRMjtKtWQ==}
+  '@cspell/dict-data-science@2.0.10':
+    resolution: {integrity: sha512-vZSsz7845ugW6mY65966Ki2bMS/ZnAZoTVvpuXQ07a2rYxJhUC+6WuBMD80hFLlKwjC5T/5Llv4F/VlB00swpw==}
 
   '@cspell/dict-django@4.1.5':
     resolution: {integrity: sha512-AvTWu99doU3T8ifoMYOMLW2CXKvyKLukPh1auOPwFGHzueWYvBBN+OxF8wF7XwjTBMMeRleVdLh3aWCDEX/ZWg==}
@@ -3124,11 +3127,11 @@ packages:
   '@cspell/dict-en-gb@1.1.33':
     resolution: {integrity: sha512-tKSSUf9BJEV+GJQAYGw5e+ouhEe2ZXE620S7BLKe3ZmpnjlNG9JqlnaBhkIMxKnNFkLY2BP/EARzw31AZnOv4g==}
 
-  '@cspell/dict-en_us@4.4.19':
-    resolution: {integrity: sha512-JYYgzhGqSGuIMNY1cTlmq3zrNpehrExMHqLmLnSM2jEGFeHydlL+KLBwBYxMy4e73w+p1+o/rmAiGsMj9g3MCw==}
+  '@cspell/dict-en_us@4.4.20':
+    resolution: {integrity: sha512-acAlX967bkrLwRhSJ8KGBCBUITMOe8+smwsShjei431vTB6tU5ZID6XDxR9hH/kDxfdiRTXAE8vkT3WJAHnc1Q==}
 
-  '@cspell/dict-filetypes@3.0.13':
-    resolution: {integrity: sha512-g6rnytIpQlMNKGJT1JKzWkC+b3xCliDKpQ3ANFSq++MnR4GaLiifaC4JkVON11Oh/UTplYOR1nY3BR4X30bswA==}
+  '@cspell/dict-filetypes@3.0.14':
+    resolution: {integrity: sha512-KSXaSMYYNMLLdHEnju1DyRRH3eQWPRYRnOXpuHUdOh2jC44VgQoxyMU7oB3NAhDhZKBPCihabzECsAGFbdKfEA==}
 
   '@cspell/dict-flutter@1.1.1':
     resolution: {integrity: sha512-UlOzRcH2tNbFhZmHJN48Za/2/MEdRHl2BMkCWZBYs+30b91mWvBfzaN4IJQU7dUZtowKayVIF9FzvLZtZokc5A==}
@@ -3201,8 +3204,8 @@ packages:
   '@cspell/dict-node@5.0.8':
     resolution: {integrity: sha512-AirZcN2i84ynev3p2/1NCPEhnNsHKMz9zciTngGoqpdItUb2bDt1nJBjwlsrFI78GZRph/VaqTVFwYikmncpXg==}
 
-  '@cspell/dict-npm@5.2.17':
-    resolution: {integrity: sha512-0yp7lBXtN3CtxBrpvTu/yAuPdOHR2ucKzPxdppc3VKO068waZNpKikn1NZCzBS3dIAFGVITzUPtuTXxt9cxnSg==}
+  '@cspell/dict-npm@5.2.18':
+    resolution: {integrity: sha512-uJV1T7y9ifFysO22XmxjU7y95c+02lfCZHNsTYHw2KOL6tLjc3XK/i0xt9iGLkPpcxwNJSCdu13UpjXZGqce/Q==}
 
   '@cspell/dict-php@4.0.15':
     resolution: {integrity: sha512-iepGB2gtToMWSTvybesn4/lUp4LwXcEm0s8vasJLP76WWVkq1zYjmeS+WAIzNgsuURyZ/9mGqhS0CWMuo74ODw==}
@@ -3213,8 +3216,8 @@ packages:
   '@cspell/dict-public-licenses@2.0.15':
     resolution: {integrity: sha512-cJEOs901H13Pfy0fl4dCD1U+xpWIMaEPq8MeYU83FfDZvellAuSo4GqWCripfIqlhns/L6+UZEIJSOZnjgy7Wg==}
 
-  '@cspell/dict-python@4.2.19':
-    resolution: {integrity: sha512-9S2gTlgILp1eb6OJcVZeC8/Od83N8EqBSg5WHVpx97eMMJhifOzePkE0kDYjyHMtAFznCQTUu0iQEJohNQ5B0A==}
+  '@cspell/dict-python@4.2.20':
+    resolution: {integrity: sha512-c1wbfb3MDMSY4UTNdGnA18NkrcX6cMlYER0HSpGYh2jLK43gS1QL3j2B49qgnRYfcLUp4xgeA05vzCQsjGbwuQ==}
 
   '@cspell/dict-r@2.1.1':
     resolution: {integrity: sha512-71Ka+yKfG4ZHEMEmDxc6+blFkeTTvgKbKAbwiwQAuKl3zpqs1Y0vUtwW2N4b3LgmSPhV3ODVY0y4m5ofqDuKMw==}
@@ -3231,8 +3234,8 @@ packages:
   '@cspell/dict-shell@1.1.1':
     resolution: {integrity: sha512-T37oYxE7OV1x/1D4/13Y8JZGa1QgDCXV7AVt3HLXjn0Fe3TaNDvf5sU0fGnXKmBPqFFrHdpD3uutAQb1dlp15g==}
 
-  '@cspell/dict-software-terms@5.1.8':
-    resolution: {integrity: sha512-iwCHLP11OmVHEX2MzE8EPxpPw7BelvldxWe5cJ3xXIDL8TjF2dBTs2noGcrqnZi15SLYIlO8897BIOa33WHHZA==}
+  '@cspell/dict-software-terms@5.1.9':
+    resolution: {integrity: sha512-lpiSpS1iTF2n8barqVkPmhe5qXs5291IqcDUPr5ttFRxPMZ7pgrMUdvcdNUdkajymjDOyWfUNhdYXW7JndThZw==}
 
   '@cspell/dict-sql@2.2.1':
     resolution: {integrity: sha512-qDHF8MpAYCf4pWU8NKbnVGzkoxMNrFqBHyG/dgrlic5EQiKANCLELYtGlX5auIMDLmTf1inA0eNtv74tyRJ/vg==}
@@ -3778,12 +3781,12 @@ packages:
     resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint/config-array@0.21.0':
-    resolution: {integrity: sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==}
+  '@eslint/config-array@0.21.1':
+    resolution: {integrity: sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/config-helpers@0.4.0':
-    resolution: {integrity: sha512-WUFvV4WoIwW8Bv0KeKCIIEgdSiFOsulyN0xrMu+7z43q/hkOLXjvb5u7UC9jDxvRzcrbEmuZBX5yJZz1741jog==}
+  '@eslint/config-helpers@0.4.1':
+    resolution: {integrity: sha512-csZAzkNhsgwb0I/UAV6/RGFTbiakPCf0ZrGmrIxQpYvGZ00PhTkSnyKNolphgIvmnJeGw6rcGVEXfTzUnFuEvw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/core@0.13.0':
@@ -3798,12 +3801,12 @@ packages:
     resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/js@9.37.0':
-    resolution: {integrity: sha512-jaS+NJ+hximswBG6pjNX0uEJZkrT0zwpVi3BA3vX22aFGjJjmgSTSmPpZCRKmoBL5VY/M6p0xsSJx7rk7sy5gg==}
+  '@eslint/js@9.38.0':
+    resolution: {integrity: sha512-UZ1VpFvXf9J06YG9xQBdnzU+kthors6KjhMAl6f4gH4usHyh31rUf2DLGInT8RFYIReYXNSydgPY0V2LuWgl7A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/object-schema@2.1.6':
-    resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
+  '@eslint/object-schema@2.1.7':
+    resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/plugin-kit@0.2.8':
@@ -3919,14 +3922,14 @@ packages:
   '@iconify-json/octicon@1.2.16':
     resolution: {integrity: sha512-lVf3SbtRK0kNLAK7PxBoiyNGRZVdKpi+9y2/DXv8nWeFgBhU/ctK8D1s4wd0FNp1ZMyrh7K2MXmbnENcDOIUhA==}
 
-  '@iconify-json/simple-icons@1.2.54':
-    resolution: {integrity: sha512-OQQYl8yC5j3QklZOYnK31QYe5h47IhyCoxSLd53f0e0nA4dgi8VOZS30SgSAbsecQ+S0xlGJMjXIHTIqZ+ML3w==}
+  '@iconify-json/simple-icons@1.2.55':
+    resolution: {integrity: sha512-9vc04pmup/zcef8hDypWU8nMwMaFVkWuUzWkxyL++DVp5AA8baoJHK6RyKN1v+cvfR2agxkUb053XVggzFFkTA==}
 
   '@iconify-json/vscode-icons@1.2.32':
     resolution: {integrity: sha512-UzZmL6hF02YGu/qEbpskEVnstlNJG+c+0PNzNYTIBf/dXylWHLUVufhOXqAzuGRjkUZ2q7rPpOEwLUPkhkFHUA==}
 
-  '@iconify/json@2.2.395':
-    resolution: {integrity: sha512-XSYOnlGqiZhJkFFBUiVK4C5VIiv4rxyKtCmkQ9nS4zfMpS4xT0BF9+qWUKOHYgeCzCLghyWfrm6Eti3Sv5kfqQ==}
+  '@iconify/json@2.2.398':
+    resolution: {integrity: sha512-SEUDjkyAenAKMd5hDfzNzeObZw+KgQdIHaOuWA4yv89qSf2s0dJ7L1iXhRjtEZxFnuXQ2D67uFiHmE+90jvDGQ==}
 
   '@iconify/tailwind@1.2.0':
     resolution: {integrity: sha512-KgpIHWOTcRYw1XcoUqyNSrmYyfLLqZYu3AmP8zdfLk0F5TqRO8YerhlvlQmGfn7rJXgPeZN569xPAJnJ53zZxA==}
@@ -4050,8 +4053,8 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
-  '@jspm/generator@2.7.3':
-    resolution: {integrity: sha512-tRPIygsFlFsTZUgsWDyLxrkyO4HIzdMCKRhBj4W+3qANqW5z4uuPSk537U3w9rdTOq6E5DRknw1D1npRKCGnoA==}
+  '@jspm/generator@2.7.4':
+    resolution: {integrity: sha512-DmAERvcXD0suJ4EXuoX7jCj1Tig02FnUrt280bwMs/A1ir1Dwm0Q6WRNtwh5Bw/gdVKoP3mjuonLAEYZXqwh7A==}
 
   '@jspm/import-map@1.2.2':
     resolution: {integrity: sha512-QrM7+lkgVE8t9NZSm9fDSzheguEOVCOxueKxSwgoOt7yUWesWKDFmmL9bQFURl4IqMcpPz7VV2Tvw9s9emaJzQ==}
@@ -4059,24 +4062,26 @@ packages:
   '@juggle/resize-observer@3.4.0':
     resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
 
-  '@keyv/bigmap@1.0.3':
-    resolution: {integrity: sha512-jUEkNlnE9tYzX2AIBeoSe1gVUvSOfIOQ5EFPL5Un8cFHGvjD9L/fxpxlS1tEivRLHgapO2RZJ3D93HYAa049pg==}
+  '@keyv/bigmap@1.1.0':
+    resolution: {integrity: sha512-MX7XIUNwVRK+hjZcAbNJ0Z8DREo+Weu9vinBOjGU1thEi9F6vPhICzBbk4CCf3eEefKRz7n6TfZXwUFZTSgj8Q==}
     engines: {node: '>= 18'}
+    peerDependencies:
+      keyv: ^5.5.3
 
   '@keyv/serialize@1.1.1':
     resolution: {integrity: sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==}
 
-  '@lezer/common@1.2.3':
-    resolution: {integrity: sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==}
+  '@lezer/common@1.3.0':
+    resolution: {integrity: sha512-L9X8uHCYU310o99L3/MpJKYxPzXPOS7S0NmBaM7UO/x2Kb2WbmMLSkfvdr1KxRIFYOpbY0Jhn7CfLSUDzL8arQ==}
 
-  '@lezer/highlight@1.2.1':
-    resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
+  '@lezer/highlight@1.2.2':
+    resolution: {integrity: sha512-z8TQwaBXXQIvG6i2g3e9cgMwUUXu9Ib7jo2qRRggdhwKpM56Dw3PM3wmexn+EGaaOZ7az0K7sjc3/gcGW7sz7A==}
 
   '@lezer/lr@1.4.2':
     resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}
 
-  '@lezer/markdown@1.4.3':
-    resolution: {integrity: sha512-kfw+2uMrQ/wy/+ONfrH83OkdFNM0ye5Xq96cLlaCy7h5UT9FO54DU4oRoIc0CSBh5NWmWuiIJA7NGLMJbQ+Oxg==}
+  '@lezer/markdown@1.5.1':
+    resolution: {integrity: sha512-F3ZFnIfNAOy/jPSk6Q0e3bs7e9grfK/n5zerkKoc5COH6Guy3Zb0vrJwXzdck79K16goBhYBRAvhf+ksqe0cMg==}
 
   '@manypkg/find-root@1.1.0':
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
@@ -4259,8 +4264,8 @@ packages:
     resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
-  '@playwright/test@1.56.0':
-    resolution: {integrity: sha512-Tzh95Twig7hUwwNe381/K3PggZBZblKUe2wv25oIpzWLr6Z0m4KgV1ZVIjnR6GM9ANEqjZD7XsZEa6JL/7YEgg==}
+  '@playwright/test@1.56.1':
+    resolution: {integrity: sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -4314,8 +4319,8 @@ packages:
   '@rolldown/pluginutils@1.0.0-beta.29':
     resolution: {integrity: sha512-NIJgOsMjbxAXvoGq/X0gD7VPMQ8j9g0BiDaNjVNVjvl+iKXxL3Jre0v31RmBYeLEmkbj2s02v8vFTbUXi5XS2Q==}
 
-  '@rolldown/pluginutils@1.0.0-beta.43':
-    resolution: {integrity: sha512-5Uxg7fQUCmfhax7FJke2+8B6cqgeUJUD9o2uXIKXhD+mG0mL6NObmVoi9wXEU1tY89mZKgAYA6fTbftx3q2ZPQ==}
+  '@rolldown/pluginutils@1.0.0-beta.44':
+    resolution: {integrity: sha512-g6eW7Zwnr2c5RADIoqziHoVs6b3W5QTQ4+qbpfjbkMJ9x+8Og211VW/oot2dj9dVwaK/UyC6Yo+02gV+wWQVNg==}
 
   '@rollup/plugin-alias@5.1.1':
     resolution: {integrity: sha512-PR9zDb+rOzkRb2VD+EuKB7UC41vU5DIwZ5qqCpk0KJudcWAyi8rvYOhS7+L5aZCspw1stTViLgN5v6FF1p5cgQ==}
@@ -4337,8 +4342,8 @@ packages:
       '@types/babel__core':
         optional: true
 
-  '@rollup/plugin-commonjs@28.0.6':
-    resolution: {integrity: sha512-XSQB1K7FUU5QP+3lOQmVCE3I0FcbbNvmNT4VJSj93iUjayaARrTQeoRdiYQoftAJBLrR9t2agwAd3ekaTgHNlw==}
+  '@rollup/plugin-commonjs@28.0.8':
+    resolution: {integrity: sha512-o1Ug9PxYsF61R7/NXO/GgMZZproLd/WH2XA53Tp9ppf6bU1lMlTtC/gUM6zM3mesi2E0rypk+PNtVrELREyWEQ==}
     engines: {node: '>=16.0.0 || 14 >= 14.17'}
     peerDependencies:
       rollup: ^2.68.0||^3.0.0||^4.0.0
@@ -4424,124 +4429,124 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.52.4':
-    resolution: {integrity: sha512-BTm2qKNnWIQ5auf4deoetINJm2JzvihvGb9R6K/ETwKLql/Bb3Eg2H1FBp1gUb4YGbydMA3jcmQTR73q7J+GAA==}
+  '@rollup/rollup-android-arm-eabi@4.52.5':
+    resolution: {integrity: sha512-8c1vW4ocv3UOMp9K+gToY5zL2XiiVw3k7f1ksf4yO1FlDFQ1C2u72iACFnSOceJFsWskc2WZNqeRhFRPzv+wtQ==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.52.4':
-    resolution: {integrity: sha512-P9LDQiC5vpgGFgz7GSM6dKPCiqR3XYN1WwJKA4/BUVDjHpYsf3iBEmVz62uyq20NGYbiGPR5cNHI7T1HqxNs2w==}
+  '@rollup/rollup-android-arm64@4.52.5':
+    resolution: {integrity: sha512-mQGfsIEFcu21mvqkEKKu2dYmtuSZOBMmAl5CFlPGLY94Vlcm+zWApK7F/eocsNzp8tKmbeBP8yXyAbx0XHsFNA==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.52.4':
-    resolution: {integrity: sha512-QRWSW+bVccAvZF6cbNZBJwAehmvG9NwfWHwMy4GbWi/BQIA/laTIktebT2ipVjNncqE6GLPxOok5hsECgAxGZg==}
+  '@rollup/rollup-darwin-arm64@4.52.5':
+    resolution: {integrity: sha512-takF3CR71mCAGA+v794QUZ0b6ZSrgJkArC+gUiG6LB6TQty9T0Mqh3m2ImRBOxS2IeYBo4lKWIieSvnEk2OQWA==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.52.4':
-    resolution: {integrity: sha512-hZgP05pResAkRJxL1b+7yxCnXPGsXU0fG9Yfd6dUaoGk+FhdPKCJ5L1Sumyxn8kvw8Qi5PvQ8ulenUbRjzeCTw==}
+  '@rollup/rollup-darwin-x64@4.52.5':
+    resolution: {integrity: sha512-W901Pla8Ya95WpxDn//VF9K9u2JbocwV/v75TE0YIHNTbhqUTv9w4VuQ9MaWlNOkkEfFwkdNhXgcLqPSmHy0fA==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.52.4':
-    resolution: {integrity: sha512-xmc30VshuBNUd58Xk4TKAEcRZHaXlV+tCxIXELiE9sQuK3kG8ZFgSPi57UBJt8/ogfhAF5Oz4ZSUBN77weM+mQ==}
+  '@rollup/rollup-freebsd-arm64@4.52.5':
+    resolution: {integrity: sha512-QofO7i7JycsYOWxe0GFqhLmF6l1TqBswJMvICnRUjqCx8b47MTo46W8AoeQwiokAx3zVryVnxtBMcGcnX12LvA==}
     cpu: [arm64]
     os: [freebsd]
 
-  '@rollup/rollup-freebsd-x64@4.52.4':
-    resolution: {integrity: sha512-WdSLpZFjOEqNZGmHflxyifolwAiZmDQzuOzIq9L27ButpCVpD7KzTRtEG1I0wMPFyiyUdOO+4t8GvrnBLQSwpw==}
+  '@rollup/rollup-freebsd-x64@4.52.5':
+    resolution: {integrity: sha512-jr21b/99ew8ujZubPo9skbrItHEIE50WdV86cdSoRkKtmWa+DDr6fu2c/xyRT0F/WazZpam6kk7IHBerSL7LDQ==}
     cpu: [x64]
     os: [freebsd]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.52.4':
-    resolution: {integrity: sha512-xRiOu9Of1FZ4SxVbB0iEDXc4ddIcjCv2aj03dmW8UrZIW7aIQ9jVJdLBIhxBI+MaTnGAKyvMwPwQnoOEvP7FgQ==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.52.5':
+    resolution: {integrity: sha512-PsNAbcyv9CcecAUagQefwX8fQn9LQ4nZkpDboBOttmyffnInRy8R8dSg6hxxl2Re5QhHBf6FYIDhIj5v982ATQ==}
     cpu: [arm]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.52.4':
-    resolution: {integrity: sha512-FbhM2p9TJAmEIEhIgzR4soUcsW49e9veAQCziwbR+XWB2zqJ12b4i/+hel9yLiD8pLncDH4fKIPIbt5238341Q==}
+  '@rollup/rollup-linux-arm-musleabihf@4.52.5':
+    resolution: {integrity: sha512-Fw4tysRutyQc/wwkmcyoqFtJhh0u31K+Q6jYjeicsGJJ7bbEq8LwPWV/w0cnzOqR2m694/Af6hpFayLJZkG2VQ==}
     cpu: [arm]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-arm64-gnu@4.52.4':
-    resolution: {integrity: sha512-4n4gVwhPHR9q/g8lKCyz0yuaD0MvDf7dV4f9tHt0C73Mp8h38UCtSCSE6R9iBlTbXlmA8CjpsZoujhszefqueg==}
+  '@rollup/rollup-linux-arm64-gnu@4.52.5':
+    resolution: {integrity: sha512-a+3wVnAYdQClOTlyapKmyI6BLPAFYs0JM8HRpgYZQO02rMR09ZcV9LbQB+NL6sljzG38869YqThrRnfPMCDtZg==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-arm64-musl@4.52.4':
-    resolution: {integrity: sha512-u0n17nGA0nvi/11gcZKsjkLj1QIpAuPFQbR48Subo7SmZJnGxDpspyw2kbpuoQnyK+9pwf3pAoEXerJs/8Mi9g==}
+  '@rollup/rollup-linux-arm64-musl@4.52.5':
+    resolution: {integrity: sha512-AvttBOMwO9Pcuuf7m9PkC1PUIKsfaAJ4AYhy944qeTJgQOqJYJ9oVl2nYgY7Rk0mkbsuOpCAYSs6wLYB2Xiw0Q==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-loong64-gnu@4.52.4':
-    resolution: {integrity: sha512-0G2c2lpYtbTuXo8KEJkDkClE/+/2AFPdPAbmaHoE870foRFs4pBrDehilMcrSScrN/fB/1HTaWO4bqw+ewBzMQ==}
+  '@rollup/rollup-linux-loong64-gnu@4.52.5':
+    resolution: {integrity: sha512-DkDk8pmXQV2wVrF6oq5tONK6UHLz/XcEVow4JTTerdeV1uqPeHxwcg7aFsfnSm9L+OO8WJsWotKM2JJPMWrQtA==}
     cpu: [loong64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-ppc64-gnu@4.52.4':
-    resolution: {integrity: sha512-teSACug1GyZHmPDv14VNbvZFX779UqWTsd7KtTM9JIZRDI5NUwYSIS30kzI8m06gOPB//jtpqlhmraQ68b5X2g==}
+  '@rollup/rollup-linux-ppc64-gnu@4.52.5':
+    resolution: {integrity: sha512-W/b9ZN/U9+hPQVvlGwjzi+Wy4xdoH2I8EjaCkMvzpI7wJUs8sWJ03Rq96jRnHkSrcHTpQe8h5Tg3ZzUPGauvAw==}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.52.4':
-    resolution: {integrity: sha512-/MOEW3aHjjs1p4Pw1Xk4+3egRevx8Ji9N6HUIA1Ifh8Q+cg9dremvFCUbOX2Zebz80BwJIgCBUemjqhU5XI5Eg==}
+  '@rollup/rollup-linux-riscv64-gnu@4.52.5':
+    resolution: {integrity: sha512-sjQLr9BW7R/ZiXnQiWPkErNfLMkkWIoCz7YMn27HldKsADEKa5WYdobaa1hmN6slu9oWQbB6/jFpJ+P2IkVrmw==}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-riscv64-musl@4.52.4':
-    resolution: {integrity: sha512-1HHmsRyh845QDpEWzOFtMCph5Ts+9+yllCrREuBR/vg2RogAQGGBRC8lDPrPOMnrdOJ+mt1WLMOC2Kao/UwcvA==}
+  '@rollup/rollup-linux-riscv64-musl@4.52.5':
+    resolution: {integrity: sha512-hq3jU/kGyjXWTvAh2awn8oHroCbrPm8JqM7RUpKjalIRWWXE01CQOf/tUNWNHjmbMHg/hmNCwc/Pz3k1T/j/Lg==}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-s390x-gnu@4.52.4':
-    resolution: {integrity: sha512-seoeZp4L/6D1MUyjWkOMRU6/iLmCU2EjbMTyAG4oIOs1/I82Y5lTeaxW0KBfkUdHAWN7j25bpkt0rjnOgAcQcA==}
+  '@rollup/rollup-linux-s390x-gnu@4.52.5':
+    resolution: {integrity: sha512-gn8kHOrku8D4NGHMK1Y7NA7INQTRdVOntt1OCYypZPRt6skGbddska44K8iocdpxHTMMNui5oH4elPH4QOLrFQ==}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-x64-gnu@4.52.4':
-    resolution: {integrity: sha512-Wi6AXf0k0L7E2gteNsNHUs7UMwCIhsCTs6+tqQ5GPwVRWMaflqGec4Sd8n6+FNFDw9vGcReqk2KzBDhCa1DLYg==}
+  '@rollup/rollup-linux-x64-gnu@4.52.5':
+    resolution: {integrity: sha512-hXGLYpdhiNElzN770+H2nlx+jRog8TyynpTVzdlc6bndktjKWyZyiCsuDAlpd+j+W+WNqfcyAWz9HxxIGfZm1Q==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-x64-musl@4.52.4':
-    resolution: {integrity: sha512-dtBZYjDmCQ9hW+WgEkaffvRRCKm767wWhxsFW3Lw86VXz/uJRuD438/XvbZT//B96Vs8oTA8Q4A0AfHbrxP9zw==}
+  '@rollup/rollup-linux-x64-musl@4.52.5':
+    resolution: {integrity: sha512-arCGIcuNKjBoKAXD+y7XomR9gY6Mw7HnFBv5Rw7wQRvwYLR7gBAgV7Mb2QTyjXfTveBNFAtPt46/36vV9STLNg==}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-openharmony-arm64@4.52.4':
-    resolution: {integrity: sha512-1ox+GqgRWqaB1RnyZXL8PD6E5f7YyRUJYnCqKpNzxzP0TkaUh112NDrR9Tt+C8rJ4x5G9Mk8PQR3o7Ku2RKqKA==}
+  '@rollup/rollup-openharmony-arm64@4.52.5':
+    resolution: {integrity: sha512-QoFqB6+/9Rly/RiPjaomPLmR/13cgkIGfA40LHly9zcH1S0bN2HVFYk3a1eAyHQyjs3ZJYlXvIGtcCs5tko9Cw==}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rollup/rollup-win32-arm64-msvc@4.52.4':
-    resolution: {integrity: sha512-8GKr640PdFNXwzIE0IrkMWUNUomILLkfeHjXBi/nUvFlpZP+FA8BKGKpacjW6OUUHaNI6sUURxR2U2g78FOHWQ==}
+  '@rollup/rollup-win32-arm64-msvc@4.52.5':
+    resolution: {integrity: sha512-w0cDWVR6MlTstla1cIfOGyl8+qb93FlAVutcor14Gf5Md5ap5ySfQ7R9S/NjNaMLSFdUnKGEasmVnu3lCMqB7w==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.52.4':
-    resolution: {integrity: sha512-AIy/jdJ7WtJ/F6EcfOb2GjR9UweO0n43jNObQMb6oGxkYTfLcnN7vYYpG+CN3lLxrQkzWnMOoNSHTW54pgbVxw==}
+  '@rollup/rollup-win32-ia32-msvc@4.52.5':
+    resolution: {integrity: sha512-Aufdpzp7DpOTULJCuvzqcItSGDH73pF3ko/f+ckJhxQyHtp67rHw3HMNxoIdDMUITJESNE6a8uh4Lo4SLouOUg==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-gnu@4.52.4':
-    resolution: {integrity: sha512-UF9KfsH9yEam0UjTwAgdK0anlQ7c8/pWPU2yVjyWcF1I1thABt6WXE47cI71pGiZ8wGvxohBoLnxM04L/wj8mQ==}
+  '@rollup/rollup-win32-x64-gnu@4.52.5':
+    resolution: {integrity: sha512-UGBUGPFp1vkj6p8wCRraqNhqwX/4kNQPS57BCFc8wYh0g94iVIW33wJtQAx3G7vrjjNtRaxiMUylM0ktp/TRSQ==}
     cpu: [x64]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.52.4':
-    resolution: {integrity: sha512-bf9PtUa0u8IXDVxzRToFQKsNCRz9qLYfR/MpECxl4mRoWYjAeFjgxj1XdZr2M/GNVpT05p+LgQOHopYDlUu6/w==}
+  '@rollup/rollup-win32-x64-msvc@4.52.5':
+    resolution: {integrity: sha512-TAcgQh2sSkykPRWLrdyy2AiceMckNf5loITqXxFI5VuQjS5tSuw3WlwdN8qv8vzjLAUTvYaH/mVjSFpbkFbpTg==}
     cpu: [x64]
     os: [win32]
 
@@ -4659,8 +4664,8 @@ packages:
     resolution: {integrity: sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==}
     engines: {node: '>=12'}
 
-  '@tanstack/query-core@5.90.2':
-    resolution: {integrity: sha512-k/TcR3YalnzibscALLwxeiLUub6jN5EDLwKDiO7q5f4ICEoptJ+n9+7vcEFy5/x/i6Q+Lb/tXrsKCggf5uQJXQ==}
+  '@tanstack/query-core@5.90.5':
+    resolution: {integrity: sha512-wLamYp7FaDq6ZnNehypKI5fNvxHPfTYylE0m/ZpuuzJfJqhR5Pxg9gvGBHZx4n7J+V5Rg5mZxHHTlv25Zt5u+w==}
 
   '@tanstack/store@0.7.7':
     resolution: {integrity: sha512-xa6pTan1bcaqYDS9BDpSiS63qa6EoDkPN9RsRaxHuDdVDNntzq3xNwR5YKTU/V3SkSyC9T4YVOPh2zRQN0nhIQ==}
@@ -4668,8 +4673,8 @@ packages:
   '@tanstack/virtual-core@3.13.12':
     resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==}
 
-  '@tanstack/vue-query@5.90.2':
-    resolution: {integrity: sha512-DLLY/B5QCbpi6AM2aaCowukQx2rXsQ4mH8RuDd8wQz0/L2bZ9Z/GgXlV310ouo47pJBmeibMVTmuoWsleT8llg==}
+  '@tanstack/vue-query@5.90.5':
+    resolution: {integrity: sha512-bTEmgIb6o5BqkoJPNV7ZKKsDHjiVnNydORw1n6S/x0dppb3lTT5KFOotQ5PqZG3OQY+9AwA6RJJN3pEx+9j1Pg==}
     peerDependencies:
       '@vue/composition-api': ^1.1.2
       vue: ^3.5.17
@@ -4691,11 +4696,11 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
-  '@tinyflow-ai/ui@1.1.5':
-    resolution: {integrity: sha512-RoWnoDBde6/h0YRDmMkfgRJHWPhptC4MWASVYwstAYWy55KX/3fdn8YdsG7YnB+zeCZ4W7Na7vOdnTK9NsFxLA==}
+  '@tinyflow-ai/ui@1.1.7':
+    resolution: {integrity: sha512-aFI5dvYoKyp7sOBh0PXtta2wzzSwnfiMjPDEIGqRyR5nH1op8PLrD1Uw1OxAjV0iXoP+uvVWKZEtP8SVFJyXbw==}
 
-  '@tinyflow-ai/vue@1.1.5':
-    resolution: {integrity: sha512-e7mqIY3v/B9RapTotE/mPSJNJxt254uTclqSxo0YvI1EDlFIKVF077Fr2bXgf8yk6OoQ2Iu81OLQzlwlhhTGfA==}
+  '@tinyflow-ai/vue@1.1.7':
+    resolution: {integrity: sha512-zRuMlUU3mz6wIxsCmzk42PGBTH2g5OYBlEB00GJ2Z4AalhKIIWotTZE8h6ixNUEVRMog+XZ+fIIhjjgicjSLVA==}
     peerDependencies:
       vue: ^3.5.17
 
@@ -4897,11 +4902,11 @@ packages:
   '@types/node@12.20.55':
     resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==}
 
-  '@types/node@22.18.10':
-    resolution: {integrity: sha512-anNG/V/Efn/YZY4pRzbACnKxNKoBng2VTFydVu8RRs5hQjikP8CQfaeAV59VFSCzKNp90mXiVXW2QzV56rwMrg==}
+  '@types/node@22.18.11':
+    resolution: {integrity: sha512-Gd33J2XIrXurb+eT2ktze3rJAfAp9ZNjlBdh4SVgyrKEOADwCbdUDaK7QgJno8Ue4kcajscsKqu6n8OBG3hhCQ==}
 
-  '@types/node@24.7.2':
-    resolution: {integrity: sha512-/NbVmcGTP+lj5oa4yiYxxeBjRivKQ5Ns1eSZeB99ExsEQ6rX5XYU1Zy/gGxY/ilqtD4Etx9mKyrPxZRetiahhA==}
+  '@types/node@24.8.1':
+    resolution: {integrity: sha512-alv65KGRadQVfVcG69MuB4IzdYVpRwMG/mq8KWOaoOdyY617P5ivaDiMCGOFDWD2sAn5Q0mR3mRtUOgm99hL9Q==}
 
   '@types/nprogress@0.2.3':
     resolution: {integrity: sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==}
@@ -4945,23 +4950,23 @@ packages:
   '@types/web-bluetooth@0.0.21':
     resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
 
-  '@typescript-eslint/eslint-plugin@8.46.0':
-    resolution: {integrity: sha512-hA8gxBq4ukonVXPy0OKhiaUh/68D0E88GSmtC1iAEnGaieuDi38LhS7jdCHRLi6ErJBNDGCzvh5EnzdPwUc0DA==}
+  '@typescript-eslint/eslint-plugin@8.46.1':
+    resolution: {integrity: sha512-rUsLh8PXmBjdiPY+Emjz9NX2yHvhS11v0SR6xNJkm5GM1MO9ea/1GoDKlHHZGrOJclL/cZ2i/vRUYVtjRhrHVQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.46.0
+      '@typescript-eslint/parser': ^8.46.1
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/parser@8.46.0':
-    resolution: {integrity: sha512-n1H6IcDhmmUEG7TNVSspGmiHHutt7iVKtZwRppD7e04wha5MrkV1h3pti9xQLcCMt6YWsncpoT0HMjkH1FNwWQ==}
+  '@typescript-eslint/parser@8.46.1':
+    resolution: {integrity: sha512-6JSSaBZmsKvEkbRUkf7Zj7dru/8ZCrJxAqArcLaVMee5907JdtEbKGsZ7zNiIm/UAkpGUkaSMZEXShnN2D1HZA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/project-service@8.46.0':
-    resolution: {integrity: sha512-OEhec0mH+U5Je2NZOeK1AbVCdm0ChyapAyTeXVIYTPXDJ3F07+cu87PPXcGoYqZ7M9YJVvFnfpGg1UmCIqM+QQ==}
+  '@typescript-eslint/project-service@8.46.1':
+    resolution: {integrity: sha512-FOIaFVMHzRskXr5J4Jp8lFVV0gz5ngv3RHmn+E4HYxSJ3DgDzU7fVI1/M7Ijh1zf6S7HIoaIOtln1H5y8V+9Zg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
@@ -4970,18 +4975,18 @@ packages:
     resolution: {integrity: sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
-  '@typescript-eslint/scope-manager@8.46.0':
-    resolution: {integrity: sha512-lWETPa9XGcBes4jqAMYD9fW0j4n6hrPtTJwWDmtqgFO/4HF4jmdH/Q6wggTw5qIT5TXjKzbt7GsZUBnWoO3dqw==}
+  '@typescript-eslint/scope-manager@8.46.1':
+    resolution: {integrity: sha512-weL9Gg3/5F0pVQKiF8eOXFZp8emqWzZsOJuWRUNtHT+UNV2xSJegmpCNQHy37aEQIbToTq7RHKhWvOsmbM680A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/tsconfig-utils@8.46.0':
-    resolution: {integrity: sha512-WrYXKGAHY836/N7zoK/kzi6p8tXFhasHh8ocFL9VZSAkvH956gfeRfcnhs3xzRy8qQ/dq3q44v1jvQieMFg2cw==}
+  '@typescript-eslint/tsconfig-utils@8.46.1':
+    resolution: {integrity: sha512-X88+J/CwFvlJB+mK09VFqx5FE4H5cXD+H/Bdza2aEWkSb8hnWIQorNcscRl4IEo1Cz9VI/+/r/jnGWkbWPx54g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/type-utils@8.46.0':
-    resolution: {integrity: sha512-hy+lvYV1lZpVs2jRaEYvgCblZxUoJiPyCemwbQZ+NGulWkQRy0HRPYAoef/CNSzaLt+MLvMptZsHXHlkEilaeg==}
+  '@typescript-eslint/type-utils@8.46.1':
+    resolution: {integrity: sha512-+BlmiHIiqufBxkVnOtFwjah/vrkF4MtKKvpXrKSPLCkCtAp8H01/VV43sfqA98Od7nJpDcFnkwgyfQbOG0AMvw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -4991,8 +4996,8 @@ packages:
     resolution: {integrity: sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
-  '@typescript-eslint/types@8.46.0':
-    resolution: {integrity: sha512-bHGGJyVjSE4dJJIO5yyEWt/cHyNwga/zXGJbJJ8TiO01aVREK6gCTu3L+5wrkb1FbDkQ+TKjMNe9R/QQQP9+rA==}
+  '@typescript-eslint/types@8.46.1':
+    resolution: {integrity: sha512-C+soprGBHwWBdkDpbaRC4paGBrkIXxVlNohadL5o0kfhsXqOC6GYH2S/Obmig+I0HTDl8wMaRySwrfrXVP8/pQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@typescript-eslint/typescript-estree@7.18.0':
@@ -5004,8 +5009,8 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/typescript-estree@8.46.0':
-    resolution: {integrity: sha512-ekDCUfVpAKWJbRfm8T1YRrCot1KFxZn21oV76v5Fj4tr7ELyk84OS+ouvYdcDAwZL89WpEkEj2DKQ+qg//+ucg==}
+  '@typescript-eslint/typescript-estree@8.46.1':
+    resolution: {integrity: sha512-uIifjT4s8cQKFQ8ZBXXyoUODtRoAd7F7+G8MKmtzj17+1UbdzFl52AzRyZRyKqPHhgzvXunnSckVu36flGy8cg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
@@ -5016,8 +5021,8 @@ packages:
     peerDependencies:
       eslint: ^8.56.0
 
-  '@typescript-eslint/utils@8.46.0':
-    resolution: {integrity: sha512-nD6yGWPj1xiOm4Gk0k6hLSZz2XkNXhuYmyIrOWcHoPuAhjT9i5bAG+xbWPgFeNR8HPHHtpNKdYUXJl/D3x7f5g==}
+  '@typescript-eslint/utils@8.46.1':
+    resolution: {integrity: sha512-vkYUy6LdZS7q1v/Gxb2Zs7zziuXN0wxqsetJdeZdRe/f5dwJFglmuvZBfTUivCtjH725C1jWCDfpadadD95EDQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -5027,8 +5032,8 @@ packages:
     resolution: {integrity: sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
-  '@typescript-eslint/visitor-keys@8.46.0':
-    resolution: {integrity: sha512-FrvMpAK+hTbFy7vH5j1+tMYHMSKLE6RzluFJlkFNKD0p9YsUT75JlBSmr5so3QRzvMwU5/bIEdeNrxm8du8l3Q==}
+  '@typescript-eslint/visitor-keys@8.46.1':
+    resolution: {integrity: sha512-ptkmIf2iDkNUjdeu2bQqhFPV1m6qTnFFjg7PPDjxKWaMaP0Z6I9l30Jr3g5QqbZGdw8YdYvLp+XnqnWWZOg/NA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@ungap/structured-clone@1.3.0':
@@ -5142,16 +5147,16 @@ packages:
     peerDependencies:
       zod: ^3.24.0
 
-  '@vercel/nft@0.30.2':
-    resolution: {integrity: sha512-pquXF3XZFg/T3TBor08rUhIGgOhdSilbn7WQLVP/aVSSO+25Rs4H/m3nxNDQ2x3znX7Z3yYjryN8xaLwypcwQg==}
+  '@vercel/nft@0.30.3':
+    resolution: {integrity: sha512-UEq+eF0ocEf9WQCV1gktxKhha36KDs7jln5qii6UpPf5clMqDc0p3E7d9l2Smx0i9Pm1qpq4S4lLfNl97bbv6w==}
     engines: {node: '>=18'}
     hasBin: true
 
-  '@vite-pwa/vitepress@1.0.0':
-    resolution: {integrity: sha512-i5RFah4urA6tZycYlGyBslVx8cVzbZBcARJLDg5rWMfAkRmyLtpRU6usGfVOwyN9kjJ2Bkm+gBHXF1hhr7HptQ==}
+  '@vite-pwa/vitepress@1.0.1':
+    resolution: {integrity: sha512-INBxiNLZpef349KSmQ6zHWB4uqIgZgvJnwzH3bedW/7d/Ej0lK5HP95fiBdIc2wHUtmR3Znnegmt3zLESVWrpA==}
     peerDependencies:
       '@vite-pwa/assets-generator': ^1.0.0
-      vite-plugin-pwa: ^1.0.0
+      vite-plugin-pwa: ^1.1.0
     peerDependenciesMeta:
       '@vite-pwa/assets-generator':
         optional: true
@@ -5432,13 +5437,13 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
-  '@xyflow/svelte@1.3.1':
-    resolution: {integrity: sha512-aLr2v0/nr+zER5+dCzEmR5qCu9l7FCKZwYiRvCX15U2FVIdO2M522pyPEr7Siwq6EEx0QjECACeN+rLZCDSzeA==}
+  '@xyflow/svelte@1.4.0':
+    resolution: {integrity: sha512-LXokbj1nEP8FROE/y9/xU11G4dM2+mGBiMmPU714Mmk+bGnyot+nZmyR8Y7OFBUahY1mnMNfeclLPJKGy3r7tA==}
     peerDependencies:
       svelte: ^5.25.0
 
-  '@xyflow/system@0.0.70':
-    resolution: {integrity: sha512-PpC//u9zxdjj0tfTSmZrg3+sRbTz6kop/Amky44U2Dl51sxzDTIUfXMwETOYpmr2dqICWXBIJwXL2a9QWtX2XA==}
+  '@xyflow/system@0.0.71':
+    resolution: {integrity: sha512-O2xIK84Uv1hH8qzeY94SKsj0R1n2jXHLsX6RZnM4x1Uc4oWiVbXDFucnkbFwhnQm3IIdAxkbgd2rEDp5oTRhhQ==}
 
   JSONStream@1.3.5:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
@@ -5503,8 +5508,8 @@ packages:
   ajv@8.17.1:
     resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
 
-  algoliasearch@5.40.0:
-    resolution: {integrity: sha512-a9aIL2E3Z7uYUPMCmjMFFd5MWhn+ccTubEvnMy7rOTZCB62dXBJtz0R5BZ/TPuX3R9ocBsgWuAbGWQ+Ph4Fmlg==}
+  algoliasearch@5.40.1:
+    resolution: {integrity: sha512-iUNxcXUNg9085TJx0HJLjqtDE0r1RZ0GOGrt8KNQqQT5ugu8lZsHuMUYW/e0lHhq6xBvmktU9Bw4CXP9VQeKrg==}
     engines: {node: '>= 14.0.0'}
 
   alien-signals@0.4.14:
@@ -5712,8 +5717,8 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  baseline-browser-mapping@2.8.16:
-    resolution: {integrity: sha512-OMu3BGQ4E7P1ErFsIPpbJh0qvDudM/UuJeHgkAvfWe+0HFJCXh+t/l8L6fVLR55RI/UbKrVLnAXZSVwd9ysWYw==}
+  baseline-browser-mapping@2.8.18:
+    resolution: {integrity: sha512-UYmTpOBwgPScZpS4A+YbapwWuBwasxvO/2IOHArSsAhL/+ZdmATBXTex3t+l2hXwLVYK382ibr/nKoY9GKe86w==}
     hasBin: true
 
   better-path-resolve@1.0.0:
@@ -5797,8 +5802,8 @@ packages:
     resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
     engines: {node: '>=18'}
 
-  c12@3.3.0:
-    resolution: {integrity: sha512-K9ZkuyeJQeqLEyqldbYLG3wjqwpw4BVaAqvmxq3GYKK0b1A/yYQdIcJxkzAOWcNVWhJpRXAPfZFueekiY/L8Dw==}
+  c12@3.3.1:
+    resolution: {integrity: sha512-LcWQ01LT9tkoUINHgpIOv3mMs+Abv7oVCrtpMRi1PaapVEpWoMga5WuT7/DqFTu7URP9ftbOmimNw1KNIGh9DQ==}
     peerDependencies:
       magicast: ^0.3.5
     peerDependenciesMeta:
@@ -5813,8 +5818,8 @@ packages:
     resolution: {integrity: sha512-+7LYcYGBYoNqTp1Rv7Ny1YjUo5E0/ftkQtraH3vkfAGgVHc+ouWdC8okAwQgQR7EVIdW6JTzTmhKFwzb+4okAQ==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
-  cacheable@2.1.0:
-    resolution: {integrity: sha512-zzL1BxdnqwD69JRT0dihnawAcLkBMwAH+hZSKjUzeBbPedVhk3qYPjRw9VOMYWwt5xRih5xd8S+3kEdGohZm/g==}
+  cacheable@2.1.1:
+    resolution: {integrity: sha512-LmF4AXiSNdiRbI2UjH8pAp9NIXxeQsTotpEaegPiDcnN0YPygDJDV3l/Urc0mL72JWdATEorKqIHEx55nDlONg==}
 
   call-bind-apply-helpers@1.0.2:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
@@ -5867,8 +5872,8 @@ packages:
   caniuse-api@3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
 
-  caniuse-lite@1.0.30001750:
-    resolution: {integrity: sha512-cuom0g5sdX6rw00qOoLNSFCJ9/mYIsuSOA+yzpDw8eopiFqcVwQvZHqov0vmEighRxX++cfC0Vg1G+1Iy/mSpQ==}
+  caniuse-lite@1.0.30001751:
+    resolution: {integrity: sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -6739,8 +6744,8 @@ packages:
     resolution: {integrity: sha512-rmvrrmWQPD/X1A/nPBfIVg4r05792QdG9Z4Prk6oQG0F9zBMDkr0GKAdds1wjb2dq1rTz/ywc4ZxpZbgz0tttg==}
     engines: {node: '>=18'}
 
-  dompurify@3.2.7:
-    resolution: {integrity: sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==}
+  dompurify@3.3.0:
+    resolution: {integrity: sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ==}
 
   domutils@2.8.0:
     resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
@@ -6812,19 +6817,19 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
 
-  electron-to-chromium@1.5.234:
-    resolution: {integrity: sha512-RXfEp2x+VRYn8jbKfQlRImzoJU01kyDvVPBmG39eU2iuRVhuS6vQNocB8J0/8GrIMLnPzgz4eW6WiRnJkTuNWg==}
+  electron-to-chromium@1.5.237:
+    resolution: {integrity: sha512-icUt1NvfhGLar5lSWH3tHNzablaA5js3HVHacQimfP8ViEBOQv+L7DKEuHdbTZ0SKCO1ogTJTIL1Gwk9S6Qvcg==}
 
-  element-plus@2.11.4:
-    resolution: {integrity: sha512-sLq+Ypd0cIVilv8wGGMEGvzRVBBsRpJjnAS5PsI/1JU1COZXqzH3N1UYMUc/HCdvdjf6dfrBy80Sj7KcACsT7w==}
+  element-plus@2.11.5:
+    resolution: {integrity: sha512-O+bIVHQCjUDm4GiIznDXRoS8ar2TpWLwfOGnN/Aam0VXf5kbuc4SxdKKJdovWNxmxeqbcwjsSZPKgtXNcqys4A==}
     peerDependencies:
       vue: ^3.5.17
 
   emoji-regex-xs@1.0.0:
     resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
 
-  emoji-regex@10.5.0:
-    resolution: {integrity: sha512-lb49vf1Xzfx080OKA0o6l8DQQpV+6Vg95zyCJX9VB/BqKYlhG7N4wgROUUHRA+ZPUefLnteQOad7z1kT2bV7bg==}
+  emoji-regex@10.6.0:
+    resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
 
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -7077,8 +7082,8 @@ packages:
     peerDependencies:
       eslint: '>=9.22.0'
 
-  eslint-plugin-unused-imports@4.2.0:
-    resolution: {integrity: sha512-hLbJ2/wnjKq4kGA9AUaExVFIbNzyxYdVo49QZmKCnhk5pc9wcYRbfgLHvWJ8tnsdcseGhoUAddm9gn/lt+d74w==}
+  eslint-plugin-unused-imports@4.3.0:
+    resolution: {integrity: sha512-ZFBmXMGBYfHttdRtOG9nFFpmUvMtbHSjsKrS20vdWdbfiVYsO3yA2SGYy9i9XmZJDfMGBflZGBCm70SEnFQtOA==}
     peerDependencies:
       '@typescript-eslint/eslint-plugin': ^8.0.0-0 || ^7.0.0 || ^6.0.0 || ^5.0.0
       eslint: ^9.0.0 || ^8.0.0
@@ -7099,8 +7104,8 @@ packages:
       vitest:
         optional: true
 
-  eslint-plugin-vue@10.5.0:
-    resolution: {integrity: sha512-7BZHsG3kC2vei8F2W8hnfDi9RK+cv5eKPMvzBdrl8Vuc0hR5odGQRli8VVzUkrmUHkxFEm4Iio1r5HOKslO0Aw==}
+  eslint-plugin-vue@10.5.1:
+    resolution: {integrity: sha512-SbR9ZBUFKgvWAbq3RrdCtWaW0IKm6wwUiApxf3BVTNfqUIo4IQQmreMg2iHFJJ6C/0wss3LXURBJ1OwS/MhFcQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       '@stylistic/eslint-plugin': ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
@@ -7125,8 +7130,8 @@ packages:
     resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  eslint@9.37.0:
-    resolution: {integrity: sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==}
+  eslint@9.38.0:
+    resolution: {integrity: sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
     peerDependencies:
@@ -7664,8 +7669,8 @@ packages:
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
-  hookified@1.12.1:
-    resolution: {integrity: sha512-xnKGl+iMIlhrZmGHB729MqlmPoWBznctSQTYCpFKqNsCgimJQmithcW0xSQMMFzYnV2iKUh25alswn6epgxS0Q==}
+  hookified@1.12.2:
+    resolution: {integrity: sha512-aokUX1VdTpI0DUsndvW+OiwmBpKCu/NgRsSSkuSY0zq8PY6Q6a+lmOfAFDXAAOtBqJELvcWY9L1EVtzjbQcMdg==}
 
   htm@3.1.1:
     resolution: {integrity: sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==}
@@ -7750,8 +7755,8 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
 
-  immutable@5.1.3:
-    resolution: {integrity: sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==}
+  immutable@5.1.4:
+    resolution: {integrity: sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==}
 
   import-fresh@3.3.1:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
@@ -8223,8 +8228,8 @@ packages:
   kolorist@1.8.0:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
 
-  ky@1.11.0:
-    resolution: {integrity: sha512-NEyo0ICpS0cqSuyoJFMCnHOZJILqXsKhIZlHJGDYaH8OB5IFrGzuBpEwyoMZG6gUKMPrazH30Ax5XKaujvD8ag==}
+  ky@1.12.0:
+    resolution: {integrity: sha512-YRLmSUHCwOJRBMArtqMRLOmO7fewn3yOoui6aB8ERkRVXupa0UiaQaKbIXteMt4jUElhbdqTMsLFHs8APxxUoQ==}
     engines: {node: '>=18'}
 
   latest-version@9.0.0:
@@ -8833,8 +8838,8 @@ packages:
   node-mock-http@1.0.3:
     resolution: {integrity: sha512-jN8dK25fsfnMrVsEhluUTPkBFY+6ybu7jSB1n+ri/vOGjJxU8J9CZhpSGkHXSkFjtUhbmoncG/YG9ta5Ludqog==}
 
-  node-releases@2.0.23:
-    resolution: {integrity: sha512-cCmFDMSm26S6tQSDpBCg/NR8NENrVPhAJSf+XbxBG4rPFaaonlEoE9wHQmun+cls499TQGSb7ZyPBRlzgKfpeg==}
+  node-releases@2.0.25:
+    resolution: {integrity: sha512-4auku8B/vw5psvTiiN9j1dAOsXvMoGqJuKJcR+dTdqiXEK20mMTk1UEo3HS16LeGQsVG6+qKTPM9u/qQ2LqATA==}
 
   nopt@7.2.1:
     resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==}
@@ -9002,8 +9007,8 @@ packages:
   package-manager-detector@0.2.11:
     resolution: {integrity: sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==}
 
-  package-manager-detector@1.4.0:
-    resolution: {integrity: sha512-rRZ+pR1Usc+ND9M2NkmCvE/LYJS+8ORVV9X0KuNSY/gFsp7RBHJM/ADh9LYq4Vvfq6QkKrW6/weuh8SMEtN5gw==}
+  package-manager-detector@1.5.0:
+    resolution: {integrity: sha512-uBj69dVlYe/+wxj8JOpr97XfsxH/eumMt6HqjNTmJDf/6NO9s+0uxeOneIz3AsPt2m6y9PqzDzd3ATcU17MNfw==}
 
   pako@2.1.0:
     resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
@@ -9177,13 +9182,13 @@ packages:
   pkg-types@2.3.0:
     resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
 
-  playwright-core@1.56.0:
-    resolution: {integrity: sha512-1SXl7pMfemAMSDn5rkPeZljxOCYAmQnYLBTExuh6E8USHXGSX3dx6lYZN/xPpTz1vimXmPA9CDnILvmJaB8aSQ==}
+  playwright-core@1.56.1:
+    resolution: {integrity: sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==}
     engines: {node: '>=18'}
     hasBin: true
 
-  playwright@1.56.0:
-    resolution: {integrity: sha512-X5Q1b8lOdWIE4KAoHpW3SE8HvUB+ZZsUoN64ZhjnN8dOb1UpujxBtENGiZFE+9F/yhzJwYa+ca3u43FeLbboHA==}
+  playwright@1.56.1:
+    resolution: {integrity: sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -9757,8 +9762,8 @@ packages:
   prr@1.0.1:
     resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
 
-  publint@0.3.14:
-    resolution: {integrity: sha512-14/VNBvWsrBeqWNDw8c/DK5ERcZBUwL1rnkVx18cQnF3zadr3GfoYtvD8mxi1dhkWpaPHp8kfi92MDbjMeW3qw==}
+  publint@0.3.15:
+    resolution: {integrity: sha512-xPbRAPW+vqdiaKy5sVVY0uFAu3LaviaPO3pZ9FaRx59l9+U/RKR1OEbLhkug87cwiVKxPXyB4txsv5cad67u+A==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -9774,8 +9779,8 @@ packages:
     resolution: {integrity: sha512-LjgDO2zPtoXP2wJpDjZrGdojii1uqO0cnwKoIoUzkfS98HDmbeiGmYiXo3lXeFlq2xvne1QFQhwYXSUCLKtEuA==}
     engines: {node: '>=12.20'}
 
-  qified@0.5.0:
-    resolution: {integrity: sha512-Zj6Q/Vc/SQ+Fzc87N90jJUzBzxD7MVQ2ZvGyMmYtnl2u1a07CejAhvtk4ZwASos+SiHKCAIylyGHJKIek75QBw==}
+  qified@0.5.1:
+    resolution: {integrity: sha512-+BtFN3dCP+IaFA6IYNOu/f/uK1B8xD2QWyOeCse0rjtAebBmkzgd2d1OAXi3ikAzJMIBSdzZDNZ3wZKEUDQs5w==}
     engines: {node: '>=20'}
 
   qrcode@1.5.4:
@@ -10009,8 +10014,8 @@ packages:
       rollup:
         optional: true
 
-  rollup-plugin-visualizer@6.0.4:
-    resolution: {integrity: sha512-q8Q7J/6YofkmaGW1sH/fPRAz37x/+pd7VBuaUU7lwvOS/YikuiiEU9jeb9PH8XHiq50XFrUsBbOxeAMYQ7KZkg==}
+  rollup-plugin-visualizer@6.0.5:
+    resolution: {integrity: sha512-9+HlNgKCVbJDs8tVtjQ43US12eqaiHyyiLMdBwQ7vSZPiHMysGNo2E88TAp1si5wx8NAoYriI2A5kuKfIakmJg==}
     engines: {node: '>=18'}
     hasBin: true
     peerDependencies:
@@ -10027,8 +10032,8 @@ packages:
     engines: {node: '>=10.0.0'}
     hasBin: true
 
-  rollup@4.52.4:
-    resolution: {integrity: sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==}
+  rollup@4.52.5:
+    resolution: {integrity: sha512-3GuObel8h7Kqdjt0gxkEzaifHTqLVW56Y/bjN7PSQtkKr0w3V/QYSdt6QWYtd7A1xUtYQigtdUfgj1RvWVtorw==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
@@ -10317,8 +10322,8 @@ packages:
     resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
     engines: {node: '>= 0.8'}
 
-  std-env@3.9.0:
-    resolution: {integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==}
+  std-env@3.10.0:
+    resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
 
   stdin-discarder@0.2.2:
     resolution: {integrity: sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==}
@@ -10433,8 +10438,8 @@ packages:
   stubborn-fs@1.2.5:
     resolution: {integrity: sha512-H2N9c26eXjzL/S/K+i/RHHcFanE74dptvvjM8iwzwbVcWY/zjBbgRqF3K0DY4+OD+uTTASTBvDoxPDaPN02D7g==}
 
-  style-mod@4.1.2:
-    resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
+  style-mod@4.1.3:
+    resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==}
 
   style-search@0.1.0:
     resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==}
@@ -10556,8 +10561,8 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  svelte@5.39.11:
-    resolution: {integrity: sha512-8MxWVm2+3YwrFbPaxOlT1bbMi6OTenrAgks6soZfiaS8Fptk4EVyRIFhJc3RpO264EeSNwgjWAdki0ufg4zkGw==}
+  svelte@5.41.1:
+    resolution: {integrity: sha512-0a/huwc8e2es+7KFi70esqsReRfRbrT8h1cJSY/+z1lF0yKM6TT+//HYu28Yxstr50H7ifaqZRDGd0KuKDxP7w==}
     engines: {node: '>=18'}
 
   sver@1.8.4:
@@ -10791,8 +10796,8 @@ packages:
     resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
     engines: {node: '>=16'}
 
-  type-fest@5.0.1:
-    resolution: {integrity: sha512-9MpwAI52m8H6ssA542UxSLnSiSD2dsC3/L85g6hVubLSXd82wdI80eZwTWhdOfN67NlA+D+oipAs1MlcTcu3KA==}
+  type-fest@5.1.0:
+    resolution: {integrity: sha512-wQ531tuWvB6oK+pchHIu5lHe5f5wpSCqB8Kf4dWQRbOYc9HTge7JL0G4Qd44bh6QuJCccIzL3bugb8GI0MwHrg==}
     engines: {node: '>=20'}
 
   typed-array-buffer@1.0.3:
@@ -10886,8 +10891,8 @@ packages:
     resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
     engines: {node: '>=18'}
 
-  unimport@5.4.1:
-    resolution: {integrity: sha512-wMZ2JKUCleCK2zfRHeWcbrUHKXOC3SVBYkyn/wTGzh0THX6sT4hSjuKXxKANN4/WMbT6ZPM4JzcDcnhD2x9Bpg==}
+  unimport@5.5.0:
+    resolution: {integrity: sha512-/JpWMG9s1nBSlXJAQ8EREFTFy3oy6USFd8T6AoBaw1q2GGcF4R9yp3ofg32UODZlYEO5VD0EWE1RpI9XDWyPYg==}
     engines: {node: '>=18.12.0'}
 
   unique-filename@4.0.0:
@@ -10902,8 +10907,8 @@ packages:
     resolution: {integrity: sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==}
     engines: {node: '>=8'}
 
-  unist-util-is@6.0.0:
-    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+  unist-util-is@6.0.1:
+    resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
 
   unist-util-position@5.0.0:
     resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
@@ -10911,8 +10916,8 @@ packages:
   unist-util-stringify-position@4.0.0:
     resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
 
-  unist-util-visit-parents@6.0.1:
-    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+  unist-util-visit-parents@6.0.2:
+    resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==}
 
   unist-util-visit@5.0.0:
     resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
@@ -11102,8 +11107,8 @@ packages:
   vite-plugin-lazy-import@1.0.7:
     resolution: {integrity: sha512-mE6oAObOb4wqso4AoUGi9cLjdR+4vay1RCaKJvziBuFPlziZl7J0aw2hsqRTokLVRx3bli0a0VyjMOwsNDv58A==}
 
-  vite-plugin-pwa@1.0.3:
-    resolution: {integrity: sha512-/OpqIpUldALGxcsEnv/ekQiQ5xHkQ53wcoN5ewX4jiIDNGs3W+eNcI1WYZeyOLmzoEjg09D7aX0O89YGjen1aw==}
+  vite-plugin-pwa@1.1.0:
+    resolution: {integrity: sha512-VsSpdubPzXhHWVINcSx6uHRMpOHVHQcHsef1QgkOlEoaIDAlssFEW88LBq1a59BuokAhsh2kUDJbaX1bZv4Bjw==}
     engines: {node: '>=16.0.0'}
     peerDependencies:
       '@vite-pwa/assets-generator': ^1.0.0
@@ -11125,8 +11130,8 @@ packages:
     peerDependencies:
       vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0
 
-  vite@5.4.20:
-    resolution: {integrity: sha512-j3lYzGC3P+B5Yfy/pfKNgVEg4+UtcIJcVRt2cDjIOmhLourAqPqf8P7acgxeiSgUB7E3p2P8/3gNIgDLpwzs4g==}
+  vite@5.4.21:
+    resolution: {integrity: sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -11156,8 +11161,8 @@ packages:
       terser:
         optional: true
 
-  vite@7.1.9:
-    resolution: {integrity: sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==}
+  vite@7.1.11:
+    resolution: {integrity: sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
@@ -11196,8 +11201,8 @@ packages:
       yaml:
         optional: true
 
-  vitepress-plugin-group-icons@1.6.3:
-    resolution: {integrity: sha512-bvPD4lhraLJw3rPtLhUIVsOvNfnHnF+F1LH7BKHekEzeZ4uqdTdqnwEyaT580AoKjjT6/F8En6hVJj7takPKDA==}
+  vitepress-plugin-group-icons@1.6.4:
+    resolution: {integrity: sha512-YCFH0G2zTX/me51wooWy4SvaaA6VKjIxLoWDU9ON4rFx9907Yf9ZpCpa4JpwloVuvm5+82fqLXSuZ98EJ92UUQ==}
     peerDependencies:
       markdown-it: '>=14'
       vite: '>=3'
@@ -11289,8 +11294,8 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
-  vue-router@4.5.1:
-    resolution: {integrity: sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==}
+  vue-router@4.6.3:
+    resolution: {integrity: sha512-ARBedLm9YlbvQomnmq91Os7ck6efydTSpRP3nuOKCvgJOHNrhRoJDSKtee8kcL1Vf7nz6U+PMBL+hTvR3bTVQg==}
     peerDependencies:
       vue: ^3.5.17
 
@@ -11334,11 +11339,11 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
-  vxe-pc-ui@4.9.42:
-    resolution: {integrity: sha512-bNlkWZmeucWi3EvYsmqsajZshgRf3PMATntvWfvDCdNPQuPadMczn51V8jWAagkw7tgJ7uhNZycBBarwhIzR4w==}
+  vxe-pc-ui@4.10.2:
+    resolution: {integrity: sha512-qEU9h/DLLdFDAXQEKmRRO4Eo1Sh7n66pHJGUflzkGFB85PYxDxzqDLtx4iiS+q0pxVz1bGWG3phLgi20Dx48Zg==}
 
-  vxe-table@4.16.21:
-    resolution: {integrity: sha512-+oCMaFKOnuvz9t6Qxk9iXKXYJrXxzQ3adgsFgGJY72FGjRopjYJ7qDgq64izcF8XDUJvFIFfSD1JZdwSPNwHMw==}
+  vxe-table@4.17.0:
+    resolution: {integrity: sha512-IpyY5uzgMt4NEgTl0brAFe/xSyrBK8U0763uCG8LUe8TbGVuWMD5bCP9DYqkjK7cBmJjXtzwxlQ6I3auzCGd3Q==}
 
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
@@ -11614,124 +11619,124 @@ packages:
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
-  zx@8.8.4:
-    resolution: {integrity: sha512-44GcD+ZlM/v1OQtbwnSxLPcoE1ZEUICmR+RSbJZLAqfIixNLuMjLyh0DcS75OyfJ/sWYAwCWDmDvJ4hdnANAPQ==}
+  zx@8.8.5:
+    resolution: {integrity: sha512-SNgDF5L0gfN7FwVOdEFguY3orU5AkfFZm9B5YSHog/UDHv+lvmd82ZAsOenOkQixigwH2+yyH198AwNdKhj+RA==}
     engines: {node: '>= 12.17.0'}
     hasBin: true
 
 snapshots:
 
-  '@algolia/abtesting@1.6.0':
+  '@algolia/abtesting@1.6.1':
     dependencies:
-      '@algolia/client-common': 5.40.0
-      '@algolia/requester-browser-xhr': 5.40.0
-      '@algolia/requester-fetch': 5.40.0
-      '@algolia/requester-node-http': 5.40.0
+      '@algolia/client-common': 5.40.1
+      '@algolia/requester-browser-xhr': 5.40.1
+      '@algolia/requester-fetch': 5.40.1
+      '@algolia/requester-node-http': 5.40.1
 
-  '@algolia/autocomplete-core@1.17.7(@algolia/client-search@5.40.0)(algoliasearch@5.40.0)(search-insights@2.17.3)':
+  '@algolia/autocomplete-core@1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)(search-insights@2.17.3)':
     dependencies:
-      '@algolia/autocomplete-plugin-algolia-insights': 1.17.7(@algolia/client-search@5.40.0)(algoliasearch@5.40.0)(search-insights@2.17.3)
-      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.40.0)(algoliasearch@5.40.0)
+      '@algolia/autocomplete-plugin-algolia-insights': 1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)(search-insights@2.17.3)
+      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
       - search-insights
 
-  '@algolia/autocomplete-plugin-algolia-insights@1.17.7(@algolia/client-search@5.40.0)(algoliasearch@5.40.0)(search-insights@2.17.3)':
+  '@algolia/autocomplete-plugin-algolia-insights@1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)(search-insights@2.17.3)':
     dependencies:
-      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.40.0)(algoliasearch@5.40.0)
+      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)
       search-insights: 2.17.3
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
 
-  '@algolia/autocomplete-preset-algolia@1.17.7(@algolia/client-search@5.40.0)(algoliasearch@5.40.0)':
+  '@algolia/autocomplete-preset-algolia@1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)':
     dependencies:
-      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.40.0)(algoliasearch@5.40.0)
-      '@algolia/client-search': 5.40.0
-      algoliasearch: 5.40.0
+      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)
+      '@algolia/client-search': 5.40.1
+      algoliasearch: 5.40.1
 
-  '@algolia/autocomplete-shared@1.17.7(@algolia/client-search@5.40.0)(algoliasearch@5.40.0)':
+  '@algolia/autocomplete-shared@1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)':
     dependencies:
-      '@algolia/client-search': 5.40.0
-      algoliasearch: 5.40.0
+      '@algolia/client-search': 5.40.1
+      algoliasearch: 5.40.1
 
-  '@algolia/client-abtesting@5.40.0':
+  '@algolia/client-abtesting@5.40.1':
     dependencies:
-      '@algolia/client-common': 5.40.0
-      '@algolia/requester-browser-xhr': 5.40.0
-      '@algolia/requester-fetch': 5.40.0
-      '@algolia/requester-node-http': 5.40.0
+      '@algolia/client-common': 5.40.1
+      '@algolia/requester-browser-xhr': 5.40.1
+      '@algolia/requester-fetch': 5.40.1
+      '@algolia/requester-node-http': 5.40.1
 
-  '@algolia/client-analytics@5.40.0':
+  '@algolia/client-analytics@5.40.1':
     dependencies:
-      '@algolia/client-common': 5.40.0
-      '@algolia/requester-browser-xhr': 5.40.0
-      '@algolia/requester-fetch': 5.40.0
-      '@algolia/requester-node-http': 5.40.0
+      '@algolia/client-common': 5.40.1
+      '@algolia/requester-browser-xhr': 5.40.1
+      '@algolia/requester-fetch': 5.40.1
+      '@algolia/requester-node-http': 5.40.1
 
-  '@algolia/client-common@5.40.0': {}
+  '@algolia/client-common@5.40.1': {}
 
-  '@algolia/client-insights@5.40.0':
+  '@algolia/client-insights@5.40.1':
     dependencies:
-      '@algolia/client-common': 5.40.0
-      '@algolia/requester-browser-xhr': 5.40.0
-      '@algolia/requester-fetch': 5.40.0
-      '@algolia/requester-node-http': 5.40.0
+      '@algolia/client-common': 5.40.1
+      '@algolia/requester-browser-xhr': 5.40.1
+      '@algolia/requester-fetch': 5.40.1
+      '@algolia/requester-node-http': 5.40.1
 
-  '@algolia/client-personalization@5.40.0':
+  '@algolia/client-personalization@5.40.1':
     dependencies:
-      '@algolia/client-common': 5.40.0
-      '@algolia/requester-browser-xhr': 5.40.0
-      '@algolia/requester-fetch': 5.40.0
-      '@algolia/requester-node-http': 5.40.0
+      '@algolia/client-common': 5.40.1
+      '@algolia/requester-browser-xhr': 5.40.1
+      '@algolia/requester-fetch': 5.40.1
+      '@algolia/requester-node-http': 5.40.1
 
-  '@algolia/client-query-suggestions@5.40.0':
+  '@algolia/client-query-suggestions@5.40.1':
     dependencies:
-      '@algolia/client-common': 5.40.0
-      '@algolia/requester-browser-xhr': 5.40.0
-      '@algolia/requester-fetch': 5.40.0
-      '@algolia/requester-node-http': 5.40.0
+      '@algolia/client-common': 5.40.1
+      '@algolia/requester-browser-xhr': 5.40.1
+      '@algolia/requester-fetch': 5.40.1
+      '@algolia/requester-node-http': 5.40.1
 
-  '@algolia/client-search@5.40.0':
+  '@algolia/client-search@5.40.1':
     dependencies:
-      '@algolia/client-common': 5.40.0
-      '@algolia/requester-browser-xhr': 5.40.0
-      '@algolia/requester-fetch': 5.40.0
-      '@algolia/requester-node-http': 5.40.0
+      '@algolia/client-common': 5.40.1
+      '@algolia/requester-browser-xhr': 5.40.1
+      '@algolia/requester-fetch': 5.40.1
+      '@algolia/requester-node-http': 5.40.1
 
-  '@algolia/ingestion@1.40.0':
+  '@algolia/ingestion@1.40.1':
     dependencies:
-      '@algolia/client-common': 5.40.0
-      '@algolia/requester-browser-xhr': 5.40.0
-      '@algolia/requester-fetch': 5.40.0
-      '@algolia/requester-node-http': 5.40.0
+      '@algolia/client-common': 5.40.1
+      '@algolia/requester-browser-xhr': 5.40.1
+      '@algolia/requester-fetch': 5.40.1
+      '@algolia/requester-node-http': 5.40.1
 
-  '@algolia/monitoring@1.40.0':
+  '@algolia/monitoring@1.40.1':
     dependencies:
-      '@algolia/client-common': 5.40.0
-      '@algolia/requester-browser-xhr': 5.40.0
-      '@algolia/requester-fetch': 5.40.0
-      '@algolia/requester-node-http': 5.40.0
+      '@algolia/client-common': 5.40.1
+      '@algolia/requester-browser-xhr': 5.40.1
+      '@algolia/requester-fetch': 5.40.1
+      '@algolia/requester-node-http': 5.40.1
 
-  '@algolia/recommend@5.40.0':
+  '@algolia/recommend@5.40.1':
     dependencies:
-      '@algolia/client-common': 5.40.0
-      '@algolia/requester-browser-xhr': 5.40.0
-      '@algolia/requester-fetch': 5.40.0
-      '@algolia/requester-node-http': 5.40.0
+      '@algolia/client-common': 5.40.1
+      '@algolia/requester-browser-xhr': 5.40.1
+      '@algolia/requester-fetch': 5.40.1
+      '@algolia/requester-node-http': 5.40.1
 
-  '@algolia/requester-browser-xhr@5.40.0':
+  '@algolia/requester-browser-xhr@5.40.1':
     dependencies:
-      '@algolia/client-common': 5.40.0
+      '@algolia/client-common': 5.40.1
 
-  '@algolia/requester-fetch@5.40.0':
+  '@algolia/requester-fetch@5.40.1':
     dependencies:
-      '@algolia/client-common': 5.40.0
+      '@algolia/client-common': 5.40.1
 
-  '@algolia/requester-node-http@5.40.0':
+  '@algolia/requester-node-http@5.40.1':
     dependencies:
-      '@algolia/client-common': 5.40.0
+      '@algolia/client-common': 5.40.1
 
   '@alloc/quick-lru@5.2.0': {}
 
@@ -11749,7 +11754,7 @@ snapshots:
 
   '@antfu/install-pkg@1.1.0':
     dependencies:
-      package-manager-detector: 1.4.0
+      package-manager-detector: 1.5.0
       tinyexec: 1.0.1
 
   '@antfu/utils@0.7.10': {}
@@ -12514,8 +12519,8 @@ snapshots:
   '@bpmn-io/cm-theme@0.1.0-alpha.2':
     dependencies:
       '@codemirror/language': 6.11.3
-      '@codemirror/view': 6.38.5
-      '@lezer/highlight': 1.2.1
+      '@codemirror/view': 6.38.6
+      '@lezer/highlight': 1.2.2
 
   '@bpmn-io/diagram-js-ui@0.2.3':
     dependencies:
@@ -12536,8 +12541,8 @@ snapshots:
       '@codemirror/language': 6.11.3
       '@codemirror/lint': 6.9.0
       '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.38.5
-      '@lezer/highlight': 1.2.1
+      '@codemirror/view': 6.38.6
+      '@lezer/highlight': 1.2.2
       min-dom: 4.2.1
 
   '@bpmn-io/feel-lint@1.4.0':
@@ -12555,18 +12560,18 @@ snapshots:
       '@bpmn-io/lezer-feel': 1.9.0
       '@codemirror/autocomplete': 6.19.0
       '@codemirror/language': 6.11.3
-      '@lezer/common': 1.2.3
+      '@lezer/common': 1.3.0
 
   '@bpmn-io/lezer-feel@1.9.0':
     dependencies:
-      '@lezer/highlight': 1.2.1
+      '@lezer/highlight': 1.2.2
       '@lezer/lr': 1.4.2
       min-dash: 4.2.3
 
   '@bpmn-io/properties-panel@3.33.0':
     dependencies:
       '@bpmn-io/feel-editor': 1.12.0
-      '@codemirror/view': 6.38.5
+      '@codemirror/view': 6.38.6
       classnames: 2.5.1
       feelers: 1.4.0
       focus-trap: 7.6.5
@@ -12581,8 +12586,8 @@ snapshots:
     dependencies:
       '@cacheable/memoize': 2.0.3
       '@cacheable/utils': 2.1.0
-      '@keyv/bigmap': 1.0.3
-      hookified: 1.12.1
+      '@keyv/bigmap': 1.1.0(keyv@5.5.3)
+      hookified: 1.12.2
       keyv: 5.5.3
 
   '@cacheable/utils@2.1.0':
@@ -12628,7 +12633,7 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
-  '@changesets/cli@2.29.7(@types/node@22.18.10)':
+  '@changesets/cli@2.29.7(@types/node@22.18.11)':
     dependencies:
       '@changesets/apply-release-plan': 7.0.13
       '@changesets/assemble-release-plan': 6.0.9
@@ -12644,7 +12649,7 @@ snapshots:
       '@changesets/should-skip-package': 0.1.2
       '@changesets/types': 6.1.0
       '@changesets/write': 0.4.0
-      '@inquirer/external-editor': 1.0.2(@types/node@22.18.10)
+      '@inquirer/external-editor': 1.0.2(@types/node@22.18.11)
       '@manypkg/get-packages': 1.1.3
       ansi-colors: 4.1.3
       ci-info: 3.9.0
@@ -12769,47 +12774,47 @@ snapshots:
     dependencies:
       '@codemirror/language': 6.11.3
       '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.38.5
-      '@lezer/common': 1.2.3
+      '@codemirror/view': 6.38.6
+      '@lezer/common': 1.3.0
 
   '@codemirror/commands@6.9.0':
     dependencies:
       '@codemirror/language': 6.11.3
       '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.38.5
-      '@lezer/common': 1.2.3
+      '@codemirror/view': 6.38.6
+      '@lezer/common': 1.3.0
 
   '@codemirror/language@6.11.3':
     dependencies:
       '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.38.5
-      '@lezer/common': 1.2.3
-      '@lezer/highlight': 1.2.1
+      '@codemirror/view': 6.38.6
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.2
       '@lezer/lr': 1.4.2
-      style-mod: 4.1.2
+      style-mod: 4.1.3
 
   '@codemirror/lint@6.9.0':
     dependencies:
       '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.38.5
+      '@codemirror/view': 6.38.6
       crelt: 1.0.6
 
   '@codemirror/state@6.5.2':
     dependencies:
       '@marijn/find-cluster-break': 1.0.2
 
-  '@codemirror/view@6.38.5':
+  '@codemirror/view@6.38.6':
     dependencies:
       '@codemirror/state': 6.5.2
       crelt: 1.0.6
-      style-mod: 4.1.2
+      style-mod: 4.1.3
       w3c-keyname: 2.2.8
 
-  '@commitlint/cli@19.8.1(@types/node@24.7.2)(typescript@5.9.3)':
+  '@commitlint/cli@19.8.1(@types/node@24.8.1)(typescript@5.9.3)':
     dependencies:
       '@commitlint/format': 19.8.1
       '@commitlint/lint': 19.8.1
-      '@commitlint/load': 19.8.1(@types/node@24.7.2)(typescript@5.9.3)
+      '@commitlint/load': 19.8.1(@types/node@24.8.1)(typescript@5.9.3)
       '@commitlint/read': 19.8.1
       '@commitlint/types': 19.8.1
       tinyexec: 1.0.1
@@ -12856,7 +12861,7 @@ snapshots:
       '@commitlint/rules': 19.8.1
       '@commitlint/types': 19.8.1
 
-  '@commitlint/load@19.8.1(@types/node@24.7.2)(typescript@5.9.3)':
+  '@commitlint/load@19.8.1(@types/node@24.8.1)(typescript@5.9.3)':
     dependencies:
       '@commitlint/config-validator': 19.8.1
       '@commitlint/execute-rule': 19.8.1
@@ -12864,7 +12869,7 @@ snapshots:
       '@commitlint/types': 19.8.1
       chalk: 5.6.2
       cosmiconfig: 9.0.0(typescript@5.9.3)
-      cosmiconfig-typescript-loader: 6.2.0(@types/node@24.7.2)(cosmiconfig@9.0.0(typescript@5.9.3))(typescript@5.9.3)
+      cosmiconfig-typescript-loader: 6.2.0(@types/node@24.8.1)(cosmiconfig@9.0.0(typescript@5.9.3))(typescript@5.9.3)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
@@ -12921,21 +12926,21 @@ snapshots:
       '@cspell/dict-al': 1.1.1
       '@cspell/dict-aws': 4.0.15
       '@cspell/dict-bash': 4.2.1
-      '@cspell/dict-companies': 3.2.5
+      '@cspell/dict-companies': 3.2.6
       '@cspell/dict-cpp': 6.0.12
       '@cspell/dict-cryptocurrencies': 5.0.5
       '@cspell/dict-csharp': 4.0.7
       '@cspell/dict-css': 4.0.18
       '@cspell/dict-dart': 2.3.1
-      '@cspell/dict-data-science': 2.0.9
+      '@cspell/dict-data-science': 2.0.10
       '@cspell/dict-django': 4.1.5
       '@cspell/dict-docker': 1.1.16
       '@cspell/dict-dotnet': 5.0.10
       '@cspell/dict-elixir': 4.0.8
       '@cspell/dict-en-common-misspellings': 2.1.6
       '@cspell/dict-en-gb': 1.1.33
-      '@cspell/dict-en_us': 4.4.19
-      '@cspell/dict-filetypes': 3.0.13
+      '@cspell/dict-en_us': 4.4.20
+      '@cspell/dict-filetypes': 3.0.14
       '@cspell/dict-flutter': 1.1.1
       '@cspell/dict-fonts': 4.0.5
       '@cspell/dict-fsharp': 1.1.1
@@ -12958,17 +12963,17 @@ snapshots:
       '@cspell/dict-markdown': 2.0.12(@cspell/dict-css@4.0.18)(@cspell/dict-html-symbol-entities@4.0.4)(@cspell/dict-html@4.0.12)(@cspell/dict-typescript@3.2.3)
       '@cspell/dict-monkeyc': 1.0.11
       '@cspell/dict-node': 5.0.8
-      '@cspell/dict-npm': 5.2.17
+      '@cspell/dict-npm': 5.2.18
       '@cspell/dict-php': 4.0.15
       '@cspell/dict-powershell': 5.0.15
       '@cspell/dict-public-licenses': 2.0.15
-      '@cspell/dict-python': 4.2.19
+      '@cspell/dict-python': 4.2.20
       '@cspell/dict-r': 2.1.1
       '@cspell/dict-ruby': 5.0.9
       '@cspell/dict-rust': 4.0.12
       '@cspell/dict-scala': 5.0.8
       '@cspell/dict-shell': 1.1.1
-      '@cspell/dict-software-terms': 5.1.8
+      '@cspell/dict-software-terms': 5.1.9
       '@cspell/dict-sql': 2.2.1
       '@cspell/dict-svelte': 1.0.7
       '@cspell/dict-swift': 2.0.6
@@ -13000,7 +13005,7 @@ snapshots:
     dependencies:
       '@cspell/dict-shell': 1.1.1
 
-  '@cspell/dict-companies@3.2.5': {}
+  '@cspell/dict-companies@3.2.6': {}
 
   '@cspell/dict-cpp@6.0.12': {}
 
@@ -13012,7 +13017,7 @@ snapshots:
 
   '@cspell/dict-dart@2.3.1': {}
 
-  '@cspell/dict-data-science@2.0.9': {}
+  '@cspell/dict-data-science@2.0.10': {}
 
   '@cspell/dict-django@4.1.5': {}
 
@@ -13026,9 +13031,9 @@ snapshots:
 
   '@cspell/dict-en-gb@1.1.33': {}
 
-  '@cspell/dict-en_us@4.4.19': {}
+  '@cspell/dict-en_us@4.4.20': {}
 
-  '@cspell/dict-filetypes@3.0.13': {}
+  '@cspell/dict-filetypes@3.0.14': {}
 
   '@cspell/dict-flutter@1.1.1': {}
 
@@ -13079,7 +13084,7 @@ snapshots:
 
   '@cspell/dict-node@5.0.8': {}
 
-  '@cspell/dict-npm@5.2.17': {}
+  '@cspell/dict-npm@5.2.18': {}
 
   '@cspell/dict-php@4.0.15': {}
 
@@ -13087,9 +13092,9 @@ snapshots:
 
   '@cspell/dict-public-licenses@2.0.15': {}
 
-  '@cspell/dict-python@4.2.19':
+  '@cspell/dict-python@4.2.20':
     dependencies:
-      '@cspell/dict-data-science': 2.0.9
+      '@cspell/dict-data-science': 2.0.10
 
   '@cspell/dict-r@2.1.1': {}
 
@@ -13101,7 +13106,7 @@ snapshots:
 
   '@cspell/dict-shell@1.1.1': {}
 
-  '@cspell/dict-software-terms@5.1.8': {}
+  '@cspell/dict-software-terms@5.1.9': {}
 
   '@cspell/dict-sql@2.2.1': {}
 
@@ -13431,9 +13436,9 @@ snapshots:
 
   '@docsearch/css@3.8.2': {}
 
-  '@docsearch/js@3.8.2(@algolia/client-search@5.40.0)(search-insights@2.17.3)':
+  '@docsearch/js@3.8.2(@algolia/client-search@5.40.1)(search-insights@2.17.3)':
     dependencies:
-      '@docsearch/react': 3.8.2(@algolia/client-search@5.40.0)(search-insights@2.17.3)
+      '@docsearch/react': 3.8.2(@algolia/client-search@5.40.1)(search-insights@2.17.3)
       preact: 10.27.2
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -13442,12 +13447,12 @@ snapshots:
       - react-dom
       - search-insights
 
-  '@docsearch/react@3.8.2(@algolia/client-search@5.40.0)(search-insights@2.17.3)':
+  '@docsearch/react@3.8.2(@algolia/client-search@5.40.1)(search-insights@2.17.3)':
     dependencies:
-      '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.40.0)(algoliasearch@5.40.0)(search-insights@2.17.3)
-      '@algolia/autocomplete-preset-algolia': 1.17.7(@algolia/client-search@5.40.0)(algoliasearch@5.40.0)
+      '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)(search-insights@2.17.3)
+      '@algolia/autocomplete-preset-algolia': 1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)
       '@docsearch/css': 3.8.2
-      algoliasearch: 5.40.0
+      algoliasearch: 5.40.1
     optionalDependencies:
       search-insights: 2.17.3
     transitivePeerDependencies:
@@ -13484,7 +13489,7 @@ snapshots:
   '@es-joy/jsdoccomment@0.50.2':
     dependencies:
       '@types/estree': 1.0.8
-      '@typescript-eslint/types': 8.46.0
+      '@typescript-eslint/types': 8.46.1
       comment-parser: 1.4.1
       esquery: 1.6.0
       jsdoc-type-pratt-parser: 4.1.0
@@ -13564,22 +13569,22 @@ snapshots:
   '@esbuild/win32-x64@0.25.3':
     optional: true
 
-  '@eslint-community/eslint-utils@4.9.0(eslint@9.37.0(jiti@2.6.1))':
+  '@eslint-community/eslint-utils@4.9.0(eslint@9.38.0(jiti@2.6.1))':
     dependencies:
-      eslint: 9.37.0(jiti@2.6.1)
+      eslint: 9.38.0(jiti@2.6.1)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.12.1': {}
 
-  '@eslint/config-array@0.21.0':
+  '@eslint/config-array@0.21.1':
     dependencies:
-      '@eslint/object-schema': 2.1.6
+      '@eslint/object-schema': 2.1.7
       debug: 4.4.3
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/config-helpers@0.4.0':
+  '@eslint/config-helpers@0.4.1':
     dependencies:
       '@eslint/core': 0.16.0
 
@@ -13605,9 +13610,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@9.37.0': {}
+  '@eslint/js@9.38.0': {}
 
-  '@eslint/object-schema@2.1.6': {}
+  '@eslint/object-schema@2.1.7': {}
 
   '@eslint/plugin-kit@0.2.8':
     dependencies:
@@ -13720,7 +13725,7 @@ snapshots:
       '@form-create/element-ui': 3.2.31(vue@3.5.22(typescript@5.9.3))
       '@form-create/utils': 3.2.31
       codemirror: 6.65.7
-      element-plus: 2.11.4(vue@3.5.22(typescript@5.9.3))
+      element-plus: 2.11.5(vue@3.5.22(typescript@5.9.3))
       js-beautify: 1.15.4
       signature_pad: 5.1.1
       vue: 3.5.22(typescript@5.9.3)
@@ -13767,7 +13772,7 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify-json/simple-icons@1.2.54':
+  '@iconify-json/simple-icons@1.2.55':
     dependencies:
       '@iconify/types': 2.0.0
 
@@ -13775,7 +13780,7 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify/json@2.2.395':
+  '@iconify/json@2.2.398':
     dependencies:
       '@iconify/types': 2.0.0
       pathe: 2.0.3
@@ -13804,12 +13809,12 @@ snapshots:
       '@iconify/types': 2.0.0
       vue: 3.5.22(typescript@5.9.3)
 
-  '@inquirer/external-editor@1.0.2(@types/node@22.18.10)':
+  '@inquirer/external-editor@1.0.2(@types/node@22.18.11)':
     dependencies:
       chardet: 2.1.0
       iconv-lite: 0.7.0
     optionalDependencies:
-      '@types/node': 22.18.10
+      '@types/node': 22.18.11
 
   '@internationalized/date@3.10.0':
     dependencies:
@@ -13845,15 +13850,15 @@ snapshots:
 
   '@intlify/shared@11.1.12': {}
 
-  '@intlify/unplugin-vue-i18n@6.0.8(@vue/compiler-dom@3.5.22)(eslint@9.37.0(jiti@2.6.1))(rollup@4.52.4)(typescript@5.9.3)(vue-i18n@11.1.12(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))':
+  '@intlify/unplugin-vue-i18n@6.0.8(@vue/compiler-dom@3.5.22)(eslint@9.38.0(jiti@2.6.1))(rollup@4.52.5)(typescript@5.9.3)(vue-i18n@11.1.12(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))':
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.37.0(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
       '@intlify/bundle-utils': 10.0.1(vue-i18n@11.1.12(vue@3.5.22(typescript@5.9.3)))
       '@intlify/shared': 11.1.12
       '@intlify/vue-i18n-extensions': 8.0.0(@intlify/shared@11.1.12)(@vue/compiler-dom@3.5.22)(vue-i18n@11.1.12(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
-      '@rollup/pluginutils': 5.3.0(rollup@4.52.4)
-      '@typescript-eslint/scope-manager': 8.46.0
-      '@typescript-eslint/typescript-estree': 8.46.0(typescript@5.9.3)
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+      '@typescript-eslint/scope-manager': 8.46.1
+      '@typescript-eslint/typescript-estree': 8.46.1(typescript@5.9.3)
       debug: 4.4.3
       fast-glob: 3.3.3
       js-yaml: 4.1.0
@@ -13926,7 +13931,7 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@jspm/generator@2.7.3':
+  '@jspm/generator@2.7.4':
     dependencies:
       '@babel/core': 7.28.4
       '@babel/plugin-syntax-import-attributes': 7.27.1(@babel/core@7.28.4)
@@ -13947,26 +13952,27 @@ snapshots:
 
   '@juggle/resize-observer@3.4.0': {}
 
-  '@keyv/bigmap@1.0.3':
+  '@keyv/bigmap@1.1.0(keyv@5.5.3)':
     dependencies:
-      hookified: 1.12.1
+      hookified: 1.12.2
+      keyv: 5.5.3
 
   '@keyv/serialize@1.1.1': {}
 
-  '@lezer/common@1.2.3': {}
+  '@lezer/common@1.3.0': {}
 
-  '@lezer/highlight@1.2.1':
+  '@lezer/highlight@1.2.2':
     dependencies:
-      '@lezer/common': 1.2.3
+      '@lezer/common': 1.3.0
 
   '@lezer/lr@1.4.2':
     dependencies:
-      '@lezer/common': 1.2.3
+      '@lezer/common': 1.3.0
 
-  '@lezer/markdown@1.4.3':
+  '@lezer/markdown@1.5.1':
     dependencies:
-      '@lezer/common': 1.2.3
-      '@lezer/highlight': 1.2.1
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.2
 
   '@manypkg/find-root@1.1.0':
     dependencies:
@@ -14014,23 +14020,23 @@ snapshots:
 
   '@marijn/find-cluster-break@1.0.2': {}
 
-  '@microsoft/api-extractor-model@7.31.1(@types/node@24.7.2)':
+  '@microsoft/api-extractor-model@7.31.1(@types/node@24.8.1)':
     dependencies:
       '@microsoft/tsdoc': 0.15.1
       '@microsoft/tsdoc-config': 0.17.1
-      '@rushstack/node-core-library': 5.17.0(@types/node@24.7.2)
+      '@rushstack/node-core-library': 5.17.0(@types/node@24.8.1)
     transitivePeerDependencies:
       - '@types/node'
 
-  '@microsoft/api-extractor@7.53.1(@types/node@24.7.2)':
+  '@microsoft/api-extractor@7.53.1(@types/node@24.8.1)':
     dependencies:
-      '@microsoft/api-extractor-model': 7.31.1(@types/node@24.7.2)
+      '@microsoft/api-extractor-model': 7.31.1(@types/node@24.8.1)
       '@microsoft/tsdoc': 0.15.1
       '@microsoft/tsdoc-config': 0.17.1
-      '@rushstack/node-core-library': 5.17.0(@types/node@24.7.2)
+      '@rushstack/node-core-library': 5.17.0(@types/node@24.8.1)
       '@rushstack/rig-package': 0.6.0
-      '@rushstack/terminal': 0.19.1(@types/node@24.7.2)
-      '@rushstack/ts-command-line': 5.1.1(@types/node@24.7.2)
+      '@rushstack/terminal': 0.19.1(@types/node@24.8.1)
+      '@rushstack/ts-command-line': 5.1.1(@types/node@24.8.1)
       lodash: 4.17.21
       minimatch: 10.0.3
       resolve: 1.22.10
@@ -14070,17 +14076,17 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.19.1
 
-  '@nolebase/ui@2.18.2(vitepress@1.6.4(@algolia/client-search@5.40.0)(@types/node@24.7.2)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))':
+  '@nolebase/ui@2.18.2(vitepress@1.6.4(@algolia/client-search@5.40.1)(@types/node@24.8.1)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@iconify-json/octicon': 1.2.16
       less: 4.4.2
-      vitepress: 1.6.4(@algolia/client-search@5.40.0)(@types/node@24.7.2)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3)
+      vitepress: 1.6.4(@algolia/client-search@5.40.1)(@types/node@24.8.1)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3)
       vue: 3.5.22(typescript@5.9.3)
 
-  '@nolebase/vitepress-plugin-git-changelog@2.18.2(vitepress@1.6.4(@algolia/client-search@5.40.0)(@types/node@24.7.2)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))':
+  '@nolebase/vitepress-plugin-git-changelog@2.18.2(vitepress@1.6.4(@algolia/client-search@5.40.1)(@types/node@24.8.1)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@iconify-json/octicon': 1.2.16
-      '@nolebase/ui': 2.18.2(vitepress@1.6.4(@algolia/client-search@5.40.0)(@types/node@24.7.2)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))
+      '@nolebase/ui': 2.18.2(vitepress@1.6.4(@algolia/client-search@5.40.1)(@types/node@24.8.1)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))
       colorette: 2.0.20
       date-fns: 4.1.0
       defu: 6.1.4
@@ -14090,7 +14096,7 @@ snapshots:
       gray-matter: 4.0.3
       less: 4.4.2
       uncrypto: 0.1.3
-      vitepress: 1.6.4(@algolia/client-search@5.40.0)(@types/node@24.7.2)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3)
+      vitepress: 1.6.4(@algolia/client-search@5.40.1)(@types/node@24.8.1)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3)
     transitivePeerDependencies:
       - vue
 
@@ -14100,7 +14106,7 @@ snapshots:
 
   '@nuxt/kit@3.19.3(magicast@0.3.5)':
     dependencies:
-      c12: 3.3.0(magicast@0.3.5)
+      c12: 3.3.1(magicast@0.3.5)
       consola: 3.4.2
       defu: 6.1.4
       destr: 2.0.5
@@ -14117,11 +14123,11 @@ snapshots:
       rc9: 2.1.2
       scule: 1.3.0
       semver: 7.7.3
-      std-env: 3.9.0
+      std-env: 3.10.0
       tinyglobby: 0.2.15
       ufo: 1.6.1
       unctx: 2.4.1
-      unimport: 5.4.1
+      unimport: 5.5.0
       untyped: 2.0.0
     transitivePeerDependencies:
       - magicast
@@ -14199,9 +14205,9 @@ snapshots:
 
   '@pkgr/core@0.2.9': {}
 
-  '@playwright/test@1.56.0':
+  '@playwright/test@1.56.1':
     dependencies:
-      playwright: 1.56.0
+      playwright: 1.56.1
 
   '@pnpm/config.env-replace@1.1.0': {}
 
@@ -14250,11 +14256,11 @@ snapshots:
 
   '@rolldown/pluginutils@1.0.0-beta.29': {}
 
-  '@rolldown/pluginutils@1.0.0-beta.43': {}
+  '@rolldown/pluginutils@1.0.0-beta.44': {}
 
-  '@rollup/plugin-alias@5.1.1(rollup@4.52.4)':
+  '@rollup/plugin-alias@5.1.1(rollup@4.52.5)':
     optionalDependencies:
-      rollup: 4.52.4
+      rollup: 4.52.5
 
   '@rollup/plugin-babel@5.3.1(@babel/core@7.28.4)(rollup@2.79.2)':
     dependencies:
@@ -14265,9 +14271,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@rollup/plugin-commonjs@28.0.6(rollup@4.52.4)':
+  '@rollup/plugin-commonjs@28.0.8(rollup@4.52.5)':
     dependencies:
-      '@rollup/pluginutils': 5.3.0(rollup@4.52.4)
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
       commondir: 1.0.1
       estree-walker: 2.0.2
       fdir: 6.5.0(picomatch@4.0.3)
@@ -14275,21 +14281,21 @@ snapshots:
       magic-string: 0.30.19
       picomatch: 4.0.3
     optionalDependencies:
-      rollup: 4.52.4
+      rollup: 4.52.5
 
-  '@rollup/plugin-inject@5.0.5(rollup@4.52.4)':
+  '@rollup/plugin-inject@5.0.5(rollup@4.52.5)':
     dependencies:
-      '@rollup/pluginutils': 5.3.0(rollup@4.52.4)
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
       estree-walker: 2.0.2
       magic-string: 0.30.19
     optionalDependencies:
-      rollup: 4.52.4
+      rollup: 4.52.5
 
-  '@rollup/plugin-json@6.1.0(rollup@4.52.4)':
+  '@rollup/plugin-json@6.1.0(rollup@4.52.5)':
     dependencies:
-      '@rollup/pluginutils': 5.3.0(rollup@4.52.4)
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
     optionalDependencies:
-      rollup: 4.52.4
+      rollup: 4.52.5
 
   '@rollup/plugin-node-resolve@15.3.1(rollup@2.79.2)':
     dependencies:
@@ -14301,15 +14307,15 @@ snapshots:
     optionalDependencies:
       rollup: 2.79.2
 
-  '@rollup/plugin-node-resolve@16.0.3(rollup@4.52.4)':
+  '@rollup/plugin-node-resolve@16.0.3(rollup@4.52.5)':
     dependencies:
-      '@rollup/pluginutils': 5.3.0(rollup@4.52.4)
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
       '@types/resolve': 1.20.2
       deepmerge: 4.3.1
       is-module: 1.0.0
       resolve: 1.22.10
     optionalDependencies:
-      rollup: 4.52.4
+      rollup: 4.52.5
 
   '@rollup/plugin-replace@2.4.2(rollup@2.79.2)':
     dependencies:
@@ -14317,12 +14323,12 @@ snapshots:
       magic-string: 0.25.9
       rollup: 2.79.2
 
-  '@rollup/plugin-replace@6.0.2(rollup@4.52.4)':
+  '@rollup/plugin-replace@6.0.2(rollup@4.52.5)':
     dependencies:
-      '@rollup/pluginutils': 5.3.0(rollup@4.52.4)
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
       magic-string: 0.30.19
     optionalDependencies:
-      rollup: 4.52.4
+      rollup: 4.52.5
 
   '@rollup/plugin-terser@0.4.4(rollup@2.79.2)':
     dependencies:
@@ -14332,13 +14338,13 @@ snapshots:
     optionalDependencies:
       rollup: 2.79.2
 
-  '@rollup/plugin-terser@0.4.4(rollup@4.52.4)':
+  '@rollup/plugin-terser@0.4.4(rollup@4.52.5)':
     dependencies:
       serialize-javascript: 6.0.2
       smob: 1.5.0
       terser: 5.44.0
     optionalDependencies:
-      rollup: 4.52.4
+      rollup: 4.52.5
 
   '@rollup/pluginutils@3.1.0(rollup@2.79.2)':
     dependencies:
@@ -14360,81 +14366,81 @@ snapshots:
     optionalDependencies:
       rollup: 2.79.2
 
-  '@rollup/pluginutils@5.3.0(rollup@4.52.4)':
+  '@rollup/pluginutils@5.3.0(rollup@4.52.5)':
     dependencies:
       '@types/estree': 1.0.8
       estree-walker: 2.0.2
       picomatch: 4.0.3
     optionalDependencies:
-      rollup: 4.52.4
+      rollup: 4.52.5
 
-  '@rollup/rollup-android-arm-eabi@4.52.4':
+  '@rollup/rollup-android-arm-eabi@4.52.5':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.52.4':
+  '@rollup/rollup-android-arm64@4.52.5':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.52.4':
+  '@rollup/rollup-darwin-arm64@4.52.5':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.52.4':
+  '@rollup/rollup-darwin-x64@4.52.5':
     optional: true
 
-  '@rollup/rollup-freebsd-arm64@4.52.4':
+  '@rollup/rollup-freebsd-arm64@4.52.5':
     optional: true
 
-  '@rollup/rollup-freebsd-x64@4.52.4':
+  '@rollup/rollup-freebsd-x64@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.52.4':
+  '@rollup/rollup-linux-arm-gnueabihf@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.52.4':
+  '@rollup/rollup-linux-arm-musleabihf@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.52.4':
+  '@rollup/rollup-linux-arm64-gnu@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.52.4':
+  '@rollup/rollup-linux-arm64-musl@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-loong64-gnu@4.52.4':
+  '@rollup/rollup-linux-loong64-gnu@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-ppc64-gnu@4.52.4':
+  '@rollup/rollup-linux-ppc64-gnu@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.52.4':
+  '@rollup/rollup-linux-riscv64-gnu@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-musl@4.52.4':
+  '@rollup/rollup-linux-riscv64-musl@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.52.4':
+  '@rollup/rollup-linux-s390x-gnu@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.52.4':
+  '@rollup/rollup-linux-x64-gnu@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.52.4':
+  '@rollup/rollup-linux-x64-musl@4.52.5':
     optional: true
 
-  '@rollup/rollup-openharmony-arm64@4.52.4':
+  '@rollup/rollup-openharmony-arm64@4.52.5':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.52.4':
+  '@rollup/rollup-win32-arm64-msvc@4.52.5':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.52.4':
+  '@rollup/rollup-win32-ia32-msvc@4.52.5':
     optional: true
 
-  '@rollup/rollup-win32-x64-gnu@4.52.4':
+  '@rollup/rollup-win32-x64-gnu@4.52.5':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.52.4':
+  '@rollup/rollup-win32-x64-msvc@4.52.5':
     optional: true
 
-  '@rushstack/node-core-library@5.17.0(@types/node@24.7.2)':
+  '@rushstack/node-core-library@5.17.0(@types/node@24.8.1)':
     dependencies:
       ajv: 8.13.0
       ajv-draft-04: 1.0.0(ajv@8.13.0)
@@ -14445,28 +14451,28 @@ snapshots:
       resolve: 1.22.10
       semver: 7.5.4
     optionalDependencies:
-      '@types/node': 24.7.2
+      '@types/node': 24.8.1
 
-  '@rushstack/problem-matcher@0.1.1(@types/node@24.7.2)':
+  '@rushstack/problem-matcher@0.1.1(@types/node@24.8.1)':
     optionalDependencies:
-      '@types/node': 24.7.2
+      '@types/node': 24.8.1
 
   '@rushstack/rig-package@0.6.0':
     dependencies:
       resolve: 1.22.10
       strip-json-comments: 3.1.1
 
-  '@rushstack/terminal@0.19.1(@types/node@24.7.2)':
+  '@rushstack/terminal@0.19.1(@types/node@24.8.1)':
     dependencies:
-      '@rushstack/node-core-library': 5.17.0(@types/node@24.7.2)
-      '@rushstack/problem-matcher': 0.1.1(@types/node@24.7.2)
+      '@rushstack/node-core-library': 5.17.0(@types/node@24.8.1)
+      '@rushstack/problem-matcher': 0.1.1(@types/node@24.8.1)
       supports-color: 8.1.1
     optionalDependencies:
-      '@types/node': 24.7.2
+      '@types/node': 24.8.1
 
-  '@rushstack/ts-command-line@5.1.1(@types/node@24.7.2)':
+  '@rushstack/ts-command-line@5.1.1(@types/node@24.8.1)':
     dependencies:
-      '@rushstack/terminal': 0.19.1(@types/node@24.7.2)
+      '@rushstack/terminal': 0.19.1(@types/node@24.8.1)
       '@types/argparse': 1.0.38
       argparse: 1.0.10
       string-argv: 0.3.2
@@ -14547,9 +14553,9 @@ snapshots:
       magic-string: 0.25.9
       string.prototype.matchall: 4.0.12
 
-  '@svelte-put/shortcut@4.1.0(svelte@5.39.11)':
+  '@svelte-put/shortcut@4.1.0(svelte@5.41.1)':
     dependencies:
-      svelte: 5.39.11
+      svelte: 5.41.1
 
   '@sveltejs/acorn-typescript@1.0.6(acorn@8.15.0)':
     dependencies:
@@ -14575,16 +14581,16 @@ snapshots:
     dependencies:
       remove-accents: 0.5.0
 
-  '@tanstack/query-core@5.90.2': {}
+  '@tanstack/query-core@5.90.5': {}
 
   '@tanstack/store@0.7.7': {}
 
   '@tanstack/virtual-core@3.13.12': {}
 
-  '@tanstack/vue-query@5.90.2(vue@3.5.22(typescript@5.9.3))':
+  '@tanstack/vue-query@5.90.5(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@tanstack/match-sorter-utils': 8.19.4
-      '@tanstack/query-core': 5.90.2
+      '@tanstack/query-core': 5.90.5
       '@vue/devtools-api': 6.6.4
       vue: 3.5.22(typescript@5.9.3)
       vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
@@ -14600,16 +14606,16 @@ snapshots:
       '@tanstack/virtual-core': 3.13.12
       vue: 3.5.22(typescript@5.9.3)
 
-  '@tinyflow-ai/ui@1.1.5(svelte@5.39.11)':
+  '@tinyflow-ai/ui@1.1.7(svelte@5.41.1)':
     dependencies:
       '@floating-ui/dom': 1.7.4
-      '@xyflow/svelte': 1.3.1(svelte@5.39.11)
+      '@xyflow/svelte': 1.4.0(svelte@5.41.1)
     transitivePeerDependencies:
       - svelte
 
-  '@tinyflow-ai/vue@1.1.5(svelte@5.39.11)(vue@3.5.22(typescript@5.9.3))':
+  '@tinyflow-ai/vue@1.1.7(svelte@5.41.1)(vue@3.5.22(typescript@5.9.3))':
     dependencies:
-      '@tinyflow-ai/ui': 1.1.5(svelte@5.39.11)
+      '@tinyflow-ai/ui': 1.1.7(svelte@5.41.1)
       vue: 3.5.22(typescript@5.9.3)
     transitivePeerDependencies:
       - svelte
@@ -14643,7 +14649,7 @@ snapshots:
 
   '@types/conventional-commits-parser@5.0.1':
     dependencies:
-      '@types/node': 24.7.2
+      '@types/node': 24.8.1
 
   '@types/crypto-js@4.2.2': {}
 
@@ -14790,7 +14796,7 @@ snapshots:
   '@types/jsonwebtoken@9.0.10':
     dependencies:
       '@types/ms': 2.1.0
-      '@types/node': 24.7.2
+      '@types/node': 24.8.1
 
   '@types/katex@0.16.7': {}
 
@@ -14835,11 +14841,11 @@ snapshots:
 
   '@types/node@12.20.55': {}
 
-  '@types/node@22.18.10':
+  '@types/node@22.18.11':
     dependencies:
       undici-types: 6.21.0
 
-  '@types/node@24.7.2':
+  '@types/node@24.8.1':
     dependencies:
       undici-types: 7.14.0
 
@@ -14853,13 +14859,13 @@ snapshots:
 
   '@types/qrcode@1.5.5':
     dependencies:
-      '@types/node': 24.7.2
+      '@types/node': 24.8.1
 
   '@types/qs@6.14.0': {}
 
   '@types/readdir-glob@1.1.5':
     dependencies:
-      '@types/node': 24.7.2
+      '@types/node': 24.8.1
 
   '@types/resolve@1.20.2': {}
 
@@ -14879,15 +14885,15 @@ snapshots:
 
   '@types/web-bluetooth@0.0.21': {}
 
-  '@typescript-eslint/eslint-plugin@8.46.0(@typescript-eslint/parser@8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/eslint-plugin@8.46.1(@typescript-eslint/parser@8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.46.0
-      '@typescript-eslint/type-utils': 8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.46.0
-      eslint: 9.37.0(jiti@2.6.1)
+      '@typescript-eslint/parser': 8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.46.1
+      '@typescript-eslint/type-utils': 8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.46.1
+      eslint: 9.38.0(jiti@2.6.1)
       graphemer: 1.4.0
       ignore: 7.0.5
       natural-compare: 1.4.0
@@ -14896,22 +14902,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.46.0
-      '@typescript-eslint/types': 8.46.0
-      '@typescript-eslint/typescript-estree': 8.46.0(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.46.0
+      '@typescript-eslint/scope-manager': 8.46.1
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/typescript-estree': 8.46.1(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.46.1
       debug: 4.4.3
-      eslint: 9.37.0(jiti@2.6.1)
+      eslint: 9.38.0(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.46.0(typescript@5.9.3)':
+  '@typescript-eslint/project-service@8.46.1(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.46.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.46.0
+      '@typescript-eslint/tsconfig-utils': 8.46.1(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.1
       debug: 4.4.3
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -14922,22 +14928,22 @@ snapshots:
       '@typescript-eslint/types': 7.18.0
       '@typescript-eslint/visitor-keys': 7.18.0
 
-  '@typescript-eslint/scope-manager@8.46.0':
+  '@typescript-eslint/scope-manager@8.46.1':
     dependencies:
-      '@typescript-eslint/types': 8.46.0
-      '@typescript-eslint/visitor-keys': 8.46.0
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/visitor-keys': 8.46.1
 
-  '@typescript-eslint/tsconfig-utils@8.46.0(typescript@5.9.3)':
+  '@typescript-eslint/tsconfig-utils@8.46.1(typescript@5.9.3)':
     dependencies:
       typescript: 5.9.3
 
-  '@typescript-eslint/type-utils@8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/type-utils@8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/types': 8.46.0
-      '@typescript-eslint/typescript-estree': 8.46.0(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/typescript-estree': 8.46.1(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
       debug: 4.4.3
-      eslint: 9.37.0(jiti@2.6.1)
+      eslint: 9.38.0(jiti@2.6.1)
       ts-api-utils: 2.1.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -14945,7 +14951,7 @@ snapshots:
 
   '@typescript-eslint/types@7.18.0': {}
 
-  '@typescript-eslint/types@8.46.0': {}
+  '@typescript-eslint/types@8.46.1': {}
 
   '@typescript-eslint/typescript-estree@7.18.0(typescript@5.9.3)':
     dependencies:
@@ -14962,12 +14968,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/typescript-estree@8.46.0(typescript@5.9.3)':
+  '@typescript-eslint/typescript-estree@8.46.1(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.46.0(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.46.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.46.0
-      '@typescript-eslint/visitor-keys': 8.46.0
+      '@typescript-eslint/project-service': 8.46.1(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.46.1(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/visitor-keys': 8.46.1
       debug: 4.4.3
       fast-glob: 3.3.3
       is-glob: 4.0.3
@@ -14978,24 +14984,24 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@7.18.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/utils@7.18.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.37.0(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
       '@typescript-eslint/scope-manager': 7.18.0
       '@typescript-eslint/types': 7.18.0
       '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.9.3)
-      eslint: 9.37.0(jiti@2.6.1)
+      eslint: 9.38.0(jiti@2.6.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  '@typescript-eslint/utils@8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.37.0(jiti@2.6.1))
-      '@typescript-eslint/scope-manager': 8.46.0
-      '@typescript-eslint/types': 8.46.0
-      '@typescript-eslint/typescript-estree': 8.46.0(typescript@5.9.3)
-      eslint: 9.37.0(jiti@2.6.1)
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
+      '@typescript-eslint/scope-manager': 8.46.1
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/typescript-estree': 8.46.1(typescript@5.9.3)
+      eslint: 9.38.0(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
@@ -15005,9 +15011,9 @@ snapshots:
       '@typescript-eslint/types': 7.18.0
       eslint-visitor-keys: 3.4.3
 
-  '@typescript-eslint/visitor-keys@8.46.0':
+  '@typescript-eslint/visitor-keys@8.46.1':
     dependencies:
-      '@typescript-eslint/types': 8.46.0
+      '@typescript-eslint/types': 8.46.1
       eslint-visitor-keys: 4.2.1
 
   '@ungap/structured-clone@1.3.0': {}
@@ -15079,10 +15085,10 @@ snapshots:
     transitivePeerDependencies:
       - vue
 
-  '@vercel/nft@0.30.2(rollup@4.52.4)':
+  '@vercel/nft@0.30.3(rollup@4.52.5)':
     dependencies:
       '@mapbox/node-pre-gyp': 2.0.0
-      '@rollup/pluginutils': 5.3.0(rollup@4.52.4)
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
       acorn: 8.15.0
       acorn-import-attributes: 1.9.5(acorn@8.15.0)
       async-sema: 3.1.1
@@ -15098,49 +15104,49 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vite-pwa/vitepress@1.0.0(vite-plugin-pwa@1.0.3(vite@5.4.20(@types/node@24.7.2)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(workbox-build@7.3.0)(workbox-window@7.3.0))':
+  '@vite-pwa/vitepress@1.0.1(vite-plugin-pwa@1.1.0(vite@5.4.21(@types/node@24.8.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(workbox-build@7.3.0)(workbox-window@7.3.0))':
     dependencies:
-      vite-plugin-pwa: 1.0.3(vite@5.4.20(@types/node@24.7.2)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(workbox-build@7.3.0)(workbox-window@7.3.0)
+      vite-plugin-pwa: 1.1.0(vite@5.4.21(@types/node@24.8.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(workbox-build@7.3.0)(workbox-window@7.3.0)
 
-  '@vitejs/plugin-vue-jsx@5.1.1(vite@7.1.9(@types/node@22.18.10)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
+  '@vitejs/plugin-vue-jsx@5.1.1(vite@7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@babel/core': 7.28.4
       '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.4)
       '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.4)
-      '@rolldown/pluginutils': 1.0.0-beta.43
+      '@rolldown/pluginutils': 1.0.0-beta.44
       '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.28.4)
-      vite: 7.1.9(@types/node@22.18.10)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       vue: 3.5.22(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@5.1.1(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
+  '@vitejs/plugin-vue-jsx@5.1.1(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@babel/core': 7.28.4
       '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.4)
       '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.4)
-      '@rolldown/pluginutils': 1.0.0-beta.43
+      '@rolldown/pluginutils': 1.0.0-beta.44
       '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.28.4)
-      vite: 7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       vue: 3.5.22(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.2.4(vite@5.4.20(@types/node@24.7.2)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(vue@3.5.22(typescript@5.9.3))':
+  '@vitejs/plugin-vue@5.2.4(vite@5.4.21(@types/node@24.8.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(vue@3.5.22(typescript@5.9.3))':
     dependencies:
-      vite: 5.4.20(@types/node@24.7.2)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)
+      vite: 5.4.21(@types/node@24.8.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)
       vue: 3.5.22(typescript@5.9.3)
 
-  '@vitejs/plugin-vue@6.0.1(vite@7.1.9(@types/node@22.18.10)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
+  '@vitejs/plugin-vue@6.0.1(vite@7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-beta.29
-      vite: 7.1.9(@types/node@22.18.10)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       vue: 3.5.22(typescript@5.9.3)
 
-  '@vitejs/plugin-vue@6.0.1(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
+  '@vitejs/plugin-vue@6.0.1(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-beta.29
-      vite: 7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       vue: 3.5.22(typescript@5.9.3)
 
   '@vitest/expect@3.2.4':
@@ -15151,13 +15157,13 @@ snapshots:
       chai: 5.3.3
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.2.4(vite@7.1.9(@types/node@22.18.10)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))':
+  '@vitest/mocker@3.2.4(vite@7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.19
     optionalDependencies:
-      vite: 7.1.9(@types/node@22.18.10)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
 
   '@vitest/pretty-format@3.2.4':
     dependencies:
@@ -15267,14 +15273,14 @@ snapshots:
     dependencies:
       '@vue/devtools-kit': 7.7.7
 
-  '@vue/devtools-core@7.7.7(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
+  '@vue/devtools-core@7.7.7(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@vue/devtools-kit': 7.7.7
       '@vue/devtools-shared': 7.7.7
       mitt: 3.0.1
       nanoid: 5.1.6
       pathe: 2.0.3
-      vite-hot-client: 2.1.0(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+      vite-hot-client: 2.1.0(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
       vue: 3.5.22(typescript@5.9.3)
     transitivePeerDependencies:
       - vite
@@ -15464,13 +15470,13 @@ snapshots:
       vue: 3.5.22(typescript@5.9.3)
       xe-utils: 3.7.9
 
-  '@xyflow/svelte@1.3.1(svelte@5.39.11)':
+  '@xyflow/svelte@1.4.0(svelte@5.41.1)':
     dependencies:
-      '@svelte-put/shortcut': 4.1.0(svelte@5.39.11)
-      '@xyflow/system': 0.0.70
-      svelte: 5.39.11
+      '@svelte-put/shortcut': 4.1.0(svelte@5.41.1)
+      '@xyflow/system': 0.0.71
+      svelte: 5.41.1
 
-  '@xyflow/system@0.0.70':
+  '@xyflow/system@0.0.71':
     dependencies:
       '@types/d3-drag': 3.0.7
       '@types/d3-interpolate': 3.0.4
@@ -15543,22 +15549,22 @@ snapshots:
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
-  algoliasearch@5.40.0:
+  algoliasearch@5.40.1:
     dependencies:
-      '@algolia/abtesting': 1.6.0
-      '@algolia/client-abtesting': 5.40.0
-      '@algolia/client-analytics': 5.40.0
-      '@algolia/client-common': 5.40.0
-      '@algolia/client-insights': 5.40.0
-      '@algolia/client-personalization': 5.40.0
-      '@algolia/client-query-suggestions': 5.40.0
-      '@algolia/client-search': 5.40.0
-      '@algolia/ingestion': 1.40.0
-      '@algolia/monitoring': 1.40.0
-      '@algolia/recommend': 5.40.0
-      '@algolia/requester-browser-xhr': 5.40.0
-      '@algolia/requester-fetch': 5.40.0
-      '@algolia/requester-node-http': 5.40.0
+      '@algolia/abtesting': 1.6.1
+      '@algolia/client-abtesting': 5.40.1
+      '@algolia/client-analytics': 5.40.1
+      '@algolia/client-common': 5.40.1
+      '@algolia/client-insights': 5.40.1
+      '@algolia/client-personalization': 5.40.1
+      '@algolia/client-query-suggestions': 5.40.1
+      '@algolia/client-search': 5.40.1
+      '@algolia/ingestion': 1.40.1
+      '@algolia/monitoring': 1.40.1
+      '@algolia/recommend': 5.40.1
+      '@algolia/requester-browser-xhr': 5.40.1
+      '@algolia/requester-fetch': 5.40.1
+      '@algolia/requester-node-http': 5.40.1
 
   alien-signals@0.4.14: {}
 
@@ -15713,7 +15719,7 @@ snapshots:
   autoprefixer@10.4.21(postcss@8.5.6):
     dependencies:
       browserslist: 4.26.3
-      caniuse-lite: 1.0.30001750
+      caniuse-lite: 1.0.30001751
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.1.1
@@ -15774,7 +15780,7 @@ snapshots:
 
   base64-js@1.5.1: {}
 
-  baseline-browser-mapping@2.8.16: {}
+  baseline-browser-mapping@2.8.18: {}
 
   better-path-resolve@1.0.0:
     dependencies:
@@ -15856,10 +15862,10 @@ snapshots:
 
   browserslist@4.26.3:
     dependencies:
-      baseline-browser-mapping: 2.8.16
-      caniuse-lite: 1.0.30001750
-      electron-to-chromium: 1.5.234
-      node-releases: 2.0.23
+      baseline-browser-mapping: 2.8.18
+      caniuse-lite: 1.0.30001751
+      electron-to-chromium: 1.5.237
+      node-releases: 2.0.25
       update-browserslist-db: 1.1.3(browserslist@4.26.3)
 
   buffer-crc32@1.0.0: {}
@@ -15879,7 +15885,7 @@ snapshots:
     dependencies:
       run-applescript: 7.1.0
 
-  c12@3.3.0(magicast@0.3.5):
+  c12@3.3.1(magicast@0.3.5):
     dependencies:
       chokidar: 4.0.3
       confbox: 0.2.2
@@ -15912,14 +15918,14 @@ snapshots:
       ssri: 12.0.0
       unique-filename: 4.0.0
 
-  cacheable@2.1.0:
+  cacheable@2.1.1:
     dependencies:
       '@cacheable/memoize': 2.0.3
       '@cacheable/memory': 2.0.3
       '@cacheable/utils': 2.1.0
-      hookified: 1.12.1
+      hookified: 1.12.2
       keyv: 5.5.3
-      qified: 0.5.0
+      qified: 0.5.1
 
   call-bind-apply-helpers@1.0.2:
     dependencies:
@@ -15968,11 +15974,11 @@ snapshots:
   caniuse-api@3.0.0:
     dependencies:
       browserslist: 4.26.3
-      caniuse-lite: 1.0.30001750
+      caniuse-lite: 1.0.30001751
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
 
-  caniuse-lite@1.0.30001750: {}
+  caniuse-lite@1.0.30001751: {}
 
   ccount@2.0.1: {}
 
@@ -16070,7 +16076,7 @@ snapshots:
       node-cleanup: 2.1.2
       typescript: 5.9.3
       update-notifier: 7.3.1
-      zx: 8.8.4
+      zx: 8.8.5
 
   citty@0.1.6:
     dependencies:
@@ -16280,9 +16286,9 @@ snapshots:
 
   core-util-is@1.0.3: {}
 
-  cosmiconfig-typescript-loader@6.2.0(@types/node@24.7.2)(cosmiconfig@9.0.0(typescript@5.9.3))(typescript@5.9.3):
+  cosmiconfig-typescript-loader@6.2.0(@types/node@24.8.1)(cosmiconfig@9.0.0(typescript@5.9.3))(typescript@5.9.3):
     dependencies:
-      '@types/node': 24.7.2
+      '@types/node': 24.8.1
       cosmiconfig: 9.0.0(typescript@5.9.3)
       jiti: 2.6.1
       typescript: 5.9.3
@@ -16913,7 +16919,7 @@ snapshots:
 
   domify@2.0.0: {}
 
-  dompurify@3.2.7:
+  dompurify@3.3.0:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
 
@@ -16936,7 +16942,7 @@ snapshots:
 
   dot-prop@10.1.0:
     dependencies:
-      type-fest: 5.0.1
+      type-fest: 5.1.0
 
   dot-prop@5.3.0:
     dependencies:
@@ -16988,9 +16994,9 @@ snapshots:
     dependencies:
       jake: 10.9.4
 
-  electron-to-chromium@1.5.234: {}
+  electron-to-chromium@1.5.237: {}
 
-  element-plus@2.11.4(vue@3.5.22(typescript@5.9.3)):
+  element-plus@2.11.5(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@ctrl/tinycolor': 4.2.0
       '@element-plus/icons-vue': 2.3.2(vue@3.5.22(typescript@5.9.3))
@@ -17001,7 +17007,6 @@ snapshots:
       '@vueuse/core': 9.13.0(vue@3.5.22(typescript@5.9.3))
       async-validator: 4.2.5
       dayjs: 1.11.18
-      escape-html: 1.0.3
       lodash: 4.17.21
       lodash-es: 4.17.21
       lodash-unified: 1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21)
@@ -17013,7 +17018,7 @@ snapshots:
 
   emoji-regex-xs@1.0.0: {}
 
-  emoji-regex@10.5.0: {}
+  emoji-regex@10.6.0: {}
 
   emoji-regex@8.0.0: {}
 
@@ -17194,20 +17199,20 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
-  eslint-compat-utils@0.5.1(eslint@9.37.0(jiti@2.6.1)):
+  eslint-compat-utils@0.5.1(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.37.0(jiti@2.6.1)
+      eslint: 9.38.0(jiti@2.6.1)
       semver: 7.7.3
 
-  eslint-compat-utils@0.6.5(eslint@9.37.0(jiti@2.6.1)):
+  eslint-compat-utils@0.6.5(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.37.0(jiti@2.6.1)
+      eslint: 9.38.0(jiti@2.6.1)
       semver: 7.7.3
 
-  eslint-config-turbo@2.5.8(eslint@9.37.0(jiti@2.6.1))(turbo@2.5.8):
+  eslint-config-turbo@2.5.8(eslint@9.38.0(jiti@2.6.1))(turbo@2.5.8):
     dependencies:
-      eslint: 9.37.0(jiti@2.6.1)
-      eslint-plugin-turbo: 2.5.8(eslint@9.37.0(jiti@2.6.1))(turbo@2.5.8)
+      eslint: 9.38.0(jiti@2.6.1)
+      eslint-plugin-turbo: 2.5.8(eslint@9.38.0(jiti@2.6.1))(turbo@2.5.8)
       turbo: 2.5.8
 
   eslint-import-context@0.1.9(unrs-resolver@1.11.1):
@@ -17217,36 +17222,36 @@ snapshots:
     optionalDependencies:
       unrs-resolver: 1.11.1
 
-  eslint-json-compat-utils@0.2.1(eslint@9.37.0(jiti@2.6.1))(jsonc-eslint-parser@2.4.1):
+  eslint-json-compat-utils@0.2.1(eslint@9.38.0(jiti@2.6.1))(jsonc-eslint-parser@2.4.1):
     dependencies:
-      eslint: 9.37.0(jiti@2.6.1)
+      eslint: 9.38.0(jiti@2.6.1)
       esquery: 1.6.0
       jsonc-eslint-parser: 2.4.1
 
-  eslint-plugin-command@3.3.1(eslint@9.37.0(jiti@2.6.1)):
+  eslint-plugin-command@3.3.1(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
       '@es-joy/jsdoccomment': 0.50.2
-      eslint: 9.37.0(jiti@2.6.1)
+      eslint: 9.38.0(jiti@2.6.1)
 
-  eslint-plugin-es-x@7.8.0(eslint@9.37.0(jiti@2.6.1)):
+  eslint-plugin-es-x@7.8.0(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.37.0(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
       '@eslint-community/regexpp': 4.12.1
-      eslint: 9.37.0(jiti@2.6.1)
-      eslint-compat-utils: 0.5.1(eslint@9.37.0(jiti@2.6.1))
+      eslint: 9.38.0(jiti@2.6.1)
+      eslint-compat-utils: 0.5.1(eslint@9.38.0(jiti@2.6.1))
 
-  eslint-plugin-eslint-comments@3.2.0(eslint@9.37.0(jiti@2.6.1)):
+  eslint-plugin-eslint-comments@3.2.0(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
       escape-string-regexp: 1.0.5
-      eslint: 9.37.0(jiti@2.6.1)
+      eslint: 9.38.0(jiti@2.6.1)
       ignore: 5.3.2
 
-  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1)):
+  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
-      '@typescript-eslint/types': 8.46.0
+      '@typescript-eslint/types': 8.46.1
       comment-parser: 1.4.1
       debug: 4.4.3
-      eslint: 9.37.0(jiti@2.6.1)
+      eslint: 9.38.0(jiti@2.6.1)
       eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
       is-glob: 4.0.3
       minimatch: 10.0.3
@@ -17254,18 +17259,18 @@ snapshots:
       stable-hash-x: 0.2.0
       unrs-resolver: 1.11.1
     optionalDependencies:
-      '@typescript-eslint/utils': 8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-jsdoc@50.8.0(eslint@9.37.0(jiti@2.6.1)):
+  eslint-plugin-jsdoc@50.8.0(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
       '@es-joy/jsdoccomment': 0.50.2
       are-docs-informative: 0.0.2
       comment-parser: 1.4.1
       debug: 4.4.3
       escape-string-regexp: 4.0.0
-      eslint: 9.37.0(jiti@2.6.1)
+      eslint: 9.38.0(jiti@2.6.1)
       espree: 10.4.0
       esquery: 1.6.0
       parse-imports-exports: 0.2.4
@@ -17274,13 +17279,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-jsonc@2.21.0(eslint@9.37.0(jiti@2.6.1)):
+  eslint-plugin-jsonc@2.21.0(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.37.0(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
       diff-sequences: 27.5.1
-      eslint: 9.37.0(jiti@2.6.1)
-      eslint-compat-utils: 0.6.5(eslint@9.37.0(jiti@2.6.1))
-      eslint-json-compat-utils: 0.2.1(eslint@9.37.0(jiti@2.6.1))(jsonc-eslint-parser@2.4.1)
+      eslint: 9.38.0(jiti@2.6.1)
+      eslint-compat-utils: 0.6.5(eslint@9.38.0(jiti@2.6.1))
+      eslint-json-compat-utils: 0.2.1(eslint@9.38.0(jiti@2.6.1))(jsonc-eslint-parser@2.4.1)
       espree: 10.4.0
       graphemer: 1.4.0
       jsonc-eslint-parser: 2.4.1
@@ -17289,12 +17294,12 @@ snapshots:
     transitivePeerDependencies:
       - '@eslint/json'
 
-  eslint-plugin-n@17.23.1(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3):
+  eslint-plugin-n@17.23.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.37.0(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
       enhanced-resolve: 5.18.3
-      eslint: 9.37.0(jiti@2.6.1)
-      eslint-plugin-es-x: 7.8.0(eslint@9.37.0(jiti@2.6.1))
+      eslint: 9.38.0(jiti@2.6.1)
+      eslint-plugin-es-x: 7.8.0(eslint@9.38.0(jiti@2.6.1))
       get-tsconfig: 4.12.0
       globals: 15.15.0
       globrex: 0.1.2
@@ -17306,51 +17311,51 @@ snapshots:
 
   eslint-plugin-no-only-tests@3.3.0: {}
 
-  eslint-plugin-perfectionist@4.15.1(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3):
+  eslint-plugin-perfectionist@4.15.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/types': 8.46.0
-      '@typescript-eslint/utils': 8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.37.0(jiti@2.6.1)
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.38.0(jiti@2.6.1)
       natural-orderby: 5.0.0
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-prettier@5.5.4(@types/eslint@9.6.1)(eslint@9.37.0(jiti@2.6.1))(prettier@3.6.2):
+  eslint-plugin-prettier@5.5.4(@types/eslint@9.6.1)(eslint@9.38.0(jiti@2.6.1))(prettier@3.6.2):
     dependencies:
-      eslint: 9.37.0(jiti@2.6.1)
+      eslint: 9.38.0(jiti@2.6.1)
       prettier: 3.6.2
       prettier-linter-helpers: 1.0.0
       synckit: 0.11.11
     optionalDependencies:
       '@types/eslint': 9.6.1
 
-  eslint-plugin-regexp@2.10.0(eslint@9.37.0(jiti@2.6.1)):
+  eslint-plugin-regexp@2.10.0(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.37.0(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
       '@eslint-community/regexpp': 4.12.1
       comment-parser: 1.4.1
-      eslint: 9.37.0(jiti@2.6.1)
+      eslint: 9.38.0(jiti@2.6.1)
       jsdoc-type-pratt-parser: 4.8.0
       refa: 0.12.1
       regexp-ast-analysis: 0.7.1
       scslre: 0.3.0
 
-  eslint-plugin-turbo@2.5.8(eslint@9.37.0(jiti@2.6.1))(turbo@2.5.8):
+  eslint-plugin-turbo@2.5.8(eslint@9.38.0(jiti@2.6.1))(turbo@2.5.8):
     dependencies:
       dotenv: 16.0.3
-      eslint: 9.37.0(jiti@2.6.1)
+      eslint: 9.38.0(jiti@2.6.1)
       turbo: 2.5.8
 
-  eslint-plugin-unicorn@59.0.1(eslint@9.37.0(jiti@2.6.1)):
+  eslint-plugin-unicorn@59.0.1(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
       '@babel/helper-validator-identifier': 7.27.1
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.37.0(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
       '@eslint/plugin-kit': 0.2.8
       ci-info: 4.3.1
       clean-regexp: 1.0.0
       core-js-compat: 3.46.0
-      eslint: 9.37.0(jiti@2.6.1)
+      eslint: 9.38.0(jiti@2.6.1)
       esquery: 1.6.0
       find-up-simple: 1.0.1
       globals: 16.4.0
@@ -17363,35 +17368,35 @@ snapshots:
       semver: 7.7.3
       strip-indent: 4.1.1
 
-  eslint-plugin-unused-imports@4.2.0(@typescript-eslint/eslint-plugin@8.46.0(@typescript-eslint/parser@8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1)):
+  eslint-plugin-unused-imports@4.3.0(@typescript-eslint/eslint-plugin@8.46.1(@typescript-eslint/parser@8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.37.0(jiti@2.6.1)
+      eslint: 9.38.0(jiti@2.6.1)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.46.0(@typescript-eslint/parser@8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.46.1(@typescript-eslint/parser@8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
 
-  eslint-plugin-vitest@0.5.4(@typescript-eslint/eslint-plugin@8.46.0(@typescript-eslint/parser@8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.7.2)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
+  eslint-plugin-vitest@0.5.4(@typescript-eslint/eslint-plugin@8.46.1(@typescript-eslint/parser@8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
     dependencies:
-      '@typescript-eslint/utils': 7.18.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.37.0(jiti@2.6.1)
+      '@typescript-eslint/utils': 7.18.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.38.0(jiti@2.6.1)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.46.0(@typescript-eslint/parser@8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
-      vitest: 3.2.4(@types/node@24.7.2)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      '@typescript-eslint/eslint-plugin': 8.46.1(@typescript-eslint/parser@8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      vitest: 3.2.4(@types/node@24.8.1)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-vue@10.5.0(@typescript-eslint/parser@8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.37.0(jiti@2.6.1))):
+  eslint-plugin-vue@10.5.1(@typescript-eslint/parser@8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.38.0(jiti@2.6.1))):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.37.0(jiti@2.6.1))
-      eslint: 9.37.0(jiti@2.6.1)
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
+      eslint: 9.38.0(jiti@2.6.1)
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.1.2
       semver: 7.7.3
-      vue-eslint-parser: 10.2.0(eslint@9.37.0(jiti@2.6.1))
+      vue-eslint-parser: 10.2.0(eslint@9.38.0(jiti@2.6.1))
       xml-name-validator: 4.0.0
     optionalDependencies:
-      '@typescript-eslint/parser': 8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
 
   eslint-scope@8.4.0:
     dependencies:
@@ -17402,21 +17407,20 @@ snapshots:
 
   eslint-visitor-keys@4.2.1: {}
 
-  eslint@9.37.0(jiti@2.6.1):
+  eslint@9.38.0(jiti@2.6.1):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.37.0(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
       '@eslint-community/regexpp': 4.12.1
-      '@eslint/config-array': 0.21.0
-      '@eslint/config-helpers': 0.4.0
+      '@eslint/config-array': 0.21.1
+      '@eslint/config-helpers': 0.4.1
       '@eslint/core': 0.16.0
       '@eslint/eslintrc': 3.3.1
-      '@eslint/js': 9.37.0
+      '@eslint/js': 9.38.0
       '@eslint/plugin-kit': 0.4.0
       '@humanfs/node': 0.16.7
       '@humanwhocodes/module-importer': 1.0.1
       '@humanwhocodes/retry': 0.4.3
       '@types/estree': 1.0.8
-      '@types/json-schema': 7.0.15
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.6
@@ -17588,11 +17592,11 @@ snapshots:
       '@codemirror/language': 6.11.3
       '@codemirror/lint': 6.9.0
       '@codemirror/state': 6.5.2
-      '@codemirror/view': 6.38.5
-      '@lezer/common': 1.2.3
-      '@lezer/highlight': 1.2.1
+      '@codemirror/view': 6.38.6
+      '@lezer/common': 1.3.0
+      '@lezer/highlight': 1.2.2
       '@lezer/lr': 1.4.2
-      '@lezer/markdown': 1.4.3
+      '@lezer/markdown': 1.5.1
       feelin: 3.2.0
       lezer-feel: 1.9.0
       min-dom: 5.1.1
@@ -17663,7 +17667,7 @@ snapshots:
     dependencies:
       magic-string: 0.30.19
       mlly: 1.8.0
-      rollup: 4.52.4
+      rollup: 4.52.5
 
   flat-cache@4.0.1:
     dependencies:
@@ -17677,9 +17681,9 @@ snapshots:
 
   flat-cache@6.1.18:
     dependencies:
-      cacheable: 2.1.0
+      cacheable: 2.1.1
       flatted: 3.3.3
-      hookified: 1.12.1
+      hookified: 1.12.2
 
   flatted@3.3.3: {}
 
@@ -18047,7 +18051,7 @@ snapshots:
 
   hookable@5.5.3: {}
 
-  hookified@1.12.1: {}
+  hookified@1.12.2: {}
 
   htm@3.1.1: {}
 
@@ -18135,7 +18139,7 @@ snapshots:
   image-size@0.5.5:
     optional: true
 
-  immutable@5.1.3: {}
+  immutable@5.1.4: {}
 
   import-fresh@3.3.1:
     dependencies:
@@ -18550,7 +18554,7 @@ snapshots:
 
   kolorist@1.8.0: {}
 
-  ky@1.11.0: {}
+  ky@1.12.0: {}
 
   latest-version@9.0.0:
     dependencies:
@@ -18626,7 +18630,7 @@ snapshots:
 
   lezer-feel@1.9.0:
     dependencies:
-      '@lezer/highlight': 1.2.1
+      '@lezer/highlight': 1.2.2
       '@lezer/lr': 1.4.2
       min-dash: 4.2.3
 
@@ -18654,7 +18658,7 @@ snapshots:
       mlly: 1.8.0
       node-forge: 1.3.1
       pathe: 1.1.2
-      std-env: 3.9.0
+      std-env: 3.10.0
       ufo: 1.6.1
       untun: 0.1.3
       uqr: 0.1.2
@@ -19114,16 +19118,16 @@ snapshots:
   nitropack@2.12.7:
     dependencies:
       '@cloudflare/kv-asset-handler': 0.4.0
-      '@rollup/plugin-alias': 5.1.1(rollup@4.52.4)
-      '@rollup/plugin-commonjs': 28.0.6(rollup@4.52.4)
-      '@rollup/plugin-inject': 5.0.5(rollup@4.52.4)
-      '@rollup/plugin-json': 6.1.0(rollup@4.52.4)
-      '@rollup/plugin-node-resolve': 16.0.3(rollup@4.52.4)
-      '@rollup/plugin-replace': 6.0.2(rollup@4.52.4)
-      '@rollup/plugin-terser': 0.4.4(rollup@4.52.4)
-      '@vercel/nft': 0.30.2(rollup@4.52.4)
+      '@rollup/plugin-alias': 5.1.1(rollup@4.52.5)
+      '@rollup/plugin-commonjs': 28.0.8(rollup@4.52.5)
+      '@rollup/plugin-inject': 5.0.5(rollup@4.52.5)
+      '@rollup/plugin-json': 6.1.0(rollup@4.52.5)
+      '@rollup/plugin-node-resolve': 16.0.3(rollup@4.52.5)
+      '@rollup/plugin-replace': 6.0.2(rollup@4.52.5)
+      '@rollup/plugin-terser': 0.4.4(rollup@4.52.5)
+      '@vercel/nft': 0.30.3(rollup@4.52.5)
       archiver: 7.0.1
-      c12: 3.3.0(magicast@0.3.5)
+      c12: 3.3.1(magicast@0.3.5)
       chokidar: 4.0.3
       citty: 0.1.6
       compatx: 0.2.0
@@ -19163,20 +19167,20 @@ snapshots:
       pkg-types: 2.3.0
       pretty-bytes: 7.1.0
       radix3: 1.1.2
-      rollup: 4.52.4
-      rollup-plugin-visualizer: 6.0.4(rollup@4.52.4)
+      rollup: 4.52.5
+      rollup-plugin-visualizer: 6.0.5(rollup@4.52.5)
       scule: 1.3.0
       semver: 7.7.3
       serve-placeholder: 2.0.2
       serve-static: 2.2.0
       source-map: 0.7.6
-      std-env: 3.9.0
+      std-env: 3.10.0
       ufo: 1.6.1
       ultrahtml: 1.6.0
       uncrypto: 0.1.3
       unctx: 2.4.1
       unenv: 2.0.0-rc.21
-      unimport: 5.4.1
+      unimport: 5.5.0
       unplugin-utils: 0.3.1
       unstorage: 1.17.1(db0@0.3.4)(ioredis@5.8.1)
       untyped: 2.0.0
@@ -19254,7 +19258,7 @@ snapshots:
 
   node-mock-http@1.0.3: {}
 
-  node-releases@2.0.23: {}
+  node-releases@2.0.25: {}
 
   nopt@7.2.1:
     dependencies:
@@ -19426,7 +19430,7 @@ snapshots:
 
   package-json@10.0.1:
     dependencies:
-      ky: 1.11.0
+      ky: 1.12.0
       registry-auth-token: 5.1.0
       registry-url: 6.0.1
       semver: 7.7.3
@@ -19435,7 +19439,7 @@ snapshots:
     dependencies:
       quansync: 0.2.11
 
-  package-manager-detector@1.4.0: {}
+  package-manager-detector@1.5.0: {}
 
   pako@2.1.0: {}
 
@@ -19575,11 +19579,11 @@ snapshots:
       exsolve: 1.0.7
       pathe: 2.0.3
 
-  playwright-core@1.56.0: {}
+  playwright-core@1.56.1: {}
 
-  playwright@1.56.0:
+  playwright@1.56.1:
     dependencies:
-      playwright-core: 1.56.0
+      playwright-core: 1.56.1
     optionalDependencies:
       fsevents: 2.3.2
 
@@ -20106,10 +20110,10 @@ snapshots:
   prr@1.0.1:
     optional: true
 
-  publint@0.3.14:
+  publint@0.3.15:
     dependencies:
       '@publint/pack': 0.1.2
-      package-manager-detector: 1.4.0
+      package-manager-detector: 1.5.0
       picocolors: 1.1.1
       sade: 1.8.1
 
@@ -20121,9 +20125,9 @@ snapshots:
     dependencies:
       escape-goat: 4.0.0
 
-  qified@0.5.0:
+  qified@0.5.1:
     dependencies:
-      hookified: 1.12.1
+      hookified: 1.12.2
 
   qrcode@1.5.4:
     dependencies:
@@ -20358,62 +20362,62 @@ snapshots:
 
   robust-predicates@3.0.2: {}
 
-  rollup-plugin-dts@6.2.3(rollup@4.52.4)(typescript@5.9.3):
+  rollup-plugin-dts@6.2.3(rollup@4.52.5)(typescript@5.9.3):
     dependencies:
       magic-string: 0.30.19
-      rollup: 4.52.4
+      rollup: 4.52.5
       typescript: 5.9.3
     optionalDependencies:
       '@babel/code-frame': 7.27.1
 
-  rollup-plugin-visualizer@5.14.0(rollup@4.52.4):
+  rollup-plugin-visualizer@5.14.0(rollup@4.52.5):
     dependencies:
       open: 8.4.2
       picomatch: 4.0.3
       source-map: 0.7.6
       yargs: 17.7.2
     optionalDependencies:
-      rollup: 4.52.4
+      rollup: 4.52.5
 
-  rollup-plugin-visualizer@6.0.4(rollup@4.52.4):
+  rollup-plugin-visualizer@6.0.5(rollup@4.52.5):
     dependencies:
       open: 8.4.2
       picomatch: 4.0.3
       source-map: 0.7.6
       yargs: 17.7.2
     optionalDependencies:
-      rollup: 4.52.4
+      rollup: 4.52.5
 
   rollup@2.79.2:
     optionalDependencies:
       fsevents: 2.3.3
 
-  rollup@4.52.4:
+  rollup@4.52.5:
     dependencies:
       '@types/estree': 1.0.8
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.52.4
-      '@rollup/rollup-android-arm64': 4.52.4
-      '@rollup/rollup-darwin-arm64': 4.52.4
-      '@rollup/rollup-darwin-x64': 4.52.4
-      '@rollup/rollup-freebsd-arm64': 4.52.4
-      '@rollup/rollup-freebsd-x64': 4.52.4
-      '@rollup/rollup-linux-arm-gnueabihf': 4.52.4
-      '@rollup/rollup-linux-arm-musleabihf': 4.52.4
-      '@rollup/rollup-linux-arm64-gnu': 4.52.4
-      '@rollup/rollup-linux-arm64-musl': 4.52.4
-      '@rollup/rollup-linux-loong64-gnu': 4.52.4
-      '@rollup/rollup-linux-ppc64-gnu': 4.52.4
-      '@rollup/rollup-linux-riscv64-gnu': 4.52.4
-      '@rollup/rollup-linux-riscv64-musl': 4.52.4
-      '@rollup/rollup-linux-s390x-gnu': 4.52.4
-      '@rollup/rollup-linux-x64-gnu': 4.52.4
-      '@rollup/rollup-linux-x64-musl': 4.52.4
-      '@rollup/rollup-openharmony-arm64': 4.52.4
-      '@rollup/rollup-win32-arm64-msvc': 4.52.4
-      '@rollup/rollup-win32-ia32-msvc': 4.52.4
-      '@rollup/rollup-win32-x64-gnu': 4.52.4
-      '@rollup/rollup-win32-x64-msvc': 4.52.4
+      '@rollup/rollup-android-arm-eabi': 4.52.5
+      '@rollup/rollup-android-arm64': 4.52.5
+      '@rollup/rollup-darwin-arm64': 4.52.5
+      '@rollup/rollup-darwin-x64': 4.52.5
+      '@rollup/rollup-freebsd-arm64': 4.52.5
+      '@rollup/rollup-freebsd-x64': 4.52.5
+      '@rollup/rollup-linux-arm-gnueabihf': 4.52.5
+      '@rollup/rollup-linux-arm-musleabihf': 4.52.5
+      '@rollup/rollup-linux-arm64-gnu': 4.52.5
+      '@rollup/rollup-linux-arm64-musl': 4.52.5
+      '@rollup/rollup-linux-loong64-gnu': 4.52.5
+      '@rollup/rollup-linux-ppc64-gnu': 4.52.5
+      '@rollup/rollup-linux-riscv64-gnu': 4.52.5
+      '@rollup/rollup-linux-riscv64-musl': 4.52.5
+      '@rollup/rollup-linux-s390x-gnu': 4.52.5
+      '@rollup/rollup-linux-x64-gnu': 4.52.5
+      '@rollup/rollup-linux-x64-musl': 4.52.5
+      '@rollup/rollup-openharmony-arm64': 4.52.5
+      '@rollup/rollup-win32-arm64-msvc': 4.52.5
+      '@rollup/rollup-win32-ia32-msvc': 4.52.5
+      '@rollup/rollup-win32-x64-gnu': 4.52.5
+      '@rollup/rollup-win32-x64-msvc': 4.52.5
       fsevents: 2.3.3
 
   rotated-array-set@3.0.0: {}
@@ -20458,7 +20462,7 @@ snapshots:
   sass@1.93.2:
     dependencies:
       chokidar: 4.0.3
-      immutable: 5.1.3
+      immutable: 5.1.4
       source-map-js: 1.2.1
     optionalDependencies:
       '@parcel/watcher': 2.5.1
@@ -20714,7 +20718,7 @@ snapshots:
 
   statuses@2.0.2: {}
 
-  std-env@3.9.0: {}
+  std-env@3.10.0: {}
 
   stdin-discarder@0.2.2: {}
 
@@ -20750,7 +20754,7 @@ snapshots:
 
   string-width@7.2.0:
     dependencies:
-      emoji-regex: 10.5.0
+      emoji-regex: 10.6.0
       get-east-asian-width: 1.4.0
       strip-ansi: 7.1.2
 
@@ -20846,7 +20850,7 @@ snapshots:
 
   stubborn-fs@1.2.5: {}
 
-  style-mod@4.1.2: {}
+  style-mod@4.1.3: {}
 
   style-search@0.1.0: {}
 
@@ -21008,7 +21012,7 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte@5.39.11:
+  svelte@5.41.1:
     dependencies:
       '@jridgewell/remapping': 2.3.5
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -21253,7 +21257,7 @@ snapshots:
 
   type-fest@4.41.0: {}
 
-  type-fest@5.0.1:
+  type-fest@5.1.0:
     dependencies:
       tagged-tag: 1.0.0
 
@@ -21309,12 +21313,12 @@ snapshots:
 
   unbuild@3.6.1(sass@1.93.2)(typescript@5.9.3)(vue-tsc@2.2.10(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3)):
     dependencies:
-      '@rollup/plugin-alias': 5.1.1(rollup@4.52.4)
-      '@rollup/plugin-commonjs': 28.0.6(rollup@4.52.4)
-      '@rollup/plugin-json': 6.1.0(rollup@4.52.4)
-      '@rollup/plugin-node-resolve': 16.0.3(rollup@4.52.4)
-      '@rollup/plugin-replace': 6.0.2(rollup@4.52.4)
-      '@rollup/pluginutils': 5.3.0(rollup@4.52.4)
+      '@rollup/plugin-alias': 5.1.1(rollup@4.52.5)
+      '@rollup/plugin-commonjs': 28.0.8(rollup@4.52.5)
+      '@rollup/plugin-json': 6.1.0(rollup@4.52.5)
+      '@rollup/plugin-node-resolve': 16.0.3(rollup@4.52.5)
+      '@rollup/plugin-replace': 6.0.2(rollup@4.52.5)
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
       citty: 0.1.6
       consola: 3.4.2
       defu: 6.1.4
@@ -21328,8 +21332,8 @@ snapshots:
       pathe: 2.0.3
       pkg-types: 2.3.0
       pretty-bytes: 7.1.0
-      rollup: 4.52.4
-      rollup-plugin-dts: 6.2.3(rollup@4.52.4)(typescript@5.9.3)
+      rollup: 4.52.5
+      rollup-plugin-dts: 6.2.3(rollup@4.52.5)(typescript@5.9.3)
       scule: 1.3.0
       tinyglobby: 0.2.15
       untyped: 2.0.0
@@ -21379,7 +21383,7 @@ snapshots:
 
   unicorn-magic@0.3.0: {}
 
-  unimport@5.4.1:
+  unimport@5.5.0:
     dependencies:
       acorn: 8.15.0
       escape-string-regexp: 5.0.0
@@ -21408,7 +21412,7 @@ snapshots:
     dependencies:
       crypto-random-string: 2.0.0
 
-  unist-util-is@6.0.0:
+  unist-util-is@6.0.1:
     dependencies:
       '@types/unist': 3.0.3
 
@@ -21420,16 +21424,16 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
-  unist-util-visit-parents@6.0.1:
+  unist-util-visit-parents@6.0.2:
     dependencies:
       '@types/unist': 3.0.3
-      unist-util-is: 6.0.0
+      unist-util-is: 6.0.1
 
   unist-util-visit@5.0.0:
     dependencies:
       '@types/unist': 3.0.3
-      unist-util-is: 6.0.0
-      unist-util-visit-parents: 6.0.1
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
 
   universalify@0.1.2: {}
 
@@ -21575,17 +21579,17 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
-  vite-hot-client@2.1.0(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
+  vite-hot-client@2.1.0(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
     dependencies:
-      vite: 7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
 
-  vite-node@3.2.4(@types/node@22.18.10)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
+  vite-node@3.2.4(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 7.1.9(@types/node@22.18.10)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -21600,13 +21604,13 @@ snapshots:
       - tsx
       - yaml
 
-  vite-node@3.2.4(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
+  vite-node@3.2.4(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -21622,19 +21626,19 @@ snapshots:
       - yaml
     optional: true
 
-  vite-plugin-compression@0.5.1(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
+  vite-plugin-compression@0.5.1(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
     dependencies:
       chalk: 4.1.2
       debug: 4.4.3
       fs-extra: 10.1.0
-      vite: 7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-dts@4.5.4(@types/node@24.7.2)(rollup@4.52.4)(typescript@5.9.3)(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
+  vite-plugin-dts@4.5.4(@types/node@24.8.1)(rollup@4.52.5)(typescript@5.9.3)(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
     dependencies:
-      '@microsoft/api-extractor': 7.53.1(@types/node@24.7.2)
-      '@rollup/pluginutils': 5.3.0(rollup@4.52.4)
+      '@microsoft/api-extractor': 7.53.1(@types/node@24.8.1)
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
       '@volar/typescript': 2.4.23
       '@vue/language-core': 2.2.0(typescript@5.9.3)
       compare-versions: 6.1.1
@@ -21644,13 +21648,13 @@ snapshots:
       magic-string: 0.30.19
       typescript: 5.9.3
     optionalDependencies:
-      vite: 7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - '@types/node'
       - rollup
       - supports-color
 
-  vite-plugin-html@3.2.2(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
+  vite-plugin-html@3.2.2(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
     dependencies:
       '@rollup/pluginutils': 4.2.1
       colorette: 2.0.20
@@ -21664,12 +21668,12 @@ snapshots:
       html-minifier-terser: 6.1.0
       node-html-parser: 5.4.2
       pathe: 0.2.0
-      vite: 7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
 
-  vite-plugin-inspect@0.8.9(rollup@4.52.4)(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
+  vite-plugin-inspect@0.8.9(rollup@4.52.5)(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
     dependencies:
       '@antfu/utils': 0.7.10
-      '@rollup/pluginutils': 5.3.0(rollup@4.52.4)
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
       debug: 4.4.3
       error-stack-parser-es: 0.1.5
       fs-extra: 11.3.2
@@ -21677,57 +21681,57 @@ snapshots:
       perfect-debounce: 1.0.0
       picocolors: 1.1.1
       sirv: 3.0.2
-      vite: 7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - rollup
       - supports-color
 
   vite-plugin-lazy-import@1.0.7:
     dependencies:
-      '@rollup/pluginutils': 5.3.0(rollup@4.52.4)
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
       es-module-lexer: 1.7.0
-      rollup: 4.52.4
+      rollup: 4.52.5
       xe-utils: 3.7.9
 
-  vite-plugin-pwa@1.0.3(vite@5.4.20(@types/node@24.7.2)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(workbox-build@7.3.0)(workbox-window@7.3.0):
+  vite-plugin-pwa@1.1.0(vite@5.4.21(@types/node@24.8.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(workbox-build@7.3.0)(workbox-window@7.3.0):
     dependencies:
       debug: 4.4.3
       pretty-bytes: 6.1.1
       tinyglobby: 0.2.15
-      vite: 5.4.20(@types/node@24.7.2)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)
+      vite: 5.4.21(@types/node@24.8.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)
       workbox-build: 7.3.0
       workbox-window: 7.3.0
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-pwa@1.0.3(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(workbox-build@7.3.0)(workbox-window@7.3.0):
+  vite-plugin-pwa@1.1.0(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(workbox-build@7.3.0)(workbox-window@7.3.0):
     dependencies:
       debug: 4.4.3
       pretty-bytes: 6.1.1
       tinyglobby: 0.2.15
-      vite: 7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       workbox-build: 7.3.0
       workbox-window: 7.3.0
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vue-devtools@7.7.7(rollup@4.52.4)(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3)):
+  vite-plugin-vue-devtools@7.7.7(rollup@4.52.5)(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3)):
     dependencies:
-      '@vue/devtools-core': 7.7.7(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
+      '@vue/devtools-core': 7.7.7(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
       '@vue/devtools-kit': 7.7.7
       '@vue/devtools-shared': 7.7.7
       execa: 9.6.0
       sirv: 3.0.2
-      vite: 7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
-      vite-plugin-inspect: 0.8.9(rollup@4.52.4)(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
-      vite-plugin-vue-inspector: 5.3.2(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+      vite: 7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite-plugin-inspect: 0.8.9(rollup@4.52.5)(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+      vite-plugin-vue-inspector: 5.3.2(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
     transitivePeerDependencies:
       - '@nuxt/kit'
       - rollup
       - supports-color
       - vue
 
-  vite-plugin-vue-inspector@5.3.2(vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
+  vite-plugin-vue-inspector@5.3.2(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
     dependencies:
       '@babel/core': 7.28.4
       '@babel/plugin-proposal-decorators': 7.28.0(@babel/core@7.28.4)
@@ -21738,32 +21742,32 @@ snapshots:
       '@vue/compiler-dom': 3.5.22
       kolorist: 1.8.0
       magic-string: 0.30.19
-      vite: 7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
-  vite@5.4.20(@types/node@24.7.2)(less@4.4.2)(sass@1.93.2)(terser@5.44.0):
+  vite@5.4.21(@types/node@24.8.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0):
     dependencies:
       esbuild: 0.25.3
       postcss: 8.5.6
-      rollup: 4.52.4
+      rollup: 4.52.5
     optionalDependencies:
-      '@types/node': 24.7.2
+      '@types/node': 24.8.1
       fsevents: 2.3.3
       less: 4.4.2
       sass: 1.93.2
       terser: 5.44.0
 
-  vite@7.1.9(@types/node@22.18.10)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
+  vite@7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
     dependencies:
       esbuild: 0.25.3
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
       postcss: 8.5.6
-      rollup: 4.52.4
+      rollup: 4.52.5
       tinyglobby: 0.2.15
     optionalDependencies:
-      '@types/node': 22.18.10
+      '@types/node': 22.18.11
       fsevents: 2.3.3
       jiti: 2.6.1
       less: 4.4.2
@@ -21771,16 +21775,16 @@ snapshots:
       terser: 5.44.0
       yaml: 2.8.1
 
-  vite@7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
+  vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
     dependencies:
       esbuild: 0.25.3
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
       postcss: 8.5.6
-      rollup: 4.52.4
+      rollup: 4.52.5
       tinyglobby: 0.2.15
     optionalDependencies:
-      '@types/node': 24.7.2
+      '@types/node': 24.8.1
       fsevents: 2.3.3
       jiti: 2.6.1
       less: 4.4.2
@@ -21788,26 +21792,26 @@ snapshots:
       terser: 5.44.0
       yaml: 2.8.1
 
-  vitepress-plugin-group-icons@1.6.3(markdown-it@14.1.0)(vite@5.4.20(@types/node@24.7.2)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)):
+  vitepress-plugin-group-icons@1.6.4(markdown-it@14.1.0)(vite@5.4.21(@types/node@24.8.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)):
     dependencies:
       '@iconify-json/logos': 1.2.9
       '@iconify-json/vscode-icons': 1.2.32
       '@iconify/utils': 3.0.2
       markdown-it: 14.1.0
-      vite: 5.4.20(@types/node@24.7.2)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)
+      vite: 5.4.21(@types/node@24.8.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)
     transitivePeerDependencies:
       - supports-color
 
-  vitepress@1.6.4(@algolia/client-search@5.40.0)(@types/node@24.7.2)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3):
+  vitepress@1.6.4(@algolia/client-search@5.40.1)(@types/node@24.8.1)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3):
     dependencies:
       '@docsearch/css': 3.8.2
-      '@docsearch/js': 3.8.2(@algolia/client-search@5.40.0)(search-insights@2.17.3)
-      '@iconify-json/simple-icons': 1.2.54
+      '@docsearch/js': 3.8.2(@algolia/client-search@5.40.1)(search-insights@2.17.3)
+      '@iconify-json/simple-icons': 1.2.55
       '@shikijs/core': 2.5.0
       '@shikijs/transformers': 2.5.0
       '@shikijs/types': 2.5.0
       '@types/markdown-it': 14.1.2
-      '@vitejs/plugin-vue': 5.2.4(vite@5.4.20(@types/node@24.7.2)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(vue@3.5.22(typescript@5.9.3))
+      '@vitejs/plugin-vue': 5.2.4(vite@5.4.21(@types/node@24.8.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(vue@3.5.22(typescript@5.9.3))
       '@vue/devtools-api': 7.7.7
       '@vue/shared': 3.5.22
       '@vueuse/core': 12.8.2(typescript@5.9.3)
@@ -21816,7 +21820,7 @@ snapshots:
       mark.js: 8.11.1
       minisearch: 7.2.0
       shiki: 2.5.0
-      vite: 5.4.20(@types/node@24.7.2)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)
+      vite: 5.4.21(@types/node@24.8.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)
       vue: 3.5.22(typescript@5.9.3)
     optionalDependencies:
       postcss: 8.5.6
@@ -21847,11 +21851,11 @@ snapshots:
       - typescript
       - universal-cookie
 
-  vitest@3.2.4(@types/node@22.18.10)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
+  vitest@3.2.4(@types/node@22.18.11)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
     dependencies:
       '@types/chai': 5.2.2
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@7.1.9(@types/node@22.18.10)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+      '@vitest/mocker': 3.2.4(vite@7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -21863,17 +21867,17 @@ snapshots:
       magic-string: 0.30.19
       pathe: 2.0.3
       picomatch: 4.0.3
-      std-env: 3.9.0
+      std-env: 3.10.0
       tinybench: 2.9.0
       tinyexec: 0.3.2
       tinyglobby: 0.2.15
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 7.1.9(@types/node@22.18.10)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
-      vite-node: 3.2.4(@types/node@22.18.10)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite-node: 3.2.4(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 22.18.10
+      '@types/node': 22.18.11
       happy-dom: 17.6.3
     transitivePeerDependencies:
       - jiti
@@ -21889,11 +21893,11 @@ snapshots:
       - tsx
       - yaml
 
-  vitest@3.2.4(@types/node@24.7.2)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
+  vitest@3.2.4(@types/node@24.8.1)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
     dependencies:
       '@types/chai': 5.2.2
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@7.1.9(@types/node@22.18.10)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+      '@vitest/mocker': 3.2.4(vite@7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -21905,17 +21909,17 @@ snapshots:
       magic-string: 0.30.19
       pathe: 2.0.3
       picomatch: 4.0.3
-      std-env: 3.9.0
+      std-env: 3.10.0
       tinybench: 2.9.0
       tinyexec: 0.3.2
       tinyglobby: 0.2.15
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 7.1.9(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
-      vite-node: 3.2.4(@types/node@24.7.2)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite-node: 3.2.4(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 24.7.2
+      '@types/node': 24.8.1
       happy-dom: 17.6.3
     transitivePeerDependencies:
       - jiti
@@ -21949,13 +21953,13 @@ snapshots:
 
   vue-dompurify-html@5.3.0(vue@3.5.22(typescript@5.9.3)):
     dependencies:
-      dompurify: 3.2.7
+      dompurify: 3.3.0
       vue: 3.5.22(typescript@5.9.3)
 
-  vue-eslint-parser@10.2.0(eslint@9.37.0(jiti@2.6.1)):
+  vue-eslint-parser@10.2.0(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
       debug: 4.4.3
-      eslint: 9.37.0(jiti@2.6.1)
+      eslint: 9.38.0(jiti@2.6.1)
       eslint-scope: 8.4.0
       eslint-visitor-keys: 4.2.1
       espree: 10.4.0
@@ -21976,7 +21980,7 @@ snapshots:
       clipboard: 2.0.11
       vue: 3.5.22(typescript@5.9.3)
 
-  vue-router@4.5.1(vue@3.5.22(typescript@5.9.3)):
+  vue-router@4.6.3(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.22(typescript@5.9.3)
@@ -22029,15 +22033,15 @@ snapshots:
       vooks: 0.2.12(vue@3.5.22(typescript@5.9.3))
       vue: 3.5.22(typescript@5.9.3)
 
-  vxe-pc-ui@4.9.42(vue@3.5.22(typescript@5.9.3)):
+  vxe-pc-ui@4.10.2(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@vxe-ui/core': 4.2.12(vue@3.5.22(typescript@5.9.3))
     transitivePeerDependencies:
       - vue
 
-  vxe-table@4.16.21(vue@3.5.22(typescript@5.9.3)):
+  vxe-table@4.17.0(vue@3.5.22(typescript@5.9.3)):
     dependencies:
-      vxe-pc-ui: 4.9.42(vue@3.5.22(typescript@5.9.3))
+      vxe-pc-ui: 4.10.2(vue@3.5.22(typescript@5.9.3))
     transitivePeerDependencies:
       - vue
 
@@ -22405,4 +22409,4 @@ snapshots:
 
   zwitch@2.0.4: {}
 
-  zx@8.8.4: {}
+  zx@8.8.5: {}