画布

src/stores/index.ts

@@ -4,3 +4,4 @@ export * from './modules/menu'
 export * from './modules/workflow'
 export * from './modules/dictionary'
 export * from './modules/regex'
+export * from './modules/process'

src/stores/modules/regex.ts

@@ -11,7 +11,7 @@ export const useRegexStore = defineStore('regex', {
     password0: /^.{8,16}$/,
     //  密码级别中(1)：请输入8~16位密码，要求同时包含大小写字母、数字
     password1: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,16}$/,
-    //  密码级别高(2)：请输入8~16位密码，要求同时包含大小写字母、数字、特殊字符
+    //  密码级别高(2)：请输入至少8位密码，要求同时包含大小写字母、数字、特殊字符
     password2:
       /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}[\]:;"'<>,.?/]).{8,}$/,
     // ip

src/views/process/chart/context-menu-tool.vue

@@ -10,11 +10,11 @@
 <script setup lang="ts">
 import { getCurrentInstance, reactive } from 'vue'
 import { GraphHistoryStep } from '@/views/workflow/types'
-import { useProcessStore } from '@/stores/modules/process'
 import { getNodeDefault } from '@/views/process/config'
 import { NodeType } from '@/views/process/types'
 import { handleEdge, handleNode } from '@/views/process/handle'
 import { v4 } from 'uuid'
+import { useProcessStore } from '@/stores'
 
 const ProcessStore = useProcessStore()
 const emit = defineEmits([])

src/views/process/chart/index.vue

@@ -210,8 +210,8 @@ import { History } from '@antv/x6-plugin-history'
 import { v4 } from 'uuid'
 import { Dnd } from '@antv/x6-plugin-dnd'
 import dagre from 'dagre'
-import { useProcessStore } from '@/stores/modules/process'
 import { ContextMenuTool } from '@/views/process/chart/context-menu-tool'
