Merge remote-tracking branch 'yudao/dev' into dev

apps/backend-mock/api/demo/bigint.ts

@@ -0,0 +1,28 @@
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  const data = `
+  {
+    "code": 0,
+    "message": "success",
+    "data": [
+              {
+                "id": 123456789012345678901234567890123456789012345678901234567890,
+                "name": "John Doe",
+                "age": 30,
+                "email": "john-doe@demo.com"
+                },
+                {
+                "id": 987654321098765432109876543210987654321098765432109876543210,
+                "name": "Jane Smith",
+                "age": 25,
+                "email": "jane@demo.com"
+                }
+            ]
+  }
+  `;
+  setHeader(event, 'Content-Type', 'application/json');
+  return data;
+});

apps/web-antd/package.json

@@ -26,6 +26,7 @@
     "#/*": "./src/*"
   },
   "dependencies": {
+    "@ant-design/icons-vue": "catalog:",
     "@form-create/ant-design-vue": "catalog:",
     "@form-create/antd-designer": "catalog:",
     "@tinymce/tinymce-vue": "catalog:",
@@ -53,7 +54,8 @@
     "pinia": "catalog:",
     "vue": "catalog:",
     "vue-dompurify-html": "catalog:",
-    "vue-router": "catalog:"
+    "vue-router": "catalog:",
+    "vue3-signature": "catalog:"
   },
   "devDependencies": {
     "@types/crypto-js": "catalog:"

apps/web-antd/src/adapter/form.ts

@@ -8,63 +8,64 @@ import type { ComponentType } from './component';
 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-/** 手机号正则表达式（中国） */
 const MOBILE_REGEX = /(?:0|86|\+86)?1[3-9]\d{9}/;
 
-setupVbenForm<ComponentType>({
+async function initSetupVbenForm() {
-  config: {
+  setupVbenForm<ComponentType>({
-    // ant design vue组件库默认都是 v-model:value
+    config: {
-    baseModelPropName: 'value',
+      // ant design vue组件库默认都是 v-model:value
+      baseModelPropName: 'value',
 
-    // 一些组件是 v-model:checked 或者 v-model:fileList
+      // 一些组件是 v-model:checked 或者 v-model:fileList
-    modelPropNameMap: {
+      modelPropNameMap: {
-      Checkbox: 'checked',
+        Checkbox: 'checked',
-      Radio: 'checked',
+        Radio: 'checked',
-      RichTextarea: 'modelValue',
+        Switch: 'checked',
-      Switch: 'checked',
+        Upload: 'fileList',
-      Upload: 'fileList',
+      },
     },
-  },
+    defineRules: {
-  defineRules: {
+      // 输入项目必填国际化适配
-    // 输入项目必填国际化适配
+      required: (value, _params, ctx) => {
-    required: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
-      if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
-        return $t('ui.formRules.required', [ctx.label]);
+        }
-      }
-      return true;
-    },
-    // 选择项目必填国际化适配
-    selectRequired: (value, _params, ctx) => {
-      if (value === undefined || value === null) {
-        return $t('ui.formRules.selectRequired', [ctx.label]);
-      }
-      return true;
-    },
-    // 手机号非必填
-    mobile: (value, _params, ctx) => {
-      if (value === undefined || value === null || value.length === 0) {
         return true;
-      } else if (!MOBILE_REGEX.test(value)) {
+      },
-        return $t('ui.formRules.mobile', [ctx.label]);
+      // 选择项目必填国际化适配
-      }
+      selectRequired: (value, _params, ctx) => {
-      return true;
+        if (value === undefined || value === null) {
+          return $t('ui.formRules.selectRequired', [ctx.label]);
+        }
+        return true;
+      },
+      // 手机号非必填
+      mobile: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return true;
+        } else if (!MOBILE_REGEX.test(value)) {
+          return $t('ui.formRules.mobile', [ctx.label]);
+        }
+        return true;
+      },
+      // 手机号必填
+      mobileRequired: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
+        }
+        if (!MOBILE_REGEX.test(value)) {
+          return $t('ui.formRules.mobile', [ctx.label]);
+        }
+        return true;
+      },
     },
-    // 手机号必填
+  });
-    mobileRequired: (value, _params, ctx) => {
+}
-      if (value === undefined || value === null || value.length === 0) {
-        return $t('ui.formRules.required', [ctx.label]);
-      }
-      if (!MOBILE_REGEX.test(value)) {
-        return $t('ui.formRules.mobile', [ctx.label]);
-      }
-      return true;
-    },
-  },
-});
 
 const useVbenForm = useForm<ComponentType>;
 
-export { useVbenForm, z };
+export { initSetupVbenForm, useVbenForm, z };
 
 export type VbenFormSchema = FormSchema<ComponentType>;
 export type { VbenFormProps };
+export type FormSchemaGetter = () => VbenFormSchema[];

apps/web-antd/src/api/bpm/definition/index.ts

