From db63d803389aed2c4d8e0028761b9c328a15f7f7 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Wed, 28 May 2025 14:14:23 +0800
Subject: [PATCH 01/53] =?UTF-8?q?feat:=20[=E5=B7=A5=E4=BD=9C=E6=B5=81]=20S?=
 =?UTF-8?q?imple=20=E6=A8=A1=E5=9E=8B=20-=20=E5=AE=A1=E6=89=B9=E4=BA=BA?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E7=9B=91=E5=90=AC=E5=99=A8=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/http-request-param-setting.vue    | 228 ++++++++++++++++++
 .../modules/user-task-listener.vue            | 107 ++++++++
 .../nodes-config/user-task-node-config.vue    |  48 ++--
 3 files changed, 356 insertions(+), 27 deletions(-)
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue

diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
new file mode 100644
index 000000000..1561f7aca
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import type { HttpRequestParam } from '../../../consts';
+
+import { Plus, Trash2 } from '@vben/icons';
+
+import {
+  Button,
+  Col,
+  FormItem,
+  Input,
+  Row,
+  Select,
+  SelectOption,
+} from 'ant-design-vue';
+
+import {
+  BPM_HTTP_REQUEST_PARAM_TYPES,
+  BpmHttpRequestParamTypeEnum,
+} from '../../../consts';
+import { useFormFieldsAndStartUser } from '../../../helpers';
+
+defineOptions({ name: 'HttpRequestParamSetting' });
+
+const props = defineProps({
+  header: {
+    type: Array as () => HttpRequestParam[],
+    required: false,
+    default: () => [],
+  },
+  body: {
+    type: Array as () => HttpRequestParam[],
+    required: false,
+    default: () => [],
+  },
+  bind: {
+    type: String,
+    required: true,
+  },
+});
+
+// 流程表单字段，发起人字段
+const formFieldOptions = useFormFieldsAndStartUser();
+
+/** 添加请求配置项 */
+const addHttpRequestParam = (arr: HttpRequestParam[]) => {
+  arr.push({
+    key: '',
+    type: BpmHttpRequestParamTypeEnum.FIXED_VALUE,
+    value: '',
+  });
+};
+
+/** 删除请求配置项 */
+const deleteHttpRequestParam = (arr: HttpRequestParam[], index: number) => {
+  arr.splice(index, 1);
+};
+</script>
+<template>
+  <FormItem
+    label="请求头"
+    :label-col="{ span: 24 }"
+    :wrapper-col="{ span: 24 }"
+  >
+    <Row :gutter="8" v-for="(item, index) in props.header" :key="index">
+      <Col :span="7">
+        <FormItem
+          :name="`${bind}.header.${index}.key`"
+          :rules="{
+            required: true,
+            message: '参数名不能为空',
+            trigger: 'blur',
+          }"
+        >
+          <Input placeholder="参数名不能为空" v-model:value="item.key" />
+        </FormItem>
+      </Col>
+      <Col :span="5">
+        <Select v-model:value="item.type">
+          <SelectOption
+            v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
+            :key="types.value"
+            :label="types.label"
+            :value="types.value"
+          >
+            {{ types.label }}
+          </SelectOption>
+        </Select>
+      </Col>
+      <Col :span="10">
+        <FormItem
+          :name="`${bind}.header.${index}.value`"
+          :rules="{
+            required: true,
+            message: '参数值不能为空',
+            trigger: 'blur',
+          }"
+          v-if="item.type === BpmHttpRequestParamTypeEnum.FIXED_VALUE"
+        >
+          <Input placeholder="请求头" v-model:value="item.value" />
+        </FormItem>
+        <FormItem
+          :name="`${bind}.header.${index}.value`"
+          :rules="{
+            required: true,
+            message: '参数值不能为空',
+            trigger: 'change',
+          }"
+          v-if="item.type === BpmHttpRequestParamTypeEnum.FROM_FORM"
+        >
+          <Select v-model:value="item.value" placeholder="请选择表单字段">
+            <SelectOption
+              v-for="(field, fIdx) in formFieldOptions"
+              :key="fIdx"
+              :label="field.title"
+              :value="field.field"
+              :disabled="!field.required"
+            >
+              {{ field.title }}
+            </SelectOption>
+          </Select>
+        </FormItem>
+      </Col>
+      <Col :span="2">
+        <div class="flex h-[32px] items-center">
+          <Trash2
+            class="size-4 cursor-pointer text-red-500"
+            @click="deleteHttpRequestParam(props.header, index)"
+          />
+        </div>
+      </Col>
+    </Row>
+    <Button
+      type="link"
+      @click="addHttpRequestParam(props.header)"
+      class="flex items-center"
+    >
+      <template #icon>
+        <Plus class="size-[18px]" />
+      </template>
+      添加一行
+    </Button>
+  </FormItem>
+  <FormItem
+    label="请求体"
+    :label-col="{ span: 24 }"
+    :wrapper-col="{ span: 24 }"
+  >
+    <Row :gutter="8" v-for="(item, index) in props.body" :key="index">
+      <Col :span="7">
+        <FormItem
+          :name="`${bind}.body.${index}.key`"
+          :rules="{
+            required: true,
+            message: '参数名不能为空',
+            trigger: 'blur',
+          }"
+        >
+          <Input placeholder="参数名" v-model:value="item.key" />
+        </FormItem>
+      </Col>
+      <Col :span="5">
+        <Select v-model:value="item.type">
+          <SelectOption
+            v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
+            :key="types.value"
+            :label="types.label"
+            :value="types.value"
+          >
+            {{ types.label }}
+          </SelectOption>
+        </Select>
+      </Col>
+      <Col :span="10">
+        <FormItem
+          :name="`${bind}.body.${index}.value`"
+          :rules="{
+            required: true,
+            message: '参数值不能为空',
+            trigger: 'blur',
+          }"
+          v-if="item.type === BpmHttpRequestParamTypeEnum.FIXED_VALUE"
+        >
+          <Input placeholder="参数值" v-model:value="item.value" />
+        </FormItem>
+        <FormItem
+          :name="`${bind}.body.${index}.value`"
+          :rules="{
+            required: true,
+            message: '参数值不能为空',
+            trigger: 'change',
+          }"
+          v-if="item.type === BpmHttpRequestParamTypeEnum.FROM_FORM"
+        >
+          <Select v-model:value="item.value" placeholder="请选择表单字段">
+            <SelectOption
+              v-for="(field, fIdx) in formFieldOptions"
+              :key="fIdx"
+              :label="field.title"
+              :value="field.field"
+              :disabled="!field.required"
+            >
+              {{ field.title }}
+            </SelectOption>
+          </Select>
+        </FormItem>
+      </Col>
+      <Col :span="2">
+        <div class="flex h-[32px] items-center">
+          <Trash2
+            class="size-4 cursor-pointer text-red-500"
+            @click="deleteHttpRequestParam(props.body, index)"
+          />
+        </div>
+      </Col>
+    </Row>
+    <Button
+      type="link"
+      @click="addHttpRequestParam(props.body)"
+      class="flex items-center"
+    >
+      <template #icon>
+        <Plus class="size-[18px]" />
+      </template>
+      添加一行
+    </Button>
+  </FormItem>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue
new file mode 100644
index 000000000..159c71c03
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import {
+  Alert,
+  Divider,
+  Form,
+  FormItem,
+  Input,
+  Switch,
+  TypographyText,
+} from 'ant-design-vue';
+
+import HttpRequestParamSetting from './http-request-param-setting.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true,
+  },
+  formFieldOptions: {
+    type: Object,
+    required: true,
+  },
+});
+const emit = defineEmits(['update:modelValue']);
+const listenerFormRef = ref();
+const configForm = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue);
+  },
+});
+const taskListener = ref([
+  {
+    name: '创建任务',
+    type: 'Create',
+  },
+  {
+    name: '指派任务执行人员',
+    type: 'Assign',
+  },
+  {
+    name: '完成任务',
+    type: 'Complete',
+  },
+]);
+
+const validate = async () => {
+  if (!listenerFormRef.value) return false;
+  return await listenerFormRef.value.validate();
+};
+
+defineExpose({ validate });
+</script>
+<template>
+  <Form ref="listenerFormRef" :model="configForm" :label-col="{ span: 24 }">
+    <div
+      v-for="(listener, listenerIdx) in taskListener"
+      :key="listenerIdx"
+      class="pl-2"
+    >
+      <Divider orientation="left">
+        <TypographyText tag="b" size="large">
+          {{ listener.name }}
+        </TypographyText>
+      </Divider>
+      <FormItem>
+        <Switch
+          v-model:checked="configForm[`task${listener.type}ListenerEnable`]"
+          checked-children="开启"
+          un-checked-children="关闭"
+        />
+      </FormItem>
+      <div v-if="configForm[`task${listener.type}ListenerEnable`]">
+        <FormItem>
+          <Alert
+            message="仅支持 POST 请求，以请求体方式接收参数"
+            type="warning"
+            show-icon
+            :closable="false"
+          />
+        </FormItem>
+        <FormItem
+          label="请求地址"
+          :name="`task${listener.type}ListenerPath`"
+          :rules="{
+            required: true,
+            message: '请求地址不能为空',
+            trigger: 'blur',
+          }"
+        >
+          <Input
+            v-model:value="configForm[`task${listener.type}ListenerPath`]"
+          />
+        </FormItem>
+        <HttpRequestParamSetting
+          :header="configForm[`task${listener.type}Listener`].header"
+          :body="configForm[`task${listener.type}Listener`].body"
+          :bind="`task${listener.type}Listener`"
+        />
+      </div>
+    </div>
+  </Form>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
index fdeac0433..dd2693bc1 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
@@ -34,7 +34,6 @@ import {
   TypographyText,
 } from 'ant-design-vue';
 
-// TODO import { defaultProps4AntTree } from '#/utils/tree';
 import {
   APPROVE_METHODS,
   APPROVE_TYPE,
@@ -65,10 +64,9 @@ import {
   useNodeName,
   useWatchNode,
 } from '../../helpers';
+import UserTaskListener from './modules/user-task-listener.vue';
 import { convertTimeUnit, getApproveTypeText } from './utils';
 
-// TODO import UserTaskListener from './components/UserTaskListener.vue';
-
 defineOptions({ name: 'UserTaskNodeConfig' });
 const props = defineProps({
   flowNode: {
@@ -233,8 +231,7 @@ const {
   cTimeoutMaxRemindCount,
 } = useTimeoutHandler();
 
-// TODO 监听器待实现
-// const userTaskListenerRef = ref();
+const userTaskListenerRef = ref();
 
 /** 节点类型名称 */
 const nodeTypeName = computed(() => {
@@ -253,25 +250,20 @@ const saveConfig = async () => {
     drawerApi.close();
     return true;
   }
-  // TODO 监听器待实现
-  // activeTabName.value = 'listener';
-  // await nextTick();
-  activeTabName.value = 'user';
-
   if (!formRef.value) return false;
-  //   TODO 监听器待实现
-  // if (!userTaskListenerRef.value) return false;
-  // const valid =
-  //   (await formRef.value.validate()) &&
-  //   (await userTaskListenerRef.value.validate());
+  if (!userTaskListenerRef.value) return false;
 
-  if (!(await formRef.value.validate())) {
-    activeTabName.value = 'user';
+  //  校验监听器页面, TODO 在别的Tab 好像跳不到这个页面
+  if (!(await userTaskListenerRef.value.validate())) {
+    activeTabName.value = 'listener';
+    return false;
+  }
+  // 校验审批人页面
+  if (!(await formRef.value.validate())) {
+    // TODO 好像走不到这里
+    activeTabName.value = 'user';
+    return false;
   }
-  //   TODO 监听器待实现
-  // if (!(await userTaskListenerRef.value.validate())) {
-  //   activeTabName.value = 'listener';
-  // }
 
   const showText = getShowText();
   if (!showText) return false;
@@ -658,10 +650,14 @@ onMounted(() => {
               label="指定部门"
               name="deptIds"
             >
-              <!-- TODO :replace-fields="defaultProps4AntTree" -->
               <TreeSelect
                 v-model:value="configForm.deptIds"
                 :tree-data="deptTreeOptions"
+                :field-names="{
+                  label: 'name',
+                  value: 'id',
+                  children: 'children',
+                }"
                 empty-text="加载中，请稍后"
                 multiple
                 node-key="id"
@@ -1226,13 +1222,11 @@ onMounted(() => {
         </div>
       </TabPane>
       <TabPane tab="监听器" key="listener">
-        <!-- TODO 待实现 -->
-        <span>待实现</span>
-        <!-- <UserTaskListener
+        <UserTaskListener
           ref="userTaskListenerRef"
-          v-model:value="configForm"
+          v-model="configForm"
           :form-field-options="formFieldOptions"
-        /> -->
+        />
       </TabPane>
     </Tabs>
     <template #footer>

From 4eb16d6d3a57e498839c798be8ecbd70c6aa44ad Mon Sep 17 00:00:00 2001
From: wyc001122 <498040880@qq.com>
Date: Wed, 28 May 2025 17:01:11 +0800
Subject: [PATCH 02/53] fix: fix table-title slot not work (#6295)

---
 packages/effects/plugins/src/vxe-table/use-vxe-grid.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
index c9490b638..72fbb07a4 100644
--- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
+++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -59,6 +59,7 @@ const FORM_SLOT_PREFIX = 'form-';
 
 const TOOLBAR_ACTIONS = 'toolbar-actions';
 const TOOLBAR_TOOLS = 'toolbar-tools';
+const TABLE_TITLE = 'table-title';
 
 const gridRef = useTemplateRef<VxeGridInstance>('gridRef');
 
@@ -129,7 +130,7 @@ const [Form, formApi] = useTableForm({
 });
 
 const showTableTitle = computed(() => {
-  return !!slots.tableTitle?.() || tableTitle.value;
+  return !!slots[TABLE_TITLE]?.() || tableTitle.value;
 });
 
 const showToolbar = computed(() => {

From f31360ba4e2e512cb304bb484337545705fde451 Mon Sep 17 00:00:00 2001
From: wyc001122 <498040880@qq.com>
Date: Wed, 28 May 2025 17:01:58 +0800
Subject: [PATCH 03/53] feat: support for hybrid permission access control mode
 (#6294)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 添加混合权限访问控制模式

* feat: 文档补充
---
 docs/src/en/guide/in-depth/access.md      | 40 ++++++++++++++++++++++-
 docs/src/guide/in-depth/access.md         | 40 ++++++++++++++++++++++-
 packages/@core/base/typings/src/app.d.ts  |  3 +-
 packages/effects/access/src/accessible.ts |  9 +++++
 4 files changed, 89 insertions(+), 3 deletions(-)

diff --git a/docs/src/en/guide/in-depth/access.md b/docs/src/en/guide/in-depth/access.md
index 05997d7d5..545dddabd 100644
--- a/docs/src/en/guide/in-depth/access.md
+++ b/docs/src/en/guide/in-depth/access.md
@@ -4,10 +4,11 @@ outline: deep
 
 # Access Control
 
-The framework has built-in two types of access control methods:
+The framework has built-in three types of access control methods:
 
 - Determining whether a menu or button can be accessed based on user roles
 - Determining whether a menu or button can be accessed through an API
+- Mixed mode: Using both frontend and backend access control simultaneously
 
 ## Frontend Access Control
 
@@ -151,6 +152,43 @@ const dashboardMenus = [
 
 At this point, the configuration is complete. You need to ensure that after logging in, the format of the menu returned by the interface is correct; otherwise, access will not be possible.
 
+## Mixed Access Control
+
+**Implementation Principle**: Mixed mode combines both frontend access control and backend access control methods. The system processes frontend fixed route permissions and backend dynamic menu data in parallel, ultimately merging both parts of routes to provide a more flexible access control solution.
+
+**Advantages**: Combines the performance advantages of frontend control with the flexibility of backend control, suitable for complex business scenarios requiring permission management.
+
+### Steps
+
+- Ensure the current mode is set to mixed access control
+
+Adjust `preferences.ts` in the corresponding application directory to ensure `accessMode='mixed'`.
+
+```ts
+import { defineOverridesPreferences } from '@vben/preferences';
+
+export const overridesPreferences = defineOverridesPreferences({
+  // overrides
+  app: {
+    accessMode: 'mixed',
+  },
+});
+```
+
+- Configure frontend route permissions
+
+Same as the route permission configuration method in [Frontend Access Control](#frontend-access-control) mode.
+
+- Configure backend menu interface
+
+Same as the interface configuration method in [Backend Access Control](#backend-access-control) mode.
+
+- Ensure roles and permissions match
+
+Must satisfy both frontend route permission configuration and backend menu data return requirements, ensuring user roles match the permission configurations of both modes.
+
+At this point, the configuration is complete. Mixed mode will automatically merge frontend and backend routes, providing complete access control functionality.
+
 ## Fine-grained Control of Buttons
 
 In some cases, we need to control the display of buttons with fine granularity. We can control the display of buttons through interfaces or roles.
diff --git a/docs/src/guide/in-depth/access.md b/docs/src/guide/in-depth/access.md
index 0dbd0819d..bbce30a20 100644
--- a/docs/src/guide/in-depth/access.md
+++ b/docs/src/guide/in-depth/access.md
@@ -4,10 +4,11 @@ outline: deep
 
 # 权限
 
-框架内置了两种权限控制方式：
+框架内置了三种权限控制方式：
 
 - 通过用户角色来判断菜单或者按钮是否可以访问
 - 通过接口来判断菜单或者按钮是否可以访问
+- 混合模式：同时使用前端和后端权限控制
 
 ## 前端访问控制
 
@@ -159,6 +160,43 @@ const dashboardMenus = [
 
 到这里，就已经配置完成，你需要确保登录后，接口返回的菜单格式正确，否则无法访问。
 
+## 混合访问控制
+
+**实现原理**: 混合模式同时结合了前端访问控制和后端访问控制两种方式。系统会并行处理前端固定路由权限和后端动态菜单数据，最终将两部分路由合并，提供更灵活的权限控制方案。
+
+**优点**: 兼具前端控制的性能优势和后端控制的灵活性，适合复杂业务场景下的权限管理。
+
+### 步骤
+
+- 确保当前模式为混合访问控制模式
+
+调整对应应用目录下的`preferences.ts`，确保`accessMode='mixed'`。
+
+```ts
+import { defineOverridesPreferences } from '@vben/preferences';
+
+export const overridesPreferences = defineOverridesPreferences({
+  // overrides
+  app: {
+    accessMode: 'mixed',
+  },
+});
+```
+
+- 配置前端路由权限
+
+同[前端访问控制](#前端访问控制)模式的路由权限配置方式。
+
+- 配置后端菜单接口
+
+同[后端访问控制](#后端访问控制)模式的接口配置方式。
+
+- 确保角色和权限匹配
+
+需要同时满足前端路由权限配置和后端菜单数据返回的要求，确保用户角色与两种模式的权限配置都匹配。
+
+到这里，就已经配置完成，混合模式会自动合并前端和后端的路由，提供完整的权限控制功能。
+
 ## 按钮细粒度控制
 
 在某些情况下，我们需要对按钮进行细粒度的控制，我们可以借助接口或者角色来控制按钮的显示。
diff --git a/packages/@core/base/typings/src/app.d.ts b/packages/@core/base/typings/src/app.d.ts
index 02da2466a..d2e86aec4 100644
--- a/packages/@core/base/typings/src/app.d.ts
+++ b/packages/@core/base/typings/src/app.d.ts
@@ -60,8 +60,9 @@ type BreadcrumbStyleType = 'background' | 'normal';
  * 权限模式
  * backend 后端权限模式
  * frontend 前端权限模式
+ * mixed 混合权限模式
  */
-type AccessModeType = 'backend' | 'frontend';
+type AccessModeType = 'backend' | 'frontend' | 'mixed';
 
 /**
  * 导航风格
diff --git a/packages/effects/access/src/accessible.ts b/packages/effects/access/src/accessible.ts
index dd93d2e21..eb9081486 100644
--- a/packages/effects/access/src/accessible.ts
+++ b/packages/effects/access/src/accessible.ts
@@ -96,6 +96,15 @@ async function generateRoutes(
       );
       break;
     }
+    case 'mixed': {
+      const [frontend_resultRoutes, backend_resultRoutes] = await Promise.all([
+        generateRoutesByFrontend(routes, roles || [], forbiddenComponent),
+        generateRoutesByBackend(options),
+      ]);
+
+      resultRoutes = [...frontend_resultRoutes, ...backend_resultRoutes];
+      break;
+    }
   }
 
   /**

From 96a10ca83f1e391506c60851f5825003e4ed9a1c Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Wed, 28 May 2025 19:23:21 +0800
Subject: [PATCH 04/53] style: fix lint error (#6298)

---
 packages/effects/plugins/src/vxe-table/index.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/effects/plugins/src/vxe-table/index.ts b/packages/effects/plugins/src/vxe-table/index.ts
index 4f4cca8e3..a19f2b8fc 100644
--- a/packages/effects/plugins/src/vxe-table/index.ts
+++ b/packages/effects/plugins/src/vxe-table/index.ts
@@ -3,4 +3,8 @@ export type { VxeTableGridOptions } from './types';
 export * from './use-vxe-grid';
 
 export { default as VbenVxeGrid } from './use-vxe-grid.vue';
-export type { VxeGridListeners, VxeGridProps, VxeGridPropTypes } from 'vxe-table';
+export type {
+  VxeGridListeners,
+  VxeGridProps,
+  VxeGridPropTypes,
+} from 'vxe-table';

From 22397032ecdfaed8389f703c38b651d8841db261 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Thu, 29 May 2025 01:43:53 +0800
Subject: [PATCH 05/53] perf: list style

---
 .../views/member/user/components/user-experience-record-list.vue | 1 +
 .../src/views/member/user/components/user-point-list.vue         | 1 +
 .../web-antd/src/views/member/user/components/user-sign-list.vue | 1 +
 3 files changed, 3 insertions(+)

diff --git a/apps/web-antd/src/views/member/user/components/user-experience-record-list.vue b/apps/web-antd/src/views/member/user/components/user-experience-record-list.vue
index f1b6729f2..4e6b1bb3d 100644
--- a/apps/web-antd/src/views/member/user/components/user-experience-record-list.vue
+++ b/apps/web-antd/src/views/member/user/components/user-experience-record-list.vue
@@ -122,6 +122,7 @@ const [Grid] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<MemberExperienceRecordApi.ExperienceRecord>,
+  separator: false,
 });
 </script>
 
diff --git a/apps/web-antd/src/views/member/user/components/user-point-list.vue b/apps/web-antd/src/views/member/user/components/user-point-list.vue
index 295acf0cf..cc7dddd75 100644
--- a/apps/web-antd/src/views/member/user/components/user-point-list.vue
+++ b/apps/web-antd/src/views/member/user/components/user-point-list.vue
@@ -65,6 +65,7 @@ const [Grid] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<MemberPointRecordApi.Record>,
+  separator: false,
 });
 </script>
 
diff --git a/apps/web-antd/src/views/member/user/components/user-sign-list.vue b/apps/web-antd/src/views/member/user/components/user-sign-list.vue
index e6a8a9e35..77ef261e7 100644
--- a/apps/web-antd/src/views/member/user/components/user-sign-list.vue
+++ b/apps/web-antd/src/views/member/user/components/user-sign-list.vue
@@ -56,6 +56,7 @@ const [Grid] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<MemberSignInRecordApi.SignInRecord>,
+  separator: false,
 });
 </script>
 

From f6a5ca97a442b0547262cd1b3bc49f5456b1464d Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Thu, 29 May 2025 01:51:29 +0800
Subject: [PATCH 06/53] feat: add crm product

---
 apps/web-antd/src/views/crm/product/data.ts   | 166 +++++++++++++++++
 apps/web-antd/src/views/crm/product/index.vue | 175 +++++++++++++++---
 .../src/views/crm/product/modules/form.vue    |  82 ++++++++
 3 files changed, 397 insertions(+), 26 deletions(-)
 create mode 100644 apps/web-antd/src/views/crm/product/data.ts
 create mode 100644 apps/web-antd/src/views/crm/product/modules/form.vue

diff --git a/apps/web-antd/src/views/crm/product/data.ts b/apps/web-antd/src/views/crm/product/data.ts
new file mode 100644
index 000000000..592460a61
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/data.ts
@@ -0,0 +1,166 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { z } from '#/adapter/form';
+import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '产品名称',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'no',
+      label: '产品编码',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'categoryName',
+      label: '产品类型',
+      rules: 'required',
+    },
+    {
+      fieldName: 'unit',
+      label: '产品单位',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.CRM_PRODUCT_UNIT),
+      },
+      rules: 'required',
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'price',
+      label: '价格（元）',
+      rules: 'required',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        step: 0.1,
+      },
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'description',
+      label: '产品描述',
+    },
+    {
+      fieldName: 'status',
+      label: '上架状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.CRM_PRODUCT_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '产品名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'status',
+      label: '上架状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.CRM_PRODUCT_STATUS, 'number'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '产品编号',
+      visible: false,
+    },
+    {
+      field: 'name',
+      title: '产品名称',
+      slots: { default: 'name' },
+    },
+    {
+      field: 'categoryName',
+      title: '产品类型',
+    },
+    {
+      field: 'unit',
+      title: '产品单位',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_PRODUCT_UNIT },
+      },
+    },
+    {
+      field: 'no',
+      title: '产品编码',
+    },
+    {
+      field: 'price',
+      title: '价格（元）',
+      formatter: 'formatNumber',
+    },
+    {
+      field: 'description',
+      title: '产品描述',
+    },
+    {
+      field: 'status',
+      title: '上架状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_PRODUCT_STATUS },
+      },
+    },
+    {
+      field: 'ownerUserName',
+      title: '负责人',
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/product/index.vue b/apps/web-antd/src/views/crm/product/index.vue
index 805a634a5..93bcbd458 100644
--- a/apps/web-antd/src/views/crm/product/index.vue
+++ b/apps/web-antd/src/views/crm/product/index.vue
@@ -1,34 +1,157 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmProductApi } from '#/api/crm/product';
 
-import { Button } from 'ant-design-vue';
+import { useRouter } from 'vue-router';
 
-import { DocAlert } from '#/components/doc-alert';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteProduct,
+  exportProduct,
+  getProductPage,
+} from '#/api/crm/product';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const { push } = useRouter();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportProduct(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '产品.xls', source: data });
+}
+
+/** 打开详情 */
+function handleDetail(row: CrmProductApi.Product) {
+  push({ name: 'CrmProductDetail', params: { id: row.id } });
+}
+
+/** 创建产品 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑产品 */
+function handleEdit(row: CrmProductApi.Product) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除产品 */
+async function handleDelete(row: CrmProductApi.Product) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteProduct(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getProductPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmProductApi.Product>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【产品】产品管理、产品分类"
-      url="https://doc.iocoder.cn/crm/product/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/product/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/product/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="产品列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['产品']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:product:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['crm:product:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #name="{ row }">
+        <Button type="link" @click="handleDetail(row)">{{ row.name }}</Button>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:product:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:product:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/product/modules/form.vue b/apps/web-antd/src/views/crm/product/modules/form.vue
new file mode 100644
index 000000000..ef24d9a94
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/modules/form.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { CrmProductApi } from '#/api/crm/product';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createProduct, getProduct, updateProduct } from '#/api/crm/product';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmProductApi.Product>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['产品'])
+    : $t('ui.actionTitle.create', ['产品']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as CrmProductApi.Product;
+    try {
+      await (formData.value?.id ? updateProduct(data) : createProduct(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<CrmProductApi.Product>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getProduct(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[600px]" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>

From 5f6581b1c6a3d42fcf4a9d54502e37a098869ae2 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Thu, 29 May 2025 01:51:38 +0800
Subject: [PATCH 07/53] perf: code style

---
 apps/web-antd/src/views/crm/clue/data.ts      |  48 +-------
 apps/web-antd/src/views/crm/clue/index.vue    | 113 ++++++++++--------
 apps/web-antd/src/views/crm/customer/data.ts  |   9 +-
 .../web-antd/src/views/crm/customer/index.vue |   2 +-
 .../src/views/crm/customer/modules/form.vue   |   4 +-
 5 files changed, 75 insertions(+), 101 deletions(-)

diff --git a/apps/web-antd/src/views/crm/clue/data.ts b/apps/web-antd/src/views/crm/clue/data.ts
index 28e561915..abc05ed4e 100644
--- a/apps/web-antd/src/views/crm/clue/data.ts
+++ b/apps/web-antd/src/views/crm/clue/data.ts
@@ -1,19 +1,15 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { CrmClueApi } from '#/api/crm/clue';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
 
-import { useAccess } from '@vben/access';
 import { formatDateTime } from '@vben/utils';
 
 import { getAreaTree } from '#/api/system/area';
 import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
-
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -164,14 +160,11 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = CrmClueApi.Clue>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'name',
       title: '线索名称',
-      minWidth: 160,
       fixed: 'left',
       slots: {
         default: 'name',
@@ -180,7 +173,6 @@ export function useGridColumns<T = CrmClueApi.Clue>(
     {
       field: 'source',
       title: '线索来源',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_SOURCE },
@@ -189,27 +181,22 @@ export function useGridColumns<T = CrmClueApi.Clue>(
     {
       field: 'mobile',
       title: '手机',
-      minWidth: 120,
     },
     {
       field: 'telephone',
       title: '电话',
-      minWidth: 130,
     },
     {
       field: 'email',
       title: '邮箱',
-      minWidth: 180,
     },
     {
       field: 'detailAddress',
       title: '地址',
-      minWidth: 180,
     },
     {
       field: 'industryId',
       title: '客户行业',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
@@ -218,7 +205,6 @@ export function useGridColumns<T = CrmClueApi.Clue>(
     {
       field: 'level',
       title: '客户级别',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_LEVEL },
@@ -227,66 +213,40 @@ export function useGridColumns<T = CrmClueApi.Clue>(
     {
       field: 'ownerUserName',
       title: '负责人',
-      minWidth: 100,
     },
     {
       field: 'ownerUserDeptName',
       title: '所属部门',
-      minWidth: 100,
     },
     {
       field: 'contactNextTime',
       title: '下次联系时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'contactLastTime',
       title: '最后跟进时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'updateTime',
       title: '更新时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'creatorName',
       title: '创建人',
-      minWidth: 100,
     },
     {
-      field: 'operation',
       title: '操作',
-      width: 130,
+      width: 140,
       fixed: 'right',
-      align: 'center',
-      cellRender: {
-        attrs: {
-          nameField: 'name',
-          nameTitle: '线索',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'edit',
-            show: hasAccessByCodes(['crm:clue:update']),
-          },
-          {
-            code: 'delete',
-            show: hasAccessByCodes(['crm:clue:delete']),
-          },
-        ],
-      },
+      slots: { default: 'actions' },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/clue/index.vue b/apps/web-antd/src/views/crm/clue/index.vue
index c9f519bee..b9aa665f2 100644
--- a/apps/web-antd/src/views/crm/clue/index.vue
+++ b/apps/web-antd/src/views/crm/clue/index.vue
@@ -1,19 +1,15 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmClueApi } from '#/api/crm/clue';
 
 import { useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus } from '@vben/icons';
 import { downloadFileFromBlobPart } from '@vben/utils';
 
 import { Button, message } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteClue, exportClue, getCluePage } from '#/api/crm/clue';
 import { DocAlert } from '#/components/doc-alert';
 import { $t } from '#/locales';
@@ -33,55 +29,43 @@ function onRefresh() {
   gridApi.query();
 }
 
-/** 导出表格 */
-async function onExport() {
-  const data = await exportClue(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '线索.xls', source: data });
-}
-
 /** 创建线索 */
-function onCreate() {
+function handleCreate() {
   formModalApi.setData(null).open();
 }
 
 /** 编辑线索 */
-function onEdit(row: CrmClueApi.Clue) {
+function handleEdit(row: CrmClueApi.Clue) {
   formModalApi.setData(row).open();
 }
 
 /** 删除线索 */
-async function onDelete(row: CrmClueApi.Clue) {
+async function handleDelete(row: CrmClueApi.Clue) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
-    duration: 0,
-    key: 'action_process_msg',
+    key: 'action_key_msg',
   });
   try {
     await deleteClue(row.id as number);
-    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
     onRefresh();
   } catch {
     hideLoading();
   }
 }
 
-/** 查看线索详情 */
-function onDetail(row: CrmClueApi.Clue) {
-  push({ name: 'CrmClueDetail', params: { id: row.id } });
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportClue(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '线索.xls', source: data });
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({ code, row }: OnActionClickParams<CrmClueApi.Clue>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
+/** 查看线索详情 */
+function handleDetail(row: CrmClueApi.Clue) {
+  push({ name: 'CrmClueDetail', params: { id: row.id } });
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -89,7 +73,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -130,29 +114,54 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <Grid table-title="线索列表">
       <template #toolbar-tools>
-        <Button
-          type="primary"
-          @click="onCreate"
-          v-access:code="['crm:clue:create']"
-        >
-          <Plus class="size-5" />
-          {{ $t('ui.actionTitle.create', ['线索']) }}
-        </Button>
-        <Button
-          type="primary"
-          class="ml-2"
-          @click="onExport"
-          v-access:code="['crm:clue:export']"
-        >
-          <Download class="size-5" />
-          {{ $t('ui.actionTitle.export') }}
-        </Button>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['线索']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:clue:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['crm:clue:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
       </template>
       <template #name="{ row }">
-        <Button type="link" @click="onDetail(row)">
+        <Button type="link" @click="handleDetail(row)">
           {{ row.name }}
         </Button>
       </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:clue:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:clue:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
     </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/customer/data.ts b/apps/web-antd/src/views/crm/customer/data.ts
index 6ca6636ff..c1f505a48 100644
--- a/apps/web-antd/src/views/crm/customer/data.ts
+++ b/apps/web-antd/src/views/crm/customer/data.ts
@@ -9,6 +9,7 @@ import { useAccess } from '@vben/access';
 import { formatDateTime } from '@vben/utils';
 
 import { getAreaTree } from '#/api/system/area';
+import { getSimpleUserList } from '#/api/system/user';
 import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
@@ -48,9 +49,13 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'ownerUserId',
       label: '负责人',
-      component: 'Select',
+      component: 'ApiSelect',
       componentProps: {
-        api: 'getSimpleUserList',
+        api: () => getSimpleUserList(),
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
       },
       rules: 'required',
     },
diff --git a/apps/web-antd/src/views/crm/customer/index.vue b/apps/web-antd/src/views/crm/customer/index.vue
index cac8566da..df3c8e7ee 100644
--- a/apps/web-antd/src/views/crm/customer/index.vue
+++ b/apps/web-antd/src/views/crm/customer/index.vue
@@ -147,7 +147,7 @@ function onChangeSceneType(key: number | string) {
     <FormModal @success="onRefresh" />
 
     <Grid>
-      <template #toolbar-actions>
+      <template #top>
         <Tabs class="border-none" @change="onChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
diff --git a/apps/web-antd/src/views/crm/customer/modules/form.vue b/apps/web-antd/src/views/crm/customer/modules/form.vue
index 504947ff9..ea0901fab 100644
--- a/apps/web-antd/src/views/crm/customer/modules/form.vue
+++ b/apps/web-antd/src/views/crm/customer/modules/form.vue
@@ -29,9 +29,9 @@ const [Form, formApi] = useVbenForm({
     componentProps: {
       class: 'w-full',
     },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
   },
+  // 一共2列
+  wrapperClass: 'grid-cols-2',
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,

From 54d1471d435a675f823e4ab3c09a24f69f76aa7b Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Thu, 29 May 2025 08:51:48 +0800
Subject: [PATCH 08/53] =?UTF-8?q?fix:=20[BPM=20=E5=B7=A5=E4=BD=9C=E6=B5=81?=
 =?UTF-8?q?]=E4=BF=AE=E5=A4=8D=E5=AE=A1=E6=89=B9=E4=BA=BA=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9=E6=A0=A1=E9=AA=8C=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/http-request-param-setting.vue    | 20 +++++++++----------
 .../modules/user-task-listener.vue            |  2 +-
 .../nodes-config/user-task-node-config.vue    | 16 +++++++++------
 .../src/views/bpm/model/form/index.vue        |  1 -
 4 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
index 1561f7aca..6f18a06dc 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
@@ -64,11 +64,11 @@ const deleteHttpRequestParam = (arr: HttpRequestParam[], index: number) => {
     <Row :gutter="8" v-for="(item, index) in props.header" :key="index">
       <Col :span="7">
         <FormItem
-          :name="`${bind}.header.${index}.key`"
+          :name="[bind, 'header', index, 'key']"
           :rules="{
             required: true,
             message: '参数名不能为空',
-            trigger: 'blur',
+            trigger: ['blur', 'change'],
           }"
         >
           <Input placeholder="参数名不能为空" v-model:value="item.key" />
@@ -88,18 +88,18 @@ const deleteHttpRequestParam = (arr: HttpRequestParam[], index: number) => {
       </Col>
       <Col :span="10">
         <FormItem
-          :name="`${bind}.header.${index}.value`"
+          :name="[bind, 'header', index, 'value']"
           :rules="{
             required: true,
             message: '参数值不能为空',
-            trigger: 'blur',
+            trigger: ['blur', 'change'],
           }"
           v-if="item.type === BpmHttpRequestParamTypeEnum.FIXED_VALUE"
         >
           <Input placeholder="请求头" v-model:value="item.value" />
         </FormItem>
         <FormItem
-          :name="`${bind}.header.${index}.value`"
+          :name="[bind, 'header', index, 'value']"
           :rules="{
             required: true,
             message: '参数值不能为空',
@@ -148,11 +148,11 @@ const deleteHttpRequestParam = (arr: HttpRequestParam[], index: number) => {
     <Row :gutter="8" v-for="(item, index) in props.body" :key="index">
       <Col :span="7">
         <FormItem
-          :name="`${bind}.body.${index}.key`"
+          :name="[bind, 'body', index, 'key']"
           :rules="{
             required: true,
             message: '参数名不能为空',
-            trigger: 'blur',
+            trigger: ['blur', 'change'],
           }"
         >
           <Input placeholder="参数名" v-model:value="item.key" />
@@ -172,18 +172,18 @@ const deleteHttpRequestParam = (arr: HttpRequestParam[], index: number) => {
       </Col>
       <Col :span="10">
         <FormItem
-          :name="`${bind}.body.${index}.value`"
+          :name="[bind, 'body', index, 'value']"
           :rules="{
             required: true,
             message: '参数值不能为空',
-            trigger: 'blur',
+            trigger: ['blur', 'change'],
           }"
           v-if="item.type === BpmHttpRequestParamTypeEnum.FIXED_VALUE"
         >
           <Input placeholder="参数值" v-model:value="item.value" />
         </FormItem>
         <FormItem
-          :name="`${bind}.body.${index}.value`"
+          :name="[bind, 'body', index, 'value']"
           :rules="{
             required: true,
             message: '参数值不能为空',
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue
index 159c71c03..e071c6d82 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue
@@ -89,7 +89,7 @@ defineExpose({ validate });
           :rules="{
             required: true,
             message: '请求地址不能为空',
-            trigger: 'blur',
+            trigger: ['blur', 'change'],
           }"
         >
           <Input
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
index dd2693bc1..d76b00ed8 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
@@ -253,14 +253,18 @@ const saveConfig = async () => {
   if (!formRef.value) return false;
   if (!userTaskListenerRef.value) return false;
 
-  //  校验监听器页面, TODO 在别的Tab 好像跳不到这个页面
-  if (!(await userTaskListenerRef.value.validate())) {
+  // 先进行表单验证，记录验证结果
+  const userFormValid = await formRef.value.validate().catch(() => false);
+  const listenerValid = await userTaskListenerRef.value.validate().catch(() => {
+    return false;
+  });
+  // 如果监听器有错误，切换到监听器Tab
+  if (!listenerValid) {
     activeTabName.value = 'listener';
     return false;
   }
-  // 校验审批人页面
-  if (!(await formRef.value.validate())) {
-    // TODO 好像走不到这里
+  // 如果审批人表单有错误，切换到审批人Tab
+  if (!userFormValid) {
     activeTabName.value = 'user';
     return false;
   }
@@ -1221,7 +1225,7 @@ onMounted(() => {
           </div>
         </div>
       </TabPane>
-      <TabPane tab="监听器" key="listener">
+      <TabPane tab="监听器" key="listener" :force-render="true">
         <UserTaskListener
           ref="userTaskListenerRef"
           v-model="configForm"
diff --git a/apps/web-antd/src/views/bpm/model/form/index.vue b/apps/web-antd/src/views/bpm/model/form/index.vue
index 2c2f61fbb..79a698c8e 100644
--- a/apps/web-antd/src/views/bpm/model/form/index.vue
+++ b/apps/web-antd/src/views/bpm/model/form/index.vue
@@ -338,7 +338,6 @@ const handleDeploy = async () => {
 /** 步骤切换处理 */
 const handleStepClick = async (index: number) => {
   try {
-    console.warn('handleStepClick', index);
     if (index !== 0) {
       await validateBasic();
     }

From f679df003616359f2ebca847243f6d1b974a2a46 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Thu, 29 May 2025 10:21:33 +0800
Subject: [PATCH 09/53] =?UTF-8?q?feat:=20[BPM=20=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E6=B5=81]=20Simple=20=E6=A8=A1=E5=9E=8B=20-=20=E6=8A=84?=
 =?UTF-8?q?=E9=80=81=E4=BA=BA=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nodes-config/copy-task-node-config.vue    | 529 ++++++++++++++++++
 .../nodes-config/user-task-node-config.vue    |  53 +-
 .../components/nodes/copy-task-node.vue       | 118 ++++
 .../components/process-node-tree.vue          |   5 +-
 4 files changed, 663 insertions(+), 42 deletions(-)
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes/copy-task-node.vue

diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
new file mode 100644
index 000000000..41415697c
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
@@ -0,0 +1,529 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+
+import type { Ref } from 'vue';
+
+import type { SimpleFlowNode } from '../../consts';
+import type { CopyTaskFormType } from '../../helpers';
+
+import { computed, onMounted, reactive, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Button,
+  Col,
+  Form,
+  FormItem,
+  Input,
+  Radio,
+  RadioGroup,
+  Row,
+  Select,
+  SelectOption,
+  TabPane,
+  Tabs,
+  Textarea,
+  TreeSelect,
+} from 'ant-design-vue';
+
+import { BpmModelFormType } from '#/utils';
+
+import {
+  CANDIDATE_STRATEGY,
+  CandidateStrategy,
+  FieldPermissionType,
+  MULTI_LEVEL_DEPT,
+  NodeType,
+} from '../../consts';
+import {
+  useFormFieldsPermission,
+  useNodeForm,
+  useNodeName,
+  useWatchNode,
+} from '../../helpers';
+
+defineOptions({
+  name: 'CopyTaskNodeConfig',
+});
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+const deptLevelLabel = computed(() => {
+  let label = '部门负责人来源';
+  label =
+    configForm.value.candidateStrategy ===
+    CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+      ? `${label}(指定部门向上)`
+      : `${label}(发起人部门向上)`;
+  return label;
+});
+// 抽屉配置
+const [Drawer, drawerApi] = useVbenDrawer({
+  header: true,
+  closable: true,
+  title: '',
+  placement: 'right',
+  onCancel() {
+    drawerApi.close();
+  },
+  onConfirm() {
+    saveConfig();
+  },
+});
+// 当前节点
+const currentNode = useWatchNode(props);
+// 节点名称
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+  NodeType.COPY_TASK_NODE,
+);
+// 激活的 Tab 标签页
+const activeTabName = ref('user');
+// 表单字段权限配置
+const {
+  formType,
+  fieldsPermissionConfig,
+  formFieldOptions,
+  getNodeConfigFormFields,
+} = useFormFieldsPermission(FieldPermissionType.READ);
+// 表单内用户字段选项, 必须是必填和用户选择器
+const userFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'UserSelect');
+});
+// 表单内部门字段选项, 必须是必填和部门选择器
+const deptFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'DeptSelect');
+});
+// 抄送人表单配置
+const formRef = ref(); // 表单 Ref
+// 表单校验规则
+const formRules: Record<string, Rule[]> = reactive({
+  candidateStrategy: [
+    { required: true, message: '抄送人设置不能为空', trigger: 'change' },
+  ],
+  userIds: [{ required: true, message: '用户不能为空', trigger: 'change' }],
+  roleIds: [{ required: true, message: '角色不能为空', trigger: 'change' }],
+  deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }],
+  userGroups: [
+    { required: true, message: '用户组不能为空', trigger: 'change' },
+  ],
+  postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
+  formUser: [
+    { required: true, message: '表单内用户字段不能为空', trigger: 'change' },
+  ],
+  formDept: [
+    { required: true, message: '表单内部门字段不能为空', trigger: 'change' },
+  ],
+  expression: [
+    { required: true, message: '流程表达式不能为空', trigger: 'blur' },
+  ],
+});
+
+const {
+  configForm: tempConfigForm,
+  roleOptions,
+  postOptions,
+  userOptions,
+  userGroupOptions,
+  deptTreeOptions,
+  getShowText,
+  handleCandidateParam,
+  parseCandidateParam,
+} = useNodeForm(NodeType.COPY_TASK_NODE);
+const configForm = tempConfigForm as Ref<CopyTaskFormType>;
+// 抄送人策略， 去掉发起人自选 和 发起人自己
+const copyUserStrategies = computed(() => {
+  return CANDIDATE_STRATEGY.filter(
+    (item) => item.value !== CandidateStrategy.START_USER,
+  );
+});
+// 改变抄送人设置策略
+const changeCandidateStrategy = () => {
+  configForm.value.userIds = [];
+  configForm.value.deptIds = [];
+  configForm.value.roleIds = [];
+  configForm.value.postIds = [];
+  configForm.value.userGroups = [];
+  configForm.value.deptLevel = 1;
+  configForm.value.formUser = '';
+  configForm.value.formDept = '';
+};
+// 保存配置
+const saveConfig = async () => {
+  activeTabName.value = 'user';
+  if (!formRef.value) return false;
+  const valid = await formRef.value.validate();
+  if (!valid) return false;
+  const showText = getShowText();
+  if (!showText) return false;
+  currentNode.value.name = nodeName.value!;
+  currentNode.value.candidateParam = handleCandidateParam();
+  currentNode.value.candidateStrategy = configForm.value.candidateStrategy;
+  currentNode.value.showText = showText;
+  currentNode.value.fieldsPermission = fieldsPermissionConfig.value;
+  drawerApi.close();
+  return true;
+};
+// 显示抄送节点配置， 由父组件传过来
+const showCopyTaskNodeConfig = (node: SimpleFlowNode) => {
+  nodeName.value = node.name;
+  // 抄送人设置
+  configForm.value.candidateStrategy = node.candidateStrategy!;
+  parseCandidateParam(node.candidateStrategy!, node?.candidateParam);
+  // 表单字段权限
+  getNodeConfigFormFields(node.fieldsPermission);
+
+  drawerApi.open();
+};
+
+/** 批量更新权限 */
+const updatePermission = (type: string) => {
+  fieldsPermissionConfig.value.forEach((field) => {
+    if (type === 'READ') {
+      field.permission = FieldPermissionType.READ;
+    } else if (type === 'WRITE') {
+      field.permission = FieldPermissionType.WRITE;
+    } else {
+      field.permission = FieldPermissionType.NONE;
+    }
+  });
+};
+
+// 在组件初始化时对表单字段进行处理
+onMounted(() => {
+  // 可以在这里进行初始化操作
+});
+
+defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
+</script>
+<template>
+  <Drawer class="w-[580px]">
+    <template #title>
+      <div class="config-header">
+        <Input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-model:value="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="ep:edit-pen" @click="clickIcon()" />
+        </div>
+      </div>
+    </template>
+    <Tabs v-model:active-key="activeTabName">
+      <TabPane tab="抄送人" key="user">
+        <div>
+          <Form
+            ref="formRef"
+            :model="configForm"
+            :label-col="{ span: 24 }"
+            :wrapper-col="{ span: 24 }"
+            :rules="formRules"
+          >
+            <FormItem label="抄送人设置" name="candidateStrategy">
+              <RadioGroup
+                v-model:value="configForm.candidateStrategy"
+                @change="changeCandidateStrategy"
+              >
+                <Row :gutter="[0, 8]">
+                  <Col
+                    v-for="(dict, index) in copyUserStrategies"
+                    :key="index"
+                    :span="8"
+                  >
+                    <Radio :value="dict.value" :label="dict.value">
+                      {{ dict.label }}
+                    </Radio>
+                  </Col>
+                </Row>
+              </RadioGroup>
+            </FormItem>
+
+            <FormItem
+              v-if="configForm.candidateStrategy === CandidateStrategy.ROLE"
+              label="指定角色"
+              name="roleIds"
+            >
+              <Select
+                v-model:value="configForm.roleIds"
+                clearable
+                mode="multiple"
+              >
+                <SelectOption
+                  v-for="item in roleOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                  {{ item.name }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy ===
+                  CandidateStrategy.DEPT_MEMBER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+              "
+              label="指定部门"
+              name="deptIds"
+            >
+              <TreeSelect
+                v-model:value="configForm.deptIds"
+                :tree-data="deptTreeOptions"
+                :field-names="{
+                  label: 'name',
+                  value: 'id',
+                  children: 'children',
+                }"
+                empty-text="加载中，请稍后"
+                multiple
+                :check-strictly="true"
+                allow-clear
+                tree-checkable
+              />
+            </FormItem>
+            <FormItem
+              v-if="configForm.candidateStrategy === CandidateStrategy.POST"
+              label="指定岗位"
+              name="postIds"
+            >
+              <Select
+                v-model:value="configForm.postIds"
+                clearable
+                mode="multiple"
+              >
+                <SelectOption
+                  v-for="item in postOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id!"
+                >
+                  {{ item.name }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="configForm.candidateStrategy === CandidateStrategy.USER"
+              label="指定用户"
+              name="userIds"
+            >
+              <Select
+                v-model:value="configForm.userIds"
+                clearable
+                mode="multiple"
+              >
+                <SelectOption
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id"
+                >
+                  {{ item.nickname }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy === CandidateStrategy.USER_GROUP
+              "
+              label="指定用户组"
+              name="userGroups"
+            >
+              <Select
+                v-model:value="configForm.userGroups"
+                clearable
+                mode="multiple"
+              >
+                <SelectOption
+                  v-for="item in userGroupOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                  {{ item.name }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy === CandidateStrategy.FORM_USER
+              "
+              label="表单内用户字段"
+              name="formUser"
+            >
+              <Select v-model:value="configForm.formUser" clearable>
+                <SelectOption
+                  v-for="(item, idx) in userFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                  :disabled="!item.required"
+                >
+                  {{ item.title }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy ===
+                CandidateStrategy.FORM_DEPT_LEADER
+              "
+              label="表单内部门字段"
+              name="formDept"
+            >
+              <Select v-model:value="configForm.formDept" clearable>
+                <SelectOption
+                  v-for="(item, idx) in deptFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                  :disabled="!item.required"
+                >
+                  {{ item.title }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy ===
+                  CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.START_USER_DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy ===
+                  CandidateStrategy.FORM_DEPT_LEADER
+              "
+              :label="deptLevelLabel!"
+              name="deptLevel"
+            >
+              <Select v-model:value="configForm.deptLevel" clearable>
+                <SelectOption
+                  v-for="(item, index) in MULTI_LEVEL_DEPT"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                  {{ item.label }}
+                </SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                configForm.candidateStrategy === CandidateStrategy.EXPRESSION
+              "
+              label="流程表达式"
+              name="expression"
+            >
+              <Textarea v-model:value="configForm.expression" clearable />
+            </FormItem>
+          </Form>
+        </div>
+      </TabPane>
+      <TabPane
+        tab="表单字段权限"
+        key="fields"
+        v-if="formType === BpmModelFormType.NORMAL"
+      >
+        <div class="p-1">
+          <div class="mb-4 text-[16px] font-bold">字段权限</div>
+
+          <!-- 表头 -->
+          <Row class="border border-gray-200 px-4 py-3">
+            <Col :span="8" class="font-bold">字段名称</Col>
+            <Col :span="16">
+              <Row>
+                <Col :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('READ')"
+                  >
+                    只读
+                  </span>
+                </Col>
+                <Col :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('WRITE')"
+                  >
+                    可编辑
+                  </span>
+                </Col>
+                <Col :span="8" class="flex items-center justify-center">
+                  <span
+                    class="cursor-pointer font-bold"
+                    @click="updatePermission('NONE')"
+                  >
+                    隐藏
+                  </span>
+                </Col>
+              </Row>
+            </Col>
+          </Row>
+
+          <!-- 表格内容 -->
+          <div v-for="(item, index) in fieldsPermissionConfig" :key="index">
+            <Row class="border border-t-0 border-gray-200 px-4 py-2">
+              <Col :span="8" class="flex items-center truncate">
+                {{ item.title }}
+              </Col>
+              <Col :span="16">
+                <RadioGroup v-model:value="item.permission" class="w-full">
+                  <Row>
+                    <Col :span="8" class="flex items-center justify-center">
+                      <Radio
+                        :value="FieldPermissionType.READ"
+                        size="large"
+                        :label="FieldPermissionType.READ"
+                      />
+                    </Col>
+                    <Col :span="8" class="flex items-center justify-center">
+                      <Radio
+                        :value="FieldPermissionType.WRITE"
+                        size="large"
+                        :label="FieldPermissionType.WRITE"
+                        disabled
+                      />
+                    </Col>
+                    <Col :span="8" class="flex items-center justify-center">
+                      <Radio
+                        :value="FieldPermissionType.NONE"
+                        size="large"
+                        :label="FieldPermissionType.NONE"
+                      />
+                    </Col>
+                  </Row>
+                </RadioGroup>
+              </Col>
+            </Row>
+          </div>
+        </div>
+      </TabPane>
+    </Tabs>
+    <template #footer>
+      <Button type="primary" @click="saveConfig">确 定</Button>
+      <Button @click="drawerApi.close()">取 消</Button>
+    </template>
+  </Drawer>
+</template>
+<style lang="scss" scoped>
+.config-editable-input {
+  &:focus {
+    outline: 0;
+    border-color: #40a9ff;
+    box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+  }
+}
+</style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
index d76b00ed8..38805fa5f 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
@@ -34,6 +34,8 @@ import {
   TypographyText,
 } from 'ant-design-vue';
 
+import { BpmModelFormType } from '#/utils';
+
 import {
   APPROVE_METHODS,
   APPROVE_TYPE,
@@ -626,11 +628,9 @@ onMounted(() => {
               name="roleIds"
             >
               <Select
-                filterable
                 v-model:value="configForm.roleIds"
                 clearable
                 mode="multiple"
-                style="width: 100%"
               >
                 <SelectOption
                   v-for="item in roleOptions"
@@ -664,10 +664,8 @@ onMounted(() => {
                 }"
                 empty-text="加载中，请稍后"
                 multiple
-                node-key="id"
                 :check-strictly="true"
                 allow-clear
-                style="width: 100%"
                 tree-checkable
               />
             </FormItem>
@@ -677,11 +675,9 @@ onMounted(() => {
               name="postIds"
             >
               <Select
-                filterable
                 v-model:value="configForm.postIds"
                 clearable
                 mode="multiple"
-                style="width: 100%"
               >
                 <SelectOption
                   v-for="item in postOptions"
@@ -699,11 +695,9 @@ onMounted(() => {
               name="userIds"
             >
               <Select
-                filterable
                 v-model:value="configForm.userIds"
                 clearable
                 mode="multiple"
-                style="width: 100%"
               >
                 <SelectOption
                   v-for="item in userOptions"
@@ -723,11 +717,9 @@ onMounted(() => {
               name="userGroups"
             >
               <Select
-                filterable
                 v-model:value="configForm.userGroups"
                 clearable
                 mode="multiple"
-                style="width: 100%"
               >
                 <SelectOption
                   v-for="item in userGroupOptions"
@@ -746,12 +738,7 @@ onMounted(() => {
               label="表单内用户字段"
               name="formUser"
             >
-              <Select
-                filterable
-                v-model:value="configForm.formUser"
-                clearable
-                style="width: 100%"
-              >
+              <Select v-model:value="configForm.formUser" clearable>
                 <SelectOption
                   v-for="(item, idx) in userFieldOnFormOptions"
                   :key="idx"
@@ -771,12 +758,7 @@ onMounted(() => {
               label="表单内部门字段"
               name="formDept"
             >
-              <Select
-                filterable
-                v-model:value="configForm.formDept"
-                clearable
-                style="width: 100%"
-              >
+              <Select v-model:value="configForm.formDept" clearable>
                 <SelectOption
                   v-for="(item, idx) in deptFieldOnFormOptions"
                   :key="idx"
@@ -802,7 +784,7 @@ onMounted(() => {
               :label="deptLevelLabel!"
               name="deptLevel"
             >
-              <Select filterable v-model:value="configForm.deptLevel" clearable>
+              <Select v-model:value="configForm.deptLevel" clearable>
                 <SelectOption
                   v-for="(item, index) in MULTI_LEVEL_DEPT"
                   :key="index"
@@ -821,11 +803,7 @@ onMounted(() => {
               label="流程表达式"
               name="expression"
             >
-              <Textarea
-                v-model:value="configForm.expression"
-                clearable
-                style="width: 100%"
-              />
+              <Textarea v-model:value="configForm.expression" clearable />
             </FormItem>
             <!-- 多人审批/办理 方式 -->
             <FormItem :label="`多人${nodeTypeName}方式`" name="approveMethod">
@@ -890,12 +868,7 @@ onMounted(() => {
                 label="驳回节点"
                 name="returnNodeId"
               >
-                <Select
-                  filterable
-                  v-model:value="configForm.returnNodeId"
-                  clearable
-                  style="width: 100%"
-                >
+                <Select v-model:value="configForm.returnNodeId" clearable>
                   <SelectOption
                     v-for="item in returnTaskList"
                     :key="item.id"
@@ -963,8 +936,7 @@ onMounted(() => {
                   <Col>
                     <FormItem name="timeDuration">
                       <InputNumber
-                        class="mr-2"
-                        :style="{ width: '100px' }"
+                        class="mr-2 mt-0.5"
                         v-model:value="configForm.timeDuration"
                         :min="1"
                         controls-position="right"
@@ -973,7 +945,6 @@ onMounted(() => {
                   </Col>
                   <Col>
                     <Select
-                      filterable
                       v-model:value="timeUnit"
                       class="mr-2"
                       :style="{ width: '100px' }"
@@ -1040,11 +1011,9 @@ onMounted(() => {
               name="assignEmptyHandlerUserIds"
             >
               <Select
-                filterable
                 v-model:value="configForm.assignEmptyHandlerUserIds"
                 clearable
                 mode="multiple"
-                style="width: 100%"
               >
                 <SelectOption
                   v-for="item in userOptions"
@@ -1151,7 +1120,11 @@ onMounted(() => {
           </div>
         </div>
       </TabPane>
-      <TabPane tab="表单字段权限" key="fields" v-if="formType === 10">
+      <TabPane
+        tab="表单字段权限"
+        key="fields"
+        v-if="formType === BpmModelFormType.NORMAL"
+      >
         <div class="p-1">
           <div class="mb-4 text-[16px] font-bold">字段权限</div>
 
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/copy-task-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/copy-task-node.vue
new file mode 100644
index 000000000..a3226a576
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/copy-task-node.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input } from 'ant-design-vue';
+
+import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import CopyTaskNodeConfig from '../nodes-config/copy-task-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({
+  name: 'CopyTaskNode',
+});
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+// 定义事件，更新父组件。
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+// 监控节点的变化
+const currentNode = useWatchNode(props);
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(
+  currentNode,
+  NodeType.COPY_TASK_NODE,
+);
+
+const nodeSetting = ref();
+// 打开节点配置
+const openNodeConfig = () => {
+  if (readonly) {
+    return;
+  }
+  nodeSetting.value.showCopyTaskNodeConfig(currentNode.value);
+  nodeSetting.value.openDrawer();
+};
+
+// 删除节点。更新当前节点为孩子节点
+const deleteNode = () => {
+  emits('update:flowNode', currentNode.value.childNode);
+};
+</script>
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`,
+        ]"
+      >
+        <div class="node-title-container">
+          <div class="node-title-icon copy-task">
+            <span class="iconfont icon-copy"></span>
+          </div>
+          <Input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.COPY_TASK_NODE) }}
+          </div>
+          <IconifyIcon v-if="!readonly" icon="ep:arrow-right-bold" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="ep:circle-close-filled"
+              :size="18"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <CopyTaskNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
index 9060b6c62..890b7ad07 100644
--- a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
@@ -3,6 +3,7 @@ import type { SimpleFlowNode } from '../consts';
 
 import { NodeType } from '../consts';
 import { useWatchNode } from '../helpers';
+import CopyTaskNode from './nodes/copy-task-node.vue';
 import EndEventNode from './nodes/end-event-node.vue';
 import StartUserNode from './nodes/start-user-node.vue';
 import UserTaskNode from './nodes/user-task-node.vue';
@@ -77,11 +78,11 @@ const recursiveFindParentNode = (
     @find-parent-node="findParentNode"
   />
   <!-- 抄送节点 -->
-  <!-- <CopyTaskNode
+  <CopyTaskNode
     v-if="currentNode && currentNode.type === NodeType.COPY_TASK_NODE"
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
-  /> -->
+  />
   <!-- 条件节点 -->
   <!-- <ExclusiveNode
     v-if="currentNode && currentNode.type === NodeType.CONDITION_BRANCH_NODE"

From 2aaf8aad8b7761e9b9f18b149f1fcb5c97f5d916 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Thu, 29 May 2025 11:32:56 +0800
Subject: [PATCH 10/53] =?UTF-8?q?perf:=20=E5=90=88=E5=B9=B6=20select-modal?=
 =?UTF-8?q?=20=E6=96=B9=E4=BE=BF=E5=90=8E=E7=BB=AD=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=9B=B4=E5=A4=9A=E7=B1=BB=E4=BC=BC=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{dept-select-modal => select-modal}/dept-select-modal.vue  | 0
 .../components/{dept-select-modal => select-modal}/index.ts    | 1 +
 .../{user-select-modal => select-modal}/user-select-modal.vue  | 0
 apps/web-antd/src/components/user-select-modal/index.ts        | 1 -
 apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue  | 3 +--
 .../src/views/bpm/processInstance/detail/modules/time-line.vue | 2 +-
 6 files changed, 3 insertions(+), 4 deletions(-)
 rename apps/web-antd/src/components/{dept-select-modal => select-modal}/dept-select-modal.vue (100%)
 rename apps/web-antd/src/components/{dept-select-modal => select-modal}/index.ts (50%)
 rename apps/web-antd/src/components/{user-select-modal => select-modal}/user-select-modal.vue (100%)
 delete mode 100644 apps/web-antd/src/components/user-select-modal/index.ts

diff --git a/apps/web-antd/src/components/dept-select-modal/dept-select-modal.vue b/apps/web-antd/src/components/select-modal/dept-select-modal.vue
similarity index 100%
rename from apps/web-antd/src/components/dept-select-modal/dept-select-modal.vue
rename to apps/web-antd/src/components/select-modal/dept-select-modal.vue
diff --git a/apps/web-antd/src/components/dept-select-modal/index.ts b/apps/web-antd/src/components/select-modal/index.ts
similarity index 50%
rename from apps/web-antd/src/components/dept-select-modal/index.ts
rename to apps/web-antd/src/components/select-modal/index.ts
index d373be445..2b6e91893 100644
--- a/apps/web-antd/src/components/dept-select-modal/index.ts
+++ b/apps/web-antd/src/components/select-modal/index.ts
@@ -1 +1,2 @@
 export { default as DeptSelectModal } from './dept-select-modal.vue';
+export { default as UserSelectModal } from './user-select-modal.vue';
diff --git a/apps/web-antd/src/components/user-select-modal/user-select-modal.vue b/apps/web-antd/src/components/select-modal/user-select-modal.vue
similarity index 100%
rename from apps/web-antd/src/components/user-select-modal/user-select-modal.vue
rename to apps/web-antd/src/components/select-modal/user-select-modal.vue
diff --git a/apps/web-antd/src/components/user-select-modal/index.ts b/apps/web-antd/src/components/user-select-modal/index.ts
deleted file mode 100644
index 9cb1c93fd..000000000
--- a/apps/web-antd/src/components/user-select-modal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as UserSelectModal } from './user-select-modal.vue';
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue b/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
index f31ad4d7c..485dcf470 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
@@ -22,9 +22,8 @@ import {
   Tooltip,
 } from 'ant-design-vue';
 
-import { DeptSelectModal } from '#/components/dept-select-modal';
+import { DeptSelectModal, UserSelectModal } from '#/components/select-modal';
 import { ImageUpload } from '#/components/upload';
-import { UserSelectModal } from '#/components/user-select-modal';
 import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '#/utils';
 
 const props = defineProps({
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
index 23b3aa217..6edd28af0 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
@@ -10,7 +10,7 @@ import { formatDateTime, isEmpty } from '@vben/utils';
 
 import { Avatar, Button, Image, Timeline, Tooltip } from 'ant-design-vue';
 
-import { UserSelectModal } from '#/components/user-select-modal';
+import { UserSelectModal } from '#/components/select-modal';
 import {
   BpmCandidateStrategyEnum,
   BpmNodeTypeEnum,

From c18b6a9b75ed067b295b7c7c98444f380e8b35de Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Thu, 29 May 2025 14:51:23 +0800
Subject: [PATCH 11/53] feat: crm

---
 apps/web-antd/src/views/crm/backlog/data.ts   | 128 +---------
 apps/web-antd/src/views/crm/business/data.ts  |  22 +-
 apps/web-antd/src/views/crm/contact/index.vue | 227 +++++++++++++++---
 apps/web-antd/src/views/crm/customer/data.ts  |  47 +---
 .../web-antd/src/views/crm/customer/index.vue | 105 ++++----
 5 files changed, 272 insertions(+), 257 deletions(-)

diff --git a/apps/web-antd/src/views/crm/backlog/data.ts b/apps/web-antd/src/views/crm/backlog/data.ts
index b56566f14..7bf354c3b 100644
--- a/apps/web-antd/src/views/crm/backlog/data.ts
+++ b/apps/web-antd/src/views/crm/backlog/data.ts
@@ -133,14 +133,12 @@ export function useClueFollowColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'name',
       title: '线索名称',
-      minWidth: 160,
       fixed: 'left',
       slots: { default: 'name' },
     },
     {
       field: 'source',
       title: '线索来源',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_SOURCE },
@@ -149,27 +147,22 @@ export function useClueFollowColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'mobile',
       title: '手机',
-      minWidth: 120,
     },
     {
       field: 'telephone',
       title: '电话',
-      minWidth: 130,
     },
     {
       field: 'email',
       title: '邮箱',
-      minWidth: 180,
     },
     {
       field: 'detailAddress',
       title: '地址',
-      minWidth: 180,
     },
     {
       field: 'industryId',
       title: '客户行业',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
@@ -178,7 +171,6 @@ export function useClueFollowColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'level',
       title: '客户级别',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_LEVEL },
@@ -187,51 +179,42 @@ export function useClueFollowColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'contactNextTime',
       title: '下次联系时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'remark',
       title: '备注',
-      minWidth: 200,
     },
     {
       field: 'contactLastTime',
       title: '最后跟进时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'contactLastContent',
       title: '最后跟进记录',
-      minWidth: 200,
     },
     {
       field: 'ownerUserName',
       title: '负责人',
-      minWidth: 100,
     },
     {
       field: 'ownerUserDeptName',
       title: '所属部门',
-      minWidth: 100,
     },
     {
       field: 'updateTime',
       title: '更新时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'creatorName',
       title: '创建人',
-      minWidth: 100,
     },
   ];
 }
@@ -276,124 +259,96 @@ export function useContractColumns<T = CrmContractApi.Contract>(
     {
       field: 'no',
       title: '合同编号',
-      minWidth: 160,
       fixed: 'left',
     },
     {
       field: 'name',
       title: '合同名称',
-      minWidth: 160,
-      slots: {
-        default: 'name',
-      },
+      slots: { default: 'name' },
     },
     {
       field: 'customerName',
       title: '客户名称',
-      minWidth: 160,
-      slots: {
-        default: 'customerName',
-      },
+      slots: { default: 'customerName' },
     },
     {
       field: 'businessName',
       title: '商机名称',
-      minWidth: 160,
-      slots: {
-        default: 'businessName',
-      },
+      slots: { default: 'businessName' },
     },
     {
       field: 'price',
       title: '合同金额（元）',
-      minWidth: 120,
       formatter: 'formatNumber',
     },
     {
       field: 'orderDate',
       title: '下单时间',
-      minWidth: 120,
       formatter: 'formatDateTime',
     },
     {
       field: 'startTime',
       title: '合同开始时间',
-      minWidth: 120,
       formatter: 'formatDateTime',
     },
     {
       field: 'endTime',
       title: '合同结束时间',
-      minWidth: 120,
       formatter: 'formatDateTime',
     },
     {
       field: 'contactName',
       title: '客户签约人',
-      minWidth: 130,
-      slots: {
-        default: 'contactName',
-      },
+      slots: { default: 'contactName' },
     },
     {
       field: 'signUserName',
       title: '公司签约人',
-      minWidth: 130,
     },
     {
       field: 'remark',
       title: '备注',
-      minWidth: 200,
     },
     {
       field: 'totalReceivablePrice',
       title: '已回款金额（元）',
-      minWidth: 140,
       formatter: 'formatNumber',
     },
     {
       field: 'noReceivablePrice',
       title: '未回款金额（元）',
-      minWidth: 120,
       formatter: 'formatNumber',
     },
     {
       field: 'contactLastTime',
       title: '最后跟进时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'ownerUserName',
       title: '负责人',
-      minWidth: 120,
     },
     {
       field: 'ownerUserDeptName',
       title: '所属部门',
-      minWidth: 100,
     },
     {
       field: 'updateTime',
       title: '更新时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'creatorName',
       title: '创建人',
-      minWidth: 100,
     },
     {
       field: 'auditStatus',
       title: '合同状态',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
@@ -402,7 +357,7 @@ export function useContractColumns<T = CrmContractApi.Contract>(
     {
       field: 'operation',
       title: '操作',
-      minWidth: 130,
+      width: 130,
       align: 'center',
       fixed: 'right',
       cellRender: {
@@ -487,15 +442,11 @@ export function useCustomerColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'name',
       title: '客户名称',
-      minWidth: 160,
-      slots: {
-        default: 'name',
-      },
+      slots: { default: 'name' },
     },
     {
       field: 'source',
       title: '客户来源',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_SOURCE },
@@ -504,22 +455,18 @@ export function useCustomerColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'mobile',
       title: '手机',
-      minWidth: 120,
     },
     {
       field: 'telephone',
       title: '电话',
-      minWidth: 130,
     },
     {
       field: 'email',
       title: '邮箱',
-      minWidth: 180,
     },
     {
       field: 'level',
       title: '客户级别',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_LEVEL },
@@ -528,7 +475,6 @@ export function useCustomerColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'industryId',
       title: '客户行业',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
@@ -537,18 +483,15 @@ export function useCustomerColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'contactNextTime',
       title: '下次联系时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'remark',
       title: '备注',
-      minWidth: 200,
     },
     {
       field: 'lockStatus',
       title: '锁定状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
@@ -557,7 +500,6 @@ export function useCustomerColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'dealStatus',
       title: '成交状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
@@ -566,50 +508,41 @@ export function useCustomerColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'contactLastTime',
       title: '最后跟进时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'contactLastContent',
       title: '最后跟进记录',
-      minWidth: 200,
     },
     {
       field: 'detailAddress',
       title: '地址',
-      minWidth: 200,
     },
     {
       field: 'poolDay',
       title: '距离进入公海天数',
-      minWidth: 180,
     },
     {
       field: 'ownerUserName',
       title: '负责人',
-      minWidth: 100,
     },
     {
       field: 'ownerUserDeptName',
       title: '所属部门',
-      minWidth: 100,
     },
     {
       field: 'updateTime',
       title: '更新时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'creatorName',
       title: '创建人',
-      minWidth: 100,
     },
   ];
 }
@@ -638,44 +571,32 @@ export function useReceivableAuditColumns<T = CrmReceivableApi.Receivable>(
     {
       field: 'no',
       title: '回款编号',
-      minWidth: 180,
       fixed: 'left',
-      slots: {
-        default: 'no',
-      },
+      slots: { default: 'no' },
     },
     {
       field: 'customerName',
       title: '客户名称',
-      minWidth: 120,
-      slots: {
-        default: 'customerName',
-      },
+      slots: { default: 'customerName' },
     },
     {
       field: 'contractNo',
       title: '合同编号',
-      minWidth: 180,
-      slots: {
-        default: 'contractNo',
-      },
+      slots: { default: 'contractNo' },
     },
     {
       field: 'returnTime',
       title: '回款日期',
-      minWidth: 150,
       formatter: 'formatDateTime',
     },
     {
       field: 'price',
       title: '回款金额(元)',
-      minWidth: 140,
       formatter: 'formatNumber',
     },
     {
       field: 'returnType',
       title: '回款方式',
-      minWidth: 130,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
@@ -684,45 +605,37 @@ export function useReceivableAuditColumns<T = CrmReceivableApi.Receivable>(
     {
       field: 'remark',
       title: '备注',
-      minWidth: 200,
     },
     {
       field: 'contract.totalPrice',
       title: '合同金额（元）',
-      minWidth: 140,
       formatter: 'formatNumber',
     },
     {
       field: 'ownerUserName',
       title: '负责人',
-      minWidth: 120,
     },
     {
       field: 'ownerUserDeptName',
       title: '所属部门',
-      minWidth: 100,
     },
     {
       field: 'updateTime',
       title: '更新时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'creatorName',
       title: '创建人',
-      minWidth: 120,
     },
     {
       field: 'auditStatus',
       title: '回款状态',
-      minWidth: 120,
       fixed: 'right',
       cellRender: {
         name: 'CellDict',
@@ -778,52 +691,40 @@ export function useReceivablePlanRemindColumns<T = CrmReceivableApi.Receivable>(
     {
       field: 'customerName',
       title: '客户名称',
-      minWidth: 160,
       fixed: 'left',
-      slots: {
-        default: 'customerName',
-      },
+      slots: { default: 'customerName' },
     },
     {
       field: 'contractNo',
       title: '合同编号',
-      minWidth: 200,
     },
     {
       field: 'period',
       title: '期数',
-      minWidth: 160,
-      slots: {
-        default: 'period',
-      },
+      slots: { default: 'period' },
     },
     {
       field: 'price',
       title: '计划回款金额（元）',
-      minWidth: 120,
       formatter: 'formatNumber',
     },
     {
       field: 'returnTime',
       title: '计划回款日期',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'remindDays',
       title: '提前几天提醒',
-      minWidth: 150,
     },
     {
       field: 'remindTime',
       title: '提醒日期',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'returnType',
       title: '回款方式',
-      minWidth: 120,
       fixed: 'right',
       cellRender: {
         name: 'CellDict',
@@ -833,41 +734,34 @@ export function useReceivablePlanRemindColumns<T = CrmReceivableApi.Receivable>(
     {
       field: 'remark',
       title: '备注',
-      minWidth: 200,
     },
     {
       field: 'ownerUserName',
       title: '负责人',
-      minWidth: 100,
     },
     {
       field: 'receivable.price',
       title: '实际回款金额（元）',
-      minWidth: 160,
       formatter: 'formatNumber',
     },
     {
       field: 'receivable.returnTime',
       title: '实际回款日期',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'updateTime',
       title: '更新时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'creatorName',
       title: '创建人',
-      minWidth: 100,
     },
     {
       field: 'operation',
diff --git a/apps/web-antd/src/views/crm/business/data.ts b/apps/web-antd/src/views/crm/business/data.ts
index 4906fed70..0dd176d4b 100644
--- a/apps/web-antd/src/views/crm/business/data.ts
+++ b/apps/web-antd/src/views/crm/business/data.ts
@@ -99,87 +99,69 @@ export function useGridColumns<T = CrmBusinessApi.Business>(
     {
       field: 'name',
       title: '商机名称',
-      minWidth: 160,
       fixed: 'left',
-      slots: {
-        default: 'name',
-      },
+      slots: { default: 'name' },
     },
     {
       field: 'customerName',
       title: '客户名称',
-      minWidth: 120,
       fixed: 'left',
-      slots: {
-        default: 'customerName',
-      },
+      slots: { default: 'customerName' },
     },
     {
       field: 'totalPrice',
       title: '商机金额（元）',
-      minWidth: 140,
       formatter: 'formatNumber',
     },
     {
       field: 'dealTime',
       title: '预计成交日期',
-      minWidth: 180,
       formatter: 'formatDate',
     },
     {
       field: 'remark',
       title: '备注',
-      minWidth: 200,
     },
     {
       field: 'contactNextTime',
       title: '下次联系时间',
-      minWidth: 180,
       formatter: 'formatDate',
     },
     {
       field: 'ownerUserName',
       title: '负责人',
-      minWidth: 100,
     },
     {
       field: 'ownerUserDeptName',
       title: '所属部门',
-      minWidth: 100,
     },
     {
       field: 'contactLastTime',
       title: '最后跟进时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'updateTime',
       title: '更新时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'creatorName',
       title: '创建人',
-      minWidth: 100,
     },
     {
       field: 'statusTypeName',
       title: '商机状态组',
-      minWidth: 140,
       fixed: 'right',
     },
     {
       field: 'statusName',
       title: '商机阶段',
-      minWidth: 120,
       fixed: 'right',
     },
     {
diff --git a/apps/web-antd/src/views/crm/contact/index.vue b/apps/web-antd/src/views/crm/contact/index.vue
index c17be72b3..21fd5acd4 100644
--- a/apps/web-antd/src/views/crm/contact/index.vue
+++ b/apps/web-antd/src/views/crm/contact/index.vue
@@ -1,38 +1,207 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmContactApi } from '#/api/crm/contact';
 
-import { Button } from 'ant-design-vue';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 
+import { Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message, Tabs } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteContact,
+  exportContact,
+  getContactPage,
+} from '#/api/crm/contact';
 import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const { push } = useRouter();
+const sceneType = ref('1');
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportContact(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '联系人.xls', source: data });
+}
+
+/** 创建联系人 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑联系人 */
+function handleEdit(row: CrmContactApi.Contact) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除联系人 */
+async function handleDelete(row: CrmContactApi.Contact) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteContact(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 查看联系人详情 */
+function handleDetail(row: CrmContactApi.Contact) {
+  push({ name: 'CrmContactDetail', params: { id: row.id } });
+}
+
+/** 查看客户详情 */
+function handleCustomerDetail(row: CrmContactApi.Contact) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getContactPage({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            sceneType: sceneType.value,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmContactApi.Contact>,
+});
+
+function onChangeSceneType(key: number | string) {
+  sceneType.value = key.toString();
+  gridApi.query();
+}
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【客户】客户管理、公海客户"
-      url="https://doc.iocoder.cn/crm/customer/"
-    />
-    <DocAlert
-      title="【通用】数据权限"
-      url="https://doc.iocoder.cn/crm/permission/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/contact/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/contact/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【客户】客户管理、公海客户"
+        url="https://doc.iocoder.cn/crm/customer/"
+      />
+      <DocAlert
+        title="【通用】数据权限"
+        url="https://doc.iocoder.cn/crm/permission/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+    <Grid>
+      <template #top>
+        <Tabs class="border-none" @change="onChangeSceneType">
+          <Tabs.TabPane tab="我负责的" key="1" />
+          <Tabs.TabPane tab="我参与的" key="2" />
+          <Tabs.TabPane tab="下属负责的" key="3" />
+        </Tabs>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['联系人']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:contact:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['crm:contact:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #name="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.name }}
+        </Button>
+      </template>
+      <template #customerName="{ row }">
+        <Button type="link" @click="handleCustomerDetail(row)">
+          {{ row.customerName }}
+        </Button>
+      </template>
+      <template #parentId="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.parentId }}
+        </Button>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:contact:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:contact:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/customer/data.ts b/apps/web-antd/src/views/crm/customer/data.ts
index c1f505a48..551569da0 100644
--- a/apps/web-antd/src/views/crm/customer/data.ts
+++ b/apps/web-antd/src/views/crm/customer/data.ts
@@ -1,11 +1,9 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { CrmCustomerApi } from '#/api/crm/customer';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
 
-import { useAccess } from '@vben/access';
 import { formatDateTime } from '@vben/utils';
 
 import { getAreaTree } from '#/api/system/area';
@@ -13,8 +11,6 @@ import { getSimpleUserList } from '#/api/system/user';
 import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
-
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -158,14 +154,11 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = CrmCustomerApi.Customer>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'name',
       title: '客户名称',
-      minWidth: 160,
       fixed: 'left',
       slots: {
         default: 'name',
@@ -174,7 +167,6 @@ export function useGridColumns<T = CrmCustomerApi.Customer>(
     {
       field: 'source',
       title: '客户来源',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_SOURCE },
@@ -183,27 +175,22 @@ export function useGridColumns<T = CrmCustomerApi.Customer>(
     {
       field: 'mobile',
       title: '手机',
-      minWidth: 120,
     },
     {
       field: 'telephone',
       title: '电话',
-      minWidth: 130,
     },
     {
       field: 'email',
       title: '邮箱',
-      minWidth: 180,
     },
     {
       field: 'detailAddress',
       title: '地址',
-      minWidth: 180,
     },
     {
       field: 'industryId',
       title: '客户行业',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
@@ -212,7 +199,6 @@ export function useGridColumns<T = CrmCustomerApi.Customer>(
     {
       field: 'level',
       title: '客户级别',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_LEVEL },
@@ -221,61 +207,36 @@ export function useGridColumns<T = CrmCustomerApi.Customer>(
     {
       field: 'ownerUserName',
       title: '负责人',
-      minWidth: 100,
     },
     {
       field: 'ownerUserDeptName',
       title: '所属部门',
-      minWidth: 100,
     },
     {
       field: 'contactNextTime',
       title: '下次联系时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'contactLastTime',
       title: '最后跟进时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'updateTime',
       title: '更新时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
-      field: 'operation',
       title: '操作',
-      width: 130,
+      width: 180,
       fixed: 'right',
-      align: 'center',
-      cellRender: {
-        attrs: {
-          nameField: 'name',
-          nameTitle: '线索',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'edit',
-            show: hasAccessByCodes(['crm:clue:update']),
-          },
-          {
-            code: 'delete',
-            show: hasAccessByCodes(['crm:clue:delete']),
-          },
-        ],
-      },
+      slots: { default: 'actions' },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/customer/index.vue b/apps/web-antd/src/views/crm/customer/index.vue
index df3c8e7ee..5795fdb0c 100644
--- a/apps/web-antd/src/views/crm/customer/index.vue
+++ b/apps/web-antd/src/views/crm/customer/index.vue
@@ -1,20 +1,16 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmCustomerApi } from '#/api/crm/customer';
 
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus } from '@vben/icons';
 import { downloadFileFromBlobPart } from '@vben/utils';
 
 import { Button, message, Tabs } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteCustomer,
   exportCustomer,
@@ -40,23 +36,23 @@ function onRefresh() {
 }
 
 /** 导出表格 */
-async function onExport() {
+async function handleExport() {
   const data = await exportCustomer(await gridApi.formApi.getValues());
   downloadFileFromBlobPart({ fileName: '客户.xls', source: data });
 }
 
 /** 创建客户 */
-function onCreate() {
+function handleCreate() {
   formModalApi.setData(null).open();
 }
 
 /** 编辑客户 */
-function onEdit(row: CrmCustomerApi.Customer) {
+function handleEdit(row: CrmCustomerApi.Customer) {
   formModalApi.setData(row).open();
 }
 
 /** 删除客户 */
-async function onDelete(row: CrmCustomerApi.Customer) {
+async function handleDelete(row: CrmCustomerApi.Customer) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     key: 'action_key_msg',
@@ -74,33 +70,16 @@ async function onDelete(row: CrmCustomerApi.Customer) {
 }
 
 /** 查看客户详情 */
-function onDetail(row: CrmCustomerApi.Customer) {
+function handleDetail(row: CrmCustomerApi.Customer) {
   push({ name: 'CrmCustomerDetail', params: { id: row.id } });
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<CrmCustomerApi.Customer>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -145,7 +124,6 @@ function onChangeSceneType(key: number | string) {
     </template>
 
     <FormModal @success="onRefresh" />
-
     <Grid>
       <template #top>
         <Tabs class="border-none" @change="onChangeSceneType">
@@ -155,29 +133,60 @@ function onChangeSceneType(key: number | string) {
         </Tabs>
       </template>
       <template #toolbar-tools>
-        <Button
-          type="primary"
-          @click="onCreate"
-          v-access:code="['crm:customer:create']"
-        >
-          <Plus class="size-5" />
-          {{ $t('ui.actionTitle.create', ['客户']) }}
-        </Button>
-        <Button
-          type="primary"
-          class="ml-2"
-          @click="onExport"
-          v-access:code="['crm:customer:export']"
-        >
-          <Download class="size-5" />
-          {{ $t('ui.actionTitle.export') }}
-        </Button>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['客户']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:customer:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['crm:customer:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
       </template>
       <template #name="{ row }">
-        <Button type="link" @click="onDetail(row)">
+        <Button type="link" @click="handleDetail(row)">
           {{ row.name }}
         </Button>
       </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:customer:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:customer:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
     </Grid>
   </Page>
 </template>

From 8be5c1915410658ec11aef229421ca6de4537885 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Thu, 29 May 2025 14:51:33 +0800
Subject: [PATCH 12/53] feat: crm

---
 apps/web-antd/src/views/crm/contact/data.ts   | 385 ++++++++++++++++++
 .../src/views/crm/contact/modules/form.vue    |  81 ++++
 2 files changed, 466 insertions(+)
 create mode 100644 apps/web-antd/src/views/crm/contact/data.ts
 create mode 100644 apps/web-antd/src/views/crm/contact/modules/form.vue

diff --git a/apps/web-antd/src/views/crm/contact/data.ts b/apps/web-antd/src/views/crm/contact/data.ts
new file mode 100644
index 000000000..956f32333
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contact/data.ts
@@ -0,0 +1,385 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { formatDateTime } from '@vben/utils';
+
+import { getSimpleContactList } from '#/api/crm/contact';
+import { getCustomerSimpleList } from '#/api/crm/customer';
+import { getAreaTree } from '#/api/system/area';
+import { getSimpleUserList } from '#/api/system/user';
+import { DictTag } from '#/components/dict-tag';
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '联系人姓名',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'ownerUserId',
+      label: '负责人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleUserList(),
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
+      },
+    },
+    {
+      fieldName: 'customerId',
+      label: '客户名称',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getCustomerSimpleList(),
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
+      },
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机',
+      component: 'Input',
+    },
+    {
+      fieldName: 'telephone',
+      label: '电话',
+      component: 'Input',
+    },
+    {
+      fieldName: 'email',
+      label: '邮箱',
+      component: 'Input',
+    },
+    {
+      fieldName: 'wechat',
+      label: '微信',
+      component: 'Input',
+    },
+    {
+      fieldName: 'qq',
+      label: 'QQ',
+      component: 'Input',
+    },
+    {
+      fieldName: 'post',
+      label: '职位',
+      component: 'Input',
+    },
+    {
+      fieldName: 'master',
+      label: '关键决策人',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+      },
+    },
+    {
+      fieldName: 'sex',
+      label: '性别',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+      },
+    },
+    {
+      fieldName: 'parentId',
+      label: '直属上级',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleContactList(),
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+    },
+    {
+      fieldName: 'areaId',
+      label: '地址',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        api: () => getAreaTree(),
+        fieldNames: { label: 'name', value: 'id', children: 'children' },
+      },
+    },
+    {
+      fieldName: 'detailAddress',
+      label: '详细地址',
+      component: 'Input',
+    },
+    {
+      fieldName: 'contactNextTime',
+      label: '下次联系时间',
+      component: 'DatePicker',
+      componentProps: {
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '客户',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getCustomerSimpleList(),
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '姓名',
+      component: 'Input',
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'telephone',
+      label: '电话',
+      component: 'Input',
+    },
+    {
+      fieldName: 'wechat',
+      label: '微信',
+      component: 'Input',
+    },
+    {
+      fieldName: 'email',
+      label: '电子邮箱',
+      component: 'Input',
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '联系人姓名',
+      fixed: 'left',
+      slots: { default: 'name' },
+    },
+    {
+      field: 'customerName',
+      title: '客户名称',
+      fixed: 'left',
+      slots: { default: 'customerName' },
+    },
+    {
+      field: 'sex',
+      title: '性别',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_USER_SEX },
+      },
+    },
+    {
+      field: 'mobile',
+      title: '手机',
+    },
+    {
+      field: 'telephone',
+      title: '电话',
+    },
+    {
+      field: 'email',
+      title: '邮箱',
+    },
+    {
+      field: 'post',
+      title: '职位',
+    },
+    {
+      field: 'detailAddress',
+      title: '地址',
+    },
+    {
+      field: 'master',
+      title: '关键决策人',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'parentId',
+      title: '直属上级',
+      slots: { default: 'parentId' },
+    },
+    {
+      field: 'ownerUserName',
+      title: '负责人',
+    },
+    {
+      field: 'ownerUserDeptName',
+      title: '所属部门',
+    },
+    {
+      field: 'contactNextTime',
+      title: '下次联系时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'remark',
+      title: '备注',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [...useDetailBaseSchema(), ...useDetailSystemSchema()];
+}
+
+/** 详情页的基础字段 */
+export function useDetailBaseSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'name',
+      label: '客户名称',
+    },
+    {
+      field: 'source',
+      label: '客户来源',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.CRM_CUSTOMER_SOURCE,
+          value: data?.source,
+        }),
+    },
+    {
+      field: 'mobile',
+      label: '手机',
+    },
+    {
+      field: 'telephone',
+      label: '电话',
+    },
+    {
+      field: 'email',
+      label: '邮箱',
+    },
+    {
+      field: 'wechat',
+      label: '微信',
+    },
+    {
+      field: 'qq',
+      label: 'QQ',
+    },
+    {
+      field: 'industryId',
+      label: '客户行业',
+      content: (data) =>
+        h(DictTag, {
+          type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY,
+          value: data?.industryId,
+        }),
+    },
+    {
+      field: 'level',
+      label: '客户级别',
+      content: (data) =>
+        h(DictTag, { type: DICT_TYPE.CRM_CUSTOMER_LEVEL, value: data?.level }),
+    },
+    {
+      field: 'areaName',
+      label: '地址',
+    },
+    {
+      field: 'detailAddress',
+      label: '详细地址',
+    },
+    {
+      field: 'contactNextTime',
+      label: '下次联系时间',
+      content: (data) => formatDateTime(data?.contactNextTime) as string,
+    },
+    {
+      field: 'remark',
+      label: '备注',
+    },
+  ];
+}
+
+/** 详情页的系统字段 */
+export function useDetailSystemSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'ownerUserName',
+      label: '负责人',
+    },
+    {
+      field: 'ownerUserDeptName',
+      label: '所属部门',
+    },
+    {
+      field: 'contactLastTime',
+      label: '最后跟进时间',
+      content: (data) => formatDateTime(data?.contactLastTime) as string,
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      content: (data) => formatDateTime(data?.createTime) as string,
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      content: (data) => formatDateTime(data?.updateTime) as string,
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/contact/modules/form.vue b/apps/web-antd/src/views/crm/contact/modules/form.vue
new file mode 100644
index 000000000..d6a822d66
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contact/modules/form.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { CrmContactApi } from '#/api/crm/contact';
+
+import { computed, ref } from 'vue';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { createContact, getContact, updateContact } from '#/api/crm/contact';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmContactApi.Contact>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['联系人'])
+    : $t('ui.actionTitle.create', ['联系人']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // 一共2列
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as CrmContactApi.Contact;
+    try {
+      await (formData.value?.id ? updateContact(data) : createContact(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<CrmContactApi.Contact>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getContact(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-[40%]">
+    <Form class="mx-4" />
+  </Modal>
+</template>

From b4a77266a17eabc1de4bb34da1a8f9ba0e6cf9b3 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Thu, 29 May 2025 14:52:03 +0800
Subject: [PATCH 13/53] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E6=95=88=E6=9E=9C=20=E5=8F=8A=20formatter=20row=20cel?=
 =?UTF-8?q?lvalue=E7=9A=84=E5=8C=BA=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/bpm/group/data.ts          |  4 ++--
 apps/web-antd/src/views/bpm/task/done/data.ts      |  4 ++--
 apps/web-antd/src/views/bpm/task/manager/data.ts   |  4 ++--
 apps/web-antd/src/views/infra/apiAccessLog/data.ts | 14 +-------------
 apps/web-antd/src/views/infra/apiErrorLog/data.ts  |  9 ---------
 apps/web-antd/src/views/infra/codegen/data.ts      |  8 +-------
 apps/web-antd/src/views/infra/config/data.ts       |  9 ---------
 .../src/views/infra/dataSourceConfig/data.ts       |  5 -----
 .../src/views/infra/demo/demo03/normal/data.ts     |  8 --------
 apps/web-antd/src/views/infra/file/data.ts         | 11 +----------
 apps/web-antd/src/views/infra/fileConfig/data.ts   |  6 ------
 apps/web-antd/src/views/infra/job/data.ts          |  6 ------
 apps/web-antd/src/views/infra/job/logger/data.ts   | 12 +-----------
 apps/web-antd/src/views/member/tag/data.ts         |  3 ---
 apps/web-antd/src/views/pay/demo/order/data.ts     | 10 ----------
 apps/web-antd/src/views/pay/demo/withdraw/data.ts  | 11 -----------
 apps/web-antd/src/views/pay/notify/data.ts         |  9 ---------
 apps/web-antd/src/views/pay/transfer/data.ts       | 11 -----------
 apps/web-antd/src/views/system/area/data.ts        |  2 --
 apps/web-antd/src/views/system/dept/data.ts        |  9 +--------
 apps/web-antd/src/views/system/dict/data.ts        | 14 --------------
 apps/web-antd/src/views/system/loginlog/data.ts    |  7 -------
 .../web-antd/src/views/system/mail/account/data.ts |  8 --------
 apps/web-antd/src/views/system/mail/log/data.ts    |  8 --------
 .../src/views/system/mail/template/data.ts         | 10 +---------
 apps/web-antd/src/views/system/menu/data.ts        |  7 -------
 apps/web-antd/src/views/system/notice/data.ts      |  5 -----
 .../src/views/system/notify/message/data.ts        | 11 -----------
 apps/web-antd/src/views/system/notify/my/data.ts   |  6 ------
 .../src/views/system/notify/template/data.ts       |  9 ---------
 .../src/views/system/oauth2/client/data.ts         |  9 ---------
 .../web-antd/src/views/system/oauth2/token/data.ts |  7 -------
 apps/web-antd/src/views/system/operatelog/data.ts  |  8 --------
 apps/web-antd/src/views/system/post/data.ts        |  7 -------
 apps/web-antd/src/views/system/role/data.ts        |  8 --------
 .../src/views/system/social/client/data.ts         |  7 -------
 apps/web-antd/src/views/system/social/user/data.ts |  6 ------
 apps/web-antd/src/views/system/tenant/data.ts      | 10 ----------
 .../src/views/system/tenantPackage/data.ts         |  5 -----
 apps/web-antd/src/views/system/user/data.ts        |  7 -------
 40 files changed, 12 insertions(+), 302 deletions(-)

diff --git a/apps/web-antd/src/views/bpm/group/data.ts b/apps/web-antd/src/views/bpm/group/data.ts
index 34c0926fb..0bd1fd252 100644
--- a/apps/web-antd/src/views/bpm/group/data.ts
+++ b/apps/web-antd/src/views/bpm/group/data.ts
@@ -123,8 +123,8 @@ export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
       field: 'userIds',
       title: '成员',
       minWidth: 200,
-      formatter: (row) => {
-        return getMemberNames(row.cellValue);
+      formatter: ({ cellValue }) => {
+        return getMemberNames(cellValue);
       },
     },
     {
diff --git a/apps/web-antd/src/views/bpm/task/done/data.ts b/apps/web-antd/src/views/bpm/task/done/data.ts
index f69ceee22..fe59f9119 100644
--- a/apps/web-antd/src/views/bpm/task/done/data.ts
+++ b/apps/web-antd/src/views/bpm/task/done/data.ts
@@ -133,8 +133,8 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
       field: 'durationInMillis',
       title: '耗时',
       minWidth: 180,
-      formatter: ({ row }) => {
-        return `${formatPast2(row.durationInMillis)}`;
+      formatter: ({ cellValue }) => {
+        return `${formatPast2(cellValue)}`;
       },
     },
     {
diff --git a/apps/web-antd/src/views/bpm/task/manager/data.ts b/apps/web-antd/src/views/bpm/task/manager/data.ts
index d06b6dc82..3c4a27e22 100644
--- a/apps/web-antd/src/views/bpm/task/manager/data.ts
+++ b/apps/web-antd/src/views/bpm/task/manager/data.ts
@@ -89,8 +89,8 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
       field: 'durationInMillis',
       title: '耗时',
       minWidth: 180,
-      formatter: ({ row }) => {
-        return `${formatPast2(row.durationInMillis)}`;
+      formatter: ({ cellValue }) => {
+        return `${formatPast2(cellValue)}`;
       },
     },
     {
diff --git a/apps/web-antd/src/views/infra/apiAccessLog/data.ts b/apps/web-antd/src/views/infra/apiAccessLog/data.ts
index df569c12c..05d6b391d 100644
--- a/apps/web-antd/src/views/infra/apiAccessLog/data.ts
+++ b/apps/web-antd/src/views/infra/apiAccessLog/data.ts
@@ -70,17 +70,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '日志编号',
-      minWidth: 100,
     },
     {
       field: 'userId',
       title: '用户编号',
-      minWidth: 100,
     },
     {
       field: 'userType',
       title: '用户类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.USER_TYPE },
@@ -89,34 +86,28 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'applicationName',
       title: '应用名',
-      minWidth: 150,
     },
     {
       field: 'requestMethod',
       title: '请求方法',
-      minWidth: 80,
     },
     {
       field: 'requestUrl',
       title: '请求地址',
-      minWidth: 300,
     },
     {
       field: 'beginTime',
       title: '请求时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'duration',
       title: '执行时长',
-      minWidth: 120,
-      formatter: ({ row }) => `${row.duration} ms`,
+      formatter: ({ cellValue }) => `${cellValue} ms`,
     },
     {
       field: 'resultCode',
       title: '操作结果',
-      minWidth: 150,
       formatter: ({ row }) => {
         return row.resultCode === 0 ? '成功' : `失败(${row.resultMsg})`;
       },
@@ -124,17 +115,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'operateModule',
       title: '操作模块',
-      minWidth: 150,
     },
     {
       field: 'operateName',
       title: '操作名',
-      minWidth: 220,
     },
     {
       field: 'operateType',
       title: '操作类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_OPERATE_TYPE },
diff --git a/apps/web-antd/src/views/infra/apiErrorLog/data.ts b/apps/web-antd/src/views/infra/apiErrorLog/data.ts
index b60d797b6..a22715e41 100644
--- a/apps/web-antd/src/views/infra/apiErrorLog/data.ts
+++ b/apps/web-antd/src/views/infra/apiErrorLog/data.ts
@@ -71,17 +71,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '日志编号',
-      minWidth: 100,
     },
     {
       field: 'userId',
       title: '用户编号',
-      minWidth: 100,
     },
     {
       field: 'userType',
       title: '用户类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.USER_TYPE },
@@ -90,33 +87,27 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'applicationName',
       title: '应用名',
-      minWidth: 150,
     },
     {
       field: 'requestMethod',
       title: '请求方法',
-      minWidth: 80,
     },
     {
       field: 'requestUrl',
       title: '请求地址',
-      minWidth: 200,
     },
     {
       field: 'exceptionTime',
       title: '异常发生时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'exceptionName',
       title: '异常名',
-      minWidth: 180,
     },
     {
       field: 'processStatus',
       title: '处理状态',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS },
diff --git a/apps/web-antd/src/views/infra/codegen/data.ts b/apps/web-antd/src/views/infra/codegen/data.ts
index a5647cf82..a2b50d9c3 100644
--- a/apps/web-antd/src/views/infra/codegen/data.ts
+++ b/apps/web-antd/src/views/infra/codegen/data.ts
@@ -397,34 +397,28 @@ export function useGridColumns(
     {
       field: 'dataSourceConfigId',
       title: '数据源',
-      minWidth: 120,
-      formatter: (row) => getDataSourceConfigName?.(row.cellValue) || '-',
+      formatter: ({ cellValue }) => getDataSourceConfigName?.(cellValue) || '-',
     },
     {
       field: 'tableName',
       title: '表名称',
-      minWidth: 200,
     },
     {
       field: 'tableComment',
       title: '表描述',
-      minWidth: 200,
     },
     {
       field: 'className',
       title: '实体',
-      minWidth: 200,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'updateTime',
       title: '更新时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/infra/config/data.ts b/apps/web-antd/src/views/infra/config/data.ts
index 4ca8a36d6..ae886c47f 100644
--- a/apps/web-antd/src/views/infra/config/data.ts
+++ b/apps/web-antd/src/views/infra/config/data.ts
@@ -122,32 +122,26 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '参数主键',
-      minWidth: 100,
     },
     {
       field: 'category',
       title: '参数分类',
-      minWidth: 120,
     },
     {
       field: 'name',
       title: '参数名称',
-      minWidth: 200,
     },
     {
       field: 'key',
       title: '参数键名',
-      minWidth: 200,
     },
     {
       field: 'value',
       title: '参数键值',
-      minWidth: 150,
     },
     {
       field: 'visible',
       title: '是否可见',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
@@ -156,7 +150,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'type',
       title: '系统内置',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_CONFIG_TYPE },
@@ -165,12 +158,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'remark',
       title: '备注',
-      minWidth: 150,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/infra/dataSourceConfig/data.ts b/apps/web-antd/src/views/infra/dataSourceConfig/data.ts
index 98bb063ea..8ea49f895 100644
--- a/apps/web-antd/src/views/infra/dataSourceConfig/data.ts
+++ b/apps/web-antd/src/views/infra/dataSourceConfig/data.ts
@@ -58,27 +58,22 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '主键编号',
-      minWidth: 100,
     },
     {
       field: 'name',
       title: '数据源名称',
-      minWidth: 150,
     },
     {
       field: 'url',
       title: '数据源连接',
-      minWidth: 300,
     },
     {
       field: 'username',
       title: '用户名',
-      minWidth: 120,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/infra/demo/demo03/normal/data.ts b/apps/web-antd/src/views/infra/demo/demo03/normal/data.ts
index 9d515e49d..8aa1eeaf1 100644
--- a/apps/web-antd/src/views/infra/demo/demo03/normal/data.ts
+++ b/apps/web-antd/src/views/infra/demo/demo03/normal/data.ts
@@ -111,17 +111,14 @@ export function useGridColumns(
     {
       field: 'id',
       title: '编号',
-      minWidth: 120,
     },
     {
       field: 'name',
       title: '名字',
-      minWidth: 120,
     },
     {
       field: 'sex',
       title: '性别',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_USER_SEX },
@@ -130,18 +127,15 @@ export function useGridColumns(
     {
       field: 'birthday',
       title: '出生日期',
-      minWidth: 120,
       formatter: 'formatDateTime',
     },
     {
       field: 'description',
       title: '简介',
-      minWidth: 120,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 120,
       formatter: 'formatDateTime',
     },
     {
@@ -183,13 +177,11 @@ export function useDemo03CourseGridEditColumns(
     {
       field: 'name',
       title: '名字',
-      minWidth: 120,
       slots: { default: 'name' },
     },
     {
       field: 'score',
       title: '分数',
-      minWidth: 120,
       slots: { default: 'score' },
     },
     {
diff --git a/apps/web-antd/src/views/infra/file/data.ts b/apps/web-antd/src/views/infra/file/data.ts
index 912e1c949..3b9eecb1e 100644
--- a/apps/web-antd/src/views/infra/file/data.ts
+++ b/apps/web-antd/src/views/infra/file/data.ts
@@ -57,24 +57,20 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'name',
       title: '文件名',
-      minWidth: 150,
     },
     {
       field: 'path',
       title: '文件路径',
-      minWidth: 200,
       showOverflow: true,
     },
     {
       field: 'url',
       title: 'URL',
-      minWidth: 200,
       showOverflow: true,
     },
     {
       field: 'size',
       title: '文件大小',
-      minWidth: 80,
       formatter: ({ cellValue }) => {
         // TODO @芋艿：后续优化下
         if (!cellValue) return '0 B';
@@ -88,20 +84,15 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'type',
       title: '文件类型',
-      minWidth: 120,
     },
     {
       field: 'file-content',
       title: '文件内容',
-      minWidth: 120,
-      slots: {
-        default: 'file-content',
-      },
+      slots: { default: 'file-content' },
     },
     {
       field: 'createTime',
       title: '上传时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/infra/fileConfig/data.ts b/apps/web-antd/src/views/infra/fileConfig/data.ts
index 4821e4e6d..11ea4475e 100644
--- a/apps/web-antd/src/views/infra/fileConfig/data.ts
+++ b/apps/web-antd/src/views/infra/fileConfig/data.ts
@@ -265,17 +265,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
-      width: 100,
     },
     {
       field: 'name',
       title: '配置名',
-      minWidth: 120,
     },
     {
       field: 'storage',
       title: '存储器',
-      width: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_FILE_STORAGE },
@@ -284,12 +281,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'remark',
       title: '备注',
-      minWidth: 150,
     },
     {
       field: 'master',
       title: '主配置',
-      width: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
@@ -298,7 +293,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'createTime',
       title: '创建时间',
-      width: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/infra/job/data.ts b/apps/web-antd/src/views/infra/job/data.ts
index 8d4db1e89..982ee9f9b 100644
--- a/apps/web-antd/src/views/infra/job/data.ts
+++ b/apps/web-antd/src/views/infra/job/data.ts
@@ -132,17 +132,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '任务编号',
-      minWidth: 80,
     },
     {
       field: 'name',
       title: '任务名称',
-      minWidth: 120,
     },
     {
       field: 'status',
       title: '任务状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_JOB_STATUS },
@@ -151,17 +148,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'handlerName',
       title: '处理器的名字',
-      minWidth: 180,
     },
     {
       field: 'handlerParam',
       title: '处理器的参数',
-      minWidth: 140,
     },
     {
       field: 'cronExpression',
       title: 'CRON 表达式',
-      minWidth: 120,
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/infra/job/logger/data.ts b/apps/web-antd/src/views/infra/job/logger/data.ts
index 9d5530e6c..b58629a8b 100644
--- a/apps/web-antd/src/views/infra/job/logger/data.ts
+++ b/apps/web-antd/src/views/infra/job/logger/data.ts
@@ -70,32 +70,26 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '日志编号',
-      minWidth: 80,
     },
     {
       field: 'jobId',
       title: '任务编号',
-      minWidth: 80,
     },
     {
       field: 'handlerName',
       title: '处理器的名字',
-      minWidth: 180,
     },
     {
       field: 'handlerParam',
       title: '处理器的参数',
-      minWidth: 140,
     },
     {
       field: 'executeIndex',
       title: '第几次执行',
-      minWidth: 100,
     },
     {
       field: 'beginTime',
       title: '执行时间',
-      minWidth: 280,
       formatter: ({ row }) => {
         return `${formatDateTime(row.beginTime)} ~ ${formatDateTime(row.endTime)}`;
       },
@@ -103,15 +97,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'duration',
       title: '执行时长',
-      minWidth: 120,
-      formatter: ({ row }) => {
-        return `${row.duration} 毫秒`;
-      },
+      formatter: ({ cellValue }) => `${cellValue} 毫秒`,
     },
     {
       field: 'status',
       title: '任务状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_JOB_LOG_STATUS },
diff --git a/apps/web-antd/src/views/member/tag/data.ts b/apps/web-antd/src/views/member/tag/data.ts
index 73728e0c3..c0da8541e 100644
--- a/apps/web-antd/src/views/member/tag/data.ts
+++ b/apps/web-antd/src/views/member/tag/data.ts
@@ -48,17 +48,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
-      minWidth: 200,
     },
     {
       field: 'name',
       title: '标签名称',
-      minWidth: 200,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/pay/demo/order/data.ts b/apps/web-antd/src/views/pay/demo/order/data.ts
index 2683b905a..f38050df5 100644
--- a/apps/web-antd/src/views/pay/demo/order/data.ts
+++ b/apps/web-antd/src/views/pay/demo/order/data.ts
@@ -38,45 +38,37 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '订单编号',
-      minWidth: 200,
     },
     {
       field: 'userId',
       title: '用户编号',
-      minWidth: 200,
     },
     {
       field: 'spuName',
       title: '商品名字',
-      minWidth: 200,
     },
     {
       field: 'price',
       title: '支付价格',
-      minWidth: 120,
       formatter: 'formatNumber',
     },
     {
       field: 'refundPrice',
       title: '退款金额',
-      minWidth: 120,
       formatter: 'formatNumber',
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'payOrderId',
       title: '支付单号',
-      minWidth: 200,
     },
     {
       field: 'payStatus',
       title: '是否支付',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
@@ -85,13 +77,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'payTime',
       title: '支付时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'refundTime',
       title: '退款时间',
-      minWidth: 180,
       slots: { default: 'refundTime' },
     },
     {
diff --git a/apps/web-antd/src/views/pay/demo/withdraw/data.ts b/apps/web-antd/src/views/pay/demo/withdraw/data.ts
index ccfa1af1b..7fcfb6055 100644
--- a/apps/web-antd/src/views/pay/demo/withdraw/data.ts
+++ b/apps/web-antd/src/views/pay/demo/withdraw/data.ts
@@ -65,50 +65,41 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '提现单编号',
-      minWidth: 100,
     },
     {
       field: 'subject',
       title: '提现标题',
-      minWidth: 120,
     },
     {
       field: 'type',
       title: '提现类型',
-      minWidth: 90,
       slots: { default: 'type' },
     },
     {
       field: 'price',
       title: '提现金额',
-      minWidth: 120,
       formatter: 'formatNumber',
     },
     {
       field: 'userName',
       title: '收款人姓名',
-      minWidth: 150,
     },
     {
       field: 'userAccount',
       title: '收款人账号',
-      minWidth: 250,
     },
     {
       field: 'status',
       title: '提现状态',
-      minWidth: 100,
       slots: { default: 'status' },
     },
     {
       field: 'payTransferId',
       title: '转账单号',
-      minWidth: 120,
     },
     {
       field: 'transferChannelCode',
       title: '转账渠道',
-      minWidth: 180,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
@@ -117,13 +108,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'transferTime',
       title: '转账时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'transferErrorMsg',
       title: '转账失败原因',
-      minWidth: 200,
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/pay/notify/data.ts b/apps/web-antd/src/views/pay/notify/data.ts
index 7fc2e6354..6b7b5cc57 100644
--- a/apps/web-antd/src/views/pay/notify/data.ts
+++ b/apps/web-antd/src/views/pay/notify/data.ts
@@ -69,22 +69,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '任务编号',
-      minWidth: 100,
     },
     {
       field: 'appName',
       title: '应用编号',
-      minWidth: 120,
     },
     {
       field: 'merchantOrderId',
       title: '商户订单编号',
-      minWidth: 180,
     },
     {
       field: 'type',
       title: '通知类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.PAY_NOTIFY_TYPE },
@@ -93,12 +89,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'dataId',
       title: '关联编号',
-      minWidth: 120,
     },
     {
       field: 'status',
       title: '通知状态',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.PAY_NOTIFY_STATUS },
@@ -107,19 +101,16 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'lastExecuteTime',
       title: '最后通知时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'nextNotifyTime',
       title: '下次通知时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'notifyTimes',
       title: '通知次数',
-      minWidth: 120,
       cellRender: {
         name: 'CellTag',
         props: {
diff --git a/apps/web-antd/src/views/pay/transfer/data.ts b/apps/web-antd/src/views/pay/transfer/data.ts
index b6f8fef96..36d7cb861 100644
--- a/apps/web-antd/src/views/pay/transfer/data.ts
+++ b/apps/web-antd/src/views/pay/transfer/data.ts
@@ -107,29 +107,24 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
-      minWidth: 100,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'appName',
       title: '支付应用',
-      minWidth: 100,
     },
     {
       field: 'price',
       title: '转账金额',
-      minWidth: 120,
       formatter: ({ cellValue }) => `￥${(cellValue / 100).toFixed(2)}`,
     },
     {
       field: 'status',
       title: '转账状态',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.PAY_TRANSFER_STATUS },
@@ -138,7 +133,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'type',
       title: '类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.PAY_TRANSFER_TYPE },
@@ -147,7 +141,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'channelCode',
       title: '支付渠道',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
@@ -156,22 +149,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'merchantTransferId',
       title: '商户单号',
-      minWidth: 180,
     },
     {
       field: 'channelTransferNo',
       title: '渠道单号',
-      minWidth: 180,
     },
     {
       field: 'userName',
       title: '收款人姓名',
-      minWidth: 120,
     },
     {
       field: 'accountNo',
       title: '收款人账号',
-      minWidth: 180,
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/system/area/data.ts b/apps/web-antd/src/views/system/area/data.ts
index 48339f19e..087133e96 100644
--- a/apps/web-antd/src/views/system/area/data.ts
+++ b/apps/web-antd/src/views/system/area/data.ts
@@ -32,7 +32,6 @@ export function useGridColumns(): VxeTableGridOptions<SystemAreaApi.Area>['colum
     {
       field: 'id',
       title: '地区编码',
-      minWidth: 120,
       align: 'left',
       fixed: 'left',
       treeNode: true,
@@ -40,7 +39,6 @@ export function useGridColumns(): VxeTableGridOptions<SystemAreaApi.Area>['colum
     {
       field: 'name',
       title: '地区名称',
-      minWidth: 200,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/system/dept/data.ts b/apps/web-antd/src/views/system/dept/data.ts
index f57287407..155f60f21 100644
--- a/apps/web-antd/src/views/system/dept/data.ts
+++ b/apps/web-antd/src/views/system/dept/data.ts
@@ -116,7 +116,6 @@ export function useGridColumns(
     {
       field: 'name',
       title: '部门名称',
-      minWidth: 150,
       align: 'left',
       fixed: 'left',
       treeNode: true,
@@ -124,20 +123,15 @@ export function useGridColumns(
     {
       field: 'leaderUserId',
       title: '负责人',
-      minWidth: 150,
-      formatter: (row) => {
-        return getLeaderName?.(row.cellValue) || '-';
-      },
+      formatter: ({ cellValue }) => getLeaderName?.(cellValue) || '-',
     },
     {
       field: 'sort',
       title: '显示顺序',
-      minWidth: 100,
     },
     {
       field: 'status',
       title: '部门状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -146,7 +140,6 @@ export function useGridColumns(
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/dict/data.ts b/apps/web-antd/src/views/system/dict/data.ts
index 531531bc2..d116f0d28 100644
--- a/apps/web-antd/src/views/system/dict/data.ts
+++ b/apps/web-antd/src/views/system/dict/data.ts
@@ -95,22 +95,18 @@ export function useTypeGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '字典编号',
-      minWidth: 100,
     },
     {
       field: 'name',
       title: '字典名称',
-      minWidth: 200,
     },
     {
       field: 'type',
       title: '字典类型',
-      minWidth: 220,
     },
     {
       field: 'status',
       title: '状态',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -119,12 +115,10 @@ export function useTypeGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'remark',
       title: '备注',
-      minWidth: 180,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
@@ -288,27 +282,22 @@ export function useDataGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '字典编码',
-      minWidth: 100,
     },
     {
       field: 'label',
       title: '字典标签',
-      minWidth: 180,
     },
     {
       field: 'value',
       title: '字典键值',
-      minWidth: 100,
     },
     {
       field: 'sort',
       title: '字典排序',
-      minWidth: 100,
     },
     {
       field: 'status',
       title: '状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -317,17 +306,14 @@ export function useDataGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'colorType',
       title: '颜色类型',
-      minWidth: 120,
     },
     {
       field: 'cssClass',
       title: 'CSS Class',
-      minWidth: 120,
     },
     {
       title: '创建时间',
       field: 'createTime',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/loginlog/data.ts b/apps/web-antd/src/views/system/loginlog/data.ts
index 730e5f8b5..f09f6b535 100644
--- a/apps/web-antd/src/views/system/loginlog/data.ts
+++ b/apps/web-antd/src/views/system/loginlog/data.ts
@@ -42,12 +42,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '日志编号',
-      minWidth: 100,
     },
     {
       field: 'logType',
       title: '操作类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_LOGIN_TYPE },
@@ -56,22 +54,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'username',
       title: '用户名称',
-      minWidth: 180,
     },
     {
       field: 'userIp',
       title: '登录地址',
-      minWidth: 180,
     },
     {
       field: 'userAgent',
       title: '浏览器',
-      minWidth: 200,
     },
     {
       field: 'result',
       title: '登录结果',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_LOGIN_RESULT },
@@ -80,7 +74,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'createTime',
       title: '登录日期',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/mail/account/data.ts b/apps/web-antd/src/views/system/mail/account/data.ts
index 60736eb95..e4cbbec40 100644
--- a/apps/web-antd/src/views/system/mail/account/data.ts
+++ b/apps/web-antd/src/views/system/mail/account/data.ts
@@ -125,32 +125,26 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
-      minWidth: 100,
     },
     {
       field: 'mail',
       title: '邮箱',
-      minWidth: 160,
     },
     {
       field: 'username',
       title: '用户名',
-      minWidth: 160,
     },
     {
       field: 'host',
       title: 'SMTP 服务器域名',
-      minWidth: 150,
     },
     {
       field: 'port',
       title: 'SMTP 服务器端口',
-      minWidth: 130,
     },
     {
       field: 'sslEnable',
       title: '是否开启 SSL',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
@@ -159,7 +153,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'starttlsEnable',
       title: '是否开启 STARTTLS',
-      minWidth: 145,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
@@ -168,7 +161,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/mail/log/data.ts b/apps/web-antd/src/views/system/mail/log/data.ts
index b357472fc..9c8ee7e5c 100644
--- a/apps/web-antd/src/views/system/mail/log/data.ts
+++ b/apps/web-antd/src/views/system/mail/log/data.ts
@@ -75,38 +75,31 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
-      minWidth: 100,
     },
     {
       field: 'sendTime',
       title: '发送时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'toMail',
       title: '收件邮箱',
-      minWidth: 160,
     },
     {
       field: 'templateTitle',
       title: '邮件标题',
-      minWidth: 120,
     },
     {
       field: 'templateContent',
       title: '邮件内容',
-      minWidth: 300,
     },
     {
       field: 'fromMail',
       title: '发送邮箱',
-      minWidth: 120,
     },
     {
       field: 'sendStatus',
       title: '发送状态',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS },
@@ -115,7 +108,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'templateCode',
       title: '模板编码',
-      minWidth: 120,
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/system/mail/template/data.ts b/apps/web-antd/src/views/system/mail/template/data.ts
index 3fb229264..06f03457a 100644
--- a/apps/web-antd/src/views/system/mail/template/data.ts
+++ b/apps/web-antd/src/views/system/mail/template/data.ts
@@ -195,38 +195,31 @@ export function useGridColumns(
     {
       field: 'id',
       title: '编号',
-      minWidth: 100,
     },
     {
       field: 'code',
       title: '模板编码',
-      minWidth: 120,
     },
     {
       field: 'name',
       title: '模板名称',
-      minWidth: 120,
     },
     {
       field: 'title',
       title: '模板标题',
-      minWidth: 120,
     },
     {
       field: 'accountId',
       title: '邮箱账号',
-      minWidth: 120,
-      formatter: (row) => getAccountMail?.(row.cellValue) || '-',
+      formatter: ({ cellValue }) => getAccountMail?.(cellValue) || '-',
     },
     {
       field: 'nickname',
       title: '发送人名称',
-      minWidth: 120,
     },
     {
       field: 'status',
       title: '开启状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -235,7 +228,6 @@ export function useGridColumns(
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/menu/data.ts b/apps/web-antd/src/views/system/menu/data.ts
index 8c338134f..0cc5a6a86 100644
--- a/apps/web-antd/src/views/system/menu/data.ts
+++ b/apps/web-antd/src/views/system/menu/data.ts
@@ -271,7 +271,6 @@ export function useGridColumns(): VxeTableGridOptions<SystemMenuApi.Menu>['colum
     {
       field: 'name',
       title: '菜单名称',
-      minWidth: 250,
       align: 'left',
       fixed: 'left',
       slots: { default: 'name' },
@@ -280,7 +279,6 @@ export function useGridColumns(): VxeTableGridOptions<SystemMenuApi.Menu>['colum
     {
       field: 'type',
       title: '菜单类型',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_MENU_TYPE },
@@ -289,27 +287,22 @@ export function useGridColumns(): VxeTableGridOptions<SystemMenuApi.Menu>['colum
     {
       field: 'sort',
       title: '显示排序',
-      minWidth: 100,
     },
     {
       field: 'permission',
       title: '权限标识',
-      minWidth: 200,
     },
     {
       field: 'path',
       title: '组件路径',
-      minWidth: 200,
     },
     {
       field: 'componentName',
-      minWidth: 200,
       title: '组件名称',
     },
     {
       field: 'status',
       title: '状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
diff --git a/apps/web-antd/src/views/system/notice/data.ts b/apps/web-antd/src/views/system/notice/data.ts
index 20aa96a49..7704f69c3 100644
--- a/apps/web-antd/src/views/system/notice/data.ts
+++ b/apps/web-antd/src/views/system/notice/data.ts
@@ -91,17 +91,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '公告编号',
-      minWidth: 100,
     },
     {
       field: 'title',
       title: '公告标题',
-      minWidth: 200,
     },
     {
       field: 'type',
       title: '公告类型',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_NOTICE_TYPE },
@@ -110,7 +107,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'status',
       title: '公告状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -119,7 +115,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/notify/message/data.ts b/apps/web-antd/src/views/system/notify/message/data.ts
index 214966e9b..45e0436fa 100644
--- a/apps/web-antd/src/views/system/notify/message/data.ts
+++ b/apps/web-antd/src/views/system/notify/message/data.ts
@@ -65,12 +65,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
-      minWidth: 100,
     },
     {
       field: 'userType',
       title: '用户类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.USER_TYPE },
@@ -79,27 +77,22 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'userId',
       title: '用户编号',
-      minWidth: 100,
     },
     {
       field: 'templateCode',
       title: '模板编码',
-      minWidth: 120,
     },
     {
       field: 'templateNickname',
       title: '发送人名称',
-      minWidth: 180,
     },
     {
       field: 'templateContent',
       title: '模版内容',
-      minWidth: 200,
     },
     {
       field: 'templateParams',
       title: '模版参数',
-      minWidth: 180,
       formatter: ({ cellValue }) => {
         try {
           return JSON.stringify(cellValue);
@@ -111,7 +104,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'templateType',
       title: '模版类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE },
@@ -120,7 +112,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'readStatus',
       title: '是否已读',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
@@ -129,13 +120,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'readTime',
       title: '阅读时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/notify/my/data.ts b/apps/web-antd/src/views/system/notify/my/data.ts
index d133e38f0..fc0606000 100644
--- a/apps/web-antd/src/views/system/notify/my/data.ts
+++ b/apps/web-antd/src/views/system/notify/my/data.ts
@@ -45,18 +45,15 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'templateNickname',
       title: '发送人',
-      minWidth: 180,
     },
     {
       field: 'createTime',
       title: '发送时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'templateType',
       title: '类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE },
@@ -65,12 +62,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'templateContent',
       title: '消息内容',
-      minWidth: 300,
     },
     {
       field: 'readStatus',
       title: '是否已读',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
@@ -79,7 +74,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'readTime',
       title: '阅读时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/notify/template/data.ts b/apps/web-antd/src/views/system/notify/template/data.ts
index 32d3adbb5..fd0a63f09 100644
--- a/apps/web-antd/src/views/system/notify/template/data.ts
+++ b/apps/web-antd/src/views/system/notify/template/data.ts
@@ -229,32 +229,26 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
-      minWidth: 100,
     },
     {
       field: 'name',
       title: '模板名称',
-      minWidth: 120,
     },
     {
       field: 'code',
       title: '模板编码',
-      minWidth: 120,
     },
     {
       field: 'nickname',
       title: '发送人名称',
-      minWidth: 120,
     },
     {
       field: 'content',
       title: '模板内容',
-      minWidth: 200,
     },
     {
       field: 'type',
       title: '模板类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE },
@@ -263,7 +257,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'status',
       title: '状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -272,12 +265,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'remark',
       title: '备注',
-      minWidth: 120,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/oauth2/client/data.ts b/apps/web-antd/src/views/system/oauth2/client/data.ts
index 12d5b461f..c510f8fde 100644
--- a/apps/web-antd/src/views/system/oauth2/client/data.ts
+++ b/apps/web-antd/src/views/system/oauth2/client/data.ts
@@ -191,22 +191,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'clientId',
       title: '客户端编号',
-      minWidth: 200,
     },
     {
       field: 'secret',
       title: '客户端密钥',
-      minWidth: 120,
     },
     {
       field: 'name',
       title: '应用名',
-      minWidth: 300,
     },
     {
       field: 'logo',
       title: '应用图标',
-      minWidth: 80,
       cellRender: {
         name: 'CellImage',
       },
@@ -214,7 +210,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'status',
       title: '状态',
-      minWidth: 80,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -223,24 +218,20 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'accessTokenValiditySeconds',
       title: '访问令牌的有效期',
-      minWidth: 130,
       formatter: ({ cellValue }) => `${cellValue} 秒`,
     },
     {
       field: 'refreshTokenValiditySeconds',
       title: '刷新令牌的有效期',
-      minWidth: 130,
       formatter: ({ cellValue }) => `${cellValue} 秒`,
     },
     {
       field: 'authorizedGrantTypes',
       title: '授权类型',
-      minWidth: 180,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/oauth2/token/data.ts b/apps/web-antd/src/views/system/oauth2/token/data.ts
index 5df8b9c7f..d990000c6 100644
--- a/apps/web-antd/src/views/system/oauth2/token/data.ts
+++ b/apps/web-antd/src/views/system/oauth2/token/data.ts
@@ -40,22 +40,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'accessToken',
       title: '访问令牌',
-      minWidth: 300,
     },
     {
       field: 'refreshToken',
       title: '刷新令牌',
-      minWidth: 300,
     },
     {
       field: 'userId',
       title: '用户编号',
-      minWidth: 100,
     },
     {
       field: 'userType',
       title: '用户类型',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.USER_TYPE },
@@ -64,18 +60,15 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'clientId',
       title: '客户端编号',
-      minWidth: 120,
     },
     {
       field: 'expiresTime',
       title: '过期时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/operatelog/data.ts b/apps/web-antd/src/views/system/operatelog/data.ts
index 71b552c4b..a2dde0587 100644
--- a/apps/web-antd/src/views/system/operatelog/data.ts
+++ b/apps/web-antd/src/views/system/operatelog/data.ts
@@ -75,43 +75,35 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '日志编号',
-      minWidth: 100,
     },
     {
       field: 'userName',
       title: '操作人',
-      minWidth: 120,
     },
     {
       field: 'type',
       title: '操作模块',
-      minWidth: 120,
     },
     {
       field: 'subType',
       title: '操作名',
-      minWidth: 160,
     },
     {
       field: 'action',
       title: '操作内容',
-      minWidth: 200,
     },
     {
       field: 'createTime',
       title: '操作时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'bizId',
       title: '业务编号',
-      minWidth: 120,
     },
     {
       field: 'userIp',
       title: '操作IP',
-      minWidth: 120,
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/system/post/data.ts b/apps/web-antd/src/views/system/post/data.ts
index ddde2f742..cfb1ceb79 100644
--- a/apps/web-antd/src/views/system/post/data.ts
+++ b/apps/web-antd/src/views/system/post/data.ts
@@ -86,32 +86,26 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '岗位编号',
-      minWidth: 200,
     },
     {
       field: 'name',
       title: '岗位名称',
-      minWidth: 200,
     },
     {
       field: 'code',
       title: '岗位编码',
-      minWidth: 200,
     },
     {
       field: 'sort',
       title: '显示顺序',
-      minWidth: 100,
     },
     {
       field: 'remark',
       title: '岗位备注',
-      minWidth: 200,
     },
     {
       field: 'status',
       title: '岗位状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -120,7 +114,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/role/data.ts b/apps/web-antd/src/views/system/role/data.ts
index 5b0a8b78f..30ee7a3d8 100644
--- a/apps/web-antd/src/views/system/role/data.ts
+++ b/apps/web-antd/src/views/system/role/data.ts
@@ -189,17 +189,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '角色编号',
-      minWidth: 200,
     },
     {
       field: 'name',
       title: '角色名称',
-      minWidth: 200,
     },
     {
       field: 'type',
       title: '角色类型',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_ROLE_TYPE },
@@ -208,22 +205,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'code',
       title: '角色标识',
-      minWidth: 200,
     },
     {
       field: 'sort',
       title: '显示顺序',
-      minWidth: 100,
     },
     {
       field: 'remark',
       title: '角色备注',
-      minWidth: 100,
     },
     {
       field: 'status',
       title: '角色状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -232,7 +225,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/social/client/data.ts b/apps/web-antd/src/views/system/social/client/data.ts
index 88f6b4f99..87307b4e8 100644
--- a/apps/web-antd/src/views/system/social/client/data.ts
+++ b/apps/web-antd/src/views/system/social/client/data.ts
@@ -152,17 +152,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
-      minWidth: 80,
     },
     {
       field: 'name',
       title: '应用名',
-      minWidth: 120,
     },
     {
       field: 'socialType',
       title: '社交平台',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_SOCIAL_TYPE },
@@ -171,7 +168,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'userType',
       title: '用户类型',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.USER_TYPE },
@@ -180,12 +176,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'clientId',
       title: '客户端编号',
-      minWidth: 180,
     },
     {
       field: 'status',
       title: '状态',
-      minWidth: 80,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -194,7 +188,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/social/user/data.ts b/apps/web-antd/src/views/system/social/user/data.ts
index eeed03f4f..7271efdd5 100644
--- a/apps/web-antd/src/views/system/social/user/data.ts
+++ b/apps/web-antd/src/views/system/social/user/data.ts
@@ -52,7 +52,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'type',
       title: '社交平台',
-      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_SOCIAL_TYPE },
@@ -61,17 +60,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'openid',
       title: '社交 openid',
-      minWidth: 180,
     },
     {
       field: 'nickname',
       title: '用户昵称',
-      minWidth: 120,
     },
     {
       field: 'avatar',
       title: '用户头像',
-      minWidth: 80,
       cellRender: {
         name: 'CellImage',
       },
@@ -79,13 +75,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'updateTime',
       title: '更新时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/tenant/data.ts b/apps/web-antd/src/views/system/tenant/data.ts
index 126941af3..30b2a79d5 100644
--- a/apps/web-antd/src/views/system/tenant/data.ts
+++ b/apps/web-antd/src/views/system/tenant/data.ts
@@ -164,17 +164,14 @@ export function useGridColumns(
     {
       field: 'id',
       title: '租户编号',
-      minWidth: 100,
     },
     {
       field: 'name',
       title: '租户名',
-      minWidth: 180,
     },
     {
       field: 'packageId',
       title: '租户套餐',
-      minWidth: 180,
       formatter: (row: { cellValue: number }) => {
         return getPackageName?.(row.cellValue) || '-';
       },
@@ -182,33 +179,27 @@ export function useGridColumns(
     {
       field: 'contactName',
       title: '联系人',
-      minWidth: 100,
     },
     {
       field: 'contactMobile',
       title: '联系手机',
-      minWidth: 180,
     },
     {
       field: 'accountCount',
       title: '账号额度',
-      minWidth: 100,
     },
     {
       field: 'expireTime',
       title: '过期时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'website',
       title: '绑定域名',
-      minWidth: 180,
     },
     {
       field: 'status',
       title: '租户状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -217,7 +208,6 @@ export function useGridColumns(
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/tenantPackage/data.ts b/apps/web-antd/src/views/system/tenantPackage/data.ts
index f69e6290a..66775f892 100644
--- a/apps/web-antd/src/views/system/tenantPackage/data.ts
+++ b/apps/web-antd/src/views/system/tenantPackage/data.ts
@@ -91,17 +91,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '套餐编号',
-      minWidth: 100,
     },
     {
       field: 'name',
       title: '套餐名称',
-      minWidth: 180,
     },
     {
       field: 'status',
       title: '状态',
-      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -110,12 +107,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'remark',
       title: '备注',
-      minWidth: 200,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-antd/src/views/system/user/data.ts b/apps/web-antd/src/views/system/user/data.ts
index e38b89b00..ae2c06ff0 100644
--- a/apps/web-antd/src/views/system/user/data.ts
+++ b/apps/web-antd/src/views/system/user/data.ts
@@ -268,32 +268,26 @@ export function useGridColumns<T = SystemUserApi.User>(
     {
       field: 'id',
       title: '用户编号',
-      minWidth: 100,
     },
     {
       field: 'username',
       title: '用户名称',
-      minWidth: 120,
     },
     {
       field: 'nickname',
       title: '用户昵称',
-      minWidth: 120,
     },
     {
       field: 'deptName',
       title: '部门',
-      minWidth: 120,
     },
     {
       field: 'mobile',
       title: '手机号码',
-      minWidth: 120,
     },
     {
       field: 'status',
       title: '状态',
-      minWidth: 100,
       align: 'center',
       cellRender: {
         attrs: { beforeChange: onStatusChange },
@@ -307,7 +301,6 @@ export function useGridColumns<T = SystemUserApi.User>(
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {

From 45bcc79241aa4c2b2d9db1e833558310bff6c9ad Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Thu, 29 May 2025 17:33:05 +0800
Subject: [PATCH 14/53] perf: crm

---
 apps/web-antd/src/views/crm/backlog/data.ts   |  24 +-
 apps/web-antd/src/views/crm/backlog/index.vue |   4 +-
 ...lueFollowList.vue => clue-follow-list.vue} |   4 +-
 ...tAuditList.vue => contract-audit-list.vue} |  48 ++-
 apps/web-antd/src/views/crm/business/data.ts  |  44 +--
 .../web-antd/src/views/crm/business/index.vue | 102 ++++---
 .../src/views/crm/business/status/data.ts     |  83 ++---
 .../src/views/crm/business/status/index.vue   |  83 ++---
 .../src/views/crm/clue/modules/detail.vue     |  16 +-
 apps/web-antd/src/views/crm/contract/data.ts  | 276 +++++++++++++++++
 .../web-antd/src/views/crm/contract/index.vue | 285 ++++++++++++++++--
 .../src/views/crm/contract/modules/form.vue   |  85 ++++++
 apps/web-antd/src/views/crm/product/data.ts   |  14 +-
 13 files changed, 785 insertions(+), 283 deletions(-)
 rename apps/web-antd/src/views/crm/backlog/modules/{ClueFollowList.vue => clue-follow-list.vue} (91%)
 rename apps/web-antd/src/views/crm/backlog/modules/{ContractAuditList.vue => contract-audit-list.vue} (66%)
 create mode 100644 apps/web-antd/src/views/crm/contract/data.ts
 create mode 100644 apps/web-antd/src/views/crm/contract/modules/form.vue

diff --git a/apps/web-antd/src/views/crm/backlog/data.ts b/apps/web-antd/src/views/crm/backlog/data.ts
index 7bf354c3b..ef6047d0e 100644
--- a/apps/web-antd/src/views/crm/backlog/data.ts
+++ b/apps/web-antd/src/views/crm/backlog/data.ts
@@ -2,7 +2,6 @@ import type { Ref } from 'vue';
 
 import type { VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { CrmContractApi } from '#/api/crm/contract';
 import type { CrmReceivableApi } from '#/api/crm/receivable';
 
 import { useAccess } from '@vben/access';
@@ -252,9 +251,7 @@ export function useContractRemindFormSchema(): VbenFormSchema[] {
 }
 
 /** 合同审核列表的字段 */
-export function useContractColumns<T = CrmContractApi.Contract>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
+export function useContractColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'no',
@@ -355,25 +352,10 @@ export function useContractColumns<T = CrmContractApi.Contract>(
       },
     },
     {
-      field: 'operation',
       title: '操作',
-      width: 130,
-      align: 'center',
+      width: 80,
       fixed: 'right',
-      cellRender: {
-        attrs: {
-          nameField: 'no',
-          nameTitle: '合同编号',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'processDetail',
-            show: hasAccessByCodes(['crm:contract:update']),
-          },
-        ],
-      },
+      slots: { default: 'actions' },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/backlog/index.vue b/apps/web-antd/src/views/crm/backlog/index.vue
index 971814f55..1f8b7a62a 100644
--- a/apps/web-antd/src/views/crm/backlog/index.vue
+++ b/apps/web-antd/src/views/crm/backlog/index.vue
@@ -13,8 +13,8 @@ import * as ReceivablePlanApi from '#/api/crm/receivable/plan';
 import { DocAlert } from '#/components/doc-alert';
 
 import { useLeftSides } from './data';
-import ClueFollowList from './modules/ClueFollowList.vue';
-import ContractAuditList from './modules/ContractAuditList.vue';
+import ClueFollowList from './modules/clue-follow-list.vue';
+import ContractAuditList from './modules/contract-audit-list.vue';
 import ContractRemindList from './modules/ContractRemindList.vue';
 import CustomerFollowList from './modules/CustomerFollowList.vue';
 import CustomerPutPoolRemindList from './modules/CustomerPutPoolRemindList.vue';
diff --git a/apps/web-antd/src/views/crm/backlog/modules/ClueFollowList.vue b/apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue
similarity index 91%
rename from apps/web-antd/src/views/crm/backlog/modules/ClueFollowList.vue
rename to apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue
index 23d109c94..60ca44d9b 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/ClueFollowList.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue
@@ -14,7 +14,7 @@ import { useClueFollowColumns, useClueFollowFormSchema } from '../data';
 const { push } = useRouter();
 
 /** 打开线索详情 */
-function onDetail(row: CrmClueApi.Clue) {
+function handleDetail(row: CrmClueApi.Clue) {
   push({ name: 'CrmClueDetail', params: { id: row.id } });
 }
 
@@ -52,7 +52,7 @@ const [Grid] = useVbenVxeGrid({
 <template>
   <Grid table-title="分配给我的线索">
     <template #name="{ row }">
-      <Button type="link" @click="onDetail(row)">{{ row.name }}</Button>
+      <Button type="link" @click="handleDetail(row)">{{ row.name }}</Button>
     </template>
   </Grid>
 </template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/ContractAuditList.vue b/apps/web-antd/src/views/crm/backlog/modules/contract-audit-list.vue
similarity index 66%
rename from apps/web-antd/src/views/crm/backlog/modules/ContractAuditList.vue
rename to apps/web-antd/src/views/crm/backlog/modules/contract-audit-list.vue
index a243bfe58..f9048a24c 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/ContractAuditList.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/contract-audit-list.vue
@@ -1,13 +1,12 @@
 <!-- 待审核合同 -->
 <script lang="ts" setup>
-import type { OnActionClickParams } from '#/adapter/vxe-table';
 import type { CrmContractApi } from '#/api/crm/contract';
 
 import { useRouter } from 'vue-router';
 
 import { Button } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getContractPage } from '#/api/crm/contract';
 
 import { useContractAuditFormSchema, useContractColumns } from '../data';
@@ -15,7 +14,7 @@ import { useContractAuditFormSchema, useContractColumns } from '../data';
 const { push } = useRouter();
 
 /** 查看审批 */
-function openProcessDetail(row: CrmContractApi.Contract) {
+function handleProcessDetail(row: CrmContractApi.Contract) {
   push({
     name: 'BpmProcessInstanceDetail',
     query: { id: row.processInstanceId },
@@ -23,43 +22,30 @@ function openProcessDetail(row: CrmContractApi.Contract) {
 }
 
 /** 打开合同详情 */
-function openContractDetail(row: CrmContractApi.Contract) {
+function handleContractDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmContractDetail', params: { id: row.id } });
 }
 /** 打开客户详情 */
-function openCustomerDetail(row: CrmContractApi.Contract) {
+function handleCustomerDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmCustomerDetail', params: { id: row.id } });
 }
 
 /** 打开联系人详情 */
-function openContactDetail(row: CrmContractApi.Contract) {
+function handleContactDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmContactDetail', params: { id: row.id } });
 }
 
 /** 打开商机详情 */
-function openBusinessDetail(row: CrmContractApi.Contract) {
+function handleBusinessDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmBusinessDetail', params: { id: row.id } });
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<CrmContractApi.Contract>) {
-  switch (code) {
-    case 'processDetail': {
-      openProcessDetail(row);
-      break;
-    }
-  }
-}
-
 const [Grid] = useVbenVxeGrid({
   formOptions: {
     schema: useContractAuditFormSchema(),
   },
   gridOptions: {
-    columns: useContractColumns(onActionClick),
+    columns: useContractColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -88,24 +74,36 @@ const [Grid] = useVbenVxeGrid({
 <template>
   <Grid table-title="待审核合同">
     <template #name="{ row }">
-      <Button type="link" @click="openContractDetail(row)">
+      <Button type="link" @click="handleContractDetail(row)">
         {{ row.name }}
       </Button>
     </template>
     <template #customerName="{ row }">
-      <Button type="link" @click="openCustomerDetail(row)">
+      <Button type="link" @click="handleCustomerDetail(row)">
         {{ row.customerName }}
       </Button>
     </template>
     <template #businessName="{ row }">
-      <Button type="link" @click="openBusinessDetail(row)">
+      <Button type="link" @click="handleBusinessDetail(row)">
         {{ row.businessName }}
       </Button>
     </template>
     <template #contactName="{ row }">
-      <Button type="link" @click="openContactDetail(row)">
+      <Button type="link" @click="handleContactDetail(row)">
         {{ row.contactName }}
       </Button>
     </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '查看审批',
+            type: 'link',
+            icon: ACTION_ICON.VIEW,
+            onClick: handleProcessDetail.bind(null, row),
+          },
+        ]"
+      />
+    </template>
   </Grid>
 </template>
diff --git a/apps/web-antd/src/views/crm/business/data.ts b/apps/web-antd/src/views/crm/business/data.ts
index 0dd176d4b..32785090b 100644
--- a/apps/web-antd/src/views/crm/business/data.ts
+++ b/apps/web-antd/src/views/crm/business/data.ts
@@ -1,12 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { CrmBusinessApi } from '#/api/crm/business';
-
-import { useAccess } from '@vben/access';
-
-import { getRangePickerDefaultProps } from '#/utils';
-
-const { hasAccessByCodes } = useAccess();
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
@@ -37,7 +30,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 0,
-        controlsPosition: 'right',
         placeholder: '请输入商机金额',
       },
       rules: 'required',
@@ -79,22 +71,11 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '商机名称',
       component: 'Input',
     },
-    {
-      fieldName: 'createTime',
-      label: '创建时间',
-      component: 'RangePicker',
-      componentProps: {
-        ...getRangePickerDefaultProps(),
-        allowClear: true,
-      },
-    },
   ];
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = CrmBusinessApi.Business>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'name',
@@ -165,29 +146,10 @@ export function useGridColumns<T = CrmBusinessApi.Business>(
       fixed: 'right',
     },
     {
-      field: 'operation',
       title: '操作',
       width: 130,
       fixed: 'right',
-      align: 'center',
-      cellRender: {
-        attrs: {
-          nameField: 'name',
-          nameTitle: '商机',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'edit',
-            show: hasAccessByCodes(['crm:business:update']),
-          },
-          {
-            code: 'delete',
-            show: hasAccessByCodes(['crm:business:delete']),
-          },
-        ],
-      },
+      slots: { default: 'actions' },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/business/index.vue b/apps/web-antd/src/views/crm/business/index.vue
index 14d2965c2..f564cc4e1 100644
--- a/apps/web-antd/src/views/crm/business/index.vue
+++ b/apps/web-antd/src/views/crm/business/index.vue
@@ -1,19 +1,15 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmBusinessApi } from '#/api/crm/business';
 
 import { useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Download, Plus } from '@vben/icons';
 import { downloadFileFromBlobPart } from '@vben/utils';
 
 import { Button, message } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteBusiness,
   exportBusiness,
@@ -38,23 +34,23 @@ function onRefresh() {
 }
 
 /** 导出表格 */
-async function onExport() {
+async function handleExport() {
   const data = await exportBusiness(await gridApi.formApi.getValues());
   downloadFileFromBlobPart({ fileName: '商机.xls', source: data });
 }
 
 /** 创建商机 */
-function onCreate() {
+function handleCreate() {
   formModalApi.setData(null).open();
 }
 
 /** 编辑商机 */
-function onEdit(row: CrmBusinessApi.Business) {
+function handleEdit(row: CrmBusinessApi.Business) {
   formModalApi.setData(row).open();
 }
 
 /** 删除商机 */
-async function onDelete(row: CrmBusinessApi.Business) {
+async function handleDelete(row: CrmBusinessApi.Business) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
@@ -70,38 +66,21 @@ async function onDelete(row: CrmBusinessApi.Business) {
 }
 
 /** 查看商机详情 */
-function onDetail(row: CrmBusinessApi.Business) {
+function handleDetail(row: CrmBusinessApi.Business) {
   push({ name: 'CrmBusinessDetail', params: { id: row.id } });
 }
 
 /** 查看客户详情 */
-function onCustomerDetail(row: CrmBusinessApi.Business) {
+function handleCustomerDetail(row: CrmBusinessApi.Business) {
   push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<CrmBusinessApi.Business>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -142,34 +121,59 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <Grid table-title="商机列表">
       <template #toolbar-tools>
-        <Button
-          type="primary"
-          @click="onCreate"
-          v-access:code="['crm:business:create']"
-        >
-          <Plus class="size-5" />
-          {{ $t('ui.actionTitle.create', ['商机']) }}
-        </Button>
-        <Button
-          type="primary"
-          class="ml-2"
-          @click="onExport"
-          v-access:code="['crm:business:export']"
-        >
-          <Download class="size-5" />
-          {{ $t('ui.actionTitle.export') }}
-        </Button>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['商机']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:business:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['crm:business:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
       </template>
       <template #name="{ row }">
-        <Button type="link" @click="onDetail(row)">
+        <Button type="link" @click="handleDetail(row)">
           {{ row.name }}
         </Button>
       </template>
       <template #customerName="{ row }">
-        <Button type="link" @click="onCustomerDetail(row)">
+        <Button type="link" @click="handleCustomerDetail(row)">
           {{ row.customerName }}
         </Button>
       </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:business:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:business:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
     </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/business/status/data.ts b/apps/web-antd/src/views/crm/business/status/data.ts
index ad6c88b7a..934d717b6 100644
--- a/apps/web-antd/src/views/crm/business/status/data.ts
+++ b/apps/web-antd/src/views/crm/business/status/data.ts
@@ -1,18 +1,11 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { CrmBusinessStatusApi } from '#/api/crm/business/status';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { useAccess } from '@vben/access';
+import { handleTree } from '@vben/utils';
 
 import { z } from '#/adapter/form';
-import {
-  CommonStatusEnum,
-  DICT_TYPE,
-  getDictOptions,
-  getRangePickerDefaultProps,
-} from '#/utils';
-
-const { hasAccessByCodes } = useAccess();
+import { getDeptList } from '#/api/system/dept';
+import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
 
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
@@ -34,12 +27,16 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'deptIds',
       label: '应用部门',
-      component: 'TreeSelect',
+      component: 'ApiTreeSelect',
       componentProps: {
+        api: async () => {
+          const data = await getDeptList();
+          return handleTree(data);
+        },
         multiple: true,
-        treeCheckable: true,
-        showCheckedStrategy: 'SHOW_PARENT',
+        fieldNames: { label: 'name', value: 'id', children: 'children' },
         placeholder: '请选择应用部门',
+        treeDefaultExpandAll: true,
       },
     },
     {
@@ -56,79 +53,37 @@ export function useFormSchema(): VbenFormSchema[] {
   ];
 }
 
-/** 列表的搜索表单 */
-export function useGridFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'name',
-      label: '状态组名',
-      component: 'Input',
-    },
-    {
-      fieldName: 'createTime',
-      label: '创建时间',
-      component: 'RangePicker',
-      componentProps: {
-        ...getRangePickerDefaultProps(),
-        allowClear: true,
-      },
-    },
-  ];
-}
-
 /** 列表的字段 */
-export function useGridColumns<T = CrmBusinessStatusApi.BusinessStatus>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'name',
       title: '状态组名',
-      minWidth: 200,
+      width: 200,
     },
     {
       field: 'deptNames',
       title: '应用部门',
-      minWidth: 200,
-      formatter: ({ cellValue }) => {
-        return cellValue?.length > 0 ? cellValue.join(' ') : '全公司';
-      },
+      width: 200,
+      formatter: ({ cellValue }) =>
+        cellValue?.length > 0 ? cellValue.join(' ') : '全公司',
     },
     {
       field: 'creator',
       title: '创建人',
-      minWidth: 100,
+      width: 100,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
+      width: 150,
       formatter: 'formatDateTime',
     },
     {
-      field: 'operation',
       title: '操作',
       width: 160,
       fixed: 'right',
-      align: 'center',
-      cellRender: {
-        name: 'TableAction',
-        props: {
-          actions: [
-            {
-              label: '编辑',
-              code: 'edit',
-              show: hasAccessByCodes(['crm:business-status:update']),
-            },
-            {
-              label: '删除',
-              code: 'delete',
-              show: hasAccessByCodes(['crm:business-status:delete']),
-            },
-          ],
-          onActionClick,
-        },
-      },
+      slots: { default: 'actions' },
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/business/status/index.vue b/apps/web-antd/src/views/crm/business/status/index.vue
index 5b205ded4..5ef2bfa13 100644
--- a/apps/web-antd/src/views/crm/business/status/index.vue
+++ b/apps/web-antd/src/views/crm/business/status/index.vue
@@ -1,16 +1,12 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmBusinessStatusApi } from '#/api/crm/business/status';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Plus } from '@vben/icons';
 
-import { Button, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteBusinessStatus,
   getBusinessStatusPage,
@@ -18,7 +14,7 @@ import {
 import { DocAlert } from '#/components/doc-alert';
 import { $t } from '#/locales';
 
-import { useGridColumns, useGridFormSchema } from './data';
+import { useGridColumns } from './data';
 import Form from './modules/form.vue';
 
 const [FormModal, formModalApi] = useVbenModal({
@@ -32,12 +28,12 @@ function onRefresh() {
 }
 
 /** 创建商机状态 */
-function onCreate() {
+function handleCreate() {
   formModalApi.setData(null).open();
 }
 
 /** 删除商机状态 */
-async function onDelete(row: CrmBusinessStatusApi.BusinessStatus) {
+async function handleDelete(row: CrmBusinessStatusApi.BusinessStatus) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
@@ -53,33 +49,13 @@ async function onDelete(row: CrmBusinessStatusApi.BusinessStatus) {
 }
 
 /** 编辑商机状态 */
-function onEdit(row: CrmBusinessStatusApi.BusinessStatus) {
+function handleEdit(row: CrmBusinessStatusApi.BusinessStatus) {
   formModalApi.setData(row).open();
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<CrmBusinessStatusApi.BusinessStatus>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: useGridFormSchema(),
-  },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -120,14 +96,41 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <Grid table-title="商机状态列表">
       <template #toolbar-tools>
-        <Button
-          type="primary"
-          @click="onCreate"
-          v-access:code="['crm:business-status:create']"
-        >
-          <Plus class="size-5" />
-          {{ $t('ui.actionTitle.create', ['商机状态']) }}
-        </Button>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['商机状态']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:post:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:business-status:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:business-status:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>
diff --git a/apps/web-antd/src/views/crm/clue/modules/detail.vue b/apps/web-antd/src/views/crm/clue/modules/detail.vue
index f8fbf8e45..2f7c6ac86 100644
--- a/apps/web-antd/src/views/crm/clue/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/clue/modules/detail.vue
@@ -57,22 +57,22 @@ async function loadClueDetail() {
 }
 
 /** 返回列表页 */
-function onBack() {
+function handleBack() {
   router.push('/crm/clue');
 }
 
 /** 编辑线索 */
-function onEdit() {
+function handleEdit() {
   formModalApi.setData({ id: clueId }).open();
 }
 
 /** 转移线索 */
-function onTransfer() {
+function handleTransfer() {
   transferModalApi.setData({ id: clueId }).open();
 }
 
 /** 转化为客户 */
-async function onTransform() {
+async function handleTransform() {
   try {
     await Modal.confirm({
       title: '提示',
@@ -99,14 +99,14 @@ onMounted(async () => {
   <Page auto-content-height :title="clue?.name" :loading="loading">
     <template #extra>
       <div class="flex items-center gap-2">
-        <Button @click="onBack">
+        <Button @click="handleBack">
           <ArrowLeft class="size-5" />
           返回
         </Button>
         <Button
           v-if="permissionListRef?.validateWrite"
           type="primary"
-          @click="onEdit"
+          @click="handleEdit"
           v-access:code="['crm:clue:update']"
         >
           {{ $t('ui.actionTitle.edit') }}
@@ -114,7 +114,7 @@ onMounted(async () => {
         <Button
           v-if="permissionListRef?.validateOwnerUser"
           type="primary"
-          @click="onTransfer"
+          @click="handleTransfer"
           v-access:code="['crm:clue:update']"
         >
           转移
@@ -122,7 +122,7 @@ onMounted(async () => {
         <Button
           v-if="permissionListRef?.validateOwnerUser && !clue?.transformStatus"
           type="primary"
-          @click="onTransform"
+          @click="handleTransform"
           v-access:code="['crm:clue:update']"
         >
           转化为客户
diff --git a/apps/web-antd/src/views/crm/contract/data.ts b/apps/web-antd/src/views/crm/contract/data.ts
new file mode 100644
index 000000000..32847eb3b
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contract/data.ts
@@ -0,0 +1,276 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getSimpleBusinessList } from '#/api/crm/business';
+import { getSimpleContactList } from '#/api/crm/contact';
+import { getCustomerSimpleList } from '#/api/crm/customer';
+import { floatToFixed2 } from '#/utils';
+import { DICT_TYPE } from '#/utils/dict';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '合同编号',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入合同编号',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '合同名称',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入合同名称',
+      },
+    },
+    {
+      fieldName: 'customerId',
+      label: '客户',
+      component: 'ApiSelect',
+      rules: 'required',
+      componentProps: {
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择客户',
+      },
+    },
+    {
+      fieldName: 'businessId',
+      label: '商机',
+      component: 'ApiSelect',
+      rules: 'required',
+      componentProps: {
+        api: getSimpleBusinessList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择商机',
+      },
+    },
+    {
+      fieldName: 'totalPrice',
+      label: '合同金额',
+      component: 'InputNumber',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入合同金额',
+        min: 0,
+        precision: 2,
+      },
+    },
+    {
+      fieldName: 'orderDate',
+      label: '下单时间',
+      component: 'DatePicker',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请选择下单时间',
+      },
+    },
+    {
+      fieldName: 'startTime',
+      label: '合同开始时间',
+      component: 'DatePicker',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请选择合同开始时间',
+      },
+    },
+    {
+      fieldName: 'endTime',
+      label: '合同结束时间',
+      component: 'DatePicker',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请选择合同结束时间',
+      },
+    },
+    {
+      fieldName: 'signContactId',
+      label: '客户签约人',
+      component: 'ApiSelect',
+      rules: 'required',
+      componentProps: {
+        api: getSimpleContactList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择客户签约人',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '合同编号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'name',
+      label: '合同名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'customerId',
+      label: '客户',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择客户',
+      },
+    },
+  ];
+}
+
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '合同编号',
+      field: 'no',
+      width: 150,
+      fixed: 'left',
+    },
+    {
+      title: '合同名称',
+      field: 'name',
+      width: 150,
+      fixed: 'left',
+      slots: { default: 'name' },
+    },
+    {
+      title: '客户名称',
+      field: 'customerName',
+      width: 150,
+      slots: { default: 'customerName' },
+    },
+    {
+      title: '商机名称',
+      field: 'businessName',
+      width: 150,
+      slots: { default: 'businessName' },
+    },
+    {
+      title: '合同金额（元）',
+      field: 'totalPrice',
+      width: 150,
+      formatter: 'formatNumber',
+    },
+    {
+      title: '下单时间',
+      field: 'orderDate',
+      width: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '合同开始时间',
+      field: 'startTime',
+      width: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '合同结束时间',
+      field: 'endTime',
+      width: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '客户签约人',
+      field: 'signContactName',
+      width: 150,
+      slots: { default: 'signContactName' },
+    },
+    {
+      title: '公司签约人',
+      field: 'signUserName',
+      width: 150,
+    },
+    {
+      title: '已回款金额（元）',
+      field: 'totalReceivablePrice',
+      width: 150,
+      formatter: 'formatNumber',
+    },
+    {
+      title: '未回款金额（元）',
+      field: 'unpaidPrice',
+      width: 150,
+      formatter: ({ row }) => {
+        return floatToFixed2(row.totalPrice - row.totalReceivablePrice);
+      },
+    },
+    {
+      title: '最后跟进时间',
+      field: 'contactLastTime',
+      width: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '负责人',
+      field: 'ownerUserName',
+      width: 150,
+    },
+    {
+      title: '所属部门',
+      field: 'ownerUserDeptName',
+      width: 150,
+    },
+    {
+      title: '更新时间',
+      field: 'updateTime',
+      width: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      width: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '创建人',
+      field: 'creatorName',
+      width: 150,
+    },
+    {
+      title: '备注',
+      field: 'remark',
+      width: 150,
+    },
+    {
+      title: '合同状态',
+      field: 'auditStatus',
+      fixed: 'right',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      field: 'actions',
+      fixed: 'right',
+      width: 130,
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/contract/index.vue b/apps/web-antd/src/views/crm/contract/index.vue
index 6622d144a..9d306627f 100644
--- a/apps/web-antd/src/views/crm/contract/index.vue
+++ b/apps/web-antd/src/views/crm/contract/index.vue
@@ -1,38 +1,265 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmContractApi } from '#/api/crm/contract';
 
-import { Button } from 'ant-design-vue';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 
+import { Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message, Tabs } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteContract,
+  exportContract,
+  getContractPage,
+  submitContract,
+} from '#/api/crm/contract';
 import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const { push } = useRouter();
+const sceneType = ref('1');
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportContract(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '合同.xls', source: data });
+}
+
+/** 创建合同 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑合同 */
+function handleEdit(row: CrmContractApi.Contract) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除合同 */
+async function handleDelete(row: CrmContractApi.Contract) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteContract(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 提交审核 */
+async function handleSubmit(row: CrmContractApi.Contract) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.submitting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await submitContract(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.submitSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 查看合同详情 */
+function handleDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmContractDetail', params: { id: row.id } });
+}
+
+/** 查看客户详情 */
+function handleCustomerDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
+}
+
+/** 查看联系人详情 */
+function handleContactDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmContactDetail', params: { id: row.signContactId } });
+}
+
+/** 查看商机详情 */
+function handleBusinessDetail(row: CrmContractApi.Contract) {
+  push({ name: 'CrmBusinessDetail', params: { id: row.businessId } });
+}
+
+/** 查看审批详情 */
+function handleProcessDetail(row: CrmContractApi.Contract) {
+  push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.processInstanceId },
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getContractPage({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            sceneType: sceneType.value,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmContractApi.Contract>,
+});
+
+function onChangeSceneType(key: number | string) {
+  sceneType.value = key.toString();
+  gridApi.query();
+}
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【合同】合同管理、合同提醒"
-      url="https://doc.iocoder.cn/crm/contract/"
-    />
-    <DocAlert
-      title="【通用】数据权限"
-      url="https://doc.iocoder.cn/crm/permission/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/contract/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/contract/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【合同】合同管理、合同提醒"
+        url="https://doc.iocoder.cn/crm/contract/"
+      />
+      <DocAlert
+        title="【通用】数据权限"
+        url="https://doc.iocoder.cn/crm/permission/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+    <Grid>
+      <template #top>
+        <Tabs class="border-none" @change="onChangeSceneType">
+          <Tabs.TabPane tab="我负责的" key="1" />
+          <Tabs.TabPane tab="我参与的" key="2" />
+          <Tabs.TabPane tab="下属负责的" key="3" />
+        </Tabs>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['合同']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:contract:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['crm:contract:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #name="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.name }}
+        </Button>
+      </template>
+      <template #customerName="{ row }">
+        <Button type="link" @click="handleCustomerDetail(row)">
+          {{ row.customerName }}
+        </Button>
+      </template>
+      <template #businessName="{ row }">
+        <Button type="link" @click="handleBusinessDetail(row)">
+          {{ row.businessName }}
+        </Button>
+      </template>
+      <template #signContactName="{ row }">
+        <Button type="link" @click="handleContactDetail(row)">
+          {{ row.signContactName }}
+        </Button>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:contract:update'],
+              onClick: handleEdit.bind(null, row),
+              ifShow: row.auditStatus === 0,
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '提交审核',
+              type: 'link',
+              auth: ['crm:contract:update'],
+              onClick: handleSubmit.bind(null, row),
+              ifShow: row.auditStatus === 0,
+            },
+            {
+              label: '查看审批',
+              type: 'link',
+              auth: ['crm:contract:update'],
+              onClick: handleProcessDetail.bind(null, row),
+              ifShow: row.auditStatus !== 0,
+            },
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              auth: ['crm:contract:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              auth: ['crm:contract:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/contract/modules/form.vue b/apps/web-antd/src/views/crm/contract/modules/form.vue
new file mode 100644
index 000000000..5d2b0b78a
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contract/modules/form.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import type { CrmContractApi } from '#/api/crm/contract';
+
+import { computed, ref } from 'vue';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import {
+  createContract,
+  getContract,
+  updateContract,
+} from '#/api/crm/contract';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmContractApi.Contract>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['合同'])
+    : $t('ui.actionTitle.create', ['合同']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // 一共2列
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as CrmContractApi.Contract;
+    try {
+      await (formData.value?.id ? updateContract(data) : createContract(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<CrmContractApi.Contract>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getContract(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-[40%]">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/crm/product/data.ts b/apps/web-antd/src/views/crm/product/data.ts
index 592460a61..348afb372 100644
--- a/apps/web-antd/src/views/crm/product/data.ts
+++ b/apps/web-antd/src/views/crm/product/data.ts
@@ -1,7 +1,10 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
+import { handleTree } from '@vben/utils';
+
 import { z } from '#/adapter/form';
+import { getProductCategoryList } from '#/api/crm/product/category';
 import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
 
 /** 新增/修改的表单 */
@@ -28,17 +31,24 @@ export function useFormSchema(): VbenFormSchema[] {
       rules: 'required',
     },
     {
-      component: 'Input',
+      component: 'ApiTreeSelect',
       fieldName: 'categoryName',
       label: '产品类型',
       rules: 'required',
+      componentProps: {
+        api: async () => {
+          const data = await getProductCategoryList();
+          return handleTree(data);
+        },
+        fieldNames: { label: 'name', value: 'id', children: 'children' },
+      },
     },
     {
       fieldName: 'unit',
       label: '产品单位',
       component: 'Select',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.CRM_PRODUCT_UNIT),
+        options: getDictOptions(DICT_TYPE.CRM_PRODUCT_UNIT, 'number'),
       },
       rules: 'required',
     },

From d71d3122372db5d4baca649801b742145871175d Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Thu, 29 May 2025 17:47:59 +0800
Subject: [PATCH 15/53] feat: crm receivable

---
 .../web-antd/src/views/crm/receivable/data.ts | 205 +++++++++++++
 .../src/views/crm/receivable/index.vue        | 275 ++++++++++++++++--
 .../src/views/crm/receivable/modules/form.vue |  87 ++++++
 3 files changed, 538 insertions(+), 29 deletions(-)
 create mode 100644 apps/web-antd/src/views/crm/receivable/data.ts
 create mode 100644 apps/web-antd/src/views/crm/receivable/modules/form.vue

diff --git a/apps/web-antd/src/views/crm/receivable/data.ts b/apps/web-antd/src/views/crm/receivable/data.ts
new file mode 100644
index 000000000..558b284fc
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/data.ts
@@ -0,0 +1,205 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getCustomerSimpleList } from '#/api/crm/customer';
+import { DICT_TYPE } from '#/utils/dict';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '回款编号',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入回款编号',
+      },
+    },
+    {
+      fieldName: 'customerId',
+      label: '客户',
+      component: 'ApiSelect',
+      rules: 'required',
+      componentProps: {
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择客户',
+      },
+    },
+    {
+      fieldName: 'contractId',
+      label: '合同',
+      component: 'ApiSelect',
+      rules: 'required',
+      componentProps: {
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择合同',
+      },
+    },
+    {
+      fieldName: 'returnTime',
+      label: '回款日期',
+      component: 'DatePicker',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请选择回款日期',
+      },
+    },
+    {
+      fieldName: 'price',
+      label: '回款金额',
+      component: 'InputNumber',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入回款金额',
+        min: 0,
+        precision: 2,
+      },
+    },
+    {
+      fieldName: 'returnType',
+      label: '回款方式',
+      component: 'DictSelect',
+      rules: 'required',
+      componentProps: {
+        type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE,
+        placeholder: '请选择回款方式',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '回款编号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'customerId',
+      label: '客户',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择客户',
+      },
+    },
+  ];
+}
+
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '回款编号',
+      field: 'no',
+      width: 150,
+      fixed: 'left',
+      slots: { default: 'no' },
+    },
+    {
+      title: '客户名称',
+      field: 'customerName',
+      width: 150,
+      slots: { default: 'customerName' },
+    },
+    {
+      title: '合同编号',
+      field: 'contract',
+      width: 150,
+      slots: { default: 'contractNo' },
+    },
+    {
+      title: '回款日期',
+      field: 'returnTime',
+      width: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '回款金额（元）',
+      field: 'price',
+      width: 150,
+      formatter: 'formatNumber',
+    },
+    {
+      title: '回款方式',
+      field: 'returnType',
+      width: 150,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
+      },
+    },
+    {
+      title: '备注',
+      field: 'remark',
+      width: 150,
+    },
+    {
+      title: '合同金额（元）',
+      field: 'contract.totalPrice',
+      width: 150,
+      formatter: 'formatNumber',
+    },
+    {
+      title: '负责人',
+      field: 'ownerUserName',
+      width: 150,
+    },
+    {
+      title: '所属部门',
+      field: 'ownerUserDeptName',
+      width: 150,
+    },
+    {
+      title: '更新时间',
+      field: 'updateTime',
+      width: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      width: 150,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '创建人',
+      field: 'creatorName',
+      width: 150,
+    },
+    {
+      title: '回款状态',
+      field: 'auditStatus',
+      width: 100,
+      fixed: 'right',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      field: 'actions',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/receivable/index.vue b/apps/web-antd/src/views/crm/receivable/index.vue
index 016c4968a..14802db09 100644
--- a/apps/web-antd/src/views/crm/receivable/index.vue
+++ b/apps/web-antd/src/views/crm/receivable/index.vue
@@ -1,38 +1,255 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmReceivableApi } from '#/api/crm/receivable';
 
-import { Button } from 'ant-design-vue';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 
+import { Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message, Tabs } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteReceivable,
+  exportReceivable,
+  getReceivablePage,
+  submitReceivable,
+} from '#/api/crm/receivable';
 import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const { push } = useRouter();
+const sceneType = ref('1');
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportReceivable(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '回款.xls', source: data });
+}
+
+/** 创建回款 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑回款 */
+function handleEdit(row: CrmReceivableApi.Receivable) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除回款 */
+async function handleDelete(row: CrmReceivableApi.Receivable) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.no]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteReceivable(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.no]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 提交审核 */
+async function handleSubmit(row: CrmReceivableApi.Receivable) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.submitting', [row.no]),
+    key: 'action_key_msg',
+  });
+  try {
+    await submitReceivable(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.submitSuccess', [row.no]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 查看回款详情 */
+function handleDetail(row: CrmReceivableApi.Receivable) {
+  push({ name: 'CrmReceivableDetail', params: { id: row.id } });
+}
+
+/** 查看客户详情 */
+function handleCustomerDetail(row: CrmReceivableApi.Receivable) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
+}
+
+/** 查看合同详情 */
+function handleContractDetail(row: CrmReceivableApi.Receivable) {
+  push({ name: 'CrmContractDetail', params: { id: row.contractId } });
+}
+
+/** 查看审批详情 */
+function handleProcessDetail(row: CrmReceivableApi.Receivable) {
+  push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.processInstanceId },
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getReceivablePage({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            sceneType: sceneType.value,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmReceivableApi.Receivable>,
+});
+
+function onChangeSceneType(key: number | string) {
+  sceneType.value = key.toString();
+  gridApi.query();
+}
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【回款】回款管理、回款计划"
-      url="https://doc.iocoder.cn/crm/receivable/"
-    />
-    <DocAlert
-      title="【通用】数据权限"
-      url="https://doc.iocoder.cn/crm/permission/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/receivable/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/receivable/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【回款】回款管理、回款计划"
+        url="https://doc.iocoder.cn/crm/receivable/"
+      />
+      <DocAlert
+        title="【通用】数据权限"
+        url="https://doc.iocoder.cn/crm/permission/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+    <Grid>
+      <template #top>
+        <Tabs class="border-none" @change="onChangeSceneType">
+          <Tabs.TabPane tab="我负责的" key="1" />
+          <Tabs.TabPane tab="我参与的" key="2" />
+          <Tabs.TabPane tab="下属负责的" key="3" />
+        </Tabs>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['回款']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:receivable:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['crm:receivable:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #no="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.no }}
+        </Button>
+      </template>
+      <template #customerName="{ row }">
+        <Button type="link" @click="handleCustomerDetail(row)">
+          {{ row.customerName }}
+        </Button>
+      </template>
+      <template #contractNo="{ row }">
+        <Button
+          v-if="row.contract"
+          type="link"
+          @click="handleContractDetail(row)"
+        >
+          {{ row.contract.no }}
+        </Button>
+        <span v-else>--</span>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:receivable:update'],
+              onClick: handleEdit.bind(null, row),
+              ifShow: row.auditStatus === 0,
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '提交审核',
+              type: 'link',
+              auth: ['crm:receivable:update'],
+              onClick: handleSubmit.bind(null, row),
+              ifShow: row.auditStatus === 0,
+            },
+            {
+              label: '查看审批',
+              type: 'link',
+              auth: ['crm:receivable:update'],
+              onClick: handleProcessDetail.bind(null, row),
+              ifShow: row.auditStatus !== 0,
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:receivable:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/receivable/modules/form.vue b/apps/web-antd/src/views/crm/receivable/modules/form.vue
new file mode 100644
index 000000000..0166fb2b3
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/modules/form.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { CrmReceivableApi } from '#/api/crm/receivable';
+
+import { computed, ref } from 'vue';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import {
+  createReceivable,
+  getReceivable,
+  updateReceivable,
+} from '#/api/crm/receivable';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmReceivableApi.Receivable>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['回款'])
+    : $t('ui.actionTitle.create', ['回款']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // 一共2列
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as CrmReceivableApi.Receivable;
+    try {
+      await (formData.value?.id
+        ? updateReceivable(data)
+        : createReceivable(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<CrmReceivableApi.Receivable>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getReceivable(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-[40%]">
+    <Form class="mx-4" />
+  </Modal>
+</template>

From 54247753176087eb0ec5166e7c2ebc9636bb7783 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Thu, 29 May 2025 19:58:40 +0800
Subject: [PATCH 16/53] feat: crm receivable

---
 .../web-antd/src/views/crm/receivable/data.ts |  90 ++++++-
 .../src/views/crm/receivable/index.vue        |   2 +-
 .../src/views/crm/receivable/modules/form.vue |  20 +-
 .../src/views/crm/receivable/plan/data.ts     | 229 +++++++++++++++++
 .../src/views/crm/receivable/plan/index.vue   | 237 +++++++++++++++---
 .../crm/receivable/plan/modules/form.vue      |  88 +++++++
 6 files changed, 621 insertions(+), 45 deletions(-)
 create mode 100644 apps/web-antd/src/views/crm/receivable/plan/data.ts
 create mode 100644 apps/web-antd/src/views/crm/receivable/plan/modules/form.vue

diff --git a/apps/web-antd/src/views/crm/receivable/data.ts b/apps/web-antd/src/views/crm/receivable/data.ts
index 558b284fc..cbbc5c25f 100644
--- a/apps/web-antd/src/views/crm/receivable/data.ts
+++ b/apps/web-antd/src/views/crm/receivable/data.ts
@@ -1,24 +1,48 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
+import { getContractSimpleList } from '#/api/crm/contract';
 import { getCustomerSimpleList } from '#/api/crm/customer';
-import { DICT_TYPE } from '#/utils/dict';
+import { getReceivablePlanSimpleList } from '#/api/crm/receivable/plan';
+import { getSimpleUserList } from '#/api/system/user';
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
 
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
     {
       fieldName: 'no',
       label: '回款编号',
       component: 'Input',
       rules: 'required',
       componentProps: {
-        placeholder: '请输入回款编号',
+        placeholder: '保存时自动生成',
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'ownerUserId',
+      label: '负责人',
+      component: 'ApiSelect',
+      rules: 'required',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        placeholder: '请选择客户',
       },
     },
     {
       fieldName: 'customerId',
-      label: '客户',
+      label: '客户名称',
       component: 'ApiSelect',
       rules: 'required',
       componentProps: {
@@ -30,23 +54,63 @@ export function useFormSchema(): VbenFormSchema[] {
     },
     {
       fieldName: 'contractId',
-      label: '合同',
-      component: 'ApiSelect',
+      label: '合同名称',
+      component: 'Select',
       rules: 'required',
-      componentProps: {
-        api: getCustomerSimpleList,
-        labelField: 'name',
-        valueField: 'id',
-        placeholder: '请选择合同',
+      dependencies: {
+        triggerFields: ['customerId'],
+        disabled: (values) => !values.customerId,
+        async componentProps(values) {
+          if (values.customerId) {
+            values.contractId = undefined;
+            const contracts = await getContractSimpleList(values.customerId);
+            return {
+              options: contracts.map((item) => ({
+                label: item.name,
+                value: item.id,
+                disabled: item.auditStatus === 20,
+              })),
+              placeholder: '请选择合同',
+            } as any;
+          }
+        },
+      },
+    },
+    {
+      fieldName: 'planId',
+      label: '回款期数',
+      component: 'Select',
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['contractId'],
+        disabled: (values) => !values.contractId,
+        async componentProps(values) {
+          if (values.contractId) {
+            values.planId = undefined;
+            const plans = await getReceivablePlanSimpleList(
+              values.customerId,
+              values.contractId,
+            );
+            return {
+              options: plans.map((item) => ({
+                label: item.period,
+                value: item.id,
+              })),
+              placeholder: '请选择回款期数',
+            } as any;
+          }
+        },
       },
     },
     {
       fieldName: 'returnTime',
       label: '回款日期',
       component: 'DatePicker',
-      rules: 'required',
       componentProps: {
         placeholder: '请选择回款日期',
+        showTime: false,
+        valueFormat: 'x',
+        format: 'YYYY-MM-DD',
       },
     },
     {
@@ -63,10 +127,10 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'returnType',
       label: '回款方式',
-      component: 'DictSelect',
+      component: 'Select',
       rules: 'required',
       componentProps: {
-        type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE,
+        options: getDictOptions(DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE, 'number'),
         placeholder: '请选择回款方式',
       },
     },
diff --git a/apps/web-antd/src/views/crm/receivable/index.vue b/apps/web-antd/src/views/crm/receivable/index.vue
index 14802db09..ff187d968 100644
--- a/apps/web-antd/src/views/crm/receivable/index.vue
+++ b/apps/web-antd/src/views/crm/receivable/index.vue
@@ -49,7 +49,7 @@ function handleCreate() {
 
 /** 编辑回款 */
 function handleEdit(row: CrmReceivableApi.Receivable) {
-  formModalApi.setData(row).open();
+  formModalApi.setData({ receivable: row }).open();
 }
 
 /** 删除回款 */
diff --git a/apps/web-antd/src/views/crm/receivable/modules/form.vue b/apps/web-antd/src/views/crm/receivable/modules/form.vue
index 0166fb2b3..e92610c25 100644
--- a/apps/web-antd/src/views/crm/receivable/modules/form.vue
+++ b/apps/web-antd/src/views/crm/receivable/modules/form.vue
@@ -65,12 +65,28 @@ const [Modal, modalApi] = useVbenModal({
     }
     // 加载数据
     const data = modalApi.getData<CrmReceivableApi.Receivable>();
-    if (!data || !data.id) {
+    if (!data) {
       return;
     }
+    const { receivable, plan } = data;
     modalApi.lock();
     try {
-      formData.value = await getReceivable(data.id as number);
+      if (receivable) {
+        formData.value = await getReceivable(receivable.id as number);
+      } else if (plan) {
+        formData.value = plan.id
+          ? {
+              planId: plan.id,
+              price: plan.price,
+              returnType: plan.returnType,
+              customerId: plan.customerId,
+              contractId: plan.contractId,
+            }
+          : {
+              customerId: plan.customerId,
+              contractId: plan.contractId,
+            };
+      }
       // 设置到 values
       await formApi.setValues(formData.value);
     } finally {
diff --git a/apps/web-antd/src/views/crm/receivable/plan/data.ts b/apps/web-antd/src/views/crm/receivable/plan/data.ts
new file mode 100644
index 000000000..cc76b1eeb
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/plan/data.ts
@@ -0,0 +1,229 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getCustomerSimpleList } from '#/api/crm/customer';
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'customerId',
+      label: '客户',
+      component: 'ApiSelect',
+      rules: 'required',
+      componentProps: {
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择客户',
+      },
+    },
+    {
+      fieldName: 'contractId',
+      label: '合同',
+      component: 'ApiSelect',
+      rules: 'required',
+      componentProps: {
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择合同',
+      },
+    },
+    {
+      fieldName: 'period',
+      label: '期数',
+      component: 'Input',
+      componentProps: {
+        placeholder: '保存时自动生成',
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'price',
+      label: '计划回款金额',
+      component: 'InputNumber',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入计划回款金额',
+        min: 0,
+        precision: 2,
+      },
+    },
+    {
+      fieldName: 'returnTime',
+      label: '计划回款日期',
+      component: 'DatePicker',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请选择计划回款日期',
+      },
+    },
+    {
+      fieldName: 'remindDays',
+      label: '提前几天提醒',
+      component: 'InputNumber',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入提前几天提醒',
+        min: 0,
+      },
+    },
+    {
+      fieldName: 'returnType',
+      label: '回款方式',
+      component: 'Select',
+      rules: 'required',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE, 'number'),
+        placeholder: '请选择回款方式',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'customerId',
+      label: '客户',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getCustomerSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择客户',
+      },
+    },
+    {
+      fieldName: 'contractNo',
+      label: '合同编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入合同编号',
+      },
+    },
+  ];
+}
+
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '客户名称',
+      field: 'customerName',
+      width: 150,
+      fixed: 'left',
+      slots: { default: 'customerName' },
+    },
+    {
+      title: '合同编号',
+      field: 'contractNo',
+      width: 200,
+    },
+    {
+      title: '期数',
+      field: 'period',
+      width: 150,
+      slots: { default: 'period' },
+    },
+    {
+      title: '计划回款金额（元）',
+      field: 'price',
+      width: 160,
+      formatter: 'formatNumber',
+    },
+    {
+      title: '计划回款日期',
+      field: 'returnTime',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '提前几天提醒',
+      field: 'remindDays',
+      width: 150,
+    },
+    {
+      title: '提醒日期',
+      field: 'remindTime',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '回款方式',
+      field: 'returnType',
+      width: 130,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
+      },
+    },
+    {
+      title: '备注',
+      field: 'remark',
+    },
+    {
+      title: '负责人',
+      field: 'ownerUserName',
+      width: 120,
+    },
+    {
+      title: '实际回款金额（元）',
+      field: 'receivable.price',
+      width: 160,
+      formatter: 'formatNumber',
+    },
+    {
+      title: '实际回款日期',
+      field: 'receivable.returnTime',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '未回款金额（元）',
+      field: 'unpaidPrice',
+      width: 160,
+      formatter: ({ row }) => {
+        if (row.receivable) {
+          return row.price - row.receivable.price;
+        }
+        return row.price;
+      },
+    },
+    {
+      title: '更新时间',
+      field: 'updateTime',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '创建人',
+      field: 'creatorName',
+      width: 100,
+    },
+    {
+      title: '操作',
+      field: 'actions',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/receivable/plan/index.vue b/apps/web-antd/src/views/crm/receivable/plan/index.vue
index dc177ae79..1f4c479cb 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/index.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/index.vue
@@ -1,38 +1,217 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
 
-import { Button } from 'ant-design-vue';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 
+import { Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message, Tabs } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteReceivablePlan,
+  exportReceivablePlan,
+  getReceivablePlanPage,
+} from '#/api/crm/receivable/plan';
 import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import ReceivableForm from '../modules/form.vue';
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const { push } = useRouter();
+const sceneType = ref('1');
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [ReceivableFormModal, receivableFormModalApi] = useVbenModal({
+  connectedComponent: ReceivableForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportReceivablePlan(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '回款计划.xls', source: data });
+}
+
+/** 创建回款计划 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑回款计划 */
+function handleEdit(row: CrmReceivablePlanApi.ReceivablePlan) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除回款计划 */
+async function handleDelete(row: CrmReceivablePlanApi.ReceivablePlan) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.period]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteReceivablePlan(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.period]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 创建回款 */
+function handleCreateReceivable(row: CrmReceivablePlanApi.ReceivablePlan) {
+  receivableFormModalApi.setData({ plan: row }).open();
+}
+
+/** 查看回款计划详情 */
+function handleDetail(row: CrmReceivablePlanApi.ReceivablePlan) {
+  push({ name: 'CrmReceivablePlanDetail', params: { id: row.id } });
+}
+
+/** 查看客户详情 */
+function handleCustomerDetail(row: CrmReceivablePlanApi.ReceivablePlan) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getReceivablePlanPage({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            sceneType: sceneType.value,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmReceivablePlanApi.ReceivablePlan>,
+});
+
+function onChangeSceneType(key: number | string) {
+  sceneType.value = key.toString();
+  gridApi.query();
+}
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【回款】回款管理、回款计划"
-      url="https://doc.iocoder.cn/crm/receivable/"
-    />
-    <DocAlert
-      title="【通用】数据权限"
-      url="https://doc.iocoder.cn/crm/permission/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/receivable/plan/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/receivable/plan/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【回款】回款管理、回款计划"
+        url="https://doc.iocoder.cn/crm/receivable/"
+      />
+      <DocAlert
+        title="【通用】数据权限"
+        url="https://doc.iocoder.cn/crm/permission/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+    <ReceivableFormModal @success="onRefresh" />
+    <Grid>
+      <template #top>
+        <Tabs class="border-none" @change="onChangeSceneType">
+          <Tabs.TabPane tab="我负责的" key="1" />
+          <Tabs.TabPane tab="下属负责的" key="3" />
+        </Tabs>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['回款计划']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:receivable-plan:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['crm:receivable-plan:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #customerName="{ row }">
+        <Button type="link" @click="handleCustomerDetail(row)">
+          {{ row.customerName }}
+        </Button>
+      </template>
+      <template #period="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.period }}
+        </Button>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['回款']),
+              type: 'link',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:receivable:create'],
+              onClick: handleCreateReceivable.bind(null, row),
+              ifShow: !row.receivableId,
+            },
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:receivable-plan:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:receivable-plan:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.period]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/form.vue b/apps/web-antd/src/views/crm/receivable/plan/modules/form.vue
new file mode 100644
index 000000000..41a2132c1
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/plan/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
+
+import { computed, ref } from 'vue';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import {
+  createReceivablePlan,
+  getReceivablePlan,
+  updateReceivablePlan,
+} from '#/api/crm/receivable/plan';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmReceivablePlanApi.ReceivablePlan>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['回款计划'])
+    : $t('ui.actionTitle.create', ['回款计划']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // 一共2列
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as CrmReceivablePlanApi.ReceivablePlan;
+    try {
+      await (formData.value?.id
+        ? updateReceivablePlan(data)
+        : createReceivablePlan(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<CrmReceivablePlanApi.ReceivablePlan>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getReceivablePlan(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-[40%]">
+    <Form class="mx-4" />
+  </Modal>
+</template>

From b4855beb1f96f1b70b0d05911e1b154fd84fd6a2 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Thu, 29 May 2025 20:03:12 +0800
Subject: [PATCH 17/53] feat: crm customer pool

---
 .../src/views/crm/customer/pool/data.ts       | 155 ++++++++++++++++++
 .../src/views/crm/customer/pool/index.vue     | 113 ++++++++++---
 2 files changed, 241 insertions(+), 27 deletions(-)
 create mode 100644 apps/web-antd/src/views/crm/customer/pool/data.ts

diff --git a/apps/web-antd/src/views/crm/customer/pool/data.ts b/apps/web-antd/src/views/crm/customer/pool/data.ts
new file mode 100644
index 000000000..b0909b004
--- /dev/null
+++ b/apps/web-antd/src/views/crm/customer/pool/data.ts
@@ -0,0 +1,155 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '客户名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户名称',
+      },
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机',
+      },
+    },
+    {
+      fieldName: 'industryId',
+      label: '所属行业',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, 'number'),
+        placeholder: '请选择所属行业',
+      },
+    },
+    {
+      fieldName: 'level',
+      label: '客户级别',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL, 'number'),
+        placeholder: '请选择客户级别',
+      },
+    },
+    {
+      fieldName: 'source',
+      label: '客户来源',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE, 'number'),
+        placeholder: '请选择客户来源',
+      },
+    },
+  ];
+}
+
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '客户名称',
+      field: 'name',
+      width: 160,
+      fixed: 'left',
+      slots: { default: 'name' },
+    },
+    {
+      title: '客户来源',
+      field: 'source',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_CUSTOMER_SOURCE },
+      },
+    },
+    {
+      title: '手机',
+      field: 'mobile',
+      width: 120,
+    },
+    {
+      title: '电话',
+      field: 'telephone',
+      width: 120,
+    },
+    {
+      title: '邮箱',
+      field: 'email',
+      width: 140,
+    },
+    {
+      title: '客户级别',
+      field: 'level',
+      width: 135,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_CUSTOMER_LEVEL },
+      },
+    },
+    {
+      title: '客户行业',
+      field: 'industryId',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
+      },
+    },
+    {
+      title: '下次联系时间',
+      field: 'contactNextTime',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '备注',
+      field: 'remark',
+      width: 200,
+    },
+    {
+      title: '成交状态',
+      field: 'dealStatus',
+      width: 80,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      title: '最后跟进时间',
+      field: 'contactLastTime',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '最后跟进记录',
+      field: 'contactLastContent',
+      width: 200,
+    },
+    {
+      title: '更新时间',
+      field: 'updateTime',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '创建人',
+      field: 'creatorName',
+      width: 100,
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/customer/pool/index.vue b/apps/web-antd/src/views/crm/customer/pool/index.vue
index aa330f83c..df3858baa 100644
--- a/apps/web-antd/src/views/crm/customer/pool/index.vue
+++ b/apps/web-antd/src/views/crm/customer/pool/index.vue
@@ -1,38 +1,97 @@
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmCustomerApi } from '#/api/crm/customer';
+
+import { useRouter } from 'vue-router';
+
 import { Page } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
 
 import { Button } from 'ant-design-vue';
 
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { exportCustomer, getCustomerPage } from '#/api/crm/customer';
 import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+const { push } = useRouter();
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportCustomer(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '客户公海.xls', source: data });
+}
+
+/** 查看客户详情 */
+function handleDetail(row: CrmCustomerApi.Customer) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.id } });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCustomerPage({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            pool: true,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmCustomerApi.Customer>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【客户】客户管理、公海客户"
-      url="https://doc.iocoder.cn/crm/customer/"
-    />
-    <DocAlert
-      title="【通用】数据权限"
-      url="https://doc.iocoder.cn/crm/permission/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/customer/pool/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/customer/pool/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【客户】客户管理、公海客户"
+        url="https://doc.iocoder.cn/crm/customer/"
+      />
+      <DocAlert
+        title="【通用】数据权限"
+        url="https://doc.iocoder.cn/crm/permission/"
+      />
+    </template>
+
+    <Grid>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['crm:customer:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #name="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.name }}
+        </Button>
+      </template>
+    </Grid>
   </Page>
 </template>

From 32bd64a00879192798da044aeb47aa32c9b6eb25 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Thu, 29 May 2025 20:58:47 +0800
Subject: [PATCH 18/53] feat: customer pool config

---
 .../views/crm/customer/poolConfig/index.vue   | 167 +++++++++++++++---
 1 file changed, 138 insertions(+), 29 deletions(-)

diff --git a/apps/web-antd/src/views/crm/customer/poolConfig/index.vue b/apps/web-antd/src/views/crm/customer/poolConfig/index.vue
index 717d8cbec..1b6efe91b 100644
--- a/apps/web-antd/src/views/crm/customer/poolConfig/index.vue
+++ b/apps/web-antd/src/views/crm/customer/poolConfig/index.vue
@@ -1,38 +1,147 @@
 <script lang="ts" setup>
+import type { CrmCustomerPoolConfigApi } from '#/api/crm/customer/poolConfig';
+
+import { onMounted, ref } from 'vue';
+
 import { Page } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import { Card, message } from 'ant-design-vue';
 
-import { DocAlert } from '#/components/doc-alert';
+import { useVbenForm } from '#/adapter/form';
+import {
+  getCustomerPoolConfig,
+  saveCustomerPoolConfig,
+} from '#/api/crm/customer/poolConfig';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmCustomerPoolConfigApi.CustomerPoolConfig>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    // 所有表单项
+    labelClass: 'w-2/6',
+  },
+  layout: 'horizontal',
+  wrapperClass: 'grid-cols-1',
+  actionWrapperClass: 'text-center',
+  schema: [
+    {
+      component: 'RadioGroup',
+      fieldName: 'enabled',
+      label: '客户公海规则设置',
+      componentProps: {
+        options: [
+          { label: '开启', value: true },
+          { label: '关闭', value: false },
+        ],
+      },
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'contactExpireDays',
+      componentProps: {
+        min: 0,
+        precision: 0,
+      },
+      renderComponentContent: () => ({
+        addonAfter: () => '天不跟进或',
+      }),
+      dependencies: {
+        triggerFields: ['enabled'],
+        show: (value) => value.enabled,
+      },
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'dealExpireDays',
+      renderComponentContent: () => ({
+        addonBefore: () => '或',
+        addonAfter: () => '天未成交',
+      }),
+      componentProps: {
+        min: 0,
+        precision: 0,
+      },
+      dependencies: {
+        triggerFields: ['enabled'],
+        show: (value) => value.enabled,
+      },
+    },
+    {
+      component: 'RadioGroup',
+      fieldName: 'notifyEnabled',
+      label: '提前提醒设置',
+      componentProps: {
+        options: [
+          { label: '开启', value: true },
+          { label: '关闭', value: false },
+        ],
+      },
+      dependencies: {
+        triggerFields: ['enabled'],
+        show: (value) => value.enabled,
+      },
+      defaultValue: false,
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'notifyDays',
+      componentProps: {
+        min: 0,
+        precision: 0,
+      },
+      renderComponentContent: () => ({
+        addonBefore: () => '提前',
+        addonAfter: () => '天提醒',
+      }),
+      dependencies: {
+        triggerFields: ['notifyEnabled'],
+        show: (value) => value.enabled && value.notifyEnabled,
+      },
+    },
+  ],
+  // 提交函数
+  handleSubmit: onSubmit,
+});
+
+async function onSubmit() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  // 提交表单
+  const data =
+    (await formApi.getValues()) as CrmCustomerPoolConfigApi.CustomerPoolConfig;
+  formApi.setState({ commonConfig: { disabled: true } });
+  try {
+    await saveCustomerPoolConfig(data);
+    // 关闭并提示
+    emit('success');
+    message.success($t('ui.actionMessage.operationSuccess'));
+  } finally {
+    formApi.setState({ commonConfig: { disabled: false } });
+  }
+}
+
+async function getConfigInfo() {
+  try {
+    const res = await getCustomerPoolConfig();
+    formData.value = res;
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+onMounted(() => {
+  getConfigInfo();
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【客户】客户管理、公海客户"
-      url="https://doc.iocoder.cn/crm/customer/"
-    />
-    <DocAlert
-      title="【通用】数据权限"
-      url="https://doc.iocoder.cn/crm/permission/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/customer/poolConfig/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/customer/poolConfig/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <Card title="客户公海规则设置">
+      <Form class="w-1/4" />
+    </Card>
   </Page>
 </template>

From 62bb005748fc4f73e2578ccd032759e64a952dda Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Thu, 29 May 2025 21:09:54 +0800
Subject: [PATCH 19/53] feat: config

---
 .../src/views/crm/contract/config/index.vue   | 124 ++++++++++++++----
 .../views/crm/customer/poolConfig/index.vue   |  17 ++-
 2 files changed, 107 insertions(+), 34 deletions(-)

diff --git a/apps/web-antd/src/views/crm/contract/config/index.vue b/apps/web-antd/src/views/crm/contract/config/index.vue
index db64ed742..d0dcd1aff 100644
--- a/apps/web-antd/src/views/crm/contract/config/index.vue
+++ b/apps/web-antd/src/views/crm/contract/config/index.vue
@@ -1,38 +1,104 @@
 <script lang="ts" setup>
+import type { CrmContractConfigApi } from '#/api/crm/contract/config';
+
+import { onMounted } from 'vue';
+
 import { Page } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import { Card, message } from 'ant-design-vue';
 
-import { DocAlert } from '#/components/doc-alert';
+import { useVbenForm } from '#/adapter/form';
+import {
+  getContractConfig,
+  saveContractConfig,
+} from '#/api/crm/contract/config';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    // 所有表单项
+    labelClass: 'w-2/6',
+  },
+  layout: 'horizontal',
+  wrapperClass: 'grid-cols-1',
+  actionWrapperClass: 'text-center',
+  schema: [
+    {
+      component: 'RadioGroup',
+      fieldName: 'notifyEnabled',
+      label: '提前提醒设置',
+      componentProps: {
+        options: [
+          { label: '提醒', value: true },
+          { label: '不提醒', value: false },
+        ],
+      },
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'notifyDays',
+      componentProps: {
+        min: 0,
+        precision: 0,
+      },
+      renderComponentContent: () => ({
+        addonBefore: () => '提前',
+        addonAfter: () => '天提醒',
+      }),
+      dependencies: {
+        triggerFields: ['notifyEnabled'],
+        trigger(values) {
+          values.notifyDays = undefined;
+        },
+        show: (value) => value.notifyEnabled,
+      },
+    },
+  ],
+  // 提交函数
+  handleSubmit: onSubmit,
+});
+
+async function onSubmit() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  // 提交表单
+  const data = (await formApi.getValues()) as CrmContractConfigApi.Config;
+  if (!data.notifyEnabled) {
+    data.notifyDays = undefined;
+  }
+  formApi.setValues(data);
+  try {
+    await saveContractConfig(data);
+    // 关闭并提示
+    emit('success');
+    message.success($t('ui.actionMessage.operationSuccess'));
+  } finally {
+    formApi.setValues(data);
+  }
+}
+
+async function getConfigInfo() {
+  try {
+    const res = await getContractConfig();
+    formApi.setValues(res);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+onMounted(() => {
+  getConfigInfo();
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【合同】合同管理、合同提醒"
-      url="https://doc.iocoder.cn/crm/contract/"
-    />
-    <DocAlert
-      title="【通用】数据权限"
-      url="https://doc.iocoder.cn/crm/permission/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/contract/config/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/contract/config/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <Card title="合同配置设置">
+      <Form class="w-1/4" />
+    </Card>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/customer/poolConfig/index.vue b/apps/web-antd/src/views/crm/customer/poolConfig/index.vue
index 1b6efe91b..75244ab15 100644
--- a/apps/web-antd/src/views/crm/customer/poolConfig/index.vue
+++ b/apps/web-antd/src/views/crm/customer/poolConfig/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { CrmCustomerPoolConfigApi } from '#/api/crm/customer/poolConfig';
 
-import { onMounted, ref } from 'vue';
+import { onMounted } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
@@ -15,7 +15,6 @@ import {
 import { $t } from '#/locales';
 
 const emit = defineEmits(['success']);
-const formData = ref<CrmCustomerPoolConfigApi.CustomerPoolConfig>();
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -113,21 +112,29 @@ async function onSubmit() {
   // 提交表单
   const data =
     (await formApi.getValues()) as CrmCustomerPoolConfigApi.CustomerPoolConfig;
-  formApi.setState({ commonConfig: { disabled: true } });
+  if (!data.enabled) {
+    data.contactExpireDays = undefined;
+    data.dealExpireDays = undefined;
+    data.notifyEnabled = false;
+  }
+  if (!data.notifyEnabled) {
+    data.notifyDays = undefined;
+  }
+  formApi.setValues(data);
   try {
     await saveCustomerPoolConfig(data);
     // 关闭并提示
     emit('success');
     message.success($t('ui.actionMessage.operationSuccess'));
   } finally {
-    formApi.setState({ commonConfig: { disabled: false } });
+    formApi.setValues(data);
   }
 }
 
 async function getConfigInfo() {
   try {
     const res = await getCustomerPoolConfig();
-    formData.value = res;
+    formApi.setValues(res);
   } catch (error) {
     console.error(error);
   }

From 49697994126acf9714e54b0df34b4eb4cf34fab6 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Thu, 29 May 2025 21:11:12 +0800
Subject: [PATCH 20/53] feat: config

---
 apps/web-antd/src/views/crm/business/status/data.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/apps/web-antd/src/views/crm/business/status/data.ts b/apps/web-antd/src/views/crm/business/status/data.ts
index 934d717b6..cae23dcf5 100644
--- a/apps/web-antd/src/views/crm/business/status/data.ts
+++ b/apps/web-antd/src/views/crm/business/status/data.ts
@@ -59,24 +59,20 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'name',
       title: '状态组名',
-      width: 200,
     },
     {
       field: 'deptNames',
       title: '应用部门',
-      width: 200,
       formatter: ({ cellValue }) =>
         cellValue?.length > 0 ? cellValue.join(' ') : '全公司',
     },
     {
       field: 'creator',
       title: '创建人',
-      width: 100,
     },
     {
       field: 'createTime',
       title: '创建时间',
-      width: 150,
       formatter: 'formatDateTime',
     },
     {

From a043e4a746acbc2bb9ec8faaf85ad2c8ae7fb130 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Thu, 29 May 2025 23:27:57 +0800
Subject: [PATCH 21/53] feat: crm backlog

---
 apps/web-antd/src/views/crm/backlog/data.ts   | 670 ------------------
 apps/web-antd/src/views/crm/backlog/index.vue |  31 +-
 .../modules/ReceivablePlanRemindList.vue      |  90 ---
 .../crm/backlog/modules/clue-follow-list.vue  |  26 +-
 .../backlog/modules/contract-audit-list.vue   |  23 +-
 ...emindList.vue => contract-remind-list.vue} |  73 +-
 ...ollowList.vue => customer-follow-list.vue} |  30 +-
 ....vue => customer-put-pool-remind-list.vue} |  30 +-
 ...st.vue => customer-today-contact-list.vue} |  40 +-
 ...uditList.vue => receivable-audit-list.vue} |  57 +-
 .../modules/receivable-plan-remind-list.vue   | 101 +++
 11 files changed, 304 insertions(+), 867 deletions(-)
 delete mode 100644 apps/web-antd/src/views/crm/backlog/modules/ReceivablePlanRemindList.vue
 rename apps/web-antd/src/views/crm/backlog/modules/{ContractRemindList.vue => contract-remind-list.vue} (52%)
 rename apps/web-antd/src/views/crm/backlog/modules/{CustomerFollowList.vue => customer-follow-list.vue} (57%)
 rename apps/web-antd/src/views/crm/backlog/modules/{CustomerPutPoolRemindList.vue => customer-put-pool-remind-list.vue} (59%)
 rename apps/web-antd/src/views/crm/backlog/modules/{CustomerTodayContactList.vue => customer-today-contact-list.vue} (51%)
 rename apps/web-antd/src/views/crm/backlog/modules/{ReceivableAuditList.vue => receivable-audit-list.vue} (59%)
 create mode 100644 apps/web-antd/src/views/crm/backlog/modules/receivable-plan-remind-list.vue

diff --git a/apps/web-antd/src/views/crm/backlog/data.ts b/apps/web-antd/src/views/crm/backlog/data.ts
index ef6047d0e..4bd325004 100644
--- a/apps/web-antd/src/views/crm/backlog/data.ts
+++ b/apps/web-antd/src/views/crm/backlog/data.ts
@@ -1,15 +1,5 @@
 import type { Ref } from 'vue';
 
-import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { CrmReceivableApi } from '#/api/crm/receivable';
-
-import { useAccess } from '@vben/access';
-
-import { DICT_TYPE } from '#/utils';
-
-const { hasAccessByCodes } = useAccess();
-
 export interface LeftSideItem {
   name: string;
   menu: string;
@@ -109,663 +99,3 @@ export const useLeftSides = (
     },
   ];
 };
-
-/** 分配给我的线索 列表的搜索表单 */
-export function useClueFollowFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'followUpStatus',
-      label: '状态',
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        options: FOLLOWUP_STATUS,
-      },
-      defaultValue: false,
-    },
-  ];
-}
-
-/** 分配给我的线索 列表的字段 */
-export function useClueFollowColumns(): VxeTableGridOptions['columns'] {
-  return [
-    {
-      field: 'name',
-      title: '线索名称',
-      fixed: 'left',
-      slots: { default: 'name' },
-    },
-    {
-      field: 'source',
-      title: '线索来源',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_CUSTOMER_SOURCE },
-      },
-    },
-    {
-      field: 'mobile',
-      title: '手机',
-    },
-    {
-      field: 'telephone',
-      title: '电话',
-    },
-    {
-      field: 'email',
-      title: '邮箱',
-    },
-    {
-      field: 'detailAddress',
-      title: '地址',
-    },
-    {
-      field: 'industryId',
-      title: '客户行业',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
-      },
-    },
-    {
-      field: 'level',
-      title: '客户级别',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_CUSTOMER_LEVEL },
-      },
-    },
-    {
-      field: 'contactNextTime',
-      title: '下次联系时间',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'remark',
-      title: '备注',
-    },
-    {
-      field: 'contactLastTime',
-      title: '最后跟进时间',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'contactLastContent',
-      title: '最后跟进记录',
-    },
-    {
-      field: 'ownerUserName',
-      title: '负责人',
-    },
-    {
-      field: 'ownerUserDeptName',
-      title: '所属部门',
-    },
-    {
-      field: 'updateTime',
-      title: '更新时间',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'createTime',
-      title: '创建时间',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'creatorName',
-      title: '创建人',
-    },
-  ];
-}
-
-/** 合同审核列表的搜索表单 */
-export function useContractAuditFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'auditStatus',
-      label: '合同状态',
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        options: AUDIT_STATUS,
-      },
-      defaultValue: 10,
-    },
-  ];
-}
-
-/** 合同提醒列表的搜索表单 */
-export function useContractRemindFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'expiryType',
-      label: '到期状态',
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        options: CONTRACT_EXPIRY_TYPE,
-      },
-      defaultValue: 1,
-    },
-  ];
-}
-
-/** 合同审核列表的字段 */
-export function useContractColumns(): VxeTableGridOptions['columns'] {
-  return [
-    {
-      field: 'no',
-      title: '合同编号',
-      fixed: 'left',
-    },
-    {
-      field: 'name',
-      title: '合同名称',
-      slots: { default: 'name' },
-    },
-    {
-      field: 'customerName',
-      title: '客户名称',
-      slots: { default: 'customerName' },
-    },
-    {
-      field: 'businessName',
-      title: '商机名称',
-      slots: { default: 'businessName' },
-    },
-    {
-      field: 'price',
-      title: '合同金额（元）',
-      formatter: 'formatNumber',
-    },
-    {
-      field: 'orderDate',
-      title: '下单时间',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'startTime',
-      title: '合同开始时间',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'endTime',
-      title: '合同结束时间',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'contactName',
-      title: '客户签约人',
-      slots: { default: 'contactName' },
-    },
-    {
-      field: 'signUserName',
-      title: '公司签约人',
-    },
-    {
-      field: 'remark',
-      title: '备注',
-    },
-    {
-      field: 'totalReceivablePrice',
-      title: '已回款金额（元）',
-      formatter: 'formatNumber',
-    },
-    {
-      field: 'noReceivablePrice',
-      title: '未回款金额（元）',
-      formatter: 'formatNumber',
-    },
-    {
-      field: 'contactLastTime',
-      title: '最后跟进时间',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'ownerUserName',
-      title: '负责人',
-    },
-    {
-      field: 'ownerUserDeptName',
-      title: '所属部门',
-    },
-    {
-      field: 'updateTime',
-      title: '更新时间',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'createTime',
-      title: '创建时间',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'creatorName',
-      title: '创建人',
-    },
-    {
-      field: 'auditStatus',
-      title: '合同状态',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
-      },
-    },
-    {
-      title: '操作',
-      width: 80,
-      fixed: 'right',
-      slots: { default: 'actions' },
-    },
-  ];
-}
-
-/** 客户跟进列表的搜索表单 */
-export function useCustomerFollowFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'followUpStatus',
-      label: '状态',
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        options: FOLLOWUP_STATUS,
-      },
-      defaultValue: false,
-    },
-  ];
-}
-
-/** 待进入公海客户列表的搜索表单 */
-export function useCustomerPutPoolFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'sceneType',
-      label: '归属',
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        options: SCENE_TYPES,
-      },
-      defaultValue: 1,
-    },
-  ];
-}
-
-/** 今日需联系客户列表的搜索表单 */
-export function useCustomerTodayContactFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'contactStatus',
-      label: '状态',
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        options: CONTACT_STATUS,
-      },
-      defaultValue: 1,
-    },
-    {
-      fieldName: 'sceneType',
-      label: '归属',
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        options: SCENE_TYPES,
-      },
-      defaultValue: 1,
-    },
-  ];
-}
-
-/** 客户列表的字段 */
-export function useCustomerColumns(): VxeTableGridOptions['columns'] {
-  return [
-    {
-      field: 'name',
-      title: '客户名称',
-      slots: { default: 'name' },
-    },
-    {
-      field: 'source',
-      title: '客户来源',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_CUSTOMER_SOURCE },
-      },
-    },
-    {
-      field: 'mobile',
-      title: '手机',
-    },
-    {
-      field: 'telephone',
-      title: '电话',
-    },
-    {
-      field: 'email',
-      title: '邮箱',
-    },
-    {
-      field: 'level',
-      title: '客户级别',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_CUSTOMER_LEVEL },
-      },
-    },
-    {
-      field: 'industryId',
-      title: '客户行业',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
-      },
-    },
-    {
-      field: 'contactNextTime',
-      title: '下次联系时间',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'remark',
-      title: '备注',
-    },
-    {
-      field: 'lockStatus',
-      title: '锁定状态',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
-      },
-    },
-    {
-      field: 'dealStatus',
-      title: '成交状态',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
-      },
-    },
-    {
-      field: 'contactLastTime',
-      title: '最后跟进时间',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'contactLastContent',
-      title: '最后跟进记录',
-    },
-    {
-      field: 'detailAddress',
-      title: '地址',
-    },
-    {
-      field: 'poolDay',
-      title: '距离进入公海天数',
-    },
-    {
-      field: 'ownerUserName',
-      title: '负责人',
-    },
-    {
-      field: 'ownerUserDeptName',
-      title: '所属部门',
-    },
-    {
-      field: 'updateTime',
-      title: '更新时间',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'createTime',
-      title: '创建时间',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'creatorName',
-      title: '创建人',
-    },
-  ];
-}
-
-/** 回款审核列表的搜索表单 */
-export function useReceivableAuditFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'auditStatus',
-      label: '合同状态',
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        options: AUDIT_STATUS,
-      },
-      defaultValue: 10,
-    },
-  ];
-}
-
-/** 回款审核列表的字段 */
-export function useReceivableAuditColumns<T = CrmReceivableApi.Receivable>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
-  return [
-    {
-      field: 'no',
-      title: '回款编号',
-      fixed: 'left',
-      slots: { default: 'no' },
-    },
-    {
-      field: 'customerName',
-      title: '客户名称',
-      slots: { default: 'customerName' },
-    },
-    {
-      field: 'contractNo',
-      title: '合同编号',
-      slots: { default: 'contractNo' },
-    },
-    {
-      field: 'returnTime',
-      title: '回款日期',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'price',
-      title: '回款金额(元)',
-      formatter: 'formatNumber',
-    },
-    {
-      field: 'returnType',
-      title: '回款方式',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
-      },
-    },
-    {
-      field: 'remark',
-      title: '备注',
-    },
-    {
-      field: 'contract.totalPrice',
-      title: '合同金额（元）',
-      formatter: 'formatNumber',
-    },
-    {
-      field: 'ownerUserName',
-      title: '负责人',
-    },
-    {
-      field: 'ownerUserDeptName',
-      title: '所属部门',
-    },
-    {
-      field: 'updateTime',
-      title: '更新时间',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'createTime',
-      title: '创建时间',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'creatorName',
-      title: '创建人',
-    },
-    {
-      field: 'auditStatus',
-      title: '回款状态',
-      fixed: 'right',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
-      },
-    },
-    {
-      field: 'operation',
-      title: '操作',
-      width: 140,
-      fixed: 'right',
-      align: 'center',
-      cellRender: {
-        attrs: {
-          nameField: 'name',
-          nameTitle: '角色',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'processDetail',
-            text: '查看审批',
-            show: hasAccessByCodes(['crm:receivable:update']),
-          },
-        ],
-      },
-    },
-  ];
-}
-
-/** 回款计划提醒列表的搜索表单 */
-export function useReceivablePlanRemindFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'remindType',
-      label: '合同状态',
-      component: 'Select',
-      componentProps: {
-        allowClear: true,
-        options: RECEIVABLE_REMIND_TYPE,
-      },
-      defaultValue: 1,
-    },
-  ];
-}
-
-/** 回款计划提醒列表的字段 */
-export function useReceivablePlanRemindColumns<T = CrmReceivableApi.Receivable>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
-  return [
-    {
-      field: 'customerName',
-      title: '客户名称',
-      fixed: 'left',
-      slots: { default: 'customerName' },
-    },
-    {
-      field: 'contractNo',
-      title: '合同编号',
-    },
-    {
-      field: 'period',
-      title: '期数',
-      slots: { default: 'period' },
-    },
-    {
-      field: 'price',
-      title: '计划回款金额（元）',
-      formatter: 'formatNumber',
-    },
-    {
-      field: 'returnTime',
-      title: '计划回款日期',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'remindDays',
-      title: '提前几天提醒',
-    },
-    {
-      field: 'remindTime',
-      title: '提醒日期',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'returnType',
-      title: '回款方式',
-      fixed: 'right',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
-      },
-    },
-    {
-      field: 'remark',
-      title: '备注',
-    },
-    {
-      field: 'ownerUserName',
-      title: '负责人',
-    },
-    {
-      field: 'receivable.price',
-      title: '实际回款金额（元）',
-      formatter: 'formatNumber',
-    },
-    {
-      field: 'receivable.returnTime',
-      title: '实际回款日期',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'updateTime',
-      title: '更新时间',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'createTime',
-      title: '创建时间',
-      formatter: 'formatDateTime',
-    },
-    {
-      field: 'creatorName',
-      title: '创建人',
-    },
-    {
-      field: 'operation',
-      title: '操作',
-      width: 140,
-      fixed: 'right',
-      align: 'center',
-      cellRender: {
-        attrs: {
-          nameField: 'customerName',
-          nameTitle: '客户名称',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'receivableForm',
-            text: '创建回款',
-            show: hasAccessByCodes(['crm:receivable:create']),
-          },
-        ],
-      },
-    },
-  ];
-}
diff --git a/apps/web-antd/src/views/crm/backlog/index.vue b/apps/web-antd/src/views/crm/backlog/index.vue
index 1f8b7a62a..1173703e7 100644
--- a/apps/web-antd/src/views/crm/backlog/index.vue
+++ b/apps/web-antd/src/views/crm/backlog/index.vue
@@ -10,17 +10,16 @@ import * as ContractApi from '#/api/crm/contract';
 import * as CustomerApi from '#/api/crm/customer';
 import * as ReceivableApi from '#/api/crm/receivable';
 import * as ReceivablePlanApi from '#/api/crm/receivable/plan';
-import { DocAlert } from '#/components/doc-alert';
 
 import { useLeftSides } from './data';
 import ClueFollowList from './modules/clue-follow-list.vue';
 import ContractAuditList from './modules/contract-audit-list.vue';
-import ContractRemindList from './modules/ContractRemindList.vue';
-import CustomerFollowList from './modules/CustomerFollowList.vue';
-import CustomerPutPoolRemindList from './modules/CustomerPutPoolRemindList.vue';
-import CustomerTodayContactList from './modules/CustomerTodayContactList.vue';
-import ReceivableAuditList from './modules/ReceivableAuditList.vue';
-import ReceivablePlanRemindList from './modules/ReceivablePlanRemindList.vue';
+import ContractRemindList from './modules/contract-remind-list.vue';
+import CustomerFollowList from './modules/customer-follow-list.vue';
+import CustomerPutPoolRemindList from './modules/customer-put-pool-remind-list.vue';
+import CustomerTodayContactList from './modules/customer-today-contact-list.vue';
+import ReceivableAuditList from './modules/receivable-audit-list.vue';
+import ReceivablePlanRemindList from './modules/receivable-plan-remind-list.vue';
 
 defineOptions({ name: 'CrmBacklog' });
 
@@ -92,12 +91,6 @@ onMounted(async () => {
 </script>
 <template>
   <Page auto-content-height>
-    <template #doc>
-      <DocAlert
-        title="【通用】跟进记录、待办事项"
-        url="https://doc.iocoder.cn/crm/follow-up/"
-      />
-    </template>
     <div class="flex h-full w-full">
       <Card class="w-1/5">
         <List item-layout="horizontal" :data-source="leftSides">
@@ -105,11 +98,17 @@ onMounted(async () => {
             <List.Item>
               <List.Item.Meta>
                 <template #title>
-                  <a @click="sideClick(item)"> {{ item.name }} </a>
+                  <a @click="sideClick(item)">
+                    {{ item.name }}
+                  </a>
                 </template>
               </List.Item.Meta>
-              <template #extra v-if="item.count.value && item.count.value > 0">
-                <Badge :count="item.count.value" />
+              <template #extra>
+                <Badge
+                  :color="item.menu === leftMenu ? 'blue' : 'red'"
+                  :count="item.count.value"
+                  :show-zero="true"
+                />
               </template>
             </List.Item>
           </template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/ReceivablePlanRemindList.vue b/apps/web-antd/src/views/crm/backlog/modules/ReceivablePlanRemindList.vue
deleted file mode 100644
index e0137593a..000000000
--- a/apps/web-antd/src/views/crm/backlog/modules/ReceivablePlanRemindList.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<!-- 待回款提醒 -->
-<script lang="ts" setup>
-import type { OnActionClickParams } from '#/adapter/vxe-table';
-import type { CrmReceivableApi } from '#/api/crm/receivable';
-
-import { useRouter } from 'vue-router';
-
-import { Button } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getReceivablePage } from '#/api/crm/receivable';
-
-import {
-  useReceivablePlanRemindColumns,
-  useReceivablePlanRemindFormSchema,
-} from '../data';
-
-const { push } = useRouter();
-
-/** 打开回款详情 */
-function openDetail(row: CrmReceivableApi.Receivable) {
-  push({ name: 'CrmReceivableDetail', params: { id: row.id } });
-}
-
-/** 打开客户详情 */
-function openCustomerDetail(row: CrmReceivableApi.Receivable) {
-  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
-}
-
-/** 创建回款 */
-function openReceivableForm(row: CrmReceivableApi.Receivable) {
-  // Todo: 打开创建回款
-  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
-}
-
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<CrmReceivableApi.Receivable>) {
-  switch (code) {
-    case 'receivableForm': {
-      openReceivableForm(row);
-      break;
-    }
-  }
-}
-
-const [Grid] = useVbenVxeGrid({
-  formOptions: {
-    schema: useReceivablePlanRemindFormSchema(),
-  },
-  gridOptions: {
-    columns: useReceivablePlanRemindColumns(onActionClick),
-    height: 'auto',
-    keepSource: true,
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          return await getReceivablePage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            ...formValues,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-    },
-    toolbarConfig: {
-      refresh: { code: 'query' },
-      search: true,
-    },
-  },
-});
-</script>
-
-<template>
-  <Grid table-title="待回款提醒">
-    <template #customerName="{ row }">
-      <Button type="link" @click="openCustomerDetail(row)">
-        {{ row.customerName }}
-      </Button>
-    </template>
-    <template #period="{ row }">
-      <Button type="link" @click="openDetail(row)">{{ row.period }}</Button>
-    </template>
-  </Grid>
-</template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue b/apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue
index 60ca44d9b..2c52c2ffb 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/clue-follow-list.vue
@@ -1,5 +1,6 @@
 <!-- 分配给我的线索 -->
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmClueApi } from '#/api/crm/clue';
 
 import { useRouter } from 'vue-router';
@@ -8,8 +9,9 @@ import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCluePage } from '#/api/crm/clue';
+import { useGridColumns } from '#/views/crm/clue/data';
 
-import { useClueFollowColumns, useClueFollowFormSchema } from '../data';
+import { FOLLOWUP_STATUS } from '../data';
 
 const { push } = useRouter();
 
@@ -20,10 +22,21 @@ function handleDetail(row: CrmClueApi.Clue) {
 
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useClueFollowFormSchema(),
+    schema: [
+      {
+        fieldName: 'followUpStatus',
+        label: '状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: FOLLOWUP_STATUS,
+        },
+        defaultValue: false,
+      },
+    ],
   },
   gridOptions: {
-    columns: useClueFollowColumns(),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -45,14 +58,17 @@ const [Grid] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  },
+  } as VxeTableGridOptions<CrmClueApi.Clue>,
 });
 </script>
 
 <template>
-  <Grid table-title="分配给我的线索">
+  <Grid>
     <template #name="{ row }">
       <Button type="link" @click="handleDetail(row)">{{ row.name }}</Button>
     </template>
+    <template #actions="{ row }">
+      <Button type="link" @click="handleDetail(row)">查看详情</Button>
+    </template>
   </Grid>
 </template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/contract-audit-list.vue b/apps/web-antd/src/views/crm/backlog/modules/contract-audit-list.vue
index f9048a24c..3e3032af5 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/contract-audit-list.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/contract-audit-list.vue
@@ -1,5 +1,6 @@
 <!-- 待审核合同 -->
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmContractApi } from '#/api/crm/contract';
 
 import { useRouter } from 'vue-router';
@@ -8,8 +9,9 @@ import { Button } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getContractPage } from '#/api/crm/contract';
+import { useGridColumns } from '#/views/crm/contract/data';
 
-import { useContractAuditFormSchema, useContractColumns } from '../data';
+import { AUDIT_STATUS } from '../data';
 
 const { push } = useRouter();
 
@@ -42,10 +44,21 @@ function handleBusinessDetail(row: CrmContractApi.Contract) {
 
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useContractAuditFormSchema(),
+    schema: [
+      {
+        fieldName: 'auditStatus',
+        label: '合同状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: AUDIT_STATUS,
+        },
+        defaultValue: 10,
+      },
+    ],
   },
   gridOptions: {
-    columns: useContractColumns(),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -67,12 +80,12 @@ const [Grid] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  },
+  } as VxeTableGridOptions<CrmContractApi.Contract>,
 });
 </script>
 
 <template>
-  <Grid table-title="待审核合同">
+  <Grid>
     <template #name="{ row }">
       <Button type="link" @click="handleContractDetail(row)">
         {{ row.name }}
diff --git a/apps/web-antd/src/views/crm/backlog/modules/ContractRemindList.vue b/apps/web-antd/src/views/crm/backlog/modules/contract-remind-list.vue
similarity index 52%
rename from apps/web-antd/src/views/crm/backlog/modules/ContractRemindList.vue
rename to apps/web-antd/src/views/crm/backlog/modules/contract-remind-list.vue
index c8ac29657..52922be67 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/ContractRemindList.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/contract-remind-list.vue
@@ -1,21 +1,22 @@
 <!-- 即将到期的合同 -->
 <script lang="ts" setup>
-import type { OnActionClickParams } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmContractApi } from '#/api/crm/contract';
 
 import { useRouter } from 'vue-router';
 
 import { Button } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getContractPage } from '#/api/crm/contract';
+import { useGridColumns } from '#/views/crm/contract/data';
 
-import { useContractColumns, useContractRemindFormSchema } from '../data';
+import { CONTRACT_EXPIRY_TYPE } from '../data';
 
 const { push } = useRouter();
 
 /** 查看审批 */
-function openProcessDetail(row: CrmContractApi.Contract) {
+function handleProcessDetail(row: CrmContractApi.Contract) {
   push({
     name: 'BpmProcessInstanceDetail',
     query: { id: row.processInstanceId },
@@ -23,43 +24,41 @@ function openProcessDetail(row: CrmContractApi.Contract) {
 }
 
 /** 打开合同详情 */
-function openContractDetail(row: CrmContractApi.Contract) {
+function handleContractDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmContractDetail', params: { id: row.id } });
 }
 /** 打开客户详情 */
-function openCustomerDetail(row: CrmContractApi.Contract) {
+function handleCustomerDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmCustomerDetail', params: { id: row.id } });
 }
 
 /** 打开联系人详情 */
-function openContactDetail(row: CrmContractApi.Contract) {
+function handleContactDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmContactDetail', params: { id: row.id } });
 }
 
 /** 打开商机详情 */
-function openBusinessDetail(row: CrmContractApi.Contract) {
+function handleBusinessDetail(row: CrmContractApi.Contract) {
   push({ name: 'CrmBusinessDetail', params: { id: row.id } });
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<CrmContractApi.Contract>) {
-  switch (code) {
-    case 'processDetail': {
-      openProcessDetail(row);
-      break;
-    }
-  }
-}
-
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useContractRemindFormSchema(),
+    schema: [
+      {
+        fieldName: 'expiryType',
+        label: '到期状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: CONTRACT_EXPIRY_TYPE,
+        },
+        defaultValue: 1,
+      },
+    ],
   },
   gridOptions: {
-    columns: useContractColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -81,31 +80,43 @@ const [Grid] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  },
+  } as VxeTableGridOptions<CrmContractApi.Contract>,
 });
 </script>
 
 <template>
-  <Grid table-title="即将到期的合同">
+  <Grid>
     <template #name="{ row }">
-      <Button type="link" @click="openContractDetail(row)">
+      <Button type="link" @click="handleContractDetail(row)">
         {{ row.name }}
       </Button>
     </template>
     <template #customerName="{ row }">
-      <Button type="link" @click="openCustomerDetail(row)">
+      <Button type="link" @click="handleCustomerDetail(row)">
         {{ row.customerName }}
       </Button>
     </template>
     <template #businessName="{ row }">
-      <Button type="link" @click="openBusinessDetail(row)">
+      <Button type="link" @click="handleBusinessDetail(row)">
         {{ row.businessName }}
       </Button>
     </template>
-    <template #contactName="{ row }">
-      <Button type="link" @click="openContactDetail(row)">
-        {{ row.contactName }}
+    <template #signContactName="{ row }">
+      <Button type="link" @click="handleContactDetail(row)">
+        {{ row.signContactName }}
       </Button>
     </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '查看审批',
+            type: 'link',
+            auth: ['crm:contract:update'],
+            onClick: handleProcessDetail.bind(null, row),
+          },
+        ]"
+      />
+    </template>
   </Grid>
 </template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/CustomerFollowList.vue b/apps/web-antd/src/views/crm/backlog/modules/customer-follow-list.vue
similarity index 57%
rename from apps/web-antd/src/views/crm/backlog/modules/CustomerFollowList.vue
rename to apps/web-antd/src/views/crm/backlog/modules/customer-follow-list.vue
index 10e427dc9..610e1ae13 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/CustomerFollowList.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/customer-follow-list.vue
@@ -1,5 +1,6 @@
 <!-- 分配给我的客户 -->
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmCustomerApi } from '#/api/crm/customer';
 
 import { useRouter } from 'vue-router';
@@ -8,22 +9,34 @@ import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCustomerPage } from '#/api/crm/customer';
+import { useGridColumns } from '#/views/crm/customer/data';
 
-import { useCustomerColumns, useCustomerFollowFormSchema } from '../data';
+import { FOLLOWUP_STATUS } from '../data';
 
 const { push } = useRouter();
 
 /** 打开客户详情 */
-function onDetail(row: CrmCustomerApi.Customer) {
+function handleDetail(row: CrmCustomerApi.Customer) {
   push({ name: 'CrmCustomerDetail', params: { id: row.id } });
 }
 
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useCustomerFollowFormSchema(),
+    schema: [
+      {
+        fieldName: 'followUpStatus',
+        label: '状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: FOLLOWUP_STATUS,
+        },
+        defaultValue: false,
+      },
+    ],
   },
   gridOptions: {
-    columns: useCustomerColumns(),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -45,14 +58,17 @@ const [Grid] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  },
+  } as VxeTableGridOptions<CrmCustomerApi.Customer>,
 });
 </script>
 
 <template>
-  <Grid table-title="分配给我的客户">
+  <Grid>
     <template #name="{ row }">
-      <Button type="link" @click="onDetail(row)">{{ row.name }}</Button>
+      <Button type="link" @click="handleDetail(row)">{{ row.name }}</Button>
+    </template>
+    <template #actions="{ row }">
+      <Button type="link" @click="handleDetail(row)">查看详情</Button>
     </template>
   </Grid>
 </template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/CustomerPutPoolRemindList.vue b/apps/web-antd/src/views/crm/backlog/modules/customer-put-pool-remind-list.vue
similarity index 59%
rename from apps/web-antd/src/views/crm/backlog/modules/CustomerPutPoolRemindList.vue
rename to apps/web-antd/src/views/crm/backlog/modules/customer-put-pool-remind-list.vue
index 11899ace8..7cc3a6bc8 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/CustomerPutPoolRemindList.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/customer-put-pool-remind-list.vue
@@ -1,5 +1,6 @@
 <!-- 待进入公海的客户 -->
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmCustomerApi } from '#/api/crm/customer';
 
 import { useRouter } from 'vue-router';
@@ -8,22 +9,34 @@ import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCustomerPage } from '#/api/crm/customer';
+import { useGridColumns } from '#/views/crm/customer/data';
 
-import { useCustomerColumns, useCustomerPutPoolFormSchema } from '../data';
+import { SCENE_TYPES } from '../data';
 
 const { push } = useRouter();
 
 /** 打开客户详情 */
-function onDetail(row: CrmCustomerApi.Customer) {
+function handleDetail(row: CrmCustomerApi.Customer) {
   push({ name: 'CrmCustomerDetail', params: { id: row.id } });
 }
 
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useCustomerPutPoolFormSchema(),
+    schema: [
+      {
+        fieldName: 'sceneType',
+        label: '归属',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: SCENE_TYPES,
+        },
+        defaultValue: 1,
+      },
+    ],
   },
   gridOptions: {
-    columns: useCustomerColumns(),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -45,14 +58,17 @@ const [Grid] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  },
+  } as VxeTableGridOptions<CrmCustomerApi.Customer>,
 });
 </script>
 
 <template>
-  <Grid table-title="待进入公海的客户">
+  <Grid>
     <template #name="{ row }">
-      <Button type="link" @click="onDetail(row)">{{ row.name }}</Button>
+      <Button type="link" @click="handleDetail(row)">{{ row.name }}</Button>
+    </template>
+    <template #actions="{ row }">
+      <Button type="link" @click="handleDetail(row)">查看详情</Button>
     </template>
   </Grid>
 </template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/CustomerTodayContactList.vue b/apps/web-antd/src/views/crm/backlog/modules/customer-today-contact-list.vue
similarity index 51%
rename from apps/web-antd/src/views/crm/backlog/modules/CustomerTodayContactList.vue
rename to apps/web-antd/src/views/crm/backlog/modules/customer-today-contact-list.vue
index 8298f90e8..87fd0489d 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/CustomerTodayContactList.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/customer-today-contact-list.vue
@@ -1,5 +1,6 @@
 <!-- 今日需联系客户 -->
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmCustomerApi } from '#/api/crm/customer';
 
 import { useRouter } from 'vue-router';
@@ -8,22 +9,44 @@ import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCustomerPage } from '#/api/crm/customer';
+import { useGridColumns } from '#/views/crm/customer/data';
 
-import { useCustomerColumns, useCustomerTodayContactFormSchema } from '../data';
+import { CONTACT_STATUS, SCENE_TYPES } from '../data';
 
 const { push } = useRouter();
 
 /** 打开客户详情 */
-function onDetail(row: CrmCustomerApi.Customer) {
+function handleDetail(row: CrmCustomerApi.Customer) {
   push({ name: 'CrmCustomerDetail', params: { id: row.id } });
 }
 
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useCustomerTodayContactFormSchema(),
+    schema: [
+      {
+        fieldName: 'contactStatus',
+        label: '状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: CONTACT_STATUS,
+        },
+        defaultValue: 1,
+      },
+      {
+        fieldName: 'sceneType',
+        label: '归属',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: SCENE_TYPES,
+        },
+        defaultValue: 1,
+      },
+    ],
   },
   gridOptions: {
-    columns: useCustomerColumns(),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -45,14 +68,17 @@ const [Grid] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  },
+  } as VxeTableGridOptions<CrmCustomerApi.Customer>,
 });
 </script>
 
 <template>
-  <Grid table-title="今日需联系客户">
+  <Grid>
     <template #name="{ row }">
-      <Button type="link" @click="onDetail(row)">{{ row.name }}</Button>
+      <Button type="link" @click="handleDetail(row)">{{ row.name }}</Button>
+    </template>
+    <template #actions="{ row }">
+      <Button type="link" @click="handleDetail(row)">查看详情</Button>
     </template>
   </Grid>
 </template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/ReceivableAuditList.vue b/apps/web-antd/src/views/crm/backlog/modules/receivable-audit-list.vue
similarity index 59%
rename from apps/web-antd/src/views/crm/backlog/modules/ReceivableAuditList.vue
rename to apps/web-antd/src/views/crm/backlog/modules/receivable-audit-list.vue
index 710c85847..0220ad603 100644
--- a/apps/web-antd/src/views/crm/backlog/modules/ReceivableAuditList.vue
+++ b/apps/web-antd/src/views/crm/backlog/modules/receivable-audit-list.vue
@@ -1,6 +1,6 @@
 <!-- 待审核回款 -->
 <script lang="ts" setup>
-import type { OnActionClickParams } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmReceivableApi } from '#/api/crm/receivable';
 
 import { useRouter } from 'vue-router';
@@ -9,16 +9,14 @@ import { Button } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getReceivablePage } from '#/api/crm/receivable';
+import { useGridColumns } from '#/views/crm/receivable/data';
 
-import {
-  useReceivableAuditColumns,
-  useReceivableAuditFormSchema,
-} from '../data';
+import { AUDIT_STATUS } from '../data';
 
 const { push } = useRouter();
 
 /** 查看审批 */
-function openProcessDetail(row: CrmReceivableApi.Receivable) {
+function handleProcessDetail(row: CrmReceivableApi.Receivable) {
   push({
     name: 'BpmProcessInstanceDetail',
     query: { id: row.processInstanceId },
@@ -26,39 +24,37 @@ function openProcessDetail(row: CrmReceivableApi.Receivable) {
 }
 
 /** 打开回款详情 */
-function openDetail(row: CrmReceivableApi.Receivable) {
+function handleDetail(row: CrmReceivableApi.Receivable) {
   push({ name: 'CrmReceivableDetail', params: { id: row.id } });
 }
 
 /** 打开客户详情 */
-function openCustomerDetail(row: CrmReceivableApi.Receivable) {
+function handleCustomerDetail(row: CrmReceivableApi.Receivable) {
   push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
 }
 
 /** 打开合同详情 */
-function openContractDetail(row: CrmReceivableApi.Receivable) {
+function handleContractDetail(row: CrmReceivableApi.Receivable) {
   push({ name: 'CrmContractDetail', params: { id: row.contractId } });
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<CrmReceivableApi.Receivable>) {
-  switch (code) {
-    case 'processDetail': {
-      openProcessDetail(row);
-      break;
-    }
-  }
-}
-
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: useReceivableAuditFormSchema(),
+    schema: [
+      {
+        fieldName: 'auditStatus',
+        label: '合同状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: AUDIT_STATUS,
+        },
+        defaultValue: 10,
+      },
+    ],
   },
   gridOptions: {
-    columns: useReceivableAuditColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -79,26 +75,29 @@ const [Grid] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  },
+  } as VxeTableGridOptions<CrmReceivableApi.Receivable>,
 });
 </script>
 
 <template>
-  <Grid table-title="待审核回款">
+  <Grid>
     <template #no="{ row }">
-      <Button type="link" @click="openDetail(row)">
+      <Button type="link" @click="handleDetail(row)">
         {{ row.no }}
       </Button>
     </template>
     <template #customerName="{ row }">
-      <Button type="link" @click="openCustomerDetail(row)">
+      <Button type="link" @click="handleCustomerDetail(row)">
         {{ row.customerName }}
       </Button>
     </template>
     <template #contractNo="{ row }">
-      <Button type="link" @click="openContractDetail(row)">
+      <Button type="link" @click="handleContractDetail(row)">
         {{ row.contractNo }}
       </Button>
     </template>
+    <template #actions="{ row }">
+      <Button type="link" @click="handleProcessDetail(row)">查看审批</Button>
+    </template>
   </Grid>
 </template>
diff --git a/apps/web-antd/src/views/crm/backlog/modules/receivable-plan-remind-list.vue b/apps/web-antd/src/views/crm/backlog/modules/receivable-plan-remind-list.vue
new file mode 100644
index 000000000..10be86994
--- /dev/null
+++ b/apps/web-antd/src/views/crm/backlog/modules/receivable-plan-remind-list.vue
@@ -0,0 +1,101 @@
+<!-- 待回款提醒 -->
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmReceivablePlanApi } from '#/api/crm/receivable/plan';
+
+import { useRouter } from 'vue-router';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getReceivablePlanPage } from '#/api/crm/receivable/plan';
+import Form from '#/views/crm/receivable/modules/form.vue';
+import { useGridColumns } from '#/views/crm/receivable/plan/data';
+
+import { RECEIVABLE_REMIND_TYPE } from '../data';
+
+const { push } = useRouter();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 打开回款详情 */
+function handleDetail(row: CrmReceivablePlanApi.Plan) {
+  push({ name: 'CrmReceivableDetail', params: { id: row.id } });
+}
+
+/** 打开客户详情 */
+function handleCustomerDetail(row: CrmReceivablePlanApi.Plan) {
+  push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
+}
+
+/** 创建回款 */
+function handleCreateReceivable(row: CrmReceivablePlanApi.Plan) {
+  formModalApi.setData({ plan: row }).open();
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: [
+      {
+        fieldName: 'remindType',
+        label: '合同状态',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: RECEIVABLE_REMIND_TYPE,
+        },
+        defaultValue: 1,
+      },
+    ],
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getReceivablePlanPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmReceivablePlanApi.Plan>,
+});
+</script>
+
+<template>
+  <div>
+    <FormModal />
+    <Grid>
+      <template #customerName="{ row }">
+        <Button type="link" @click="handleCustomerDetail(row)">
+          {{ row.customerName }}
+        </Button>
+      </template>
+      <template #period="{ row }">
+        <Button type="link" @click="handleDetail(row)">{{ row.period }}</Button>
+      </template>
+      <template #actions="{ row }">
+        <Button type="link" @click="handleCreateReceivable(row)">
+          创建回款
+        </Button>
+      </template>
+    </Grid>
+  </div>
+</template>

From a5807d2bd89bda57f210f97f0324c83b86255402 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Thu, 29 May 2025 23:55:00 +0800
Subject: [PATCH 22/53] feat: crm product category

---
 .../src/api/crm/product/category/index.ts     |   4 +-
 .../src/views/crm/product/category/data.ts    |  91 +++++++++
 .../src/views/crm/product/category/index.vue  | 189 +++++++++++++++---
 .../crm/product/category/modules/form.vue     |  92 +++++++++
 4 files changed, 348 insertions(+), 28 deletions(-)
 create mode 100644 apps/web-antd/src/views/crm/product/category/data.ts
 create mode 100644 apps/web-antd/src/views/crm/product/category/modules/form.vue

diff --git a/apps/web-antd/src/api/crm/product/category/index.ts b/apps/web-antd/src/api/crm/product/category/index.ts
index 656de9835..37ed24f58 100644
--- a/apps/web-antd/src/api/crm/product/category/index.ts
+++ b/apps/web-antd/src/api/crm/product/category/index.ts
@@ -1,5 +1,3 @@
-import type { PageParam } from '@vben/request';
-
 import { requestClient } from '#/api/request';
 
 export namespace CrmProductCategoryApi {
@@ -38,7 +36,7 @@ export function deleteProductCategory(id: number) {
 }
 
 /** 产品分类列表 */
-export function getProductCategoryList(params?: PageParam) {
+export function getProductCategoryList(params?: any) {
   return requestClient.get<CrmProductCategoryApi.ProductCategory[]>(
     '/crm/product-category/list',
     { params },
diff --git a/apps/web-antd/src/views/crm/product/category/data.ts b/apps/web-antd/src/views/crm/product/category/data.ts
new file mode 100644
index 000000000..01d0996ec
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/category/data.ts
@@ -0,0 +1,91 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmProductCategoryApi } from '#/api/crm/product/category';
+
+import { handleTree } from '@vben/utils';
+
+import { getProductCategoryList } from '#/api/crm/product/category';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'parentId',
+      label: '上级分类',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        api: async () => {
+          const data = await getProductCategoryList();
+          data.unshift({
+            id: 0,
+            name: '顶级分类',
+          } as CrmProductCategoryApi.ProductCategory);
+          return handleTree(data);
+        },
+        fieldNames: { label: 'name', value: 'id', children: 'children' },
+        placeholder: '请选择上级分类',
+        showSearch: true,
+        treeDefaultExpandAll: true,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'name',
+      label: '分类名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分类名称',
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '分类名称',
+      component: 'Input',
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeTableGridOptions<CrmProductCategoryApi.ProductCategory>['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '分类名称',
+      treeNode: true,
+    },
+    {
+      field: 'id',
+      title: '分类编号',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: {
+        default: 'actions',
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/product/category/index.vue b/apps/web-antd/src/views/crm/product/category/index.vue
index 32f54cc97..f55c1f516 100644
--- a/apps/web-antd/src/views/crm/product/category/index.vue
+++ b/apps/web-antd/src/views/crm/product/category/index.vue
@@ -1,34 +1,173 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmProductCategoryApi } from '#/api/crm/product/category';
 
-import { Button } from 'ant-design-vue';
+import { ref } from 'vue';
 
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteProductCategory,
+  getProductCategoryList,
+} from '#/api/crm/product/category';
 import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建分类 */
+function handleCreate() {
+  formModalApi.setData({}).open();
+}
+
+/** 添加下级分类 */
+function handleAppend(row: CrmProductCategoryApi.ProductCategory) {
+  formModalApi.setData({ parentId: row.id }).open();
+}
+
+/** 编辑分类 */
+function handleEdit(row: CrmProductCategoryApi.ProductCategory) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除分类 */
+async function handleDelete(row: CrmProductCategoryApi.ProductCategory) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteProductCategory(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 切换树形展开/收缩状态 */
+const isExpanded = ref(false);
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_, formValues) => {
+          return await getProductCategoryList(formValues);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+    },
+    treeConfig: {
+      parentField: 'parentId',
+      rowField: 'id',
+      transform: true,
+      reserve: true,
+    },
+  } as VxeTableGridOptions<CrmProductCategoryApi.ProductCategory>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【产品】产品管理、产品分类"
-      url="https://doc.iocoder.cn/crm/product/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/product/category/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/product/category/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【产品】产品管理、产品分类"
+        url="https://doc.iocoder.cn/crm/product/"
+      />
+    </template>
+
+    <FormModal @success="onRefresh" />
+    <Grid>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['分类']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:product-category:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: isExpanded ? '收缩' : '展开',
+              type: 'primary',
+              onClick: toggleExpand,
+            },
+          ]"
+        />
+      </template>
+      <template #name="{ row }">
+        <div class="flex w-full items-center gap-1">
+          <span class="flex-auto">{{ row.name }}</span>
+        </div>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '新增下级',
+              type: 'link',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:product-category:create'],
+              onClick: handleAppend.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:product-category:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:product-category:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/product/category/modules/form.vue b/apps/web-antd/src/views/crm/product/category/modules/form.vue
new file mode 100644
index 000000000..d9d3b9a99
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/category/modules/form.vue
@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import type { CrmProductCategoryApi } from '#/api/crm/product/category';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createProductCategory,
+  getProductCategory,
+  updateProductCategory,
+} from '#/api/crm/product/category';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmProductCategoryApi.ProductCategory>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['产品分类'])
+    : $t('ui.actionTitle.create', ['产品分类']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as CrmProductCategoryApi.ProductCategory;
+    try {
+      await (formData.value?.id
+        ? updateProductCategory(data)
+        : createProductCategory(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<CrmProductCategoryApi.ProductCategory>();
+    if (!data) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      if (data.id) {
+        data = await getProductCategory(data.id as number);
+      }
+      // 设置到 values
+      formData.value = data;
+      await formApi.setValues(data);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[600px]" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>

From 7f6726f456c910199df7735357a8dfe8cb669d57 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Fri, 30 May 2025 00:40:14 +0800
Subject: [PATCH 23/53] feat: add customer-limit-config

---
 .../src/api/crm/customer/limitConfig/index.ts |  16 +-
 .../views/crm/customer/limitConfig/data.ts    | 140 +++++++++++++
 .../views/crm/customer/limitConfig/index.vue  | 190 +++++++++++++++---
 .../crm/customer/limitConfig/modules/form.vue | 100 +++++++++
 4 files changed, 408 insertions(+), 38 deletions(-)
 create mode 100644 apps/web-antd/src/views/crm/customer/limitConfig/data.ts
 create mode 100644 apps/web-antd/src/views/crm/customer/limitConfig/modules/form.vue

diff --git a/apps/web-antd/src/api/crm/customer/limitConfig/index.ts b/apps/web-antd/src/api/crm/customer/limitConfig/index.ts
index 773255762..f99a35f31 100644
--- a/apps/web-antd/src/api/crm/customer/limitConfig/index.ts
+++ b/apps/web-antd/src/api/crm/customer/limitConfig/index.ts
@@ -12,16 +12,14 @@ export namespace CrmCustomerLimitConfigApi {
     maxCount?: number;
     dealCountEnabled?: boolean;
   }
+}
 
-  /**
-   * 客户限制配置类型
-   */
-  export enum LimitConfType {
-    /** 锁定客户数限制 */
-    CUSTOMER_LOCK_LIMIT = 2,
-    /** 拥有客户数限制 */
-    CUSTOMER_QUANTITY_LIMIT = 1,
-  }
+/** 客户限制配置类型 */
+export enum LimitConfType {
+  /** 锁定客户数限制 */
+  CUSTOMER_LOCK_LIMIT = 2,
+  /** 拥有客户数限制 */
+  CUSTOMER_QUANTITY_LIMIT = 1,
 }
 
 /** 查询客户限制配置列表 */
diff --git a/apps/web-antd/src/views/crm/customer/limitConfig/data.ts b/apps/web-antd/src/views/crm/customer/limitConfig/data.ts
new file mode 100644
index 000000000..0895e1d21
--- /dev/null
+++ b/apps/web-antd/src/views/crm/customer/limitConfig/data.ts
@@ -0,0 +1,140 @@
+import type { VbenFormSchema } from '@vben/common-ui';
+
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { handleTree } from '@vben/utils';
+
+import { LimitConfType } from '#/api/crm/customer/limitConfig';
+import { getSimpleDeptList } from '#/api/system/dept';
+import { getSimpleUserList } from '#/api/system/user';
+import { DICT_TYPE } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(confType: LimitConfType): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'userIds',
+      label: '规则适用人群',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
+        multiple: true,
+        allowClear: true,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'deptIds',
+      label: '规则适用部门',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        api: async () => {
+          const data = await getSimpleDeptList();
+          return handleTree(data);
+        },
+        multiple: true,
+        fieldNames: { label: 'name', value: 'id', children: 'children' },
+        placeholder: '请选择规则适用部门',
+        treeDefaultExpandAll: true,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'maxCount',
+      label:
+        confType === LimitConfType.CUSTOMER_QUANTITY_LIMIT
+          ? '拥有客户数上限'
+          : '锁定客户数上限',
+      component: 'InputNumber',
+    },
+    {
+      fieldName: 'dealCountEnabled',
+      label: '成交客户是否占用拥有客户数',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '是', value: true },
+          { label: '否', value: false },
+        ],
+      },
+      dependencies: {
+        triggerFields: [''],
+        show: () => confType === LimitConfType.CUSTOMER_QUANTITY_LIMIT,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  confType: LimitConfType,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      fixed: 'left',
+    },
+    {
+      field: 'users',
+      title: '规则适用人群',
+      formatter: ({ cellValue }) => {
+        return cellValue
+          .map((user: any) => {
+            return user.nickname;
+          })
+          .join(',');
+      },
+    },
+    {
+      field: 'depts',
+      title: '规则适用部门',
+      formatter: ({ cellValue }) => {
+        return cellValue
+          .map((dept: any) => {
+            return dept.name;
+          })
+          .join(',');
+      },
+    },
+    {
+      field: 'maxCount',
+      title:
+        confType === LimitConfType.CUSTOMER_QUANTITY_LIMIT
+          ? '拥有客户数上限'
+          : '锁定客户数上限',
+    },
+    {
+      field: 'dealCountEnabled',
+      title: '成交客户是否占用拥有客户数',
+      visible: confType === LimitConfType.CUSTOMER_QUANTITY_LIMIT,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/customer/limitConfig/index.vue b/apps/web-antd/src/views/crm/customer/limitConfig/index.vue
index 3820d40e6..465afd49c 100644
--- a/apps/web-antd/src/views/crm/customer/limitConfig/index.vue
+++ b/apps/web-antd/src/views/crm/customer/limitConfig/index.vue
@@ -1,38 +1,170 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmCustomerLimitConfigApi } from '#/api/crm/customer/limitConfig';
 
-import { Button } from 'ant-design-vue';
+import { ref } from 'vue';
 
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { message, Tabs } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteCustomerLimitConfig,
+  getCustomerLimitConfigPage,
+  LimitConfType,
+} from '#/api/crm/customer/limitConfig';
 import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import { useGridColumns } from './data';
+import Form from './modules/form.vue';
+
+const configType = ref(LimitConfType.CUSTOMER_QUANTITY_LIMIT);
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 创建规则 */
+function handleCreate(type: LimitConfType) {
+  formModalApi.setData({ type }).open();
+}
+
+/** 编辑规则 */
+function handleEdit(
+  row: CrmCustomerLimitConfigApi.CustomerLimitConfig,
+  type: LimitConfType,
+) {
+  formModalApi.setData({ id: row.id, type }).open();
+}
+
+/** 删除规则 */
+async function handleDelete(
+  row: CrmCustomerLimitConfigApi.CustomerLimitConfig,
+) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteCustomerLimitConfig(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(configType.value),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCustomerLimitConfigPage({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            type: configType.value,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmCustomerLimitConfigApi.CustomerLimitConfig>,
+});
+
+function onChangeConfigType(key: number | string) {
+  configType.value = key as LimitConfType;
+  gridApi.setGridOptions({
+    columns: useGridColumns(configType.value),
+  });
+  onRefresh();
+}
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【客户】客户管理、公海客户"
-      url="https://doc.iocoder.cn/crm/customer/"
-    />
-    <DocAlert
-      title="【通用】数据权限"
-      url="https://doc.iocoder.cn/crm/permission/"
-    />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/customer/limitConfig/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/crm/customer/limitConfig/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【客户】客户管理、公海客户"
+        url="https://doc.iocoder.cn/crm/customer/"
+      />
+      <DocAlert
+        title="【通用】数据权限"
+        url="https://doc.iocoder.cn/crm/permission/"
+      />
+    </template>
+
+    <FormModal />
+    <Grid>
+      <template #top>
+        <Tabs class="border-none" @change="onChangeConfigType">
+          <Tabs.TabPane
+            tab="拥有客户数限制"
+            :key="LimitConfType.CUSTOMER_QUANTITY_LIMIT"
+          />
+          <Tabs.TabPane
+            tab="锁定客户数限制"
+            :key="LimitConfType.CUSTOMER_LOCK_LIMIT"
+          />
+        </Tabs>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['规则']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['crm:customer-limit-config:create'],
+              onClick: handleCreate.bind(null, configType),
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['crm:customer-limit-config:update'],
+              onClick: handleEdit.bind(null, row, configType),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['crm:customer-limit-config:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/customer/limitConfig/modules/form.vue b/apps/web-antd/src/views/crm/customer/limitConfig/modules/form.vue
new file mode 100644
index 000000000..39fa36d27
--- /dev/null
+++ b/apps/web-antd/src/views/crm/customer/limitConfig/modules/form.vue
@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+import type { CrmCustomerLimitConfigApi } from '#/api/crm/customer/limitConfig';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createCustomerLimitConfig,
+  getCustomerLimitConfig,
+  LimitConfType,
+  updateCustomerLimitConfig,
+} from '#/api/crm/customer/limitConfig';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmCustomerLimitConfigApi.CustomerLimitConfig>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['规则'])
+    : $t('ui.actionTitle.create', ['规则']);
+});
+
+const confType = ref<LimitConfType>(LimitConfType.CUSTOMER_LOCK_LIMIT);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(confType.value),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as CrmCustomerLimitConfigApi.CustomerLimitConfig;
+    try {
+      await (formData.value?.id
+        ? updateCustomerLimitConfig(data)
+        : createCustomerLimitConfig(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    let data =
+      modalApi.getData<CrmCustomerLimitConfigApi.CustomerLimitConfig>();
+    if (!data) {
+      return;
+    }
+    if (data.type) {
+      confType.value = data.type as LimitConfType;
+    }
+    formApi.setState({ schema: useFormSchema(confType.value) });
+    modalApi.lock();
+    try {
+      if (data.id) {
+        data = await getCustomerLimitConfig(data.id as number);
+      }
+      formData.value = data;
+      // 设置到 values
+      await formApi.setValues(data);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-[40%]">
+    <Form class="mx-4" />
+  </Modal>
+</template>

From 9587a8cdcd24bacaa24340b13e8053caf3665756 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Fri, 30 May 2025 12:42:41 +0800
Subject: [PATCH 24/53] =?UTF-8?q?feat:=20[BPM=20=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E6=B5=81]=20Simple=20=E6=A8=A1=E5=9E=8B=20-=20=E8=A7=A6?=
 =?UTF-8?q?=E5=8F=91=E5=99=A8=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/http-request-setting.vue          | 174 +++++
 .../nodes-config/trigger-node-config.vue      | 695 ++++++++++++++++++
 .../components/nodes/trigger-node.vue         | 118 +++
 .../components/process-node-tree.vue          |   5 +-
 4 files changed, 990 insertions(+), 2 deletions(-)
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes/trigger-node.vue

diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue
new file mode 100644
index 000000000..011ae8e19
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { toRefs, watch } from 'vue';
+
+import { Plus, Trash2 } from '@vben/icons';
+
+import {
+  Alert,
+  Button,
+  Col,
+  FormItem,
+  Input,
+  Row,
+  Select,
+  SelectOption,
+} from 'ant-design-vue';
+
+import { useFormFields } from '../../../helpers';
+import HttpRequestParamSetting from './http-request-param-setting.vue';
+
+defineOptions({ name: 'HttpRequestSetting' });
+
+const props = defineProps({
+  setting: {
+    type: Object,
+    required: true,
+  },
+  responseEnable: {
+    type: Boolean,
+    required: true,
+  },
+  formItemPrefix: {
+    type: String,
+    required: true,
+  },
+});
+const emits = defineEmits(['update:setting']);
+const { setting } = toRefs(props);
+watch(
+  () => setting,
+  (val) => {
+    emits('update:setting', val);
+  },
+);
+
+/** 流程表单字段 */
+const formFields = useFormFields();
+
+/** 添加 HTTP 请求返回值设置项 */
+const addHttpResponseSetting = (responseSetting: Record<string, string>[]) => {
+  responseSetting.push({
+    key: '',
+    value: '',
+  });
+};
+
+/** 删除 HTTP 请求返回值设置项 */
+const deleteHttpResponseSetting = (
+  responseSetting: Record<string, string>[],
+  index: number,
+) => {
+  responseSetting.splice(index, 1);
+};
+</script>
+<template>
+  <FormItem>
+    <Alert
+      message="仅支持 POST 请求，以请求体方式接收参数"
+      type="warning"
+      show-icon
+      :closable="false"
+    />
+  </FormItem>
+  <!-- 请求地址-->
+  <FormItem
+    label="请求地址"
+    :label-col="{ span: 24 }"
+    :wrapper-col="{ span: 24 }"
+    :name="[formItemPrefix, 'url']"
+    :rules="{
+      required: true,
+      message: '请求地址不能为空',
+      trigger: ['blur', 'change'],
+    }"
+  >
+    <Input v-model:value="setting.url" placeholder="请输入请求地址" />
+  </FormItem>
+  <!-- 请求头，请求体设置-->
+  <HttpRequestParamSetting
+    :header="setting.header"
+    :body="setting.body"
+    :bind="formItemPrefix"
+  />
+  <!-- 返回值设置-->
+  <div v-if="responseEnable">
+    <FormItem
+      label="返回值"
+      :label-col="{ span: 24 }"
+      :wrapper-col="{ span: 24 }"
+    >
+      <Alert
+        message="通过请求返回值, 可以修改流程表单的值"
+        type="warning"
+        show-icon
+        :closable="false"
+      />
+    </FormItem>
+    <FormItem :wrapper-col="{ span: 24 }">
+      <Row
+        :gutter="8"
+        v-for="(item, index) in setting.response"
+        :key="index"
+        class="mb-2"
+      >
+        <Col :span="10">
+          <FormItem
+            :name="[formItemPrefix, 'response', index, 'key']"
+            :rules="{
+              required: true,
+              message: '表单字段不能为空',
+              trigger: ['blur', 'change'],
+            }"
+          >
+            <Select
+              v-model:value="item.key"
+              placeholder="请选择表单字段"
+              allow-clear
+            >
+              <SelectOption
+                v-for="(field, fIdx) in formFields"
+                :key="fIdx"
+                :label="field.title"
+                :value="field.field"
+                :disabled="!field.required"
+              >
+                {{ field.title }}
+              </SelectOption>
+            </Select>
+          </FormItem>
+        </Col>
+        <Col :span="12">
+          <FormItem
+            :name="[formItemPrefix, 'response', index, 'value']"
+            :rules="{
+              required: true,
+              message: '请求返回字段不能为空',
+              trigger: ['blur', 'change'],
+            }"
+          >
+            <Input v-model:value="item.value" placeholder="请求返回字段" />
+          </FormItem>
+        </Col>
+        <Col :span="2">
+          <div class="flex h-[32px] items-center">
+            <Trash2
+              class="size-4 cursor-pointer text-red-500"
+              @click="deleteHttpResponseSetting(setting.response!, index)"
+            />
+          </div>
+        </Col>
+      </Row>
+      <Button
+        type="link"
+        @click="addHttpResponseSetting(setting.response!)"
+        class="flex items-center"
+      >
+        <template #icon>
+          <Plus class="size-[18px]" />
+        </template>
+        添加一行
+      </Button>
+    </FormItem>
+  </div>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
new file mode 100644
index 000000000..1d9e209da
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
@@ -0,0 +1,695 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+import type { SelectValue } from 'ant-design-vue/es/select';
+
+import type {
+  FormTriggerSetting,
+  SimpleFlowNode,
+  TriggerSetting,
+} from '../../consts';
+
+import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon, Trash2 } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import {
+  Button,
+  Card,
+  Col,
+  Divider,
+  Form,
+  FormItem,
+  Input,
+  message,
+  Row,
+  Select,
+  SelectOption,
+  Tag,
+} from 'ant-design-vue';
+
+import {
+  DEFAULT_CONDITION_GROUP_VALUE,
+  NodeType,
+  TRIGGER_TYPES,
+  TriggerTypeEnum,
+} from '../../consts';
+import {
+  getConditionShowText,
+  useFormFields,
+  useNodeName,
+  useWatchNode,
+} from '../../helpers';
+// TODO import ConditionDialog from './modules/condition-dialog.vue';
+import HttpRequestSetting from './modules/http-request-setting.vue';
+
+defineOptions({
+  name: 'TriggerNodeConfig',
+});
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+const { proxy } = getCurrentInstance() as any;
+
+// 抽屉配置
+const [Drawer, drawerApi] = useVbenDrawer({
+  header: true,
+  closable: true,
+  title: '',
+  onCancel() {
+    drawerApi.close();
+  },
+  onConfirm() {
+    saveConfig();
+  },
+});
+
+// 当前节点
+const currentNode = useWatchNode(props);
+// 节点名称
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+  NodeType.TRIGGER_NODE,
+);
+// 触发器表单配置
+const formRef = ref(); // 表单 Ref
+// 表单校验规则
+const formRules: Record<string, Rule[]> = reactive({
+  type: [{ required: true, message: '触发器类型不能为空', trigger: 'change' }],
+  'httpRequestSetting.url': [
+    { required: true, message: '请求地址不能为空', trigger: 'blur' },
+  ],
+});
+// 触发器配置表单数据
+const configForm = ref<TriggerSetting>({
+  type: TriggerTypeEnum.HTTP_REQUEST,
+  httpRequestSetting: {
+    url: '',
+    header: [],
+    body: [],
+    response: [],
+  },
+  formSettings: [
+    {
+      conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+      updateFormFields: {},
+      deleteFields: [],
+    },
+  ],
+});
+// 流程表单字段
+const formFields = useFormFields();
+
+// 可选的修改的表单字段
+const optionalUpdateFormFields = computed(() => {
+  return formFields.map((field) => ({
+    title: field.title,
+    field: field.field,
+    disabled: false,
+  }));
+});
+
+let originalSetting: TriggerSetting | undefined;
+
+/** 触发器类型改变了 */
+const changeTriggerType = () => {
+  if (configForm.value.type === TriggerTypeEnum.HTTP_REQUEST) {
+    configForm.value.httpRequestSetting =
+      originalSetting?.type === TriggerTypeEnum.HTTP_REQUEST &&
+      originalSetting.httpRequestSetting
+        ? originalSetting.httpRequestSetting
+        : {
+            url: '',
+            header: [],
+            body: [],
+            response: [],
+          };
+    configForm.value.formSettings = undefined;
+    return;
+  }
+
+  if (configForm.value.type === TriggerTypeEnum.HTTP_CALLBACK) {
+    configForm.value.httpRequestSetting =
+      originalSetting?.type === TriggerTypeEnum.HTTP_CALLBACK &&
+      originalSetting.httpRequestSetting
+        ? originalSetting.httpRequestSetting
+        : {
+            url: '',
+            header: [],
+            body: [],
+            response: [],
+          };
+    configForm.value.formSettings = undefined;
+    return;
+  }
+
+  if (configForm.value.type === TriggerTypeEnum.FORM_UPDATE) {
+    configForm.value.formSettings =
+      originalSetting?.type === TriggerTypeEnum.FORM_UPDATE &&
+      originalSetting.formSettings
+        ? originalSetting.formSettings
+        : [
+            {
+              conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+              updateFormFields: {},
+              deleteFields: [],
+            },
+          ];
+    configForm.value.httpRequestSetting = undefined;
+    return;
+  }
+
+  if (configForm.value.type === TriggerTypeEnum.FORM_DELETE) {
+    configForm.value.formSettings =
+      originalSetting?.type === TriggerTypeEnum.FORM_DELETE &&
+      originalSetting.formSettings
+        ? originalSetting.formSettings
+        : [
+            {
+              conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+              updateFormFields: undefined,
+              deleteFields: [],
+            },
+          ];
+    configForm.value.httpRequestSetting = undefined;
+  }
+};
+
+/** 添加新的修改表单设置 */
+const addFormSetting = () => {
+  configForm.value.formSettings!.push({
+    conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+    updateFormFields: {},
+    deleteFields: [],
+  });
+};
+
+/** 删除修改表单设置 */
+const deleteFormSetting = (index: number) => {
+  configForm.value.formSettings!.splice(index, 1);
+};
+
+/** 添加条件配置 */
+const addFormSettingCondition = (
+  index: number,
+  formSetting: FormTriggerSetting,
+) => {
+  const conditionDialog = proxy.$refs[`condition-${index}`][0];
+  conditionDialog.open(formSetting);
+};
+/** 删除条件配置 */
+const deleteFormSettingCondition = (formSetting: FormTriggerSetting) => {
+  formSetting.conditionType = undefined;
+};
+/** 打开条件配置弹窗 */
+const openFormSettingCondition = (
+  index: number,
+  formSetting: FormTriggerSetting,
+) => {
+  const conditionDialog = proxy.$refs[`condition-${index}`][0];
+  conditionDialog.open(formSetting);
+};
+/** 处理条件配置保存 */
+/* 暂时注释掉未使用的函数
+const _handleConditionUpdate = (index: number, condition: any) => {
+  if (configForm.value.formSettings![index]) {
+    configForm.value.formSettings![index].conditionType =
+      condition.conditionType;
+    configForm.value.formSettings![index].conditionExpression =
+      condition.conditionExpression;
+    configForm.value.formSettings![index].conditionGroups =
+      condition.conditionGroups;
+  }
+};
+*/
+/** 条件配置展示 */
+const showConditionText = (formSetting: FormTriggerSetting) => {
+  return getConditionShowText(
+    formSetting.conditionType,
+    formSetting.conditionExpression,
+    formSetting.conditionGroups,
+    formFields,
+  );
+};
+
+/** 添加修改字段设置项 */
+const addFormFieldSetting = (formSetting: FormTriggerSetting) => {
+  if (!formSetting) return;
+  if (!formSetting.updateFormFields) {
+    formSetting.updateFormFields = {};
+  }
+  formSetting.updateFormFields[''] = undefined;
+};
+/** 更新字段 KEY */
+const updateFormFieldKey = (
+  formSetting: FormTriggerSetting,
+  oldKey: string,
+  newKey: SelectValue,
+) => {
+  if (!formSetting?.updateFormFields || !newKey) return;
+  const value = formSetting.updateFormFields[oldKey];
+  delete formSetting.updateFormFields[oldKey];
+  formSetting.updateFormFields[String(newKey)] = value;
+};
+
+/** 删除修改字段设置项 */
+const deleteFormFieldSetting = (
+  formSetting: FormTriggerSetting,
+  key: string,
+) => {
+  if (!formSetting?.updateFormFields) return;
+  delete formSetting.updateFormFields[key];
+};
+
+/** 保存配置 */
+const saveConfig = async () => {
+  if (!formRef.value) return false;
+  const valid = await formRef.value.validate();
+  if (!valid) return false;
+  const showText = getShowText();
+  if (!showText) return false;
+  currentNode.value.name = nodeName.value!;
+  currentNode.value.showText = showText;
+  switch (configForm.value.type) {
+    case TriggerTypeEnum.FORM_DELETE: {
+      configForm.value.httpRequestSetting = undefined;
+      // 清理修改字段相关的数据
+      configForm.value.formSettings?.forEach((setting) => {
+        setting.updateFormFields = undefined;
+      });
+
+      break;
+    }
+    case TriggerTypeEnum.FORM_UPDATE: {
+      configForm.value.httpRequestSetting = undefined;
+      // 清理删除字段相关的数据
+      configForm.value.formSettings?.forEach((setting) => {
+        setting.deleteFields = undefined;
+      });
+
+      break;
+    }
+    case TriggerTypeEnum.HTTP_REQUEST: {
+      configForm.value.formSettings = undefined;
+
+      break;
+    }
+    // No default
+  }
+  currentNode.value.triggerSetting = configForm.value;
+  drawerApi.close();
+  return true;
+};
+
+/** 获取节点展示内容 */
+const getShowText = (): string => {
+  let showText = '';
+  switch (configForm.value.type) {
+    case TriggerTypeEnum.FORM_DELETE: {
+      for (const [index, setting] of configForm.value.formSettings!.entries()) {
+        if (!setting.deleteFields || setting.deleteFields.length === 0) {
+          message.warning(`请选择表单设置${index + 1}要删除的字段`);
+          return '';
+        }
+      }
+      showText = '删除表单数据';
+
+      break;
+    }
+    case TriggerTypeEnum.FORM_UPDATE: {
+      for (const [index, setting] of configForm.value.formSettings!.entries()) {
+        if (
+          !setting.updateFormFields ||
+          Object.keys(setting.updateFormFields).length === 0
+        ) {
+          message.warning(`请添加表单设置${index + 1}的修改字段`);
+          return '';
+        }
+      }
+      showText = '修改表单数据';
+
+      break;
+    }
+    case TriggerTypeEnum.HTTP_CALLBACK:
+    case TriggerTypeEnum.HTTP_REQUEST: {
+      showText = `${configForm.value.httpRequestSetting?.url}`;
+
+      break;
+    }
+    // No default
+  }
+  return showText;
+};
+
+/** 显示触发器节点配置， 由父组件传过来 */
+const showTriggerNodeConfig = (node: SimpleFlowNode) => {
+  nodeName.value = node.name;
+  originalSetting = node.triggerSetting
+    ? cloneDeep(node.triggerSetting)
+    : undefined;
+  if (node.triggerSetting) {
+    configForm.value = {
+      type: node.triggerSetting.type,
+      httpRequestSetting: node.triggerSetting.httpRequestSetting || {
+        url: '',
+        header: [],
+        body: [],
+        response: [],
+      },
+      formSettings: node.triggerSetting.formSettings || [
+        {
+          conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+          updateFormFields: {},
+          deleteFields: [],
+        },
+      ],
+    };
+  }
+  drawerApi.open();
+};
+
+// 暴露方法给父组件
+defineExpose({ showTriggerNodeConfig });
+
+onMounted(() => {
+  // 初始化可能需要的操作
+});
+</script>
+<template>
+  <Drawer class="w-[580px]">
+    <template #title>
+      <div class="config-header">
+        <Input
+          v-if="showInput"
+          type="text"
+          class="config-editable-input"
+          @blur="blurEvent()"
+          v-model:value="nodeName"
+          :placeholder="nodeName"
+        />
+        <div v-else class="node-name">
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="ep:edit-pen" @click="clickIcon()" />
+        </div>
+      </div>
+    </template>
+    <div>
+      <Form
+        ref="formRef"
+        :model="configForm"
+        :label-col="{ span: 24 }"
+        :wrapper-col="{ span: 24 }"
+        :rules="formRules"
+      >
+        <FormItem label="触发器类型" name="type">
+          <Select v-model:value="configForm.type" @change="changeTriggerType">
+            <SelectOption
+              v-for="(item, index) in TRIGGER_TYPES"
+              :key="index"
+              :value="item.value"
+              :label="item.label"
+            >
+              {{ item.label }}
+            </SelectOption>
+          </Select>
+        </FormItem>
+        <!-- HTTP 请求触发器 -->
+        <div
+          v-if="
+            [
+              TriggerTypeEnum.HTTP_REQUEST,
+              TriggerTypeEnum.HTTP_CALLBACK,
+            ].includes(configForm.type) && configForm.httpRequestSetting
+          "
+        >
+          <HttpRequestSetting
+            v-model:setting="configForm.httpRequestSetting"
+            :response-enable="configForm.type === TriggerTypeEnum.HTTP_REQUEST"
+            form-item-prefix="httpRequestSetting"
+          />
+        </div>
+
+        <!-- 表单数据修改触发器 -->
+        <div v-if="configForm.type === TriggerTypeEnum.FORM_UPDATE">
+          <div
+            v-for="(formSetting, index) in configForm.formSettings"
+            :key="index"
+          >
+            <Card class="mt-4">
+              <template #title>
+                <div class="flex w-full items-center justify-between">
+                  <span>修改表单设置 {{ index + 1 }}</span>
+                  <Button
+                    v-if="configForm.formSettings!.length > 1"
+                    shape="circle"
+                    class="flex items-center justify-center"
+                    @click="deleteFormSetting(index)"
+                  >
+                    <template #icon>
+                      <IconifyIcon icon="ep:close" />
+                    </template>
+                  </Button>
+                </div>
+              </template>
+
+              <!-- TODO 条件设置 -->
+              <!-- <ConditionDialog
+                :ref="`condition-${index}`"
+                @update-condition="(val) => handleConditionUpdate(index, val)"
+              /> -->
+              <Row>
+                <Col :span="24">
+                  <div class="cursor-pointer" v-if="formSetting.conditionType">
+                    <Tag
+                      color="success"
+                      closable
+                      @close="deleteFormSettingCondition(formSetting)"
+                      @click="openFormSettingCondition(index, formSetting)"
+                    >
+                      {{ showConditionText(formSetting) }}
+                    </Tag>
+                  </div>
+                  <Button
+                    v-else
+                    type="link"
+                    class="flex items-center p-0"
+                    @click="addFormSettingCondition(index, formSetting)"
+                  >
+                    <template #icon>
+                      <IconifyIcon icon="ep:link" />
+                    </template>
+                    添加条件
+                  </Button>
+                </Col>
+              </Row>
+              <Divider>修改表单字段设置</Divider>
+              <!-- 表单字段修改设置 -->
+              <Row
+                :gutter="8"
+                v-for="key in Object.keys(formSetting.updateFormFields || {})"
+                :key="key"
+              >
+                <Col :span="8">
+                  <FormItem>
+                    <Select
+                      :value="key || undefined"
+                      @change="
+                        (newKey) => updateFormFieldKey(formSetting, key, newKey)
+                      "
+                      placeholder="请选择表单字段"
+                      :disabled="key !== ''"
+                      allow-clear
+                    >
+                      <SelectOption
+                        v-for="(field, fIdx) in optionalUpdateFormFields"
+                        :key="fIdx"
+                        :label="field.title"
+                        :value="field.field"
+                        :disabled="field.disabled"
+                      >
+                        {{ field.title }}
+                      </SelectOption>
+                    </Select>
+                  </FormItem>
+                </Col>
+                <Col :span="4">
+                  <FormItem>的值设置为</FormItem>
+                </Col>
+                <Col :span="10">
+                  <FormItem
+                    :name="['formSettings', index, 'updateFormFields', key]"
+                    :rules="{
+                      required: true,
+                      message: '值不能为空',
+                      trigger: 'blur',
+                    }"
+                  >
+                    <Input
+                      v-model:value="formSetting.updateFormFields![key]"
+                      placeholder="请输入值"
+                      allow-clear
+                      :disabled="!key"
+                    />
+                  </FormItem>
+                </Col>
+                <Col :span="2">
+                  <div class="flex h-[32px] items-center">
+                    <Trash2
+                      class="size-4 cursor-pointer text-red-500"
+                      @click="deleteFormFieldSetting(formSetting, key)"
+                    />
+                  </div>
+                </Col>
+              </Row>
+
+              <!-- 添加表单字段按钮 -->
+              <Row>
+                <Col :span="24">
+                  <Button
+                    type="link"
+                    class="flex items-center p-0"
+                    @click="addFormFieldSetting(formSetting)"
+                  >
+                    <template #icon>
+                      <IconifyIcon icon="ep:memo" />
+                    </template>
+                    添加修改字段
+                  </Button>
+                </Col>
+              </Row>
+            </Card>
+          </div>
+
+          <!-- 添加新的设置 -->
+          <Row class="mt-6">
+            <Col :span="24">
+              <Button
+                class="flex items-center p-0"
+                type="link"
+                @click="addFormSetting"
+              >
+                <template #icon>
+                  <IconifyIcon icon="ep:setting" />
+                </template>
+                添加设置
+              </Button>
+            </Col>
+          </Row>
+        </div>
+
+        <!-- 表单数据删除触发器 -->
+        <div v-if="configForm.type === TriggerTypeEnum.FORM_DELETE">
+          <div
+            v-for="(formSetting, index) in configForm.formSettings"
+            :key="index"
+          >
+            <Card class="mt-4">
+              <template #title>
+                <div class="flex w-full items-center justify-between">
+                  <span>删除表单设置 {{ index + 1 }}</span>
+                  <Button
+                    v-if="configForm.formSettings!.length > 1"
+                    shape="circle"
+                    class="flex items-center justify-center"
+                    @click="deleteFormSetting(index)"
+                  >
+                    <template #icon>
+                      <IconifyIcon icon="ep:close" />
+                    </template>
+                  </Button>
+                </div>
+              </template>
+
+              <!-- TODO 条件设置 -->
+              <!-- <ConditionDialog
+                :ref="`condition-${index}`"
+                @update-condition="(val) => handleConditionUpdate(index, val)"
+              /> -->
+              <Row>
+                <Col :span="24">
+                  <div class="cursor-pointer" v-if="formSetting.conditionType">
+                    <Tag
+                      color="warning"
+                      closable
+                      @close="deleteFormSettingCondition(formSetting)"
+                      @click="openFormSettingCondition(index, formSetting)"
+                    >
+                      {{ showConditionText(formSetting) }}
+                    </Tag>
+                  </div>
+                  <Button
+                    v-else
+                    type="link"
+                    class="flex items-center p-0"
+                    @click="addFormSettingCondition(index, formSetting)"
+                  >
+                    <template #icon>
+                      <IconifyIcon icon="ep:link" />
+                    </template>
+                    添加条件
+                  </Button>
+                </Col>
+              </Row>
+
+              <Divider>删除表单字段设置</Divider>
+              <!-- 表单字段删除设置 -->
+              <div class="flex flex-wrap gap-2">
+                <Select
+                  v-model:value="formSetting.deleteFields"
+                  mode="multiple"
+                  placeholder="请选择要删除的字段"
+                  class="w-full"
+                >
+                  <SelectOption
+                    v-for="field in formFields"
+                    :key="field.field"
+                    :label="field.title"
+                    :value="field.field"
+                  >
+                    {{ field.title }}
+                  </SelectOption>
+                </Select>
+              </div>
+            </Card>
+          </div>
+
+          <!-- 添加新的设置 -->
+          <Row class="mt-6">
+            <Col :span="24">
+              <Button
+                class="flex items-center p-0"
+                type="link"
+                @click="addFormSetting"
+              >
+                <template #icon>
+                  <IconifyIcon icon="ep:setting" />
+                </template>
+                添加设置
+              </Button>
+            </Col>
+          </Row>
+        </div>
+      </Form>
+    </div>
+    <template #footer>
+      <div class="flex justify-end">
+        <Button type="primary" @click="saveConfig">确 定</Button>
+        <Button class="ml-2" @click="drawerApi.close()">取 消</Button>
+      </div>
+    </template>
+  </Drawer>
+</template>
+<style lang="scss" scoped>
+.config-editable-input {
+  &:focus {
+    outline: 0;
+    border-color: #40a9ff;
+    box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+  }
+}
+</style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/trigger-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/trigger-node.vue
new file mode 100644
index 000000000..a9f30171a
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/trigger-node.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input } from 'ant-design-vue';
+
+import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import TriggerNodeConfig from '../nodes-config/trigger-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({
+  name: 'TriggerNode',
+});
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+// 监控节点的变化
+const currentNode = useWatchNode(props);
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(
+  currentNode,
+  NodeType.TRIGGER_NODE,
+);
+
+const nodeSetting = ref();
+// 打开节点配置
+const openNodeConfig = () => {
+  if (readonly) {
+    return;
+  }
+  nodeSetting.value.showTriggerNodeConfig(currentNode.value);
+};
+
+// 删除节点。更新当前节点为孩子节点
+const deleteNode = () => {
+  emits('update:flowNode', currentNode.value.childNode);
+};
+</script>
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`,
+        ]"
+      >
+        <div class="node-title-container">
+          <div class="node-title-icon trigger-node">
+            <span class="iconfont icon-trigger"></span>
+          </div>
+          <Input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.TRIGGER_NODE) }}
+          </div>
+          <IconifyIcon v-if="!readonly" icon="ep:arrow-right-bold" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="ep:circle-close-filled"
+              :size="18"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <TriggerNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
index 890b7ad07..5f7bb5905 100644
--- a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
@@ -6,6 +6,7 @@ import { useWatchNode } from '../helpers';
 import CopyTaskNode from './nodes/copy-task-node.vue';
 import EndEventNode from './nodes/end-event-node.vue';
 import StartUserNode from './nodes/start-user-node.vue';
+import TriggerNode from './nodes/trigger-node.vue';
 import UserTaskNode from './nodes/user-task-node.vue';
 
 defineOptions({ name: 'ProcessNodeTree' });
@@ -117,11 +118,11 @@ const recursiveFindParentNode = (
     @update:flow-node="handleModelValueUpdate"
   /> -->
   <!-- 触发器节点 -->
-  <!-- <TriggerNode
+  <TriggerNode
     v-if="currentNode && currentNode.type === NodeType.TRIGGER_NODE"
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
-  /> -->
+  />
   <!-- 子流程节点 -->
   <!-- <ChildProcessNode
     v-if="currentNode && currentNode.type === NodeType.CHILD_PROCESS_NODE"

From 4f4d4972c5e55efccb3a244dfa79b94adfc04ec3 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Fri, 30 May 2025 16:24:31 +0800
Subject: [PATCH 25/53] fix: crm business

---
 apps/web-antd/src/views/crm/business/data.ts | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/apps/web-antd/src/views/crm/business/data.ts b/apps/web-antd/src/views/crm/business/data.ts
index 32785090b..bf65a743c 100644
--- a/apps/web-antd/src/views/crm/business/data.ts
+++ b/apps/web-antd/src/views/crm/business/data.ts
@@ -50,16 +50,6 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '备注',
       component: 'Textarea',
     },
-    {
-      fieldName: 'contactNextTime',
-      label: '下次联系时间',
-      component: 'DatePicker',
-      componentProps: {
-        showTime: false,
-        format: 'YYYY-MM-DD HH:mm:ss',
-        valueFormat: 'x',
-      },
-    },
   ];
 }
 

From 081d08a7f859a6d9a0424627ad8711500228a4ec Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Fri, 30 May 2025 19:54:26 +0800
Subject: [PATCH 26/53] fix: alert width fixed in small  screen (#6312)

---
 packages/@core/ui-kit/popup-ui/src/alert/alert.vue             | 3 +--
 .../shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue       | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/@core/ui-kit/popup-ui/src/alert/alert.vue b/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
index 6223ecd75..6997235ac 100644
--- a/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
+++ b/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
@@ -34,7 +34,6 @@ const props = withDefaults(defineProps<AlertProps>(), {
   bordered: true,
   buttonAlign: 'end',
   centered: true,
-  containerClass: 'w-[520px]',
 });
 const emits = defineEmits(['closed', 'confirm', 'opened']);
 const open = defineModel<boolean>('open', { default: false });
@@ -148,7 +147,7 @@ async function handleOpenChange(val: boolean) {
       :class="
         cn(
           containerClass,
-          'left-0 right-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:rounded-[var(--radius)] md:w-[520px] md:max-w-[80%]',
+          'left-0 right-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:w-[520px] sm:max-w-[80%] sm:rounded-[var(--radius)]',
           {
             'border-border border': bordered,
             'shadow-3xl': !bordered,
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
index c3d5c143c..522ada37b 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
@@ -80,7 +80,7 @@ defineExpose({
       v-bind="forwarded"
       :class="
         cn(
-          'z-popup bg-background w-full p-6 shadow-lg outline-none sm:rounded-xl',
+          'z-popup bg-background p-6 shadow-lg outline-none sm:rounded-xl',
           'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
           {

From c7f207034f54650fe2a11f190618c21791f328ab Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Fri, 30 May 2025 20:51:03 +0800
Subject: [PATCH 27/53] feat: mp api

---
 apps/web-antd/src/api/mp/account/index.ts     | 59 +++++++++++++
 apps/web-antd/src/api/mp/autoReply/index.ts   | 49 +++++++++++
 apps/web-antd/src/api/mp/draft/index.ts       | 59 +++++++++++++
 apps/web-antd/src/api/mp/freePublish/index.ts | 45 ++++++++++
 apps/web-antd/src/api/mp/material/index.ts    | 43 ++++++++++
 apps/web-antd/src/api/mp/menu/index.ts        | 58 +++++++++++++
 apps/web-antd/src/api/mp/message/index.ts     | 54 ++++++++++++
 apps/web-antd/src/api/mp/statistics/index.ts  | 84 +++++++++++++++++++
 apps/web-antd/src/api/mp/tag/index.ts         | 62 ++++++++++++++
 apps/web-antd/src/api/mp/user/index.ts        | 57 +++++++++++++
 10 files changed, 570 insertions(+)
 create mode 100644 apps/web-antd/src/api/mp/account/index.ts
 create mode 100644 apps/web-antd/src/api/mp/autoReply/index.ts
 create mode 100644 apps/web-antd/src/api/mp/draft/index.ts
 create mode 100644 apps/web-antd/src/api/mp/freePublish/index.ts
 create mode 100644 apps/web-antd/src/api/mp/material/index.ts
 create mode 100644 apps/web-antd/src/api/mp/menu/index.ts
 create mode 100644 apps/web-antd/src/api/mp/message/index.ts
 create mode 100644 apps/web-antd/src/api/mp/statistics/index.ts
 create mode 100644 apps/web-antd/src/api/mp/tag/index.ts
 create mode 100644 apps/web-antd/src/api/mp/user/index.ts

diff --git a/apps/web-antd/src/api/mp/account/index.ts b/apps/web-antd/src/api/mp/account/index.ts
new file mode 100644
index 000000000..918c80202
--- /dev/null
+++ b/apps/web-antd/src/api/mp/account/index.ts
@@ -0,0 +1,59 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MpAccountApi {
+  /** 公众号账号信息 */
+  export interface Account {
+    id?: number;
+    name: string;
+    account: string;
+    appId: string;
+    appSecret: string;
+    token: string;
+    aesKey?: string;
+    qrCodeUrl?: string;
+    remark?: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询公众号账号列表 */
+export function getAccountPage(params: PageParam) {
+  return requestClient.get<PageResult<MpAccountApi.Account>>(
+    '/mp/account/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询公众号账号详情 */
+export function getAccount(id: number) {
+  return requestClient.get<MpAccountApi.Account>(`/mp/account/get?id=${id}`);
+}
+
+/** 新增公众号账号 */
+export function createAccount(data: MpAccountApi.Account) {
+  return requestClient.post('/mp/account/create', data);
+}
+
+/** 修改公众号账号 */
+export function updateAccount(data: MpAccountApi.Account) {
+  return requestClient.put('/mp/account/update', data);
+}
+
+/** 删除公众号账号 */
+export function deleteAccount(id: number) {
+  return requestClient.delete(`/mp/account/delete?id=${id}`);
+}
+
+/** 生成公众号账号二维码 */
+export function generateAccountQrCode(id: number) {
+  return requestClient.post(`/mp/account/generate-qr-code?id=${id}`);
+}
+
+/** 清空公众号账号 API 配额 */
+export function clearAccountQuota(id: number) {
+  return requestClient.post(`/mp/account/clear-quota?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/mp/autoReply/index.ts b/apps/web-antd/src/api/mp/autoReply/index.ts
new file mode 100644
index 000000000..d72e5a0cb
--- /dev/null
+++ b/apps/web-antd/src/api/mp/autoReply/index.ts
@@ -0,0 +1,49 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MpAutoReplyApi {
+  /** 自动回复信息 */
+  export interface AutoReply {
+    id?: number;
+    accountId: number;
+    type: number;
+    keyword: string;
+    content: string;
+    status: number;
+    remark?: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询自动回复列表 */
+export function getAutoReplyPage(params: PageParam) {
+  return requestClient.get<PageResult<MpAutoReplyApi.AutoReply>>(
+    '/mp/auto-reply/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询自动回复详情 */
+export function getAutoReply(id: number) {
+  return requestClient.get<MpAutoReplyApi.AutoReply>(
+    `/mp/auto-reply/get?id=${id}`,
+  );
+}
+
+/** 新增自动回复 */
+export function createAutoReply(data: MpAutoReplyApi.AutoReply) {
+  return requestClient.post('/mp/auto-reply/create', data);
+}
+
+/** 修改自动回复 */
+export function updateAutoReply(data: MpAutoReplyApi.AutoReply) {
+  return requestClient.put('/mp/auto-reply/update', data);
+}
+
+/** 删除自动回复 */
+export function deleteAutoReply(id: number) {
+  return requestClient.delete(`/mp/auto-reply/delete?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/mp/draft/index.ts b/apps/web-antd/src/api/mp/draft/index.ts
new file mode 100644
index 000000000..435f13e0b
--- /dev/null
+++ b/apps/web-antd/src/api/mp/draft/index.ts
@@ -0,0 +1,59 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MpDraftApi {
+  /** 草稿文章信息 */
+  export interface Article {
+    title: string;
+    author: string;
+    digest: string;
+    content: string;
+    contentSourceUrl: string;
+    thumbMediaId: string;
+    showCoverPic: number;
+    needOpenComment: number;
+    onlyFansCanComment: number;
+  }
+
+  /** 草稿信息 */
+  export interface Draft {
+    id?: number;
+    accountId: number;
+    mediaId: string;
+    articles: Article[];
+    createTime?: Date;
+  }
+}
+
+/** 查询草稿列表 */
+export function getDraftPage(params: PageParam) {
+  return requestClient.get<PageResult<MpDraftApi.Draft>>('/mp/draft/page', {
+    params,
+  });
+}
+
+/** 创建草稿 */
+export function createDraft(accountId: number, articles: MpDraftApi.Article[]) {
+  return requestClient.post('/mp/draft/create', articles, {
+    params: { accountId },
+  });
+}
+
+/** 更新草稿 */
+export function updateDraft(
+  accountId: number,
+  mediaId: string,
+  articles: MpDraftApi.Article[],
+) {
+  return requestClient.put('/mp/draft/update', articles, {
+    params: { accountId, mediaId },
+  });
+}
+
+/** 删除草稿 */
+export function deleteDraft(accountId: number, mediaId: string) {
+  return requestClient.delete('/mp/draft/delete', {
+    params: { accountId, mediaId },
+  });
+}
diff --git a/apps/web-antd/src/api/mp/freePublish/index.ts b/apps/web-antd/src/api/mp/freePublish/index.ts
new file mode 100644
index 000000000..bc50efe96
--- /dev/null
+++ b/apps/web-antd/src/api/mp/freePublish/index.ts
@@ -0,0 +1,45 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MpFreePublishApi {
+  /** 自由发布文章信息 */
+  export interface FreePublish {
+    id?: number;
+    accountId: number;
+    mediaId: string;
+    articleId: string;
+    title: string;
+    author: string;
+    digest: string;
+    content: string;
+    thumbUrl: string;
+    status: number;
+    publishTime?: Date;
+    createTime?: Date;
+  }
+}
+
+/** 查询自由发布文章列表 */
+export function getFreePublishPage(params: PageParam) {
+  return requestClient.get<PageResult<MpFreePublishApi.FreePublish>>(
+    '/mp/free-publish/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 删除自由发布文章 */
+export function deleteFreePublish(accountId: number, articleId: string) {
+  return requestClient.delete('/mp/free-publish/delete', {
+    params: { accountId, articleId },
+  });
+}
+
+/** 发布自由发布文章 */
+export function submitFreePublish(accountId: number, mediaId: string) {
+  return requestClient.post('/mp/free-publish/submit', null, {
+    params: { accountId, mediaId },
+  });
+}
diff --git a/apps/web-antd/src/api/mp/material/index.ts b/apps/web-antd/src/api/mp/material/index.ts
new file mode 100644
index 000000000..73ca899ee
--- /dev/null
+++ b/apps/web-antd/src/api/mp/material/index.ts
@@ -0,0 +1,43 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+/** 素材类型枚举 */
+export enum MaterialType {
+  IMAGE = 1, // 图片
+  THUMB = 4, // 缩略图
+  VIDEO = 3, // 视频
+  VOICE = 2, // 语音
+}
+
+export namespace MpMaterialApi {
+  /** 素材信息 */
+  export interface Material {
+    id?: number;
+    accountId: number;
+    type: MaterialType;
+    mediaId: string;
+    url: string;
+    name: string;
+    size: number;
+    remark?: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询素材列表 */
+export function getMaterialPage(params: PageParam) {
+  return requestClient.get<PageResult<MpMaterialApi.Material>>(
+    '/mp/material/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 删除永久素材 */
+export function deletePermanentMaterial(id: number) {
+  return requestClient.delete('/mp/material/delete-permanent', {
+    params: { id },
+  });
+}
diff --git a/apps/web-antd/src/api/mp/menu/index.ts b/apps/web-antd/src/api/mp/menu/index.ts
new file mode 100644
index 000000000..a8ae0833b
--- /dev/null
+++ b/apps/web-antd/src/api/mp/menu/index.ts
@@ -0,0 +1,58 @@
+import { requestClient } from '#/api/request';
+
+/** 菜单类型枚举 */
+export enum MenuType {
+  CLICK = 'click', // 点击推事件
+  LOCATION_SELECT = 'location_select', // 发送位置
+  MEDIA_ID = 'media_id', // 下发消息
+  MINIPROGRAM = 'miniprogram', // 小程序
+  PIC_PHOTO_OR_ALBUM = 'pic_photo_or_album', // 拍照或者相册发图
+  PIC_SYSPHOTO = 'pic_sysphoto', // 系统拍照发图
+  PIC_WEIXIN = 'pic_weixin', // 微信相册发图
+  SCANCODE_PUSH = 'scancode_push', // 扫码推事件
+  SCANCODE_WAITMSG = 'scancode_waitmsg', // 扫码带提示
+  VIEW = 'view', // 跳转URL
+  VIEW_LIMITED = 'view_limited', // 跳转图文消息URL
+}
+
+export namespace MpMenuApi {
+  /** 菜单按钮信息 */
+  export interface MenuButton {
+    type: MenuType;
+    name: string;
+    key?: string;
+    url?: string;
+    mediaId?: string;
+    appId?: string;
+    pagePath?: string;
+    subButtons?: MenuButton[];
+  }
+
+  /** 菜单信息 */
+  export interface Menu {
+    accountId: number;
+    menus: MenuButton[];
+  }
+}
+
+/** 查询菜单列表 */
+export function getMenuList(accountId: number) {
+  return requestClient.get<MpMenuApi.MenuButton[]>('/mp/menu/list', {
+    params: { accountId },
+  });
+}
+
+/** 保存菜单 */
+export function saveMenu(accountId: number, menus: MpMenuApi.MenuButton[]) {
+  return requestClient.post('/mp/menu/save', {
+    accountId,
+    menus,
+  });
+}
+
+/** 删除菜单 */
+export function deleteMenu(accountId: number) {
+  return requestClient.delete('/mp/menu/delete', {
+    params: { accountId },
+  });
+}
diff --git a/apps/web-antd/src/api/mp/message/index.ts b/apps/web-antd/src/api/mp/message/index.ts
new file mode 100644
index 000000000..cfb2dbacc
--- /dev/null
+++ b/apps/web-antd/src/api/mp/message/index.ts
@@ -0,0 +1,54 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+/** 消息类型枚举 */
+export enum MessageType {
+  IMAGE = 'image', // 图片消息
+  MPNEWS = 'mpnews', // 公众号图文消息
+  MUSIC = 'music', // 音乐消息
+  NEWS = 'news', // 图文消息
+  TEXT = 'text', // 文本消息
+  VIDEO = 'video', // 视频消息
+  VOICE = 'voice', // 语音消息
+  WXCARD = 'wxcard', // 卡券消息
+}
+
+export namespace MpMessageApi {
+  /** 消息信息 */
+  export interface Message {
+    id?: number;
+    accountId: number;
+    type: MessageType;
+    openid: string;
+    content: string;
+    mediaId?: string;
+    status: number;
+    remark?: string;
+    createTime?: Date;
+  }
+
+  /** 发送消息请求 */
+  export interface SendMessageRequest {
+    accountId: number;
+    openid: string;
+    type: MessageType;
+    content: string;
+    mediaId?: string;
+  }
+}
+
+/** 查询消息列表 */
+export function getMessagePage(params: PageParam) {
+  return requestClient.get<PageResult<MpMessageApi.Message>>(
+    '/mp/message/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 发送消息 */
+export function sendMessage(data: MpMessageApi.SendMessageRequest) {
+  return requestClient.post('/mp/message/send', data);
+}
diff --git a/apps/web-antd/src/api/mp/statistics/index.ts b/apps/web-antd/src/api/mp/statistics/index.ts
new file mode 100644
index 000000000..e36073820
--- /dev/null
+++ b/apps/web-antd/src/api/mp/statistics/index.ts
@@ -0,0 +1,84 @@
+import type { PageParam } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MpStatisticsApi {
+  /** 统计查询参数 */
+  export interface StatisticsQuery extends PageParam {
+    accountId: number;
+    beginDate: string;
+    endDate: string;
+  }
+
+  /** 消息发送概况数据 */
+  export interface UpstreamMessage {
+    refDate: string;
+    msgType: string;
+    msgUser: number;
+    msgCount: number;
+  }
+
+  /** 用户增减数据 */
+  export interface UserSummary {
+    refDate: string;
+    userSource: number;
+    newUser: number;
+    cancelUser: number;
+    cumulateUser: number;
+  }
+
+  /** 用户累计数据 */
+  export interface UserCumulate {
+    refDate: string;
+    cumulateUser: number;
+  }
+
+  /** 接口分析数据 */
+  export interface InterfaceSummary {
+    refDate: string;
+    callbackCount: number;
+    failCount: number;
+    totalTimeCost: number;
+    maxTimeCost: number;
+  }
+}
+
+/** 获取消息发送概况数据 */
+export function getUpstreamMessage(params: MpStatisticsApi.StatisticsQuery) {
+  return requestClient.get<MpStatisticsApi.UpstreamMessage[]>(
+    '/mp/statistics/upstream-message',
+    {
+      params,
+    },
+  );
+}
+
+/** 获取用户增减数据 */
+export function getUserSummary(params: MpStatisticsApi.StatisticsQuery) {
+  return requestClient.get<MpStatisticsApi.UserSummary[]>(
+    '/mp/statistics/user-summary',
+    {
+      params,
+    },
+  );
+}
+
+/** 获取用户累计数据 */
+export function getUserCumulate(params: MpStatisticsApi.StatisticsQuery) {
+  return requestClient.get<MpStatisticsApi.UserCumulate[]>(
+    '/mp/statistics/user-cumulate',
+    {
+      params,
+    },
+  );
+}
+
+/** 获取接口分析数据 */
+export function getInterfaceSummary(params: MpStatisticsApi.StatisticsQuery) {
+  return requestClient.get<MpStatisticsApi.InterfaceSummary[]>(
+    '/mp/statistics/interface-summary',
+    {
+      params,
+    },
+  );
+}
diff --git a/apps/web-antd/src/api/mp/tag/index.ts b/apps/web-antd/src/api/mp/tag/index.ts
new file mode 100644
index 000000000..3cf677e7d
--- /dev/null
+++ b/apps/web-antd/src/api/mp/tag/index.ts
@@ -0,0 +1,62 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MpTagApi {
+  /** 标签信息 */
+  export interface Tag {
+    id?: number;
+    name: string;
+    accountId: number;
+    createTime?: Date;
+  }
+
+  /** 标签分页查询参数 */
+  export interface TagPageQuery extends PageParam {
+    accountId?: number;
+    name?: string;
+  }
+}
+
+/** 创建公众号标签 */
+export function createTag(data: MpTagApi.Tag) {
+  return requestClient.post('/mp/tag/create', data);
+}
+
+/** 更新公众号标签 */
+export function updateTag(data: MpTagApi.Tag) {
+  return requestClient.put('/mp/tag/update', data);
+}
+
+/** 删除公众号标签 */
+export function deleteTag(id: number) {
+  return requestClient.delete('/mp/tag/delete', {
+    params: { id },
+  });
+}
+
+/** 获取公众号标签 */
+export function getTag(id: number) {
+  return requestClient.get<MpTagApi.Tag>('/mp/tag/get', {
+    params: { id },
+  });
+}
+
+/** 获取公众号标签分页 */
+export function getTagPage(params: MpTagApi.TagPageQuery) {
+  return requestClient.get<PageResult<MpTagApi.Tag>>('/mp/tag/page', {
+    params,
+  });
+}
+
+/** 获取公众号标签精简信息列表 */
+export function getSimpleTagList() {
+  return requestClient.get<MpTagApi.Tag[]>('/mp/tag/list-all-simple');
+}
+
+/** 同步公众号标签 */
+export function syncTag(accountId: number) {
+  return requestClient.post('/mp/tag/sync', null, {
+    params: { accountId },
+  });
+}
diff --git a/apps/web-antd/src/api/mp/user/index.ts b/apps/web-antd/src/api/mp/user/index.ts
new file mode 100644
index 000000000..e34573a1a
--- /dev/null
+++ b/apps/web-antd/src/api/mp/user/index.ts
@@ -0,0 +1,57 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MpUserApi {
+  /** 用户信息 */
+  export interface User {
+    id?: number;
+    accountId: number;
+    openid: string;
+    nickname: string;
+    avatar: string;
+    sex: number;
+    country: string;
+    province: string;
+    city: string;
+    language: string;
+    subscribe: boolean;
+    subscribeTime?: Date;
+    remark?: string;
+    tagIds?: number[];
+    createTime?: Date;
+  }
+
+  /** 用户分页查询参数 */
+  export interface UserPageQuery extends PageParam {
+    accountId?: number;
+    nickname?: string;
+    tagId?: number;
+  }
+}
+
+/** 更新公众号粉丝 */
+export function updateUser(data: MpUserApi.User) {
+  return requestClient.put('/mp/user/update', data);
+}
+
+/** 获取公众号粉丝 */
+export function getUser(id: number) {
+  return requestClient.get<MpUserApi.User>('/mp/user/get', {
+    params: { id },
+  });
+}
+
+/** 获取公众号粉丝分页 */
+export function getUserPage(params: MpUserApi.UserPageQuery) {
+  return requestClient.get<PageResult<MpUserApi.User>>('/mp/user/page', {
+    params,
+  });
+}
+
+/** 同步公众号粉丝 */
+export function syncUser(accountId: number) {
+  return requestClient.post('/mp/user/sync', null, {
+    params: { accountId },
+  });
+}

From 1074b90c6f4660efa306c869b56265d7d77f05f6 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Fri, 30 May 2025 20:51:13 +0800
Subject: [PATCH 28/53] feat: mp account

---
 apps/web-antd/src/views/mp/account/data.ts    | 135 +++++++++++
 apps/web-antd/src/views/mp/account/index.vue  | 209 ++++++++++++++++--
 .../src/views/mp/account/modules/form.vue     |  82 +++++++
 3 files changed, 403 insertions(+), 23 deletions(-)
 create mode 100644 apps/web-antd/src/views/mp/account/data.ts
 create mode 100644 apps/web-antd/src/views/mp/account/modules/form.vue

diff --git a/apps/web-antd/src/views/mp/account/data.ts b/apps/web-antd/src/views/mp/account/data.ts
new file mode 100644
index 000000000..cbf918cfc
--- /dev/null
+++ b/apps/web-antd/src/views/mp/account/data.ts
@@ -0,0 +1,135 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名称',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入名称',
+      },
+    },
+    {
+      fieldName: 'account',
+      label: '微信号',
+      component: 'Input',
+      help: '在微信公众平台（mp.weixin.qq.com）的菜单 [设置与开发 - 公众号设置 - 账号详情] 中能找到「微信号」',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入微信号',
+      },
+    },
+    {
+      fieldName: 'appId',
+      label: 'appId',
+      component: 'Input',
+      help: '在微信公众平台（mp.weixin.qq.com）的菜单 [设置与开发 - 公众号设置 - 基本设置] 中能找到「开发者ID(AppID)」',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入appId',
+      },
+    },
+    {
+      fieldName: 'appSecret',
+      label: 'appSecret',
+      component: 'Input',
+      help: '在微信公众平台（mp.weixin.qq.com）的菜单 [设置与开发 - 公众号设置 - 基本设置] 中能找到「开发者密码(AppSecret)」',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入appSecret',
+      },
+    },
+    {
+      fieldName: 'token',
+      label: 'token',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入token',
+      },
+    },
+    {
+      fieldName: 'aesKey',
+      label: '消息加解密密钥',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入aesKey',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 搜索表单配置 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名称',
+      component: 'Input',
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeGridPropTypes.Columns {
+  return [
+    {
+      title: '名称',
+      field: 'name',
+    },
+    {
+      title: '微信号',
+      field: 'account',
+    },
+    {
+      title: 'appId',
+      field: 'appId',
+    },
+    {
+      title: '服务器地址(URL)',
+      field: 'utl',
+      slots: {
+        default: ({ row }) => {
+          return `http://服务端地址/admin-api/mp/open/${row.appId}`;
+        },
+      },
+    },
+    {
+      title: '二维码',
+      field: 'qrCodeUrl',
+      slots: {
+        default: 'qrCodeUrl',
+      },
+    },
+    {
+      title: '备注',
+      field: 'remark',
+    },
+    {
+      title: '操作',
+      width: 260,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mp/account/index.vue b/apps/web-antd/src/views/mp/account/index.vue
index 34f349e11..cb105a877 100644
--- a/apps/web-antd/src/views/mp/account/index.vue
+++ b/apps/web-antd/src/views/mp/account/index.vue
@@ -1,31 +1,194 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpAccountApi } from '#/api/mp/account';
 
-import { Button } from 'ant-design-vue';
+import { Page, useVbenModal } from '@vben/common-ui';
 
-import { DocAlert } from '#/components/doc-alert';
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  clearAccountQuota,
+  deleteAccount,
+  generateAccountQrCode,
+  getAccountPage,
+} from '#/api/mp/account';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建账号 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑账号 */
+function handleEdit(row: MpAccountApi.Account) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除账号 */
+async function handleDelete(row: MpAccountApi.Account) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteAccount(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 生成二维码 */
+async function handleGenerateQrCode(row: MpAccountApi.Account) {
+  const hideLoading = message.loading({
+    content: '生成二维码',
+    key: 'action_key_msg',
+  });
+  try {
+    await generateAccountQrCode(row.id as number);
+    message.success({
+      content: '生成二维码成功',
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 清空 API 配额 */
+async function handleCleanQuota(row: MpAccountApi.Account) {
+  const hideLoading = message.loading({
+    content: '清空 API 配额',
+    key: 'action_key_msg',
+  });
+  try {
+    await clearAccountQuota(row.id as number);
+    message.success({
+      content: '清空 API 配额成功',
+      key: 'action_key_msg',
+    });
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getAccountPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<MpAccountApi.Account>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert title="公众号接入" url="https://doc.iocoder.cn/mp/account/" />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/account/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/account/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="公众号账号列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['公众号账号']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mp:account:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #qrCodeUrl="{ row }">
+        <a v-if="row.qrCodeUrl" :href="row.qrCodeUrl" target="_blank">
+          <img :src="row.qrCodeUrl" alt="二维码" />
+        </a>
+        <TableAction
+          :actions="[
+            {
+              label: '生成二维码',
+              type: 'link',
+              icon: 'qrcode',
+              auth: ['mp:account:qr-code'],
+              onClick: handleGenerateQrCode.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['mp:account:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mp:account:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '清空 API 配额',
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mp:account:clear-quota'],
+              popConfirm: {
+                title: '清空 API 配额',
+                confirm: handleCleanQuota.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/mp/account/modules/form.vue b/apps/web-antd/src/views/mp/account/modules/form.vue
new file mode 100644
index 000000000..865c7fab1
--- /dev/null
+++ b/apps/web-antd/src/views/mp/account/modules/form.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { MpAccountApi } from '#/api/mp/account';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createAccount, getAccount, updateAccount } from '#/api/mp/account';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MpAccountApi.Account>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['公众号账号'])
+    : $t('ui.actionTitle.create', ['公众号账号']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MpAccountApi.Account;
+    try {
+      await (formData.value?.id ? updateAccount(data) : createAccount(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MpAccountApi.Account>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getAccount(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[600px]" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>

From 688f7c90832980a046899c8c6fc6f9cc35bf202c Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Fri, 30 May 2025 21:06:41 +0800
Subject: [PATCH 29/53] =?UTF-8?q?feat:=20[BPM=20=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E6=B5=81]=20Simple=20=E6=A8=A1=E5=9E=8B=20-=20=E8=A7=A6?=
 =?UTF-8?q?=E5=8F=91=E5=99=A8=E8=8A=82=E7=82=B9=E6=9D=A1=E4=BB=B6=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nodes-config/modules/condition-dialog.vue |  70 ++++
 .../nodes-config/modules/condition.vue        | 323 ++++++++++++++++++
 .../nodes-config/trigger-node-config.vue      |  26 +-
 .../simple-process-design/consts.ts           |   6 +-
 4 files changed, 410 insertions(+), 15 deletions(-)
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition.vue

diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue
new file mode 100644
index 000000000..289811650
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { ConditionGroup } from '../../../consts';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { ConditionType, DEFAULT_CONDITION_GROUP_VALUE } from '../../../consts';
+import Condition from './condition.vue';
+
+defineOptions({ name: 'ConditionDialog' });
+
+const emit = defineEmits<{
+  updateCondition: [condition: object];
+}>();
+
+const conditionData = ref<{
+  conditionExpression?: string;
+  conditionGroups?: ConditionGroup;
+  conditionType: ConditionType;
+}>({
+  conditionType: ConditionType.RULE,
+  conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+});
+
+// 条件组件的引用
+const conditionRef = ref();
+
+const [Modal, modalApi] = useVbenModal({
+  title: '条件配置',
+  destroyOnClose: true,
+  draggable: true,
+  async onConfirm() {
+    // 校验表单
+    if (!conditionRef.value) return;
+    const valid = await conditionRef.value.validate().catch(() => false);
+    if (!valid) {
+      message.warning('请完善条件规则');
+      return;
+    }
+    // 设置完的条件传递给父组件
+    emit('updateCondition', conditionData.value);
+    modalApi.close();
+  },
+  onCancel() {
+    modalApi.close();
+  },
+});
+
+const open = (conditionObj: any | undefined) => {
+  if (conditionObj) {
+    conditionData.value.conditionType = conditionObj.conditionType;
+    conditionData.value.conditionExpression = conditionObj.conditionExpression;
+    conditionData.value.conditionGroups = conditionObj.conditionGroups;
+  }
+  modalApi.open();
+};
+
+defineExpose({ open });
+</script>
+<template>
+  <Modal class="w-1/2">
+    <Condition ref="conditionRef" v-model="conditionData" />
+  </Modal>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition.vue
new file mode 100644
index 000000000..c0b1738ff
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition.vue
@@ -0,0 +1,323 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+
+import type { Ref } from 'vue';
+
+import { computed, inject, reactive, ref } from 'vue';
+
+import { IconifyIcon, Plus, Trash2 } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import {
+  Card,
+  Col,
+  Form,
+  FormItem,
+  Input,
+  Radio,
+  RadioGroup,
+  Row,
+  Select,
+  SelectOption,
+  Space,
+  Switch,
+  Textarea,
+  Tooltip,
+} from 'ant-design-vue';
+
+import { BpmModelFormType } from '#/utils/constants';
+
+import {
+  COMPARISON_OPERATORS,
+  CONDITION_CONFIG_TYPES,
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE,
+} from '../../../consts';
+import { useFormFieldsAndStartUser } from '../../../helpers';
+
+defineOptions({
+  name: 'Condition',
+});
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true,
+  },
+});
+const emit = defineEmits(['update:modelValue']);
+const condition = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue);
+  },
+});
+
+const formType = inject<Ref<number>>('formType'); // 表单类型
+const conditionConfigTypes = computed(() => {
+  return CONDITION_CONFIG_TYPES.filter((item) => {
+    // 业务表单暂时去掉条件规则选项
+    return !(
+      formType?.value === BpmModelFormType.CUSTOM &&
+      item.value === ConditionType.RULE
+    );
+  });
+});
+
+/** 条件规则可选择的表单字段 */
+const fieldOptions = useFormFieldsAndStartUser();
+
+// 表单校验规则
+const formRules: Record<string, Rule[]> = reactive({
+  conditionType: [
+    { required: true, message: '配置方式不能为空', trigger: 'change' },
+  ],
+  conditionExpression: [
+    {
+      required: true,
+      message: '条件表达式不能为空',
+      trigger: ['blur', 'change'],
+    },
+  ],
+});
+const formRef = ref(); // 表单 Ref
+
+/** 切换条件配置方式 */
+const changeConditionType = () => {
+  if (
+    condition.value.conditionType === ConditionType.RULE &&
+    !condition.value.conditionGroups
+  ) {
+    condition.value.conditionGroups = cloneDeep(DEFAULT_CONDITION_GROUP_VALUE);
+  }
+};
+const deleteConditionGroup = (conditions: any, index: number) => {
+  conditions.splice(index, 1);
+};
+
+const deleteConditionRule = (condition: any, index: number) => {
+  condition.rules.splice(index, 1);
+};
+
+const addConditionRule = (condition: any, index: number) => {
+  const rule = {
+    opCode: '==',
+    leftSide: undefined,
+    rightSide: '',
+  };
+  condition.rules.splice(index + 1, 0, rule);
+};
+
+const addConditionGroup = (conditions: any) => {
+  const condition = {
+    and: true,
+    rules: [
+      {
+        opCode: '==',
+        leftSide: undefined,
+        rightSide: '',
+      },
+    ],
+  };
+  conditions.push(condition);
+};
+
+const validate = async () => {
+  if (!formRef.value) return false;
+  return await formRef.value.validate();
+};
+
+defineExpose({ validate });
+</script>
+<template>
+  <Form
+    ref="formRef"
+    :model="condition"
+    :rules="formRules"
+    :label-col="{ span: 24 }"
+    :wrapper-col="{ span: 24 }"
+  >
+    <FormItem label="配置方式" name="conditionType">
+      <RadioGroup
+        v-model:value="condition.conditionType"
+        @change="changeConditionType"
+      >
+        <Radio
+          v-for="(dict, indexConditionType) in conditionConfigTypes"
+          :key="indexConditionType"
+          :value="dict.value"
+        >
+          {{ dict.label }}
+        </Radio>
+      </RadioGroup>
+    </FormItem>
+    <FormItem
+      v-if="
+        condition.conditionType === ConditionType.RULE &&
+        condition.conditionGroups
+      "
+    >
+      <div class="mb-5 flex w-full justify-between">
+        <div class="flex items-center">
+          <div class="mr-4">条件组关系</div>
+          <Switch
+            v-model:checked="condition.conditionGroups.and"
+            checked-children="且"
+            un-checked-children="或"
+          />
+        </div>
+      </div>
+      <Space direction="vertical" size="small" class="w-11/12 pl-1">
+        <template #split>
+          {{ condition.conditionGroups.and ? '且' : '或' }}
+        </template>
+        <Card
+          class="group relative w-full hover:border-[#1890ff]"
+          v-for="(equation, cIdx) in condition.conditionGroups.conditions"
+          :key="cIdx"
+        >
+          <div
+            class="absolute left-0 top-0 z-[1] flex cursor-pointer opacity-0 group-hover:opacity-100"
+            v-if="condition.conditionGroups.conditions.length > 1"
+          >
+            <IconifyIcon
+              color="#0089ff"
+              icon="ep:circle-close-filled"
+              class="size-4"
+              @click="
+                deleteConditionGroup(condition.conditionGroups.conditions, cIdx)
+              "
+            />
+          </div>
+          <template #extra>
+            <div class="flex items-center justify-between">
+              <div>条件组</div>
+              <div class="flex">
+                <div class="mr-4">规则关系</div>
+                <Switch
+                  v-model:checked="equation.and"
+                  checked-children="且"
+                  un-checked-children="或"
+                />
+              </div>
+            </div>
+          </template>
+
+          <Row
+            :gutter="8"
+            class="mb-2"
+            v-for="(rule, rIdx) in equation.rules"
+            :key="rIdx"
+          >
+            <Col :span="8">
+              <FormItem
+                :name="[
+                  'conditionGroups',
+                  'conditions',
+                  cIdx,
+                  'rules',
+                  rIdx,
+                  'leftSide',
+                ]"
+                :rules="{
+                  required: true,
+                  message: '左值不能为空',
+                  trigger: 'change',
+                }"
+              >
+                <Select
+                  v-model:value="rule.leftSide"
+                  allow-clear
+                  placeholder="请选择表单字段"
+                >
+                  <SelectOption
+                    v-for="(field, fIdx) in fieldOptions"
+                    :key="fIdx"
+                    :label="field.title"
+                    :value="field.field"
+                    :disabled="!field.required"
+                  >
+                    <Tooltip
+                      title="表单字段非必填时不能作为流程分支条件"
+                      placement="right"
+                      v-if="!field.required"
+                    >
+                      <span>{{ field.title }}</span>
+                    </Tooltip>
+                    <template v-else>{{ field.title }}</template>
+                  </SelectOption>
+                </Select>
+              </FormItem>
+            </Col>
+            <Col :span="6">
+              <Select v-model:value="rule.opCode" placeholder="请选择操作符">
+                <SelectOption
+                  v-for="operator in COMPARISON_OPERATORS"
+                  :key="operator.value"
+                  :label="operator.label"
+                  :value="operator.value"
+                >
+                  {{ operator.label }}
+                </SelectOption>
+              </Select>
+            </Col>
+            <Col :span="7">
+              <FormItem
+                :name="[
+                  'conditionGroups',
+                  'conditions',
+                  cIdx,
+                  'rules',
+                  rIdx,
+                  'rightSide',
+                ]"
+                :rules="{
+                  required: true,
+                  message: '右值不能为空',
+                  trigger: ['blur', 'change'],
+                }"
+              >
+                <Input
+                  v-model:value="rule.rightSide"
+                  placeholder="请输入右值"
+                />
+              </FormItem>
+            </Col>
+            <Col :span="3">
+              <div class="flex h-[32px] items-center">
+                <Trash2
+                  v-if="equation.rules.length > 1"
+                  class="mr-2 size-4 cursor-pointer text-red-500"
+                  @click="deleteConditionRule(equation, rIdx)"
+                />
+                <Plus
+                  class="size-4 cursor-pointer text-blue-500"
+                  @click="addConditionRule(equation, rIdx)"
+                />
+              </div>
+            </Col>
+          </Row>
+        </Card>
+      </Space>
+      <div title="添加条件组" class="mt-4 cursor-pointer">
+        <Plus
+          class="size-[24px] text-blue-500"
+          @click="addConditionGroup(condition.conditionGroups?.conditions)"
+        />
+      </div>
+    </FormItem>
+    <FormItem
+      v-if="condition.conditionType === ConditionType.EXPRESSION"
+      label="条件表达式"
+      name="conditionExpression"
+    >
+      <Textarea
+        v-model:value="condition.conditionExpression"
+        placeholder="请输入条件表达式"
+        allow-clear
+        :auto-size="{ minRows: 3, maxRows: 6 }"
+      />
+    </FormItem>
+  </Form>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
index 1d9e209da..67096ae63 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
@@ -38,10 +38,11 @@ import {
 import {
   getConditionShowText,
   useFormFields,
+  useFormFieldsAndStartUser,
   useNodeName,
   useWatchNode,
 } from '../../helpers';
-// TODO import ConditionDialog from './modules/condition-dialog.vue';
+import ConditionDialog from './modules/condition-dialog.vue';
 import HttpRequestSetting from './modules/http-request-setting.vue';
 
 defineOptions({
@@ -215,8 +216,7 @@ const openFormSettingCondition = (
   conditionDialog.open(formSetting);
 };
 /** 处理条件配置保存 */
-/* 暂时注释掉未使用的函数
-const _handleConditionUpdate = (index: number, condition: any) => {
+const handleConditionUpdate = (index: number, condition: any) => {
   if (configForm.value.formSettings![index]) {
     configForm.value.formSettings![index].conditionType =
       condition.conditionType;
@@ -226,14 +226,15 @@ const _handleConditionUpdate = (index: number, condition: any) => {
       condition.conditionGroups;
   }
 };
-*/
+// 包含发起人字段的表单字段
+const includeStartUserFormFields = useFormFieldsAndStartUser();
 /** 条件配置展示 */
 const showConditionText = (formSetting: FormTriggerSetting) => {
   return getConditionShowText(
     formSetting.conditionType,
     formSetting.conditionExpression,
     formSetting.conditionGroups,
-    formFields,
+    includeStartUserFormFields,
   );
 };
 
@@ -457,17 +458,17 @@ onMounted(() => {
                 </div>
               </template>
 
-              <!-- TODO 条件设置 -->
-              <!-- <ConditionDialog
+              <ConditionDialog
                 :ref="`condition-${index}`"
                 @update-condition="(val) => handleConditionUpdate(index, val)"
-              /> -->
+              />
               <Row>
                 <Col :span="24">
                   <div class="cursor-pointer" v-if="formSetting.conditionType">
                     <Tag
                       color="success"
                       closable
+                      class="text-sm"
                       @close="deleteFormSettingCondition(formSetting)"
                       @click="openFormSettingCondition(index, formSetting)"
                     >
@@ -605,17 +606,18 @@ onMounted(() => {
                 </div>
               </template>
 
-              <!-- TODO 条件设置 -->
-              <!-- <ConditionDialog
+              <!-- 条件设置 -->
+              <ConditionDialog
                 :ref="`condition-${index}`"
                 @update-condition="(val) => handleConditionUpdate(index, val)"
-              /> -->
+              />
               <Row>
                 <Col :span="24">
                   <div class="cursor-pointer" v-if="formSetting.conditionType">
                     <Tag
-                      color="warning"
+                      color="success"
                       closable
+                      class="text-sm"
                       @close="deleteFormSettingCondition(formSetting)"
                       @click="openFormSettingCondition(index, formSetting)"
                     >
diff --git a/apps/web-antd/src/components/simple-process-design/consts.ts b/apps/web-antd/src/components/simple-process-design/consts.ts
index 74c910f60..a5bf43394 100644
--- a/apps/web-antd/src/components/simple-process-design/consts.ts
+++ b/apps/web-antd/src/components/simple-process-design/consts.ts
@@ -475,9 +475,9 @@ export type ListenerHandler = {
  * 条件规则结构定义
  */
 export type ConditionRule = {
-  leftSide: string;
+  leftSide: string | undefined;
   opCode: string;
-  rightSide: string;
+  rightSide: string | undefined;
 };
 
 /**
@@ -725,7 +725,7 @@ export const DEFAULT_CONDITION_GROUP_VALUE = {
       rules: [
         {
           opCode: '==',
-          leftSide: '',
+          leftSide: undefined,
           rightSide: '',
         },
       ],

From 5fa6ca78e293d106d65b6267e963abb387d3c37e Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Fri, 30 May 2025 21:24:24 +0800
Subject: [PATCH 30/53] feat: tag

---
 apps/web-antd/src/api/mp/account/index.ts     |   7 +
 apps/web-antd/src/api/mp/tag/index.ts         |   3 +-
 apps/web-antd/src/views/mp/tag/data.ts        |  82 +++++++++
 apps/web-antd/src/views/mp/tag/index.vue      | 172 +++++++++++++++---
 .../src/views/mp/tag/modules/form.vue         |  88 +++++++++
 5 files changed, 328 insertions(+), 24 deletions(-)
 create mode 100644 apps/web-antd/src/views/mp/tag/data.ts
 create mode 100644 apps/web-antd/src/views/mp/tag/modules/form.vue

diff --git a/apps/web-antd/src/api/mp/account/index.ts b/apps/web-antd/src/api/mp/account/index.ts
index 918c80202..9e7d27712 100644
--- a/apps/web-antd/src/api/mp/account/index.ts
+++ b/apps/web-antd/src/api/mp/account/index.ts
@@ -33,6 +33,13 @@ export function getAccount(id: number) {
   return requestClient.get<MpAccountApi.Account>(`/mp/account/get?id=${id}`);
 }
 
+/** 查询公众号账号列表 */
+export function getSimpleAccountList() {
+  return requestClient.get<MpAccountApi.Account[]>(
+    '/mp/account/list-all-simple',
+  );
+}
+
 /** 新增公众号账号 */
 export function createAccount(data: MpAccountApi.Account) {
   return requestClient.post('/mp/account/create', data);
diff --git a/apps/web-antd/src/api/mp/tag/index.ts b/apps/web-antd/src/api/mp/tag/index.ts
index 3cf677e7d..b1acd0130 100644
--- a/apps/web-antd/src/api/mp/tag/index.ts
+++ b/apps/web-antd/src/api/mp/tag/index.ts
@@ -6,8 +6,9 @@ export namespace MpTagApi {
   /** 标签信息 */
   export interface Tag {
     id?: number;
-    name: string;
     accountId: number;
+    name: string;
+    count?: number;
     createTime?: Date;
   }
 
diff --git a/apps/web-antd/src/views/mp/tag/data.ts b/apps/web-antd/src/views/mp/tag/data.ts
new file mode 100644
index 000000000..ce0a4f9aa
--- /dev/null
+++ b/apps/web-antd/src/views/mp/tag/data.ts
@@ -0,0 +1,82 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+
+import { getSimpleAccountList } from '#/api/mp/account';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '标签名称',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入名称',
+      },
+    },
+  ];
+}
+
+/** 搜索表单配置 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleAccountList,
+        labelField: 'name',
+        valueField: 'id',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeGridPropTypes.Columns {
+  return [
+    {
+      title: '编号',
+      field: 'id',
+    },
+    {
+      title: '标签名称',
+      field: 'name',
+    },
+    {
+      title: '粉丝数',
+      field: 'count',
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 140,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mp/tag/index.vue b/apps/web-antd/src/views/mp/tag/index.vue
index a54db51e9..e5ccef0c7 100644
--- a/apps/web-antd/src/views/mp/tag/index.vue
+++ b/apps/web-antd/src/views/mp/tag/index.vue
@@ -1,31 +1,157 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpTagApi } from '#/api/mp/tag';
 
-import { Button } from 'ant-design-vue';
+import { ref } from 'vue';
 
-import { DocAlert } from '#/components/doc-alert';
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteTag, getTagPage, syncTag } from '#/api/mp/tag';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const accountId = ref(-1);
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建标签 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑标签 */
+function handleEdit(row: MpTagApi.Tag) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除标签 */
+async function handleDelete(row: MpTagApi.Tag) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteTag(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+/** 同步标签 */
+async function handleSync() {
+  const hideLoading = message.loading({
+    content: '是否确认同步标签？',
+    key: 'action_key_msg',
+  });
+  try {
+    await syncTag(accountId.value);
+    message.success({
+      content: '同步标签成功',
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          accountId.value = formValues.accountId;
+          return await getTagPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            accountId: accountId.value,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<MpTagApi.Tag>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert title="公众号标签" url="https://doc.iocoder.cn/mp/tag/" />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/tag/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/tag/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" :account-id="accountId" />
+    <Grid table-title="公众号账号列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['公众号账号']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mp:tag:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: '同步',
+              type: 'primary',
+              icon: 'lucide:refresh-ccw',
+              auth: ['mp:tag:sync'],
+              onClick: handleSync,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['mp:tag:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mp:tag:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/mp/tag/modules/form.vue b/apps/web-antd/src/views/mp/tag/modules/form.vue
new file mode 100644
index 000000000..1c70f95a6
--- /dev/null
+++ b/apps/web-antd/src/views/mp/tag/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { MpTagApi } from '#/api/mp/tag';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createTag, getTag, updateTag } from '#/api/mp/tag';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const props = defineProps<{
+  accountId: number;
+}>();
+
+const emit = defineEmits(['success']);
+
+const formData = ref<MpTagApi.Tag>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['标签'])
+    : $t('ui.actionTitle.create', ['标签']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MpTagApi.Tag;
+    data.accountId = props.accountId;
+    try {
+      await (formData.value?.id ? updateTag(data) : createTag(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<MpTagApi.Tag>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getTag(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[600px]" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>

From f105df045709a897a163bd72104a80e871f958c3 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Fri, 30 May 2025 22:56:26 +0800
Subject: [PATCH 31/53] fix: mp tag

---
 apps/web-antd/src/api/mp/account/index.ts     |  7 ++-
 apps/web-antd/src/views/mp/tag/data.ts        | 19 -------
 apps/web-antd/src/views/mp/tag/index.vue      | 55 ++++++++++++++++---
 .../src/views/mp/tag/modules/form.vue         | 11 +---
 4 files changed, 57 insertions(+), 35 deletions(-)

diff --git a/apps/web-antd/src/api/mp/account/index.ts b/apps/web-antd/src/api/mp/account/index.ts
index 9e7d27712..60833058c 100644
--- a/apps/web-antd/src/api/mp/account/index.ts
+++ b/apps/web-antd/src/api/mp/account/index.ts
@@ -16,6 +16,11 @@ export namespace MpAccountApi {
     remark?: string;
     createTime?: Date;
   }
+
+  export interface AccountSimple {
+    id: number;
+    name: string;
+  }
 }
 
 /** 查询公众号账号列表 */
@@ -35,7 +40,7 @@ export function getAccount(id: number) {
 
 /** 查询公众号账号列表 */
 export function getSimpleAccountList() {
-  return requestClient.get<MpAccountApi.Account[]>(
+  return requestClient.get<MpAccountApi.AccountSimple[]>(
     '/mp/account/list-all-simple',
   );
 }
diff --git a/apps/web-antd/src/views/mp/tag/data.ts b/apps/web-antd/src/views/mp/tag/data.ts
index ce0a4f9aa..bdb857050 100644
--- a/apps/web-antd/src/views/mp/tag/data.ts
+++ b/apps/web-antd/src/views/mp/tag/data.ts
@@ -1,8 +1,6 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeGridPropTypes } from '#/adapter/vxe-table';
 
-import { getSimpleAccountList } from '#/api/mp/account';
-
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -35,23 +33,6 @@ export function useFormSchema(): VbenFormSchema[] {
   ];
 }
 
-/** 搜索表单配置 */
-export function useGridFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'accountId',
-      label: '公众号',
-      component: 'ApiSelect',
-      componentProps: {
-        api: getSimpleAccountList,
-        labelField: 'name',
-        valueField: 'id',
-        allowClear: true,
-      },
-    },
-  ];
-}
-
 /** 表格列配置 */
 export function useGridColumns(): VxeGridPropTypes.Columns {
   return [
diff --git a/apps/web-antd/src/views/mp/tag/index.vue b/apps/web-antd/src/views/mp/tag/index.vue
index e5ccef0c7..b9471c42c 100644
--- a/apps/web-antd/src/views/mp/tag/index.vue
+++ b/apps/web-antd/src/views/mp/tag/index.vue
@@ -2,26 +2,64 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MpTagApi } from '#/api/mp/tag';
 
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
 
 import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSimpleAccountList } from '#/api/mp/account';
 import { deleteTag, getTagPage, syncTag } from '#/api/mp/tag';
 import { $t } from '#/locales';
 
-import { useGridColumns, useGridFormSchema } from './data';
+import { useGridColumns } from './data';
 import Form from './modules/form.vue';
 
+const { push } = useRouter(); // 路由
+const tabs = useTabs();
+
 const accountId = ref(-1);
+const accountOptions = ref<{ label: string; value: number }[]>([]);
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
 });
 
+async function getAccountList() {
+  const res = await getSimpleAccountList();
+  if (res.length > 0) {
+    accountId.value = res[0]?.id as number;
+    accountOptions.value = res.map((item) => ({
+      label: item.name,
+      value: item.id,
+    }));
+    gridApi.setState({
+      formOptions: {
+        schema: [
+          {
+            fieldName: 'accountId',
+            label: '公众号',
+            component: 'Select',
+            componentProps: {
+              options: accountOptions,
+            },
+          },
+        ],
+      },
+    });
+    gridApi.formApi.setValues({
+      accountId: accountId.value,
+    });
+  } else {
+    message.error('未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置');
+    await push({ name: 'MpAccount' });
+    tabs.closeCurrentTab();
+  }
+}
 /** 刷新表格 */
 function onRefresh() {
   gridApi.query();
@@ -29,12 +67,12 @@ function onRefresh() {
 
 /** 创建标签 */
 function handleCreate() {
-  formModalApi.setData(null).open();
+  formModalApi.setData({ accountId: accountId.value }).open();
 }
 
 /** 编辑标签 */
 function handleEdit(row: MpTagApi.Tag) {
-  formModalApi.setData(row).open();
+  formModalApi.setData({ row, accountId: accountId.value }).open();
 }
 
 /** 删除标签 */
@@ -74,7 +112,7 @@ async function handleSync() {
 
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
-    schema: useGridFormSchema(),
+    schema: [],
   },
   gridOptions: {
     columns: useGridColumns(),
@@ -87,7 +125,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
           return await getTagPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
-            accountId: accountId.value,
             ...formValues,
           });
         },
@@ -102,11 +139,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<MpTagApi.Tag>,
 });
+
+onMounted(async () => {
+  await getAccountList();
+});
 </script>
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" :account-id="accountId" />
+    <FormModal @success="onRefresh" />
     <Grid table-title="公众号账号列表">
       <template #toolbar-tools>
         <TableAction
diff --git a/apps/web-antd/src/views/mp/tag/modules/form.vue b/apps/web-antd/src/views/mp/tag/modules/form.vue
index 1c70f95a6..c8c0427f8 100644
--- a/apps/web-antd/src/views/mp/tag/modules/form.vue
+++ b/apps/web-antd/src/views/mp/tag/modules/form.vue
@@ -13,10 +13,6 @@ import { $t } from '#/locales';
 
 import { useFormSchema } from '../data';
 
-const props = defineProps<{
-  accountId: number;
-}>();
-
 const emit = defineEmits(['success']);
 
 const formData = ref<MpTagApi.Tag>();
@@ -48,7 +44,6 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as MpTagApi.Tag;
-    data.accountId = props.accountId;
     try {
       await (formData.value?.id ? updateTag(data) : createTag(data));
       // 关闭并提示
@@ -65,13 +60,13 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    const data = modalApi.getData<MpTagApi.Tag>();
-    if (!data || !data.id) {
+    const data = modalApi.getData<{ accountId: number; row: MpTagApi.Tag }>();
+    if (!data || !data.row || !data.accountId) {
       return;
     }
     modalApi.lock();
     try {
-      formData.value = await getTag(data.id as number);
+      formData.value = await getTag(data.row.id as number);
       // 设置到 values
       await formApi.setValues(formData.value);
     } finally {

From 1c2b247cf4e5a685e37eebd48d06b7bba795b8c8 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sat, 31 May 2025 08:33:34 +0800
Subject: [PATCH 32/53] =?UTF-8?q?feat:=20[BPM=20=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E6=B5=81]=20Simple=20=E6=A8=A1=E5=9E=8B=20-=20=E5=8C=85?=
 =?UTF-8?q?=E5=AE=B9=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/nodes/inclusive-node.vue       | 282 ++++++++++++++++++
 .../components/process-node-tree.vue          |   7 +-
 .../simple-process-design/helpers.ts          |  22 ++
 .../styles/simple-process-designer.scss       |   6 +-
 4 files changed, 313 insertions(+), 4 deletions(-)
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue

diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue
new file mode 100644
index 000000000..c47afcbb1
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue
@@ -0,0 +1,282 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { getCurrentInstance, inject, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
+
+import { Button, Input } from 'ant-design-vue';
+
+import {
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE,
+  NODE_DEFAULT_TEXT,
+  NodeType,
+} from '../../consts';
+import {
+  getDefaultInclusiveConditionNodeName,
+  useTaskStatusClass,
+} from '../../helpers';
+// import ConditionNodeConfig from '../nodes-config/ConditionNodeConfig.vue';
+import ProcessNodeTree from '../process-node-tree.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({
+  name: 'InclusiveNode',
+});
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  findParentNode: [nodeList: SimpleFlowNode[], nodeType: number];
+  recursiveFindParentNode: [
+    nodeList: SimpleFlowNode[],
+    curentNode: SimpleFlowNode,
+    nodeType: number,
+  ];
+  'update:modelValue': [node: SimpleFlowNode | undefined];
+}>();
+const { proxy } = getCurrentInstance() as any;
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+
+const currentNode = ref<SimpleFlowNode>(props.flowNode);
+
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue;
+  },
+);
+
+const showInputs = ref<boolean[]>([]);
+// 失去焦点
+const blurEvent = (index: number) => {
+  showInputs.value[index] = false;
+  const conditionNode = currentNode.value.conditionNodes?.at(
+    index,
+  ) as SimpleFlowNode;
+  conditionNode.name =
+    conditionNode.name ||
+    getDefaultInclusiveConditionNodeName(
+      index,
+      conditionNode.conditionSetting?.defaultFlow,
+    );
+};
+
+// 点击条件名称
+const clickEvent = (index: number) => {
+  showInputs.value[index] = true;
+};
+
+const conditionNodeConfig = (nodeId: string) => {
+  if (readonly) {
+    return;
+  }
+  const conditionNode = proxy.$refs[nodeId][0];
+  conditionNode.open();
+};
+
+// 新增条件
+const addCondition = () => {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    const len = conditionNodes.length;
+    const lastIndex = len - 1;
+    const conditionData: SimpleFlowNode = {
+      id: `Flow_${generateUUID()}`,
+      name: `包容条件${len}`,
+      showText: '',
+      type: NodeType.CONDITION_NODE,
+      childNode: undefined,
+      conditionNodes: [],
+      conditionSetting: {
+        defaultFlow: false,
+        conditionType: ConditionType.RULE,
+        conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+      },
+    };
+    conditionNodes.splice(lastIndex, 0, conditionData);
+  }
+};
+
+// 删除条件
+const deleteCondition = (index: number) => {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    conditionNodes.splice(index, 1);
+    if (conditionNodes.length === 1) {
+      const childNode = currentNode.value.childNode;
+      // 更新此节点为后续孩子节点
+      emits('update:modelValue', childNode);
+    }
+  }
+};
+
+// 移动节点
+const moveNode = (index: number, to: number) => {
+  // -1 ：向左  1： 向右
+  if (
+    currentNode.value.conditionNodes &&
+    currentNode.value.conditionNodes[index]
+  ) {
+    currentNode.value.conditionNodes[index] =
+      currentNode.value.conditionNodes.splice(
+        index + to,
+        1,
+        currentNode.value.conditionNodes[index],
+      )[0] as SimpleFlowNode;
+  }
+};
+// 递归从父节点中查询匹配的节点
+const recursiveFindParentNode = (
+  nodeList: SimpleFlowNode[],
+  node: SimpleFlowNode,
+  nodeType: number,
+) => {
+  if (!node || node.type === NodeType.START_USER_NODE) {
+    return;
+  }
+  if (node.type === nodeType) {
+    nodeList.push(node);
+  }
+  // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点（NodeType.INCLUSIVE_BRANCH_NODE) 继续查找
+  emits('findParentNode', nodeList, nodeType);
+};
+</script>
+<template>
+  <div class="branch-node-wrapper">
+    <div class="branch-node-container">
+      <div
+        v-if="readonly"
+        class="branch-node-readonly"
+        :class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
+      >
+        <span class="iconfont icon-inclusive icon-size inclusive"></span>
+      </div>
+      <Button v-else class="branch-node-add" @click="addCondition" plain>
+        添加条件
+      </Button>
+      <div
+        class="branch-node-item"
+        v-for="(item, index) in currentNode.conditionNodes"
+        :key="index"
+      >
+        <template v-if="index === 0">
+          <div class="branch-line-first-top"></div>
+          <div class="branch-line-first-bottom"></div>
+        </template>
+        <template v-if="index + 1 === currentNode.conditionNodes?.length">
+          <div class="branch-line-last-top"></div>
+          <div class="branch-line-last-bottom"></div>
+        </template>
+        <div class="node-wrapper">
+          <div class="node-container">
+            <div
+              class="node-box"
+              :class="[
+                { 'node-config-error': !item.showText },
+                `${useTaskStatusClass(item.activityStatus)}`,
+              ]"
+            >
+              <div class="branch-node-title-container">
+                <div v-if="!readonly && showInputs[index]">
+                  <Input
+                    type="text"
+                    class="editable-title-input"
+                    @blur="blurEvent(index)"
+                    v-model="item.name"
+                  />
+                </div>
+                <div v-else class="branch-title" @click="clickEvent(index)">
+                  {{ item.name }}
+                </div>
+              </div>
+              <div
+                class="branch-node-content"
+                @click="conditionNodeConfig(item.id)"
+              >
+                <div
+                  class="branch-node-text"
+                  :title="item.showText"
+                  v-if="item.showText"
+                >
+                  {{ item.showText }}
+                </div>
+                <div class="branch-node-text" v-else>
+                  {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
+                </div>
+              </div>
+              <div
+                class="node-toolbar"
+                v-if="
+                  !readonly && index + 1 !== currentNode.conditionNodes?.length
+                "
+              >
+                <div class="toolbar-icon">
+                  <IconifyIcon
+                    color="#0089ff"
+                    icon="ep:circle-close-filled"
+                    :size="18"
+                    @click="deleteCondition(index)"
+                  />
+                </div>
+              </div>
+              <div
+                class="branch-node-move move-node-left"
+                v-if="
+                  !readonly &&
+                  index !== 0 &&
+                  index + 1 !== currentNode.conditionNodes?.length
+                "
+                @click="moveNode(index, -1)"
+              >
+                <IconifyIcon icon="ep:arrow-left" />
+              </div>
+
+              <div
+                class="branch-node-move move-node-right"
+                v-if="
+                  !readonly &&
+                  currentNode.conditionNodes &&
+                  index < currentNode.conditionNodes.length - 2
+                "
+                @click="moveNode(index, 1)"
+              >
+                <IconifyIcon icon="ep:arrow-right" />
+              </div>
+            </div>
+            <NodeHandler
+              v-model:child-node="item.childNode"
+              :current-node="item"
+            />
+          </div>
+        </div>
+        <!-- TODO 条件节点配置 -->
+        <!-- <ConditionNodeConfig
+          :node-index="index"
+          :condition-node="item"
+          :ref="item.id"
+        /> -->
+        <!-- 递归显示子节点  -->
+        <ProcessNodeTree
+          v-if="item && item.childNode"
+          :parent-node="item"
+          v-model:flow-node="item.childNode"
+          @recursive-find-parent-node="recursiveFindParentNode"
+        />
+      </div>
+    </div>
+    <NodeHandler
+      v-if="currentNode"
+      v-model:child-node="currentNode.childNode"
+      :current-node="currentNode"
+    />
+  </div>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
index 5f7bb5905..d8681f3e3 100644
--- a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
@@ -5,6 +5,7 @@ import { NodeType } from '../consts';
 import { useWatchNode } from '../helpers';
 import CopyTaskNode from './nodes/copy-task-node.vue';
 import EndEventNode from './nodes/end-event-node.vue';
+import InclusiveNode from './nodes/inclusive-node.vue';
 import StartUserNode from './nodes/start-user-node.vue';
 import TriggerNode from './nodes/trigger-node.vue';
 import UserTaskNode from './nodes/user-task-node.vue';
@@ -99,12 +100,12 @@ const recursiveFindParentNode = (
     @find:parent-node="findFromParentNode"
   /> -->
   <!-- 包容分支节点 -->
-  <!-- <InclusiveNode
+  <InclusiveNode
     v-if="currentNode && currentNode.type === NodeType.INCLUSIVE_BRANCH_NODE"
     :flow-node="currentNode"
     @update:model-value="handleModelValueUpdate"
-    @find:parent-node="findFromParentNode"
-  /> -->
+    @find-parent-node="findParentNode"
+  />
   <!-- 延迟器节点 -->
   <!-- <DelayTimerNode
     v-if="currentNode && currentNode.type === NodeType.DELAY_TIMER_NODE"
diff --git a/apps/web-antd/src/components/simple-process-design/helpers.ts b/apps/web-antd/src/components/simple-process-design/helpers.ts
index 281572815..9fddcb13c 100644
--- a/apps/web-antd/src/components/simple-process-design/helpers.ts
+++ b/apps/web-antd/src/components/simple-process-design/helpers.ts
@@ -737,3 +737,25 @@ const getOpName = (opCode: string): string | undefined => {
   );
   return opName?.label;
 };
+
+/** 获取条件节点默认的名称 */
+export const getDefaultConditionNodeName = (
+  index: number,
+  defaultFlow: boolean | undefined,
+): string => {
+  if (defaultFlow) {
+    return '其它情况';
+  }
+  return `条件${index + 1}`;
+};
+
+/** 获取包容分支条件节点默认的名称 */
+export const getDefaultInclusiveConditionNodeName = (
+  index: number,
+  defaultFlow: boolean | undefined,
+): string => {
+  if (defaultFlow) {
+    return '其它情况';
+  }
+  return `包容条件${index + 1}`;
+};
diff --git a/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
index 8c3afd37f..28708e598 100644
--- a/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
+++ b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
@@ -334,12 +334,14 @@
         margin-top: 4px;
         line-height: 32px;
         color: #111f2c;
+        background: rgb(0 0 0 / 3%);
         border-radius: 4px;
 
         .branch-node-text {
+          display: -webkit-box;
           overflow: hidden;
           text-overflow: ellipsis;
-          -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+          -webkit-line-clamp: 1; /* 这将限制文本显示为一行 */
           font-size: 12px;
           line-height: 24px;
           word-break: break-all;
@@ -486,6 +488,8 @@
           border-radius: 18px;
           transform: translateX(-50%);
           transform-origin: center center;
+          display: flex;
+          align-items: center;
         }
 
         .branch-node-readonly {

From ce9b6c5b885019857fbcf2e9aa7c16d02601ce5b Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sat, 31 May 2025 20:50:38 +0800
Subject: [PATCH 33/53] =?UTF-8?q?feat:=20[BPM=20=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E6=B5=81]=20Simple=20=E6=A8=A1=E5=9E=8B=20-=20=E6=9D=A1?=
 =?UTF-8?q?=E4=BB=B6=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/nodes/exclusive-node.vue       | 277 ++++++++++++++++++
 .../components/process-node-tree.vue          |   7 +-
 .../styles/simple-process-designer.scss       |   4 +-
 3 files changed, 283 insertions(+), 5 deletions(-)
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue

diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue
new file mode 100644
index 000000000..3ac884ad3
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue
@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { getCurrentInstance, inject, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
+
+import { Button, Input } from 'ant-design-vue';
+
+import {
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE,
+  NODE_DEFAULT_TEXT,
+  NodeType,
+} from '../../consts';
+import { getDefaultConditionNodeName, useTaskStatusClass } from '../../helpers';
+// TODO import ConditionNodeConfig from './nodes-config/condition-node-config.vue';
+import ProcessNodeTree from '../process-node-tree.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'ExclusiveNode' });
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  findParentNode: [nodeList: SimpleFlowNode[], nodeType: number];
+  recursiveFindParentNode: [
+    nodeList: SimpleFlowNode[],
+    curentNode: SimpleFlowNode,
+    nodeType: number,
+  ];
+  'update:modelValue': [node: SimpleFlowNode | undefined];
+}>();
+const { proxy } = getCurrentInstance() as any;
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+const currentNode = ref<SimpleFlowNode>(props.flowNode);
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue;
+  },
+);
+
+const showInputs = ref<boolean[]>([]);
+// 失去焦点
+const blurEvent = (index: number) => {
+  showInputs.value[index] = false;
+  const conditionNode = currentNode.value.conditionNodes?.at(
+    index,
+  ) as SimpleFlowNode;
+  conditionNode.name =
+    conditionNode.name ||
+    getDefaultConditionNodeName(
+      index,
+      conditionNode.conditionSetting?.defaultFlow,
+    );
+};
+
+// 点击条件名称
+const clickEvent = (index: number) => {
+  showInputs.value[index] = true;
+};
+
+const conditionNodeConfig = (nodeId: string) => {
+  if (readonly) {
+    return;
+  }
+  const conditionNode = proxy.$refs[nodeId][0];
+  conditionNode.open();
+};
+
+// 新增条件
+const addCondition = () => {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    const len = conditionNodes.length;
+    const lastIndex = len - 1;
+    const conditionData: SimpleFlowNode = {
+      id: `Flow_${generateUUID()}`,
+      name: `条件${len}`,
+      showText: '',
+      type: NodeType.CONDITION_NODE,
+      childNode: undefined,
+      conditionNodes: [],
+      conditionSetting: {
+        defaultFlow: false,
+        conditionType: ConditionType.RULE,
+        conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+      },
+    };
+    conditionNodes.splice(lastIndex, 0, conditionData);
+  }
+};
+
+// 删除条件
+const deleteCondition = (index: number) => {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    conditionNodes.splice(index, 1);
+    if (conditionNodes.length === 1) {
+      const childNode = currentNode.value.childNode;
+      // 更新此节点为后续孩子节点
+      emits('update:modelValue', childNode);
+    }
+  }
+};
+
+// 移动节点
+const moveNode = (index: number, to: number) => {
+  // -1 ：向左  1： 向右
+  if (
+    currentNode.value.conditionNodes &&
+    currentNode.value.conditionNodes[index]
+  ) {
+    currentNode.value.conditionNodes[index] =
+      currentNode.value.conditionNodes.splice(
+        index + to,
+        1,
+        currentNode.value.conditionNodes[index],
+      )[0] as SimpleFlowNode;
+  }
+};
+// 递归从父节点中查询匹配的节点
+const recursiveFindParentNode = (
+  nodeList: SimpleFlowNode[],
+  node: SimpleFlowNode,
+  nodeType: number,
+) => {
+  if (!node || node.type === NodeType.START_USER_NODE) {
+    return;
+  }
+  if (node.type === nodeType) {
+    nodeList.push(node);
+  }
+  // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点（NodeType.EXCLUSIVE_NODE) 继续查找
+  emits('findParentNode', nodeList, nodeType);
+};
+</script>
+<template>
+  <div class="branch-node-wrapper">
+    <div class="branch-node-container">
+      <div
+        v-if="readonly"
+        class="branch-node-readonly"
+        :class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
+      >
+        <span class="iconfont icon-exclusive icon-size condition"></span>
+      </div>
+      <Button v-else class="branch-node-add" @click="addCondition">
+        添加条件
+      </Button>
+
+      <div
+        class="branch-node-item"
+        v-for="(item, index) in currentNode.conditionNodes"
+        :key="index"
+      >
+        <template v-if="index === 0">
+          <div class="branch-line-first-top"></div>
+          <div class="branch-line-first-bottom"></div>
+        </template>
+        <template v-if="index + 1 === currentNode.conditionNodes?.length">
+          <div class="branch-line-last-top"></div>
+          <div class="branch-line-last-bottom"></div>
+        </template>
+        <div class="node-wrapper">
+          <div class="node-container">
+            <div
+              class="node-box"
+              :class="[
+                { 'node-config-error': !item.showText },
+                `${useTaskStatusClass(item.activityStatus)}`,
+              ]"
+            >
+              <div class="branch-node-title-container">
+                <div v-if="!readonly && showInputs[index]">
+                  <Input
+                    type="text"
+                    class="editable-title-input"
+                    @blur="blurEvent(index)"
+                    v-model="item.name"
+                  />
+                </div>
+                <div v-else class="branch-title" @click="clickEvent(index)">
+                  {{ item.name }}
+                </div>
+                <div class="branch-priority">优先级{{ index + 1 }}</div>
+              </div>
+              <div
+                class="branch-node-content"
+                @click="conditionNodeConfig(item.id)"
+              >
+                <div
+                  class="branch-node-text"
+                  :title="item.showText"
+                  v-if="item.showText"
+                >
+                  {{ item.showText }}
+                </div>
+                <div class="branch-node-text" v-else>
+                  {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
+                </div>
+              </div>
+              <div
+                class="node-toolbar"
+                v-if="
+                  !readonly && index + 1 !== currentNode.conditionNodes?.length
+                "
+              >
+                <div class="toolbar-icon">
+                  <IconifyIcon
+                    color="#0089ff"
+                    icon="ep:circle-close-filled"
+                    :size="18"
+                    @click="deleteCondition(index)"
+                  />
+                </div>
+              </div>
+              <div
+                class="branch-node-move move-node-left"
+                v-if="
+                  !readonly &&
+                  index !== 0 &&
+                  index + 1 !== currentNode.conditionNodes?.length
+                "
+                @click="moveNode(index, -1)"
+              >
+                <IconifyIcon icon="ep:arrow-left" />
+              </div>
+
+              <div
+                class="branch-node-move move-node-right"
+                v-if="
+                  !readonly &&
+                  currentNode.conditionNodes &&
+                  index < currentNode.conditionNodes.length - 2
+                "
+                @click="moveNode(index, 1)"
+              >
+                <IconifyIcon icon="ep:arrow-right" />
+              </div>
+            </div>
+            <NodeHandler
+              v-model:child-node="item.childNode"
+              :current-node="item"
+            />
+          </div>
+        </div>
+        <!-- TODO 条件节点配置-->
+        <!-- <ConditionNodeConfig
+          :node-index="index"
+          :condition-node="item"
+          :ref="item.id"
+        /> -->
+        <!-- 递归显示子节点  -->
+        <ProcessNodeTree
+          v-if="item && item.childNode"
+          :parent-node="item"
+          v-model:flow-node="item.childNode"
+          @recursive-find-parent-node="recursiveFindParentNode"
+        />
+      </div>
+    </div>
+    <NodeHandler
+      v-if="currentNode"
+      v-model:child-node="currentNode.childNode"
+      :current-node="currentNode"
+    />
+  </div>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
index d8681f3e3..fadf8b3ad 100644
--- a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
@@ -5,6 +5,7 @@ import { NodeType } from '../consts';
 import { useWatchNode } from '../helpers';
 import CopyTaskNode from './nodes/copy-task-node.vue';
 import EndEventNode from './nodes/end-event-node.vue';
+import ExclusiveNode from './nodes/exclusive-node.vue';
 import InclusiveNode from './nodes/inclusive-node.vue';
 import StartUserNode from './nodes/start-user-node.vue';
 import TriggerNode from './nodes/trigger-node.vue';
@@ -86,12 +87,12 @@ const recursiveFindParentNode = (
     @update:flow-node="handleModelValueUpdate"
   />
   <!-- 条件节点 -->
-  <!-- <ExclusiveNode
+  <ExclusiveNode
     v-if="currentNode && currentNode.type === NodeType.CONDITION_BRANCH_NODE"
     :flow-node="currentNode"
     @update:model-value="handleModelValueUpdate"
-    @find:parent-node="findFromParentNode"
-  /> -->
+    @find-parent-node="findParentNode"
+  />
   <!-- 并行节点 -->
   <!-- <ParallelNode
     v-if="currentNode && currentNode.type === NodeType.PARALLEL_BRANCH_NODE"
diff --git a/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
index 28708e598..b4ff3ab28 100644
--- a/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
+++ b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
@@ -480,6 +480,8 @@
           top: -18px;
           left: 50%;
           z-index: 1;
+          display: flex;
+          align-items: center;
           height: 36px;
           padding: 0 10px;
           font-size: 12px;
@@ -488,8 +490,6 @@
           border-radius: 18px;
           transform: translateX(-50%);
           transform-origin: center center;
-          display: flex;
-          align-items: center;
         }
 
         .branch-node-readonly {

From 4cd9b3c6d8e708be58037d0a97e3234e978acc63 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sat, 31 May 2025 22:05:15 +0800
Subject: [PATCH 34/53] =?UTF-8?q?feat:=20[BPM=20=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E6=B5=81]=20Simple=20=E6=A8=A1=E5=9E=8B=20-=20=E6=9D=A1?=
 =?UTF-8?q?=E4=BB=B6=E8=8A=82=E7=82=B9=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nodes-config/condition-node-config.vue    | 196 ++++++++++++++++++
 .../components/nodes/exclusive-node.vue       |  10 +-
 .../components/nodes/inclusive-node.vue       |  10 +-
 3 files changed, 206 insertions(+), 10 deletions(-)
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue

diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue
new file mode 100644
index 000000000..19aba8a8c
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue
@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { ref, watch } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import { Button, Input } from 'ant-design-vue';
+
+import { ConditionType } from '../../consts';
+import {
+  getConditionShowText,
+  getDefaultConditionNodeName,
+  useFormFieldsAndStartUser,
+} from '../../helpers';
+import Condition from './modules/condition.vue';
+
+defineOptions({
+  name: 'ConditionNodeConfig',
+});
+const props = defineProps({
+  conditionNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+  nodeIndex: {
+    type: Number,
+    required: true,
+  },
+});
+
+const currentNode = ref<SimpleFlowNode>(props.conditionNode);
+const condition = ref<any>({
+  conditionType: ConditionType.RULE, // 设置默认值
+  conditionExpression: '',
+  conditionGroups: {
+    and: true,
+    conditions: [
+      {
+        and: true,
+        rules: [
+          {
+            opCode: '==',
+            leftSide: '',
+            rightSide: '',
+          },
+        ],
+      },
+    ],
+  },
+});
+
+// 显示名称输入框
+const showInput = ref(false);
+const conditionRef = ref();
+const fieldOptions = useFormFieldsAndStartUser(); // 流程表单字段和发起人字段
+
+/** 保存配置 */
+const saveConfig = async () => {
+  if (!currentNode.value.conditionSetting?.defaultFlow) {
+    // 校验表单
+    const valid = await conditionRef.value.validate();
+    if (!valid) return false;
+    const showText = getConditionShowText(
+      condition.value?.conditionType,
+      condition.value?.conditionExpression,
+      condition.value.conditionGroups,
+      fieldOptions,
+    );
+    if (!showText) {
+      return false;
+    }
+    currentNode.value.showText = showText;
+    // 使用 cloneDeep 进行深拷贝
+    currentNode.value.conditionSetting = cloneDeep({
+      ...currentNode.value.conditionSetting,
+      conditionType: condition.value?.conditionType,
+      conditionExpression:
+        condition.value?.conditionType === ConditionType.EXPRESSION
+          ? condition.value?.conditionExpression
+          : undefined,
+      conditionGroups:
+        condition.value?.conditionType === ConditionType.RULE
+          ? condition.value?.conditionGroups
+          : undefined,
+    });
+  }
+  drawerApi.close();
+  return true;
+};
+
+// 使用 useVbenDrawer 替代传统 Drawer
+const [Drawer, drawerApi] = useVbenDrawer({
+  title: currentNode.value.name,
+  class: 'w-[588px]',
+  onCancel: () => {
+    drawerApi.close();
+  },
+  onConfirm: saveConfig,
+});
+
+const open = () => {
+  // 使用三元表达式代替 if-else，解决 linter 警告
+  condition.value = currentNode.value.conditionSetting
+    ? cloneDeep(currentNode.value.conditionSetting)
+    : {
+        conditionType: ConditionType.RULE,
+        conditionExpression: '',
+        conditionGroups: {
+          and: true,
+          conditions: [
+            {
+              and: true,
+              rules: [
+                {
+                  opCode: '==',
+                  leftSide: '',
+                  rightSide: '',
+                },
+              ],
+            },
+          ],
+        },
+      };
+
+  drawerApi.open();
+};
+
+watch(
+  () => props.conditionNode,
+  (newValue) => {
+    currentNode.value = newValue;
+  },
+);
+
+const clickIcon = () => {
+  showInput.value = true;
+};
+// 输入框失去焦点
+const blurEvent = () => {
+  showInput.value = false;
+  currentNode.value.name =
+    currentNode.value.name ||
+    getDefaultConditionNodeName(
+      props.nodeIndex,
+      currentNode.value?.conditionSetting?.defaultFlow,
+    );
+};
+
+defineExpose({ open }); // 提供 open 方法，用于打开弹窗
+</script>
+<template>
+  <Drawer>
+    <template #title>
+      <div class="flex items-center">
+        <Input
+          v-if="showInput"
+          type="text"
+          class="mr-2 w-48"
+          @blur="blurEvent()"
+          v-model:value="currentNode.name"
+          :placeholder="currentNode.name"
+        />
+        <div
+          v-else
+          class="flex cursor-pointer items-center"
+          @click="clickIcon()"
+        >
+          {{ currentNode.name }}
+          <IconifyIcon class="ml-1" icon="ep:edit-pen" />
+        </div>
+      </div>
+    </template>
+
+    <div>
+      <div
+        class="mb-3 text-base"
+        v-if="currentNode.conditionSetting?.defaultFlow"
+      >
+        未满足其它条件时，将进入此分支（该分支不可编辑和删除）
+      </div>
+      <div v-else>
+        <Condition ref="conditionRef" v-model:model-value="condition" />
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex justify-end space-x-2">
+        <Button type="primary" @click="saveConfig">确 定</Button>
+        <Button @click="drawerApi.close">取 消</Button>
+      </div>
+    </template>
+  </Drawer>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue
index 3ac884ad3..fb00d2e71 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue
@@ -15,7 +15,7 @@ import {
   NodeType,
 } from '../../consts';
 import { getDefaultConditionNodeName, useTaskStatusClass } from '../../helpers';
-// TODO import ConditionNodeConfig from './nodes-config/condition-node-config.vue';
+import ConditionNodeConfig from '../nodes-config/condition-node-config.vue';
 import ProcessNodeTree from '../process-node-tree.vue';
 import NodeHandler from './node-handler.vue';
 
@@ -155,7 +155,7 @@ const recursiveFindParentNode = (
       <Button v-else class="branch-node-add" @click="addCondition">
         添加条件
       </Button>
-
+      <!-- 排他网关节点下面可以多个分支，每个分支第一个节点是条件节点 NodeType.CONDITION_NODE -->
       <div
         class="branch-node-item"
         v-for="(item, index) in currentNode.conditionNodes"
@@ -252,12 +252,12 @@ const recursiveFindParentNode = (
             />
           </div>
         </div>
-        <!-- TODO 条件节点配置-->
-        <!-- <ConditionNodeConfig
+        <!-- 条件节点配置 -->
+        <ConditionNodeConfig
           :node-index="index"
           :condition-node="item"
           :ref="item.id"
-        /> -->
+        />
         <!-- 递归显示子节点  -->
         <ProcessNodeTree
           v-if="item && item.childNode"
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue
index c47afcbb1..8d613c8ca 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue
@@ -18,7 +18,7 @@ import {
   getDefaultInclusiveConditionNodeName,
   useTaskStatusClass,
 } from '../../helpers';
-// import ConditionNodeConfig from '../nodes-config/ConditionNodeConfig.vue';
+import ConditionNodeConfig from '../nodes-config/condition-node-config.vue';
 import ProcessNodeTree from '../process-node-tree.vue';
 import NodeHandler from './node-handler.vue';
 
@@ -159,7 +159,7 @@ const recursiveFindParentNode = (
       >
         <span class="iconfont icon-inclusive icon-size inclusive"></span>
       </div>
-      <Button v-else class="branch-node-add" @click="addCondition" plain>
+      <Button v-else class="branch-node-add" @click="addCondition">
         添加条件
       </Button>
       <div
@@ -257,12 +257,12 @@ const recursiveFindParentNode = (
             />
           </div>
         </div>
-        <!-- TODO 条件节点配置 -->
-        <!-- <ConditionNodeConfig
+        <!-- 条件节点配置 -->
+        <ConditionNodeConfig
           :node-index="index"
           :condition-node="item"
           :ref="item.id"
-        /> -->
+        />
         <!-- 递归显示子节点  -->
         <ProcessNodeTree
           v-if="item && item.childNode"

From 7d7ee36ef0a746c0366a04f6fcc4bd16003e4fff Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 1 Jun 2025 20:39:42 +0800
Subject: [PATCH 35/53] =?UTF-8?q?feat:=20[BPM=20=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E6=B5=81]=20Simple=20=E6=A8=A1=E5=9E=8B=20-=20=E5=B9=B6?=
 =?UTF-8?q?=E8=A1=8C=E5=88=86=E6=94=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/nodes/parallel-node.vue        | 201 ++++++++++++++++++
 .../components/process-node-tree.vue          |   7 +-
 2 files changed, 205 insertions(+), 3 deletions(-)
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes/parallel-node.vue

diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/parallel-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/parallel-node.vue
new file mode 100644
index 000000000..f2424ca92
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/parallel-node.vue
@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { buildShortUUID as generateUUID } from '@vben/utils';
+
+import { Button, Input } from 'ant-design-vue';
+
+import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { useTaskStatusClass } from '../../helpers';
+import ProcessNodeTree from '../process-node-tree.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'ParallelNode' });
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  findParnetNode: [nodeList: SimpleFlowNode[], nodeType: number];
+  recursiveFindParentNode: [
+    nodeList: SimpleFlowNode[],
+    curentNode: SimpleFlowNode,
+    nodeType: number,
+  ];
+  'update:modelValue': [node: SimpleFlowNode | undefined];
+}>();
+const currentNode = ref<SimpleFlowNode>(props.flowNode);
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue;
+  },
+);
+
+const showInputs = ref<boolean[]>([]);
+// 失去焦点
+const blurEvent = (index: number) => {
+  showInputs.value[index] = false;
+  const conditionNode = currentNode.value.conditionNodes?.at(
+    index,
+  ) as SimpleFlowNode;
+  conditionNode.name = conditionNode.name || `并行${index + 1}`;
+};
+
+// 点击条件名称
+const clickEvent = (index: number) => {
+  showInputs.value[index] = true;
+};
+
+// 新增条件
+const addCondition = () => {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    const len = conditionNodes.length;
+    const lastIndex = len - 1;
+    const conditionData: SimpleFlowNode = {
+      id: `Flow_${generateUUID()}`,
+      name: `并行${len}`,
+      showText: '无需配置条件同时执行',
+      type: NodeType.CONDITION_NODE,
+      childNode: undefined,
+      conditionNodes: [],
+    };
+    conditionNodes.splice(lastIndex, 0, conditionData);
+  }
+};
+
+// 删除条件
+const deleteCondition = (index: number) => {
+  const conditionNodes = currentNode.value.conditionNodes;
+  if (conditionNodes) {
+    conditionNodes.splice(index, 1);
+    if (conditionNodes.length === 1) {
+      const childNode = currentNode.value.childNode;
+      // 更新此节点为后续孩子节点
+      emits('update:modelValue', childNode);
+    }
+  }
+};
+
+// 递归从父节点中查询匹配的节点
+const recursiveFindParentNode = (
+  nodeList: SimpleFlowNode[],
+  node: SimpleFlowNode,
+  nodeType: number,
+) => {
+  if (!node || node.type === NodeType.START_USER_NODE) {
+    return;
+  }
+  if (node.type === nodeType) {
+    nodeList.push(node);
+  }
+  // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点并行节点（NodeType.PARALLEL_NODE) 继续查找
+  emits('findParnetNode', nodeList, nodeType);
+};
+</script>
+<template>
+  <div class="branch-node-wrapper">
+    <div class="branch-node-container">
+      <div
+        v-if="readonly"
+        class="branch-node-readonly"
+        :class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
+      >
+        <span class="iconfont icon-parallel icon-size parallel"></span>
+      </div>
+      <Button
+        v-else
+        class="branch-node-add"
+        color="#626aef"
+        @click="addCondition"
+        plain
+      >
+        添加分支
+      </Button>
+      <div
+        class="branch-node-item"
+        v-for="(item, index) in currentNode.conditionNodes"
+        :key="index"
+      >
+        <template v-if="index === 0">
+          <div class="branch-line-first-top"></div>
+          <div class="branch-line-first-bottom"></div>
+        </template>
+        <template v-if="index + 1 === currentNode.conditionNodes?.length">
+          <div class="branch-line-last-top"></div>
+          <div class="branch-line-last-bottom"></div>
+        </template>
+        <div class="node-wrapper">
+          <div class="node-container">
+            <div
+              class="node-box"
+              :class="`${useTaskStatusClass(item.activityStatus)}`"
+            >
+              <div class="branch-node-title-container">
+                <div v-if="showInputs[index]">
+                  <Input
+                    type="text"
+                    class="input-max-width editable-title-input"
+                    @blur="blurEvent(index)"
+                    v-model="item.name"
+                  />
+                </div>
+                <div v-else class="branch-title" @click="clickEvent(index)">
+                  {{ item.name }}
+                </div>
+                <div class="branch-priority">无优先级</div>
+              </div>
+              <div class="branch-node-content">
+                <div
+                  class="branch-node-text"
+                  :title="item.showText"
+                  v-if="item.showText"
+                >
+                  {{ item.showText }}
+                </div>
+                <div class="branch-node-text" v-else>
+                  {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
+                </div>
+              </div>
+              <div v-if="!readonly" class="node-toolbar">
+                <div class="toolbar-icon">
+                  <IconifyIcon
+                    color="#0089ff"
+                    icon="ep:circle-close-filled"
+                    @click="deleteCondition(index)"
+                  />
+                </div>
+              </div>
+            </div>
+            <NodeHandler
+              v-model:child-node="item.childNode"
+              :current-node="item"
+            />
+          </div>
+        </div>
+        <!-- 递归显示子节点  -->
+        <ProcessNodeTree
+          v-if="item && item.childNode"
+          :parent-node="item"
+          v-model:flow-node="item.childNode"
+          @recursive-find-parent-node="recursiveFindParentNode"
+        />
+      </div>
+    </div>
+    <NodeHandler
+      v-if="currentNode"
+      v-model:child-node="currentNode.childNode"
+      :current-node="currentNode"
+    />
+  </div>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
index fadf8b3ad..bb6286f63 100644
--- a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
@@ -7,6 +7,7 @@ import CopyTaskNode from './nodes/copy-task-node.vue';
 import EndEventNode from './nodes/end-event-node.vue';
 import ExclusiveNode from './nodes/exclusive-node.vue';
 import InclusiveNode from './nodes/inclusive-node.vue';
+import ParallelNode from './nodes/parallel-node.vue';
 import StartUserNode from './nodes/start-user-node.vue';
 import TriggerNode from './nodes/trigger-node.vue';
 import UserTaskNode from './nodes/user-task-node.vue';
@@ -94,12 +95,12 @@ const recursiveFindParentNode = (
     @find-parent-node="findParentNode"
   />
   <!-- 并行节点 -->
-  <!-- <ParallelNode
+  <ParallelNode
     v-if="currentNode && currentNode.type === NodeType.PARALLEL_BRANCH_NODE"
     :flow-node="currentNode"
     @update:model-value="handleModelValueUpdate"
-    @find:parent-node="findFromParentNode"
-  /> -->
+    @find-parent-node="findParentNode"
+  />
   <!-- 包容分支节点 -->
   <InclusiveNode
     v-if="currentNode && currentNode.type === NodeType.INCLUSIVE_BRANCH_NODE"

From 059df5b4cac567685ba08f21b7893a097ca82847 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 1 Jun 2025 22:19:18 +0800
Subject: [PATCH 36/53] =?UTF-8?q?feat:=20[BPM=20=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E6=B5=81]=20Simple=20=E6=A8=A1=E5=9E=8B=20-=20=E5=BB=B6?=
 =?UTF-8?q?=E8=BF=9F=E5=99=A8=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nodes-config/delay-timer-node-config.vue  | 256 ++++++++++++++++++
 .../components/nodes/delay-timer-node.vue     | 115 ++++++++
 .../components/process-node-tree.vue          |   5 +-
 3 files changed, 374 insertions(+), 2 deletions(-)
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue

diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
new file mode 100644
index 000000000..fdb8e3a6c
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
@@ -0,0 +1,256 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+
+import type { SimpleFlowNode } from '../../consts';
+
+import { reactive, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Button,
+  Col,
+  DatePicker,
+  Form,
+  FormItem,
+  Input,
+  InputNumber,
+  Radio,
+  RadioGroup,
+  Row,
+  Select,
+  SelectOption,
+} from 'ant-design-vue';
+
+import {
+  DELAY_TYPE,
+  DelayTypeEnum,
+  NodeType,
+  TIME_UNIT_TYPES,
+  TimeUnitType,
+} from '../../consts';
+import { useNodeName, useWatchNode } from '../../helpers';
+import { convertTimeUnit } from './utils';
+
+defineOptions({ name: 'DelayTimerNodeConfig' });
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+
+// 当前节点
+const currentNode = useWatchNode(props);
+// 节点名称
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+  NodeType.DELAY_TIMER_NODE,
+);
+// 抄送人表单配置
+const formRef = ref(); // 表单 Ref
+// 表单校验规则
+const formRules: Record<string, Rule[]> = reactive({
+  delayType: [
+    { required: true, message: '延迟时间不能为空', trigger: 'change' },
+  ],
+  timeDuration: [
+    { required: true, message: '延迟时间不能为空', trigger: 'change' },
+  ],
+  dateTime: [
+    { required: true, message: '延迟时间不能为空', trigger: 'change' },
+  ],
+});
+// 配置表单数据
+const configForm = ref({
+  delayType: DelayTypeEnum.FIXED_TIME_DURATION,
+  timeDuration: 1,
+  timeUnit: TimeUnitType.HOUR,
+  dateTime: '',
+});
+
+// 获取显示文本
+const getShowText = (): string => {
+  let showText = '';
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
+    showText = `延迟${configForm.value.timeDuration}${TIME_UNIT_TYPES?.find((item) => item.value === configForm.value.timeUnit)?.label}`;
+  }
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
+    showText = `延迟至${configForm.value.dateTime.replace('T', ' ')}`;
+  }
+  return showText;
+};
+
+// 获取ISO时间格式
+const getIsoTimeDuration = () => {
+  let strTimeDuration = 'PT';
+  if (configForm.value.timeUnit === TimeUnitType.MINUTE) {
+    strTimeDuration += `${configForm.value.timeDuration}M`;
+  }
+  if (configForm.value.timeUnit === TimeUnitType.HOUR) {
+    strTimeDuration += `${configForm.value.timeDuration}H`;
+  }
+  if (configForm.value.timeUnit === TimeUnitType.DAY) {
+    strTimeDuration += `${configForm.value.timeDuration}D`;
+  }
+  return strTimeDuration;
+};
+
+// 保存配置
+const saveConfig = async () => {
+  if (!formRef.value) return false;
+  const valid = await formRef.value.validate();
+  if (!valid) return false;
+  const showText = getShowText();
+  if (!showText) return false;
+  currentNode.value.name = nodeName.value!;
+  currentNode.value.showText = showText;
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
+    currentNode.value.delaySetting = {
+      delayType: configForm.value.delayType,
+      delayTime: getIsoTimeDuration(),
+    };
+  }
+  if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
+    currentNode.value.delaySetting = {
+      delayType: configForm.value.delayType,
+      delayTime: configForm.value.dateTime,
+    };
+  }
+  drawerApi.close();
+  return true;
+};
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  title: nodeName.value,
+  onCancel: () => {
+    drawerApi.close();
+  },
+  onConfirm: saveConfig,
+});
+
+// 显示延迟器节点配置，由父组件调用
+const openDrawer = (node: SimpleFlowNode) => {
+  nodeName.value = node.name;
+  if (node.delaySetting) {
+    configForm.value.delayType = node.delaySetting.delayType;
+    // 固定时长
+    if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
+      const strTimeDuration = node.delaySetting.delayTime;
+      const parseTime = strTimeDuration.slice(2, -1);
+      const parseTimeUnit = strTimeDuration.slice(-1);
+      configForm.value.timeDuration = Number.parseInt(parseTime);
+      configForm.value.timeUnit = convertTimeUnit(parseTimeUnit);
+    }
+    // 固定日期时间
+    if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
+      configForm.value.dateTime = node.delaySetting.delayTime;
+    }
+  }
+  drawerApi.open();
+};
+
+defineExpose({ openDrawer }); // 暴露方法给父组件
+</script>
+<template>
+  <Drawer class="w-[480px]">
+    <template #title>
+      <div class="flex items-center">
+        <Input
+          v-if="showInput"
+          type="text"
+          class="mr-2 w-48"
+          @blur="blurEvent()"
+          v-model:value="nodeName"
+          :placeholder="nodeName"
+        />
+        <div
+          v-else
+          class="flex cursor-pointer items-center"
+          @click="clickIcon()"
+        >
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="ep:edit-pen" :size="16" />
+        </div>
+      </div>
+    </template>
+
+    <div>
+      <Form
+        ref="formRef"
+        :model="configForm"
+        :rules="formRules"
+        :label-col="{ span: 24 }"
+        :wrapper-col="{ span: 24 }"
+      >
+        <FormItem label="延迟时间" name="delayType">
+          <RadioGroup v-model:value="configForm.delayType">
+            <Radio
+              v-for="item in DELAY_TYPE"
+              :key="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </Radio>
+          </RadioGroup>
+        </FormItem>
+        <FormItem
+          v-if="configForm.delayType === DelayTypeEnum.FIXED_TIME_DURATION"
+        >
+          <Row :gutter="8">
+            <Col>
+              <FormItem name="timeDuration">
+                <InputNumber
+                  class="w-28"
+                  v-model:value="configForm.timeDuration"
+                  :min="1"
+                />
+              </FormItem>
+            </Col>
+            <Col>
+              <Select v-model:value="configForm.timeUnit" class="w-28">
+                <SelectOption
+                  v-for="item in TIME_UNIT_TYPES"
+                  :key="item.value"
+                  :value="item.value"
+                >
+                  {{ item.label }}
+                </SelectOption>
+              </Select>
+            </Col>
+            <Col>
+              <span class="inline-flex h-8 items-center">后进入下一节点</span>
+            </Col>
+          </Row>
+        </FormItem>
+        <FormItem
+          v-if="configForm.delayType === DelayTypeEnum.FIXED_DATE_TIME"
+          name="dateTime"
+        >
+          <Row :gutter="8">
+            <Col>
+              <DatePicker
+                class="mr-2"
+                v-model:value="configForm.dateTime"
+                show-time
+                placeholder="请选择日期和时间"
+                value-format="YYYY-MM-DDTHH:mm:ss"
+              />
+            </Col>
+            <Col>
+              <span class="inline-flex h-8 items-center">后进入下一节点</span>
+            </Col>
+          </Row>
+        </FormItem>
+      </Form>
+    </div>
+
+    <template #footer>
+      <div class="flex justify-end space-x-2">
+        <Button type="primary" @click="saveConfig">确 定</Button>
+        <Button @click="drawerApi.close">取 消</Button>
+      </div>
+    </template>
+  </Drawer>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue
new file mode 100644
index 000000000..59b887a4b
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input } from 'ant-design-vue';
+
+import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import DelayTimerNodeConfig from '../nodes-config/delay-timer-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'DelayTimerNode' });
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+// 定义事件，更新父组件。
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+// 监控节点的变化
+const currentNode = useWatchNode(props);
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(
+  currentNode,
+  NodeType.DELAY_TIMER_NODE,
+);
+
+const nodeSetting = ref();
+// 打开节点配置
+const openNodeConfig = () => {
+  if (readonly) {
+    return;
+  }
+  nodeSetting.value.openDrawer(currentNode.value);
+};
+
+// 删除节点。更新当前节点为孩子节点
+const deleteNode = () => {
+  emits('update:flowNode', currentNode.value.childNode);
+};
+</script>
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`,
+        ]"
+      >
+        <div class="node-title-container">
+          <div class="node-title-icon delay-node">
+            <span class="iconfont icon-delay"></span>
+          </div>
+          <Input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.DELAY_TIMER_NODE) }}
+          </div>
+          <IconifyIcon v-if="!readonly" icon="ep:arrow-right-bold" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="ep:circle-close-filled"
+              :size="18"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <DelayTimerNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
index bb6286f63..b139aa3b1 100644
--- a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
@@ -4,6 +4,7 @@ import type { SimpleFlowNode } from '../consts';
 import { NodeType } from '../consts';
 import { useWatchNode } from '../helpers';
 import CopyTaskNode from './nodes/copy-task-node.vue';
+import DelayTimerNode from './nodes/delay-timer-node.vue';
 import EndEventNode from './nodes/end-event-node.vue';
 import ExclusiveNode from './nodes/exclusive-node.vue';
 import InclusiveNode from './nodes/inclusive-node.vue';
@@ -109,11 +110,11 @@ const recursiveFindParentNode = (
     @find-parent-node="findParentNode"
   />
   <!-- 延迟器节点 -->
-  <!-- <DelayTimerNode
+  <DelayTimerNode
     v-if="currentNode && currentNode.type === NodeType.DELAY_TIMER_NODE"
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
-  /> -->
+  />
   <!-- 路由分支节点 -->
   <!-- <RouterNode
     v-if="currentNode && currentNode.type === NodeType.ROUTER_BRANCH_NODE"

From 78c3c9da6ffc98d543883b0c3001d86a2422dcb1 Mon Sep 17 00:00:00 2001
From: wyc001122 <498040880@qq.com>
Date: Mon, 2 Jun 2025 08:05:23 +0800
Subject: [PATCH 37/53] =?UTF-8?q?docs(settings):=20=E5=AE=8C=E5=96=84'?=
 =?UTF-8?q?=E7=94=9F=E4=BA=A7=E7=8E=AF=E5=A2=83=E5=8A=A8=E6=80=81=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE'=E6=AD=A5=E9=AA=A4=20(#6297)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/src/en/guide/essentials/settings.md | 23 ++++++++++++++++++++++-
 docs/src/guide/essentials/settings.md    | 23 ++++++++++++++++++++++-
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/docs/src/en/guide/essentials/settings.md b/docs/src/en/guide/essentials/settings.md
index e5aa71a83..59a6c5c01 100644
--- a/docs/src/en/guide/essentials/settings.md
+++ b/docs/src/en/guide/essentials/settings.md
@@ -21,7 +21,7 @@ The rules are consistent with [Vite Env Variables and Modes](https://vitejs.dev/
   console.log(import.meta.env.VITE_PROT);
   ```
 
-- Variables starting with `VITE_GLOB_*` will be added to the `_app.config.js` configuration file during packaging. :::
+- Variables starting with `VITE_GLOB_*` will be added to the `_app.config.js` configuration file during packaging.
 
 :::
 
@@ -138,6 +138,27 @@ To add a new dynamically modifiable configuration item, simply follow the steps
   }
   ```
 
+- In `packages/effects/hooks/src/use-app-config.ts`, add the corresponding configuration item, such as:
+
+  ```ts
+  export function useAppConfig(
+    env: Record<string, any>,
+    isProduction: boolean,
+  ): ApplicationConfig {
+    // In production environment, directly use the window._VBEN_ADMIN_PRO_APP_CONF_ global variable
+    const config = isProduction
+      ? window._VBEN_ADMIN_PRO_APP_CONF_
+      : (env as VbenAdminProAppConfigRaw);
+
+    const { VITE_GLOB_API_URL, VITE_GLOB_OTHER_API_URL } = config; // [!code ++]
+
+    return {
+      apiURL: VITE_GLOB_API_URL,
+      otherApiURL: VITE_GLOB_OTHER_API_URL, // [!code ++]
+    };
+  }
+  ```
+
 At this point, you can use the `useAppConfig` method within the project to access the newly added configuration item.
 
 ```ts
diff --git a/docs/src/guide/essentials/settings.md b/docs/src/guide/essentials/settings.md
index cca572d86..9b47c04d3 100644
--- a/docs/src/guide/essentials/settings.md
+++ b/docs/src/guide/essentials/settings.md
@@ -21,7 +21,7 @@
   console.log(import.meta.env.VITE_PROT);
   ```
 
-- 以 `VITE_GLOB_*` 开头的的变量，在打包的时候，会被加入 `_app.config.js`配置文件当中. :::
+- 以 `VITE_GLOB_*` 开头的的变量，在打包的时候，会被加入 `_app.config.js`配置文件当中.
 
 :::
 
@@ -137,6 +137,27 @@ const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
   }
   ```
 
+- 在 `packages/effects/hooks/src/use-app-config.ts` 中，新增对应的配置项，如：
+
+  ```ts
+  export function useAppConfig(
+    env: Record<string, any>,
+    isProduction: boolean,
+  ): ApplicationConfig {
+    // 生产环境下，直接使用 window._VBEN_ADMIN_PRO_APP_CONF_ 全局变量
+    const config = isProduction
+      ? window._VBEN_ADMIN_PRO_APP_CONF_
+      : (env as VbenAdminProAppConfigRaw);
+
+    const { VITE_GLOB_API_URL, VITE_GLOB_OTHER_API_URL } = config; // [!code ++]
+
+    return {
+      apiURL: VITE_GLOB_API_URL,
+      otherApiURL: VITE_GLOB_OTHER_API_URL, // [!code ++]
+    };
+  }
+  ```
+
 到这里，就可以在项目内使用 `useAppConfig`方法获取到新增的配置项了。
 
 ```ts

From 76d106e4742d6f1f260988285711be9d32390811 Mon Sep 17 00:00:00 2001
From: zhang <zwtvip@qq.com>
Date: Mon, 2 Jun 2025 08:07:06 +0800
Subject: [PATCH 38/53] =?UTF-8?q?fix:=20=20When=20defaultHomePage=20is=20i?=
 =?UTF-8?q?nconsistent=20with=20user.homePath,=20the=20pa=E2=80=A6=20(#629?=
 =?UTF-8?q?9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix:  When defaultHomePage is inconsistent with user.homePath, the page refresh route jump will be abnormal

* fix:  When defaultHomePage is inconsistent with user.homePath, the page refresh route jump will be abnormal
---
 playground/src/router/guard.ts | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/playground/src/router/guard.ts b/playground/src/router/guard.ts
index 3bbe8dcae..514bd2eb6 100644
--- a/playground/src/router/guard.ts
+++ b/playground/src/router/guard.ts
@@ -105,11 +105,16 @@ function setupAccessGuard(router: Router) {
     accessStore.setAccessMenus(accessibleMenus);
     accessStore.setAccessRoutes(accessibleRoutes);
     accessStore.setIsAccessChecked(true);
-    const redirectPath = (from.query.redirect ??
-      (to.path === preferences.app.defaultHomePath
-        ? userInfo.homePath || preferences.app.defaultHomePath
-        : to.fullPath)) as string;
-
+    let redirectPath: string;
+    if (from.query.redirect) {
+      redirectPath = from.query.redirect as string;
+    } else if (to.path === preferences.app.defaultHomePath) {
+      redirectPath = preferences.app.defaultHomePath;
+    } else if (userInfo.homePath && to.path === userInfo.homePath) {
+      redirectPath = userInfo.homePath;
+    } else {
+      redirectPath = to.fullPath;
+    }
     return {
       ...router.resolve(decodeURIComponent(redirectPath)),
       replace: true,

From 470fd43b4994e8fc4c3cc51b22b859fd430a916e Mon Sep 17 00:00:00 2001
From: wyc001122 <498040880@qq.com>
Date: Mon, 2 Jun 2025 08:16:26 +0800
Subject: [PATCH 39/53] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8useVbenVxeGrid=E9=85=8D=E7=BD=AEhasEmptyText=E3=80=81h?=
 =?UTF-8?q?asEmptyRender=E4=B8=8D=E7=94=9F=E6=95=88=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=20(#6310)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../effects/plugins/src/vxe-table/use-vxe-grid.vue    | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
index 72fbb07a4..f3eb6735a 100644
--- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
+++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -278,6 +278,15 @@ const delegatedFormSlots = computed(() => {
   return resultSlots.map((key) => key.replace(FORM_SLOT_PREFIX, ''));
 });
 
+const showDefaultEmpty = computed(() => {
+  // 检查是否有原生的 VXE Table 空状态配置
+  const hasEmptyText = options.value.emptyText !== undefined;
+  const hasEmptyRender = options.value.emptyRender !== undefined;
+
+  // 如果有原生配置，就不显示默认的空状态
+  return !hasEmptyText && !hasEmptyRender;
+});
+
 async function init() {
   await nextTick();
   const globalGridConfig = VxeUI?.getConfig()?.grid ?? {};
@@ -459,7 +468,7 @@ onUnmounted(() => {
         </slot>
       </template>
       <!-- 统一控状态 -->
-      <template #empty>
+      <template v-if="showDefaultEmpty" #empty>
         <slot name="empty">
           <EmptyIcon class="mx-auto" />
           <div class="mt-2">{{ $t('common.noData') }}</div>

From feb96dc8ea72e2572abf076174d9c595f3ab8153 Mon Sep 17 00:00:00 2001
From: huanghezhen <827283849@qq.com>
Date: Mon, 2 Jun 2025 08:16:48 +0800
Subject: [PATCH 40/53] fix: resolve onClosed method failure in
 connectedComponent of useVbenModal (#6309)

---
 packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts b/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
index 048243da3..2037dfd0f 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
+++ b/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
@@ -94,8 +94,9 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
     injectData.options?.onOpenChange?.(isOpen);
   };
 
+  const onClosed = mergedOptions.onClosed;
   mergedOptions.onClosed = () => {
-    options.onClosed?.();
+    onClosed?.();
     if (mergedOptions.destroyOnClose) {
       injectData.reCreateModal?.();
     }

From 4a796b7e9b7b6378b37484990b027f4e5c884f9b Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Mon, 2 Jun 2025 08:38:34 +0800
Subject: [PATCH 41/53] =?UTF-8?q?feat:=20[BPM=20=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E6=B5=81]=20Simple=20=E6=A8=A1=E5=9E=8B=20-=20=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=E5=88=86=E6=94=AF=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nodes-config/router-node-config.vue       | 290 ++++++++++++++++++
 .../components/nodes/router-node.vue          | 115 +++++++
 .../components/process-node-tree.vue          |   5 +-
 .../simple-process-design/consts.ts           |   2 +-
 4 files changed, 409 insertions(+), 3 deletions(-)
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue
 create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes/router-node.vue

diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue
new file mode 100644
index 000000000..e40dda66a
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue
@@ -0,0 +1,290 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import type { RouterSetting, SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Button,
+  Card,
+  Col,
+  Form,
+  FormItem,
+  Input,
+  message,
+  Row,
+  Select,
+  SelectOption,
+} from 'ant-design-vue';
+
+import { ConditionType, NodeType } from '../../consts';
+import { useNodeName, useWatchNode } from '../../helpers';
+import Condition from './modules/condition.vue';
+
+defineOptions({
+  name: 'RouterNodeConfig',
+});
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+const processNodeTree = inject<Ref<SimpleFlowNode>>('processNodeTree');
+
+// 当前节点
+const currentNode = useWatchNode(props);
+// 节点名称
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+  NodeType.ROUTER_BRANCH_NODE,
+);
+const routerGroups = ref<RouterSetting[]>([]);
+const nodeOptions = ref<any[]>([]);
+const conditionRef = ref<any[]>([]);
+const formRef = ref();
+
+/** 保存配置 */
+const saveConfig = async () => {
+  // 校验路由分支选择
+  const routeIdValid = await formRef.value.validate().catch(() => false);
+  if (!routeIdValid) {
+    message.warning('请配置路由目标节点');
+    return false;
+  }
+
+  // 校验条件规则
+  let valid = true;
+  for (const item of conditionRef.value) {
+    if (item && !(await item.validate())) {
+      valid = false;
+    }
+  }
+  if (!valid) return false;
+  const showText = getShowText();
+  if (!showText) return false;
+  currentNode.value.name = nodeName.value!;
+  currentNode.value.showText = showText;
+  currentNode.value.routerGroups = routerGroups.value;
+  drawerApi.close();
+  return true;
+};
+
+// 使用 useVbenDrawer
+const [Drawer, drawerApi] = useVbenDrawer({
+  title: nodeName.value,
+  class: 'w-[630px]',
+  onCancel: () => {
+    drawerApi.close();
+  },
+  onConfirm: saveConfig,
+});
+
+// 显示路由分支节点配置， 由父组件调用
+const openDrawer = (node: SimpleFlowNode) => {
+  nodeOptions.value = [];
+  getRouterNode(processNodeTree?.value);
+  routerGroups.value = [];
+  nodeName.value = node.name;
+  if (node.routerGroups) {
+    routerGroups.value = node.routerGroups;
+  }
+  drawerApi.open();
+};
+
+const getShowText = () => {
+  if (
+    !routerGroups.value ||
+    !Array.isArray(routerGroups.value) ||
+    routerGroups.value.length <= 0
+  ) {
+    message.warning('请配置路由！');
+    return '';
+  }
+  for (const route of routerGroups.value) {
+    if (!route.nodeId || !route.conditionType) {
+      message.warning('请完善路由配置项！');
+      return '';
+    }
+    if (
+      route.conditionType === ConditionType.EXPRESSION &&
+      !route.conditionExpression
+    ) {
+      message.warning('请完善路由配置项！');
+      return '';
+    }
+    if (route.conditionType === ConditionType.RULE) {
+      for (const condition of route.conditionGroups.conditions) {
+        for (const rule of condition.rules) {
+          if (!rule.leftSide || !rule.rightSide) {
+            message.warning('请完善路由配置项！');
+            return '';
+          }
+        }
+      }
+    }
+  }
+  return `${routerGroups.value.length}条路由分支`;
+};
+
+const addRouterGroup = () => {
+  routerGroups.value.push({
+    nodeId: undefined,
+    conditionType: ConditionType.RULE,
+    conditionExpression: '',
+    conditionGroups: {
+      and: true,
+      conditions: [
+        {
+          and: true,
+          rules: [
+            {
+              opCode: '==',
+              leftSide: undefined,
+              rightSide: '',
+            },
+          ],
+        },
+      ],
+    },
+  });
+};
+
+const deleteRouterGroup = (index: number) => {
+  routerGroups.value.splice(index, 1);
+};
+
+// 递归获取所有节点
+const getRouterNode = (node: any) => {
+  // TODO 最好还需要满足以下要求
+  // 并行分支、包容分支内部节点不能跳转到外部节点
+  // 条件分支节点可以向上跳转到外部节点
+  while (true) {
+    if (!node) break;
+    if (
+      node.type !== NodeType.ROUTER_BRANCH_NODE &&
+      node.type !== NodeType.CONDITION_NODE
+    ) {
+      nodeOptions.value.push({
+        label: node.name,
+        value: node.id,
+      });
+    }
+    if (!node.childNode || node.type === NodeType.END_EVENT_NODE) {
+      break;
+    }
+    if (node.conditionNodes && node.conditionNodes.length > 0) {
+      node.conditionNodes.forEach((item: any) => {
+        getRouterNode(item);
+      });
+    }
+    node = node.childNode;
+  }
+};
+
+defineExpose({ openDrawer }); // 暴露方法给父组件
+</script>
+<template>
+  <Drawer>
+    <template #title>
+      <div class="flex items-center">
+        <Input
+          v-if="showInput"
+          type="text"
+          class="mr-2 w-48"
+          @blur="blurEvent()"
+          v-model:value="nodeName"
+          :placeholder="nodeName"
+        />
+        <div
+          v-else
+          class="flex cursor-pointer items-center"
+          @click="clickIcon()"
+        >
+          {{ nodeName }}
+          <IconifyIcon class="ml-1" icon="ep:edit-pen" />
+        </div>
+      </div>
+    </template>
+
+    <Form ref="formRef" :model="{ routerGroups }">
+      <Card
+        :body-style="{ padding: '10px' }"
+        class="mt-4"
+        v-for="(item, index) in routerGroups"
+        :key="index"
+      >
+        <template #title>
+          <div class="flex h-16 w-full items-center justify-between">
+            <div class="flex items-center font-normal">
+              <span class="font-medium">路由{{ index + 1 }}</span>
+              <FormItem
+                class="mb-0 ml-4 inline-block w-[180px]"
+                :name="['routerGroups', index, 'nodeId']"
+                :rules="{
+                  required: true,
+                  message: '路由目标节点不能为空',
+                  trigger: 'change',
+                }"
+              >
+                <Select
+                  v-model:value="item.nodeId"
+                  placeholder="请选择路由目标节点"
+                  allow-clear
+                >
+                  <SelectOption
+                    v-for="node in nodeOptions"
+                    :key="node.value"
+                    :value="node.value"
+                  >
+                    {{ node.label }}
+                  </SelectOption>
+                </Select>
+              </FormItem>
+            </div>
+            <Button
+              v-if="routerGroups.length > 1"
+              shape="circle"
+              class="flex items-center justify-center"
+              @click="deleteRouterGroup(index)"
+            >
+              <template #icon>
+                <IconifyIcon icon="ep:close" />
+              </template>
+            </Button>
+          </div>
+        </template>
+        <Condition
+          :ref="(el) => (conditionRef[index] = el)"
+          :model-value="routerGroups[index] as Record<string, any>"
+          @update:model-value="(val) => (routerGroups[index] = val)"
+        />
+      </Card>
+    </Form>
+
+    <Row class="mt-4">
+      <Col :span="24">
+        <Button
+          class="flex items-center p-0"
+          type="link"
+          @click="addRouterGroup"
+        >
+          <template #icon>
+            <IconifyIcon icon="ep:setting" />
+          </template>
+          新增路由分支
+        </Button>
+      </Col>
+    </Row>
+
+    <template #footer>
+      <div class="flex justify-end space-x-2">
+        <Button type="primary" @click="saveConfig">确 定</Button>
+        <Button @click="drawerApi.close">取 消</Button>
+      </div>
+    </template>
+  </Drawer>
+</template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/router-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/router-node.vue
new file mode 100644
index 000000000..30014befc
--- /dev/null
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/router-node.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input } from 'ant-design-vue';
+
+import { NODE_DEFAULT_TEXT, NodeType } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+import RouterNodeConfig from '../nodes-config/router-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'RouterNode' });
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true,
+  },
+});
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+// 监控节点的变化
+const currentNode = useWatchNode(props);
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(
+  currentNode,
+  NodeType.ROUTER_BRANCH_NODE,
+);
+
+const nodeSetting = ref();
+// 打开节点配置
+const openNodeConfig = () => {
+  if (readonly) {
+    return;
+  }
+  nodeSetting.value.openDrawer(currentNode.value);
+};
+
+// 删除节点。更新当前节点为孩子节点
+const deleteNode = () => {
+  emits('update:flowNode', currentNode.value.childNode);
+};
+</script>
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`,
+        ]"
+      >
+        <div class="node-title-container">
+          <div class="node-title-icon router-node">
+            <span class="iconfont icon-router"></span>
+          </div>
+          <Input
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="blurEvent()"
+            v-model="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(NodeType.ROUTER_BRANCH_NODE) }}
+          </div>
+          <IconifyIcon v-if="!readonly" icon="ep:arrow-right-bold" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="ep:circle-close-filled"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <RouterNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
+  </div>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
index b139aa3b1..25516b7f7 100644
--- a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
@@ -9,6 +9,7 @@ import EndEventNode from './nodes/end-event-node.vue';
 import ExclusiveNode from './nodes/exclusive-node.vue';
 import InclusiveNode from './nodes/inclusive-node.vue';
 import ParallelNode from './nodes/parallel-node.vue';
+import RouterNode from './nodes/router-node.vue';
 import StartUserNode from './nodes/start-user-node.vue';
 import TriggerNode from './nodes/trigger-node.vue';
 import UserTaskNode from './nodes/user-task-node.vue';
@@ -116,11 +117,11 @@ const recursiveFindParentNode = (
     @update:flow-node="handleModelValueUpdate"
   />
   <!-- 路由分支节点 -->
-  <!-- <RouterNode
+  <RouterNode
     v-if="currentNode && currentNode.type === NodeType.ROUTER_BRANCH_NODE"
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
-  /> -->
+  />
   <!-- 触发器节点 -->
   <TriggerNode
     v-if="currentNode && currentNode.type === NodeType.TRIGGER_NODE"
diff --git a/apps/web-antd/src/components/simple-process-design/consts.ts b/apps/web-antd/src/components/simple-process-design/consts.ts
index a5bf43394..6ca44fde2 100644
--- a/apps/web-antd/src/components/simple-process-design/consts.ts
+++ b/apps/web-antd/src/components/simple-process-design/consts.ts
@@ -564,7 +564,7 @@ export type RouterSetting = {
   conditionExpression: string;
   conditionGroups: ConditionGroup;
   conditionType: ConditionType;
-  nodeId: string;
+  nodeId: string | undefined;
 };
 
 /**

From 454f9c5c3bc17132cd506379e7ad774196c136f5 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Mon, 2 Jun 2025 20:52:10 +0800
Subject: [PATCH 42/53] feat: crm todo

---
 .../crm/business/modules/detail-info.vue      |   4 +
 .../crm/business/modules/detail-list.vue      |   4 +
 .../views/crm/contact/modules/detail-info.vue |   4 +
 .../views/crm/contact/modules/detail-list.vue |   4 +
 apps/web-antd/src/views/crm/contract/data.ts  |  40 ++--
 .../crm/contract/modules/detail-info.vue      |   4 +
 .../crm/contract/modules/detail-list.vue      |   4 +
 .../crm/customer/modules/detail-list.vue      |   4 +
 .../src/views/crm/customer/pool/data.ts       |  30 +--
 .../web-antd/src/views/crm/followup/index.vue | 205 ++++++++++++++++++
 .../src/views/crm/followup/modules/form.vue   |  87 ++++++++
 .../views/crm/product/modules/detail-info.vue |   4 +
 .../views/crm/product/modules/detail-list.vue |   4 +
 .../web-antd/src/views/crm/receivable/data.ts |  28 +--
 .../crm/receivable/modules/detail-info.vue    |   4 +
 .../crm/receivable/modules/detail-list.vue    |   4 +
 .../src/views/crm/receivable/plan/data.ts     |  31 +--
 .../receivable/plan/modules/detail-info.vue   |   4 +
 .../receivable/plan/modules/detail-list.vue   |   4 +
 19 files changed, 409 insertions(+), 64 deletions(-)
 create mode 100644 apps/web-antd/src/views/crm/business/modules/detail-info.vue
 create mode 100644 apps/web-antd/src/views/crm/business/modules/detail-list.vue
 create mode 100644 apps/web-antd/src/views/crm/contact/modules/detail-info.vue
 create mode 100644 apps/web-antd/src/views/crm/contact/modules/detail-list.vue
 create mode 100644 apps/web-antd/src/views/crm/contract/modules/detail-info.vue
 create mode 100644 apps/web-antd/src/views/crm/contract/modules/detail-list.vue
 create mode 100644 apps/web-antd/src/views/crm/customer/modules/detail-list.vue
 create mode 100644 apps/web-antd/src/views/crm/followup/index.vue
 create mode 100644 apps/web-antd/src/views/crm/followup/modules/form.vue
 create mode 100644 apps/web-antd/src/views/crm/product/modules/detail-info.vue
 create mode 100644 apps/web-antd/src/views/crm/product/modules/detail-list.vue
 create mode 100644 apps/web-antd/src/views/crm/receivable/modules/detail-info.vue
 create mode 100644 apps/web-antd/src/views/crm/receivable/modules/detail-list.vue
 create mode 100644 apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue
 create mode 100644 apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue

diff --git a/apps/web-antd/src/views/crm/business/modules/detail-info.vue b/apps/web-antd/src/views/crm/business/modules/detail-info.vue
new file mode 100644
index 000000000..da6c78661
--- /dev/null
+++ b/apps/web-antd/src/views/crm/business/modules/detail-info.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>businessInfo</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/business/modules/detail-list.vue b/apps/web-antd/src/views/crm/business/modules/detail-list.vue
new file mode 100644
index 000000000..b6466c322
--- /dev/null
+++ b/apps/web-antd/src/views/crm/business/modules/detail-list.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>businessList</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/contact/modules/detail-info.vue b/apps/web-antd/src/views/crm/contact/modules/detail-info.vue
new file mode 100644
index 000000000..a9a8f4cb1
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contact/modules/detail-info.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>contactInfo</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/contact/modules/detail-list.vue b/apps/web-antd/src/views/crm/contact/modules/detail-list.vue
new file mode 100644
index 000000000..1f5fe358f
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contact/modules/detail-list.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>contactList</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/contract/data.ts b/apps/web-antd/src/views/crm/contract/data.ts
index 32847eb3b..79118dd3f 100644
--- a/apps/web-antd/src/views/crm/contract/data.ts
+++ b/apps/web-antd/src/views/crm/contract/data.ts
@@ -146,73 +146,73 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '合同编号',
       field: 'no',
-      width: 150,
+      minWidth: 150,
       fixed: 'left',
     },
     {
       title: '合同名称',
       field: 'name',
-      width: 150,
+      minWidth: 150,
       fixed: 'left',
       slots: { default: 'name' },
     },
     {
       title: '客户名称',
       field: 'customerName',
-      width: 150,
+      minWidth: 150,
       slots: { default: 'customerName' },
     },
     {
       title: '商机名称',
       field: 'businessName',
-      width: 150,
+      minWidth: 150,
       slots: { default: 'businessName' },
     },
     {
       title: '合同金额（元）',
       field: 'totalPrice',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatNumber',
     },
     {
       title: '下单时间',
       field: 'orderDate',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatDateTime',
     },
     {
       title: '合同开始时间',
       field: 'startTime',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatDateTime',
     },
     {
       title: '合同结束时间',
       field: 'endTime',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatDateTime',
     },
     {
       title: '客户签约人',
       field: 'signContactName',
-      width: 150,
+      minWidth: 150,
       slots: { default: 'signContactName' },
     },
     {
       title: '公司签约人',
       field: 'signUserName',
-      width: 150,
+      minWidth: 150,
     },
     {
       title: '已回款金额（元）',
       field: 'totalReceivablePrice',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatNumber',
     },
     {
       title: '未回款金额（元）',
       field: 'unpaidPrice',
-      width: 150,
+      minWidth: 150,
       formatter: ({ row }) => {
         return floatToFixed2(row.totalPrice - row.totalReceivablePrice);
       },
@@ -220,46 +220,46 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '最后跟进时间',
       field: 'contactLastTime',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatDateTime',
     },
     {
       title: '负责人',
       field: 'ownerUserName',
-      width: 150,
+      minWidth: 150,
     },
     {
       title: '所属部门',
       field: 'ownerUserDeptName',
-      width: 150,
+      minWidth: 150,
     },
     {
       title: '更新时间',
       field: 'updateTime',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatDateTime',
     },
     {
       title: '创建时间',
       field: 'createTime',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatDateTime',
     },
     {
       title: '创建人',
       field: 'creatorName',
-      width: 150,
+      minWidth: 150,
     },
     {
       title: '备注',
       field: 'remark',
-      width: 150,
+      minWidth: 150,
     },
     {
       title: '合同状态',
       field: 'auditStatus',
       fixed: 'right',
-      width: 100,
+      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
diff --git a/apps/web-antd/src/views/crm/contract/modules/detail-info.vue b/apps/web-antd/src/views/crm/contract/modules/detail-info.vue
new file mode 100644
index 000000000..f952e7f2f
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contract/modules/detail-info.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>contractInfo</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/contract/modules/detail-list.vue b/apps/web-antd/src/views/crm/contract/modules/detail-list.vue
new file mode 100644
index 000000000..3114fe4bc
--- /dev/null
+++ b/apps/web-antd/src/views/crm/contract/modules/detail-list.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>contractList</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/customer/modules/detail-list.vue b/apps/web-antd/src/views/crm/customer/modules/detail-list.vue
new file mode 100644
index 000000000..8e6c73393
--- /dev/null
+++ b/apps/web-antd/src/views/crm/customer/modules/detail-list.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>customerList</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/customer/pool/data.ts b/apps/web-antd/src/views/crm/customer/pool/data.ts
index b0909b004..177742ea4 100644
--- a/apps/web-antd/src/views/crm/customer/pool/data.ts
+++ b/apps/web-antd/src/views/crm/customer/pool/data.ts
@@ -57,14 +57,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '客户名称',
       field: 'name',
-      width: 160,
+      minWidth: 160,
       fixed: 'left',
       slots: { default: 'name' },
     },
     {
       title: '客户来源',
       field: 'source',
-      width: 100,
+      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_SOURCE },
@@ -73,22 +73,22 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '手机',
       field: 'mobile',
-      width: 120,
+      minWidth: 120,
     },
     {
       title: '电话',
       field: 'telephone',
-      width: 120,
+      minWidth: 120,
     },
     {
       title: '邮箱',
       field: 'email',
-      width: 140,
+      minWidth: 140,
     },
     {
       title: '客户级别',
       field: 'level',
-      width: 135,
+      minWidth: 135,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_LEVEL },
@@ -97,7 +97,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '客户行业',
       field: 'industryId',
-      width: 100,
+      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_CUSTOMER_INDUSTRY },
@@ -106,18 +106,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '下次联系时间',
       field: 'contactNextTime',
-      width: 180,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '备注',
       field: 'remark',
-      width: 200,
+      minWidth: 200,
     },
     {
       title: '成交状态',
       field: 'dealStatus',
-      width: 80,
+      minWidth: 80,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
@@ -126,30 +126,30 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '最后跟进时间',
       field: 'contactLastTime',
-      width: 180,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '最后跟进记录',
       field: 'contactLastContent',
-      width: 200,
+      minWidth: 200,
     },
     {
       title: '更新时间',
       field: 'updateTime',
-      width: 180,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '创建时间',
       field: 'createTime',
-      width: 180,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '创建人',
       field: 'creatorName',
-      width: 100,
+      minWidth: 100,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/crm/followup/index.vue b/apps/web-antd/src/views/crm/followup/index.vue
new file mode 100644
index 000000000..410e10c13
--- /dev/null
+++ b/apps/web-antd/src/views/crm/followup/index.vue
@@ -0,0 +1,205 @@
+<script lang="ts" setup>
+import type { FollowUpRecordApi, FollowUpRecordVO } from '@/api/crm/followup';
+
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { BizTypeEnum } from '@/api/crm/permission';
+import { DICT_TYPE } from '@/utils/dict';
+import { Button, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { $t } from '#/locales';
+
+import FollowUpRecordForm from './modules/form.vue';
+
+/** 跟进记录列表 */
+defineOptions({ name: 'FollowUpRecord' });
+
+const props = defineProps<{
+  bizId: number;
+  bizType: number;
+}>();
+
+const { push } = useRouter();
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 添加跟进记录 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 删除跟进记录 */
+async function handleDelete(row: FollowUpRecordVO) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    key: 'action_key_msg',
+  });
+  try {
+    await FollowUpRecordApi.deleteFollowUpRecord(row.id);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } catch {
+    hideLoading();
+  }
+}
+
+/** 打开联系人详情 */
+function openContactDetail(id: number) {
+  push({ name: 'CrmContactDetail', params: { id } });
+}
+
+/** 打开商机详情 */
+function openBusinessDetail(id: number) {
+  push({ name: 'CrmBusinessDetail', params: { id } });
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FollowUpRecordForm,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      {
+        field: 'createTime',
+        title: '创建时间',
+        width: 180,
+        formatter: 'formatDateTime',
+      },
+      { field: 'creatorName', title: '跟进人' },
+      {
+        field: 'type',
+        title: '跟进类型',
+        cellRender: {
+          name: 'CellDict',
+          props: { type: DICT_TYPE.CRM_FOLLOW_UP_TYPE },
+        },
+      },
+      { field: 'content', title: '跟进内容' },
+      {
+        field: 'nextTime',
+        title: '下次联系时间',
+        width: 180,
+        formatter: 'formatDateTime',
+      },
+      {
+        field: 'contacts',
+        title: '关联联系人',
+        visible: props.bizType === BizTypeEnum.CRM_CUSTOMER,
+        slots: {
+          default: ({ row }) =>
+            row.contacts?.map((contact) =>
+              h(
+                Button,
+                {
+                  type: 'link',
+                  onClick: () => openContactDetail(contact.id),
+                },
+                () => contact.name,
+              ),
+            ),
+        },
+      },
+      {
+        field: 'businesses',
+        title: '关联商机',
+        visible: props.bizType === BizTypeEnum.CRM_CUSTOMER,
+        slots: {
+          default: ({ row }) =>
+            row.businesses?.map((business) =>
+              h(
+                Button,
+                {
+                  type: 'link',
+                  onClick: () => openBusinessDetail(business.id),
+                },
+                () => business.name,
+              ),
+            ),
+        },
+      },
+      {
+        field: 'actions',
+        title: '操作',
+        width: 100,
+        slots: { default: 'actions' },
+      },
+    ],
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          return await FollowUpRecordApi.getFollowUpRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            bizType: props.bizType,
+            bizId: props.bizId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+    },
+  } as VxeTableGridOptions<FollowUpRecordVO>,
+});
+
+watch(
+  () => props.bizId,
+  () => {
+    gridApi.query();
+  },
+);
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="跟进记录列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '写跟进',
+              type: 'primary',
+              icon: ACTION_ICON.EDIT,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+    <FormModal @success="onRefresh" />
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/crm/followup/modules/form.vue b/apps/web-antd/src/views/crm/followup/modules/form.vue
new file mode 100644
index 000000000..40cddb4cd
--- /dev/null
+++ b/apps/web-antd/src/views/crm/followup/modules/form.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { CrmFollowUpRecordApi } from '#/api/crm/followup';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createFollowUpRecord,
+  getFollowUpRecord,
+  updateFollowUpRecord,
+} from '#/api/crm/followup';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmFollowUpRecordApi.FollowUpRecord>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['跟进记录'])
+    : $t('ui.actionTitle.create', ['跟进记录']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as CrmFollowUpRecordApi.FollowUpRecord;
+    try {
+      await (formData.value?.id
+        ? updateFollowUpRecord(data)
+        : createFollowUpRecord(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<CrmFollowUpRecordApi.FollowUpRecord>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getFollowUpRecord(data.id as number);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-[40%]">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/crm/product/modules/detail-info.vue b/apps/web-antd/src/views/crm/product/modules/detail-info.vue
new file mode 100644
index 000000000..c6bcbfbcd
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/modules/detail-info.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>productInfo</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/product/modules/detail-list.vue b/apps/web-antd/src/views/crm/product/modules/detail-list.vue
new file mode 100644
index 000000000..4a0fbfd34
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/modules/detail-list.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>productList</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/receivable/data.ts b/apps/web-antd/src/views/crm/receivable/data.ts
index cbbc5c25f..1c33d1aec 100644
--- a/apps/web-antd/src/views/crm/receivable/data.ts
+++ b/apps/web-antd/src/views/crm/receivable/data.ts
@@ -173,38 +173,38 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '回款编号',
       field: 'no',
-      width: 150,
+      minWidth: 150,
       fixed: 'left',
       slots: { default: 'no' },
     },
     {
       title: '客户名称',
       field: 'customerName',
-      width: 150,
+      minWidth: 150,
       slots: { default: 'customerName' },
     },
     {
       title: '合同编号',
       field: 'contract',
-      width: 150,
+      minWidth: 150,
       slots: { default: 'contractNo' },
     },
     {
       title: '回款日期',
       field: 'returnTime',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatDateTime',
     },
     {
       title: '回款金额（元）',
       field: 'price',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatNumber',
     },
     {
       title: '回款方式',
       field: 'returnType',
-      width: 150,
+      minWidth: 150,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
@@ -213,45 +213,45 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '备注',
       field: 'remark',
-      width: 150,
+      minWidth: 150,
     },
     {
       title: '合同金额（元）',
       field: 'contract.totalPrice',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatNumber',
     },
     {
       title: '负责人',
       field: 'ownerUserName',
-      width: 150,
+      minWidth: 150,
     },
     {
       title: '所属部门',
       field: 'ownerUserDeptName',
-      width: 150,
+      minWidth: 150,
     },
     {
       title: '更新时间',
       field: 'updateTime',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatDateTime',
     },
     {
       title: '创建时间',
       field: 'createTime',
-      width: 150,
+      minWidth: 150,
       formatter: 'formatDateTime',
     },
     {
       title: '创建人',
       field: 'creatorName',
-      width: 150,
+      minWidth: 150,
     },
     {
       title: '回款状态',
       field: 'auditStatus',
-      width: 100,
+      minWidth: 100,
       fixed: 'right',
       cellRender: {
         name: 'CellDict',
diff --git a/apps/web-antd/src/views/crm/receivable/modules/detail-info.vue b/apps/web-antd/src/views/crm/receivable/modules/detail-info.vue
new file mode 100644
index 000000000..bac747f62
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/modules/detail-info.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>receivableInfo</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue b/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue
new file mode 100644
index 000000000..d9444469c
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>receivableList</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/receivable/plan/data.ts b/apps/web-antd/src/views/crm/receivable/plan/data.ts
index cc76b1eeb..519c41f13 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/data.ts
+++ b/apps/web-antd/src/views/crm/receivable/plan/data.ts
@@ -122,48 +122,48 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '客户名称',
       field: 'customerName',
-      width: 150,
+      minWidth: 150,
       fixed: 'left',
       slots: { default: 'customerName' },
     },
     {
       title: '合同编号',
       field: 'contractNo',
-      width: 200,
+      minWidth: 200,
     },
     {
       title: '期数',
       field: 'period',
-      width: 150,
+      minWidth: 150,
       slots: { default: 'period' },
     },
     {
       title: '计划回款金额（元）',
       field: 'price',
-      width: 160,
+      minWidth: 160,
       formatter: 'formatNumber',
     },
     {
       title: '计划回款日期',
       field: 'returnTime',
-      width: 180,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '提前几天提醒',
       field: 'remindDays',
-      width: 150,
+      minWidth: 150,
     },
     {
       title: '提醒日期',
       field: 'remindTime',
-      width: 180,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '回款方式',
       field: 'returnType',
-      width: 130,
+      minWidth: 130,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE },
@@ -172,28 +172,29 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '备注',
       field: 'remark',
+      minWidth: 120,
     },
     {
       title: '负责人',
       field: 'ownerUserName',
-      width: 120,
+      minWidth: 120,
     },
     {
       title: '实际回款金额（元）',
       field: 'receivable.price',
-      width: 160,
+      minWidth: 160,
       formatter: 'formatNumber',
     },
     {
       title: '实际回款日期',
       field: 'receivable.returnTime',
-      width: 180,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '未回款金额（元）',
       field: 'unpaidPrice',
-      width: 160,
+      minWidth: 160,
       formatter: ({ row }) => {
         if (row.receivable) {
           return row.price - row.receivable.price;
@@ -204,19 +205,19 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '更新时间',
       field: 'updateTime',
-      width: 180,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '创建时间',
       field: 'createTime',
-      width: 180,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '创建人',
       field: 'creatorName',
-      width: 100,
+      minWidth: 100,
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue
new file mode 100644
index 000000000..d94b1e3b9
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-info.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>receivablePlanInfo</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue
new file mode 100644
index 000000000..bec4aa4b6
--- /dev/null
+++ b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <div>receivablePlanList</div>
+</template>

From 2a374b216b128e550e944f57244eaa8ddbe2903c Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Mon, 2 Jun 2025 23:02:19 +0800
Subject: [PATCH 43/53] =?UTF-8?q?feat:=20=E8=8A=82=E7=82=B9=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E6=8A=BD=E5=B1=89=E4=BF=9D=E6=8C=81=E4=B8=80=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nodes-config/condition-node-config.vue    | 16 +------
 .../nodes-config/copy-task-node-config.vue    | 13 +----
 .../nodes-config/delay-timer-node-config.vue  | 11 -----
 .../nodes-config/router-node-config.vue       | 48 ++++++++++---------
 .../nodes-config/start-user-node-config.vue   |  4 +-
 .../nodes-config/trigger-node-config.vue      |  9 ----
 .../nodes-config/user-task-node-config.vue    | 46 ++++++++++--------
 7 files changed, 55 insertions(+), 92 deletions(-)

diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue
index 19aba8a8c..add81c941 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue
@@ -7,7 +7,7 @@ import { useVbenDrawer } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
-import { Button, Input } from 'ant-design-vue';
+import { Input } from 'ant-design-vue';
 
 import { ConditionType } from '../../consts';
 import {
@@ -91,13 +91,8 @@ const saveConfig = async () => {
   return true;
 };
 
-// 使用 useVbenDrawer 替代传统 Drawer
 const [Drawer, drawerApi] = useVbenDrawer({
   title: currentNode.value.name,
-  class: 'w-[588px]',
-  onCancel: () => {
-    drawerApi.close();
-  },
   onConfirm: saveConfig,
 });
 
@@ -152,7 +147,7 @@ const blurEvent = () => {
 defineExpose({ open }); // 提供 open 方法，用于打开弹窗
 </script>
 <template>
-  <Drawer>
+  <Drawer class="w-[580px]">
     <template #title>
       <div class="flex items-center">
         <Input
@@ -185,12 +180,5 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
         <Condition ref="conditionRef" v-model:model-value="condition" />
       </div>
     </div>
-
-    <template #footer>
-      <div class="flex justify-end space-x-2">
-        <Button type="primary" @click="saveConfig">确 定</Button>
-        <Button @click="drawerApi.close">取 消</Button>
-      </div>
-    </template>
   </Drawer>
 </template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
index 41415697c..7e5a015ae 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
@@ -12,7 +12,6 @@ import { useVbenDrawer } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
 import {
-  Button,
   Col,
   Form,
   FormItem,
@@ -44,9 +43,7 @@ import {
   useWatchNode,
 } from '../../helpers';
 
-defineOptions({
-  name: 'CopyTaskNodeConfig',
-});
+defineOptions({ name: 'CopyTaskNodeConfig' });
 const props = defineProps({
   flowNode: {
     type: Object as () => SimpleFlowNode,
@@ -67,10 +64,6 @@ const [Drawer, drawerApi] = useVbenDrawer({
   header: true,
   closable: true,
   title: '',
-  placement: 'right',
-  onCancel() {
-    drawerApi.close();
-  },
   onConfirm() {
     saveConfig();
   },
@@ -512,10 +505,6 @@ defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
         </div>
       </TabPane>
     </Tabs>
-    <template #footer>
-      <Button type="primary" @click="saveConfig">确 定</Button>
-      <Button @click="drawerApi.close()">取 消</Button>
-    </template>
   </Drawer>
 </template>
 <style lang="scss" scoped>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
index fdb8e3a6c..643e4c9cf 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
@@ -9,7 +9,6 @@ import { useVbenDrawer } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
 import {
-  Button,
   Col,
   DatePicker,
   Form,
@@ -123,9 +122,6 @@ const saveConfig = async () => {
 
 const [Drawer, drawerApi] = useVbenDrawer({
   title: nodeName.value,
-  onCancel: () => {
-    drawerApi.close();
-  },
   onConfirm: saveConfig,
 });
 
@@ -244,13 +240,6 @@ defineExpose({ openDrawer }); // 暴露方法给父组件
         </FormItem>
       </Form>
     </div>
-
-    <template #footer>
-      <div class="flex justify-end space-x-2">
-        <Button type="primary" @click="saveConfig">确 定</Button>
-        <Button @click="drawerApi.close">取 消</Button>
-      </div>
-    </template>
   </Drawer>
 </template>
 <style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue
index e40dda66a..a1a553487 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue
@@ -25,9 +25,7 @@ import { ConditionType, NodeType } from '../../consts';
 import { useNodeName, useWatchNode } from '../../helpers';
 import Condition from './modules/condition.vue';
 
-defineOptions({
-  name: 'RouterNodeConfig',
-});
+defineOptions({ name: 'RouterNodeConfig' });
 const props = defineProps({
   flowNode: {
     type: Object as () => SimpleFlowNode,
@@ -36,9 +34,9 @@ const props = defineProps({
 });
 const processNodeTree = inject<Ref<SimpleFlowNode>>('processNodeTree');
 
-// 当前节点
+/** 当前节点 */
 const currentNode = useWatchNode(props);
-// 节点名称
+/** 节点名称 */
 const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
   NodeType.ROUTER_BRANCH_NODE,
 );
@@ -47,8 +45,8 @@ const nodeOptions = ref<any[]>([]);
 const conditionRef = ref<any[]>([]);
 const formRef = ref();
 
-/** 保存配置 */
-const saveConfig = async () => {
+/** 校验节点配置 */
+const validateConfig = async () => {
   // 校验路由分支选择
   const routeIdValid = await formRef.value.validate().catch(() => false);
   if (!routeIdValid) {
@@ -64,26 +62,34 @@ const saveConfig = async () => {
     }
   }
   if (!valid) return false;
+
+  // 获取节点显示文本，如果为空，校验不通过
   const showText = getShowText();
   if (!showText) return false;
+
+  return true;
+};
+
+/** 保存配置 */
+const saveConfig = async () => {
+  // 校验配置
+  if (!(await validateConfig())) {
+    return false;
+  }
+  // 保存配置
   currentNode.value.name = nodeName.value!;
-  currentNode.value.showText = showText;
+  currentNode.value.showText = getShowText();
   currentNode.value.routerGroups = routerGroups.value;
   drawerApi.close();
   return true;
 };
 
-// 使用 useVbenDrawer
 const [Drawer, drawerApi] = useVbenDrawer({
   title: nodeName.value,
-  class: 'w-[630px]',
-  onCancel: () => {
-    drawerApi.close();
-  },
   onConfirm: saveConfig,
 });
 
-// 显示路由分支节点配置， 由父组件调用
+/** 打开路由节点配置抽屉，由父组件调用 */
 const openDrawer = (node: SimpleFlowNode) => {
   nodeOptions.value = [];
   getRouterNode(processNodeTree?.value);
@@ -95,6 +101,7 @@ const openDrawer = (node: SimpleFlowNode) => {
   drawerApi.open();
 };
 
+/** 获取显示文本 */
 const getShowText = () => {
   if (
     !routerGroups.value ||
@@ -130,6 +137,7 @@ const getShowText = () => {
   return `${routerGroups.value.length}条路由分支`;
 };
 
+/** 添加路由分支 */
 const addRouterGroup = () => {
   routerGroups.value.push({
     nodeId: undefined,
@@ -153,11 +161,12 @@ const addRouterGroup = () => {
   });
 };
 
+/** 删除路由分支 */
 const deleteRouterGroup = (index: number) => {
   routerGroups.value.splice(index, 1);
 };
 
-// 递归获取所有节点
+/** 递归获取所有节点 */
 const getRouterNode = (node: any) => {
   // TODO 最好还需要满足以下要求
   // 并行分支、包容分支内部节点不能跳转到外部节点
@@ -188,7 +197,7 @@ const getRouterNode = (node: any) => {
 defineExpose({ openDrawer }); // 暴露方法给父组件
 </script>
 <template>
-  <Drawer>
+  <Drawer class="w-[630px]">
     <template #title>
       <div class="flex items-center">
         <Input
@@ -279,12 +288,5 @@ defineExpose({ openDrawer }); // 暴露方法给父组件
         </Button>
       </Col>
     </Row>
-
-    <template #footer>
-      <div class="flex justify-end space-x-2">
-        <Button type="primary" @click="saveConfig">确 定</Button>
-        <Button @click="drawerApi.close">取 消</Button>
-      </div>
-    </template>
   </Drawer>
 </template>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
index 348a47317..f061b0768 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
@@ -95,7 +95,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
   header: true,
   closable: true,
   onCancel() {
-    drawerApi.close();
+    drawerApi.setState({ isOpen: false });
   },
   onConfirm() {
     saveConfig();
@@ -111,7 +111,7 @@ const saveConfig = async () => {
   currentNode.value.fieldsPermission = fieldsPermissionConfig.value;
   // 设置发起人的按钮权限
   currentNode.value.buttonsSetting = START_USER_BUTTON_SETTING;
-  drawerApi.close();
+  drawerApi.setState({ isOpen: false });
   return true;
 };
 
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
index 67096ae63..e0431edf3 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
@@ -63,9 +63,6 @@ const [Drawer, drawerApi] = useVbenDrawer({
   header: true,
   closable: true,
   title: '',
-  onCancel() {
-    drawerApi.close();
-  },
   onConfirm() {
     saveConfig();
   },
@@ -678,12 +675,6 @@ onMounted(() => {
         </div>
       </Form>
     </div>
-    <template #footer>
-      <div class="flex justify-end">
-        <Button type="primary" @click="saveConfig">确 定</Button>
-        <Button class="ml-2" @click="drawerApi.close()">取 消</Button>
-      </div>
-    </template>
   </Drawer>
 </template>
 <style lang="scss" scoped>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
index 38805fa5f..c70ae0a9d 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
@@ -102,9 +102,6 @@ const [Drawer, drawerApi] = useVbenDrawer({
   header: true,
   closable: true,
   title: '',
-  onCancel() {
-    drawerApi.close();
-  },
   onConfirm() {
     saveConfig();
   },
@@ -212,7 +209,7 @@ const changeCandidateStrategy = () => {
   configForm.value.approveMethod = ApproveMethodType.SEQUENTIAL_APPROVE;
 };
 
-// 审批方式改变
+/** 审批方式改变 */
 const approveMethodChanged = () => {
   configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS;
   if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
@@ -240,18 +237,8 @@ const nodeTypeName = computed(() => {
   return currentNode.value.type === NodeType.TRANSACTOR_NODE ? '办理' : '审批';
 });
 
-/** 保存配置 */
-const saveConfig = async () => {
-  // 设置审批节点名称
-  currentNode.value.name = nodeName.value!;
-  // 设置审批类型
-  currentNode.value.approveType = approveType.value;
-  // 如果不是人工审批。返回
-  if (approveType.value !== ApproveType.USER) {
-    currentNode.value.showText = getApproveTypeText(approveType.value);
-    drawerApi.close();
-    return true;
-  }
+/** 校验节点配置 */
+const validateConfig = async () => {
   if (!formRef.value) return false;
   if (!userTaskListenerRef.value) return false;
 
@@ -274,6 +261,27 @@ const saveConfig = async () => {
   const showText = getShowText();
   if (!showText) return false;
 
+  return true;
+};
+/** 保存配置 */
+const saveConfig = async () => {
+  // 如果不是人工审批，不执行校验，直接返回
+  if (approveType.value !== ApproveType.USER) {
+    currentNode.value.name = nodeName.value!;
+    currentNode.value.approveType = approveType.value;
+    currentNode.value.showText = getApproveTypeText(approveType.value);
+    drawerApi.close();
+    return true;
+  }
+  // 执行校验
+  if (!(await validateConfig())) {
+    return false;
+  }
+  // 设置审批节点名称
+  currentNode.value.name = nodeName.value!;
+  // 设置审批类型
+  currentNode.value.approveType = approveType.value;
+  // 设置审批人设置策略
   currentNode.value.candidateStrategy = configForm.value.candidateStrategy;
   // 处理 candidateParam 参数
   currentNode.value.candidateParam = handleCandidateParam();
@@ -336,7 +344,7 @@ const saveConfig = async () => {
   // 审批意见
   currentNode.value.reasonRequire = configForm.value.reasonRequire;
 
-  currentNode.value.showText = showText;
+  currentNode.value.showText = getShowText();
   drawerApi.close();
   return true;
 };
@@ -1206,10 +1214,6 @@ onMounted(() => {
         />
       </TabPane>
     </Tabs>
-    <template #footer>
-      <Button type="primary" @click="saveConfig">确 定</Button>
-      <Button @click="drawerApi.close()">取 消</Button>
-    </template>
   </Drawer>
 </template>
 <style lang="scss" scoped>

From ea776aa710e78e797d74e2261d7b1cf25e941b01 Mon Sep 17 00:00:00 2001
From: chewenye <15818182980@163.com>
Date: Tue, 3 Jun 2025 06:07:06 +0800
Subject: [PATCH 44/53] =?UTF-8?q?types:=20=E6=89=A9=E5=B1=95user-dropdown?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84menus=E7=B1=BB=E5=9E=8B=EF=BC=8C?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81iconify=20(#6283)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 车文烨 <chewy@china-lehua.com>
---
 .../layouts/src/widgets/user-dropdown/user-dropdown.vue     | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue b/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
index 8b5f499fb..8156324af 100644
--- a/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
+++ b/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
@@ -46,7 +46,11 @@ interface Props {
   /**
    * 菜单数组
    */
-  menus?: Array<{ handler: AnyFunction; icon?: Component; text: string }>;
+  menus?: Array<{
+    handler: AnyFunction;
+    icon?: Component | Function | string;
+    text: string;
+  }>;
 
   /**
    * 标签文本

From 01713ff22d6a82c3f333563de5ff75d7555d04be Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Tue, 3 Jun 2025 10:11:26 +0800
Subject: [PATCH 45/53] =?UTF-8?q?review=EF=BC=9Abpm=20=E6=96=B9=E6=B3=95?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=E4=BD=BF=E7=94=A8=20function=EF=BC=8C?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nodes-config/condition-node-config.vue    | 18 ++--
 .../nodes-config/copy-task-node-config.vue    | 31 +++++--
 .../nodes-config/delay-timer-node-config.vue  | 20 +++--
 .../nodes-config/modules/condition-dialog.vue |  9 +-
 .../nodes-config/modules/condition.vue        | 29 +++---
 .../modules/http-request-param-setting.vue    |  9 +-
 .../modules/http-request-setting.vue          | 14 +--
 .../modules/user-task-listener.vue            |  8 +-
 .../nodes-config/router-node-config.vue       | 30 ++++---
 .../nodes-config/start-user-node-config.vue   | 25 +++---
 .../nodes-config/trigger-node-config.vue      | 72 ++++++++-------
 .../nodes-config/user-task-node-config.vue    | 37 +++++---
 .../components/nodes-config/utils.ts          | 20 ++---
 .../components/nodes/copy-task-node.vue       |  9 +-
 .../components/nodes/delay-timer-node.vue     |  9 +-
 .../components/nodes/end-event-node.vue       |  5 +-
 .../components/nodes/exclusive-node.vue       | 37 ++++----
 .../components/nodes/inclusive-node.vue       | 35 ++++----
 .../components/nodes/node-handler.vue         |  7 +-
 .../components/nodes/parallel-node.vue        | 26 +++---
 .../components/nodes/router-node.vue          | 11 +--
 .../components/nodes/start-user-node.vue      | 12 +--
 .../components/nodes/trigger-node.vue         | 11 +--
 .../components/nodes/user-task-node.vue       | 16 ++--
 .../components/process-node-tree.vue          |  9 +-
 .../components/simple-process-designer.vue    | 32 ++++---
 .../components/simple-process-model.vue       | 59 ++++++-------
 .../simple-process-design/helpers.ts          | 88 +++++++++----------
 .../form/modules/simple-model-design.vue      |  1 -
 .../detail/modules/operation-button.vue       |  1 -
 30 files changed, 377 insertions(+), 313 deletions(-)

diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue
index add81c941..ffa494726 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/condition-node-config.vue
@@ -20,6 +20,7 @@ import Condition from './modules/condition.vue';
 defineOptions({
   name: 'ConditionNodeConfig',
 });
+
 const props = defineProps({
   conditionNode: {
     type: Object as () => SimpleFlowNode,
@@ -58,7 +59,7 @@ const conditionRef = ref();
 const fieldOptions = useFormFieldsAndStartUser(); // 流程表单字段和发起人字段
 
 /** 保存配置 */
-const saveConfig = async () => {
+async function saveConfig() {
   if (!currentNode.value.conditionSetting?.defaultFlow) {
     // 校验表单
     const valid = await conditionRef.value.validate();
@@ -89,14 +90,14 @@ const saveConfig = async () => {
   }
   drawerApi.close();
   return true;
-};
+}
 
 const [Drawer, drawerApi] = useVbenDrawer({
   title: currentNode.value.name,
   onConfirm: saveConfig,
 });
 
-const open = () => {
+function open() {
   // 使用三元表达式代替 if-else，解决 linter 警告
   condition.value = currentNode.value.conditionSetting
     ? cloneDeep(currentNode.value.conditionSetting)
@@ -121,7 +122,7 @@ const open = () => {
       };
 
   drawerApi.open();
-};
+}
 
 watch(
   () => props.conditionNode,
@@ -130,11 +131,12 @@ watch(
   },
 );
 
-const clickIcon = () => {
+function clickIcon() {
   showInput.value = true;
-};
+}
+
 // 输入框失去焦点
-const blurEvent = () => {
+function blurEvent() {
   showInput.value = false;
   currentNode.value.name =
     currentNode.value.name ||
@@ -142,7 +144,7 @@ const blurEvent = () => {
       props.nodeIndex,
       currentNode.value?.conditionSetting?.defaultFlow,
     );
-};
+}
 
 defineExpose({ open }); // 提供 open 方法，用于打开弹窗
 </script>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
index 7e5a015ae..03f454c52 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
@@ -44,12 +44,14 @@ import {
 } from '../../helpers';
 
 defineOptions({ name: 'CopyTaskNodeConfig' });
+
 const props = defineProps({
   flowNode: {
     type: Object as () => SimpleFlowNode,
     required: true,
   },
 });
+
 const deptLevelLabel = computed(() => {
   let label = '部门负责人来源';
   label =
@@ -59,6 +61,7 @@ const deptLevelLabel = computed(() => {
       : `${label}(发起人部门向上)`;
   return label;
 });
+
 // 抽屉配置
 const [Drawer, drawerApi] = useVbenDrawer({
   header: true,
@@ -68,14 +71,18 @@ const [Drawer, drawerApi] = useVbenDrawer({
     saveConfig();
   },
 });
+
 // 当前节点
 const currentNode = useWatchNode(props);
+
 // 节点名称
 const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
   NodeType.COPY_TASK_NODE,
 );
+
 // 激活的 Tab 标签页
 const activeTabName = ref('user');
+
 // 表单字段权限配置
 const {
   formType,
@@ -83,16 +90,20 @@ const {
   formFieldOptions,
   getNodeConfigFormFields,
 } = useFormFieldsPermission(FieldPermissionType.READ);
+
 // 表单内用户字段选项, 必须是必填和用户选择器
 const userFieldOnFormOptions = computed(() => {
   return formFieldOptions.filter((item) => item.type === 'UserSelect');
 });
+
 // 表单内部门字段选项, 必须是必填和部门选择器
 const deptFieldOnFormOptions = computed(() => {
   return formFieldOptions.filter((item) => item.type === 'DeptSelect');
 });
+
 // 抄送人表单配置
 const formRef = ref(); // 表单 Ref
+
 // 表单校验规则
 const formRules: Record<string, Rule[]> = reactive({
   candidateStrategy: [
@@ -127,6 +138,7 @@ const {
   handleCandidateParam,
   parseCandidateParam,
 } = useNodeForm(NodeType.COPY_TASK_NODE);
+
 const configForm = tempConfigForm as Ref<CopyTaskFormType>;
 // 抄送人策略， 去掉发起人自选 和 发起人自己
 const copyUserStrategies = computed(() => {
@@ -134,8 +146,9 @@ const copyUserStrategies = computed(() => {
     (item) => item.value !== CandidateStrategy.START_USER,
   );
 });
+
 // 改变抄送人设置策略
-const changeCandidateStrategy = () => {
+function changeCandidateStrategy() {
   configForm.value.userIds = [];
   configForm.value.deptIds = [];
   configForm.value.roleIds = [];
@@ -144,9 +157,10 @@ const changeCandidateStrategy = () => {
   configForm.value.deptLevel = 1;
   configForm.value.formUser = '';
   configForm.value.formDept = '';
-};
+}
+
 // 保存配置
-const saveConfig = async () => {
+async function saveConfig() {
   activeTabName.value = 'user';
   if (!formRef.value) return false;
   const valid = await formRef.value.validate();
@@ -160,9 +174,10 @@ const saveConfig = async () => {
   currentNode.value.fieldsPermission = fieldsPermissionConfig.value;
   drawerApi.close();
   return true;
-};
+}
+
 // 显示抄送节点配置， 由父组件传过来
-const showCopyTaskNodeConfig = (node: SimpleFlowNode) => {
+function showCopyTaskNodeConfig(node: SimpleFlowNode) {
   nodeName.value = node.name;
   // 抄送人设置
   configForm.value.candidateStrategy = node.candidateStrategy!;
@@ -171,10 +186,10 @@ const showCopyTaskNodeConfig = (node: SimpleFlowNode) => {
   getNodeConfigFormFields(node.fieldsPermission);
 
   drawerApi.open();
-};
+}
 
 /** 批量更新权限 */
-const updatePermission = (type: string) => {
+function updatePermission(type: string) {
   fieldsPermissionConfig.value.forEach((field) => {
     if (type === 'READ') {
       field.permission = FieldPermissionType.READ;
@@ -184,7 +199,7 @@ const updatePermission = (type: string) => {
       field.permission = FieldPermissionType.NONE;
     }
   });
-};
+}
 
 // 在组件初始化时对表单字段进行处理
 onMounted(() => {
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
index 643e4c9cf..2dca15fba 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
@@ -33,6 +33,7 @@ import { useNodeName, useWatchNode } from '../../helpers';
 import { convertTimeUnit } from './utils';
 
 defineOptions({ name: 'DelayTimerNodeConfig' });
+
 const props = defineProps({
   flowNode: {
     type: Object as () => SimpleFlowNode,
@@ -48,6 +49,7 @@ const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
 );
 // 抄送人表单配置
 const formRef = ref(); // 表单 Ref
+
 // 表单校验规则
 const formRules: Record<string, Rule[]> = reactive({
   delayType: [
@@ -60,6 +62,7 @@ const formRules: Record<string, Rule[]> = reactive({
     { required: true, message: '延迟时间不能为空', trigger: 'change' },
   ],
 });
+
 // 配置表单数据
 const configForm = ref({
   delayType: DelayTypeEnum.FIXED_TIME_DURATION,
@@ -69,7 +72,7 @@ const configForm = ref({
 });
 
 // 获取显示文本
-const getShowText = (): string => {
+function getShowText(): string {
   let showText = '';
   if (configForm.value.delayType === DelayTypeEnum.FIXED_TIME_DURATION) {
     showText = `延迟${configForm.value.timeDuration}${TIME_UNIT_TYPES?.find((item) => item.value === configForm.value.timeUnit)?.label}`;
@@ -78,10 +81,10 @@ const getShowText = (): string => {
     showText = `延迟至${configForm.value.dateTime.replace('T', ' ')}`;
   }
   return showText;
-};
+}
 
 // 获取ISO时间格式
-const getIsoTimeDuration = () => {
+function getIsoTimeDuration() {
   let strTimeDuration = 'PT';
   if (configForm.value.timeUnit === TimeUnitType.MINUTE) {
     strTimeDuration += `${configForm.value.timeDuration}M`;
@@ -93,10 +96,10 @@ const getIsoTimeDuration = () => {
     strTimeDuration += `${configForm.value.timeDuration}D`;
   }
   return strTimeDuration;
-};
+}
 
 // 保存配置
-const saveConfig = async () => {
+async function saveConfig() {
   if (!formRef.value) return false;
   const valid = await formRef.value.validate();
   if (!valid) return false;
@@ -118,7 +121,7 @@ const saveConfig = async () => {
   }
   drawerApi.close();
   return true;
-};
+}
 
 const [Drawer, drawerApi] = useVbenDrawer({
   title: nodeName.value,
@@ -126,7 +129,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 });
 
 // 显示延迟器节点配置，由父组件调用
-const openDrawer = (node: SimpleFlowNode) => {
+function openDrawer(node: SimpleFlowNode) {
   nodeName.value = node.name;
   if (node.delaySetting) {
     configForm.value.delayType = node.delaySetting.delayType;
@@ -144,7 +147,7 @@ const openDrawer = (node: SimpleFlowNode) => {
     }
   }
   drawerApi.open();
-};
+}
 
 defineExpose({ openDrawer }); // 暴露方法给父组件
 </script>
@@ -242,4 +245,3 @@ defineExpose({ openDrawer }); // 暴露方法给父组件
     </div>
   </Drawer>
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue
index 289811650..f8fea7a2b 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue
@@ -50,15 +50,16 @@ const [Modal, modalApi] = useVbenModal({
   },
 });
 
-const open = (conditionObj: any | undefined) => {
+// TODO: jason  open 在 useVbenModal 中 onOpenChange 方法
+function open(conditionObj: any | undefined) {
   if (conditionObj) {
     conditionData.value.conditionType = conditionObj.conditionType;
     conditionData.value.conditionExpression = conditionObj.conditionExpression;
     conditionData.value.conditionGroups = conditionObj.conditionGroups;
   }
   modalApi.open();
-};
-
+}
+// TODO: jason  不需要暴露expose，直接使用modalApi.setData(formSetting).open()
 defineExpose({ open });
 </script>
 <template>
@@ -66,5 +67,3 @@ defineExpose({ open });
     <Condition ref="conditionRef" v-model="conditionData" />
   </Modal>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition.vue
index c0b1738ff..06cb93495 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition.vue
@@ -38,13 +38,16 @@ import { useFormFieldsAndStartUser } from '../../../helpers';
 defineOptions({
   name: 'Condition',
 });
+
 const props = defineProps({
   modelValue: {
     type: Object,
     required: true,
   },
 });
+
 const emit = defineEmits(['update:modelValue']);
+
 const condition = computed({
   get() {
     return props.modelValue;
@@ -81,35 +84,37 @@ const formRules: Record<string, Rule[]> = reactive({
     },
   ],
 });
+
 const formRef = ref(); // 表单 Ref
 
 /** 切换条件配置方式 */
-const changeConditionType = () => {
+function changeConditionType() {
   if (
     condition.value.conditionType === ConditionType.RULE &&
     !condition.value.conditionGroups
   ) {
     condition.value.conditionGroups = cloneDeep(DEFAULT_CONDITION_GROUP_VALUE);
   }
-};
-const deleteConditionGroup = (conditions: any, index: number) => {
+}
+
+function deleteConditionGroup(conditions: any, index: number) {
   conditions.splice(index, 1);
-};
+}
 
-const deleteConditionRule = (condition: any, index: number) => {
+function deleteConditionRule(condition: any, index: number) {
   condition.rules.splice(index, 1);
-};
+}
 
-const addConditionRule = (condition: any, index: number) => {
+function addConditionRule(condition: any, index: number) {
   const rule = {
     opCode: '==',
     leftSide: undefined,
     rightSide: '',
   };
   condition.rules.splice(index + 1, 0, rule);
-};
+}
 
-const addConditionGroup = (conditions: any) => {
+function addConditionGroup(conditions: any) {
   const condition = {
     and: true,
     rules: [
@@ -121,12 +126,12 @@ const addConditionGroup = (conditions: any) => {
     ],
   };
   conditions.push(condition);
-};
+}
 
-const validate = async () => {
+async function validate() {
   if (!formRef.value) return false;
   return await formRef.value.validate();
-};
+}
 
 defineExpose({ validate });
 </script>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
index 6f18a06dc..40e859ea9 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
@@ -42,18 +42,18 @@ const props = defineProps({
 const formFieldOptions = useFormFieldsAndStartUser();
 
 /** 添加请求配置项 */
-const addHttpRequestParam = (arr: HttpRequestParam[]) => {
+function addHttpRequestParam(arr: HttpRequestParam[]) {
   arr.push({
     key: '',
     type: BpmHttpRequestParamTypeEnum.FIXED_VALUE,
     value: '',
   });
-};
+}
 
 /** 删除请求配置项 */
-const deleteHttpRequestParam = (arr: HttpRequestParam[], index: number) => {
+function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
   arr.splice(index, 1);
-};
+}
 </script>
 <template>
   <FormItem
@@ -225,4 +225,3 @@ const deleteHttpRequestParam = (arr: HttpRequestParam[], index: number) => {
     </Button>
   </FormItem>
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue
index 011ae8e19..6f96dc4cd 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue
@@ -33,8 +33,11 @@ const props = defineProps({
     required: true,
   },
 });
+
 const emits = defineEmits(['update:setting']);
+
 const { setting } = toRefs(props);
+
 watch(
   () => setting,
   (val) => {
@@ -46,20 +49,20 @@ watch(
 const formFields = useFormFields();
 
 /** 添加 HTTP 请求返回值设置项 */
-const addHttpResponseSetting = (responseSetting: Record<string, string>[]) => {
+function addHttpResponseSetting(responseSetting: Record<string, string>[]) {
   responseSetting.push({
     key: '',
     value: '',
   });
-};
+}
 
 /** 删除 HTTP 请求返回值设置项 */
-const deleteHttpResponseSetting = (
+function deleteHttpResponseSetting(
   responseSetting: Record<string, string>[],
   index: number,
-) => {
+) {
   responseSetting.splice(index, 1);
-};
+}
 </script>
 <template>
   <FormItem>
@@ -171,4 +174,3 @@ const deleteHttpResponseSetting = (
     </FormItem>
   </div>
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue
index e071c6d82..328d1662b 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/user-task-listener.vue
@@ -23,8 +23,11 @@ const props = defineProps({
     required: true,
   },
 });
+
 const emit = defineEmits(['update:modelValue']);
+
 const listenerFormRef = ref();
+
 const configForm = computed({
   get() {
     return props.modelValue;
@@ -33,6 +36,7 @@ const configForm = computed({
     emit('update:modelValue', newValue);
   },
 });
+
 const taskListener = ref([
   {
     name: '创建任务',
@@ -48,10 +52,10 @@ const taskListener = ref([
   },
 ]);
 
-const validate = async () => {
+async function validate() {
   if (!listenerFormRef.value) return false;
   return await listenerFormRef.value.validate();
-};
+}
 
 defineExpose({ validate });
 </script>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue
index a1a553487..e42df7d24 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/router-node-config.vue
@@ -26,12 +26,14 @@ import { useNodeName, useWatchNode } from '../../helpers';
 import Condition from './modules/condition.vue';
 
 defineOptions({ name: 'RouterNodeConfig' });
+
 const props = defineProps({
   flowNode: {
     type: Object as () => SimpleFlowNode,
     required: true,
   },
 });
+
 const processNodeTree = inject<Ref<SimpleFlowNode>>('processNodeTree');
 
 /** 当前节点 */
@@ -46,7 +48,7 @@ const conditionRef = ref<any[]>([]);
 const formRef = ref();
 
 /** 校验节点配置 */
-const validateConfig = async () => {
+async function validateConfig() {
   // 校验路由分支选择
   const routeIdValid = await formRef.value.validate().catch(() => false);
   if (!routeIdValid) {
@@ -68,10 +70,10 @@ const validateConfig = async () => {
   if (!showText) return false;
 
   return true;
-};
+}
 
 /** 保存配置 */
-const saveConfig = async () => {
+async function saveConfig() {
   // 校验配置
   if (!(await validateConfig())) {
     return false;
@@ -82,7 +84,7 @@ const saveConfig = async () => {
   currentNode.value.routerGroups = routerGroups.value;
   drawerApi.close();
   return true;
-};
+}
 
 const [Drawer, drawerApi] = useVbenDrawer({
   title: nodeName.value,
@@ -90,7 +92,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 });
 
 /** 打开路由节点配置抽屉，由父组件调用 */
-const openDrawer = (node: SimpleFlowNode) => {
+function openDrawer(node: SimpleFlowNode) {
   nodeOptions.value = [];
   getRouterNode(processNodeTree?.value);
   routerGroups.value = [];
@@ -99,10 +101,10 @@ const openDrawer = (node: SimpleFlowNode) => {
     routerGroups.value = node.routerGroups;
   }
   drawerApi.open();
-};
+}
 
 /** 获取显示文本 */
-const getShowText = () => {
+function getShowText() {
   if (
     !routerGroups.value ||
     !Array.isArray(routerGroups.value) ||
@@ -135,10 +137,10 @@ const getShowText = () => {
     }
   }
   return `${routerGroups.value.length}条路由分支`;
-};
+}
 
 /** 添加路由分支 */
-const addRouterGroup = () => {
+function addRouterGroup() {
   routerGroups.value.push({
     nodeId: undefined,
     conditionType: ConditionType.RULE,
@@ -159,15 +161,15 @@ const addRouterGroup = () => {
       ],
     },
   });
-};
+}
 
 /** 删除路由分支 */
-const deleteRouterGroup = (index: number) => {
+function deleteRouterGroup(index: number) {
   routerGroups.value.splice(index, 1);
-};
+}
 
 /** 递归获取所有节点 */
-const getRouterNode = (node: any) => {
+function getRouterNode(node: any) {
   // TODO 最好还需要满足以下要求
   // 并行分支、包容分支内部节点不能跳转到外部节点
   // 条件分支节点可以向上跳转到外部节点
@@ -192,7 +194,7 @@ const getRouterNode = (node: any) => {
     }
     node = node.childNode;
   }
-};
+}
 
 defineExpose({ openDrawer }); // 暴露方法给父组件
 </script>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
index f061b0768..bcdb3d9a2 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/start-user-node-config.vue
@@ -37,12 +37,14 @@ import {
 } from '../../helpers';
 
 defineOptions({ name: 'StartUserNodeConfig' });
+
 const props = defineProps({
   flowNode: {
     type: Object as () => SimpleFlowNode,
     required: true,
   },
 });
+
 // 可发起流程的用户编号
 const startUserIds = inject<Ref<any[]>>('startUserIds');
 // 可发起流程的部门编号
@@ -59,10 +61,12 @@ const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
 );
 // 激活的 Tab 标签页
 const activeTabName = ref('user');
+
 // 表单字段权限配置
 const { formType, fieldsPermissionConfig, getNodeConfigFormFields } =
   useFormFieldsPermission(FieldPermissionType.WRITE);
-const getUserNicknames = (userIds: number[]): string => {
+
+function getUserNicknames(userIds: number[]): string {
   if (!userIds || userIds.length === 0) {
     return '';
   }
@@ -74,9 +78,9 @@ const getUserNicknames = (userIds: number[]): string => {
     }
   });
   return nicknames.join(',');
-};
+}
 
-const getDeptNames = (deptIds: number[]): string => {
+function getDeptNames(deptIds: number[]): string {
   if (!deptIds || deptIds.length === 0) {
     return '';
   }
@@ -88,7 +92,7 @@ const getDeptNames = (deptIds: number[]): string => {
     }
   });
   return deptNames.join(',');
-};
+}
 
 // 使用 VbenDrawer
 const [Drawer, drawerApi] = useVbenDrawer({
@@ -103,7 +107,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 });
 
 // 保存配置
-const saveConfig = async () => {
+async function saveConfig() {
   activeTabName.value = 'user';
   currentNode.value.name = nodeName.value!;
   currentNode.value.showText = '已设置';
@@ -113,18 +117,18 @@ const saveConfig = async () => {
   currentNode.value.buttonsSetting = START_USER_BUTTON_SETTING;
   drawerApi.setState({ isOpen: false });
   return true;
-};
+}
 
 // 显示发起人节点配置，由父组件传过来
-const showStartUserNodeConfig = (node: SimpleFlowNode) => {
+function showStartUserNodeConfig(node: SimpleFlowNode) {
   nodeName.value = node.name;
   // 表单字段权限
   getNodeConfigFormFields(node.fieldsPermission);
   drawerApi.open();
-};
+}
 
 /** 批量更新权限 */
-const updatePermission = (type: string) => {
+function updatePermission(type: string) {
   fieldsPermissionConfig.value.forEach((field) => {
     if (type === 'READ') {
       field.permission = FieldPermissionType.READ;
@@ -134,7 +138,7 @@ const updatePermission = (type: string) => {
       field.permission = FieldPermissionType.NONE;
     }
   });
-};
+}
 
 /**
  * 暴露方法给父组件
@@ -289,4 +293,3 @@ defineExpose({ showStartUserNodeConfig });
     </Tabs>
   </Drawer>
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
index e0431edf3..85b0726aa 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
@@ -76,6 +76,7 @@ const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
 );
 // 触发器表单配置
 const formRef = ref(); // 表单 Ref
+
 // 表单校验规则
 const formRules: Record<string, Rule[]> = reactive({
   type: [{ required: true, message: '触发器类型不能为空', trigger: 'change' }],
@@ -83,6 +84,7 @@ const formRules: Record<string, Rule[]> = reactive({
     { required: true, message: '请求地址不能为空', trigger: 'blur' },
   ],
 });
+
 // 触发器配置表单数据
 const configForm = ref<TriggerSetting>({
   type: TriggerTypeEnum.HTTP_REQUEST,
@@ -115,7 +117,7 @@ const optionalUpdateFormFields = computed(() => {
 let originalSetting: TriggerSetting | undefined;
 
 /** 触发器类型改变了 */
-const changeTriggerType = () => {
+function changeTriggerType() {
   if (configForm.value.type === TriggerTypeEnum.HTTP_REQUEST) {
     configForm.value.httpRequestSetting =
       originalSetting?.type === TriggerTypeEnum.HTTP_REQUEST &&
@@ -176,44 +178,48 @@ const changeTriggerType = () => {
           ];
     configForm.value.httpRequestSetting = undefined;
   }
-};
+}
 
 /** 添加新的修改表单设置 */
-const addFormSetting = () => {
+function addFormSetting() {
   configForm.value.formSettings!.push({
     conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
     updateFormFields: {},
     deleteFields: [],
   });
-};
+}
 
 /** 删除修改表单设置 */
-const deleteFormSetting = (index: number) => {
+function deleteFormSetting(index: number) {
   configForm.value.formSettings!.splice(index, 1);
-};
+}
 
 /** 添加条件配置 */
-const addFormSettingCondition = (
+function addFormSettingCondition(
   index: number,
   formSetting: FormTriggerSetting,
-) => {
+) {
   const conditionDialog = proxy.$refs[`condition-${index}`][0];
+  // TODO: jason Modal 使用 useVbenModal 初始化，弹出使用modalApi.setData(formSetting).open()
   conditionDialog.open(formSetting);
-};
+}
+
 /** 删除条件配置 */
-const deleteFormSettingCondition = (formSetting: FormTriggerSetting) => {
+function deleteFormSettingCondition(formSetting: FormTriggerSetting) {
   formSetting.conditionType = undefined;
-};
+}
+
 /** 打开条件配置弹窗 */
-const openFormSettingCondition = (
+function openFormSettingCondition(
   index: number,
   formSetting: FormTriggerSetting,
-) => {
+) {
   const conditionDialog = proxy.$refs[`condition-${index}`][0];
   conditionDialog.open(formSetting);
-};
+}
+
 /** 处理条件配置保存 */
-const handleConditionUpdate = (index: number, condition: any) => {
+function handleConditionUpdate(index: number, condition: any) {
   if (configForm.value.formSettings![index]) {
     configForm.value.formSettings![index].conditionType =
       condition.conditionType;
@@ -222,50 +228,48 @@ const handleConditionUpdate = (index: number, condition: any) => {
     configForm.value.formSettings![index].conditionGroups =
       condition.conditionGroups;
   }
-};
+}
 // 包含发起人字段的表单字段
 const includeStartUserFormFields = useFormFieldsAndStartUser();
 /** 条件配置展示 */
-const showConditionText = (formSetting: FormTriggerSetting) => {
+function showConditionText(formSetting: FormTriggerSetting) {
   return getConditionShowText(
     formSetting.conditionType,
     formSetting.conditionExpression,
     formSetting.conditionGroups,
     includeStartUserFormFields,
   );
-};
+}
 
 /** 添加修改字段设置项 */
-const addFormFieldSetting = (formSetting: FormTriggerSetting) => {
+function addFormFieldSetting(formSetting: FormTriggerSetting) {
   if (!formSetting) return;
   if (!formSetting.updateFormFields) {
     formSetting.updateFormFields = {};
   }
   formSetting.updateFormFields[''] = undefined;
-};
+}
+
 /** 更新字段 KEY */
-const updateFormFieldKey = (
+function updateFormFieldKey(
   formSetting: FormTriggerSetting,
   oldKey: string,
   newKey: SelectValue,
-) => {
+) {
   if (!formSetting?.updateFormFields || !newKey) return;
   const value = formSetting.updateFormFields[oldKey];
   delete formSetting.updateFormFields[oldKey];
   formSetting.updateFormFields[String(newKey)] = value;
-};
+}
 
 /** 删除修改字段设置项 */
-const deleteFormFieldSetting = (
-  formSetting: FormTriggerSetting,
-  key: string,
-) => {
+function deleteFormFieldSetting(formSetting: FormTriggerSetting, key: string) {
   if (!formSetting?.updateFormFields) return;
   delete formSetting.updateFormFields[key];
-};
+}
 
 /** 保存配置 */
-const saveConfig = async () => {
+async function saveConfig() {
   if (!formRef.value) return false;
   const valid = await formRef.value.validate();
   if (!valid) return false;
@@ -302,10 +306,10 @@ const saveConfig = async () => {
   currentNode.value.triggerSetting = configForm.value;
   drawerApi.close();
   return true;
-};
+}
 
 /** 获取节点展示内容 */
-const getShowText = (): string => {
+function getShowText(): string {
   let showText = '';
   switch (configForm.value.type) {
     case TriggerTypeEnum.FORM_DELETE: {
@@ -342,10 +346,10 @@ const getShowText = (): string => {
     // No default
   }
   return showText;
-};
+}
 
 /** 显示触发器节点配置， 由父组件传过来 */
-const showTriggerNodeConfig = (node: SimpleFlowNode) => {
+function showTriggerNodeConfig(node: SimpleFlowNode) {
   nodeName.value = node.name;
   originalSetting = node.triggerSetting
     ? cloneDeep(node.triggerSetting)
@@ -369,7 +373,7 @@ const showTriggerNodeConfig = (node: SimpleFlowNode) => {
     };
   }
   drawerApi.open();
-};
+}
 
 // 暴露方法给父组件
 defineExpose({ showTriggerNodeConfig });
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
index c70ae0a9d..1ee36fb1f 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue
@@ -70,15 +70,18 @@ import UserTaskListener from './modules/user-task-listener.vue';
 import { convertTimeUnit, getApproveTypeText } from './utils';
 
 defineOptions({ name: 'UserTaskNodeConfig' });
+
 const props = defineProps({
   flowNode: {
     type: Object as () => SimpleFlowNode,
     required: true,
   },
 });
+
 const emits = defineEmits<{
   findReturnTaskNodes: [nodeList: SimpleFlowNode[]];
 }>();
+
 const deptLevelLabel = computed(() => {
   let label = '部门负责人来源';
   if (
@@ -95,6 +98,7 @@ const deptLevelLabel = computed(() => {
   }
   return label;
 });
+
 // 监控节点的变化
 const currentNode = useWatchNode(props);
 // 抽屉配置
@@ -106,12 +110,15 @@ const [Drawer, drawerApi] = useVbenDrawer({
     saveConfig();
   },
 });
+
 // 节点名称配置
 const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
   NodeType.USER_TASK_NODE,
 );
+
 // 激活的 Tab 标签页
 const activeTabName = ref('user');
+
 // 表单字段权限设置
 const {
   formType,
@@ -119,10 +126,12 @@ const {
   formFieldOptions,
   getNodeConfigFormFields,
 } = useFormFieldsPermission(FieldPermissionType.READ);
+
 // 表单内用户字段选项, 必须是必填和用户选择器
 const userFieldOnFormOptions = computed(() => {
   return formFieldOptions.filter((item) => item.type === 'UserSelect');
 });
+
 // 表单内部门字段选项, 必须是必填和部门选择器
 const deptFieldOnFormOptions = computed(() => {
   return formFieldOptions.filter((item) => item.type === 'DeptSelect');
@@ -135,7 +144,9 @@ const {
   changeBtnDisplayName,
   btnDisplayNameBlurEvent,
 } = useButtonsSetting();
+
 const approveType = ref(ApproveType.USER);
+
 // 审批人表单设置
 const formRef = ref(); // 表单 Ref
 // 表单校验规则
@@ -197,7 +208,7 @@ const {
 const configForm = tempConfigForm as Ref<UserTaskFormType>;
 
 // 改变审批人设置策略
-const changeCandidateStrategy = () => {
+function changeCandidateStrategy() {
   configForm.value.userIds = [];
   configForm.value.deptIds = [];
   configForm.value.roleIds = [];
@@ -207,16 +218,16 @@ const changeCandidateStrategy = () => {
   configForm.value.formUser = '';
   configForm.value.formDept = '';
   configForm.value.approveMethod = ApproveMethodType.SEQUENTIAL_APPROVE;
-};
+}
 
 /** 审批方式改变 */
-const approveMethodChanged = () => {
+function approveMethodChanged() {
   configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS;
   if (configForm.value.approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
     configForm.value.approveRatio = 100;
   }
   formRef.value.clearValidate('approveRatio');
-};
+}
 // 审批拒绝 可退回的节点
 const returnTaskList = ref<SimpleFlowNode[]>([]);
 // 审批人超时未处理设置
@@ -238,7 +249,7 @@ const nodeTypeName = computed(() => {
 });
 
 /** 校验节点配置 */
-const validateConfig = async () => {
+async function validateConfig() {
   if (!formRef.value) return false;
   if (!userTaskListenerRef.value) return false;
 
@@ -262,9 +273,10 @@ const validateConfig = async () => {
   if (!showText) return false;
 
   return true;
-};
+}
+
 /** 保存配置 */
-const saveConfig = async () => {
+async function saveConfig() {
   // 如果不是人工审批，不执行校验，直接返回
   if (approveType.value !== ApproveType.USER) {
     currentNode.value.name = nodeName.value!;
@@ -347,10 +359,10 @@ const saveConfig = async () => {
   currentNode.value.showText = getShowText();
   drawerApi.close();
   return true;
-};
+}
 
 /** 显示审批节点配置， 由父组件传过来 */
-const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
+function showUserTaskNodeConfig(node: SimpleFlowNode) {
   nodeName.value = node.name;
   // 1 审批类型
   approveType.value =
@@ -429,7 +441,7 @@ const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
   configForm.value.reasonRequire = node?.reasonRequire ?? false;
 
   drawerApi.open();
-};
+}
 
 defineExpose({ showUserTaskNodeConfig }); // 暴露方法给父组件
 
@@ -541,7 +553,7 @@ function useTimeoutHandler() {
 }
 
 /** 批量更新权限 */
-const updatePermission = (type: string) => {
+function updatePermission(type: string) {
   fieldsPermissionConfig.value.forEach((field) => {
     if (type === 'READ') {
       field.permission = FieldPermissionType.READ;
@@ -551,7 +563,8 @@ const updatePermission = (type: string) => {
       field.permission = FieldPermissionType.NONE;
     }
   });
-};
+}
+
 // 在组件初始化时记录初始位置
 onMounted(() => {
   // 固定添加发起人ID字段
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/utils.ts b/apps/web-antd/src/components/simple-process-design/components/nodes-config/utils.ts
index c6ab47eca..ee5e06809 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/utils.ts
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/utils.ts
@@ -1,29 +1,29 @@
 import { APPROVE_TYPE, ApproveType, TimeUnitType } from '../../consts';
 
 /** 获取条件节点默认的名称 */
-export const getDefaultConditionNodeName = (
+export function getDefaultConditionNodeName(
   index: number,
   defaultFlow: boolean | undefined,
-): string => {
+): string {
   if (defaultFlow) {
     return '其它情况';
   }
   return `条件${index + 1}`;
-};
+}
 
 /** 获取包容分支条件节点默认的名称 */
-export const getDefaultInclusiveConditionNodeName = (
+export function getDefaultInclusiveConditionNodeName(
   index: number,
   defaultFlow: boolean | undefined,
-): string => {
+): string {
   if (defaultFlow) {
     return '其它情况';
   }
   return `包容条件${index + 1}`;
-};
+}
 
 /** 转换时间单位字符串为枚举值 */
-export const convertTimeUnit = (strTimeUnit: string) => {
+export function convertTimeUnit(strTimeUnit: string) {
   if (strTimeUnit === 'M') {
     return TimeUnitType.MINUTE;
   }
@@ -34,10 +34,10 @@ export const convertTimeUnit = (strTimeUnit: string) => {
     return TimeUnitType.DAY;
   }
   return TimeUnitType.HOUR;
-};
+}
 
 /** 根据审批类型获取对应的文本描述 */
-export const getApproveTypeText = (approveType: ApproveType): string => {
+export function getApproveTypeText(approveType: ApproveType): string {
   let approveTypeText = '';
   APPROVE_TYPE.forEach((item) => {
     if (item.value === approveType) {
@@ -45,4 +45,4 @@ export const getApproveTypeText = (approveType: ApproveType): string => {
     }
   });
   return approveTypeText;
-};
+}
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/copy-task-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/copy-task-node.vue
index a3226a576..c9bd17190 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/copy-task-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/copy-task-node.vue
@@ -37,18 +37,18 @@ const { showInput, blurEvent, clickTitle } = useNodeName2(
 
 const nodeSetting = ref();
 // 打开节点配置
-const openNodeConfig = () => {
+function openNodeConfig() {
   if (readonly) {
     return;
   }
   nodeSetting.value.showCopyTaskNodeConfig(currentNode.value);
   nodeSetting.value.openDrawer();
-};
+}
 
 // 删除节点。更新当前节点为孩子节点
-const deleteNode = () => {
+function deleteNode() {
   emits('update:flowNode', currentNode.value.childNode);
-};
+}
 </script>
 <template>
   <div class="node-wrapper">
@@ -115,4 +115,3 @@ const deleteNode = () => {
     />
   </div>
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue
index 59b887a4b..fa83d4ebe 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/delay-timer-node.vue
@@ -35,17 +35,17 @@ const { showInput, blurEvent, clickTitle } = useNodeName2(
 
 const nodeSetting = ref();
 // 打开节点配置
-const openNodeConfig = () => {
+function openNodeConfig() {
   if (readonly) {
     return;
   }
   nodeSetting.value.openDrawer(currentNode.value);
-};
+}
 
 // 删除节点。更新当前节点为孩子节点
-const deleteNode = () => {
+function deleteNode() {
   emits('update:flowNode', currentNode.value.childNode);
-};
+}
 </script>
 <template>
   <div class="node-wrapper">
@@ -112,4 +112,3 @@ const deleteNode = () => {
     />
   </div>
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue
index cccca4dbb..c03fac9c9 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue
@@ -22,7 +22,7 @@ const processInstance = inject<Ref<any>>('processInstance', ref({}));
 
 const processInstanceInfos = ref<any[]>([]); // 流程的审批信息
 
-const nodeClick = () => {
+function nodeClick() {
   if (readonly && processInstance && processInstance.value) {
     console.warn(
       'TODO 只读模式，弹窗显示审批信息',
@@ -30,7 +30,7 @@ const nodeClick = () => {
       processInstanceInfos.value,
     );
   }
-};
+}
 </script>
 <template>
   <div class="end-node-wrapper">
@@ -44,4 +44,3 @@ const nodeClick = () => {
   </div>
   <!-- TODO 审批信息 -->
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue
index fb00d2e71..e37edc298 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/exclusive-node.vue
@@ -20,12 +20,14 @@ import ProcessNodeTree from '../process-node-tree.vue';
 import NodeHandler from './node-handler.vue';
 
 defineOptions({ name: 'ExclusiveNode' });
+
 const props = defineProps({
   flowNode: {
     type: Object as () => SimpleFlowNode,
     required: true,
   },
 });
+
 // 定义事件，更新父组件
 const emits = defineEmits<{
   findParentNode: [nodeList: SimpleFlowNode[], nodeType: number];
@@ -36,10 +38,12 @@ const emits = defineEmits<{
   ];
   'update:modelValue': [node: SimpleFlowNode | undefined];
 }>();
+
 const { proxy } = getCurrentInstance() as any;
 // 是否只读
 const readonly = inject<Boolean>('readonly');
 const currentNode = ref<SimpleFlowNode>(props.flowNode);
+
 watch(
   () => props.flowNode,
   (newValue) => {
@@ -48,8 +52,9 @@ watch(
 );
 
 const showInputs = ref<boolean[]>([]);
+
 // 失去焦点
-const blurEvent = (index: number) => {
+function blurEvent(index: number) {
   showInputs.value[index] = false;
   const conditionNode = currentNode.value.conditionNodes?.at(
     index,
@@ -60,23 +65,23 @@ const blurEvent = (index: number) => {
       index,
       conditionNode.conditionSetting?.defaultFlow,
     );
-};
+}
 
 // 点击条件名称
-const clickEvent = (index: number) => {
+function clickEvent(index: number) {
   showInputs.value[index] = true;
-};
+}
 
-const conditionNodeConfig = (nodeId: string) => {
+function conditionNodeConfig(nodeId: string) {
   if (readonly) {
     return;
   }
   const conditionNode = proxy.$refs[nodeId][0];
   conditionNode.open();
-};
+}
 
 // 新增条件
-const addCondition = () => {
+function addCondition() {
   const conditionNodes = currentNode.value.conditionNodes;
   if (conditionNodes) {
     const len = conditionNodes.length;
@@ -96,10 +101,10 @@ const addCondition = () => {
     };
     conditionNodes.splice(lastIndex, 0, conditionData);
   }
-};
+}
 
 // 删除条件
-const deleteCondition = (index: number) => {
+function deleteCondition(index: number) {
   const conditionNodes = currentNode.value.conditionNodes;
   if (conditionNodes) {
     conditionNodes.splice(index, 1);
@@ -109,10 +114,10 @@ const deleteCondition = (index: number) => {
       emits('update:modelValue', childNode);
     }
   }
-};
+}
 
 // 移动节点
-const moveNode = (index: number, to: number) => {
+function moveNode(index: number, to: number) {
   // -1 ：向左  1： 向右
   if (
     currentNode.value.conditionNodes &&
@@ -125,13 +130,14 @@ const moveNode = (index: number, to: number) => {
         currentNode.value.conditionNodes[index],
       )[0] as SimpleFlowNode;
   }
-};
+}
+
 // 递归从父节点中查询匹配的节点
-const recursiveFindParentNode = (
+function recursiveFindParentNode(
   nodeList: SimpleFlowNode[],
   node: SimpleFlowNode,
   nodeType: number,
-) => {
+) {
   if (!node || node.type === NodeType.START_USER_NODE) {
     return;
   }
@@ -140,7 +146,7 @@ const recursiveFindParentNode = (
   }
   // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点（NodeType.EXCLUSIVE_NODE) 继续查找
   emits('findParentNode', nodeList, nodeType);
-};
+}
 </script>
 <template>
   <div class="branch-node-wrapper">
@@ -274,4 +280,3 @@ const recursiveFindParentNode = (
     />
   </div>
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue
index 8d613c8ca..cad293d7f 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/inclusive-node.vue
@@ -25,12 +25,14 @@ import NodeHandler from './node-handler.vue';
 defineOptions({
   name: 'InclusiveNode',
 });
+
 const props = defineProps({
   flowNode: {
     type: Object as () => SimpleFlowNode,
     required: true,
   },
 });
+
 // 定义事件，更新父组件
 const emits = defineEmits<{
   findParentNode: [nodeList: SimpleFlowNode[], nodeType: number];
@@ -41,6 +43,7 @@ const emits = defineEmits<{
   ];
   'update:modelValue': [node: SimpleFlowNode | undefined];
 }>();
+
 const { proxy } = getCurrentInstance() as any;
 // 是否只读
 const readonly = inject<Boolean>('readonly');
@@ -56,7 +59,7 @@ watch(
 
 const showInputs = ref<boolean[]>([]);
 // 失去焦点
-const blurEvent = (index: number) => {
+function blurEvent(index: number) {
   showInputs.value[index] = false;
   const conditionNode = currentNode.value.conditionNodes?.at(
     index,
@@ -67,23 +70,23 @@ const blurEvent = (index: number) => {
       index,
       conditionNode.conditionSetting?.defaultFlow,
     );
-};
+}
 
 // 点击条件名称
-const clickEvent = (index: number) => {
+function clickEvent(index: number) {
   showInputs.value[index] = true;
-};
+}
 
-const conditionNodeConfig = (nodeId: string) => {
+function conditionNodeConfig(nodeId: string) {
   if (readonly) {
     return;
   }
   const conditionNode = proxy.$refs[nodeId][0];
   conditionNode.open();
-};
+}
 
 // 新增条件
-const addCondition = () => {
+function addCondition() {
   const conditionNodes = currentNode.value.conditionNodes;
   if (conditionNodes) {
     const len = conditionNodes.length;
@@ -103,10 +106,10 @@ const addCondition = () => {
     };
     conditionNodes.splice(lastIndex, 0, conditionData);
   }
-};
+}
 
 // 删除条件
-const deleteCondition = (index: number) => {
+function deleteCondition(index: number) {
   const conditionNodes = currentNode.value.conditionNodes;
   if (conditionNodes) {
     conditionNodes.splice(index, 1);
@@ -116,10 +119,10 @@ const deleteCondition = (index: number) => {
       emits('update:modelValue', childNode);
     }
   }
-};
+}
 
 // 移动节点
-const moveNode = (index: number, to: number) => {
+function moveNode(index: number, to: number) {
   // -1 ：向左  1： 向右
   if (
     currentNode.value.conditionNodes &&
@@ -132,13 +135,14 @@ const moveNode = (index: number, to: number) => {
         currentNode.value.conditionNodes[index],
       )[0] as SimpleFlowNode;
   }
-};
+}
+
 // 递归从父节点中查询匹配的节点
-const recursiveFindParentNode = (
+function recursiveFindParentNode(
   nodeList: SimpleFlowNode[],
   node: SimpleFlowNode,
   nodeType: number,
-) => {
+) {
   if (!node || node.type === NodeType.START_USER_NODE) {
     return;
   }
@@ -147,7 +151,7 @@ const recursiveFindParentNode = (
   }
   // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点（NodeType.INCLUSIVE_BRANCH_NODE) 继续查找
   emits('findParentNode', nodeList, nodeType);
-};
+}
 </script>
 <template>
   <div class="branch-node-wrapper">
@@ -279,4 +283,3 @@ const recursiveFindParentNode = (
     />
   </div>
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue
index 01ab889dc..dee4e6985 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/node-handler.vue
@@ -33,11 +33,12 @@ const props = defineProps({
     required: true,
   },
 });
+
 const emits = defineEmits(['update:childNode']);
 const popoverShow = ref(false);
 const readonly = inject<Boolean>('readonly'); // 是否只读
 
-const addNode = (type: number) => {
+function addNode(type: number) {
   // 校验：条件分支、包容分支后面，不允许直接添加并行分支
   if (
     type === NodeType.PARALLEL_BRANCH_NODE &&
@@ -238,7 +239,7 @@ const addNode = (type: number) => {
     };
     emits('update:childNode', data);
   }
-};
+}
 </script>
 <template>
   <div class="node-handler-wrapper">
@@ -334,5 +335,3 @@ const addNode = (type: number) => {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/parallel-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/parallel-node.vue
index f2424ca92..977de0955 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/parallel-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/parallel-node.vue
@@ -14,12 +14,14 @@ import ProcessNodeTree from '../process-node-tree.vue';
 import NodeHandler from './node-handler.vue';
 
 defineOptions({ name: 'ParallelNode' });
+
 const props = defineProps({
   flowNode: {
     type: Object as () => SimpleFlowNode,
     required: true,
   },
 });
+
 // 定义事件，更新父组件
 const emits = defineEmits<{
   findParnetNode: [nodeList: SimpleFlowNode[], nodeType: number];
@@ -30,6 +32,7 @@ const emits = defineEmits<{
   ];
   'update:modelValue': [node: SimpleFlowNode | undefined];
 }>();
+
 const currentNode = ref<SimpleFlowNode>(props.flowNode);
 // 是否只读
 const readonly = inject<Boolean>('readonly');
@@ -42,22 +45,23 @@ watch(
 );
 
 const showInputs = ref<boolean[]>([]);
+
 // 失去焦点
-const blurEvent = (index: number) => {
+function blurEvent(index: number) {
   showInputs.value[index] = false;
   const conditionNode = currentNode.value.conditionNodes?.at(
     index,
   ) as SimpleFlowNode;
   conditionNode.name = conditionNode.name || `并行${index + 1}`;
-};
+}
 
 // 点击条件名称
-const clickEvent = (index: number) => {
+function clickEvent(index: number) {
   showInputs.value[index] = true;
-};
+}
 
 // 新增条件
-const addCondition = () => {
+function addCondition() {
   const conditionNodes = currentNode.value.conditionNodes;
   if (conditionNodes) {
     const len = conditionNodes.length;
@@ -72,10 +76,10 @@ const addCondition = () => {
     };
     conditionNodes.splice(lastIndex, 0, conditionData);
   }
-};
+}
 
 // 删除条件
-const deleteCondition = (index: number) => {
+function deleteCondition(index: number) {
   const conditionNodes = currentNode.value.conditionNodes;
   if (conditionNodes) {
     conditionNodes.splice(index, 1);
@@ -85,14 +89,14 @@ const deleteCondition = (index: number) => {
       emits('update:modelValue', childNode);
     }
   }
-};
+}
 
 // 递归从父节点中查询匹配的节点
-const recursiveFindParentNode = (
+function recursiveFindParentNode(
   nodeList: SimpleFlowNode[],
   node: SimpleFlowNode,
   nodeType: number,
-) => {
+) {
   if (!node || node.type === NodeType.START_USER_NODE) {
     return;
   }
@@ -101,7 +105,7 @@ const recursiveFindParentNode = (
   }
   // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点并行节点（NodeType.PARALLEL_NODE) 继续查找
   emits('findParnetNode', nodeList, nodeType);
-};
+}
 </script>
 <template>
   <div class="branch-node-wrapper">
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/router-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/router-node.vue
index 30014befc..1c0538232 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/router-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/router-node.vue
@@ -20,10 +20,12 @@ const props = defineProps({
     required: true,
   },
 });
+
 // 定义事件，更新父组件
 const emits = defineEmits<{
   'update:flowNode': [node: SimpleFlowNode | undefined];
 }>();
+
 // 是否只读
 const readonly = inject<Boolean>('readonly');
 // 监控节点的变化
@@ -36,17 +38,17 @@ const { showInput, blurEvent, clickTitle } = useNodeName2(
 
 const nodeSetting = ref();
 // 打开节点配置
-const openNodeConfig = () => {
+function openNodeConfig() {
   if (readonly) {
     return;
   }
   nodeSetting.value.openDrawer(currentNode.value);
-};
+}
 
 // 删除节点。更新当前节点为孩子节点
-const deleteNode = () => {
+function deleteNode() {
   emits('update:flowNode', currentNode.value.childNode);
-};
+}
 </script>
 <template>
   <div class="node-wrapper">
@@ -112,4 +114,3 @@ const deleteNode = () => {
     />
   </div>
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue
index 2edb10935..f71a80217 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue
@@ -15,17 +15,20 @@ import StartUserNodeConfig from '../nodes-config/start-user-node-config.vue';
 import NodeHandler from './node-handler.vue';
 
 defineOptions({ name: 'StartUserNode' });
+
 const props = defineProps({
   flowNode: {
     type: Object as () => SimpleFlowNode,
     default: () => null,
   },
 });
+
 // 定义事件，更新父组件。
-// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
-const emits = defineEmits<{
+// const emits = defineEmits<{
+defineEmits<{
   'update:modelValue': [node: SimpleFlowNode | undefined];
 }>();
+
 const readonly = inject<Boolean>('readonly'); // 是否只读
 const tasks = inject<Ref<any[]>>('tasks', ref([]));
 // 监控节点变化
@@ -41,7 +44,7 @@ const nodeSetting = ref();
 // 任务的弹窗显示，用于只读模式
 const selectTasks = ref<any[] | undefined>([]); // 选中的任务数组
 
-const nodeClick = () => {
+function nodeClick() {
   if (readonly) {
     // 只读模式，弹窗显示任务信息
     if (tasks && tasks.value) {
@@ -58,7 +61,7 @@ const nodeClick = () => {
     );
     nodeSetting.value.showStartUserNodeConfig(currentNode.value);
   }
-};
+}
 </script>
 <template>
   <div class="node-wrapper">
@@ -116,4 +119,3 @@ const nodeClick = () => {
   />
   <!-- 审批记录  TODO -->
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/trigger-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/trigger-node.vue
index a9f30171a..bf8e8012b 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/trigger-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/trigger-node.vue
@@ -22,10 +22,12 @@ const props = defineProps({
     required: true,
   },
 });
+
 // 定义事件，更新父组件
 const emits = defineEmits<{
   'update:flowNode': [node: SimpleFlowNode | undefined];
 }>();
+
 // 是否只读
 const readonly = inject<Boolean>('readonly');
 // 监控节点的变化
@@ -38,17 +40,17 @@ const { showInput, blurEvent, clickTitle } = useNodeName2(
 
 const nodeSetting = ref();
 // 打开节点配置
-const openNodeConfig = () => {
+function openNodeConfig() {
   if (readonly) {
     return;
   }
   nodeSetting.value.showTriggerNodeConfig(currentNode.value);
-};
+}
 
 // 删除节点。更新当前节点为孩子节点
-const deleteNode = () => {
+function deleteNode() {
   emits('update:flowNode', currentNode.value.childNode);
-};
+}
 </script>
 <template>
   <div class="node-wrapper">
@@ -115,4 +117,3 @@ const deleteNode = () => {
     />
   </div>
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue
index b2a2055fc..270760e37 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue
@@ -22,6 +22,7 @@ const props = defineProps({
     required: true,
   },
 });
+
 const emits = defineEmits<{
   findParentNode: [nodeList: SimpleFlowNode[], nodeType: NodeType];
   'update:flowNode': [node: SimpleFlowNode | undefined];
@@ -39,7 +40,7 @@ const { showInput, blurEvent, clickTitle } = useNodeName2(
 );
 const nodeSetting = ref();
 
-const nodeClick = () => {
+function nodeClick() {
   if (readonly) {
     if (tasks && tasks.value) {
       // 只读模式，弹窗显示任务信息 TODO 待实现
@@ -49,18 +50,18 @@ const nodeClick = () => {
     // 编辑模式，打开节点配置、把当前节点传递给配置组件
     nodeSetting.value.showUserTaskNodeConfig(currentNode.value);
   }
-};
+}
 
-const deleteNode = () => {
+function deleteNode() {
   emits('update:flowNode', currentNode.value.childNode);
-};
+}
 // 查找可以驳回用户节点
-const findReturnTaskNodes = (
+function findReturnTaskNodes(
   matchNodeList: SimpleFlowNode[], // 匹配的节点
-) => {
+) {
   // 从父节点查找
   emits('findParentNode', matchNodeList, NodeType.USER_TASK_NODE);
-};
+}
 
 // const selectTasks = ref<any[] | undefined>([]); // 选中的任务数组
 </script>
@@ -135,4 +136,3 @@ const findReturnTaskNodes = (
   />
   <!--  TODO 审批记录 -->
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
index 25516b7f7..1efbce306 100644
--- a/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue
@@ -15,6 +15,7 @@ import TriggerNode from './nodes/trigger-node.vue';
 import UserTaskNode from './nodes/user-task-node.vue';
 
 defineOptions({ name: 'ProcessNodeTree' });
+
 const props = defineProps({
   parentNode: {
     type: Object as () => SimpleFlowNode,
@@ -25,6 +26,7 @@ const props = defineProps({
     default: () => null,
   },
 });
+
 const emits = defineEmits<{
   recursiveFindParentNode: [
     nodeList: SimpleFlowNode[],
@@ -47,11 +49,11 @@ const findParentNode = (nodeList: SimpleFlowNode[], nodeType: number) => {
 };
 
 // 递归从父节点中查询匹配的节点
-const recursiveFindParentNode = (
+function recursiveFindParentNode(
   nodeList: SimpleFlowNode[],
   findNode: SimpleFlowNode,
   nodeType: number,
-) => {
+) {
   if (!findNode) {
     return;
   }
@@ -64,7 +66,7 @@ const recursiveFindParentNode = (
     nodeList.push(findNode);
   }
   emits('recursiveFindParentNode', nodeList, props.parentNode, nodeType);
-};
+}
 </script>
 <template>
   <!-- 发起人节点 -->
@@ -148,4 +150,3 @@ const recursiveFindParentNode = (
     :flow-node="currentNode"
   />
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue b/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
index 7f2762ca1..c189e129a 100644
--- a/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
@@ -116,7 +116,7 @@ const errorDialogVisible = ref(false);
 const errorNodes: SimpleFlowNode[] = [];
 
 // 添加更新模型的方法
-const updateModel = () => {
+function updateModel() {
   if (!processNodeTree.value) {
     processNodeTree.value = {
       name: '发起人',
@@ -131,11 +131,11 @@ const updateModel = () => {
     // 初始化时也触发一次保存
     saveSimpleFlowModel(processNodeTree.value);
   }
-};
+}
 
-const saveSimpleFlowModel = async (
+async function saveSimpleFlowModel(
   simpleModelNode: SimpleFlowNode | undefined,
-) => {
+) {
   if (!simpleModelNode) {
     return;
   }
@@ -146,16 +146,15 @@ const saveSimpleFlowModel = async (
   } catch (error) {
     console.error('保存失败:', error);
   }
-};
+}
 
 /**
  * 校验节点设置。 暂时以 showText 为空 未节点错误配置
  */
-// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
-const validateNode = (
+function validateNode(
   node: SimpleFlowNode | undefined,
   errorNodes: SimpleFlowNode[],
-) => {
+) {
   if (node) {
     const { type, showText, conditionNodes } = node;
     if (type === NodeType.END_EVENT_NODE) {
@@ -163,7 +162,7 @@ const validateNode = (
     }
     if (type === NodeType.START_USER_NODE) {
       // 发起人节点暂时不用校验，直接校验孩子节点
-      validateNode(node.childNode, errorNodes);
+      useValidateNode(node.childNode, errorNodes);
     }
 
     if (
@@ -174,7 +173,7 @@ const validateNode = (
       if (!showText) {
         errorNodes.push(node);
       }
-      validateNode(node.childNode, errorNodes);
+      useValidateNode(node.childNode, errorNodes);
     }
 
     if (
@@ -185,13 +184,20 @@ const validateNode = (
       // 分支节点
       // 1. 先校验各个分支
       conditionNodes?.forEach((item) => {
-        validateNode(item, errorNodes);
+        useValidateNode(item, errorNodes);
       });
       // 2. 校验孩子节点
-      validateNode(node.childNode, errorNodes);
+      useValidateNode(node.childNode, errorNodes);
     }
   }
-};
+}
+
+function useValidateNode(
+  node: SimpleFlowNode | undefined,
+  errorNodes: SimpleFlowNode[],
+) {
+  validateNode(node, errorNodes);
+}
 
 onMounted(async () => {
   try {
diff --git a/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue b/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue
index cfd2e6a84..b09c4e079 100644
--- a/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue
@@ -49,22 +49,22 @@ const currentY = ref(0);
 const initialX = ref(0);
 const initialY = ref(0);
 
-const setGrabCursor = () => {
+function setGrabCursor() {
   document.body.style.cursor = 'grab';
-};
+}
 
-const resetCursor = () => {
+function resetCursor() {
   document.body.style.cursor = 'default';
-};
+}
 
-const startDrag = (e: MouseEvent) => {
+function startDrag(e: MouseEvent) {
   isDragging.value = true;
   startX.value = e.clientX - currentX.value;
   startY.value = e.clientY - currentY.value;
   setGrabCursor(); // 设置小手光标
-};
+}
 
-const onDrag = (e: MouseEvent) => {
+function onDrag(e: MouseEvent) {
   if (!isDragging.value) return;
   e.preventDefault(); // 禁用文本选择
 
@@ -73,44 +73,44 @@ const onDrag = (e: MouseEvent) => {
     currentX.value = e.clientX - startX.value;
     currentY.value = e.clientY - startY.value;
   });
-};
+}
 
-const stopDrag = () => {
+function stopDrag() {
   isDragging.value = false;
   resetCursor(); // 重置光标
-};
+}
 
-const zoomIn = () => {
+function zoomIn() {
   if (scaleValue.value === MAX_SCALE_VALUE) {
     return;
   }
   scaleValue.value += 10;
-};
+}
 
-const zoomOut = () => {
+function zoomOut() {
   if (scaleValue.value === MIN_SCALE_VALUE) {
     return;
   }
   scaleValue.value -= 10;
-};
+}
 
-const processReZoom = () => {
+function processReZoom() {
   scaleValue.value = 100;
-};
+}
 
-const resetPosition = () => {
+function resetPosition() {
   currentX.value = initialX.value;
   currentY.value = initialY.value;
-};
+}
 
 /** 校验节点设置 */
 const errorDialogVisible = ref(false);
 let errorNodes: SimpleFlowNode[] = [];
 
-const validateNode = (
+function validateNode(
   node: SimpleFlowNode | undefined,
   errorNodes: SimpleFlowNode[],
-) => {
+) {
   if (node) {
     const { type, showText, conditionNodes } = node;
     if (type === NodeType.END_EVENT_NODE) {
@@ -146,10 +146,10 @@ const validateNode = (
       validateNode(node.childNode, errorNodes);
     }
   }
-};
+}
 
 /** 获取当前流程数据 */
-const getCurrentFlowData = async () => {
+async function getCurrentFlowData() {
   try {
     errorNodes = [];
     validateNode(processNodeTree.value, errorNodes);
@@ -162,26 +162,26 @@ const getCurrentFlowData = async () => {
     console.error('获取流程数据失败:', error);
     return undefined;
   }
-};
+}
 
 defineExpose({
   getCurrentFlowData,
 });
 
 /** 导出 JSON */
-const exportJson = () => {
+function exportJson() {
   downloadFileFromBlob({
     fileName: 'model.json',
     source: new Blob([JSON.stringify(processNodeTree.value)]),
   });
-};
+}
 
 /** 导入 JSON */
 const refFile = ref();
-const importJson = () => {
+function importJson() {
   refFile.value.click();
-};
-const importLocalFile = () => {
+}
+function importLocalFile() {
   const file = refFile.value.files[0];
   file.text().then((result: any) => {
     if (isString(result)) {
@@ -189,7 +189,7 @@ const importLocalFile = () => {
       emits('save', processNodeTree.value);
     }
   });
-};
+}
 
 // 在组件初始化时记录初始位置
 onMounted(() => {
@@ -267,4 +267,3 @@ onMounted(() => {
     </template>
   </Modal>
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/components/simple-process-design/helpers.ts b/apps/web-antd/src/components/simple-process-design/helpers.ts
index 9fddcb13c..6423111a8 100644
--- a/apps/web-antd/src/components/simple-process-design/helpers.ts
+++ b/apps/web-antd/src/components/simple-process-design/helpers.ts
@@ -43,7 +43,7 @@ export function useWatchNode(props: {
 }
 
 // 解析 formCreate 所有表单字段, 并返回
-const parseFormCreateFields = (formFields?: string[]) => {
+function parseFormCreateFields(formFields?: string[]) {
   const result: Array<Record<string, any>> = [];
   if (formFields) {
     formFields.forEach((fieldStr: string) => {
@@ -51,7 +51,7 @@ const parseFormCreateFields = (formFields?: string[]) => {
     });
   }
   return result;
-};
+}
 
 /**
  * 解析表单组件的  field, title 等字段（递归，如果组件包含子组件）
@@ -109,20 +109,20 @@ export function useFormFieldsPermission(
 
   const formFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
 
-  const getNodeConfigFormFields = (
+  function getNodeConfigFormFields(
     nodeFormFields?: Array<Record<string, string>>,
-  ) => {
+  ) {
     nodeFormFields = toRaw(nodeFormFields);
     fieldsPermissionConfig.value =
       !nodeFormFields || nodeFormFields.length === 0
         ? getDefaultFieldsPermission(unref(formFields))
         : mergeFieldsPermission(nodeFormFields, unref(formFields));
-  };
+  }
   // 合并已经设置的表单字段权限，当前流程表单字段 (可能新增，或删除了字段)
-  const mergeFieldsPermission = (
+  function mergeFieldsPermission(
     formFieldsPermisson: Array<Record<string, string>>,
     formFields?: string[],
-  ) => {
+  ) {
     let mergedFieldsPermission: Array<Record<string, any>> = [];
     if (formFields) {
       mergedFieldsPermission = parseFormCreateFields(formFields).map((item) => {
@@ -137,10 +137,10 @@ export function useFormFieldsPermission(
       });
     }
     return mergedFieldsPermission;
-  };
+  }
 
   // 默认的表单权限： 获取表单的所有字段，设置字段默认权限为只读
-  const getDefaultFieldsPermission = (formFields?: string[]) => {
+  function getDefaultFieldsPermission(formFields?: string[]) {
     let defaultFieldsPermission: Array<Record<string, any>> = [];
     if (formFields) {
       defaultFieldsPermission = parseFormCreateFields(formFields).map(
@@ -154,7 +154,7 @@ export function useFormFieldsPermission(
       );
     }
     return defaultFieldsPermission;
-  };
+  }
 
   // 获取表单的所有字段，作为下拉框选项
   const formFieldOptions = parseFormCreateFields(unref(formFields));
@@ -268,7 +268,6 @@ export function useNodeForm(nodeType: NodeType) {
   const formFields = inject<Ref<string[]>>('formFields', ref([])); // 流程表单字段
   const configForm = ref<any | CopyTaskFormType | UserTaskFormType>();
 
-  // eslint-disable-next-line unicorn/prefer-ternary
   if (
     nodeType === NodeType.USER_TASK_NODE ||
     nodeType === NodeType.TRANSACTOR_NODE
@@ -286,13 +285,12 @@ export function useNodeForm(nodeType: NodeType) {
       maxRemindCount: 1, // 默认 提醒 1次
       buttonsSetting: [],
     };
-  } else {
-    configForm.value = {
-      candidateStrategy: CandidateStrategy.USER,
-    };
   }
+  configForm.value = {
+    candidateStrategy: CandidateStrategy.USER,
+  };
 
-  const getShowText = (): string => {
+  function getShowText(): string {
     let showText = '';
     // 指定成员
     if (
@@ -428,12 +426,12 @@ export function useNodeForm(nodeType: NodeType) {
       showText = `流程表达式：${configForm.value.expression}`;
     }
     return showText;
-  };
+  }
 
   /**
    *  处理候选人参数的赋值
    */
-  const handleCandidateParam = () => {
+  function handleCandidateParam() {
     let candidateParam: string | undefined;
     if (!configForm.value) {
       return candidateParam;
@@ -495,14 +493,14 @@ export function useNodeForm(nodeType: NodeType) {
       }
     }
     return candidateParam;
-  };
+  }
   /**
    *  解析候选人参数
    */
-  const parseCandidateParam = (
+  function parseCandidateParam(
     candidateStrategy: CandidateStrategy,
     candidateParam: string | undefined,
-  ) => {
+  ) {
     if (!configForm.value || !candidateParam) {
       return;
     }
@@ -578,7 +576,7 @@ export function useNodeForm(nodeType: NodeType) {
         break;
       }
     }
-  };
+  }
   return {
     configForm,
     roleOptions,
@@ -599,13 +597,13 @@ export function useDrawer() {
   // 抽屉配置是否可见
   const settingVisible = ref(false);
   // 关闭配置抽屉
-  const closeDrawer = () => {
+  function closeDrawer() {
     settingVisible.value = false;
-  };
+  }
   // 打开配置抽屉
-  const openDrawer = () => {
+  function openDrawer() {
     settingVisible.value = true;
-  };
+  }
   return {
     settingVisible,
     closeDrawer,
@@ -622,15 +620,15 @@ export function useNodeName(nodeType: NodeType) {
   // 节点名称输入框
   const showInput = ref(false);
   // 点击节点名称编辑图标
-  const clickIcon = () => {
+  function clickIcon() {
     showInput.value = true;
-  };
+  }
   // 节点名称输入框失去焦点
-  const blurEvent = () => {
+  function blurEvent() {
     showInput.value = false;
     nodeName.value =
       nodeName.value || (NODE_DEFAULT_NAME.get(nodeType) as string);
-  };
+  }
   return {
     nodeName,
     showInput,
@@ -643,15 +641,15 @@ export function useNodeName2(node: Ref<SimpleFlowNode>, nodeType: NodeType) {
   // 显示节点名称输入框
   const showInput = ref(false);
   // 节点名称输入框失去焦点
-  const blurEvent = () => {
+  function blurEvent() {
     showInput.value = false;
     node.value.name =
       node.value.name || (NODE_DEFAULT_NAME.get(nodeType) as string);
-  };
+  }
   // 点击节点标题进行输入
-  const clickTitle = () => {
+  function clickTitle() {
     showInput.value = true;
-  };
+  }
   return {
     showInput,
     clickTitle,
@@ -722,40 +720,40 @@ export function getConditionShowText(
 }
 
 /** 获取表单字段名称*/
-const getFormFieldTitle = (
+function getFormFieldTitle(
   fieldOptions: Array<Record<string, any>>,
   field: string,
-) => {
+) {
   const item = fieldOptions.find((item) => item.field === field);
   return item?.title;
-};
+}
 
 /** 获取操作符名称 */
-const getOpName = (opCode: string): string | undefined => {
+function getOpName(opCode: string): string | undefined {
   const opName = COMPARISON_OPERATORS.find(
     (item: any) => item.value === opCode,
   );
   return opName?.label;
-};
+}
 
 /** 获取条件节点默认的名称 */
-export const getDefaultConditionNodeName = (
+export function getDefaultConditionNodeName(
   index: number,
   defaultFlow: boolean | undefined,
-): string => {
+): string {
   if (defaultFlow) {
     return '其它情况';
   }
   return `条件${index + 1}`;
-};
+}
 
 /** 获取包容分支条件节点默认的名称 */
-export const getDefaultInclusiveConditionNodeName = (
+export function getDefaultInclusiveConditionNodeName(
   index: number,
   defaultFlow: boolean | undefined,
-): string => {
+): string {
   if (defaultFlow) {
     return '其它情况';
   }
   return `包容条件${index + 1}`;
-};
+}
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue b/apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue
index d503f2de6..0401157a4 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue
@@ -37,4 +37,3 @@ const handleSuccess = (data?: any) => {
     />
   </ContentWrap>
 </template>
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
index f00c58ab1..57265935a 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
@@ -1389,4 +1389,3 @@ defineExpose({ loadTodoTask });
   <!-- 签名弹窗 -->
   <Signature ref="signRef" @success="handleSignFinish" />
 </template>
-<style lang="scss" scoped></style>

From 861ec5281ddc2edf94a52735ceb199919a527f98 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Tue, 3 Jun 2025 18:44:13 +0800
Subject: [PATCH 46/53] feat: add operate comps

---
 .../src/components/operate-log/index.ts       |  3 ++
 .../components/operate-log/operate-log.vue    | 46 +++++++++++++++++++
 .../src/components/operate-log/typing.ts      |  5 ++
 3 files changed, 54 insertions(+)
 create mode 100644 apps/web-antd/src/components/operate-log/index.ts
 create mode 100644 apps/web-antd/src/components/operate-log/operate-log.vue
 create mode 100644 apps/web-antd/src/components/operate-log/typing.ts

diff --git a/apps/web-antd/src/components/operate-log/index.ts b/apps/web-antd/src/components/operate-log/index.ts
new file mode 100644
index 000000000..cf38b5e70
--- /dev/null
+++ b/apps/web-antd/src/components/operate-log/index.ts
@@ -0,0 +1,3 @@
+export { default as OperateLog } from './operate-log.vue';
+
+export type { OperateLogProps } from './typing';
diff --git a/apps/web-antd/src/components/operate-log/operate-log.vue b/apps/web-antd/src/components/operate-log/operate-log.vue
new file mode 100644
index 000000000..e1e9eb448
--- /dev/null
+++ b/apps/web-antd/src/components/operate-log/operate-log.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { OperateLogProps } from './typing';
+
+import { Timeline } from 'ant-design-vue';
+
+import { DICT_TYPE, getDictLabel, getDictObj } from '#/utils';
+
+defineOptions({ name: 'OperateLogV2' });
+
+withDefaults(defineProps<OperateLogProps>(), {
+  logList: () => [],
+});
+
+function getUserTypeColor(userType: number) {
+  const dict = getDictObj(DICT_TYPE.USER_TYPE, userType);
+  switch (dict?.colorType) {
+    case 'danger': {
+      return '#F56C6C';
+    }
+    case 'info': {
+      return '#909399';
+    }
+    case 'success': {
+      return '#67C23A';
+    }
+    case 'warning': {
+      return '#E6A23C';
+    }
+  }
+  return '#409EFF';
+}
+</script>
+<template>
+  <div>
+    <Timeline>
+      <Timeline.Item
+        v-for="log in logList"
+        :key="log.id"
+        :color="getUserTypeColor(log.userType)"
+      >
+        <p>{{ log.createTime }}</p>
+        <p>{{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}</p>
+      </Timeline.Item>
+    </Timeline>
+  </div>
+</template>
diff --git a/apps/web-antd/src/components/operate-log/typing.ts b/apps/web-antd/src/components/operate-log/typing.ts
new file mode 100644
index 000000000..773237b96
--- /dev/null
+++ b/apps/web-antd/src/components/operate-log/typing.ts
@@ -0,0 +1,5 @@
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+export interface OperateLogProps {
+  logList: SystemOperateLogApi.OperateLog[]; // 操作日志列表
+}

From 0cdd05991d6ddec72d2cc9dd8b715495ce56ee96 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Tue, 3 Jun 2025 18:44:31 +0800
Subject: [PATCH 47/53] feat: add permission comps

---
 .../src/views/crm/permission/index.ts         |   2 +
 .../permission/modules/permission-form.vue    | 162 ++++++++++
 .../permission/modules/permission-list.vue    | 277 ++++++++++++++++++
 .../crm/permission/modules/transfer-form.vue  | 202 +++++++++++++
 4 files changed, 643 insertions(+)
 create mode 100644 apps/web-antd/src/views/crm/permission/index.ts
 create mode 100644 apps/web-antd/src/views/crm/permission/modules/permission-form.vue
 create mode 100644 apps/web-antd/src/views/crm/permission/modules/permission-list.vue
 create mode 100644 apps/web-antd/src/views/crm/permission/modules/transfer-form.vue

diff --git a/apps/web-antd/src/views/crm/permission/index.ts b/apps/web-antd/src/views/crm/permission/index.ts
new file mode 100644
index 000000000..a175bff47
--- /dev/null
+++ b/apps/web-antd/src/views/crm/permission/index.ts
@@ -0,0 +1,2 @@
+export { default as PermissionList } from './modules/permission-list.vue';
+export { default as TransferForm } from './modules/transfer-form.vue';
diff --git a/apps/web-antd/src/views/crm/permission/modules/permission-form.vue b/apps/web-antd/src/views/crm/permission/modules/permission-form.vue
new file mode 100644
index 000000000..af5b31701
--- /dev/null
+++ b/apps/web-antd/src/views/crm/permission/modules/permission-form.vue
@@ -0,0 +1,162 @@
+<script lang="ts" setup>
+import type { CrmPermissionApi } from '#/api/crm/permission';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  BizTypeEnum,
+  createPermission,
+  PermissionLevelEnum,
+  updatePermission,
+} from '#/api/crm/permission';
+import { getSimpleUserList } from '#/api/system/user';
+import { $t } from '#/locales';
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+const emit = defineEmits(['success']);
+const formData = ref<CrmPermissionApi.Permission>();
+const getTitle = computed(() => {
+  return formData.value?.ids
+    ? $t('ui.actionTitle.edit', ['团队成员'])
+    : $t('ui.actionTitle.create', ['团队成员']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      fieldName: 'ids',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'userId',
+      label: '选择人员',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+      dependencies: {
+        triggerFields: ['ids'],
+        show: (values) => {
+          return values.ids === undefined;
+        },
+      },
+    },
+    {
+      fieldName: 'level',
+      label: '权限级别',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.CRM_PERMISSION_LEVEL,
+          'number',
+        ).filter((dict) => dict.value !== PermissionLevelEnum.OWNER),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'toBizTypes',
+      label: '同时添加至',
+      component: 'CheckboxGroup',
+      componentProps: {
+        options: [
+          {
+            label: '联系人',
+            value: BizTypeEnum.CRM_CONTACT,
+          },
+          {
+            label: '商机',
+            value: BizTypeEnum.CRM_BUSINESS,
+          },
+          {
+            label: '合同',
+            value: BizTypeEnum.CRM_CONTRACT,
+          },
+        ],
+      },
+      dependencies: {
+        triggerFields: ['ids', 'bizType'],
+        show: (values) => {
+          return (
+            values.ids === undefined &&
+            formData.value?.bizType === BizTypeEnum.CRM_CUSTOMER
+          );
+        },
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as CrmPermissionApi.Permission;
+    try {
+      await (formData.value?.ids
+        ? updatePermission(data)
+        : createPermission(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData();
+    if (!data || !data.bizType || !data.bizId) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = {
+        ids: data.ids || [data.id] || undefined,
+        userId: undefined,
+        bizType: data.bizType,
+        bizId: data.bizId,
+        level: data.level,
+      };
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[600px]" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/crm/permission/modules/permission-list.vue b/apps/web-antd/src/views/crm/permission/modules/permission-list.vue
new file mode 100644
index 000000000..5079623a6
--- /dev/null
+++ b/apps/web-antd/src/views/crm/permission/modules/permission-list.vue
@@ -0,0 +1,277 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmPermissionApi } from '#/api/crm/permission';
+
+import { ref, watch } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { useUserStore } from '@vben/stores';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deletePermissionBatch,
+  deleteSelfPermission,
+  getPermissionList,
+  PermissionLevelEnum,
+} from '#/api/crm/permission';
+import { $t } from '#/locales';
+import { DICT_TYPE } from '#/utils';
+
+import Form from './permission-form.vue';
+
+defineOptions({ name: 'CrmPermissionList' });
+
+const props = defineProps<{
+  bizId: number; // 模块数据编号
+  bizType: number; // 模块类型
+  showAction: boolean; // 是否展示操作按钮
+}>();
+
+const emits = defineEmits<{
+  (e: 'quitTeam'): void;
+}>();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+// 校验负责人权限和编辑权限
+const validateOwnerUser = ref(false);
+const validateWrite = ref(false);
+const isPool = ref(false);
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+const checkedIds = ref<CrmPermissionApi.Permission[]>([]);
+function setCheckedIds({
+  records,
+}: {
+  records: CrmPermissionApi.Permission[];
+}) {
+  checkedIds.value = records;
+}
+
+function handleCreate() {
+  formModalApi
+    .setData({
+      bizType: props.bizType,
+      bizId: props.bizId,
+    })
+    .open();
+}
+
+function handleEdit() {
+  formModalApi
+    .setData({
+      bizType: props.bizType,
+      bizId: props.bizId,
+      id: checkedIds.value[0]?.id,
+      level: checkedIds.value[0]?.level,
+    })
+    .open();
+}
+
+function handleDelete() {
+  if (checkedIds.value.length === 0) {
+    message.error('请先选择团队成员后操作！');
+    return;
+  }
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `你要将${checkedIds.value.map((item) => item.nickname).join(',')}移出团队吗？`,
+    })
+      .then(async () => {
+        // 更新用户状态
+        const res = await deletePermissionBatch(
+          checkedIds.value.map((item) => item.id as number),
+        );
+        if (res) {
+          // 提示并返回成功
+          message.success($t('ui.actionMessage.operationSuccess'));
+          resolve(true);
+        } else {
+          reject(new Error('移出失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+const userStore = useUserStore();
+
+async function handleQuit() {
+  const permission = gridApi.grid
+    .getData()
+    .find(
+      (item) =>
+        item.id === userStore.userInfo?.userId &&
+        item.level === PermissionLevelEnum.OWNER,
+    );
+  if (permission) {
+    message.warning('负责人不能退出团队！');
+    return;
+  }
+
+  const userPermission = gridApi.grid
+    .getData()
+    .find((item) => item.id === userStore.userInfo?.userId);
+  if (!userPermission) {
+    message.warning('你不是团队成员！');
+    return;
+  }
+  await deleteSelfPermission(userPermission.id);
+  message.success('退出团队成员成功！');
+  emits('quitTeam');
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      {
+        type: 'checkbox',
+        width: 50,
+      },
+      {
+        field: 'nickname',
+        title: '姓名',
+      },
+      {
+        field: 'deptName',
+        title: '部门',
+      },
+      {
+        field: 'postNames',
+        title: '岗位',
+      },
+      {
+        field: 'level',
+        title: '权限级别',
+        cellRender: {
+          name: 'CellDict',
+          props: { type: DICT_TYPE.CRM_PERMISSION_LEVEL },
+        },
+      },
+      {
+        field: 'createTime',
+        title: '加入时间',
+        formatter: 'formatDateTime',
+      },
+    ],
+    height: 'auto',
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_params) => {
+          const res = await getPermissionList({
+            bizId: props.bizId,
+            bizType: props.bizType,
+          });
+          return res;
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<CrmPermissionApi.Permission>,
+  gridEvents: {
+    checkboxAll: setCheckedIds,
+    checkboxChange: setCheckedIds,
+  },
+});
+
+defineExpose({
+  openForm: handleCreate,
+  validateOwnerUser,
+  validateWrite,
+  isPool,
+});
+watch(
+  () => gridApi.grid.getData(),
+  (data) => {
+    isPool.value = false;
+    if (data.length > 0) {
+      isPool.value = gridApi.grid
+        .getData()
+        .some((item) => item.level === PermissionLevelEnum.OWNER);
+      validateOwnerUser.value = false;
+      validateWrite.value = false;
+      const userId = userStore.userInfo?.userId;
+      gridApi.grid
+        .getData()
+        .filter((item) => item.userId === userId)
+        .forEach((item) => {
+          if (item.level === PermissionLevelEnum.OWNER) {
+            validateOwnerUser.value = true;
+            validateWrite.value = true;
+          } else if (item.level === PermissionLevelEnum.WRITE) {
+            validateWrite.value = true;
+          }
+        });
+    } else {
+      isPool.value = true;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+
+<template>
+  <div>
+    <FormModal @success="onRefresh" />
+    <Grid>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.create'),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              ifShow: validateOwnerUser,
+              onClick: handleCreate,
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              icon: ACTION_ICON.EDIT,
+              ifShow: validateOwnerUser,
+              onClick: handleEdit,
+            },
+            {
+              label: $t('common.delete'),
+              type: 'primary',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              ifShow: validateOwnerUser,
+              onClick: handleDelete,
+            },
+            {
+              label: '退出团队',
+              type: 'primary',
+              danger: true,
+              ifShow: !validateOwnerUser,
+              onClick: handleQuit,
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/crm/permission/modules/transfer-form.vue b/apps/web-antd/src/views/crm/permission/modules/transfer-form.vue
new file mode 100644
index 000000000..f849cdfc9
--- /dev/null
+++ b/apps/web-antd/src/views/crm/permission/modules/transfer-form.vue
@@ -0,0 +1,202 @@
+<script lang="ts" setup>
+import type { CrmPermissionApi } from '#/api/crm/permission';
+
+import { computed } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { transferBusiness } from '#/api/crm/business';
+import { transferClue } from '#/api/crm/clue';
+import { transferContact } from '#/api/crm/contact';
+import { transferContract } from '#/api/crm/contract';
+import { transferCustomer } from '#/api/crm/customer';
+import { BizTypeEnum, PermissionLevelEnum } from '#/api/crm/permission';
+import { getSimpleUserList } from '#/api/system/user';
+import { $t } from '#/locales';
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+defineOptions({ name: 'CrmTransferForm' });
+
+const emit = defineEmits(['success']);
+
+const bizType = defineModel<number>('bizType');
+
+const getTitle = computed(() => {
+  switch (bizType.value) {
+    case BizTypeEnum.CRM_BUSINESS: {
+      return '商机转移';
+    }
+    case BizTypeEnum.CRM_CLUE: {
+      return '线索转移';
+    }
+    case BizTypeEnum.CRM_CONTACT: {
+      return '联系人转移';
+    }
+    case BizTypeEnum.CRM_CONTRACT: {
+      return '合同转移';
+    }
+    case BizTypeEnum.CRM_CUSTOMER: {
+      return '客户转移';
+    }
+    default: {
+      return '转移';
+    }
+  }
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'ownerUserId',
+      label: '选择新负责人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'oldOwnerHandler',
+      label: '老负责人',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          {
+            label: '加入团队',
+            value: true,
+          },
+          {
+            label: '移除',
+            value: false,
+          },
+        ],
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'oldOwnerPermissionLevel',
+      label: '老负责人权限级别',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.CRM_PERMISSION_LEVEL,
+          'number',
+        ).filter((dict) => dict.value !== PermissionLevelEnum.OWNER),
+      },
+      dependencies: {
+        triggerFields: ['oldOwnerHandler'],
+        show: (values) => values.oldOwnerHandler,
+        trigger(values) {
+          if (!values.oldOwnerHandler) {
+            formApi.setFieldValue('oldOwnerPermissionLevel', undefined);
+          }
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'toBizTypes',
+      label: '同时转移',
+      component: 'CheckboxGroup',
+      componentProps: {
+        options: [
+          {
+            label: '联系人',
+            value: BizTypeEnum.CRM_CONTACT,
+          },
+          {
+            label: '商机',
+            value: BizTypeEnum.CRM_BUSINESS,
+          },
+          {
+            label: '合同',
+            value: BizTypeEnum.CRM_CONTRACT,
+          },
+        ],
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as CrmPermissionApi.TransferReq;
+    try {
+      switch (bizType.value) {
+        case BizTypeEnum.CRM_BUSINESS: {
+          return await transferBusiness(data);
+        }
+        case BizTypeEnum.CRM_CLUE: {
+          return await transferClue(data);
+        }
+        case BizTypeEnum.CRM_CONTACT: {
+          return await transferContact(data);
+        }
+        case BizTypeEnum.CRM_CONTRACT: {
+          return await transferContract(data);
+        }
+        case BizTypeEnum.CRM_CUSTOMER: {
+          return await transferCustomer(data);
+        }
+        default: {
+          message.error('【转移失败】没有转移接口');
+          throw new Error('【转移失败】没有转移接口');
+        }
+      }
+    } finally {
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formApi.resetForm();
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ bizType: number }>();
+    if (!data || !data.bizType) {
+      return;
+    }
+    bizType.value = data.bizType;
+    formApi.setFieldValue('id', data.bizType);
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-[40%]">
+    <Form class="mx-4" />
+  </Modal>
+</template>

From 11fa900c3bf0435c0e73a81754ff7c6a5e2e8598 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Tue, 3 Jun 2025 18:45:00 +0800
Subject: [PATCH 48/53] feat: add permission comps

---
 .../crm/permission/components/PermissionForm.vue  |  7 -------
 .../crm/permission/components/PermissionList.vue  | 15 ---------------
 .../crm/permission/components/TransferForm.vue    |  7 -------
 3 files changed, 29 deletions(-)
 delete mode 100644 apps/web-antd/src/views/crm/permission/components/PermissionForm.vue
 delete mode 100644 apps/web-antd/src/views/crm/permission/components/PermissionList.vue
 delete mode 100644 apps/web-antd/src/views/crm/permission/components/TransferForm.vue

diff --git a/apps/web-antd/src/views/crm/permission/components/PermissionForm.vue b/apps/web-antd/src/views/crm/permission/components/PermissionForm.vue
deleted file mode 100644
index 99ad6b6f9..000000000
--- a/apps/web-antd/src/views/crm/permission/components/PermissionForm.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <div>
-    <p>待完成</p>
-  </div>
-</template>
diff --git a/apps/web-antd/src/views/crm/permission/components/PermissionList.vue b/apps/web-antd/src/views/crm/permission/components/PermissionList.vue
deleted file mode 100644
index 474e404c6..000000000
--- a/apps/web-antd/src/views/crm/permission/components/PermissionList.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-defineOptions({ name: 'CrmPermissionList' });
-
-defineProps<{
-  bizId: number | undefined; // 模块数据编号
-  bizType: number; // 模块类型
-  showAction: boolean; // 是否展示操作按钮
-}>();
-</script>
-
-<template>
-  <div>
-    <p>待完成</p>
-  </div>
-</template>
diff --git a/apps/web-antd/src/views/crm/permission/components/TransferForm.vue b/apps/web-antd/src/views/crm/permission/components/TransferForm.vue
deleted file mode 100644
index 99ad6b6f9..000000000
--- a/apps/web-antd/src/views/crm/permission/components/TransferForm.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <div>
-    <p>待完成</p>
-  </div>
-</template>

From 6edd0826a64d727a5315f97e7f590ebfa082a8de Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Tue, 3 Jun 2025 18:45:12 +0800
Subject: [PATCH 49/53] fix: api types

---
 apps/web-antd/src/api/crm/operateLog/index.ts |  8 ++-
 apps/web-antd/src/api/crm/permission/index.ts | 55 ++++++++++---------
 2 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/apps/web-antd/src/api/crm/operateLog/index.ts b/apps/web-antd/src/api/crm/operateLog/index.ts
index 2c5f8fd27..842dd0b19 100644
--- a/apps/web-antd/src/api/crm/operateLog/index.ts
+++ b/apps/web-antd/src/api/crm/operateLog/index.ts
@@ -1,10 +1,12 @@
-import type { PageParam, PageResult } from '@vben/request';
+import type { PageResult } from '@vben/request';
+
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
 
 import { requestClient } from '#/api/request';
 
 export namespace CrmOperateLogApi {
   /** 操作日志查询参数 */
-  export interface OperateLogQuery extends PageParam {
+  export interface OperateLogQuery {
     bizType: number;
     bizId: number;
   }
@@ -24,7 +26,7 @@ export namespace CrmOperateLogApi {
 
 /** 获得操作日志 */
 export function getOperateLogPage(params: CrmOperateLogApi.OperateLogQuery) {
-  return requestClient.get<PageResult<CrmOperateLogApi.OperateLog>>(
+  return requestClient.get<PageResult<SystemOperateLogApi.OperateLog>>(
     '/crm/operate-log/page',
     { params },
   );
diff --git a/apps/web-antd/src/api/crm/permission/index.ts b/apps/web-antd/src/api/crm/permission/index.ts
index a0362e05c..3c97a3dc9 100644
--- a/apps/web-antd/src/api/crm/permission/index.ts
+++ b/apps/web-antd/src/api/crm/permission/index.ts
@@ -1,4 +1,4 @@
-import type { PageParam, PageResult } from '@vben/request';
+import type { PageResult } from '@vben/request';
 
 import { requestClient } from '#/api/request';
 
@@ -6,7 +6,8 @@ export namespace CrmPermissionApi {
   /** 数据权限信息 */
   export interface Permission {
     id?: number; // 数据权限编号
-    userId: number; // 用户编号
+    ids?: number[];
+    userId?: number; // 用户编号
     bizType: number; // Crm 类型
     bizId: number; // Crm 类型数据编号
     level: number; // 权限级别
@@ -15,7 +16,6 @@ export namespace CrmPermissionApi {
     nickname?: string; // 用户昵称
     postNames?: string[]; // 岗位名称数组
     createTime?: Date;
-    ids?: number[];
   }
 
   /** 数据权限转移请求 */
@@ -26,32 +26,37 @@ export namespace CrmPermissionApi {
     toBizTypes?: number[]; // 转移客户时，需要额外有【联系人】【商机】【合同】的 checkbox 选择
   }
 
-  /**
-   * CRM 业务类型枚举
-   */
-  export enum BizType {
-    CRM_BUSINESS = 4, // 商机
-    CRM_CLUE = 1, // 线索
-    CRM_CONTACT = 3, // 联系人
-    CRM_CONTRACT = 5, // 合同
-    CRM_CUSTOMER = 2, // 客户
-    CRM_PRODUCT = 6, // 产品
-    CRM_RECEIVABLE = 7, // 回款
-    CRM_RECEIVABLE_PLAN = 8, // 回款计划
-  }
-
-  /**
-   * CRM 数据权限级别枚举
-   */
-  export enum PermissionLevel {
-    OWNER = 1, // 负责人
-    READ = 2, // 只读
-    WRITE = 3, // 读写
+  export interface PermissionListReq {
+    bizId: number; // 模块数据编号
+    bizType: number; // 模块类型
   }
 }
 
+/**
+ * CRM 业务类型枚举
+ */
+export enum BizTypeEnum {
+  CRM_BUSINESS = 4, // 商机
+  CRM_CLUE = 1, // 线索
+  CRM_CONTACT = 3, // 联系人
+  CRM_CONTRACT = 5, // 合同
+  CRM_CUSTOMER = 2, // 客户
+  CRM_PRODUCT = 6, // 产品
+  CRM_RECEIVABLE = 7, // 回款
+  CRM_RECEIVABLE_PLAN = 8, // 回款计划
+}
+
+/**
+ * CRM 数据权限级别枚举
+ */
+export enum PermissionLevelEnum {
+  OWNER = 1, // 负责人
+  READ = 2, // 只读
+  WRITE = 3, // 读写
+}
+
 /** 获得数据权限列表（查询团队成员列表） */
-export function getPermissionList(params: PageParam) {
+export function getPermissionList(params: CrmPermissionApi.PermissionListReq) {
   return requestClient.get<PageResult<CrmPermissionApi.Permission>>(
     '/crm/permission/list',
     { params },

From 4f219881c26d5d4ab457b130cbb511a25cd52e2b Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Tue, 3 Jun 2025 20:49:59 +0800
Subject: [PATCH 50/53] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/crm/permission/index.ts |   4 +-
 .../src/views/crm/clue/modules/detail.vue     |  16 +-
 .../crm/customer/modules/detail-info.vue      |   5 +
 .../src/views/crm/customer/modules/detail.vue | 210 +++++++++++++++++-
 .../permission/modules/permission-form.vue    |   3 +-
 .../permission/modules/permission-list.vue    |  29 ++-
 6 files changed, 247 insertions(+), 20 deletions(-)
 create mode 100644 apps/web-antd/src/views/crm/customer/modules/detail-info.vue

diff --git a/apps/web-antd/src/api/crm/permission/index.ts b/apps/web-antd/src/api/crm/permission/index.ts
index 3c97a3dc9..7322ee1e3 100644
--- a/apps/web-antd/src/api/crm/permission/index.ts
+++ b/apps/web-antd/src/api/crm/permission/index.ts
@@ -1,5 +1,3 @@
-import type { PageResult } from '@vben/request';
-
 import { requestClient } from '#/api/request';
 
 export namespace CrmPermissionApi {
@@ -57,7 +55,7 @@ export enum PermissionLevelEnum {
 
 /** 获得数据权限列表（查询团队成员列表） */
 export function getPermissionList(params: CrmPermissionApi.PermissionListReq) {
-  return requestClient.get<PageResult<CrmPermissionApi.Permission>>(
+  return requestClient.get<CrmPermissionApi.Permission[]>(
     '/crm/permission/list',
     { params },
   );
diff --git a/apps/web-antd/src/views/crm/clue/modules/detail.vue b/apps/web-antd/src/views/crm/clue/modules/detail.vue
index 2f7c6ac86..7c9d29b2a 100644
--- a/apps/web-antd/src/views/crm/clue/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/clue/modules/detail.vue
@@ -5,16 +5,18 @@ import { defineAsyncComponent, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
 import { ArrowLeft } from '@vben/icons';
 
 import { Button, Card, Modal, Tabs } from 'ant-design-vue';
 
 import { getClue, transformClue } from '#/api/crm/clue';
+import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
+import { PermissionList, TransferForm } from '#/views/crm/permission';
 
 import { useDetailSchema } from '../data';
 import ClueForm from './form.vue';
-import TransferForm from './transfer.vue';
 
 const ClueDetailsInfo = defineAsyncComponent(() => import('./detail-info.vue'));
 
@@ -22,6 +24,7 @@ const loading = ref(false);
 
 const route = useRoute();
 const router = useRouter();
+const tabs = useTabs();
 
 const clueId = ref(0);
 
@@ -58,6 +61,7 @@ async function loadClueDetail() {
 
 /** 返回列表页 */
 function handleBack() {
+  tabs.closeCurrentTab();
   router.push('/crm/clue');
 }
 
@@ -68,7 +72,7 @@ function handleEdit() {
 
 /** 转移线索 */
 function handleTransfer() {
-  transferModalApi.setData({ id: clueId }).open();
+  transferModalApi.setData({ bizType: BizTypeEnum.CRM_CLUE }).open();
 }
 
 /** 转化为客户 */
@@ -141,7 +145,13 @@ onMounted(async () => {
           <ClueDetailsInfo :clue="clue" />
         </Tabs.TabPane>
         <Tabs.TabPane tab="团队成员" key="3">
-          <div>团队成员</div>
+          <PermissionList
+            ref="permissionListRef"
+            :biz-id="clue.id!"
+            :biz-type="BizTypeEnum.CRM_CLUE"
+            :show-action="true"
+            @quit-team="handleBack"
+          />
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="4">
           <div>操作日志</div>
diff --git a/apps/web-antd/src/views/crm/customer/modules/detail-info.vue b/apps/web-antd/src/views/crm/customer/modules/detail-info.vue
new file mode 100644
index 000000000..c651e23e0
--- /dev/null
+++ b/apps/web-antd/src/views/crm/customer/modules/detail-info.vue
@@ -0,0 +1,5 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div>detail-info</div>
+</template>
diff --git a/apps/web-antd/src/views/crm/customer/modules/detail.vue b/apps/web-antd/src/views/crm/customer/modules/detail.vue
index 99ad6b6f9..19c2b2695 100644
--- a/apps/web-antd/src/views/crm/customer/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/customer/modules/detail.vue
@@ -1,7 +1,209 @@
-<script lang="ts" setup></script>
+<script setup lang="ts">
+import type { CrmCustomerApi } from '#/api/crm/customer';
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+import { defineAsyncComponent, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+
+import { Button, Card, Modal, Tabs } from 'ant-design-vue';
+
+import { getCustomer, updateCustomerDealStatus } from '#/api/crm/customer';
+import { getOperateLogPage } from '#/api/crm/operateLog';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { useDescription } from '#/components/description';
+import { OperateLog } from '#/components/operate-log';
+
+import { useDetailSchema } from '../data';
+
+const CustomerDetailsInfo = defineAsyncComponent(
+  () => import('./detail-info.vue'),
+);
+
+const loading = ref(false);
+
+const route = useRoute();
+const router = useRouter();
+
+const customerId = ref(0);
+
+const customer = ref<CrmCustomerApi.Customer>({} as CrmCustomerApi.Customer);
+const permissionListRef = ref(); // 团队成员列表 Ref
+
+const [Description] = useDescription({
+  componentProps: {
+    bordered: false,
+    column: 4,
+    class: 'mx-4',
+  },
+  schema: useDetailSchema(),
+});
+
+/** 加载详情 */
+async function loadCustomerDetail() {
+  loading.value = true;
+  customerId.value = Number(route.params.id);
+  const data = await getCustomer(customerId.value);
+  await getOperateLog();
+  customer.value = data;
+  loading.value = false;
+}
+
+/** 编辑 */
+function handleEdit() {
+  // formModalApi.setData({ id: clueId }).open();
+}
+
+/** 转移线索 */
+function handleTransfer() {
+  // transferModalApi.setData({ id: clueId }).open();
+}
+
+/** 锁定客户 */
+function handleLock() {
+  // transferModalApi.setData({ id: clueId }).open();
+}
+
+/** 解锁客户 */
+function handleUnlock() {
+  // transferModalApi.setData({ id: clueId }).open();
+}
+
+/** 领取客户 */
+function handleReceive() {
+  // transferModalApi.setData({ id: clueId }).open();
+}
+
+/** 分配客户 */
+function handleDistributeForm() {
+  // transferModalApi.setData({ id: clueId }).open();
+}
+
+/** 客户放入公海 */
+function handlePutPool() {
+  // transferModalApi.setData({ id: clueId }).open();
+}
+
+/** 更新成交状态操作 */
+async function handleUpdateDealStatus() {
+  const dealStatus = !customer.value.dealStatus;
+  try {
+    await Modal.confirm({
+      title: '提示',
+      content: `确定更新成交状态为【${dealStatus ? '已成交' : '未成交'}】吗？`,
+    });
+    await updateCustomerDealStatus(customerId.value, dealStatus);
+    Modal.success({
+      title: '成功',
+      content: '更新成交状态成功',
+    });
+    await loadCustomerDetail();
+  } catch {
+    // 用户取消操作
+  }
+}
+
+/** 获取操作日志 */
+const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志列表
+async function getOperateLog() {
+  if (!customerId.value) {
+    return;
+  }
+  const data = await getOperateLogPage({
+    bizType: BizTypeEnum.CRM_CUSTOMER,
+    bizId: customerId.value,
+  });
+  logList.value = data.list;
+}
+
+// 加载数据
+onMounted(async () => {
+  await loadCustomerDetail();
+});
+</script>
 
 <template>
-  <div>
-    <p>待完成</p>
-  </div>
+  <Page auto-content-height :title="customer?.name" :loading="loading">
+    <template #extra>
+      <div class="flex items-center gap-2">
+        <Button
+          v-if="permissionListRef?.validateWrite"
+          type="primary"
+          @click="handleEdit"
+          v-access:code="['crm:customer:update']"
+        >
+          {{ $t('ui.actionTitle.edit') }}
+        </Button>
+        <Button
+          v-if="permissionListRef?.validateOwnerUser"
+          type="primary"
+          @click="handleTransfer"
+        >
+          转移
+        </Button>
+        <Button
+          v-if="permissionListRef?.validateWrite"
+          @click="handleUpdateDealStatus"
+        >
+          更改成交状态
+        </Button>
+        <Button
+          v-if="customer.lockStatus && permissionListRef?.validateOwnerUser"
+          @click="handleUnlock"
+        >
+          解锁
+        </Button>
+        <Button
+          v-if="!customer.lockStatus && permissionListRef?.validateOwnerUser"
+          @click="handleLock"
+        >
+          锁定
+        </Button>
+        <Button v-if="!customer.ownerUserId" @click="handleReceive">
+          领取
+        </Button>
+        <Button v-if="!customer.ownerUserId" @click="handleDistributeForm">
+          分配
+        </Button>
+        <Button
+          v-if="customer.ownerUserId && permissionListRef?.validateOwnerUser"
+          @click="handlePutPool"
+        >
+          放入公海
+        </Button>
+      </div>
+    </template>
+    <Card>
+      <Description :data="customer" />
+    </Card>
+    <Card class="mt-4">
+      <Tabs>
+        <Tabs.TabPane tab="跟进记录" key="1">
+          <div>跟进记录</div>
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="基本信息" key="2">
+          <CustomerDetailsInfo />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="联系人" key="3">
+          <div>联系人</div>
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="团队成员" key="4">
+          <div>团队成员</div>
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="商机" key="5">
+          <div>商机</div>
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="合同" key="6">
+          <div>合同</div>
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="回款" key="7">
+          <div>回款</div>
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="操作日志" key="8">
+          <OperateLog :log-list="logList" />
+        </Tabs.TabPane>
+      </Tabs>
+    </Card>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/crm/permission/modules/permission-form.vue b/apps/web-antd/src/views/crm/permission/modules/permission-form.vue
index af5b31701..e6e8fa462 100644
--- a/apps/web-antd/src/views/crm/permission/modules/permission-form.vue
+++ b/apps/web-antd/src/views/crm/permission/modules/permission-form.vue
@@ -114,7 +114,8 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data = (await formApi.getValues()) as CrmPermissionApi.Permission;
+    let data = (await formApi.getValues()) as CrmPermissionApi.Permission;
+    data = Object.assign(data, formData.value);
     try {
       await (formData.value?.ids
         ? updatePermission(data)
diff --git a/apps/web-antd/src/views/crm/permission/modules/permission-list.vue b/apps/web-antd/src/views/crm/permission/modules/permission-list.vue
index 5079623a6..65b202261 100644
--- a/apps/web-antd/src/views/crm/permission/modules/permission-list.vue
+++ b/apps/web-antd/src/views/crm/permission/modules/permission-list.vue
@@ -33,6 +33,8 @@ const emits = defineEmits<{
   (e: 'quitTeam'): void;
 }>();
 
+const gridData = ref<CrmPermissionApi.Permission[]>([]);
+
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
@@ -67,6 +69,14 @@ function handleCreate() {
 }
 
 function handleEdit() {
+  if (checkedIds.value.length === 0) {
+    message.error('请先选择团队成员后操作！');
+    return;
+  }
+  if (checkedIds.value.length > 1) {
+    message.error('只能选择一个团队成员进行编辑！');
+    return;
+  }
   formModalApi
     .setData({
       bizType: props.bizType,
@@ -112,7 +122,7 @@ async function handleQuit() {
     .getData()
     .find(
       (item) =>
-        item.id === userStore.userInfo?.userId &&
+        item.id === userStore.userInfo?.id &&
         item.level === PermissionLevelEnum.OWNER,
     );
   if (permission) {
@@ -122,7 +132,7 @@ async function handleQuit() {
 
   const userPermission = gridApi.grid
     .getData()
-    .find((item) => item.id === userStore.userInfo?.userId);
+    .find((item) => item.id === userStore.userInfo?.id);
   if (!userPermission) {
     message.warning('你不是团队成员！');
     return;
@@ -176,6 +186,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
             bizId: props.bizId,
             bizType: props.bizType,
           });
+          gridData.value = res;
           return res;
         },
       },
@@ -201,19 +212,19 @@ defineExpose({
   validateWrite,
   isPool,
 });
+
 watch(
-  () => gridApi.grid.getData(),
+  () => gridData.value,
   (data) => {
     isPool.value = false;
     if (data.length > 0) {
-      isPool.value = gridApi.grid
-        .getData()
-        .some((item) => item.level === PermissionLevelEnum.OWNER);
+      isPool.value = data.some(
+        (item) => item.level === PermissionLevelEnum.OWNER,
+      );
       validateOwnerUser.value = false;
       validateWrite.value = false;
-      const userId = userStore.userInfo?.userId;
-      gridApi.grid
-        .getData()
+      const userId = userStore.userInfo?.id;
+      gridData.value
         .filter((item) => item.userId === userId)
         .forEach((item) => {
           if (item.level === PermissionLevelEnum.OWNER) {

From 4102cc221154215a1a6d4e4118e257e78b9e58fb Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Tue, 3 Jun 2025 23:11:56 +0800
Subject: [PATCH 51/53] feat: improve vbenCheckButtonGroup (#6329)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 按钮组支持单选清除和多选限制最大选项数

* 按钮组支持icon插槽来定制图标
---
 .../shadcn-ui/src/components/button/button.ts | 11 ++++++
 .../components/button/check-button-group.vue  | 34 ++++++++++++++-----
 .../src/views/examples/button-group/index.vue | 34 +++++++++++++++++++
 3 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
index 01394caa7..bcb7a0c7e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
@@ -29,14 +29,25 @@ export type ValueType = boolean | number | string;
 
 export interface VbenButtonGroupProps
   extends Pick<VbenButtonProps, 'disabled'> {
+  /** 单选模式下允许清除选中 */
+  allowClear?: boolean;
+  /** 值改变前的回调 */
   beforeChange?: (
     value: ValueType,
     isChecked: boolean,
   ) => boolean | PromiseLike<boolean | undefined> | undefined;
+  /** 按钮样式 */
   btnClass?: any;
+  /** 按钮间隔距离 */
   gap?: number;
+  /** 多选模式下限制最多选择的数量。0表示不限制 */
+  maxCount?: number;
+  /** 是否允许多选 */
   multiple?: boolean;
+  /** 选项 */
   options?: { [key: string]: any; label: CustomRenderType; value: ValueType }[];
+  /** 显示图标 */
   showIcon?: boolean;
+  /** 尺寸 */
   size?: 'large' | 'middle' | 'small';
 }
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue b/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue
index 6e9378910..fd87396eb 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue
@@ -19,6 +19,8 @@ const props = withDefaults(defineProps<VbenButtonGroupProps>(), {
   multiple: false,
   showIcon: true,
   size: 'middle',
+  allowClear: false,
+  maxCount: 0,
 });
 const emit = defineEmits(['btnClick']);
 const btnDefaultProps = computed(() => {
@@ -82,12 +84,22 @@ async function onBtnClick(value: ValueType) {
     if (innerValue.value.includes(value)) {
       innerValue.value = innerValue.value.filter((item) => item !== value);
     } else {
+      if (props.maxCount > 0 && innerValue.value.length >= props.maxCount) {
+        innerValue.value = innerValue.value.slice(0, props.maxCount - 1);
+      }
       innerValue.value.push(value);
     }
     modelValue.value = innerValue.value;
   } else {
-    innerValue.value = [value];
-    modelValue.value = value;
+    if (props.allowClear && innerValue.value.includes(value)) {
+      innerValue.value = [];
+      modelValue.value = undefined;
+      emit('btnClick', undefined);
+      return;
+    } else {
+      innerValue.value = [value];
+      modelValue.value = value;
+    }
   }
   emit('btnClick', value);
 }
@@ -112,12 +124,18 @@ async function onBtnClick(value: ValueType) {
       @click="onBtnClick(btn.value)"
     >
       <div class="icon-wrapper" v-if="props.showIcon">
-        <LoaderCircle
-          class="animate-spin"
-          v-if="loadingValues.includes(btn.value)"
-        />
-        <CircleCheckBig v-else-if="innerValue.includes(btn.value)" />
-        <Circle v-else />
+        <slot
+          name="icon"
+          :loading="loadingValues.includes(btn.value)"
+          :checked="innerValue.includes(btn.value)"
+        >
+          <LoaderCircle
+            class="animate-spin"
+            v-if="loadingValues.includes(btn.value)"
+          />
+          <CircleCheckBig v-else-if="innerValue.includes(btn.value)" />
+          <Circle v-else />
+        </slot>
       </div>
       <slot name="option" :label="btn.label" :value="btn.value" :data="btn">
         <VbenRenderContent :content="btn.label" />
diff --git a/playground/src/views/examples/button-group/index.vue b/playground/src/views/examples/button-group/index.vue
index 2bc350c81..23861da40 100644
--- a/playground/src/views/examples/button-group/index.vue
+++ b/playground/src/views/examples/button-group/index.vue
@@ -9,6 +9,7 @@ import {
   VbenButtonGroup,
   VbenCheckButtonGroup,
 } from '@vben/common-ui';
+import { LoaderCircle, Square, SquareCheckBig } from '@vben/icons';
 
 import { Button, Card, message } from 'ant-design-vue';
 
@@ -51,6 +52,7 @@ const compProps = reactive({
   gap: 0,
   showIcon: true,
   size: 'middle',
+  allowClear: false,
 } as Recordable<any>);
 
 const [Form] = useVbenForm({
@@ -63,6 +65,9 @@ const [Form] = useVbenForm({
       }
     });
   },
+  commonConfig: {
+    labelWidth: 150,
+  },
   schema: [
     {
       component: 'RadioGroup',
@@ -109,6 +114,20 @@ const [Form] = useVbenForm({
       fieldName: 'beforeChange',
       label: '前置回调',
     },
+    {
+      component: 'Switch',
+      defaultValue: false,
+      fieldName: 'allowClear',
+      label: '允许清除',
+      help: '单选时是否允许取消选中（值为undefined）',
+    },
+    {
+      component: 'InputNumber',
+      defaultValue: 0,
+      fieldName: 'maxCount',
+      label: '最大选中数量',
+      help: '多选时有效，0表示不限制',
+    },
   ],
   showDefaultActions: false,
   submitOnChange: true,
@@ -186,6 +205,21 @@ function onBtnClick(value: any) {
           v-bind="compProps"
         />
       </div>
+      <p class="mt-4">自定义图标{{ checkValue }}</p>
+      <div class="mt-2 flex flex-col gap-2">
+        <VbenCheckButtonGroup
+          v-model="checkValue"
+          multiple
+          :options="options"
+          v-bind="compProps"
+        >
+          <template #icon="{ loading, checked }">
+            <LoaderCircle class="animate-spin" v-if="loading" />
+            <SquareCheckBig v-else-if="checked" />
+            <Square v-else />
+          </template>
+        </VbenCheckButtonGroup>
+      </div>
     </Card>
 
     <Card title="设置" class="mt-4">

From b9aef618feabc9c65e5d04112cf8ea73d257aa4f Mon Sep 17 00:00:00 2001
From: vben <ann.vben@gmail.com>
Date: Wed, 4 Jun 2025 05:33:06 +0800
Subject: [PATCH 52/53] chore: release 5.5.7

---
 apps/web-antd/package.json                           | 2 +-
 apps/web-ele/package.json                            | 2 +-
 apps/web-naive/package.json                          | 2 +-
 docs/package.json                                    | 2 +-
 internal/lint-configs/commitlint-config/package.json | 2 +-
 internal/lint-configs/stylelint-config/package.json  | 2 +-
 internal/node-utils/package.json                     | 2 +-
 internal/tailwind-config/package.json                | 2 +-
 internal/tsconfig/package.json                       | 2 +-
 package.json                                         | 2 +-
 packages/@core/base/design/package.json              | 2 +-
 packages/@core/base/icons/package.json               | 2 +-
 packages/@core/base/shared/package.json              | 2 +-
 packages/@core/base/typings/package.json             | 2 +-
 packages/@core/composables/package.json              | 2 +-
 packages/@core/preferences/package.json              | 2 +-
 packages/@core/ui-kit/form-ui/package.json           | 2 +-
 packages/@core/ui-kit/layout-ui/package.json         | 2 +-
 packages/@core/ui-kit/menu-ui/package.json           | 2 +-
 packages/@core/ui-kit/shadcn-ui/package.json         | 2 +-
 packages/@core/ui-kit/tabs-ui/package.json           | 2 +-
 packages/constants/package.json                      | 2 +-
 packages/effects/access/package.json                 | 2 +-
 packages/effects/common-ui/package.json              | 2 +-
 packages/effects/hooks/package.json                  | 2 +-
 packages/effects/layouts/package.json                | 2 +-
 packages/effects/request/package.json                | 2 +-
 packages/icons/package.json                          | 2 +-
 packages/locales/package.json                        | 2 +-
 packages/preferences/package.json                    | 2 +-
 packages/stores/package.json                         | 2 +-
 packages/styles/package.json                         | 2 +-
 packages/types/package.json                          | 2 +-
 packages/utils/package.json                          | 2 +-
 playground/package.json                              | 2 +-
 scripts/turbo-run/package.json                       | 2 +-
 36 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index bb5ab7e12..6dcb91848 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-antd",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/web-ele/package.json b/apps/web-ele/package.json
index a51f5a9b6..386c36840 100644
--- a/apps/web-ele/package.json
+++ b/apps/web-ele/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-ele",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/apps/web-naive/package.json b/apps/web-naive/package.json
index ed95930c2..b97ab64f7 100644
--- a/apps/web-naive/package.json
+++ b/apps/web-naive/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/web-naive",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/docs/package.json b/docs/package.json
index a53005342..f57dfc854 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/docs",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "scripts": {
     "build": "vitepress build",
diff --git a/internal/lint-configs/commitlint-config/package.json b/internal/lint-configs/commitlint-config/package.json
index c17cde2a2..a137f947b 100644
--- a/internal/lint-configs/commitlint-config/package.json
+++ b/internal/lint-configs/commitlint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/commitlint-config",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/internal/lint-configs/stylelint-config/package.json b/internal/lint-configs/stylelint-config/package.json
index ee55c702a..8e2a97c2c 100644
--- a/internal/lint-configs/stylelint-config/package.json
+++ b/internal/lint-configs/stylelint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/stylelint-config",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/internal/node-utils/package.json b/internal/node-utils/package.json
index 782c0b30f..8b8db7454 100644
--- a/internal/node-utils/package.json
+++ b/internal/node-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/node-utils",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/internal/tailwind-config/package.json b/internal/tailwind-config/package.json
index 9f62a1b70..8506891b5 100644
--- a/internal/tailwind-config/package.json
+++ b/internal/tailwind-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/tailwind-config",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/internal/tsconfig/package.json b/internal/tsconfig/package.json
index dd4f6321c..44ee3f1b0 100644
--- a/internal/tsconfig/package.json
+++ b/internal/tsconfig/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/tsconfig",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
diff --git a/package.json b/package.json
index 0583d01cf..72db822c2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vben-admin-monorepo",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "keywords": [
     "monorepo",
diff --git a/packages/@core/base/design/package.json b/packages/@core/base/design/package.json
index 4bdfbe32c..33e924749 100644
--- a/packages/@core/base/design/package.json
+++ b/packages/@core/base/design/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/design",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/base/icons/package.json b/packages/@core/base/icons/package.json
index 4d758ca84..9a349883c 100644
--- a/packages/@core/base/icons/package.json
+++ b/packages/@core/base/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/icons",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/base/shared/package.json b/packages/@core/base/shared/package.json
index 05bb218ae..b02cc6e47 100644
--- a/packages/@core/base/shared/package.json
+++ b/packages/@core/base/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/shared",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/base/typings/package.json b/packages/@core/base/typings/package.json
index dc99de243..e2ab18701 100644
--- a/packages/@core/base/typings/package.json
+++ b/packages/@core/base/typings/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/typings",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/composables/package.json b/packages/@core/composables/package.json
index 3e03540f7..08db5106f 100644
--- a/packages/@core/composables/package.json
+++ b/packages/@core/composables/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/composables",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/preferences/package.json b/packages/@core/preferences/package.json
index 828370fde..726b473db 100644
--- a/packages/@core/preferences/package.json
+++ b/packages/@core/preferences/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/preferences",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/ui-kit/form-ui/package.json b/packages/@core/ui-kit/form-ui/package.json
index 651b3dc54..36ae1678f 100644
--- a/packages/@core/ui-kit/form-ui/package.json
+++ b/packages/@core/ui-kit/form-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/form-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/ui-kit/layout-ui/package.json b/packages/@core/ui-kit/layout-ui/package.json
index d62d18646..57a462fe1 100644
--- a/packages/@core/ui-kit/layout-ui/package.json
+++ b/packages/@core/ui-kit/layout-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/layout-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/ui-kit/menu-ui/package.json b/packages/@core/ui-kit/menu-ui/package.json
index 1ff5741c7..760d7646e 100644
--- a/packages/@core/ui-kit/menu-ui/package.json
+++ b/packages/@core/ui-kit/menu-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/menu-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/@core/ui-kit/shadcn-ui/package.json b/packages/@core/ui-kit/shadcn-ui/package.json
index 989004675..11d2918f1 100644
--- a/packages/@core/ui-kit/shadcn-ui/package.json
+++ b/packages/@core/ui-kit/shadcn-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/shadcn-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "#main": "./dist/index.mjs",
   "#module": "./dist/index.mjs",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
diff --git a/packages/@core/ui-kit/tabs-ui/package.json b/packages/@core/ui-kit/tabs-ui/package.json
index 86afff5b9..bc84b4d6a 100644
--- a/packages/@core/ui-kit/tabs-ui/package.json
+++ b/packages/@core/ui-kit/tabs-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/tabs-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/constants/package.json b/packages/constants/package.json
index 072d6b626..c71e11847 100644
--- a/packages/constants/package.json
+++ b/packages/constants/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/constants",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/effects/access/package.json b/packages/effects/access/package.json
index 51beaa83e..e4c39eb2a 100644
--- a/packages/effects/access/package.json
+++ b/packages/effects/access/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/access",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/effects/common-ui/package.json b/packages/effects/common-ui/package.json
index 58bdd8c0f..c9674985a 100644
--- a/packages/effects/common-ui/package.json
+++ b/packages/effects/common-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/common-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/effects/hooks/package.json b/packages/effects/hooks/package.json
index 25a5836ab..004f3c50e 100644
--- a/packages/effects/hooks/package.json
+++ b/packages/effects/hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/hooks",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/effects/layouts/package.json b/packages/effects/layouts/package.json
index f645da901..a8439a021 100644
--- a/packages/effects/layouts/package.json
+++ b/packages/effects/layouts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/layouts",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/effects/request/package.json b/packages/effects/request/package.json
index 57e5c20ec..527f6d904 100644
--- a/packages/effects/request/package.json
+++ b/packages/effects/request/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/request",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/icons/package.json b/packages/icons/package.json
index d7fbc7d43..858383947 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/icons",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/locales/package.json b/packages/locales/package.json
index 6ab5ed5e3..5e92de548 100644
--- a/packages/locales/package.json
+++ b/packages/locales/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/locales",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/preferences/package.json b/packages/preferences/package.json
index c650bcea7..de276c726 100644
--- a/packages/preferences/package.json
+++ b/packages/preferences/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/preferences",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/stores/package.json b/packages/stores/package.json
index f6f9518ba..c9860b59c 100644
--- a/packages/stores/package.json
+++ b/packages/stores/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/stores",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 7eada0dc8..127bd4d58 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/styles",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/types/package.json b/packages/types/package.json
index b74ca47ec..2fa047d84 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/types",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 4d135be39..38a6ca199 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/utils",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/playground/package.json b/playground/package.json
index 9446f38be..8bfd17d51 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/playground",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
diff --git a/scripts/turbo-run/package.json b/scripts/turbo-run/package.json
index 83832d81b..4639c873e 100644
--- a/scripts/turbo-run/package.json
+++ b/scripts/turbo-run/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vben/turbo-run",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "private": true,
   "license": "MIT",
   "type": "module",

From db10830bbbdffb40ce5ef626691f07ad97f795bc Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Wed, 4 Jun 2025 09:48:48 +0800
Subject: [PATCH 53/53] =?UTF-8?q?feat:=20[BPM=20=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E6=B5=81]=20Simple=20=E6=A8=A1=E5=9E=8B=20-=20=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=AE=BE=E8=AE=A1=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/simple-process-designer.vue    | 72 +++++++++----------
 .../styles/simple-process-designer.scss       |  3 +-
 .../src/views/bpm/model/form/index.vue        | 42 ++++-------
 .../bpm/model/form/modules/process-design.vue | 16 +++--
 .../form/modules/simple-model-design.vue      |  7 +-
 5 files changed, 69 insertions(+), 71 deletions(-)

diff --git a/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue b/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
index 7f2762ca1..be8770d12 100644
--- a/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
@@ -11,9 +11,10 @@ import type { SystemUserApi } from '#/api/system/user';
 
 import { inject, onMounted, provide, ref, watch } from 'vue';
 
+import { useVbenModal } from '@vben/common-ui';
 import { handleTree } from '@vben/utils';
 
-import { Button, Modal } from 'ant-design-vue';
+import { Button } from 'ant-design-vue';
 
 import { getFormDetail } from '#/api/bpm/form';
 import { getUserGroupSimpleList } from '#/api/bpm/userGroup';
@@ -112,8 +113,11 @@ provide('tasks', []);
 provide('processInstance', {});
 const processNodeTree = ref<SimpleFlowNode | undefined>();
 provide('processNodeTree', processNodeTree);
-const errorDialogVisible = ref(false);
-const errorNodes: SimpleFlowNode[] = [];
+
+// 创建错误提示弹窗
+const [ErrorModal, errorModalApi] = useVbenModal({
+  fullscreenButton: false,
+});
 
 // 添加更新模型的方法
 const updateModel = () => {
@@ -122,6 +126,7 @@ const updateModel = () => {
       name: '发起人',
       type: NodeType.START_USER_NODE,
       id: NodeId.START_USER_NODE_ID,
+      showText: '默认配置',
       childNode: {
         id: NodeId.END_EVENT_NODE_ID,
         name: '结束',
@@ -151,7 +156,7 @@ const saveSimpleFlowModel = async (
 /**
  * 校验节点设置。 暂时以 showText 为空 未节点错误配置
  */
-// eslint-disable-next-line unused-imports/no-unused-vars, no-unused-vars
+
 const validateNode = (
   node: SimpleFlowNode | undefined,
   errorNodes: SimpleFlowNode[],
@@ -161,34 +166,23 @@ const validateNode = (
     if (type === NodeType.END_EVENT_NODE) {
       return;
     }
-    if (type === NodeType.START_USER_NODE) {
-      // 发起人节点暂时不用校验，直接校验孩子节点
-      validateNode(node.childNode, errorNodes);
-    }
-
-    if (
-      type === NodeType.USER_TASK_NODE ||
-      type === NodeType.COPY_TASK_NODE ||
-      type === NodeType.CONDITION_NODE
-    ) {
-      if (!showText) {
-        errorNodes.push(node);
-      }
-      validateNode(node.childNode, errorNodes);
-    }
 
     if (
       type === NodeType.CONDITION_BRANCH_NODE ||
       type === NodeType.PARALLEL_BRANCH_NODE ||
       type === NodeType.INCLUSIVE_BRANCH_NODE
     ) {
-      // 分支节点
-      // 1. 先校验各个分支
+      // 1. 分支节点, 先校验各个分支
       conditionNodes?.forEach((item) => {
         validateNode(item, errorNodes);
       });
       // 2. 校验孩子节点
       validateNode(node.childNode, errorNodes);
+    } else {
+      if (!showText) {
+        errorNodes.push(node);
+      }
+      validateNode(node.childNode, errorNodes);
     }
   }
 };
@@ -220,38 +214,40 @@ onMounted(async () => {
   }
 });
 
-const simpleProcessModelRef = ref();
-
-defineExpose({});
+const validate = async () => {
+  const errorNodes: SimpleFlowNode[] = [];
+  validateNode(processNodeTree.value, errorNodes);
+  if (errorNodes.length === 0) {
+    return true;
+  } else {
+    // 设置错误节点数据并打开弹窗
+    errorModalApi.setData(errorNodes);
+    errorModalApi.open();
+    return false;
+  }
+};
+defineExpose({ validate });
 </script>
 <template>
   <div v-loading="loading">
     <SimpleProcessModel
-      ref="simpleProcessModelRef"
       v-if="processNodeTree"
       :flow-node="processNodeTree"
       :readonly="false"
       @save="saveSimpleFlowModel"
     />
-    <Modal
-      v-model="errorDialogVisible"
-      title="保存失败"
-      width="400"
-      :fullscreen="false"
-    >
-      <div class="mb-2">以下节点内容不完善，请修改后保存</div>
+    <ErrorModal title="流程设计校验不通过" class="w-[600px]">
+      <div class="mb-2 text-base">以下节点配置不完善，请修改相关配置</div>
       <div
-        class="b-rounded-1 line-height-normal mb-3 bg-gray-100 p-2"
-        v-for="(item, index) in errorNodes"
+        class="mb-3 rounded-md bg-gray-100 p-2 text-sm"
+        v-for="(item, index) in errorModalApi.getData()"
         :key="index"
       >
         {{ item.name }} : {{ NODE_DEFAULT_TEXT.get(item.type) }}
       </div>
       <template #footer>
-        <Button type="primary" @click="errorDialogVisible = false">
-          知道了
-        </Button>
+        <Button type="primary" @click="errorModalApi.close()">知道了</Button>
       </template>
-    </Modal>
+    </ErrorModal>
   </div>
 </template>
diff --git a/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
index b4ff3ab28..a36f96986 100644
--- a/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
+++ b/apps/web-antd/src/components/simple-process-design/styles/simple-process-designer.scss
@@ -648,7 +648,8 @@
         width: 80px;
         height: 36px;
         color: #212121;
-        border: 2px solid #fafafa;
+        background-color: #fff;
+        border: 2px solid transparent;
         border-radius: 30px;
         box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
 
diff --git a/apps/web-antd/src/views/bpm/model/form/index.vue b/apps/web-antd/src/views/bpm/model/form/index.vue
index 79a698c8e..e3418da4e 100644
--- a/apps/web-antd/src/views/bpm/model/form/index.vue
+++ b/apps/web-antd/src/views/bpm/model/form/index.vue
@@ -216,7 +216,8 @@ const validateAllSteps = async () => {
     await validateBasic();
   } catch {
     currentStep.value = 0;
-    throw new Error('请完善基本信息');
+    message.warning('请完善基本信息');
+    return false;
   }
 
   // 表单设计校验
@@ -224,25 +225,19 @@ const validateAllSteps = async () => {
     await validateForm();
   } catch {
     currentStep.value = 1;
-    throw new Error('请完善自定义表单信息');
+    message.warning('请完善自定义表单信息');
+    return false;
   }
 
-  // 流程设计校验 TODO
-
+  // 流程设计校验
   try {
     await validateProcess();
   } catch {
     currentStep.value = 2;
-    throw new Error('请设计流程');
+    return false;
   }
 
-  // 表单设计校验
-  try {
-    await validateProcess();
-  } catch {
-    currentStep.value = 2;
-    throw new Error('请设计流程');
-  }
+  // TODO 更多设置校验
 
   return true;
 };
@@ -251,7 +246,10 @@ const validateAllSteps = async () => {
 const handleSave = async () => {
   try {
     // 保存前校验所有步骤的数据
-    await validateAllSteps();
+    const result = await validateAllSteps();
+    if (!result) {
+      return;
+    }
 
     // 更新表单数据
     const modelData = {
@@ -297,7 +295,7 @@ const handleSave = async () => {
     }
   } catch (error: any) {
     console.error('保存失败:', error);
-    message.warning(error.message || '请完善所有步骤的必填信息');
+    // message.warning(error.msg || '请完善所有步骤的必填信息');
   }
 };
 
@@ -347,23 +345,13 @@ const handleStepClick = async (index: number) => {
     if (index !== 2) {
       await validateProcess();
     }
-
     // 切换步骤
     currentStep.value = index;
-
-    // 如果切换到流程设计步骤，等待组件渲染完成后刷新设计器
-    if (index === 2) {
-      // TODO 后续加
-      // await nextTick();
-      // // 等待更长时间确保组件完全初始化
-      // await new Promise((resolve) => setTimeout(resolve, 200));
-      // if (processDesignRef.value?.refresh) {
-      //   await processDesignRef.value.refresh();
-      // }
-    }
   } catch (error) {
     console.error('步骤切换失败:', error);
-    message.warning('请先完善当前步骤必填信息');
+    if (currentStep.value !== 2) {
+      message.warning('请先完善当前步骤必填信息');
+    }
   }
 };
 
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/process-design.vue b/apps/web-antd/src/views/bpm/model/form/modules/process-design.vue
index f9fb07543..8824de4a2 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/process-design.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/process-design.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Ref } from 'vue';
 
-import { computed, inject, nextTick } from 'vue';
+import { computed, inject, nextTick, ref } from 'vue';
 
 import { BpmModelType } from '#/utils';
 
@@ -13,12 +13,21 @@ const modelData = defineModel<any>();
 
 const processData = inject('processData') as Ref;
 
+const simpleDesign = ref();
+
 /** 表单校验 */
 const validate = async () => {
   // 获取最新的流程数据
   if (!processData.value) {
     throw new Error('请设计流程');
   }
+  if (modelData.value.type === BpmModelType.SIMPLE) {
+    // 简易设计器校验
+    const validateResult = await simpleDesign.value?.validateConfig();
+    if (!validateResult) {
+      throw new Error('请完善设计配置');
+    }
+  }
   return true;
 };
 /** 处理设计器保存成功 */
@@ -41,9 +50,7 @@ const handleDesignSuccess = async (data?: any) => {
 const showDesigner = computed(() => {
   return Boolean(modelData.value?.key && modelData.value?.name);
 });
-defineExpose({
-  validate,
-});
+defineExpose({ validate });
 </script>
 <template>
   <div class="h-full">
@@ -61,6 +68,7 @@ defineExpose({
         :start-user-ids="modelData.startUserIds"
         :start-dept-ids="modelData.startDeptIds"
         @success="handleDesignSuccess"
+        ref="simpleDesign"
       />
     </template>
   </div>
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue b/apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue
index d503f2de6..bf31f74dd 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue
@@ -17,12 +17,17 @@ defineProps<{
 const emit = defineEmits(['success']);
 const designerRef = ref();
 
-// 修改成功回调
+/** 保存成功回调 */
 const handleSuccess = (data?: any) => {
   if (data) {
     emit('success', data);
   }
 };
+/** 设计器配置校验 */
+const validateConfig = async () => {
+  return await designerRef.value.validate();
+};
+defineExpose({ validateConfig });
 </script>
 <template>
   <ContentWrap :body-style="{ padding: '20px 16px' }">