diff --git a/README.md b/README.md
index 4096297..51dd6ed 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@
 ![Vite](https://img.shields.io/badge/Vite-3.2.5-646CFF?style=flat-square&logo=vite)
 ![Pinia](https://img.shields.io/badge/Pinia-2.0.23-FFD93D?style=flat-square)
 
-一个基于 Vue 3 + TypeScript + Arco Design 的现代化租赁管理系统
+一个基于 Vue 3 +   TypeScript + Arco Design 的现代化租赁管理系统
 
 </div>
 
diff --git a/package.json b/package.json
index f6c85f1..c4dd83a 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,10 @@
   "dependencies": {
     "@arco-design/web-vue": "^2.57.0",
     "@onlyoffice/document-editor-vue": "^1.6.1",
+    "@vue-flow/background": "^1.3.2",
+    "@vue-flow/core": "^1.47.0",
+    "@vue-flow/controls": "^1.1.3",
+    "@vue-flow/minimap": "^1.5.4",
     "@vueuse/core": "^9.3.0",
     "arco-design-pro-vue": "^2.7.3",
     "axios": "^0.24.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 609777a..3040740 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,6 +19,18 @@ importers:
       '@onlyoffice/document-editor-vue':
         specifier: ^1.6.1
         version: 1.6.1(vue@3.5.22(typescript@4.9.5))
+      '@vue-flow/background':
+        specifier: ^1.3.2
+        version: 1.3.2(@vue-flow/core@1.48.0(vue@3.5.22(typescript@4.9.5)))(vue@3.5.22(typescript@4.9.5))
+      '@vue-flow/controls':
+        specifier: ^1.1.3
+        version: 1.1.3(@vue-flow/core@1.48.0(vue@3.5.22(typescript@4.9.5)))(vue@3.5.22(typescript@4.9.5))
+      '@vue-flow/core':
+        specifier: ^1.47.0
+        version: 1.48.0(vue@3.5.22(typescript@4.9.5))
+      '@vue-flow/minimap':
+        specifier: ^1.5.4
+        version: 1.5.4(@vue-flow/core@1.48.0(vue@3.5.22(typescript@4.9.5)))(vue@3.5.22(typescript@4.9.5))
       '@vueuse/core':
         specifier: ^9.3.0
         version: 9.13.0(vue@3.5.22(typescript@4.9.5))
@@ -809,6 +821,9 @@ packages:
   '@types/web-bluetooth@0.0.16':
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
 
+  '@types/web-bluetooth@0.0.20':
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+
   '@typescript-eslint/eslint-plugin@8.46.0':
     resolution: {integrity: sha512-hA8gxBq4ukonVXPy0OKhiaUh/68D0E88GSmtC1iAEnGaieuDi38LhS7jdCHRLi6ErJBNDGCzvh5EnzdPwUc0DA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -997,6 +1012,29 @@ packages:
   '@volar/typescript@1.11.1':
     resolution: {integrity: sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==}
 
+  '@vue-flow/background@1.3.2':
+    resolution: {integrity: sha512-eJPhDcLj1wEo45bBoqTXw1uhl0yK2RaQGnEINqvvBsAFKh/camHJd5NPmOdS1w+M9lggc9igUewxaEd3iCQX2w==}
+    peerDependencies:
+      '@vue-flow/core': ^1.23.0
+      vue: ^3.3.0
+
+  '@vue-flow/controls@1.1.3':
+    resolution: {integrity: sha512-XCf+G+jCvaWURdFlZmOjifZGw3XMhN5hHlfMGkWh9xot+9nH9gdTZtn+ldIJKtarg3B21iyHU8JjKDhYcB6JMw==}
+    peerDependencies:
+      '@vue-flow/core': ^1.23.0
+      vue: ^3.3.0
+
+  '@vue-flow/core@1.48.0':
+    resolution: {integrity: sha512-keW9HGaEZEe4SKYtrzp5E+qSGJ5/z+9i2yRDtCr3o72IUnS0Ns1qQNsIbGGz0ygpKzg6LdtbVLWeYAvl3dzLQA==}
+    peerDependencies:
+      vue: ^3.3.0
+
+  '@vue-flow/minimap@1.5.4':
+    resolution: {integrity: sha512-l4C+XTAXnRxsRpUdN7cAVFBennC1sVRzq4bDSpVK+ag7tdMczAnhFYGgbLkUw3v3sY6gokyWwMl8CDonp8eB2g==}
+    peerDependencies:
+      '@vue-flow/core': ^1.23.0
+      vue: ^3.3.0
+
   '@vue/babel-helper-vue-transform-on@1.5.0':
     resolution: {integrity: sha512-0dAYkerNhhHutHZ34JtTl2czVQHUNWv6xEbkdF5W+Yrv5pCWsqjeORdOgbtW2I9gWlt+wBmVn+ttqN9ZxR5tzA==}
 
@@ -1062,12 +1100,21 @@ packages:
   '@vue/shared@3.5.22':
     resolution: {integrity: sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==}
 
+  '@vueuse/core@10.11.1':
+    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
+
   '@vueuse/core@9.13.0':
     resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
 
+  '@vueuse/metadata@10.11.1':
+    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
+
   '@vueuse/metadata@9.13.0':
     resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
 
+  '@vueuse/shared@10.11.1':
+    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+
   '@vueuse/shared@9.13.0':
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
 
@@ -1553,6 +1600,44 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+
+  d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  d3-transition@3.0.1:
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+
+  d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+
   dargs@7.0.0:
     resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
     engines: {node: '>=8'}
@@ -5374,6 +5459,8 @@ snapshots:
 
   '@types/web-bluetooth@0.0.16': {}
 
+  '@types/web-bluetooth@0.0.20': {}
+
   '@typescript-eslint/eslint-plugin@8.46.0(@typescript-eslint/parser@8.46.0(eslint@8.57.1)(typescript@4.9.5))(eslint@8.57.1)(typescript@4.9.5)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -5556,6 +5643,34 @@ snapshots:
       '@volar/language-core': 1.11.1
       path-browserify: 1.0.1
 
+  '@vue-flow/background@1.3.2(@vue-flow/core@1.48.0(vue@3.5.22(typescript@4.9.5)))(vue@3.5.22(typescript@4.9.5))':
+    dependencies:
+      '@vue-flow/core': 1.48.0(vue@3.5.22(typescript@4.9.5))
+      vue: 3.5.22(typescript@4.9.5)
+
+  '@vue-flow/controls@1.1.3(@vue-flow/core@1.48.0(vue@3.5.22(typescript@4.9.5)))(vue@3.5.22(typescript@4.9.5))':
+    dependencies:
+      '@vue-flow/core': 1.48.0(vue@3.5.22(typescript@4.9.5))
+      vue: 3.5.22(typescript@4.9.5)
+
+  '@vue-flow/core@1.48.0(vue@3.5.22(typescript@4.9.5))':
+    dependencies:
+      '@vueuse/core': 10.11.1(vue@3.5.22(typescript@4.9.5))
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+      vue: 3.5.22(typescript@4.9.5)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
+  '@vue-flow/minimap@1.5.4(@vue-flow/core@1.48.0(vue@3.5.22(typescript@4.9.5)))(vue@3.5.22(typescript@4.9.5))':
+    dependencies:
+      '@vue-flow/core': 1.48.0(vue@3.5.22(typescript@4.9.5))
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+      vue: 3.5.22(typescript@4.9.5)
+
   '@vue/babel-helper-vue-transform-on@1.5.0': {}
 
   '@vue/babel-plugin-jsx@1.5.0(@babel/core@7.28.4)':
@@ -5673,6 +5788,16 @@ snapshots:
 
   '@vue/shared@3.5.22': {}
 
+  '@vueuse/core@10.11.1(vue@3.5.22(typescript@4.9.5))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.1
+      '@vueuse/shared': 10.11.1(vue@3.5.22(typescript@4.9.5))
+      vue-demi: 0.14.10(vue@3.5.22(typescript@4.9.5))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@vueuse/core@9.13.0(vue@3.5.22(typescript@4.9.5))':
     dependencies:
       '@types/web-bluetooth': 0.0.16
@@ -5683,8 +5808,17 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/metadata@10.11.1': {}
+
   '@vueuse/metadata@9.13.0': {}
 
+  '@vueuse/shared@10.11.1(vue@3.5.22(typescript@4.9.5))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.22(typescript@4.9.5))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@vueuse/shared@9.13.0(vue@3.5.22(typescript@4.9.5))':
     dependencies:
       vue-demi: 0.14.10(vue@3.5.22(typescript@4.9.5))
@@ -6227,6 +6361,42 @@ snapshots:
       bin-build: 3.0.0
       bin-wrapper: bin-wrapper-china@0.1.0
 
+  d3-color@3.1.0: {}
+
+  d3-dispatch@3.0.1: {}
+
+  d3-drag@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+
+  d3-ease@3.0.1: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-selection@3.0.0: {}
+
+  d3-timer@3.0.1: {}
+
+  d3-transition@3.0.1(d3-selection@3.0.0):
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+
+  d3-zoom@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
   dargs@7.0.0: {}
 
   data-view-buffer@1.0.2:
diff --git a/src/api/common.ts b/src/api/common.ts
index 05332bb..687603a 100644
--- a/src/api/common.ts
+++ b/src/api/common.ts
@@ -76,3 +76,11 @@ export function getBanksList(keyword: string): Promise<BankListRes> {
 export function getDeptProjectListFromDeptId(id: number): Promise<any> {
   return axios.get(`common/getDeptProjectList?departmentId=${id}`);
 }
+// 审批流类型列表
+export function getWorkflowsTypeList(): Promise<any> {
+  return axios.get(`common/getWorkflowsTypeList`);
+}
+// 公共接口-用户列表
+export function getCommonUserList(): Promise<any> {
+  return axios.get(`common/getUserList`);
+}
diff --git a/src/api/setting.ts b/src/api/setting.ts
index b36d885..2752052 100644
--- a/src/api/setting.ts
+++ b/src/api/setting.ts
@@ -548,3 +548,23 @@ export function getContractTags(
 export function getWorkflowsList(type: number): Promise<any> {
   return axios.get(`workflows/getList?type=${type}`);
 }
+// 创建流程
+export function createWorkflows(params: any): Promise<any> {
+  return axios.post(`workflows/create`, params);
+}
+// 保存流程
+export function saveWorkflows(params: any): Promise<any> {
+  return axios.post(`workflows/save`, params);
+}
+// 审批流详情
+export function getWorkflowsDetail(id: number): Promise<any> {
+  return axios.get(`workflows/getDetail?id=${id}`);
+}
+// 审批流启用禁用
+export function toggleWorkflowsDisable(params: any): Promise<any> {
+  return axios.post('workflows/disable', params);
+}
+// 删除审批流
+export function delWorkflows(id: number): Promise<any> {
+  return axios.get(`workflows/del?id=${id}`);
+}
diff --git a/src/types/vue-flow.d.ts b/src/types/vue-flow.d.ts
new file mode 100644
index 0000000..07394a6
--- /dev/null
+++ b/src/types/vue-flow.d.ts
@@ -0,0 +1,61 @@
+declare module '@vue-flow/core' {
+  import type { Component } from 'vue';
+
+  export type Position = 'left' | 'right' | 'top' | 'bottom';
+  export interface XYPosition {
+    x: number;
+    y: number;
+  }
+
+  export interface Node<Data = any> {
+    id: string;
+    position: XYPosition;
+    data?: Data;
+    type?: string;
+    style?: Record<string, any>;
+    class?: string;
+    width?: number;
+    height?: number;
+    sourcePosition?: Position;
+    targetPosition?: Position;
+    draggable?: boolean;
+    connectable?: boolean;
+  }
+
+  export interface Edge<Data = any> {
+    id: string;
+    source: string;
+    target: string;
+    type?: string;
+    animated?: boolean;
+    data?: Data;
+    style?: Record<string, any>;
+  }
+
+  export const VueFlow: Component;
+  export const Background: Component;
+  export const MiniMap: Component;
+  export const Handle: Component;
+  export const Position: {
+    Left: 'left';
+    Right: 'right';
+    Top: 'top';
+    Bottom: 'bottom';
+  };
+  export function useVueFlow(): any;
+}
+
+declare module '@vue-flow/controls' {
+  import type { Component } from 'vue';
+  export const Controls: Component;
+}
+
+declare module '@vue-flow/minimap' {
+  import type { Component } from 'vue';
+  export const MiniMap: Component;
+}
+
+declare module '@vue-flow/background' {
+  import type { Component } from 'vue';
+  export const Background: Component;
+}
diff --git a/src/views/setting/system/process-settings/components/NodeConfigPanel.vue b/src/views/setting/system/process-settings/components/NodeConfigPanel.vue
new file mode 100644
index 0000000..4145e7a
--- /dev/null
+++ b/src/views/setting/system/process-settings/components/NodeConfigPanel.vue
@@ -0,0 +1,551 @@
+<template>
+  <div class="node-config-panel" :class="{ 'is-modal': isModal }">
+    <div v-if="!isModal" class="panel-header">
+      <div class="panel-title">{{ panelTitle }}</div>
+    </div>
+    <div class="panel-content">
+      <!-- 条件节点配置 -->
+      <template v-if="nodeType === 'condition'">
+        <div class="config-section">
+          <div class="section-title">条件设置</div>
+          <a-form :model="conditionForm" layout="vertical" auto-label-width>
+            <a-form-item label="条件类型" field="fieldType">
+              <a-select
+                v-model="conditionForm.fieldType"
+                placeholder="请选择条件类型"
+                @change="handleConditionChange"
+              >
+                <a-option
+                  v-for="option in fieldTypeOptions"
+                  :key="option.value"
+                  :value="option.value"
+                >
+                  {{ option.label }}
+                </a-option>
+              </a-select>
+            </a-form-item>
+
+            <a-form-item
+              v-if="conditionForm.fieldType === 4"
+              label="发起人"
+              field="contractApprovers"
+            >
+              <a-select
+                v-model="conditionForm.contractApprovers"
+                :options="userList"
+                :field-names="{ value: 'id', label: 'realname' }"
+                placeholder="请选择发起人"
+                multiple
+                allow-clear
+              />
+            </a-form-item>
+
+            <a-form-item
+              v-if="conditionForm.fieldType !== 4"
+              label="条件判断"
+              field="operatorType"
+            >
+              <a-select
+                v-model="conditionForm.operatorType"
+                placeholder="请选择运算类型"
+              >
+                <a-option
+                  v-for="option in operatorTypeOptions"
+                  :key="option.value"
+                  :value="option.value"
+                >
+                  {{ option.label }}
+                </a-option>
+              </a-select>
+            </a-form-item>
+
+            <a-form-item
+              v-if="conditionForm.fieldType === 2"
+              label="使用条款类型"
+              field="termType"
+            >
+              <a-select
+                v-model="conditionForm.termType"
+                placeholder="请选择使用条款类型"
+              >
+                <a-option
+                  v-for="option in termTypeOptions"
+                  :key="option.value"
+                  :value="option.value"
+                >
+                  {{ option.label }}
+                </a-option>
+              </a-select>
+            </a-form-item>
+
+            <a-form-item
+              v-if="
+                conditionForm.fieldType === 2 || conditionForm.fieldType === 3
+              "
+              label="值"
+              field="amount"
+            >
+              <a-input-number
+                v-model="conditionForm.amount"
+                :precision="2"
+                :min="0"
+                placeholder="请输入金额"
+                style="width: 100%"
+              />
+            </a-form-item>
+
+            <a-form-item
+              v-if="conditionForm.fieldType === 1"
+              label="值"
+              field="area"
+            >
+              <div class="flex items-center gap-2">
+                <a-input-number
+                  v-model="conditionForm.area"
+                  :precision="2"
+                  :min="0"
+                  placeholder="请输入面积"
+                  style="flex: 1"
+                />
+                <a-select v-model="conditionForm.unit" style="width: 80px">
+                  <a-option :value="1">元</a-option>
+                  <a-option :value="2">元/㎡*月</a-option>
+                  <a-option :value="3">㎡</a-option>
+                </a-select>
+              </div>
+            </a-form-item>
+
+            <a-form-item
+              v-if="
+                conditionForm.fieldType === 5 || conditionForm.fieldType === 6
+              "
+              label="值"
+              field="days"
+            >
+              <a-input-number
+                v-model="conditionForm.days"
+                :min="0"
+                placeholder="请输入天数"
+                style="width: 100%"
+              />
+            </a-form-item>
+          </a-form>
+        </div>
+        <div class="config-tip">
+          <div class="tip-text"
+            >条件设置有:
+            面积、合同(租赁)单价、合同总价、发起人、免租期、装修期</div
+          >
+        </div>
+      </template>
+
+      <!-- 审批人节点配置 -->
+      <template v-if="nodeType === 'approver'">
+        <div class="config-section">
+          <a-form :model="approverForm" layout="vertical" auto-label-width>
+            <a-form-item label="选择审批人" field="approvers">
+              <a-select
+                v-model="approverForm.approvers"
+                :options="userList"
+                :field-names="{ value: 'id', label: 'realname' }"
+                placeholder="请选择审批人"
+                multiple
+                allow-clear
+              />
+            </a-form-item>
+
+            <a-form-item label="通过方式" field="approvalType">
+              <a-radio-group v-model="approverForm.approvalType">
+                <a-radio
+                  v-for="option in approvalTypeOptions"
+                  :key="option.value"
+                  :value="option.value"
+                >
+                  {{ option.label }}
+                </a-radio>
+              </a-radio-group>
+            </a-form-item>
+
+            <a-form-item label="审批不通过操作" field="rejectAction">
+              <a-select
+                v-model="approverForm.rejectAction"
+                placeholder="请选择"
+              >
+                <a-option
+                  v-for="option in rejectActionOptions"
+                  :key="option.value"
+                  :value="option.value"
+                >
+                  {{ option.label }}
+                </a-option>
+              </a-select>
+            </a-form-item>
+          </a-form>
+        </div>
+        <!-- 如果审批人为空，显示抄送人配置选项（用于支持从审批人节点转换为抄送节点） -->
+        <div v-if="approverForm.approvers.length === 0" class="config-section">
+          <div class="section-title">或配置为抄送节点</div>
+          <a-form :model="ccForm" layout="vertical" auto-label-width>
+            <a-form-item label="选择抄送人" field="ccto">
+              <a-select
+                v-model="ccForm.ccto"
+                :options="userList"
+                :field-names="{ value: 'id', label: 'realname' }"
+                placeholder="请选择抄送人"
+                multiple
+                allow-clear
+              />
+            </a-form-item>
+          </a-form>
+        </div>
+      </template>
+
+      <!-- 抄送节点配置 -->
+      <template v-if="nodeType === 'cc'">
+        <div class="config-section">
+          <a-form :model="ccForm" layout="vertical" auto-label-width>
+            <a-form-item label="选择抄送人" field="ccto">
+              <a-select
+                v-model="ccForm.ccto"
+                :options="userList"
+                :field-names="{ value: 'id', label: 'realname' }"
+                placeholder="请选择抄送人"
+                multiple
+                allow-clear
+              />
+            </a-form-item>
+          </a-form>
+        </div>
+      </template>
+    </div>
+    <div v-if="!isModal" class="panel-footer">
+      <a-button type="primary" @click="handleSave">保存</a-button>
+      <a-button type="outline" status="danger" @click="handleDelete"
+        >删除节点</a-button
+      >
+    </div>
+    <div v-else class="panel-footer-modal">
+      <a-button type="outline" status="danger" @click="handleDelete"
+        >删除节点</a-button
+      >
+      <a-button type="primary" @click="handleSave">保存</a-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, watch, onMounted } from 'vue';
+  import type { Node } from '@vue-flow/core';
+  import { getCommonUserList } from '@/api/common';
+
+  const props = defineProps<{
+    node: Node | null;
+    isModal?: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'save', data: any): void;
+    (e: 'delete'): void;
+  }>();
+
+  const userList = ref<any[]>([]);
+  const nodeType = computed(() => props.node?.type || '');
+
+  // 条件类型选项
+  const fieldTypeOptions = [
+    { value: 1, label: '面积' },
+    { value: 2, label: '合同单价' },
+    { value: 3, label: '合同总价' },
+    { value: 4, label: '发起人' },
+    { value: 5, label: '免租期' },
+    { value: 6, label: '装修期' },
+  ];
+
+  // 运算类型选项
+  const operatorTypeOptions = [
+    { value: 1, label: '大于（>）' },
+    { value: 2, label: '大于等于（>=）' },
+    { value: 3, label: '小于（<）' },
+    { value: 4, label: '小于等于（<=）' },
+    { value: 5, label: '等于（=）' },
+    { value: 6, label: '区间值' },
+  ];
+
+  // 使用条款类型选项
+  const termTypeOptions = [
+    { value: 1, label: '租赁' },
+    { value: 2, label: '物业' },
+  ];
+
+  // 单位选项
+  const unitOptions = [
+    { value: 1, label: '元' },
+    { value: 2, label: '元/㎡*月' },
+    { value: 3, label: '㎡' },
+  ];
+
+  // 审批方式选项
+  const approvalTypeOptions = [
+    { value: 1, label: '会签' },
+    { value: 2, label: '或签' },
+  ];
+
+  // 审批不通过操作选项
+  const rejectActionOptions = [
+    { value: 1, label: '退回发起人' },
+    { value: 2, label: '终止流程' },
+  ];
+
+  const panelTitle = computed(() => {
+    if (nodeType.value === 'condition') return '条件判断';
+    if (nodeType.value === 'approver') return '审批人';
+    if (nodeType.value === 'cc') return '抄送人';
+    return '';
+  });
+
+  // 条件表单
+  const conditionForm = ref<any>({
+    fieldType: undefined,
+    operatorType: undefined,
+    termType: 0,
+    amount: '',
+    area: '',
+    unit: 3,
+    days: undefined,
+    contractApprovers: [],
+  });
+
+  // 审批人表单
+  const approverForm = ref<any>({
+    approvers: [],
+    approvalType: 2,
+    rejectAction: 1,
+  });
+
+  // 抄送表单
+  const ccForm = ref<any>({
+    ccto: [],
+  });
+
+  // 监听节点变化，更新表单
+  watch(
+    () => props.node,
+    (node) => {
+      if (!node) return;
+
+      if (node.type === 'condition') {
+        const firstRule = node.data?.rules?.[0] || {};
+        // 处理数值：接口返回的可能是字符串，需要转换为数字
+        const amount = firstRule.amount;
+        const area = firstRule.area;
+        const days = firstRule.days;
+
+        conditionForm.value = {
+          fieldType: firstRule.fieldType,
+          operatorType: firstRule.operatorType,
+          termType: firstRule.termType || 0,
+          // 转换数值：如果是字符串且不为空，转换为数字；如果是数字，直接使用；否则为空字符串
+          amount:
+            amount !== undefined && amount !== null && amount !== ''
+              ? typeof amount === 'string'
+                ? parseFloat(amount) || ''
+                : amount
+              : '',
+          area:
+            area !== undefined && area !== null && area !== ''
+              ? typeof area === 'string'
+                ? parseFloat(area) || ''
+                : area
+              : '',
+          unit: firstRule.unit || 3,
+          days:
+            days !== undefined && days !== null && days !== ''
+              ? typeof days === 'string'
+                ? parseInt(days, 10) || undefined
+                : days
+              : undefined,
+          contractApprovers:
+            firstRule.contractApprovers?.map((u: any) => u.id) || [],
+        };
+      } else if (node.type === 'approver') {
+        approverForm.value = {
+          approvers: node.data?.approvers?.map((u: any) => u.id) || [],
+          approvalType: node.data?.approvalType || 2,
+          rejectAction: node.data?.rejectAction || 1,
+        };
+        // 如果审批人节点有 ccto 数据，也加载到表单中（用于支持从审批人节点转换为抄送节点）
+        if (node.data?.ccto && node.data.ccto.length > 0) {
+          ccForm.value = {
+            ccto: node.data.ccto.map((u: any) => u.id) || [],
+          };
+        }
+      } else if (node.type === 'cc') {
+        ccForm.value = {
+          ccto: node.data?.ccto?.map((u: any) => u.id) || [],
+        };
+      }
+    },
+    { immediate: true }
+  );
+
+  const handleConditionChange = () => {
+    // 切换条件类型时重置相关字段
+    conditionForm.value.operatorType = undefined;
+    conditionForm.value.amount = '';
+    conditionForm.value.area = '';
+    conditionForm.value.unit = 3;
+    conditionForm.value.days = undefined;
+    conditionForm.value.contractApprovers = [];
+    conditionForm.value.termType = 0;
+  };
+
+  const handleSave = () => {
+    if (nodeType.value === 'condition') {
+      // 获取选中的用户信息
+      const selectedUsers = conditionForm.value.contractApprovers
+        .map((id: number) => userList.value.find((u) => u.id === id))
+        .filter(Boolean);
+
+      const ruleData = {
+        ...conditionForm.value,
+        contractApprovers: selectedUsers,
+        workflowsSettingNodesId: props.node?.data?.nodeId,
+      };
+      emit('save', {
+        rules: [ruleData],
+      });
+    } else if (nodeType.value === 'approver') {
+      // 获取选中的用户信息
+      const selectedUsers = approverForm.value.approvers
+        .map((id: number) => userList.value.find((u) => u.id === id))
+        .filter(Boolean);
+
+      // 如果审批人为空，但配置了抄送人，也保存抄送人数据（用于支持从审批人节点转换为抄送节点）
+      const selectedCcUsers = ccForm.value.ccto
+        .map((id: number) => userList.value.find((u) => u.id === id))
+        .filter(Boolean);
+
+      emit('save', {
+        ...approverForm.value,
+        approvers: selectedUsers,
+        // 如果审批人为空且有抄送人，保存抄送人数据
+        ...(selectedUsers.length === 0 && selectedCcUsers.length > 0
+          ? { ccto: selectedCcUsers }
+          : {}),
+      });
+    } else if (nodeType.value === 'cc') {
+      // 获取选中的用户信息
+      const selectedUsers = ccForm.value.ccto
+        .map((id: number) => userList.value.find((u) => u.id === id))
+        .filter(Boolean);
+
+      emit('save', {
+        ...ccForm.value,
+        ccto: selectedUsers,
+      });
+    }
+
+    // 如果是弹窗模式，保存后自动关闭
+    if (props.isModal) {
+      // 由父组件处理关闭
+    }
+  };
+
+  const handleDelete = () => {
+    emit('delete');
+    // 删除后如果是弹窗模式，需要关闭弹窗（由父组件处理）
+  };
+
+  onMounted(() => {
+    getUserListData();
+  });
+
+  async function getUserListData() {
+    try {
+      const { code, data } = await getCommonUserList();
+      if (code === 200) {
+        // 兼容不同的数据结构：可能是 data.user 或 data.userList 或直接是 data
+        userList.value =
+          data?.user || data?.userList || (Array.isArray(data) ? data : []);
+      }
+    } catch (error) {
+      // console.error('获取用户列表失败:', error);
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .node-config-panel {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    border-left: 1px solid #e6e6eb;
+  }
+
+  .panel-header {
+    padding: 16px 20px;
+    border-bottom: 1px solid #e6e6eb;
+  }
+
+  .panel-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #1d2129;
+  }
+
+  .panel-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+  }
+
+  .config-section {
+    margin-bottom: 20px;
+  }
+
+  .section-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #1d2129;
+    margin-bottom: 16px;
+  }
+
+  .config-tip {
+    padding: 12px;
+    background: #f7f8fa;
+    border-radius: 4px;
+    margin-top: 20px;
+  }
+
+  .tip-text {
+    font-size: 12px;
+    color: #86909c;
+    line-height: 18px;
+  }
+
+  .panel-footer {
+    padding: 16px 20px;
+    border-top: 1px solid #e6e6eb;
+    display: flex;
+    gap: 12px;
+  }
+
+  .panel-footer .arco-btn {
+    flex: 1;
+  }
+
+  .panel-footer-modal {
+    padding: 16px 0 0 0;
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+  }
+
+  .node-config-panel.is-modal {
+    .panel-content {
+      max-height: 60vh;
+      overflow-y: auto;
+    }
+  }
+</style>
diff --git a/src/views/setting/system/process-settings/components/add-approval.vue b/src/views/setting/system/process-settings/components/add-approval.vue
new file mode 100644
index 0000000..68141e9
--- /dev/null
+++ b/src/views/setting/system/process-settings/components/add-approval.vue
@@ -0,0 +1,180 @@
+<template>
+  <a-drawer
+    :width="430"
+    :visible="visible"
+    :title="isEdit ? '编辑审批流程' : '新增审批流程'"
+    unmount-on-close
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      auto-label-width
+      layout="vertical"
+    >
+      <a-form-item label="名称" field="name" required>
+        <a-input
+          v-model="form.name"
+          :placeholder="$t('please.enter', { placeholder: '名称' })"
+        />
+      </a-form-item>
+      <a-form-item label="审批类型" field="workflowsTypeId">
+        <a-select v-model="form.workflowsTypeId" placeholder="请选择审批类型">
+          <a-option
+            v-for="item in approvalType"
+            :key="item.id"
+            :value="item.id"
+          >
+            {{ item.name }}
+          </a-option>
+        </a-select>
+      </a-form-item>
+      <!-- 适用范围（部门） -->
+      <a-form-item label="适用范围" field="projectIds">
+        <a-select
+          v-model="form.projectIds"
+          multiple
+          placeholder="请选择审批类型"
+        >
+          <a-option
+            v-for="item in allProjetList"
+            :key="item.id"
+            :value="item.id"
+          >
+            {{ item.name }}
+          </a-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="备注" field="remark">
+        <a-textarea
+          v-model="form.remark"
+          placeholder="输入详细原因"
+          allow-clear
+        />
+      </a-form-item>
+    </a-form>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, reactive } from 'vue';
+  import type { FormInstance } from '@arco-design/web-vue';
+  import { Message } from '@arco-design/web-vue';
+  import { createWorkflows } from '@/api/setting';
+  import { getAllProjectIdNameList, getWorkflowsTypeList } from '@/api/common';
+  const allProjetList = ref<any>([]);
+  const isLoading = ref<boolean>(false);
+  const props = defineProps<{
+    visible: boolean;
+    isEdit: boolean;
+    record?: any | null;
+  }>();
+  const emit = defineEmits<{
+    (e: 'update:visible', val: boolean): void;
+    (e: 'submitted'): void;
+  }>();
+  const approvalType = ref<any>([]);
+  //  表单数据
+  const formRef = ref<FormInstance>();
+  const defaultForm: any = {
+    name: '',
+    workflowsTypeId: null,
+    projectIds: null,
+    remark: '',
+  };
+  let form = reactive<any>({ ...defaultForm });
+  //  校验规则
+  const rules = reactive({
+    name: [{ required: true, message: '请输入合同编号' }],
+    workflowsTypeId: [{ required: true, message: '请选择审批类型' }],
+    projectIds: [{ required: true, message: '请选择适用范围' }],
+  });
+
+  watch(
+    () => props.visible,
+    (val) => {
+      if (val) {
+        if (props.isEdit && props.record) {
+          // 编辑模式：回显数据
+          Object.assign(form, {
+            name: props.record.name || '',
+            workflowsTypeId: props.record.workflowsTypeId || null,
+            projectIds: props.record.projectIds || null,
+            remark: props.record.remark || '',
+          });
+        } else {
+          // 新增模式：重置表单
+          Object.assign(form, defaultForm);
+        }
+        if (allProjetList.value?.length === 0) getAllProjectListData();
+        if (approvalType.value?.length === 0) getWorkflowsTypeListData();
+      }
+    },
+    { immediate: true }
+  );
+
+  const handleOk = async () => {
+    if (isLoading.value) return;
+    try {
+      isLoading.value = true;
+      const valid = await formRef.value.validate();
+      if (valid) return;
+      const params = {
+        ...form,
+        // projectIds 可能是单个值或数组，统一转为数组
+        projectIds: form.projectIds
+          ? Array.isArray(form.projectIds)
+            ? form.projectIds
+            : [form.projectIds]
+          : [],
+      };
+
+      // 如果是编辑模式，添加 id
+      if (props.isEdit && props.record?.id) {
+        params.id = props.record.id;
+      }
+
+      const res = await createWorkflows(params);
+      if (res?.code === 200) {
+        Message.success(res?.message);
+        form = { ...defaultForm };
+        emit('submitted');
+        emit('update:visible', false);
+      }
+    } catch (err) {
+      // 捕获异常，暂不处理
+    } finally {
+      isLoading.value = false;
+    }
+  };
+  // 部门列表
+  async function getAllProjectListData() {
+    try {
+      const { code, data } = await getAllProjectIdNameList();
+      if (code === 200) {
+        allProjetList.value = data?.projectsList || [];
+      }
+    } catch (error) {
+      // console.error('获取部门列表失败:', error);
+    }
+  }
+  async function getWorkflowsTypeListData() {
+    try {
+      const { code, data } = await getWorkflowsTypeList();
+      if (code === 200) {
+        approvalType.value = data.workflowsTypeList;
+      }
+    } catch (error) {}
+  }
+  const handleCancel = () => {
+    emit('update:visible', false);
+  };
+</script>
+
+<style lang="less" scoped>
+  :deep(label.arco-form-item-label) {
+    width: 100% !important;
+  }
+</style>
diff --git a/src/views/setting/system/process-settings/components/custom-nodes/ApproverNode.vue b/src/views/setting/system/process-settings/components/custom-nodes/ApproverNode.vue
new file mode 100644
index 0000000..6442680
--- /dev/null
+++ b/src/views/setting/system/process-settings/components/custom-nodes/ApproverNode.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="approver-node" @click="handleClick">
+    <!-- 输入连接点（顶部） -->
+    <Handle type="target" :position="Position.Top" />
+    <div class="node-content">
+      <div class="node-header">
+        <div class="node-icon">
+          <icon-customer-service :size="20" />
+        </div>
+        <div class="node-label">审批</div>
+      </div>
+      <div v-if="approversText" class="node-desc">
+        {{ approversText }}
+      </div>
+      <div v-if="approvalTypeText" class="node-desc">
+        审批方式: {{ approvalTypeText }}
+      </div>
+    </div>
+    <!-- 输出连接点（底部） -->
+    <Handle type="source" :position="Position.Bottom" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import { Handle, Position } from '@vue-flow/core';
+  import { IconCustomerService } from '@arco-design/web-vue/es/icon';
+
+  const props = defineProps<{
+    data?: {
+      nodeId?: number;
+      approvers?: any[];
+      approvalType?: number; // 1会签，2或签
+      label?: string;
+    };
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'click', nodeId?: number): void;
+  }>();
+
+  const approversText = computed(() => {
+    const approvers = props.data?.approvers || [];
+    if (approvers.length > 0) {
+      const names = approvers.map((u: any) => u.realname || u.name).join('、');
+      return names;
+    }
+    return '';
+  });
+
+  const approvalTypeText = computed(() => {
+    return props.data?.approvalType === 1 ? '会签' : '或签';
+  });
+
+  const lastClickTime = ref(0);
+  const DOUBLE_CLICK_DELAY = 300;
+
+  const handleClick = () => {
+    const now = Date.now();
+    // 判断是否为双击
+    if (now - lastClickTime.value < DOUBLE_CLICK_DELAY) {
+      // 双击事件
+      emit('click', props.data?.nodeId);
+      lastClickTime.value = 0;
+    } else {
+      lastClickTime.value = now;
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+  .approver-node {
+    position: relative;
+    padding: 12px 16px;
+    background: #e8ffea;
+    border: 2px solid #81b337;
+    border-radius: 8px;
+    min-width: 140px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      box-shadow: 0 2px 8px rgba(129, 179, 55, 0.3);
+    }
+
+    .node-content {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .node-header {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+    }
+
+    .node-icon {
+      color: #81b337;
+    }
+
+    .node-label {
+      font-size: 14px;
+      color: #1d2129;
+      font-weight: 500;
+    }
+
+    .node-desc {
+      font-size: 12px;
+      color: #86909c;
+    }
+  }
+</style>
diff --git a/src/views/setting/system/process-settings/components/custom-nodes/CcNode.vue b/src/views/setting/system/process-settings/components/custom-nodes/CcNode.vue
new file mode 100644
index 0000000..f53e8c8
--- /dev/null
+++ b/src/views/setting/system/process-settings/components/custom-nodes/CcNode.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="cc-node" @click="handleClick">
+    <!-- 输入连接点（顶部） -->
+    <Handle type="target" :position="Position.Top" />
+    <div class="node-content">
+      <div class="node-header">
+        <div class="node-icon">
+          <icon-send :size="20" />
+        </div>
+        <div class="node-label">抄送</div>
+      </div>
+      <div v-if="ccText" class="node-desc">
+        {{ ccText }}
+      </div>
+    </div>
+    <!-- 输出连接点（底部） -->
+    <Handle type="source" :position="Position.Bottom" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import { Handle, Position } from '@vue-flow/core';
+  import { IconSend } from '@arco-design/web-vue/es/icon';
+
+  const props = defineProps<{
+    data?: {
+      nodeId?: number;
+      ccto?: any[];
+      label?: string;
+    };
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'click', nodeId?: number): void;
+  }>();
+
+  const ccText = computed(() => {
+    const ccto = props.data?.ccto || [];
+    if (ccto.length > 0) {
+      const names = ccto.map((u: any) => u.realname || u.name).join('、');
+      return names;
+    }
+    return '';
+  });
+
+  const lastClickTime = ref(0);
+  const DOUBLE_CLICK_DELAY = 300;
+
+  const handleClick = () => {
+    const now = Date.now();
+    // 判断是否为双击
+    if (now - lastClickTime.value < DOUBLE_CLICK_DELAY) {
+      // 双击事件
+      emit('click', props.data?.nodeId);
+      lastClickTime.value = 0;
+    } else {
+      lastClickTime.value = now;
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+  .cc-node {
+    position: relative;
+    padding: 12px 16px;
+    background: #e8ffea;
+    border: 2px solid #81b337;
+    border-radius: 8px;
+    min-width: 140px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      box-shadow: 0 2px 8px rgba(129, 179, 55, 0.3);
+    }
+
+    .node-content {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .node-header {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+    }
+
+    .node-icon {
+      color: #81b337;
+    }
+
+    .node-label {
+      font-size: 14px;
+      color: #1d2129;
+      font-weight: 500;
+    }
+
+    .node-desc {
+      font-size: 12px;
+      color: #86909c;
+    }
+  }
+</style>
diff --git a/src/views/setting/system/process-settings/components/custom-nodes/ConditionNode.vue b/src/views/setting/system/process-settings/components/custom-nodes/ConditionNode.vue
new file mode 100644
index 0000000..b417c6c
--- /dev/null
+++ b/src/views/setting/system/process-settings/components/custom-nodes/ConditionNode.vue
@@ -0,0 +1,171 @@
+<template>
+  <div class="condition-node" @click="handleClick">
+    <!-- 输入连接点（顶部） -->
+    <Handle type="target" :position="Position.Top" />
+    <div class="node-content">
+      <div class="node-header">
+        <div class="node-icon">
+          <icon-share-alt :size="20" />
+        </div>
+        <div class="node-label">{{ conditionTitle }}</div>
+      </div>
+      <div v-if="conditionText" class="node-desc">
+        {{ conditionText }}
+      </div>
+    </div>
+    <!-- 输出连接点（底部） -->
+    <Handle type="source" :position="Position.Bottom" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import { Handle, Position } from '@vue-flow/core';
+  import { IconShareAlt } from '@arco-design/web-vue/es/icon';
+
+  const props = defineProps<{
+    data?: {
+      nodeId?: number;
+      rules?: any[];
+      label?: string;
+    };
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'click', nodeId?: number): void;
+  }>();
+
+  const fieldTypeMap: Record<number, string> = {
+    1: '面积',
+    2: '合同单价',
+    3: '合同总价',
+    4: '发起人',
+    5: '免租期',
+    6: '装修期',
+  };
+
+  const operatorTypeMap: Record<number, string> = {
+    1: '大于(>)',
+    2: '大于等于(>=)',
+    3: '小于(<)',
+    4: '小于等于(<=)',
+    5: '等于(=)',
+    6: '区间值',
+  };
+
+  const unitMap: Record<number, string> = {
+    1: '元',
+    2: '元/㎡*月',
+    3: '㎡',
+  };
+
+  const conditionTitle = computed(() => {
+    const firstRule = props.data?.rules?.[0];
+    if (firstRule) {
+      const fieldType = fieldTypeMap[firstRule.fieldType] || '条件';
+      return `条件:判断${fieldType}`;
+    }
+    return '条件';
+  });
+
+  const conditionText = computed(() => {
+    const firstRule = props.data?.rules?.[0];
+    if (!firstRule) return '';
+
+    const fieldType = fieldTypeMap[firstRule.fieldType];
+    if (!fieldType) return '';
+
+    if (firstRule.fieldType === 4) {
+      // 发起人
+      const approvers = firstRule.contractApprovers || [];
+      if (approvers.length > 0) {
+        const names = approvers
+          .map((u: any) => u.realname || u.name)
+          .join('、');
+        return `发起人: ${names}`;
+      }
+    } else {
+      // 其他类型
+      const operator = operatorTypeMap[firstRule.operatorType] || '';
+      let value = '';
+
+      if (firstRule.fieldType === 1) {
+        // 面积
+        value = `${firstRule.area || ''}${unitMap[firstRule.unit] || '㎡'}`;
+      } else if (firstRule.fieldType === 2 || firstRule.fieldType === 3) {
+        // 金额
+        value = `${firstRule.amount || ''}元`;
+      } else if (firstRule.fieldType === 5 || firstRule.fieldType === 6) {
+        // 天数
+        value = `${firstRule.days || ''}天`;
+      }
+
+      if (operator && value) {
+        return `${fieldType}:${operator} ${value}`;
+      }
+    }
+
+    return '';
+  });
+
+  const lastClickTime = ref(0);
+  const DOUBLE_CLICK_DELAY = 300;
+
+  const handleClick = () => {
+    const now = Date.now();
+    // 判断是否为双击
+    if (now - lastClickTime.value < DOUBLE_CLICK_DELAY) {
+      // 双击事件
+      emit('click', props.data?.nodeId);
+      lastClickTime.value = 0;
+    } else {
+      lastClickTime.value = now;
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+  .condition-node {
+    position: relative;
+    padding: 12px 16px;
+    background: #fff7e8;
+    border: 2px solid #ffbf6b;
+    border-radius: 8px;
+    min-width: 140px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      box-shadow: 0 2px 8px rgba(255, 191, 107, 0.3);
+    }
+
+    .node-content {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .node-header {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+    }
+
+    .node-icon {
+      color: #ffbf6b;
+    }
+
+    .node-label {
+      font-size: 14px;
+      color: #1d2129;
+      font-weight: 500;
+    }
+
+    .node-desc {
+      font-size: 12px;
+      color: #86909c;
+    }
+  }
+</style>
diff --git a/src/views/setting/system/process-settings/components/custom-nodes/EndNode.vue b/src/views/setting/system/process-settings/components/custom-nodes/EndNode.vue
new file mode 100644
index 0000000..301021d
--- /dev/null
+++ b/src/views/setting/system/process-settings/components/custom-nodes/EndNode.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="end-node">
+    <!-- 输入连接点（顶部） -->
+    <Handle type="target" :position="Position.Top" />
+    <div class="node-content">
+      <div class="node-icon">
+        <icon-check-circle-fill :size="24" />
+      </div>
+      <div class="node-label">结束</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { Handle, Position } from '@vue-flow/core';
+  import { IconCheckCircleFill } from '@arco-design/web-vue/es/icon';
+</script>
+
+<style lang="less" scoped>
+  .end-node {
+    position: relative;
+    padding: 8px 16px;
+    background: #fff;
+    border: 2px solid #7298f8;
+    border-radius: 8px;
+    min-width: 120px;
+    text-align: center;
+
+    .node-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .node-icon {
+      color: #7298f8;
+    }
+
+    .node-label {
+      font-size: 14px;
+      color: #1d2129;
+      font-weight: 500;
+    }
+  }
+</style>
diff --git a/src/views/setting/system/process-settings/components/custom-nodes/StartNode.vue b/src/views/setting/system/process-settings/components/custom-nodes/StartNode.vue
new file mode 100644
index 0000000..6c8dff1
--- /dev/null
+++ b/src/views/setting/system/process-settings/components/custom-nodes/StartNode.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="start-node">
+    <div class="node-content">
+      <div class="node-icon">
+        <icon-play-circle-fill :size="24" />
+      </div>
+      <div class="node-label">开始</div>
+    </div>
+    <!-- 输出连接点（底部） -->
+    <Handle type="source" :position="Position.Bottom" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { Handle, Position } from '@vue-flow/core';
+  import { IconPlayCircleFill } from '@arco-design/web-vue/es/icon';
+</script>
+
+<style lang="less" scoped>
+  .start-node {
+    position: relative;
+    padding: 8px 16px;
+    background: #fff;
+    border: 2px solid #7298f8;
+    border-radius: 8px;
+    min-width: 120px;
+    text-align: center;
+
+    .node-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .node-icon {
+      color: #7298f8;
+    }
+
+    .node-label {
+      font-size: 14px;
+      color: #1d2129;
+      font-weight: 500;
+    }
+  }
+</style>
diff --git a/src/views/setting/system/process-settings/index.vue b/src/views/setting/system/process-settings/index.vue
index 91f238d..2241c57 100644
--- a/src/views/setting/system/process-settings/index.vue
+++ b/src/views/setting/system/process-settings/index.vue
@@ -4,63 +4,1526 @@
     <a-card class="full_height" title="流程设置">
       <div class="flex">
         <a-tabs
+          v-model:active-key="currentTypeStr"
           class="w-[250px] h-full border-[1px] border-solid border-[#e5e6eb] rounded-[6px] pb-[300px]"
         >
           <a-tab-pane
-            v-for="item in processList"
-            :key="item.type"
+            v-for="tabItem in processList"
+            :key="String(tabItem.type)"
             class="tab_item h-[36px]"
-            @click="chooseSettingTab(item.type)"
           >
             <template #title>
               <icon-branch />
-              {{ item.text }}
+              {{ tabItem.text }}
             </template>
-            <div class="px-[20px]">
-              <ul>
-                <li> <icon-plus /> 新增审批流程 </li>
-                <li v-for="item in workflowsList[currentType]" :key="item.id">{{
-                  item.name
-                }}</li>
+            <div>
+              <ul class="flex flex-col">
+                <li
+                  class="text-[14px] text-[#10101] h-[42px] leading-[42px] pl-[32px] cursor-pointer"
+                  @click="handleAddApproval"
+                >
+                  <icon-plus /> 新增审批流程
+                </li>
+                <li
+                  v-for="workflowItem in workflowsList[currentType]"
+                  :key="workflowItem.id"
+                  class="text-[14px] text-[#10101] h-[42px] leading-[42px] pl-[32px] cursor-pointer"
+                  :class="{
+                    'bg-[#edeced]': currentApprovalId == workflowItem.id,
+                  }"
+                  @click="chooseApproval(workflowItem)"
+                >
+                  {{ workflowItem.name }}
+                  <span
+                    class="w-[40px] h-[24px] leading-[24px] ml-[10px] text-[12px] inline-block text-center rounded-[2px]"
+                    :class="
+                      workflowItem.status == 1
+                        ? 'text-[#11ae3b] bg-[#e5ffe8]'
+                        : 'text-[#f54748] bg-[#ffe9e5]'
+                    "
+                  >
+                    {{ workflowItem.statusStr }}</span
+                  >
+                </li>
               </ul>
             </div>
           </a-tab-pane>
         </a-tabs>
         <div
+          v-if="currentApproval && Object.keys(currentApproval).length"
           class="flex-1 ml-[20px] border-[1px] border-solid border-[#e5e6eb] rounded-[6px]"
         >
-          asdasdsa
+          <div class="flex items-center justify-between px-[15px] py-[10px]">
+            <div class="text-[16px]">
+              {{ currentApproval.name }}
+            </div>
+            <div>
+              <span class="mr-[8px]">{{ currentApproval.statusStr }}</span>
+              <a-switch
+                v-model="currentApproval.status"
+                :checked-value="1"
+                :unchecked-value="2"
+                @change="handleToggleStatus"
+              />
+              <a-button class="ml-[12px]" @click="handleEditApproval"
+                >编辑描述</a-button
+              >
+
+              <!-- 删除 -->
+              <a-popconfirm
+                :ok-text="$t('cancel')"
+                :cancel-text="$t('delete')"
+                :ok-button-props="{ type: 'outline' }"
+                :cancel-button-props="{
+                  type: 'primary',
+                  status: 'danger',
+                }"
+                content="确定删除该审批流程？"
+                type="error"
+                @cancel="handleDelWorkflow"
+              >
+                <a-button type="outline" status="danger" class="mx-[8px]"
+                  >删除</a-button
+                >
+              </a-popconfirm>
+              <a-button type="primary" @click="handleSaveWorkflow"
+                >保存</a-button
+              >
+            </div>
+          </div>
+          <div class="flex items-center justify-between px-[15px] pb-[10px]">
+            <div class="flex items-center">
+              <div class="text-[#999] tex-[14px]">
+                适用范围
+                <template v-if="currentApproval?.projects?.length">
+                  <span
+                    v-for="(projectItem, index) in currentApproval.projects"
+                    :key="projectItem.id"
+                    class="text-[14px] text-[#121111]"
+                  >
+                    {{
+                      `${projectItem.name}${
+                        index != currentApproval.projects?.length - 1
+                          ? '、'
+                          : ''
+                      }`
+                    }}</span
+                  >
+                </template>
+                <template v-else>-</template>
+              </div>
+              <div class="text-[#999] tex-[14px] ml-[30px]">
+                备注：<span class="text-[14px] text-[#121111]">{{
+                  currentApproval.remark || '-'
+                }}</span>
+              </div>
+            </div>
+            <div> 最后更新：{{ currentApproval.updatedAt || '-' }} </div>
+          </div>
+          <div class="flex border-t border-solid border-[#E6E6EB]">
+            <div class="process-canvas flex-1" @drop="onDrop" @dragover.prevent>
+              <VueFlow
+                v-model="elements"
+                :style="{ background: 'transparent' }"
+                :default-zoom="1"
+                fit-view-on-init
+                :is-valid-connection="isValidConnection"
+                @connect="onConnect"
+                @node-click="onNodeClick"
+              >
+                <template #node-start>
+                  <StartNode />
+                </template>
+                <template #node-condition="{ data }">
+                  <ConditionNode :data="data" @click="handleNodeClick" />
+                </template>
+                <template #node-approver="{ data }">
+                  <ApproverNode :data="data" @click="handleNodeClick" />
+                </template>
+                <template #node-cc="{ data }">
+                  <CcNode :data="data" @click="handleNodeClick" />
+                </template>
+                <template #node-end>
+                  <EndNode />
+                </template>
+              </VueFlow>
+            </div>
+            <div class="w-[168px] flex-shink-0 px-[20px] py-[12px]">
+              <p class="text-[#666] text-[12px]">拖拽节点到画布创建流程</p>
+              <div
+                draggable="true"
+                class="flex items-center bg-[#E8FFEA] border border-solid border-[#81B337] mt-[15px] rounded-[6px] h-[40px] px-[12px] cursor-move"
+                @dragstart="onDragStart('approver')"
+              >
+                <icon-customer-service /> <span class="ml-[5px]">审批人</span>
+              </div>
+              <div
+                draggable="true"
+                class="flex items-center bg-[#E8FFEA] border border-solid border-[#81B337] my-[10px] rounded-[6px] h-[40px] px-[12px] cursor-move"
+                @dragstart="onDragStart('cc')"
+              >
+                <icon-send /><span class="ml-[5px]">抄送</span>
+              </div>
+              <div
+                draggable="true"
+                class="flex items-center bg-[#FFF7E8] border border-solid border-[#FFBF6B] rounded-[6px] h-[40px] px-[12px] cursor-move"
+                @dragstart="onDragStart('condition')"
+              >
+                <icon-share-alt /><span class="ml-[5px]">条件</span>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
+      <addApproval
+        v-model:visible="addApprovalVisible"
+        :is-edit="isEditAddApproval"
+        :record="editApprovalRecord"
+        @submitted="handleApprovalSubmitted"
+      />
+      <!-- 节点配置弹窗 -->
+      <a-modal
+        v-model:visible="nodeConfigVisible"
+        :title="nodeConfigTitle"
+        :width="500"
+        :footer="false"
+        @cancel="handleCloseNodeConfig"
+      >
+        <NodeConfigPanel
+          v-if="selectedNode"
+          :node="selectedNode"
+          :is-modal="true"
+          @save="handleSaveNodeConfig"
+          @delete="handleDeleteNode"
+        />
+      </a-modal>
     </a-card>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, onMounted } from 'vue';
-  import { getWorkflowsList } from '@/api/setting';
-  // import { useI18n } from 'vue-i18n';
+  import { ref, onMounted, watch, computed } from 'vue';
+  import { VueFlow, useVueFlow, type Node, type Edge } from '@vue-flow/core';
+  import { generateRandomId } from '@/utils';
+  import '@vue-flow/core/dist/style.css';
+  import '@vue-flow/core/dist/theme-default.css';
+  import '@vue-flow/controls/dist/style.css';
+  import '@vue-flow/minimap/dist/style.css';
+  import {
+    getWorkflowsList,
+    getWorkflowsDetail,
+    saveWorkflows,
+    toggleWorkflowsDisable,
+    delWorkflows,
+  } from '@/api/setting';
+  import { Message } from '@arco-design/web-vue';
+  import addApproval from './components/add-approval.vue';
+  import StartNode from './components/custom-nodes/StartNode.vue';
+  import ConditionNode from './components/custom-nodes/ConditionNode.vue';
+  import ApproverNode from './components/custom-nodes/ApproverNode.vue';
+  import CcNode from './components/custom-nodes/CcNode.vue';
+  import EndNode from './components/custom-nodes/EndNode.vue';
+  import NodeConfigPanel from './components/NodeConfigPanel.vue';
   const processList = [
     { type: 1, text: '审批流程', icon: '' },
-    { type: 2, text: '工作流程', icon: '' },
+    // { type: 2, text: '工作流程', icon: '' },
   ];
   const currentType = ref<number>(1);
-
+  // currentTypeStr 用于 a-tabs 的 active-key（需要字符串类型）
+  const currentTypeStr = computed({
+    get: () => String(currentType.value),
+    set: (val: string) => {
+      currentType.value = Number(val);
+    },
+  });
+  const addApprovalVisible = ref<boolean>(false);
+  const isEditAddApproval = ref<boolean>(false);
+  const editApprovalRecord = ref<any>(null);
+  const currentApproval = ref<any>(null);
+  const currentApprovalId = ref<number>(-1);
   const workflowsList = ref<any>({ 1: [], 2: [] });
+  const vueFlow = useVueFlow();
+  const {
+    addEdges,
+    addNodes,
+    removeNodes,
+    removeEdges,
+    findNode,
+    getViewport,
+  } = vueFlow;
+  const elements = ref<(Node | Edge)[]>([]);
+
+  // 拖拽相关
+  const dragType = ref<string>('');
+
+  // 选中的节点
+  const selectedNode = ref<Node | null>(null);
+  // 节点配置弹窗显示状态
+  const nodeConfigVisible = ref(false);
+  const nodeConfigTitle = computed(() => {
+    if (!selectedNode.value) return '';
+    if (selectedNode.value.type === 'condition') return '条件判断';
+    if (selectedNode.value.type === 'approver') return '审批人';
+    if (selectedNode.value.type === 'cc') return '抄送人';
+    return '';
+  });
+
+  // 节点类型映射
+  const nodeTypeMap: Record<number, string> = {
+    1: 'approver', // 串行 -> 审批人
+    2: 'approver', // 并行 -> 审批人
+    3: 'condition', // 条件
+  };
+
+  // 将接口数据转换为 vue-flow elements
+  function convertNodesToElements(nodes: any[]): (Node | Edge)[] {
+    const result: (Node | Edge)[] = [];
+    const edges: Edge[] = [];
+
+    if (!nodes || nodes.length === 0) {
+      // 如果没有节点，创建默认的开始和结束节点
+      const startNode: Node = {
+        id: 'start',
+        type: 'input',
+        position: { x: 250, y: 50 },
+        data: { label: '开始' } as any,
+      };
+      const endNode: Node = {
+        id: 'end',
+        type: 'output',
+        position: { x: 250, y: 600 },
+        data: { label: '结束' } as any,
+      };
+      result.push(startNode, endNode);
+      return result;
+    }
+
+    // 创建开始节点
+    const startNode: Node = {
+      id: 'start',
+      type: 'input',
+      position: { x: 250, y: 50 },
+      data: { label: '开始' } as any,
+    };
+    result.push(startNode);
+
+    // 按层级和排序组织节点
+    const nodesByLevel = new Map<number, any[]>();
+    nodes.forEach((node) => {
+      const level = node.level || 1;
+      if (!nodesByLevel.has(level)) {
+        nodesByLevel.set(level, []);
+      }
+      nodesByLevel.get(level)!.push(node);
+    });
+
+    // 计算最大层级
+    let maxLevel = 0;
+    nodesByLevel.forEach((_, level) => {
+      if (level > maxLevel) maxLevel = level;
+    });
+
+    // 创建节点
+    nodes.forEach((node) => {
+      const level = node.level || 1;
+      // 判断节点类型：如果有 ccto 且没有 approvers，则是抄送节点
+      // 或者 approvalType 为 0 且没有 approvers，也是抄送节点（从保存的数据判断）
+      let type = nodeTypeMap[node.type] || 'approver';
+      if (
+        node.type === 1 &&
+        (!node.approvers || node.approvers.length === 0) &&
+        ((node.ccto && node.ccto.length > 0) || node.approvalType === 0)
+      ) {
+        type = 'cc';
+      }
+      const y = 150 + (level - 1) * 150;
+
+      // 计算同一层级的x位置
+      const levelNodes = nodesByLevel.get(level) || [];
+      const index = levelNodes.findIndex((n) => n.id === node.id);
+      const totalInLevel = levelNodes.length;
+      const spacing = 300;
+      const startX = 250 - ((totalInLevel - 1) * spacing) / 2;
+      const x = startX + index * spacing;
+
+      // 根据节点类型确定标签
+      let label = '';
+      if (type === 'condition') {
+        label = '条件';
+        if (node.rules && node.rules.length > 0) {
+          label = `条件(${node.rules.length})`;
+        }
+      } else if (type === 'approver') {
+        label = '审批人';
+        if (node.approvers && node.approvers.length > 0) {
+          const approvalTypeText = node.approvalType === 1 ? '会签' : '或签';
+          label = `审批人(${node.approvers.length}人·${approvalTypeText})`;
+        }
+      } else {
+        label = '抄送';
+        if (node.ccto && node.ccto.length > 0) {
+          label = `抄送(${node.ccto.length}人)`;
+        }
+      }
+
+      const flowNode: Node = {
+        id: `node-${node.id}`,
+        type:
+          type === 'condition'
+            ? 'condition'
+            : type === 'approver'
+            ? 'approver'
+            : 'cc',
+        position: { x, y },
+        // 设置连接点位置
+        sourcePosition: 'bottom',
+        targetPosition: 'top',
+        // 允许节点被连接
+        connectable: true,
+        // 允许节点被拖拽
+        draggable: true,
+        data: {
+          label,
+          nodeId: node.id,
+          // 处理 rules：需要转换 contractApprovers 格式
+          rules: (node.rules || []).map((rule: any) => {
+            const ruleData = { ...rule };
+            // 处理 contractApprovers：转换为标准格式
+            if (
+              rule.contractApprovers &&
+              Array.isArray(rule.contractApprovers)
+            ) {
+              ruleData.contractApprovers = rule.contractApprovers.map(
+                (approver: any) => {
+                  if (typeof approver === 'object' && approver.userId) {
+                    return {
+                      id: approver.userId,
+                      realname: approver.username || '',
+                      name: approver.username || '',
+                    };
+                  }
+                  return approver;
+                }
+              );
+            }
+            return ruleData;
+          }),
+          // 处理 approvers：可能是对象数组，需要提取用户信息
+          approvers: (node.approvers || []).map((approver: any) => {
+            if (typeof approver === 'object' && approver.userId) {
+              return {
+                id: approver.userId,
+                realname: approver.username || '',
+                name: approver.username || '',
+              };
+            }
+            return approver;
+          }),
+          // 处理 ccto：可能是对象数组，需要提取用户信息
+          ccto: (node.ccto || []).map((cc: any) => {
+            if (typeof cc === 'object' && cc.userId) {
+              return {
+                id: cc.userId,
+                realname: cc.username || '',
+                name: cc.username || '',
+              };
+            }
+            return cc;
+          }),
+          approvalType: node.approvalType,
+          type: node.type,
+          level: node.level,
+          sort: node.sort,
+        } as any,
+      };
+
+      result.push(flowNode);
+    });
+
+    // 创建结束节点
+    const endNode: Node = {
+      id: 'end',
+      type: 'output',
+      position: { x: 250, y: 150 + maxLevel * 150 + 50 },
+      data: { label: '结束' } as any,
+    };
+    result.push(endNode);
+
+    // 创建边（连接关系）
+    nodes.forEach((node) => {
+      const sourceId = `node-${node.id}`;
+
+      // 处理条件节点的特殊连接（true/false分支）
+      if (node.type === 3) {
+        // 条件节点：true分支
+        if (node.nextTrueNodeId) {
+          const targetNode = nodes.find((n) => n.id === node.nextTrueNodeId);
+          if (targetNode) {
+            edges.push({
+              id: `edge-${node.id}-true-${node.nextTrueNodeId}`,
+              source: sourceId,
+              target: `node-${node.nextTrueNodeId}`,
+              data: { label: '是' },
+              style: { stroke: '#11ae3b' },
+              animated: true,
+            });
+          }
+        }
+        // 条件节点：false分支
+        if (node.nextFalseNodeId) {
+          const targetNode = nodes.find((n) => n.id === node.nextFalseNodeId);
+          if (targetNode) {
+            edges.push({
+              id: `edge-${node.id}-false-${node.nextFalseNodeId}`,
+              source: sourceId,
+              target: `node-${node.nextFalseNodeId}`,
+              data: { label: '否' },
+              style: { stroke: '#f54748' },
+              animated: true,
+            });
+          }
+        }
+      } else {
+        // 普通节点：nextNodeId连接
+        if (node.nextNodeId) {
+          const targetNode = nodes.find((n) => n.id === node.nextNodeId);
+          if (targetNode) {
+            edges.push({
+              id: `edge-${node.id}-${node.nextNodeId}`,
+              source: sourceId,
+              target: `node-${node.nextNodeId}`,
+              animated: true,
+            });
+          }
+        }
+      }
+
+      // 处理fromNodeId连接（从上一级节点连接）
+      if (node.fromNodeId === 0) {
+        // 连接到开始节点
+        edges.push({
+          id: `edge-start-${node.id}`,
+          source: 'start',
+          target: sourceId,
+          animated: true,
+        });
+      }
+    });
+
+    // 找到没有下一级的节点，连接到结束节点
+    const nodesWithoutNext = nodes.filter(
+      (node) =>
+        !node.nextNodeId && !node.nextTrueNodeId && !node.nextFalseNodeId
+    );
+    nodesWithoutNext.forEach((node) => {
+      edges.push({
+        id: `edge-${node.id}-end`,
+        source: `node-${node.id}`,
+        target: 'end',
+        animated: true,
+      });
+    });
+
+    result.push(...edges);
+    return result;
+  }
+
+  // 拖拽开始
+  const onDragStart = (type: string) => {
+    dragType.value = type;
+  };
+
+  // 拖拽放置
+  const onDrop = (event: DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (!dragType.value) return;
+
+    // 获取画布元素（VueFlow 的容器）
+    const canvas = event.currentTarget as HTMLElement;
+    const rect = canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    // 转换为流程图坐标，优先使用视图中心位置
+    let position;
+    try {
+      // 优先获取当前视图中心位置，让新节点出现在视图中心
+      if (vueFlow && typeof getViewport === 'function') {
+        const viewport = getViewport();
+        if (viewport) {
+          // 获取画布尺寸
+          const canvas = event.currentTarget as HTMLElement;
+          const canvasWidth = canvas.offsetWidth || 800;
+          const canvasHeight = canvas.offsetHeight || 600;
+          const zoom = viewport.zoom || 1;
+
+          // 计算视图中心在流程图坐标系中的位置
+          // viewport.x 和 viewport.y 是视图的偏移量
+          position = {
+            x: (viewport.x || 0) + (canvasWidth / 2 - 100) / zoom,
+            y: (viewport.y || 0) + (canvasHeight / 2 - 50) / zoom,
+          };
+        } else {
+          // 如果无法获取视图，尝试使用坐标转换
+          if (vueFlow && typeof vueFlow.screenToFlowCoordinate === 'function') {
+            position = vueFlow.screenToFlowCoordinate({ x, y });
+          } else {
+            position = { x: x - 100, y: y - 100 };
+          }
+        }
+      } else if (
+        vueFlow &&
+        typeof vueFlow.screenToFlowCoordinate === 'function'
+      ) {
+        // 使用坐标转换方法
+        position = vueFlow.screenToFlowCoordinate({ x, y });
+      } else {
+        // 如果都无法使用，使用鼠标位置
+        position = { x: x - 100, y: y - 100 };
+      }
+    } catch (e) {
+      // 如果转换失败，使用相对坐标
+      position = { x: x - 100, y: y - 100 };
+    }
+
+    // 创建新节点
+    const nodeId = generateRandomId(8);
+    const nodeType =
+      dragType.value === 'condition'
+        ? 'condition'
+        : dragType.value === 'approver'
+        ? 'approver'
+        : 'cc';
+
+    // 确定节点类型和默认数据
+    let nodeTypeValue = 1; // 默认审批人
+    let label = '';
+    if (nodeType === 'condition') {
+      nodeTypeValue = 3;
+      label = '条件';
+    } else if (nodeType === 'approver') {
+      nodeTypeValue = 1;
+      label = '审批人';
+    } else {
+      nodeTypeValue = 1; // 抄送也使用类型1，但通过其他字段区分
+      label = '抄送';
+    }
+
+    const newNode: Node = {
+      id: nodeId,
+      type: nodeType,
+      position,
+      // 设置连接点位置，使节点可以连接
+      sourcePosition: 'bottom',
+      targetPosition: 'top',
+      // 允许节点被连接
+      connectable: true,
+      // 允许节点被拖拽
+      draggable: true,
+      data: {
+        label,
+        nodeId: undefined,
+        rules: [],
+        approvers: [],
+        ccto: [],
+        approvalType: 2, // 默认或签
+        type: nodeTypeValue,
+        level: 1,
+        sort: 1,
+      } as any,
+    };
+
+    // 添加到流程图
+    addNodes([newNode]);
+
+    // 自动创建连线
+    autoConnectNode(newNode, nodeType);
+
+    dragType.value = '';
+  };
+
+  // 自动连接节点
+  const autoConnectNode = (newNode: Node, newNodeType: string) => {
+    // 获取所有现有节点
+    const existingNodes: Node[] = [];
+    elements.value.forEach((el) => {
+      if ('type' in el && 'id' in el && 'position' in el) {
+        const node = el as Node;
+        if (node.id !== newNode.id) {
+          existingNodes.push(node);
+        }
+      }
+    });
+
+    // 根据节点类型进行不同的自动连接处理
+    if (newNodeType === 'condition') {
+      // 条件节点：自动连接到开始节点
+      const startNode = existingNodes.find((n) => n.id === 'start');
+      if (startNode) {
+        // 检查是否已经有从开始节点到条件节点的连接
+        let hasStartConnection = false;
+        for (const el of elements.value) {
+          if ('source' in el && 'target' in el) {
+            const edge = el as Edge;
+            if (edge.source === 'start' && edge.target === newNode.id) {
+              hasStartConnection = true;
+              break;
+            }
+          }
+        }
+
+        if (!hasStartConnection) {
+          const startEdge: Edge = {
+            id: `edge-start-${newNode.id}`,
+            source: 'start',
+            target: newNode.id,
+            animated: true,
+          };
+          addEdges([startEdge]);
+        }
+      }
+      // 条件节点的另一端（连接到审批人）需要手动选择，不自动连接
+    } else if (newNodeType === 'approver') {
+      // 审批人节点：不自动连接，需要手动连接
+      // 但可以检查是否有条件节点需要连接到这个审批人
+    } else if (newNodeType === 'cc') {
+      // 抄送节点：不自动连接，需要手动连接
+    }
+  };
+
+  // 双击检测
+  let lastClickNode: Node | null = null;
+  let lastClickTime = 0;
+  const DOUBLE_CLICK_DELAY = 300; // 双击间隔时间（毫秒）
+
+  // 节点点击（双击打开配置弹窗）
+  const onNodeClick = (event: any) => {
+    const node = event.node;
+    if (!node) return;
+
+    // 开始和结束节点不允许编辑，直接返回
+    // 开始节点的 id 是 'start'，type 是 'input'
+    // 结束节点的 id 是 'end'，type 是 'output'
+    if (
+      node.id === 'start' ||
+      node.id === 'end' ||
+      node.type === 'input' ||
+      node.type === 'output'
+    ) {
+      return;
+    }
+
+    const now = Date.now();
+    // 判断是否为双击
+    if (
+      lastClickNode?.id === node.id &&
+      now - lastClickTime < DOUBLE_CLICK_DELAY
+    ) {
+      // 双击事件
+      selectedNode.value = node;
+      nodeConfigVisible.value = true;
+      lastClickNode = null;
+      lastClickTime = 0;
+    } else {
+      // 单击事件，记录信息
+      lastClickNode = node;
+      lastClickTime = now;
+    }
+  };
+
+  // 处理节点点击（从自定义组件触发，双击）
+  const handleNodeClick = (nodeId?: number) => {
+    if (nodeId) {
+      const node = findNode(`node-${nodeId}`);
+      if (node) {
+        // 开始和结束节点不允许编辑，直接返回
+        if (
+          node.id === 'start' ||
+          node.id === 'end' ||
+          node.type === 'input' ||
+          node.type === 'output'
+        ) {
+          return;
+        }
+        selectedNode.value = node;
+        nodeConfigVisible.value = true;
+      }
+    }
+  };
+
+  // 验证连接是否合法（在连接创建之前验证）
+  const isValidConnection = (connection: any) => {
+    const sourceNode = findNode(connection.source);
+    const targetNode = findNode(connection.target);
+
+    // 验证连接规则
+    if (!sourceNode || !targetNode) return false;
+
+    const sourceType = sourceNode.type;
+    const targetType = targetNode.type;
+
+    // 验证连接是否合法
+    // 根据源节点和目标节点的类型组合判断
+    let isValid = false;
+
+    // 条件节点 → 审批人
+    if (sourceType === 'condition' && targetType === 'approver') {
+      isValid = true;
+    }
+    // 审批人 → 抄送（抄送只能从审批人接收连接）
+    else if (sourceType === 'approver' && targetType === 'cc') {
+      isValid = true;
+    }
+    // 审批人 → 结束
+    else if (sourceType === 'approver' && targetType === 'output') {
+      isValid = true;
+    }
+    // 抄送 → 结束（抄送只能连接到结束）
+    else if (sourceType === 'cc' && targetType === 'output') {
+      isValid = true;
+    }
+    // 开始 → 任何非结束节点
+    else if (sourceType === 'input' && targetType !== 'output') {
+      isValid = true;
+    }
+
+    // 明确禁止的连接：
+    // 抄送不能连接到审批人（只能连接到结束）
+    if (sourceType === 'cc' && targetType === 'approver') {
+      isValid = false;
+    }
+    // 结束不能连接到任何节点（结束是终点）
+    if (sourceType === 'output') {
+      isValid = false;
+    }
+    // 抄送不能从结束接收连接（只能从审批人接收）
+    if (targetType === 'cc' && sourceType === 'output') {
+      isValid = false;
+    }
+    // 抄送不能从条件接收连接（只能从审批人接收）
+    if (targetType === 'cc' && sourceType === 'condition') {
+      isValid = false;
+    }
+    // 抄送不能从开始接收连接（只能从审批人接收）
+    if (targetType === 'cc' && sourceType === 'input') {
+      isValid = false;
+    }
+
+    return isValid;
+  };
+
+  // 节点连接（手动拖拽连接）
+  const onConnect = (connection: any) => {
+    const sourceNode = findNode(connection.source);
+    const targetNode = findNode(connection.target);
+
+    // 验证连接规则
+    if (!sourceNode || !targetNode) return;
+
+    const sourceType = sourceNode.type;
+    const targetType = targetNode.type;
+
+    // 如果是条件节点连接到审批人，需要创建带标签的边
+    if (sourceType === 'condition' && targetType === 'approver') {
+      // 检查是否已经有 true 或 false 分支
+      const existingTrueEdge = elements.value.find(
+        (el) =>
+          'source' in el &&
+          'target' in el &&
+          (el as Edge).source === connection.source &&
+          (el as Edge).target === connection.target &&
+          (el as Edge).data?.label === '是'
+      );
+      const existingFalseEdge = elements.value.find(
+        (el) =>
+          'source' in el &&
+          'target' in el &&
+          (el as Edge).source === connection.source &&
+          (el as Edge).target === connection.target &&
+          (el as Edge).data?.label === '否'
+      );
+
+      // 如果没有 true 分支，创建 true 分支
+      if (!existingTrueEdge && !existingFalseEdge) {
+        const trueEdge: Edge = {
+          id: `edge-${connection.source}-true-${connection.target}`,
+          source: connection.source!,
+          target: connection.target!,
+          data: { label: '是' },
+          style: { stroke: '#11ae3b' },
+          animated: true,
+        };
+        addEdges([trueEdge]);
+      } else if (!existingFalseEdge) {
+        // 如果已有 true 分支，创建 false 分支
+        const falseEdge: Edge = {
+          id: `edge-${connection.source}-false-${connection.target}`,
+          source: connection.source!,
+          target: connection.target!,
+          data: { label: '否' },
+          style: { stroke: '#f54748' },
+          animated: true,
+        };
+        addEdges([falseEdge]);
+      }
+    } else {
+      // 普通连接
+      addEdges({
+        id: `e-${connection.source}-${connection.target}`,
+        source: connection.source!,
+        target: connection.target!,
+        animated: true,
+        data: { label: `${connection.source} → ${connection.target}` },
+      });
+    }
+  };
+
+  // 保存节点配置
+  const handleSaveNodeConfig = (configData?: any) => {
+    if (!selectedNode.value) return;
+
+    // 如果是从 NodeConfigPanel 组件触发的保存事件
+    if (configData) {
+      // 更新节点数据
+      const nodeData = { ...selectedNode.value.data };
+
+      if (selectedNode.value.type === 'condition') {
+        // 条件节点：更新 rules
+        nodeData.rules = configData.rules || [];
+      } else if (selectedNode.value.type === 'approver') {
+        // 审批人节点：更新 approvers 和 approvalType
+        nodeData.approvers = configData.approvers || [];
+        nodeData.approvalType = configData.approvalType || 2;
+        nodeData.rejectAction = configData.rejectAction || 1;
+        // 如果删除了审批人，但添加了抄送人，需要同时更新 ccto
+        // 注意：如果 approvers 为空且有 ccto，保存时会识别为抄送节点
+        if (configData.ccto && Array.isArray(configData.ccto)) {
+          nodeData.ccto = configData.ccto;
+        } else {
+          // 如果没有 ccto，确保 ccto 字段存在（即使为空数组）
+          nodeData.ccto = nodeData.ccto || [];
+        }
+      } else if (selectedNode.value.type === 'cc') {
+        // 抄送节点：更新 ccto
+        nodeData.ccto = configData.ccto || [];
+      }
+
+      selectedNode.value.data = nodeData;
+
+      // 更新 elements 中的节点
+      const nodeIndex = elements.value.findIndex(
+        (el) => 'id' in el && el.id === selectedNode.value!.id
+      );
+      if (nodeIndex >= 0) {
+        const elementNode = elements.value[nodeIndex] as Node;
+        elementNode.data = { ...nodeData };
+        // 调试：输出更新后的节点数据（已注释，避免 lint 警告）
+        // console.log('更新节点数据:', {
+        //   nodeId: elementNode.id,
+        //   nodeType: elementNode.type,
+        //   nodeData: elementNode.data,
+        // });
+      }
+    }
+
+    // 关闭弹窗
+    nodeConfigVisible.value = false;
+  };
+
+  // 关闭节点配置弹窗
+  const handleCloseNodeConfig = () => {
+    nodeConfigVisible.value = false;
+    selectedNode.value = null;
+  };
+
+  // 删除节点
+  const handleDeleteNode = () => {
+    if (!selectedNode.value) return;
+
+    const nodeId = selectedNode.value.id;
+
+    // 删除节点
+    removeNodes([nodeId]);
+
+    // 删除相关的边
+    const edgesToRemove = elements.value
+      .filter(
+        (el) => 'source' in el && (el.source === nodeId || el.target === nodeId)
+      )
+      .map((el) => el.id);
+
+    if (edgesToRemove.length > 0) {
+      removeEdges(edgesToRemove);
+    }
+
+    // 从 elements 中移除
+    elements.value = elements.value.filter((el) => {
+      if ('id' in el) {
+        return el.id !== nodeId && !edgesToRemove.includes(el.id);
+      }
+      return true;
+    });
+
+    // 关闭弹窗并清空选中状态
+    nodeConfigVisible.value = false;
+    selectedNode.value = null;
+  };
   async function getWorkflowsListData() {
     const { code, data } = await getWorkflowsList(currentType.value);
     if (code === 200) {
       workflowsList.value[currentType.value] = data?.workflowsSetting;
+      // 无论是审批流还是工作流，如果有数据，自动选择第一个并加载详情
+      if (data?.workflowsSetting && data.workflowsSetting.length > 0) {
+        const firstId = data.workflowsSetting[0]?.id;
+        // 无论 currentApprovalId 是否等于 firstId，都重新加载详情（确保切换类型时能正确显示）
+        currentApprovalId.value = firstId;
+        // 直接调用，不通过 watch（避免 watch 中的条件判断阻止加载）
+        await getWorkflowsDetailData();
+      } else {
+        // 如果没有数据，清空详情和流程图
+        currentApprovalId.value = -1;
+        currentApproval.value = null;
+        elements.value = [];
+      }
     }
   }
+  async function getWorkflowsDetailData() {
+    const { code, data } = await getWorkflowsDetail(currentApprovalId.value);
+    if (code === 200 && data) {
+      currentApproval.value = data?.workflowsSetting;
+      // 转换节点数据为流程图元素
+      if (
+        currentApproval.value?.nodes &&
+        Array.isArray(currentApproval.value.nodes)
+      ) {
+        elements.value = convertNodesToElements(currentApproval.value.nodes);
+      } else {
+        // 如果没有节点数据，创建默认的开始和结束节点
+        elements.value = convertNodesToElements([]);
+      }
+    }
+  }
+  // chooseSettingTab 函数已移除，改用 watch 监听 currentType 变化
+  function handleAddApproval() {
+    addApprovalVisible.value = true;
+    isEditAddApproval.value = false;
+    editApprovalRecord.value = null;
+  }
 
-  const chooseSettingTab = (type: number) => {
-    if (type === currentType.value) return;
-    currentType.value = type;
-    getWorkflowsListData();
+  // 编辑审批流程
+  function handleEditApproval() {
+    if (!currentApproval.value) {
+      Message.warning('请先选择要编辑的流程');
+      return;
+    }
+    // 将 currentApproval 的数据转换为组件需要的格式
+    // 注意：projectIds 在 add-approval 组件中使用 tree-select，支持多选，但提交时会转为数组
+    // 如果 projects 是数组，需要提取所有 id
+    const projectIds =
+      currentApproval.value.projects &&
+      currentApproval.value.projects.length > 0
+        ? currentApproval.value.projects.length === 1
+          ? currentApproval.value.projects[0].id
+          : currentApproval.value.projects.map((p: any) => p.id)
+        : null;
+
+    editApprovalRecord.value = {
+      id: currentApproval.value.id,
+      name: currentApproval.value.name || '',
+      workflowsTypeId: currentApproval.value.workflowsTypeId || null,
+      projectIds: projectIds,
+      remark: currentApproval.value.remark || '',
+    };
+    addApprovalVisible.value = true;
+    isEditAddApproval.value = true;
+  }
+
+  // 处理审批流程提交后的回调
+  const handleApprovalSubmitted = async () => {
+    // 重新加载列表和详情数据
+    await getWorkflowsListData();
+    if (currentApprovalId.value > 0) {
+      await getWorkflowsDetailData();
+    }
   };
+  function chooseApproval(item: any) {
+    if (item.id === currentApprovalId.value) return;
+    // 只修改 currentApprovalId，让 watch 来处理详情接口调用，避免重复调用
+    currentApprovalId.value = item.id;
+  }
+
+  // 切换流程状态（启用/禁用）
+  const handleToggleStatus = async (value: string | number | boolean) => {
+    if (!currentApproval.value || !currentApprovalId.value) {
+      return;
+    }
+
+    // 将 value 转换为 number 类型（1 或 2）
+    // a-switch 的 checked-value 是 1，unchecked-value 是 2，所以 value 应该是 1 或 2
+    let status: number;
+    if (typeof value === 'number') {
+      status = value;
+    } else if (value === true) {
+      status = 1;
+    } else if (value === '1') {
+      status = 1;
+    } else {
+      status = 2;
+    }
+
+    try {
+      const params = {
+        id: currentApprovalId.value,
+        status,
+      };
+
+      const { code, message } = await toggleWorkflowsDisable(params);
+      if (code === 200) {
+        Message.success(message || '操作成功');
+        // 更新详情数据（保持当前选中的流程）
+        await getWorkflowsDetailData();
+        // 更新列表数据（不自动选择第一个）
+        const { code: listCode, data: listData } = await getWorkflowsList(
+          currentType.value
+        );
+        if (listCode === 200) {
+          workflowsList.value[currentType.value] = listData?.workflowsSetting;
+        }
+      } else {
+        // 如果失败，恢复原状态
+        if (currentApproval.value) {
+          currentApproval.value.status = status === 1 ? 2 : 1;
+        }
+        Message.error(message || '操作失败');
+      }
+    } catch (error: any) {
+      // 如果失败，恢复原状态
+      if (currentApproval.value) {
+        currentApproval.value.status = status === 1 ? 2 : 1;
+      }
+      Message.error(error?.message || '操作失败');
+      // console.error('切换流程状态失败:', error);
+    }
+  };
+
+  // 监听 currentType 变化，切换流程类型时请求对应数据
+  watch(
+    () => currentType.value,
+    async (newType, oldType) => {
+      // 只在类型真正改变时触发（避免初始化时的触发）
+      // oldType 为 undefined 表示是初始化，不需要处理
+      if (oldType !== undefined && newType !== oldType) {
+        // console.log('切换流程类型:', oldType, '->', newType);
+        // 切换类型时，立即清空当前选中的流程和详情数据，隐藏右侧内容
+        currentApprovalId.value = -1;
+        currentApproval.value = null;
+        elements.value = [];
+        // 请求对应类型的列表数据（会自动加载第一个流程的详情）
+        await getWorkflowsListData();
+      }
+    },
+    { immediate: false }
+  );
+
+  // 监听 currentApprovalId 变化，仅在外部直接修改时触发（避免重复调用）
+  watch(
+    () => currentApprovalId.value,
+    (newId, oldId) => {
+      // 只在 oldId 存在且与新值不同时才调用，避免初始化时的重复调用
+      if (newId > 0 && oldId !== -1 && oldId !== newId) {
+        getWorkflowsDetailData();
+      }
+    }
+  );
+
+  // 将流程图数据转换为后端格式
+  const convertElementsToNodes = (): any[] => {
+    const nodes: any[] = [];
+    const nodeMap = new Map<string, any>(); // 存储节点ID到节点数据的映射
+
+    // 第一步：收集所有节点（排除开始和结束节点）
+    const workflowNodes = elements.value.filter((el) => {
+      if ('type' in el && 'id' in el) {
+        const node = el as Node;
+        // 确保节点有 position 属性
+        if (!node.position) {
+          // console.warn(`节点 ${node.id} 缺少 position 属性`);
+          return false;
+        }
+        return (
+          node.id !== 'start' &&
+          node.id !== 'end' &&
+          node.type !== 'input' &&
+          node.type !== 'output'
+        );
+      }
+      return false;
+    }) as Node[];
+
+    // 第二步：构建节点连接关系图
+    const edges = elements.value.filter(
+      (el) => 'source' in el && 'target' in el
+    ) as Edge[];
+    const nodeConnections = new Map<
+      string,
+      { from: string; isTrue?: boolean }[]
+    >();
+
+    // 初始化连接关系
+    workflowNodes.forEach((node) => {
+      nodeConnections.set(node.id, []);
+    });
+
+    // 分析边的连接关系
+    edges.forEach((edge) => {
+      const targetConnections = nodeConnections.get(edge.target);
+      if (targetConnections) {
+        const isTrue =
+          edge.data?.label === '是'
+            ? true
+            : edge.data?.label === '否'
+            ? false
+            : undefined;
+        targetConnections.push({
+          from: edge.source,
+          isTrue,
+        });
+      }
+    });
+
+    // 第三步：计算层级和排序
+    // 从开始节点开始，使用BFS计算层级
+    const nodeLevels = new Map<string, number>();
+    const visited = new Set<string>();
+    const queue: { id: string; level: number }[] = [{ id: 'start', level: 0 }];
+
+    while (queue.length > 0) {
+      const current = queue.shift()!;
+      if (visited.has(current.id)) continue;
+      visited.add(current.id);
+
+      // 找到所有从当前节点出发的边
+      edges.forEach((edge) => {
+        if (edge.source === current.id && edge.target !== 'end') {
+          const targetNode = workflowNodes.find((n) => n.id === edge.target);
+          if (targetNode && !visited.has(edge.target)) {
+            nodeLevels.set(edge.target, current.level + 1);
+            queue.push({ id: edge.target, level: current.level + 1 });
+          }
+        }
+      });
+    }
+
+    // 按层级和位置排序节点
+    const nodesByLevel = new Map<number, Node[]>();
+    workflowNodes.forEach((node) => {
+      const level = nodeLevels.get(node.id) || 1;
+      if (!nodesByLevel.has(level)) {
+        nodesByLevel.set(level, []);
+      }
+      nodesByLevel.get(level)!.push(node);
+    });
+
+    // 第四步：转换为后端格式
+    let sortCounter = 1;
+    const nodeSortMap = new Map<string, number>();
+
+    // 按层级顺序处理节点
+    const sortedLevels = Array.from(nodesByLevel.keys()).sort((a, b) => a - b);
+
+    sortedLevels.forEach((level) => {
+      const levelNodes = nodesByLevel.get(level) || [];
+      // 按x坐标排序（从左到右），确保 position 存在
+      levelNodes.sort((a, b) => {
+        const aX = a.position?.x || 0;
+        const bX = b.position?.x || 0;
+        return aX - bX;
+      });
+
+      levelNodes.forEach((node) => {
+        const sort = sortCounter++;
+        nodeSortMap.set(node.id, sort);
+
+        // 获取节点的连接信息
+        const connections = nodeConnections.get(node.id) || [];
+        const fromConnection = connections[0]; // 取第一个连接（通常只有一个）
+
+        let fromSort = 0;
+        let fromType = 0;
+        let isTrue = 0;
+
+        if (fromConnection) {
+          const fromNode = workflowNodes.find(
+            (n) => n.id === fromConnection.from
+          );
+          if (fromNode) {
+            fromSort = nodeSortMap.get(fromNode.id) || 0;
+
+            // 确定 fromType（上一级节点的类型）
+            // type: 1串行，2并行，3条件
+            if (fromNode.type === 'condition') {
+              fromType = 3;
+            } else if (fromNode.type === 'approver') {
+              // 审批人：根据审批方式判断
+              fromType = fromNode.data?.approvalType === 1 ? 2 : 1;
+            } else if (fromNode.type === 'cc') {
+              fromType = 1; // 抄送类型为1（串行）
+            }
+
+            // 确定 isTrue（只有从条件节点连接时才有意义）
+            if (fromNode.type === 'condition') {
+              if (fromConnection.isTrue === true) {
+                isTrue = 1;
+              } else if (fromConnection.isTrue === false) {
+                isTrue = 2;
+              }
+            }
+          }
+        }
+
+        // 判断是否为抄送节点：
+        // 1. type 为 'cc'（直接创建的抄送节点，不管是否有 ccto 数据）
+        // 2. 或者 type 为 'approver' 但没有 approvers 且有 ccto（说明用户删除了审批人，添加了抄送人）
+        // 注意：即使 ccto 为空，只要 type 是 'cc'，也应该识别为抄送节点（可能还没配置抄送人）
+        const isCcNode =
+          node.type === 'cc' ||
+          (node.type === 'approver' &&
+            (!node.data?.approvers || node.data.approvers.length === 0) &&
+            node.data?.ccto &&
+            Array.isArray(node.data.ccto) &&
+            node.data.ccto.length > 0);
+
+        // 确定节点类型
+        // type: 1串行，2并行，3条件
+        // 串行：开始->审批->抄送->结束（一条线，顺序执行）
+        // 并行：从开始节点或条件节点分出多个审批节点（多个分支同时进行）
+        // 条件：type = 3
+        let nodeType = 1; // 默认串行
+        if (node.type === 'condition') {
+          nodeType = 3; // 条件
+        } else if (isCcNode) {
+          nodeType = 1; // 抄送类型为1（串行）
+        } else if (node.type === 'approver') {
+          // 审批人节点类型判断：
+          // 检查源节点：如果从开始节点或条件节点连接，且同一层级有多个审批节点，则为并行
+          const fromNode = fromConnection
+            ? workflowNodes.find((n) => n.id === fromConnection.from)
+            : null;
+          const isFromStartOrCondition =
+            fromConnection &&
+            (fromConnection.from === 'start' || fromNode?.type === 'condition');
+
+          // 检查同一层级是否有多个审批节点（并行情况）
+          const currentLevel = nodeLevels.get(node.id) || 1;
+          const sameLevelNodes = nodesByLevel.get(currentLevel) || [];
+          const sameLevelApprovers = sameLevelNodes.filter((n) => {
+            // 排除抄送节点
+            const nIsCc =
+              n.type === 'cc' ||
+              (n.type === 'approver' &&
+                (!n.data?.approvers || n.data.approvers.length === 0) &&
+                n.data?.ccto &&
+                Array.isArray(n.data.ccto) &&
+                n.data.ccto.length > 0);
+            return n.type === 'approver' && !nIsCc;
+          });
+          const hasMultipleApproversInLevel = sameLevelApprovers.length > 1;
+
+          // 判断逻辑：
+          // 1. 如果从开始/条件节点连接，且同一层级有多个审批节点，则为并行（type = 2）
+          // 2. 否则，根据审批方式判断：会签（approvalType = 1）-> 并行（type = 2），或签（approvalType = 2）-> 串行（type = 1）
+          if (isFromStartOrCondition && hasMultipleApproversInLevel) {
+            nodeType = 2; // 并行：从开始/条件节点分出多个审批节点
+          } else {
+            // 根据审批方式判断：会签 -> 并行，或签 -> 串行
+            nodeType = node.data?.approvalType === 1 ? 2 : 1;
+          }
+        }
+
+        // 构建规则数组
+        const rules: any[] = [];
+        if (node.data?.rules && Array.isArray(node.data.rules)) {
+          node.data.rules.forEach((rule: any) => {
+            const ruleData: any = {
+              fieldType: rule.fieldType,
+              operatorType: rule.operatorType,
+              termType: rule.termType || 0,
+              amount: rule.amount || 0,
+              area: rule.area || '',
+              unit: rule.unit || 3,
+            };
+
+            // 如果是发起人类型，添加 approvers
+            if (rule.fieldType === 4 && rule.contractApprovers) {
+              ruleData.approvers = rule.contractApprovers.map((u: any) => {
+                // u 可能是对象 {id, realname, name} 或直接是 id
+                return typeof u === 'object' ? u.id || u.userId : u;
+              });
+            }
+
+            rules.push(ruleData);
+          });
+        }
+
+        // 构建审批人数组（只有非抄送节点才构建）
+        const approvers: any[] = [];
+        if (
+          !isCcNode &&
+          node.type === 'approver' &&
+          node.data?.approvers &&
+          Array.isArray(node.data.approvers)
+        ) {
+          node.data.approvers.forEach((approver: any) => {
+            // approver 可能是对象 {id, realname, name} 或直接是 id
+            const userId =
+              typeof approver === 'object'
+                ? approver.id || approver.userId
+                : approver;
+            if (userId) {
+              approvers.push({
+                id: userId,
+                approvalType: node.data?.approvalType || 2,
+              });
+            }
+          });
+        }
+
+        // 构建抄送人数组
+        const ccTos: number[] = [];
+        // 如果是抄送节点，提取 ccto 数据
+        if (isCcNode) {
+          // 调试：输出节点数据（已注释，避免 lint 警告）
+          // console.log('抄送节点数据:', {
+          //   nodeId: node.id,
+          //   nodeType: node.type,
+          //   ccto: node.data?.ccto,
+          //   isCcNode,
+          // });
+
+          if (
+            node.data?.ccto &&
+            Array.isArray(node.data.ccto) &&
+            node.data.ccto.length > 0
+          ) {
+            node.data.ccto.forEach((cc: any) => {
+              // cc 可能是对象 {id, realname, name} 或直接是 id
+              const userId = typeof cc === 'object' ? cc.id || cc.userId : cc;
+              if (userId) {
+                ccTos.push(userId);
+              }
+            });
+            // console.log('提取的抄送人ID:', ccTos);
+          } else {
+            // console.warn('抄送节点但没有 ccto 数据:', {
+            //   nodeId: node.id,
+            //   nodeType: node.type,
+            //   nodeData: node.data,
+            // });
+          }
+        }
+
+        // 构建节点数据
+        const nodeData: any = {
+          sort,
+          level,
+          type: nodeType,
+          approvalType: isCcNode ? 0 : node.data?.approvalType || 0, // 抄送节点 approvalType 为 0
+          fromSort,
+          fromType,
+          isTrue, // 0否，1是（true分支），2否（false分支）
+          rules,
+          approvers,
+          ccTos,
+        };
+
+        // 如果有节点ID（从接口加载的），保留ID
+        if (node.data?.nodeId) {
+          nodeData.id = node.data.nodeId;
+        }
+
+        nodes.push(nodeData);
+      });
+    });
+
+    return nodes;
+  };
+
+  // 保存流程
+  const handleSaveWorkflow = async () => {
+    if (!currentApproval.value || !currentApprovalId.value) {
+      Message.warning('请先选择要保存的流程');
+      return;
+    }
+
+    try {
+      // 转换流程图数据为后端格式
+      const nodes = convertElementsToNodes();
+
+      // 验证节点数据
+      if (nodes.length === 0) {
+        Message.warning('流程图中没有可保存的节点');
+        return;
+      }
+
+      const params = {
+        id: currentApprovalId.value,
+        nodes,
+      };
+
+      const { code, message } = await saveWorkflows(params);
+      if (code === 200) {
+        Message.success(message || '保存成功');
+        // 重新加载流程详情
+        await getWorkflowsDetailData();
+      } else {
+        Message.error(message || '保存失败');
+      }
+    } catch (error: any) {
+      Message.error(error?.message || '保存失败');
+      // console.error('保存流程失败:', error);
+    }
+  };
+  // 删除流程
+  const handleDelWorkflow = async () => {
+    if (!currentApprovalId.value || currentApprovalId.value <= 0) {
+      Message.warning('请先选择要删除的流程');
+      return;
+    }
+
+    try {
+      const { code, message } = await delWorkflows(currentApprovalId.value);
+      if (code === 200) {
+        Message.success(message || '删除成功');
+        // 重新加载列表数据
+        await getWorkflowsListData();
+        // getWorkflowsListData 会自动选择第一个流程（如果有数据）
+        // 如果没有数据，会自动清空详情和流程图
+      } else {
+        Message.error(message || '删除失败');
+      }
+    } catch (error: any) {
+      Message.error(error?.message || '删除失败');
+      // console.error('删除流程失败:', error);
+    }
+  };
+
   onMounted(() => {
     getWorkflowsListData();
   });
 </script>
-<style lang="less" scoped></style>
+
+<style>
+  @import url('@vue-flow/core/dist/style.css');
+  @import url('@vue-flow/core/dist/theme-default.css');
+</style>
+<style lang="less" scoped>
+  .process-canvas {
+    position: relative;
+    height: 760px;
+    background: #f8f9fb;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+</style>