@@ -4,6 +4,7 @@ import { requestClient } from '#/api/request';
 
 /** 流程定义 */
 export namespace BpmProcessDefinitionApi {
+  // 流程定义
   export interface ProcessDefinitionVO {
     id: string;
     version: number;
@@ -36,11 +37,12 @@ export async function getProcessDefinitionPage(params: PageParam) {
 
 /** 查询流程定义列表 */
 export async function getProcessDefinitionList(params: any) {
-  return requestClient.get<
+  return requestClient.get<BpmProcessDefinitionApi.ProcessDefinitionVO[]>(
-    PageResult<BpmProcessDefinitionApi.ProcessDefinitionVO>
+    '/bpm/process-definition/list',
-  >('/bpm/process-definition/list', {
+    {
-    params,
+      params,
-  });
+    },
+  );
 }
 
 /** 查询流程定义列表（简单列表） */

apps/web-antd/src/api/bpm/form/index.ts

@@ -3,7 +3,7 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace BpmFormApi {
-  // TODO @siye：注释加一个。。嘿嘿
+  // 流程表单
   export interface FormVO {
     id?: number | undefined;
     name: string;
@@ -11,7 +11,7 @@ export namespace BpmFormApi {
     fields: string[];
     status: number;
     remark: string;
-    createTime: string;
+    createTime: number;
   }
 }
 
@@ -23,7 +23,7 @@ export async function getFormPage(params: PageParam) {
 }
 
 /** 获取表单详情 */
-export async function getFormDetail(id: number) {
+export async function getFormDetail(id: number | string) {
   return requestClient.get<BpmFormApi.FormVO>(`/bpm/form/get?id=${id}`);
 }
 

apps/web-antd/src/api/bpm/model/index.ts

@@ -14,6 +14,7 @@ export namespace BpmModelApi {
   /** 流程定义 VO */
   export interface ProcessDefinitionVO {
     id: string;
+    key?: string;
     version: number;
     deploymentTime: number;
     suspensionState: number;

apps/web-antd/src/api/bpm/processInstance/index.ts

@@ -1,5 +1,7 @@
 import type { PageParam, PageResult } from '@vben/request';
 
+import type { BpmTaskApi } from '../task';
+
 import type { BpmModelApi } from '#/api/bpm/model';
 import type { BpmCandidateStrategyEnum, BpmNodeTypeEnum } from '#/utils';
 
@@ -40,6 +42,7 @@ export namespace BpmProcessInstanceApi {
     tasks: ApprovalTaskInfo[];
   };
 
+  // 流程实例
   export type ProcessInstanceVO = {
     businessKey: string;
     category: string;
@@ -59,12 +62,33 @@ export namespace BpmProcessInstanceApi {
     tasks?: BpmProcessInstanceApi.Task[];
   };
 
+  // 审批详情
   export type ApprovalDetail = {
     activityNodes: BpmProcessInstanceApi.ApprovalNodeInfo[];
     formFieldsPermission: any;
     processDefinition: BpmModelApi.ProcessDefinitionVO;
     processInstance: BpmProcessInstanceApi.ProcessInstanceVO;
     status: number;
+    todoTask: BpmTaskApi.TaskVO;
+  };
+
+  // 抄送流程实例 VO
+  export type CopyVO = {
+    activityId: string;
+    activityName: string;
+    createTime: number;
+    createUser: User;
+    id: number;
+    processInstanceId: string;
+    processInstanceName: string;
+    processInstanceStartTime: number;
+    reason: string;
+    startUser: User;
+    summary: {
+      key: string;
+      value: string;
+    }[];
+    taskId: string;
   };
 }
 
@@ -85,9 +109,7 @@ export async function getProcessInstanceManagerPage(params: PageParam) {
 }
 
 /** 新增流程实例 */
-export async function createProcessInstance(
+export async function createProcessInstance(data: any) {
-  data: BpmProcessInstanceApi.ProcessInstanceVO,
-) {
   return requestClient.post<BpmProcessInstanceApi.ProcessInstanceVO>(
     '/bpm/process-instance/create',
     data,
@@ -152,7 +174,7 @@ export async function getApprovalDetail(params: any) {
 
 /** 获取下一个执行的流程节点 */
 export async function getNextApprovalNodes(params: any) {
-  return requestClient.get<BpmProcessInstanceApi.ProcessInstanceVO>(
+  return requestClient.get<BpmProcessInstanceApi.ApprovalNodeInfo[]>(
     `/bpm/process-instance/get-next-approval-nodes`,
     { params },
   );

apps/web-antd/src/api/bpm/task/index.ts

@@ -1,5 +1,7 @@
 import type { PageParam, PageResult } from '@vben/request';
 
+import type { BpmProcessInstanceApi } from '../processInstance';
+
 import { requestClient } from '#/api/request';
 
 export namespace BpmTaskApi {
@@ -11,7 +13,33 @@ export namespace BpmTaskApi {
     status: number; // 监听器状态
     event: string; // 监听事件
     valueType: string; // 监听器值类型
-    value: string; // 监听器值
+  }
+
+  // 流程任务 VO
+  export interface TaskManagerVO {
+    id: string; // 编号
+    name: string; // 任务名称
+    createTime: number; // 创建时间
+    endTime: number; // 结束时间
+    durationInMillis: number; // 持续时间
+    status: number; // 状态
+    reason: string; // 原因
+    ownerUser: any; // 负责人
+    assigneeUser: any; // 处理人
+    taskDefinitionKey: string; // 任务定义key
+    processInstanceId: string; // 流程实例id
+    processInstance: BpmProcessInstanceApi.ProcessInstanceVO; // 流程实例
+    parentTaskId: any; // 父任务id
+    children: any; // 子任务
+    formId: any; // 表单id
+    formName: any; // 表单名称
+    formConf: any; // 表单配置
+    formFields: any; // 表单字段
+    formVariables: any; // 表单变量
+    buttonsSetting: any; // 按钮设置
+    signEnable: any; // 签名设置
+    reasonRequire: any; // 原因设置
+    nodeType: any; // 节点类型
   }
 }
 
@@ -54,13 +82,15 @@ export const rejectTask = async (data: any) => {
 };
 
 /** 根据流程实例 ID 查询任务列表 */
-export const getTaskListByProcessInstanceId = async (data: any) => {
+export const getTaskListByProcessInstanceId = async (id: string) => {
-  return await requestClient.get('/bpm/task/list-by-process-instance-id', data);
+  return await requestClient.get(
+    `/bpm/task/list-by-process-instance-id?processInstanceId=${id}`,
+  );
 };
 
 /** 获取所有可退回的节点 */
-export const getTaskListByReturn = async (data: any) => {
+export const getTaskListByReturn = async (id: string) => {
-  return await requestClient.get('/bpm/task/list-by-return', data);
+  return await requestClient.get(`/bpm/task/list-by-return?id=${id}`);
 };
 
 /** 退回 */

apps/web-antd/src/api/pay/channel/index.ts

@@ -27,7 +27,7 @@ export function getChannelPage(params: PageParam) {
 }
 
 /** 查询支付渠道详情 */
-export function getChannel(appId: string, code: string) {
+export function getChannel(appId: number, code: string) {
   return requestClient.get<PayChannelApi.Channel>('/pay/channel/get', {
     params: { appId, code },
   });

apps/web-antd/src/api/pay/order/index.ts

@@ -6,8 +6,13 @@ export namespace PayOrderApi {
   /** 支付订单信息 */
   export interface Order {
     id: number;
+    no: string;
+    price: number;
+    channelFeePrice: number;
+    refundPrice: number;
     merchantId: number;
     appId: number;
+    appName: string;
     channelId: number;
     channelCode: string;
     merchantOrderId: string;
@@ -29,7 +34,9 @@ export namespace PayOrderApi {
     refundAmount: number;
     channelUserId: string;
     channelOrderNo: string;
+    channelNotifyData: string;
     createTime: Date;
+    updateTime: Date;
   }
 
   /** 支付订单分页请求 */

apps/web-antd/src/bootstrap.ts

@@ -14,6 +14,7 @@ import { $t, setupI18n } from '#/locales';
 import { setupFormCreate } from '#/plugins/form-create';
 
 import { initComponentAdapter } from './adapter/component';
+import { initSetupVbenForm } from './adapter/form';
 import App from './app.vue';
 import { router } from './router';
 
@@ -21,6 +22,9 @@ async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
 
+  // 初始化表单组件
+  await initSetupVbenForm();
+
   // // 设置弹窗的默认配置
   // setDefaultModalProps({
   //   fullscreenButton: false,

apps/web-antd/src/components/upload/file-upload.vue

@@ -58,7 +58,7 @@ const props = withDefaults(
     showDescription: false,
   },
 );
-const emit = defineEmits(['change', 'update:value', 'delete']);
+const emit = defineEmits(['change', 'update:value', 'delete', 'returnText']);
 const { accept, helpText, maxNumber, maxSize } = toRefs(props);
 const isInnerOperate = ref<boolean>(false);
 const { getStringAccept } = useUploadType({
@@ -125,6 +125,10 @@ const handleRemove = async (file: UploadFile) => {
 };
 
 const beforeUpload = async (file: File) => {
+  // 使用现代的Blob.text()方法替代FileReader
+  const fileContent = await file.text();
+  emit('returnText', fileContent);
+
   const { maxSize, accept } = props;
   const isAct = checkFileType(file, accept);
   if (!isAct) {

apps/web-antd/src/components/user-select-modal/user-select-modal.vue

@@ -30,6 +30,7 @@ interface DeptTreeNode {
   key: string;
   title: string;
   children?: DeptTreeNode[];
+  name: string;
 }
 
 defineOptions({ name: 'UserSelectModal' });
@@ -107,22 +108,26 @@ const transferDataSource = computed(() => {
 const filteredDeptTree = computed(() => {
   if (!deptSearchKeys.value) return deptTree.value;
 
-  const filterNode = (node: any): any => {
+  const filterNode = (node: any, depth = 0): any => {
-    const title = node?.title?.toLowerCase();
+    // 添加深度限制，防止过深的递归导致爆栈
+    if (depth > 100) return null;
+
+    // 按部门名称搜索
+    const name = node?.name?.toLowerCase();
     const search = deptSearchKeys.value.toLowerCase();
 
-    // 如果当前节点匹配
+    // 如果当前节点匹配，直接返回节点，不处理子节点
-    if (title.includes(search)) {
+    if (name?.includes(search)) {
       return {
         ...node,
-        children: node.children?.map((child: any) => filterNode(child)),
+        children: node.children,
       };
     }
 
     // 如果当前节点不匹配，检查子节点
     if (node.children) {
       const filteredChildren = node.children
-        .map((child: any) => filterNode(child))
+        .map((child: any) => filterNode(child, depth + 1))
         .filter(Boolean);
 
       if (filteredChildren.length > 0) {
@@ -397,6 +402,7 @@ const processDeptNode = (node: any): DeptTreeNode => {
   return {
     key: String(node.id),
     title: `${node.name} (${node.id})`,
+    name: node.name,
     children: node.children?.map((child: any) => processDeptNode(child)),
   };
 };

apps/web-antd/src/router/routes/modules/bpm.ts

@@ -49,7 +49,7 @@ const routes: RouteRecordRaw[] = [
       {
         path: '/bpm/manager/form/edit',
         name: 'BpmFormEditor',
-        component: () => import('#/views/bpm/form/editor.vue'),
+        component: () => import('#/views/bpm/form/designer/index.vue'),
         meta: {
           title: '编辑流程表单',
           activePath: '/bpm/manager/form',

apps/web-antd/src/utils/constants.ts

@@ -441,30 +441,6 @@ export const ErpBizType = {
 
 // ========== BPM 模块 ==========
 
-export const BpmModelType = {
-  BPMN: 10, // BPMN 设计器
-  SIMPLE: 20, // 简易设计器
-};
-
-export const BpmModelFormType = {
-  NORMAL: 10, // 流程表单
-  CUSTOM: 20, // 业务表单
-};
-
-export const BpmProcessInstanceStatus = {
-  NOT_START: -1, // 未开始
-  RUNNING: 1, // 审批中
-  APPROVE: 2, // 审批通过
-  REJECT: 3, // 审批不通过
-  CANCEL: 4, // 已取消
-};
-
-export const BpmAutoApproveType = {
-  NONE: 0, // 不自动通过
-  APPROVE_ALL: 1, // 仅审批一次，后续重复的审批节点均自动通过
-  APPROVE_SEQUENT: 2, // 仅针对连续审批的节点自动通过
-};
-
 // 候选人策略枚举 （ 用于审批节点。抄送节点 )
 export enum BpmCandidateStrategyEnum {
   /**
@@ -594,6 +570,40 @@ export enum BpmNodeTypeEnum {
   USER_TASK_NODE = 11,
 }
 
+/**
+ *  流程任务操作按钮
+ */
+export enum BpmTaskOperationButtonTypeEnum {
+  /**
+   * 加签
+   */
+  ADD_SIGN = 5,
+  /**
+   * 通过
+   */
+  APPROVE = 1,
+  /**
+   * 抄送
+   */
+  COPY = 7,
+  /**
+   * 委派
+   */
+  DELEGATE = 4,
+  /**
+   * 拒绝
+   */
+  REJECT = 2,
+  /**
+   * 退回
+   */
+  RETURN = 6,
+  /**
+   * 转办
+   */
+  TRANSFER = 3,
+}
+
 /**
  * 任务状态枚举
  */
@@ -667,3 +677,51 @@ export enum BpmFieldPermissionType {
    */
   WRITE = '2',
 }
+
+/**
+ * 流程模型类型
+ */
+export const BpmModelType = {
+  BPMN: 10, // BPMN 设计器
+  SIMPLE: 20, // 简易设计器
+};
+
+/**
+ * 流程模型表单类型
+ */
+export const BpmModelFormType = {
+  NORMAL: 10, // 流程表单
+  CUSTOM: 20, // 业务表单
+};
+
+/**
+ * 流程实例状态
+ */
+export const BpmProcessInstanceStatus = {
+  NOT_START: -1, // 未开始
+  RUNNING: 1, // 审批中
+  APPROVE: 2, // 审批通过
+  REJECT: 3, // 审批不通过
+  CANCEL: 4, // 已取消
+};
+
+/**
+ * 自动审批类型
+ */
+export const BpmAutoApproveType = {
+  NONE: 0, // 不自动通过
+  APPROVE_ALL: 1, // 仅审批一次，后续重复的审批节点均自动通过
+  APPROVE_SEQUENT: 2, // 仅针对连续审批的节点自动通过
+};
+
+/**
+ * 审批操作按钮名称
+ */
+export const OPERATION_BUTTON_NAME = new Map<number, string>();
+OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.APPROVE, '通过');
+OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.REJECT, '拒绝');
+OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.TRANSFER, '转办');
+OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.DELEGATE, '委派');
+OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.ADD_SIGN, '加签');
+OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.RETURN, '退回');
+OPERATION_BUTTON_NAME.set(BpmTaskOperationButtonTypeEnum.COPY, '抄送');

apps/web-antd/src/utils/download.ts

@@ -0,0 +1,214 @@
+/**
+ * 下载工具模块
+ * 提供多种文件格式的下载功能
+ */
+
+/**
+ * 图片下载配置接口
+ */
+interface ImageDownloadOptions {
+  /** 图片 URL */
+  url: string;
+  /** 指定画布宽度 */
+  canvasWidth?: number;
+  /** 指定画布高度 */
+  canvasHeight?: number;
+  /** 将图片绘制在画布上时带上图片的宽高值，默认为 true */
+  drawWithImageSize?: boolean;
+}
+
+/**
+ * 基础文件下载函数
+ * @param data - 文件数据 Blob
+ * @param fileName - 文件名
+ * @param mimeType - MIME 类型
+ */
+export const download0 = (data: Blob, fileName: string, mimeType: string) => {
+  try {
+    // 创建 blob
+    const blob = new Blob([data], { type: mimeType });
+    // 创建 href 超链接，点击进行下载
+    window.URL = window.URL || window.webkitURL;
+    const href = URL.createObjectURL(blob);
+    const downA = document.createElement('a');
+    downA.href = href;
+    downA.download = fileName;
+    downA.click();
+    // 销毁超链接
+    window.URL.revokeObjectURL(href);
+  } catch (error) {
+    console.error('文件下载失败:', error);
+    throw new Error(
+      `文件下载失败: ${error instanceof Error ? error.message : '未知错误'}`,
+    );
+  }
+};
+
+/**
+ * 触发文件下载的通用方法
+ * @param url - 下载链接
+ * @param fileName - 文件名
+ */
+const triggerDownload = (url: string, fileName: string) => {
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = fileName;
+  a.click();
+};
+
+export const download = {
+  /**
+   * 下载 Excel 文件
+   * @param data - 文件数据 Blob
+   * @param fileName - 文件名
+   */
+  excel: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'application/vnd.ms-excel');
+  },
+
+  /**
+   * 下载 Word 文件
+   * @param data - 文件数据 Blob
+   * @param fileName - 文件名
+   */
+  word: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'application/msword');
+  },
+
+  /**
+   * 下载 Zip 文件
+   * @param data - 文件数据 Blob
+   * @param fileName - 文件名
+   */
+  zip: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'application/zip');
+  },
+
+  /**
+   * 下载 HTML 文件
+   * @param data - 文件数据 Blob
+   * @param fileName - 文件名
+   */
+  html: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'text/html');
+  },
+
+  /**
+   * 下载 Markdown 文件
+   * @param data - 文件数据 Blob
+   * @param fileName - 文件名
+   */
+  markdown: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'text/markdown');
+  },
+
+  /**
+   * 下载 JSON 文件
+   * @param data - 文件数据 Blob
+   * @param fileName - 文件名
+   */
+  json: (data: Blob, fileName: string) => {
+    download0(data, fileName, 'application/json');
+  },
+
+  /**
+   * 下载图片（允许跨域）
+   * @param options - 图片下载配置
+   */
+  image: (options: ImageDownloadOptions) => {
+    const {
+      url,
+      canvasWidth,
+      canvasHeight,
+      drawWithImageSize = true,
+    } = options;
+
+    const image = new Image();
+    // image.setAttribute('crossOrigin', 'anonymous')
+    image.src = url;
+    image.addEventListener('load', () => {
+      try {
+        const canvas = document.createElement('canvas');
+        canvas.width = canvasWidth || image.width;
+        canvas.height = canvasHeight || image.height;
+        const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+        ctx?.clearRect(0, 0, canvas.width, canvas.height);
+
+        if (drawWithImageSize) {
+          ctx.drawImage(image, 0, 0, image.width, image.height);
+        } else {
+          ctx.drawImage(image, 0, 0);
+        }
+
+        const dataUrl = canvas.toDataURL('image/png');
+        triggerDownload(dataUrl, 'image.png');
+      } catch (error) {
+        console.error('图片下载失败:', error);
+        throw new Error(
+          `图片下载失败: ${error instanceof Error ? error.message : '未知错误'}`,
+        );
+      }
+    });
+
+    image.addEventListener('error', () => {
+      throw new Error('图片加载失败');
+    });
+  },
+
+  /**
+   * 将 Base64 字符串转换为文件对象
+   * @param base64 - Base64 字符串
+   * @param fileName - 文件名
+   * @returns File 对象
+   */
+  base64ToFile: (base64: string, fileName: string): File => {
+    // 输入验证
+    if (!base64 || typeof base64 !== 'string') {
+      throw new Error('base64 参数必须是非空字符串');
+    }
+
+    // 将 base64 按照逗号进行分割，将前缀与后续内容分隔开
+    const data = base64.split(',');
+    if (data.length !== 2 || !data[0] || !data[1]) {
+      throw new Error('无效的 base64 格式');
+    }
+
+    // 利用正则表达式从前缀中获取类型信息（image/png、image/jpeg、image/webp等）
+    const typeMatch = data[0].match(/:(.*?);/);
+    if (!typeMatch || !typeMatch[1]) {
+      throw new Error('无法解析 base64 类型信息');
+    }
+    const type = typeMatch[1];
+
+    // 从类型信息中获取具体的文件格式后缀（png、jpeg、webp）
+    const typeParts = type.split('/');
+    if (typeParts.length !== 2 || !typeParts[1]) {
+      throw new Error('无效的 MIME 类型格式');
+    }
+    const suffix = typeParts[1];
+
+    try {
+      // 使用 atob() 对 base64 数据进行解码，结果是一个文件数据流以字符串的格式输出
+      const bstr = window.atob(data[1]);
+
+      // 获取解码结果字符串的长度
+      const n = bstr.length;
+      // 根据解码结果字符串的长度创建一个等长的整型数字数组
+      const u8arr = new Uint8Array(n);
+
+      // 优化的 Uint8Array 填充逻辑
+      for (let i = 0; i < n; i++) {
+        // 使用 charCodeAt() 获取字符对应的字节值（Base64 解码后的字符串是字节级别的）
+        // eslint-disable-next-line unicorn/prefer-code-point
+        u8arr[i] = bstr.charCodeAt(i);
+      }
+
+      // 返回 File 文件对象
+      return new File([u8arr], `${fileName}.${suffix}`, { type });
+    } catch (error) {
+      throw new Error(
+        `Base64 解码失败: ${error instanceof Error ? error.message : '未知错误'}`,
+      );
+    }
+  },
+};

apps/web-antd/src/utils/formCreate.ts

@@ -34,7 +34,7 @@ export const decodeFields = (fields: string[]) => {
 export const setConfAndFields = (
   designerRef: object,
   conf: string,
-  fields: string,
+  fields: string | string[],
 ) => {
   // @ts-ignore designerRef.value is dynamically added by form-create-designer
   designerRef.value.setOption(JSON.parse(conf));

apps/web-antd/src/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './constants';
 export * from './dict';
+export * from './download';
 export * from './formatTime';
 export * from './formCreate';
 export * from './rangePickerProps';

apps/web-antd/src/views/bpm/category/index.vue

@@ -6,11 +6,13 @@ import type {
 import type { BpmCategoryApi } from '#/api/bpm/category';
 
 import { Page, useVbenModal } from '@vben/common-ui';
+import { Plus } from '@vben/icons';
 
 import { Button, message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteCategory, getCategoryPage } from '#/api/bpm/category';
+import { DocAlert } from '#/components/doc-alert';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
@@ -100,6 +102,10 @@ async function onDelete(row: BpmCategoryApi.CategoryVO) {
 
 <template>
   <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
+    </template>
+
     <FormModal @success="onRefresh" />
     <Grid table-title="流程分类">
       <template #toolbar-tools>

apps/web-antd/src/views/bpm/form/data.ts

@@ -105,7 +105,7 @@ export function useGridColumns<T = BpmFormApi.FormVO>(
     {
       field: 'operation',
       title: '操作',
-      minWidth: 150,
+      minWidth: 200,
       align: 'center',
       fixed: 'right',
       cellRender: {

apps/web-antd/src/views/bpm/form/designer/index.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-// TODO @siye：editor 要不要放到独立的目录？form/designer ？
 import { computed, onMounted, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
@@ -12,19 +11,15 @@ import { getFormDetail } from '#/api/bpm/form';
 import { useFormCreateDesigner } from '#/components/form-create';
 import { router } from '#/router';
 import { setConfAndFields } from '#/utils';
-
+import Form from '#/views/bpm/form/modules/form.vue';
-import Form from './modules/form.vue';
 
 defineOptions({ name: 'BpmFormEditor' });
 
-// TODO @siye：这里有 lint 告警
+const props = defineProps<{
-const props = defineProps<Props>();
+  copyId?: number | string;
-
+  id?: number | string;
-interface Props {
-  copyId?: number;
-  id?: number;
   type: 'copy' | 'create' | 'edit';
-}
+}>();
 
 // 流程表单详情
 const flowFormConfig = ref();
@@ -85,7 +80,7 @@ const currentFormId = computed(() => {
 });
 
 // 加载表单配置
-async function loadFormConfig(id: number) {
+async function loadFormConfig(id: number | string) {
   try {
     const formDetail = await getFormDetail(id);
     flowFormConfig.value = formDetail;
@@ -107,10 +102,11 @@ async function initializeDesigner() {
   }
 
   if (id) {
-    await loadFormConfig(id);
+    await loadFormConfig(Number(id));
   }
 }
 
+// 保存表单
 function handleSave() {
   formModalApi
     .setData({
@@ -121,7 +117,7 @@ function handleSave() {
     .open();
 }
 
-// TODO @siye：一些必要的注释，稍微写写哈。保持风格的一致性；
+// 返回列表页
 function onBack() {
   router.push({
     path: '/bpm/manager/form',

apps/web-antd/src/views/bpm/form/index.vue

@@ -12,6 +12,7 @@ import { Page, useVbenModal } from '@vben/common-ui';
 import { Plus } from '@vben/icons';
 import { $t } from '@vben/locales';
 
+import FormCreate from '@form-create/ant-design-vue';
 import { Button, message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
@@ -119,7 +120,6 @@ async function onDetail(row: BpmFormApi.FormVO) {
 
 /** 编辑 */
 function onEdit(row: BpmFormApi.FormVO) {
-  console.warn(row);
   router.push({
     name: 'BpmFormEditor',
     query: {
@@ -165,11 +165,12 @@ watch(
 
 <template>
   <Page auto-content-height>
-    <DocAlert
+    <template #doc>
-      title="审批接入（流程表单）"
+      <DocAlert
-      url="https://doc.iocoder.cn/bpm/use-bpm-form/"
+        title="审批接入（流程表单）"
-    />
+        url="https://doc.iocoder.cn/bpm/use-bpm-form/"
-    <FormModal @success="onRefresh" />
+      />
+    </template>
     <Grid table-title="流程表单">
       <template #toolbar-tools>
         <Button type="primary" @click="onCreate">
@@ -177,28 +178,6 @@ watch(
           {{ $t('ui.actionTitle.create', ['流程表单']) }}
         </Button>
       </template>
-
-      <!-- 摘要 -->
-      <!-- TODO @siye：这个是不是不应该有呀？ -->
-      <template #slot-summary="{ row }">
-        <div
-          class="flex flex-col py-2"
-          v-if="
-            row.processInstance.summary &&
-            row.processInstance.summary.length > 0
-          "
-        >
-          <div
-            v-for="(item, index) in row.processInstance.summary"
-            :key="index"
-          >
-            <span class="text-gray-500">
-              {{ item.key }} : {{ item.value }}
-            </span>
-          </div>
-        </div>
-        <div v-else>-</div>
-      </template>
     </Grid>
 
     <DetailModal
@@ -209,7 +188,7 @@ watch(
       }"
     >
       <div class="mx-4">
-        <form-create :option="formConfig.option" :rule="formConfig.rule" />
+        <FormCreate :option="formConfig.option" :rule="formConfig.rule" />
       </div>
     </DetailModal>
   </Page>

apps/web-antd/src/views/bpm/form/modules/form.vue

@@ -39,28 +39,29 @@ const [Form, formApi] = useVbenForm({
 
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
-    // TODO @siye：建议和别的模块，也稍微加点类似的注释哈。= = 阅读总是会有点层次感；
+    // 表单验证
     const { valid } = await formApi.validate();
     if (!valid) return;
 
+    // 锁定模态框
     modalApi.lock();
     try {
+      // 获取表单数据
       const data = (await formApi.getValues()) as BpmFormApi.FormVO;
 
+      // 编码表单配置和表单字段
       data.conf = encodeConf(designerComponent);
       data.fields = encodeFields(designerComponent);
 
-      // TODO @siye：这个是不是不用抽方法呀，直接写逻辑就完事啦。
+      // 保存表单数据
-      const saveForm = async () => {
+      if (formData.value?.id) {
-        if (!formData.value?.id) {
+        await (editorAction.value === 'copy'
-          return createForm(data);
-        }
-        return editorAction.value === 'copy'
           ? createForm(data)
-          : updateForm(data);
+          : updateForm(data));
-      };
+      } else {
+        await createForm(data);
+      }
 
-      await saveForm();
       await modalApi.close();
       emit('success');
       message.success($t('ui.actionMessage.operationSuccess'));
@@ -76,14 +77,15 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
 
-    // TODO @siye：建议和别的模块，也稍微加点类似的注释哈。= = 阅读总是会有点层次感；
     const data = modalApi.getData<any>();
     if (!data) return;
 
+    // 设置表单设计器组件
     designerComponent.value = data.designer;
     formData.value = data.formConfig;
     editorAction.value = data.action;
 
+    // 如果是复制，表单名称后缀添加 _copy ，id 置空
     if (editorAction.value === 'copy' && formData.value) {
       formData.value = {
         ...formData.value,

apps/web-antd/src/views/bpm/group/data.ts

@@ -101,6 +101,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 /** 列表的字段 */
 export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
   onActionClick: OnActionClickFn<T>,
+  getMemberNames: (userIds: number[]) => string,
 ): VxeTableGridOptions['columns'] {
   return [
     {
@@ -122,8 +123,8 @@ export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
       field: 'userIds',
       title: '成员',
       minWidth: 200,
-      slots: {
+      formatter: (row) => {
-        default: 'userIds-cell',
+        return getMemberNames(row.cellValue);
       },
     },
     {

apps/web-antd/src/views/bpm/group/index.vue

@@ -16,6 +16,7 @@ import { Button, message } from 'ant-design-vue';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteUserGroup, getUserGroupPage } from '#/api/bpm/userGroup';
 import { getSimpleUserList } from '#/api/system/user';
+import { DocAlert } from '#/components/doc-alert';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
@@ -30,7 +31,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(onActionClick, getMemberNames),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -42,21 +43,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
             ...formValues,
           });
         },
-        querySuccess: (params) => {
-          // TODO @siye：getLeaderName?: (userId: number) => string | undefined, 参考这个哈。
-          const { list } = params.response;
-          const userMap = new Map(
-            userList.value.map((user) => [user.id, user.nickname]),
-          );
-          list.forEach(
-            (item: BpmUserGroupApi.UserGroupVO & { nicknames?: string }) => {
-              item.nicknames = item.userIds
-                .map((userId) => userMap.get(userId))
-                .filter(Boolean)
-                .join('、');
-            },
-          );
-        },
       },
     },
     rowConfig: {
@@ -69,6 +55,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<BpmUserGroupApi.UserGroupVO>,
 });
 
+/** 获取分组成员姓名 */
+function getMemberNames(userIds: number[]) {
+  const userMap = new Map(
+    userList.value.map((user) => [user.id, user.nickname]),
+  );
+  return userIds
+    .map((userId) => userMap.get(userId))
+    .filter(Boolean)
+    .join('、');
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({
   code,
@@ -128,6 +125,10 @@ onMounted(async () => {
 
 <template>
   <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
+    </template>
+
     <FormModal @success="onRefresh" />
     <Grid table-title="用户分组">
       <template #toolbar-tools>

apps/web-antd/src/views/bpm/oa/leave/data.ts

@@ -1,9 +1,15 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { BpmCategoryApi } from '#/api/bpm/category';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
 
 import { useAccess } from '@vben/access';
 
+import dayjs from 'dayjs';
+
+import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
 const { hasAccessByCodes } = useAccess();
@@ -198,3 +204,32 @@ export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
     },
   ];
 }
+
+/** 详情 */
+export function useDetailFormSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      label: '请假类型',
+      field: 'type',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.BPM_OA_LEAVE_TYPE,
+          value: data?.type,
+        }),
+    },
+    {
+      label: '开始时间',
+      field: 'startTime',
+      content: (data) => dayjs(data?.startTime).format('YYYY-MM-DD HH:mm:ss'),
+    },
+    {
+      label: '结束时间',
+      field: 'endTime',
+      content: (data) => dayjs(data?.endTime).format('YYYY-MM-DD HH:mm:ss'),
+    },
+    {
+      label: '原因',
+      field: 'reason',
+    },
+  ];
+}

apps/web-antd/src/views/bpm/oa/leave/detail.vue

@@ -1,11 +1,54 @@
-<script lang="ts" setup>
+<script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { BpmOALeaveApi } from '#/api/bpm/oa/leave';
+
+import { computed, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { getLeave } from '#/api/bpm/oa/leave';
+import { ContentWrap } from '#/components/content-wrap';
+import { Description } from '#/components/description';
+
+import { useDetailFormSchema } from './data';
+
+const props = defineProps<{
+  id: string;
+}>();
+const datailLoading = ref(false);
+const detailData = ref<BpmOALeaveApi.LeaveVO>();
+
+const { query } = useRoute();
+const queryId = computed(() => query.id as string);
+
+const getDetailData = async () => {
+  try {
+    datailLoading.value = true;
+    detailData.value = await getLeave(Number(props.id || queryId.value));
+  } finally {
+    datailLoading.value = false;
+  }
+};
+
+onMounted(() => {
+  getDetailData();
+});
 </script>
 
 <template>
-  <Page>
+  <ContentWrap class="m-2">
-    <div>
+    <Description
-      <h1>请假详情</h1>
+      :data="detailData"
-    </div>
+      :schema="useDetailFormSchema()"
-  </Page>
+      :component-props="{
+        column: 1,
+        bordered: true,
+        size: 'small',
+      }"
+    />
+  </ContentWrap>
 </template>
+
+<style lang="scss" scoped>
+:deep(.ant-descriptions-item-label) {
+  width: 150px;
+}
+</style>

apps/web-antd/src/views/bpm/processExpression/index.vue

@@ -106,8 +106,12 @@ async function onDelete(row: BpmProcessExpressionApi.ProcessExpressionVO) {
 
 <template>
   <Page auto-content-height>
-    <DocAlert title="流程表达式" url="https://doc.iocoder.cn/bpm/expression/" />
+    <template #doc>
-
+      <DocAlert
+        title="流程表达式"
+        url="https://doc.iocoder.cn/bpm/expression/"
+      />
+    </template>
     <FormModal @success="onRefresh" />
     <Grid table-title="流程表达式">
       <template #toolbar-tools>

apps/web-antd/src/views/bpm/processInstance/create/index.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { BpmCategoryApi } from '#/api/bpm/category';
 import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
 
 import { computed, nextTick, onMounted, ref } from 'vue';
@@ -33,7 +34,9 @@ const processInstanceId: any = route.query.processInstanceId; // 流程实例编
 const loading = ref(true); // 加载中
 const categoryList: any = ref([]); // 分类的列表
 const activeCategory = ref(''); // 当前选中的分类
-const processDefinitionList = ref([]); // 流程定义的列表
+const processDefinitionList = ref<
+  BpmProcessDefinitionApi.ProcessDefinitionVO[]
+>([]); // 流程定义的列表
 
 // 实现 groupBy 功能
 const groupBy = (array: any[], key: string) => {
@@ -107,8 +110,12 @@ const handleGetProcessDefinitionList = async () => {
   }
 };
 
+/** 用于存储搜索过滤后的流程定义 */
+const filteredProcessDefinitionList = ref<
+  BpmProcessDefinitionApi.ProcessDefinitionVO[]
+>([]);
+
 /** 搜索流程 */
-const filteredProcessDefinitionList = ref([]); // 用于存储搜索过滤后的流程定义
 const handleQuery = () => {
   if (searchName.value.trim()) {
     // 如果有搜索关键字，进行过滤
@@ -150,10 +157,15 @@ const processDefinitionGroup: any = computed(() => {
 
   const grouped = groupBy(filteredProcessDefinitionList.value, 'category');
   // 按照 categoryList 的顺序重新组织数据
-  const orderedGroup = {};
+  const orderedGroup: Record<
-  categoryList.value.forEach((category: any) => {
+    string,
+    BpmProcessDefinitionApi.ProcessDefinitionVO[]
+  > = {};
+  categoryList.value.forEach((category: BpmCategoryApi.CategoryVO) => {
     if (grouped[category.code]) {
-      orderedGroup[category.code] = grouped[category.code];
+      orderedGroup[category.code] = grouped[
+        category.code
+      ] as BpmProcessDefinitionApi.ProcessDefinitionVO[];
     }
   });
   return orderedGroup;
@@ -191,7 +203,7 @@ const availableCategories = computed(() => {
   const availableCategoryCodes = Object.keys(processDefinitionGroup.value);
 
   // 过滤出有流程的分类
-  return categoryList.value.filter((category: CategoryVO) =>
+  return categoryList.value.filter((category: BpmCategoryApi.CategoryVO) =>
     availableCategoryCodes.includes(category.code),
   );
 });
@@ -229,11 +241,7 @@ onMounted(() => {
               allow-clear
               @input="handleQuery"
               @clear="handleQuery"
-            >
+            />
-              <template #prefix>
-                <IconifyIcon icon="mdi:search-web" />
-              </template>
-            </InputSearch>
           </div>
         </template>
 
@@ -289,15 +297,6 @@ onMounted(() => {
                         </Tooltip>
                       </span>
                     </div>
-
-                    <!-- TODO: 发起流程按钮 -->
-                    <!-- <template #actions>
-                      <div class="flex justify-end px-4">
-                        <Button type="link" @click="handleSelect(definition)">
-                          发起流程
-                        </Button>
-                      </div>
-                    </template> -->
                   </Card>
                 </Col>
               </Row>

apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue

@@ -20,13 +20,14 @@ import {
   BpmCandidateStrategyEnum,
   BpmFieldPermissionType,
   BpmModelFormType,
+  BpmModelType,
   BpmNodeIdEnum,
   BpmNodeTypeEnum,
   decodeFields,
   setConfAndFields2,
 } from '#/utils';
+import ProcessInstanceSimpleViewer from '#/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue';
 import ProcessInstanceTimeline from '#/views/bpm/processInstance/detail/modules/time-line.vue';
-
 // 类型定义
 interface ProcessFormData {
   rule: any[];
@@ -80,8 +81,8 @@ const detailForm = ref<ProcessFormData>({
 
 const fApi = ref<ApiAttrs>();
 const startUserSelectTasks = ref<UserTask[]>([]);
-const startUserSelectAssignees = ref<Record<number, string[]>>({});
+const startUserSelectAssignees = ref<Record<string, string[]>>({});
-const tempStartUserSelectAssignees = ref<Record<number, string[]>>({});
+const tempStartUserSelectAssignees = ref<Record<string, string[]>>({});
 const bpmnXML = ref<string | undefined>(undefined);
 const simpleJson = ref<string | undefined>(undefined);
 const timelineRef = ref<any>();
@@ -273,9 +274,7 @@ const handleCancel = () => {
 /** 选择发起人 */
 const selectUserConfirm = (activityId: string, userList: any[]) => {
   if (!activityId || !Array.isArray(userList)) return;
-  startUserSelectAssignees.value[Number(activityId)] = userList.map(
+  startUserSelectAssignees.value[activityId] = userList.map((item) => item.id);
-    (item) => item.id,
-  );
 };
 
 defineExpose({ initProcessInfo });
@@ -284,12 +283,11 @@ defineExpose({ initProcessInfo });
 <template>
   <Card
     :title="getTitle"
+    class="h-full overflow-hidden"
     :body-style="{
-      padding: '12px',
+      height: 'calc(100% - 112px)',
-      height: '100%',
+      paddingTop: '12px',
-      display: 'flex',
+      overflowY: 'auto',
-      flexDirection: 'column',
-      paddingBottom: '62px', // 预留 actions 区域高度
     }"
   >
     <template #extra>
@@ -334,18 +332,25 @@ defineExpose({ initProcessInfo });
       </Tabs.TabPane>
 
       <Tabs.TabPane tab="流程图" key="flow" class="flex flex-1 overflow-hidden">
-        <div>待开发</div>
+        <div class="w-full">
+          <ProcessInstanceSimpleViewer
+            :simple-json="simpleJson"
+            v-if="selectProcessDefinition.modelType === BpmModelType.SIMPLE"
+          />
+        </div>
       </Tabs.TabPane>
     </Tabs>
 
     <template #actions>
       <template v-if="activeTab === 'form'">
-        <Space wrap class="flex h-[50px] w-full justify-center">
+        <Space wrap class="flex w-full justify-center">
           <Button plain type="primary" @click="submitForm">
-            <IconifyIcon icon="mdi:check" />&nbsp; 发起
+            <IconifyIcon icon="icon-park-outline:check" />
+            发起
           </Button>
           <Button plain type="default" @click="handleCancel">
-            <IconifyIcon icon="mdi:close" />&nbsp; 取消
+            <IconifyIcon icon="icon-park-outline:close" />
+            取消
           </Button>
         </Space>
       </template>

apps/web-antd/src/views/bpm/processInstance/detail/index.vue

@@ -2,21 +2,12 @@
 import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 import type { SystemUserApi } from '#/api/system/user';
 
-import { nextTick, onMounted, ref } from 'vue';
+import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
 
 import { Page } from '@vben/common-ui';
 import { formatDateTime } from '@vben/utils';
 
-import {
+import { Avatar, Card, Col, message, Row, TabPane, Tabs } from 'ant-design-vue';
-  Avatar,
-  Button,
-  Card,
-  Col,
-  message,
-  Row,
-  TabPane,
-  Tabs,
-} from 'ant-design-vue';
 
 import {
   getApprovalDetail as getApprovalDetailApi,
@@ -39,6 +30,10 @@ import {
   SvgBpmRunningIcon,
 } from '#/views/bpm/processInstance/detail/modules/icons';
 
+import ProcessInstanceBpmnViewer from './modules/bpm-viewer.vue';
+import ProcessInstanceOperationButton from './modules/operation-button.vue';
+import ProcessInstanceSimpleViewer from './modules/simple-bpm-viewer.vue';
+import BpmProcessInstanceTaskList from './modules/task-list.vue';
 import ProcessInstanceTimeline from './modules/time-line.vue';
 
 defineOptions({ name: 'BpmProcessInstanceDetail' });
@@ -71,7 +66,7 @@ const processInstanceLoading = ref(false); // 流程实例的加载中
 const processInstance = ref<BpmProcessInstanceApi.ProcessInstanceVO>(); // 流程实例
 const processDefinition = ref<any>({}); // 流程定义
 const processModelView = ref<any>({}); // 流程模型视图
-// const operationButtonRef = ref(); // 操作按钮组件 ref
+const operationButtonRef = ref(); // 操作按钮组件 ref
 const auditIconsMap: {
   [key: string]:
     | typeof SvgBpmApproveIcon
@@ -99,7 +94,7 @@ const detailForm = ref({
 const writableFields: Array<string> = []; // 表单可以编辑的字段
 
 /** 加载流程实例 */
-const BusinessFormComponent = ref<any>(null); // 异步组件
+const BusinessFormComponent = shallowRef<any>(null); // 异步组件
 
 /** 获取详情 */
 async function getDetail() {
@@ -161,6 +156,7 @@ async function getApprovalDetail() {
       });
     } else {
       // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
+
       BusinessFormComponent.value = registerComponent(
         data?.processDefinition?.formCustomViewPath || '',
       );
@@ -168,6 +164,9 @@ async function getApprovalDetail() {
 
     // 获取审批节点，显示 Timeline 的数据
     activityNodes.value = data.activityNodes;
+
+    // 获取待办任务显示操作按钮
+    operationButtonRef.value?.loadTodoTask(data.todoTask);
   } catch {
     message.error('获取审批详情失败！');
   } finally {
@@ -221,6 +220,20 @@ const setFieldPermission = (field: string, permission: string) => {
 
 /** 当前的Tab */
 const activeTab = ref('form');
+const taskListRef = ref();
+
+// 监听 Tab 切换，当切换到 "record" 标签时刷新任务列表
+watch(
+  () => activeTab.value,
+  (newVal) => {
+    if (newVal === 'record') {
+      // 如果切换到流转记录标签，刷新任务列表
+      nextTick(() => {
+        taskListRef.value?.refresh();
+      });
+    }
+  },
+);
 
 /** 初始化 */
 const userOptions = ref<SystemUserApi.User[]>([]); // 用户列表
@@ -234,9 +247,7 @@ onMounted(async () => {
 <template>
   <Page auto-content-height>
     <Card
-      class="h-full"
       :body-style="{
-        height: 'calc(100% - 140px)',
         overflowY: 'auto',
         paddingTop: '12px',
       }"
@@ -291,18 +302,25 @@ onMounted(async () => {
         </div>
 
         <!-- 流程操作 -->
-        <div class="flex-1">
+        <div class="process-tabs-container flex flex-1 flex-col">
-          <Tabs v-model:active-key="activeTab" class="mt-0">
+          <Tabs v-model:active-key="activeTab" class="mt-0 h-full">
-            <TabPane tab="审批详情" key="form">
+            <TabPane tab="审批详情" key="form" class="tab-pane-content">
-              <Row :gutter="[48, 24]">
+              <Row :gutter="[48, 24]" class="h-full">
-                <Col :xs="24" :sm="24" :md="18" :lg="18" :xl="16">
+                <Col
+                  :xs="24"
+                  :sm="24"
+                  :md="18"
+                  :lg="18"
+                  :xl="16"
+                  class="h-full"
+                >
                   <!-- 流程表单 -->
                   <div
                     v-if="
                       processDefinition?.formType === BpmModelFormType.NORMAL
                     "
+                    class="h-full"
                   >
-                    <!-- v-model="detailForm.value" -->
                     <form-create
                       v-model="detailForm.value"
                       v-model:api="fApi"
@@ -315,40 +333,110 @@ onMounted(async () => {
                     v-if="
                       processDefinition?.formType === BpmModelFormType.CUSTOM
                     "
+                    class="h-full"
                   >
                     <BusinessFormComponent :id="processInstance?.businessKey" />
                   </div>
                 </Col>
-                <Col :xs="24" :sm="24" :md="6" :lg="6" :xl="8">
+                <Col :xs="24" :sm="24" :md="6" :lg="6" :xl="8" class="h-full">
-                  <div class="mt-2">
+                  <div class="mt-4 h-full">
                     <ProcessInstanceTimeline :activity-nodes="activityNodes" />
                   </div>
                 </Col>
               </Row>
             </TabPane>
 
-            <TabPane tab="流程图" key="diagram">
+            <TabPane tab="流程图" key="diagram" class="tab-pane-content">
-              <div>待开发</div>
+              <div class="h-full">
+                <ProcessInstanceSimpleViewer
+                  v-show="
+                    processDefinition.modelType &&
+                    processDefinition.modelType === BpmModelType.SIMPLE
+                  "
+                  :loading="processInstanceLoading"
+                  :model-view="processModelView"
+                />
+                <ProcessInstanceBpmnViewer
+                  v-show="
+                    processDefinition.modelType &&
+                    processDefinition.modelType === BpmModelType.BPMN
+                  "
+                  :loading="processInstanceLoading"
+                  :model-view="processModelView"
+                />
+              </div>
             </TabPane>
 
-            <TabPane tab="流转记录" key="record">
+            <TabPane tab="流转记录" key="record" class="tab-pane-content">
-              <div>待开发</div>
+              <div class="h-full">
+                <BpmProcessInstanceTaskList
+                  ref="taskListRef"
+                  :loading="processInstanceLoading"
+                  :id="id"
+                />
+              </div>
             </TabPane>
 
             <!-- TODO 待开发 -->
-            <TabPane tab="流转评论" key="comment" v-if="false">
+            <TabPane
-              <div>待开发</div>
+              tab="流转评论"
+              key="comment"
+              v-if="false"
+              class="tab-pane-content"
+            >
+              <div class="h-full">待开发</div>
             </TabPane>
           </Tabs>
         </div>
       </div>
 
       <template #actions>
-        <div class="flex justify-start gap-x-2 p-4">
+        <div class="px-4">
-          <Button type="primary">驳回</Button>
+          <ProcessInstanceOperationButton
-          <Button type="primary">同意</Button>
+            ref="operationButtonRef"
+            :process-instance="processInstance"
+            :process-definition="processDefinition"
+            :user-options="userOptions"
+            :normal-form="detailForm"
+            :normal-form-api="fApi"
+            :writable-fields="writableFields"
+            @success="getDetail"
+          />
         </div>
       </template>
     </Card>
   </Page>
 </template>
+
+<style lang="scss" scoped>
+.ant-tabs-content {
+  height: 100%;
+}
+
+.process-tabs-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+:deep(.ant-tabs) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+:deep(.ant-tabs-content) {
+  flex: 1;
+  overflow-y: auto;
+}
+
+:deep(.ant-tabs-tabpane) {
+  height: 100%;
+}
+
+.tab-pane-content {
+  height: calc(100vh - 420px);
+  padding-right: 12px;
+  overflow: hidden auto;
+}
+</style>

apps/web-antd/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineOptions({ name: 'ProcessInstanceBpmnViewer' });
+</script>
+
+<template>
+  <div>
+    <h1>BPMN Viewer</h1>
+  </div>
+</template>

apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, message, Space, Tooltip } from 'ant-design-vue';
+import Vue3Signature from 'vue3-signature';
+
+import { uploadFile } from '#/api/infra/file';
+import { download } from '#/utils';
+
+defineOptions({
+  name: 'BpmProcessInstanceSignature',
+});
+
+const emits = defineEmits(['success']);
+
+const [Modal, modalApi] = useVbenModal({
+  title: '流程签名',
+  onOpenChange(visible) {
+    if (!visible) {
+      modalApi.close();
+    }
+  },
+  onConfirm: () => {
+    submit();
+  },
+});
+
+const signature = ref<InstanceType<typeof Vue3Signature>>();
+
+const open = async () => {
+  modalApi.open();
+};
+
+defineExpose({ open });
+
+const submit = async () => {
+  message.success({
+    content: '签名上传中请稍等。。。',
+  });
+  const signFileUrl = await uploadFile({
+    file: download.base64ToFile(
+      signature?.value?.save('image/jpeg') || '',
+      '签名',
+    ),
+  });
+  emits('success', signFileUrl);
+  modalApi.close();
+};
+</script>
+
+<template>
+  <Modal class="h-[500px] w-[900px]">
+    <div class="mb-2 flex justify-end">
+      <Space>
+        <Tooltip title="撤销上一步操作">
+          <Button @click="signature?.undo()">
+            <template #icon>
+              <IconifyIcon icon="mi:undo" class="mb-[4px] size-[16px]" />
+            </template>
+            撤销
+          </Button>
+        </Tooltip>
+
+        <Tooltip title="清空画布">
+          <Button @click="signature?.clear()">
+            <template #icon>
+              <IconifyIcon
+                icon="mdi:delete-outline"
+                class="mb-[4px] size-[16px]"
+              />
+            </template>
+            <span>清除</span>
+          </Button>
+        </Tooltip>
+      </Space>
+    </div>
+
+    <Vue3Signature
+      class="mx-auto border-[1px] border-solid border-gray-300"
+      ref="signature"
+      w="874px"
+      h="324px"
+    />
+  </Modal>
+</template>

apps/web-antd/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineOptions({ name: 'ProcessInstanceSimpleViewer' });
+</script>
+
+<template>
+  <div>
+    <h1>Simple BPM Viewer</h1>
+  </div>
+</template>

apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import type { formCreate } from '@form-create/antd-designer';
+
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+
+import type { BpmTaskApi } from '#/api/bpm/task';
+
+import { nextTick, onMounted, ref, shallowRef } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getTaskListByProcessInstanceId } from '#/api/bpm/task';
+import { DICT_TYPE, formatPast2, setConfAndFields2 } from '#/utils';
+
+defineOptions({
+  name: 'BpmProcessInstanceTaskList',
+});
+
+const props = defineProps<{
+  id: string;
+  loading: boolean;
+}>();
+
+// 使用shallowRef减少不必要的深度响应
+const columns = shallowRef([
+  {
+    field: 'name',
+    title: '审批节点',
+    minWidth: 150,
+  },
+  {
+    field: 'approver',
+    title: '审批人',
+    slots: {
+      default: ({ row }: { row: BpmTaskApi.TaskManagerVO }) => {
+        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 },
+    },
+  },
+  {
+    field: 'reason',
+    title: '审批建议',
+    slots: {
+      default: 'slot-reason',
+    },
+    minWidth: 200,
+  },
+  {
+    field: 'durationInMillis',
+    title: '耗时',
+    minWidth: 180,
+    slots: {
+      default: ({ row }: { row: BpmTaskApi.TaskManagerVO }) => {
+        return formatPast2(row.durationInMillis);
+      },
+    },
+  },
+]);
+
+// Grid配置和API
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: columns.value,
+    keepSource: true,
+    showFooter: true,
+    border: true,
+    height: 'auto',
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          return await getTaskListByProcessInstanceId(props.id);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+    cellConfig: {
+      height: 60,
+    },
+  } as VxeTableGridOptions<BpmTaskApi.TaskVO>,
+});
+
+/**
+ * 刷新表格数据
+ */
+const refresh = (): void => {
+  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.TaskManagerVO): 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,
+});
+</script>
+
+<template>
+  <div class="flex h-full flex-col">
+    <Grid>
+      <template #slot-reason="{ row }">
+        <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"
+          >
+            <IconifyIcon icon="ep:document" />
+            <span class="!ml-[2px] text-[12px]">查看表单</span>
+          </Button>
+        </div>
+      </template>
+    </Grid>
+    <Modal class="w-[800px]">
+      <form-create
+        ref="formRef"
+        v-model="taskForm.value"
+        :option="taskForm.option"
+        :rule="taskForm.rule"
+      />
+    </Modal>
+  </div>
+</template>

apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue

@@ -43,7 +43,7 @@ const statusIconMap: Record<
   // 审批未开始
   '-1': { color: '#909398', icon: 'mdi:clock-outline' },
   // 待审批
-  '0': { color: '#00b32a', icon: 'mdi:loading' },
+  '0': { color: '#ff943e', icon: 'mdi:loading', animation: 'animate-spin' },
   // 审批中
   '1': { color: '#448ef7', icon: 'mdi:loading', animation: 'animate-spin' },
   // 审批通过

apps/web-antd/src/views/bpm/processInstance/manager/index.vue

@@ -105,7 +105,9 @@ function onCancel(row: BpmProcessInstanceApi.ProcessInstanceVO) {
     content: '请输入取消原因',
     title: '取消流程',
     modelPropName: 'value',
-  });
+  })
+    .then(() => {})
+    .catch(() => {});
 }
 
 /** 查看流程实例 */
@@ -125,9 +127,10 @@ function onRefresh() {
 
 <template>
   <Page auto-content-height>
-    <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm" />
+    <template #doc>
+      <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm" />
+    </template>
 
-    <FormModal @success="onRefresh" />
     <Grid table-title="流程实例" />
   </Page>
 </template>

apps/web-antd/src/views/bpm/processListener/index.vue

@@ -108,10 +108,12 @@ async function onDelete(row: BpmProcessListenerApi.ProcessListenerVO) {
 
 <template>
   <Page auto-content-height>
-    <DocAlert
+    <template #doc>
-      title="执行监听器、任务监听器"
+      <DocAlert
-      url="https://doc.iocoder.cn/bpm/listener/"
+        title="执行监听器、任务监听器"
-    />
+        url="https://doc.iocoder.cn/bpm/listener/"
+      />
+    </template>
     <FormModal @success="onRefresh" />
     <Grid table-title="流程监听器">
       <template #toolbar-tools>

apps/web-antd/src/views/bpm/task/copy/index.vue

@@ -45,14 +45,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
     cellConfig: {
       height: 64,
     },
-  } as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstanceVO>,
+  } as VxeTableGridOptions<BpmProcessInstanceApi.CopyVO>,
 });
 
 /** 表格操作按钮的回调函数 */
 function onActionClick({
   code,
   row,
-}: OnActionClickParams<BpmProcessInstanceApi.ProcessInstanceVO>) {
+}: OnActionClickParams<BpmProcessInstanceApi.CopyVO>) {
   switch (code) {
     case 'detail': {
       onDetail(row);
@@ -61,9 +61,8 @@ function onActionClick({
   }
 }
 
-/** 办理任务 */
+/** 任务详情 */
-function onDetail(row: BpmProcessInstanceApi.ProcessInstanceVO) {
+function onDetail(row: BpmProcessInstanceApi.CopyVO) {
-  // TODO @siye：row 的类型是不是不对哈？需要改成 copyvo 么？
   const query = {
     id: row.processInstanceId,
     ...(row.activityId && { activityId: row.activityId }),
@@ -82,11 +81,12 @@ function onRefresh() {
 
 <template>
   <Page auto-content-height>
-    <!-- TODO @siye：应该用 <template #doc>，这样高度可以被用进去哈 -->
+    <template #doc>
-    <DocAlert
+      <DocAlert
-      title="审批转办、委派、抄送"
+        title="审批转办、委派、抄送"
-      url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+        url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
-    />
+      />
+    </template>
 
     <FormModal @success="onRefresh" />
     <Grid table-title="抄送任务">

apps/web-antd/src/views/bpm/task/done/data.ts

@@ -2,8 +2,6 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { BpmTaskApi } from '#/api/bpm/task';
 
-import { useAccess } from '@vben/access';
-
 import { getCategorySimpleList } from '#/api/bpm/category';
 import {
   DICT_TYPE,
@@ -12,18 +10,15 @@ import {
   getRangePickerDefaultProps,
 } from '#/utils';
 
-// TODO @siye：这个要去掉么？没用到
-const { hasAccessByCodes } = useAccess();
-
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
       fieldName: 'name',
-      label: '流程名称',
+      label: '任务名称',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入流程名称',
+        placeholder: '请输入任务名称',
         allowClear: true,
       },
     },
@@ -79,8 +74,8 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
 ): VxeTableGridOptions['columns'] {
   return [
     {
-      field: 'name',
+      field: 'processInstance.name',
-      title: '流程名称',
+      title: '流程',
       minWidth: 200,
       fixed: 'left',
     },

apps/web-antd/src/views/bpm/task/done/index.vue

@@ -78,18 +78,19 @@ function onRefresh() {
 
 <template>
   <Page auto-content-height>
-    <DocAlert
+    <template #doc>
-      title="审批通过、不通过、驳回"
+      <DocAlert
-      url="https://doc.iocoder.cn/bpm/task-todo-done/"
+        title="审批通过、不通过、驳回"
-    />
+        url="https://doc.iocoder.cn/bpm/task-todo-done/"
-    <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+      />
-    <DocAlert
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
-      title="审批转办、委派、抄送"
+      <DocAlert
-      url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+        title="审批转办、委派、抄送"
-    />
+        url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
-    <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+      />
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+    </template>
 
-    <FormModal @success="onRefresh" />
     <Grid table-title="已办任务">
       <!-- 摘要 -->
       <template #slot-summary="{ row }">

apps/web-antd/src/views/bpm/task/manager/data.ts

@@ -33,19 +33,11 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
 ): VxeTableGridOptions['columns'] {
   return [
     {
-      field: 'name',
+      field: 'processInstance.name',
-      title: '流程名称',
+      title: '流程',
       minWidth: 200,
       fixed: 'left',
     },
-    {
-      field: 'processInstance.summary',
-      title: '摘要',
-      minWidth: 200,
-      slots: {
-        default: 'slot-summary',
-      },
-    },
     {
       field: 'processInstance.startUser.nickname',
       title: '发起人',

apps/web-antd/src/views/bpm/task/manager/index.vue

@@ -16,7 +16,7 @@ import { useGridColumns, useGridFormSchema } from './data';
 
 defineOptions({ name: 'BpmManagerTask' });
 
-const [Grid, gridApi] = useVbenVxeGrid({
+const [Grid] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
@@ -45,11 +45,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
     cellConfig: {
       height: 64,
     },
-  } as VxeTableGridOptions<BpmTaskApi.TaskVO>,
+  } as VxeTableGridOptions<BpmTaskApi.TaskManagerVO>,
 });
 
 /** 表格操作按钮的回调函数 */
-function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
+function onActionClick({
+  code,
+  row,
+}: OnActionClickParams<BpmTaskApi.TaskManagerVO>) {
   switch (code) {
     case 'history': {
       onHistory(row);
@@ -59,50 +62,22 @@ function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
 }
 
 /** 查看历史 */
-function onHistory(row: BpmTaskApi.TaskVO) {
+function onHistory(row: BpmTaskApi.TaskManagerVO) {
   console.warn(row);
   router.push({
     name: 'BpmProcessInstanceDetail',
     query: {
-      // TODO @siye：数据类型，会爆红哈；
       id: row.processInstance.id,
     },
   });
 }
-
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
 </script>
 
 <template>
   <Page auto-content-height>
-    <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
+    <template #doc>
-
+      <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
-    <FormModal @success="onRefresh" />
+    </template>
-    <Grid table-title="流程任务">
+    <Grid table-title="流程任务" />
-      <!-- 摘要 -->
-      <!-- TODO siye：这个要不要，也放到 data.ts 处理掉？ -->
-      <template #slot-summary="{ row }">
-        <div
-          class="flex flex-col py-2"
-          v-if="
-            row.processInstance.summary &&
-            row.processInstance.summary.length > 0
-          "
-        >
-          <div
-            v-for="(item, index) in row.processInstance.summary"
-            :key="index"
-          >
-            <span class="text-gray-500">
-              {{ item.key }} : {{ item.value }}
-            </span>
-          </div>
-        </div>
-        <div v-else>-</div>
-      </template>
-    </Grid>
   </Page>
 </template>

apps/web-antd/src/views/bpm/task/todo/data.ts

@@ -2,6 +2,8 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { BpmTaskApi } from '#/api/bpm/task';
 
+import { h } from 'vue';
+
 import { useAccess } from '@vben/access';
 
 import { getCategorySimpleList } from '#/api/bpm/category';
@@ -14,10 +16,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
       fieldName: 'name',
-      label: '流程名称',
+      label: '任务名称',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入流程名称',
+        placeholder: '请输入任务名称',
         allowClear: true,
       },
     },
@@ -72,8 +74,8 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
 ): VxeTableGridOptions['columns'] {
   return [
     {
-      field: 'name',
+      field: 'processInstance.name',
-      title: '流程名称',
+      title: '流程',
       minWidth: 200,
       fixed: 'left',
     },
@@ -82,7 +84,28 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
       title: '摘要',
       minWidth: 200,
       slots: {
-        default: 'slot-summary',
+        default: ({ row }) => {
+          const summary = row?.processInstance?.summary;
+
+          if (!summary || summary.length === 0) {
+            return '-';
+          }
+          return summary.map((item: any) => {
+            return h(
+              'div',
+              {
+                key: item.key,
+              },
+              h(
+                'span',
+                {
+                  class: 'text-gray-500',
+                },
+                `${item.key} : ${item.value}`,
+              ),
+            );
+          });
+        },
       },
     },
     {

apps/web-antd/src/views/bpm/task/todo/index.vue

@@ -78,40 +78,18 @@ function onRefresh() {
 
 <template>
   <Page auto-content-height>
-    <DocAlert
+    <template #doc>
-      title="审批通过、不通过、驳回"
+      <DocAlert
-      url="https://doc.iocoder.cn/bpm/task-todo-done/"
+        title="审批通过、不通过、驳回"
-    />
+        url="https://doc.iocoder.cn/bpm/task-todo-done/"
-    <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+      />
-    <DocAlert
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
-      title="审批转办、委派、抄送"
+      <DocAlert
-      url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+        title="审批转办、委派、抄送"
-    />
+        url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
-    <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+      />
-
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
-    <FormModal @success="onRefresh" />
+    </template>
-    <Grid table-title="待办任务">
+    <Grid table-title="待办任务" />
-      <!-- 摘要 -->
-      <!-- TODO siye：这个要不要，也放到 data.ts 处理掉？ -->
-      <template #slot-summary="{ row }">
-        <div
-          class="flex flex-col py-2"
-          v-if="
-            row.processInstance.summary &&
-            row.processInstance.summary.length > 0
-          "
-        >
-          <div
-            v-for="(item, index) in row.processInstance.summary"
-            :key="index"
-          >
-            <span class="text-gray-500">
-              {{ item.key }} : {{ item.value }}
-            </span>
-          </div>
-        </div>
-        <div v-else>-</div>
-      </template>
-    </Grid>
   </Page>
 </template>

apps/web-antd/src/views/pay/app/data.ts

@@ -0,0 +1,223 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'name',
+    label: '应用名',
+    componentProps: {
+      placeholder: '请输入应用名',
+    },
+  },
+  {
+    component: 'Select',
+    fieldName: 'status',
+    label: '开启状态',
+    componentProps: {
+      placeholder: '请选择开启状态',
+      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+    },
+  },
+  {
+    component: 'RangePicker',
+    fieldName: 'createTime',
+    label: '创建时间',
+    componentProps: {
+      placeholder: ['开始日期', '结束日期'],
+    },
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '应用标识',
+    field: 'appKey',
+  },
+  {
+    title: '应用名',
+    field: 'name',
+  },
+  {
+    title: '开启状态',
+    field: 'status',
+    slots: {
+      default: 'status',
+    },
+  },
+  {
+    title: '支付宝配置',
+    children: [
+      {
+        title: 'APP 支付',
+        slots: {
+          default: 'alipayAppConfig',
+        },
+      },
+      {
+        title: 'PC 网站支付',
+        slots: {
+          default: 'alipayPCConfig',
+        },
+      },
+      {
+        title: 'WAP 网站支付',
+        slots: {
+          default: 'alipayWAPConfig',
+        },
+      },
+      {
+        title: '扫码支付',
+        slots: {
+          default: 'alipayQrConfig',
+        },
+      },
+      {
+        title: '条码支付',
+        slots: {
+          default: 'alipayBarConfig',
+        },
+      },
+    ],
+  },
+  {
+    title: '微信配置',
+    children: [
+      {
+        title: '小程序支付',
+        slots: {
+          default: 'wxLiteConfig',
+        },
+      },
+      {
+        title: 'JSAPI 支付',
+        slots: {
+          default: 'wxPubConfig',
+        },
+      },
+      {
+        title: 'APP 支付',
+        slots: {
+          default: 'wxAppConfig',
+        },
+      },
+      {
+        title: 'Native 支付',
+        slots: {
+          default: 'wxNativeConfig',
+        },
+      },
+      {
+        title: 'WAP 网站支付',
+        slots: {
+          default: 'wxWapConfig',
+        },
+      },
+      {
+        title: '条码支付',
+        slots: {
+          default: 'wxBarConfig',
+        },
+      },
+    ],
+  },
+  {
+    title: '钱包支付配置',
+    field: 'walletConfig',
+    slots: {
+      default: 'walletConfig',
+    },
+  },
+  {
+    title: '模拟支付配置',
+    field: 'mockConfig',
+    slots: {
+      default: 'mockConfig',
+    },
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    minWidth: 160,
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    label: '应用编号',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '应用名',
+    fieldName: 'name',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入应用名',
+    },
+  },
+  {
+    label: '应用标识',
+    fieldName: 'appKey',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入应用标识',
+    },
+  },
+  {
+    label: '开启状态',
+    fieldName: 'status',
+    component: 'RadioGroup',
+    rules: 'required',
+    componentProps: {
+      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+    },
+  },
+  {
+    label: '支付结果的回调地址',
+    fieldName: 'orderNotifyUrl',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入支付结果的回调地址',
+    },
+  },
+  {
+    label: '退款结果的回调地址',
+    fieldName: 'refundNotifyUrl',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入支付结果的回调地址',
+    },
+  },
+  {
+    label: '转账结果的回调地址',
+    fieldName: 'transferNotifyUrl',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入转账结果的回调地址',
+    },
+  },
+  {
+    label: '备注',
+    fieldName: 'remark',
+    component: 'Textarea',
+    componentProps: {
+      rows: 3,
+      placeholder: '请输入备注',
+    },
+  },
+];

apps/web-antd/src/views/pay/app/index.vue

@@ -1,31 +1,498 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VbenFormProps } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
 
+import { h, reactive } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
+import { Button, Popconfirm, Space, Switch } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as PayApi from '#/api/pay/app';
 import { DocAlert } from '#/components/doc-alert';
+import { PayChannelEnum } from '#/utils/constants';
+
+import { columns, querySchema } from './data';
+import appFrom from './modules/app-form.vue';
+import aliPayFrom from './modules/channel/alipay-channel-form.vue';
+import mockFrom from './modules/channel/mock-channel-form.vue';
+import walletFrom from './modules/channel/wallet-channel-form.vue';
+import weixinFrom from './modules/channel/weixin-channel-form.vue';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 100,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
+  // 不需要直接删除
+  // fieldMappingTime: [
+  //  [
+  //    'createTime',
+  //    ['params[beginTime]', 'params[endTime]'],
+  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+  //  ],
+  // ],
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await PayApi.getAppPage({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'pay-app-index',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [AppModal, modalApi] = useVbenModal({
+  connectedComponent: appFrom,
+});
+
+const [AliPayModal, modalAliPayApi] = useVbenModal({
+  connectedComponent: aliPayFrom,
+});
+
+const [MockModal, modalMockApi] = useVbenModal({
+  connectedComponent: mockFrom,
+});
+
+const [WalletModal, modalWalletApi] = useVbenModal({
+  connectedComponent: walletFrom,
+});
+
+const [WeixinModal, modalWeixinApi] = useVbenModal({
+  connectedComponent: weixinFrom,
+});
+
+const handleAdd = () => {
+  modalApi.setData({});
+  modalApi.open();
+};
+
+const handleEdit = (row: Required<PayApi.PayAppApi.App>) => {
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+};
+
+const handleDelete = async (row: Required<PayApi.PayAppApi.App>) => {
+  await PayApi.deleteApp(row.id);
+  tableApi.query();
+};
+
+/**
+ * 根据渠道编码判断渠道列表中是否存在
+ *
+ * @param channels 渠道列表
+ * @param channelCode 渠道编码
+ */
+const isChannelExists = (channels: string[], channelCode: string) => {
+  if (!channels) {
+    return false;
+  }
+  return channels.includes(channelCode);
+};
+
+const channelParam = reactive({
+  appId: 0, // 应用 ID
+  payCode: '', // 渠道编码
+});
+
+const openChannelForm = async (row: PayApi.PayAppApi.App, payCode: string) => {
+  channelParam.appId = row.id || 0;
+  channelParam.payCode = payCode;
+  if (payCode.indexOf('alipay_') === 0) {
+    modalAliPayApi.setData({ id: row.id, payCode });
+    modalAliPayApi.open();
+    return;
+  }
+  if (payCode.indexOf('wx_') === 0) {
+    modalWeixinApi.setData({ id: row.id, payCode });
+    modalWeixinApi.open();
+    return;
+  }
+  if (payCode.indexOf('mock') === 0) {
+    modalMockApi.setData({ id: row.id, payCode });
+    modalMockApi.open();
+    return;
+  }
+  if (payCode.indexOf('wallet') === 0) {
+    modalWalletApi.setData({ id: row.id, payCode });
+    modalWalletApi.open();
+  }
+};
 </script>
 
 <template>
-  <Page>
+  <Page :auto-content-height="true">
     <DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
-    <Button
+    <BasicTable>
-      danger
+      <template #toolbar-tools>
-      type="link"
+        <Space>
-      target="_blank"
+          <a-button
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
+            type="primary"
-    >
+            v-access:code="['pay:app:create']"
-      该功能支持 Vue3 + element-plus 版本！
+            @click="handleAdd"
-    </Button>
+          >
-    <br />
+            {{ $t('ui.actionTitle.create', ['应用']) }}
-    <Button
+          </a-button>
-      type="link"
+        </Space>
-      target="_blank"
+      </template>
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/app/index"
+      <template #action="{ row }">
-    >
+        <Space>
-      可参考
+          <Button
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/app/index
+            v-access:code="['pay:app:update']"
-      代码，pull request 贡献给我们！
+            type="link"
-    </Button>
+            @click.stop="handleEdit(row)"
+          >
+            {{ $t('ui.actionTitle.edit') }}
+          </Button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            v-access:code="['pay:app:delete']"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <Button type="link" danger>
+              {{ $t('ui.actionTitle.delete') }}
+            </Button>
+          </Popconfirm>
+        </Space>
+      </template>
+      <template #status="{ row }">
+        <Switch
+          v-model:checked="row.status"
+          :checked-value="0"
+          :un-checked-value="1"
+        />
+      </template>
+      <template #alipayAppConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="
+              isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_APP.code)
+            "
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.ALIPAY_APP.code)"
+          />
+          <Button
+            v-else
+            size="small"
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.ALIPAY_APP.code)"
+          />
+        </div>
+      </template>
+      <template #alipayPCConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="
+              isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_PC.code)
+            "
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.ALIPAY_PC.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.ALIPAY_PC.code)"
+          />
+        </div>
+      </template>
+      <template #alipayWAPConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="
+              isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_WAP.code)
+            "
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.ALIPAY_WAP.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.ALIPAY_WAP.code)"
+          />
+        </div>
+      </template>
+      <template #alipayQrConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="
+              isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_QR.code)
+            "
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.ALIPAY_QR.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.ALIPAY_QR.code)"
+          />
+        </div>
+      </template>
+      <template #alipayBarConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="
+              isChannelExists(row.channelCodes, PayChannelEnum.ALIPAY_BAR.code)
+            "
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.ALIPAY_BAR.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.ALIPAY_BAR.code)"
+          />
+        </div>
+      </template>
+      <template #wxLiteConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="
+              isChannelExists(row.channelCodes, PayChannelEnum.WX_LITE.code)
+            "
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_LITE.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_LITE.code)"
+          />
+        </div>
+      </template>
+      <template #wxPubConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_PUB.code)"
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_PUB.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_PUB.code)"
+          />
+        </div>
+      </template>
+      <template #wxAppConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_APP.code)"
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_APP.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_APP.code)"
+          />
+        </div>
+      </template>
+      <template #wxNativeConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="
+              isChannelExists(row.channelCodes, PayChannelEnum.WX_NATIVE.code)
+            "
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_NATIVE.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_NATIVE.code)"
+          />
+        </div>
+      </template>
+      <template #wxWapConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_WAP.code)"
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_WAP.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_WAP.code)"
+          />
+        </div>
+      </template>
+      <template #wxBarConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="isChannelExists(row.channelCodes, PayChannelEnum.WX_BAR.code)"
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_BAR.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WX_BAR.code)"
+          />
+        </div>
+      </template>
+      <template #walletConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="isChannelExists(row.channelCodes, PayChannelEnum.WALLET.code)"
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WALLET.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.WALLET.code)"
+          />
+        </div>
+      </template>
+      <template #mockConfig="{ row }">
+        <div>
+          <Button
+            size="small"
+            v-if="isChannelExists(row.channelCodes, PayChannelEnum.MOCK.code)"
+            type="primary"
+            :icon="h(CheckOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.MOCK.code)"
+          />
+          <Button
+            size="small"
+            v-else
+            type="primary"
+            danger
+            :icon="h(CloseOutlined)"
+            shape="circle"
+            @click="openChannelForm(row, PayChannelEnum.MOCK.code)"
+          />
+        </div>
+      </template>
+    </BasicTable>
+    <AppModal @reload="tableApi.query()" />
+    <AliPayModal @reload="tableApi.query()" />
+    <MockModal @reload="tableApi.query()" />
+    <WalletModal @reload="tableApi.query()" />
+    <WeixinModal @reload="tableApi.query()" />
   </Page>
 </template>

apps/web-antd/src/views/pay/app/modules/app-form.vue

@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import * as PayApi from '#/api/pay/app';
+
+import { modalSchema } from '../data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value
+    ? $t('ui.actionTitle.edit', '应用')
+    : $t('ui.actionTitle.create', '应用');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 160,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as {
+      id?: number;
+    };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      const record = await PayApi.getApp(id);
+      await formApi.setValues(record);
+    }
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.modalLoading(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues()) as PayApi.PayAppApi.App;
+    await (isUpdate.value ? PayApi.updateApp(data) : PayApi.createApp(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+</script>
+<template>
+  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
+    <BasicForm />
+  </BasicModal>
+</template>

apps/web-antd/src/views/pay/app/modules/channel/alipay-channel-form.vue

@@ -0,0 +1,163 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { Row, Space, Textarea } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import * as ChannelApi from '#/api/pay/channel';
+import { FileUpload } from '#/components/upload';
+
+import { modalAliPaySchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value
+    ? $t('ui.actionTitle.edit', '应用')
+    : $t('ui.actionTitle.create', '应用');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 160,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: modalAliPaySchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id, payCode } = modalApi.getData() as {
+      id?: number;
+      payCode?: string;
+    };
+
+    if (id && payCode) {
+      const record = await ChannelApi.getChannel(id, payCode);
+      isUpdate.value = !!record;
+      record.code = payCode;
+      if (isUpdate.value) {
+        record.config = JSON.parse(record.config);
+        await formApi.setValues(record);
+      }
+    }
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.modalLoading(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(
+      await formApi.getValues(),
+    ) as ChannelApi.PayChannelApi.Channel;
+    data.config = JSON.stringify(data.config);
+    await (isUpdate.value
+      ? ChannelApi.updateChannel(data)
+      : ChannelApi.createChannel(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+</script>
+<template>
+  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
+    <BasicForm>
+      <template #appCertContent="slotProps">
+        <Space style="width: 100%" direction="vertical">
+          <Row>
+            <Textarea
+              v-bind="slotProps"
+              :rows="8"
+              placeholder="请上传商户公钥应用证书"
+            />
+          </Row>
+          <Row>
+            <FileUpload
+              :accept="['crt']"
+              @return-text="
+                (text: string) => {
+                  slotProps.setValue(text);
+                }
+              "
+            />
+          </Row>
+        </Space>
+      </template>
+      <template #alipayPublicCertContent="slotProps">
+        <Space style="width: 100%" direction="vertical">
+          <Row>
+            <Textarea
+              v-bind="slotProps"
+              :rows="8"
+              placeholder="请上传支付宝公钥证书"
+            />
+          </Row>
+          <Row>
+            <FileUpload
+              :accept="['.crt']"
+              @return-text="
+                (text: string) => {
+                  slotProps.setValue(text);
+                }
+              "
+            />
+          </Row>
+        </Space>
+      </template>
+      <template #rootCertContent="slotProps">
+        <Space style="width: 100%" direction="vertical">
+          <Row>
+            <Textarea v-bind="slotProps" :rows="8" placeholder="请上传根证书" />
+          </Row>
+          <Row>
+            <FileUpload
+              :accept="['.crt']"
+              @return-text="
+                (text: string) => {
+                  slotProps.setValue(text);
+                }
+              "
+            />
+          </Row>
+        </Space>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>

apps/web-antd/src/views/pay/app/modules/channel/data.ts

@@ -0,0 +1,456 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+
+export const modalAliPaySchema: FormSchemaGetter = () => [
+  {
+    label: '商户编号',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '应用编号',
+    fieldName: 'appId',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '渠道编码',
+    fieldName: 'code',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '渠道费率',
+    fieldName: 'feeRate',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入渠道费率',
+    },
+  },
+  {
+    label: '开放平台 APPID',
+    fieldName: 'config.appId',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入开放平台 APPID',
+    },
+  },
+  {
+    label: '渠道状态',
+    fieldName: 'status',
+    component: 'RadioGroup',
+    rules: 'required',
+    componentProps: {
+      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+    },
+    defaultValue: 1,
+  },
+  {
+    label: '网关地址',
+    fieldName: 'config.serverUrl',
+    component: 'RadioGroup',
+    rules: 'required',
+    componentProps: {
+      options: [
+        {
+          value: 'https://openapi.alipay.com/gateway.do',
+          label: '线上环境',
+        },
+        {
+          value: 'https://openapi-sandbox.dl.alipaydev.com/gateway.do',
+          label: '沙箱环境',
+        },
+      ],
+    },
+  },
+  {
+    label: '算法类型',
+    fieldName: 'config.signType',
+    component: 'RadioGroup',
+    rules: 'required',
+    componentProps: {
+      options: [
+        {
+          value: 'RSA2',
+          label: 'RSA2',
+        },
+      ],
+    },
+    defaultValue: 'RSA2',
+  },
+  {
+    label: '公钥类型',
+    fieldName: 'config.mode',
+    component: 'RadioGroup',
+    rules: 'required',
+    componentProps: {
+      options: [
+        {
+          value: 0,
+          label: '公钥模式',
+        },
+        {
+          value: 1,
+          label: '证书模式',
+        },
+      ],
+    },
+  },
+  {
+    label: '应用私钥',
+    fieldName: 'config.privateKey',
+    component: 'Textarea',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入应用私钥',
+      rows: 8,
+    },
+    dependencies: {
+      show(values) {
+        return values.config.mode !== undefined;
+      },
+      triggerFields: ['config'],
+    },
+  },
+  {
+    label: '支付宝公钥',
+    fieldName: 'config.alipayPublicKey',
+    component: 'Textarea',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入支付宝公钥',
+      rows: 8,
+    },
+    dependencies: {
+      show(values) {
+        return values?.config?.mode === 0;
+      },
+      triggerFields: ['config.mode', 'mode', 'config'],
+    },
+  },
+  {
+    label: '商户公钥应用证书',
+    fieldName: 'config.appCertContent',
+    slotName: 'appCertContent',
+    component: 'Textarea',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请上传商户公钥应用证书',
+      rows: 8,
+    },
+    dependencies: {
+      show(values) {
+        return values?.config?.mode === 1;
+      },
+      triggerFields: ['config.mode', 'mode', 'config'],
+    },
+  },
+  {
+    label: '支付宝公钥证书',
+    fieldName: 'config.alipayPublicCertContent',
+    slotName: 'alipayPublicCertContent',
+    component: 'Textarea',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请上传支付宝公钥证书',
+      rows: 8,
+    },
+    dependencies: {
+      show(values) {
+        return values?.config?.mode === 1;
+      },
+      triggerFields: ['config.mode', 'mode', 'config'],
+    },
+  },
+  {
+    label: '根证书',
+    fieldName: 'config.rootCertContent',
+    slotName: 'rootCertContent',
+    component: 'Textarea',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请上传根证书',
+      rows: 8,
+    },
+    dependencies: {
+      show(values) {
+        return values?.config?.mode === 1;
+      },
+      triggerFields: ['config.mode', 'mode', 'config'],
+    },
+  },
+  {
+    label: '接口内容加密方式',
+    fieldName: 'config.encryptType',
+    component: 'RadioGroup',
+    rules: 'required',
+    componentProps: {
+      options: [
+        {
+          value: 'NONE',
+          label: '无加密',
+        },
+        {
+          value: 'AES',
+          label: 'AES',
+        },
+      ],
+    },
+    defaultValue: 'NONE',
+  },
+  {
+    label: '备注',
+    fieldName: 'remark',
+    component: 'Textarea',
+    componentProps: {
+      rows: 3,
+      placeholder: '请输入备注',
+    },
+  },
+];
+
+export const modalMockSchema: FormSchemaGetter = () => [
+  {
+    label: '商户编号',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '应用编号',
+    fieldName: 'appId',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '渠道状态',
+    fieldName: 'status',
+    component: 'RadioGroup',
+    rules: 'required',
+    componentProps: {
+      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+    },
+    defaultValue: 1,
+  },
+  {
+    label: '渠道编码',
+    fieldName: 'code',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '渠道费率',
+    fieldName: 'feeRate',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入渠道费率',
+    },
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '备注',
+    fieldName: 'remark',
+    component: 'Textarea',
+    componentProps: {
+      rows: 3,
+      placeholder: '请输入备注',
+    },
+  },
+];
+
+export const modalWeixinSchema: FormSchemaGetter = () => [
+  {
+    label: '商户编号',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '应用编号',
+    fieldName: 'appId',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '渠道编码',
+    fieldName: 'code',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '渠道费率',
+    fieldName: 'feeRate',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入渠道费率',
+    },
+  },
+  {
+    label: '微信 APPID',
+    fieldName: 'config.appId',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入微信 APPID',
+    },
+  },
+  {
+    label: '商户号',
+    fieldName: 'config.mchId',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入商户号',
+    },
+  },
+  {
+    label: '渠道状态',
+    fieldName: 'status',
+    component: 'RadioGroup',
+    rules: 'required',
+    componentProps: {
+      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+    },
+    defaultValue: 1,
+  },
+  {
+    label: 'API 版本',
+    fieldName: 'config.apiVersion',
+    component: 'RadioGroup',
+    rules: 'required',
+    componentProps: {
+      options: [
+        {
+          label: 'v2',
+          value: 'v2',
+        },
+        {
+          label: 'v3',
+          value: 'v3',
+        },
+      ],
+    },
+  },
+  {
+    label: '商户密钥',
+    fieldName: 'config.mchKey',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入商户密钥',
+    },
+    dependencies: {
+      show(values) {
+        return values?.config?.apiVersion === 'v2';
+      },
+      triggerFields: ['config.mode', 'mode', 'config'],
+    },
+  },
+  {
+    label: 'apiclient_cert.p12 证书',
+    fieldName: 'config.keyContent',
+    slotName: 'keyContent',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请上传 apiclient_cert.p12 证书',
+    },
+    dependencies: {
+      show(values) {
+        return values?.config?.apiVersion === 'v2';
+      },
+      triggerFields: ['config.mode', 'mode', 'config'],
+    },
+  },
+  {
+    label: 'API V3 密钥',
+    fieldName: 'config.apiV3Key',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入 API V3 密钥',
+    },
+    dependencies: {
+      show(values) {
+        return values?.config?.apiVersion === 'v3';
+      },
+      triggerFields: ['config.mode', 'mode', 'config'],
+    },
+  },
+  {
+    label: 'apiclient_key.pem 证书',
+    fieldName: 'config.privateKeyContent',
+    slotName: 'privateKeyContent',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请上传 apiclient_key.pem 证书',
+    },
+    dependencies: {
+      show(values) {
+        return values?.config?.apiVersion === 'v3';
+      },
+      triggerFields: ['config.mode', 'mode', 'config'],
+    },
+  },
+  {
+    label: '证书序列号',
+    fieldName: 'config.certSerialNo',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入证书序列号',
+    },
+    dependencies: {
+      show(values) {
+        return values?.config?.apiVersion === 'v3';
+      },
+      triggerFields: ['config.mode', 'mode', 'config'],
+    },
+  },
+  {
+    label: '备注',
+    fieldName: 'remark',
+    component: 'Textarea',
+    componentProps: {
+      rows: 3,
+      placeholder: '请输入备注',
+    },
+  },
+];

apps/web-antd/src/views/pay/app/modules/channel/mock-channel-form.vue

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import * as ChannelApi from '#/api/pay/channel';
+
+import { modalMockSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value
+    ? $t('ui.actionTitle.edit', '应用')
+    : $t('ui.actionTitle.create', '应用');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 160,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: modalMockSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id, payCode } = modalApi.getData() as {
+      id?: number;
+      payCode?: string;
+    };
+
+    if (id && payCode) {
+      let record = await ChannelApi.getChannel(id, payCode);
+      isUpdate.value = !!record;
+      if (isUpdate.value) {
+        record.config = JSON.parse(record.config);
+      } else {
+        record = {
+          feeRate: 0,
+          code: payCode,
+          appId: id,
+        } as ChannelApi.PayChannelApi.Channel;
+      }
+      await formApi.setValues(record);
+    }
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.modalLoading(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(
+      await formApi.getValues(),
+    ) as ChannelApi.PayChannelApi.Channel;
+    data.config = JSON.stringify(data.config || { name: 'mock-conf' });
+    await (isUpdate.value
+      ? ChannelApi.updateChannel(data)
+      : ChannelApi.createChannel(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+</script>
+<template>
+  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
+    <BasicForm />
+  </BasicModal>
+</template>

apps/web-antd/src/views/pay/app/modules/channel/wallet-channel-form.vue

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import * as ChannelApi from '#/api/pay/channel';
+
+import { modalMockSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value
+    ? $t('ui.actionTitle.edit', '应用')
+    : $t('ui.actionTitle.create', '应用');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 160,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: modalMockSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id, payCode } = modalApi.getData() as {
+      id?: number;
+      payCode?: string;
+    };
+
+    if (id && payCode) {
+      let record = await ChannelApi.getChannel(id, payCode);
+      isUpdate.value = !!record;
+      if (isUpdate.value) {
+        record.config = JSON.parse(record.config);
+      } else {
+        record = {
+          feeRate: 0,
+          code: payCode,
+          appId: id,
+        } as ChannelApi.PayChannelApi.Channel;
+      }
+      await formApi.setValues(record);
+    }
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.modalLoading(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(
+      await formApi.getValues(),
+    ) as ChannelApi.PayChannelApi.Channel;
+    data.config = JSON.stringify(data.config || { name: 'mock-conf' });
+    await (isUpdate.value
+      ? ChannelApi.updateChannel(data)
+      : ChannelApi.createChannel(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+</script>
+<template>
+  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
+    <BasicForm />
+  </BasicModal>
+</template>

apps/web-antd/src/views/pay/app/modules/channel/weixin-channel-form.vue

@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { Row, Space, Textarea } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import * as ChannelApi from '#/api/pay/channel';
+import { FileUpload } from '#/components/upload';
+
+import { modalWeixinSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value
+    ? $t('ui.actionTitle.edit', '应用')
+    : $t('ui.actionTitle.create', '应用');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 160,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: modalWeixinSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id, payCode } = modalApi.getData() as {
+      id?: number;
+      payCode?: string;
+    };
+
+    if (id && payCode) {
+      const record =
+        (await ChannelApi.getChannel(id, payCode)) ||
+        ({} as ChannelApi.PayChannelApi.Channel);
+      isUpdate.value = !!record;
+      record.code = payCode;
+      if (isUpdate.value) {
+        record.config = JSON.parse(record.config);
+      }
+      await formApi.setValues(record);
+    }
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.modalLoading(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(
+      await formApi.getValues(),
+    ) as ChannelApi.PayChannelApi.Channel;
+    data.config = JSON.stringify(data.config);
+    await (isUpdate.value
+      ? ChannelApi.updateChannel(data)
+      : ChannelApi.createChannel(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+</script>
+<template>
+  <BasicModal :close-on-click-modal="false" :title="title" class="w-[40%]">
+    <BasicForm>
+      <template #keyContent="slotProps">
+        <Space style="width: 100%" direction="vertical">
+          <Row>
+            <Textarea
+              v-bind="slotProps"
+              :rows="8"
+              placeholder="请上传 apiclient_cert.p12 证书"
+            />
+          </Row>
+          <Row>
+            <FileUpload
+              :accept="['crt']"
+              @return-text="
+                (text: string) => {
+                  slotProps.setValue(text);
+                }
+              "
+            />
+          </Row>
+        </Space>
+      </template>
+      <template #privateKeyContent="slotProps">
+        <Space style="width: 100%" direction="vertical">
+          <Row>
+            <Textarea
+              v-bind="slotProps"
+              :rows="8"
+              placeholder="请上传 apiclient_key.pem 证书"
+            />
+          </Row>
+          <Row>
+            <FileUpload
+              :accept="['.crt']"
+              @return-text="
+                (text: string) => {
+                  slotProps.setValue(text);
+                }
+              "
+            />
+          </Row>
+        </Space>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>

apps/web-antd/src/views/pay/order/data.ts

@@ -0,0 +1,144 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'appId',
+    label: '应用编号',
+    componentProps: {
+      placeholder: '请输入应用编号',
+    },
+  },
+  {
+    component: 'Select',
+    fieldName: 'channelCode',
+    label: '支付渠道',
+    componentProps: {
+      placeholder: '请选择开启状态',
+      options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'merchantOrderId',
+    label: '商户单号',
+    componentProps: {
+      placeholder: '请输入商户单号',
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'no',
+    label: '支付单号',
+    componentProps: {
+      placeholder: '请输入支付单号',
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'channelOrderNo',
+    label: '渠道单号',
+    componentProps: {
+      placeholder: '请输入渠道单号',
+    },
+  },
+  {
+    component: 'Select',
+    fieldName: 'status',
+    label: '支付状态',
+    componentProps: {
+      placeholder: '请选择支付状态',
+      options: getDictOptions(DICT_TYPE.PAY_ORDER_STATUS, 'number'),
+    },
+  },
+  {
+    component: 'RangePicker',
+    fieldName: 'createTime',
+    label: '创建时间',
+    componentProps: {
+      placeholder: ['开始日期', '结束日期'],
+    },
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '编号',
+    field: 'id',
+  },
+  {
+    title: '支付金额',
+    field: 'price',
+    slots: {
+      default: ({ row }) => {
+        return `￥${(row.price || 0 / 100).toFixed(2)}`;
+      },
+    },
+  },
+  {
+    title: '退款金额',
+    field: 'refundPrice',
+    slots: {
+      default: ({ row }) => {
+        return `￥${(row.refundPrice || 0 / 100).toFixed(2)}`;
+      },
+    },
+  },
+  {
+    title: '手续金额',
+    field: 'channelFeePrice',
+    slots: {
+      default: ({ row }) => {
+        return `￥${(row.channelFeePrice || 0 / 100).toFixed(2)}`;
+      },
+    },
+  },
+  {
+    title: '订单号',
+    field: 'no',
+    slots: {
+      default: 'no',
+    },
+  },
+  {
+    title: '支付状态',
+    field: 'status',
+    cellRender: {
+      name: 'CellDict',
+      props: { type: DICT_TYPE.PAY_ORDER_STATUS },
+    },
+  },
+  {
+    title: '支付渠道',
+    field: 'channelCode',
+    cellRender: {
+      name: 'CellDict',
+      props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
+    },
+  },
+  {
+    title: '支付时间',
+    field: 'successTime',
+    minWidth: 180,
+    formatter: 'formatDateTime',
+  },
+  {
+    title: '支付应用',
+    field: 'appName',
+  },
+  {
+    title: '商品标题',
+    field: 'subject',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    minWidth: 80,
+  },
+];

apps/web-antd/src/views/pay/order/index.vue

@@ -1,13 +1,89 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VbenFormProps } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
 
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as OrderApi from '#/api/pay/order';
 import { DocAlert } from '#/components/doc-alert';
+
+import { columns, querySchema } from './data';
+import detailFrom from './modules/order-detail.vue';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 100,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
+  // 不需要直接删除
+  // fieldMappingTime: [
+  //  [
+  //    'createTime',
+  //    ['params[beginTime]', 'params[endTime]'],
+  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+  //  ],
+  // ],
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await OrderApi.getOrderPage({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'pay-order-index',
+};
+
+const [BasicTable] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [DetailModal, modalDetailApi] = useVbenModal({
+  connectedComponent: detailFrom,
+});
+
+const openDetail = (id: number) => {
+  modalDetailApi.setData({
+    id,
+  });
+  modalDetailApi.open();
+};
 </script>
 
 <template>
-  <Page>
+  <Page :auto-content-height="true">
     <DocAlert
       title="支付宝支付接入"
       url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
@@ -20,23 +96,29 @@ import { DocAlert } from '#/components/doc-alert';
       title="微信小程序支付接入"
       url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
     />
-    <Button
+    <BasicTable>
-      danger
+      <template #action="{ row }">
-      type="link"
+        <a-button
-      target="_blank"
+          type="link"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
+          v-access:code="['pay:order:query']"
-    >
+          @click="openDetail(row.id)"
-      该功能支持 Vue3 + element-plus 版本！
+        >
-    </Button>
+          {{ $t('ui.actionTitle.detail') }}
-    <br />
+        </a-button>
-    <Button
+      </template>
-      type="link"
+      <template #no="{ row }">
-      target="_blank"
+        <p class="order-font">
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/order/index"
+          <Tag size="small" color="blue"> 商户</Tag> {{ row.merchantOrderId }}
-    >
+        </p>
-      可参考
+        <p class="order-font" v-if="row.no">
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/pay/order/index
+          <Tag size="small" color="orange">支付</Tag> {{ row.no }}
-      代码，pull request 贡献给我们！
+        </p>
-    </Button>
+        <p class="order-font" v-if="row.channelOrderNo">
+          <Tag size="small" color="green">渠道</Tag>
+          {{ row.channelOrderNo }}
+        </p>
+      </template>
+    </BasicTable>
+    <DetailModal />
   </Page>
 </template>

apps/web-antd/src/views/pay/order/modules/order-detail.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { formatDateTime } from '@vben/utils';
+
+import { Descriptions, Divider, Tag } from 'ant-design-vue';
+
+import * as OrderApi from '#/api/pay/order';
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE } from '#/utils/dict';
+
+const detailData = ref<OrderApi.PayOrderApi.Order>();
+
+const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  showCancelButton: false,
+  showConfirmButton: false,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as {
+      id: number;
+    };
+
+    detailData.value = await OrderApi.getOrderDetail(id);
+
+    modalApi.modalLoading(false);
+  },
+});
+</script>
+<template>
+  <BasicModal :close-on-click-modal="false" title="订单详情" class="w-[700px]">
+    <Descriptions :column="2">
+      <Descriptions.Item label="商户单号">
+        {{ detailData?.merchantOrderId }}
+      </Descriptions.Item>
+      <Descriptions.Item label="支付单号">
+        {{ detailData?.no }}
+      </Descriptions.Item>
+      <Descriptions.Item label="应用编号">
+        {{ detailData?.appId }}
+      </Descriptions.Item>
+      <Descriptions.Item label="应用名称">
+        {{ detailData?.appName }}
+      </Descriptions.Item>
+      <Descriptions.Item label="支付状态">
+        <DictTag
+          size="small"
+          :type="DICT_TYPE.PAY_ORDER_STATUS"
+          :value="detailData?.status"
+        />
+      </Descriptions.Item>
+      <Descriptions.Item label="支付金额">
+        <Tag color="green" size="small">
+          ￥{{ (detailData?.price || 0 / 100.0).toFixed(2) }}
+        </Tag>
+      </Descriptions.Item>
+      <Descriptions.Item label="手续费">
+        <Tag color="orange" size="small">
+          ￥{{ (detailData?.channelFeePrice || 0 / 100.0).toFixed(2) }}
+        </Tag>
+      </Descriptions.Item>
+      <Descriptions.Item label="手续费比例">
+        {{ (detailData?.channelFeeRate || 0 / 100.0).toFixed(2) }}%
+      </Descriptions.Item>
+      <Descriptions.Item label="支付时间">
+        {{ formatDateTime(detailData?.successTime) }}
+      </Descriptions.Item>
+      <Descriptions.Item label="失效时间">
+        {{ formatDateTime(detailData?.expireTime) }}
+      </Descriptions.Item>
+      <Descriptions.Item label="创建时间">
+        {{ formatDateTime(detailData?.createTime) }}
+      </Descriptions.Item>
+      <Descriptions.Item label="更新时间">
+        {{ formatDateTime(detailData?.updateTime) }}
+      </Descriptions.Item>
+    </Descriptions>
+    <Divider />
+    <Descriptions :column="2">
+      <Descriptions.Item label="商品标题">
+        {{ detailData?.subject }}
+      </Descriptions.Item>
+      <Descriptions.Item label="商品描述">
+        {{ detailData?.body }}
+      </Descriptions.Item>
+      <Descriptions.Item label="支付渠道">
+        <DictTag
+          size="small"
+          :type="DICT_TYPE.PAY_CHANNEL_CODE"
+          :value="detailData?.channelCode"
+        />
+      </Descriptions.Item>
+      <Descriptions.Item label="支付 IP">
+        {{ detailData?.userIp }}
+      </Descriptions.Item>
+      <Descriptions.Item label="渠道单号">
+        <Tag size="small" color="green" v-if="detailData?.channelOrderNo">
+          {{ detailData?.channelOrderNo }}
+        </Tag>
+      </Descriptions.Item>
+      <Descriptions.Item label="渠道用户">
+        {{ detailData?.channelUserId }}
+      </Descriptions.Item>
+      <Descriptions.Item label="退款金额" :span="2">
+        <Tag size="small" color="red">
+          ￥{{ (detailData?.refundPrice || 0 / 100.0).toFixed(2) }}
+        </Tag>
+      </Descriptions.Item>
+      <Descriptions.Item label="通知 URL">
+        {{ detailData?.notifyUrl }}
+      </Descriptions.Item>
+    </Descriptions>
+    <Divider />
+    <Descriptions :column="1">
+      <Descriptions.Item label="支付通道异步回调内容">
+        {{ detailData?.channelNotifyData }}
+      </Descriptions.Item>
+    </Descriptions>
+  </BasicModal>
+</template>

apps/web-ele/src/adapter/form.ts

@@ -8,56 +8,55 @@ import type { ComponentType } from './component';
 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-/** 手机号正则表达式（中国） */
 const MOBILE_REGEX = /(?:0|86|\+86)?1[3-9]\d{9}/;
 
-setupVbenForm<ComponentType>({
+async function initSetupVbenForm() {
-  config: {
+  setupVbenForm<ComponentType>({
-    modelPropNameMap: {
+    config: {
-      Upload: 'fileList',
+      modelPropNameMap: {
-      CheckboxGroup: 'model-value',
+        Upload: 'fileList',
+        CheckboxGroup: 'model-value',
+      },
     },
-  },
+    defineRules: {
-  defineRules: {
+      required: (value, _params, ctx) => {
-    // 输入项目必填国际化适配
+        if (value === undefined || value === null || value.length === 0) {
-    required: (value, _params, ctx) => {
+          return $t('ui.formRules.required', [ctx.label]);
-      if (value === undefined || value === null || value.length === 0) {
+        }
-        return $t('ui.formRules.required', [ctx.label]);
-      }
-      return true;
-    },
-    // 选择项目必填国际化适配
-    selectRequired: (value, _params, ctx) => {
-      if (value === undefined || value === null) {
-        return $t('ui.formRules.selectRequired', [ctx.label]);
-      }
-      return true;
-    },
-    // 手机号非必填
-    mobile: (value, _params, ctx) => {
-      if (value === undefined || value === null || value.length === 0) {
         return true;
-      } else if (!MOBILE_REGEX.test(value)) {
+      },
-        return $t('ui.formRules.mobile', [ctx.label]);
+      selectRequired: (value, _params, ctx) => {
-      }
+        if (value === undefined || value === null) {
-      return true;
+          return $t('ui.formRules.selectRequired', [ctx.label]);
+        }
+        return true;
+      },
+      // 手机号非必填
+      mobile: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return true;
+        } else if (!MOBILE_REGEX.test(value)) {
+          return $t('ui.formRules.mobile', [ctx.label]);
+        }
+        return true;
+      },
+      // 手机号必填
+      mobileRequired: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
+        }
+        if (!MOBILE_REGEX.test(value)) {
+          return $t('ui.formRules.mobile', [ctx.label]);
+        }
+        return true;
+      },
     },
-    // 手机号必填
+  });
-    mobileRequired: (value, _params, ctx) => {
+}
-      if (value === undefined || value === null || value.length === 0) {
-        return $t('ui.formRules.required', [ctx.label]);
-      }
-      if (!MOBILE_REGEX.test(value)) {
-        return $t('ui.formRules.mobile', [ctx.label]);
-      }
-      return true;
-    },
-  },
-});
 
 const useVbenForm = useForm<ComponentType>;
 
-export { useVbenForm, z };
+export { initSetupVbenForm, useVbenForm, z };
 
 export type VbenFormSchema = FormSchema<ComponentType>;
 export type { VbenFormProps };

apps/web-ele/src/bootstrap.ts

@@ -14,12 +14,17 @@ import { $t, setupI18n } from '#/locales';
 import { setupFormCreate } from '#/plugins/form-create';
 
 import { initComponentAdapter } from './adapter/component';
+import { initSetupVbenForm } from './adapter/form';
 import App from './app.vue';
 import { router } from './router';
 
 async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
+
+  // 初始化表单组件
+  await initSetupVbenForm();
+
   // // 设置弹窗的默认配置
   // setDefaultModalProps({
   //   fullscreenButton: false,

apps/web-ele/src/views/infra/codegen/modules/preview-code.vue

@@ -273,9 +273,8 @@ const [Modal, modalApi] = useVbenModal({
             <div
               class="h-full rounded-md bg-gray-50 !p-0 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
             >
-              <!-- eslint-disable-next-line vue/no-v-html -->
               <code
-                v-html="codeMap.get(activeKey)"
+                v-dompurify-html="codeMap.get(activeKey)"
                 class="code-highlight"
               ></code>
             </div>

apps/web-naive/src/adapter/form.ts

@@ -8,58 +8,59 @@ import type { ComponentType } from './component';
 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-/** 手机号正则表达式（中国） */
 const MOBILE_REGEX = /(?:0|86|\+86)?1[3-9]\d{9}/;
 
-setupVbenForm<ComponentType>({
+async function initSetupVbenForm() {
-  config: {
+  setupVbenForm<ComponentType>({
-    // naive-ui组件的空值为null,不能是undefined，否则重置表单时不生效
+    config: {
-    emptyStateValue: null,
+      // naive-ui组件的空值为null,不能是undefined，否则重置表单时不生效
-    baseModelPropName: 'value',
+      emptyStateValue: null,
-    modelPropNameMap: {
+      baseModelPropName: 'value',
-      Checkbox: 'checked',
+      modelPropNameMap: {
-      Radio: 'checked',
+        Checkbox: 'checked',
-      Upload: 'fileList',
+        Radio: 'checked',
+        Upload: 'fileList',
+      },
     },
-  },
+    defineRules: {
-  defineRules: {
+      required: (value, _params, ctx) => {
-    required: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
-      if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
-        return $t('ui.formRules.required', [ctx.label]);
+        }
-      }
-      return true;
-    },
-    selectRequired: (value, _params, ctx) => {
-      if (value === undefined || value === null) {
-        return $t('ui.formRules.selectRequired', [ctx.label]);
-      }
-      return true;
-    },
-    // 手机号非必填
-    mobile: (value, _params, ctx) => {
-      if (value === undefined || value === null || value.length === 0) {
         return true;
-      } else if (!MOBILE_REGEX.test(value)) {
+      },
-        return $t('ui.formRules.phone', [ctx.label]);
+      selectRequired: (value, _params, ctx) => {
-      }
+        if (value === undefined || value === null) {
-      return true;
+          return $t('ui.formRules.selectRequired', [ctx.label]);
+        }
+        return true;
+      },
+      // 手机号非必填
+      mobile: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return true;
+        } else if (!MOBILE_REGEX.test(value)) {
+          return $t('ui.formRules.mobile', [ctx.label]);
+        }
+        return true;
+      },
+      // 手机号必填
+      mobileRequired: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
+        }
+        if (!MOBILE_REGEX.test(value)) {
+          return $t('ui.formRules.mobile', [ctx.label]);
+        }
+        return true;
+      },
     },
-    // 手机号必填
+  });
-    mobileRequired: (value, _params, ctx) => {
+}
-      if (value === undefined || value === null || value.length === 0) {
-        return $t('ui.formRules.required', [ctx.label]);
-      }
-      if (!MOBILE_REGEX.test(value)) {
-        return $t('ui.formRules.phone', [ctx.label]);
-      }
-      return true;
-    },
-  },
-});
 
 const useVbenForm = useForm<ComponentType>;
 
-export { useVbenForm, z };
+export { initSetupVbenForm, useVbenForm, z };
 
 export type VbenFormSchema = FormSchema<ComponentType>;
 export type { VbenFormProps };

apps/web-naive/src/bootstrap.ts

@@ -12,12 +12,16 @@ import { useTitle } from '@vueuse/core';
 import { $t, setupI18n } from '#/locales';
 
 import { initComponentAdapter } from './adapter/component';
+import { initSetupVbenForm } from './adapter/form';
 import App from './app.vue';
 import { router } from './router';
 
 async function bootstrap(namespace: string) {
   // 初始化组件适配器
-  initComponentAdapter();
+  await initComponentAdapter();
+
+  // 初始化表单组件
+  await initSetupVbenForm();
 
   // // 设置弹窗的默认配置
   // setDefaultModalProps({

apps/web-naive/src/views/infra/codegen/modules/preview-code.vue

@@ -255,9 +255,8 @@ const [Modal, modalApi] = useVbenModal({
             <div
               class="h-full rounded-md bg-gray-50 !p-0 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
             >
-              <!-- eslint-disable-next-line vue/no-v-html -->
               <code
-                v-html="codeMap.get(activeKey)"
+                v-dompurify-html="codeMap.get(activeKey)"
                 class="code-highlight"
               ></code>
             </div>

docs/src/components/common-ui/vben-ellipsis-text.md

@@ -26,6 +26,12 @@ outline: deep
 
 <DemoPreview dir="demos/vben-ellipsis-text/tooltip" />
 
+## 自动显示 tooltip
+
+通过`tooltip-when-ellipsis`设置，仅在文本长度超出导致省略号出现时才触发 tooltip。
+
+<DemoPreview dir="demos/vben-ellipsis-text/auto-display" />
+
 ## API
 
 ### Props
@@ -37,6 +43,8 @@ outline: deep
 | maxWidth | 文本区域最大宽度 | `number \| string` | `'100%'` |
 | placement | 提示浮层的位置 | `'bottom'\|'left'\|'right'\|'top'` | `'top'` |
 | tooltip | 启用文本提示 | `boolean` | `true` |
+| tooltipWhenEllipsis | 内容超出，自动启用文本提示 | `boolean` | `false` |
+| ellipsisThreshold | 设置 tooltipWhenEllipsis 后才生效，文本截断检测的像素差异阈值，越大则判断越严格，如果碰见异常情况可以自己设置阈值 | `number` | `3` |
 | tooltipBackgroundColor | 提示文本的背景颜色 | `string` | - |
 | tooltipColor | 提示文本的颜色 | `string` | - |
 | tooltipFontSize | 提示文本的大小 | `string` | - |

docs/src/components/common-ui/vben-form.md

@@ -557,4 +557,16 @@ import { z } from '#/adapter/form';
 
 除了以上内置插槽之外，`schema`属性中每个字段的`fieldName`都可以作为插槽名称，这些字段插槽的优先级高于`component`定义的组件。也就是说，当提供了与`fieldName`同名的插槽时，这些插槽的内容将会作为这些字段的组件，此时`component`的值将会被忽略。
 
+如果需要使用自定义的插槽名而不是使用`fieldName`，可以在schema中添加`slotName`属性。当提供了`slotName`属性时，将优先使用`slotName`作为插槽名。
+
+```ts
+// 使用自定义插槽名的例子
+{
+  component: 'Textarea',
+  fieldName: 'config.appCertContent',
+  slotName: 'appCertSlot',
+  label: '商户公钥应用证书',
+}
+```
+
 :::

docs/src/demos/vben-ellipsis-text/auto-display/index.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { EllipsisText } from '@vben/common-ui';
+
+const text = `
+Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
+`;
+</script>
+<template>
+  <EllipsisText :line="2" :tooltip-when-ellipsis="true">
+    {{ text }}
+  </EllipsisText>
+
+  <EllipsisText :line="3" :tooltip-when-ellipsis="true">
+    {{ text }}
+  </EllipsisText>
+</template>

docs/src/en/guide/essentials/settings.md

@@ -238,6 +238,7 @@ const defaultPreferences: Preferences = {
   },
   logo: {
     enable: true,
+    fit: 'contain',
     source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
   },
   navigation: {
@@ -431,6 +432,8 @@ interface HeaderPreferences {
 interface LogoPreferences {
   /** Whether the logo is visible */
   enable: boolean;
+  /** Logo image fitting method */
+  fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   /** Logo URL */
   source: string;
 }

docs/src/guide/essentials/settings.md

@@ -237,6 +237,7 @@ const defaultPreferences: Preferences = {
   },
   logo: {
     enable: true,
+    fit: 'contain',
     source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
   },
   navigation: {
@@ -431,6 +432,8 @@ interface HeaderPreferences {
 interface LogoPreferences {
   /** logo是否可见 */
   enable: boolean;
+  /** logo图片适应方式 */
+  fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   /** logo地址 */
   source: string;
 }

packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap

@@ -61,6 +61,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
   },
   "logo": {
     "enable": true,
+    "fit": "contain",
     "source": "https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp",
   },
   "navigation": {

packages/@core/preferences/src/config.ts

@@ -62,6 +62,7 @@ const defaultPreferences: Preferences = {
 
   logo: {
     enable: true,
+    fit: 'contain',
     source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
   },
   navigation: {

packages/@core/preferences/src/types.ts

@@ -134,6 +134,8 @@ interface HeaderPreferences {
 interface LogoPreferences {
   /** logo是否可见 */
   enable: boolean;
+  /** logo图片适应方式 */
+  fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   /** logo地址 */
   source: string;
 }

packages/@core/ui-kit/form-ui/src/form-api.ts

@@ -11,7 +11,7 @@ import type { Recordable } from '@vben-core/typings';
 
 import type { FormActions, FormSchema, VbenFormProps } from './types';
 
-import { toRaw } from 'vue';
+import { isRef, toRaw } from 'vue';
 
 import { Store } from '@vben-core/shared/store';
 import {
@@ -100,9 +100,26 @@ export class FormApi {
   getFieldComponentRef<T = ComponentPublicInstance>(
     fieldName: string,
   ): T | undefined {
-    return this.componentRefMap.has(fieldName)
+    let target = this.componentRefMap.has(fieldName)
-      ? (this.componentRefMap.get(fieldName) as T)
+      ? (this.componentRefMap.get(fieldName) as ComponentPublicInstance)
       : undefined;
+    if (
+      target &&
+      target.$.type.name === 'AsyncComponentWrapper' &&
+      target.$.subTree.ref
+    ) {
+      if (Array.isArray(target.$.subTree.ref)) {
+        if (
+          target.$.subTree.ref.length > 0 &&
+          isRef(target.$.subTree.ref[0]?.r)
+        ) {
+          target = target.$.subTree.ref[0]?.r.value as ComponentPublicInstance;
+        }
+      } else if (isRef(target.$.subTree.ref.r)) {
+        target = target.$.subTree.ref.r.value as ComponentPublicInstance;
+      }
+    }
+    return target as T;
   }
 
   /**

packages/@core/ui-kit/form-ui/src/form-render/form.vue

@@ -155,7 +155,11 @@ const computedSchema = computed(
           :rules="cSchema.rules"
         >
           <template #default="slotProps">
-            <slot v-bind="slotProps" :name="cSchema.fieldName"> </slot>
+            <slot
+              v-bind="slotProps"
+              :name="cSchema.slotName || cSchema.fieldName"
+            >
+            </slot>
           </template>
         </FormField>
       </template>

packages/@core/ui-kit/form-ui/src/types.ts

@@ -263,6 +263,8 @@ export interface FormSchema<
   renderComponentContent?: RenderComponentContentType;
   /** 字段规则 */
   rules?: FormSchemaRuleType;
+  /** 自定义插槽名，如果不指定则使用fieldName */
+  slotName?: string;
   /** 后缀 */
   suffix?: CustomRenderType;
 }

packages/@core/ui-kit/form-ui/src/use-form-context.ts

@@ -10,7 +10,7 @@ import { createContext } from '@vben-core/shadcn-ui';
 import { isString, mergeWithArrayOverride, set } from '@vben-core/shared/utils';
 
 import { useForm } from 'vee-validate';
-import { object } from 'zod';
+import { object, ZodIntersection, ZodNumber, ZodObject, ZodString } from 'zod';
 import { getDefaultsForSchema } from 'zod-defaults';
 
 type ExtendFormProps = VbenFormProps & { formApi: ExtendedFormApi };
@@ -52,7 +52,12 @@ export function useFormInitial(
       if (Reflect.has(item, 'defaultValue')) {
         set(initialValues, item.fieldName, item.defaultValue);
       } else if (item.rules && !isString(item.rules)) {
+        // 检查规则是否适合提取默认值
+        const customDefaultValue = getCustomDefaultValue(item.rules);
         zodObject[item.fieldName] = item.rules;
+        if (customDefaultValue !== undefined) {
+          initialValues[item.fieldName] = customDefaultValue;
+        }
       }
     });
 
@@ -64,6 +69,38 @@ export function useFormInitial(
     }
     return mergeWithArrayOverride(initialValues, zodDefaults);
   }
+  // 自定义默认值提取逻辑
+  function getCustomDefaultValue(rule: any): any {
+    if (rule instanceof ZodString) {
+      return ''; // 默认为空字符串
+    } else if (rule instanceof ZodNumber) {
+      return null; // 默认为 null（避免显示 0）
+    } else if (rule instanceof ZodObject) {
+      // 递归提取嵌套对象的默认值
+      const defaultValues: Record<string, any> = {};
+      for (const [key, valueSchema] of Object.entries(rule.shape)) {
+        defaultValues[key] = getCustomDefaultValue(valueSchema);
+      }
+      return defaultValues;
+    } else if (rule instanceof ZodIntersection) {
+      // 对于交集类型，从schema 提取默认值
+      const leftDefaultValue = getCustomDefaultValue(rule._def.left);
+      const rightDefaultValue = getCustomDefaultValue(rule._def.right);
+
+      // 如果左右两边都能提取默认值，合并它们
+      if (
+        typeof leftDefaultValue === 'object' &&
+        typeof rightDefaultValue === 'object'
+      ) {
+        return { ...leftDefaultValue, ...rightDefaultValue };
+      }
+
+      // 否则优先使用左边的默认值
+      return leftDefaultValue ?? rightDefaultValue;
+    } else {
+      return undefined; // 其他类型不提供默认值
+    }
+  }
 
   return {
     delegatedSlots,

packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts

@@ -124,6 +124,14 @@ export class ModalApi {
     return this.setState({ submitting: isLocked });
   }
 
+  modalLoading(loading: boolean) {
+    this.store.setState((prev) => ({
+      ...prev,
+      confirmLoading: loading,
+      loading,
+    }));
+  }
+
   /**
    * 取消操作
    */

packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue

@@ -5,6 +5,8 @@ import type {
   AvatarRootProps,
 } from 'radix-vue';
 
+import type { CSSProperties } from 'vue';
+
 import type { ClassType } from '@vben-core/typings';
 
 import { computed } from 'vue';
@@ -16,6 +18,7 @@ interface Props extends AvatarFallbackProps, AvatarImageProps, AvatarRootProps {
   class?: ClassType;
   dot?: boolean;
   dotClass?: ClassType;
+  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   size?: number;
 }
 
@@ -28,6 +31,15 @@ const props = withDefaults(defineProps<Props>(), {
   as: 'button',
   dot: false,
   dotClass: 'bg-green-500',
+  fit: 'cover',
+});
+
+const imageStyle = computed<CSSProperties>(() => {
+  const { fit } = props;
+  if (fit) {
+    return { objectFit: fit };
+  }
+  return {};
 });
 
 const text = computed(() => {
@@ -51,7 +63,7 @@ const rootStyle = computed(() => {
     class="relative flex flex-shrink-0 items-center"
   >
     <Avatar :class="props.class" class="size-full">
-      <AvatarImage :alt="alt" :src="src" />
+      <AvatarImage :alt="alt" :src="src" :style="imageStyle" />
       <AvatarFallback>{{ text }}</AvatarFallback>
     </Avatar>
     <span

packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue

@@ -6,6 +6,10 @@ interface Props {
    * @zh_CN 是否收起文本
    */
   collapsed?: boolean;
+  /**
+   * @zh_CN Logo 图片适应方式
+   */
+  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   /**
    * @zh_CN Logo 跳转地址
    */
@@ -38,6 +42,7 @@ withDefaults(defineProps<Props>(), {
   logoSize: 32,
   src: '',
   theme: 'light',
+  fit: 'cover',
 });
 </script>
 
@@ -53,6 +58,7 @@ withDefaults(defineProps<Props>(), {
         :alt="text"
         :src="src"
         :size="logoSize"
+        :fit="fit"
         class="relative rounded-none bg-transparent"
       />
       <template v-if="!collapsed">

packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue

@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';
 
-import { computed, ref, watchEffect } from 'vue';
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  ref,
+  watchEffect,
+} from 'vue';
 
 import { VbenTooltip } from '@vben-core/shadcn-ui';
 
@@ -33,6 +40,16 @@ interface Props {
    * @default true
    */
   tooltip?: boolean;
+  /**
+   * 是否只在文本被截断时显示提示框
+   * @default false
+   */
+  tooltipWhenEllipsis?: boolean;
+  /**
+   * 文本截断检测的像素差异阈值，越大则判断越严格
+   * @default 3
+   */
+  ellipsisThreshold?: number;
   /**
    * 提示框背景颜色，优先级高于 overlayStyle
    */
@@ -62,12 +79,15 @@ const props = withDefaults(defineProps<Props>(), {
   maxWidth: '100%',
   placement: 'top',
   tooltip: true,
+  tooltipWhenEllipsis: false,
+  ellipsisThreshold: 3,
   tooltipBackgroundColor: '',
   tooltipColor: '',
   tooltipFontSize: 14,
   tooltipMaxWidth: undefined,
   tooltipOverlayStyle: () => ({ textAlign: 'justify' }),
 });
+
 const emit = defineEmits<{ expandChange: [boolean] }>();
 
 const textMaxWidth = computed(() => {
@@ -79,9 +99,67 @@ const textMaxWidth = computed(() => {
 const ellipsis = ref();
 const isExpand = ref(false);
 const defaultTooltipMaxWidth = ref();
+const isEllipsis = ref(false);
 
 const { width: eleWidth } = useElementSize(ellipsis);
 
+// 检测文本是否被截断
+const checkEllipsis = () => {
+  if (!ellipsis.value || !props.tooltipWhenEllipsis) return;
+
+  const element = ellipsis.value;
+
+  const originalText = element.textContent || '';
+  const originalTrimmed = originalText.trim();
+
+  // 对于空文本直接返回 false
+  if (!originalTrimmed) {
+    isEllipsis.value = false;
+    return;
+  }
+
+  const widthDiff = element.scrollWidth - element.clientWidth;
+  const heightDiff = element.scrollHeight - element.clientHeight;
+
+  // 使用足够大的差异阈值确保只有真正被截断的文本才会显示 tooltip
+  isEllipsis.value =
+    props.line === 1
+      ? widthDiff > props.ellipsisThreshold
+      : heightDiff > props.ellipsisThreshold;
+};
+
+// 使用 ResizeObserver 监听尺寸变化
+let resizeObserver: null | ResizeObserver = null;
+
+onMounted(() => {
+  if (typeof ResizeObserver !== 'undefined' && props.tooltipWhenEllipsis) {
+    resizeObserver = new ResizeObserver(() => {
+      checkEllipsis();
+    });
+
+    if (ellipsis.value) {
+      resizeObserver.observe(ellipsis.value);
+    }
+  }
+
+  // 初始检测
+  checkEllipsis();
+});
+
+// 使用onUpdated钩子检测内容变化
+onUpdated(() => {
+  if (props.tooltipWhenEllipsis) {
+    checkEllipsis();
+  }
+});
+
+onBeforeUnmount(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+});
+
 watchEffect(
   () => {
     if (props.tooltip && eleWidth.value) {
@@ -91,9 +169,13 @@ watchEffect(
   },
   { flush: 'post' },
 );
+
 function onExpand() {
   isExpand.value = !isExpand.value;
   emit('expandChange', isExpand.value);
+  if (props.tooltipWhenEllipsis) {
+    checkEllipsis();
+  }
 }
 
 function handleExpand() {
@@ -110,7 +192,9 @@ function handleExpand() {
         color: tooltipColor,
         backgroundColor: tooltipBackgroundColor,
       }"
-      :disabled="!props.tooltip || isExpand"
+      :disabled="
+        !props.tooltip || isExpand || (props.tooltipWhenEllipsis && !isEllipsis)
+      "
       :side="placement"
     >
       <slot name="tooltip">

packages/effects/layouts/src/basic/layout.vue

@@ -234,6 +234,7 @@ const headerSlots = computed(() => {
     <template #logo>
       <VbenLogo
         v-if="preferences.logo.enable"
+        :fit="preferences.logo.fit"
         :class="logoClass"
         :collapsed="logoCollapsed"
         :src="preferences.logo.source"
@@ -324,6 +325,7 @@ const headerSlots = computed(() => {
     <template #side-extra-title>
       <VbenLogo
         v-if="preferences.logo.enable"
+        :fit="preferences.logo.fit"
         :text="preferences.app.name"
         :theme="theme"
       >

packages/effects/layouts/src/widgets/check-updates/check-updates.vue

@@ -6,7 +6,7 @@ import { $t } from '@vben/locales';
 import { useVbenModal } from '@vben-core/popup-ui';
 
 interface Props {
-  // 轮训时间，分钟
+  // 轮询时间，分钟
   checkUpdatesInterval?: number;
   // 检查更新的地址
   checkUpdateUrl?: string;
@@ -46,6 +46,7 @@ async function getVersionTag() {
     const response = await fetch(props.checkUpdateUrl, {
       cache: 'no-cache',
       method: 'HEAD',
+      redirect: 'manual',
     });
 
     return (

packages/locales/src/langs/zh-CN/ui.json

@@ -20,7 +20,8 @@
     "detail": "详情{0}",
     "view": "查看{0}",
     "import": "导入",
-    "export": "导出"
+    "export": "导出",
+    "detail": "详情"
   },
   "actionMessage": {
     "deleteConfirm": "确定删除 {0} 吗？",

packages/stores/src/modules/tabbar.ts

@@ -208,7 +208,7 @@ export const useTabbarStore = defineStore('core-tabbar', {
       const keys: string[] = [];
 
       for (const key of closeKeys) {
-        if (key !== tab.key) {
+        if (key !== getTabKeyFromTab(tab)) {
           const closeTab = this.tabs.find(
             (item) => getTabKeyFromTab(item) === key,
           );

packages/utils/src/helpers/get-popup-container.ts

@@ -8,3 +8,31 @@ export function getPopupContainer(node?: HTMLElement): HTMLElement {
     node?.closest('form') ?? (node?.parentNode as HTMLElement) ?? document.body
   );
 }
+
+/**
+ * VxeTable专用弹窗层
+ * 解决问题: https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IB1DM3
+ * 单表格用法跟上面getPopupContainer一样
+ * 一个页面(body下)有多个表格元素 必须先指定ID & ID参数传入该函数
+ * <BasicTable id="xxx" />
+ * getVxePopupContainer="(node) => getVxePopupContainer(node, 'xxx')"
+ * @param _node 触发的元素
+ * @param id 表格唯一id 当页面(该窗口)有>=两个表格 必须提供ID
+ * @returns 挂载节点
+ */
+export function getVxePopupContainer(
+  _node?: HTMLElement,
+  id?: string,
+): HTMLElement {
+  let selector = 'div.vxe-table--body-wrapper.body--wrapper';
+  if (id) {
+    selector = `div#${id} ${selector}`;
+  }
+  // 挂载到vxe-table的滚动区域
+  const vxeTableContainerNode = document.querySelector(selector);
+  if (!vxeTableContainerNode) {
+    console.warn('无法找到vxe-table元素, 将会挂载到body.');
+    return document.body;
+  }
+  return vxeTableContainerNode as HTMLElement;
+}

playground/package.json

@@ -48,8 +48,12 @@
     "@vueuse/core": "catalog:",
     "ant-design-vue": "catalog:",
     "dayjs": "catalog:",
+    "json-bigint": "catalog:",
     "pinia": "catalog:",
     "vue": "catalog:",
     "vue-router": "catalog:"
+  },
+  "devDependencies": {
+    "@types/json-bigint": "catalog:"
   }
 }

playground/src/adapter/form.ts

@@ -8,38 +8,40 @@ import type { ComponentType } from './component';
 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-setupVbenForm<ComponentType>({
+async function initSetupVbenForm() {
-  config: {
+  setupVbenForm<ComponentType>({
-    // ant design vue组件库默认都是 v-model:value
+    config: {
-    baseModelPropName: 'value',
+      // ant design vue组件库默认都是 v-model:value
-    // 一些组件是 v-model:checked 或者 v-model:fileList
+      baseModelPropName: 'value',
-    modelPropNameMap: {
+      // 一些组件是 v-model:checked 或者 v-model:fileList
-      Checkbox: 'checked',
+      modelPropNameMap: {
-      Radio: 'checked',
+        Checkbox: 'checked',
-      Switch: 'checked',
+        Radio: 'checked',
-      Upload: 'fileList',
+        Switch: 'checked',
+        Upload: 'fileList',
+      },
     },
-  },
+    defineRules: {
-  defineRules: {
+      // 输入项目必填国际化适配
-    // 输入项目必填国际化适配
+      required: (value, _params, ctx) => {
-    required: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
-      if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
-        return $t('ui.formRules.required', [ctx.label]);
+        }
-      }
+        return true;
-      return true;
+      },
+      // 选择项目必填国际化适配
+      selectRequired: (value, _params, ctx) => {
+        if (value === undefined || value === null) {
+          return $t('ui.formRules.selectRequired', [ctx.label]);
+        }
+        return true;
+      },
     },
-    // 选择项目必填国际化适配
+  });
-    selectRequired: (value, _params, ctx) => {
+}
-      if (value === undefined || value === null) {
-        return $t('ui.formRules.selectRequired', [ctx.label]);
-      }
-      return true;
-    },
-  },
-});
 
 const useVbenForm = useForm<ComponentType>;
 
-export { useVbenForm, z };
+export { initSetupVbenForm, useVbenForm, z };
 export type VbenFormSchema = FormSchema<ComponentType>;
 export type { VbenFormProps };

playground/src/api/examples/json-bigint.ts

@@ -0,0 +1,10 @@
+import { requestClient } from '#/api/request';
+
+/**
+ * 发起请求
+ */
+async function getBigIntData() {
+  return requestClient.get('/demo/bigint');
+}
+
+export { getBigIntData };

playground/src/api/request.ts

@@ -1,7 +1,7 @@
 /**
  * 该文件可自行根据业务逻辑进行调整
  */
-import type { RequestClientOptions } from '@vben/request';
+import type { AxiosResponseHeaders, RequestClientOptions } from '@vben/request';
 
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
@@ -12,8 +12,10 @@ import {
   RequestClient,
 } from '@vben/request';
 import { useAccessStore } from '@vben/stores';
+import { cloneDeep } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
+import JSONBigInt from 'json-bigint';
 
 import { useAuthStore } from '#/store';
 
@@ -25,6 +27,14 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
   const client = new RequestClient({
     ...options,
     baseURL,
+    transformResponse: (data: any, header: AxiosResponseHeaders) => {
+      // storeAsString指示将BigInt存储为字符串，设为false则会存储为内置的BigInt类型
+      return header.getContentType()?.toString().includes('application/json')
+        ? cloneDeep(
+            JSONBigInt({ storeAsString: true, strict: true }).parse(data),
+          )
+        : data;
+    },
   });
 
   /**

playground/src/bootstrap.ts

@@ -13,12 +13,16 @@ import { $t, setupI18n } from '#/locales';
 import { router } from '#/router';
 
 import { initComponentAdapter } from './adapter/component';
+import { initSetupVbenForm } from './adapter/form';
 import App from './app.vue';
 
 async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
 
+  // 初始化表单组件
+  await initSetupVbenForm();
+
   // 设置弹窗的默认配置
   // setDefaultModalProps({
   //   fullscreenButton: false,

playground/src/router/routes/modules/demos.ts

@@ -255,6 +255,16 @@ const routes: RouteRecordRaw[] = [
               title: $t('demos.features.requestParamsSerializer'),
             },
           },
+          {
+            name: 'BigIntDemo',
+            path: '/demos/features/json-bigint',
+            component: () =>
+              import('#/views/demos/features/json-bigint/index.vue'),
+            meta: {
+              icon: 'lucide:grape',
+              title: 'JSON BigInt',
+            },
+          },
         ],
       },
       // 面包屑导航

playground/src/views/_core/authentication/login.vue

@@ -111,10 +111,11 @@ const loginRef =
 async function onSubmit(params: Recordable<any>) {
   authStore.authLogin(params).catch(() => {
     // 登陆失败，刷新验证码的演示
-
+    const formApi = loginRef.value?.getFormApi();
+    // 重置验证码组件的值
+    formApi?.setFieldValue('captcha', false, false);
     // 使用表单API获取验证码组件实例，并调用其resume方法来重置验证码
-    loginRef.value
+    formApi
-      ?.getFormApi()
       ?.getFieldComponentRef<InstanceType<typeof SliderCaptcha>>('captcha')
       ?.resume();
   });

playground/src/views/demos/features/json-bigint/index.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { Alert, Button, Card } from 'ant-design-vue';
+
+import { getBigIntData } from '#/api/examples/json-bigint';
+
+const response = ref('');
+function fetchData() {
+  getBigIntData().then((res) => {
+    response.value = res;
+  });
+}
+</script>
+<template>
+  <Page
+    title="JSON BigInt Support"
+    description="解析后端返回的长整数（long/bigInt）。代码位置：playground/src/api/request.ts中的transformResponse"
+  >
+    <Card>
+      <Alert>
+        <template #message>
+          有些后端接口返回的ID是长整数，但javascript原生的JSON解析是不支持超过2^53-1的长整数的。
+          这种情况可以建议后端返回数据前将长整数转换为字符串类型。如果后端不接受我们的建议😡……
+          <br />
+          下面的按钮点击后会发起请求，接口返回的JSON数据中的id字段是超出整数范围的数字，已自动将其解析为字符串
+        </template>
+      </Alert>
+      <Button class="mt-4" type="primary" @click="fetchData">发起请求</Button>
+      <div>
+        <pre>
+        {{ response }}
+        </pre>
+      </div>
+    </Card>
+  </Page>
+</template>

playground/src/views/examples/form/api.vue

@@ -134,7 +134,7 @@ function handleClick(
     }
     case 'componentRef': {
       // 获取下拉组件的实例，并调用它的focus方法
-      formApi.getFieldComponentRef<RefSelectProps>('fieldOptions')?.focus();
+      formApi.getFieldComponentRef<RefSelectProps>('fieldOptions')?.focus?.();
       break;
     }
     case 'disabled': {

playground/src/views/system/menu/data.ts

@@ -11,7 +11,7 @@ export function getMenuTypeOptions() {
       value: 'catalog',
     },
     { color: 'default', label: $t('system.menu.typeMenu'), value: 'menu' },
-    { color: 'error', label: $t('system.menu.typeButton'), value: 'action' },
+    { color: 'error', label: $t('system.menu.typeButton'), value: 'button' },
     {
       color: 'success',
       label: $t('system.menu.typeEmbedded'),

pnpm-lock.yaml

@@ -6,6 +6,9 @@ settings:
 
 catalogs:
   default:
+    '@ant-design/icons-vue':
+      specifier: ^7.0.1
+      version: 7.0.1
     '@changesets/changelog-github':
       specifier: ^0.5.1
       version: 0.5.1
@@ -99,6 +102,9 @@ catalogs:
     '@types/html-minifier-terser':
       specifier: ^7.0.2
       version: 7.0.2
+    '@types/json-bigint':
+      specifier: ^1.0.4
+      version: 1.0.4
     '@types/jsonwebtoken':
       specifier: ^9.0.9
       version: 9.0.9
@@ -315,6 +321,9 @@ catalogs:
     is-ci:
       specifier: ^4.1.0
       version: 4.1.0
+    json-bigint:
+      specifier: ^1.0.0
+      version: 1.0.0
     jsonc-eslint-parser:
       specifier: ^2.4.0
       version: 2.4.0
@@ -528,6 +537,9 @@ catalogs:
     vue-tsc:
       specifier: 2.2.10
       version: 2.2.10
+    vue3-signature:
+      specifier: ^0.2.4
+      version: 0.2.4
     vxe-pc-ui:
       specifier: ^4.5.35
       version: 4.6.8
@@ -674,6 +686,9 @@ importers:
 
   apps/web-antd:
     dependencies:
+      '@ant-design/icons-vue':
+        specifier: 'catalog:'
+        version: 7.0.1(vue@3.5.13(typescript@5.8.3))
       '@form-create/ant-design-vue':
         specifier: 'catalog:'
         version: 3.2.22(vue@3.5.13(typescript@5.8.3))
@@ -758,6 +773,9 @@ importers:
       vue-router:
         specifier: 'catalog:'
         version: 4.5.1(vue@3.5.13(typescript@5.8.3))
+      vue3-signature:
+        specifier: 'catalog:'
+        version: 0.2.4(vue@3.5.13(typescript@5.8.3))
     devDependencies:
       '@types/crypto-js':
         specifier: 'catalog:'
@@ -1978,6 +1996,9 @@ importers:
       dayjs:
         specifier: 'catalog:'
         version: 1.11.13
+      json-bigint:
+        specifier: 'catalog:'
+        version: 1.0.0
       pinia:
         specifier: ^3.0.2
         version: 3.0.2(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3))
@@ -1987,6 +2008,10 @@ importers:
       vue-router:
         specifier: 'catalog:'
         version: 4.5.1(vue@3.5.13(typescript@5.8.3))
+    devDependencies:
+      '@types/json-bigint':
+        specifier: 'catalog:'
+        version: 1.0.4
 
   scripts/turbo-run:
     dependencies:
@@ -4530,6 +4555,9 @@ packages:
   '@types/html-minifier-terser@7.0.2':
     resolution: {integrity: sha512-mm2HqV22l8lFQh4r2oSsOEVea+m0qqxEmwpc9kC1p/XzmjLWrReR9D/GRs8Pex2NX/imyEH9c5IU/7tMBQCHOA==}
 
+  '@types/json-bigint@1.0.4':
+    resolution: {integrity: sha512-ydHooXLbOmxBbubnA7Eh+RpBzuaIiQjh8WGJYQB50JFGFrdxW7JzVlyEV7fAXw0T2sqJ1ysTneJbiyNLqZRAag==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -5423,6 +5451,9 @@ packages:
     resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==}
     engines: {node: '>=4'}
 
+  bignumber.js@9.3.0:
+    resolution: {integrity: sha512-EM7aMFTXbptt/wZdMlBv2t8IViwQL+h6SLHosp8Yf0dqJMTnY6iL32opnAB6kAdL0SZPuvcAzFr31o0c/R3/RA==}
+
   binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
@@ -6220,6 +6251,9 @@ packages:
     resolution: {integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==}
     engines: {node: '>=18'}
 
+  default-passive-events@2.0.0:
+    resolution: {integrity: sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ==}
+
   define-data-property@1.1.4:
     resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
     engines: {node: '>= 0.4'}
@@ -7843,6 +7877,9 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  json-bigint@1.0.0:
+    resolution: {integrity: sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==}
+
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
@@ -10018,6 +10055,9 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  signature_pad@3.0.0-beta.4:
+    resolution: {integrity: sha512-cOf2NhVuTiuNqe2X/ycEmizvCDXk0DoemhsEpnkcGnA4kS5iJYTCqZ9As7tFBbsch45Q1EdX61833+6sjJ8rrw==}
+
   simple-swizzle@0.2.2:
     resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
 
@@ -11163,6 +11203,11 @@ packages:
     peerDependencies:
       vue: ^3.5.13
 
+  vue3-signature@0.2.4:
+    resolution: {integrity: sha512-XFwwFVK9OG3F085pKIq2SlNVqx32WdFH+TXbGEWc5FfEKpx8oMmZuAwZZ50K/pH2FgmJSE8IRwU9DDhrLpd6iA==}
+    peerDependencies:
+      vue: ^3.5.13
+
   vue@3.5.13:
     resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
     peerDependencies:
@@ -14428,6 +14473,8 @@ snapshots:
 
   '@types/html-minifier-terser@7.0.2': {}
 
+  '@types/json-bigint@1.0.4': {}
+
   '@types/json-schema@7.0.15': {}
 
   '@types/jsonwebtoken@9.0.9':
@@ -15483,6 +15530,8 @@ snapshots:
     dependencies:
       is-windows: 1.0.2
 
+  bignumber.js@9.3.0: {}
+
   binary-extensions@2.3.0: {}
 
   bindings@1.5.0:
@@ -16351,6 +16400,8 @@ snapshots:
       bundle-name: 4.1.0
       default-browser-id: 5.0.0
 
+  default-passive-events@2.0.0: {}
+
   define-data-property@1.1.4:
     dependencies:
       es-define-property: 1.0.1
@@ -18178,6 +18229,10 @@ snapshots:
 
   jsesc@3.1.0: {}
 
+  json-bigint@1.0.0:
+    dependencies:
+      bignumber.js: 9.3.0
+
   json-buffer@3.0.1: {}
 
   json-parse-even-better-errors@2.3.1: {}
@@ -20470,6 +20525,8 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
+  signature_pad@3.0.0-beta.4: {}
+
   simple-swizzle@0.2.2:
     dependencies:
       is-arrayish: 0.3.2
@@ -21801,6 +21858,12 @@ snapshots:
       is-plain-object: 3.0.1
       vue: 3.5.13(typescript@5.8.3)
 
+  vue3-signature@0.2.4(vue@3.5.13(typescript@5.8.3)):
+    dependencies:
+      default-passive-events: 2.0.0
+      signature_pad: 3.0.0-beta.4
+      vue: 3.5.13(typescript@5.8.3)
+
   vue@3.5.13(typescript@5.8.3):
     dependencies:
       '@vue/compiler-dom': 3.5.13

pnpm-workspace.yaml

@@ -40,11 +40,13 @@ catalog:
   '@tanstack/vue-store': ^0.7.0
   '@tinymce/tinymce-vue': ^6.1.0
   '@form-create/ant-design-vue': ^3.2.22
+  '@ant-design/icons-vue': ^7.0.1
   '@form-create/antd-designer': ^3.2.11
   '@form-create/naive-ui': ^3.2.22
   '@types/archiver': ^6.0.3
   '@types/eslint': ^9.6.1
   '@types/html-minifier-terser': ^7.0.2
+  '@types/json-bigint': ^1.0.4
   '@types/jsonwebtoken': ^9.0.9
   '@types/lodash.clonedeep': ^4.5.9
   '@types/lodash.get': ^4.4.9
@@ -119,6 +121,7 @@ catalog:
   happy-dom: ^17.4.6
   html-minifier-terser: ^7.2.0
   is-ci: ^4.1.0
+  json-bigint: ^1.0.0
   jsonc-eslint-parser: ^2.4.0
   jsonwebtoken: ^9.0.2
   lefthook: ^1.11.12
@@ -198,3 +201,4 @@ catalog:
   zod: ^3.24.3
   zod-defaults: ^0.1.3
   highlight.js: ^11.11.1
+  vue3-signature: ^0.2.4