+import { useProcessStore } from '@/stores'
 
 register({
   shape: 'process-node-start',
@@ -229,7 +229,7 @@ Graph.registerNodeTool('contextmenu', ContextMenuTool, true)
 Graph.registerEdgeTool('contextmenu', ContextMenuTool, true)
 
 const ProcessStore = useProcessStore()
-const emit = defineEmits(['save'])
+const emit = defineEmits([])
 const props = defineProps({
   data: <any>{},
   ID: <any>{},
@@ -237,7 +237,6 @@ const props = defineProps({
 const { proxy }: any = getCurrentInstance()
 const state: any = reactive({
   graph: null,
-  isPort: false,
   isInitEdges: false,
   zoom: 1,
   history: {
@@ -295,13 +294,9 @@ const initChart = async () => {
     state.graph.translate(props.data.viewport.x, props.data.viewport.y)
   } else {
     graphZoom(0)
-    emit('save')
   }
 }
 const initNodes = () => {
-  props.data.nodes.forEach((v) => {
-    state.graph.addNode(handleNode(v))
-  })
   if (props.data.nodes.length === 0) {
     const nodeStart = getNodeDefault(NodeType.Start)
     const nodeEnd = getNodeDefault(NodeType.End)
@@ -312,18 +307,16 @@ const initNodes = () => {
     state.graph.addEdge(
       handleEdge({ id: v4(), source: nodeStart.id, target: nodeEnd.id }),
     )
+  } else {
+    props.data.nodes.forEach((v) => {
+      state.graph.addNode(handleNode(v))
+    })
+    initEdges()
   }
 }
 const initEdges = () => {
   if (!state.isInitEdges) {
     props.data.edges.forEach((v) => {
-      const targetNode = state.graph.getCellById(v.target)
-      targetNode.setData(
-        {
-          edgeSource: v.source,
-        },
-        { deep: false },
-      )
       state.graph.addEdge(handleEdge(v))
     })
     state.isInitEdges = true
@@ -348,17 +341,18 @@ const initWatch = () => {
     })
   })
   state.graph.on('node:click', ({ node }) => {
+    if (['process-node-start', 'process-node-end'].includes(node.shape)) {
+      return
+    }
     setTimeout(() => {
-      if (!state.isPort) {
-        ProcessStore.nodePanelShow(node)
-        // state.graph.getCells().forEach(v => v.attr('select', false))
-        node.attr('select', true)
-        const connectEdges = state.graph.getConnectedEdges(node.id)
-        connectEdges.forEach((edge) => {
-          edge.attr('select', true)
-          setEdgeStyle(edge)
-        })
-      }
+      console.log(node)
+      ProcessStore.nodePanelShow(node)
+      node.attr('select', true)
+      const connectEdges = state.graph.getConnectedEdges(node.id)
+      connectEdges.forEach((edge) => {
+        edge.attr('select', true)
+        setEdgeStyle(edge)
+      })
     }, 50)
   })
   state.graph.on('edge:click', ({ edge }) => {
@@ -368,12 +362,6 @@ const initWatch = () => {
       node.attr('select', true)
     })
   })
-  state.graph.on('node:port:click', () => {
-    state.isPort = true
-    setTimeout(() => {
-      state.isPort = false
-    }, 100)
-  })
   state.graph.on('node:mouseenter', ({ node }) => {
     node.attr('hover', true)
     const connectEdges = state.graph.getConnectedEdges(node.id)
@@ -530,7 +518,7 @@ const onAutoFix = () => {
   const xLevelsMap = new Map()
   const nodeSep = 20
   // 布局方向
-  const dir = 'LR' // LR RL TB BT
+  const dir = 'TB' // LR RL TB BT
   const nodes = state.graph.getNodes()
   const edges = state.graph.getEdges()
   const g = new dagre.graphlib.Graph()
@@ -557,7 +545,7 @@ const onAutoFix = () => {
     const node = state.graph.getCellById(id) as Node
     if (node) {
       const pos = g.node(id)
-      node.position(pos.x, pos.y)
+      node.position(pos.x - node.size().width / 2, pos.y)
       //  自动布局后针对某些节点高度过大，导致挡住其他节点的二次手动排序
       if (xLevelsMap.has(pos.x)) {
         xLevelsMap.set(pos.x, [...xLevelsMap.get(pos.x), { ...pos, id }])
@@ -566,19 +554,19 @@ const onAutoFix = () => {
       }
     }
   })
-  xLevelsMap.forEach((value, key, map) => {
-    const arr = value.sort((a, b) => a.y - b.y)
-    arr.forEach((n, i) => {
-      if (i > 0) {
-        const last = arr[i - 1]
-        if (n.y < last.y + last.height) {
-          n.y = nodeSep + last.y + last.height
-          const node = state.graph.getCellById(n.id) as Node
-          node.position(n.x, n.y)
-        }
-      }
-    })
-  })
+  // xLevelsMap.forEach((value, key, map) => {
+  //   const arr = value.sort((a, b) => a.y - b.y)
+  //   arr.forEach((n, i) => {
+  //     if (i > 0) {
+  //       const last = arr[i - 1]
+  //       if (n.y < last.y + last.height) {
+  //         n.y = nodeSep + last.y + last.height
+  //         const node = state.graph.getCellById(n.id) as Node
+  //         node.position(n.x, n.y)
+  //       }
+  //     }
+  //   })
+  // })
   setTimeout(() => {
     state.graph.stopBatch(GraphHistoryStep.AutoFix)
   }, 100)

src/views/process/chart/nodes/approval.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    class="node flex h-10 min-w-30 items-center justify-center rounded-sm border-2 border-[var(--czr-main-color)] bg-[#eaf2ff] px-5 text-sm text-[#606266]"
+    class="node flex h-10 min-w-30 items-center justify-center rounded-sm border-2 border-[var(--czr-main-color)]/50 bg-[#eaf2ff] px-5 text-sm text-[#606266]"
     ref="ref_node"
     :class="{
       active: state.active,
-      panel: WorkflowStore.panel.node?.id === state.node?.id,
+      panel: ProcessStore.panel.node?.id === state.node?.id,
     }"
   >
     {{ state.nodeData?.title }}
@@ -22,9 +22,9 @@ import {
   ref,
   watch,
 } from 'vue'
-import { useWorkflowStore } from '@/stores'
+import { useProcessStore } from '@/stores'
 
-const WorkflowStore = useWorkflowStore()
+const ProcessStore = useProcessStore()
 const getNode: any = inject('getNode')
 const emit = defineEmits([])
 const props = defineProps({})
@@ -55,7 +55,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .node {
   &.active {
-    border-color: rgba(var(--czr-main-color-rgb), 0.5);
+    border-color: rgba(var(--czr-main-color-rgb), 1);
     cursor: pointer;
   }
   &.panel {

src/views/process/chart/nodes/end.vue

@@ -4,7 +4,7 @@
     ref="ref_node"
     :class="{
       active: state.active,
-      panel: WorkflowStore.panel.node?.id === state.node?.id,
+      panel: ProcessStore.panel.node?.id === state.node?.id,
     }"
   >
     <div
@@ -26,9 +26,9 @@ import {
   ref,
   watch,
 } from 'vue'
-import { useWorkflowStore } from '@/stores'
+import { useProcessStore } from '@/stores'
 
-const WorkflowStore = useWorkflowStore()
+const ProcessStore = useProcessStore()
 const getNode: any = inject('getNode')
 const emit = defineEmits([])
 const props = defineProps({})

src/views/process/chart/nodes/start.vue

@@ -4,7 +4,7 @@
     ref="ref_node"
     :class="{
       active: state.active,
-      panel: WorkflowStore.panel.node?.id === state.node?.id,
+      panel: ProcessStore.panel.node?.id === state.node?.id,
     }"
   >
     <div
@@ -26,9 +26,9 @@ import {
   ref,
   watch,
 } from 'vue'
-import { useWorkflowStore } from '@/stores'
+import { useProcessStore } from '@/stores'
 
-const WorkflowStore = useWorkflowStore()
+const ProcessStore = useProcessStore()
 const getNode: any = inject('getNode')
 const emit = defineEmits([])
 const props = defineProps({})

src/views/process/chart/panel-index.vue

@@ -1,17 +1,14 @@
 <template>
   <transition name="slide">
     <div
-      class="z-1000 flex h-full w-[400px] flex-col rounded-l-lg bg-white shadow"
-      v-if="WorkflowStore.panel.show"
+      class="z-1000 flex h-full w-[400px] flex-col rounded-lg bg-white shadow"
+      v-if="ProcessStore.panel.show"
     >
-      <div class="flex items-center px-4 pt-4 font-bold">
-        <template v-if="nodeSources[nodeDataCpt.type]?.icon">
-          <img class="mr-2 size-6" :src="nodeSources[nodeDataCpt.type].icon" />
-        </template>
-        <div class="">{{ state.nodeData.title }}</div>
+      <div class="__czr-title_2">
+        {{ state.nodeData.title }}
         <div
           class="__hover ml-auto text-xl"
-          @click="WorkflowStore.nodePanelClose()"
+          @click="ProcessStore.nodePanelClose()"
         >
           ×
         </div>
@@ -30,7 +27,7 @@
       <div class="overflow-y-auto px-4 pb-4">
         <template v-for="(value, key) in nodeSources">
           <template v-if="nodeDataCpt.type === key">
-            <component :is="value.panelCom" :node="WorkflowStore.panel.node" />
+            <component :is="value.panelCom" :node="ProcessStore.panel.node" />
           </template>
         </template>
       </div>
@@ -47,16 +44,10 @@ import {
   ref,
   watch,
 } from 'vue'
-import startPanel from '../instance/start/panel/index.vue'
-import answerPanel from '../instance/answer/panel/index.vue'
-import llmPanel from '../instance/llm/panel/index.vue'
-import ifElsePanel from '../instance/if-else/panel/index.vue'
-import testPanel from '../instance/test/panel/index.vue'
-import { useWorkflowStore } from '@/stores'
-import { NodeType } from '@/views/process/types'
 import { nodeSources } from '@/views/process/config'
+import { useProcessStore } from '@/stores'
 
-const WorkflowStore = useWorkflowStore()
+const ProcessStore = useProcessStore()
 const emit = defineEmits([])
 const props = defineProps({})
 const { proxy }: any = getCurrentInstance()
@@ -64,21 +55,21 @@ const state: any = reactive({
   nodeData: {},
 })
 const nodeDataCpt = computed(
-  () => WorkflowStore.panel.node?.data.workflowData || {},
+  () => ProcessStore.panel.node?.data.workflowData || {},
 )
 watch(
   () => nodeDataCpt.value,
   (n) => {
     if (n) {
-      state.nodeData = WorkflowStore.panel.node?.data.workflowData || {}
+      state.nodeData = ProcessStore.panel.node?.data.workflowData || {}
     }
   },
 )
 watch(
   () => state.nodeData,
   (n) => {
-    if (WorkflowStore.panel.show) {
-      WorkflowStore.autoSave()
+    if (ProcessStore.panel.show) {
+      ProcessStore.autoSave()
     }
   },
   { deep: true },

src/views/process/config.ts

@@ -5,6 +5,7 @@ import {
   NodeType,
   NodeTypeObj,
 } from '@/views/process/types'
+import { defineAsyncComponent } from 'vue'
 
 export const lineStyle = {
   stroke: '#bcbcbc',
@@ -12,7 +13,7 @@ export const lineStyle = {
   targetMarker: 'block',
 }
 export const lineActiveStyle = {
-  stroke: '#91bbfb',
+  stroke: 'var(--czr-main-color)',
   strokeWidth: 2,
   targetMarker: 'block',
 }
@@ -34,8 +35,8 @@ export const nodeSources = {
   [NodeType.End]: {
     defaultValue: () =>
       <NodeStruct>{
-        x: 200,
-        y: 0,
+        x: 0,
+        y: 200,
         data: <NodeDataStruct>{
           id: v4(),
           title: NodeTypeObj[NodeType.End].title,
@@ -56,6 +57,9 @@ export const nodeSources = {
           edgeTarget: [],
         },
       },
+    panelCom: defineAsyncComponent(
+      () => import('@/views/process/instance/approval/panel/index.vue'),
+    ),
   },
 }
 export const getNodeDefault = (type: NodeType) => {

src/views/process/handle.ts

@@ -52,12 +52,6 @@ export const handleEdge = (ed) => {
     id: ed.id,
     source: ed.source,
     target: ed.target,
-    data: {
-      workflowData: {
-        ...ed.data,
-        id: ed.id,
-      },
-    },
     shape: 'edge',
     attrs: {
       select: false,

src/views/process/index.vue

@@ -1,15 +1,20 @@
 <template>
-  <div class="process">
+  <div class="relative flex size-full items-center justify-center">
     <TeleportContainer />
-    <div class="process-chart">
-      <workflowChart
-        :ID="ID"
-        :data="state.workflowData"
-        ref="ref_workflow"
-        @save="onSave"
-      />
+    <div class="relative z-1 size-full">
+      <workflowChart :ID="ID" :data="state.workflowData" ref="ref_workflow" />
+      <div class="absolute top-4 left-4 flex items-center gap-4">
+        <CzrButton type="primary" title="保存" @click="onSave" />
+        <div class="flex items-center text-[var(--czr-error-color)]">
+          <SvgIcon name="czr_tip" color="var(--czr-error-color)" class="mr-1" />
+          有未保存的修改
+        </div>
+      </div>
     </div>
-    <div class="panel">
+    <div
+      class="absolute top-0 top-4 right-4 z-2 flex gap-2.5"
+      style="height: calc(100% - 2rem)"
+    >
       <workflowPanel />
     </div>
   </div>
@@ -27,13 +32,14 @@ import {
 import workflowChart from './chart/index.vue'
 import workflowPanel from './chart/panel-index.vue'
 import { getTeleport } from '@antv/x6-vue-shape'
-import { useAppStore, useDictionaryStore, useWorkflowStore } from '@/stores'
+import { useAppStore, useDictionaryStore, useProcessStore } from '@/stores'
 import { debounce } from 'lodash'
+import { ElLoading } from 'element-plus'
 
 const DictionaryStore = useDictionaryStore()
 const AppStore = useAppStore()
 const TeleportContainer = getTeleport()
-const WorkflowStore = useWorkflowStore()
+const ProcessStore = useProcessStore()
 const emit = defineEmits(['autoSave'])
 const props = defineProps({
   ID: {},
@@ -41,7 +47,6 @@ const props = defineProps({
 const { proxy }: any = getCurrentInstance()
 const state: any = reactive({
   workflowData: null,
-  uniqueHash: '',
 })
 const ref_workflow = ref()
 
@@ -49,99 +54,155 @@ const autoSave = debounce(() => {
   onSave()
 }, 5000)
 watch(
-  () => WorkflowStore.autoSaveFlag,
+  () => ProcessStore.autoSaveFlag,
   () => {
     autoSave()
   },
 )
 const onSave = () => {
-  // const data = ref_workflow.value.toJSON()
-  // const offset = WorkflowStore.graph.translate()
-  // const res: any = {
-  //   conversationVariables: [],
-  //   environmentVariables: handleEnv(WorkflowStore.envVars.vars),
-  //   hash: state.uniqueHash,
-  //   graph: {
-  //     nodes: [],
-  //     edges: [],
-  //     viewport: {
-  //       zoom: WorkflowStore.graph.zoom(),
-  //       x: offset.tx,
-  //       y: offset.ty,
-  //     },
-  //   },
-  // }
-  // JSON.parse(JSON.stringify(data.cells)).forEach((cell: any) => {
-  //   if (cell.shape === 'process-node') {
-  //     const node: any = {
-  //       id: cell.id,
-  //       type: cell.data.workflowData.type,
-  //       position: cell.position,
-  //       data: handleNodeSubmit(cell.data.workflowData),
-  //     }
-  //     delete node.data.edgeSource
-  //     delete node.data.inVars
-  //     res.graph.nodes.push(node)
-  //   } else if (cell.shape === 'edge') {
-  //     const edge: any = {
-  //       target: cell.target.cell,
-  //       source: cell.source.cell,
-  //     }
-  //     if (!cell.source.port.includes('end')) {
-  //       edge.sourceHandle = cell.source.port
-  //     }
-  //     res.graph.edges.push(edge)
-  //   }
-  // })
-  // const loading = ElLoading.service({
-  //   text: '自动保存中……',
-  //   background: 'rgba(0, 0,0, 0.3)',
-  // })
-  // workflowDraftSave(props.ID, res)
-  //   .then(({ data }: any) => {
-  //     loading.close()
-  //     state.uniqueHash = data.uniqueHash
-  //     emit('autoSave', data.updateTime)
-  //   })
-  //   .catch(() => {})
-  //   .finally(() => {})
+  const data = ref_workflow.value.toJSON()
+  const offset = ProcessStore.graph.translate()
+  const res: any = {
+    graph: {
+      nodes: [],
+      edges: [],
+      viewport: {
+        zoom: ProcessStore.graph.zoom(),
+        x: offset.tx,
+        y: offset.ty,
+      },
+    },
+  }
+  JSON.parse(JSON.stringify(data.cells)).forEach((cell: any) => {
+    if (cell.shape === 'edge') {
+      const edge: any = {
+        id: cell.id,
+        target: cell.target.cell,
+        source: cell.source.cell,
+      }
+      res.graph.edges.push(edge)
+    } else {
+      const node: any = {
+        id: cell.id,
+        type: cell.data.workflowData.type,
+        position: cell.position,
+        data: cell.data.workflowData,
+      }
+      res.graph.nodes.push(node)
+    }
+  })
+  const loading = ElLoading.service({
+    text: '保存中……',
+    background: 'rgba(0, 0,0, 0.3)',
+  })
+  console.log(res)
+  loading.close()
 }
 const initData = () => {
   state.workflowData = {
     nodes: [],
     edges: [],
   }
-
-  // workflowDraftDetail(props.ID)
-  //   .then(({ data }: any) => {
-  //     emit('autoSave', data.updateTime)
-  //     state.uniqueHash = data.uniqueHash
-  //     WorkflowStore.$patch(
-  //       (s: any) => (s.envVars.vars = data.environmentVariables || []),
-  //     )
-  //     if (data.graph.viewport) {
-  //       const graph = {
-  //         viewport: data.graph.viewport,
-  //         nodes: formatNodes(data.graph.nodes),
-  //         edges: formatEdges(data.graph.edges),
-  //       }
-  //       state.workflowData = graph
-  //     } else {
-  //       state.workflowData = {
-  //         nodes: [],
-  //         edges: [],
-  //       }
-  //     }
-  //     // state.workflowData = {
-  //     //   nodes: [],
-  //     //   edges: [],
-  //     // }
-  //   })
-  //   .catch(() => {})
-  //   .finally(() => {})
-  // const d = data0
-  // WorkflowStore.$patch((s: any) => (s.envVars.vars = d.envVars || []))
-  // state.workflowData = d.graph
+  const data = {
+    graph: {
+      nodes: [
+        {
+          id: '56ad6c45-c8b5-4add-b39a-48ecf4c11b3d',
+          type: 'start',
+          position: {
+            x: 23,
+            y: 35,
+          },
+          data: {
+            id: '56ad6c45-c8b5-4add-b39a-48ecf4c11b3d',
+            title: '发起',
+            edgeSource: null,
+            edgeTarget: ['c9102b83-cda6-495f-b8c0-4d3a85fa26db'],
+            type: 'start',
+          },
+        },
+        {
+          id: 'cbec7e8f-c094-440a-bbc5-714c032196eb',
+          type: 'end',
+          position: {
+            x: 23,
+            y: 477,
+          },
+          data: {
+            id: 'cbec7e8f-c094-440a-bbc5-714c032196eb',
+            title: '结束',
+            edgeSource: ['3f2a36d7-94f6-404c-bcc1-c3392d0ee626'],
+            edgeTarget: null,
+            type: 'end',
+          },
+        },
+        {
+          id: '3f2a36d7-94f6-404c-bcc1-c3392d0ee626',
+          type: 'approval',
+          position: {
+            x: 260,
+            y: 350,
+          },
+          data: {
+            id: '3f2a36d7-94f6-404c-bcc1-c3392d0ee626',
+            title: '审批节点',
+            edgeSource: ['c9102b83-cda6-495f-b8c0-4d3a85fa26db'],
+            edgeTarget: ['cbec7e8f-c094-440a-bbc5-714c032196eb'],
+            type: 'approval',
+          },
+        },
+        {
+          id: 'c9102b83-cda6-495f-b8c0-4d3a85fa26db',
+          type: 'approval',
+          position: {
+            x: -240,
+            y: 210,
+          },
+          data: {
+            id: 'c9102b83-cda6-495f-b8c0-4d3a85fa26db',
+            title: '审批节点',
+            edgeSource: ['56ad6c45-c8b5-4add-b39a-48ecf4c11b3d'],
+            edgeTarget: ['3f2a36d7-94f6-404c-bcc1-c3392d0ee626'],
+            type: 'approval',
+          },
+        },
+      ],
+      edges: [
+        {
+          id: '4baed89d-c158-4359-85f4-3bd12519e4b0',
+          target: 'cbec7e8f-c094-440a-bbc5-714c032196eb',
+          source: '3f2a36d7-94f6-404c-bcc1-c3392d0ee626',
+        },
+        {
+          id: '931f583d-4cd0-4e2e-ae9b-06e780f07fa7',
+          target: 'c9102b83-cda6-495f-b8c0-4d3a85fa26db',
+          source: '56ad6c45-c8b5-4add-b39a-48ecf4c11b3d',
+        },
+        {
+          id: 'e1c401eb-a538-46f8-ac45-6c6deaf90338',
+          target: '3f2a36d7-94f6-404c-bcc1-c3392d0ee626',
+          source: 'c9102b83-cda6-495f-b8c0-4d3a85fa26db',
+        },
+      ],
+      viewport: {
+        zoom: 1,
+        x: 616,
+        y: 86,
+      },
+    },
+  }
+  if (data.graph.viewport) {
+    state.workflowData = {
+      viewport: data.graph.viewport,
+      nodes: formatNodes(data.graph.nodes),
+      edges: formatEdges(data.graph.edges),
+    }
+  } else {
+    state.workflowData = {
+      nodes: [],
+      edges: [],
+    }
+  }
 }
 const formatNodes = (arr) => {
   return arr.map((node: any) => {
@@ -157,9 +218,9 @@ const formatNodes = (arr) => {
 const formatEdges = (arr) => {
   return arr.map((edge: any) => {
     const obj = {
+      id: edge.id,
       source: edge.source,
       target: edge.target,
-      port: edge.sourceHandle || null,
     }
     return obj
   })
@@ -171,52 +232,4 @@ onMounted(() => {
 const initDictionary = () => {}
 </script>
 
-<style lang="scss" scoped>
-.process {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  position: relative;
-  .process-chart {
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-  }
-  .operations {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    z-index: 2;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    > div {
-      display: flex;
-      align-items: center;
-      background-color: rgba(255, 255, 255, 0.95);
-      box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1);
-      border-radius: 6px;
-      padding: 4px;
-      > div {
-        min-width: 24px;
-        height: 24px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-  }
-  .panel {
-    z-index: 2;
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    gap: 10px;
-    height: calc(100% - 10px - 32px - 10px);
-  }
-}
-</style>
+<style lang="scss" scoped></style>

src/views/process/instance/approval/default.ts

@@ -0,0 +1,7 @@
+const nodeDefault = {
+  defaultValue: () => ({
+    answer: '',
+  }),
+}
+
+export default nodeDefault

src/views/process/instance/approval/panel/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="panel-block" v-if="state.nodeData">123123</div>
+</template>
+
+<script setup lang="ts">
+import { getCurrentInstance, reactive, ref, watch } from 'vue'
+import { useProcessStore } from '@/stores'
+
+const emit = defineEmits([])
+const props = defineProps({
+  node: <any>{},
+})
+const { proxy }: any = getCurrentInstance()
+const state: any = reactive({
+  nodeData: null,
+  vars: {
+    show: false,
+    transfer: {},
+  },
+})
+watch(
+  () => props.node,
+  (n) => {
+    if (n) {
+      state.nodeData = n.data.workflowData
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<style lang="scss" scoped>
+@use '@/views/workflow/instance/component/style';
+</style>

src/views/process/instance/component/buttons/index.vue

@@ -1,49 +0,0 @@
-<template>
-  <div
-    class="__hover flex h-6 items-center justify-center gap-1 rounded-sm border-1 px-2 text-xs font-normal"
-    :class="`${styleCpt.borderColor} ${styleCpt.bgColor} ${styleCpt.textColor}`"
-  >
-    <SvgIcon v-if="icon" :name="icon" :color="styleCpt.textColor" size="10" />
-    {{ title }}
-  </div>
-</template>
-
-<script setup lang="ts">
-defineOptions({
-  name: 'workflowButton',
-})
-import { computed, reactive } from 'vue'
-
-const props = defineProps({
-  icon: {},
-  title: {},
-  type: { default: 'main' },
-})
-const state: any = reactive({})
-const styleCpt = computed(() => {
-  const obj = {
-    borderColor: '',
-    bgColor: '',
-    textColor: '',
-  }
-  switch (props.type) {
-    case 'main':
-      {
-        obj.borderColor = 'border-[var(--czr-main-color)]'
-        obj.bgColor = 'bg-[var(--czr-main-color)]'
-        obj.textColor = 'text-[#ffffff]'
-      }
-      break
-    case 'error':
-      {
-        obj.borderColor = 'border-[var(--czr-error-color)]'
-        obj.bgColor = 'bg-[var(--czr-error-color)]/10'
-        obj.textColor = 'text-[var(--czr-error-color)]'
-      }
-      break
-  }
-  return obj
-})
-</script>
-
-<style lang="scss" scoped></style>

src/views/workflow/index.vue

@@ -195,7 +195,6 @@ const initDictionary = () => {
   align-items: center;
   justify-content: center;
   position: relative;
-  position: relative;
   .workflow-chart {
     width: 100%;
     height: 100%;