From e9f929c2da396f89573f03d13411e7cb96c49d78 Mon Sep 17 00:00:00 2001
From: xxm <xxm1995@outlook.com>
Date: Mon, 13 Feb 2023 21:48:26 +0800
Subject: [PATCH 01/28] =?UTF-8?q?style=20=E6=95=B0=E6=8D=AE=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../monitor/data/DataVersionLog.api.ts        |  42 ++-----
 .../monitor/data/DataVersionLogEdit.vue       | 113 ------------------
 .../monitor/data/DataVersionLogInfo.vue       |  82 +++++++++++++
 .../monitor/data/DataVersionLogList.vue       |  55 +++------
 .../monitor/operate/OperateLogInfo.vue        |   1 -
 5 files changed, 106 insertions(+), 187 deletions(-)
 delete mode 100644 src/views/modules/monitor/data/DataVersionLogEdit.vue
 create mode 100644 src/views/modules/monitor/data/DataVersionLogInfo.vue

diff --git a/src/views/modules/monitor/data/DataVersionLog.api.ts b/src/views/modules/monitor/data/DataVersionLog.api.ts
index ff73a43..6e00442 100644
--- a/src/views/modules/monitor/data/DataVersionLog.api.ts
+++ b/src/views/modules/monitor/data/DataVersionLog.api.ts
@@ -22,36 +22,6 @@ export const get = (id) => {
   })
 }
 
-/**
- * 添加
- */
-export const add = (obj: DataVersionLog) => {
-  return defHttp.post({
-    url: '/log/dataVersion/add',
-    data: obj,
-  })
-}
-
-/**
- * 更新
- */
-export const update = (obj: DataVersionLog) => {
-  return defHttp.post({
-    url: '/log/dataVersion/update',
-    data: obj,
-  })
-}
-
-/**
- * 删除
- */
-export const del = (id) => {
-  return defHttp.delete({
-    url: '/log/dataVersion/delete',
-    params: { id },
-  })
-}
-
 /**
  * 查询全部
  */
@@ -65,10 +35,16 @@ export const findAll = () => {
  * 数据版本日志
  */
 export interface DataVersionLog extends BaseEntity {
+  // 表名称
+  tableName?: string
   // 数据名称
-  dataName: string
+  dataName?: string
   // 数据主键
-  dataId: string
+  dataId?: string
   // 数据内容
-  dataContent: string
+  dataContent?: string
+  // 本次变动的数据内容
+  changeContent?: string
+  // 数据版本
+  version?: number
 }
diff --git a/src/views/modules/monitor/data/DataVersionLogEdit.vue b/src/views/modules/monitor/data/DataVersionLogEdit.vue
deleted file mode 100644
index ca845b1..0000000
--- a/src/views/modules/monitor/data/DataVersionLogEdit.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-  <basic-modal
-    v-bind="$attrs"
-    :loading="confirmLoading"
-    :width="modalWidth"
-    :title="title"
-    :visible="visible"
-    :mask-closable="showable"
-    @cancel="handleCancel"
-  >
-    <a-form class="small-from-item" ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-      <a-form-item label="主键" :hidden="true">
-        <a-input v-model:value="form.id" :disabled="showable" />
-      </a-form-item>
-      <a-form-item label="数据名称" name="dataName">
-        <a-input v-model:value="form.dataName" :disabled="showable" placeholder="请输入数据名称" />
-      </a-form-item>
-      <a-form-item label="数据主键" name="dataId">
-        <a-input v-model:value="form.dataId" :disabled="showable" placeholder="请输入数据主键" />
-      </a-form-item>
-      <a-form-item label="数据内容" name="dataContent">
-        <a-input v-model:value="form.dataContent" :disabled="showable" placeholder="请输入数据内容" />
-      </a-form-item>
-    </a-form>
-    <template #footer>
-      <a-space>
-        <a-button key="cancel" @click="handleCancel">取消</a-button>
-        <a-button v-if="!showable" key="forward" :loading="confirmLoading" type="primary" @click="handleOk">保存</a-button>
-      </a-space>
-    </template>
-  </basic-modal>
-</template>
-
-<script lang="ts" setup>
-  import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
-  import useFormEdit from '/@/hooks/bootx/useFormEdit'
-  import { add, get, update, DataVersionLog } from './DataVersionLog.api'
-  import { FormInstance, Rule } from 'ant-design-vue/lib/form'
-  import { FormEditType } from '/@/enums/formTypeEnum'
-  import { BasicModal } from '/@/components/Modal'
-
-  const {
-    initFormEditType,
-    handleCancel,
-    search,
-    labelCol,
-    wrapperCol,
-    modalWidth,
-    title,
-    confirmLoading,
-    visible,
-    editable,
-    showable,
-    formEditType,
-  } = useFormEdit()
-  // 表单
-  const formRef = $ref<FormInstance>()
-  let form = $ref({
-    id: null,
-    dataName: null,
-    dataId: null,
-    dataContent: null,
-  } as DataVersionLog)
-  // 校验
-  const rules = reactive({} as Record<string, Rule[]>)
-  // 事件
-  const emits = defineEmits(['ok'])
-  // 入口
-  function init(id, editType: FormEditType) {
-    initFormEditType(editType)
-    resetForm()
-    getInfo(id, editType)
-  }
-  // 获取信息
-  function getInfo(id, editType: FormEditType) {
-    if ([FormEditType.Edit, FormEditType.Show].includes(editType)) {
-      confirmLoading.value = true
-      get(id).then(({ data }) => {
-        form = data
-        confirmLoading.value = false
-      })
-    } else {
-      confirmLoading.value = false
-    }
-  }
-  // 保存
-  function handleOk() {
-    formRef?.validate().then(async () => {
-      confirmLoading.value = true
-      if (formEditType.value === FormEditType.Add) {
-        await add(form)
-      } else if (formEditType.value === FormEditType.Edit) {
-        await update(form)
-      }
-      confirmLoading.value = false
-      handleCancel()
-      emits('ok')
-    })
-  }
-
-  // 重置表单的校验
-  function resetForm() {
-    nextTick(() => {
-      formRef?.resetFields()
-    })
-  }
-  defineExpose({
-    init,
-  })
-</script>
-
-<style lang="less" scoped></style>
diff --git a/src/views/modules/monitor/data/DataVersionLogInfo.vue b/src/views/modules/monitor/data/DataVersionLogInfo.vue
new file mode 100644
index 0000000..6f6218e
--- /dev/null
+++ b/src/views/modules/monitor/data/DataVersionLogInfo.vue
@@ -0,0 +1,82 @@
+<template>
+  <basic-modal
+    v-bind="$attrs"
+    title="查看"
+    :width="960"
+    :loading="confirmLoading"
+    :visible="visible"
+    :mask-closable="showable"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-descriptions title="" :column="{ md: 2, sm: 1, xs: 1 }">
+        <a-descriptions-item label="表名称">
+          {{ form.tableName }}
+        </a-descriptions-item>
+        <a-descriptions-item label="数据名称">
+          {{ form.dataName }}
+        </a-descriptions-item>
+        <a-descriptions-item label="数据主键">
+          {{ form.dataId }}
+        </a-descriptions-item>
+        <a-descriptions-item label="数据版本">
+          {{ form.version }}
+        </a-descriptions-item>
+        <a-descriptions-item label="数据内容">
+          <json-preview :data="JSON.parse(form.dataContent || '{}')" />
+        </a-descriptions-item>
+        <a-descriptions-item label="变动内容">
+          <json-preview :data="JSON.parse(form.changeContent || '{}')" />
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-spin>
+    <template #footer>
+      <a-button key="cancel" @click="handleCancel">取消</a-button>
+    </template>
+  </basic-modal>
+</template>
+
+<script lang="ts" setup>
+  import { $ref } from 'vue/macros'
+  import useFormEdit from '/@/hooks/bootx/useFormEdit'
+  import JsonPreview from '/@/components/CodeEditor/src/json-preview/JsonPreview.vue'
+  import { get, DataVersionLog } from './DataVersionLog.api'
+  import { FormInstance, Rule } from 'ant-design-vue/lib/form'
+  import { FormEditType } from '/@/enums/formTypeEnum'
+  import { BasicModal } from '/@/components/Modal'
+
+  const {
+    initFormEditType,
+    handleCancel,
+    search,
+    labelCol,
+    wrapperCol,
+    modalWidth,
+    title,
+    confirmLoading,
+    visible,
+    editable,
+    showable,
+    formEditType,
+  } = useFormEdit()
+  // 表单
+  let form = $ref<DataVersionLog>({})
+  // 入口
+  function init(id) {
+    visible.value = true
+    getInfo(id)
+  }
+  // 获取信息
+  function getInfo(id) {
+    get(id).then(({ data }) => {
+      form = data
+      confirmLoading.value = false
+    })
+  }
+
+  defineExpose({
+    init,
+  })
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/modules/monitor/data/DataVersionLogList.vue b/src/views/modules/monitor/data/DataVersionLogList.vue
index 3b30ac6..71ee376 100644
--- a/src/views/modules/monitor/data/DataVersionLogList.vue
+++ b/src/views/modules/monitor/data/DataVersionLogList.vue
@@ -4,32 +4,19 @@
       <b-query :query-params="model.queryParam" :fields="fields" @query="queryPage" @reset="resetQueryParams" />
     </div>
     <div class="m-3 p-3 bg-white">
-      <vxe-toolbar ref="xToolbar" custom :refresh="{ query: queryPage }">
-        <template #buttons>
-          <a-space>
-            <a-button type="primary" pre-icon="ant-design:plus-outlined" @click="add">新建</a-button>
-          </a-space>
-        </template>
-      </vxe-toolbar>
+      <vxe-toolbar ref="xToolbar" custom :refresh="{ query: queryPage }" />
       <vxe-table row-id="id" ref="xTable" :data="pagination.records" :loading="loading">
         <vxe-column type="seq" width="60" />
+        <vxe-column field="tableName" title="表名称" />
         <vxe-column field="dataName" title="数据名称" />
         <vxe-column field="dataId" title="数据主键" />
-        <vxe-column field="dataContent" title="数据内容" />
+        <vxe-column field="version" title="数据版本" />
         <vxe-column field="createTime" title="创建时间" />
-        <vxe-column fixed="right" width="150" :showOverflow="false" title="操作">
+        <vxe-column fixed="right" width="60" :showOverflow="false" title="操作">
           <template #default="{ row }">
             <span>
               <a href="javascript:" @click="show(row)">查看</a>
             </span>
-            <a-divider type="vertical" />
-            <span>
-              <a href="javascript:" @click="edit(row)">编辑</a>
-            </span>
-            <a-divider type="vertical" />
-            <a-popconfirm title="是否删除" @confirm="remove(row)" okText="是" cancelText="否">
-              <a href="javascript:" style="color: red">删除</a>
-            </a-popconfirm>
           </template>
         </vxe-column>
       </vxe-table>
@@ -47,23 +34,27 @@
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, ref } from 'vue'
+  import { onMounted } from 'vue'
   import { $ref } from 'vue/macros'
-  import { del, page } from './DataVersionLog.api'
+  import { page } from './DataVersionLog.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
-  import DataVersionLogEdit from './DataVersionLogEdit.vue'
+  import DataVersionLogEdit from './DataVersionLogInfo.vue'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
   import BQuery from '/@/components/Bootx/Query/BQuery.vue'
-  import { FormEditType } from '/@/enums/formTypeEnum'
   import { useMessage } from '/@/hooks/web/useMessage'
-  import { QueryField } from '/@/components/Bootx/Query/Query'
+  import { NUMBER, QueryField, STRING } from '/@/components/Bootx/Query/Query'
 
   // 使用hooks
   const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
   const { notification, createMessage } = useMessage()
 
   // 查询条件
-  const fields = [] as QueryField[]
+  const fields = [
+    { field: 'dataName', type: STRING, name: '数据名称', placeholder: '请输入数据名称' },
+    { field: 'tableName', type: STRING, name: '表名称', placeholder: '请输入表名称' },
+    { field: 'dataId', type: STRING, name: '数据主键', placeholder: '请输入数据主键' },
+    { field: 'version', type: NUMBER, name: '数据版本', placeholder: '请输入数据版本' },
+  ] as QueryField[]
 
   const xTable = $ref<VxeTableInstance>()
   const xToolbar = $ref<VxeToolbarInstance>()
@@ -87,25 +78,9 @@
       pageQueryResHandel(data)
     })
   }
-  // 新增
-  function add() {
-    dataVersionLogEdit.init(null, FormEditType.Add)
-  }
-  // 查看
-  function edit(record) {
-    dataVersionLogEdit.init(record.id, FormEditType.Edit)
-  }
   // 查看
   function show(record) {
-    dataVersionLogEdit.init(record.id, FormEditType.Show)
-  }
-
-  // 删除
-  function remove(record) {
-    del(record.id).then(() => {
-      createMessage.success('删除成功')
-    })
-    queryPage()
+    dataVersionLogEdit.init(record.id)
   }
 </script>
 
diff --git a/src/views/modules/monitor/operate/OperateLogInfo.vue b/src/views/modules/monitor/operate/OperateLogInfo.vue
index b19efc6..7179032 100644
--- a/src/views/modules/monitor/operate/OperateLogInfo.vue
+++ b/src/views/modules/monitor/operate/OperateLogInfo.vue
@@ -50,7 +50,6 @@
   import { $ref } from 'vue/macros'
   import { get, OperateLog } from './OperateLog.api'
   import { BasicModal } from '/@/components/Modal'
-  import Description from '/@/components/Description/src/Description.vue'
   import { DescItem } from '/@/components/Description'
   import { useDict } from '/@/hooks/bootx/useDict'
 
-- 
Gitee


From 1dc7b4b0facefa284a49892721f454d0ea5c78ef Mon Sep 17 00:00:00 2001
From: xxm <xxm1995@outlook.com>
Date: Mon, 13 Feb 2023 22:00:45 +0800
Subject: [PATCH 02/28] =?UTF-8?q?style=20=E6=9F=A5=E8=AF=A2=E6=8D=A2?=
 =?UTF-8?q?=E8=A1=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/design/components/antdv.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/design/components/antdv.less b/src/design/components/antdv.less
index ea76b0d..1c34dc7 100644
--- a/src/design/components/antdv.less
+++ b/src/design/components/antdv.less
@@ -14,7 +14,7 @@
 /* 分页列表搜索栏 */
 .page-query {
   .ant-form-item {
-    margin-bottom: 8px;
+    margin-bottom: 8px !important;
   }
   .ant-row {
     width: 100%;
-- 
Gitee


From c6364b2775ef783851e7f9784331253c09378354 Mon Sep 17 00:00:00 2001
From: xxm <xxm1995@outlook.com>
Date: Mon, 13 Feb 2023 22:31:41 +0800
Subject: [PATCH 03/28] =?UTF-8?q?fix=20=E6=9F=A5=E7=9C=8B=E6=88=96?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=90=8Eid=E4=B8=BB=E9=94=AE=E4=B8=8D?=
 =?UTF-8?q?=E9=87=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/bpm/model/BpmModelEdit.vue                 | 2 +-
 src/views/modules/bpm/model/BpmModelNodeEdit.vue             | 2 +-
 src/views/modules/demo/data/encrypt/DataEncryptDemoEdit.vue  | 4 +++-
 src/views/modules/demo/data/perm/DataPermDemoEdit.vue        | 5 +----
 .../modules/demo/data/sensitive/DataSensitiveDemoEdit.vue    | 2 +-
 src/views/modules/demo/query/SuperQueryDemoEdit.vue          | 2 +-
 src/views/modules/develop/dynamicform/DynamicFormEdit.vue    | 2 +-
 .../modules/develop/dynamicsource/DynamicDataSourceEdit.vue  | 2 +-
 src/views/modules/notice/mail/MailConfigEdit.vue             | 2 +-
 src/views/modules/notice/template/MessageTemplateEdit.vue    | 2 +-
 .../modules/payment/channel/alipay/AlipayConfigEdit.vue      | 2 +-
 .../modules/payment/channel/wechat/WechatPayConfigEdit.vue   | 2 +-
 src/views/modules/system/client/ClientEdit.vue               | 2 +-
 src/views/modules/system/dept/DeptEdit.vue                   | 2 +-
 src/views/modules/system/dict/DictEdit.vue                   | 2 +-
 src/views/modules/system/dict/DictItemEdit.vue               | 2 +-
 src/views/modules/system/menu/ResourceEdit.vue               | 2 +-
 src/views/modules/system/param/SystemParamEdit.vue           | 2 +-
 src/views/modules/system/path/PermPathEdit.vue               | 2 +-
 src/views/modules/system/quartz/QuartzJobEdit.vue            | 2 +-
 src/views/modules/system/role/RoleEdit.vue                   | 2 +-
 src/views/modules/system/scope/DataScopeEdit.vue             | 2 +-
 .../modules/third/dingtalk/robot/DingRobotConfigEdit.vue     | 2 +-
 src/views/modules/third/wechat/menu/WechatMenuEdit.vue       | 2 +-
 .../modules/third/wechat/template/WechatTemplateEdit.vue     | 2 +-
 src/views/modules/third/wecom/robot/WecomRobotConfigEdit.vue | 2 +-
 26 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/src/views/modules/bpm/model/BpmModelEdit.vue b/src/views/modules/bpm/model/BpmModelEdit.vue
index 1a173a7..f9d313a 100644
--- a/src/views/modules/bpm/model/BpmModelEdit.vue
+++ b/src/views/modules/bpm/model/BpmModelEdit.vue
@@ -17,7 +17,7 @@
       :label-col="labelCol"
       :wrapper-col="wrapperCol"
     >
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="名称" name="name">
diff --git a/src/views/modules/bpm/model/BpmModelNodeEdit.vue b/src/views/modules/bpm/model/BpmModelNodeEdit.vue
index d169f47..d5e4027 100644
--- a/src/views/modules/bpm/model/BpmModelNodeEdit.vue
+++ b/src/views/modules/bpm/model/BpmModelNodeEdit.vue
@@ -17,7 +17,7 @@
       :label-col="labelCol"
       :wrapper-col="wrapperCol"
     >
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="任务节点id" name="nodeId">
diff --git a/src/views/modules/demo/data/encrypt/DataEncryptDemoEdit.vue b/src/views/modules/demo/data/encrypt/DataEncryptDemoEdit.vue
index 1900d58..dc706a6 100644
--- a/src/views/modules/demo/data/encrypt/DataEncryptDemoEdit.vue
+++ b/src/views/modules/demo/data/encrypt/DataEncryptDemoEdit.vue
@@ -17,7 +17,7 @@
       :label-col="labelCol"
       :wrapper-col="wrapperCol"
     >
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="名称" name="name">
@@ -105,7 +105,9 @@
   // 重置表单
   function resetForm() {
     nextTick(() => {
+      console.log(form)
       formRef?.resetFields()
+      console.log(form)
     })
   }
   defineExpose({
diff --git a/src/views/modules/demo/data/perm/DataPermDemoEdit.vue b/src/views/modules/demo/data/perm/DataPermDemoEdit.vue
index b7c97f9..d4706ae 100644
--- a/src/views/modules/demo/data/perm/DataPermDemoEdit.vue
+++ b/src/views/modules/demo/data/perm/DataPermDemoEdit.vue
@@ -17,15 +17,12 @@
       :label-col="labelCol"
       :wrapper-col="wrapperCol"
     >
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="名称" name="name">
         <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入名称" />
       </a-form-item>
-      <a-form-item label="创建者名称" name="creatorName">
-        <a-input v-model:value="form.creatorName" :disabled="showable" placeholder="请输入创建者名称" />
-      </a-form-item>
       <a-form-item label="说明" name="remark">
         <a-input v-model:value="form.remark" :disabled="showable" placeholder="请输入说明" />
       </a-form-item>
diff --git a/src/views/modules/demo/data/sensitive/DataSensitiveDemoEdit.vue b/src/views/modules/demo/data/sensitive/DataSensitiveDemoEdit.vue
index 1e38c8a..62d3c5c 100644
--- a/src/views/modules/demo/data/sensitive/DataSensitiveDemoEdit.vue
+++ b/src/views/modules/demo/data/sensitive/DataSensitiveDemoEdit.vue
@@ -17,7 +17,7 @@
       :label-col="labelCol"
       :wrapper-col="wrapperCol"
     >
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="中文名字" name="chineseName">
diff --git a/src/views/modules/demo/query/SuperQueryDemoEdit.vue b/src/views/modules/demo/query/SuperQueryDemoEdit.vue
index ef5fb30..1e430b6 100644
--- a/src/views/modules/demo/query/SuperQueryDemoEdit.vue
+++ b/src/views/modules/demo/query/SuperQueryDemoEdit.vue
@@ -17,7 +17,7 @@
       :label-col="labelCol"
       :wrapper-col="wrapperCol"
     >
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="名称" name="name">
diff --git a/src/views/modules/develop/dynamicform/DynamicFormEdit.vue b/src/views/modules/develop/dynamicform/DynamicFormEdit.vue
index 25e5c1c..69263b6 100644
--- a/src/views/modules/develop/dynamicform/DynamicFormEdit.vue
+++ b/src/views/modules/develop/dynamicform/DynamicFormEdit.vue
@@ -9,7 +9,7 @@
     @cancel="handleCancel"
   >
     <a-form class="small-from-item" ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="表单名称" name="name">
diff --git a/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue b/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue
index 140a4eb..b7f6035 100644
--- a/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue
+++ b/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue
@@ -9,7 +9,7 @@
     @cancel="handleCancel"
   >
     <a-form class="small-from-item" ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="数据源编码" name="code">
diff --git a/src/views/modules/notice/mail/MailConfigEdit.vue b/src/views/modules/notice/mail/MailConfigEdit.vue
index 91cb5e1..022d807 100644
--- a/src/views/modules/notice/mail/MailConfigEdit.vue
+++ b/src/views/modules/notice/mail/MailConfigEdit.vue
@@ -17,7 +17,7 @@
       :label-col="labelCol"
       :wrapper-col="wrapperCol"
     >
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="编号" name="code">
diff --git a/src/views/modules/notice/template/MessageTemplateEdit.vue b/src/views/modules/notice/template/MessageTemplateEdit.vue
index 2890bfb..dfe4ba9 100644
--- a/src/views/modules/notice/template/MessageTemplateEdit.vue
+++ b/src/views/modules/notice/template/MessageTemplateEdit.vue
@@ -9,7 +9,7 @@
     @cancel="handleCancel"
   >
     <a-form layout="vertical" ref="formRef" :validate-trigger="['blur', 'change']" :model="form" :rules="rules">
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="编码" name="code">
diff --git a/src/views/modules/payment/channel/alipay/AlipayConfigEdit.vue b/src/views/modules/payment/channel/alipay/AlipayConfigEdit.vue
index 575bdd8..21067ae 100644
--- a/src/views/modules/payment/channel/alipay/AlipayConfigEdit.vue
+++ b/src/views/modules/payment/channel/alipay/AlipayConfigEdit.vue
@@ -18,7 +18,7 @@
         :label-col="labelCol"
         :wrapper-col="wrapperCol"
       >
-        <a-form-item label="主键" :hidden="true">
+        <a-form-item label="主键" name="id" :hidden="true">
           <a-input v-model:value="form.id" :disabled="showable" />
         </a-form-item>
         <a-form-item label="名称" name="name">
diff --git a/src/views/modules/payment/channel/wechat/WechatPayConfigEdit.vue b/src/views/modules/payment/channel/wechat/WechatPayConfigEdit.vue
index b1df795..14f5a47 100644
--- a/src/views/modules/payment/channel/wechat/WechatPayConfigEdit.vue
+++ b/src/views/modules/payment/channel/wechat/WechatPayConfigEdit.vue
@@ -18,7 +18,7 @@
         :label-col="labelCol"
         :wrapper-col="wrapperCol"
       >
-        <a-form-item label="主键" :hidden="true">
+        <a-form-item label="主键" name="id" :hidden="true">
           <a-input v-model:value="form.id" :disabled="showable" />
         </a-form-item>
         <a-form-item label="名称" name="name">
diff --git a/src/views/modules/system/client/ClientEdit.vue b/src/views/modules/system/client/ClientEdit.vue
index 5e042b2..d2a3b45 100644
--- a/src/views/modules/system/client/ClientEdit.vue
+++ b/src/views/modules/system/client/ClientEdit.vue
@@ -10,7 +10,7 @@
   >
     <a-spin :spinning="confirmLoading">
       <a-form class="small-from-item" ref="formRef" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-form-item label="主键" :hidden="true">
+        <a-form-item label="主键" name="id" :hidden="true">
           <a-input v-model:value="form.id" :disabled="showable" />
         </a-form-item>
         <a-form-item label="编码" v-bind="validateInfos.code" name="code">
diff --git a/src/views/modules/system/dept/DeptEdit.vue b/src/views/modules/system/dept/DeptEdit.vue
index d6e3eca..67a76de 100644
--- a/src/views/modules/system/dept/DeptEdit.vue
+++ b/src/views/modules/system/dept/DeptEdit.vue
@@ -18,7 +18,7 @@
         :label-col="labelCol"
         :wrapper-col="wrapperCol"
       >
-        <a-form-item label="主键" :hidden="true">
+        <a-form-item label="主键" name="id" :hidden="true">
           <a-input v-model:value="form.id" :disabled="showable" />
         </a-form-item>
         <a-form-item label="类型" name="orgCategory">
diff --git a/src/views/modules/system/dict/DictEdit.vue b/src/views/modules/system/dict/DictEdit.vue
index 2db5510..75a03f6 100644
--- a/src/views/modules/system/dict/DictEdit.vue
+++ b/src/views/modules/system/dict/DictEdit.vue
@@ -9,7 +9,7 @@
     @cancel="handleCancel"
   >
     <a-form class="small-from-item" ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="编码" name="code">
diff --git a/src/views/modules/system/dict/DictItemEdit.vue b/src/views/modules/system/dict/DictItemEdit.vue
index 0765755..35aee16 100644
--- a/src/views/modules/system/dict/DictItemEdit.vue
+++ b/src/views/modules/system/dict/DictItemEdit.vue
@@ -9,7 +9,7 @@
     @cancel="handleCancel"
   >
     <a-form class="small-from-item" ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="字典编码" name="dictCode">
diff --git a/src/views/modules/system/menu/ResourceEdit.vue b/src/views/modules/system/menu/ResourceEdit.vue
index db054f5..36ef8b1 100644
--- a/src/views/modules/system/menu/ResourceEdit.vue
+++ b/src/views/modules/system/menu/ResourceEdit.vue
@@ -9,7 +9,7 @@
       :label-col="labelCol"
       :wrapper-col="wrapperCol"
     >
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item validate-first label="编码" name="permCode">
diff --git a/src/views/modules/system/param/SystemParamEdit.vue b/src/views/modules/system/param/SystemParamEdit.vue
index 5c010c5..9fbc5b8 100644
--- a/src/views/modules/system/param/SystemParamEdit.vue
+++ b/src/views/modules/system/param/SystemParamEdit.vue
@@ -9,7 +9,7 @@
     @cancel="handleCancel"
   >
     <a-form class="small-from-item" ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="参数名称" name="name">
diff --git a/src/views/modules/system/path/PermPathEdit.vue b/src/views/modules/system/path/PermPathEdit.vue
index 3b0288a..29a805d 100644
--- a/src/views/modules/system/path/PermPathEdit.vue
+++ b/src/views/modules/system/path/PermPathEdit.vue
@@ -9,7 +9,7 @@
     @cancel="handleCancel"
   >
     <a-form class="small-from-item" ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="请求路径" name="path">
diff --git a/src/views/modules/system/quartz/QuartzJobEdit.vue b/src/views/modules/system/quartz/QuartzJobEdit.vue
index 413b7fa..237e180 100644
--- a/src/views/modules/system/quartz/QuartzJobEdit.vue
+++ b/src/views/modules/system/quartz/QuartzJobEdit.vue
@@ -9,7 +9,7 @@
     @cancel="handleCancel"
   >
     <a-form class="small-from-item" ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="任务名称" name="name">
diff --git a/src/views/modules/system/role/RoleEdit.vue b/src/views/modules/system/role/RoleEdit.vue
index 027896e..357093b 100644
--- a/src/views/modules/system/role/RoleEdit.vue
+++ b/src/views/modules/system/role/RoleEdit.vue
@@ -1,7 +1,7 @@
 <template>
   <basic-modal :loading="confirmLoading" v-bind="$attrs" :title="title" :visible="visible" :mask-closable="showable" @cancel="handleCancel">
     <a-form class="small-from-item" :model="form" ref="formRef" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="编码" name="code">
diff --git a/src/views/modules/system/scope/DataScopeEdit.vue b/src/views/modules/system/scope/DataScopeEdit.vue
index ab99660..e23ac4b 100644
--- a/src/views/modules/system/scope/DataScopeEdit.vue
+++ b/src/views/modules/system/scope/DataScopeEdit.vue
@@ -9,7 +9,7 @@
     @cancel="handleCancel"
   >
     <a-form class="small-from-item" ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="名称" name="name">
diff --git a/src/views/modules/third/dingtalk/robot/DingRobotConfigEdit.vue b/src/views/modules/third/dingtalk/robot/DingRobotConfigEdit.vue
index c2ac425..83f48ca 100644
--- a/src/views/modules/third/dingtalk/robot/DingRobotConfigEdit.vue
+++ b/src/views/modules/third/dingtalk/robot/DingRobotConfigEdit.vue
@@ -17,7 +17,7 @@
       :label-col="labelCol"
       :wrapper-col="wrapperCol"
     >
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="机器人编码" name="code">
diff --git a/src/views/modules/third/wechat/menu/WechatMenuEdit.vue b/src/views/modules/third/wechat/menu/WechatMenuEdit.vue
index 763eea6..8167ac8 100644
--- a/src/views/modules/third/wechat/menu/WechatMenuEdit.vue
+++ b/src/views/modules/third/wechat/menu/WechatMenuEdit.vue
@@ -17,7 +17,7 @@
       :label-col="labelCol"
       :wrapper-col="wrapperCol"
     >
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="名称" name="name">
diff --git a/src/views/modules/third/wechat/template/WechatTemplateEdit.vue b/src/views/modules/third/wechat/template/WechatTemplateEdit.vue
index 0afbf17..cf3ef5a 100644
--- a/src/views/modules/third/wechat/template/WechatTemplateEdit.vue
+++ b/src/views/modules/third/wechat/template/WechatTemplateEdit.vue
@@ -18,7 +18,7 @@
         :label-col="labelCol"
         :wrapper-col="wrapperCol"
       >
-        <a-form-item label="主键" :hidden="true">
+        <a-form-item label="主键" name="id" :hidden="true">
           <a-input v-model:value="form.id" :disabled="showable" />
         </a-form-item>
         <a-form-item label="名称" name="name">
diff --git a/src/views/modules/third/wecom/robot/WecomRobotConfigEdit.vue b/src/views/modules/third/wecom/robot/WecomRobotConfigEdit.vue
index 515057e..e9d4bc4 100644
--- a/src/views/modules/third/wecom/robot/WecomRobotConfigEdit.vue
+++ b/src/views/modules/third/wecom/robot/WecomRobotConfigEdit.vue
@@ -17,7 +17,7 @@
       :label-col="labelCol"
       :wrapper-col="wrapperCol"
     >
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="名称" name="name">
-- 
Gitee


From d4a4592d82f41891556c206438c10f4635252710 Mon Sep 17 00:00:00 2001
From: xxm <xxm1995@outlook.com>
Date: Mon, 13 Feb 2023 22:37:57 +0800
Subject: [PATCH 04/28] =?UTF-8?q?style=20=E6=96=87=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/monitor/data/DataVersionLogInfo.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/modules/monitor/data/DataVersionLogInfo.vue b/src/views/modules/monitor/data/DataVersionLogInfo.vue
index 6f6218e..5c192c3 100644
--- a/src/views/modules/monitor/data/DataVersionLogInfo.vue
+++ b/src/views/modules/monitor/data/DataVersionLogInfo.vue
@@ -25,7 +25,7 @@
         <a-descriptions-item label="数据内容">
           <json-preview :data="JSON.parse(form.dataContent || '{}')" />
         </a-descriptions-item>
-        <a-descriptions-item label="变动内容">
+        <a-descriptions-item label="变动前内容">
           <json-preview :data="JSON.parse(form.changeContent || '{}')" />
         </a-descriptions-item>
       </a-descriptions>
-- 
Gitee


From 04bf61318067f6be5d78afbe053a381f95883f15 Mon Sep 17 00:00:00 2001
From: xxm1995 <xxm1995@outlook.com>
Date: Mon, 20 Feb 2023 14:40:46 +0800
Subject: [PATCH 05/28] =?UTF-8?q?feat=20=E9=82=AE=E4=BB=B6=E5=8F=91?=
 =?UTF-8?q?=E9=80=81=E6=BC=94=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit ccc8a474a7cafacff1bdfd71c7b4c320f6617815)
---
 README.md                                     |   1 -
 src/views/account/security/EmailBind.vue      |   2 +-
 .../demo/notice/email/EmailSenderDemo.vue     |  21 ++++
 .../demo/notice/email/SimpleEmailSender.vue   | 107 ++++++++++++++++++
 .../demo/notice/email/StandardEmailSender.vue |   7 ++
 .../demo/notice/email/emailSenderDemo.api.ts  |  21 ++++
 6 files changed, 157 insertions(+), 2 deletions(-)
 create mode 100644 src/views/modules/demo/notice/email/EmailSenderDemo.vue
 create mode 100644 src/views/modules/demo/notice/email/SimpleEmailSender.vue
 create mode 100644 src/views/modules/demo/notice/email/StandardEmailSender.vue
 create mode 100644 src/views/modules/demo/notice/email/emailSenderDemo.api.ts

diff --git a/README.md b/README.md
index d701848..696fa09 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,6 @@
 
 <p>
  <img src='https://gitee.com/bootx/bootx-platform/badge/star.svg?theme=dark' alt='star'/>
- <img src="https://img.shields.io/badge/Boot%20Platform-1.1.3-success.svg" alt="Build Status">
  <img src="https://img.shields.io/badge/Author-Bootx-orange.svg" alt="Build Status">
  <img src="https://img.shields.io/badge/Vue-3.x-blue.svg" alt="Downloads">
  <img src="https://img.shields.io/badge/license-Apache%20License%202.0-green.svg"/>
diff --git a/src/views/account/security/EmailBind.vue b/src/views/account/security/EmailBind.vue
index e90f452..e286fa8 100644
--- a/src/views/account/security/EmailBind.vue
+++ b/src/views/account/security/EmailBind.vue
@@ -45,7 +45,7 @@
   import { useMessage } from '/@/hooks/web/useMessage'
   import { validateEmail } from '/@/utils/validate'
   import { bindEmail } from '/@/views/account/account.api'
-  import CountDownInput from "/@/components/CountDown/src/CountdownInput.vue";
+  import CountDownInput from '/@/components/CountDown/src/CountdownInput.vue'
 
   const emits = defineEmits(['ok'])
   const { visible, confirmLoading, modalWidth, labelCol, wrapperCol, handleCancel } = useFormEdit()
diff --git a/src/views/modules/demo/notice/email/EmailSenderDemo.vue b/src/views/modules/demo/notice/email/EmailSenderDemo.vue
new file mode 100644
index 0000000..41fab0a
--- /dev/null
+++ b/src/views/modules/demo/notice/email/EmailSenderDemo.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <div class="m-3 p-3 pt-3 bg-white">
+      <a-tabs default-active-key="1">
+        <a-tab-pane key="1" tab="简单邮件" force-render>
+          <simple-email-sender />
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="标准邮件" force-render>
+          <standard-email-sender />
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import SimpleEmailSender from './SimpleEmailSender.vue'
+  import StandardEmailSender from './StandardEmailSender.vue'
+</script>
+
+<style scoped></style>
diff --git a/src/views/modules/demo/notice/email/SimpleEmailSender.vue b/src/views/modules/demo/notice/email/SimpleEmailSender.vue
new file mode 100644
index 0000000..b01aa4d
--- /dev/null
+++ b/src/views/modules/demo/notice/email/SimpleEmailSender.vue
@@ -0,0 +1,107 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <a-form layout="vertical" ref="formRef" :validate-trigger="['blur', 'change']" :model="form" :rules="rules">
+      <a-form-item label="标题" name="subject">
+        <a-input v-model:value="form.subject" placeholder="请输入邮件名称" />
+      </a-form-item>
+      <a-form-item validateFirst label="邮箱" name="email">
+        <a-input v-model:value="form.email" placeholder="请输入用户邮箱" />
+      </a-form-item>
+      <a-form-item ref="content" label="内容" name="message">
+        <div style="border: 1px solid #ccc">
+          <a-form-item-rest>
+            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="{}" mode="simple" />
+          </a-form-item-rest>
+          <Editor
+            style="height: 300px; max-height: 650px"
+            v-model="form.message"
+            :defaultConfig="{ placeholder: '请输入内容...' }"
+            mode="simple"
+            @onCreated="handleCreated"
+          />
+        </div>
+      </a-form-item>
+      <a-form-item>
+        <a-space>
+          <a-button @click="resetForm">重置</a-button>
+          <a-button :loading="confirmLoading" type="primary" @click="send">发送</a-button>
+        </a-space>
+      </a-form-item>
+    </a-form>
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+  import '@wangeditor/editor/dist/css/style.css' // 引入 css
+  import { $ref } from 'vue/macros'
+  import { validateEmail } from '/@/utils/validate'
+  import { nextTick, onBeforeUnmount, shallowRef } from 'vue'
+  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+  import { FormInstance } from 'ant-design-vue/lib/form'
+  import { renderHtml } from '/@/utils/lib/wangEditorUtil'
+  import { sentSimpleMail } from '/@/views/modules/demo/notice/email/emailSenderDemo.api'
+  import { useMessage } from '/@/hooks/web/useMessage'
+
+  const { createMessage } = useMessage()
+  let confirmLoading = $ref(false)
+  let formRef = $ref<FormInstance>()
+  // 编辑器实例，必须用 shallowRef
+  const editorRef = shallowRef()
+  let form = $ref({
+    subject: '',
+    email: '',
+    message: '',
+  })
+  const rules = {
+    subject: [{ required: true, message: '请输入标题' }],
+    email: [{ required: true, message: '请输入要发送的邮箱地址' }, { validator: validateEmailRule }],
+    message: [{ required: true, message: '请输入邮件内容' }],
+  }
+
+  // 记录 editor 实例，重要！
+  const handleCreated = (editor) => {
+    editorRef.value = editor
+  }
+
+  /**
+   * 发送
+   */
+  function send() {
+    formRef?.validate().then(() => {
+      // 渲染邮件样式
+      const message = renderHtml(form.message)
+      confirmLoading = true
+      sentSimpleMail({
+        ...form,
+        message,
+      })
+        .then(() => {
+          createMessage.success('发送成功')
+          resetForm()
+        })
+        .catch(() => {
+          confirmLoading = false
+        })
+    })
+  }
+  function resetForm() {
+    nextTick(() => {
+      form.resetFields()
+      this.confirmLoading = false
+    })
+  }
+
+  function validateEmailRule(rule, value, callback) {
+    const { msg, result } = validateEmail(value)
+    result ? callback() : callback(msg)
+  }
+
+  // 组件销毁时，也及时销毁编辑器
+  onBeforeUnmount(() => {
+    const editor = editorRef.value
+    if (editor == null) return
+    editor.destroy()
+  })
+</script>
+
+<style scoped></style>
diff --git a/src/views/modules/demo/notice/email/StandardEmailSender.vue b/src/views/modules/demo/notice/email/StandardEmailSender.vue
new file mode 100644
index 0000000..7c410af
--- /dev/null
+++ b/src/views/modules/demo/notice/email/StandardEmailSender.vue
@@ -0,0 +1,7 @@
+<template>
+  <h1>开发中</h1>
+</template>
+
+<script lang="ts" setup></script>
+
+<style scoped></style>
diff --git a/src/views/modules/demo/notice/email/emailSenderDemo.api.ts b/src/views/modules/demo/notice/email/emailSenderDemo.api.ts
new file mode 100644
index 0000000..78c7341
--- /dev/null
+++ b/src/views/modules/demo/notice/email/emailSenderDemo.api.ts
@@ -0,0 +1,21 @@
+import { defHttp } from '/@/utils/http/axios'
+import { PageResult, Result } from '/#/axios'
+import { BaseEntity } from '/#/web'
+/**
+ * 简单邮件发送
+ */
+export function sentSimpleMail(obj) {
+  return defHttp.post({
+    url: '/demo/notice/email/sentSimpleMail',
+    data: obj,
+  })
+}
+/**
+ * 标准邮件发送
+ */
+export function sentMail(obj) {
+  return defHttp.post({
+    url: '/demo/notice/email/sentMail',
+    data: obj,
+  })
+}
-- 
Gitee


From 72829774449f39485030639d1a6a1ca8b155caf7 Mon Sep 17 00:00:00 2001
From: xxm1995 <xxm1995@outlook.com>
Date: Fri, 24 Feb 2023 17:29:49 +0800
Subject: [PATCH 06/28] =?UTF-8?q?feat=20=E5=8F=AF=E8=A7=86=E5=8C=96?=
 =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/develop/report/ProjectInfo.api.ts |  80 +++++++++++
 .../develop/report/ProjectInfoEdit.vue        | 132 ++++++++++++++++++
 .../develop/report/ProjectInfoList.vue        | 115 +++++++++++++++
 3 files changed, 327 insertions(+)
 create mode 100644 src/views/modules/develop/report/ProjectInfo.api.ts
 create mode 100644 src/views/modules/develop/report/ProjectInfoEdit.vue
 create mode 100644 src/views/modules/develop/report/ProjectInfoList.vue

diff --git a/src/views/modules/develop/report/ProjectInfo.api.ts b/src/views/modules/develop/report/ProjectInfo.api.ts
new file mode 100644
index 0000000..129a179
--- /dev/null
+++ b/src/views/modules/develop/report/ProjectInfo.api.ts
@@ -0,0 +1,80 @@
+import { defHttp } from '/@/utils/http/axios'
+import { PageResult, Result } from '/#/axios'
+import { BaseEntity } from '/#/web'
+
+/**
+ * 分页
+ */
+export function page(params) {
+  return defHttp.get<Result<PageResult<ProjectInfo>>>({
+    url: '/goview/admin/page',
+    params,
+  })
+}
+
+/**
+ * 查询全部
+ */
+export function findAll() {
+  return defHttp.get<Result<ProjectInfo[]>>({
+    url: '/goview/admin/findAll',
+  })
+}
+
+/**
+ * 获取单条
+ */
+export function get(id) {
+  return defHttp.get<Result<ProjectInfo>>({
+    url: '/goview/admin/findById',
+    params: { id },
+  })
+}
+
+/**
+ * 添加
+ */
+export function add(obj: ProjectInfo) {
+  return defHttp.post({
+    url: '/goview/admin/add',
+    data: obj,
+  })
+}
+
+/**
+ * 更新
+ */
+export function update(obj: ProjectInfo) {
+  return defHttp.post({
+    url: '/goview/admin/update',
+    data: obj,
+  })
+}
+
+/**
+ * 删除
+ */
+export function del(id) {
+  return defHttp.delete({
+    url: '/goview/admin/delete',
+    params: { id },
+  })
+}
+
+/**
+ * 自定义大屏信息
+ */
+export interface ProjectInfo extends BaseEntity {
+  // 项目名称
+  name?: string
+  // 发布状态
+  state?: number
+  // 报表内容
+  content?: string
+  // 备注
+  remark?: string
+  // 预览图片id
+  indexImage?: string
+  // 是否在编辑中
+  edit?: boolean
+}
diff --git a/src/views/modules/develop/report/ProjectInfoEdit.vue b/src/views/modules/develop/report/ProjectInfoEdit.vue
new file mode 100644
index 0000000..82dbffa
--- /dev/null
+++ b/src/views/modules/develop/report/ProjectInfoEdit.vue
@@ -0,0 +1,132 @@
+<template>
+  <basic-modal
+    v-bind="$attrs"
+    :loading="confirmLoading"
+    :title="title"
+    :width="modalWidth"
+    :visible="visible"
+    :mask-closable="showable"
+    @cancel="handleCancel"
+  >
+      <a-form
+        class="small-from-item"
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        :validate-trigger="['blur', 'change']"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
+      >
+        <a-form-item label="主键" :hidden="true">
+          <a-input v-model:value="form.id" :disabled="showable" />
+        </a-form-item>
+        <a-form-item label="项目名称" name="name">
+          <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入项目名称" />
+        </a-form-item>
+        <a-form-item label="发布状态" name="state">
+          <a-input v-model:value="form.state" :disabled="showable" placeholder="请输入发布状态" />
+        </a-form-item>
+        <a-form-item label="报表内容" name="content">
+          <a-input v-model:value="form.content" :disabled="showable" placeholder="请输入报表内容" />
+        </a-form-item>
+        <a-form-item label="备注" name="remark">
+          <a-input v-model:value="form.remark" :disabled="showable" placeholder="请输入备注" />
+        </a-form-item>
+        <a-form-item label="预览图片id" name="indexImage">
+          <a-input v-model:value="form.indexImage" :disabled="showable" placeholder="请输入预览图片id" />
+        </a-form-item>
+        <a-form-item label="是否在编辑中" name="edit">
+          <a-input v-model:value="form.edit" :disabled="showable" placeholder="请输入是否在编辑中" />
+        </a-form-item>
+      </a-form>
+    <template #footer>
+      <a-space>
+        <a-button key="cancel" @click="handleCancel">取消</a-button>
+        <a-button v-if="!showable" key="forward" :loading="confirmLoading" type="primary" @click="handleOk">保存</a-button>
+      </a-space>
+    </template>
+  </basic-modal>
+</template>
+
+<script lang="ts" setup>
+  import { nextTick, reactive } from 'vue'
+  import { $ref } from 'vue/macros'
+  import useFormEdit from '/@/hooks/bootx/useFormEdit'
+  import { add, get, update, ProjectInfo } from './ProjectInfo.api'
+  import { FormInstance, Rule } from 'ant-design-vue/lib/form'
+  import { FormEditType } from '/@/enums/formTypeEnum'
+  import { BasicModal } from '/@/components/Modal'
+  const {
+    initFormEditType,
+    handleCancel,
+    search,
+    labelCol,
+    wrapperCol,
+    modalWidth,
+    title,
+    confirmLoading,
+    visible,
+    editable,
+    showable,
+    formEditType,
+  } = useFormEdit()
+  // 表单
+  const formRef = $ref<FormInstance>()
+  let form = $ref<ProjectInfo>({
+    id: null,
+    name: null,
+    state: null,
+    content: null,
+    remark: null,
+    indexImage: null,
+    edit: null,
+  })
+  // 校验
+  const rules = reactive({} as Record<string, Rule[]>)
+  // 事件
+  const emits = defineEmits(['ok'])
+  // 入口
+  function init(id, editType: FormEditType) {
+    initFormEditType(editType)
+    resetForm()
+    getInfo(id, editType)
+  }
+  // 获取信息
+  function getInfo(id, editType: FormEditType) {
+    if ([FormEditType.Edit, FormEditType.Show].includes(editType)) {
+      confirmLoading.value = true
+      get(id).then(({ data }) => {
+        form = data
+        confirmLoading.value = false
+      })
+    } else {
+      confirmLoading.value = false
+    }
+  }
+  // 保存
+  function handleOk() {
+    formRef?.validate().then(async () => {
+      confirmLoading.value = true
+      if (formEditType.value === FormEditType.Add) {
+        await add(form)
+      } else if (formEditType.value === FormEditType.Edit) {
+        await update(form)
+      }
+      confirmLoading.value = false
+      handleCancel()
+      emits('ok')
+    })
+  }
+
+  // 重置表单
+  function resetForm() {
+    nextTick(() => {
+      formRef?.resetFields()
+    })
+  }
+  defineExpose({
+    init,
+  })
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/modules/develop/report/ProjectInfoList.vue b/src/views/modules/develop/report/ProjectInfoList.vue
new file mode 100644
index 0000000..476deeb
--- /dev/null
+++ b/src/views/modules/develop/report/ProjectInfoList.vue
@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <div class="m-3 p-3 pt-5 bg-white">
+      <b-query :query-params="model.queryParam" :fields="fields" @query="queryPage" @reset="resetQueryParams" />
+    </div>
+    <div class="m-3 p-3 bg-white">
+      <vxe-toolbar ref="xToolbar" custom :refresh="{ query: queryPage }">
+        <template #buttons>
+          <a-space>
+            <a-button type="primary" pre-icon="ant-design:plus-outlined" @click="add">新建</a-button>
+          </a-space>
+        </template>
+      </vxe-toolbar>
+      <vxe-table row-id="id" ref="xTable" :data="pagination.records" :loading="loading">
+        <vxe-column type="seq" width="60" />
+        <vxe-column field="name" title="项目名称" />
+        <vxe-column field="state" title="发布状态" />
+        <vxe-column field="content" title="报表内容" />
+        <vxe-column field="remark" title="备注" />
+        <vxe-column field="indexImage" title="预览图片id" />
+        <vxe-column field="edit" title="是否在编辑中" />
+        <vxe-column field="createTime" title="创建时间" />
+        <vxe-column fixed="right" width="150" :showOverflow="false" title="操作">
+          <template #default="{ row }">
+            <span>
+              <a-link @click="show(row)">查看</a-link>
+            </span>
+            <a-divider type="vertical" />
+            <span>
+              <a-link @click="edit(row)">编辑</a-link>
+            </span>
+            <a-divider type="vertical" />
+            <a-popconfirm title="是否删除" @confirm="remove(row)" okText="是" cancelText="否">
+              <a-link danger>删除</a-link>
+            </a-popconfirm>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <vxe-pager
+        size="medium"
+        :loading="loading"
+        :current-page="pagination.current"
+        :page-size="pagination.size"
+        :total="pagination.total"
+        @page-change="handleTableChange"
+      />
+      <project-info-edit ref="projectInfoEdit" @ok="queryPage" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted } from 'vue'
+  import { $ref } from 'vue/macros'
+  import { del, page } from './ProjectInfo.api'
+  import useTablePage from '/@/hooks/bootx/useTablePage'
+  import ProjectInfoEdit from './ProjectInfoEdit.vue'
+  import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
+  import BQuery from '/@/components/Bootx/Query/BQuery.vue'
+  import { FormEditType } from '/@/enums/formTypeEnum'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { QueryField } from '/@/components/Bootx/Query/Query'
+
+  // 使用hooks
+  const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
+  const { notification, createMessage, createConfirm } = useMessage()
+
+  // 查询条件
+  const fields = [] as QueryField[]
+
+  const xTable = $ref<VxeTableInstance>()
+  const xToolbar = $ref<VxeToolbarInstance>()
+  const projectInfoEdit = $ref<any>()
+
+  onMounted(() => {
+    vxeBind()
+    queryPage()
+  })
+  function vxeBind() {
+    xTable?.connect(xToolbar as VxeToolbarInstance)
+  }
+
+  // 分页查询
+  function queryPage() {
+    loading.value = true
+    page({
+      ...model.queryParam,
+      ...pages,
+    }).then(({ data }) => {
+      pageQueryResHandel(data)
+    })
+  }
+  // 新增
+  function add() {
+    projectInfoEdit.init(null, FormEditType.Add)
+  }
+  // 编辑
+  function edit(record) {
+    projectInfoEdit.init(record.id, FormEditType.Edit)
+  }
+  // 查看
+  function show(record) {
+    projectInfoEdit.init(record.id, FormEditType.Show)
+  }
+
+  // 删除
+  function remove(record) {
+    del(record.id).then(() => {
+      createMessage.success('删除成功')
+      queryPage()
+    })
+    }
+</script>
+
+<style lang="less" scoped></style>
-- 
Gitee


From 27b798dbccc5b95ea9edabf465e2b3ed6e9c83f4 Mon Sep 17 00:00:00 2001
From: xxm1995 <xxm1995@outlook.com>
Date: Thu, 2 Mar 2023 18:19:01 +0800
Subject: [PATCH 07/28] =?UTF-8?q?feat=20=E5=A4=A7=E5=B1=8F=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/develop/report/ProjectInfo.api.ts |  50 +++++--
 .../develop/report/ProjectInfoEdit.vue        |  61 +++-----
 .../develop/report/ProjectInfoList.vue        | 138 +++++++++++++++---
 3 files changed, 179 insertions(+), 70 deletions(-)

diff --git a/src/views/modules/develop/report/ProjectInfo.api.ts b/src/views/modules/develop/report/ProjectInfo.api.ts
index 129a179..bf619a1 100644
--- a/src/views/modules/develop/report/ProjectInfo.api.ts
+++ b/src/views/modules/develop/report/ProjectInfo.api.ts
@@ -12,15 +12,6 @@ export function page(params) {
   })
 }
 
-/**
- * 查询全部
- */
-export function findAll() {
-  return defHttp.get<Result<ProjectInfo[]>>({
-    url: '/goview/admin/findAll',
-  })
-}
-
 /**
  * 获取单条
  */
@@ -31,6 +22,15 @@ export function get(id) {
   })
 }
 
+/**
+ * 获取GoView的地址
+ */
+export function getGoViewUrl() {
+  return defHttp.get<Result<string>>({
+    url: '/goview/admin/getGoViewUrl',
+  })
+}
+
 /**
  * 添加
  */
@@ -51,6 +51,26 @@ export function update(obj: ProjectInfo) {
   })
 }
 
+/**
+ * 发布
+ */
+export function publish(id) {
+  return defHttp.post<Result>({
+    url: '/goview/admin/publish',
+    params: { id },
+  })
+}
+
+/**
+ * 取消发布
+ */
+export function unPublish(id) {
+  return defHttp.post<Result>({
+    url: '/goview/admin/unPublish',
+    params: { id },
+  })
+}
+
 /**
  * 删除
  */
@@ -61,6 +81,16 @@ export function del(id) {
   })
 }
 
+/**
+ * 复制
+ */
+export function copy(id) {
+  return defHttp.delete({
+    url: '/goview/admin/copy',
+    params: { id },
+  })
+}
+
 /**
  * 自定义大屏信息
  */
@@ -69,8 +99,6 @@ export interface ProjectInfo extends BaseEntity {
   name?: string
   // 发布状态
   state?: number
-  // 报表内容
-  content?: string
   // 备注
   remark?: string
   // 预览图片id
diff --git a/src/views/modules/develop/report/ProjectInfoEdit.vue b/src/views/modules/develop/report/ProjectInfoEdit.vue
index 82dbffa..a435f88 100644
--- a/src/views/modules/develop/report/ProjectInfoEdit.vue
+++ b/src/views/modules/develop/report/ProjectInfoEdit.vue
@@ -8,37 +8,25 @@
     :mask-closable="showable"
     @cancel="handleCancel"
   >
-      <a-form
-        class="small-from-item"
-        ref="formRef"
-        :model="form"
-        :rules="rules"
-        :validate-trigger="['blur', 'change']"
-        :label-col="labelCol"
-        :wrapper-col="wrapperCol"
-      >
-        <a-form-item label="主键" :hidden="true">
-          <a-input v-model:value="form.id" :disabled="showable" />
-        </a-form-item>
-        <a-form-item label="项目名称" name="name">
-          <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入项目名称" />
-        </a-form-item>
-        <a-form-item label="发布状态" name="state">
-          <a-input v-model:value="form.state" :disabled="showable" placeholder="请输入发布状态" />
-        </a-form-item>
-        <a-form-item label="报表内容" name="content">
-          <a-input v-model:value="form.content" :disabled="showable" placeholder="请输入报表内容" />
-        </a-form-item>
-        <a-form-item label="备注" name="remark">
-          <a-input v-model:value="form.remark" :disabled="showable" placeholder="请输入备注" />
-        </a-form-item>
-        <a-form-item label="预览图片id" name="indexImage">
-          <a-input v-model:value="form.indexImage" :disabled="showable" placeholder="请输入预览图片id" />
-        </a-form-item>
-        <a-form-item label="是否在编辑中" name="edit">
-          <a-input v-model:value="form.edit" :disabled="showable" placeholder="请输入是否在编辑中" />
-        </a-form-item>
-      </a-form>
+    <a-form
+      class="small-from-item"
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :validate-trigger="['blur', 'change']"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+    >
+      <a-form-item label="主键" :hidden="true">
+        <a-input v-model:value="form.id" :disabled="showable" />
+      </a-form-item>
+      <a-form-item label="项目名称" name="name">
+        <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入项目名称" />
+      </a-form-item>
+      <a-form-item label="备注" name="remark">
+        <a-textarea v-model:value="form.remark" :disabled="showable" placeholder="请输入备注" />
+      </a-form-item>
+    </a-form>
     <template #footer>
       <a-space>
         <a-button key="cancel" @click="handleCancel">取消</a-button>
@@ -74,15 +62,12 @@
   const formRef = $ref<FormInstance>()
   let form = $ref<ProjectInfo>({
     id: null,
-    name: null,
-    state: null,
-    content: null,
-    remark: null,
-    indexImage: null,
-    edit: null,
+    name: '',
   })
   // 校验
-  const rules = reactive({} as Record<string, Rule[]>)
+  const rules = reactive({
+    name: [{ required: true, message: '请输入大屏的名称' }],
+  } as Record<string, Rule[]>)
   // 事件
   const emits = defineEmits(['ok'])
   // 入口
diff --git a/src/views/modules/develop/report/ProjectInfoList.vue b/src/views/modules/develop/report/ProjectInfoList.vue
index 476deeb..7978d7a 100644
--- a/src/views/modules/develop/report/ProjectInfoList.vue
+++ b/src/views/modules/develop/report/ProjectInfoList.vue
@@ -13,26 +13,55 @@
       </vxe-toolbar>
       <vxe-table row-id="id" ref="xTable" :data="pagination.records" :loading="loading">
         <vxe-column type="seq" width="60" />
+        <vxe-column field="id" title="大屏代码" />
         <vxe-column field="name" title="项目名称" />
-        <vxe-column field="state" title="发布状态" />
-        <vxe-column field="content" title="报表内容" />
+        <vxe-column field="state" title="发布状态">
+          <template #default="{ row }">
+            <a-tag v-if="row.state" color="green">已发布</a-tag>
+            <a-tag v-else color="red">未发布</a-tag>
+          </template>
+        </vxe-column>
+        <vxe-column field="edit" title="编辑状态">
+          <template #default="{ row }">
+            <a-tag v-if="row.edit" color="green">编辑中</a-tag>
+            <a-tag v-else color="red">未编辑</a-tag>
+          </template>
+        </vxe-column>
         <vxe-column field="remark" title="备注" />
-        <vxe-column field="indexImage" title="预览图片id" />
-        <vxe-column field="edit" title="是否在编辑中" />
         <vxe-column field="createTime" title="创建时间" />
-        <vxe-column fixed="right" width="150" :showOverflow="false" title="操作">
+        <vxe-column fixed="right" width="220" :showOverflow="false" title="操作">
           <template #default="{ row }">
             <span>
-              <a-link @click="show(row)">查看</a-link>
+              <a-link @click="edit(row)">编辑</a-link>
             </span>
             <a-divider type="vertical" />
             <span>
-              <a-link @click="edit(row)">编辑</a-link>
+              <a-link @click="design(row)">设计</a-link>
+            </span>
+            <a-divider type="vertical" />
+            <span>
+              <a-link @click="preview(row)">预览</a-link>
             </span>
             <a-divider type="vertical" />
-            <a-popconfirm title="是否删除" @confirm="remove(row)" okText="是" cancelText="否">
-              <a-link danger>删除</a-link>
-            </a-popconfirm>
+            <a-dropdown>
+              <a class="ant-dropdown-link"> 更多 <icon icon="ant-design:down-outlined" :size="12" /> </a>
+              <template #overlay>
+                <a-menu>
+                  <a-menu-item>
+                    <a-link @click="copyInfo(row)">复制</a-link>
+                  </a-menu-item>
+                  <a-menu-item v-if="row.state === -1">
+                    <a-link danger @click="publishInfo(row)">发布</a-link>
+                  </a-menu-item>
+                  <a-menu-item v-if="row.state === 1">
+                    <a-link danger @click="unPublishInfo(row)">取消发布</a-link>
+                  </a-menu-item>
+                  <a-menu-item>
+                    <a-link danger>删除</a-link>
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
           </template>
         </vxe-column>
       </vxe-table>
@@ -52,7 +81,7 @@
 <script lang="ts" setup>
   import { onMounted } from 'vue'
   import { $ref } from 'vue/macros'
-  import { del, page } from './ProjectInfo.api'
+  import { copy, del, getGoViewUrl, page, publish, unPublish } from './ProjectInfo.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import ProjectInfoEdit from './ProjectInfoEdit.vue'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
@@ -66,20 +95,31 @@
   const { notification, createMessage, createConfirm } = useMessage()
 
   // 查询条件
-  const fields = [] as QueryField[]
+  const fields = [
+    { field: 'projectId', name: '大屏代码', placeholder: '请输入大屏代码' },
+    { field: 'name', name: '项目名称', placeholder: '请输入项目名称' },
+  ] as QueryField[]
 
   const xTable = $ref<VxeTableInstance>()
   const xToolbar = $ref<VxeToolbarInstance>()
   const projectInfoEdit = $ref<any>()
+  let goViewUrl = $ref('')
 
   onMounted(() => {
+    initGoViewUrl()
     vxeBind()
     queryPage()
   })
+
   function vxeBind() {
     xTable?.connect(xToolbar as VxeToolbarInstance)
   }
-
+  // 初始化GoView地址
+  function initGoViewUrl() {
+    getGoViewUrl().then(({ data }) => {
+      goViewUrl = data
+    })
+  }
   // 分页查询
   function queryPage() {
     loading.value = true
@@ -98,18 +138,74 @@
   function edit(record) {
     projectInfoEdit.init(record.id, FormEditType.Edit)
   }
-  // 查看
-  function show(record) {
-    projectInfoEdit.init(record.id, FormEditType.Show)
+  // 预览
+  function preview(record) {
+    open(`${goViewUrl}/#/chart/preview/${record.id}`, '_blank')
+  }
+  // 设计
+  function design(record) {
+    open(`${goViewUrl}/#/chart/home/${record.id}`, '_blank')
+  }
+  // 复制
+  function copyInfo(record) {
+    createConfirm({
+      iconType: 'info',
+      title: '复制',
+      content: '是否复制大屏',
+      onOk: () => {
+        loading.value = true
+        copy(record.id).then((_) => {
+          createMessage.success('复制成功')
+          queryPage()
+        })
+      },
+    })
+  }
+  // 发布
+  function publishInfo(record) {
+    createConfirm({
+      iconType: 'info',
+      title: '发布',
+      content: '发布大屏',
+      onOk: () => {
+        loading.value = true
+        publish(record.id).then((_) => {
+          createMessage.success('发布成功')
+          queryPage()
+        })
+      },
+    })
+  }
+  // 取消发布
+  function unPublishInfo(record) {
+    createConfirm({
+      iconType: 'info',
+      title: '取消发布',
+      content: '是否取消发布大屏',
+      onOk: () => {
+        loading.value = true
+        unPublish(record.id).then((_) => {
+          createMessage.success('取消发布成功')
+          queryPage()
+        })
+      },
+    })
   }
-
   // 删除
   function remove(record) {
-    del(record.id).then(() => {
-      createMessage.success('删除成功')
-      queryPage()
+    createConfirm({
+      iconType: 'warning',
+      title: '删除',
+      content: '是否删除大屏',
+      onOk: () => {
+        loading.value = true
+        del(record.id).then((_) => {
+          createMessage.success('删除成功')
+          queryPage()
+        })
+      },
     })
-    }
+  }
 </script>
 
 <style lang="less" scoped></style>
-- 
Gitee


From 34d5d6eb72c1b6174485c2c11267d3190dfffe39 Mon Sep 17 00:00:00 2001
From: xxm1995 <xxm1995@outlook.com>
Date: Fri, 3 Mar 2023 11:04:42 +0800
Subject: [PATCH 08/28] =?UTF-8?q?feat=20=E5=A4=A7=E5=B1=8F=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/user.ts                     |  2 +-
 .../develop/report/ProjectInfoList.vue        | 24 +++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 2686d22..879f830 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -16,7 +16,7 @@ import { h } from 'vue'
 import { getFilePreviewUrlPrefix } from '/@/api/common/FileUpload'
 // @ts-ignore
 import { getUserInfo } from '/@/api/sys/user'
-import { closeWebSocket, initWebSocket } from "/@/logics/websocket/UserGlobalWebSocker";
+import { closeWebSocket, initWebSocket } from '/@/logics/websocket/UserGlobalWebSocker'
 
 interface UserState {
   userInfo: Nullable<UserInfo>
diff --git a/src/views/modules/develop/report/ProjectInfoList.vue b/src/views/modules/develop/report/ProjectInfoList.vue
index 7978d7a..b9e277e 100644
--- a/src/views/modules/develop/report/ProjectInfoList.vue
+++ b/src/views/modules/develop/report/ProjectInfoList.vue
@@ -8,6 +8,7 @@
         <template #buttons>
           <a-space>
             <a-button type="primary" pre-icon="ant-design:plus-outlined" @click="add">新建</a-button>
+            <a-button pre-icon="ant-design:sync-outlined" @click="loginGoView">一键登录大屏</a-button>
           </a-space>
         </template>
       </vxe-toolbar>
@@ -17,7 +18,7 @@
         <vxe-column field="name" title="项目名称" />
         <vxe-column field="state" title="发布状态">
           <template #default="{ row }">
-            <a-tag v-if="row.state" color="green">已发布</a-tag>
+            <a-tag v-if="row.state === 1" color="green">已发布</a-tag>
             <a-tag v-else color="red">未发布</a-tag>
           </template>
         </vxe-column>
@@ -51,13 +52,13 @@
                     <a-link @click="copyInfo(row)">复制</a-link>
                   </a-menu-item>
                   <a-menu-item v-if="row.state === -1">
-                    <a-link danger @click="publishInfo(row)">发布</a-link>
+                    <a-link @click="publishInfo(row)">发布</a-link>
                   </a-menu-item>
                   <a-menu-item v-if="row.state === 1">
-                    <a-link danger @click="unPublishInfo(row)">取消发布</a-link>
+                    <a-link @click="unPublishInfo(row)">取消发布</a-link>
                   </a-menu-item>
                   <a-menu-item>
-                    <a-link danger>删除</a-link>
+                    <a-link danger :disabled="row.state === 1" @click="remove(row)">删除</a-link>
                   </a-menu-item>
                 </a-menu>
               </template>
@@ -89,10 +90,12 @@
   import { FormEditType } from '/@/enums/formTypeEnum'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { QueryField } from '/@/components/Bootx/Query/Query'
+  import { useUserStoreWithOut } from '/@/store/modules/user'
 
   // 使用hooks
   const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
   const { notification, createMessage, createConfirm } = useMessage()
+  const useUserStore = useUserStoreWithOut()
 
   // 查询条件
   const fields = [
@@ -206,6 +209,19 @@
       },
     })
   }
+  // 一键登录GoView平台
+  function loginGoView() {
+    createConfirm({
+      iconType: 'info',
+      title: '一键登录',
+      content: '是否一键登录可视化大屏平台',
+      okText: '登录',
+      onOk: () => {
+        const token = useUserStore.getToken
+        createMessage.info('等待下一个版本实装')
+      },
+    })
+  }
 </script>
 
 <style lang="less" scoped></style>
-- 
Gitee


From 1007d83d90dfe11b9159cd87c0180995b5986df0 Mon Sep 17 00:00:00 2001
From: xxm <xxm1995@outlook.com>
Date: Sat, 4 Mar 2023 18:55:06 +0800
Subject: [PATCH 09/28] =?UTF-8?q?perf=20=E5=8F=AF=E8=A7=86=E5=8C=96?=
 =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/develop/report/ProjectInfo.api.ts | 30 ++++++++++---
 .../develop/report/ProjectInfoEdit.vue        |  5 ++-
 .../develop/report/ProjectInfoList.vue        | 42 +++++++++++++++++--
 3 files changed, 68 insertions(+), 9 deletions(-)

diff --git a/src/views/modules/develop/report/ProjectInfo.api.ts b/src/views/modules/develop/report/ProjectInfo.api.ts
index bf619a1..ab58ff3 100644
--- a/src/views/modules/develop/report/ProjectInfo.api.ts
+++ b/src/views/modules/develop/report/ProjectInfo.api.ts
@@ -72,11 +72,21 @@ export function unPublish(id) {
 }
 
 /**
- * 删除
+ * 应用编辑中的信息
  */
-export function del(id) {
-  return defHttp.delete({
-    url: '/goview/admin/delete',
+export function enableEditContent(id) {
+  return defHttp.post<Result>({
+    url: '/goview/admin/enableEditContent',
+    params: { id },
+  })
+}
+
+/**
+ * 重置编辑中的信息
+ */
+export function resetEditContent(id) {
+  return defHttp.post<Result>({
+    url: '/goview/admin/resetEditContent',
     params: { id },
   })
 }
@@ -85,12 +95,22 @@ export function del(id) {
  * 复制
  */
 export function copy(id) {
-  return defHttp.delete({
+  return defHttp.post({
     url: '/goview/admin/copy',
     params: { id },
   })
 }
 
+/**
+ * 删除
+ */
+export function del(id) {
+  return defHttp.delete({
+    url: '/goview/admin/delete',
+    params: { id },
+  })
+}
+
 /**
  * 自定义大屏信息
  */
diff --git a/src/views/modules/develop/report/ProjectInfoEdit.vue b/src/views/modules/develop/report/ProjectInfoEdit.vue
index a435f88..3c3fb4a 100644
--- a/src/views/modules/develop/report/ProjectInfoEdit.vue
+++ b/src/views/modules/develop/report/ProjectInfoEdit.vue
@@ -23,8 +23,11 @@
       <a-form-item label="项目名称" name="name">
         <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入项目名称" />
       </a-form-item>
+      <a-form-item label="是否启用" name="enable">
+        <a-switch checked-children="启用" un-checked-children="停用" v-model:checked="form.enable" :disabled="showable" />
+      </a-form-item>
       <a-form-item label="备注" name="remark">
-        <a-textarea v-model:value="form.remark" :disabled="showable" placeholder="请输入备注" />
+        <a-textarea :rows="3" v-model:value="form.remark" :disabled="showable" placeholder="请输入备注" />
       </a-form-item>
     </a-form>
     <template #footer>
diff --git a/src/views/modules/develop/report/ProjectInfoList.vue b/src/views/modules/develop/report/ProjectInfoList.vue
index b9e277e..224ddea 100644
--- a/src/views/modules/develop/report/ProjectInfoList.vue
+++ b/src/views/modules/develop/report/ProjectInfoList.vue
@@ -24,8 +24,8 @@
         </vxe-column>
         <vxe-column field="edit" title="编辑状态">
           <template #default="{ row }">
-            <a-tag v-if="row.edit" color="green">编辑中</a-tag>
-            <a-tag v-else color="red">未编辑</a-tag>
+            <a-tag v-if="row.edit" color="red">编辑中</a-tag>
+            <a-tag v-else color="green">未编辑</a-tag>
           </template>
         </vxe-column>
         <vxe-column field="remark" title="备注" />
@@ -51,6 +51,12 @@
                   <a-menu-item>
                     <a-link @click="copyInfo(row)">复制</a-link>
                   </a-menu-item>
+                  <a-menu-item v-if="row.edit">
+                    <a-link @click="enableEdit(row)">应用编辑</a-link>
+                  </a-menu-item>
+                  <a-menu-item v-if="row.edit">
+                    <a-link @click="resetEdit(row)">重置编辑</a-link>
+                  </a-menu-item>
                   <a-menu-item v-if="row.state === -1">
                     <a-link @click="publishInfo(row)">发布</a-link>
                   </a-menu-item>
@@ -82,7 +88,7 @@
 <script lang="ts" setup>
   import { onMounted } from 'vue'
   import { $ref } from 'vue/macros'
-  import { copy, del, getGoViewUrl, page, publish, unPublish } from './ProjectInfo.api'
+  import { copy, del, enableEditContent, getGoViewUrl, page, publish, resetEditContent, unPublish } from './ProjectInfo.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import ProjectInfoEdit from './ProjectInfoEdit.vue'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
@@ -194,6 +200,36 @@
       },
     })
   }
+  // 应用编辑中的信息
+  function enableEdit(record) {
+    createConfirm({
+      iconType: 'info',
+      title: '应用编辑数据',
+      content: '是否应用编辑中的信息，确定后发布的数据将会更新',
+      onOk: () => {
+        loading.value = true
+        enableEditContent(record.id).then((_) => {
+          createMessage.success('更新成功')
+          queryPage()
+        })
+      },
+    })
+  }
+  // 重置编辑中的信息
+  function resetEdit(record) {
+    createConfirm({
+      iconType: 'info',
+      title: '重置编辑',
+      content: '是否重置编辑中的信息，确定后编辑的内容将会恢复为当前已发布的内容',
+      onOk: () => {
+        loading.value = true
+        resetEditContent(record.id).then((_) => {
+          createMessage.success('重置成功')
+          queryPage()
+        })
+      },
+    })
+  }
   // 删除
   function remove(record) {
     createConfirm({
-- 
Gitee


From 8e824598d364fd492bdd4e8e8dd8064fda6d5e1e Mon Sep 17 00:00:00 2001
From: xxm <xxm1995@outlook.com>
Date: Sat, 4 Mar 2023 21:25:09 +0800
Subject: [PATCH 10/28] =?UTF-8?q?perf=20=E5=8F=AF=E8=A7=86=E5=8C=96?=
 =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E7=BB=86=E8=8A=82=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/develop/report/ProjectInfoList.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/modules/develop/report/ProjectInfoList.vue b/src/views/modules/develop/report/ProjectInfoList.vue
index 224ddea..b3dc4f9 100644
--- a/src/views/modules/develop/report/ProjectInfoList.vue
+++ b/src/views/modules/develop/report/ProjectInfoList.vue
@@ -52,7 +52,7 @@
                     <a-link @click="copyInfo(row)">复制</a-link>
                   </a-menu-item>
                   <a-menu-item v-if="row.edit">
-                    <a-link @click="enableEdit(row)">应用编辑</a-link>
+                    <a-link @click="enableEdit(row)">保存编辑</a-link>
                   </a-menu-item>
                   <a-menu-item v-if="row.edit">
                     <a-link @click="resetEdit(row)">重置编辑</a-link>
@@ -204,8 +204,8 @@
   function enableEdit(record) {
     createConfirm({
       iconType: 'info',
-      title: '应用编辑数据',
-      content: '是否应用编辑中的信息，确定后发布的数据将会更新',
+      title: '保存编辑',
+      content: '是否保存编辑中的信息，保存后发布的数据将会更新',
       onOk: () => {
         loading.value = true
         enableEditContent(record.id).then((_) => {
@@ -220,7 +220,7 @@
     createConfirm({
       iconType: 'info',
       title: '重置编辑',
-      content: '是否重置编辑中的信息，确定后编辑的内容将会恢复为当前已发布的内容',
+      content: '是否重置编辑中的信息，确定后编辑的内容将会恢复为之前保存的内容',
       onOk: () => {
         loading.value = true
         resetEditContent(record.id).then((_) => {
-- 
Gitee


From a883f28bb10b9b0150588ea5d64976240f2b8f39 Mon Sep 17 00:00:00 2001
From: xxm <xxm1995@outlook.com>
Date: Sat, 4 Mar 2023 21:28:25 +0800
Subject: [PATCH 11/28] =?UTF-8?q?perf=20=E5=8F=AF=E8=A7=86=E5=8C=96?=
 =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E7=BB=86=E8=8A=82=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/develop/report/ProjectInfoEdit.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/views/modules/develop/report/ProjectInfoEdit.vue b/src/views/modules/develop/report/ProjectInfoEdit.vue
index 3c3fb4a..91c10f6 100644
--- a/src/views/modules/develop/report/ProjectInfoEdit.vue
+++ b/src/views/modules/develop/report/ProjectInfoEdit.vue
@@ -23,9 +23,6 @@
       <a-form-item label="项目名称" name="name">
         <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入项目名称" />
       </a-form-item>
-      <a-form-item label="是否启用" name="enable">
-        <a-switch checked-children="启用" un-checked-children="停用" v-model:checked="form.enable" :disabled="showable" />
-      </a-form-item>
       <a-form-item label="备注" name="remark">
         <a-textarea :rows="3" v-model:value="form.remark" :disabled="showable" placeholder="请输入备注" />
       </a-form-item>
-- 
Gitee


From a380a922f1cfbd75f4dcae20af741550e365e43d Mon Sep 17 00:00:00 2001
From: xxm <xxm1995@outlook.com>
Date: Tue, 7 Mar 2023 21:51:38 +0800
Subject: [PATCH 12/28] =?UTF-8?q?perf=20=E5=A4=9A=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=BA=90=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dynamicsource/DynamicDataSource.api.ts    | 30 ++++---
 .../dynamicsource/DynamicDataSourceEdit.vue   | 80 ++++++++++++-------
 .../dynamicsource/DynamicDataSourceList.vue   | 16 +++-
 3 files changed, 83 insertions(+), 43 deletions(-)

diff --git a/src/views/modules/develop/dynamicsource/DynamicDataSource.api.ts b/src/views/modules/develop/dynamicsource/DynamicDataSource.api.ts
index 912a3c5..7643986 100644
--- a/src/views/modules/develop/dynamicsource/DynamicDataSource.api.ts
+++ b/src/views/modules/develop/dynamicsource/DynamicDataSource.api.ts
@@ -42,6 +42,16 @@ export const update = (obj: DynamicDataSource) => {
   })
 }
 
+/**
+ * 测试连接
+ */
+export const testConnection = (obj: DynamicDataSource) => {
+  return defHttp.post<Result<string>>({
+    url: '/dynamic/source/testConnection',
+    data: obj,
+  })
+}
+
 /**
  * 删除
  */
@@ -66,21 +76,19 @@ export const findAll = () => {
  */
 export interface DynamicDataSource extends BaseEntity {
   // 数据源编码
-  code: string
+  code?: string
   // 数据源名称
-  name: string
+  name?: string
   // 数据库类型
-  databaseType: string
+  databaseType?: string
   // 驱动类
-  dbDriver: string
-  // 数据库地址
-  dbUrl: string
-  // 数据库名称
-  dbName: string
+  dbDriver?: string
+  // 数据源地址
+  dbUrl?: string
   // 用户名
-  dbUsername: string
+  dbUsername?: string
   // 密码
-  dbPassword: string
+  dbPassword?: string
   // 备注
-  remark: string
+  remark?: string
 }
diff --git a/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue b/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue
index b7f6035..5bc36f9 100644
--- a/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue
+++ b/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue
@@ -1,62 +1,62 @@
 <template>
-  <basic-modal
+  <basic-drawer
+    showFooter
     v-bind="$attrs"
-    :loading="confirmLoading"
-    :width="modalWidth"
-    :title="title"
+    title="数据源管理"
+    width="40%"
+    :destroyOnClose="true"
+    :maskClosable="false"
     :visible="visible"
-    :mask-closable="showable"
-    @cancel="handleCancel"
+    @close="handleCancel"
   >
     <a-form class="small-from-item" ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
       <a-form-item label="主键" name="id" :hidden="true">
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
-      <a-form-item label="数据源编码" name="code">
+      <a-form-item label="编码" name="code">
         <a-input v-model:value="form.code" :disabled="showable" placeholder="请输入数据源编码" />
       </a-form-item>
-      <a-form-item label="数据源名称" name="name">
+      <a-form-item label="名称" name="name">
         <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入数据源名称" />
       </a-form-item>
-      <a-form-item label="数据库类型" name="databaseType">
+      <a-form-item label="类型" name="databaseType">
         <a-input v-model:value="form.databaseType" :disabled="showable" placeholder="请输入数据库类型" />
       </a-form-item>
       <a-form-item label="驱动类" name="dbDriver">
         <a-input v-model:value="form.dbDriver" :disabled="showable" placeholder="请输入驱动类" />
       </a-form-item>
-      <a-form-item label="数据库地址" name="dbUrl">
+      <a-form-item label="地址" name="dbUrl">
         <a-input v-model:value="form.dbUrl" :disabled="showable" placeholder="请输入数据库地址" />
       </a-form-item>
-      <a-form-item label="数据库名称" name="dbName">
-        <a-input v-model:value="form.dbName" :disabled="showable" placeholder="请输入数据库名称" />
-      </a-form-item>
       <a-form-item label="用户名" name="dbUsername">
         <a-input v-model:value="form.dbUsername" :disabled="showable" placeholder="请输入用户名" />
       </a-form-item>
       <a-form-item label="密码" name="dbPassword">
-        <a-input v-model:value="form.dbPassword" :disabled="showable" placeholder="请输入密码" />
+        <a-input-password v-model:value="form.dbPassword" :disabled="showable" placeholder="请输入密码" />
       </a-form-item>
       <a-form-item label="备注" name="remark">
-        <a-input v-model:value="form.remark" :disabled="showable" placeholder="请输入备注" />
+        <a-textarea :rows="2" v-model:value="form.remark" :disabled="showable" placeholder="请输入备注" />
       </a-form-item>
     </a-form>
     <template #footer>
       <a-space>
         <a-button key="cancel" @click="handleCancel">取消</a-button>
+        <a-button v-if="!showable" preIcon="ant-design:api-outlined" @click="testConnectionInfo">测试连接</a-button>
         <a-button v-if="!showable" key="forward" :loading="confirmLoading" type="primary" @click="handleOk">保存</a-button>
       </a-space>
     </template>
-  </basic-modal>
+  </basic-drawer>
 </template>
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
   import { $ref } from 'vue/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
-  import { add, get, update, DynamicDataSource } from './DynamicDataSource.api'
+  import { add, get, update, DynamicDataSource, testConnection } from './DynamicDataSource.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import { FormEditType } from '/@/enums/formTypeEnum'
-  import { BasicModal } from '/@/components/Modal'
+  import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
+  import { useMessage } from '/@/hooks/web/useMessage'
 
   const {
     initFormEditType,
@@ -72,22 +72,30 @@
     showable,
     formEditType,
   } = useFormEdit()
+  const { createMessage } = useMessage()
   // 表单
   const formRef = $ref<FormInstance>()
-  let form = $ref({
+  let form = $ref<DynamicDataSource>({
     id: null,
-    code: null,
-    name: null,
-    databaseType: null,
-    dbDriver: null,
-    dbUrl: null,
-    dbName: null,
-    dbUsername: null,
-    dbPassword: null,
-    remark: null,
-  } as DynamicDataSource)
+    code: '',
+    name: '',
+    databaseType: '',
+    dbDriver: '',
+    dbUrl: '',
+    dbUsername: '',
+    dbPassword: '',
+    remark: '',
+  })
   // 校验
-  const rules = reactive({} as Record<string, Rule[]>)
+  const rules = reactive({
+    code: [{ required: true, message: '编码不可为空' }],
+    name: [{ required: true, message: '名称不可为空' }],
+    databaseType: [{ required: true, message: '请选择数据库类型' }],
+    dbDriver: [{ required: true, message: '驱动不可为空' }],
+    dbUrl: [{ required: true, message: '数据源地址不可为空' }],
+    dbUsername: [{ required: true, message: '用户名不可为空' }],
+    dbPassword: [{ required: true, message: '密码不可为空' }],
+  } as Record<string, Rule[]>)
   // 事件
   const emits = defineEmits(['ok'])
   // 入口
@@ -108,6 +116,18 @@
       confirmLoading.value = false
     }
   }
+  // 测试连接
+  function testConnectionInfo() {
+    formRef?.validateFields(['dbDriver', 'dbUrl', 'dbUsername', 'dbPassword']).then(async () => {
+      const { data } = await testConnection(form)
+      if (data) {
+        createMessage.warn(data)
+      } else {
+        createMessage.success('连接成功')
+      }
+    })
+  }
+
   // 保存
   function handleOk() {
     formRef?.validate().then(async () => {
diff --git a/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue b/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue
index efeaadb..8ec65c2 100644
--- a/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue
+++ b/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="m-3 p-3 pt-5 bg-white">
-      <b-query :query-params="model.queryParam" :fields="fields" @query="queryPage" @reset="resetQueryParams" />
+      <b-query :query-params="model.queryParam" :fields="fields" @query="queryPage" :default-item-count="3" @reset="resetQueryParams" />
     </div>
     <div class="m-3 p-3 bg-white">
       <vxe-toolbar ref="xToolbar" custom :refresh="{ query: queryPage }">
@@ -17,7 +17,8 @@
         <vxe-column field="name" title="名称" />
         <vxe-column field="databaseType" title="类型" />
         <vxe-column field="dbDriver" title="驱动类" />
-        <vxe-column field="dbName" title="数据库名称" />
+        <vxe-column field="dbUrl" title="连接地址" />
+        <vxe-column field="dbUsername" title="用户名" />
         <vxe-column field="remark" title="备注" />
         <vxe-column field="createTime" title="创建时间" />
         <vxe-column fixed="right" width="150" :showOverflow="false" title="操作">
@@ -69,6 +70,17 @@
   const fields = [
     { field: 'code', type: 'string', name: '编码', placeholder: '请输入编码' },
     { field: 'name', type: 'string', name: '名称', placeholder: '请输入名称' },
+    {
+      field: 'databaseType',
+      type: 'list',
+      name: '数据库类型',
+      selectList: [
+        { key: 'mysql', value: 'MySQL' },
+        { key: 'oracle', value: 'Oracle' },
+        { key: 'mssql', value: 'SQLServer' },
+      ],
+      placeholder: '请选择数据库类型',
+    },
   ] as QueryField[]
 
   const xTable = $ref<VxeTableInstance>()
-- 
Gitee


From 23423ab3d97225127c0bf163a4f0e7196097308a Mon Sep 17 00:00:00 2001
From: xxm1995 <xxm1995@outlook.com>
Date: Wed, 8 Mar 2023 17:59:32 +0800
Subject: [PATCH 13/28] =?UTF-8?q?feat=20=E5=8A=A8=E6=80=81=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=BA=90=E7=AE=A1=E7=90=86,=20=E5=AD=97=E5=85=B8?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E9=97=AE=E9=A2=98fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Bootx/Query/Query.ts           |   3 +-
 .../dynamicsource/DynamicDataSource.api.ts    |  79 ++++++++++++++
 .../dynamicsource/DynamicDataSourceEdit.vue   |  40 +++++--
 .../dynamicsource/DynamicDataSourceList.vue   | 100 ++++++++++++++----
 src/views/modules/system/dict/DictEdit.vue    |   3 +-
 .../modules/system/dict/DictItemEdit.vue      |   1 +
 6 files changed, 194 insertions(+), 32 deletions(-)

diff --git a/src/components/Bootx/Query/Query.ts b/src/components/Bootx/Query/Query.ts
index d23d230..b5edeed 100644
--- a/src/components/Bootx/Query/Query.ts
+++ b/src/components/Bootx/Query/Query.ts
@@ -1,4 +1,5 @@
 import { LabeledValueType } from 'ant-design-vue/lib/vc-tree-select/TreeSelect'
+import { LabeledValue } from "ant-design-vue/lib/select";
 
 // 数字
 export const NUMBER = 'number'
@@ -32,7 +33,7 @@ export interface QueryField {
   // 精度
   precision?: number
   // 查询列表
-  selectList?: LabeledValueType[] | null
+  selectList?: LabeledValue[] | null
   // 时间格式化
   format?: string | null
 }
diff --git a/src/views/modules/develop/dynamicsource/DynamicDataSource.api.ts b/src/views/modules/develop/dynamicsource/DynamicDataSource.api.ts
index 7643986..1ea8ebf 100644
--- a/src/views/modules/develop/dynamicsource/DynamicDataSource.api.ts
+++ b/src/views/modules/develop/dynamicsource/DynamicDataSource.api.ts
@@ -1,6 +1,7 @@
 import { defHttp } from '/@/utils/http/axios'
 import { PageResult, Result } from '/#/axios'
 import { BaseEntity } from '/#/web'
+import { LabeledValue } from 'ant-design-vue/lib/select'
 
 /**
  * 分页
@@ -52,6 +53,55 @@ export const testConnection = (obj: DynamicDataSource) => {
   })
 }
 
+/**
+ * 测试连接
+ */
+export const testConnectionById = (id) => {
+  return defHttp.get<Result<string>>({
+    url: '/dynamic/source/testConnectionById',
+    params: { id },
+  })
+}
+
+/**
+ * 根据id进行添加到连接池中
+ */
+export const addDynamicDataSourceById = (id) => {
+  return defHttp.post<Result<string>>({
+    url: '/dynamic/source/addDynamicDataSourceById',
+    params: { id },
+  })
+}
+
+/**
+ * 判断编码是否被使用
+ */
+export const existsByCode = (id) => {
+  return defHttp.post<Result<boolean>>({
+    url: '/dynamic/source/existsByCode',
+    params: { id },
+  })
+}
+
+/**
+ * 判断编码是否被使用
+ */
+export const existsByCodeNotId = (id, code) => {
+  return defHttp.post<Result<boolean>>({
+    url: '/dynamic/source/existsByCodeNotId',
+    params: { id, code },
+  })
+}
+/**
+ * 判断是否已经添加到连接池中
+ */
+export const existsByDataSourceKey = (code) => {
+  return defHttp.get<Result<boolean>>({
+    url: '/dynamic/source/existsByDataSourceKey',
+    params: { code },
+  })
+}
+
 /**
  * 删除
  */
@@ -92,3 +142,32 @@ export interface DynamicDataSource extends BaseEntity {
   // 备注
   remark?: string
 }
+
+/**
+ * 数据类型列表
+ */
+export const databaseTypes = [
+  { value: 'mysql', label: 'MySQL' },
+  { value: 'oracle', label: 'Oracle' },
+  { value: 'mssql', label: 'SQLServer' },
+] as LabeledValue[]
+
+/**
+ * 数据类型关联信息列表
+ */
+export // 数据列表
+const databaseTypeMap = {
+  mysql: {
+    dbDriver: 'com.mysql.cj.jdbc.Driver',
+    dbUrl:
+      'jdbc:mysql://127.0.0.1:3306/bootx?characterEncoding=UTF-8&useUnicode=true&useSSL=false&tinyInt1isBit=false&allowPublicKeyRetrieval=true&serverTimezone=Asia/Shanghai',
+  },
+  oracle: {
+    dbDriver: 'oracle.jdbc.OracleDriver',
+    dbUrl: 'jdbc:oracle:thin:@127.0.0.1:1521:BOOTX',
+  },
+  mssql: {
+    dbDriver: 'com.microsoft.sqlserver.jdbc.SQLServerDriver',
+    dbUrl: 'jdbc:mysql://127.0.0.1:3306/bootx?characterEncoding=UTF-8&useUnicode=true&useSSL=false',
+  },
+}
diff --git a/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue b/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue
index 5bc36f9..7a1426f 100644
--- a/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue
+++ b/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue
@@ -14,13 +14,13 @@
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="编码" name="code">
-        <a-input v-model:value="form.code" :disabled="showable" placeholder="请输入数据源编码" />
+        <a-input validateFirst v-model:value="form.code" :disabled="showable" placeholder="请输入数据源编码" />
       </a-form-item>
       <a-form-item label="名称" name="name">
         <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入数据源名称" />
       </a-form-item>
-      <a-form-item label="类型" name="databaseType">
-        <a-input v-model:value="form.databaseType" :disabled="showable" placeholder="请输入数据库类型" />
+      <a-form-item label="数据库类型" name="databaseType">
+        <a-select v-model:value="form.databaseType" :options="databaseTypes" @change="changeDatabaseType" placeholder="请选择数据库类型" />
       </a-form-item>
       <a-form-item label="驱动类" name="dbDriver">
         <a-input v-model:value="form.dbDriver" :disabled="showable" placeholder="请输入驱动类" />
@@ -52,11 +52,22 @@
   import { nextTick, reactive } from 'vue'
   import { $ref } from 'vue/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
-  import { add, get, update, DynamicDataSource, testConnection } from './DynamicDataSource.api'
+  import {
+    add,
+    get,
+    update,
+    DynamicDataSource,
+    testConnection,
+    existsByCode,
+    existsByCodeNotId,
+    databaseTypes,
+    databaseTypeMap,
+  } from './DynamicDataSource.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import { FormEditType } from '/@/enums/formTypeEnum'
   import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
   import { useMessage } from '/@/hooks/web/useMessage'
+  import { useValidate } from '/@/hooks/bootx/useValidate'
 
   const {
     initFormEditType,
@@ -73,13 +84,15 @@
     formEditType,
   } = useFormEdit()
   const { createMessage } = useMessage()
+  const { existsByServer } = useValidate()
+
   // 表单
   const formRef = $ref<FormInstance>()
+
   let form = $ref<DynamicDataSource>({
     id: null,
     code: '',
     name: '',
-    databaseType: '',
     dbDriver: '',
     dbUrl: '',
     dbUsername: '',
@@ -88,7 +101,10 @@
   })
   // 校验
   const rules = reactive({
-    code: [{ required: true, message: '编码不可为空' }],
+    code: [
+      { required: true, message: '编码不可为空' },
+      { validator: validateCode, trigger: 'blur' },
+    ],
     name: [{ required: true, message: '名称不可为空' }],
     databaseType: [{ required: true, message: '请选择数据库类型' }],
     dbDriver: [{ required: true, message: '驱动不可为空' }],
@@ -104,6 +120,11 @@
     resetForm()
     getInfo(id, editType)
   }
+  // 编码更新
+  function validateCode() {
+    const { code, id } = form
+    return existsByServer(code, id, formEditType, existsByCode, existsByCodeNotId)
+  }
   // 获取信息
   function getInfo(id, editType: FormEditType) {
     if ([FormEditType.Edit, FormEditType.Show].includes(editType)) {
@@ -127,7 +148,12 @@
       }
     })
   }
-
+  // 数据源类型变换回调
+  function changeDatabaseType() {
+    const e = form.databaseType as string
+    form.dbDriver = databaseTypeMap[e]?.dbDriver
+    form.dbUrl = databaseTypeMap[e]?.dbUrl
+  }
   // 保存
   function handleOk() {
     formRef?.validate().then(async () => {
diff --git a/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue b/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue
index 8ec65c2..4d06611 100644
--- a/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue
+++ b/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue
@@ -15,25 +15,38 @@
         <vxe-column type="seq" width="60" />
         <vxe-column field="code" title="编码" />
         <vxe-column field="name" title="名称" />
-        <vxe-column field="databaseType" title="类型" />
+        <vxe-column field="databaseType" title="数据库类型">
+          <template #default="{ row }">
+            <a-tag> {{ dictConvert('DatabaseType', row.databaseType) }} </a-tag>
+          </template>
+        </vxe-column>
         <vxe-column field="dbDriver" title="驱动类" />
         <vxe-column field="dbUrl" title="连接地址" />
         <vxe-column field="dbUsername" title="用户名" />
         <vxe-column field="remark" title="备注" />
         <vxe-column field="createTime" title="创建时间" />
-        <vxe-column fixed="right" width="150" :showOverflow="false" title="操作">
+        <vxe-column fixed="right" width="160" :showOverflow="false" title="操作">
           <template #default="{ row }">
-            <span>
-              <a href="javascript:" @click="show(row)">查看</a>
-            </span>
+            <a-link @click="show(row)">查看</a-link>
             <a-divider type="vertical" />
-            <span>
-              <a href="javascript:" @click="edit(row)">编辑</a>
-            </span>
+            <a-link @click="edit(row)">编辑</a-link>
             <a-divider type="vertical" />
-            <a-popconfirm title="是否删除" @confirm="remove(row)" okText="是" cancelText="否">
-              <a href="javascript:" style="color: red">删除</a>
-            </a-popconfirm>
+            <a-dropdown>
+              <a> 更多 <icon icon="ant-design:down-outlined" :size="12" /> </a>
+              <template #overlay>
+                <a-menu>
+                  <a-menu-item>
+                    <a-link @click="testConnectionInfo(row)">测试连接</a-link>
+                  </a-menu-item>
+                  <a-menu-item>
+                    <a-link @click="addDynamicDataSource(row)">应用</a-link>
+                  </a-menu-item>
+                  <a-menu-item>
+                    <a-link danger @click="remove(row)">删除</a-link>
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
           </template>
         </vxe-column>
       </vxe-table>
@@ -53,7 +66,7 @@
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue'
   import { $ref } from 'vue/macros'
-  import { del, page } from './DynamicDataSource.api'
+  import { addDynamicDataSourceById, databaseTypes, del, existsByDataSourceKey, page, testConnectionById } from './DynamicDataSource.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import DynamicDataSourceEdit from './DynamicDataSourceEdit.vue'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
@@ -61,11 +74,11 @@
   import { FormEditType } from '/@/enums/formTypeEnum'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { QueryField } from '/@/components/Bootx/Query/Query'
-
+  import { useDict } from '/@/hooks/bootx/useDict'
   // 使用hooks
   const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
   const { notification, createMessage, createConfirm } = useMessage()
-
+  const { dictConvert } = useDict()
   // 查询条件
   const fields = [
     { field: 'code', type: 'string', name: '编码', placeholder: '请输入编码' },
@@ -74,11 +87,7 @@
       field: 'databaseType',
       type: 'list',
       name: '数据库类型',
-      selectList: [
-        { key: 'mysql', value: 'MySQL' },
-        { key: 'oracle', value: 'Oracle' },
-        { key: 'mssql', value: 'SQLServer' },
-      ],
+      selectList: databaseTypes,
       placeholder: '请选择数据库类型',
     },
   ] as QueryField[]
@@ -117,13 +126,58 @@
   function show(record) {
     dynamicDataSourceEdit.init(record.id, FormEditType.Show)
   }
-
+  // 测试连接
+  async function testConnectionInfo(record) {
+    const { data } = await testConnectionById(record.id)
+    if (data) {
+      createMessage.warn(data)
+    } else {
+      createMessage.success('连接成功')
+    }
+  }
+  // 应用到系统中
+  async function addDynamicDataSource(record) {
+    const { data } = await existsByDataSourceKey(record.code)
+    if (data) {
+      createConfirm({
+        iconType: 'warning',
+        title: '重新添加',
+        content: '该数据源配置已经应用，是否进行更新',
+        onOk: () => {
+          loading.value = true
+          addDynamicDataSourceById(record.id).then(() => {
+            createMessage.success('更新成功')
+          })
+        },
+      })
+    } else {
+      createConfirm({
+        iconType: 'warning',
+        title: '添加',
+        content: '是否将该数据源配置应用到系统中',
+        onOk: () => {
+          loading.value = true
+          addDynamicDataSourceById(record.id).then(() => {
+            createMessage.success('应用成功')
+          })
+        },
+      })
+    }
+  }
   // 删除
   function remove(record) {
-    del(record.id).then(() => {
-      createMessage.success('删除成功')
+    createConfirm({
+      iconType: 'warning',
+      title: '删除',
+      content: '是否删除流程模型',
+      onOk: () => {
+        loading.value = true
+        del(record.id).then(() => {
+          createMessage.success('删除成功')
+          queryPage()
+        })
+      },
     })
-    queryPage()
   }
 </script>
 
diff --git a/src/views/modules/system/dict/DictEdit.vue b/src/views/modules/system/dict/DictEdit.vue
index 75a03f6..64df639 100644
--- a/src/views/modules/system/dict/DictEdit.vue
+++ b/src/views/modules/system/dict/DictEdit.vue
@@ -25,7 +25,7 @@
         <a-input v-model:value="form.groupTag" :disabled="showable" placeholder="请输入分类标签" />
       </a-form-item>
       <a-form-item label="备注" name="remark">
-        <a-input v-model:value="form.remark" :disabled="showable" placeholder="请输入备注" />
+        <a-textarea :rows="3" v-model:value="form.remark" :disabled="showable" placeholder="请输入备注" />
       </a-form-item>
     </a-form>
     <template #footer>
@@ -68,6 +68,7 @@
     id: null,
     code: '',
     name: '',
+    enable: true,
     groupTag: '',
     remark: '',
   } as Dict)
diff --git a/src/views/modules/system/dict/DictItemEdit.vue b/src/views/modules/system/dict/DictItemEdit.vue
index 35aee16..d8d27a6 100644
--- a/src/views/modules/system/dict/DictItemEdit.vue
+++ b/src/views/modules/system/dict/DictItemEdit.vue
@@ -74,6 +74,7 @@
     dictCode: null,
     code: '',
     name: '',
+    enable: true,
     sortNo: 0,
     remark: '',
   } as DictItem)
-- 
Gitee


From 2c04ed503536c1d59316e41fdcbf83aa34c8f06d Mon Sep 17 00:00:00 2001
From: xxm <xxm1995@outlook.com>
Date: Wed, 8 Mar 2023 22:17:23 +0800
Subject: [PATCH 14/28] =?UTF-8?q?perf=20=E5=A4=9A=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=BA=90=E5=88=97=E8=A1=A8=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../develop/dynamicsource/DataSourceList.vue  | 49 +++++++++++++++++++
 .../dynamicsource/DynamicDataSource.api.ts    |  6 +--
 .../dynamicsource/DynamicDataSourceList.vue   |  2 -
 3 files changed, 52 insertions(+), 5 deletions(-)
 create mode 100644 src/views/modules/develop/dynamicsource/DataSourceList.vue

diff --git a/src/views/modules/develop/dynamicsource/DataSourceList.vue b/src/views/modules/develop/dynamicsource/DataSourceList.vue
new file mode 100644
index 0000000..16aa3b3
--- /dev/null
+++ b/src/views/modules/develop/dynamicsource/DataSourceList.vue
@@ -0,0 +1,49 @@
+<template>
+  <basic-drawer forceRender showFooter v-bind="$attrs" title="字典列表" width="35%" :visible="visible" @close="visible = false">
+    <div class="m-3 p-3 bg-white">
+      <vxe-toolbar ref="xToolbar" custom :refresh="{ query: query }" />
+      <vxe-table row-id="id" ref="xTable" :data="records" :loading="loading">
+        <vxe-column type="seq" width="60" />
+        <vxe-column field="code" title="数据源" />
+        <vxe-column fixed="right" width="50" :showOverflow="false" title="操作">
+          <template #default="{ row }">
+            <a-popconfirm title="是否删除" @confirm="remove(row)" okText="是" cancelText="否">
+              <a-link danger>删除</a-link>
+            </a-popconfirm>
+          </template>
+        </vxe-column>
+      </vxe-table>
+    </div>
+  </basic-drawer>
+</template>
+
+<script lang="ts" setup>
+  import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
+  import { $ref } from 'vue/macros'
+  import {
+    addDynamicDataSourceById
+  } from "/@/views/modules/develop/dynamicsource/DynamicDataSource.api";
+  import { useMessage } from "/@/hooks/web/useMessage";
+
+  const { notification, createMessage, createConfirm } = useMessage()
+
+  let records = $ref<string[]>([])
+  let loading = $ref(false)
+  function query(){
+
+  }
+  function remove(record){
+    createConfirm({
+      iconType: 'warning',
+      title: '重新添加',
+      content: '该数据源配置已经应用，是否进行更新',
+      onOk: () => {
+        addDynamicDataSourceById(record.id).then(() => {
+          createMessage.success('更新成功')
+        })
+      },
+    })
+  }
+</script>
+
+<style scoped></style>
diff --git a/src/views/modules/develop/dynamicsource/DynamicDataSource.api.ts b/src/views/modules/develop/dynamicsource/DynamicDataSource.api.ts
index 1ea8ebf..c1a9354 100644
--- a/src/views/modules/develop/dynamicsource/DynamicDataSource.api.ts
+++ b/src/views/modules/develop/dynamicsource/DynamicDataSource.api.ts
@@ -77,7 +77,7 @@ export const addDynamicDataSourceById = (id) => {
  * 判断编码是否被使用
  */
 export const existsByCode = (id) => {
-  return defHttp.post<Result<boolean>>({
+  return defHttp.get<Result<boolean>>({
     url: '/dynamic/source/existsByCode',
     params: { id },
   })
@@ -86,8 +86,8 @@ export const existsByCode = (id) => {
 /**
  * 判断编码是否被使用
  */
-export const existsByCodeNotId = (id, code) => {
-  return defHttp.post<Result<boolean>>({
+export const existsByCodeNotId = (code, id) => {
+  return defHttp.get<Result<boolean>>({
     url: '/dynamic/source/existsByCodeNotId',
     params: { id, code },
   })
diff --git a/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue b/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue
index 4d06611..da2a98e 100644
--- a/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue
+++ b/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue
@@ -144,7 +144,6 @@
         title: '重新添加',
         content: '该数据源配置已经应用，是否进行更新',
         onOk: () => {
-          loading.value = true
           addDynamicDataSourceById(record.id).then(() => {
             createMessage.success('更新成功')
           })
@@ -156,7 +155,6 @@
         title: '添加',
         content: '是否将该数据源配置应用到系统中',
         onOk: () => {
-          loading.value = true
           addDynamicDataSourceById(record.id).then(() => {
             createMessage.success('应用成功')
           })
-- 
Gitee


From 930b04c37a62ea0a631e348868310b89faf2225e Mon Sep 17 00:00:00 2001
From: xxm1995 <xxm1995@outlook.com>
Date: Thu, 9 Mar 2023 15:56:39 +0800
Subject: [PATCH 15/28] =?UTF-8?q?feat=20=E6=95=B0=E6=8D=AE=E6=BA=90?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../develop/dynamicsource/DataSourceList.vue  | 65 +++++++++++--------
 .../dynamicsource/DynamicDataSource.api.ts    | 21 +++++-
 .../dynamicsource/DynamicDataSourceEdit.vue   |  8 ++-
 .../dynamicsource/DynamicDataSourceList.vue   | 10 ++-
 4 files changed, 75 insertions(+), 29 deletions(-)

diff --git a/src/views/modules/develop/dynamicsource/DataSourceList.vue b/src/views/modules/develop/dynamicsource/DataSourceList.vue
index 16aa3b3..5dd8223 100644
--- a/src/views/modules/develop/dynamicsource/DataSourceList.vue
+++ b/src/views/modules/develop/dynamicsource/DataSourceList.vue
@@ -1,49 +1,62 @@
 <template>
-  <basic-drawer forceRender showFooter v-bind="$attrs" title="字典列表" width="35%" :visible="visible" @close="visible = false">
-    <div class="m-3 p-3 bg-white">
-      <vxe-toolbar ref="xToolbar" custom :refresh="{ query: query }" />
-      <vxe-table row-id="id" ref="xTable" :data="records" :loading="loading">
-        <vxe-column type="seq" width="60" />
-        <vxe-column field="code" title="数据源" />
-        <vxe-column fixed="right" width="50" :showOverflow="false" title="操作">
-          <template #default="{ row }">
-            <a-popconfirm title="是否删除" @confirm="remove(row)" okText="是" cancelText="否">
-              <a-link danger>删除</a-link>
-            </a-popconfirm>
-          </template>
-        </vxe-column>
-      </vxe-table>
-    </div>
+  <basic-drawer forceRender showFooter v-bind="$attrs" title="数据源列表" width="35%" :visible="visible" @close="visible = false">
+    <vxe-toolbar ref="xToolbar" custom :refresh="{ query: query }" />
+    <vxe-table row-id="key" ref="xTable" :data="records" :loading="loading">
+      <vxe-column type="seq" width="60" />
+      <vxe-column field="key" title="数据源" />
+      <vxe-column fixed="right" width="50" :showOverflow="false" title="操作">
+        <template #default="{ row }">
+          <a-popconfirm title="是否删除" @confirm="remove(row)" okText="是" cancelText="否">
+            <a-link danger>删除</a-link>
+          </a-popconfirm>
+        </template>
+      </vxe-column>
+    </vxe-table>
   </basic-drawer>
 </template>
 
 <script lang="ts" setup>
   import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
   import { $ref } from 'vue/macros'
-  import {
-    addDynamicDataSourceById
-  } from "/@/views/modules/develop/dynamicsource/DynamicDataSource.api";
-  import { useMessage } from "/@/hooks/web/useMessage";
+  import { findAllDataSource, removeDataSourceByKey } from './DynamicDataSource.api'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { KeyValue } from '/#/web'
 
   const { notification, createMessage, createConfirm } = useMessage()
 
-  let records = $ref<string[]>([])
+  let records = $ref<KeyValue[]>([])
   let loading = $ref(false)
-  function query(){
-
+  let visible = $ref(false)
+  // 打开列表
+  function show() {
+    visible = true
+    query()
+  }
+  // 查询数据
+  function query() {
+    loading = true
+    findAllDataSource().then(({ data }) => {
+      records = data
+      loading = false
+    })
   }
-  function remove(record){
+  // 移除数据源
+  function remove(record) {
     createConfirm({
       iconType: 'warning',
       title: '重新添加',
-      content: '该数据源配置已经应用，是否进行更新',
+      content: '是否将该数据源从系统中移除',
       onOk: () => {
-        addDynamicDataSourceById(record.id).then(() => {
-          createMessage.success('更新成功')
+        removeDataSourceByKey(record.key).then(() => {
+          createMessage.success('移除成功')
+          query()
         })
       },
     })
   }
+  defineExpose({
+    show,
+  })
 </script>
 
 <style scoped></style>
diff --git a/src/views/modules/develop/dynamicsource/DynamicDataSource.api.ts b/src/views/modules/develop/dynamicsource/DynamicDataSource.api.ts
index c1a9354..06604ee 100644
--- a/src/views/modules/develop/dynamicsource/DynamicDataSource.api.ts
+++ b/src/views/modules/develop/dynamicsource/DynamicDataSource.api.ts
@@ -1,6 +1,6 @@
 import { defHttp } from '/@/utils/http/axios'
 import { PageResult, Result } from '/#/axios'
-import { BaseEntity } from '/#/web'
+import { BaseEntity, KeyValue } from "/#/web";
 import { LabeledValue } from 'ant-design-vue/lib/select'
 
 /**
@@ -121,6 +121,25 @@ export const findAll = () => {
   })
 }
 
+/**
+ * 查询当前数据源列表
+ */
+export const findAllDataSource = () => {
+  return defHttp.get<Result<KeyValue[]>>({
+    url: '/dynamic/source/findAllDataSource',
+  })
+}
+
+/**
+ * 从数据源列表中删除指定数据源
+ */
+export const removeDataSourceByKey = (key) => {
+  return defHttp.delete({
+    url: '/dynamic/source/removeDataSourceByKey',
+    params: { key },
+  })
+}
+
 /**
  * 动态数据源管理
  */
diff --git a/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue b/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue
index 7a1426f..c1b5a09 100644
--- a/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue
+++ b/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue
@@ -20,7 +20,13 @@
         <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入数据源名称" />
       </a-form-item>
       <a-form-item label="数据库类型" name="databaseType">
-        <a-select v-model:value="form.databaseType" :options="databaseTypes" @change="changeDatabaseType" placeholder="请选择数据库类型" />
+        <a-select
+          v-model:value="form.databaseType"
+          :disabled="showable"
+          :options="databaseTypes"
+          @change="changeDatabaseType"
+          placeholder="请选择数据库类型"
+        />
       </a-form-item>
       <a-form-item label="驱动类" name="dbDriver">
         <a-input v-model:value="form.dbDriver" :disabled="showable" placeholder="请输入驱动类" />
diff --git a/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue b/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue
index da2a98e..5d0efac 100644
--- a/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue
+++ b/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue
@@ -8,6 +8,7 @@
         <template #buttons>
           <a-space>
             <a-button type="primary" pre-icon="ant-design:plus-outlined" @click="add">新建</a-button>
+            <a-button @click="showDatabaseList">数据源列表</a-button>
           </a-space>
         </template>
       </vxe-toolbar>
@@ -59,12 +60,13 @@
         @page-change="handleTableChange"
       />
       <dynamic-data-source-edit ref="dynamicDataSourceEdit" @ok="queryPage" />
+      <data-source-list ref="dataSourceList" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, ref } from 'vue'
+  import { onMounted } from 'vue'
   import { $ref } from 'vue/macros'
   import { addDynamicDataSourceById, databaseTypes, del, existsByDataSourceKey, page, testConnectionById } from './DynamicDataSource.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
@@ -75,6 +77,7 @@
   import { useMessage } from '/@/hooks/web/useMessage'
   import { QueryField } from '/@/components/Bootx/Query/Query'
   import { useDict } from '/@/hooks/bootx/useDict'
+  import DataSourceList from './DataSourceList.vue'
   // 使用hooks
   const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
   const { notification, createMessage, createConfirm } = useMessage()
@@ -95,6 +98,7 @@
   const xTable = $ref<VxeTableInstance>()
   const xToolbar = $ref<VxeToolbarInstance>()
   const dynamicDataSourceEdit = $ref<any>()
+  const dataSourceList = $ref<any>()
 
   onMounted(() => {
     vxeBind()
@@ -126,6 +130,10 @@
   function show(record) {
     dynamicDataSourceEdit.init(record.id, FormEditType.Show)
   }
+  // 查看
+  function showDatabaseList() {
+    dataSourceList.show()
+  }
   // 测试连接
   async function testConnectionInfo(record) {
     const { data } = await testConnectionById(record.id)
-- 
Gitee


From 9be043af90a66318450da1a480e1e16e4491d1d6 Mon Sep 17 00:00:00 2001
From: xxm1995 <xxm1995@outlook.com>
Date: Fri, 10 Mar 2023 16:56:03 +0800
Subject: [PATCH 16/28] =?UTF-8?q?perf=20=E6=95=B0=E6=8D=AE=E6=BA=90?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/develop/dynamicsource/DataSourceList.vue     | 6 ++----
 .../develop/dynamicsource/DynamicDataSource.api.ts       | 2 +-
 .../develop/dynamicsource/DynamicDataSourceEdit.vue      | 9 +++++++--
 .../develop/dynamicsource/DynamicDataSourceList.vue      | 2 +-
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/views/modules/develop/dynamicsource/DataSourceList.vue b/src/views/modules/develop/dynamicsource/DataSourceList.vue
index 5dd8223..6585f3f 100644
--- a/src/views/modules/develop/dynamicsource/DataSourceList.vue
+++ b/src/views/modules/develop/dynamicsource/DataSourceList.vue
@@ -6,9 +6,7 @@
       <vxe-column field="key" title="数据源" />
       <vxe-column fixed="right" width="50" :showOverflow="false" title="操作">
         <template #default="{ row }">
-          <a-popconfirm title="是否删除" @confirm="remove(row)" okText="是" cancelText="否">
-            <a-link danger>删除</a-link>
-          </a-popconfirm>
+          <a-link danger @click="remove(row)">删除</a-link>
         </template>
       </vxe-column>
     </vxe-table>
@@ -44,7 +42,7 @@
   function remove(record) {
     createConfirm({
       iconType: 'warning',
-      title: '重新添加',
+      title: '移除',
       content: '是否将该数据源从系统中移除',
       onOk: () => {
         removeDataSourceByKey(record.key).then(() => {
diff --git a/src/views/modules/develop/dynamicsource/DynamicDataSource.api.ts b/src/views/modules/develop/dynamicsource/DynamicDataSource.api.ts
index 06604ee..7124856 100644
--- a/src/views/modules/develop/dynamicsource/DynamicDataSource.api.ts
+++ b/src/views/modules/develop/dynamicsource/DynamicDataSource.api.ts
@@ -1,6 +1,6 @@
 import { defHttp } from '/@/utils/http/axios'
 import { PageResult, Result } from '/#/axios'
-import { BaseEntity, KeyValue } from "/#/web";
+import { BaseEntity, KeyValue } from '/#/web'
 import { LabeledValue } from 'ant-design-vue/lib/select'
 
 /**
diff --git a/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue b/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue
index c1b5a09..7e08b2b 100644
--- a/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue
+++ b/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue
@@ -47,7 +47,7 @@
     <template #footer>
       <a-space>
         <a-button key="cancel" @click="handleCancel">取消</a-button>
-        <a-button v-if="!showable" preIcon="ant-design:api-outlined" @click="testConnectionInfo">测试连接</a-button>
+        <a-button v-if="addable" preIcon="ant-design:api-outlined" @click="testConnectionInfo">测试连接</a-button>
         <a-button v-if="!showable" key="forward" :loading="confirmLoading" type="primary" @click="handleOk">保存</a-button>
       </a-space>
     </template>
@@ -79,12 +79,14 @@
     initFormEditType,
     handleCancel,
     search,
+    diffForm,
     labelCol,
     wrapperCol,
     modalWidth,
     title,
     confirmLoading,
     visible,
+    addable,
     editable,
     showable,
     formEditType,
@@ -99,12 +101,14 @@
     id: null,
     code: '',
     name: '',
+    databaseType: undefined,
     dbDriver: '',
     dbUrl: '',
     dbUsername: '',
     dbPassword: '',
     remark: '',
   })
+  let rawForm
   // 校验
   const rules = reactive({
     code: [
@@ -137,6 +141,7 @@
       confirmLoading.value = true
       get(id).then(({ data }) => {
         form = data
+        rawForm = { ...data }
         confirmLoading.value = false
       })
     } else {
@@ -167,7 +172,7 @@
       if (formEditType.value === FormEditType.Add) {
         await add(form)
       } else if (formEditType.value === FormEditType.Edit) {
-        await update(form)
+        await update({ ...form, ...diffForm(rawForm, form, 'webhookKey') })
       }
       confirmLoading.value = false
       handleCancel()
diff --git a/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue b/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue
index 5d0efac..89c90e8 100644
--- a/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue
+++ b/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue
@@ -130,7 +130,7 @@
   function show(record) {
     dynamicDataSourceEdit.init(record.id, FormEditType.Show)
   }
-  // 查看
+  // 查看数据源列表
   function showDatabaseList() {
     dataSourceList.show()
   }
-- 
Gitee


From 018328673f993cd3a38c306ab5bdb0c7a719477d Mon Sep 17 00:00:00 2001
From: xxm <xxm1995@outlook.com>
Date: Mon, 13 Mar 2023 23:36:23 +0800
Subject: [PATCH 17/28] =?UTF-8?q?perf=20SQL=E6=9F=A5=E8=AF=A2=E5=92=8C?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E5=9B=BE=E8=AE=BE=E8=AE=A1=E7=A7=BB=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 -
 src/components/Bpmn/ProcessViewer.vue         |  55 +++---
 src/components/Bpmn/common/customTranslate.js |   7 +-
 src/components/Bpmn/processViewerUtils.js     |  18 +-
 src/components/FlowChart/index.ts             |   4 -
 src/components/FlowChart/src/FlowChart.vue    | 158 -----------------
 .../FlowChart/src/FlowChartToolbar.vue        | 159 ------------------
 .../FlowChart/src/adpterForTurbo.ts           |  75 ---------
 src/components/FlowChart/src/config.ts        |  96 -----------
 src/components/FlowChart/src/enum.ts          |  11 --
 src/components/FlowChart/src/types.ts         |  14 --
 .../FlowChart/src/useFlowContext.ts           |  17 --
 .../modules/bpm/instance/Instance.api.ts      |   2 +-
 src/views/modules/bpm/model/BpmModelList.vue  |   6 +-
 src/views/modules/bpm/model/BpmModeler.vue    | 110 ++++++++++++
 .../bpm/model/{ => node}/BpmModelNodeCode.ts  |   0
 .../bpm/model/{ => node}/BpmModelNodeEdit.vue |   2 +-
 .../bpm/model/{ => node}/BpmModelNodeList.vue |   4 +-
 .../bpm/model/{ => node}/ModelNode.api.ts     |   0
 .../modules/develop/query/QuerySql.api.ts     |  82 +++++++++
 .../modules/develop/query/QuerySqlEdit.vue    | 133 +++++++++++++++
 .../modules/develop/query/QuerySqlList.vue    | 121 +++++++++++++
 yarn.lock                                     |  38 -----
 23 files changed, 494 insertions(+), 620 deletions(-)
 delete mode 100644 src/components/FlowChart/index.ts
 delete mode 100644 src/components/FlowChart/src/FlowChart.vue
 delete mode 100644 src/components/FlowChart/src/FlowChartToolbar.vue
 delete mode 100644 src/components/FlowChart/src/adpterForTurbo.ts
 delete mode 100644 src/components/FlowChart/src/config.ts
 delete mode 100644 src/components/FlowChart/src/enum.ts
 delete mode 100644 src/components/FlowChart/src/types.ts
 delete mode 100644 src/components/FlowChart/src/useFlowContext.ts
 create mode 100644 src/views/modules/bpm/model/BpmModeler.vue
 rename src/views/modules/bpm/model/{ => node}/BpmModelNodeCode.ts (100%)
 rename src/views/modules/bpm/model/{ => node}/BpmModelNodeEdit.vue (99%)
 rename src/views/modules/bpm/model/{ => node}/BpmModelNodeList.vue (97%)
 rename src/views/modules/bpm/model/{ => node}/ModelNode.api.ts (100%)
 create mode 100644 src/views/modules/develop/query/QuerySql.api.ts
 create mode 100644 src/views/modules/develop/query/QuerySqlEdit.vue
 create mode 100644 src/views/modules/develop/query/QuerySqlList.vue

diff --git a/package.json b/package.json
index 55a8eb7..e0c9beb 100644
--- a/package.json
+++ b/package.json
@@ -34,8 +34,6 @@
     "@ant-design/colors": "^6.0.0",
     "@ant-design/icons-vue": "^6.1.0",
     "@iconify/iconify": "^2.2.1",
-    "@logicflow/core": "^1.1.13",
-    "@logicflow/extension": "^1.1.13",
     "@vue/runtime-core": "^3.2.33",
     "@vue/shared": "^3.2.33",
     "@vueuse/core": "^8.3.0",
diff --git a/src/components/Bpmn/ProcessViewer.vue b/src/components/Bpmn/ProcessViewer.vue
index 79bea68..a20528c 100644
--- a/src/components/Bpmn/ProcessViewer.vue
+++ b/src/components/Bpmn/ProcessViewer.vue
@@ -3,18 +3,18 @@
     <a-layout style="height: 100%">
       <a-layout style="align-items: stretch">
         <div ref="canvas" class="canvas" :style="{ minHeight: height + 'px' }"></div>
-        <a-drawer :visible="drawerVisible" title="流程信息" :width="450" placement="right" :closable="true" @close="drawerVisible = false">
-          <a-timeline>
-            <a-timeline-item v-for="o in currentTaskList" :key="o.id">
-              <p>开始时间: {{ o.startTime }}</p>
-              <p>状态：{{ stateNameConvert(o.state) }}</p>
-              <p>处理结果：{{ dictConvert('BpmTaskResult', o.result) }}</p>
-              <p>处理人: {{ o.userName }}</p>
-              <p>结束时间: {{ o.endTime ? o.endTime : '' }}</p>
-              <p>审批意见：{{ o.reason ? o.reason : '' }}</p>
-            </a-timeline-item>
-          </a-timeline>
-        </a-drawer>
+<!--        <a-drawer :visible="drawerVisible" title="流程信息" :width="450" placement="right" :closable="true" @close="drawerVisible = false">-->
+<!--          <a-timeline>-->
+<!--            <a-timeline-item v-for="o in currentTaskList" :key="o.id">-->
+<!--              <p>开始时间: {{ o.startTime }}</p>-->
+<!--              <p>状态：{{ stateNameConvert(o.state) }}</p>-->
+<!--              <p>处理结果：{{ dictConvert('BpmTaskResult', o.result) }}</p>-->
+<!--              <p>处理人: {{ o.userName }}</p>-->
+<!--              <p>结束时间: {{ o.endTime ? o.endTime : '' }}</p>-->
+<!--              <p>审批意见：{{ o.reason ? o.reason : '' }}</p>-->
+<!--            </a-timeline-item>-->
+<!--          </a-timeline>-->
+<!--        </a-drawer>-->
         <a-layout-sider
           class="sider"
           style="
@@ -37,7 +37,11 @@
   import Modeler from 'bpmn-js/lib/Modeler'
   // 引入flowable的节点文件
   import flowableModdle from './flowable/flowable.json'
+
   import { addArrow } from './processViewerUtils'
+  import { useDict } from '/@/hooks/bootx/useDict'
+
+  const { dictConvert } = useDict()
 
   export default {
     name: 'WorkflowBpmnModeler',
@@ -88,24 +92,26 @@
        * 生成实例
        */
       initModeler() {
+        console.log(this.$refs.canvas)
         this.modeler = new Modeler({
           container: this.$refs.canvas,
           additionalModules: [
             {
               translate: ['value', customTranslate],
-              paletteProvider: ['value', ''], // 禁用/清空左侧工具栏
-              labelEditingProvider: ['value', ''], // 禁用节点编辑
-              contextPadProvider: ['value', ''], // 禁用图形菜单
-              bendpoints: ['value', {}], // 禁用连线拖动
+              // paletteProvider: ['value', ''], // 禁用/清空左侧工具栏
+              // labelEditingProvider: ['value', ''], // 禁用节点编辑
+              // contextPadProvider: ['value', ''], // 禁用图形菜单
+              // bendpoints: ['value', {}], // 禁用连线拖动
               // zoomScroll: ['value', ''], // 禁用滚动
               // moveCanvas: ['value', ''], // 禁用拖动整个流程图
               move: ['value', ''], // 禁用单个图形拖动
             },
           ],
-          moddleExtensions: {
-            flowable: flowableModdle,
-          },
+          // moddleExtensions: {
+          //   flowable: flowableModdle,
+          // },
         })
+        console.log(this.modeler)
       },
       /**
        * 创建流程图
@@ -282,9 +288,6 @@
       stateNameConvert(state) {
         return dictConvert('BpmTaskState', state)
       },
-      dictConvert(dictCode, code) {
-        return dictConvert(dictCode, code)
-      },
     },
   }
 </script>
@@ -293,10 +296,10 @@
   // Font class
   @import './icon/iconfont.css';
   /*左边工具栏以及编辑节点的样式*/
-  @import '~bpmn-js/dist/assets/diagram-js.css';
-  @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
-  @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
-  @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
+  @import 'bpmn-js/dist/assets/diagram-js.css';
+  @import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
+  @import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
+  @import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
 
   @import './css/ProcessViewerHighlight.less';
   .view-mode {
diff --git a/src/components/Bpmn/common/customTranslate.js b/src/components/Bpmn/common/customTranslate.js
index fa05f9d..803de5f 100644
--- a/src/components/Bpmn/common/customTranslate.js
+++ b/src/components/Bpmn/common/customTranslate.js
@@ -7,12 +7,9 @@ export default function customTranslate(template, replacements) {
   template = translations[template] || template
 
   // Replace
-  return template.replace(/{([^}]+)}/g, function(_, key) {
+  return template.replace(/{([^}]+)}/g, function (_, key) {
     var str = replacements[key]
-    if (
-      translations[replacements[key]] !== null &&
-      translations[replacements[key]] !== 'undefined'
-    ) {
+    if (translations[replacements[key]] !== null && translations[replacements[key]] !== 'undefined') {
       str = translations[replacements[key]]
     }
     return str || '{' + key + '}'
diff --git a/src/components/Bpmn/processViewerUtils.js b/src/components/Bpmn/processViewerUtils.js
index 0c02146..1f72db1 100644
--- a/src/components/Bpmn/processViewerUtils.js
+++ b/src/components/Bpmn/processViewerUtils.js
@@ -4,7 +4,7 @@ import { query as domQuery } from 'min-dom'
 /**
  * 添加箭头
  */
-export function addArrow () {
+export function addArrow() {
   const todo = svgCreate('marker')
   // 追加箭头svg元素 通过
   svgAttr(todo, {
@@ -14,12 +14,12 @@ export function addArrow () {
     refY: '10',
     markerWidth: '10',
     markerHeight: '10',
-    orient: 'auto'
+    orient: 'auto',
   })
   const todoPath = svgCreate('path')
   svgAttr(todoPath, {
     d: 'M 1 5 L 11 10 L 1 15 Z',
-    class: 'highlight-todo-arrow'
+    class: 'highlight-todo-arrow',
   })
   svgAppend(todo, todoPath)
   // 追加箭头svg元素 通过
@@ -31,12 +31,12 @@ export function addArrow () {
     refY: '10',
     markerWidth: '10',
     markerHeight: '10',
-    orient: 'auto'
+    orient: 'auto',
   })
   const passPath = svgCreate('path')
   svgAttr(passPath, {
     d: 'M 1 5 L 11 10 L 1 15 Z',
-    class: 'highlight-pass-arrow'
+    class: 'highlight-pass-arrow',
   })
   svgAppend(pass, passPath)
 
@@ -49,12 +49,12 @@ export function addArrow () {
     refY: '10',
     markerWidth: '10',
     markerHeight: '10',
-    orient: 'auto'
+    orient: 'auto',
   })
   const rejectPath = svgCreate('path')
   svgAttr(rejectPath, {
     d: 'M 1 5 L 11 10 L 1 15 Z',
-    class: 'highlight-reject-arrow'
+    class: 'highlight-reject-arrow',
   })
   svgAppend(reject, rejectPath)
 
@@ -67,12 +67,12 @@ export function addArrow () {
     refY: '10',
     markerWidth: '10',
     markerHeight: '10',
-    orient: 'auto'
+    orient: 'auto',
   })
   const cancelPath = svgCreate('path')
   svgAttr(cancelPath, {
     d: 'M 1 5 L 11 10 L 1 15 Z',
-    class: 'highlight-cancel-arrow'
+    class: 'highlight-cancel-arrow',
   })
   svgAppend(cancel, cancelPath)
 
diff --git a/src/components/FlowChart/index.ts b/src/components/FlowChart/index.ts
deleted file mode 100644
index 582ec4d..0000000
--- a/src/components/FlowChart/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { withInstall } from '/@/utils'
-import flowChart from './src/FlowChart.vue'
-
-export const FlowChart = withInstall(flowChart)
diff --git a/src/components/FlowChart/src/FlowChart.vue b/src/components/FlowChart/src/FlowChart.vue
deleted file mode 100644
index f8f53f3..0000000
--- a/src/components/FlowChart/src/FlowChart.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<template>
-  <div class="h-full" :class="prefixCls">
-    <FlowChartToolbar :prefixCls="prefixCls" v-if="toolbar" @view-data="handlePreview" />
-    <div ref="lfElRef" class="h-full"></div>
-    <BasicModal @register="register" title="流程数据" width="50%">
-      <JsonPreview :data="graphData" />
-    </BasicModal>
-  </div>
-</template>
-<script lang="ts">
-  import type { Ref } from 'vue'
-  import type { Definition } from '@logicflow/core'
-  import { defineComponent, ref, onMounted, unref, nextTick, computed, watch } from 'vue'
-  import FlowChartToolbar from './FlowChartToolbar.vue'
-  import LogicFlow from '@logicflow/core'
-  import { Snapshot, BpmnElement, Menu, DndPanel, SelectionSelect } from '@logicflow/extension'
-  import { useDesign } from '/@/hooks/web/useDesign'
-  import { useAppStore } from '/@/store/modules/app'
-  import { createFlowChartContext } from './useFlowContext'
-  import { toLogicFlowData } from './adpterForTurbo'
-  import { useModal, BasicModal } from '/@/components/Modal'
-  import { JsonPreview } from '/@/components/CodeEditor'
-  import { configDefaultDndPanel } from './config'
-  import '@logicflow/core/dist/style/index.css'
-  import '@logicflow/extension/lib/style/index.css'
-
-  export default defineComponent({
-    name: 'FlowChart',
-    components: { BasicModal, FlowChartToolbar, JsonPreview },
-    props: {
-      flowOptions: {
-        type: Object as PropType<Definition>,
-        default: () => ({}),
-      },
-
-      data: {
-        type: Object as PropType<any>,
-        default: () => ({}),
-      },
-
-      toolbar: {
-        type: Boolean,
-        default: true,
-      },
-      patternItems: {
-        type: Array,
-      },
-    },
-    setup(props) {
-      const lfElRef = ref(null)
-      const graphData = ref({})
-
-      const lfInstance = ref(null) as Ref<LogicFlow | null>
-
-      const { prefixCls } = useDesign('flow-chart')
-      const appStore = useAppStore()
-      const [register, { openModal }] = useModal()
-      createFlowChartContext({
-        logicFlow: lfInstance as unknown as LogicFlow,
-      })
-
-      const getFlowOptions = computed(() => {
-        const { flowOptions } = props
-
-        const defaultOptions: Partial<Definition> = {
-          grid: true,
-          background: {
-            color: appStore.getDarkMode === 'light' ? '#f7f9ff' : '#151515',
-          },
-          keyboard: {
-            enabled: true,
-          },
-          ...flowOptions,
-        }
-        return defaultOptions as Definition
-      })
-
-      watch(
-        () => props.data,
-        () => {
-          onRender()
-        },
-      )
-
-      // TODO
-      // watch(
-      //   () => appStore.getDarkMode,
-      //   () => {
-      //     init();
-      //   }
-      // );
-
-      watch(
-        () => unref(getFlowOptions),
-        (options) => {
-          unref(lfInstance)?.updateEditConfig(options)
-        },
-      )
-
-      // init logicFlow
-      async function init() {
-        await nextTick()
-
-        const lfEl = unref(lfElRef)
-        if (!lfEl) {
-          return
-        }
-        LogicFlow.use(DndPanel)
-
-        // Canvas configuration
-        LogicFlow.use(Snapshot)
-        // Use the bpmn plug-in to introduce bpmn elements, which can be used after conversion in turbo
-        LogicFlow.use(BpmnElement)
-        // Start the right-click menu
-        LogicFlow.use(Menu)
-        LogicFlow.use(SelectionSelect)
-
-        lfInstance.value = new LogicFlow({
-          ...unref(getFlowOptions),
-          container: lfEl,
-        })
-        const lf = unref(lfInstance)!
-        lf?.setDefaultEdgeType('line')
-        onRender()
-        lf?.setPatternItems(props.patternItems || configDefaultDndPanel(lf))
-      }
-
-      async function onRender() {
-        await nextTick()
-        const lf = unref(lfInstance)
-        if (!lf) {
-          return
-        }
-        const lFData = toLogicFlowData(props.data)
-        lf.render(lFData)
-      }
-
-      function handlePreview() {
-        const lf = unref(lfInstance)
-        if (!lf) {
-          return
-        }
-        graphData.value = unref(lf).getGraphData()
-        openModal()
-      }
-
-      onMounted(init)
-
-      return {
-        register,
-        prefixCls,
-        lfElRef,
-        handlePreview,
-        graphData,
-      }
-    },
-  })
-</script>
diff --git a/src/components/FlowChart/src/FlowChartToolbar.vue b/src/components/FlowChart/src/FlowChartToolbar.vue
deleted file mode 100644
index 01c37b0..0000000
--- a/src/components/FlowChart/src/FlowChartToolbar.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<template>
-  <div :class="`${prefixCls}-toolbar`" class="flex items-center px-2 py-1">
-    <template v-for="item in toolbarItemList" :key="item.type">
-      <Tooltip placement="bottom" v-bind="item.disabled ? { visible: false } : {}">
-        <template #title>{{ item.tooltip }}</template>
-        <span :class="`${prefixCls}-toolbar__icon`" v-if="item.icon" @click="onControl(item)">
-          <Icon :icon="item.icon" :class="item.disabled ? 'cursor-not-allowed disabeld' : 'cursor-pointer'" />
-        </span>
-      </Tooltip>
-      <Divider v-if="item.separate" type="vertical" />
-    </template>
-  </div>
-</template>
-<script lang="ts">
-  import type { ToolbarConfig } from './types'
-
-  import { defineComponent, ref, onUnmounted, unref, nextTick, watchEffect } from 'vue'
-  import { Divider, Tooltip } from 'ant-design-vue'
-  import { Icon } from '/@/components/Icon'
-
-  import { useFlowChartContext } from './useFlowContext'
-  import { ToolbarTypeEnum } from './enum'
-
-  export default defineComponent({
-    name: 'FlowChartToolbar',
-    components: { Icon, Divider, Tooltip },
-    props: {
-      prefixCls: String,
-    },
-    emits: ['view-data'],
-    setup(_, { emit }) {
-      const toolbarItemList = ref<ToolbarConfig[]>([
-        {
-          type: ToolbarTypeEnum.ZOOM_IN,
-          icon: 'codicon:zoom-out',
-          tooltip: '缩小',
-        },
-        {
-          type: ToolbarTypeEnum.ZOOM_OUT,
-          icon: 'codicon:zoom-in',
-          tooltip: '放大',
-        },
-        {
-          type: ToolbarTypeEnum.RESET_ZOOM,
-          icon: 'codicon:screen-normal',
-          tooltip: '重置比例',
-        },
-        { separate: true },
-        {
-          type: ToolbarTypeEnum.UNDO,
-          icon: 'ion:arrow-undo-outline',
-          tooltip: '后退',
-          disabled: true,
-        },
-        {
-          type: ToolbarTypeEnum.REDO,
-          icon: 'ion:arrow-redo-outline',
-          tooltip: '前进',
-          disabled: true,
-        },
-        { separate: true },
-        {
-          type: ToolbarTypeEnum.SNAPSHOT,
-          icon: 'ion:download-outline',
-          tooltip: '下载',
-        },
-        {
-          type: ToolbarTypeEnum.VIEW_DATA,
-          icon: 'carbon:document-view',
-          tooltip: '查看数据',
-        },
-      ])
-
-      const { logicFlow } = useFlowChartContext()
-
-      function onHistoryChange({ data: { undoAble, redoAble } }) {
-        const itemsList = unref(toolbarItemList)
-        const undoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.UNDO)
-        const redoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.REDO)
-        if (undoIndex !== -1) {
-          unref(toolbarItemList)[undoIndex].disabled = !undoAble
-        }
-        if (redoIndex !== -1) {
-          unref(toolbarItemList)[redoIndex].disabled = !redoAble
-        }
-      }
-
-      const onControl = (item) => {
-        const lf = unref(logicFlow)
-        if (!lf) {
-          return
-        }
-        switch (item.type) {
-          case ToolbarTypeEnum.ZOOM_IN:
-            lf.zoom()
-            break
-          case ToolbarTypeEnum.ZOOM_OUT:
-            lf.zoom(true)
-            break
-          case ToolbarTypeEnum.RESET_ZOOM:
-            lf.resetZoom()
-            break
-          case ToolbarTypeEnum.UNDO:
-            lf.undo()
-            break
-          case ToolbarTypeEnum.REDO:
-            lf.redo()
-            break
-          case ToolbarTypeEnum.SNAPSHOT:
-            lf.getSnapshot()
-            break
-          case ToolbarTypeEnum.VIEW_DATA:
-            emit('view-data')
-            break
-        }
-      }
-
-      watchEffect(async () => {
-        if (unref(logicFlow)) {
-          await nextTick()
-          unref(logicFlow)?.on('history:change', onHistoryChange)
-        }
-      })
-
-      onUnmounted(() => {
-        unref(logicFlow)?.off('history:change', onHistoryChange)
-      })
-      return { toolbarItemList, onControl }
-    },
-  })
-</script>
-<style lang="less">
-  @prefix-cls: ~'@{namespace}-flow-chart-toolbar';
-
-  html[data-theme='dark'] {
-    .lf-dnd {
-      background: #080808;
-    }
-  }
-  .@{prefix-cls} {
-    height: 36px;
-    background-color: @app-content-background;
-    border-bottom: 1px solid @border-color-base;
-
-    .disabeld {
-      color: @disabled-color;
-    }
-
-    &__icon {
-      display: inline-block;
-      padding: 2px 4px;
-      margin-right: 10px;
-
-      &:hover {
-        color: @primary-color;
-      }
-    }
-  }
-</style>
diff --git a/src/components/FlowChart/src/adpterForTurbo.ts b/src/components/FlowChart/src/adpterForTurbo.ts
deleted file mode 100644
index 5104079..0000000
--- a/src/components/FlowChart/src/adpterForTurbo.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-const TurboType = {
-  SEQUENCE_FLOW: 1,
-  START_EVENT: 2,
-  END_EVENT: 3,
-  USER_TASK: 4,
-  SERVICE_TASK: 5,
-  EXCLUSIVE_GATEWAY: 6,
-}
-
-function convertFlowElementToEdge(element) {
-  const { incoming, outgoing, properties, key } = element
-  const { text, startPoint, endPoint, pointsList, logicFlowType } = properties
-  const edge = {
-    id: key,
-    type: logicFlowType,
-    sourceNodeId: incoming[0],
-    targetNodeId: outgoing[0],
-    text,
-    startPoint,
-    endPoint,
-    pointsList,
-    properties: {},
-  }
-  const excludeProperties = ['startPoint', 'endPoint', 'pointsList', 'text', 'logicFlowType']
-  Object.keys(element.properties).forEach((property) => {
-    if (excludeProperties.indexOf(property) === -1) {
-      edge.properties[property] = element.properties[property]
-    }
-  })
-  return edge
-}
-
-function convertFlowElementToNode(element) {
-  const { properties, key } = element
-  const { x, y, text, logicFlowType } = properties
-  const node = {
-    id: key,
-    type: logicFlowType,
-    x,
-    y,
-    text,
-    properties: {},
-  }
-  const excludeProperties = ['x', 'y', 'text', 'logicFlowType']
-  Object.keys(element.properties).forEach((property) => {
-    if (excludeProperties.indexOf(property) === -1) {
-      node.properties[property] = element.properties[property]
-    }
-  })
-  return node
-}
-
-export function toLogicFlowData(data) {
-  const lfData: {
-    // TODO type
-    nodes: any[]
-    edges: any[]
-  } = {
-    nodes: [],
-    edges: [],
-  }
-  const list = data.flowElementList
-  list &&
-    list.length > 0 &&
-    list.forEach((element) => {
-      if (element.type === TurboType.SEQUENCE_FLOW) {
-        const edge = convertFlowElementToEdge(element)
-        lfData.edges.push(edge)
-      } else {
-        const node = convertFlowElementToNode(element)
-        lfData.nodes.push(node)
-      }
-    })
-  return lfData
-}
diff --git a/src/components/FlowChart/src/config.ts b/src/components/FlowChart/src/config.ts
deleted file mode 100644
index 1467cfc..0000000
--- a/src/components/FlowChart/src/config.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-export const nodeList = [
-  {
-    text: '开始',
-    type: 'start',
-    class: 'node-start',
-  },
-  {
-    text: '矩形',
-    type: 'rect',
-    class: 'node-rect',
-  },
-  {
-    type: 'user',
-    text: '用户',
-    class: 'node-user',
-  },
-  {
-    type: 'push',
-    text: '推送',
-    class: 'node-push',
-  },
-  {
-    type: 'download',
-    text: '位置',
-    class: 'node-download',
-  },
-  {
-    type: 'end',
-    text: '结束',
-    class: 'node-end',
-  },
-]
-
-export const BpmnNode = [
-  {
-    type: 'bpmn:startEvent',
-    text: '开始',
-    class: 'bpmn-start',
-  },
-  {
-    type: 'bpmn:endEvent',
-    text: '结束',
-    class: 'bpmn-end',
-  },
-  {
-    type: 'bpmn:exclusiveGateway',
-    text: '网关',
-    class: 'bpmn-exclusiveGateway',
-  },
-  {
-    type: 'bpmn:userTask',
-    text: '用户',
-    class: 'bpmn-user',
-  },
-]
-
-export function configDefaultDndPanel(lf) {
-  return [
-    {
-      text: '选区',
-      icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAOVJREFUOBGtVMENwzAIjKP++2026ETdpv10iy7WFbqFyyW6GBywLCv5gI+Dw2Bluj1znuSjhb99Gkn6QILDY2imo60p8nsnc9bEo3+QJ+AKHfMdZHnl78wyTnyHZD53Zzx73MRSgYvnqgCUHj6gwdck7Zsp1VOrz0Uz8NbKunzAW+Gu4fYW28bUYutYlzSa7B84Fh7d1kjLwhcSdYAYrdkMQVpsBr5XgDGuXwQfQr0y9zwLda+DUYXLaGKdd2ZTtvbolaO87pdo24hP7ov16N0zArH1ur3iwJpXxm+v7oAJNR4JEP8DoAuSFEkYH7cAAAAASUVORK5CYII=',
-      callback: () => {
-        lf.updateEditConfig({
-          stopMoveGraph: true,
-        })
-      },
-    },
-    {
-      type: 'circle',
-      text: '开始',
-      icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAnBJREFUOBGdVL1rU1EcPfdGBddmaZLiEhdx1MHZQXApraCzQ7GKLgoRBxMfcRELuihWKcXFRcEWF8HBf0DdDCKYRZpnl7p0svLe9Zzbd29eQhTbC8nv+9zf130AT63jvooOGS8Vf9Nt5zxba7sXQwODfkWpkbjTQfCGUd9gIp3uuPP8bZ946g56dYQvnBg+b1HB8VIQmMFrazKcKSvFW2dQTxJnJdQ77urmXWOMBCmXM2Rke4S7UAW+/8ywwFoewmBps2tu7mbTdp8VMOkIRAkKfrVawalJTtIliclFbaOBqa0M2xImHeVIfd/nKAfVq/LGnPss5Kh00VEdSzfwnBXPUpmykNss4lUI9C1ga+8PNrBD5YeqRY2Zz8PhjooIbfJXjowvQJBqkmEkVnktWhwu2SM7SMx7Cj0N9IC0oQXRo8xwAGzQms+xrB/nNSUWVveI48ayrFGyC2+E2C+aWrZHXvOuz+CiV6iycWe1Rd1Q6+QUG07nb5SbPrL4426d+9E1axKjY3AoRrlEeSQo2Eu0T6BWAAr6COhTcWjRaYfKG5csnvytvUr/WY4rrPMB53Uo7jZRjXaG6/CFfNMaXEu75nG47X+oepU7PKJvvzGDY1YLSKHJrK7vFUwXKkaxwhCW3u+sDFMVrIju54RYYbFKpALZAo7sB6wcKyyrd+aBMryMT2gPyD6GsQoRFkGHr14TthZni9ck0z+Pnmee460mHXbRAypKNy3nuMdrWgVKj8YVV8E7PSzp1BZ9SJnJAsXdryw/h5ctboUVi4AFiCd+lQaYMw5z3LGTBKjLQOeUF35k89f58Vv/tGh+l+PE/wG0rgfIUbZK5AAAAABJRU5ErkJggg==',
-    },
-    {
-      type: 'rect',
-      text: '用户任务',
-      icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg==',
-      cls: 'important-node',
-    },
-    {
-      type: 'rect',
-      text: '系统任务',
-      icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg==',
-      cls: 'import_icon',
-    },
-    {
-      type: 'diamond',
-      text: '条件判断',
-      icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAAHeEJUAAAAABGdBTUEAALGPC/xhBQAAAvVJREFUOBGNVEFrE0EU/mY3bQoiFlOkaUJrQUQoWMGePLX24EH0IIoHKQiCV0G8iE1covgLiqA/QTzVm1JPogc9tIJYFaQtlhQxqYjSpunu+L7JvmUTU3AgmTfvffPNN++9WSA1DO182f6xwILzD5btfAoQmwL5KJEwiQyVbSVZ0IgRyV6PTpIJ81E5ZvqfHQR0HUOBHW4L5Et2kQ6Zf7iAOhTFAA8s0pEP7AXO1uAA52SbqGk6h/6J45LaLhO64ByfcUzM39V7ZiAdS2yCePPEIQYvTUHqM/n7dgQNfBKWPjpF4ISk8q3J4nB11qw6X8l+FsF3EhlkEMfrjIer3wJTLwS2aCNcj4DbGxXTw00JmAuO+Ni6bBxVUCvS5d9aa04+so4pHW5jLTywuXAL7jJ+D06sl82Sgl2JuVBQn498zkc2bGKxULHjCnSMadBKYDYYHAtsby1EQ5lNGrQd4Y3v4Zo0XdGEmDno46yCM9Tk+RiJmUYHS/aXHPNTcjxcbTFna000PFJHIVZ5lFRqRpJWk9/+QtlOUYJj9HG5pVFEU7zqIYDVsw2s+AJaD8wTd2umgSCCyUxgGsS1Y6TBwXQQTFuZaHcd8gAGioE90hlsY+wMcs30RduYtxanjMGal8H5dMW67dmT1JFtYUEe8LiQLRsPZ6IIc7A4J5tqco3T0pnv/4u0kyzrYUq7gASuEyI8VXKvB9Odytv6jS/PNaZBln0nioJG/AVQRZvApOdhjj3Jt8QC8Im09SafwdBdvIpztpxWxpeKCC+EsFdS8DCyuCn2munFpL7ctHKp+Xc5cMybeIyMAN33SPL3ZR9QV1XVwLyzHm6Iv0/yeUuUb7PPlZC4D4HZkeu6dpF4v9j9MreGtMbxMMRLIcjJic9yHi7WQ3yVKzZVWUr5UrViJvn1FfUlwe/KYVfYyWRLSGNu16hR01U9IacajXPei0wx/5BqgInvJN+MMNtNme7ReU9SBbgntovn0kKHpFg7UogZvaZiOue/q1SBo9ktHzQAAAAASUVORK5CYII=',
-    },
-    {
-      type: 'circle',
-      text: '结束',
-      icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAA1BJREFUOBFtVE1IVUEYPXOf+tq40Y3vPcmFIdSjIorWoRG0ERWUgnb5FwVhYQSl72oUoZAboxKNFtWiwKRN0M+jpfSzqJAQclHo001tKkjl3emc8V69igP3znzfnO/M9zcDcKT67azmjYWTwl9Vn7Vumeqzj1DVb6cleQY4oAVnIOPb+mKAGxQmKI5CWNJ2aLPatxWa3aB9K7/fB+/Z0jUF6TmMlFLQqrkECWQzOZxYGjTlOl8eeKaIY5yHnFn486xBustDjWT6dG7pmjHOJd+33t0iitTPkK6tEvjxq4h2MozQ6WFSX/LkDUGfFwfhEZj1Auz/U4pyAi5Sznd7uKzznXeVHlI/Aywmk6j7fsUsEuCGADrWARXXwjxWQsUbIupDHJI7kF5dRktg0eN81IbiZXiTESic50iwS+t1oJgL83jAiBupLDCQqwziaWSoAFSeIR3P5Xv5az00wyIn35QRYTwdSYbz8pH8fxUUAtxnFvYmEmgI0wYXUXcCCSpeEVpXlsRhBnCEATxWylL9+EKCAYhe1NGstUa6356kS9NVvt3DU2fd+Wtbm/+lSbylJqsqkSm9CRhvoJVlvKPvF1RKY/FcPn5j4UfIMLn8D4UYb54BNsilTDXKnF4CfTobA0FpoW/LSp306wkXM+XaOJhZaFkcNM82ASNAWMrhrUbRfmyeI1FvRBTpN06WKxa9BK0o2E4Pd3zfBBEwPsv9sQBnmLVbLEIZ/Xe9LYwJu/Er17W6HYVBc7vmuk0xUQ+pqxdom5Fnp55SiytXLPYoMXNM4u4SNSCFWnrVIzKG3EGyMXo6n/BQOe+bX3FClY4PwydVhthOZ9NnS+ntiLh0fxtlUJHAuGaFoVmttpVMeum0p3WEXbcll94l1wM/gZ0Ccczop77VvN2I7TlsZCsuXf1WHvWEhjO8DPtyOVg2/mvK9QqboEth+7pD6NUQC1HN/TwvydGBARi9MZSzLE4b8Ru3XhX2PBxf8E1er2A6516o0w4sIA+lwURhAON82Kwe2iDAC1Watq4XHaGQ7skLcFOtI5lDxuM2gZe6WFIotPAhbaeYlU4to5cuarF1QrcZ/lwrLaCJl66JBocYZnrNlvm2+MBCTmUymPrYZVbjdlr/BxlMjmNmNI3SAAAAAElFTkSuQmCC',
-    },
-  ]
-}
diff --git a/src/components/FlowChart/src/enum.ts b/src/components/FlowChart/src/enum.ts
deleted file mode 100644
index 8ea134c..0000000
--- a/src/components/FlowChart/src/enum.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export enum ToolbarTypeEnum {
-  ZOOM_IN = 'zoomIn',
-  ZOOM_OUT = 'zoomOut',
-  RESET_ZOOM = 'resetZoom',
-
-  UNDO = 'undo',
-  REDO = 'redo',
-
-  SNAPSHOT = 'snapshot',
-  VIEW_DATA = 'viewData',
-}
diff --git a/src/components/FlowChart/src/types.ts b/src/components/FlowChart/src/types.ts
deleted file mode 100644
index 5e42aed..0000000
--- a/src/components/FlowChart/src/types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { NodeConfig } from '@logicflow/core'
-import { ToolbarTypeEnum } from './enum'
-
-export interface NodeItem extends NodeConfig {
-  icon: string
-}
-
-export interface ToolbarConfig {
-  type?: string | ToolbarTypeEnum
-  tooltip?: string | boolean
-  icon?: string
-  disabled?: boolean
-  separate?: boolean
-}
diff --git a/src/components/FlowChart/src/useFlowContext.ts b/src/components/FlowChart/src/useFlowContext.ts
deleted file mode 100644
index da348e5..0000000
--- a/src/components/FlowChart/src/useFlowContext.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type LogicFlow from '@logicflow/core'
-
-import { provide, inject } from 'vue'
-
-const key = Symbol('flow-chart')
-
-type Instance = {
-  logicFlow: LogicFlow
-}
-
-export function createFlowChartContext(instance: Instance) {
-  provide(key, instance)
-}
-
-export function useFlowChartContext(): Instance {
-  return inject(key) as Instance
-}
diff --git a/src/views/modules/bpm/instance/Instance.api.ts b/src/views/modules/bpm/instance/Instance.api.ts
index 8e05346..59dd606 100644
--- a/src/views/modules/bpm/instance/Instance.api.ts
+++ b/src/views/modules/bpm/instance/Instance.api.ts
@@ -1,7 +1,7 @@
 import { defHttp } from '/@/utils/http/axios'
 import { BaseEntity } from '/#/web'
 import { PageResult, Result } from '/#/axios'
-import { BpmModelNode } from '/@/views/modules/bpm/model/ModelNode.api'
+import { BpmModelNode } from '/@/views/modules/bpm/model/node/ModelNode.api'
 
 /**
  * 分页
diff --git a/src/views/modules/bpm/model/BpmModelList.vue b/src/views/modules/bpm/model/BpmModelList.vue
index 80728bc..547a33d 100644
--- a/src/views/modules/bpm/model/BpmModelList.vue
+++ b/src/views/modules/bpm/model/BpmModelList.vue
@@ -81,6 +81,7 @@
     </div>
     <bpm-model-edit ref="bpmModelEdit" @ok="queryPage" />
     <bpm-model-node-list ref="bpmModelNodeList" />
+    <bpm-modeler ref="bpmModeler" />
   </div>
 </template>
 
@@ -93,11 +94,12 @@
   import { copy, del, page, publish, verifyModel } from '/@/views/modules/bpm/model/Model.api'
   import BQuery from '/@/components/Bootx/Query/BQuery.vue'
   import { useDict } from '/@/hooks/bootx/useDict'
-  import { PUBLISHED, UNPUBLISHED } from './BpmModelNodeCode'
+  import { PUBLISHED, UNPUBLISHED } from './node/BpmModelNodeCode'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { FormEditType } from '/@/enums/formTypeEnum'
   import BpmModelEdit from './BpmModelEdit.vue'
-  import BpmModelNodeList from './BpmModelNodeList.vue'
+  import BpmModelNodeList from './node/BpmModelNodeList.vue'
+  import BpmModeler from './BpmModeler.vue'
 
   const { handleTableChange, resetQueryParams, pageQueryResHandel, pagination, pages, model, loading } = useTablePage(queryPage)
   const { dictConvert } = useDict()
diff --git a/src/views/modules/bpm/model/BpmModeler.vue b/src/views/modules/bpm/model/BpmModeler.vue
new file mode 100644
index 0000000..1c7d227
--- /dev/null
+++ b/src/views/modules/bpm/model/BpmModeler.vue
@@ -0,0 +1,110 @@
+<template>
+  <basic-modal
+    defaultFullscreen
+    v-bind="$attrs"
+    :width="750"
+    :visible="true"
+  >
+    <process-viewer
+      ref="processViewer"
+      :height="750"
+      :instance="instance"
+      :node-task-list="nodeTaskList"
+      :flow-node-list="flowNodeList"
+      :xml="bpmModel.modelEditorXml"
+    />
+  </basic-modal>
+</template>
+
+<script lang="ts" setup>
+  import ProcessViewer from '/@/components/Bpmn/ProcessViewer.vue'
+  import { $ref } from 'vue/macros'
+  import BasicModal from '/@/components/Modal/src/BasicModal.vue'
+
+  let instance = $ref({
+    id: '1573964159274438656',
+    createTime: '2022-09-25 17:14:33',
+    lastModifiedTime: '2022-09-25 17:14:33',
+    version: 0,
+    instanceId: '1573964159266050048',
+    instanceName: '分支测试[小小明]',
+    modelId: '1570336760533303296',
+    defId: 'lffp56gv:5:1570336922374717440',
+    defName: '分支测试',
+    modelType: null,
+    startUserId: '1399985191002447872',
+    startUserName: '小小明',
+    state: 'running',
+    result: null,
+    startTime: '2022-09-25 17:14:33',
+    endTime: null,
+    formVariables: null,
+  })
+  let nodeTaskList = $ref({
+    tx: [
+      {
+        id: '1573964205348868096',
+        createTime: '2022-09-25 17:14:44',
+        lastModifiedTime: '2022-09-25 17:15:42',
+        version: 1,
+        taskId: '1573964159463182338',
+        executionId: '1573964159458988032',
+        instanceId: '1573964159266050048',
+        instanceName: '分支测试[小小明]',
+        defName: '分支测试',
+        nodeId: 'tx',
+        nodeName: '填写',
+        state: 'running',
+        result: null,
+        reason: null,
+        startTime: '2022-09-25 17:14:33',
+        endTime: null,
+        userId: '1414143554414059520',
+        userName: '小小明1995',
+        startUserId: '1399985191002447872',
+        startUserName: '小小明',
+        formVariables: {},
+      },
+    ],
+  })
+  let flowNodeList = $ref([
+    {
+      activityId: 'Event_05npxwe',
+      activityType: 'startEvent',
+      running: false,
+    },
+    {
+      activityId: 'Flow_1sb4bbn',
+      activityType: 'sequenceFlow',
+      running: false,
+    },
+    {
+      activityId: 'tx',
+      activityType: 'userTask',
+      running: false,
+    },
+  ])
+  let bpmModel = $ref({
+    id: '1570336760533303296',
+    createTime: '2022-09-15 17:00:34',
+    lastModifiedTime: '2022-09-15 17:01:13',
+    version: 1,
+    name: '分支测试',
+    modelType: 'OA',
+    formId: null,
+    publish: 'published',
+    enable: true,
+    deployId: '1570336922060144640',
+    defId: 'lffp56gv:5:1570336922374717440',
+    defKey: 'lffp56gv',
+    defName: '分支测试',
+    defRemark: null,
+    mainProcess: true,
+    processVersion: 5,
+    modelEditorXml:
+      '<?xml version="1.0" encoding="UTF-8"?>\n<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.flowable.org/processdef">\n  <process id="lffp56gv" name="分支测试">\n    <startEvent id="Event_05npxwe">\n      <outgoing>Flow_1sb4bbn</outgoing>\n    </startEvent>\n    <sequenceFlow id="Flow_1sb4bbn" sourceRef="Event_05npxwe" targetRef="tx" />\n    <userTask id="tx" name="填写">\n      <incoming>Flow_1sb4bbn</incoming>\n      <outgoing>Flow_0c60bsu</outgoing>\n    </userTask>\n    <sequenceFlow id="Flow_0c60bsu" sourceRef="tx" targetRef="Gateway_0k9yetc" />\n    <sequenceFlow id="Flow_1l7upty" sourceRef="Gateway_0k9yetc" targetRef="dlb">\n      <conditionExpression xsi:type="tFormalExpression">${nextNode == \'dlb\'}</conditionExpression>\n    </sequenceFlow>\n    <sequenceFlow id="Flow_06lyv1u" sourceRef="Gateway_0k9yetc" targetRef="xlb">\n      <conditionExpression xsi:type="tFormalExpression">${nextNode == \'xlb\'}</conditionExpression>\n    </sequenceFlow>\n    <sequenceFlow id="Flow_0b404pf" sourceRef="dlb" targetRef="Gateway_0y33msz" />\n    <inclusiveGateway id="Gateway_0y33msz">\n      <incoming>Flow_0b404pf</incoming>\n      <incoming>Flow_1vlmw9l</incoming>\n      <outgoing>Flow_1xiiwtx</outgoing>\n    </inclusiveGateway>\n    <sequenceFlow id="Flow_1vlmw9l" sourceRef="xlb" targetRef="Gateway_0y33msz" />\n    <exclusiveGateway id="Gateway_0k9yetc" name="网关">\n      <incoming>Flow_0c60bsu</incoming>\n      <outgoing>Flow_1l7upty</outgoing>\n      <outgoing>Flow_06lyv1u</outgoing>\n    </exclusiveGateway>\n    <sequenceFlow id="Flow_1xiiwtx" sourceRef="Gateway_0y33msz" targetRef="Activity_0c9kfh4" />\n    <endEvent id="Event_0t8uxuu">\n      <incoming>Flow_1tsxjyl</incoming>\n    </endEvent>\n    <sequenceFlow id="Flow_1tsxjyl" sourceRef="Activity_0c9kfh4" targetRef="Event_0t8uxuu" />\n    <userTask id="dlb" name="大老板">\n      <incoming>Flow_1l7upty</incoming>\n      <outgoing>Flow_0b404pf</outgoing>\n    </userTask>\n    <userTask id="xlb" name="小老板">\n      <incoming>Flow_06lyv1u</incoming>\n      <outgoing>Flow_1vlmw9l</outgoing>\n    </userTask>\n    <userTask id="Activity_0c9kfh4" name="备注">\n      <incoming>Flow_1xiiwtx</incoming>\n      <outgoing>Flow_1tsxjyl</outgoing>\n    </userTask>\n  </process>\n  <bpmndi:BPMNDiagram id="BPMNDiagram_flow">\n    <bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="lffp56gv">\n      <bpmndi:BPMNEdge id="Flow_1tsxjyl_di" bpmnElement="Flow_1tsxjyl">\n        <di:waypoint x="370" y="-40" />\n        <di:waypoint x="492" y="-40" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1xiiwtx_di" bpmnElement="Flow_1xiiwtx">\n        <di:waypoint x="155" y="-40" />\n        <di:waypoint x="270" y="-40" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1vlmw9l_di" bpmnElement="Flow_1vlmw9l">\n        <di:waypoint x="-40" y="70" />\n        <di:waypoint x="130" y="70" />\n        <di:waypoint x="130" y="-15" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0b404pf_di" bpmnElement="Flow_0b404pf">\n        <di:waypoint x="-10" y="-180" />\n        <di:waypoint x="130" y="-180" />\n        <di:waypoint x="130" y="-65" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_06lyv1u_di" bpmnElement="Flow_06lyv1u">\n        <di:waypoint x="-220" y="-35" />\n        <di:waypoint x="-220" y="70" />\n        <di:waypoint x="-140" y="70" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1l7upty_di" bpmnElement="Flow_1l7upty">\n        <di:waypoint x="-220" y="-85" />\n        <di:waypoint x="-220" y="-180" />\n        <di:waypoint x="-110" y="-180" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0c60bsu_di" bpmnElement="Flow_0c60bsu">\n        <di:waypoint x="-300" y="-60" />\n        <di:waypoint x="-245" y="-60" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1sb4bbn_di" bpmnElement="Flow_1sb4bbn">\n        <di:waypoint x="-452" y="-60" />\n        <di:waypoint x="-400" y="-60" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNShape id="Event_05npxwe_di" bpmnElement="Event_05npxwe">\n        <dc:Bounds x="-488" y="-78" width="36" height="36" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_06lpzky_di" bpmnElement="tx">\n        <dc:Bounds x="-400" y="-100" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Gateway_0ji3ola_di" bpmnElement="Gateway_0y33msz">\n        <dc:Bounds x="105" y="-65" width="50" height="50" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Gateway_052rzhs_di" bpmnElement="Gateway_0k9yetc" isMarkerVisible="true">\n        <dc:Bounds x="-245" y="-85" width="50" height="50" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="-192" y="-67" width="23" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Event_0t8uxuu_di" bpmnElement="Event_0t8uxuu">\n        <dc:Bounds x="492" y="-58" width="36" height="36" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_03s9cvh_di" bpmnElement="dlb">\n        <dc:Bounds x="-110" y="-220" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_0jagpnz_di" bpmnElement="xlb">\n        <dc:Bounds x="-140" y="30" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_1v7ieyj_di" bpmnElement="Activity_0c9kfh4">\n        <dc:Bounds x="270" y="-80" width="100" height="80" />\n      </bpmndi:BPMNShape>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>\n',
+    remark: '',
+  })
+</script>
+
+<style scoped></style>
diff --git a/src/views/modules/bpm/model/BpmModelNodeCode.ts b/src/views/modules/bpm/model/node/BpmModelNodeCode.ts
similarity index 100%
rename from src/views/modules/bpm/model/BpmModelNodeCode.ts
rename to src/views/modules/bpm/model/node/BpmModelNodeCode.ts
diff --git a/src/views/modules/bpm/model/BpmModelNodeEdit.vue b/src/views/modules/bpm/model/node/BpmModelNodeEdit.vue
similarity index 99%
rename from src/views/modules/bpm/model/BpmModelNodeEdit.vue
rename to src/views/modules/bpm/model/node/BpmModelNodeEdit.vue
index d5e4027..53f96b5 100644
--- a/src/views/modules/bpm/model/BpmModelNodeEdit.vue
+++ b/src/views/modules/bpm/model/node/BpmModelNodeEdit.vue
@@ -117,7 +117,7 @@
     USER_GROUP,
     USER,
     ROLE,
-  } from '/@/views/modules/bpm/model/BpmModelNodeCode'
+  } from '/@/views/modules/bpm/model/node/BpmModelNodeCode'
   import BUserSelectModal from '/@/components/Bootx/UserSelectModal/BUserSelectModal.vue'
   import BRoleSelectModal from '/@/components/Bootx/RoleSelectModal/BRoleSelectModal.vue'
   import { UserInfo } from '/@/views/modules/system/user/User.api'
diff --git a/src/views/modules/bpm/model/BpmModelNodeList.vue b/src/views/modules/bpm/model/node/BpmModelNodeList.vue
similarity index 97%
rename from src/views/modules/bpm/model/BpmModelNodeList.vue
rename to src/views/modules/bpm/model/node/BpmModelNodeList.vue
index 4b08da0..6033f9c 100644
--- a/src/views/modules/bpm/model/BpmModelNodeList.vue
+++ b/src/views/modules/bpm/model/node/BpmModelNodeList.vue
@@ -51,8 +51,8 @@
   import { useMessage } from '/@/hooks/web/useMessage'
   import { useDict } from '/@/hooks/bootx/useDict'
   import { $ref } from 'vue/macros'
-  import { BpmModel } from './Model.api'
-  import { PUBLISHED } from '/@/views/modules/bpm/model/BpmModelNodeCode'
+  import { BpmModel } from '../Model.api'
+  import { PUBLISHED } from '/@/views/modules/bpm/model/node/BpmModelNodeCode'
   import { BpmModelNode, del, listByModelId, sync } from './ModelNode.api'
   import BpmModelNodeEdit from './BpmModelNodeEdit.vue'
   import { FormEditType } from '/@/enums/formTypeEnum'
diff --git a/src/views/modules/bpm/model/ModelNode.api.ts b/src/views/modules/bpm/model/node/ModelNode.api.ts
similarity index 100%
rename from src/views/modules/bpm/model/ModelNode.api.ts
rename to src/views/modules/bpm/model/node/ModelNode.api.ts
diff --git a/src/views/modules/develop/query/QuerySql.api.ts b/src/views/modules/develop/query/QuerySql.api.ts
new file mode 100644
index 0000000..4d60613
--- /dev/null
+++ b/src/views/modules/develop/query/QuerySql.api.ts
@@ -0,0 +1,82 @@
+import { defHttp } from '/@/utils/http/axios'
+import { PageResult, Result } from '/#/axios'
+import { BaseEntity } from '/#/web'
+
+/**
+ * 分页
+ */
+export function page(params) {
+  return defHttp.get<Result<PageResult<QuerySql>>>({
+    url: '/query/sql/page',
+    params,
+  })
+}
+
+/**
+ * 查询全部
+ */
+export function findAll() {
+  return defHttp.get<Result<QuerySql[]>>({
+    url: '/query/sql/findAll',
+  })
+}
+
+/**
+ * 获取单条
+ */
+export function get(id) {
+  return defHttp.get<Result<QuerySql>>({
+    url: '/query/sql/findById',
+    params: { id },
+  })
+}
+
+/**
+ * 添加
+ */
+export function add(obj: QuerySql) {
+  return defHttp.post({
+    url: '/query/sql/add',
+    data: obj,
+  })
+}
+
+/**
+ * 更新
+ */
+export function update(obj: QuerySql) {
+  return defHttp.post({
+    url: '/query/sql/update',
+    data: obj,
+  })
+}
+
+/**
+ * 删除
+ */
+export function del(id) {
+  return defHttp.delete({
+    url: '/query/sql/delete',
+    params: { id },
+  })
+}
+
+/**
+ * SQL查询语句
+ */
+export interface QuerySql extends BaseEntity {
+  // 数据源ID
+  databaseId?: string
+  // 名称
+  name?: string
+  // sql语句
+  sql?: string
+  // 是否集合
+  isList?: boolean
+  // SQL查询参数
+  params?: string
+  // SQL查询结果字段
+  fields?: string
+  // 备注
+  remark?: string
+}
diff --git a/src/views/modules/develop/query/QuerySqlEdit.vue b/src/views/modules/develop/query/QuerySqlEdit.vue
new file mode 100644
index 0000000..485c59c
--- /dev/null
+++ b/src/views/modules/develop/query/QuerySqlEdit.vue
@@ -0,0 +1,133 @@
+<template>
+  <basic-modal
+    defaultFullscreen
+    v-bind="$attrs"
+    :loading="confirmLoading"
+    :title="title"
+    :width="modalWidth"
+    :visible="visible"
+    :mask-closable="showable"
+    @cancel="handleCancel"
+  >
+    <a-form
+      class="small-from-item"
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :validate-trigger="['blur', 'change']"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+    >
+      <a-form-item label="主键" :hidden="true">
+        <a-input v-model:value="form.id" :disabled="showable" />
+      </a-form-item>
+      <a-form-item label="数据源ID" name="databaseId">
+        <a-input v-model:value="form.databaseId" :disabled="showable" placeholder="请输入数据源ID" />
+      </a-form-item>
+      <a-form-item label="名称" name="name">
+        <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入名称" />
+      </a-form-item>
+      <a-form-item label="sql语句" name="sql">
+        <a-input v-model:value="form.sql" :disabled="showable" placeholder="请输入sql语句" />
+      </a-form-item>
+      <a-form-item label="是否集合" name="isList">
+        <a-input v-model:value="form.isList" :disabled="showable" placeholder="请输入是否集合" />
+      </a-form-item>
+      <a-form-item label="SQL查询参数" name="params">
+        <a-input v-model:value="form.params" :disabled="showable" placeholder="请输入SQL查询参数" />
+      </a-form-item>
+      <a-form-item label="SQL查询结果字段" name="fields">
+        <a-input v-model:value="form.fields" :disabled="showable" placeholder="请输入SQL查询结果字段" />
+      </a-form-item>
+    </a-form>
+    <template #footer>
+      <a-space>
+        <a-button key="cancel" @click="handleCancel">取消</a-button>
+        <a-button v-if="!showable" key="forward" :loading="confirmLoading" type="primary" @click="handleOk">保存</a-button>
+      </a-space>
+    </template>
+  </basic-modal>
+</template>
+
+<script lang="ts" setup>
+  import { nextTick, reactive } from 'vue'
+  import { $ref } from 'vue/macros'
+  import useFormEdit from '/@/hooks/bootx/useFormEdit'
+  import { add, get, update, QuerySql } from './QuerySql.api'
+  import { FormInstance, Rule } from 'ant-design-vue/lib/form'
+  import { FormEditType } from '/@/enums/formTypeEnum'
+  import { BasicModal } from '/@/components/Modal'
+  const {
+    initFormEditType,
+    handleCancel,
+    search,
+    labelCol,
+    wrapperCol,
+    modalWidth,
+    title,
+    confirmLoading,
+    visible,
+    editable,
+    showable,
+    formEditType,
+  } = useFormEdit()
+  // 表单
+  const formRef = $ref<FormInstance>()
+  let form = $ref<QuerySql>({
+    id: null,
+    databaseId: undefined,
+    name: '',
+    sql: '',
+    isList: false,
+    params: undefined,
+    fields: undefined,
+  })
+  // 校验
+  const rules = reactive({} as Record<string, Rule[]>)
+  // 事件
+  const emits = defineEmits(['ok'])
+  // 入口
+  function init(id, editType: FormEditType) {
+    initFormEditType(editType)
+    resetForm()
+    getInfo(id, editType)
+  }
+  // 获取信息
+  function getInfo(id, editType: FormEditType) {
+    if ([FormEditType.Edit, FormEditType.Show].includes(editType)) {
+      confirmLoading.value = true
+      get(id).then(({ data }) => {
+        form = data
+        confirmLoading.value = false
+      })
+    } else {
+      confirmLoading.value = false
+    }
+  }
+  // 保存
+  function handleOk() {
+    formRef?.validate().then(async () => {
+      confirmLoading.value = true
+      if (formEditType.value === FormEditType.Add) {
+        await add(form)
+      } else if (formEditType.value === FormEditType.Edit) {
+        await update(form)
+      }
+      confirmLoading.value = false
+      handleCancel()
+      emits('ok')
+    })
+  }
+
+  // 重置表单
+  function resetForm() {
+    nextTick(() => {
+      formRef?.resetFields()
+    })
+  }
+  defineExpose({
+    init,
+  })
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/modules/develop/query/QuerySqlList.vue b/src/views/modules/develop/query/QuerySqlList.vue
new file mode 100644
index 0000000..83244ae
--- /dev/null
+++ b/src/views/modules/develop/query/QuerySqlList.vue
@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <div class="m-3 p-3 pt-5 bg-white">
+      <b-query :query-params="model.queryParam" :fields="fields" @query="queryPage" @reset="resetQueryParams" />
+    </div>
+    <div class="m-3 p-3 bg-white">
+      <vxe-toolbar ref="xToolbar" custom :refresh="{ query: queryPage }">
+        <template #buttons>
+          <a-space>
+            <a-button type="primary" pre-icon="ant-design:plus-outlined" @click="add">新建</a-button>
+          </a-space>
+        </template>
+      </vxe-toolbar>
+      <vxe-table row-id="id" ref="xTable" :data="pagination.records" :loading="loading">
+        <vxe-column type="seq" width="60" />
+        <vxe-column field="databaseId" title="数据源ID" />
+        <vxe-column field="name" title="名称" />
+        <vxe-column field="sql" title="sql语句" />
+        <vxe-column field="isList" title="是否集合">
+          <template #default="{ row }">
+            <a-tag>{{ row.isList ? '是' : '否' }}</a-tag>
+          </template>
+        </vxe-column>
+        <vxe-column field="remark" title="备注" />
+        <vxe-column field="createTime" title="创建时间" />
+        <vxe-column fixed="right" width="220" :showOverflow="false" title="操作">
+          <template #default="{ row }">
+            <span>
+              <a-link @click="show(row)">查看</a-link>
+            </span>
+            <a-divider type="vertical" />
+            <span>
+              <a-link @click="edit(row)">编辑</a-link>
+            </span>
+            <span>
+              <a-link @click="edit(row)">测试</a-link>
+            </span>
+            <a-divider type="vertical" />
+            <a-popconfirm title="是否删除" @confirm="remove(row)" okText="是" cancelText="否">
+              <a-link danger>删除</a-link>
+            </a-popconfirm>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <vxe-pager
+        size="medium"
+        :loading="loading"
+        :current-page="pagination.current"
+        :page-size="pagination.size"
+        :total="pagination.total"
+        @page-change="handleTableChange"
+      />
+      <query-sql-edit ref="querySqlEdit" @ok="queryPage" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted } from 'vue'
+  import { $ref } from 'vue/macros'
+  import { del, page } from './QuerySql.api'
+  import useTablePage from '/@/hooks/bootx/useTablePage'
+  import QuerySqlEdit from './QuerySqlEdit.vue'
+  import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
+  import BQuery from '/@/components/Bootx/Query/BQuery.vue'
+  import { FormEditType } from '/@/enums/formTypeEnum'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { QueryField } from '/@/components/Bootx/Query/Query'
+
+  // 使用hooks
+  const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
+  const { notification, createMessage, createConfirm } = useMessage()
+
+  // 查询条件
+  const fields = [] as QueryField[]
+
+  const xTable = $ref<VxeTableInstance>()
+  const xToolbar = $ref<VxeToolbarInstance>()
+  const querySqlEdit = $ref<any>()
+
+  onMounted(() => {
+    vxeBind()
+    queryPage()
+  })
+  function vxeBind() {
+    xTable?.connect(xToolbar as VxeToolbarInstance)
+  }
+
+  // 分页查询
+  function queryPage() {
+    loading.value = true
+    page({
+      ...model.queryParam,
+      ...pages,
+    }).then(({ data }) => {
+      pageQueryResHandel(data)
+    })
+  }
+  // 新增
+  function add() {
+    querySqlEdit.init(null, FormEditType.Add)
+  }
+  // 编辑
+  function edit(record) {
+    querySqlEdit.init(record.id, FormEditType.Edit)
+  }
+  // 查看
+  function show(record) {
+    querySqlEdit.init(record.id, FormEditType.Show)
+  }
+
+  // 删除
+  function remove(record) {
+    del(record.id).then(() => {
+      createMessage.success('删除成功')
+      queryPage()
+    })
+    }
+</script>
+
+<style lang="less" scoped></style>
diff --git a/yarn.lock b/yarn.lock
index e4699c4..76a7918 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1324,24 +1324,6 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@logicflow/core@^1.1.13", "@logicflow/core@^1.1.21":
-  version "1.1.21"
-  resolved "https://registry.npmmirror.com/@logicflow/core/-/core-1.1.21.tgz#80f3651a9559e7bf90631814f5cd3fe61e543e7a"
-  integrity sha512-LfFnHV009HhozPSWyFlLwsIsEXniFtjJKHGxQVxzRDwKqsgBOUBwyCTbDgejTIc4fw0zaINYhG5YRFSPGsDzWQ==
-  dependencies:
-    "@types/mousetrap" "^1.6.4"
-    mousetrap "^1.6.5"
-    preact "^10.4.8"
-
-"@logicflow/extension@^1.1.13":
-  version "1.1.21"
-  resolved "https://registry.npmmirror.com/@logicflow/extension/-/extension-1.1.21.tgz#efa91c2fe6712568270e222ff7b73859caf09d45"
-  integrity sha512-jUrChV89BC7QsyejGt3tIWX9/EGI/Rh+LFsht0OZDafgabk4D99D3J8Glg1UC/unh9dOUNDoD3Hs3xaO8gDBzg==
-  dependencies:
-    "@logicflow/core" "^1.1.21"
-    ids "^1.0.0"
-    preact "^10.4.8"
-
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -1750,11 +1732,6 @@
   resolved "https://registry.npmmirror.com/@types/mockjs/-/mockjs-1.0.6.tgz#dafdd5de65156f7aa63eab4e29fa3d532cd95609"
   integrity sha512-Yu5YlqbYZyqsd6LjO4e8ONJDN9pTSnciHDcRP4teNOh/au2b8helFhgRx+3w8xsTFEnwr9jtfTVJbAx+eYmlHA==
 
-"@types/mousetrap@^1.6.4":
-  version "1.6.9"
-  resolved "https://registry.npmmirror.com/@types/mousetrap/-/mousetrap-1.6.9.tgz#f1ef9adbd1eac3466f21b6988b1c82c633a45340"
-  integrity sha512-HUAiN65VsRXyFCTicolwb5+I7FM6f72zjMWr+ajGk+YTvzBgXqa2A5U7d+rtsouAkunJ5U4Sb5lNJjo9w+nmXg==
-
 "@types/node@*", "@types/node@>=12":
   version "18.0.3"
   resolved "https://registry.npmmirror.com/@types/node/-/node-18.0.3.tgz#463fc47f13ec0688a33aec75d078a0541a447199"
@@ -3107,11 +3084,6 @@ chardet@^0.7.0:
   resolved "https://registry.npmmirror.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-china-area-data@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.npmmirror.com/china-area-data/-/china-area-data-5.0.1.tgz#7943b83a0619f033bb5893da80cb46e52e44be66"
-  integrity sha512-BQDPpiv5Nn+018ekcJK2oSD9PAD+E1bvXB0wgabc//dFVS/KvRqCgg0QOEUt3vBkx9XzB5a9BmkJCEZDBxVjVw==
-
 "chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.2:
   version "3.5.3"
   resolved "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
@@ -7126,11 +7098,6 @@ modify-values@^1.0.0:
   resolved "https://registry.npmmirror.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
   integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
 
-mousetrap@^1.6.5:
-  version "1.6.5"
-  resolved "https://registry.npmmirror.com/mousetrap/-/mousetrap-1.6.5.tgz#8a766d8c272b08393d5f56074e0b5ec183485bf9"
-  integrity sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==
-
 mozjpeg@^7.0.0:
   version "7.1.1"
   resolved "https://registry.npmmirror.com/mozjpeg/-/mozjpeg-7.1.1.tgz#dfb61953536e66fcabd4ae795e7a312d42a51f18"
@@ -7943,11 +7910,6 @@ posthtml@^0.9.2:
     posthtml-parser "^0.2.0"
     posthtml-render "^1.0.5"
 
-preact@^10.4.8:
-  version "10.9.0"
-  resolved "https://registry.npmmirror.com/preact/-/preact-10.9.0.tgz#69b282b26926b66481c9ae3450cf68610fee29ff"
-  integrity sha512-jO6/OvCRL+OT8gst/+Q2ir7dMybZAX8ioP02Zmzh3BkQMHLyqZSujvxbUriXvHi8qmhcHKC2Gwbog6Kt+YTh+Q==
-
 preact@^10.5.13:
   version "10.11.3"
   resolved "https://registry.npmmirror.com/preact/-/preact-10.11.3.tgz#8a7e4ba19d3992c488b0785afcc0f8aa13c78d19"
-- 
Gitee


From 7d215db3332a3aaf8da08db00660cd8c52e6dcce Mon Sep 17 00:00:00 2001
From: xxm1995 <xxm1995@outlook.com>
Date: Tue, 14 Mar 2023 20:26:39 +0800
Subject: [PATCH 18/28] =?UTF-8?q?fix=20=E6=B5=81=E7=A8=8B=E5=9B=BE?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E5=99=A8=E4=B8=8D=E6=98=BE=E7=A4=BA=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +-
 src/components/Bpmn/ProcessViewer.vue         | 70 ++++++++-----
 src/views/modules/bpm/model/BpmModeler.vue    | 16 +--
 .../bpm/model/node/BpmModelNodeEdit.vue       |  4 +-
 yarn.lock                                     | 98 +++++++++++--------
 5 files changed, 114 insertions(+), 76 deletions(-)

diff --git a/package.json b/package.json
index e0c9beb..0d61832 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@zxcvbn-ts/core": "^2.0.1",
     "ant-design-vue": "^3.2.15",
     "axios": "^0.26.1",
-    "bpmn-js": "^10.3.0",
+    "bpmn-js": "^11.5.0",
     "codemirror": "^5.65.3",
     "cron-parser": "^4.6.0",
     "cropperjs": "^1.5.12",
diff --git a/src/components/Bpmn/ProcessViewer.vue b/src/components/Bpmn/ProcessViewer.vue
index a20528c..10cc1de 100644
--- a/src/components/Bpmn/ProcessViewer.vue
+++ b/src/components/Bpmn/ProcessViewer.vue
@@ -3,18 +3,18 @@
     <a-layout style="height: 100%">
       <a-layout style="align-items: stretch">
         <div ref="canvas" class="canvas" :style="{ minHeight: height + 'px' }"></div>
-<!--        <a-drawer :visible="drawerVisible" title="流程信息" :width="450" placement="right" :closable="true" @close="drawerVisible = false">-->
-<!--          <a-timeline>-->
-<!--            <a-timeline-item v-for="o in currentTaskList" :key="o.id">-->
-<!--              <p>开始时间: {{ o.startTime }}</p>-->
-<!--              <p>状态：{{ stateNameConvert(o.state) }}</p>-->
-<!--              <p>处理结果：{{ dictConvert('BpmTaskResult', o.result) }}</p>-->
-<!--              <p>处理人: {{ o.userName }}</p>-->
-<!--              <p>结束时间: {{ o.endTime ? o.endTime : '' }}</p>-->
-<!--              <p>审批意见：{{ o.reason ? o.reason : '' }}</p>-->
-<!--            </a-timeline-item>-->
-<!--          </a-timeline>-->
-<!--        </a-drawer>-->
+        <!--        <a-drawer :visible="drawerVisible" title="流程信息" :width="450" placement="right" :closable="true" @close="drawerVisible = false">-->
+        <!--          <a-timeline>-->
+        <!--            <a-timeline-item v-for="o in currentTaskList" :key="o.id">-->
+        <!--              <p>开始时间: {{ o.startTime }}</p>-->
+        <!--              <p>状态：{{ stateNameConvert(o.state) }}</p>-->
+        <!--              <p>处理结果：{{ dictConvert('BpmTaskResult', o.result) }}</p>-->
+        <!--              <p>处理人: {{ o.userName }}</p>-->
+        <!--              <p>结束时间: {{ o.endTime ? o.endTime : '' }}</p>-->
+        <!--              <p>审批意见：{{ o.reason ? o.reason : '' }}</p>-->
+        <!--            </a-timeline-item>-->
+        <!--          </a-timeline>-->
+        <!--        </a-drawer>-->
         <a-layout-sider
           class="sider"
           style="
@@ -64,20 +64,35 @@
         element: null,
         drawerVisible: false,
         currentTaskList: [],
+        cs: 1,
       }
     },
     watch: {
-      xml: function (val) {
+      cs(val) {
         if (val) {
-          this.createDiagram()
         }
       },
-      flowNodeList: function (val) {
+      xml: {
+        handler(newQuestion) {
+          // 在组件实例创建时会立即调用
+          console.log(newQuestion)
+          this.createDiagram()
+        },
+      },
+      // xml(val) {
+      //   console.log(1)
+      //   if (val) {
+      //     this.createDiagram()
+      //   }
+      // },
+      flowNodeList(val) {
+        console.log(2)
         if (val) {
           this.createDiagram()
         }
       },
-      nodeTaskList: function (val) {
+      nodeTaskList(val) {
+        console.log(3)
         if (val) {
           this.createDiagram()
         }
@@ -86,32 +101,33 @@
     mounted() {
       this.initModeler()
       this.initEventBind()
+      setInterval(() => {
+        this.cs++
+      }, 2000)
     },
     methods: {
       /**
        * 生成实例
        */
       initModeler() {
-        console.log(this.$refs.canvas)
         this.modeler = new Modeler({
           container: this.$refs.canvas,
           additionalModules: [
             {
               translate: ['value', customTranslate],
-              // paletteProvider: ['value', ''], // 禁用/清空左侧工具栏
-              // labelEditingProvider: ['value', ''], // 禁用节点编辑
-              // contextPadProvider: ['value', ''], // 禁用图形菜单
-              // bendpoints: ['value', {}], // 禁用连线拖动
-              // zoomScroll: ['value', ''], // 禁用滚动
-              // moveCanvas: ['value', ''], // 禁用拖动整个流程图
+              paletteProvider: ['value', ''], // 禁用/清空左侧工具栏
+              labelEditingProvider: ['value', ''], // 禁用节点编辑
+              contextPadProvider: ['value', ''], // 禁用图形菜单
+              bendpoints: ['value', {}], // 禁用连线拖动
+              zoomScroll: ['value', ''], // 禁用滚动
+              moveCanvas: ['value', ''], // 禁用拖动整个流程图
               move: ['value', ''], // 禁用单个图形拖动
             },
           ],
-          // moddleExtensions: {
-          //   flowable: flowableModdle,
-          // },
+          moddleExtensions: {
+            flowable: flowableModdle,
+          },
         })
-        console.log(this.modeler)
       },
       /**
        * 创建流程图
diff --git a/src/views/modules/bpm/model/BpmModeler.vue b/src/views/modules/bpm/model/BpmModeler.vue
index 1c7d227..fb500c5 100644
--- a/src/views/modules/bpm/model/BpmModeler.vue
+++ b/src/views/modules/bpm/model/BpmModeler.vue
@@ -1,10 +1,5 @@
 <template>
-  <basic-modal
-    defaultFullscreen
-    v-bind="$attrs"
-    :width="750"
-    :visible="true"
-  >
+  <basic-modal defaultFullscreen v-bind="$attrs" :width="750" :visible="visible" @cancel="visible = false">
     <process-viewer
       ref="processViewer"
       :height="750"
@@ -105,6 +100,15 @@
       '<?xml version="1.0" encoding="UTF-8"?>\n<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.flowable.org/processdef">\n  <process id="lffp56gv" name="分支测试">\n    <startEvent id="Event_05npxwe">\n      <outgoing>Flow_1sb4bbn</outgoing>\n    </startEvent>\n    <sequenceFlow id="Flow_1sb4bbn" sourceRef="Event_05npxwe" targetRef="tx" />\n    <userTask id="tx" name="填写">\n      <incoming>Flow_1sb4bbn</incoming>\n      <outgoing>Flow_0c60bsu</outgoing>\n    </userTask>\n    <sequenceFlow id="Flow_0c60bsu" sourceRef="tx" targetRef="Gateway_0k9yetc" />\n    <sequenceFlow id="Flow_1l7upty" sourceRef="Gateway_0k9yetc" targetRef="dlb">\n      <conditionExpression xsi:type="tFormalExpression">${nextNode == \'dlb\'}</conditionExpression>\n    </sequenceFlow>\n    <sequenceFlow id="Flow_06lyv1u" sourceRef="Gateway_0k9yetc" targetRef="xlb">\n      <conditionExpression xsi:type="tFormalExpression">${nextNode == \'xlb\'}</conditionExpression>\n    </sequenceFlow>\n    <sequenceFlow id="Flow_0b404pf" sourceRef="dlb" targetRef="Gateway_0y33msz" />\n    <inclusiveGateway id="Gateway_0y33msz">\n      <incoming>Flow_0b404pf</incoming>\n      <incoming>Flow_1vlmw9l</incoming>\n      <outgoing>Flow_1xiiwtx</outgoing>\n    </inclusiveGateway>\n    <sequenceFlow id="Flow_1vlmw9l" sourceRef="xlb" targetRef="Gateway_0y33msz" />\n    <exclusiveGateway id="Gateway_0k9yetc" name="网关">\n      <incoming>Flow_0c60bsu</incoming>\n      <outgoing>Flow_1l7upty</outgoing>\n      <outgoing>Flow_06lyv1u</outgoing>\n    </exclusiveGateway>\n    <sequenceFlow id="Flow_1xiiwtx" sourceRef="Gateway_0y33msz" targetRef="Activity_0c9kfh4" />\n    <endEvent id="Event_0t8uxuu">\n      <incoming>Flow_1tsxjyl</incoming>\n    </endEvent>\n    <sequenceFlow id="Flow_1tsxjyl" sourceRef="Activity_0c9kfh4" targetRef="Event_0t8uxuu" />\n    <userTask id="dlb" name="大老板">\n      <incoming>Flow_1l7upty</incoming>\n      <outgoing>Flow_0b404pf</outgoing>\n    </userTask>\n    <userTask id="xlb" name="小老板">\n      <incoming>Flow_06lyv1u</incoming>\n      <outgoing>Flow_1vlmw9l</outgoing>\n    </userTask>\n    <userTask id="Activity_0c9kfh4" name="备注">\n      <incoming>Flow_1xiiwtx</incoming>\n      <outgoing>Flow_1tsxjyl</outgoing>\n    </userTask>\n  </process>\n  <bpmndi:BPMNDiagram id="BPMNDiagram_flow">\n    <bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="lffp56gv">\n      <bpmndi:BPMNEdge id="Flow_1tsxjyl_di" bpmnElement="Flow_1tsxjyl">\n        <di:waypoint x="370" y="-40" />\n        <di:waypoint x="492" y="-40" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1xiiwtx_di" bpmnElement="Flow_1xiiwtx">\n        <di:waypoint x="155" y="-40" />\n        <di:waypoint x="270" y="-40" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1vlmw9l_di" bpmnElement="Flow_1vlmw9l">\n        <di:waypoint x="-40" y="70" />\n        <di:waypoint x="130" y="70" />\n        <di:waypoint x="130" y="-15" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0b404pf_di" bpmnElement="Flow_0b404pf">\n        <di:waypoint x="-10" y="-180" />\n        <di:waypoint x="130" y="-180" />\n        <di:waypoint x="130" y="-65" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_06lyv1u_di" bpmnElement="Flow_06lyv1u">\n        <di:waypoint x="-220" y="-35" />\n        <di:waypoint x="-220" y="70" />\n        <di:waypoint x="-140" y="70" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1l7upty_di" bpmnElement="Flow_1l7upty">\n        <di:waypoint x="-220" y="-85" />\n        <di:waypoint x="-220" y="-180" />\n        <di:waypoint x="-110" y="-180" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0c60bsu_di" bpmnElement="Flow_0c60bsu">\n        <di:waypoint x="-300" y="-60" />\n        <di:waypoint x="-245" y="-60" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1sb4bbn_di" bpmnElement="Flow_1sb4bbn">\n        <di:waypoint x="-452" y="-60" />\n        <di:waypoint x="-400" y="-60" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNShape id="Event_05npxwe_di" bpmnElement="Event_05npxwe">\n        <dc:Bounds x="-488" y="-78" width="36" height="36" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_06lpzky_di" bpmnElement="tx">\n        <dc:Bounds x="-400" y="-100" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Gateway_0ji3ola_di" bpmnElement="Gateway_0y33msz">\n        <dc:Bounds x="105" y="-65" width="50" height="50" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Gateway_052rzhs_di" bpmnElement="Gateway_0k9yetc" isMarkerVisible="true">\n        <dc:Bounds x="-245" y="-85" width="50" height="50" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="-192" y="-67" width="23" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Event_0t8uxuu_di" bpmnElement="Event_0t8uxuu">\n        <dc:Bounds x="492" y="-58" width="36" height="36" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_03s9cvh_di" bpmnElement="dlb">\n        <dc:Bounds x="-110" y="-220" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_0jagpnz_di" bpmnElement="xlb">\n        <dc:Bounds x="-140" y="30" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_1v7ieyj_di" bpmnElement="Activity_0c9kfh4">\n        <dc:Bounds x="270" y="-80" width="100" height="80" />\n      </bpmndi:BPMNShape>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>\n',
     remark: '',
   })
+
+  let visible = $ref(false)
+
+  function init(id, isView: boolean) {
+    visible = true
+  }
+  defineExpose({
+    init,
+  })
 </script>
 
 <style scoped></style>
diff --git a/src/views/modules/bpm/model/node/BpmModelNodeEdit.vue b/src/views/modules/bpm/model/node/BpmModelNodeEdit.vue
index 53f96b5..9bbfeee 100644
--- a/src/views/modules/bpm/model/node/BpmModelNodeEdit.vue
+++ b/src/views/modules/bpm/model/node/BpmModelNodeEdit.vue
@@ -70,13 +70,13 @@
       </a-form-item>
       <a-form-item label="分配角色" prop="assignShow" v-if="[ROLE].includes(form.assignType)">
         <template #label>
-          <apan>
+          <span>
             分配角色
             <a-tooltip v-if="!form.multi">
               <template #title>如果角色关联多个用户只会从中随机抽选一个</template>
               <icon icon="ant-design:question-circle-outlined" />
             </a-tooltip>
-          </apan>
+          </span>
         </template>
         <a-input v-model:value="form.assignShow" placeholder="请选择角色" disabled>
           <template #addonAfter>
diff --git a/yarn.lock b/yarn.lock
index 76a7918..a6e37eb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -974,6 +974,14 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
+"@bpmn-io/diagram-js-ui@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.npmmirror.com/@bpmn-io/diagram-js-ui/-/diagram-js-ui-0.2.2.tgz#f182476e820641901c10d0079dcfe7b5b022b9f6"
+  integrity sha512-IgOIxOwoqsFB2mMPdXtcbPVPjdYkZ3huW7ipowYLhg5jdRGHlBronQ+LER+lfWro6sPtzEsw7qX8D8Yq9M2S5g==
+  dependencies:
+    htm "^3.1.1"
+    preact "^10.11.2"
+
 "@commitlint/cli@^16.2.3":
   version "16.3.0"
   resolved "https://registry.npmmirror.com/@commitlint/cli/-/cli-16.3.0.tgz#5689f5c2abbb7880d5ff13329251e5648a784b16"
@@ -2792,26 +2800,25 @@ boolbase@^1.0.0:
   resolved "https://registry.npmmirror.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
-bpmn-js@^10.3.0:
-  version "10.3.0"
-  resolved "https://registry.npmmirror.com/bpmn-js/-/bpmn-js-10.3.0.tgz#631f8f35f6fce4e78b6025ec325a8eb7ccf9aad8"
-  integrity sha512-6tO5SHt5YyxgX9lRAAwYNmtSum4ZAekP6S0kdDlmh2ztDRAjUZaq7n1Q1ORzTddpngviRZyf5ssP1ZqjE6CgUQ==
+bpmn-js@^11.5.0:
+  version "11.5.0"
+  resolved "https://registry.npmmirror.com/bpmn-js/-/bpmn-js-11.5.0.tgz#0f8a896637a3335173c1734e52d40ed8b5abf651"
+  integrity sha512-Bdj53UvfiDtGE1wmiBmpgjl5RMLhCGV/C841dyC+t4kBHj7vApAeeHs2Qiycj390HO4B2U8UDROLT7yjdXEEUA==
   dependencies:
     bpmn-moddle "^8.0.0"
-    css.escape "^1.5.1"
-    diagram-js "^10.0.0"
+    diagram-js "^11.9.1"
     diagram-js-direct-editing "^2.0.0"
     ids "^1.0.0"
     inherits-browser "^0.1.0"
     min-dash "^4.0.0"
-    min-dom "^4.0.2"
+    min-dom "^4.0.3"
     object-refs "^0.3.0"
     tiny-svg "^3.0.0"
 
 bpmn-moddle@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.npmmirror.com/bpmn-moddle/-/bpmn-moddle-8.0.0.tgz#bb6da18f78bb4ec5abe1b5b995c950d16548e3e4"
-  integrity sha512-mHmtIVzUyZcPMKKl/REq151gYxEtZxvivKnIEp/RtuRm8SOgxAK58uYBkP+jQQBy6XudwObRTH0pwyeKLALWrA==
+  version "8.0.1"
+  resolved "https://registry.npmmirror.com/bpmn-moddle/-/bpmn-moddle-8.0.1.tgz#ba8a009fbd354fb521a11a1dd1417655a9d2ec02"
+  integrity sha512-mwZcrWhi52+JH5Oq58WwKYcUxQ1ZMiDQuzt1bpqiqEEFFnQLqCgtLwEXQuDXFmAuQPdMAghyPzqdOZQqIQVesw==
   dependencies:
     min-dash "^4.0.0"
     moddle "^6.0.0"
@@ -3196,6 +3203,11 @@ clone@^2.1.1:
   resolved "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
 
+clsx@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmmirror.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 codemirror@^5.65.3:
   version "5.65.6"
   resolved "https://registry.npmmirror.com/codemirror/-/codemirror-5.65.6.tgz#fc313797331cbeb3bcab0652d1ec9d0f40c23ab5"
@@ -3286,10 +3298,10 @@ component-emitter@^1.2.1:
   resolved "https://registry.npmmirror.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
   integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
 
-component-event@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.npmmirror.com/component-event/-/component-event-0.1.4.tgz#3de78fc28782381787e24bf2a7c536bf0142c9b4"
-  integrity sha512-GMwOG8MnUHP1l8DZx1ztFO0SJTFnIzZnBDkXAj8RM2ntV2A6ALlDxgbMY1Fvxlg6WPQ+5IM/a6vg4PEYbjg/Rw==
+component-event@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.npmmirror.com/component-event/-/component-event-0.2.1.tgz#8262d2be886c999ad4b85ed3e0dfb3b3e98ca9d3"
+  integrity sha512-wGA++isMqiDq1jPYeyv2as/Bt/u+3iLW0rEa+8NQ82jAv3TgqMiCM+B2SaBdn2DfLilLjjq736YcezihRYhfxw==
 
 compute-scroll-into-view@^1.0.17:
   version "1.0.17"
@@ -3688,11 +3700,6 @@ css-what@^6.0.1:
   resolved "https://registry.npmmirror.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
   integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
 
-css.escape@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.npmmirror.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
-  integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
-
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -3923,13 +3930,14 @@ diagram-js-direct-editing@^2.0.0:
     min-dash "^4.0.0"
     min-dom "^4.0.2"
 
-diagram-js@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.npmmirror.com/diagram-js/-/diagram-js-10.0.0.tgz#0209283c819eda86f9bdddca9266cc5fd910a650"
-  integrity sha512-VtZof5MLwVpHjTznfS7B1rQxYtpJ1Gyzse7Aan22QgMhD8FDpm0nXcIblkB//05vFJUljJfp9etNujJtmU1yvA==
+diagram-js@^11.9.1:
+  version "11.11.0"
+  resolved "https://registry.npmmirror.com/diagram-js/-/diagram-js-11.11.0.tgz#2c44aebc5197eca43df8394598b2faabcdff1692"
+  integrity sha512-+GJ6NPCihQBOqLKAjrXE+bQNYIhFjrCQgYHfPb22OcrYJ9k6vkTfJfG5PsyJ9P/AEIrXwTnrJAff/iKU1RgfAA==
   dependencies:
-    css.escape "^1.5.1"
-    didi "^9.0.0"
+    "@bpmn-io/diagram-js-ui" "^0.2.2"
+    clsx "^1.2.1"
+    didi "^9.0.2"
     hammerjs "^2.0.1"
     inherits-browser "^0.1.0"
     min-dash "^4.0.0"
@@ -3938,10 +3946,10 @@ diagram-js@^10.0.0:
     path-intersection "^2.2.1"
     tiny-svg "^3.0.0"
 
-didi@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.npmmirror.com/didi/-/didi-9.0.0.tgz#f127477d098a60329a80638333924c15291f8496"
-  integrity sha512-bOZ7WAah3t8TxKV81pbIivHjWyABot49YXG1M3QztnUlZDHz3MRNJ1nZO87JbqrkqNI/2GR4ncHfXdGIP9LX+w==
+didi@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.npmmirror.com/didi/-/didi-9.0.2.tgz#e49a80aa281b5672e45519ba1980d7fba2e32cfb"
+  integrity sha512-q2+aj+lnJcUweV7A9pdUrwFr4LHVmRPwTmQLtHPFz4aT7IBoryN6Iy+jmFku+oIzr5ebBkvtBCOb87+dJhb7bg==
 
 diff-match-patch@^1.0.5:
   version "1.0.5"
@@ -5640,6 +5648,11 @@ hosted-git-info@^4.0.0, hosted-git-info@^4.0.1:
   dependencies:
     lru-cache "^6.0.0"
 
+htm@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmmirror.com/htm/-/htm-3.1.1.tgz#49266582be0dc66ed2235d5ea892307cc0c24b78"
+  integrity sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==
+
 html-minifier-terser@^6.1.0:
   version "6.1.0"
   resolved "https://registry.npmmirror.com/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#bfc818934cc07918f6b3669f5774ecdfd48f32ab"
@@ -7020,12 +7033,12 @@ min-dash@^4.0.0:
   resolved "https://registry.npmmirror.com/min-dash/-/min-dash-4.0.0.tgz#4a1afec4c4d70f510b6e241d0550493d4ac0f161"
   integrity sha512-piIvVJ/nxuA4+LpnYIzF6oCtRvdtDvQJteSC+H768H2UvPKFKIt5oiJnUVtr0ZdchneXTcvUZ91vIrvWVIN0AA==
 
-min-dom@^4.0.2:
-  version "4.0.3"
-  resolved "https://registry.npmmirror.com/min-dom/-/min-dom-4.0.3.tgz#659aa6017bb2eae5a22bfe62d4a7fb87248da3fa"
-  integrity sha512-5zQyCMe8rtGiDIRjfGeqnF2YPJ7OAPFdJQeC7MakHais3dh4VG4PV2a0FacziKTzJjYK5qnPKm2sq1wSXB1wTQ==
+min-dom@^4.0.2, min-dom@^4.0.3:
+  version "4.1.0"
+  resolved "https://registry.npmmirror.com/min-dom/-/min-dom-4.1.0.tgz#ecbf9a2d0412ffe4ddc14253d65d15b47b6b4bf8"
+  integrity sha512-1lj1EyoSwY/UmTeT/hhPiZTsq+vK9D+8FAJ/53iK5jT1otkG9rJTixSKdjmTieEvdfES+sKbbTptzaQJhnacjA==
   dependencies:
-    component-event "^0.1.4"
+    component-event "^0.2.1"
     domify "^1.4.1"
     min-dash "^4.0.0"
 
@@ -7078,18 +7091,18 @@ mockjs@^1.1.0:
     commander "*"
 
 moddle-xml@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.npmmirror.com/moddle-xml/-/moddle-xml-10.0.0.tgz#7b0815982b375ece4338258ec86bc6be4f05ed7b"
-  integrity sha512-e5qG0uC9ebHXInLEKW9pZNqcAK7ALCOKmcLw8jmepBPY9BiUZFi+8Th/Cydog3S1rrUXyyo0pqaHaCvc1zt6VA==
+  version "10.1.0"
+  resolved "https://registry.npmmirror.com/moddle-xml/-/moddle-xml-10.1.0.tgz#8c2a1b73c73cc8915182d5374857c43ba482c7a5"
+  integrity sha512-erWckwLt+dYskewKXJso9u+aAZ5172lOiYxSOqKCPTy7L/xmqH1PoeoA7eVC7oJTt3PqF5TkZzUmbjGH6soQBg==
   dependencies:
     min-dash "^4.0.0"
     moddle "^6.0.0"
     saxen "^8.1.2"
 
 moddle@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.npmmirror.com/moddle/-/moddle-6.0.0.tgz#ccfae6936430e8294a98619bcbefbf1950eeaaa4"
-  integrity sha512-dHYSJpGV0R0X8cJeWWUnE0VqCA0SFP0jZYQtO23EdsBk+MpAgSpdhXadYR6WbHElKroB6XTbifpsWro26UlP6Q==
+  version "6.2.1"
+  resolved "https://registry.npmmirror.com/moddle/-/moddle-6.2.1.tgz#822163908b96b81f5f086441a558198feec735aa"
+  integrity sha512-rBT4P19k9wKOerFHNJQugw25CK6DK5m4lVZGac7godbWNPsbJgr1K4GJ+pqM1ErbRYxljXCTDgPhJLoDWE4wwQ==
   dependencies:
     min-dash "^4.0.0"
 
@@ -7910,6 +7923,11 @@ posthtml@^0.9.2:
     posthtml-parser "^0.2.0"
     posthtml-render "^1.0.5"
 
+preact@^10.11.2:
+  version "10.13.1"
+  resolved "https://registry.npmmirror.com/preact/-/preact-10.13.1.tgz#d220bd8771b8fa197680d4917f3cefc5eed88720"
+  integrity sha512-KyoXVDU5OqTpG9LXlB3+y639JAGzl8JSBXLn1J9HTSB3gbKcuInga7bZnXLlxmK94ntTs1EFeZp0lrja2AuBYQ==
+
 preact@^10.5.13:
   version "10.11.3"
   resolved "https://registry.npmmirror.com/preact/-/preact-10.11.3.tgz#8a7e4ba19d3992c488b0785afcc0f8aa13c78d19"
-- 
Gitee


From f528d9934ec520906a74efce093cbe9a6beb2cf1 Mon Sep 17 00:00:00 2001
From: xxm <xxm1995@outlook.com>
Date: Tue, 14 Mar 2023 23:12:37 +0800
Subject: [PATCH 19/28] =?UTF-8?q?perf=20=E6=B5=81=E7=A8=8B=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E5=99=A8=E9=80=82=E9=85=8DVue3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                               |   2 +-
 src/components/Bpmn/ProcessViewer.vue      | 490 ++++++++++-----------
 src/views/modules/bpm/model/BpmModeler.vue | 158 +++----
 yarn.lock                                  | 189 ++++----
 4 files changed, 404 insertions(+), 435 deletions(-)

diff --git a/package.json b/package.json
index 0d61832..ad189aa 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@zxcvbn-ts/core": "^2.0.1",
     "ant-design-vue": "^3.2.15",
     "axios": "^0.26.1",
-    "bpmn-js": "^11.5.0",
+    "bpmn-js": "^7.5.0",
     "codemirror": "^5.65.3",
     "cron-parser": "^4.6.0",
     "cropperjs": "^1.5.12",
diff --git a/src/components/Bpmn/ProcessViewer.vue b/src/components/Bpmn/ProcessViewer.vue
index 10cc1de..e54e017 100644
--- a/src/components/Bpmn/ProcessViewer.vue
+++ b/src/components/Bpmn/ProcessViewer.vue
@@ -31,7 +31,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
   // 汉化
   import customTranslate from './common/customTranslate'
   import Modeler from 'bpmn-js/lib/Modeler'
@@ -40,271 +40,265 @@
 
   import { addArrow } from './processViewerUtils'
   import { useDict } from '/@/hooks/bootx/useDict'
+  import { $ref } from 'vue/macros'
+  import { onMounted, watch } from 'vue'
 
   const { dictConvert } = useDict()
-
-  export default {
-    name: 'WorkflowBpmnModeler',
-    props: {
+  const props = withDefaults(
+    defineProps<{
       // bpmn流程图
-      xml: { type: String, default: '' },
+      xml: string
       // 实例
-      instance: { type: Object, default: () => {} },
+      instance: any
       // 执行流程节点
-      flowNodeList: { type: Array, default: () => [] },
+      flowNodeList: any
       // 节点流程任务组
-      nodeTaskList: { type: Object, default: () => {} },
+      nodeTaskList: any
       // 画布高度
-      height: { type: Number, default: 650 },
+      height: number
+    }>(),
+    {
+      xml: '',
+      instance: {},
+      flowNodeList: [],
+      nodeTaskList: {},
+      height: 650,
     },
-    data() {
-      return {
-        modeler: null,
-        zoom: 1,
-        element: null,
-        drawerVisible: false,
-        currentTaskList: [],
-        cs: 1,
-      }
+  )
+
+  let canvas = $ref()
+
+  let modeler = $ref<any>()
+  let zoom = $ref(1)
+  let element = $ref(null)
+  let drawerVisible = $ref(false)
+  let currentTaskList = $ref([])
+
+  let elementOverlayIds = $ref<any>()
+  let overlays = $ref<any>()
+
+  watch(
+    () => props.xml,
+    (newVal, oldVal) => {
+      console.log(newVal)
+      createDiagram()
     },
-    watch: {
-      cs(val) {
-        if (val) {
-        }
-      },
-      xml: {
-        handler(newQuestion) {
-          // 在组件实例创建时会立即调用
-          console.log(newQuestion)
-          this.createDiagram()
+  )
+  watch(
+    () => props.flowNodeList,
+    (newVal, oldVal) => {
+      console.log(props.xml)
+      createDiagram()
+    }
+  )
+  watch(
+    () => props.nodeTaskList,
+    (newVal, oldVal) => createDiagram(),
+  )
+
+  onMounted(() => {
+    initModeler()
+    initEventBind()
+  })
+
+  /**
+   * 生成实例
+   */
+  function initModeler() {
+    modeler = new Modeler({
+      container: canvas,
+      additionalModules: [
+        {
+          translate: ['value', customTranslate],
+          paletteProvider: ['value', ''], // 禁用/清空左侧工具栏
+          labelEditingProvider: ['value', ''], // 禁用节点编辑
+          contextPadProvider: ['value', ''], // 禁用图形菜单
+          bendpoints: ['value', {}], // 禁用连线拖动
+          // zoomScroll: ['value', ''], // 禁用滚动
+          // moveCanvas: ['value', ''], // 禁用拖动整个流程图
+          move: ['value', ''], // 禁用单个图形拖动
         },
+      ],
+      moddleExtensions: {
+        flowable: flowableModdle,
       },
-      // xml(val) {
-      //   console.log(1)
-      //   if (val) {
-      //     this.createDiagram()
-      //   }
-      // },
-      flowNodeList(val) {
-        console.log(2)
-        if (val) {
-          this.createDiagram()
-        }
-      },
-      nodeTaskList(val) {
-        console.log(3)
-        if (val) {
-          this.createDiagram()
-        }
-      },
-    },
-    mounted() {
-      this.initModeler()
-      this.initEventBind()
-      setInterval(() => {
-        this.cs++
-      }, 2000)
-    },
-    methods: {
-      /**
-       * 生成实例
-       */
-      initModeler() {
-        this.modeler = new Modeler({
-          container: this.$refs.canvas,
-          additionalModules: [
-            {
-              translate: ['value', customTranslate],
-              paletteProvider: ['value', ''], // 禁用/清空左侧工具栏
-              labelEditingProvider: ['value', ''], // 禁用节点编辑
-              contextPadProvider: ['value', ''], // 禁用图形菜单
-              bendpoints: ['value', {}], // 禁用连线拖动
-              zoomScroll: ['value', ''], // 禁用滚动
-              moveCanvas: ['value', ''], // 禁用拖动整个流程图
-              move: ['value', ''], // 禁用单个图形拖动
-            },
-          ],
-          moddleExtensions: {
-            flowable: flowableModdle,
-          },
-        })
-      },
-      /**
-       * 创建流程图
-       */
-      async createDiagram() {
-        if (!this.xml) {
-          return
-        }
-        // 将字符串转换成图显示出来
-        const data = this.xml.replace(/<!\[CDATA\[(.+?)]]>/g, function (match, str) {
-          return str.replace(/</g, '&lt;')
-        })
-        await this.modeler.importXML(data)
-        this.initSvg()
-        this.fillColor()
-        this.fitViewport()
-      },
+    })
+  }
 
-      /**
-       * 给节点绑定事件 信息显示处理,
-       */
-      initEventBind() {
-        const eventBus = this.modeler.get('eventBus')
-        // 注册需要的监听事件
-        const types = ['bpmn:UserTask', 'bpmn:StartEvent', 'bpmn:EndEvent']
-        eventBus.on('element.hover', (eventObj) => {
-          const element = eventObj ? eventObj.element : null
-          if (types.includes(element.type)) {
-            this.elementHover(element)
-          }
-        })
-        eventBus.on('element.out', (eventObj) => {
-          const element = eventObj ? eventObj.element : null
-          if (types.includes(element.type)) {
-            this.elementOut(element)
-          }
-        })
-        eventBus.on('element.click', (eventObj) => {
-          const element = eventObj ? eventObj.element : null
-          if (element.type === 'bpmn:UserTask') {
-            this.elementClick(element)
-          }
-        })
-      },
-      /**
-       *  流程图的元素被 hover
-       */
-      elementHover(element) {
-        this.element = element
-        !this.elementOverlayIds && (this.elementOverlayIds = {})
-        !this.overlays && (this.overlays = this.modeler.get('overlays'))
+  /**
+   * 创建流程图
+   */
+  async function createDiagram() {
+    console.log(123)
+    if (!props.xml) {
+      return
+    }
+    // 将字符串转换成图显示出来
+    const data = props.xml.replace(/<!\[CDATA\[(.+?)]]>/g, function (match, str) {
+      return str.replace(/</g, '&lt;')
+    })
+    await modeler?.importXML(data)
+    initSvg()
+    fillColor()
+    fitViewport()
+  }
+  /**
+   * 给节点绑定事件 信息显示处理,
+   */
+  function initEventBind() {
+    const eventBus = modeler.get('eventBus')
+    // 注册需要的监听事件
+    const types = ['bpmn:UserTask', 'bpmn:StartEvent', 'bpmn:EndEvent']
+    eventBus.on('element.hover', (eventObj) => {
+      const element = eventObj ? eventObj.element : null
+      if (types.includes(element.type)) {
+        elementHover(element)
+      }
+    })
+    eventBus.on('element.out', (eventObj) => {
+      const element = eventObj ? eventObj.element : null
+      if (types.includes(element.type)) {
+        elementOut(element)
+      }
+    })
+    eventBus.on('element.click', (eventObj) => {
+      const element = eventObj ? eventObj.element : null
+      if (element.type === 'bpmn:UserTask') {
+        elementClick(element)
+      }
+    })
+  }
+  /**
+   *  流程图的元素被 hover
+   */
+  function elementHover(e) {
+    element = e
+    !elementOverlayIds && (elementOverlayIds = {})
+    !overlays && (overlays = modeler.get('overlays'))
 
-        let html = ''
-        if (element.type === 'bpmn:StartEvent') {
-          html = `<span>发起人：${this.instance.startUserName}</span>
-                  <span>发起时间：${this.instance.startTime}</span>`
-        }
-        if (element.type === 'bpmn:UserTask') {
-          const tasks = this.nodeTaskList[element.id]
-          if (tasks) {
-            const task = tasks[0]
-            if (task) {
-              html += `<span>执行人：${task.userName}</span>
-                  <span>状态：${this.stateNameConvert(task.state)}</span>
+    let html = ''
+    if (e.type === 'bpmn:StartEvent') {
+      html = `<span>发起人：${props.instance.startUserName}</span>
+                  <span>发起时间：${props.instance.startTime}</span>`
+    }
+    if (e.type === 'bpmn:UserTask') {
+      const tasks = props.nodeTaskList[e.id]
+      if (tasks) {
+        const task = tasks[0]
+        if (task) {
+          html += `<span>执行人：${task.userName}</span>
+                  <span>状态：${stateNameConvert(task.state)}</span>
                   <span>处理结果：${dictConvert('BpmTaskResult', task.result)}</span>
                   <span>结束时间：${task.endTime ? task.endTime : ''}</span>
                   <span>审批意见：${task.reason ? task.reason : ''}</span>`
-            }
-            if (tasks[1]) {
-              html += `</br>
-            <span>点击查看更多...</span>`
-            }
-          } else {
-            return
-          }
         }
-        if (element.type === 'bpmn:EndEvent') {
-          // 判断节点是否结束
-          if (!this.instance.endTime) {
-            return
-          }
-          html = `<span>结束时间：${this.instance.endTime}</span>`
-        }
-        this.elementOverlayIds[element.id] = this.overlays.add(element, {
-          position: { left: -50, bottom: 10 },
-          html: `<div class="element-overlays">${html}</div>`,
-        })
-      },
-      /**
-       * 流程图的元素被 out
-       */
-      elementOut(element) {
-        this.overlays.remove({ element })
-        this.elementOverlayIds[element.id] = null
-      },
-      /**
-       * 点击事件
-       */
-      elementClick(element) {
-        this.currentTaskList = this.nodeTaskList[element.id]
-        if (this.currentTaskList) {
-          this.drawerVisible = true
-        }
-      },
-      /**
-       * 处理SVG元素
-       */
-      initSvg() {
-        // 添加完成箭头
-        addArrow()
-      },
-
-      /**
-       * 染色
-       */
-      fillColor() {
-        const canvas = this.modeler.get('canvas')
-        this.modeler._definitions.rootElements[0].flowElements.forEach((n) => {
-          const state = this.getNodeTaskState(n)
-          if (['pass', 'skip'].includes(state)) {
-            canvas.addMarker(n.id, 'highlight')
-          } else if (state === 'running') {
-            canvas.addMarker(n.id, 'highlight-todo')
-          } else if (state === 'reject') {
-            canvas.addMarker(n.id, 'highlight-reject')
-          } else if (['back', 'cancel', 'retrieve'].includes(state)) {
-            canvas.addMarker(n.id, 'highlight-cancel')
-          } else {
-            // 其他状态不进行处理
-          }
-        })
-      },
-      /**
-       * 让图能自适应屏幕
-       */
-      fitViewport() {
-        this.zoom = this.modeler.get('canvas').zoom('fit-viewport')
-        const bbox = document.querySelector('.flow-containers .viewport').getBBox()
-        const currentViewbox = this.modeler.get('canvas').viewbox()
-        const elementMid = {
-          x: bbox.x + bbox.width / 2 - 65,
-          y: bbox.y + bbox.height / 2,
-        }
-        this.modeler.get('canvas').viewbox({
-          x: elementMid.x - currentViewbox.width / 2,
-          y: elementMid.y - currentViewbox.height / 2,
-          width: currentViewbox.width,
-          height: currentViewbox.height,
-        })
-        this.zoom = (bbox.width / currentViewbox.width) * 1.8
-      },
-      /**
-       * 获取节点的任务状态
-       */
-      getNodeTaskState(node) {
-        if (this.nodeTaskList) {
-          const tasks = this.nodeTaskList[node.id]
-          if (!tasks) {
-            // 处理非用户任务节点
-            return this.flowNodeList.find((m) => m.activityId === node.id) ? 'pass' : ''
-          }
-          // 是否是多个
-          if (tasks?.length > 1) {
-            // 判断是否有执行中状态
-            return tasks.find((t) => t.state === 'running') ? 'running' : tasks[0].state
-          } else {
-            return tasks[0].state
-          }
+        if (tasks[1]) {
+          html += `</br>
+            <span>点击查看更多...</span>`
         }
-      },
-      /**
-       * 任务状态翻译
-       */
-      stateNameConvert(state) {
-        return dictConvert('BpmTaskState', state)
-      },
-    },
+      } else {
+        return
+      }
+    }
+    if (e.type === 'bpmn:EndEvent') {
+      // 判断节点是否结束
+      if (!props.instance.endTime) {
+        return
+      }
+      html = `<span>结束时间：${props.instance.endTime}</span>`
+    }
+    elementOverlayIds[e.id] = overlays.add(e, {
+      position: { left: -50, bottom: 10 },
+      html: `<div class="element-overlays">${html}</div>`,
+    })
+  }
+  /**
+   * 流程图的元素被 out
+   */
+  function elementOut(element) {
+    console.log(element)
+    overlays.remove({ element })
+    elementOverlayIds[element.id] = null
+  }
+  /**
+   * 点击事件
+   */
+  function elementClick(element) {
+    currentTaskList = props.nodeTaskList[element.id]
+    if (currentTaskList) {
+      drawerVisible = true
+    }
+  }
+  /**
+   * 处理SVG元素
+   */
+  function initSvg() {
+    // 添加完成箭头
+    addArrow()
+  }
+  /**
+   * 染色
+   */
+  function fillColor() {
+    const canvas = modeler.get('canvas')
+    modeler._definitions.rootElements[0].flowElements.forEach((n) => {
+      const state = getNodeTaskState(n)
+      if (['pass', 'skip'].includes(state)) {
+        canvas.addMarker(n.id, 'highlight')
+      } else if (state === 'running') {
+        canvas.addMarker(n.id, 'highlight-todo')
+      } else if (state === 'reject') {
+        canvas.addMarker(n.id, 'highlight-reject')
+      } else if (['back', 'cancel', 'retrieve'].includes(state)) {
+        canvas.addMarker(n.id, 'highlight-cancel')
+      } else {
+        // 其他状态不进行处理
+      }
+    })
+  }
+  /**
+   * 让图能自适应屏幕
+   */
+  function fitViewport() {
+    zoom = modeler.get('canvas').zoom('fit-viewport')
+    const bbox = document.querySelector('.flow-containers .viewport').getBBox()
+    const currentViewbox = modeler.get('canvas').viewbox()
+    const elementMid = {
+      x: bbox.x + bbox.width / 2 - 65,
+      y: bbox.y + bbox.height / 2,
+    }
+    modeler.get('canvas').viewbox({
+      x: elementMid.x - currentViewbox.width / 2,
+      y: elementMid.y - currentViewbox.height / 2,
+      width: currentViewbox.width,
+      height: currentViewbox.height,
+    })
+    zoom = (bbox.width / currentViewbox.width) * 1.8
+  }
+  /**
+   * 获取节点的任务状态
+   */
+  function getNodeTaskState(node) {
+    if (props.nodeTaskList) {
+      const tasks = props.nodeTaskList[node.id]
+      if (!tasks) {
+        // 处理非用户任务节点
+        return props.flowNodeList.find((m) => m.activityId === node.id) ? 'pass' : ''
+      }
+      // 是否是多个
+      if (tasks?.length > 1) {
+        // 判断是否有执行中状态
+        return tasks.find((t) => t.state === 'running') ? 'running' : tasks[0].state
+      } else {
+        return tasks[0].state
+      }
+    }
+  }
+  /**
+   * 任务状态翻译
+   */
+  function stateNameConvert(state) {
+    return dictConvert('BpmTaskState', state)
   }
 </script>
 
diff --git a/src/views/modules/bpm/model/BpmModeler.vue b/src/views/modules/bpm/model/BpmModeler.vue
index fb500c5..d8cc238 100644
--- a/src/views/modules/bpm/model/BpmModeler.vue
+++ b/src/views/modules/bpm/model/BpmModeler.vue
@@ -16,95 +16,81 @@
   import { $ref } from 'vue/macros'
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
 
-  let instance = $ref({
-    id: '1573964159274438656',
-    createTime: '2022-09-25 17:14:33',
-    lastModifiedTime: '2022-09-25 17:14:33',
-    version: 0,
-    instanceId: '1573964159266050048',
-    instanceName: '分支测试[小小明]',
-    modelId: '1570336760533303296',
-    defId: 'lffp56gv:5:1570336922374717440',
-    defName: '分支测试',
-    modelType: null,
-    startUserId: '1399985191002447872',
-    startUserName: '小小明',
-    state: 'running',
-    result: null,
-    startTime: '2022-09-25 17:14:33',
-    endTime: null,
-    formVariables: null,
-  })
-  let nodeTaskList = $ref({
-    tx: [
-      {
-        id: '1573964205348868096',
-        createTime: '2022-09-25 17:14:44',
-        lastModifiedTime: '2022-09-25 17:15:42',
-        version: 1,
-        taskId: '1573964159463182338',
-        executionId: '1573964159458988032',
-        instanceId: '1573964159266050048',
-        instanceName: '分支测试[小小明]',
-        defName: '分支测试',
-        nodeId: 'tx',
-        nodeName: '填写',
-        state: 'running',
-        result: null,
-        reason: null,
-        startTime: '2022-09-25 17:14:33',
-        endTime: null,
-        userId: '1414143554414059520',
-        userName: '小小明1995',
-        startUserId: '1399985191002447872',
-        startUserName: '小小明',
-        formVariables: {},
-      },
-    ],
-  })
-  let flowNodeList = $ref([
-    {
-      activityId: 'Event_05npxwe',
-      activityType: 'startEvent',
-      running: false,
-    },
-    {
-      activityId: 'Flow_1sb4bbn',
-      activityType: 'sequenceFlow',
-      running: false,
-    },
-    {
-      activityId: 'tx',
-      activityType: 'userTask',
-      running: false,
-    },
-  ])
-  let bpmModel = $ref({
-    id: '1570336760533303296',
-    createTime: '2022-09-15 17:00:34',
-    lastModifiedTime: '2022-09-15 17:01:13',
-    version: 1,
-    name: '分支测试',
-    modelType: 'OA',
-    formId: null,
-    publish: 'published',
-    enable: true,
-    deployId: '1570336922060144640',
-    defId: 'lffp56gv:5:1570336922374717440',
-    defKey: 'lffp56gv',
-    defName: '分支测试',
-    defRemark: null,
-    mainProcess: true,
-    processVersion: 5,
-    modelEditorXml:
-      '<?xml version="1.0" encoding="UTF-8"?>\n<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.flowable.org/processdef">\n  <process id="lffp56gv" name="分支测试">\n    <startEvent id="Event_05npxwe">\n      <outgoing>Flow_1sb4bbn</outgoing>\n    </startEvent>\n    <sequenceFlow id="Flow_1sb4bbn" sourceRef="Event_05npxwe" targetRef="tx" />\n    <userTask id="tx" name="填写">\n      <incoming>Flow_1sb4bbn</incoming>\n      <outgoing>Flow_0c60bsu</outgoing>\n    </userTask>\n    <sequenceFlow id="Flow_0c60bsu" sourceRef="tx" targetRef="Gateway_0k9yetc" />\n    <sequenceFlow id="Flow_1l7upty" sourceRef="Gateway_0k9yetc" targetRef="dlb">\n      <conditionExpression xsi:type="tFormalExpression">${nextNode == \'dlb\'}</conditionExpression>\n    </sequenceFlow>\n    <sequenceFlow id="Flow_06lyv1u" sourceRef="Gateway_0k9yetc" targetRef="xlb">\n      <conditionExpression xsi:type="tFormalExpression">${nextNode == \'xlb\'}</conditionExpression>\n    </sequenceFlow>\n    <sequenceFlow id="Flow_0b404pf" sourceRef="dlb" targetRef="Gateway_0y33msz" />\n    <inclusiveGateway id="Gateway_0y33msz">\n      <incoming>Flow_0b404pf</incoming>\n      <incoming>Flow_1vlmw9l</incoming>\n      <outgoing>Flow_1xiiwtx</outgoing>\n    </inclusiveGateway>\n    <sequenceFlow id="Flow_1vlmw9l" sourceRef="xlb" targetRef="Gateway_0y33msz" />\n    <exclusiveGateway id="Gateway_0k9yetc" name="网关">\n      <incoming>Flow_0c60bsu</incoming>\n      <outgoing>Flow_1l7upty</outgoing>\n      <outgoing>Flow_06lyv1u</outgoing>\n    </exclusiveGateway>\n    <sequenceFlow id="Flow_1xiiwtx" sourceRef="Gateway_0y33msz" targetRef="Activity_0c9kfh4" />\n    <endEvent id="Event_0t8uxuu">\n      <incoming>Flow_1tsxjyl</incoming>\n    </endEvent>\n    <sequenceFlow id="Flow_1tsxjyl" sourceRef="Activity_0c9kfh4" targetRef="Event_0t8uxuu" />\n    <userTask id="dlb" name="大老板">\n      <incoming>Flow_1l7upty</incoming>\n      <outgoing>Flow_0b404pf</outgoing>\n    </userTask>\n    <userTask id="xlb" name="小老板">\n      <incoming>Flow_06lyv1u</incoming>\n      <outgoing>Flow_1vlmw9l</outgoing>\n    </userTask>\n    <userTask id="Activity_0c9kfh4" name="备注">\n      <incoming>Flow_1xiiwtx</incoming>\n      <outgoing>Flow_1tsxjyl</outgoing>\n    </userTask>\n  </process>\n  <bpmndi:BPMNDiagram id="BPMNDiagram_flow">\n    <bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="lffp56gv">\n      <bpmndi:BPMNEdge id="Flow_1tsxjyl_di" bpmnElement="Flow_1tsxjyl">\n        <di:waypoint x="370" y="-40" />\n        <di:waypoint x="492" y="-40" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1xiiwtx_di" bpmnElement="Flow_1xiiwtx">\n        <di:waypoint x="155" y="-40" />\n        <di:waypoint x="270" y="-40" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1vlmw9l_di" bpmnElement="Flow_1vlmw9l">\n        <di:waypoint x="-40" y="70" />\n        <di:waypoint x="130" y="70" />\n        <di:waypoint x="130" y="-15" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0b404pf_di" bpmnElement="Flow_0b404pf">\n        <di:waypoint x="-10" y="-180" />\n        <di:waypoint x="130" y="-180" />\n        <di:waypoint x="130" y="-65" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_06lyv1u_di" bpmnElement="Flow_06lyv1u">\n        <di:waypoint x="-220" y="-35" />\n        <di:waypoint x="-220" y="70" />\n        <di:waypoint x="-140" y="70" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1l7upty_di" bpmnElement="Flow_1l7upty">\n        <di:waypoint x="-220" y="-85" />\n        <di:waypoint x="-220" y="-180" />\n        <di:waypoint x="-110" y="-180" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0c60bsu_di" bpmnElement="Flow_0c60bsu">\n        <di:waypoint x="-300" y="-60" />\n        <di:waypoint x="-245" y="-60" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1sb4bbn_di" bpmnElement="Flow_1sb4bbn">\n        <di:waypoint x="-452" y="-60" />\n        <di:waypoint x="-400" y="-60" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNShape id="Event_05npxwe_di" bpmnElement="Event_05npxwe">\n        <dc:Bounds x="-488" y="-78" width="36" height="36" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_06lpzky_di" bpmnElement="tx">\n        <dc:Bounds x="-400" y="-100" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Gateway_0ji3ola_di" bpmnElement="Gateway_0y33msz">\n        <dc:Bounds x="105" y="-65" width="50" height="50" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Gateway_052rzhs_di" bpmnElement="Gateway_0k9yetc" isMarkerVisible="true">\n        <dc:Bounds x="-245" y="-85" width="50" height="50" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="-192" y="-67" width="23" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Event_0t8uxuu_di" bpmnElement="Event_0t8uxuu">\n        <dc:Bounds x="492" y="-58" width="36" height="36" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_03s9cvh_di" bpmnElement="dlb">\n        <dc:Bounds x="-110" y="-220" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_0jagpnz_di" bpmnElement="xlb">\n        <dc:Bounds x="-140" y="30" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_1v7ieyj_di" bpmnElement="Activity_0c9kfh4">\n        <dc:Bounds x="270" y="-80" width="100" height="80" />\n      </bpmndi:BPMNShape>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>\n',
-    remark: '',
-  })
-
-  let visible = $ref(false)
+  let visible = $ref<any>(false)
+  let instance = $ref<any>({})
+  let nodeTaskList = $ref<any>({})
+  let flowNodeList = $ref<any>([])
+  let bpmModel = $ref<any>({})
 
   function init(id, isView: boolean) {
     visible = true
+    instance = {
+      id: '1573964159274438656',
+      createTime: '2022-09-25 17:14:33',
+      lastModifiedTime: '2022-09-25 17:14:33',
+      version: 0,
+      instanceId: '1573964159266050048',
+      instanceName: '分支测试[小小明]',
+      modelId: '1570336760533303296',
+      defId: 'lffp56gv:5:1570336922374717440',
+      defName: '分支测试',
+      modelType: null,
+      startUserId: '1399985191002447872',
+      startUserName: '小小明',
+      state: 'running',
+      result: null,
+      startTime: '2022-09-25 17:14:33',
+      endTime: null,
+      formVariables: null,
+    }
+    nodeTaskList = {
+      tx: [
+        {
+          id: '1573964205348868096',
+          createTime: '2022-09-25 17:14:44',
+          lastModifiedTime: '2022-09-25 17:15:42',
+          version: 1,
+          taskId: '1573964159463182338',
+          executionId: '1573964159458988032',
+          instanceId: '1573964159266050048',
+          instanceName: '分支测试[小小明]',
+          defName: '分支测试',
+          nodeId: 'tx',
+          nodeName: '填写',
+          state: 'running',
+          result: null,
+          reason: null,
+          startTime: '2022-09-25 17:14:33',
+          endTime: null,
+          userId: '1414143554414059520',
+          userName: '小小明1995',
+          startUserId: '1399985191002447872',
+          startUserName: '小小明',
+          formVariables: {},
+        },
+      ],
+    }
+    flowNodeList = [
+      {
+        activityId: 'Event_05npxwe',
+        activityType: 'startEvent',
+        running: false,
+      },
+      {
+        activityId: 'Flow_1sb4bbn',
+        activityType: 'sequenceFlow',
+        running: false,
+      },
+      {
+        activityId: 'tx',
+        activityType: 'userTask',
+        running: false,
+      },
+    ]
+    bpmModel = {
+      modelEditorXml:
+        '<?xml version="1.0" encoding="UTF-8"?>\n<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.flowable.org/processdef">\n  <process id="lffp56gv" name="分支测试">\n    <startEvent id="Event_05npxwe">\n      <outgoing>Flow_1sb4bbn</outgoing>\n    </startEvent>\n    <sequenceFlow id="Flow_1sb4bbn" sourceRef="Event_05npxwe" targetRef="tx" />\n    <userTask id="tx" name="填写">\n      <incoming>Flow_1sb4bbn</incoming>\n      <outgoing>Flow_0c60bsu</outgoing>\n    </userTask>\n    <sequenceFlow id="Flow_0c60bsu" sourceRef="tx" targetRef="Gateway_0k9yetc" />\n    <sequenceFlow id="Flow_1l7upty" sourceRef="Gateway_0k9yetc" targetRef="dlb">\n      <conditionExpression xsi:type="tFormalExpression">${nextNode == \'dlb\'}</conditionExpression>\n    </sequenceFlow>\n    <sequenceFlow id="Flow_06lyv1u" sourceRef="Gateway_0k9yetc" targetRef="xlb">\n      <conditionExpression xsi:type="tFormalExpression">${nextNode == \'xlb\'}</conditionExpression>\n    </sequenceFlow>\n    <sequenceFlow id="Flow_0b404pf" sourceRef="dlb" targetRef="Gateway_0y33msz" />\n    <inclusiveGateway id="Gateway_0y33msz">\n      <incoming>Flow_0b404pf</incoming>\n      <incoming>Flow_1vlmw9l</incoming>\n      <outgoing>Flow_1xiiwtx</outgoing>\n    </inclusiveGateway>\n    <sequenceFlow id="Flow_1vlmw9l" sourceRef="xlb" targetRef="Gateway_0y33msz" />\n    <exclusiveGateway id="Gateway_0k9yetc" name="网关">\n      <incoming>Flow_0c60bsu</incoming>\n      <outgoing>Flow_1l7upty</outgoing>\n      <outgoing>Flow_06lyv1u</outgoing>\n    </exclusiveGateway>\n    <sequenceFlow id="Flow_1xiiwtx" sourceRef="Gateway_0y33msz" targetRef="Activity_0c9kfh4" />\n    <endEvent id="Event_0t8uxuu">\n      <incoming>Flow_1tsxjyl</incoming>\n    </endEvent>\n    <sequenceFlow id="Flow_1tsxjyl" sourceRef="Activity_0c9kfh4" targetRef="Event_0t8uxuu" />\n    <userTask id="dlb" name="大老板">\n      <incoming>Flow_1l7upty</incoming>\n      <outgoing>Flow_0b404pf</outgoing>\n    </userTask>\n    <userTask id="xlb" name="小老板">\n      <incoming>Flow_06lyv1u</incoming>\n      <outgoing>Flow_1vlmw9l</outgoing>\n    </userTask>\n    <userTask id="Activity_0c9kfh4" name="备注">\n      <incoming>Flow_1xiiwtx</incoming>\n      <outgoing>Flow_1tsxjyl</outgoing>\n    </userTask>\n  </process>\n  <bpmndi:BPMNDiagram id="BPMNDiagram_flow">\n    <bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="lffp56gv">\n      <bpmndi:BPMNEdge id="Flow_1tsxjyl_di" bpmnElement="Flow_1tsxjyl">\n        <di:waypoint x="370" y="-40" />\n        <di:waypoint x="492" y="-40" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1xiiwtx_di" bpmnElement="Flow_1xiiwtx">\n        <di:waypoint x="155" y="-40" />\n        <di:waypoint x="270" y="-40" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1vlmw9l_di" bpmnElement="Flow_1vlmw9l">\n        <di:waypoint x="-40" y="70" />\n        <di:waypoint x="130" y="70" />\n        <di:waypoint x="130" y="-15" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0b404pf_di" bpmnElement="Flow_0b404pf">\n        <di:waypoint x="-10" y="-180" />\n        <di:waypoint x="130" y="-180" />\n        <di:waypoint x="130" y="-65" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_06lyv1u_di" bpmnElement="Flow_06lyv1u">\n        <di:waypoint x="-220" y="-35" />\n        <di:waypoint x="-220" y="70" />\n        <di:waypoint x="-140" y="70" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1l7upty_di" bpmnElement="Flow_1l7upty">\n        <di:waypoint x="-220" y="-85" />\n        <di:waypoint x="-220" y="-180" />\n        <di:waypoint x="-110" y="-180" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0c60bsu_di" bpmnElement="Flow_0c60bsu">\n        <di:waypoint x="-300" y="-60" />\n        <di:waypoint x="-245" y="-60" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1sb4bbn_di" bpmnElement="Flow_1sb4bbn">\n        <di:waypoint x="-452" y="-60" />\n        <di:waypoint x="-400" y="-60" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNShape id="Event_05npxwe_di" bpmnElement="Event_05npxwe">\n        <dc:Bounds x="-488" y="-78" width="36" height="36" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_06lpzky_di" bpmnElement="tx">\n        <dc:Bounds x="-400" y="-100" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Gateway_0ji3ola_di" bpmnElement="Gateway_0y33msz">\n        <dc:Bounds x="105" y="-65" width="50" height="50" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Gateway_052rzhs_di" bpmnElement="Gateway_0k9yetc" isMarkerVisible="true">\n        <dc:Bounds x="-245" y="-85" width="50" height="50" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="-192" y="-67" width="23" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Event_0t8uxuu_di" bpmnElement="Event_0t8uxuu">\n        <dc:Bounds x="492" y="-58" width="36" height="36" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_03s9cvh_di" bpmnElement="dlb">\n        <dc:Bounds x="-110" y="-220" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_0jagpnz_di" bpmnElement="xlb">\n        <dc:Bounds x="-140" y="30" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_1v7ieyj_di" bpmnElement="Activity_0c9kfh4">\n        <dc:Bounds x="270" y="-80" width="100" height="80" />\n      </bpmndi:BPMNShape>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>\n',
+    }
   }
   defineExpose({
     init,
diff --git a/yarn.lock b/yarn.lock
index a6e37eb..e278575 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -974,14 +974,6 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
-"@bpmn-io/diagram-js-ui@^0.2.2":
-  version "0.2.2"
-  resolved "https://registry.npmmirror.com/@bpmn-io/diagram-js-ui/-/diagram-js-ui-0.2.2.tgz#f182476e820641901c10d0079dcfe7b5b022b9f6"
-  integrity sha512-IgOIxOwoqsFB2mMPdXtcbPVPjdYkZ3huW7ipowYLhg5jdRGHlBronQ+LER+lfWro6sPtzEsw7qX8D8Yq9M2S5g==
-  dependencies:
-    htm "^3.1.1"
-    preact "^10.11.2"
-
 "@commitlint/cli@^16.2.3":
   version "16.3.0"
   resolved "https://registry.npmmirror.com/@commitlint/cli/-/cli-16.3.0.tgz#5689f5c2abbb7880d5ff13329251e5648a784b16"
@@ -2800,29 +2792,30 @@ boolbase@^1.0.0:
   resolved "https://registry.npmmirror.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
-bpmn-js@^11.5.0:
-  version "11.5.0"
-  resolved "https://registry.npmmirror.com/bpmn-js/-/bpmn-js-11.5.0.tgz#0f8a896637a3335173c1734e52d40ed8b5abf651"
-  integrity sha512-Bdj53UvfiDtGE1wmiBmpgjl5RMLhCGV/C841dyC+t4kBHj7vApAeeHs2Qiycj390HO4B2U8UDROLT7yjdXEEUA==
+bpmn-js@^7.5.0:
+  version "7.5.0"
+  resolved "https://registry.npmmirror.com/bpmn-js/-/bpmn-js-7.5.0.tgz#0e4675acdbdff676db859f8cb7ec395d20e7bbd8"
+  integrity sha512-0ANaE6Bikg1GmkcvO7RK0MQPX+EKYKBc+q7OWk39/16NcCdNZ/4UiRcCr9n0u1VUCIDsSU/jJ79TIZFnV5CNjw==
   dependencies:
-    bpmn-moddle "^8.0.0"
-    diagram-js "^11.9.1"
-    diagram-js-direct-editing "^2.0.0"
+    bpmn-moddle "^7.0.4"
+    css.escape "^1.5.1"
+    diagram-js "^6.8.2"
+    diagram-js-direct-editing "^1.6.1"
     ids "^1.0.0"
-    inherits-browser "^0.1.0"
-    min-dash "^4.0.0"
-    min-dom "^4.0.3"
+    inherits "^2.0.4"
+    min-dash "^3.5.2"
+    min-dom "^3.1.3"
     object-refs "^0.3.0"
-    tiny-svg "^3.0.0"
+    tiny-svg "^2.2.2"
 
-bpmn-moddle@^8.0.0:
-  version "8.0.1"
-  resolved "https://registry.npmmirror.com/bpmn-moddle/-/bpmn-moddle-8.0.1.tgz#ba8a009fbd354fb521a11a1dd1417655a9d2ec02"
-  integrity sha512-mwZcrWhi52+JH5Oq58WwKYcUxQ1ZMiDQuzt1bpqiqEEFFnQLqCgtLwEXQuDXFmAuQPdMAghyPzqdOZQqIQVesw==
+bpmn-moddle@^7.0.4:
+  version "7.1.3"
+  resolved "https://registry.npmmirror.com/bpmn-moddle/-/bpmn-moddle-7.1.3.tgz#5b4592001e8f23dbdb18c557531e06489462bf42"
+  integrity sha512-ZcBfw0NSOdYTSXFKEn7MOXHItz7VfLZTrFYKO8cK6V8ZzGjCcdiLIOiw7Lctw1PJsihhLiZQS8Htj2xKf+NwCg==
   dependencies:
-    min-dash "^4.0.0"
-    moddle "^6.0.0"
-    moddle-xml "^10.0.0"
+    min-dash "^3.5.2"
+    moddle "^5.0.2"
+    moddle-xml "^9.0.6"
 
 brace-expansion@^1.1.7:
   version "1.1.11"
@@ -3203,11 +3196,6 @@ clone@^2.1.1:
   resolved "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
 
-clsx@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.npmmirror.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
-  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
-
 codemirror@^5.65.3:
   version "5.65.6"
   resolved "https://registry.npmmirror.com/codemirror/-/codemirror-5.65.6.tgz#fc313797331cbeb3bcab0652d1ec9d0f40c23ab5"
@@ -3298,10 +3286,10 @@ component-emitter@^1.2.1:
   resolved "https://registry.npmmirror.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
   integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
 
-component-event@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.npmmirror.com/component-event/-/component-event-0.2.1.tgz#8262d2be886c999ad4b85ed3e0dfb3b3e98ca9d3"
-  integrity sha512-wGA++isMqiDq1jPYeyv2as/Bt/u+3iLW0rEa+8NQ82jAv3TgqMiCM+B2SaBdn2DfLilLjjq736YcezihRYhfxw==
+component-event@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.npmmirror.com/component-event/-/component-event-0.1.4.tgz#3de78fc28782381787e24bf2a7c536bf0142c9b4"
+  integrity sha512-GMwOG8MnUHP1l8DZx1ztFO0SJTFnIzZnBDkXAj8RM2ntV2A6ALlDxgbMY1Fvxlg6WPQ+5IM/a6vg4PEYbjg/Rw==
 
 compute-scroll-into-view@^1.0.17:
   version "1.0.17"
@@ -3700,6 +3688,11 @@ css-what@^6.0.1:
   resolved "https://registry.npmmirror.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
   integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
 
+css.escape@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.npmmirror.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+  integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -3922,34 +3915,33 @@ deprecation@^2.0.0, deprecation@^2.3.1:
   resolved "https://registry.npmmirror.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
   integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
 
-diagram-js-direct-editing@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmmirror.com/diagram-js-direct-editing/-/diagram-js-direct-editing-2.0.0.tgz#0c7ec8ba2e3bad79bb97384e6acc522a225c07b1"
-  integrity sha512-/12OWL0B0RMCfaT1w3723c729MD42r5fay4wtm2DvxNFNBMdPaEvOHCTA/khLKjFzOzMVKxSzbAp7IEwBGonVw==
+diagram-js-direct-editing@^1.6.1:
+  version "1.8.0"
+  resolved "https://registry.npmmirror.com/diagram-js-direct-editing/-/diagram-js-direct-editing-1.8.0.tgz#7a178cd9203f262842a3e0023f9644e04a157858"
+  integrity sha512-B4Xj+PJfgBjbPEzT3uZQEkZI5xHFB0Izc+7BhDFuHidzrEMzQKZrFGdA3PqfWhReHf3dp+iB6Tt11G9eGNjKMw==
   dependencies:
-    min-dash "^4.0.0"
-    min-dom "^4.0.2"
+    min-dash "^3.5.2"
+    min-dom "^3.1.3"
 
-diagram-js@^11.9.1:
-  version "11.11.0"
-  resolved "https://registry.npmmirror.com/diagram-js/-/diagram-js-11.11.0.tgz#2c44aebc5197eca43df8394598b2faabcdff1692"
-  integrity sha512-+GJ6NPCihQBOqLKAjrXE+bQNYIhFjrCQgYHfPb22OcrYJ9k6vkTfJfG5PsyJ9P/AEIrXwTnrJAff/iKU1RgfAA==
+diagram-js@^6.8.2:
+  version "6.8.2"
+  resolved "https://registry.npmmirror.com/diagram-js/-/diagram-js-6.8.2.tgz#d3c37915c62c0cc5d95bc533098c8a35b38e67be"
+  integrity sha512-5EKYHjW2mmGsn9/jSenSkm8cScK5sO9eETBRQNIIzgZjxBDJn6eX964L2d7/vrAW9SeuijGUsztL9+NUinSsNg==
   dependencies:
-    "@bpmn-io/diagram-js-ui" "^0.2.2"
-    clsx "^1.2.1"
-    didi "^9.0.2"
+    css.escape "^1.5.1"
+    didi "^4.0.0"
     hammerjs "^2.0.1"
-    inherits-browser "^0.1.0"
-    min-dash "^4.0.0"
-    min-dom "^4.0.2"
+    inherits "^2.0.1"
+    min-dash "^3.5.0"
+    min-dom "^3.1.2"
     object-refs "^0.3.0"
-    path-intersection "^2.2.1"
-    tiny-svg "^3.0.0"
+    path-intersection "^2.2.0"
+    tiny-svg "^2.2.1"
 
-didi@^9.0.2:
-  version "9.0.2"
-  resolved "https://registry.npmmirror.com/didi/-/didi-9.0.2.tgz#e49a80aa281b5672e45519ba1980d7fba2e32cfb"
-  integrity sha512-q2+aj+lnJcUweV7A9pdUrwFr4LHVmRPwTmQLtHPFz4aT7IBoryN6Iy+jmFku+oIzr5ebBkvtBCOb87+dJhb7bg==
+didi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/didi/-/didi-4.0.0.tgz#2b89d892a67fd3777f7642d3bf06697b69e9b622"
+  integrity sha512-AzMElh8mCHOPWPCWfGjoJRla31fMXUT6+287W5ef3IPmtuBcyG9+MkFS7uPP6v3t2Cl086KwWfRB9mESa0OsHQ==
 
 diff-match-patch@^1.0.5:
   version "1.0.5"
@@ -4038,7 +4030,7 @@ domhandler@^4.2.0, domhandler@^4.2.2, domhandler@^4.3.1:
   dependencies:
     domelementtype "^2.2.0"
 
-domify@^1.4.1:
+domify@^1.3.1:
   version "1.4.1"
   resolved "https://registry.npmmirror.com/domify/-/domify-1.4.1.tgz#2e1e813019646715deeb8d3c5de4d3ef7bddd07e"
   integrity sha512-x18nuiDHMCZGXr4KJSRMf/TWYtiaRo6RX8KN9fEbW54mvbQ6pieUuerC2ahBg+kEp1wycFj8MPUI0WkIOw5E9w==
@@ -5648,11 +5640,6 @@ hosted-git-info@^4.0.0, hosted-git-info@^4.0.1:
   dependencies:
     lru-cache "^6.0.0"
 
-htm@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.npmmirror.com/htm/-/htm-3.1.1.tgz#49266582be0dc66ed2235d5ea892307cc0c24b78"
-  integrity sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==
-
 html-minifier-terser@^6.1.0:
   version "6.1.0"
   resolved "https://registry.npmmirror.com/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#bfc818934cc07918f6b3669f5774ecdfd48f32ab"
@@ -5888,6 +5875,11 @@ indent-string@^4.0.0:
   resolved "https://registry.npmmirror.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmmirror.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+  integrity sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg==
+
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -5896,11 +5888,6 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits-browser@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.npmmirror.com/inherits-browser/-/inherits-browser-0.1.0.tgz#893a7c9cc78f2a1e18093aaa203bbb8cf5c30511"
-  integrity sha512-CJHHvW3jQ6q7lzsXPpapLdMx5hDpSF3FSh45pwsj6bKxJJ8Nl8v43i5yXnr3BdfOimGHKyniewQtnAIp3vyJJw==
-
 inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
@@ -6891,6 +6878,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+matches-selector@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmmirror.com/matches-selector/-/matches-selector-1.2.0.tgz#d1814e7e8f43e69d22ac33c9af727dc884ecf12a"
+  integrity sha512-c4vLwYWyl+Ji+U43eU/G5FwxWd4ZH0ePUsFs5y0uwD9HUEFBXUQ1zUUan+78IpRD+y4pUfG0nAzNM292K7ItvA==
+
 mathml-tag-names@^2.1.3:
   version "2.1.3"
   resolved "https://registry.npmmirror.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
@@ -7028,19 +7020,21 @@ mimic-response@^1.0.0:
   resolved "https://registry.npmmirror.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
   integrity sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==
 
-min-dash@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmmirror.com/min-dash/-/min-dash-4.0.0.tgz#4a1afec4c4d70f510b6e241d0550493d4ac0f161"
-  integrity sha512-piIvVJ/nxuA4+LpnYIzF6oCtRvdtDvQJteSC+H768H2UvPKFKIt5oiJnUVtr0ZdchneXTcvUZ91vIrvWVIN0AA==
+min-dash@^3.0.0, min-dash@^3.5.0, min-dash@^3.5.2, min-dash@^3.8.1:
+  version "3.8.1"
+  resolved "https://registry.npmmirror.com/min-dash/-/min-dash-3.8.1.tgz#09a8bd8a041d65eec4732042cde9cb24a6e84b0d"
+  integrity sha512-evumdlmIlg9mbRVPbC4F5FuRhNmcMS5pvuBUbqb1G9v09Ro0ImPEgz5n3khir83lFok1inKqVDjnKEg3GpDxQg==
 
-min-dom@^4.0.2, min-dom@^4.0.3:
-  version "4.1.0"
-  resolved "https://registry.npmmirror.com/min-dom/-/min-dom-4.1.0.tgz#ecbf9a2d0412ffe4ddc14253d65d15b47b6b4bf8"
-  integrity sha512-1lj1EyoSwY/UmTeT/hhPiZTsq+vK9D+8FAJ/53iK5jT1otkG9rJTixSKdjmTieEvdfES+sKbbTptzaQJhnacjA==
+min-dom@^3.1.2, min-dom@^3.1.3:
+  version "3.2.1"
+  resolved "https://registry.npmmirror.com/min-dom/-/min-dom-3.2.1.tgz#c272a814397d8bfe97edd12670e7ac34123c043f"
+  integrity sha512-v6YCmnDzxk4rRJntWTUiwggLupPw/8ZSRqUq0PDaBwVZEO/wYzCH4SKVBV+KkEvf3u0XaWHly5JEosPtqRATZA==
   dependencies:
-    component-event "^0.2.1"
-    domify "^1.4.1"
-    min-dash "^4.0.0"
+    component-event "^0.1.4"
+    domify "^1.3.1"
+    indexof "0.0.1"
+    matches-selector "^1.2.0"
+    min-dash "^3.8.1"
 
 min-indent@^1.0.0:
   version "1.0.1"
@@ -7090,21 +7084,21 @@ mockjs@^1.1.0:
   dependencies:
     commander "*"
 
-moddle-xml@^10.0.0:
-  version "10.1.0"
-  resolved "https://registry.npmmirror.com/moddle-xml/-/moddle-xml-10.1.0.tgz#8c2a1b73c73cc8915182d5374857c43ba482c7a5"
-  integrity sha512-erWckwLt+dYskewKXJso9u+aAZ5172lOiYxSOqKCPTy7L/xmqH1PoeoA7eVC7oJTt3PqF5TkZzUmbjGH6soQBg==
+moddle-xml@^9.0.6:
+  version "9.0.6"
+  resolved "https://registry.npmmirror.com/moddle-xml/-/moddle-xml-9.0.6.tgz#282b2a2232065a82556ba3fbbe3010b374f95cbf"
+  integrity sha512-tl0reHpsY/aKlLGhXeFlQWlYAQHFxTkFqC8tq8jXRYpQSnLVw13T6swMaourLd7EXqHdWsc+5ggsB+fEep6xZQ==
   dependencies:
-    min-dash "^4.0.0"
-    moddle "^6.0.0"
+    min-dash "^3.5.2"
+    moddle "^5.0.2"
     saxen "^8.1.2"
 
-moddle@^6.0.0:
-  version "6.2.1"
-  resolved "https://registry.npmmirror.com/moddle/-/moddle-6.2.1.tgz#822163908b96b81f5f086441a558198feec735aa"
-  integrity sha512-rBT4P19k9wKOerFHNJQugw25CK6DK5m4lVZGac7godbWNPsbJgr1K4GJ+pqM1ErbRYxljXCTDgPhJLoDWE4wwQ==
+moddle@^5.0.2:
+  version "5.0.4"
+  resolved "https://registry.npmmirror.com/moddle/-/moddle-5.0.4.tgz#1108c9ff210df552ef4589513e620d171e4468e6"
+  integrity sha512-Kjb+hjuzO+YlojNGxEUXvdhLYTHTtAABDlDcJTtTcn5MbJF9Zkv4I1Fyvp3Ypmfgg1EfHDZ3PsCQTuML9JD6wg==
   dependencies:
-    min-dash "^4.0.0"
+    min-dash "^3.0.0"
 
 modify-values@^1.0.0:
   version "1.0.1"
@@ -7665,7 +7659,7 @@ path-exists@^4.0.0:
   resolved "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
   integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
 
-path-intersection@^2.2.1:
+path-intersection@^2.2.0:
   version "2.2.1"
   resolved "https://registry.npmmirror.com/path-intersection/-/path-intersection-2.2.1.tgz#8476b75fefb7ac402f810d304e0eb0c080c11fe7"
   integrity sha512-9u8xvMcSfuOiStv9bPdnRJQhGQXLKurew94n4GPQCdH1nj9QKC9ObbNoIpiRq8skiOBxKkt277PgOoFgAt3/rA==
@@ -7923,11 +7917,6 @@ posthtml@^0.9.2:
     posthtml-parser "^0.2.0"
     posthtml-render "^1.0.5"
 
-preact@^10.11.2:
-  version "10.13.1"
-  resolved "https://registry.npmmirror.com/preact/-/preact-10.13.1.tgz#d220bd8771b8fa197680d4917f3cefc5eed88720"
-  integrity sha512-KyoXVDU5OqTpG9LXlB3+y639JAGzl8JSBXLn1J9HTSB3gbKcuInga7bZnXLlxmK94ntTs1EFeZp0lrja2AuBYQ==
-
 preact@^10.5.13:
   version "10.11.3"
   resolved "https://registry.npmmirror.com/preact/-/preact-10.11.3.tgz#8a7e4ba19d3992c488b0785afcc0f8aa13c78d19"
@@ -9351,10 +9340,10 @@ timed-out@^4.0.0, timed-out@^4.0.1:
   resolved "https://registry.npmmirror.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
   integrity sha512-G7r3AhovYtr5YKOWQkta8RKAPb+J9IsO4uVmzjl8AZwfhs8UcUwTiD6gcJYSgOtzyjvQKrKYn41syHbUWMkafA==
 
-tiny-svg@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmmirror.com/tiny-svg/-/tiny-svg-3.0.0.tgz#2a441d7f9cb27982e548e757f86a0a123a6f7e38"
-  integrity sha512-+u6VomQO7MbI7CQe5q1IwNePpbVKG/HVdUQBmaEpSCdP/QmeyjhrS6WKFsNetXlvf9LWu/f5woRqjMdxBMe/0w==
+tiny-svg@^2.2.1, tiny-svg@^2.2.2:
+  version "2.2.4"
+  resolved "https://registry.npmmirror.com/tiny-svg/-/tiny-svg-2.2.4.tgz#8d4a16bd2c4644c8444fd3c2ece91db7631cfb35"
+  integrity sha512-NOi39lBknf4UdDEahNkbEAJnzhu1ZcN2j75IS2vLRmIhsfxdZpTChfLKBcN1ShplVmPIXJAIafk6YY5/Aa80lQ==
 
 tiny-warning@^1.0.3:
   version "1.0.3"
-- 
Gitee


From ad65a10b048f88f5a5ed0e38a45d77d55869aca3 Mon Sep 17 00:00:00 2001
From: xxm1995 <xxm1995@outlook.com>
Date: Wed, 15 Mar 2023 18:01:33 +0800
Subject: [PATCH 20/28] =?UTF-8?q?fix=20=E6=B5=81=E7=A8=8B=E5=9B=BE?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +-
 src/components/Bpmn/ProcessViewer.vue         | 131 ++++++------
 src/components/Bpmn/common/customTranslate.js |   2 +-
 src/components/registerGlobComp.ts            |   3 +
 src/main.ts                                   |   5 +
 .../modules/bpm/design/ProcessDesign.vue      |  57 ++++++
 src/views/modules/bpm/model/BpmModeler.vue    |   1 +
 yarn.lock                                     | 189 +++++++++---------
 8 files changed, 231 insertions(+), 159 deletions(-)
 create mode 100644 src/views/modules/bpm/design/ProcessDesign.vue

diff --git a/package.json b/package.json
index ad189aa..0d61832 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@zxcvbn-ts/core": "^2.0.1",
     "ant-design-vue": "^3.2.15",
     "axios": "^0.26.1",
-    "bpmn-js": "^7.5.0",
+    "bpmn-js": "^11.5.0",
     "codemirror": "^5.65.3",
     "cron-parser": "^4.6.0",
     "cropperjs": "^1.5.12",
diff --git a/src/components/Bpmn/ProcessViewer.vue b/src/components/Bpmn/ProcessViewer.vue
index e54e017..25d57a9 100644
--- a/src/components/Bpmn/ProcessViewer.vue
+++ b/src/components/Bpmn/ProcessViewer.vue
@@ -2,19 +2,19 @@
   <div class="flow-containers view-mode" style="height: 100%">
     <a-layout style="height: 100%">
       <a-layout style="align-items: stretch">
-        <div ref="canvas" class="canvas" :style="{ minHeight: height + 'px' }"></div>
-        <!--        <a-drawer :visible="drawerVisible" title="流程信息" :width="450" placement="right" :closable="true" @close="drawerVisible = false">-->
-        <!--          <a-timeline>-->
-        <!--            <a-timeline-item v-for="o in currentTaskList" :key="o.id">-->
-        <!--              <p>开始时间: {{ o.startTime }}</p>-->
-        <!--              <p>状态：{{ stateNameConvert(o.state) }}</p>-->
-        <!--              <p>处理结果：{{ dictConvert('BpmTaskResult', o.result) }}</p>-->
-        <!--              <p>处理人: {{ o.userName }}</p>-->
-        <!--              <p>结束时间: {{ o.endTime ? o.endTime : '' }}</p>-->
-        <!--              <p>审批意见：{{ o.reason ? o.reason : '' }}</p>-->
-        <!--            </a-timeline-item>-->
-        <!--          </a-timeline>-->
-        <!--        </a-drawer>-->
+        <div ref="canvas" id="canvas" class="canvas" :style="{ minHeight: height + 'px' }"></div>
+        <a-drawer :visible="drawerVisible" title="流程信息" :width="450" placement="right" :closable="true" @close="drawerVisible = false">
+          <a-timeline>
+            <a-timeline-item v-for="o in currentTaskList" :key="o.id">
+              <p>开始时间: {{ o.startTime }}</p>
+              <p>状态：{{ stateNameConvert(o.state) }}</p>
+              <p>处理结果：{{ dictConvert('BpmTaskResult', o.result) }}</p>
+              <p>处理人: {{ o.userName }}</p>
+              <p>结束时间: {{ o.endTime ? o.endTime : '' }}</p>
+              <p>审批意见：{{ o.reason ? o.reason : '' }}</p>
+            </a-timeline-item>
+          </a-timeline>
+        </a-drawer>
         <a-layout-sider
           class="sider"
           style="
@@ -32,6 +32,11 @@
 </template>
 
 <script lang="ts" setup>
+  import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
+  import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
+  import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
+  import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
+
   // 汉化
   import customTranslate from './common/customTranslate'
   import Modeler from 'bpmn-js/lib/Modeler'
@@ -41,7 +46,7 @@
   import { addArrow } from './processViewerUtils'
   import { useDict } from '/@/hooks/bootx/useDict'
   import { $ref } from 'vue/macros'
-  import { onMounted, watch } from 'vue'
+  import { nextTick, onMounted, watch, watchEffect } from 'vue'
 
   const { dictConvert } = useDict()
   const props = withDefaults(
@@ -74,54 +79,41 @@
   let drawerVisible = $ref(false)
   let currentTaskList = $ref([])
 
-  let elementOverlayIds = $ref<any>()
-  let overlays = $ref<any>()
+  // 流程相关变量, 不需要进行响应式
+  let elementOverlayIds
+  let overlays
 
-  watch(
-    () => props.xml,
-    (newVal, oldVal) => {
-      console.log(newVal)
-      createDiagram()
-    },
-  )
-  watch(
-    () => props.flowNodeList,
-    (newVal, oldVal) => {
-      console.log(props.xml)
-      createDiagram()
-    }
-  )
-  watch(
-    () => props.nodeTaskList,
-    (newVal, oldVal) => createDiagram(),
-  )
-
-  onMounted(() => {
+  watchEffect(() => {
     initModeler()
-    initEventBind()
   })
 
   /**
    * 生成实例
    */
   function initModeler() {
-    modeler = new Modeler({
-      container: canvas,
-      additionalModules: [
-        {
-          translate: ['value', customTranslate],
-          paletteProvider: ['value', ''], // 禁用/清空左侧工具栏
-          labelEditingProvider: ['value', ''], // 禁用节点编辑
-          contextPadProvider: ['value', ''], // 禁用图形菜单
-          bendpoints: ['value', {}], // 禁用连线拖动
-          // zoomScroll: ['value', ''], // 禁用滚动
-          // moveCanvas: ['value', ''], // 禁用拖动整个流程图
-          move: ['value', ''], // 禁用单个图形拖动
+    nextTick(async () => {
+      modeler = new Modeler({
+        container: '#canvas',
+        propertiesPanel: {},
+        additionalModules: [
+          {
+            translate: ['value', customTranslate],
+            paletteProvider: ['value', ''], // 禁用/清空左侧工具栏
+            labelEditingProvider: ['value', ''], // 禁用节点编辑
+            contextPadProvider: ['value', ''], // 禁用图形菜单
+            AppendContextPadProvider: ['value', ''],
+            bendpoints: ['value', {}], // 禁用连线拖动
+            // zoomScroll: ['value', ''], // 禁用滚动
+            // moveCanvas: ['value', ''], // 禁用拖动整个流程图
+            move: ['value', ''], // 禁用单个图形拖动
+          },
+        ],
+        moddleExtensions: {
+          flowable: flowableModdle,
         },
-      ],
-      moddleExtensions: {
-        flowable: flowableModdle,
-      },
+      })
+      await createDiagram()
+      initEventBind()
     })
   }
 
@@ -129,15 +121,15 @@
    * 创建流程图
    */
   async function createDiagram() {
-    console.log(123)
-    if (!props.xml) {
+    // modeler需要初始化完毕且已经有 xml 参数后才进行渲染
+    if (!props.xml || !modeler) {
       return
     }
     // 将字符串转换成图显示出来
     const data = props.xml.replace(/<!\[CDATA\[(.+?)]]>/g, function (match, str) {
       return str.replace(/</g, '&lt;')
     })
-    await modeler?.importXML(data)
+    await modeler.importXML(data)
     initSvg()
     fillColor()
     fitViewport()
@@ -184,6 +176,7 @@
     if (e.type === 'bpmn:UserTask') {
       const tasks = props.nodeTaskList[e.id]
       if (tasks) {
+        // 显示第一条任务信息
         const task = tasks[0]
         if (task) {
           html += `<span>执行人：${task.userName}</span>
@@ -192,6 +185,7 @@
                   <span>结束时间：${task.endTime ? task.endTime : ''}</span>
                   <span>审批意见：${task.reason ? task.reason : ''}</span>`
         }
+        // 多次处理会提示点击查看详情
         if (tasks[1]) {
           html += `</br>
             <span>点击查看更多...</span>`
@@ -216,7 +210,6 @@
    * 流程图的元素被 out
    */
   function elementOut(element) {
-    console.log(element)
     overlays.remove({ element })
     elementOverlayIds[element.id] = null
   }
@@ -305,23 +298,22 @@
 <style lang="less" scoped>
   // Font class
   @import './icon/iconfont.css';
-  /*左边工具栏以及编辑节点的样式*/
-  @import 'bpmn-js/dist/assets/diagram-js.css';
-  @import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
-  @import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
-  @import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
-
   @import './css/ProcessViewerHighlight.less';
+
   .view-mode {
     .ant-layout-header,
     .ant-layout-sider,
-    /deep/.djs-palette,
-    /deep/.bjs-powered-by {
+    :deep(.djs-palette),
+    :deep(.bjs-powered-by) {
+      ///deep/.djs-palette,
+      ///deep/.bjs-powered-by {
       display: none;
     }
   }
   // 信息显示框
-  /deep/.element-overlays {
+  :deep(.element-overlays) {
+    ///deep/.element-overlays {
+    display: grid;
     box-sizing: border-box;
     padding: 8px;
     background: rgba(0, 0, 0, 0.6);
@@ -359,14 +351,17 @@
     }
   }
 
-  /deep/ .ant-layout-sider:hover {
+  :deep(.ant-layout-sider:hover) {
+    ///deep/.ant-layout-sider:hover {
     background: #0a97ce25 !important;
   }
 
-  /deep/ .ant-layout-sider {
+  :deep(.ant-layout-sider) {
+    ///deep/.ant-layout-sider {
     z-index: 2;
   }
 
+  //:deep(.djs-container) {
   /deep/ .djs-container {
     background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+)
       repeat !important;
diff --git a/src/components/Bpmn/common/customTranslate.js b/src/components/Bpmn/common/customTranslate.js
index 803de5f..ffd24cc 100644
--- a/src/components/Bpmn/common/customTranslate.js
+++ b/src/components/Bpmn/common/customTranslate.js
@@ -8,7 +8,7 @@ export default function customTranslate(template, replacements) {
 
   // Replace
   return template.replace(/{([^}]+)}/g, function (_, key) {
-    var str = replacements[key]
+    let str = replacements[key]
     if (translations[replacements[key]] !== null && translations[replacements[key]] !== 'undefined') {
       str = translations[replacements[key]]
     }
diff --git a/src/components/registerGlobComp.ts b/src/components/registerGlobComp.ts
index 9054255..72a1df2 100644
--- a/src/components/registerGlobComp.ts
+++ b/src/components/registerGlobComp.ts
@@ -1,3 +1,4 @@
+//  @ts-nocheck
 import type { App } from 'vue'
 import { Button } from './Button'
 import { Link } from './Link'
@@ -27,6 +28,7 @@ import {
   Col,
   Modal,
   Dropdown,
+  Timeline,
   Radio,
   Steps,
   Spin,
@@ -64,6 +66,7 @@ export function registerGlobComp(app: App) {
   app.use(Divider)
   app.use(DatePicker)
   app.use(TimePicker)
+  app.use(Timeline)
   app.use(Typography)
   app.use(Empty)
   app.use(Popconfirm)
diff --git a/src/main.ts b/src/main.ts
index 213b7d7..cb5f68d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,6 +2,11 @@ import 'virtual:windi-base.css'
 import 'virtual:windi-components.css'
 import '/@/design/index.less'
 import 'virtual:windi-utilities.css'
+// 工作流编辑器语句
+// import 'bpmn-js/dist/assets/diagram-js.css'
+// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
+// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
+// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
 // Register icon sprite
 import 'virtual:svg-icons-register'
 import App from './App.vue'
diff --git a/src/views/modules/bpm/design/ProcessDesign.vue b/src/views/modules/bpm/design/ProcessDesign.vue
new file mode 100644
index 0000000..207d9f1
--- /dev/null
+++ b/src/views/modules/bpm/design/ProcessDesign.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="flow-containers view-mode" style="height: 100%">
+    <div ref="canvas" id="canvas" class="canvas"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
+  import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
+  import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
+  import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
+  import Modeler from 'bpmn-js/lib/Modeler'
+
+  import { nextTick } from 'vue'
+  import customTranslate from '/@/components/Bpmn/common/customTranslate'
+
+  // const xmlString = `<?xml version="1.0" encoding="UTF-8"?>
+  //   <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" targetNamespace="http://www.flowable.org/processdef">
+  //     <process id="process_123" name="name_321}">
+  //     </process>
+  //     <bpmndi:BPMNDiagram id="BPMNDiagram_flow">
+  //       <bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="T-2d89e7a3-ba79-4abd-9f64-ea59621c258c">
+  //       </bpmndi:BPMNPlane>
+  //     </bpmndi:BPMNDiagram>
+  //   </definitions>
+  //   `
+  const xmlString =
+    '<?xml version="1.0" encoding="UTF-8"?>\n<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.flowable.org/processdef">\n  <process id="lffp56gv" name="分支测试">\n    <startEvent id="Event_05npxwe">\n      <outgoing>Flow_1sb4bbn</outgoing>\n    </startEvent>\n    <sequenceFlow id="Flow_1sb4bbn" sourceRef="Event_05npxwe" targetRef="tx" />\n    <userTask id="tx" name="填写">\n      <incoming>Flow_1sb4bbn</incoming>\n      <outgoing>Flow_0c60bsu</outgoing>\n    </userTask>\n    <sequenceFlow id="Flow_0c60bsu" sourceRef="tx" targetRef="Gateway_0k9yetc" />\n    <sequenceFlow id="Flow_1l7upty" sourceRef="Gateway_0k9yetc" targetRef="dlb">\n      <conditionExpression xsi:type="tFormalExpression">${nextNode == \'dlb\'}</conditionExpression>\n    </sequenceFlow>\n    <sequenceFlow id="Flow_06lyv1u" sourceRef="Gateway_0k9yetc" targetRef="xlb">\n      <conditionExpression xsi:type="tFormalExpression">${nextNode == \'xlb\'}</conditionExpression>\n    </sequenceFlow>\n    <sequenceFlow id="Flow_0b404pf" sourceRef="dlb" targetRef="Gateway_0y33msz" />\n    <inclusiveGateway id="Gateway_0y33msz">\n      <incoming>Flow_0b404pf</incoming>\n      <incoming>Flow_1vlmw9l</incoming>\n      <outgoing>Flow_1xiiwtx</outgoing>\n    </inclusiveGateway>\n    <sequenceFlow id="Flow_1vlmw9l" sourceRef="xlb" targetRef="Gateway_0y33msz" />\n    <exclusiveGateway id="Gateway_0k9yetc" name="网关">\n      <incoming>Flow_0c60bsu</incoming>\n      <outgoing>Flow_1l7upty</outgoing>\n      <outgoing>Flow_06lyv1u</outgoing>\n    </exclusiveGateway>\n    <sequenceFlow id="Flow_1xiiwtx" sourceRef="Gateway_0y33msz" targetRef="Activity_0c9kfh4" />\n    <endEvent id="Event_0t8uxuu">\n      <incoming>Flow_1tsxjyl</incoming>\n    </endEvent>\n    <sequenceFlow id="Flow_1tsxjyl" sourceRef="Activity_0c9kfh4" targetRef="Event_0t8uxuu" />\n    <userTask id="dlb" name="大老板">\n      <incoming>Flow_1l7upty</incoming>\n      <outgoing>Flow_0b404pf</outgoing>\n    </userTask>\n    <userTask id="xlb" name="小老板">\n      <incoming>Flow_06lyv1u</incoming>\n      <outgoing>Flow_1vlmw9l</outgoing>\n    </userTask>\n    <userTask id="Activity_0c9kfh4" name="备注">\n      <incoming>Flow_1xiiwtx</incoming>\n      <outgoing>Flow_1tsxjyl</outgoing>\n    </userTask>\n  </process>\n  <bpmndi:BPMNDiagram id="BPMNDiagram_flow">\n    <bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="lffp56gv">\n      <bpmndi:BPMNEdge id="Flow_1tsxjyl_di" bpmnElement="Flow_1tsxjyl">\n        <di:waypoint x="370" y="-40" />\n        <di:waypoint x="492" y="-40" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1xiiwtx_di" bpmnElement="Flow_1xiiwtx">\n        <di:waypoint x="155" y="-40" />\n        <di:waypoint x="270" y="-40" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1vlmw9l_di" bpmnElement="Flow_1vlmw9l">\n        <di:waypoint x="-40" y="70" />\n        <di:waypoint x="130" y="70" />\n        <di:waypoint x="130" y="-15" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0b404pf_di" bpmnElement="Flow_0b404pf">\n        <di:waypoint x="-10" y="-180" />\n        <di:waypoint x="130" y="-180" />\n        <di:waypoint x="130" y="-65" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_06lyv1u_di" bpmnElement="Flow_06lyv1u">\n        <di:waypoint x="-220" y="-35" />\n        <di:waypoint x="-220" y="70" />\n        <di:waypoint x="-140" y="70" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1l7upty_di" bpmnElement="Flow_1l7upty">\n        <di:waypoint x="-220" y="-85" />\n        <di:waypoint x="-220" y="-180" />\n        <di:waypoint x="-110" y="-180" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0c60bsu_di" bpmnElement="Flow_0c60bsu">\n        <di:waypoint x="-300" y="-60" />\n        <di:waypoint x="-245" y="-60" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1sb4bbn_di" bpmnElement="Flow_1sb4bbn">\n        <di:waypoint x="-452" y="-60" />\n        <di:waypoint x="-400" y="-60" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNShape id="Event_05npxwe_di" bpmnElement="Event_05npxwe">\n        <dc:Bounds x="-488" y="-78" width="36" height="36" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_06lpzky_di" bpmnElement="tx">\n        <dc:Bounds x="-400" y="-100" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Gateway_0ji3ola_di" bpmnElement="Gateway_0y33msz">\n        <dc:Bounds x="105" y="-65" width="50" height="50" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Gateway_052rzhs_di" bpmnElement="Gateway_0k9yetc" isMarkerVisible="true">\n        <dc:Bounds x="-245" y="-85" width="50" height="50" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="-192" y="-67" width="23" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Event_0t8uxuu_di" bpmnElement="Event_0t8uxuu">\n        <dc:Bounds x="492" y="-58" width="36" height="36" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_03s9cvh_di" bpmnElement="dlb">\n        <dc:Bounds x="-110" y="-220" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_0jagpnz_di" bpmnElement="xlb">\n        <dc:Bounds x="-140" y="30" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_1v7ieyj_di" bpmnElement="Activity_0c9kfh4">\n        <dc:Bounds x="270" y="-80" width="100" height="80" />\n      </bpmndi:BPMNShape>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>\n'
+
+  nextTick(async () => {
+    const modeler = new Modeler({
+      container: '#canvas',
+      propertiesPanel: {},
+      additionalModules: [
+        {
+          translate: ['value', customTranslate], // 翻译
+          // paletteProvider: ['value', ''], // 禁用/清空左侧工具栏
+          // labelEditingProvider: ['value', ''], // 禁用节点编辑
+          contextPadProvider: ['value', ''], // 禁用图形菜单
+          // bendpoints: ['value', {}], // 禁用连线拖动
+          // zoomScroll: ['value', ''], // 禁用滚动画布
+          // moveCanvas: ['value', ''], // 禁用拖动画布
+          // move: ['value', ''], // 禁用单个图形拖动
+        },
+      ],
+      moddleExtensions: {},
+    })
+    await modeler.importXML(xmlString)
+  })
+</script>
+
+<style lang="less" scoped>
+  .canvas {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/src/views/modules/bpm/model/BpmModeler.vue b/src/views/modules/bpm/model/BpmModeler.vue
index d8cc238..04320f5 100644
--- a/src/views/modules/bpm/model/BpmModeler.vue
+++ b/src/views/modules/bpm/model/BpmModeler.vue
@@ -8,6 +8,7 @@
       :flow-node-list="flowNodeList"
       :xml="bpmModel.modelEditorXml"
     />
+<!--    <process-design/>-->
   </basic-modal>
 </template>
 
diff --git a/yarn.lock b/yarn.lock
index e278575..a6e37eb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -974,6 +974,14 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
+"@bpmn-io/diagram-js-ui@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.npmmirror.com/@bpmn-io/diagram-js-ui/-/diagram-js-ui-0.2.2.tgz#f182476e820641901c10d0079dcfe7b5b022b9f6"
+  integrity sha512-IgOIxOwoqsFB2mMPdXtcbPVPjdYkZ3huW7ipowYLhg5jdRGHlBronQ+LER+lfWro6sPtzEsw7qX8D8Yq9M2S5g==
+  dependencies:
+    htm "^3.1.1"
+    preact "^10.11.2"
+
 "@commitlint/cli@^16.2.3":
   version "16.3.0"
   resolved "https://registry.npmmirror.com/@commitlint/cli/-/cli-16.3.0.tgz#5689f5c2abbb7880d5ff13329251e5648a784b16"
@@ -2792,30 +2800,29 @@ boolbase@^1.0.0:
   resolved "https://registry.npmmirror.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
-bpmn-js@^7.5.0:
-  version "7.5.0"
-  resolved "https://registry.npmmirror.com/bpmn-js/-/bpmn-js-7.5.0.tgz#0e4675acdbdff676db859f8cb7ec395d20e7bbd8"
-  integrity sha512-0ANaE6Bikg1GmkcvO7RK0MQPX+EKYKBc+q7OWk39/16NcCdNZ/4UiRcCr9n0u1VUCIDsSU/jJ79TIZFnV5CNjw==
+bpmn-js@^11.5.0:
+  version "11.5.0"
+  resolved "https://registry.npmmirror.com/bpmn-js/-/bpmn-js-11.5.0.tgz#0f8a896637a3335173c1734e52d40ed8b5abf651"
+  integrity sha512-Bdj53UvfiDtGE1wmiBmpgjl5RMLhCGV/C841dyC+t4kBHj7vApAeeHs2Qiycj390HO4B2U8UDROLT7yjdXEEUA==
   dependencies:
-    bpmn-moddle "^7.0.4"
-    css.escape "^1.5.1"
-    diagram-js "^6.8.2"
-    diagram-js-direct-editing "^1.6.1"
+    bpmn-moddle "^8.0.0"
+    diagram-js "^11.9.1"
+    diagram-js-direct-editing "^2.0.0"
     ids "^1.0.0"
-    inherits "^2.0.4"
-    min-dash "^3.5.2"
-    min-dom "^3.1.3"
+    inherits-browser "^0.1.0"
+    min-dash "^4.0.0"
+    min-dom "^4.0.3"
     object-refs "^0.3.0"
-    tiny-svg "^2.2.2"
+    tiny-svg "^3.0.0"
 
-bpmn-moddle@^7.0.4:
-  version "7.1.3"
-  resolved "https://registry.npmmirror.com/bpmn-moddle/-/bpmn-moddle-7.1.3.tgz#5b4592001e8f23dbdb18c557531e06489462bf42"
-  integrity sha512-ZcBfw0NSOdYTSXFKEn7MOXHItz7VfLZTrFYKO8cK6V8ZzGjCcdiLIOiw7Lctw1PJsihhLiZQS8Htj2xKf+NwCg==
+bpmn-moddle@^8.0.0:
+  version "8.0.1"
+  resolved "https://registry.npmmirror.com/bpmn-moddle/-/bpmn-moddle-8.0.1.tgz#ba8a009fbd354fb521a11a1dd1417655a9d2ec02"
+  integrity sha512-mwZcrWhi52+JH5Oq58WwKYcUxQ1ZMiDQuzt1bpqiqEEFFnQLqCgtLwEXQuDXFmAuQPdMAghyPzqdOZQqIQVesw==
   dependencies:
-    min-dash "^3.5.2"
-    moddle "^5.0.2"
-    moddle-xml "^9.0.6"
+    min-dash "^4.0.0"
+    moddle "^6.0.0"
+    moddle-xml "^10.0.0"
 
 brace-expansion@^1.1.7:
   version "1.1.11"
@@ -3196,6 +3203,11 @@ clone@^2.1.1:
   resolved "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
 
+clsx@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmmirror.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 codemirror@^5.65.3:
   version "5.65.6"
   resolved "https://registry.npmmirror.com/codemirror/-/codemirror-5.65.6.tgz#fc313797331cbeb3bcab0652d1ec9d0f40c23ab5"
@@ -3286,10 +3298,10 @@ component-emitter@^1.2.1:
   resolved "https://registry.npmmirror.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
   integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
 
-component-event@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.npmmirror.com/component-event/-/component-event-0.1.4.tgz#3de78fc28782381787e24bf2a7c536bf0142c9b4"
-  integrity sha512-GMwOG8MnUHP1l8DZx1ztFO0SJTFnIzZnBDkXAj8RM2ntV2A6ALlDxgbMY1Fvxlg6WPQ+5IM/a6vg4PEYbjg/Rw==
+component-event@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.npmmirror.com/component-event/-/component-event-0.2.1.tgz#8262d2be886c999ad4b85ed3e0dfb3b3e98ca9d3"
+  integrity sha512-wGA++isMqiDq1jPYeyv2as/Bt/u+3iLW0rEa+8NQ82jAv3TgqMiCM+B2SaBdn2DfLilLjjq736YcezihRYhfxw==
 
 compute-scroll-into-view@^1.0.17:
   version "1.0.17"
@@ -3688,11 +3700,6 @@ css-what@^6.0.1:
   resolved "https://registry.npmmirror.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
   integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
 
-css.escape@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.npmmirror.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
-  integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
-
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -3915,33 +3922,34 @@ deprecation@^2.0.0, deprecation@^2.3.1:
   resolved "https://registry.npmmirror.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
   integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
 
-diagram-js-direct-editing@^1.6.1:
-  version "1.8.0"
-  resolved "https://registry.npmmirror.com/diagram-js-direct-editing/-/diagram-js-direct-editing-1.8.0.tgz#7a178cd9203f262842a3e0023f9644e04a157858"
-  integrity sha512-B4Xj+PJfgBjbPEzT3uZQEkZI5xHFB0Izc+7BhDFuHidzrEMzQKZrFGdA3PqfWhReHf3dp+iB6Tt11G9eGNjKMw==
+diagram-js-direct-editing@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/diagram-js-direct-editing/-/diagram-js-direct-editing-2.0.0.tgz#0c7ec8ba2e3bad79bb97384e6acc522a225c07b1"
+  integrity sha512-/12OWL0B0RMCfaT1w3723c729MD42r5fay4wtm2DvxNFNBMdPaEvOHCTA/khLKjFzOzMVKxSzbAp7IEwBGonVw==
   dependencies:
-    min-dash "^3.5.2"
-    min-dom "^3.1.3"
+    min-dash "^4.0.0"
+    min-dom "^4.0.2"
 
-diagram-js@^6.8.2:
-  version "6.8.2"
-  resolved "https://registry.npmmirror.com/diagram-js/-/diagram-js-6.8.2.tgz#d3c37915c62c0cc5d95bc533098c8a35b38e67be"
-  integrity sha512-5EKYHjW2mmGsn9/jSenSkm8cScK5sO9eETBRQNIIzgZjxBDJn6eX964L2d7/vrAW9SeuijGUsztL9+NUinSsNg==
+diagram-js@^11.9.1:
+  version "11.11.0"
+  resolved "https://registry.npmmirror.com/diagram-js/-/diagram-js-11.11.0.tgz#2c44aebc5197eca43df8394598b2faabcdff1692"
+  integrity sha512-+GJ6NPCihQBOqLKAjrXE+bQNYIhFjrCQgYHfPb22OcrYJ9k6vkTfJfG5PsyJ9P/AEIrXwTnrJAff/iKU1RgfAA==
   dependencies:
-    css.escape "^1.5.1"
-    didi "^4.0.0"
+    "@bpmn-io/diagram-js-ui" "^0.2.2"
+    clsx "^1.2.1"
+    didi "^9.0.2"
     hammerjs "^2.0.1"
-    inherits "^2.0.1"
-    min-dash "^3.5.0"
-    min-dom "^3.1.2"
+    inherits-browser "^0.1.0"
+    min-dash "^4.0.0"
+    min-dom "^4.0.2"
     object-refs "^0.3.0"
-    path-intersection "^2.2.0"
-    tiny-svg "^2.2.1"
+    path-intersection "^2.2.1"
+    tiny-svg "^3.0.0"
 
-didi@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmmirror.com/didi/-/didi-4.0.0.tgz#2b89d892a67fd3777f7642d3bf06697b69e9b622"
-  integrity sha512-AzMElh8mCHOPWPCWfGjoJRla31fMXUT6+287W5ef3IPmtuBcyG9+MkFS7uPP6v3t2Cl086KwWfRB9mESa0OsHQ==
+didi@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.npmmirror.com/didi/-/didi-9.0.2.tgz#e49a80aa281b5672e45519ba1980d7fba2e32cfb"
+  integrity sha512-q2+aj+lnJcUweV7A9pdUrwFr4LHVmRPwTmQLtHPFz4aT7IBoryN6Iy+jmFku+oIzr5ebBkvtBCOb87+dJhb7bg==
 
 diff-match-patch@^1.0.5:
   version "1.0.5"
@@ -4030,7 +4038,7 @@ domhandler@^4.2.0, domhandler@^4.2.2, domhandler@^4.3.1:
   dependencies:
     domelementtype "^2.2.0"
 
-domify@^1.3.1:
+domify@^1.4.1:
   version "1.4.1"
   resolved "https://registry.npmmirror.com/domify/-/domify-1.4.1.tgz#2e1e813019646715deeb8d3c5de4d3ef7bddd07e"
   integrity sha512-x18nuiDHMCZGXr4KJSRMf/TWYtiaRo6RX8KN9fEbW54mvbQ6pieUuerC2ahBg+kEp1wycFj8MPUI0WkIOw5E9w==
@@ -5640,6 +5648,11 @@ hosted-git-info@^4.0.0, hosted-git-info@^4.0.1:
   dependencies:
     lru-cache "^6.0.0"
 
+htm@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmmirror.com/htm/-/htm-3.1.1.tgz#49266582be0dc66ed2235d5ea892307cc0c24b78"
+  integrity sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==
+
 html-minifier-terser@^6.1.0:
   version "6.1.0"
   resolved "https://registry.npmmirror.com/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#bfc818934cc07918f6b3669f5774ecdfd48f32ab"
@@ -5875,11 +5888,6 @@ indent-string@^4.0.0:
   resolved "https://registry.npmmirror.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
-indexof@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.npmmirror.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
-  integrity sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg==
-
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -5888,6 +5896,11 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
+inherits-browser@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npmmirror.com/inherits-browser/-/inherits-browser-0.1.0.tgz#893a7c9cc78f2a1e18093aaa203bbb8cf5c30511"
+  integrity sha512-CJHHvW3jQ6q7lzsXPpapLdMx5hDpSF3FSh45pwsj6bKxJJ8Nl8v43i5yXnr3BdfOimGHKyniewQtnAIp3vyJJw==
+
 inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
@@ -6878,11 +6891,6 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-matches-selector@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.npmmirror.com/matches-selector/-/matches-selector-1.2.0.tgz#d1814e7e8f43e69d22ac33c9af727dc884ecf12a"
-  integrity sha512-c4vLwYWyl+Ji+U43eU/G5FwxWd4ZH0ePUsFs5y0uwD9HUEFBXUQ1zUUan+78IpRD+y4pUfG0nAzNM292K7ItvA==
-
 mathml-tag-names@^2.1.3:
   version "2.1.3"
   resolved "https://registry.npmmirror.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
@@ -7020,21 +7028,19 @@ mimic-response@^1.0.0:
   resolved "https://registry.npmmirror.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
   integrity sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==
 
-min-dash@^3.0.0, min-dash@^3.5.0, min-dash@^3.5.2, min-dash@^3.8.1:
-  version "3.8.1"
-  resolved "https://registry.npmmirror.com/min-dash/-/min-dash-3.8.1.tgz#09a8bd8a041d65eec4732042cde9cb24a6e84b0d"
-  integrity sha512-evumdlmIlg9mbRVPbC4F5FuRhNmcMS5pvuBUbqb1G9v09Ro0ImPEgz5n3khir83lFok1inKqVDjnKEg3GpDxQg==
+min-dash@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/min-dash/-/min-dash-4.0.0.tgz#4a1afec4c4d70f510b6e241d0550493d4ac0f161"
+  integrity sha512-piIvVJ/nxuA4+LpnYIzF6oCtRvdtDvQJteSC+H768H2UvPKFKIt5oiJnUVtr0ZdchneXTcvUZ91vIrvWVIN0AA==
 
-min-dom@^3.1.2, min-dom@^3.1.3:
-  version "3.2.1"
-  resolved "https://registry.npmmirror.com/min-dom/-/min-dom-3.2.1.tgz#c272a814397d8bfe97edd12670e7ac34123c043f"
-  integrity sha512-v6YCmnDzxk4rRJntWTUiwggLupPw/8ZSRqUq0PDaBwVZEO/wYzCH4SKVBV+KkEvf3u0XaWHly5JEosPtqRATZA==
+min-dom@^4.0.2, min-dom@^4.0.3:
+  version "4.1.0"
+  resolved "https://registry.npmmirror.com/min-dom/-/min-dom-4.1.0.tgz#ecbf9a2d0412ffe4ddc14253d65d15b47b6b4bf8"
+  integrity sha512-1lj1EyoSwY/UmTeT/hhPiZTsq+vK9D+8FAJ/53iK5jT1otkG9rJTixSKdjmTieEvdfES+sKbbTptzaQJhnacjA==
   dependencies:
-    component-event "^0.1.4"
-    domify "^1.3.1"
-    indexof "0.0.1"
-    matches-selector "^1.2.0"
-    min-dash "^3.8.1"
+    component-event "^0.2.1"
+    domify "^1.4.1"
+    min-dash "^4.0.0"
 
 min-indent@^1.0.0:
   version "1.0.1"
@@ -7084,21 +7090,21 @@ mockjs@^1.1.0:
   dependencies:
     commander "*"
 
-moddle-xml@^9.0.6:
-  version "9.0.6"
-  resolved "https://registry.npmmirror.com/moddle-xml/-/moddle-xml-9.0.6.tgz#282b2a2232065a82556ba3fbbe3010b374f95cbf"
-  integrity sha512-tl0reHpsY/aKlLGhXeFlQWlYAQHFxTkFqC8tq8jXRYpQSnLVw13T6swMaourLd7EXqHdWsc+5ggsB+fEep6xZQ==
+moddle-xml@^10.0.0:
+  version "10.1.0"
+  resolved "https://registry.npmmirror.com/moddle-xml/-/moddle-xml-10.1.0.tgz#8c2a1b73c73cc8915182d5374857c43ba482c7a5"
+  integrity sha512-erWckwLt+dYskewKXJso9u+aAZ5172lOiYxSOqKCPTy7L/xmqH1PoeoA7eVC7oJTt3PqF5TkZzUmbjGH6soQBg==
   dependencies:
-    min-dash "^3.5.2"
-    moddle "^5.0.2"
+    min-dash "^4.0.0"
+    moddle "^6.0.0"
     saxen "^8.1.2"
 
-moddle@^5.0.2:
-  version "5.0.4"
-  resolved "https://registry.npmmirror.com/moddle/-/moddle-5.0.4.tgz#1108c9ff210df552ef4589513e620d171e4468e6"
-  integrity sha512-Kjb+hjuzO+YlojNGxEUXvdhLYTHTtAABDlDcJTtTcn5MbJF9Zkv4I1Fyvp3Ypmfgg1EfHDZ3PsCQTuML9JD6wg==
+moddle@^6.0.0:
+  version "6.2.1"
+  resolved "https://registry.npmmirror.com/moddle/-/moddle-6.2.1.tgz#822163908b96b81f5f086441a558198feec735aa"
+  integrity sha512-rBT4P19k9wKOerFHNJQugw25CK6DK5m4lVZGac7godbWNPsbJgr1K4GJ+pqM1ErbRYxljXCTDgPhJLoDWE4wwQ==
   dependencies:
-    min-dash "^3.0.0"
+    min-dash "^4.0.0"
 
 modify-values@^1.0.0:
   version "1.0.1"
@@ -7659,7 +7665,7 @@ path-exists@^4.0.0:
   resolved "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
   integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
 
-path-intersection@^2.2.0:
+path-intersection@^2.2.1:
   version "2.2.1"
   resolved "https://registry.npmmirror.com/path-intersection/-/path-intersection-2.2.1.tgz#8476b75fefb7ac402f810d304e0eb0c080c11fe7"
   integrity sha512-9u8xvMcSfuOiStv9bPdnRJQhGQXLKurew94n4GPQCdH1nj9QKC9ObbNoIpiRq8skiOBxKkt277PgOoFgAt3/rA==
@@ -7917,6 +7923,11 @@ posthtml@^0.9.2:
     posthtml-parser "^0.2.0"
     posthtml-render "^1.0.5"
 
+preact@^10.11.2:
+  version "10.13.1"
+  resolved "https://registry.npmmirror.com/preact/-/preact-10.13.1.tgz#d220bd8771b8fa197680d4917f3cefc5eed88720"
+  integrity sha512-KyoXVDU5OqTpG9LXlB3+y639JAGzl8JSBXLn1J9HTSB3gbKcuInga7bZnXLlxmK94ntTs1EFeZp0lrja2AuBYQ==
+
 preact@^10.5.13:
   version "10.11.3"
   resolved "https://registry.npmmirror.com/preact/-/preact-10.11.3.tgz#8a7e4ba19d3992c488b0785afcc0f8aa13c78d19"
@@ -9340,10 +9351,10 @@ timed-out@^4.0.0, timed-out@^4.0.1:
   resolved "https://registry.npmmirror.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
   integrity sha512-G7r3AhovYtr5YKOWQkta8RKAPb+J9IsO4uVmzjl8AZwfhs8UcUwTiD6gcJYSgOtzyjvQKrKYn41syHbUWMkafA==
 
-tiny-svg@^2.2.1, tiny-svg@^2.2.2:
-  version "2.2.4"
-  resolved "https://registry.npmmirror.com/tiny-svg/-/tiny-svg-2.2.4.tgz#8d4a16bd2c4644c8444fd3c2ece91db7631cfb35"
-  integrity sha512-NOi39lBknf4UdDEahNkbEAJnzhu1ZcN2j75IS2vLRmIhsfxdZpTChfLKBcN1ShplVmPIXJAIafk6YY5/Aa80lQ==
+tiny-svg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/tiny-svg/-/tiny-svg-3.0.0.tgz#2a441d7f9cb27982e548e757f86a0a123a6f7e38"
+  integrity sha512-+u6VomQO7MbI7CQe5q1IwNePpbVKG/HVdUQBmaEpSCdP/QmeyjhrS6WKFsNetXlvf9LWu/f5woRqjMdxBMe/0w==
 
 tiny-warning@^1.0.3:
   version "1.0.3"
-- 
Gitee


From 110bcd7d5e55cb4428da4a9b7106889b07d71b0a Mon Sep 17 00:00:00 2001
From: xxm <xxm1995@outlook.com>
Date: Wed, 15 Mar 2023 19:52:55 +0800
Subject: [PATCH 21/28] =?UTF-8?q?build=20bpmn.js=E7=89=88=E6=9C=AC?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E4=B8=BA10.x?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json |  2 +-
 yarn.lock    | 58 ++++++++++++++++++----------------------------------
 2 files changed, 21 insertions(+), 39 deletions(-)

diff --git a/package.json b/package.json
index 0d61832..e0c9beb 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@zxcvbn-ts/core": "^2.0.1",
     "ant-design-vue": "^3.2.15",
     "axios": "^0.26.1",
-    "bpmn-js": "^11.5.0",
+    "bpmn-js": "^10.3.0",
     "codemirror": "^5.65.3",
     "cron-parser": "^4.6.0",
     "cropperjs": "^1.5.12",
diff --git a/yarn.lock b/yarn.lock
index a6e37eb..e1efcf6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -974,14 +974,6 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
-"@bpmn-io/diagram-js-ui@^0.2.2":
-  version "0.2.2"
-  resolved "https://registry.npmmirror.com/@bpmn-io/diagram-js-ui/-/diagram-js-ui-0.2.2.tgz#f182476e820641901c10d0079dcfe7b5b022b9f6"
-  integrity sha512-IgOIxOwoqsFB2mMPdXtcbPVPjdYkZ3huW7ipowYLhg5jdRGHlBronQ+LER+lfWro6sPtzEsw7qX8D8Yq9M2S5g==
-  dependencies:
-    htm "^3.1.1"
-    preact "^10.11.2"
-
 "@commitlint/cli@^16.2.3":
   version "16.3.0"
   resolved "https://registry.npmmirror.com/@commitlint/cli/-/cli-16.3.0.tgz#5689f5c2abbb7880d5ff13329251e5648a784b16"
@@ -2800,18 +2792,19 @@ boolbase@^1.0.0:
   resolved "https://registry.npmmirror.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
-bpmn-js@^11.5.0:
-  version "11.5.0"
-  resolved "https://registry.npmmirror.com/bpmn-js/-/bpmn-js-11.5.0.tgz#0f8a896637a3335173c1734e52d40ed8b5abf651"
-  integrity sha512-Bdj53UvfiDtGE1wmiBmpgjl5RMLhCGV/C841dyC+t4kBHj7vApAeeHs2Qiycj390HO4B2U8UDROLT7yjdXEEUA==
+bpmn-js@^10.3.0:
+  version "10.3.0"
+  resolved "https://registry.npmmirror.com/bpmn-js/-/bpmn-js-10.3.0.tgz#631f8f35f6fce4e78b6025ec325a8eb7ccf9aad8"
+  integrity sha512-6tO5SHt5YyxgX9lRAAwYNmtSum4ZAekP6S0kdDlmh2ztDRAjUZaq7n1Q1ORzTddpngviRZyf5ssP1ZqjE6CgUQ==
   dependencies:
     bpmn-moddle "^8.0.0"
-    diagram-js "^11.9.1"
+    css.escape "^1.5.1"
+    diagram-js "^10.0.0"
     diagram-js-direct-editing "^2.0.0"
     ids "^1.0.0"
     inherits-browser "^0.1.0"
     min-dash "^4.0.0"
-    min-dom "^4.0.3"
+    min-dom "^4.0.2"
     object-refs "^0.3.0"
     tiny-svg "^3.0.0"
 
@@ -3203,11 +3196,6 @@ clone@^2.1.1:
   resolved "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
 
-clsx@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.npmmirror.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
-  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
-
 codemirror@^5.65.3:
   version "5.65.6"
   resolved "https://registry.npmmirror.com/codemirror/-/codemirror-5.65.6.tgz#fc313797331cbeb3bcab0652d1ec9d0f40c23ab5"
@@ -3700,6 +3688,11 @@ css-what@^6.0.1:
   resolved "https://registry.npmmirror.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
   integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
 
+css.escape@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.npmmirror.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+  integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -3930,14 +3923,13 @@ diagram-js-direct-editing@^2.0.0:
     min-dash "^4.0.0"
     min-dom "^4.0.2"
 
-diagram-js@^11.9.1:
-  version "11.11.0"
-  resolved "https://registry.npmmirror.com/diagram-js/-/diagram-js-11.11.0.tgz#2c44aebc5197eca43df8394598b2faabcdff1692"
-  integrity sha512-+GJ6NPCihQBOqLKAjrXE+bQNYIhFjrCQgYHfPb22OcrYJ9k6vkTfJfG5PsyJ9P/AEIrXwTnrJAff/iKU1RgfAA==
+diagram-js@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.npmmirror.com/diagram-js/-/diagram-js-10.0.0.tgz#0209283c819eda86f9bdddca9266cc5fd910a650"
+  integrity sha512-VtZof5MLwVpHjTznfS7B1rQxYtpJ1Gyzse7Aan22QgMhD8FDpm0nXcIblkB//05vFJUljJfp9etNujJtmU1yvA==
   dependencies:
-    "@bpmn-io/diagram-js-ui" "^0.2.2"
-    clsx "^1.2.1"
-    didi "^9.0.2"
+    css.escape "^1.5.1"
+    didi "^9.0.0"
     hammerjs "^2.0.1"
     inherits-browser "^0.1.0"
     min-dash "^4.0.0"
@@ -3946,7 +3938,7 @@ diagram-js@^11.9.1:
     path-intersection "^2.2.1"
     tiny-svg "^3.0.0"
 
-didi@^9.0.2:
+didi@^9.0.0:
   version "9.0.2"
   resolved "https://registry.npmmirror.com/didi/-/didi-9.0.2.tgz#e49a80aa281b5672e45519ba1980d7fba2e32cfb"
   integrity sha512-q2+aj+lnJcUweV7A9pdUrwFr4LHVmRPwTmQLtHPFz4aT7IBoryN6Iy+jmFku+oIzr5ebBkvtBCOb87+dJhb7bg==
@@ -5648,11 +5640,6 @@ hosted-git-info@^4.0.0, hosted-git-info@^4.0.1:
   dependencies:
     lru-cache "^6.0.0"
 
-htm@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.npmmirror.com/htm/-/htm-3.1.1.tgz#49266582be0dc66ed2235d5ea892307cc0c24b78"
-  integrity sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==
-
 html-minifier-terser@^6.1.0:
   version "6.1.0"
   resolved "https://registry.npmmirror.com/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#bfc818934cc07918f6b3669f5774ecdfd48f32ab"
@@ -7033,7 +7020,7 @@ min-dash@^4.0.0:
   resolved "https://registry.npmmirror.com/min-dash/-/min-dash-4.0.0.tgz#4a1afec4c4d70f510b6e241d0550493d4ac0f161"
   integrity sha512-piIvVJ/nxuA4+LpnYIzF6oCtRvdtDvQJteSC+H768H2UvPKFKIt5oiJnUVtr0ZdchneXTcvUZ91vIrvWVIN0AA==
 
-min-dom@^4.0.2, min-dom@^4.0.3:
+min-dom@^4.0.2:
   version "4.1.0"
   resolved "https://registry.npmmirror.com/min-dom/-/min-dom-4.1.0.tgz#ecbf9a2d0412ffe4ddc14253d65d15b47b6b4bf8"
   integrity sha512-1lj1EyoSwY/UmTeT/hhPiZTsq+vK9D+8FAJ/53iK5jT1otkG9rJTixSKdjmTieEvdfES+sKbbTptzaQJhnacjA==
@@ -7923,11 +7910,6 @@ posthtml@^0.9.2:
     posthtml-parser "^0.2.0"
     posthtml-render "^1.0.5"
 
-preact@^10.11.2:
-  version "10.13.1"
-  resolved "https://registry.npmmirror.com/preact/-/preact-10.13.1.tgz#d220bd8771b8fa197680d4917f3cefc5eed88720"
-  integrity sha512-KyoXVDU5OqTpG9LXlB3+y639JAGzl8JSBXLn1J9HTSB3gbKcuInga7bZnXLlxmK94ntTs1EFeZp0lrja2AuBYQ==
-
 preact@^10.5.13:
   version "10.11.3"
   resolved "https://registry.npmmirror.com/preact/-/preact-10.11.3.tgz#8a7e4ba19d3992c488b0785afcc0f8aa13c78d19"
-- 
Gitee


From 53f71610e4deeff3f3e10c3af2a21393559ec72e Mon Sep 17 00:00:00 2001
From: xxm1995 <xxm1995@outlook.com>
Date: Fri, 17 Mar 2023 17:51:20 +0800
Subject: [PATCH 22/28] =?UTF-8?q?fix=20=E6=B5=81=E7=A8=8B=E5=9B=BE?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Bpmn/WorkflowBpmnModeler.vue   |   2 +-
 .../Bpmn/flowable/{init.js => designData.ts}  |  11 +-
 .../CodeEditor/src/codemirror/CodeMirror.vue  |   1 +
 src/components/CodeEditor/src/typing.ts       |   1 +
 src/design/components/index.less              |   1 +
 src/design/components/vxeTable.less           |  23 +
 src/views/modules/bpm/design/ProcessDesign.ts |   0
 .../modules/bpm/design/ProcessDesign.vue      | 454 ++++++++++++++++--
 .../modules/bpm/instance/InstanceList.vue     |   4 +-
 src/views/modules/bpm/model/BpmModelList.vue  |   6 +-
 src/views/modules/bpm/model/BpmModeler.vue    | 143 +++---
 src/views/modules/bpm/model/Model.api.ts      |   2 +-
 12 files changed, 521 insertions(+), 127 deletions(-)
 rename src/components/Bpmn/flowable/{init.js => designData.ts} (87%)
 create mode 100644 src/design/components/vxeTable.less
 create mode 100644 src/views/modules/bpm/design/ProcessDesign.ts

diff --git a/src/components/Bpmn/WorkflowBpmnModeler.vue b/src/components/Bpmn/WorkflowBpmnModeler.vue
index 5f95e37..832c39d 100644
--- a/src/components/Bpmn/WorkflowBpmnModeler.vue
+++ b/src/components/Bpmn/WorkflowBpmnModeler.vue
@@ -134,7 +134,7 @@
   import Modeler from 'bpmn-js/lib/Modeler'
   import panel from './PropertyPanel'
   import BpmData from './BpmData'
-  import getInitStr from './flowable/init'
+  import getInitStr from './flowable/designData'
   // 引入flowable的节点文件
   import flowableModdle from './flowable/flowable.json'
 
diff --git a/src/components/Bpmn/flowable/init.js b/src/components/Bpmn/flowable/designData.ts
similarity index 87%
rename from src/components/Bpmn/flowable/init.js
rename to src/components/Bpmn/flowable/designData.ts
index 4a74c35..dc4966f 100644
--- a/src/components/Bpmn/flowable/init.js
+++ b/src/components/Bpmn/flowable/designData.ts
@@ -1,9 +1,14 @@
-
-function randomStr () {
+/**
+ * 随机数
+ */
+function randomStr() {
   return Math.random().toString(36).slice(-8)
 }
 
-export default function () {
+/**
+ * 获取流程图初始化数据
+ */
+export function getInitBpmnData() {
   return `<?xml version="1.0" encoding="UTF-8"?>
     <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" targetNamespace="http://www.flowable.org/processdef">
       <process id="process_${randomStr()}" name="name_${randomStr()}">
diff --git a/src/components/CodeEditor/src/codemirror/CodeMirror.vue b/src/components/CodeEditor/src/codemirror/CodeMirror.vue
index 6dd058d..14a31a7 100644
--- a/src/components/CodeEditor/src/codemirror/CodeMirror.vue
+++ b/src/components/CodeEditor/src/codemirror/CodeMirror.vue
@@ -17,6 +17,7 @@
   import 'codemirror/mode/javascript/javascript'
   import 'codemirror/mode/css/css'
   import 'codemirror/mode/htmlmixed/htmlmixed'
+  import 'codemirror/mode/xml/xml'
 
   const props = defineProps({
     mode: {
diff --git a/src/components/CodeEditor/src/typing.ts b/src/components/CodeEditor/src/typing.ts
index 34b5ed1..cfdcf97 100644
--- a/src/components/CodeEditor/src/typing.ts
+++ b/src/components/CodeEditor/src/typing.ts
@@ -2,4 +2,5 @@ export enum MODE {
   JSON = 'application/json',
   HTML = 'htmlmixed',
   JS = 'javascript',
+  XML = 'xml',
 }
diff --git a/src/design/components/index.less b/src/design/components/index.less
index 79d53f9..2d52363 100644
--- a/src/design/components/index.less
+++ b/src/design/components/index.less
@@ -1,3 +1,4 @@
 @import "antdv.less";
 @import "global.less";
 @import "wangEditor.less";
+@import "vxeTable.less";
diff --git a/src/design/components/vxeTable.less b/src/design/components/vxeTable.less
new file mode 100644
index 0000000..1c86969
--- /dev/null
+++ b/src/design/components/vxeTable.less
@@ -0,0 +1,23 @@
+// vxe模态框样式
+.vxe-modal--wrapper{
+  // 层级与保持antdv一致
+  z-index: 1000 !important;
+  .vxe-modal--box{
+    .vxe-modal--footer{
+      padding: .8em 1em;
+      border-top: 1px solid #ebeef5;
+      .ant-btn{
+        margin-left: 10px;
+      }
+    }
+  }
+}
+// vxe表格相关
+.vxe-custom--option-wrapper{
+  // 需要低于顶栏
+  z-index: 8 !important;
+}
+.vxe-table--border-line{
+  // 需要低于顶栏
+  z-index: 8 !important;
+}
diff --git a/src/views/modules/bpm/design/ProcessDesign.ts b/src/views/modules/bpm/design/ProcessDesign.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/modules/bpm/design/ProcessDesign.vue b/src/views/modules/bpm/design/ProcessDesign.vue
index 207d9f1..3fb9e90 100644
--- a/src/views/modules/bpm/design/ProcessDesign.vue
+++ b/src/views/modules/bpm/design/ProcessDesign.vue
@@ -1,6 +1,71 @@
 <template>
-  <div class="flow-containers view-mode" style="height: 100%">
-    <div ref="canvas" id="canvas" class="canvas"></div>
+  <div class="flow-containers" style="height: 100%" :class="{ 'view-mode': isView }">
+    <a-layout style="height: 100%">
+      <a-layout-header theme="light" style="border-bottom: 1px solid rgb(218 218 218); height: auto; background-color: #fff">
+        <div v-if="isView" style="display: flex; padding: 5px 0px; justify-content: space-between">
+          <a-space>
+            <a-upload v-if="isEdit" name="file" action="" accept=".bpmn,.xml" :showUploadList="false" :beforeUpload="openBpmn">
+              <a-tooltip effect="dark" title="打开" placement="bottom">
+                <a-button>
+                  <Icon icon="ant-design:folder-open-outlined" />
+                </a-button>
+              </a-tooltip>
+            </a-upload>
+            <a-tooltip v-if="isEdit" effect="dark" title="清空" placement="bottom">
+              <a-button @click="clearDiagram">
+                <Icon icon="ant-design:delete-outlined" />
+              </a-button>
+            </a-tooltip>
+            <a-tooltip effect="dark" title="自适应屏幕" placement="bottom">
+              <a-button @click="fitViewport">
+                <Icon icon="ant-design:eye-outlined" />
+              </a-button>
+            </a-tooltip>
+            <a-tooltip effect="dark" title="放大" placement="bottom">
+              <a-button @click="zoomViewport(true)">
+                <Icon icon="ant-design:zoom-in-outlined" />
+              </a-button>
+            </a-tooltip>
+            <a-tooltip effect="dark" title="缩小" placement="bottom">
+              <a-button @click="zoomViewport(false)">
+                <Icon icon="ant-design:zoom-out-outlined" />
+              </a-button>
+            </a-tooltip>
+            <a-tooltip effect="dark" title="撤销(增删操作有效)" placement="bottom">
+              <a-button @click="undo">
+                <Icon icon="ant-design:undo-outlined" />
+              </a-button>
+            </a-tooltip>
+            <a-tooltip title="重做(增删操作有效)" placement="bottom">
+              <a-button @click="redo">
+                <Icon icon="ant-design:redo-outlined" />
+              </a-button>
+            </a-tooltip>
+            <slot name="header-left"></slot>
+          </a-space>
+          <a-space>
+            <slot name="header-right"></slot>
+            <a-button @click="showXML" preIcon="ant-design:eye-outlined"> XML </a-button>
+            <a-button @click="downXML(true)" preIcon="ant-design:download-outlined">XML </a-button>
+            <a-button @click="downImg('svg', true)" preIcon="ant-design:download-outlined"> SVG </a-button>
+            <a-button type="primary" @click="saveXML" v-if="isEdit" preIcon="ant-design:cloud-upload-outlined"> 保存 </a-button>
+            <a-button type="danger" @click="cancel" preIcon="ant-design:close-outlined"> 关闭 </a-button>
+          </a-space>
+        </div>
+      </a-layout-header>
+      <a-layout style="align-items: stretch">
+        <a-layout-content style="padding: 0; margin-top: 10px">
+          <div id="canvas" ref="canvas" class="canvas"></div>
+        </a-layout-content>
+      </a-layout>
+    </a-layout>
+    <!--  xml预览  -->
+    <basic-modal v-bind="$attrs" width="60%" title="XML" :visible="codeVisible" @cancel="codeVisible = false">
+      <div>
+        <code-editor readonly v-model:value="xmlCode" :mode="MODE.XML" />
+      </div>
+      <template #footer> </template>
+    </basic-modal>
   </div>
 </template>
 
@@ -9,44 +74,304 @@
   import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
   import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
   import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
+
   import Modeler from 'bpmn-js/lib/Modeler'
 
-  import { nextTick } from 'vue'
+  import { nextTick, onMounted, watch, watchEffect } from 'vue'
   import customTranslate from '/@/components/Bpmn/common/customTranslate'
+  import { $ref } from 'vue/macros'
+  import Icon from '/@/components/Icon'
+  import BpmData from '/@/components/Bpmn/BpmData'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { getInitBpmnData } from '/@/components/Bpmn/flowable/designData'
+  import CodeEditor from '/@/components/CodeEditor/src/CodeEditor.vue'
+  import { MODE } from '/@/components/CodeEditor'
+  import BasicModal from '/@/components/Modal/src/BasicModal.vue'
 
-  // const xmlString = `<?xml version="1.0" encoding="UTF-8"?>
-  //   <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" targetNamespace="http://www.flowable.org/processdef">
-  //     <process id="process_123" name="name_321}">
-  //     </process>
-  //     <bpmndi:BPMNDiagram id="BPMNDiagram_flow">
-  //       <bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="T-2d89e7a3-ba79-4abd-9f64-ea59621c258c">
-  //       </bpmndi:BPMNPlane>
-  //     </bpmndi:BPMNDiagram>
-  //   </definitions>
-  //   `
-  const xmlString =
-    '<?xml version="1.0" encoding="UTF-8"?>\n<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.flowable.org/processdef">\n  <process id="lffp56gv" name="分支测试">\n    <startEvent id="Event_05npxwe">\n      <outgoing>Flow_1sb4bbn</outgoing>\n    </startEvent>\n    <sequenceFlow id="Flow_1sb4bbn" sourceRef="Event_05npxwe" targetRef="tx" />\n    <userTask id="tx" name="填写">\n      <incoming>Flow_1sb4bbn</incoming>\n      <outgoing>Flow_0c60bsu</outgoing>\n    </userTask>\n    <sequenceFlow id="Flow_0c60bsu" sourceRef="tx" targetRef="Gateway_0k9yetc" />\n    <sequenceFlow id="Flow_1l7upty" sourceRef="Gateway_0k9yetc" targetRef="dlb">\n      <conditionExpression xsi:type="tFormalExpression">${nextNode == \'dlb\'}</conditionExpression>\n    </sequenceFlow>\n    <sequenceFlow id="Flow_06lyv1u" sourceRef="Gateway_0k9yetc" targetRef="xlb">\n      <conditionExpression xsi:type="tFormalExpression">${nextNode == \'xlb\'}</conditionExpression>\n    </sequenceFlow>\n    <sequenceFlow id="Flow_0b404pf" sourceRef="dlb" targetRef="Gateway_0y33msz" />\n    <inclusiveGateway id="Gateway_0y33msz">\n      <incoming>Flow_0b404pf</incoming>\n      <incoming>Flow_1vlmw9l</incoming>\n      <outgoing>Flow_1xiiwtx</outgoing>\n    </inclusiveGateway>\n    <sequenceFlow id="Flow_1vlmw9l" sourceRef="xlb" targetRef="Gateway_0y33msz" />\n    <exclusiveGateway id="Gateway_0k9yetc" name="网关">\n      <incoming>Flow_0c60bsu</incoming>\n      <outgoing>Flow_1l7upty</outgoing>\n      <outgoing>Flow_06lyv1u</outgoing>\n    </exclusiveGateway>\n    <sequenceFlow id="Flow_1xiiwtx" sourceRef="Gateway_0y33msz" targetRef="Activity_0c9kfh4" />\n    <endEvent id="Event_0t8uxuu">\n      <incoming>Flow_1tsxjyl</incoming>\n    </endEvent>\n    <sequenceFlow id="Flow_1tsxjyl" sourceRef="Activity_0c9kfh4" targetRef="Event_0t8uxuu" />\n    <userTask id="dlb" name="大老板">\n      <incoming>Flow_1l7upty</incoming>\n      <outgoing>Flow_0b404pf</outgoing>\n    </userTask>\n    <userTask id="xlb" name="小老板">\n      <incoming>Flow_06lyv1u</incoming>\n      <outgoing>Flow_1vlmw9l</outgoing>\n    </userTask>\n    <userTask id="Activity_0c9kfh4" name="备注">\n      <incoming>Flow_1xiiwtx</incoming>\n      <outgoing>Flow_1tsxjyl</outgoing>\n    </userTask>\n  </process>\n  <bpmndi:BPMNDiagram id="BPMNDiagram_flow">\n    <bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="lffp56gv">\n      <bpmndi:BPMNEdge id="Flow_1tsxjyl_di" bpmnElement="Flow_1tsxjyl">\n        <di:waypoint x="370" y="-40" />\n        <di:waypoint x="492" y="-40" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1xiiwtx_di" bpmnElement="Flow_1xiiwtx">\n        <di:waypoint x="155" y="-40" />\n        <di:waypoint x="270" y="-40" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1vlmw9l_di" bpmnElement="Flow_1vlmw9l">\n        <di:waypoint x="-40" y="70" />\n        <di:waypoint x="130" y="70" />\n        <di:waypoint x="130" y="-15" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0b404pf_di" bpmnElement="Flow_0b404pf">\n        <di:waypoint x="-10" y="-180" />\n        <di:waypoint x="130" y="-180" />\n        <di:waypoint x="130" y="-65" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_06lyv1u_di" bpmnElement="Flow_06lyv1u">\n        <di:waypoint x="-220" y="-35" />\n        <di:waypoint x="-220" y="70" />\n        <di:waypoint x="-140" y="70" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1l7upty_di" bpmnElement="Flow_1l7upty">\n        <di:waypoint x="-220" y="-85" />\n        <di:waypoint x="-220" y="-180" />\n        <di:waypoint x="-110" y="-180" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0c60bsu_di" bpmnElement="Flow_0c60bsu">\n        <di:waypoint x="-300" y="-60" />\n        <di:waypoint x="-245" y="-60" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1sb4bbn_di" bpmnElement="Flow_1sb4bbn">\n        <di:waypoint x="-452" y="-60" />\n        <di:waypoint x="-400" y="-60" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNShape id="Event_05npxwe_di" bpmnElement="Event_05npxwe">\n        <dc:Bounds x="-488" y="-78" width="36" height="36" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_06lpzky_di" bpmnElement="tx">\n        <dc:Bounds x="-400" y="-100" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Gateway_0ji3ola_di" bpmnElement="Gateway_0y33msz">\n        <dc:Bounds x="105" y="-65" width="50" height="50" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Gateway_052rzhs_di" bpmnElement="Gateway_0k9yetc" isMarkerVisible="true">\n        <dc:Bounds x="-245" y="-85" width="50" height="50" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="-192" y="-67" width="23" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Event_0t8uxuu_di" bpmnElement="Event_0t8uxuu">\n        <dc:Bounds x="492" y="-58" width="36" height="36" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_03s9cvh_di" bpmnElement="dlb">\n        <dc:Bounds x="-110" y="-220" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_0jagpnz_di" bpmnElement="xlb">\n        <dc:Bounds x="-140" y="30" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_1v7ieyj_di" bpmnElement="Activity_0c9kfh4">\n        <dc:Bounds x="270" y="-80" width="100" height="80" />\n      </bpmndi:BPMNShape>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>\n'
-
-  nextTick(async () => {
-    const modeler = new Modeler({
-      container: '#canvas',
-      propertiesPanel: {},
-      additionalModules: [
-        {
-          translate: ['value', customTranslate], // 翻译
-          // paletteProvider: ['value', ''], // 禁用/清空左侧工具栏
-          // labelEditingProvider: ['value', ''], // 禁用节点编辑
-          contextPadProvider: ['value', ''], // 禁用图形菜单
-          // bendpoints: ['value', {}], // 禁用连线拖动
-          // zoomScroll: ['value', ''], // 禁用滚动画布
-          // moveCanvas: ['value', ''], // 禁用拖动画布
-          // move: ['value', ''], // 禁用单个图形拖动
-        },
-      ],
-      moddleExtensions: {},
-    })
-    await modeler.importXML(xmlString)
+  const emit = defineEmits(['save', 'cancel'])
+  const { createConfirm } = useMessage()
+
+  interface Props {
+    // 是否编辑状态
+    isEdit?: boolean
+    // 是否预览状态
+    isView?: boolean
+    // bpmn 文件内容
+    xml?: string
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    isEdit: true,
+    isView: false,
+    xml: '',
   })
+
+  watch(props, () => {
+    init()
+  })
+
+  // 实例
+  let modeler
+  let canvas = $ref<any>()
+  // 工具配置栏
+  let paletteToolShow = $ref(true)
+  // xml代码预览
+  let codeVisible = $ref(false)
+  let xmlCode = $ref('')
+  // let paletteFilters = $ref<any>([])
+
+  // 缩放
+  let zoom = $ref(1)
+  // 编辑时参数
+  const isEditModules = [
+    {
+      translate: ['value', customTranslate], // 翻译
+    },
+  ]
+  // 查看时参数
+  const notEditModules = [
+    {
+      translate: ['value', customTranslate], // 翻译
+      paletteProvider: ['value', ''], // 禁用/清空左侧工具栏
+      labelEditingProvider: ['value', ''], // 禁用节点编辑
+      contextPadProvider: ['value', ''], // 禁用图形菜单
+      bendpoints: ['value', {}], // 禁用连线拖动
+      move: ['value', ''], // 禁用单个图形拖动
+    },
+  ]
+
+  /**
+   * 初始化
+   */
+  function init() {
+    nextTick(async () => {
+      const xml = props.xml || getInitBpmnData()
+      const additionalModule = props.isEdit && !props.isView ? isEditModules : notEditModules
+      console.log(props.isEdit, props.isView)
+      modeler = new Modeler({
+        container: '#canvas',
+        propertiesPanel: {},
+        additionalModules: additionalModule,
+        moddleExtensions: {},
+      })
+      await createNewDiagram(xml)
+    })
+  }
+
+  /**
+   * 获取流程元素
+   */
+  function getProcessElement() {
+    const rootElements = modeler.getDefinitions().rootElements
+    for (let i = 0; i < rootElements.length; i++) {
+      if (rootElements[i].$type === 'bpmn:Process') return rootElements[i]
+    }
+  }
+
+  /**
+   * 撤消
+   */
+  function undo() {
+    modeler.get('commandStack').undo()
+  }
+  /**
+   * 重做
+   */
+  function redo() {
+    modeler.get('commandStack').redo()
+  }
+
+  /**
+   * 查看 bpmn.xml
+   */
+  async function showXML() {
+    xmlCode = await downXML(false)
+    codeVisible = true
+  }
+  /**
+   * 下载 bpmn.xml
+   */
+  async function downXML(download = false) {
+    try {
+      const { xml } = await modeler.saveXML({ format: true })
+      if (download) {
+        downloadFile(`${getProcessElement().name}.bpmn20.xml`, xml, 'application/xml')
+      }
+      return xml
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  /**
+   * 下载图片
+   */
+  async function downImg(type = 'svg', download = false) {
+    try {
+      const { svg } = await modeler.saveSVG({ format: true })
+      if (download) {
+        downloadFile(getProcessElement().name, svg, 'image/svg+xml')
+      }
+      return svg
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  /**
+   * 保存
+   */
+  async function saveXML() {
+    const xml = await downXML()
+    emit('save', xml)
+  }
+
+  /**
+   * 关闭
+   */
+  function cancel() {
+    emit('cancel')
+  }
+
+  /**
+   * 打开 bpmn.xml 文件
+   */
+  function openBpmn(file) {
+    const reader = new FileReader()
+    reader.readAsText(file, 'utf-8')
+    reader.onload = () => {
+      createNewDiagram(reader.result)
+    }
+    return false
+  }
+  /**
+   * 新建画布
+   */
+  function newDiagram() {
+    createNewDiagram(getInitBpmnData())
+  }
+  /**
+   * 让图能自适应屏幕
+   */
+  function fitViewport() {
+    zoom = modeler.get('canvas').zoom('fit-viewport')
+    // @ts-ignore
+    const bbox = document.querySelector('.flow-containers .viewport').getBBox()
+    const currentViewBox = modeler.get('canvas').viewbox()
+    const elementMid = {
+      x: bbox.x + bbox.width / 2 - 65,
+      y: bbox.y + bbox.height / 2,
+    }
+    modeler.get('canvas').viewbox({
+      x: elementMid.x - currentViewBox.width / 2,
+      y: elementMid.y - currentViewBox.height / 2,
+      width: currentViewBox.width,
+      height: currentViewBox.height,
+    })
+    zoom = (bbox.width / currentViewBox.width) * 1.8
+  }
+  /**
+   * 放大缩小
+   */
+  function zoomViewport(zoomIn = true) {
+    zoom = modeler.get('canvas').zoom()
+    zoom += zoomIn ? 0.1 : -0.1
+    modeler.get('canvas').zoom(zoom)
+  }
+  /**
+   * 调整左侧工具栏排版
+   */
+  function adjustPalette() {
+    try {
+      // 获取 bpmn 设计器实例
+      const djsPalette = canvas.children[0].children[1].children[4]
+      if (!djsPalette) {
+        return
+      }
+      const djsPalStyle = {
+        width: '130px',
+        padding: '5px',
+        background: 'white',
+        left: '20px',
+        borderRadius: 0,
+      }
+      for (let key in djsPalStyle) {
+        djsPalette.style[key] = djsPalStyle[key]
+      }
+      const palette = djsPalette.children[0]
+      const allGroups = palette.children
+      // 是否隐藏工具栏
+      if (!paletteToolShow) {
+        allGroups[0].style['display'] = 'none'
+      }
+
+      // 修改控件样式
+      for (const gKey in allGroups) {
+        const group = allGroups[gKey]
+        for (const cKey in group.children) {
+          const control = group.children[cKey]
+          const controlStyle = {
+            display: 'flex',
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+            width: '100%',
+            padding: '5px',
+          }
+          if (control.className && control.dataset && control.className.indexOf('entry') !== -1) {
+            const controlProps = new BpmData().getControl(control.dataset.action)
+            control.innerHTML = `<div style='font-size: 14px;font-weight:500;margin-left:15px;'>${controlProps['title']}</div>`
+            for (let csKey in controlStyle) {
+              control.style[csKey] = controlStyle[csKey]
+            }
+
+            // 过滤扩展栏
+            // if (paletteFilters.indexOf(control.dataset.action) !== -1) {
+            //   control.style['display'] = 'none'
+            //   continue
+            // }
+          }
+        }
+      }
+    } catch (e) {
+      console.error(e)
+    }
+  }
+  /**
+   * 创建新画布
+   */
+  async function createNewDiagram(data) {
+    // 将字符串转换成图显示出来
+    data = data.replace(/<!\[CDATA\[(.+?)]]>/g, function (match, str) {
+      return str.replace(/</g, '&lt;')
+    })
+    await modeler.importXML(data)
+    await adjustPalette()
+    fitViewport()
+  }
+  /**
+   * 清除画布
+   */
+  function clearDiagram() {
+    createConfirm({
+      iconType: 'info',
+      title: '警告',
+      content: '是否要清空画布!',
+      onOk: () => {
+        newDiagram()
+      },
+    })
+  }
+
+  /**
+   * 下载文件
+   */
+  function downloadFile(filename, data, type) {
+    const a = document.createElement('a')
+    const url = window.URL.createObjectURL(new Blob([data], { type: type }))
+    a.href = url
+    a.download = filename
+    a.click()
+    window.URL.revokeObjectURL(url)
+  }
 </script>
 
 <style lang="less" scoped>
@@ -54,4 +379,63 @@
     width: 100%;
     height: 100%;
   }
+  .view-mode {
+    .ant-layout-header,
+    .ant-layout-sider,
+    :deep(.djs-palette),
+    :deep(.bjs-powered-by) {
+      display: none;
+    }
+  }
+
+  html,
+  body,
+  #app {
+    height: 100%;
+  }
+
+  .flow-containers {
+    // background-color: #ffffff;
+    width: 100%;
+    height: 100%;
+    .canvas {
+      width: 100%;
+      height: 100%;
+    }
+    .panel {
+      position: absolute;
+      right: 0;
+      top: 50px;
+      //width: 400px;
+    }
+    .load {
+      margin-right: 10px;
+    }
+
+    .djs-palette {
+      left: 0 !important;
+      top: 0;
+      border-top: none;
+    }
+
+    .djs-container svg {
+      min-height: 650px;
+    }
+  }
+  :deep(.ant-layout-sider:hover) {
+    background: #0a97ce25 !important;
+  }
+
+  :deep(.ant-layout-sider) {
+    z-index: 2;
+  }
+
+  :deep(.CodeMirror) {
+    border: 1px solid #eee;
+  }
+
+  :deep(.djs-container) {
+    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+)
+      repeat !important;
+  }
 </style>
diff --git a/src/views/modules/bpm/instance/InstanceList.vue b/src/views/modules/bpm/instance/InstanceList.vue
index c32b05f..7779edc 100644
--- a/src/views/modules/bpm/instance/InstanceList.vue
+++ b/src/views/modules/bpm/instance/InstanceList.vue
@@ -81,7 +81,9 @@
   /**
    * 查看详情
    */
-  function show(record) {}
+  function show(record) {
+
+  }
   /**
    * 作废流程
    */
diff --git a/src/views/modules/bpm/model/BpmModelList.vue b/src/views/modules/bpm/model/BpmModelList.vue
index 547a33d..a28f528 100644
--- a/src/views/modules/bpm/model/BpmModelList.vue
+++ b/src/views/modules/bpm/model/BpmModelList.vue
@@ -142,7 +142,7 @@
    * 流程图设计
    */
   function bpmnEdit(record, isView) {
-    bpmModeler.init(record.id, isView)
+    bpmModeler.design(record.id, isView)
   }
   /**
    * 任务节点列表
@@ -198,6 +198,10 @@
       },
     })
   }
+
+  /**
+   * 校验
+   */
   function verifyBpmModel(record) {
     verifyModel(record.id).then(() => {
       createMessage.success('校验通过')
diff --git a/src/views/modules/bpm/model/BpmModeler.vue b/src/views/modules/bpm/model/BpmModeler.vue
index 04320f5..3daa517 100644
--- a/src/views/modules/bpm/model/BpmModeler.vue
+++ b/src/views/modules/bpm/model/BpmModeler.vue
@@ -1,100 +1,73 @@
 <template>
-  <basic-modal defaultFullscreen v-bind="$attrs" :width="750" :visible="visible" @cancel="visible = false">
-    <process-viewer
-      ref="processViewer"
-      :height="750"
-      :instance="instance"
-      :node-task-list="nodeTaskList"
-      :flow-node-list="flowNodeList"
-      :xml="bpmModel.modelEditorXml"
-    />
-<!--    <process-design/>-->
-  </basic-modal>
+  <vxe-modal fullscreen v-model="visible" :title="title" destroy-on-close :show-header="isView" :esc-closable="isView" :show-footer="false">
+    <process-design ref="processDesign" :xml="bpmModel.modelEditorXml" :is-edit="isEdit" @save="save" @cancel="cancel" />
+  </vxe-modal>
 </template>
 
 <script lang="ts" setup>
-  import ProcessViewer from '/@/components/Bpmn/ProcessViewer.vue'
   import { $ref } from 'vue/macros'
-  import BasicModal from '/@/components/Modal/src/BasicModal.vue'
+  import ProcessDesign from '/@/views/modules/bpm/design/ProcessDesign.vue'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { BpmModel, get, uploadBpmn } from './Model.api'
+  import { PUBLISHED } from '/@/views/modules/bpm/model/node/BpmModelNodeCode'
 
-  let visible = $ref<any>(false)
-  let instance = $ref<any>({})
-  let nodeTaskList = $ref<any>({})
-  let flowNodeList = $ref<any>([])
-  let bpmModel = $ref<any>({})
+  const { createConfirm, createMessage } = useMessage()
 
-  function init(id, isView: boolean) {
+  let visible = $ref<boolean>(false)
+  let isEdit = $ref<boolean>(true)
+  let isView = $ref<boolean>(false)
+  let bpmModel = $ref<BpmModel>({})
+
+  let title = $ref<string>('')
+
+  function design(id, view: boolean) {
     visible = true
-    instance = {
-      id: '1573964159274438656',
-      createTime: '2022-09-25 17:14:33',
-      lastModifiedTime: '2022-09-25 17:14:33',
-      version: 0,
-      instanceId: '1573964159266050048',
-      instanceName: '分支测试[小小明]',
-      modelId: '1570336760533303296',
-      defId: 'lffp56gv:5:1570336922374717440',
-      defName: '分支测试',
-      modelType: null,
-      startUserId: '1399985191002447872',
-      startUserName: '小小明',
-      state: 'running',
-      result: null,
-      startTime: '2022-09-25 17:14:33',
-      endTime: null,
-      formVariables: null,
-    }
-    nodeTaskList = {
-      tx: [
-        {
-          id: '1573964205348868096',
-          createTime: '2022-09-25 17:14:44',
-          lastModifiedTime: '2022-09-25 17:15:42',
-          version: 1,
-          taskId: '1573964159463182338',
-          executionId: '1573964159458988032',
-          instanceId: '1573964159266050048',
-          instanceName: '分支测试[小小明]',
-          defName: '分支测试',
-          nodeId: 'tx',
-          nodeName: '填写',
-          state: 'running',
-          result: null,
-          reason: null,
-          startTime: '2022-09-25 17:14:33',
-          endTime: null,
-          userId: '1414143554414059520',
-          userName: '小小明1995',
-          startUserId: '1399985191002447872',
-          startUserName: '小小明',
-          formVariables: {},
-        },
-      ],
-    }
-    flowNodeList = [
-      {
-        activityId: 'Event_05npxwe',
-        activityType: 'startEvent',
-        running: false,
-      },
-      {
-        activityId: 'Flow_1sb4bbn',
-        activityType: 'sequenceFlow',
-        running: false,
-      },
-      {
-        activityId: 'tx',
-        activityType: 'userTask',
-        running: false,
+    isView = view
+    get(id).then((res) => {
+      bpmModel = res.data
+      isEdit = bpmModel.publish !== PUBLISHED
+      title = `查看 ${bpmModel.name} 流程图`
+      // confirmLoading = false
+    })
+  }
+
+  /**
+   * 保存
+   */
+  function save(xml: string) {
+    createConfirm({
+      iconType: 'info',
+      title: '保存',
+      content: '是否保存该流程图',
+      onOk: () => {
+        uploadBpmn(bpmModel.id, xml)
+        createMessage.success('保存成功')
+        visible = false
       },
-    ]
-    bpmModel = {
-      modelEditorXml:
-        '<?xml version="1.0" encoding="UTF-8"?>\n<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.flowable.org/processdef">\n  <process id="lffp56gv" name="分支测试">\n    <startEvent id="Event_05npxwe">\n      <outgoing>Flow_1sb4bbn</outgoing>\n    </startEvent>\n    <sequenceFlow id="Flow_1sb4bbn" sourceRef="Event_05npxwe" targetRef="tx" />\n    <userTask id="tx" name="填写">\n      <incoming>Flow_1sb4bbn</incoming>\n      <outgoing>Flow_0c60bsu</outgoing>\n    </userTask>\n    <sequenceFlow id="Flow_0c60bsu" sourceRef="tx" targetRef="Gateway_0k9yetc" />\n    <sequenceFlow id="Flow_1l7upty" sourceRef="Gateway_0k9yetc" targetRef="dlb">\n      <conditionExpression xsi:type="tFormalExpression">${nextNode == \'dlb\'}</conditionExpression>\n    </sequenceFlow>\n    <sequenceFlow id="Flow_06lyv1u" sourceRef="Gateway_0k9yetc" targetRef="xlb">\n      <conditionExpression xsi:type="tFormalExpression">${nextNode == \'xlb\'}</conditionExpression>\n    </sequenceFlow>\n    <sequenceFlow id="Flow_0b404pf" sourceRef="dlb" targetRef="Gateway_0y33msz" />\n    <inclusiveGateway id="Gateway_0y33msz">\n      <incoming>Flow_0b404pf</incoming>\n      <incoming>Flow_1vlmw9l</incoming>\n      <outgoing>Flow_1xiiwtx</outgoing>\n    </inclusiveGateway>\n    <sequenceFlow id="Flow_1vlmw9l" sourceRef="xlb" targetRef="Gateway_0y33msz" />\n    <exclusiveGateway id="Gateway_0k9yetc" name="网关">\n      <incoming>Flow_0c60bsu</incoming>\n      <outgoing>Flow_1l7upty</outgoing>\n      <outgoing>Flow_06lyv1u</outgoing>\n    </exclusiveGateway>\n    <sequenceFlow id="Flow_1xiiwtx" sourceRef="Gateway_0y33msz" targetRef="Activity_0c9kfh4" />\n    <endEvent id="Event_0t8uxuu">\n      <incoming>Flow_1tsxjyl</incoming>\n    </endEvent>\n    <sequenceFlow id="Flow_1tsxjyl" sourceRef="Activity_0c9kfh4" targetRef="Event_0t8uxuu" />\n    <userTask id="dlb" name="大老板">\n      <incoming>Flow_1l7upty</incoming>\n      <outgoing>Flow_0b404pf</outgoing>\n    </userTask>\n    <userTask id="xlb" name="小老板">\n      <incoming>Flow_06lyv1u</incoming>\n      <outgoing>Flow_1vlmw9l</outgoing>\n    </userTask>\n    <userTask id="Activity_0c9kfh4" name="备注">\n      <incoming>Flow_1xiiwtx</incoming>\n      <outgoing>Flow_1tsxjyl</outgoing>\n    </userTask>\n  </process>\n  <bpmndi:BPMNDiagram id="BPMNDiagram_flow">\n    <bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="lffp56gv">\n      <bpmndi:BPMNEdge id="Flow_1tsxjyl_di" bpmnElement="Flow_1tsxjyl">\n        <di:waypoint x="370" y="-40" />\n        <di:waypoint x="492" y="-40" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1xiiwtx_di" bpmnElement="Flow_1xiiwtx">\n        <di:waypoint x="155" y="-40" />\n        <di:waypoint x="270" y="-40" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1vlmw9l_di" bpmnElement="Flow_1vlmw9l">\n        <di:waypoint x="-40" y="70" />\n        <di:waypoint x="130" y="70" />\n        <di:waypoint x="130" y="-15" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0b404pf_di" bpmnElement="Flow_0b404pf">\n        <di:waypoint x="-10" y="-180" />\n        <di:waypoint x="130" y="-180" />\n        <di:waypoint x="130" y="-65" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_06lyv1u_di" bpmnElement="Flow_06lyv1u">\n        <di:waypoint x="-220" y="-35" />\n        <di:waypoint x="-220" y="70" />\n        <di:waypoint x="-140" y="70" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1l7upty_di" bpmnElement="Flow_1l7upty">\n        <di:waypoint x="-220" y="-85" />\n        <di:waypoint x="-220" y="-180" />\n        <di:waypoint x="-110" y="-180" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0c60bsu_di" bpmnElement="Flow_0c60bsu">\n        <di:waypoint x="-300" y="-60" />\n        <di:waypoint x="-245" y="-60" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1sb4bbn_di" bpmnElement="Flow_1sb4bbn">\n        <di:waypoint x="-452" y="-60" />\n        <di:waypoint x="-400" y="-60" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNShape id="Event_05npxwe_di" bpmnElement="Event_05npxwe">\n        <dc:Bounds x="-488" y="-78" width="36" height="36" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_06lpzky_di" bpmnElement="tx">\n        <dc:Bounds x="-400" y="-100" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Gateway_0ji3ola_di" bpmnElement="Gateway_0y33msz">\n        <dc:Bounds x="105" y="-65" width="50" height="50" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Gateway_052rzhs_di" bpmnElement="Gateway_0k9yetc" isMarkerVisible="true">\n        <dc:Bounds x="-245" y="-85" width="50" height="50" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="-192" y="-67" width="23" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Event_0t8uxuu_di" bpmnElement="Event_0t8uxuu">\n        <dc:Bounds x="492" y="-58" width="36" height="36" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_03s9cvh_di" bpmnElement="dlb">\n        <dc:Bounds x="-110" y="-220" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_0jagpnz_di" bpmnElement="xlb">\n        <dc:Bounds x="-140" y="30" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_1v7ieyj_di" bpmnElement="Activity_0c9kfh4">\n        <dc:Bounds x="270" y="-80" width="100" height="80" />\n      </bpmndi:BPMNShape>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>\n',
+    })
+  }
+
+  /**
+   * 关闭
+   */
+  function cancel() {
+    if (isEdit) {
+      createConfirm({
+        iconType: 'info',
+        title: '警告',
+        content: '关闭后后将不对编辑的内容进行保存!',
+        okText: '关闭',
+        onOk: () => {
+          visible = false
+        },
+      })
+    } else {
+      visible = false
     }
   }
+
   defineExpose({
-    init,
+    design,
   })
 </script>
 
diff --git a/src/views/modules/bpm/model/Model.api.ts b/src/views/modules/bpm/model/Model.api.ts
index 4400a0b..980aa2a 100644
--- a/src/views/modules/bpm/model/Model.api.ts
+++ b/src/views/modules/bpm/model/Model.api.ts
@@ -117,7 +117,7 @@ export function copy(id) {
  */
 export interface BpmModel extends BaseEntity {
   // 名称
-  name: string
+  name?: string
   // 流程类型
   modelType?: string
   // 关联表单
-- 
Gitee


From bfba8e681e523cf12ea43b780a8aed7c64f22671 Mon Sep 17 00:00:00 2001
From: xxm <xxm1995@outlook.com>
Date: Fri, 17 Mar 2023 21:45:15 +0800
Subject: [PATCH 23/28] =?UTF-8?q?feat=20=E6=B5=81=E7=A8=8B=E5=9B=BE?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/bpm/design/ProcessDesign.vue      | 58 ++++++++++---------
 src/views/modules/bpm/model/BpmModeler.vue    | 17 ++++--
 2 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/src/views/modules/bpm/design/ProcessDesign.vue b/src/views/modules/bpm/design/ProcessDesign.vue
index 3fb9e90..91add1b 100644
--- a/src/views/modules/bpm/design/ProcessDesign.vue
+++ b/src/views/modules/bpm/design/ProcessDesign.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="flow-containers" style="height: 100%" :class="{ 'view-mode': isView }">
+  <div class="flow-containers" style="height: 100%">
     <a-layout style="height: 100%">
       <a-layout-header theme="light" style="border-bottom: 1px solid rgb(218 218 218); height: auto; background-color: #fff">
-        <div v-if="isView" style="display: flex; padding: 5px 0px; justify-content: space-between">
+        <div v-if="!isView" style="display: flex; padding: 5px 0px; justify-content: space-between">
           <a-space>
             <a-upload v-if="isEdit" name="file" action="" accept=".bpmn,.xml" :showUploadList="false" :beforeUpload="openBpmn">
               <a-tooltip effect="dark" title="打开" placement="bottom">
@@ -77,7 +77,7 @@
 
   import Modeler from 'bpmn-js/lib/Modeler'
 
-  import { nextTick, onMounted, watch, watchEffect } from 'vue'
+  import { computed, nextTick, onMounted, watch, watchEffect } from 'vue'
   import customTranslate from '/@/components/Bpmn/common/customTranslate'
   import { $ref } from 'vue/macros'
   import Icon from '/@/components/Icon'
@@ -91,23 +91,22 @@
   const emit = defineEmits(['save', 'cancel'])
   const { createConfirm } = useMessage()
 
-  interface Props {
-    // 是否编辑状态
-    isEdit?: boolean
-    // 是否预览状态
-    isView?: boolean
-    // bpmn 文件内容
-    xml?: string
-  }
-  const props = withDefaults(defineProps<Props>(), {
-    isEdit: true,
-    isView: false,
-    xml: '',
-  })
+  // interface Props {
+  //   // 是否编辑状态
+  //   isEdit?: boolean
+  //   // 是否预览状态
+  //   isView?: boolean
+  //   // bpmn 文件内容
+  //   xml?: string
+  // }
+  // const props = withDefaults(defineProps<Props>(), {
+  //   isEdit: true,
+  //   isView: false,
+  //   xml: '',
+  // })
 
-  watch(props, () => {
-    init()
-  })
+  let isEdit = $ref<boolean>(false)
+  let isView = $ref<boolean>(true)
 
   // 实例
   let modeler
@@ -140,20 +139,21 @@
   ]
 
   /**
-   * 初始化
+   * 渲染函数
    */
-  function init() {
+  function renderer(xml: string, edit: boolean, view: boolean) {
     nextTick(async () => {
-      const xml = props.xml || getInitBpmnData()
-      const additionalModule = props.isEdit && !props.isView ? isEditModules : notEditModules
-      console.log(props.isEdit, props.isView)
+      isEdit = edit
+      isView = view
+      const xmlData = xml || getInitBpmnData()
+      const additionalModule = edit && !view ? isEditModules : notEditModules
       modeler = new Modeler({
         container: '#canvas',
         propertiesPanel: {},
         additionalModules: additionalModule,
         moddleExtensions: {},
       })
-      await createNewDiagram(xml)
+      await createNewDiagram(xmlData)
     })
   }
 
@@ -283,7 +283,7 @@
   function adjustPalette() {
     try {
       // 获取 bpmn 设计器实例
-      const djsPalette = canvas.children[0].children[1].children[4]
+      const djsPalette = document.querySelector('.djs-palette .open')
       if (!djsPalette) {
         return
       }
@@ -344,7 +344,7 @@
       return str.replace(/</g, '&lt;')
     })
     await modeler.importXML(data)
-    await adjustPalette()
+    adjustPalette()
     fitViewport()
   }
   /**
@@ -372,6 +372,10 @@
     a.click()
     window.URL.revokeObjectURL(url)
   }
+
+  defineExpose({
+    renderer,
+  })
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/modules/bpm/model/BpmModeler.vue b/src/views/modules/bpm/model/BpmModeler.vue
index 3daa517..04617d8 100644
--- a/src/views/modules/bpm/model/BpmModeler.vue
+++ b/src/views/modules/bpm/model/BpmModeler.vue
@@ -1,6 +1,6 @@
 <template>
   <vxe-modal fullscreen v-model="visible" :title="title" destroy-on-close :show-header="isView" :esc-closable="isView" :show-footer="false">
-    <process-design ref="processDesign" :xml="bpmModel.modelEditorXml" :is-edit="isEdit" @save="save" @cancel="cancel" />
+    <process-design ref="processDesign" @save="save" @cancel="cancel" />
   </vxe-modal>
 </template>
 
@@ -13,6 +13,8 @@
 
   const { createConfirm, createMessage } = useMessage()
 
+  let processDesign = $ref<any>()
+
   let visible = $ref<boolean>(false)
   let isEdit = $ref<boolean>(true)
   let isView = $ref<boolean>(false)
@@ -27,7 +29,7 @@
       bpmModel = res.data
       isEdit = bpmModel.publish !== PUBLISHED
       title = `查看 ${bpmModel.name} 流程图`
-      // confirmLoading = false
+      processDesign.renderer(bpmModel.modelEditorXml, isEdit, isView)
     })
   }
 
@@ -51,6 +53,7 @@
    * 关闭
    */
   function cancel() {
+    console.log(isEdit)
     if (isEdit) {
       createConfirm({
         iconType: 'info',
@@ -58,14 +61,20 @@
         content: '关闭后后将不对编辑的内容进行保存!',
         okText: '关闭',
         onOk: () => {
-          visible = false
+          reset()
         },
       })
     } else {
-      visible = false
+      reset()
     }
   }
 
+  function reset() {
+    visible = false
+    // isEdit = false
+    // isView = false
+  }
+
   defineExpose({
     design,
   })
-- 
Gitee


From 043050bb289d28c65176768101bede96d94c78db Mon Sep 17 00:00:00 2001
From: xxm <xxm1995@outlook.com>
Date: Fri, 17 Mar 2023 21:49:18 +0800
Subject: [PATCH 24/28] =?UTF-8?q?feat=20=E6=B5=81=E7=A8=8B=E5=9B=BE?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/bpm/design/ProcessDesign.vue      | 59 -------------------
 src/views/modules/bpm/model/BpmModeler.vue    |  1 -
 2 files changed, 60 deletions(-)

diff --git a/src/views/modules/bpm/design/ProcessDesign.vue b/src/views/modules/bpm/design/ProcessDesign.vue
index 91add1b..50c6bac 100644
--- a/src/views/modules/bpm/design/ProcessDesign.vue
+++ b/src/views/modules/bpm/design/ProcessDesign.vue
@@ -277,64 +277,6 @@
     zoom += zoomIn ? 0.1 : -0.1
     modeler.get('canvas').zoom(zoom)
   }
-  /**
-   * 调整左侧工具栏排版
-   */
-  function adjustPalette() {
-    try {
-      // 获取 bpmn 设计器实例
-      const djsPalette = document.querySelector('.djs-palette .open')
-      if (!djsPalette) {
-        return
-      }
-      const djsPalStyle = {
-        width: '130px',
-        padding: '5px',
-        background: 'white',
-        left: '20px',
-        borderRadius: 0,
-      }
-      for (let key in djsPalStyle) {
-        djsPalette.style[key] = djsPalStyle[key]
-      }
-      const palette = djsPalette.children[0]
-      const allGroups = palette.children
-      // 是否隐藏工具栏
-      if (!paletteToolShow) {
-        allGroups[0].style['display'] = 'none'
-      }
-
-      // 修改控件样式
-      for (const gKey in allGroups) {
-        const group = allGroups[gKey]
-        for (const cKey in group.children) {
-          const control = group.children[cKey]
-          const controlStyle = {
-            display: 'flex',
-            justifyContent: 'flex-start',
-            alignItems: 'center',
-            width: '100%',
-            padding: '5px',
-          }
-          if (control.className && control.dataset && control.className.indexOf('entry') !== -1) {
-            const controlProps = new BpmData().getControl(control.dataset.action)
-            control.innerHTML = `<div style='font-size: 14px;font-weight:500;margin-left:15px;'>${controlProps['title']}</div>`
-            for (let csKey in controlStyle) {
-              control.style[csKey] = controlStyle[csKey]
-            }
-
-            // 过滤扩展栏
-            // if (paletteFilters.indexOf(control.dataset.action) !== -1) {
-            //   control.style['display'] = 'none'
-            //   continue
-            // }
-          }
-        }
-      }
-    } catch (e) {
-      console.error(e)
-    }
-  }
   /**
    * 创建新画布
    */
@@ -344,7 +286,6 @@
       return str.replace(/</g, '&lt;')
     })
     await modeler.importXML(data)
-    adjustPalette()
     fitViewport()
   }
   /**
diff --git a/src/views/modules/bpm/model/BpmModeler.vue b/src/views/modules/bpm/model/BpmModeler.vue
index 04617d8..21e5947 100644
--- a/src/views/modules/bpm/model/BpmModeler.vue
+++ b/src/views/modules/bpm/model/BpmModeler.vue
@@ -53,7 +53,6 @@
    * 关闭
    */
   function cancel() {
-    console.log(isEdit)
     if (isEdit) {
       createConfirm({
         iconType: 'info',
-- 
Gitee


From 7c6c16e76b8427cf35209d5d294ddbe40f5d128e Mon Sep 17 00:00:00 2001
From: xxm1995 <xxm1995@outlook.com>
Date: Mon, 20 Mar 2023 18:04:51 +0800
Subject: [PATCH 25/28] =?UTF-8?q?feat=20=E8=B0=83=E6=95=B4=E5=90=84?=
 =?UTF-8?q?=E7=A7=8D=E5=AE=9A=E6=97=B6=E4=BB=BB=E5=8A=A1=E7=9A=84=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0,=E8=B0=83=E6=95=B4=E6=89=AB=E7=A0=81=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/sys/login.ts                          |  2 +-
 src/api/sys/model/userModel.ts                |  2 +
 src/views/account/bind/WeChatQrBind.vue       | 34 +++++---
 src/views/account/security/EmailBind.vue      | 20 ++---
 src/views/account/security/PhoneEdit.vue      |  2 +-
 src/views/login/MobileForm.vue                |  1 +
 src/views/login/QrCodeForm.vue                | 87 ++++++++++++++++---
 .../monitor/redis/RedisInfoMonitor.vue        | 20 +++--
 .../monitor/system/SystemInfoMonitor.vue      | 11 ++-
 9 files changed, 125 insertions(+), 54 deletions(-)

diff --git a/src/api/sys/login.ts b/src/api/sys/login.ts
index 235a9bb..7ee9467 100644
--- a/src/api/sys/login.ts
+++ b/src/api/sys/login.ts
@@ -16,7 +16,7 @@ export function login(params: LoginParams) {
  * 获取微信扫码登录二维码
  */
 export function applyQrCode() {
-  return defHttp.get<Result<WeChatLoginQrCode>>({
+  return defHttp.post<Result<WeChatLoginQrCode>>({
     url: `/token/wechat/qr/applyQrCode`,
   })
 }
diff --git a/src/api/sys/model/userModel.ts b/src/api/sys/model/userModel.ts
index 05e5c71..ce0e281 100644
--- a/src/api/sys/model/userModel.ts
+++ b/src/api/sys/model/userModel.ts
@@ -14,6 +14,8 @@ export interface LoginParams {
   captchaKey?: string
   // 验证码
   captcha?: string
+  // 授权码登录
+  authCode?: string
 }
 
 /**
diff --git a/src/views/account/bind/WeChatQrBind.vue b/src/views/account/bind/WeChatQrBind.vue
index 7a3b2c6..4c2a85a 100644
--- a/src/views/account/bind/WeChatQrBind.vue
+++ b/src/views/account/bind/WeChatQrBind.vue
@@ -22,6 +22,7 @@
   import { applyQrCode, getQrStatus } from '/@/api/sys/login'
   import { onBeforeUnmount, reactive } from 'vue'
   import { WE_CHAT } from '/@/views/login/third/OpenIdLoginType'
+  import { useIntervalFn } from '@vueuse/core'
 
   let visible = $ref(false)
   let loading = $ref(false)
@@ -36,6 +37,23 @@
     authCode: '',
   })
 
+  // 检查绑定的定时任务
+  const { pause, resume } = useIntervalFn(
+    () => {
+      getQrStatus(form.authCode).then(({ data }) => {
+        // 成功 进行绑定
+        if (data === 'ok') {
+          bindWeChat()
+        } else if (data === 'expired') {
+          pause()
+          getApplyQrCode()
+        }
+      })
+    },
+    1000 * 3,
+    { immediate: false },
+  )
+
   function init() {
     visible = true
     getApplyQrCode()
@@ -58,18 +76,7 @@
    * 定时查询扫码情况
    */
   function checkQrScanStatus() {
-    interval = setInterval(() => {
-      getQrStatus(form.authCode).then(({ data }) => {
-        // 成功 进行绑定
-        if (data === 'ok') {
-          bindWeChat()
-        } else if (data === 'expired') {
-          clearInterval(interval)
-          interval = null
-          getApplyQrCode()
-        }
-      })
-    }, 1000)
+    resume()
   }
 
   /**
@@ -86,8 +93,7 @@
    * 关闭
    */
   function handleCancel() {
-    clearInterval(interval)
-    interval = null
+    pause()
     visible = false
   }
   onBeforeUnmount(() => {
diff --git a/src/views/account/security/EmailBind.vue b/src/views/account/security/EmailBind.vue
index e286fa8..2bad7b2 100644
--- a/src/views/account/security/EmailBind.vue
+++ b/src/views/account/security/EmailBind.vue
@@ -22,13 +22,6 @@
         </a-form-item>
         <a-form-item validateFirst label="验证码" name="captcha">
           <count-down-input v-model:value="form.captcha" :send-code-api="sendEmailCaptcha" :count="120">获取验证码</count-down-input>
-          <a-input :maxLength="8" placeholder="验证码" v-model:value="form.captcha">
-            <template #addonAfter>
-              <a-button size="small" type="link" :disabled="state.newCaptcha" href="javascript:" @click="sendEmailCaptcha">
-                {{ (!state.captcha && '获取验证码') || '请等待 ' + (state.captchaTime + ' s') }}
-              </a-button>
-            </template>
-          </a-input>
         </a-form-item>
       </a-form>
     </a-spin>
@@ -46,11 +39,11 @@
   import { validateEmail } from '/@/utils/validate'
   import { bindEmail } from '/@/views/account/account.api'
   import CountDownInput from '/@/components/CountDown/src/CountdownInput.vue'
+  import { useIntervalFn } from '@vueuse/core'
 
   const emits = defineEmits(['ok'])
   const { visible, confirmLoading, modalWidth, labelCol, wrapperCol, handleCancel } = useFormEdit()
   const { createMessage, createConfirm } = useMessage()
-  let currentTab = $ref(0)
   let form = $ref({
     email: '',
     captcha: '',
@@ -72,6 +65,10 @@
     captchaTime: 120,
   })
   const formRef = $ref<FormInstance>()
+
+  /**
+   * 初始化
+   */
   function init() {
     visible.value = true
     nextTick(() => {
@@ -124,13 +121,6 @@
       sendEmailChangeCaptcha(form.email).then(() => {
         createMessage.success('发送验证码成功')
         state.captcha = true
-        const interval = window.setInterval(() => {
-          if (state.captchaTime-- <= 0) {
-            state.captchaTime = 120
-            state.captcha = false
-            window.clearInterval(interval)
-          }
-        }, 1000)
       })
     })
   }
diff --git a/src/views/account/security/PhoneEdit.vue b/src/views/account/security/PhoneEdit.vue
index b8215ec..46aae23 100644
--- a/src/views/account/security/PhoneEdit.vue
+++ b/src/views/account/security/PhoneEdit.vue
@@ -61,7 +61,7 @@
   const emits = defineEmits(['ok'])
   const { visible, confirmLoading, modalWidth, labelCol, wrapperCol, handleCancel } = useFormEdit()
   const { createMessage, createConfirm } = useMessage()
-  let currentTab = $ref(1)
+  let currentTab = $ref(0)
   let form = $ref({
     phone: '',
     oldCaptcha: '',
diff --git a/src/views/login/MobileForm.vue b/src/views/login/MobileForm.vue
index 1398141..5c635b3 100644
--- a/src/views/login/MobileForm.vue
+++ b/src/views/login/MobileForm.vue
@@ -9,6 +9,7 @@
         <a-form-item name="smsCaptcha" class="enter-x">
           <count-down-input
             :send-code-api="getCaptcha"
+            :count="120"
             size="large"
             class="fix-auto-fill"
             v-model:value="form.smsCaptcha"
diff --git a/src/views/login/QrCodeForm.vue b/src/views/login/QrCodeForm.vue
index 931ed84..7079985 100644
--- a/src/views/login/QrCodeForm.vue
+++ b/src/views/login/QrCodeForm.vue
@@ -2,26 +2,91 @@
   <template v-if="getShow">
     <LoginFormTitle class="enter-x" />
     <div class="enter-x min-w-64 min-h-64">
-      <QrCode :value="qrCodeUrl" class="enter-x flex justify-center xl:justify-start" :width="280" />
-      <Divider class="enter-x">{{ t('sys.login.scanSign') }}</Divider>
-      <Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
-        {{ t('sys.login.backSignIn') }}
-      </Button>
+      <qr-code value="qrCodeUrl" class="enter-x flex justify-center xl:justify-start" :width="280" />
+      <Divider class="enter-x">请使用微信扫码</Divider>
+      <Button size="large" block class="mt-4 enter-x" @click="handleBackLogin"> 返回 </Button>
     </div>
   </template>
 </template>
 <script lang="ts" setup>
-  import { computed, unref } from 'vue'
+  import { computed, onMounted, unref, watch, watchEffect } from 'vue'
   import LoginFormTitle from './LoginFormTitle.vue'
   import { Button, Divider } from 'ant-design-vue'
   import { QrCode } from '/@/components/Qrcode'
-  import { useI18n } from '/@/hooks/web/useI18n'
   import { useLoginState, LoginStateEnum } from './useLogin'
+  import { $ref } from 'vue/macros'
+  import { applyQrCode, getQrStatus } from '/@/api/sys/login'
+  import { useIntervalFn } from '@vueuse/core'
+  import { getAppEnvConfig } from '/@/utils/env'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { useUserStore } from '/@/store/modules/user'
 
-  const qrCodeUrl = 'https://vvbin.cn/next/login'
-
-  const { t } = useI18n()
   const { handleBackLogin, getLoginState } = useLoginState()
 
-  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE)
+  const { createMessage } = useMessage()
+  const { notification } = useMessage()
+  const userStore = useUserStore()
+
+  const getShow = computed(() => {
+    const flag = unref(getLoginState) === LoginStateEnum.QR_CODE
+    flag ? getQrCode() : pause()
+    return flag
+  })
+
+  const { pause, resume } = useIntervalFn(() => checkQrScanStatus(), 1000 * 5, { immediate: false })
+
+  let qrCodeUrl = $ref('请稍等')
+  // true可以获取, false不可以获取
+  let getQrFlag = $ref(true)
+  let loading = $ref(false)
+  let client = $ref<string>('')
+  let loginType = $ref('weChat')
+  let authCode = $ref<string>()
+
+  onMounted(() => {
+    // 终端编码
+    const { VITE_GLOB_APP_CLIENT } = getAppEnvConfig()
+    client = VITE_GLOB_APP_CLIENT
+  })
+
+  // 获取扫码链接
+  function getQrCode() {
+    if (getQrFlag) {
+      loading = true
+      applyQrCode().then(({ data }) => {
+        authCode = data.qrCodeKey
+        qrCodeUrl = data.qrCodeUrl
+        loading = false
+        getQrFlag = false
+        console.log(444)
+        resume()
+      })
+    }
+  }
+  /**
+   * 检查登录状态
+   */
+  function checkQrScanStatus() {
+    console.log(123)
+    getQrStatus(authCode).then(async ({ data }) => {
+      // 成功 进行登录
+      if (data === 'ok') {
+        resume()
+        const token = await userStore.login({
+          client: client,
+          loginType: loginType,
+        })
+        if (token) {
+          notification.success({
+            message: '登录成功',
+            description: '欢迎回来',
+            duration: 3,
+          })
+        }
+      } else if (data === 'expired') {
+        getQrFlag = true
+        applyQrCode()
+      }
+    })
+  }
 </script>
diff --git a/src/views/modules/monitor/redis/RedisInfoMonitor.vue b/src/views/modules/monitor/redis/RedisInfoMonitor.vue
index 46a7d13..378795a 100644
--- a/src/views/modules/monitor/redis/RedisInfoMonitor.vue
+++ b/src/views/modules/monitor/redis/RedisInfoMonitor.vue
@@ -57,6 +57,7 @@
   import { useECharts } from '/@/hooks/web/useECharts'
   import { getRedisInfo } from '/@/views/modules/monitor/redis/RedisInfoMonitor.api'
   import { $ref } from 'vue/macros'
+  import { useIntervalFn } from '@vueuse/core'
 
   const commandStatsChartRef = ref<HTMLDivElement | null>(null)
   const commandStatsChart = useECharts(commandStatsChartRef as Ref<HTMLDivElement>, 'light')
@@ -121,16 +122,23 @@
     })
   }
 
+  /**
+   * 定时任务
+   */
+  const { pause, resume } = useIntervalFn(() => getInfo(), 1000 * 5, { immediate: true })
+
+  /**
+   * 加载页面
+   */
   onMounted(() => {
-    getInfo()
-    interval = setInterval(() => {
-      getInfo()
-    }, 1000 * 5)
+    resume()
   })
 
+  /**
+   * 卸载页面
+   */
   onBeforeUnmount(() => {
-    clearInterval(interval)
-    interval = null
+    pause()
   })
 
   /**
diff --git a/src/views/modules/monitor/system/SystemInfoMonitor.vue b/src/views/modules/monitor/system/SystemInfoMonitor.vue
index a4e4f37..88e64d0 100644
--- a/src/views/modules/monitor/system/SystemInfoMonitor.vue
+++ b/src/views/modules/monitor/system/SystemInfoMonitor.vue
@@ -142,6 +142,7 @@
   import { onBeforeUnmount, onMounted, onUnmounted } from 'vue'
   import { getSystemInfo } from './SystemInfo.api'
   import { $ref } from 'vue/macros'
+  import { useIntervalFn } from '@vueuse/core'
 
   let interval: any = null
   let loading = $ref(false)
@@ -151,11 +152,10 @@
   let sysDiskInfos = $ref({})
   let hardwareInfo = $ref({})
 
+  const { pause, resume } = useIntervalFn(() => getSysInfo(), 1000 * 5, { immediate: true })
+
   onMounted(() => {
-    getSysInfo()
-    interval = setInterval(() => {
-      getSysInfo()
-    }, 1000 * 5)
+    resume()
   })
 
   function getSysInfo() {
@@ -170,8 +170,7 @@
   }
 
   onBeforeUnmount(() => {
-    clearInterval(interval)
-    interval = null
+    pause()
   })
 </script>
 
-- 
Gitee


From 7285d692a74d7bbec9cd80a359134a862fb3e212 Mon Sep 17 00:00:00 2001
From: xxm1995 <xxm1995@outlook.com>
Date: Thu, 23 Mar 2023 20:45:25 +0800
Subject: [PATCH 26/28] =?UTF-8?q?feat=20=E5=B7=A5=E4=BD=9C=E6=B5=81?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/vite/plugin/index.ts                    |   8 +-
 package.json                                  |   5 +-
 .../RoleSelectModal/BRoleSelectModal.vue      |   2 +-
 .../Bootx/SuperQuery/BSuperQuery.vue          |   2 +-
 .../Bootx/SuperQuery/SuperQueryItem.vue       |   2 +-
 .../Bootx/SuperQuery/SuperQueryModel.vue      |   2 +-
 .../UserSelectModal/BUserSelectModal.vue      |   2 +-
 src/components/Bpmn/ProcessViewer.vue         |   2 +-
 .../header/components/notify/NoticeReader.vue |   2 +-
 .../header/components/notify/index.vue        |   2 +-
 src/views/account/bind/AccountBind.vue        |   2 +-
 src/views/account/bind/WeChatQrBind.vue       |   2 +-
 src/views/account/security/EmailBind.vue      |   2 +-
 src/views/account/security/EmailEdit.vue      |   2 +-
 src/views/account/security/PasswordEdit.vue   |   2 +-
 src/views/account/security/PhoneBind.vue      |   2 +-
 src/views/account/security/PhoneEdit.vue      |   2 +-
 src/views/account/security/SecureSetting.vue  |   2 +-
 src/views/account/setting/BaseSetting.vue     |   2 +-
 src/views/demo/payment/cashier/Cashier.vue    |   2 +-
 .../demo/payment/cashier/CashierBarCode.vue   |   2 +-
 .../demo/payment/cashier/CashierQrCode.vue    |   2 +-
 .../payment/cashier/CombinationCashier.vue    |   2 +-
 .../demo/payment/cashier/SimpleCashier.vue    |   2 +-
 src/views/login/LoginForm.vue                 |   2 +-
 src/views/login/MobileForm.vue                |   2 +-
 src/views/login/QrCodeForm.vue                |  27 +-
 src/views/login/third/ThirdLogin.vue          |   2 +-
 src/views/login/user/ForgetPasswordForm.vue   |   2 +-
 src/views/login/user/RegisterForm.vue         |   2 +-
 src/views/modules/bpm/design/ProcessDesign.ts |   0
 .../modules/bpm/design/ProcessDesign.vue      | 302 ++++--------------
 src/views/modules/bpm/design/ProcessPanel.vue |  36 +++
 .../modules/bpm/design/useProcessDesign.ts    | 224 +++++++++++++
 .../modules/bpm/instance/InstanceList.vue     |   2 +-
 src/views/modules/bpm/model/BpmModelEdit.vue  |   2 +-
 src/views/modules/bpm/model/BpmModelList.vue  |   2 +-
 src/views/modules/bpm/model/BpmModeler.vue    |   2 +-
 .../bpm/model/node/BpmModelNodeEdit.vue       |   2 +-
 .../bpm/model/node/BpmModelNodeList.vue       |   2 +-
 src/views/modules/bpm/task/DoneTaskList.vue   |   2 +-
 src/views/modules/bpm/task/TodoTaskList.vue   |   2 +-
 .../demo/chinaregion/ChinaRegionDemo.vue      |   2 +-
 .../demo/data/encrypt/DataEncryptDemoEdit.vue |   2 +-
 .../demo/data/encrypt/DataEncryptDemoList.vue |   2 +-
 .../demo/data/perm/DataPermDemoEdit.vue       |   2 +-
 .../demo/data/perm/DataPermDemoList.vue       |   2 +-
 .../data/sensitive/DataSensitiveDemoEdit.vue  |   2 +-
 .../data/sensitive/DataSensitiveDemoList.vue  |   2 +-
 src/views/modules/demo/mq/MqDemo.vue          |   2 +-
 .../demo/notice/email/SimpleEmailSender.vue   |   2 +-
 .../modules/demo/query/SuperQueryDemoEdit.vue |   2 +-
 .../modules/demo/query/SuperQueryDemoList.vue |   2 +-
 .../demo/wangeditor/WangEditorDemo.vue        |   2 +-
 src/views/modules/demo/ws/WebsocketDemo.vue   |   2 +-
 .../modules/develop/codegen/CodeGenForm.vue   |   2 +-
 .../modules/develop/codegen/CodeGenList.vue   |   2 +-
 .../develop/dynamicform/DynamicFormEdit.vue   |   2 +-
 .../develop/dynamicform/DynamicFormList.vue   |   2 +-
 .../develop/dynamicsource/DataSourceList.vue  |   2 +-
 .../dynamicsource/DynamicDataSourceEdit.vue   |   2 +-
 .../dynamicsource/DynamicDataSourceList.vue   |   2 +-
 .../modules/develop/file/FileUploadList.vue   |   2 +-
 .../modules/develop/query/QuerySqlEdit.vue    |   2 +-
 .../modules/develop/query/QuerySqlList.vue    |   2 +-
 .../develop/report/ProjectInfoEdit.vue        |   2 +-
 .../develop/report/ProjectInfoList.vue        |   2 +-
 .../monitor/data/DataVersionLogInfo.vue       |   2 +-
 .../monitor/data/DataVersionLogList.vue       |   2 +-
 .../modules/monitor/login/LoginLogInfo.vue    |   2 +-
 .../modules/monitor/login/LoginLogList.vue    |   2 +-
 .../monitor/operate/OperateLogInfo.vue        |   2 +-
 .../monitor/operate/OperateLogList.vue        |   2 +-
 .../monitor/redis/RedisInfoMonitor.vue        |   2 +-
 .../monitor/system/SystemInfoMonitor.vue      |   2 +-
 .../modules/notice/mail/MailConfigEdit.vue    |   2 +-
 .../modules/notice/mail/MailConfigList.vue    |   2 +-
 .../notice/site/receive/SiteMessageList.vue   |   2 +-
 .../notice/site/sender/SiteMessageEdit.vue    |   2 +-
 .../notice/site/sender/SiteMessageList.vue    |   2 +-
 .../notice/template/MessageTemplateEdit.vue   |   2 +-
 .../notice/template/MessageTemplateList.vue   |   2 +-
 .../notice/template/TemplateRender.vue        |   2 +-
 .../modules/office/myapply/MyApplyList.vue    |   2 +-
 .../modules/office/mydone/MyDoneList.vue      |   2 +-
 .../modules/office/mytodo/MyTodoList.vue      |   2 +-
 .../channel/alipay/AlipayConfigEdit.vue       |   2 +-
 .../channel/alipay/AlipayConfigList.vue       |   2 +-
 .../channel/wechat/WechatPayConfigEdit.vue    |   2 +-
 .../channel/wechat/WechatPayConfigList.vue    |   2 +-
 .../payment/notify/PayNotifyRecordInfo.vue    |   2 +-
 .../payment/notify/PayNotifyRecordList.vue    |   2 +-
 .../payment/order/payment/PaymentInfo.vue     |   2 +-
 .../payment/order/payment/PaymentList.vue     |   2 +-
 .../payment/order/payment/RefundModel.vue     |   2 +-
 .../payment/order/refund/RefundRecordInfo.vue |   2 +-
 .../payment/order/refund/RefundRecordList.vue |   2 +-
 .../payment/voucher/VoucherGeneration.vue     |   2 +-
 .../modules/payment/voucher/VoucherInfo.vue   |   2 +-
 .../modules/payment/voucher/VoucherList.vue   |   2 +-
 .../payment/wallet/list/WalletChanger.vue     |   2 +-
 .../payment/wallet/list/WalletInfo.vue        |   2 +-
 .../payment/wallet/list/WalletList.vue        |   2 +-
 .../payment/wallet/list/WalletLogList.vue     |   2 +-
 .../modules/system/client/ClientEdit.vue      |   2 +-
 .../modules/system/client/ClientList.vue      |   2 +-
 src/views/modules/system/dept/DeptEdit.vue    |   2 +-
 src/views/modules/system/dept/DeptList.vue    |   2 +-
 src/views/modules/system/dict/DictEdit.vue    |   2 +-
 .../modules/system/dict/DictItemEdit.vue      |   2 +-
 .../modules/system/dict/DictItemList.vue      |   2 +-
 src/views/modules/system/dict/DictList.vue    |   2 +-
 .../system/loginType/LoginTypeEdit.vue        |   2 +-
 .../system/loginType/LoginTypeList.vue        |   2 +-
 src/views/modules/system/menu/MenuEdit.vue    |   2 +-
 src/views/modules/system/menu/MenuList.vue    |   2 +-
 .../modules/system/menu/ResourceEdit.vue      |   2 +-
 .../modules/system/menu/ResourceList.vue      |   2 +-
 .../modules/system/param/SystemParamEdit.vue  |   2 +-
 .../modules/system/param/SystemParamList.vue  |   2 +-
 .../modules/system/path/PermPathEdit.vue      |   2 +-
 .../modules/system/path/PermPathList.vue      |   2 +-
 .../modules/system/quartz/QuartzJobEdit.vue   |   2 +-
 .../modules/system/quartz/QuartzJobList.vue   |   2 +-
 .../system/quartz/QuartzJobLogList.vue        |   2 +-
 src/views/modules/system/role/RoleEdit.vue    |   2 +-
 src/views/modules/system/role/RoleList.vue    |   2 +-
 .../modules/system/role/RoleMenuModal.vue     |   2 +-
 .../modules/system/role/RolePathModal.vue     |   2 +-
 .../modules/system/scope/DataScopeEdit.vue    |   2 +-
 .../modules/system/scope/DataScopeList.vue    |   2 +-
 .../modules/system/scope/DeptScopeModal.vue   |   2 +-
 .../modules/system/scope/UserScopeModal.vue   |   2 +-
 src/views/modules/system/user/UserAdd.vue     |   2 +-
 src/views/modules/system/user/UserEdit.vue    |   2 +-
 src/views/modules/system/user/UserList.vue    |   2 +-
 src/views/modules/system/user/UserShow.vue    |   2 +-
 .../system/user/dept/UserDeptAssign.vue       |   2 +-
 .../system/user/dept/UserDeptAssignBatch.vue  |   2 +-
 .../system/user/role/UserRoleAssign.vue       |   2 +-
 .../system/user/role/UserRoleAssignBatch.vue  |   2 +-
 .../system/user/scope/UserDataScopeAssign.vue |   2 +-
 .../user/scope/UserDataScopeAssignBatch.vue   |   2 +-
 .../dingtalk/robot/DingRobotConfigEdit.vue    |   2 +-
 .../dingtalk/robot/DingRobotConfigList.vue    |   2 +-
 .../wechat/article/WechatArticleSelect.vue    |   2 +-
 .../third/wechat/media/WechatMediaList.vue    |   2 +-
 .../third/wechat/media/WechatMediaSelect.vue  |   2 +-
 .../third/wechat/menu/WechatMenuDesign.vue    |   2 +-
 .../third/wechat/menu/WechatMenuEdit.vue      |   2 +-
 .../third/wechat/menu/WechatMenuList.vue      |   2 +-
 .../third/wechat/menu/edit/WxMenuDesign.vue   |   2 +-
 .../wechat/menu/edit/WxMenuDetailEditor.vue   |   2 +-
 .../wechat/template/WechatTemplateEdit.vue    |   2 +-
 .../wechat/template/WechatTemplateList.vue    |   2 +-
 .../wecom/robot/WecomRobotConfigEdit.vue      |   2 +-
 .../wecom/robot/WecomRobotConfigList.vue      |   2 +-
 tsconfig.json                                 |   2 +-
 yarn.lock                                     | 212 +++++++++++-
 159 files changed, 715 insertions(+), 401 deletions(-)
 delete mode 100644 src/views/modules/bpm/design/ProcessDesign.ts
 create mode 100644 src/views/modules/bpm/design/ProcessPanel.vue
 create mode 100644 src/views/modules/bpm/design/useProcessDesign.ts

diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts
index 0a943fe..6bcfbe4 100644
--- a/build/vite/plugin/index.ts
+++ b/build/vite/plugin/index.ts
@@ -15,6 +15,7 @@ import { configVisualizerConfig } from './visualizer'
 import { configThemePlugin } from './theme'
 import { configImageminPlugin } from './imagemin'
 import { configSvgIconsPlugin } from './svgSprite'
+import reactivityTransform from '@vue-macros/reactivity-transform/vite'
 
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv
@@ -22,8 +23,8 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   const vitePlugins: (PluginOption | PluginOption[])[] = [
     // have to
     vue({
-      // 响应式变量
-      reactivityTransform: true,
+      // 响应式变量 TODO 3.3+ 废弃, 迁移到 Vue Macros Reactivity Transform。
+      // reactivityTransform: true,
     }),
     // have to
     vueJsx(),
@@ -61,6 +62,9 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   // vite-plugin-theme
   vitePlugins.push(configThemePlugin(isBuild))
 
+  // Vue Macros Reactivity Transform 响应式变量
+  vitePlugins.push(reactivityTransform())
+
   // The following plugins only work in the production environment
   if (isBuild) {
     // vite-plugin-imagemin
diff --git a/package.json b/package.json
index e0c9beb..614ad2a 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "@commitlint/config-conventional": "^16.2.1",
     "@iconify/json": "^2.1.30",
     "@purge-icons/generated": "^0.8.1",
+    "@rys-fe/vite-plugin-theme": "^0.8.6",
     "@types/codemirror": "^5.60.5",
     "@types/crypto-js": "^4.1.1",
     "@types/fs-extra": "^9.0.13",
@@ -96,6 +97,7 @@
     "@vitejs/plugin-legacy": "^2.0.0",
     "@vitejs/plugin-vue": "^3.0.1",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vue-macros/reactivity-transform": "0.3.1",
     "@vue/compiler-sfc": "^3.2.33",
     "@vue/test-utils": "^2.0.0-rc.21",
     "autoprefixer": "^10.4.4",
@@ -123,8 +125,8 @@
     "rimraf": "^3.0.2",
     "rollup": "^2.70.2",
     "rollup-plugin-visualizer": "^5.6.0",
-    "stylelint": "^14.7.1",
     "sass": "^1.56.1",
+    "stylelint": "^14.7.1",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recommended": "^7.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
@@ -142,7 +144,6 @@
     "vite-plugin-pwa": "^0.12.3",
     "vite-plugin-style-import": "^2.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
-    "@rys-fe/vite-plugin-theme": "^0.8.6",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vite-plugin-windicss": "^1.8.7",
     "vue-eslint-parser": "^8.3.0",
diff --git a/src/components/Bootx/RoleSelectModal/BRoleSelectModal.vue b/src/components/Bootx/RoleSelectModal/BRoleSelectModal.vue
index 46ccb6a..e2d65d1 100644
--- a/src/components/Bootx/RoleSelectModal/BRoleSelectModal.vue
+++ b/src/components/Bootx/RoleSelectModal/BRoleSelectModal.vue
@@ -52,7 +52,7 @@
 <script lang="ts" setup>
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { STRING } from '/@/components/Bootx/Query/Query'
   import { computed } from 'vue'
   import { page } from '/@/views/modules/system/role/Role.api'
diff --git a/src/components/Bootx/SuperQuery/BSuperQuery.vue b/src/components/Bootx/SuperQuery/BSuperQuery.vue
index 97e5720..581fc7a 100644
--- a/src/components/Bootx/SuperQuery/BSuperQuery.vue
+++ b/src/components/Bootx/SuperQuery/BSuperQuery.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { useMessage } from '/@/hooks/web/useMessage'
   import SuperQueryModel from './SuperQueryModel.vue'
   import { QueryField } from '/@/components/Bootx/Query/Query'
diff --git a/src/components/Bootx/SuperQuery/SuperQueryItem.vue b/src/components/Bootx/SuperQuery/SuperQueryItem.vue
index 3614a94..d3edbf6 100644
--- a/src/components/Bootx/SuperQuery/SuperQueryItem.vue
+++ b/src/components/Bootx/SuperQuery/SuperQueryItem.vue
@@ -94,7 +94,7 @@
 
 <script lang="ts" setup>
   import { NUMBER, STRING, BOOLEAN, DATE, TIME, DATE_TIME, LIST, QueryField, QueryParam } from '/@/components/Bootx/Query/Query'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { watch, watchEffect } from 'vue'
   interface Props {
     fields: QueryField[]
diff --git a/src/components/Bootx/SuperQuery/SuperQueryModel.vue b/src/components/Bootx/SuperQuery/SuperQueryModel.vue
index abab14b..2b7489e 100644
--- a/src/components/Bootx/SuperQuery/SuperQueryModel.vue
+++ b/src/components/Bootx/SuperQuery/SuperQueryModel.vue
@@ -32,7 +32,7 @@
 <script lang="ts" setup>
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
   import SuperQueryItem from '/@/components/Bootx/SuperQuery/SuperQueryItem.vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { QueryField, QueryParam } from '/@/components/Bootx/Query/Query'
   import { watch } from "vue";
 
diff --git a/src/components/Bootx/UserSelectModal/BUserSelectModal.vue b/src/components/Bootx/UserSelectModal/BUserSelectModal.vue
index 485624b..ae90fa3 100644
--- a/src/components/Bootx/UserSelectModal/BUserSelectModal.vue
+++ b/src/components/Bootx/UserSelectModal/BUserSelectModal.vue
@@ -56,7 +56,7 @@
   import { BasicModal } from '/@/components/Modal'
   import BQuery from '/@/components/Bootx/Query/BQuery.vue'
   import { computed } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { STRING } from '/@/components/Bootx/Query/Query'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import { page } from '/@/views/modules/system/user/User.api'
diff --git a/src/components/Bpmn/ProcessViewer.vue b/src/components/Bpmn/ProcessViewer.vue
index 25d57a9..638fec2 100644
--- a/src/components/Bpmn/ProcessViewer.vue
+++ b/src/components/Bpmn/ProcessViewer.vue
@@ -45,7 +45,7 @@
 
   import { addArrow } from './processViewerUtils'
   import { useDict } from '/@/hooks/bootx/useDict'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { nextTick, onMounted, watch, watchEffect } from 'vue'
 
   const { dictConvert } = useDict()
diff --git a/src/layouts/default/header/components/notify/NoticeReader.vue b/src/layouts/default/header/components/notify/NoticeReader.vue
index 1d6c5a4..ec5c848 100644
--- a/src/layouts/default/header/components/notify/NoticeReader.vue
+++ b/src/layouts/default/header/components/notify/NoticeReader.vue
@@ -21,7 +21,7 @@
 
 <script lang="ts" setup>
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { SiteMessage } from '/@/views/modules/notice/site/SiteMessage.api'
   import { findById, read } from './SiteMessage.api'
   import { useSiteMessageStore } from '/@/layouts/default/header/components/notify/SiteMessage.store'
diff --git a/src/layouts/default/header/components/notify/index.vue b/src/layouts/default/header/components/notify/index.vue
index d4090cf..2b7b79a 100644
--- a/src/layouts/default/header/components/notify/index.vue
+++ b/src/layouts/default/header/components/notify/index.vue
@@ -39,7 +39,7 @@
   import { BellOutlined } from '@ant-design/icons-vue'
   import { useDesign } from '/@/hooks/web/useDesign'
   import { useMessage } from '/@/hooks/web/useMessage'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { pageByReceive } from '/@/layouts/default/header/components/notify/SiteMessage.api'
   import { router } from '/@/router'
   import { PageEnum } from '/@/enums/pageEnum'
diff --git a/src/views/account/bind/AccountBind.vue b/src/views/account/bind/AccountBind.vue
index 4c9322a..e104be1 100644
--- a/src/views/account/bind/AccountBind.vue
+++ b/src/views/account/bind/AccountBind.vue
@@ -62,7 +62,7 @@
 <script lang="ts" setup>
   import { onMounted } from 'vue'
   import { CollapseContainer } from '/@/components/Container'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { DING_TALK, WE_CHAT, WE_CHAT_OPEN, QQ, WE_COM } from '/@/views/login/third/OpenIdLoginType'
   import { bindThird, getThirdBindInfo, unbindThird } from '/@/views/account/account.api'
   import { UserThirdBindInfo } from '/@/views/account/accountModel'
diff --git a/src/views/account/bind/WeChatQrBind.vue b/src/views/account/bind/WeChatQrBind.vue
index 4c2a85a..8f76a82 100644
--- a/src/views/account/bind/WeChatQrBind.vue
+++ b/src/views/account/bind/WeChatQrBind.vue
@@ -17,7 +17,7 @@
 
 <script lang="ts" setup>
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { QrCode } from '/@/components/Qrcode'
   import { applyQrCode, getQrStatus } from '/@/api/sys/login'
   import { onBeforeUnmount, reactive } from 'vue'
diff --git a/src/views/account/security/EmailBind.vue b/src/views/account/security/EmailBind.vue
index 2bad7b2..ef09164 100644
--- a/src/views/account/security/EmailBind.vue
+++ b/src/views/account/security/EmailBind.vue
@@ -31,7 +31,7 @@
 <script lang="ts" setup>
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { nextTick, reactive } from 'vue'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import { existsEmail, sendEmailChangeCaptcha, validateEmailChangeCaptcha } from '/@/api/sys/userAssist'
diff --git a/src/views/account/security/EmailEdit.vue b/src/views/account/security/EmailEdit.vue
index e60148e..45cd2ca 100644
--- a/src/views/account/security/EmailEdit.vue
+++ b/src/views/account/security/EmailEdit.vue
@@ -38,7 +38,7 @@
 <script lang="ts" setup>
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { computed, nextTick } from 'vue'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import { useMessage } from '/@/hooks/web/useMessage'
diff --git a/src/views/account/security/PasswordEdit.vue b/src/views/account/security/PasswordEdit.vue
index 6252d83..20cb245 100644
--- a/src/views/account/security/PasswordEdit.vue
+++ b/src/views/account/security/PasswordEdit.vue
@@ -30,7 +30,7 @@
 
 <script lang="ts" setup>
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { nextTick, reactive } from 'vue'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/account/security/PhoneBind.vue b/src/views/account/security/PhoneBind.vue
index 34422e2..c8dff15 100644
--- a/src/views/account/security/PhoneBind.vue
+++ b/src/views/account/security/PhoneBind.vue
@@ -32,7 +32,7 @@
 <script lang="ts" setup>
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { nextTick, reactive } from 'vue'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import { existsPhone, sendPhoneChangeCaptcha, validatePhoneChangeCaptcha } from '/@/api/sys/userAssist'
diff --git a/src/views/account/security/PhoneEdit.vue b/src/views/account/security/PhoneEdit.vue
index 46aae23..7baed61 100644
--- a/src/views/account/security/PhoneEdit.vue
+++ b/src/views/account/security/PhoneEdit.vue
@@ -39,7 +39,7 @@
 <script lang="ts" setup>
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { computed, nextTick } from 'vue'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import {
diff --git a/src/views/account/security/SecureSetting.vue b/src/views/account/security/SecureSetting.vue
index 9d60b05..9e2cb8b 100644
--- a/src/views/account/security/SecureSetting.vue
+++ b/src/views/account/security/SecureSetting.vue
@@ -71,7 +71,7 @@
 </template>
 <script lang="ts" setup>
   import { CollapseContainer } from '/@/components/Container'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { onMounted } from 'vue'
   import PasswordEdit from './PasswordEdit.vue'
   import PhoneBind from './PhoneBind.vue'
diff --git a/src/views/account/setting/BaseSetting.vue b/src/views/account/setting/BaseSetting.vue
index ab7901a..be833c5 100644
--- a/src/views/account/setting/BaseSetting.vue
+++ b/src/views/account/setting/BaseSetting.vue
@@ -50,7 +50,7 @@
   import { CropperAvatar } from '/@/components/Cropper'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { useUserStore } from '/@/store/modules/user'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import { getFilePreviewUrlPrefix, UpdateFileInfo, uploadFile } from '/@/api/common/FileUpload'
   import { useDict } from '/@/hooks/bootx/useDict'
diff --git a/src/views/demo/payment/cashier/Cashier.vue b/src/views/demo/payment/cashier/Cashier.vue
index 962e40a..40b8063 100644
--- a/src/views/demo/payment/cashier/Cashier.vue
+++ b/src/views/demo/payment/cashier/Cashier.vue
@@ -108,7 +108,7 @@
   import CashierBarCode from './CashierBarCode.vue'
   import { createAggregatePay, findStatusByBusinessId, singlePay } from './Cashier.api'
   import { useMessage } from '/@/hooks/web/useMessage'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { onMounted, onUnmounted } from 'vue'
   import QrCode from '/@/components/Qrcode/src/Qrcode.vue'
   import { useIntervalFn } from '@vueuse/core'
diff --git a/src/views/demo/payment/cashier/CashierBarCode.vue b/src/views/demo/payment/cashier/CashierBarCode.vue
index 6da55a9..c97cce6 100644
--- a/src/views/demo/payment/cashier/CashierBarCode.vue
+++ b/src/views/demo/payment/cashier/CashierBarCode.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
 
   let visible = $ref(false)
   let loading = $ref(false)
diff --git a/src/views/demo/payment/cashier/CashierQrCode.vue b/src/views/demo/payment/cashier/CashierQrCode.vue
index f7fd282..79d7348 100644
--- a/src/views/demo/payment/cashier/CashierQrCode.vue
+++ b/src/views/demo/payment/cashier/CashierQrCode.vue
@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
   import QrCode from '/@/components/Qrcode/src/Qrcode.vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
 
   let visible = $ref(false)
   let icon = $ref('')
diff --git a/src/views/demo/payment/cashier/CombinationCashier.vue b/src/views/demo/payment/cashier/CombinationCashier.vue
index 705e7a1..456506b 100644
--- a/src/views/demo/payment/cashier/CombinationCashier.vue
+++ b/src/views/demo/payment/cashier/CombinationCashier.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { combinationPay, findStatusByBusinessId, findWalletByUser } from '/@/views/demo/payment/cashier/Cashier.api'
   import { Voucher } from '/@/views/modules/payment/voucher/Voucher.api'
   import { useMessage } from '/@/hooks/web/useMessage'
diff --git a/src/views/demo/payment/cashier/SimpleCashier.vue b/src/views/demo/payment/cashier/SimpleCashier.vue
index 41e0388..64c63d1 100644
--- a/src/views/demo/payment/cashier/SimpleCashier.vue
+++ b/src/views/demo/payment/cashier/SimpleCashier.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { computed, onMounted } from 'vue'
   import { findStatusByBusinessId, findWalletByUser, singlePay } from '/@/views/demo/payment/cashier/Cashier.api'
   import { FormInstance } from 'ant-design-vue/lib/form'
diff --git a/src/views/login/LoginForm.vue b/src/views/login/LoginForm.vue
index 64f2b58..51a1113 100644
--- a/src/views/login/LoginForm.vue
+++ b/src/views/login/LoginForm.vue
@@ -76,7 +76,7 @@
   import { useDesign } from '/@/hooks/web/useDesign'
   import { getAppEnvConfig } from '/@/utils/env'
   import { imgCaptcha } from '/@/api/common/Captcha'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { findLoginTypeByCode, LoginType } from '/@/api/common/LoginAssist'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import { LoginParams } from '/@/api/sys/model/userModel'
diff --git a/src/views/login/MobileForm.vue b/src/views/login/MobileForm.vue
index 5c635b3..11bae26 100644
--- a/src/views/login/MobileForm.vue
+++ b/src/views/login/MobileForm.vue
@@ -26,7 +26,7 @@
   import { reactive, computed, unref, onMounted } from 'vue'
   import LoginFormTitle from './LoginFormTitle.vue'
   import { useLoginState, LoginStateEnum } from './useLogin'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import CountDownInput from '/@/components/CountDown/src/CountdownInput.vue'
   import { useMessage } from '/@/hooks/web/useMessage'
diff --git a/src/views/login/QrCodeForm.vue b/src/views/login/QrCodeForm.vue
index 7079985..6ddb7b5 100644
--- a/src/views/login/QrCodeForm.vue
+++ b/src/views/login/QrCodeForm.vue
@@ -2,21 +2,23 @@
   <template v-if="getShow">
     <LoginFormTitle class="enter-x" />
     <div class="enter-x min-w-64 min-h-64">
-      <qr-code value="qrCodeUrl" class="enter-x flex justify-center xl:justify-start" :width="280" />
+      <a-spin :spinning="loading">
+        <qr-code value="qrCodeUrl" class="enter-x flex justify-center xl:justify-start" :width="280" />
+      </a-spin>
       <Divider class="enter-x">请使用微信扫码</Divider>
       <Button size="large" block class="mt-4 enter-x" @click="handleBackLogin"> 返回 </Button>
     </div>
   </template>
 </template>
 <script lang="ts" setup>
-  import { computed, onMounted, unref, watch, watchEffect } from 'vue'
+  import { computed, onMounted, unref } from 'vue'
   import LoginFormTitle from './LoginFormTitle.vue'
   import { Button, Divider } from 'ant-design-vue'
   import { QrCode } from '/@/components/Qrcode'
   import { useLoginState, LoginStateEnum } from './useLogin'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { applyQrCode, getQrStatus } from '/@/api/sys/login'
-  import { useIntervalFn } from '@vueuse/core'
+  import { useDebounceFn, useIntervalFn } from '@vueuse/core'
   import { getAppEnvConfig } from '/@/utils/env'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { useUserStore } from '/@/store/modules/user'
@@ -29,11 +31,13 @@
 
   const getShow = computed(() => {
     const flag = unref(getLoginState) === LoginStateEnum.QR_CODE
+    console.log(flag)
+    // 变相实现Watch的效果
     flag ? getQrCode() : pause()
     return flag
   })
 
-  const { pause, resume } = useIntervalFn(() => checkQrScanStatus(), 1000 * 5, { immediate: false })
+  const { pause, resume } = useIntervalFn(() => checkQrScanStatus(), 1000 * 3, { immediate: false })
 
   let qrCodeUrl = $ref('请稍等')
   // true可以获取, false不可以获取
@@ -48,30 +52,27 @@
     const { VITE_GLOB_APP_CLIENT } = getAppEnvConfig()
     client = VITE_GLOB_APP_CLIENT
   })
-
-  // 获取扫码链接
-  function getQrCode() {
+  // 获取扫码链接 使用防抖函数包装
+  const getQrCode = useDebounceFn(() => {
     if (getQrFlag) {
       loading = true
       applyQrCode().then(({ data }) => {
         authCode = data.qrCodeKey
         qrCodeUrl = data.qrCodeUrl
-        loading = false
         getQrFlag = false
-        console.log(444)
+        loading = false
         resume()
       })
     }
-  }
+  }, 1000)
   /**
    * 检查登录状态
    */
   function checkQrScanStatus() {
-    console.log(123)
     getQrStatus(authCode).then(async ({ data }) => {
       // 成功 进行登录
       if (data === 'ok') {
-        resume()
+        pause()
         const token = await userStore.login({
           client: client,
           loginType: loginType,
diff --git a/src/views/login/third/ThirdLogin.vue b/src/views/login/third/ThirdLogin.vue
index 442cb8f..7fcbea4 100644
--- a/src/views/login/third/ThirdLogin.vue
+++ b/src/views/login/third/ThirdLogin.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
   import { DingdingOutlined, WechatFilled, createFromIconfontCN } from '@ant-design/icons-vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { getAppEnvConfig } from '/@/utils/env'
   import { useUserStore } from '/@/store/modules/user'
   import { LoginParams } from '/@/api/sys/model/userModel'
diff --git a/src/views/login/user/ForgetPasswordForm.vue b/src/views/login/user/ForgetPasswordForm.vue
index 9ad2baa..1fd8412 100644
--- a/src/views/login/user/ForgetPasswordForm.vue
+++ b/src/views/login/user/ForgetPasswordForm.vue
@@ -34,7 +34,7 @@
   import { reactive, computed, unref } from 'vue'
   import LoginFormTitle from '../LoginFormTitle.vue'
   import { useLoginState, LoginStateEnum } from '../useLogin'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import { findUsernameByPhoneCaptcha, sendPhoneForgetCaptcha, validatePhoneForgetCaptcha } from '/@/api/sys/userAssist'
   import CountDownInput from '/@/components/CountDown/src/CountdownInput.vue'
diff --git a/src/views/login/user/RegisterForm.vue b/src/views/login/user/RegisterForm.vue
index 06c411d..9ff5fb2 100644
--- a/src/views/login/user/RegisterForm.vue
+++ b/src/views/login/user/RegisterForm.vue
@@ -35,7 +35,7 @@
   import LoginFormTitle from '../LoginFormTitle.vue'
   import { StrengthMeter } from '/@/components/StrengthMeter'
   import { useLoginState, LoginStateEnum } from '../useLogin'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import { imgCaptcha } from '/@/api/common/Captcha'
   import { existsUsername } from '/@/api/sys/userAssist'
diff --git a/src/views/modules/bpm/design/ProcessDesign.ts b/src/views/modules/bpm/design/ProcessDesign.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/views/modules/bpm/design/ProcessDesign.vue b/src/views/modules/bpm/design/ProcessDesign.vue
index 50c6bac..5948a49 100644
--- a/src/views/modules/bpm/design/ProcessDesign.vue
+++ b/src/views/modules/bpm/design/ProcessDesign.vue
@@ -58,6 +58,48 @@
           <div id="canvas" ref="canvas" class="canvas"></div>
         </a-layout-content>
       </a-layout>
+      <a-layout-sider
+        style="background: #fff; min-width: 40px; width: 40px; max-width: 40px; border-left: 1px solid #eeeeee; box-shadow: 0 0 8px #cccccc"
+      >
+        <div style="width: 100%; text-align: center" @click="panelVisible = true">
+          <i class="iconfont icon-left-graph" style="font-size: 32px" v-if="panelExist"></i>
+        </div>
+        <a-drawer
+          width="400px"
+          placement="right"
+          :closable="false"
+          :visible="panelVisible && panelExist"
+          :get-container="false"
+          :wrap-style="{ position: 'absolute' }"
+        >
+          <template #title>
+            <i class="iconfont icon-right-graph" style="font-size: 32px" @click="panelVisible = false"></i><span>{{ panelTitle }}</span>
+          </template>
+          <panel
+            v-if="modeler"
+            ref="panel"
+            :filters="panelFilters"
+            :modeler="modeler"
+            :users="users"
+            :groups="groups"
+            :categories="categories"
+            :categories-fields="categoriesFields"
+            :associate-form-config="associateFormConfig"
+            :associate-form-data-options="associateFormDataOptions"
+            :assignee-data-source="assigneeDataSource"
+            :due-date-data-source="dueDateDataSource"
+            :follow-up-date-data-source="followUpDateDataSource"
+            :initiator-data-source="initiatorDataSource"
+            :skip-expression-data-source="skipExpressionDataSource"
+            :condition-expression-data-source="conditionExpressionDataSource"
+            :candidate-user-data-source="candidateUserDataSource"
+            :candidate-group-data-source="candidateGroupDataSource"
+            @showForm="showAssociateForm"
+            @createForm="createAssociateForm"
+            @change="handlePanelChange"
+          />
+        </a-drawer>
+      </a-layout-sider>
     </a-layout>
     <!--  xml预览  -->
     <basic-modal v-bind="$attrs" width="60%" title="XML" :visible="codeVisible" @cancel="codeVisible = false">
@@ -75,244 +117,42 @@
   import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
   import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
 
-  import Modeler from 'bpmn-js/lib/Modeler'
-
-  import { computed, nextTick, onMounted, watch, watchEffect } from 'vue'
-  import customTranslate from '/@/components/Bpmn/common/customTranslate'
-  import { $ref } from 'vue/macros'
+  import { ref } from 'vue'
   import Icon from '/@/components/Icon'
-  import BpmData from '/@/components/Bpmn/BpmData'
-  import { useMessage } from '/@/hooks/web/useMessage'
-  import { getInitBpmnData } from '/@/components/Bpmn/flowable/designData'
   import CodeEditor from '/@/components/CodeEditor/src/CodeEditor.vue'
   import { MODE } from '/@/components/CodeEditor'
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
+  import useProcessDesign from '/@/views/modules/bpm/design/useProcessDesign'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
 
+  // 挂载元素
+  let canvas = ref<any>()
   const emit = defineEmits(['save', 'cancel'])
-  const { createConfirm } = useMessage()
-
-  // interface Props {
-  //   // 是否编辑状态
-  //   isEdit?: boolean
-  //   // 是否预览状态
-  //   isView?: boolean
-  //   // bpmn 文件内容
-  //   xml?: string
-  // }
-  // const props = withDefaults(defineProps<Props>(), {
-  //   isEdit: true,
-  //   isView: false,
-  //   xml: '',
-  // })
-
-  let isEdit = $ref<boolean>(false)
-  let isView = $ref<boolean>(true)
-
-  // 实例
-  let modeler
-  let canvas = $ref<any>()
-  // 工具配置栏
-  let paletteToolShow = $ref(true)
-  // xml代码预览
-  let codeVisible = $ref(false)
-  let xmlCode = $ref('')
-  // let paletteFilters = $ref<any>([])
-
-  // 缩放
-  let zoom = $ref(1)
-  // 编辑时参数
-  const isEditModules = [
-    {
-      translate: ['value', customTranslate], // 翻译
-    },
-  ]
-  // 查看时参数
-  const notEditModules = [
-    {
-      translate: ['value', customTranslate], // 翻译
-      paletteProvider: ['value', ''], // 禁用/清空左侧工具栏
-      labelEditingProvider: ['value', ''], // 禁用节点编辑
-      contextPadProvider: ['value', ''], // 禁用图形菜单
-      bendpoints: ['value', {}], // 禁用连线拖动
-      move: ['value', ''], // 禁用单个图形拖动
-    },
-  ]
-
-  /**
-   * 渲染函数
-   */
-  function renderer(xml: string, edit: boolean, view: boolean) {
-    nextTick(async () => {
-      isEdit = edit
-      isView = view
-      const xmlData = xml || getInitBpmnData()
-      const additionalModule = edit && !view ? isEditModules : notEditModules
-      modeler = new Modeler({
-        container: '#canvas',
-        propertiesPanel: {},
-        additionalModules: additionalModule,
-        moddleExtensions: {},
-      })
-      await createNewDiagram(xmlData)
-    })
-  }
-
-  /**
-   * 获取流程元素
-   */
-  function getProcessElement() {
-    const rootElements = modeler.getDefinitions().rootElements
-    for (let i = 0; i < rootElements.length; i++) {
-      if (rootElements[i].$type === 'bpmn:Process') return rootElements[i]
-    }
-  }
-
-  /**
-   * 撤消
-   */
-  function undo() {
-    modeler.get('commandStack').undo()
-  }
-  /**
-   * 重做
-   */
-  function redo() {
-    modeler.get('commandStack').redo()
-  }
-
-  /**
-   * 查看 bpmn.xml
-   */
-  async function showXML() {
-    xmlCode = await downXML(false)
-    codeVisible = true
-  }
-  /**
-   * 下载 bpmn.xml
-   */
-  async function downXML(download = false) {
-    try {
-      const { xml } = await modeler.saveXML({ format: true })
-      if (download) {
-        downloadFile(`${getProcessElement().name}.bpmn20.xml`, xml, 'application/xml')
-      }
-      return xml
-    } catch (err) {
-      console.error(err)
-    }
-  }
 
-  /**
-   * 下载图片
-   */
-  async function downImg(type = 'svg', download = false) {
-    try {
-      const { svg } = await modeler.saveSVG({ format: true })
-      if (download) {
-        downloadFile(getProcessElement().name, svg, 'image/svg+xml')
-      }
-      return svg
-    } catch (err) {
-      console.error(err)
-    }
-  }
-
-  /**
-   * 保存
-   */
-  async function saveXML() {
-    const xml = await downXML()
-    emit('save', xml)
-  }
-
-  /**
-   * 关闭
-   */
-  function cancel() {
-    emit('cancel')
-  }
-
-  /**
-   * 打开 bpmn.xml 文件
-   */
-  function openBpmn(file) {
-    const reader = new FileReader()
-    reader.readAsText(file, 'utf-8')
-    reader.onload = () => {
-      createNewDiagram(reader.result)
-    }
-    return false
-  }
-  /**
-   * 新建画布
-   */
-  function newDiagram() {
-    createNewDiagram(getInitBpmnData())
-  }
-  /**
-   * 让图能自适应屏幕
-   */
-  function fitViewport() {
-    zoom = modeler.get('canvas').zoom('fit-viewport')
-    // @ts-ignore
-    const bbox = document.querySelector('.flow-containers .viewport').getBBox()
-    const currentViewBox = modeler.get('canvas').viewbox()
-    const elementMid = {
-      x: bbox.x + bbox.width / 2 - 65,
-      y: bbox.y + bbox.height / 2,
-    }
-    modeler.get('canvas').viewbox({
-      x: elementMid.x - currentViewBox.width / 2,
-      y: elementMid.y - currentViewBox.height / 2,
-      width: currentViewBox.width,
-      height: currentViewBox.height,
-    })
-    zoom = (bbox.width / currentViewBox.width) * 1.8
-  }
-  /**
-   * 放大缩小
-   */
-  function zoomViewport(zoomIn = true) {
-    zoom = modeler.get('canvas').zoom()
-    zoom += zoomIn ? 0.1 : -0.1
-    modeler.get('canvas').zoom(zoom)
-  }
-  /**
-   * 创建新画布
-   */
-  async function createNewDiagram(data) {
-    // 将字符串转换成图显示出来
-    data = data.replace(/<!\[CDATA\[(.+?)]]>/g, function (match, str) {
-      return str.replace(/</g, '&lt;')
-    })
-    await modeler.importXML(data)
-    fitViewport()
-  }
-  /**
-   * 清除画布
-   */
-  function clearDiagram() {
-    createConfirm({
-      iconType: 'info',
-      title: '警告',
-      content: '是否要清空画布!',
-      onOk: () => {
-        newDiagram()
-      },
-    })
-  }
-
-  /**
-   * 下载文件
-   */
-  function downloadFile(filename, data, type) {
-    const a = document.createElement('a')
-    const url = window.URL.createObjectURL(new Blob([data], { type: type }))
-    a.href = url
-    a.download = filename
-    a.click()
-    window.URL.revokeObjectURL(url)
-  }
+  const {
+    modeler,
+    isEdit,
+    isView,
+    codeVisible,
+    xmlCode,
+    zoom,
+    renderer,
+    undo,
+    redo,
+    showXML,
+    saveXML,
+    downXML,
+    downImg,
+    openBpmn,
+    downloadFile,
+    cancel,
+    fitViewport,
+    zoomViewport,
+    clearDiagram,
+  } = useProcessDesign('#canvas', emit)
+
+  let panelVisible = $ref(false)
+  let panelExist = $ref(false)
 
   defineExpose({
     renderer,
diff --git a/src/views/modules/bpm/design/ProcessPanel.vue b/src/views/modules/bpm/design/ProcessPanel.vue
new file mode 100644
index 0000000..d155be5
--- /dev/null
+++ b/src/views/modules/bpm/design/ProcessPanel.vue
@@ -0,0 +1,36 @@
+<template>
+  <div ref="propertyPanel" class="property-panel" v-show="getComponent">
+    <div v-if="nodeName" style="display: none">{{ nodeName }}</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
+
+  let nodeName = $ref<string>()
+  let getComponent = $ref<any>()
+</script>
+
+<style lang="less" scoped>
+  .property-panel {
+    padding: 20px 20px;
+    // reset element css
+    .el-form--label-top .el-form-item__label {
+      padding: 0;
+    }
+    .el-form-item {
+      margin-bottom: 6px;
+    }
+    .tab-table .el-form-item {
+      margin-bottom: 16px;
+    }
+    .node-name {
+      border-bottom: 1px solid #ccc;
+      padding: 0 0 10px 20px;
+      margin-bottom: 10px;
+      font-size: 16px;
+      font-weight: bold;
+      color: #444;
+    }
+  }
+</style>
diff --git a/src/views/modules/bpm/design/useProcessDesign.ts b/src/views/modules/bpm/design/useProcessDesign.ts
new file mode 100644
index 0000000..431f0ed
--- /dev/null
+++ b/src/views/modules/bpm/design/useProcessDesign.ts
@@ -0,0 +1,224 @@
+import Modeler from 'bpmn-js/lib/Modeler'
+import { $ref } from '@vue-macros/reactivity-transform/macros'
+import customTranslate from '/@/components/Bpmn/common/customTranslate'
+import { nextTick } from 'vue'
+import { getInitBpmnData } from '/@/components/Bpmn/flowable/designData'
+import { useMessage } from '/@/hooks/web/useMessage'
+import { $$ } from 'vue/macros'
+
+export default function <T>(canvas: string, emit: any) {
+  const { createConfirm } = useMessage()
+
+  let isEdit = $ref<boolean>(false)
+  let isView = $ref<boolean>(true)
+
+  // 实例
+  let modeler: Modeler
+
+  // xml代码预览
+  let codeVisible = $ref(false)
+  let xmlCode = $ref('')
+
+  // 缩放
+  let zoom = $ref(1)
+  // 编辑时参数
+  const isEditModules = [
+    {
+      translate: ['value', customTranslate], // 翻译
+    },
+  ]
+  // 查看时参数
+  const notEditModules = [
+    {
+      translate: ['value', customTranslate], // 翻译
+      paletteProvider: ['value', ''], // 禁用/清空左侧工具栏
+      labelEditingProvider: ['value', ''], // 禁用节点编辑
+      contextPadProvider: ['value', ''], // 禁用图形菜单
+      bendpoints: ['value', {}], // 禁用连线拖动
+      move: ['value', ''], // 禁用单个图形拖动
+    },
+  ]
+
+  /**
+   * 渲染函数
+   */
+  async function renderer(xml: string, edit: boolean, view: boolean) {
+    nextTick(() => console.log(9999))
+    isEdit = edit
+    isView = view
+    const xmlData = xml || getInitBpmnData()
+    const additionalModule = edit && !view ? isEditModules : notEditModules
+    modeler = new Modeler({
+      container: canvas,
+      propertiesPanel: {},
+      additionalModules: additionalModule,
+      moddleExtensions: {},
+    })
+    await createNewDiagram(xmlData)
+  }
+
+  /**
+   * 获取流程元素
+   */
+  function getProcessElement() {
+    const rootElements = modeler.getDefinitions().rootElements
+    for (let i = 0; i < rootElements.length; i++) {
+      if (rootElements[i].$type === 'bpmn:Process') return rootElements[i]
+    }
+  }
+
+  /**
+   * 撤消
+   */
+  function undo() {
+    modeler.get('commandStack').undo()
+  }
+  /**
+   * 重做
+   */
+  function redo() {
+    modeler.get('commandStack').redo()
+  }
+
+  /**
+   * 查看 bpmn.xml
+   */
+  async function showXML() {
+    xmlCode = await downXML(false)
+    codeVisible = true
+  }
+  /**
+   * 保存
+   */
+  async function saveXML() {
+    const xml = await downXML()
+    emit('save', xml)
+  }
+  /**
+   * 下载 bpmn.xml
+   */
+  async function downXML(download = false) {
+    try {
+      const { xml } = await modeler.saveXML({ format: true })
+      if (download) {
+        downloadFile(`${getProcessElement().name}.bpmn20.xml`, xml, 'application/xml')
+      }
+      return xml
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  /**
+   * 下载图片
+   */
+  async function downImg(type = 'svg', download = false) {
+    try {
+      const { svg } = await modeler.saveSVG({ format: true })
+      if (download) {
+        downloadFile(getProcessElement().name, svg, 'image/svg+xml')
+      }
+      return svg
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  /**
+   * 打开 bpmn.xml 文件
+   */
+  function openBpmn(file) {
+    const reader = new FileReader()
+    reader.readAsText(file, 'utf-8')
+    reader.onload = () => {
+      createNewDiagram(reader.result)
+    }
+    return false
+  }
+  /**
+   * 下载文件
+   */
+  function downloadFile(filename, data, type) {
+    const a = document.createElement('a')
+    const url = window.URL.createObjectURL(new Blob([data], { type: type }))
+    a.href = url
+    a.download = filename
+    a.click()
+    window.URL.revokeObjectURL(url)
+  }
+
+  /**
+   * 关闭
+   */
+  function cancel() {
+    emit('cancel')
+  }
+  /**
+   * 新建画布
+   */
+  function newDiagram() {
+    createNewDiagram(getInitBpmnData())
+  }
+  /**
+   * 让图能自适应屏幕
+   */
+  function fitViewport() {
+    zoom = modeler.get('canvas').zoom('fit-viewport', 'auto')
+  }
+  /**
+   * 放大缩小
+   */
+  function zoomViewport(zoomIn = true) {
+    zoom = modeler.get('canvas').zoom()
+    zoom += zoomIn ? 0.1 : -0.1
+    modeler.get('canvas').zoom(zoom)
+  }
+  /**
+   * 创建新画布
+   */
+  async function createNewDiagram(data) {
+    // 将字符串转换成图显示出来
+    data = data.replace(/<!\[CDATA\[(.+?)]]>/g, function (match, str) {
+      return str.replace(/</g, '&lt;')
+    })
+    await modeler.importXML(data)
+    fitViewport()
+  }
+  /**
+   * 清除画布
+   */
+  function clearDiagram() {
+    createConfirm({
+      iconType: 'info',
+      title: '警告',
+      content: '是否要清空画布!',
+      onOk: () => {
+        newDiagram()
+      },
+    })
+  }
+  return {
+    modeler: $$(modeler),
+    isEdit: $$(isEdit),
+    isView: $$(isView),
+    codeVisible: $$(codeVisible),
+    xmlCode: $$(xmlCode),
+    zoom: $$(zoom),
+    renderer,
+    getProcessElement,
+    undo,
+    redo,
+    showXML,
+    saveXML,
+    downXML,
+    downImg,
+    openBpmn,
+    downloadFile,
+    cancel,
+    newDiagram,
+    fitViewport,
+    zoomViewport,
+    createNewDiagram,
+    clearDiagram,
+  }
+}
diff --git a/src/views/modules/bpm/instance/InstanceList.vue b/src/views/modules/bpm/instance/InstanceList.vue
index 7779edc..b6fd2ec 100644
--- a/src/views/modules/bpm/instance/InstanceList.vue
+++ b/src/views/modules/bpm/instance/InstanceList.vue
@@ -42,7 +42,7 @@
 <script lang="ts" setup>
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import { QueryField, STRING } from '/@/components/Bootx/Query/Query'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
   import { onMounted } from 'vue'
   import { useDict } from '/@/hooks/bootx/useDict'
diff --git a/src/views/modules/bpm/model/BpmModelEdit.vue b/src/views/modules/bpm/model/BpmModelEdit.vue
index f9d313a..f0b3171 100644
--- a/src/views/modules/bpm/model/BpmModelEdit.vue
+++ b/src/views/modules/bpm/model/BpmModelEdit.vue
@@ -52,7 +52,7 @@
 
 <script lang="ts" setup>
 import { nextTick, onMounted, reactive } from "vue";
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, BpmModel } from './Model.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/bpm/model/BpmModelList.vue b/src/views/modules/bpm/model/BpmModelList.vue
index a28f528..6e0b247 100644
--- a/src/views/modules/bpm/model/BpmModelList.vue
+++ b/src/views/modules/bpm/model/BpmModelList.vue
@@ -88,7 +88,7 @@
 <script lang="ts" setup>
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import { QueryField, STRING } from '/@/components/Bootx/Query/Query'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
   import { onMounted } from 'vue'
   import { copy, del, page, publish, verifyModel } from '/@/views/modules/bpm/model/Model.api'
diff --git a/src/views/modules/bpm/model/BpmModeler.vue b/src/views/modules/bpm/model/BpmModeler.vue
index 21e5947..21ba60d 100644
--- a/src/views/modules/bpm/model/BpmModeler.vue
+++ b/src/views/modules/bpm/model/BpmModeler.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import ProcessDesign from '/@/views/modules/bpm/design/ProcessDesign.vue'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { BpmModel, get, uploadBpmn } from './Model.api'
diff --git a/src/views/modules/bpm/model/node/BpmModelNodeEdit.vue b/src/views/modules/bpm/model/node/BpmModelNodeEdit.vue
index 9bbfeee..e66e5b8 100644
--- a/src/views/modules/bpm/model/node/BpmModelNodeEdit.vue
+++ b/src/views/modules/bpm/model/node/BpmModelNodeEdit.vue
@@ -100,7 +100,7 @@
 
 <script lang="ts" setup>
   import { computed, nextTick } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, BpmModelNode } from './ModelNode.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/bpm/model/node/BpmModelNodeList.vue b/src/views/modules/bpm/model/node/BpmModelNodeList.vue
index 6033f9c..8cd25fd 100644
--- a/src/views/modules/bpm/model/node/BpmModelNodeList.vue
+++ b/src/views/modules/bpm/model/node/BpmModelNodeList.vue
@@ -50,7 +50,7 @@
   import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { useDict } from '/@/hooks/bootx/useDict'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { BpmModel } from '../Model.api'
   import { PUBLISHED } from '/@/views/modules/bpm/model/node/BpmModelNodeCode'
   import { BpmModelNode, del, listByModelId, sync } from './ModelNode.api'
diff --git a/src/views/modules/bpm/task/DoneTaskList.vue b/src/views/modules/bpm/task/DoneTaskList.vue
index b144121..6e3fe72 100644
--- a/src/views/modules/bpm/task/DoneTaskList.vue
+++ b/src/views/modules/bpm/task/DoneTaskList.vue
@@ -39,7 +39,7 @@
   import ALink from '/@/components/Link/Link.vue'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import { useMessage } from '/@/hooks/web/useMessage'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { QueryField, STRING } from '/@/components/Bootx/Query/Query'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
   import { onMounted } from 'vue'
diff --git a/src/views/modules/bpm/task/TodoTaskList.vue b/src/views/modules/bpm/task/TodoTaskList.vue
index 3974dec..dc5fc82 100644
--- a/src/views/modules/bpm/task/TodoTaskList.vue
+++ b/src/views/modules/bpm/task/TodoTaskList.vue
@@ -43,7 +43,7 @@
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { QueryField, STRING } from '/@/components/Bootx/Query/Query'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
   import { onMounted } from 'vue'
   import { assignee, pageByTodoAdmin } from './Task.api'
diff --git a/src/views/modules/demo/chinaregion/ChinaRegionDemo.vue b/src/views/modules/demo/chinaregion/ChinaRegionDemo.vue
index 753803c..76caf82 100644
--- a/src/views/modules/demo/chinaregion/ChinaRegionDemo.vue
+++ b/src/views/modules/demo/chinaregion/ChinaRegionDemo.vue
@@ -34,7 +34,7 @@
 <script lang="ts" setup>
   import { Cascader } from 'ant-design-vue'
   import { findAllProvinceAndCity, findAllProvinceAndCityAndArea, findAllRegionByParentCode, Region } from '/@/api/common/ChinaRegion.api'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { onMounted } from 'vue'
   import { DefaultOptionType } from 'ant-design-vue/es/vc-cascader'
   import { cloneDeep } from 'lodash-es'
diff --git a/src/views/modules/demo/data/encrypt/DataEncryptDemoEdit.vue b/src/views/modules/demo/data/encrypt/DataEncryptDemoEdit.vue
index dc706a6..9d3dbc6 100644
--- a/src/views/modules/demo/data/encrypt/DataEncryptDemoEdit.vue
+++ b/src/views/modules/demo/data/encrypt/DataEncryptDemoEdit.vue
@@ -38,7 +38,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, DataEncryptDemo } from './DataEncryptDemo.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/demo/data/encrypt/DataEncryptDemoList.vue b/src/views/modules/demo/data/encrypt/DataEncryptDemoList.vue
index d162a29..d802cf9 100644
--- a/src/views/modules/demo/data/encrypt/DataEncryptDemoList.vue
+++ b/src/views/modules/demo/data/encrypt/DataEncryptDemoList.vue
@@ -48,7 +48,7 @@
 
 <script lang="ts" setup>
   import { onMounted } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, page } from './DataEncryptDemo.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import DataEncryptDemoEdit from './DataEncryptDemoEdit.vue'
diff --git a/src/views/modules/demo/data/perm/DataPermDemoEdit.vue b/src/views/modules/demo/data/perm/DataPermDemoEdit.vue
index d4706ae..5dd4b4c 100644
--- a/src/views/modules/demo/data/perm/DataPermDemoEdit.vue
+++ b/src/views/modules/demo/data/perm/DataPermDemoEdit.vue
@@ -38,7 +38,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, DataPermDemo } from './DataPermDemo.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/demo/data/perm/DataPermDemoList.vue b/src/views/modules/demo/data/perm/DataPermDemoList.vue
index 6cce4bd..80d7dae 100644
--- a/src/views/modules/demo/data/perm/DataPermDemoList.vue
+++ b/src/views/modules/demo/data/perm/DataPermDemoList.vue
@@ -48,7 +48,7 @@
 
 <script lang="ts" setup>
   import { onMounted } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, page } from './DataPermDemo.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import DataPermDemoEdit from './DataPermDemoEdit.vue'
diff --git a/src/views/modules/demo/data/sensitive/DataSensitiveDemoEdit.vue b/src/views/modules/demo/data/sensitive/DataSensitiveDemoEdit.vue
index 62d3c5c..96099fb 100644
--- a/src/views/modules/demo/data/sensitive/DataSensitiveDemoEdit.vue
+++ b/src/views/modules/demo/data/sensitive/DataSensitiveDemoEdit.vue
@@ -53,7 +53,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, DataSensitiveDemo } from './DataSensitiveDemo.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/demo/data/sensitive/DataSensitiveDemoList.vue b/src/views/modules/demo/data/sensitive/DataSensitiveDemoList.vue
index dcb7173..d4ceb4b 100644
--- a/src/views/modules/demo/data/sensitive/DataSensitiveDemoList.vue
+++ b/src/views/modules/demo/data/sensitive/DataSensitiveDemoList.vue
@@ -49,7 +49,7 @@
 
 <script lang="ts" setup>
   import { onMounted } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, page } from './DataSensitiveDemo.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import DataSensitiveDemoEdit from './DataSensitiveDemoEdit.vue'
diff --git a/src/views/modules/demo/mq/MqDemo.vue b/src/views/modules/demo/mq/MqDemo.vue
index 942cb5a..6561709 100644
--- a/src/views/modules/demo/mq/MqDemo.vue
+++ b/src/views/modules/demo/mq/MqDemo.vue
@@ -22,7 +22,7 @@
 <script lang="ts" setup>
   import { useMessage } from '/@/hooks/web/useMessage'
   import { sendKeyExpired, sendRabbitMsg, sendRedisMsg } from './MqDemo.api'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
 
   const { createMessage } = useMessage()
 
diff --git a/src/views/modules/demo/notice/email/SimpleEmailSender.vue b/src/views/modules/demo/notice/email/SimpleEmailSender.vue
index b01aa4d..2b3c8da 100644
--- a/src/views/modules/demo/notice/email/SimpleEmailSender.vue
+++ b/src/views/modules/demo/notice/email/SimpleEmailSender.vue
@@ -33,7 +33,7 @@
 
 <script lang="ts" setup>
   import '@wangeditor/editor/dist/css/style.css' // 引入 css
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { validateEmail } from '/@/utils/validate'
   import { nextTick, onBeforeUnmount, shallowRef } from 'vue'
   import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
diff --git a/src/views/modules/demo/query/SuperQueryDemoEdit.vue b/src/views/modules/demo/query/SuperQueryDemoEdit.vue
index 1e430b6..d20e8ad 100644
--- a/src/views/modules/demo/query/SuperQueryDemoEdit.vue
+++ b/src/views/modules/demo/query/SuperQueryDemoEdit.vue
@@ -53,7 +53,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, SuperQuery } from './SuperQueryDemo.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/demo/query/SuperQueryDemoList.vue b/src/views/modules/demo/query/SuperQueryDemoList.vue
index a73b6e4..31d968b 100644
--- a/src/views/modules/demo/query/SuperQueryDemoList.vue
+++ b/src/views/modules/demo/query/SuperQueryDemoList.vue
@@ -68,7 +68,7 @@
 
 <script lang="ts" setup>
   import { computed, onMounted } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, page, superPage } from './SuperQueryDemo.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
diff --git a/src/views/modules/demo/wangeditor/WangEditorDemo.vue b/src/views/modules/demo/wangeditor/WangEditorDemo.vue
index d934ab0..052748e 100644
--- a/src/views/modules/demo/wangeditor/WangEditorDemo.vue
+++ b/src/views/modules/demo/wangeditor/WangEditorDemo.vue
@@ -14,7 +14,7 @@
 <script lang="ts" setup>
   import '@wangeditor/editor/dist/css/style.css' // 引入 css
   import { onBeforeUnmount, shallowRef } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 
   // 编辑器实例，必须用 shallowRef
diff --git a/src/views/modules/demo/ws/WebsocketDemo.vue b/src/views/modules/demo/ws/WebsocketDemo.vue
index cbe4d03..180f330 100644
--- a/src/views/modules/demo/ws/WebsocketDemo.vue
+++ b/src/views/modules/demo/ws/WebsocketDemo.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { useWebSocket } from '@vueuse/core'
   import { findByParamKey } from '/@/api/common/Parameter'
   import { useUserStore } from '/@/store/modules/user'
diff --git a/src/views/modules/develop/codegen/CodeGenForm.vue b/src/views/modules/develop/codegen/CodeGenForm.vue
index b5e75cd..42b0ca7 100644
--- a/src/views/modules/develop/codegen/CodeGenForm.vue
+++ b/src/views/modules/develop/codegen/CodeGenForm.vue
@@ -78,7 +78,7 @@
 
 <script lang="ts" setup>
   import { getTableGenParam } from './CodeGen.api'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { nextTick } from 'vue'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { FormInstance } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/develop/codegen/CodeGenList.vue b/src/views/modules/develop/codegen/CodeGenList.vue
index 7f9652e..f2269a9 100644
--- a/src/views/modules/develop/codegen/CodeGenList.vue
+++ b/src/views/modules/develop/codegen/CodeGenList.vue
@@ -35,7 +35,7 @@
   import CodeGenForm from './CodeGenForm.vue'
   import { QueryField, STRING } from '/@/components/Bootx/Query/Query'
   import useTablePage from '/@/hooks/bootx/useTablePage'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
   import { onMounted } from 'vue'
   import { codeGenPreview, genCodeZip, page } from './CodeGen.api'
diff --git a/src/views/modules/develop/dynamicform/DynamicFormEdit.vue b/src/views/modules/develop/dynamicform/DynamicFormEdit.vue
index 69263b6..7edf47a 100644
--- a/src/views/modules/develop/dynamicform/DynamicFormEdit.vue
+++ b/src/views/modules/develop/dynamicform/DynamicFormEdit.vue
@@ -33,7 +33,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, existsByCode, existsByCodeNotId, DynamicForm } from './DynamicForm.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/develop/dynamicform/DynamicFormList.vue b/src/views/modules/develop/dynamicform/DynamicFormList.vue
index 5a6e9fd..48d46d1 100644
--- a/src/views/modules/develop/dynamicform/DynamicFormList.vue
+++ b/src/views/modules/develop/dynamicform/DynamicFormList.vue
@@ -67,7 +67,7 @@
 
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, page } from './DynamicForm.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import DynamicFormEdit from './DynamicFormEdit.vue'
diff --git a/src/views/modules/develop/dynamicsource/DataSourceList.vue b/src/views/modules/develop/dynamicsource/DataSourceList.vue
index 6585f3f..446e110 100644
--- a/src/views/modules/develop/dynamicsource/DataSourceList.vue
+++ b/src/views/modules/develop/dynamicsource/DataSourceList.vue
@@ -15,7 +15,7 @@
 
 <script lang="ts" setup>
   import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { findAllDataSource, removeDataSourceByKey } from './DynamicDataSource.api'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { KeyValue } from '/#/web'
diff --git a/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue b/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue
index 7e08b2b..e69f86a 100644
--- a/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue
+++ b/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue
@@ -56,7 +56,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import {
     add,
diff --git a/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue b/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue
index 89c90e8..d609426 100644
--- a/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue
+++ b/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue
@@ -67,7 +67,7 @@
 
 <script lang="ts" setup>
   import { onMounted } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { addDynamicDataSourceById, databaseTypes, del, existsByDataSourceKey, page, testConnectionById } from './DynamicDataSource.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import DynamicDataSourceEdit from './DynamicDataSourceEdit.vue'
diff --git a/src/views/modules/develop/file/FileUploadList.vue b/src/views/modules/develop/file/FileUploadList.vue
index 9c7d258..a620186 100644
--- a/src/views/modules/develop/file/FileUploadList.vue
+++ b/src/views/modules/develop/file/FileUploadList.vue
@@ -47,7 +47,7 @@
 
 <script lang="ts" setup>
   import { computed, onMounted } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { page } from './FileUpload.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
diff --git a/src/views/modules/develop/query/QuerySqlEdit.vue b/src/views/modules/develop/query/QuerySqlEdit.vue
index 485c59c..45e2496 100644
--- a/src/views/modules/develop/query/QuerySqlEdit.vue
+++ b/src/views/modules/develop/query/QuerySqlEdit.vue
@@ -51,7 +51,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, QuerySql } from './QuerySql.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/develop/query/QuerySqlList.vue b/src/views/modules/develop/query/QuerySqlList.vue
index 83244ae..00db6ff 100644
--- a/src/views/modules/develop/query/QuerySqlList.vue
+++ b/src/views/modules/develop/query/QuerySqlList.vue
@@ -57,7 +57,7 @@
 
 <script lang="ts" setup>
   import { onMounted } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, page } from './QuerySql.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import QuerySqlEdit from './QuerySqlEdit.vue'
diff --git a/src/views/modules/develop/report/ProjectInfoEdit.vue b/src/views/modules/develop/report/ProjectInfoEdit.vue
index 91c10f6..0e7233f 100644
--- a/src/views/modules/develop/report/ProjectInfoEdit.vue
+++ b/src/views/modules/develop/report/ProjectInfoEdit.vue
@@ -38,7 +38,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, ProjectInfo } from './ProjectInfo.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/develop/report/ProjectInfoList.vue b/src/views/modules/develop/report/ProjectInfoList.vue
index b3dc4f9..b12b88d 100644
--- a/src/views/modules/develop/report/ProjectInfoList.vue
+++ b/src/views/modules/develop/report/ProjectInfoList.vue
@@ -87,7 +87,7 @@
 
 <script lang="ts" setup>
   import { onMounted } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { copy, del, enableEditContent, getGoViewUrl, page, publish, resetEditContent, unPublish } from './ProjectInfo.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import ProjectInfoEdit from './ProjectInfoEdit.vue'
diff --git a/src/views/modules/monitor/data/DataVersionLogInfo.vue b/src/views/modules/monitor/data/DataVersionLogInfo.vue
index 5c192c3..bb2631f 100644
--- a/src/views/modules/monitor/data/DataVersionLogInfo.vue
+++ b/src/views/modules/monitor/data/DataVersionLogInfo.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import JsonPreview from '/@/components/CodeEditor/src/json-preview/JsonPreview.vue'
   import { get, DataVersionLog } from './DataVersionLog.api'
diff --git a/src/views/modules/monitor/data/DataVersionLogList.vue b/src/views/modules/monitor/data/DataVersionLogList.vue
index 71ee376..bbd3dbc 100644
--- a/src/views/modules/monitor/data/DataVersionLogList.vue
+++ b/src/views/modules/monitor/data/DataVersionLogList.vue
@@ -35,7 +35,7 @@
 
 <script lang="ts" setup>
   import { onMounted } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { page } from './DataVersionLog.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import DataVersionLogEdit from './DataVersionLogInfo.vue'
diff --git a/src/views/modules/monitor/login/LoginLogInfo.vue b/src/views/modules/monitor/login/LoginLogInfo.vue
index 49e5165..8e339c5 100644
--- a/src/views/modules/monitor/login/LoginLogInfo.vue
+++ b/src/views/modules/monitor/login/LoginLogInfo.vue
@@ -10,7 +10,7 @@
 <script lang="ts" setup>
   import { Description } from '/@/components/Description'
   import { Client } from '/@/views/modules/system/client/Client.api'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { get, LoginLog } from './LoginLog.api'
   import { DescItem } from '/@/components/Description'
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
diff --git a/src/views/modules/monitor/login/LoginLogList.vue b/src/views/modules/monitor/login/LoginLogList.vue
index 2727b70..70f410b 100644
--- a/src/views/modules/monitor/login/LoginLogList.vue
+++ b/src/views/modules/monitor/login/LoginLogList.vue
@@ -53,7 +53,7 @@
 
 <script lang="ts" setup>
   import { computed, onMounted, ref } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { page } from './LoginLog.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
diff --git a/src/views/modules/monitor/operate/OperateLogInfo.vue b/src/views/modules/monitor/operate/OperateLogInfo.vue
index 7179032..37f27f8 100644
--- a/src/views/modules/monitor/operate/OperateLogInfo.vue
+++ b/src/views/modules/monitor/operate/OperateLogInfo.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { get, OperateLog } from './OperateLog.api'
   import { BasicModal } from '/@/components/Modal'
   import { DescItem } from '/@/components/Description'
diff --git a/src/views/modules/monitor/operate/OperateLogList.vue b/src/views/modules/monitor/operate/OperateLogList.vue
index 99b7242..d86221d 100644
--- a/src/views/modules/monitor/operate/OperateLogList.vue
+++ b/src/views/modules/monitor/operate/OperateLogList.vue
@@ -47,7 +47,7 @@
 
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { page } from './OperateLog.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import OperateLogEdit from './OperateLogInfo.vue'
diff --git a/src/views/modules/monitor/redis/RedisInfoMonitor.vue b/src/views/modules/monitor/redis/RedisInfoMonitor.vue
index 378795a..2a164d5 100644
--- a/src/views/modules/monitor/redis/RedisInfoMonitor.vue
+++ b/src/views/modules/monitor/redis/RedisInfoMonitor.vue
@@ -56,7 +56,7 @@
   import { ref, Ref, onMounted, onBeforeUnmount } from 'vue'
   import { useECharts } from '/@/hooks/web/useECharts'
   import { getRedisInfo } from '/@/views/modules/monitor/redis/RedisInfoMonitor.api'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { useIntervalFn } from '@vueuse/core'
 
   const commandStatsChartRef = ref<HTMLDivElement | null>(null)
diff --git a/src/views/modules/monitor/system/SystemInfoMonitor.vue b/src/views/modules/monitor/system/SystemInfoMonitor.vue
index 88e64d0..a2f0881 100644
--- a/src/views/modules/monitor/system/SystemInfoMonitor.vue
+++ b/src/views/modules/monitor/system/SystemInfoMonitor.vue
@@ -141,7 +141,7 @@
 <script lang="ts" setup>
   import { onBeforeUnmount, onMounted, onUnmounted } from 'vue'
   import { getSystemInfo } from './SystemInfo.api'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { useIntervalFn } from '@vueuse/core'
 
   let interval: any = null
diff --git a/src/views/modules/notice/mail/MailConfigEdit.vue b/src/views/modules/notice/mail/MailConfigEdit.vue
index 022d807..ea4d21d 100644
--- a/src/views/modules/notice/mail/MailConfigEdit.vue
+++ b/src/views/modules/notice/mail/MailConfigEdit.vue
@@ -74,7 +74,7 @@
 
 <script lang="ts" setup>
   import { computed, nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, MailConfig, existsByCode, existsByCodeNotId } from './MailConfig.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/notice/mail/MailConfigList.vue b/src/views/modules/notice/mail/MailConfigList.vue
index 9a066e0..93abb75 100644
--- a/src/views/modules/notice/mail/MailConfigList.vue
+++ b/src/views/modules/notice/mail/MailConfigList.vue
@@ -75,7 +75,7 @@
 
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, page, setUpActivity } from './MailConfig.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import MailConfigEdit from './MailConfigEdit.vue'
diff --git a/src/views/modules/notice/site/receive/SiteMessageList.vue b/src/views/modules/notice/site/receive/SiteMessageList.vue
index ed8c5fc..6055941 100644
--- a/src/views/modules/notice/site/receive/SiteMessageList.vue
+++ b/src/views/modules/notice/site/receive/SiteMessageList.vue
@@ -47,7 +47,7 @@
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { QueryField, STRING } from '/@/components/Bootx/Query/Query'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
   import { onMounted } from 'vue'
   import { pageByReceive } from '/@/views/modules/notice/site/SiteMessage.api'
diff --git a/src/views/modules/notice/site/sender/SiteMessageEdit.vue b/src/views/modules/notice/site/sender/SiteMessageEdit.vue
index 173ce31..e2e5e26 100644
--- a/src/views/modules/notice/site/sender/SiteMessageEdit.vue
+++ b/src/views/modules/notice/site/sender/SiteMessageEdit.vue
@@ -43,7 +43,7 @@
 <script lang="ts" setup>
   import '@wangeditor/editor/dist/css/style.css' // 引入 css
   import { nextTick, onBeforeUnmount, reactive, shallowRef } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { saveOrUpdate, get } from '../SiteMessage.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/notice/site/sender/SiteMessageList.vue b/src/views/modules/notice/site/sender/SiteMessageList.vue
index 09a0675..a9ef3bf 100644
--- a/src/views/modules/notice/site/sender/SiteMessageList.vue
+++ b/src/views/modules/notice/site/sender/SiteMessageList.vue
@@ -76,7 +76,7 @@
 
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { cancel, del, pageBySender, send } from '../SiteMessage.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import SiteMessageEdit from './SiteMessageEdit.vue'
diff --git a/src/views/modules/notice/template/MessageTemplateEdit.vue b/src/views/modules/notice/template/MessageTemplateEdit.vue
index dfe4ba9..fb2c964 100644
--- a/src/views/modules/notice/template/MessageTemplateEdit.vue
+++ b/src/views/modules/notice/template/MessageTemplateEdit.vue
@@ -48,7 +48,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, existsByCode, existsByCodeNotId, MessageTemplate } from './MessageTemplate.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/notice/template/MessageTemplateList.vue b/src/views/modules/notice/template/MessageTemplateList.vue
index b2c6910..c23e8a6 100644
--- a/src/views/modules/notice/template/MessageTemplateList.vue
+++ b/src/views/modules/notice/template/MessageTemplateList.vue
@@ -65,7 +65,7 @@
 
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, page } from './MessageTemplate.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import MessageTemplateEdit from './MessageTemplateEdit.vue'
diff --git a/src/views/modules/notice/template/TemplateRender.vue b/src/views/modules/notice/template/TemplateRender.vue
index 0e650d8..d0374ed 100644
--- a/src/views/modules/notice/template/TemplateRender.vue
+++ b/src/views/modules/notice/template/TemplateRender.vue
@@ -31,7 +31,7 @@
 <script lang="ts" setup>
   import CodeEditor from '/@/components/CodeEditor/src/CodeEditor.vue'
   import { MODE } from '/@/components/CodeEditor'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { get, MessageTemplate, render } from '/@/views/modules/notice/template/MessageTemplate.api'
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
   import { useMessage } from '/@/hooks/web/useMessage'
diff --git a/src/views/modules/office/myapply/MyApplyList.vue b/src/views/modules/office/myapply/MyApplyList.vue
index 05b60fa..16d9021 100644
--- a/src/views/modules/office/myapply/MyApplyList.vue
+++ b/src/views/modules/office/myapply/MyApplyList.vue
@@ -48,7 +48,7 @@
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { QueryField, STRING } from '/@/components/Bootx/Query/Query'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
   import { onMounted } from 'vue'
   import { useDict } from '/@/hooks/bootx/useDict'
diff --git a/src/views/modules/office/mydone/MyDoneList.vue b/src/views/modules/office/mydone/MyDoneList.vue
index 750e33b..bf61f20 100644
--- a/src/views/modules/office/mydone/MyDoneList.vue
+++ b/src/views/modules/office/mydone/MyDoneList.vue
@@ -39,7 +39,7 @@
   import ALink from '/@/components/Link/Link.vue'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import { useMessage } from '/@/hooks/web/useMessage'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { QueryField, STRING } from '/@/components/Bootx/Query/Query'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
   import { onMounted } from 'vue'
diff --git a/src/views/modules/office/mytodo/MyTodoList.vue b/src/views/modules/office/mytodo/MyTodoList.vue
index c868659..a2b8803 100644
--- a/src/views/modules/office/mytodo/MyTodoList.vue
+++ b/src/views/modules/office/mytodo/MyTodoList.vue
@@ -42,7 +42,7 @@
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { QueryField, STRING } from '/@/components/Bootx/Query/Query'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
   import { onMounted } from 'vue'
   import { pageMyTodo } from "/@/views/modules/bpm/task/Task.api";
diff --git a/src/views/modules/payment/channel/alipay/AlipayConfigEdit.vue b/src/views/modules/payment/channel/alipay/AlipayConfigEdit.vue
index 21067ae..8e1f7c1 100644
--- a/src/views/modules/payment/channel/alipay/AlipayConfigEdit.vue
+++ b/src/views/modules/payment/channel/alipay/AlipayConfigEdit.vue
@@ -105,7 +105,7 @@
 
 <script lang="ts" setup>
   import { computed, nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, AlipayConfig, findPayWayList } from './AlipayConfig.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/payment/channel/alipay/AlipayConfigList.vue b/src/views/modules/payment/channel/alipay/AlipayConfigList.vue
index 61d635a..8ea58aa 100644
--- a/src/views/modules/payment/channel/alipay/AlipayConfigList.vue
+++ b/src/views/modules/payment/channel/alipay/AlipayConfigList.vue
@@ -72,7 +72,7 @@
 
 <script lang="ts" setup>
   import { onMounted } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { clearActivity, del, page, setUpActivity } from './AlipayConfig.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import AlipayConfigEdit from './AlipayConfigEdit.vue'
diff --git a/src/views/modules/payment/channel/wechat/WechatPayConfigEdit.vue b/src/views/modules/payment/channel/wechat/WechatPayConfigEdit.vue
index 14f5a47..386c6df 100644
--- a/src/views/modules/payment/channel/wechat/WechatPayConfigEdit.vue
+++ b/src/views/modules/payment/channel/wechat/WechatPayConfigEdit.vue
@@ -112,7 +112,7 @@
 
 <script lang="ts" setup>
   import { computed, nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, findPayWayList, WechatPayConfig } from './WechatPayConfig.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/payment/channel/wechat/WechatPayConfigList.vue b/src/views/modules/payment/channel/wechat/WechatPayConfigList.vue
index ed3f1c5..b9d6e84 100644
--- a/src/views/modules/payment/channel/wechat/WechatPayConfigList.vue
+++ b/src/views/modules/payment/channel/wechat/WechatPayConfigList.vue
@@ -77,7 +77,7 @@
 
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, page, clearActivity, setUpActivity } from './WechatPayConfig.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import WechatPayConfigEdit from './WechatPayConfigEdit.vue'
diff --git a/src/views/modules/payment/notify/PayNotifyRecordInfo.vue b/src/views/modules/payment/notify/PayNotifyRecordInfo.vue
index 276c6bd..8824f98 100644
--- a/src/views/modules/payment/notify/PayNotifyRecordInfo.vue
+++ b/src/views/modules/payment/notify/PayNotifyRecordInfo.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { get, PayNotifyRecord } from './PayNotifyRecord.api'
   import { FormInstance } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/payment/notify/PayNotifyRecordList.vue b/src/views/modules/payment/notify/PayNotifyRecordList.vue
index b208680..590a993 100644
--- a/src/views/modules/payment/notify/PayNotifyRecordList.vue
+++ b/src/views/modules/payment/notify/PayNotifyRecordList.vue
@@ -43,7 +43,7 @@
 
 <script lang="ts" setup>
   import { onMounted } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { page } from './PayNotifyRecord.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
diff --git a/src/views/modules/payment/order/payment/PaymentInfo.vue b/src/views/modules/payment/order/payment/PaymentInfo.vue
index fd99d0f..9556714 100644
--- a/src/views/modules/payment/order/payment/PaymentInfo.vue
+++ b/src/views/modules/payment/order/payment/PaymentInfo.vue
@@ -63,7 +63,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { get, Payment } from './Payment.api'
   import { FormInstance } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/payment/order/payment/PaymentList.vue b/src/views/modules/payment/order/payment/PaymentList.vue
index f087320..2da9a0f 100644
--- a/src/views/modules/payment/order/payment/PaymentList.vue
+++ b/src/views/modules/payment/order/payment/PaymentList.vue
@@ -87,7 +87,7 @@
 
 <script lang="ts" setup>
   import { onMounted } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { page, superPage } from './Payment.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import PaymentInfo from './PaymentInfo.vue'
diff --git a/src/views/modules/payment/order/payment/RefundModel.vue b/src/views/modules/payment/order/payment/RefundModel.vue
index b416603..0ad96b7 100644
--- a/src/views/modules/payment/order/payment/RefundModel.vue
+++ b/src/views/modules/payment/order/payment/RefundModel.vue
@@ -22,7 +22,7 @@
 
 <script lang="ts" setup>
   import { get } from '/@/views/modules/payment/order/payment/Payment.api'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { useDict } from '/@/hooks/bootx/useDict'
   import { refund } from '/@/api/common/Pay'
diff --git a/src/views/modules/payment/order/refund/RefundRecordInfo.vue b/src/views/modules/payment/order/refund/RefundRecordInfo.vue
index 1f9f324..e995b5f 100644
--- a/src/views/modules/payment/order/refund/RefundRecordInfo.vue
+++ b/src/views/modules/payment/order/refund/RefundRecordInfo.vue
@@ -54,7 +54,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { get, RefundRecord } from './RefundRecord.api'
   import { FormInstance } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/payment/order/refund/RefundRecordList.vue b/src/views/modules/payment/order/refund/RefundRecordList.vue
index 0e7d20f..d832d18 100644
--- a/src/views/modules/payment/order/refund/RefundRecordList.vue
+++ b/src/views/modules/payment/order/refund/RefundRecordList.vue
@@ -48,7 +48,7 @@
 
 <script lang="ts" setup>
   import { onMounted } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { page } from './RefundRecord.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import RefundRecordEdit from './RefundRecordInfo.vue'
diff --git a/src/views/modules/payment/voucher/VoucherGeneration.vue b/src/views/modules/payment/voucher/VoucherGeneration.vue
index c2189ea..60fcccd 100644
--- a/src/views/modules/payment/voucher/VoucherGeneration.vue
+++ b/src/views/modules/payment/voucher/VoucherGeneration.vue
@@ -60,7 +60,7 @@
 <script lang="ts" setup>
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { useMessage } from '/@/hooks/web/useMessage'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import { computed, nextTick } from 'vue'
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
diff --git a/src/views/modules/payment/voucher/VoucherInfo.vue b/src/views/modules/payment/voucher/VoucherInfo.vue
index e0bc557..024d1a6 100644
--- a/src/views/modules/payment/voucher/VoucherInfo.vue
+++ b/src/views/modules/payment/voucher/VoucherInfo.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { get, Voucher } from './Voucher.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/payment/voucher/VoucherList.vue b/src/views/modules/payment/voucher/VoucherList.vue
index 602b513..2ffa645 100644
--- a/src/views/modules/payment/voucher/VoucherList.vue
+++ b/src/views/modules/payment/voucher/VoucherList.vue
@@ -69,7 +69,7 @@
 
 <script lang="ts" setup>
   import { onMounted } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, lock, page, unlock } from './Voucher.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import VoucherInfo from './VoucherInfo.vue'
diff --git a/src/views/modules/payment/wallet/list/WalletChanger.vue b/src/views/modules/payment/wallet/list/WalletChanger.vue
index bfb7d89..f64f9c4 100644
--- a/src/views/modules/payment/wallet/list/WalletChanger.vue
+++ b/src/views/modules/payment/wallet/list/WalletChanger.vue
@@ -37,7 +37,7 @@
 <script lang="ts" setup>
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { useMessage } from '/@/hooks/web/useMessage'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import { nextTick } from 'vue'
   import { changerBalance } from '/@/views/modules/payment/wallet/list/Wallet.api'
diff --git a/src/views/modules/payment/wallet/list/WalletInfo.vue b/src/views/modules/payment/wallet/list/WalletInfo.vue
index a7c154f..5efe53d 100644
--- a/src/views/modules/payment/wallet/list/WalletInfo.vue
+++ b/src/views/modules/payment/wallet/list/WalletInfo.vue
@@ -32,7 +32,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, getWalletInfo, update, Wallet } from "./Wallet.api";
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/payment/wallet/list/WalletList.vue b/src/views/modules/payment/wallet/list/WalletList.vue
index 3382714..8d7fe95 100644
--- a/src/views/modules/payment/wallet/list/WalletList.vue
+++ b/src/views/modules/payment/wallet/list/WalletList.vue
@@ -66,7 +66,7 @@
 
 <script lang="ts" setup>
   import { onMounted } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { createWalletBatch, del, lock, page, pageByNotWallet, unlock } from './Wallet.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import WalletInfo from './WalletInfo.vue'
diff --git a/src/views/modules/payment/wallet/list/WalletLogList.vue b/src/views/modules/payment/wallet/list/WalletLogList.vue
index 1a9362c..07055e4 100644
--- a/src/views/modules/payment/wallet/list/WalletLogList.vue
+++ b/src/views/modules/payment/wallet/list/WalletLogList.vue
@@ -32,7 +32,7 @@
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { QueryField } from '/@/components/Bootx/Query/Query'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
   import { nextTick } from 'vue'
   import { pageByWalletId } from '/@/views/modules/payment/wallet/list/WalletLog.api'
diff --git a/src/views/modules/system/client/ClientEdit.vue b/src/views/modules/system/client/ClientEdit.vue
index d2a3b45..508cf66 100644
--- a/src/views/modules/system/client/ClientEdit.vue
+++ b/src/views/modules/system/client/ClientEdit.vue
@@ -63,7 +63,7 @@
   import { FormInstance, Rule, useForm } from 'ant-design-vue/lib/form'
   import { FormEditType } from '/@/enums/formTypeEnum'
   import { findAll, LoginType } from '/@/views/modules/system/loginType/LoginType.api'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { useValidate } from '/@/hooks/bootx/useValidate'
   import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
 
diff --git a/src/views/modules/system/client/ClientList.vue b/src/views/modules/system/client/ClientList.vue
index a77b6ad..c9bae4f 100644
--- a/src/views/modules/system/client/ClientList.vue
+++ b/src/views/modules/system/client/ClientList.vue
@@ -68,7 +68,7 @@
   import { STRING } from '/@/components/Bootx/Query/Query'
   import { FormEditType } from '/@/enums/formTypeEnum'
   import { useMessage } from '/@/hooks/web/useMessage'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
 
   // 使用hooks
diff --git a/src/views/modules/system/dept/DeptEdit.vue b/src/views/modules/system/dept/DeptEdit.vue
index 67a76de..981ba43 100644
--- a/src/views/modules/system/dept/DeptEdit.vue
+++ b/src/views/modules/system/dept/DeptEdit.vue
@@ -73,7 +73,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, Dept, tree } from './Dept.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/system/dept/DeptList.vue b/src/views/modules/system/dept/DeptList.vue
index 086ac17..12069d0 100644
--- a/src/views/modules/system/dept/DeptList.vue
+++ b/src/views/modules/system/dept/DeptList.vue
@@ -75,7 +75,7 @@
 
 <script lang="ts" setup>
   import { nextTick, onMounted } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, DeptTree, tree } from './Dept.api'
   import DeptEdit from './DeptEdit.vue'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
diff --git a/src/views/modules/system/dict/DictEdit.vue b/src/views/modules/system/dict/DictEdit.vue
index 64df639..9d721d3 100644
--- a/src/views/modules/system/dict/DictEdit.vue
+++ b/src/views/modules/system/dict/DictEdit.vue
@@ -39,7 +39,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, existsByCode, existsByCodeNotId, Dict } from './Dict.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/system/dict/DictItemEdit.vue b/src/views/modules/system/dict/DictItemEdit.vue
index d8d27a6..a273fa6 100644
--- a/src/views/modules/system/dict/DictItemEdit.vue
+++ b/src/views/modules/system/dict/DictItemEdit.vue
@@ -42,7 +42,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, existsByCode, existsByCodeNotId, DictItem } from './DictItem.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/system/dict/DictItemList.vue b/src/views/modules/system/dict/DictItemList.vue
index 15a27be..160101f 100644
--- a/src/views/modules/system/dict/DictItemList.vue
+++ b/src/views/modules/system/dict/DictItemList.vue
@@ -50,7 +50,7 @@
 
 <script lang="ts" setup>
   import { nextTick, onMounted, ref } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, page } from './DictItem.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import DictItemEdit from './DictItemEdit.vue'
diff --git a/src/views/modules/system/dict/DictList.vue b/src/views/modules/system/dict/DictList.vue
index c224806..8209675 100644
--- a/src/views/modules/system/dict/DictList.vue
+++ b/src/views/modules/system/dict/DictList.vue
@@ -64,7 +64,7 @@
 
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, page } from './Dict.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import DictEdit from './DictEdit.vue'
diff --git a/src/views/modules/system/loginType/LoginTypeEdit.vue b/src/views/modules/system/loginType/LoginTypeEdit.vue
index 5b5383f..f52c383 100644
--- a/src/views/modules/system/loginType/LoginTypeEdit.vue
+++ b/src/views/modules/system/loginType/LoginTypeEdit.vue
@@ -75,7 +75,7 @@
   import { add, LoginType, get, existsByCode, existsByCodeNotId, update, PASSWORD, OPEN_ID } from './LoginType.api'
   import { FormEditType } from '/@/enums/formTypeEnum'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { useValidate } from '/@/hooks/bootx/useValidate'
   import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
   const { existsByServer } = useValidate()
diff --git a/src/views/modules/system/loginType/LoginTypeList.vue b/src/views/modules/system/loginType/LoginTypeList.vue
index 6a0f62c..2123958 100644
--- a/src/views/modules/system/loginType/LoginTypeList.vue
+++ b/src/views/modules/system/loginType/LoginTypeList.vue
@@ -74,7 +74,7 @@
   import { FormEditType } from '/@/enums/formTypeEnum'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { STRING } from '/@/components/Bootx/Query/Query'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
 
   // 使用hooks
diff --git a/src/views/modules/system/menu/MenuEdit.vue b/src/views/modules/system/menu/MenuEdit.vue
index 2193b76..d2b02df 100644
--- a/src/views/modules/system/menu/MenuEdit.vue
+++ b/src/views/modules/system/menu/MenuEdit.vue
@@ -87,7 +87,7 @@
 <script lang="ts" setup>
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { computed, nextTick } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import { add, get, Menu, menuTree, update } from '/@/views/modules/system/menu/Menu.api'
   import { FormEditType } from '/@/enums/formTypeEnum'
diff --git a/src/views/modules/system/menu/MenuList.vue b/src/views/modules/system/menu/MenuList.vue
index bb8a979..d46da7a 100644
--- a/src/views/modules/system/menu/MenuList.vue
+++ b/src/views/modules/system/menu/MenuList.vue
@@ -111,7 +111,7 @@
 
 <script lang="ts" setup>
   import { getAppEnvConfig } from '/@/utils/env'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { nextTick, onMounted } from 'vue'
   import { Client, findAll } from '/@/views/modules/system/client/Client.api'
   import XEUtils from 'xe-utils'
diff --git a/src/views/modules/system/menu/ResourceEdit.vue b/src/views/modules/system/menu/ResourceEdit.vue
index 36ef8b1..8687382 100644
--- a/src/views/modules/system/menu/ResourceEdit.vue
+++ b/src/views/modules/system/menu/ResourceEdit.vue
@@ -36,7 +36,7 @@
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { FormEditType } from '/@/enums/formTypeEnum'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { nextTick } from 'vue'
   import { add, existsByPermCode, existsByPermCodeNotId, get, Resource, update } from './Menu.api'
   import { BasicModal } from '/@/components/Modal/'
diff --git a/src/views/modules/system/menu/ResourceList.vue b/src/views/modules/system/menu/ResourceList.vue
index e9d9dcd..02ba665 100644
--- a/src/views/modules/system/menu/ResourceList.vue
+++ b/src/views/modules/system/menu/ResourceList.vue
@@ -48,7 +48,7 @@
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import { nextTick, onMounted } from 'vue'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, Menu, Resource, resourceList } from '/@/views/modules/system/menu/Menu.api'
   import { FormEditType } from '/@/enums/formTypeEnum'
   import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
diff --git a/src/views/modules/system/param/SystemParamEdit.vue b/src/views/modules/system/param/SystemParamEdit.vue
index 9fbc5b8..0a15cb1 100644
--- a/src/views/modules/system/param/SystemParamEdit.vue
+++ b/src/views/modules/system/param/SystemParamEdit.vue
@@ -49,7 +49,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, existsByKey, existsByKeyNotId, SystemParam } from './SystemParam.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/system/param/SystemParamList.vue b/src/views/modules/system/param/SystemParamList.vue
index 17a49f6..5d217bc 100644
--- a/src/views/modules/system/param/SystemParamList.vue
+++ b/src/views/modules/system/param/SystemParamList.vue
@@ -66,7 +66,7 @@
 
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, page } from './SystemParam.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import SystemParamEdit from './SystemParamEdit.vue'
diff --git a/src/views/modules/system/path/PermPathEdit.vue b/src/views/modules/system/path/PermPathEdit.vue
index 29a805d..e0dfcdf 100644
--- a/src/views/modules/system/path/PermPathEdit.vue
+++ b/src/views/modules/system/path/PermPathEdit.vue
@@ -50,7 +50,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, PermPath } from './PermPath.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/system/path/PermPathList.vue b/src/views/modules/system/path/PermPathList.vue
index 450b6e9..e01bcc4 100644
--- a/src/views/modules/system/path/PermPathList.vue
+++ b/src/views/modules/system/path/PermPathList.vue
@@ -89,7 +89,7 @@
 
 <script lang="ts" setup>
   import { nextTick, onMounted } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, delBatch, batchUpdateEnable, page, syncSystem } from './PermPath.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import PermPathEdit from './PermPathEdit.vue'
diff --git a/src/views/modules/system/quartz/QuartzJobEdit.vue b/src/views/modules/system/quartz/QuartzJobEdit.vue
index 237e180..f23ae94 100644
--- a/src/views/modules/system/quartz/QuartzJobEdit.vue
+++ b/src/views/modules/system/quartz/QuartzJobEdit.vue
@@ -51,7 +51,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive, unref } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, QuartzJob, judgeJobClass } from './QuartzJob.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/system/quartz/QuartzJobList.vue b/src/views/modules/system/quartz/QuartzJobList.vue
index 3d7d620..8d3d45e 100644
--- a/src/views/modules/system/quartz/QuartzJobList.vue
+++ b/src/views/modules/system/quartz/QuartzJobList.vue
@@ -78,7 +78,7 @@
 
 <script lang="ts" setup>
   import { onMounted } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, execute, page, start, stop, syncJobStatus } from './QuartzJob.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import QuartzJobEdit from './QuartzJobEdit.vue'
diff --git a/src/views/modules/system/quartz/QuartzJobLogList.vue b/src/views/modules/system/quartz/QuartzJobLogList.vue
index 746f9ac..62193ca 100644
--- a/src/views/modules/system/quartz/QuartzJobLogList.vue
+++ b/src/views/modules/system/quartz/QuartzJobLogList.vue
@@ -40,7 +40,7 @@
 
 <script lang="ts" setup>
   import { nextTick } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, page } from './QuartzJobLog.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
diff --git a/src/views/modules/system/role/RoleEdit.vue b/src/views/modules/system/role/RoleEdit.vue
index 357093b..79fe30b 100644
--- a/src/views/modules/system/role/RoleEdit.vue
+++ b/src/views/modules/system/role/RoleEdit.vue
@@ -25,7 +25,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, existsByCode, existsByCodeNotId, existsByName, existsByNameNotId, Role } from './Role.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/system/role/RoleList.vue b/src/views/modules/system/role/RoleList.vue
index 45c3206..ff73b22 100644
--- a/src/views/modules/system/role/RoleList.vue
+++ b/src/views/modules/system/role/RoleList.vue
@@ -71,7 +71,7 @@
   import BQuery from '/@/components/Bootx/Query/BQuery.vue'
   import { FormEditType } from '/@/enums/formTypeEnum'
   import { useMessage } from '/@/hooks/web/useMessage'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { QueryField, STRING } from '/@/components/Bootx/Query/Query'
   import Icon from '/@/components/Icon/src/Icon.vue'
   import RoleMenuModal from "./RoleMenuModal.vue";
diff --git a/src/views/modules/system/role/RoleMenuModal.vue b/src/views/modules/system/role/RoleMenuModal.vue
index 9ed7282..767a8f7 100644
--- a/src/views/modules/system/role/RoleMenuModal.vue
+++ b/src/views/modules/system/role/RoleMenuModal.vue
@@ -50,7 +50,7 @@
 
 <script lang="ts" setup>
   import { BasicDrawer } from '/@/components/Drawer'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { findAll as findClients, Client } from '/@/views/modules/system/client/Client.api'
   import { getAppEnvConfig } from '/@/utils/env'
   import { findPermissionIdsByRole, saveRoleMenu } from '/@/views/modules/system/role/Role.api'
diff --git a/src/views/modules/system/role/RolePathModal.vue b/src/views/modules/system/role/RolePathModal.vue
index 52b3968..f913c5f 100644
--- a/src/views/modules/system/role/RolePathModal.vue
+++ b/src/views/modules/system/role/RolePathModal.vue
@@ -27,7 +27,7 @@
 
 <script lang="ts" setup>
   import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { VxeTableInstance } from 'vxe-table'
   import { findPathIdsByRole, findPathsByUser, saveRoleMenu, saveRolePath } from "./Role.api";
   import XEUtils from 'xe-utils'
diff --git a/src/views/modules/system/scope/DataScopeEdit.vue b/src/views/modules/system/scope/DataScopeEdit.vue
index e23ac4b..b2da39c 100644
--- a/src/views/modules/system/scope/DataScopeEdit.vue
+++ b/src/views/modules/system/scope/DataScopeEdit.vue
@@ -36,7 +36,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, existsByCode, existsByCodeNotId, existsByName, existsByNameNotId, DataScope } from './DataScope.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/system/scope/DataScopeList.vue b/src/views/modules/system/scope/DataScopeList.vue
index 2fda938..82156e0 100644
--- a/src/views/modules/system/scope/DataScopeList.vue
+++ b/src/views/modules/system/scope/DataScopeList.vue
@@ -71,7 +71,7 @@
 
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, page } from './DataScope.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import DataScopeEdit from './DataScopeEdit.vue'
diff --git a/src/views/modules/system/scope/DeptScopeModal.vue b/src/views/modules/system/scope/DeptScopeModal.vue
index 7d573f0..ac89dda 100644
--- a/src/views/modules/system/scope/DeptScopeModal.vue
+++ b/src/views/modules/system/scope/DeptScopeModal.vue
@@ -43,7 +43,7 @@
 
 <script lang="ts" setup>
   import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { getDeptIds, saveDeptAssign } from '/@/views/modules/system/scope/DataScope.api'
   import XEUtils from 'xe-utils'
   import { treeDataTranslate } from '/@/utils/dataUtil'
diff --git a/src/views/modules/system/scope/UserScopeModal.vue b/src/views/modules/system/scope/UserScopeModal.vue
index 3727ad1..f42c15f 100644
--- a/src/views/modules/system/scope/UserScopeModal.vue
+++ b/src/views/modules/system/scope/UserScopeModal.vue
@@ -28,7 +28,7 @@
 
 <script lang="ts" setup>
   import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { DataScopeUser, deleteBatchUserAssign, findUsersByDataScopeId, saveUserAssign } from '/@/views/modules/system/scope/DataScope.api'
   import { BUserSelectModal } from '/@/components/Bootx/UserSelectModal'
   import { VxeTableInstance } from 'vxe-table'
diff --git a/src/views/modules/system/user/UserAdd.vue b/src/views/modules/system/user/UserAdd.vue
index c6e233f..fd6e6db 100644
--- a/src/views/modules/system/user/UserAdd.vue
+++ b/src/views/modules/system/user/UserAdd.vue
@@ -56,7 +56,7 @@
 <script lang="ts" setup>
   import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import { nextTick, onMounted, reactive } from 'vue'
   import StrengthMeter from '/@/components/StrengthMeter/src/StrengthMeter.vue'
diff --git a/src/views/modules/system/user/UserEdit.vue b/src/views/modules/system/user/UserEdit.vue
index fdb7119..a64e049 100644
--- a/src/views/modules/system/user/UserEdit.vue
+++ b/src/views/modules/system/user/UserEdit.vue
@@ -49,7 +49,7 @@
 <script lang="ts" setup>
   import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import { computed, nextTick, onMounted, reactive } from 'vue'
   import { LabeledValue } from 'ant-design-vue/lib/select'
diff --git a/src/views/modules/system/user/UserList.vue b/src/views/modules/system/user/UserList.vue
index 4425326..589a02e 100644
--- a/src/views/modules/system/user/UserList.vue
+++ b/src/views/modules/system/user/UserList.vue
@@ -117,7 +117,7 @@
   import { useMessage } from '/@/hooks/web/useMessage'
   import { onMounted } from 'vue'
   import { QueryField, STRING } from '/@/components/Bootx/Query/Query'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
   import { lockUser, lockUserBatch, page, unlockUser, unlockUserBatch } from './User.api'
   import { useDict } from '/@/hooks/bootx/useDict'
diff --git a/src/views/modules/system/user/UserShow.vue b/src/views/modules/system/user/UserShow.vue
index 7217315..89b904f 100644
--- a/src/views/modules/system/user/UserShow.vue
+++ b/src/views/modules/system/user/UserShow.vue
@@ -51,7 +51,7 @@
 <script lang="ts" setup>
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { Client, findAll } from '/@/views/modules/system/client/Client.api'
   import { Role } from '/@/views/modules/system/role/Role.api'
   import { get, UserInfo } from '/@/views/modules/system/user/User.api'
diff --git a/src/views/modules/system/user/dept/UserDeptAssign.vue b/src/views/modules/system/user/dept/UserDeptAssign.vue
index df10064..f88d3ea 100644
--- a/src/views/modules/system/user/dept/UserDeptAssign.vue
+++ b/src/views/modules/system/user/dept/UserDeptAssign.vue
@@ -43,7 +43,7 @@
 
 <script lang="ts" setup>
   import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import XEUtils from 'xe-utils'
   import { treeDataTranslate } from '/@/utils/dataUtil'
   import { tree } from '/@/views/modules/system/dept/Dept.api'
diff --git a/src/views/modules/system/user/dept/UserDeptAssignBatch.vue b/src/views/modules/system/user/dept/UserDeptAssignBatch.vue
index 359ea98..a51aa65 100644
--- a/src/views/modules/system/user/dept/UserDeptAssignBatch.vue
+++ b/src/views/modules/system/user/dept/UserDeptAssignBatch.vue
@@ -44,7 +44,7 @@
 
 <script lang="ts" setup>
   import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import XEUtils from 'xe-utils'
   import { treeDataTranslate } from '/@/utils/dataUtil'
   import { tree } from '/@/views/modules/system/dept/Dept.api'
diff --git a/src/views/modules/system/user/role/UserRoleAssign.vue b/src/views/modules/system/user/role/UserRoleAssign.vue
index bdb708d..3988fbf 100644
--- a/src/views/modules/system/user/role/UserRoleAssign.vue
+++ b/src/views/modules/system/user/role/UserRoleAssign.vue
@@ -36,7 +36,7 @@
 <script lang="ts" setup>
   import { useMessage } from '/@/hooks/web/useMessage'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { UserInfo } from '/@/views/modules/system/user/User.api'
   import { nextTick } from 'vue'
   import { LabeledValue } from 'ant-design-vue/lib/select'
diff --git a/src/views/modules/system/user/role/UserRoleAssignBatch.vue b/src/views/modules/system/user/role/UserRoleAssignBatch.vue
index b5c2c13..133acba 100644
--- a/src/views/modules/system/user/role/UserRoleAssignBatch.vue
+++ b/src/views/modules/system/user/role/UserRoleAssignBatch.vue
@@ -36,7 +36,7 @@
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
   import { useMessage } from '/@/hooks/web/useMessage'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { FormInstance } from 'ant-design-vue/lib/form'
   import { LabeledValue } from 'ant-design-vue/lib/select'
   import { findAll as roleList } from '/@/views/modules/system/role/Role.api'
diff --git a/src/views/modules/system/user/scope/UserDataScopeAssign.vue b/src/views/modules/system/user/scope/UserDataScopeAssign.vue
index d049657..26d0f17 100644
--- a/src/views/modules/system/user/scope/UserDataScopeAssign.vue
+++ b/src/views/modules/system/user/scope/UserDataScopeAssign.vue
@@ -36,7 +36,7 @@
 <script lang="ts" setup>
   import { useMessage } from '/@/hooks/web/useMessage'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { FormInstance } from 'ant-design-vue/lib/form'
   import { UserInfo } from '/@/views/modules/system/user/User.api'
   import { LabeledValue } from 'ant-design-vue/lib/select'
diff --git a/src/views/modules/system/user/scope/UserDataScopeAssignBatch.vue b/src/views/modules/system/user/scope/UserDataScopeAssignBatch.vue
index 01bb424..00e76d7 100644
--- a/src/views/modules/system/user/scope/UserDataScopeAssignBatch.vue
+++ b/src/views/modules/system/user/scope/UserDataScopeAssignBatch.vue
@@ -36,7 +36,7 @@
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
   import { useMessage } from '/@/hooks/web/useMessage'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { FormInstance } from 'ant-design-vue/lib/form'
   import { LabeledValue } from 'ant-design-vue/lib/select'
   import { nextTick } from 'vue'
diff --git a/src/views/modules/third/dingtalk/robot/DingRobotConfigEdit.vue b/src/views/modules/third/dingtalk/robot/DingRobotConfigEdit.vue
index 83f48ca..2282219 100644
--- a/src/views/modules/third/dingtalk/robot/DingRobotConfigEdit.vue
+++ b/src/views/modules/third/dingtalk/robot/DingRobotConfigEdit.vue
@@ -50,7 +50,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, existsByCode, existsByCodeNotId, DingRobotConfig } from './DingRobotConfig.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/third/dingtalk/robot/DingRobotConfigList.vue b/src/views/modules/third/dingtalk/robot/DingRobotConfigList.vue
index def7e5c..287205b 100644
--- a/src/views/modules/third/dingtalk/robot/DingRobotConfigList.vue
+++ b/src/views/modules/third/dingtalk/robot/DingRobotConfigList.vue
@@ -56,7 +56,7 @@
 
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, page } from './DingRobotConfig.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import DingRobotConfigEdit from './DingRobotConfigEdit.vue'
diff --git a/src/views/modules/third/wechat/article/WechatArticleSelect.vue b/src/views/modules/third/wechat/article/WechatArticleSelect.vue
index dc4deea..cce8e3f 100644
--- a/src/views/modules/third/wechat/article/WechatArticleSelect.vue
+++ b/src/views/modules/third/wechat/article/WechatArticleSelect.vue
@@ -33,7 +33,7 @@
 
 <script lang="ts" setup>
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import { page } from '/@/views/modules/third/wechat/article/WechatArticleSelect.api'
   import { useMessage } from '/@/hooks/web/useMessage'
diff --git a/src/views/modules/third/wechat/media/WechatMediaList.vue b/src/views/modules/third/wechat/media/WechatMediaList.vue
index 29b5848..c62abb7 100644
--- a/src/views/modules/third/wechat/media/WechatMediaList.vue
+++ b/src/views/modules/third/wechat/media/WechatMediaList.vue
@@ -65,7 +65,7 @@
 
 <script lang="ts" setup>
   import { computed, onMounted, reactive, ref } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { pageFile, deleteFile } from './WechatMedia.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
diff --git a/src/views/modules/third/wechat/media/WechatMediaSelect.vue b/src/views/modules/third/wechat/media/WechatMediaSelect.vue
index 3fb215b..e0d757d 100644
--- a/src/views/modules/third/wechat/media/WechatMediaSelect.vue
+++ b/src/views/modules/third/wechat/media/WechatMediaSelect.vue
@@ -45,7 +45,7 @@
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import { pageFile } from './WechatMedia.api'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { LabeledValue } from 'ant-design-vue/lib/select'
   import { reactive } from 'vue'
   import { useDict } from '/@/hooks/bootx/useDict'
diff --git a/src/views/modules/third/wechat/menu/WechatMenuDesign.vue b/src/views/modules/third/wechat/menu/WechatMenuDesign.vue
index eb8173b..426cdda 100644
--- a/src/views/modules/third/wechat/menu/WechatMenuDesign.vue
+++ b/src/views/modules/third/wechat/menu/WechatMenuDesign.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts" setup>
   import WxMenuDesign from '/@/views/modules/third/wechat/menu/edit/WxMenuDesign.vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { get, update } from '/@/views/modules/third/wechat/menu/WechatMenu.api'
diff --git a/src/views/modules/third/wechat/menu/WechatMenuEdit.vue b/src/views/modules/third/wechat/menu/WechatMenuEdit.vue
index 8167ac8..81ca5dc 100644
--- a/src/views/modules/third/wechat/menu/WechatMenuEdit.vue
+++ b/src/views/modules/third/wechat/menu/WechatMenuEdit.vue
@@ -38,7 +38,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, WechatMenu } from './WechatMenu.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/third/wechat/menu/WechatMenuList.vue b/src/views/modules/third/wechat/menu/WechatMenuList.vue
index 0dc7d6b..c3bd70a 100644
--- a/src/views/modules/third/wechat/menu/WechatMenuList.vue
+++ b/src/views/modules/third/wechat/menu/WechatMenuList.vue
@@ -80,7 +80,7 @@
 
 <script lang="ts" setup>
   import { onMounted } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { clearMenu, del, importMenu, page, publish } from './WechatMenu.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import WechatMenuEdit from './WechatMenuEdit.vue'
diff --git a/src/views/modules/third/wechat/menu/edit/WxMenuDesign.vue b/src/views/modules/third/wechat/menu/edit/WxMenuDesign.vue
index 72e5897..7dc43ad 100644
--- a/src/views/modules/third/wechat/menu/edit/WxMenuDesign.vue
+++ b/src/views/modules/third/wechat/menu/edit/WxMenuDesign.vue
@@ -52,7 +52,7 @@
   import './menu.less'
   import { MenuTypeMain, MenuTypeMainSubject, MenuTypeSubject } from './MenuType'
   import WxMenuDetailEditor from './WxMenuDetailEditor.vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { unref } from 'vue'
   interface Props {
diff --git a/src/views/modules/third/wechat/menu/edit/WxMenuDetailEditor.vue b/src/views/modules/third/wechat/menu/edit/WxMenuDetailEditor.vue
index 2c23cb7..1eeb809 100644
--- a/src/views/modules/third/wechat/menu/edit/WxMenuDetailEditor.vue
+++ b/src/views/modules/third/wechat/menu/edit/WxMenuDetailEditor.vue
@@ -66,7 +66,7 @@
   import { MenuTypeMain, MenuTypeMainSubject, MenuTypeSubject } from './MenuType'
   import WeChatMediaSelect from '/@/views/modules/third/wechat/media/WechatMediaSelect.vue'
   import WeChatArticleSelect from '/@/views/modules/third/wechat/article/WechatArticleSelect.vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { watch } from 'vue'
 
   interface Props {
diff --git a/src/views/modules/third/wechat/template/WechatTemplateEdit.vue b/src/views/modules/third/wechat/template/WechatTemplateEdit.vue
index cf3ef5a..f63290f 100644
--- a/src/views/modules/third/wechat/template/WechatTemplateEdit.vue
+++ b/src/views/modules/third/wechat/template/WechatTemplateEdit.vue
@@ -62,7 +62,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, get, update, existsByCode, existsByCodeNotId, WechatTemplate } from './WechatTemplate.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/third/wechat/template/WechatTemplateList.vue b/src/views/modules/third/wechat/template/WechatTemplateList.vue
index 4333d3a..c9197c9 100644
--- a/src/views/modules/third/wechat/template/WechatTemplateList.vue
+++ b/src/views/modules/third/wechat/template/WechatTemplateList.vue
@@ -47,7 +47,7 @@
 
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, page, sync } from './WechatTemplate.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import WechatTemplateEdit from './WechatTemplateEdit.vue'
diff --git a/src/views/modules/third/wecom/robot/WecomRobotConfigEdit.vue b/src/views/modules/third/wecom/robot/WecomRobotConfigEdit.vue
index e9d4bc4..c4f8721 100644
--- a/src/views/modules/third/wecom/robot/WecomRobotConfigEdit.vue
+++ b/src/views/modules/third/wecom/robot/WecomRobotConfigEdit.vue
@@ -44,7 +44,7 @@
 
 <script lang="ts" setup>
   import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { add, existsByCode, existsByCodeNotId, get, update, WecomRobotConfig } from './WecomRobotConfig.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
diff --git a/src/views/modules/third/wecom/robot/WecomRobotConfigList.vue b/src/views/modules/third/wecom/robot/WecomRobotConfigList.vue
index 3e9baf6..9e1fc73 100644
--- a/src/views/modules/third/wecom/robot/WecomRobotConfigList.vue
+++ b/src/views/modules/third/wecom/robot/WecomRobotConfigList.vue
@@ -49,7 +49,7 @@
 
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue'
-  import { $ref } from 'vue/macros'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { del, page } from './WecomRobotConfig.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import WecomRobotConfigEdit from './WecomRobotConfigEdit.vue'
diff --git a/tsconfig.json b/tsconfig.json
index 32c3e59..3e890d4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,7 +20,7 @@
     "lib": ["dom", "esnext"],
     "noImplicitAny": false,
     "skipLibCheck": true,
-    "types": ["vite/client"],
+    "types": ["vite/client","@vue-macros/reactivity-transform/macros-global"],
     "removeComments": true,
     "paths": {
       "/@/*": ["src/*"],
diff --git a/yarn.lock b/yarn.lock
index e1efcf6..d89e313 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -255,11 +255,21 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-string-parser@^7.19.4":
+  version "7.19.4"
+  resolved "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
+  integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
+
 "@babel/helper-validator-identifier@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
   integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
 
+"@babel/helper-validator-identifier@^7.19.1":
+  version "7.19.1"
+  resolved "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
+  integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
+
 "@babel/helper-validator-option@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmmirror.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
@@ -298,6 +308,11 @@
   resolved "https://registry.npmmirror.com/@babel/parser/-/parser-7.18.6.tgz#845338edecad65ebffef058d3be851f1d28a63bc"
   integrity sha512-uQVSa9jJUe/G/304lXspfWVpKpK4euFLgGiMQFOCpM/bgcAdeoHwi/OQz23O9GK2osz26ZiXRRV9aV+Yl1O8tw==
 
+"@babel/parser@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.npmmirror.com/@babel/parser/-/parser-7.21.3.tgz#1d285d67a19162ff9daa358d4cb41d50c06220b3"
+  integrity sha512-lobG0d7aOfQRXh8AyklEAgZGvA4FShxo6xQbUrrT/cNBPUdIDojlokwJsQyCC/eKia7ifqM0yP+2DRZ4WKw2RQ==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmmirror.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
@@ -974,6 +989,15 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.npmmirror.com/@babel/types/-/types-7.21.3.tgz#4865a5357ce40f64e3400b0f3b737dc6d4f64d05"
+  integrity sha512-sBGdETxC+/M4o/zKC0sl6sjWv62WFR/uzxrJ6uYyMLZOUlPnwzw0tKgVHOXxaAd5l2g8pEDM5RZ495GPQI77kg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    to-fast-properties "^2.0.0"
+
 "@commitlint/cli@^16.2.3":
   version "16.3.0"
   resolved "https://registry.npmmirror.com/@commitlint/cli/-/cli-16.3.0.tgz#5689f5c2abbb7880d5ff13329251e5648a784b16"
@@ -1303,7 +1327,7 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@jridgewell/sourcemap-codec@^1.4.10":
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.13":
   version "1.4.14"
   resolved "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
@@ -1521,6 +1545,15 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
+"@rollup/pluginutils@^5.0.2":
+  version "5.0.2"
+  resolved "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.0.2.tgz#012b8f53c71e4f6f9cb317e311df1404f56e7a33"
+  integrity sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    estree-walker "^2.0.2"
+    picomatch "^2.3.1"
+
 "@rys-fe/vite-plugin-theme@^0.8.6":
   version "0.8.6"
   resolved "https://registry.npmmirror.com/@rys-fe/vite-plugin-theme/-/vite-plugin-theme-0.8.6.tgz#a1863f388ebf0445a845ee0cf946f012c9f79094"
@@ -1610,6 +1643,11 @@
   resolved "https://registry.npmmirror.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
+"@types/estree@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/@types/estree/-/estree-1.0.0.tgz#5fb2e536c1ae9bf35366eed879e827fa59ca41c2"
+  integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
+
 "@types/event-emitter@^0.3.3":
   version "0.3.3"
   resolved "https://registry.npmmirror.com/@types/event-emitter/-/event-emitter-0.3.3.tgz#727032a9fc67565f96bbd78b2e2809275c97d7e7"
@@ -1985,6 +2023,14 @@
   dependencies:
     "@volar/source-map" "0.33.9"
 
+"@volar/language-core@1.0.24":
+  version "1.0.24"
+  resolved "https://registry.npmmirror.com/@volar/language-core/-/language-core-1.0.24.tgz#5d767571e77728464635e61af1debca944811fe0"
+  integrity sha512-vTN+alJiWwK0Pax6POqrmevbtFW2dXhjwWiW/MW4f48eDYPLdyURWcr8TixO7EN/nHsUBj2udT7igFKPtjyAKg==
+  dependencies:
+    "@volar/source-map" "1.0.24"
+    muggle-string "^0.1.0"
+
 "@volar/pug-language-service@0.33.9":
   version "0.33.9"
   resolved "https://registry.npmmirror.com/@volar/pug-language-service/-/pug-language-service-0.33.9.tgz#e5f94cd9f3eca5012b35d9360236e6259528492a"
@@ -2013,6 +2059,13 @@
   resolved "https://registry.npmmirror.com/@volar/source-map/-/source-map-0.33.9.tgz#d86d9db30b15e554f4d0d2853e03a84ae1bc1ebd"
   integrity sha512-SE7dfumZ8pLsbj4DtiSDTg2/d/JT45nF51rUnuz1UNSBPEeXBexlzvz5EQ2AyrX0FjAAd2ijrRtirTk1a0SFhQ==
 
+"@volar/source-map@1.0.24":
+  version "1.0.24"
+  resolved "https://registry.npmmirror.com/@volar/source-map/-/source-map-1.0.24.tgz#ad4c827fea5c26b4bf38a86d983e7deb65b1c61e"
+  integrity sha512-Qsv/tkplx18pgBr8lKAbM1vcDqgkGKQzbChg6NW+v0CZc3G7FLmK+WrqEPzKlN7Cwdc6XVL559Nod8WKAfKr4A==
+  dependencies:
+    muggle-string "^0.1.0"
+
 "@volar/transforms@0.33.9":
   version "0.33.9"
   resolved "https://registry.npmmirror.com/@volar/transforms/-/transforms-0.33.9.tgz#1155b5ea01b67bc318dddb49177f6c2df6b6f879"
@@ -2044,6 +2097,56 @@
     "@vue/compiler-sfc" "^3.2.27"
     "@vue/reactivity" "^3.2.27"
 
+"@vue-macros/common@~1.1.3":
+  version "1.1.3"
+  resolved "https://registry.npmmirror.com/@vue-macros/common/-/common-1.1.3.tgz#c85dd23db8657898a473b4d0d3163711aaa40fad"
+  integrity sha512-g+vuQ1UK1YW9XKNf/qbDJzXumF4Bmac0eKwWipxo1xD95vP7XkAtYuqdxWNJV50ByEfuoF6/fRnPBgNcn/is0w==
+  dependencies:
+    "@babel/types" "^7.21.3"
+    "@rollup/pluginutils" "^5.0.2"
+    "@vue/compiler-sfc" "^3.2.47"
+    local-pkg "^0.4.3"
+    magic-string "^0.30.0"
+
+"@vue-macros/define-props@~1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/@vue-macros/define-props/-/define-props-1.0.1.tgz#ed6883697e6ca7c4faf1bf114e3689bcc69aa824"
+  integrity sha512-GXQpd7ooUUszRhbuYF08+KZr17LuQLOK4CI7AEuMJ2dgelRNHCE7WnAaixQe5Y4m6f6m6kiI10hLSdGQpKWusg==
+  dependencies:
+    "@vue-macros/common" "~1.1.3"
+    unplugin "^1.3.1"
+
+"@vue-macros/reactivity-transform@0.3.1":
+  version "0.3.1"
+  resolved "https://registry.npmmirror.com/@vue-macros/reactivity-transform/-/reactivity-transform-0.3.1.tgz#f987e9ea502b4dd20accb34d45be11e1344be255"
+  integrity sha512-X3YudEAzihwwp87tE7B5oCEBSNDcz3Z+Yv9OS4bHqXsOp+OlLB4zn38/NJrpjxqBtUrLKyOM1qzbGKWAXrZNyw==
+  dependencies:
+    "@babel/parser" "^7.21.3"
+    "@vue-macros/common" "~1.1.3"
+    "@vue/compiler-core" "^3.2.47"
+    "@vue/shared" "^3.2.47"
+    magic-string "^0.30.0"
+    unplugin "^1.3.1"
+
+"@vue-macros/short-vmodel@~1.2.1":
+  version "1.2.1"
+  resolved "https://registry.npmmirror.com/@vue-macros/short-vmodel/-/short-vmodel-1.2.1.tgz#d69b1df3b18de73e0216fa97e0321bdfd2681df6"
+  integrity sha512-1JG55LB1QNIL12/XsEeB9ar+kgylDaYtwrK+KaDgoA0juwvLhsZzNpEGFNzatoDKS+Gast+vadfKYEKwz10gKg==
+  dependencies:
+    "@vue-macros/common" "~1.1.3"
+    "@vue/compiler-core" "^3.2.47"
+
+"@vue-macros/volar@0.9.2":
+  version "0.9.2"
+  resolved "https://registry.npmmirror.com/@vue-macros/volar/-/volar-0.9.2.tgz#b9d14b2afb13e649a3319931fdae59110f2ae474"
+  integrity sha512-O/k3OPL4uUoZRFARAxzc7E2S6sx4MTRskhV85X+B79QtMZjJVZaZmsfVkDRdLqbFiQagCXO3gmvfTOsnFPj6mw==
+  dependencies:
+    "@volar/language-core" "1.0.24"
+    "@vue-macros/common" "~1.1.3"
+    "@vue-macros/define-props" "~1.0.1"
+    "@vue-macros/short-vmodel" "~1.2.1"
+    muggle-string "^0.2.2"
+
 "@vue/babel-helper-vue-transform-on@^1.0.2":
   version "1.0.2"
   resolved "https://registry.npmmirror.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz#9b9c691cd06fc855221a2475c3cc831d774bc7dc"
@@ -2084,6 +2187,16 @@
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
+"@vue/compiler-core@3.2.47", "@vue/compiler-core@^3.2.47":
+  version "3.2.47"
+  resolved "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.2.47.tgz#3e07c684d74897ac9aa5922c520741f3029267f8"
+  integrity sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/shared" "3.2.47"
+    estree-walker "^2.0.2"
+    source-map "^0.6.1"
+
 "@vue/compiler-dom@3.2.37":
   version "3.2.37"
   resolved "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz#10d2427a789e7c707c872da9d678c82a0c6582b5"
@@ -2100,6 +2213,14 @@
     "@vue/compiler-core" "3.2.45"
     "@vue/shared" "3.2.45"
 
+"@vue/compiler-dom@3.2.47":
+  version "3.2.47"
+  resolved "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz#a0b06caf7ef7056939e563dcaa9cbde30794f305"
+  integrity sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==
+  dependencies:
+    "@vue/compiler-core" "3.2.47"
+    "@vue/shared" "3.2.47"
+
 "@vue/compiler-sfc@3.2.45", "@vue/compiler-sfc@^3.2.27":
   version "3.2.45"
   resolved "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz#7f7989cc04ec9e7c55acd406827a2c4e96872c70"
@@ -2132,6 +2253,22 @@
     postcss "^8.1.10"
     source-map "^0.6.1"
 
+"@vue/compiler-sfc@^3.2.47":
+  version "3.2.47"
+  resolved "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz#1bdc36f6cdc1643f72e2c397eb1a398f5004ad3d"
+  integrity sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.47"
+    "@vue/compiler-dom" "3.2.47"
+    "@vue/compiler-ssr" "3.2.47"
+    "@vue/reactivity-transform" "3.2.47"
+    "@vue/shared" "3.2.47"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+    postcss "^8.1.10"
+    source-map "^0.6.1"
+
 "@vue/compiler-ssr@3.2.37":
   version "3.2.37"
   resolved "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz#4899d19f3a5fafd61524a9d1aee8eb0505313cff"
@@ -2148,6 +2285,14 @@
     "@vue/compiler-dom" "3.2.45"
     "@vue/shared" "3.2.45"
 
+"@vue/compiler-ssr@3.2.47":
+  version "3.2.47"
+  resolved "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz#35872c01a273aac4d6070ab9d8da918ab13057ee"
+  integrity sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==
+  dependencies:
+    "@vue/compiler-dom" "3.2.47"
+    "@vue/shared" "3.2.47"
+
 "@vue/devtools-api@^6.0.0-beta.7", "@vue/devtools-api@^6.1.0":
   version "6.2.0"
   resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.2.0.tgz#e3dc98a0cce8e87292745e2d24c9ee8c274a023b"
@@ -2180,6 +2325,17 @@
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
+"@vue/reactivity-transform@3.2.47":
+  version "3.2.47"
+  resolved "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz#e45df4d06370f8abf29081a16afd25cffba6d84e"
+  integrity sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.47"
+    "@vue/shared" "3.2.47"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+
 "@vue/reactivity@3.2.37":
   version "3.2.37"
   resolved "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.37.tgz#5bc3847ac58828e2b78526e08219e0a1089f8848"
@@ -2237,6 +2393,11 @@
   resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.45.tgz#a3fffa7489eafff38d984e23d0236e230c818bc2"
   integrity sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==
 
+"@vue/shared@3.2.47", "@vue/shared@^3.2.47":
+  version "3.2.47"
+  resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.47.tgz#e597ef75086c6e896ff5478a6bfc0a7aa4bbd14c"
+  integrity sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==
+
 "@vue/test-utils@^2.0.0-rc.21":
   version "2.0.2"
   resolved "https://registry.npmmirror.com/@vue/test-utils/-/test-utils-2.0.2.tgz#0b5edd683366153d5bc5a91edc62f292118710eb"
@@ -2399,6 +2560,11 @@ acorn@^8.4.1, acorn@^8.5.0, acorn@^8.7.1:
   resolved "https://registry.npmmirror.com/acorn/-/acorn-8.7.1.tgz#0197122c843d1bf6d0a5e83220a788f278f63c30"
   integrity sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==
 
+acorn@^8.8.2:
+  version "8.8.2"
+  resolved "https://registry.npmmirror.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
+  integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
+
 add-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmmirror.com/add-stream/-/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa"
@@ -3084,7 +3250,7 @@ chardet@^0.7.0:
   resolved "https://registry.npmmirror.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.2:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.2, chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -6628,6 +6794,11 @@ loader-utils@^1.1.0:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+local-pkg@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.4.3.tgz#0ff361ab3ae7f1c19113d9bb97b98b905dbc4963"
+  integrity sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmmirror.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -6829,6 +7000,13 @@ magic-string@^0.26.7:
   dependencies:
     sourcemap-codec "^1.4.8"
 
+magic-string@^0.30.0:
+  version "0.30.0"
+  resolved "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.0.tgz#fd58a4748c5c4547338a424e90fa5dd17f4de529"
+  integrity sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.13"
+
 make-dir@^1.0.0, make-dir@^1.2.0:
   version "1.3.0"
   resolved "https://registry.npmmirror.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
@@ -7121,6 +7299,16 @@ ms@^2.1.1:
   resolved "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+muggle-string@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npmmirror.com/muggle-string/-/muggle-string-0.1.0.tgz#1fda8a281c8b27bb8b70466dbc9f27586a8baa6c"
+  integrity sha512-Tr1knR3d2mKvvWthlk7202rywKbiOm4rVFLsfAaSIhJ6dt9o47W4S+JMtWhd/PW9Wrdew2/S2fSvhz3E2gkfEg==
+
+muggle-string@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.npmmirror.com/muggle-string/-/muggle-string-0.2.2.tgz#786aa53fea1652c61c6a59e1f839292b262bc72a"
+  integrity sha512-YVE1mIJ4VpUMqZObFndk9CJu6DBJR/GB13p3tXuNbwD4XExaI5EOuRl6BHeIDxIqXZVxSfAC+y6U1Z/IxCfKUg==
+
 mute-stream@0.0.8:
   version "0.0.8"
   resolved "https://registry.npmmirror.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
@@ -9624,6 +9812,16 @@ unpipe@~1.0.0:
   resolved "https://registry.npmmirror.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
   integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
 
+unplugin@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.npmmirror.com/unplugin/-/unplugin-1.3.1.tgz#7af993ba8695d17d61b0845718380caf6af5109f"
+  integrity sha512-h4uUTIvFBQRxUKS2Wjys6ivoeofGhxzTe2sRWlooyjHXVttcVfV/JiavNd3d4+jty0SVV0dxGw9AkY9MwiaCEw==
+  dependencies:
+    acorn "^8.8.2"
+    chokidar "^3.5.3"
+    webpack-sources "^3.2.3"
+    webpack-virtual-modules "^0.5.0"
+
 unset-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmmirror.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
@@ -10025,6 +10223,16 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
+webpack-sources@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
+  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
+
+webpack-virtual-modules@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz#362f14738a56dae107937ab98ea7062e8bdd3b6c"
+  integrity sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==
+
 whatwg-url@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
-- 
Gitee


From bb92f60466a6c532c81fa3f135e951ed5b63dd1f Mon Sep 17 00:00:00 2001
From: xxm1995 <xxm1995@outlook.com>
Date: Fri, 24 Mar 2023 17:30:04 +0800
Subject: [PATCH 27/28] =?UTF-8?q?feat=20=E9=85=8D=E7=BD=AE=E5=92=8C?=
 =?UTF-8?q?=E6=B3=A8=E9=87=8A=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Bootx/Query/BQuery.vue         | 41 ++++++++++---------
 .../Bootx/SuperQuery/BSuperQuery.vue          |  9 +++-
 .../UserSelectModal/BUserSelectModal.vue      |  2 +-
 src/hooks/bootx/useFormEdit.ts                | 23 ++++++++---
 src/hooks/bootx/useTablePage.ts               | 30 ++++++++++----
 src/hooks/bootx/useValidate.ts                | 11 ++---
 .../bpm/model/node/BpmModelNodeEdit.vue       |  2 +-
 src/views/modules/system/user/UserEdit.vue    | 19 ++++++---
 8 files changed, 90 insertions(+), 47 deletions(-)

diff --git a/src/components/Bootx/Query/BQuery.vue b/src/components/Bootx/Query/BQuery.vue
index 0337d2f..f684e15 100644
--- a/src/components/Bootx/Query/BQuery.vue
+++ b/src/components/Bootx/Query/BQuery.vue
@@ -29,29 +29,32 @@
   import QueryItem from './QueryItem.vue'
   import { ref } from 'vue'
   import { DownOutlined, UpOutlined } from '@ant-design/icons-vue'
+  import { QueryField, QueryParam } from './Query'
   // 切换搜索条件展开状态
   let toggleSearchStatus = ref(false)
 
-  const props = defineProps({
-    fields: {
-      type: Array,
-      default: () => {
-        return []
-      },
+  const props = withDefaults(
+    defineProps<{
+      // 字段
+      fields: QueryField[]
+      // 查询条件
+      queryParams: QueryParam[]
+      // 默认展示几个
+      defaultItemCount?: number
+      // 所占栅格宽度
+      defaultItemMd?: number
+      // 禁用查询
+      disabledQuery?: boolean
+      // gutter
+      gutter?: number
+    }>(),
+    {
+      defaultItemCount: 2,
+      defaultItemMd: 6,
+      disabledQuery: false,
+      gutter: 10,
     },
-    // 查询条件
-    queryParams: {
-      type: Object,
-      required: true,
-    },
-    // 默认展示几个
-    defaultItemCount: { type: Number, default: 2 },
-    // 所占栅格宽度
-    defaultItemMd: { type: Number, default: 6 },
-    // 禁用查询
-    disabledQuery: { type: Boolean, default: false },
-    gutter: { type: Number, default: 10 },
-  })
+  )
   const emits = defineEmits(['update:modelValue', 'query', 'reset'])
   /**
    * 查询
diff --git a/src/components/Bootx/SuperQuery/BSuperQuery.vue b/src/components/Bootx/SuperQuery/BSuperQuery.vue
index 581fc7a..c8af0ab 100644
--- a/src/components/Bootx/SuperQuery/BSuperQuery.vue
+++ b/src/components/Bootx/SuperQuery/BSuperQuery.vue
@@ -8,7 +8,7 @@
           <a href="javascript:" @click="supperQueryReset">清空</a>
         </template>
         <a-button style="margin-left: 8px" @click="supperQueryShow">
-          <icon icon="ant-design:appstore" theme="twoTone" spin />
+          <icon :icon="buttonIcon" theme="twoTone" spin />
           <span>查询中...</span>
         </a-button>
       </a-tooltip>
@@ -27,6 +27,7 @@
   // const{queryState=false,buttonTitle='超级查询',modelTitle,width} = defineProps<Props>()
   const props = withDefaults(
     defineProps<{
+      // 查询状态
       queryState: boolean
       // 字段
       fields: QueryField[]
@@ -36,15 +37,19 @@
       buttonIcon?: string
       // 标题名称
       modelTitle?: string
+      // 宽度
       width?: number
     }>(),
     {
-      // 是否在进行查询
+      // 查询状态, 是否在进行查询
       queryState: false,
       // 按钮标题
       buttonTitle: '超级查询',
+      // 按钮图标
+      buttonIcon: 'ant-design:appstore',
       // 标题名称
       modelTitle: '超级查询器',
+      // 宽度
       width: 840,
     },
   )
diff --git a/src/components/Bootx/UserSelectModal/BUserSelectModal.vue b/src/components/Bootx/UserSelectModal/BUserSelectModal.vue
index ae90fa3..55b355e 100644
--- a/src/components/Bootx/UserSelectModal/BUserSelectModal.vue
+++ b/src/components/Bootx/UserSelectModal/BUserSelectModal.vue
@@ -66,7 +66,7 @@
   interface Props {
     // 名称
     title?: string
-    // 是否是查询看状态
+    // 是否允许多选
     multiple?: boolean
     // 宽度
     width?: number | string
diff --git a/src/hooks/bootx/useFormEdit.ts b/src/hooks/bootx/useFormEdit.ts
index 37660b5..b0fb223 100644
--- a/src/hooks/bootx/useFormEdit.ts
+++ b/src/hooks/bootx/useFormEdit.ts
@@ -3,11 +3,11 @@ import { FormEditType } from '/@/enums/formTypeEnum'
 
 export default function () {
   const model = reactive({
-    // 表单项标题文字
+    // 表单项标题栅格宽度
     labelCol: {
       sm: { span: 7 },
     },
-    // 表单项内容
+    // 表单项内容栅格宽度
     wrapperCol: {
       sm: { span: 13 },
     },
@@ -20,9 +20,14 @@ export default function () {
     showable: false,
     formEditType: FormEditType.Add,
   })
-  // 状态
+  /**
+   * 状态
+   */
   const { labelCol, wrapperCol, title, modalWidth, confirmLoading, visible, editable, addable, showable, formEditType } = toRefs(model)
 
+  /**
+   * 初始化表单状态
+   */
   function initFormEditType(editType: FormEditType) {
     formEditType.value = editType
     visible.value = true
@@ -40,7 +45,9 @@ export default function () {
     }
   }
 
-  // 关闭
+  /**
+   * 关闭
+   */
   function handleCancel() {
     visible.value = false
     addable.value = false
@@ -48,12 +55,16 @@ export default function () {
     showable.value = false
   }
 
-  // 搜索
+  /**
+   * 搜索，供select下拉框组件进行筛选时使用(:filter-option="search")
+   */
   function search(input: string, option) {
     return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
   }
 
-  // 判断脱敏参数是否被修改的参数, 未修改返回空值 rawForm 后端获取到的原始数据, editForm 修改后的数据, keys 字段名称
+  /**
+   * 判断脱敏参数是否被修改的参数, 未修改返回空值 rawForm 后端获取到的原始数据, editForm 修改后的数据, keys 字段名称
+   */
   function diffForm(rawForm, editForm, ...keys) {
     const form = {}
     for (const key of keys) {
diff --git a/src/hooks/bootx/useTablePage.ts b/src/hooks/bootx/useTablePage.ts
index 720bb5d..ea118cf 100644
--- a/src/hooks/bootx/useTablePage.ts
+++ b/src/hooks/bootx/useTablePage.ts
@@ -20,30 +20,38 @@ export default function <T>(queryPageCallback: CallableFunction) {
   const loading = ref(false)
   // 批量操作标识
   const batchOperateFlag = ref(false)
-  // 高级查询条件生效状态
+  // 超级查询条件生效状态
   const superQueryFlag = ref(false)
 
   // 不可以被重新赋值, 否则会失去绑定
   const { pages, pagination } = model
-  // 普通查询
+  /**
+   * 普通查询
+   */
   function query() {
     superQueryFlag.value = false
     batchOperateFlag.value = false
     resetPage()
     queryPageCallback()
   }
-  // 表格翻页或变动
+  /**
+   * 表格翻页或变动
+   */
   function handleTableChange({ currentPage, pageSize }) {
     batchOperateFlag.value = false
     pages.current = currentPage
     pages.size = pageSize
     queryPageCallback()
   }
-  // 重置当前页数
+  /**
+   * 重置当前页数
+   */
   function resetPage() {
     pages.current = 1
   }
-  // 分页查询返回结果处理
+  /**
+   * 分页查询返回结果处理
+   */
   function pageQueryResHandel(res: PageResult) {
     pagination.current = Number(res.current)
     pagination.size = Number(res.size)
@@ -51,17 +59,23 @@ export default function <T>(queryPageCallback: CallableFunction) {
     pagination.records = res.records
     loading.value = false
   }
-  // 重置查询
+  /**
+   * 重置查询
+   */
   function resetQuery() {
     resetQueryParams()
     queryPageCallback()
   }
-  // 重置查询参数
+  /**
+   * 重置查询参数
+   */
   function resetQueryParams() {
     superQueryFlag.value = false
     model.queryParam = {}
   }
-  // ok按钮
+  /**
+   * ok按钮
+   */
   function handleOk() {
     queryPageCallback()
   }
diff --git a/src/hooks/bootx/useValidate.ts b/src/hooks/bootx/useValidate.ts
index 3652c90..efd4f41 100644
--- a/src/hooks/bootx/useValidate.ts
+++ b/src/hooks/bootx/useValidate.ts
@@ -3,6 +3,12 @@ import { unref } from 'vue'
 
 /**
  * 服务器校验
+ * @param value 要进行查重的值
+ * @param id 主键
+ * @param formEditType 方法类型，新增或更新
+ * @param existsFun 查询该值的记录是否存在的请求方法
+ * @param existsNotIdFun 查询该值id对应的数据之外否存在记录是的请求方法
+ * @param errMsg 验证不通过的内容
  */
 async function existsByServer(value, id, formEditType, existsFun, existsNotIdFun, errMsg = '该编码已存在!') {
   if (!value) {
@@ -12,13 +18,8 @@ async function existsByServer(value, id, formEditType, existsFun, existsNotIdFun
   return res.data ? Promise.reject(errMsg) : Promise.resolve()
 }
 
-async function nullValidate() {
-  return Promise.resolve()
-}
-
 export function useValidate() {
   return {
     existsByServer,
-    nullValidate,
   }
 }
diff --git a/src/views/modules/bpm/model/node/BpmModelNodeEdit.vue b/src/views/modules/bpm/model/node/BpmModelNodeEdit.vue
index e66e5b8..607dea5 100644
--- a/src/views/modules/bpm/model/node/BpmModelNodeEdit.vue
+++ b/src/views/modules/bpm/model/node/BpmModelNodeEdit.vue
@@ -118,7 +118,7 @@
     USER,
     ROLE,
   } from '/@/views/modules/bpm/model/node/BpmModelNodeCode'
-  import BUserSelectModal from '/@/components/Bootx/UserSelectModal/BUserSelectModal.vue'
+  import BUserSelectModal from '/@/components/Bootx/UserSelectModal'
   import BRoleSelectModal from '/@/components/Bootx/RoleSelectModal/BRoleSelectModal.vue'
   import { UserInfo } from '/@/views/modules/system/user/User.api'
   import { Role } from '/@/views/modules/system/role/Role.api'
diff --git a/src/views/modules/system/user/UserEdit.vue b/src/views/modules/system/user/UserEdit.vue
index a64e049..97ff4f5 100644
--- a/src/views/modules/system/user/UserEdit.vue
+++ b/src/views/modules/system/user/UserEdit.vue
@@ -61,10 +61,20 @@
   import { useMessage } from '/@/hooks/web/useMessage'
   import { useValidate } from '/@/hooks/bootx/useValidate'
 
-  const { initFormEditType, handleCancel, diffForm, search, labelCol, wrapperCol, modalWidth, title, confirmLoading, visible, formEditType } =
-    useFormEdit()
+  const {
+    initFormEditType,
+    handleCancel,
+    diffForm,
+    search,
+    labelCol,
+    wrapperCol,
+    modalWidth,
+    title,
+    confirmLoading,
+    visible,
+    formEditType,
+  } = useFormEdit()
   const { createMessage } = useMessage()
-  const { nullValidate } = useValidate()
 
   const formRef = $ref<FormInstance>()
   let form = $ref<UserInfo>({
@@ -86,8 +96,7 @@
         { required: true, message: '请输入账号' },
         { validator: checkUsername, trigger: 'blur' },
       ],
-      phone: rawForm.phone !== form.phone ? [
-        { validator: validatePhone }, { validator: validateBindPhone, trigger: 'blur' }] : [],
+      phone: rawForm.phone !== form.phone ? [{ validator: validatePhone }, { validator: validateBindPhone, trigger: 'blur' }] : [],
       email: rawForm.email !== form.email ? [{ validator: validateEmailRule }, { validator: validateBindEmail, trigger: 'blur' }] : [],
     } as Record<string, Rule[]>
   })
-- 
Gitee


From a0fbd73ad6e84ad156fb84f08d59928494907bee Mon Sep 17 00:00:00 2001
From: xxm1995 <xxm1995@outlook.com>
Date: Tue, 28 Mar 2023 19:58:35 +0800
Subject: [PATCH 28/28] =?UTF-8?q?perf=20=E6=B5=81=E7=A8=8B=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Bootx/Query/BQuery.vue         |  2 +-
 .../Bootx/SuperQuery/SuperQueryItem.vue       |  2 +-
 src/components/Bpmn/icon/iconfont.css         |  2 +-
 .../modules/bpm/design/ProcessDesign.vue      | 85 +++++++++----------
 .../bpm/model/node/BpmModelNodeEdit.vue       |  2 +-
 .../modules/system/scope/UserScopeModal.vue   |  2 +-
 6 files changed, 45 insertions(+), 50 deletions(-)

diff --git a/src/components/Bootx/Query/BQuery.vue b/src/components/Bootx/Query/BQuery.vue
index f684e15..b9ad33f 100644
--- a/src/components/Bootx/Query/BQuery.vue
+++ b/src/components/Bootx/Query/BQuery.vue
@@ -38,7 +38,7 @@
       // 字段
       fields: QueryField[]
       // 查询条件
-      queryParams: QueryParam[]
+      queryParams: object
       // 默认展示几个
       defaultItemCount?: number
       // 所占栅格宽度
diff --git a/src/components/Bootx/SuperQuery/SuperQueryItem.vue b/src/components/Bootx/SuperQuery/SuperQueryItem.vue
index d3edbf6..32c30fe 100644
--- a/src/components/Bootx/SuperQuery/SuperQueryItem.vue
+++ b/src/components/Bootx/SuperQuery/SuperQueryItem.vue
@@ -98,7 +98,7 @@
   import { watch, watchEffect } from 'vue'
   interface Props {
     fields: QueryField[]
-    queryParams: QueryParam[]
+    queryParams: object
   }
   const props = withDefaults(defineProps<Props>(), {})
   const emit = defineEmits(['change', 'update:queryParams'])
diff --git a/src/components/Bpmn/icon/iconfont.css b/src/components/Bpmn/icon/iconfont.css
index 5f24fa4..af1b3e7 100644
--- a/src/components/Bpmn/icon/iconfont.css
+++ b/src/components/Bpmn/icon/iconfont.css
@@ -6,7 +6,7 @@
 }
 
 .iconfont {
-  font-family: "iconfont" !important;
+  font-family: "iconfont", serif !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
diff --git a/src/views/modules/bpm/design/ProcessDesign.vue b/src/views/modules/bpm/design/ProcessDesign.vue
index 5948a49..827a314 100644
--- a/src/views/modules/bpm/design/ProcessDesign.vue
+++ b/src/views/modules/bpm/design/ProcessDesign.vue
@@ -2,7 +2,7 @@
   <div class="flow-containers" style="height: 100%">
     <a-layout style="height: 100%">
       <a-layout-header theme="light" style="border-bottom: 1px solid rgb(218 218 218); height: auto; background-color: #fff">
-        <div v-if="!isView" style="display: flex; padding: 5px 0px; justify-content: space-between">
+        <div v-if="!isView" style="display: flex; padding: 5px 0; justify-content: space-between">
           <a-space>
             <a-upload v-if="isEdit" name="file" action="" accept=".bpmn,.xml" :showUploadList="false" :beforeUpload="openBpmn">
               <a-tooltip effect="dark" title="打开" placement="bottom">
@@ -57,49 +57,29 @@
         <a-layout-content style="padding: 0; margin-top: 10px">
           <div id="canvas" ref="canvas" class="canvas"></div>
         </a-layout-content>
+        <!--     属性配置栏     -->
+        <a-layout-sider class="sider">
+          <div style="width: 100%; text-align: center" v-if="!panelVisible" @click="panelVisible = true">
+            <i class="iconfont icon-left-graph" style="font-size: 32px"></i>
+          </div>
+          <a-drawer
+            width="400px"
+            placement="right"
+            v-show="panelVisible"
+            :visible="panelVisible"
+            :closable="false"
+            :get-container="false"
+            :style="{ position: 'absolute' }"
+            @close="panelVisible = false"
+          >
+            <template #title>
+              <i class="iconfont icon-right-graph" style="font-size: 24px" @click="panelVisible = false"></i><span>{{ panelTitle }}</span>
+            </template>
+            <div>234234234</div>
+            <process-panel />
+          </a-drawer>
+        </a-layout-sider>
       </a-layout>
-      <a-layout-sider
-        style="background: #fff; min-width: 40px; width: 40px; max-width: 40px; border-left: 1px solid #eeeeee; box-shadow: 0 0 8px #cccccc"
-      >
-        <div style="width: 100%; text-align: center" @click="panelVisible = true">
-          <i class="iconfont icon-left-graph" style="font-size: 32px" v-if="panelExist"></i>
-        </div>
-        <a-drawer
-          width="400px"
-          placement="right"
-          :closable="false"
-          :visible="panelVisible && panelExist"
-          :get-container="false"
-          :wrap-style="{ position: 'absolute' }"
-        >
-          <template #title>
-            <i class="iconfont icon-right-graph" style="font-size: 32px" @click="panelVisible = false"></i><span>{{ panelTitle }}</span>
-          </template>
-          <panel
-            v-if="modeler"
-            ref="panel"
-            :filters="panelFilters"
-            :modeler="modeler"
-            :users="users"
-            :groups="groups"
-            :categories="categories"
-            :categories-fields="categoriesFields"
-            :associate-form-config="associateFormConfig"
-            :associate-form-data-options="associateFormDataOptions"
-            :assignee-data-source="assigneeDataSource"
-            :due-date-data-source="dueDateDataSource"
-            :follow-up-date-data-source="followUpDateDataSource"
-            :initiator-data-source="initiatorDataSource"
-            :skip-expression-data-source="skipExpressionDataSource"
-            :condition-expression-data-source="conditionExpressionDataSource"
-            :candidate-user-data-source="candidateUserDataSource"
-            :candidate-group-data-source="candidateGroupDataSource"
-            @showForm="showAssociateForm"
-            @createForm="createAssociateForm"
-            @change="handlePanelChange"
-          />
-        </a-drawer>
-      </a-layout-sider>
     </a-layout>
     <!--  xml预览  -->
     <basic-modal v-bind="$attrs" width="60%" title="XML" :visible="codeVisible" @cancel="codeVisible = false">
@@ -112,18 +92,23 @@
 </template>
 
 <script lang="ts" setup>
-  import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
+  // 左边工具栏以及编辑节点的样式
+  import 'bpmn-js/dist/assets/diagram-js.css'
   import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
   import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
   import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
 
+  import '/@/components/Bpmn/icon/iconfont.css'
+
   import { ref } from 'vue'
   import Icon from '/@/components/Icon'
   import CodeEditor from '/@/components/CodeEditor/src/CodeEditor.vue'
+  import ProcessPanel from './ProcessPanel.vue'
   import { MODE } from '/@/components/CodeEditor'
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
   import useProcessDesign from '/@/views/modules/bpm/design/useProcessDesign'
   import { $ref } from '@vue-macros/reactivity-transform/macros'
+  import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
 
   // 挂载元素
   let canvas = ref<any>()
@@ -151,8 +136,9 @@
     clearDiagram,
   } = useProcessDesign('#canvas', emit)
 
+  // 是否显示右侧编辑栏
   let panelVisible = $ref(false)
-  let panelExist = $ref(false)
+  let panelTitle = $ref('属性配置栏')
 
   defineExpose({
     renderer,
@@ -164,6 +150,15 @@
     width: 100%;
     height: 100%;
   }
+  // 不知哪边的重写了这边的宽度
+  .sider {
+    background: #fff;
+    min-width: 40px !important;
+    width: 40px !important;
+    max-width: 40px !important;
+    border-left: 1px solid #eeeeee;
+    box-shadow: 0 0 8px #cccccc;
+  }
   .view-mode {
     .ant-layout-header,
     .ant-layout-sider,
diff --git a/src/views/modules/bpm/model/node/BpmModelNodeEdit.vue b/src/views/modules/bpm/model/node/BpmModelNodeEdit.vue
index 607dea5..e66e5b8 100644
--- a/src/views/modules/bpm/model/node/BpmModelNodeEdit.vue
+++ b/src/views/modules/bpm/model/node/BpmModelNodeEdit.vue
@@ -118,7 +118,7 @@
     USER,
     ROLE,
   } from '/@/views/modules/bpm/model/node/BpmModelNodeCode'
-  import BUserSelectModal from '/@/components/Bootx/UserSelectModal'
+  import BUserSelectModal from '/@/components/Bootx/UserSelectModal/BUserSelectModal.vue'
   import BRoleSelectModal from '/@/components/Bootx/RoleSelectModal/BRoleSelectModal.vue'
   import { UserInfo } from '/@/views/modules/system/user/User.api'
   import { Role } from '/@/views/modules/system/role/Role.api'
diff --git a/src/views/modules/system/scope/UserScopeModal.vue b/src/views/modules/system/scope/UserScopeModal.vue
index f42c15f..58bb054 100644
--- a/src/views/modules/system/scope/UserScopeModal.vue
+++ b/src/views/modules/system/scope/UserScopeModal.vue
@@ -30,7 +30,7 @@
   import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
   import { $ref } from '@vue-macros/reactivity-transform/macros'
   import { DataScopeUser, deleteBatchUserAssign, findUsersByDataScopeId, saveUserAssign } from '/@/views/modules/system/scope/DataScope.api'
-  import { BUserSelectModal } from '/@/components/Bootx/UserSelectModal'
+  import { BUserSelectModal } from '/@/components/Bootx/UserSelectModal/BUserSelectModal.vue'
   import { VxeTableInstance } from 'vxe-table'
 
   let loading = $ref(false)
-- 
Gitee