diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts
index 0a943fed3db4fd56d531e82e7486e230df3ed670..6bcfbe49cccb11b7ba8af4983c5ed56804950199 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 55a8eb7a981c0303a369b7143769ed3540f0562c..614ad2af64e5fda6c8900351101a09b500614b64 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",
@@ -80,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",
@@ -98,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",
@@ -125,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",
@@ -144,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/api/sys/login.ts b/src/api/sys/login.ts
index 235a9bb9cd775f2838af56c98dc29c487462f05e..7ee94677571ac556489dffaf248d2c97b3898b0c 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 05e5c71c548fc18c9875482b06af244520edf325..ce0e281984f5f7aad43b3fa41e039c7d0a242cab 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/components/Bootx/Query/BQuery.vue b/src/components/Bootx/Query/BQuery.vue
index 0337d2f213fc79de6b714152283e8e8aa6d08c99..b9ad33fbe613c1f66bb5abdd81bc0e4052aadda6 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: object
+      // 默认展示几个
+      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/Query/Query.ts b/src/components/Bootx/Query/Query.ts
index d23d230b8710290ba8a5e7daf9ea00c64736c89f..b5edeedd70d510c8599b9dc81b7ef55f0c8c9ce5 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/components/Bootx/RoleSelectModal/BRoleSelectModal.vue b/src/components/Bootx/RoleSelectModal/BRoleSelectModal.vue
index 46ccb6a9567eb6304639de032c9022ccd29e253c..e2d65d1a9fe0c7673a6275413184684514203067 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 97e5720b6bbfcace934e54537d56e119c7984b2b..c8af0ab3c5945c595d8c23a7caf6cf12c7c5e51f 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>
@@ -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'
@@ -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/SuperQuery/SuperQueryItem.vue b/src/components/Bootx/SuperQuery/SuperQueryItem.vue
index 3614a94e9ab03bc139fe9b8fe542cb01980affef..32c30fea4d64fc731334d4d4a8c331b481a32c2f 100644
--- a/src/components/Bootx/SuperQuery/SuperQueryItem.vue
+++ b/src/components/Bootx/SuperQuery/SuperQueryItem.vue
@@ -94,11 +94,11 @@
 
 <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[]
-    queryParams: QueryParam[]
+    queryParams: object
   }
   const props = withDefaults(defineProps<Props>(), {})
   const emit = defineEmits(['change', 'update:queryParams'])
diff --git a/src/components/Bootx/SuperQuery/SuperQueryModel.vue b/src/components/Bootx/SuperQuery/SuperQueryModel.vue
index abab14b9c806724ed153b7b49b2a1f8629504ed2..2b7489e1723323caac8123bee2166e62762f50c5 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 485624bc18c8737d549640b982896d3e644a6106..55b355ea7185fbd33242ccbf47862e0cae48d3e6 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'
@@ -66,7 +66,7 @@
   interface Props {
     // 名称
     title?: string
-    // 是否是查询看状态
+    // 是否允许多选
     multiple?: boolean
     // 宽度
     width?: number | string
diff --git a/src/components/Bpmn/ProcessViewer.vue b/src/components/Bpmn/ProcessViewer.vue
index 79bea6800c218a276f74ed440bb9969d78a48be7..638fec2c7c60d8753d7d61009f3a9d7472d2f856 100644
--- a/src/components/Bpmn/ProcessViewer.vue
+++ b/src/components/Bpmn/ProcessViewer.vue
@@ -2,7 +2,7 @@
   <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>
+        <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">
@@ -31,284 +31,289 @@
   </div>
 </template>
 
-<script>
+<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'
   // 引入flowable的节点文件
   import flowableModdle from './flowable/flowable.json'
+
   import { addArrow } from './processViewerUtils'
+  import { useDict } from '/@/hooks/bootx/useDict'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
+  import { nextTick, onMounted, watch, watchEffect } from 'vue'
 
-  export default {
-    name: 'WorkflowBpmnModeler',
-    props: {
+  const { dictConvert } = useDict()
+  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 },
-    },
-    data() {
-      return {
-        modeler: null,
-        zoom: 1,
-        element: null,
-        drawerVisible: false,
-        currentTaskList: [],
-      }
+      height: number
+    }>(),
+    {
+      xml: '',
+      instance: {},
+      flowNodeList: [],
+      nodeTaskList: {},
+      height: 650,
     },
-    watch: {
-      xml: function (val) {
-        if (val) {
-          this.createDiagram()
-        }
-      },
-      flowNodeList: function (val) {
-        if (val) {
-          this.createDiagram()
-        }
-      },
-      nodeTaskList: function (val) {
-        if (val) {
-          this.createDiagram()
-        }
-      },
-    },
-    mounted() {
-      this.initModeler()
-      this.initEventBind()
-    },
-    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,
+  )
+
+  let canvas = $ref()
+
+  let modeler = $ref<any>()
+  let zoom = $ref(1)
+  let element = $ref(null)
+  let drawerVisible = $ref(false)
+  let currentTaskList = $ref([])
+
+  // 流程相关变量, 不需要进行响应式
+  let elementOverlayIds
+  let overlays
+
+  watchEffect(() => {
+    initModeler()
+  })
+
+  /**
+   * 生成实例
+   */
+  function initModeler() {
+    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', ''], // 禁用单个图形拖动
           },
-        })
-      },
-      /**
-       * 创建流程图
-       */
-      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()
-      },
+        ],
+        moddleExtensions: {
+          flowable: flowableModdle,
+        },
+      })
+      await createDiagram()
+      initEventBind()
+    })
+  }
 
-      /**
-       * 给节点绑定事件 信息显示处理,
-       */
-      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() {
+    // 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)
+    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)
-      },
-      dictConvert(dictCode, code) {
-        return dictConvert(dictCode, code)
-      },
-    },
+      } 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) {
+    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>
 
 <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);
@@ -346,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/WorkflowBpmnModeler.vue b/src/components/Bpmn/WorkflowBpmnModeler.vue
index 5f95e37b5ce5e3f864b6ba74685e50223bdb13c0..832c39db02f215e2a712d71396ea9349694927d4 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/common/customTranslate.js b/src/components/Bpmn/common/customTranslate.js
index fa05f9d67f3a4dbb4c926de3d2886cf1b12dc269..ffd24cc37488800c05fceaa822ccd368a66f2447 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) {
-    var str = replacements[key]
-    if (
-      translations[replacements[key]] !== null &&
-      translations[replacements[key]] !== 'undefined'
-    ) {
+  return template.replace(/{([^}]+)}/g, function (_, key) {
+    let str = replacements[key]
+    if (translations[replacements[key]] !== null && translations[replacements[key]] !== 'undefined') {
       str = translations[replacements[key]]
     }
     return str || '{' + key + '}'
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 4a74c35cc69e15d8c9a505f058ea75abc57c37e5..dc4966f6cbedb81e9f9be60a89930983870851db 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/Bpmn/icon/iconfont.css b/src/components/Bpmn/icon/iconfont.css
index 5f24fa43512befce9789f6ecff6a3e3ba58c752b..af1b3e7e311fbf52081680deb854af042c5d4c14 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/components/Bpmn/processViewerUtils.js b/src/components/Bpmn/processViewerUtils.js
index 0c0214642f35b7614ea1ddeb5af0140d7fa47ed0..1f72db1438be0948d1e107c76d49740b7bab2db8 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/CodeEditor/src/codemirror/CodeMirror.vue b/src/components/CodeEditor/src/codemirror/CodeMirror.vue
index 6dd058d28d7c0586409253d21fefb3151cf0a061..14a31a702daa9622eb3e7a7072b6139ea07bacac 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 34b5ed1f40b4b8bc93b8537dc9d9cdb3f6a617ea..cfdcf975931092377653814f414c4e9bdf9d92c5 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/components/FlowChart/index.ts b/src/components/FlowChart/index.ts
deleted file mode 100644
index 582ec4d8f0e92216b65fdd66e5a2f022b29f694b..0000000000000000000000000000000000000000
--- 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 f8f53f3ba0fe26c2e2647910e9203abf5477913b..0000000000000000000000000000000000000000
--- 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 01c37b04317569f64168693b573843ef46fa4e89..0000000000000000000000000000000000000000
--- 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 51040797bb4887c0310e3cdd7b77e4ca271d7fa6..0000000000000000000000000000000000000000
--- 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 1467cfc58dcff51c93a508496e385b791bbffcad..0000000000000000000000000000000000000000
--- 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 8ea134ca5eba3580d75f23754ee59df02be24441..0000000000000000000000000000000000000000
--- 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 5e42aedb60f39bdd5049834dae3bc407df5730a4..0000000000000000000000000000000000000000
--- 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 da348e5cf4ba06a8a9e5a3539196fe5fe6aec8bc..0000000000000000000000000000000000000000
--- 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/components/registerGlobComp.ts b/src/components/registerGlobComp.ts
index 9054255dd87a90c0c9688f2cd3b626cec74851c9..72a1df2812f1db56439ef771eb53117b2e0a76fe 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/design/components/index.less b/src/design/components/index.less
index 79d53f9ba21f6c5e589340397147c711d3595d24..2d52363afd2b76f7dfe218a3e0b3ce82a2c523ab 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 0000000000000000000000000000000000000000..1c86969279ec5e540ef1f9f31cdbc3449f433fed
--- /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/hooks/bootx/useFormEdit.ts b/src/hooks/bootx/useFormEdit.ts
index 37660b5a87a5c84464259d00af1fb2ed14efcffb..b0fb2230fbc9b3324bd41f909f9483d3ba658788 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 720bb5dba98906f15a377980a44614ebf413586b..ea118cfa435dd16bbbdbb4c8f34cd186409843d3 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 3652c90ec779f98e304e4fdf02a96ff20ce673a9..efd4f411b9b960f9f047a9d58241aa92123318a0 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/layouts/default/header/components/notify/NoticeReader.vue b/src/layouts/default/header/components/notify/NoticeReader.vue
index 1d6c5a45ee96974e049300967ad56ecd38db4933..ec5c8480478002b03f17a9ef2b67cc09cc292e50 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 d4090cffd81485b4ee33e41f9db6f69503338789..2b7b79ac19dc5954728f540b6b526d825ca03ed6 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/main.ts b/src/main.ts
index 213b7d7f93733bb461d946be8bf56c82a918394e..cb5f68db3bde9fcf757de4b4970250c28016f7d3 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/account/bind/AccountBind.vue b/src/views/account/bind/AccountBind.vue
index 4c9322a956fed47b96b33b0a25396496a6d6e8fd..e104be10cdcb0d08390b0b41670456e25ea20500 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 7a3b2c69b933e781e87c58f1674a4032430d05a4..8f76a821f744e019ff8883be6c7b66e8cf060ff3 100644
--- a/src/views/account/bind/WeChatQrBind.vue
+++ b/src/views/account/bind/WeChatQrBind.vue
@@ -17,11 +17,12 @@
 
 <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'
   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 e286fa8cb7a6a8e4eced62a547c252cd94e3a0db..ef09164f557b2cc083fefbe5fb899ac6bfa8fdf3 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>
@@ -38,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'
@@ -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/EmailEdit.vue b/src/views/account/security/EmailEdit.vue
index e60148e240406607f9400d02161ba49d8edc65fe..45cd2ca57f491f2e928a7a0f8946475ab04fa20e 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 6252d83e1e5742dd061218f07b7342e7c00a99f0..20cb245ddd9fe19aac9b6a25a5cb05f6765a282e 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 34422e2dfce33f8dece99394dfb2c657caebd8b2..c8dff1554e4adcb854a5e1ccbe68ab32d76cbd6d 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 b8215ec07b570ed0a87ae655200d69dc8e35d43a..7baed615fe27c3489de85ea39b31870ad4ad79cc 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 {
@@ -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/account/security/SecureSetting.vue b/src/views/account/security/SecureSetting.vue
index 9d60b05eb00de3cda9db2d53f6ec0a52c2c1a9a8..9e2cb8be7a5e39b01e3fde577f59477064f65aa2 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 ab7901ae8cf60e31ec0cf05872143b4ec7fc94be..be833c5dabacc3165b9eedccf9900afe889a8843 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 962e40abfaabd0d9cb1e4f28415cd55326794abd..40b806328f188944b2f570b1cbcfc53ed014c443 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 6da55a9acdc254a2f51e98f5914840c81b4c1002..c97cce614382c639a37863209cbefce440e7d075 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 f7fd282d7f853d074061bb40fe1ce96a8fec2db3..79d7348bf3e4799dbb1d8e1cafeda8187b61c002 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 705e7a13e9f9c52233988b22de550779e1e51607..456506b2382aba974fd19b032a17c2bae5618ea1 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 41e0388ef0721c1465f4c3609e2c7e5817c4baac..64c63d169cd004fb5fb44f602e6f81d1ceef2b1b 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 64f2b5816e9390b337f7d6ca72ed384f78d0e6bd..51a1113c3d78e431fead0a571814102f9a36d118 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 1398141ffdf2ea5737e5441a9e3c7a5a1e50f9de..11bae263416f276a36308d656c2ea50d83a58ec2 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"
@@ -25,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 931ed8439c878bd657dd1d35f8aca8af520c4252..6ddb7b52c9d3513b328792bc046582b0e95b7032 100644
--- a/src/views/login/QrCodeForm.vue
+++ b/src/views/login/QrCodeForm.vue
@@ -2,26 +2,92 @@
   <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>
+      <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, unref } 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 { useI18n } from '/@/hooks/web/useI18n'
   import { useLoginState, LoginStateEnum } from './useLogin'
+  import { $ref } from '@vue-macros/reactivity-transform/macros'
+  import { applyQrCode, getQrStatus } from '/@/api/sys/login'
+  import { useDebounceFn, 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
+    console.log(flag)
+    // 变相实现Watch的效果
+    flag ? getQrCode() : pause()
+    return flag
+  })
+
+  const { pause, resume } = useIntervalFn(() => checkQrScanStatus(), 1000 * 3, { 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
+  })
+  // 获取扫码链接 使用防抖函数包装
+  const getQrCode = useDebounceFn(() => {
+    if (getQrFlag) {
+      loading = true
+      applyQrCode().then(({ data }) => {
+        authCode = data.qrCodeKey
+        qrCodeUrl = data.qrCodeUrl
+        getQrFlag = false
+        loading = false
+        resume()
+      })
+    }
+  }, 1000)
+  /**
+   * 检查登录状态
+   */
+  function checkQrScanStatus() {
+    getQrStatus(authCode).then(async ({ data }) => {
+      // 成功 进行登录
+      if (data === 'ok') {
+        pause()
+        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/login/third/ThirdLogin.vue b/src/views/login/third/ThirdLogin.vue
index 442cb8fa4b109f2f101a65e28f5ba2eb70124c4c..7fcbea45831785e9ef2b88f84c47d18a95ea9614 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 9ad2baa53298276a350635247fdf10f9677f70b6..1fd841280d071b087cbbce9be60a3f105b8c54f1 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 06c411d4e7e88da03776588ed922b7c6169e984d..9ff5fb2dc16c2f4458e6d13269a2b32a43ddcf7f 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.vue b/src/views/modules/bpm/design/ProcessDesign.vue
new file mode 100644
index 0000000000000000000000000000000000000000..827a314eb53be88560e9ab54221b63d69048c1f5
--- /dev/null
+++ b/src/views/modules/bpm/design/ProcessDesign.vue
@@ -0,0 +1,221 @@
+<template>
+  <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 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">
+                <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-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>
+    <!--  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>
+
+<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 '/@/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>()
+  const emit = defineEmits(['save', 'cancel'])
+
+  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 panelTitle = $ref('属性配置栏')
+
+  defineExpose({
+    renderer,
+  })
+</script>
+
+<style lang="less" scoped>
+  .canvas {
+    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,
+    :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/design/ProcessPanel.vue b/src/views/modules/bpm/design/ProcessPanel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d155be574e573f7c6179895b0c617cdd10c9aff7
--- /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 0000000000000000000000000000000000000000..431f0edc3f43e61dca661ed372f0eddab7e24520
--- /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/Instance.api.ts b/src/views/modules/bpm/instance/Instance.api.ts
index 8e05346a545ec2d073193b7532a4b8a5c7f93152..59dd606634c5d6104378e1f4c342a32297ee7e81 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/instance/InstanceList.vue b/src/views/modules/bpm/instance/InstanceList.vue
index c32b05fd4b30ed90de78555b2c79309889355b33..b6fd2ec30d64f451f6962ab8fa7bc497bf4bab17 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'
@@ -81,7 +81,9 @@
   /**
    * 查看详情
    */
-  function show(record) {}
+  function show(record) {
+
+  }
   /**
    * 作废流程
    */
diff --git a/src/views/modules/bpm/model/BpmModelEdit.vue b/src/views/modules/bpm/model/BpmModelEdit.vue
index f9d313aa75083968d8bb2eac425f1968992821c1..f0b317107c172f73c49fb6b9933030988e5709ab 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 80728bc6a51f78dd82b961addeea4fa329fceeeb..6e0b247ec53bb6a268ad68cd0a62709bdf4e84b9 100644
--- a/src/views/modules/bpm/model/BpmModelList.vue
+++ b/src/views/modules/bpm/model/BpmModelList.vue
@@ -81,23 +81,25 @@
     </div>
     <bpm-model-edit ref="bpmModelEdit" @ok="queryPage" />
     <bpm-model-node-list ref="bpmModelNodeList" />
+    <bpm-modeler ref="bpmModeler" />
   </div>
 </template>
 
 <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'
   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()
@@ -140,7 +142,7 @@
    * 流程图设计
    */
   function bpmnEdit(record, isView) {
-    bpmModeler.init(record.id, isView)
+    bpmModeler.design(record.id, isView)
   }
   /**
    * 任务节点列表
@@ -196,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
new file mode 100644
index 0000000000000000000000000000000000000000..21ba60d9b100cc0d3ec80bfe57b882d8d7390c7d
--- /dev/null
+++ b/src/views/modules/bpm/model/BpmModeler.vue
@@ -0,0 +1,82 @@
+<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" @save="save" @cancel="cancel" />
+  </vxe-modal>
+</template>
+
+<script lang="ts" setup>
+  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'
+  import { PUBLISHED } from '/@/views/modules/bpm/model/node/BpmModelNodeCode'
+
+  const { createConfirm, createMessage } = useMessage()
+
+  let processDesign = $ref<any>()
+
+  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
+    isView = view
+    get(id).then((res) => {
+      bpmModel = res.data
+      isEdit = bpmModel.publish !== PUBLISHED
+      title = `查看 ${bpmModel.name} 流程图`
+      processDesign.renderer(bpmModel.modelEditorXml, isEdit, isView)
+    })
+  }
+
+  /**
+   * 保存
+   */
+  function save(xml: string) {
+    createConfirm({
+      iconType: 'info',
+      title: '保存',
+      content: '是否保存该流程图',
+      onOk: () => {
+        uploadBpmn(bpmModel.id, xml)
+        createMessage.success('保存成功')
+        visible = false
+      },
+    })
+  }
+
+  /**
+   * 关闭
+   */
+  function cancel() {
+    if (isEdit) {
+      createConfirm({
+        iconType: 'info',
+        title: '警告',
+        content: '关闭后后将不对编辑的内容进行保存!',
+        okText: '关闭',
+        onOk: () => {
+          reset()
+        },
+      })
+    } else {
+      reset()
+    }
+  }
+
+  function reset() {
+    visible = false
+    // isEdit = false
+    // isView = false
+  }
+
+  defineExpose({
+    design,
+  })
+</script>
+
+<style scoped></style>
diff --git a/src/views/modules/bpm/model/Model.api.ts b/src/views/modules/bpm/model/Model.api.ts
index 4400a0be8392c47838c38bcad52436d50515ba14..980aa2a0593e3393e353e90c3f815b73a539b758 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
   // 关联表单
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 98%
rename from src/views/modules/bpm/model/BpmModelNodeEdit.vue
rename to src/views/modules/bpm/model/node/BpmModelNodeEdit.vue
index d5e40279cafc7d53d60b3e781cbb31bb65524b34..e66e5b8f79f2c233e195b100a0973cacd2ce43ee 100644
--- a/src/views/modules/bpm/model/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>
@@ -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'
@@ -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 95%
rename from src/views/modules/bpm/model/BpmModelNodeList.vue
rename to src/views/modules/bpm/model/node/BpmModelNodeList.vue
index 4b08da0cbec2514053133b8504ae7ac1a6d3ba45..8cd25fdf5a7b3230aea08dc3fa6a368bb2ea1cd6 100644
--- a/src/views/modules/bpm/model/BpmModelNodeList.vue
+++ b/src/views/modules/bpm/model/node/BpmModelNodeList.vue
@@ -50,9 +50,9 @@
   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 { BpmModel } from './Model.api'
-  import { PUBLISHED } from '/@/views/modules/bpm/model/BpmModelNodeCode'
+  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'
   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/bpm/task/DoneTaskList.vue b/src/views/modules/bpm/task/DoneTaskList.vue
index b1441210ab600cc1ba36df52ff0127d5423e13d0..6e3fe723a0069bc9e30c6f68cf6421bbf7ecaac8 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 3974dec10fad0c4666f72faee56379e5a0182179..dc5fc82e38ff7a80f743d5e40311a659f95b4a90 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 753803c79e62fbd9260a0a0efa350094509a4064..76caf82130e34eab9018a0a633d3f7f53d775f6b 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 dc706a6bcc9e18eef803d6b40500b2aa2906ddd6..9d3dbc60c4cc66ca03516cf31fcd266bc70ade03 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 d162a29424ebc10f527be22ddccb0a06e4852612..d802cf9120356afe154b18c7e3f389487377fb48 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 d4706ae36919aaecd31ed7d4c0cb5f4fa7aaf230..5dd4b4c129249a07a99bc292ed2991b5fd81fe13 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 6cce4bd86d26b674644bbb5482e92700f6596208..80d7daecfecdacabd51d5ae05354a45672dde281 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 62d3c5c10e84d073117233dd2fc29d016978416f..96099fb365e87af02962ff9958fbd37562aa4bba 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 dcb7173871da9e0c0625a7d0ae9b4629c9125e77..d4ceb4bdb376c44931ca1f008bb4dd4685f5c0ca 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 942cb5a0ec4146b7780e900a1bb0fe3f604519a7..656170974da74b2f358cc240869222d41d6f979b 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 b01aa4d7a2ad62c9cd8c1ae0e490f54695ce5e7a..2b3c8dadda86e8452a577e0932a4bb9116ec4603 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 1e430b690ea86a9af64a1f3f3520f0f19bfab011..d20e8ad066904003121ac1bef0e7099a09b2c488 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 a73b6e43f263f450a667ae1223735438af8617db..31d968bd300934f7dc13fd51633de7cb19f1f561 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 d934ab0d40b25f664be048650d5268eb399c4fda..052748ee16261688be73daaf518ad3effc06c167 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 cbe4d03e091f96b350cbb3f54f0acababc862d4e..180f330b5a519ecb0d403b8f2e245afb37044af3 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 b5e75cd584330677b5c6b48b220bbdeaae64312b..42b0ca78b308e85cb981755b6175e14cb3e42933 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 7f9652e79d189397fb9365134e6a352a5a3f085a..f2269a97d85d8688c63b6a779692e2698ef54eef 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 69263b6375042500646aaff564a9718555417abc..7edf47a77779f68febb3e20c5620bd9d1b50d488 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 5a6e9fd47e42667950774392124cfb863859cbd0..48d46d12f77a8edbaab7a55b2e34d26b3af92b84 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
new file mode 100644
index 0000000000000000000000000000000000000000..446e110000927699b7ec49d7ee4d80fccab6c9e4
--- /dev/null
+++ b/src/views/modules/develop/dynamicsource/DataSourceList.vue
@@ -0,0 +1,60 @@
+<template>
+  <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-link danger @click="remove(row)">删除</a-link>
+        </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/reactivity-transform/macros'
+  import { findAllDataSource, removeDataSourceByKey } from './DynamicDataSource.api'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { KeyValue } from '/#/web'
+
+  const { notification, createMessage, createConfirm } = useMessage()
+
+  let records = $ref<KeyValue[]>([])
+  let loading = $ref(false)
+  let visible = $ref(false)
+  // 打开列表
+  function show() {
+    visible = true
+    query()
+  }
+  // 查询数据
+  function query() {
+    loading = true
+    findAllDataSource().then(({ data }) => {
+      records = data
+      loading = false
+    })
+  }
+  // 移除数据源
+  function remove(record) {
+    createConfirm({
+      iconType: 'warning',
+      title: '移除',
+      content: '是否将该数据源从系统中移除',
+      onOk: () => {
+        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 912a3c5a09430574fc0e63ddb47b6166d686a068..7124856ff34cbeec045dfca113fdb84526880b21 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 { BaseEntity, KeyValue } from '/#/web'
+import { LabeledValue } from 'ant-design-vue/lib/select'
 
 /**
  * 分页
@@ -42,6 +43,65 @@ export const update = (obj: DynamicDataSource) => {
   })
 }
 
+/**
+ * 测试连接
+ */
+export const testConnection = (obj: DynamicDataSource) => {
+  return defHttp.post<Result<string>>({
+    url: '/dynamic/source/testConnection',
+    data: obj,
+  })
+}
+
+/**
+ * 测试连接
+ */
+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.get<Result<boolean>>({
+    url: '/dynamic/source/existsByCode',
+    params: { id },
+  })
+}
+
+/**
+ * 判断编码是否被使用
+ */
+export const existsByCodeNotId = (code, id) => {
+  return defHttp.get<Result<boolean>>({
+    url: '/dynamic/source/existsByCodeNotId',
+    params: { id, code },
+  })
+}
+/**
+ * 判断是否已经添加到连接池中
+ */
+export const existsByDataSourceKey = (code) => {
+  return defHttp.get<Result<boolean>>({
+    url: '/dynamic/source/existsByDataSourceKey',
+    params: { code },
+  })
+}
+
 /**
  * 删除
  */
@@ -61,26 +121,72 @@ 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 },
+  })
+}
+
 /**
  * 动态数据源管理
  */
 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
+}
+
+/**
+ * 数据类型列表
+ */
+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 b7f60357a4d25b949dc8c7ae2e2bde558488eb80..e69f86a2dcc116e1e15a5e8edbf1a409897647f2 100644
--- a/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue
+++ b/src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue
@@ -1,93 +1,127 @@
 <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-input v-model:value="form.code" :disabled="showable" placeholder="请输入数据源编码" />
+      <a-form-item label="编码" name="code">
+        <a-input validateFirst 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-input v-model:value="form.databaseType" :disabled="showable" 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="请输入驱动类" />
       </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="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>
-  </basic-modal>
+  </basic-drawer>
 </template>
 
 <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, DynamicDataSource } 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 { BasicModal } from '/@/components/Modal'
+  import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { useValidate } from '/@/hooks/bootx/useValidate'
 
   const {
     initFormEditType,
     handleCancel,
     search,
+    diffForm,
     labelCol,
     wrapperCol,
     modalWidth,
     title,
     confirmLoading,
     visible,
+    addable,
     editable,
     showable,
     formEditType,
   } = useFormEdit()
+  const { createMessage } = useMessage()
+  const { existsByServer } = useValidate()
+
   // 表单
   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: undefined,
+    dbDriver: '',
+    dbUrl: '',
+    dbUsername: '',
+    dbPassword: '',
+    remark: '',
+  })
+  let rawForm
   // 校验
-  const rules = reactive({} as Record<string, Rule[]>)
+  const rules = reactive({
+    code: [
+      { required: true, message: '编码不可为空' },
+      { validator: validateCode, trigger: 'blur' },
+    ],
+    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'])
   // 入口
@@ -96,18 +130,41 @@
     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)) {
       confirmLoading.value = true
       get(id).then(({ data }) => {
         form = data
+        rawForm = { ...data }
         confirmLoading.value = false
       })
     } else {
       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 changeDatabaseType() {
+    const e = form.databaseType as string
+    form.dbDriver = databaseTypeMap[e]?.dbDriver
+    form.dbUrl = databaseTypeMap[e]?.dbUrl
+  }
   // 保存
   function handleOk() {
     formRef?.validate().then(async () => {
@@ -115,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 efeaadb50f31452ed275684a8d2d51809198ad4a..d60942641838bc9da0af80b2cd8655f8396c6eba 100644
--- a/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue
+++ b/src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue
@@ -1,13 +1,14 @@
 <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 }">
         <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>
@@ -15,24 +16,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="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="操作">
+        <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>
@@ -45,14 +60,15 @@
         @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 { $ref } from 'vue/macros'
-  import { del, page } from './DynamicDataSource.api'
+  import { onMounted } from 'vue'
+  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'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
@@ -60,20 +76,29 @@
   import { FormEditType } from '/@/enums/formTypeEnum'
   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()
-
+  const { dictConvert } = useDict()
   // 查询条件
   const fields = [
     { field: 'code', type: 'string', name: '编码', placeholder: '请输入编码' },
     { field: 'name', type: 'string', name: '名称', placeholder: '请输入名称' },
+    {
+      field: 'databaseType',
+      type: 'list',
+      name: '数据库类型',
+      selectList: databaseTypes,
+      placeholder: '请选择数据库类型',
+    },
   ] as QueryField[]
 
   const xTable = $ref<VxeTableInstance>()
   const xToolbar = $ref<VxeToolbarInstance>()
   const dynamicDataSourceEdit = $ref<any>()
+  const dataSourceList = $ref<any>()
 
   onMounted(() => {
     vxeBind()
@@ -105,13 +130,60 @@
   function show(record) {
     dynamicDataSourceEdit.init(record.id, FormEditType.Show)
   }
-
+  // 查看数据源列表
+  function showDatabaseList() {
+    dataSourceList.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: () => {
+          addDynamicDataSourceById(record.id).then(() => {
+            createMessage.success('更新成功')
+          })
+        },
+      })
+    } else {
+      createConfirm({
+        iconType: 'warning',
+        title: '添加',
+        content: '是否将该数据源配置应用到系统中',
+        onOk: () => {
+          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/develop/file/FileUploadList.vue b/src/views/modules/develop/file/FileUploadList.vue
index 9c7d2582083377344271c1c213b6cd63c42b0b62..a620186d3eaf6e933784f6245db625904f926e1c 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/QuerySql.api.ts b/src/views/modules/develop/query/QuerySql.api.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4d60613f5f741b74b7027ac5fe166cc8e5859294
--- /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 0000000000000000000000000000000000000000..45e24967197be93a20a354667c96d204b7efce39
--- /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/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'
+  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 0000000000000000000000000000000000000000..00db6ff7cdb689fb525317e3aded3e0ea8829d1c
--- /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/reactivity-transform/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/src/views/modules/develop/report/ProjectInfoEdit.vue b/src/views/modules/develop/report/ProjectInfoEdit.vue
index 91c10f6703d9b86ba042d96c4739d0a55b4db74b..0e7233f14076c69aea3ab476c772c44aac012289 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 b3dc4f902ae8396779a8d90a8b78561f453ae1df..b12b88d70d83f13a3559858440c607bee241a407 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 5c192c39987ced81f7dd08949e061498283edd7a..bb2631fa75c888d5405a1019255693b3f6b136b9 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 71ee376f2bdf795d9bcd20fb0bafe09e4d1bf99b..bbd3dbc37bfbc9bffde4f247d4b3e46db16995c7 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 49e5165cd9df2723bb6ad08b1b49075ec49929fe..8e339c555f422711dee44d49a32b1e52c0dc8a5f 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 2727b701b66f527cfb60e676562ab1dacc843d34..70f410b22c2c5700e86c94b497496a0ade0db6b6 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 7179032751a0e3eeaf6295913e68188605c7f069..37f27f86a2320e37afd4e3e6b53fd05696921168 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 99b7242e326ebbc38f222403aa65eeecd7f8ad00..d86221d58217ac62b6edd4f85ce91c96dcd7eadf 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 46a7d139a6c0712c4249b2c630b01c8799c4f7bf..2a164d5f5d2c51baa578c2b63bb42d0a061e5dc0 100644
--- a/src/views/modules/monitor/redis/RedisInfoMonitor.vue
+++ b/src/views/modules/monitor/redis/RedisInfoMonitor.vue
@@ -56,7 +56,8 @@
   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)
   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 a4e4f375fdf018af6381e11205e8da948ef2a439..a2f0881236f55a2662b3a2a70856e84213038d1c 100644
--- a/src/views/modules/monitor/system/SystemInfoMonitor.vue
+++ b/src/views/modules/monitor/system/SystemInfoMonitor.vue
@@ -141,7 +141,8 @@
 <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
   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>
 
diff --git a/src/views/modules/notice/mail/MailConfigEdit.vue b/src/views/modules/notice/mail/MailConfigEdit.vue
index 022d8076018bd8f3cacaa3a99d43e63f15a5c302..ea4d21d9488a68c697cfd6250458381647fc9114 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 9a066e0153c70f4c31654d141940ad022606d2a4..93abb75fc42bfc59a47796b07a7210ceae83c718 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 ed8c5fc5e5380c9e38be51702ea09971509464ab..6055941d60bc6b522909994247012a305c98c3e7 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 173ce31fdb42d0c68978426913ef995fdadaba23..e2e5e2676550fffac84cd51704f0f11864054327 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 09a0675fa73ff7b036dbad6d6c9c218528977fdd..a9ef3bf180030b39db93f76c6d05a11d857663c2 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 dfe4ba9cfa4ac31747a9070580a68e4a46bb4dd4..fb2c9644f8f75681b2021c4202afc6b5b9bd098e 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 b2c69103272559c71a770c3c29f8061ae4e98531..c23e8a6b2acdb4c8befa430c77c1c0a482fd96f8 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 0e650d8071f96189ca581ce1bbad98a1c55b6a88..d0374ed3933607cb0f9ebf1e615ea741a420f463 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 05b60fa8482cd1e39bbfd7f66db48955e5ff7309..16d9021141c13ff2a0013b81fbf45eae3c869d93 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 750e33b28ba5632d246e3cb2cec0757d73bf67ff..bf61f20d01357b4dc789d714ec9df09001c6e766 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 c868659c370c7359f7ebc6ac71b2bcc12f62794a..a2b8803fa797d273a7a67bdfe3d829408dd00fb7 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 21067ae007267f1dde3d54f7e6c05051fae5cc16..8e1f7c1f7d1bb827af88c1e799a5927207f7495d 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 61d635a830d5cf00eee38043c66b20d6b1826284..8ea58aad34a5f02cafbb01347e347c116b1e9f6e 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 14f5a47523d206864e87d6748d3a0eee342de040..386c6dfaa2509db56eab28cdc2295e02d9555563 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 ed3f1c524c1fb9bb4c28a80c26ac9c6961556b2f..b9d6e84a6445f2649cafd15622e29043f86be637 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 276c6bdf6b0afe7914047e6ecc3fdbad670f23cb..8824f98ddd4a03bf94af62cfd508210b42d45047 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 b208680fd7a21c0eac9a374a3ab90c9c31b91158..590a9932b5be1668caf58d488f813c88a36bdae0 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 fd99d0f69098fa7c76da2244c5ebb29314c17461..955671467f3fb592cb9e7ade38b9892106521c47 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 f087320f80500198acfca85b512b1e1bf374d76f..2da9a0f4fbc8bbf788135e78c1b4d76925e67d4e 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 b4166036170ef7695bc709c27b5dbf9463666006..0ad96b7ba566c86eab87ae93b28199baec071eda 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 1f9f3246055d4cb9a41d32fa238305d1132e2143..e995b5f018c2db3a94ccb5ab3dff6c02c74da5b1 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 0e7d20f5da785dffe4f09d1353f89cd7b1de7930..d832d18a51ff85e8fe048c38be38d65c241c25a2 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 c2189eab30907f4068ea58dfc45f68a58c36aea9..60fcccde7298b0a6b1a4bd04ac8edd3f58436725 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 e0bc557e68bba15ac5d64499ef016928a1a56adc..024d1a618b41fe420f91a9ff1f091289ec32a794 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 602b5134ed9c63a6c40f7f999f2025c2e04a8e71..2ffa645a2fe65fee715d52ee1aca0c61f507c9f1 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 bfb7d89da81ec2a18c4b57522caaf59c27610824..f64f9c40d60e4bd9e4b9692751ab83cab754a81c 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 a7c154f4296ca0dfed5024d11f1810216f81551d..5efe53d81ab7694891806a8b2fd1123143447a83 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 3382714e415463a968689cad775f3d8e175bb11c..8d7fe95b1d32f38d7a3e9f6f0ed6edecd6af79e5 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 1a9362c7ed739a1ba2dba032d69ede83393d8bc4..07055e4700b929bc33feafa656f78e22eb4ff0e3 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 d2a3b45b6ce454fea700ba5d827766f5e5693fca..508cf6639d629dd2534fa29ac4550f76801ed436 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 a77b6adb0dac8a92789dfa6df6ea0889cbb72427..c9bae4feab2aad7596409a44b1ea7418ffec07a8 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 67a76de70f2fc17d6902344edd7a0e4995c27986..981ba43e2b4ad0c28418612314607f88e341a941 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 086ac17523db84455a6db735119724d780b53089..12069d075e67e8d873d3076567320c200558d619 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 75a03f6e50103fb4b5e1fd5fc60d19756cb8abe2..9d721d30ff16ba304439ff4f416105cff6165c6c 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>
@@ -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'
@@ -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 35aee1612832af072af5a48470a728afd28d20d4..a273fa622d10cc431a6120ed58101158b5153154 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'
@@ -74,6 +74,7 @@
     dictCode: null,
     code: '',
     name: '',
+    enable: true,
     sortNo: 0,
     remark: '',
   } as DictItem)
diff --git a/src/views/modules/system/dict/DictItemList.vue b/src/views/modules/system/dict/DictItemList.vue
index 15a27be645771a36b4872b9fe95f7ce35c6ab433..160101fc0b405e0b4cfaaba03bcd871be8a76f53 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 c224806c2fa2b63f1ca3095db81bc3fc1af7f6d3..820967582700ec6efc70ad82f3849ef7e217c9df 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 5b5383f7c4be15787831aa5feb588de2d797fe57..f52c383a038143abc9d88a92a2ed0934eca029b7 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 6a0f62ce522570748add7811a9896ef6cbd4fe47..21239585c7b0081df0fc9b5fd2b7562b1901cb18 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 2193b761eadf38e4558abf38828bfb924e23c04f..d2b02df6aad52107d83914e5f57fe7333f78261a 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 bb8a979723fbdd51cf513d8a03e68cf00e48616b..d46da7af8cacb27d9cf82113dc8b4b3478b9dc1b 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 36ef8b15131777bcedeba99613eca2023bf0582e..8687382167c1e2c914225ed303486d0b72590d16 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 e9d9dcd3b0908f480a042cc56fb6680d0eefbf67..02ba665e53d9b1936c3d65fa11a29e1072555609 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 9fbc5b8e3ce648310a2fa0a4d032878304a25466..0a15cb13eeb13d26d903d27e25ef249752d96b95 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 17a49f6b14aeb04067eae2075140e488f09815f0..5d217bc872d022a04fbfa121dcb76c90a20933f0 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 29a805d86e84995b7c61d5cc07aa2f9a2734e3ab..e0dfcdf74589fbfb453d045c7a22ffcf0aff102e 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 450b6e9d91d7ade5910801e2cec17c7d3f5627a3..e01bcc42c84be6ae65bc65c6d5c6bc74bb42142c 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 237e18032b5aa24d85aaa80820bf90ec7468ee58..f23ae945ca35f065da888f45773bfc04794853fe 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 3d7d620a8a34552db775185261587f5916d57024..8d3d45eda2620dbf72a7cab56b4711634782cc37 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 746f9ac383971123d7520dd75fcfa5ea7cc84b9d..62193ca595b4edcda89411d23da5e50239384a3f 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 357093b04066e8d2083ebbbab33ff0129f448e08..79fe30bbfffe676d3d344f740acbaea05d6cfb37 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 45c32061266688d767f619f6b0a9ee9ce4446a7a..ff73b22fa848f6c3c7abd7e94068b79681e6af99 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 9ed7282cebdc4ef51f6cad5216eae8bb6fe87bdd..767a8f7f0c8ee4d062136afcb5d68495ea297128 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 52b3968c7b05283b9585659538d05a09fd36399b..f913c5f0ef4fd6985a9ff2507da67c4c891a28b5 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 e23ac4b38d78425a8425167abf386de5f6b6707b..b2da39c6cebc3b0424cdbcef17371529c7d4ca7c 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 2fda938632422ea0ff3ace57aa3615454d7192f6..82156e041ae9d278b5d917dad5ced1180cc8def0 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 7d573f08551e59ac3d35a738e4c80cae658a67a4..ac89ddaf1b21e216e174848f85368a691a90964f 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 3727ad1c6e968d49c06fc834a1023021a4b8e354..58bb054afff87259df796bd67a0232a3cb5df959 100644
--- a/src/views/modules/system/scope/UserScopeModal.vue
+++ b/src/views/modules/system/scope/UserScopeModal.vue
@@ -28,9 +28,9 @@
 
 <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 { BUserSelectModal } from '/@/components/Bootx/UserSelectModal/BUserSelectModal.vue'
   import { VxeTableInstance } from 'vxe-table'
 
   let loading = $ref(false)
diff --git a/src/views/modules/system/user/UserAdd.vue b/src/views/modules/system/user/UserAdd.vue
index c6e233fca3b7accce870a103f362191a140838f9..fd6e6db8ce0b77355c25e67a31120c7d19a814d3 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 fdb7119724201734311f165da1f0c6934239a7de..97ff4f55e87cd180a81a7f1e068d93a6bcefbb72 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'
@@ -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[]>
   })
diff --git a/src/views/modules/system/user/UserList.vue b/src/views/modules/system/user/UserList.vue
index 4425326dcd93c79730ef7863073f1f936c60060a..589a02ede94f3157d43e1e5f17c3c4b3afc9b816 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 7217315b7404f6e7b44236c2cc4378542fe12e3c..89b904f40415b4870e736a73c58cc9a69c6b1617 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 df1006438d62828065d6e929aa8f3d34a3432f8a..f88d3ea3a06a35606d1bd7a3356a09d4a0571d0f 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 359ea9807ffbd8041dee9142db3547e29bdd1293..a51aa658260a84522697f9bfd5eaa1dbd8ce7f8f 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 bdb708d3b3ce047015dbfdd5913a2af3855ea025..3988fbf0195774de52fe548b0b7505edd60aa201 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 b5c2c13447371170e8e45511fee9a032680e375a..133acba8498bc4e6105eddcdc296df4048653e48 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 d049657691bd02084a9a353fee84a11b33142296..26d0f17f8fc7c28c7a29794c39a9f7567345d791 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 01bb424fb7f3987baaa7f0a846d459873093892e..00e76d71a06e9703f76456d875e8adf1c6bf7099 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 83f48ca1f6b79390a9237aa906cbb8d75a5c2812..22822196ec383263e847dc498286f6352f212cff 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 def7e5c0e58de79582e7102e5d52572a622df102..287205b20f1f950681847f7084c9c72563470be7 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 dc4deeafcdce1b6f3dfb7fb855292170f5dcc8d0..cce8e3fb504ccba704008dd1d6430da87ee894f8 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 29b58485dd959bb0adc0a780dd286369c4360a8b..c62abb72e83217af12b298cfb064aaefec231094 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 3fb215ba8041a46423445cf021b8a50f6e40004a..e0d757dabb32d97969d7f475eecf0a6ad33a6c51 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 eb8173bfd31302d49be446ab7859754444c88a64..426cddae2bb85e2ff06ec913ef113093ec6a5889 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 8167ac8575631a8bc15c5dace106ea11fb2050a5..81ca5dc65833bee65bc83284b90ac59a7da96651 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 0dc7d6b691cd90c04d931c3a6762f0b472dd51bd..c3bd70a381cd290eaef6098ea949718333074acf 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 72e58971f92f77e78cd455ef51689eac6d69782f..7dc43ad0bc74e3e286c7709dea1071227d9e8ce1 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 2c23cb7042b1b7cb70ec55ea511bc0e753f29e04..1eeb809e865751a8f50364f3724225fcc65a6a7a 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 cf3ef5a219669cd303c15362e7fee00067f26e58..f63290fb75a352674b0d1d398cca84703626573c 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 4333d3a69a83e840121a9511ef94a8437dcb408b..c9197c93282c388babe8fe1e9140ba7f92eff7fd 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 e9d4bc489493379d07ba543c3af34de3f106be99..c4f8721c2088f500432c87deb98914d8d6466799 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 3e9baf6f81880d849f050bcf8adc11455cd5066a..9e1fc73a3e4cdd13cd2ea414b9083440c8d8a2fe 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 32c3e599c2c2263d9283537330ae8882cf1f9425..3e890d4fd39dbc704cb00e881b44040475868ad9 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 e4699c4ce8a198112e13809534a5c952504a8c54..d89e3137f675b850c20ed1d1cac904ff0361b206 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==
@@ -1324,24 +1348,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"
@@ -1539,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"
@@ -1628,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"
@@ -1750,11 +1770,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"
@@ -2008,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"
@@ -2036,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"
@@ -2067,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"
@@ -2107,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"
@@ -2123,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"
@@ -2155,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"
@@ -2171,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"
@@ -2203,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"
@@ -2260,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"
@@ -2422,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"
@@ -2832,9 +2975,9 @@ bpmn-js@^10.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"
@@ -3107,12 +3250,7 @@ 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:
+"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==
@@ -3314,10 +3452,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"
@@ -3967,9 +4105,9 @@ diagram-js@^10.0.0:
     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==
+  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"
@@ -6656,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"
@@ -6857,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"
@@ -7049,11 +7199,11 @@ min-dash@^4.0.0:
   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==
+  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"
 
@@ -7106,18 +7256,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"
 
@@ -7126,11 +7276,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"
@@ -7154,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"
@@ -7943,11 +8098,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"
@@ -9662,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"
@@ -10063,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"