feat: 添加数据存储

electron.vite.config.ts

@@ -31,7 +31,7 @@ export default defineConfig({
       cors: true,
       proxy: {
         '/websocket': {
-          target: 'ws://localhost:8899/',
+          target: 'ws://127.0.0.1:8899/',
           changeOrigin: true,
           ws: true
         }

src/layouts/index.vue

@@ -9,6 +9,12 @@
         <el-button @click="router.back" v-if="path !== '/index'">返回</el-button>
         <el-button @click="reload">刷新</el-button>
         <span style="margin-left: 12px; color: #ffffff">ws连接状态：{{ wsStatus }}</span>
+        <el-button
+          v-if="['已断开', '错误'].includes(wsStatus)"
+          style="margin-left: 12px"
+          @click="relink"
+          >重连</el-button
+        >
       </div>
     </el-header>
     <el-main>
@@ -22,15 +28,17 @@
 
 <script setup lang="tsx" name="Layout">
 import router from '@/router'
-import { wsStatus } from '@/utils/webSocket'
+import { initWebSocket, wsStatus } from '@/utils/webSocket'
 const version = ref('v1.0.0')
 
 const handleClickMenu = (path: string) => {
   router.push(path)
 }
 const reload = () => {
-  location.reload()
+  let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
+  initWebSocket(protocol + window.location.host + '/websocket')
 }
+const relink = () => {}
 const path = computed(() => {
   return router.currentRoute.value.path
 })

src/store/caseFlow.ts

@@ -0,0 +1,26 @@
+import { defineStore } from 'pinia'
+import { CaseFlowData } from './types'
+
+export const useCaseFlowData = defineStore('case-flow-data', {
+  state: (): CaseFlowData => ({
+    caseList: [],
+    flowData: {}
+  }),
+  getters: {
+    getCaseList: state => state.caseList,
+    getFlowData: state => state.flowData
+  },
+  actions: {
+    setCaseList(data: Record<string, string>[]) {
+      this.caseList = data
+    },
+    setFlowData(data: Record<string, string>) {
+      this.flowData = data
+    },
+    clearAll() {
+      this.caseList = []
+      this.flowData = {}
+    },
+    persist: true
+  }
+})

src/store/types.ts

@@ -46,3 +46,8 @@ export type IndexType = {
 
   nodeType: string // 节点类型(text、image)
 }
+
+export type CaseFlowData = {
+  caseList: Record<string, string>[]
+  flowData: Record<string, string>
+}

src/utils/webSocket.ts

@@ -1,3 +1,5 @@
+import { useCaseFlowData } from '@/store/caseFlow'
+
 // WebSocket 状态枚举
 enum WebSocketStatus {
   CONNECTING = '连接中',
@@ -15,12 +17,13 @@ interface WebSocketMessage {
 }
 
 // 定义消息类型
-export type MessageType = 'update' | 'save' | 'fetch' | 'fetchList' | 'other'
+export type MessageType = 'update' | 'save' | 'fetch' | 'other'
 
 // 定义消息类型
 export type WsID = 'wsClient' | 'wsServer'
 
 export const useWebSocketManager = () => {
+  const useStoreCaseFlowData = useCaseFlowData()
   // 发送消息方法
   const sendMessage = (data: WebSocketMessage) => {
     if (wsStatus.value !== WebSocketStatus.OPEN || !wsClient.value) {
@@ -32,12 +35,13 @@ export const useWebSocketManager = () => {
     return true
   }
   const handlerReceiveMessage = (message: WebSocketMessage) => {
-    if (!message) return null
+    if (!message) return
     const data = unref(message)
     if (data.serverName == 'wsServer') {
-      return message
+      useStoreCaseFlowData.setCaseList(message.list || [])
+      useStoreCaseFlowData.setFlowData(message.data || {})
     }
-    return null
+    return
   }
   return {
     sendMessage,
@@ -87,6 +91,11 @@ export const initWebSocket = (url: string) => {
     console.log(`WebSocket 状态变化: ${newStatus}`)
   })
 
+  // 监听状态变化
+  watch(lastMessage, newMessage => {
+    useWebSocketManager().handlerReceiveMessage(newMessage)
+  })
+
   // 在应用关闭时断开连接
   window.addEventListener('beforeunload', () => {
     console.log('关闭')

src/views/test/detail.vue

@@ -18,12 +18,15 @@
 <script setup lang="ts">
 import { Graph } from '@antv/x6'
 import FlowGraph from '../graph'
-import flowData from '../data/flowData'
 import { $, getContainerSize } from '@/utils'
+import { useCaseFlowData } from '@/store/caseFlow'
 
+const useStoreCaseFlowData = useCaseFlowData()
+const flowData = computed(() => {
+  return useStoreCaseFlowData.getFlowData
+})
 const router = useRouter()
 const route = useRoute()
-
 let graph: Graph
 
 onMounted(() => {
@@ -42,7 +45,7 @@ const getFlowJson = () => {
   // 使用setTimeout模拟一下
   setTimeout(() => {
     const id = route.params.id as string
-    const graphJson = flowData[id].cells || '{}'
+    const graphJson = flowData.value[id]['cells'] || '{}'
     if (graphJson && JSON.stringify(graphJson) !== '{}') {
       initFlowImage(graphJson)
     } else {
@@ -83,18 +86,6 @@ function initFlowImage(graphJson: any) {
   window.addEventListener('resize', resizeFn)
 }
 
-// 改变状态
-// function editFlowData() {
-//   graph.getNodes().forEach(node => {
-//     if (node.getData()) {
-//       let curStatus = node.getData().status
-//       node.setData({
-//         status: curStatus == 0 ? 1 : 0
-//       })
-//     }
-//   })
-// }
-
 const resizeFn = () => {
   setTimeout(() => {
     const { width, height } = getContainerSize($('#flow-image'))

src/views/test/flow.vue

@@ -26,8 +26,14 @@ import FlowGraph from '../graph'
 import ContextMenu from '@imengyu/vue3-context-menu'
 import SubFlowDialog from './components/subFlow.vue'
 import CaseData from '../data/index'
-import FlowData from '../data/flowData'
 import { Graph, type Node } from '@antv/x6'
+
+import { useCaseFlowData } from '@/store/caseFlow'
+
+const useStoreCaseFlowData = useCaseFlowData()
+const flowData = computed(() => {
+  return useStoreCaseFlowData.getFlowData
+})
 const router = useRouter()
 const route = useRoute()
 let isReady = ref(false)
@@ -44,7 +50,7 @@ watch(
   () => route.params.id as string,
   (newId, oldId) => {
     if (newId !== oldId) {
-      FlowGraph.initGraphShape(FlowData[newId].cells || {})
+      FlowGraph.initGraphShape(flowData.value[newId]['cells'] || {})
     }
   }
 )
@@ -97,7 +103,7 @@ const initGraph = () => {
     handleContextmenu(e, cell)
   })
 
-  FlowGraph.initGraphShape(FlowData[id].cells || {})
+  FlowGraph.initGraphShape(flowData.value[id]['cells'] || {})
   isReady.value = true
   const resizeFn = () => {
     const { width, height } = getContainerSize($('.panel'))

src/views/test/index.vue

@@ -30,12 +30,9 @@
           <el-button type="primary" icon="CirclePlus" @click="openDialog('新增')"> 新增 </el-button>
           <el-button type="primary" icon="CirclePlus" @click="saveData()"> 保存 </el-button>
           <el-button type="danger" icon="Delete" plain> 删除 </el-button>
-          <p>当前状态: {{ wsStatus }}</p>
-          <p>最后消息: {{ lastMessage }}</p>
-          <p>服务器: {{ caseList }}</p>
         </div>
       </div>
-      <el-table :data="caseList?.list" border ref="tableRef" show-overflow-tooltip>
+      <el-table :data="caseList" border ref="tableRef" show-overflow-tooltip>
         <el-table-column type="index" label="序号" width="60" />
         <el-table-column prop="id" label="用例编号" width="300" />
         <el-table-column prop="name" label="用例名称" width="180" />
@@ -72,9 +69,12 @@
 <script setup lang="ts">
 import { CaseVO } from '@/api/interface/case'
 import AddDialog from './components/index.vue'
-import caseData from '../data'
+// import caseData from '../data'
 import { wsClient, wsStatus, lastMessage, useWebSocketManager } from '@/utils/webSocket'
+import { useCaseFlowData } from '@/store/caseFlow'
 const { sendMessage, handlerReceiveMessage } = useWebSocketManager()
+
+const useStoreCaseFlowData = useCaseFlowData()
 // 组件加载完成后发送初始消息
 onMounted(() => {
   console.log('组件已加载，发送初始消息')
@@ -82,7 +82,7 @@ onMounted(() => {
     if (wsClient.value && wsStatus.value === '已连接') {
       sendMessage({
         serverName: 'wsClient',
-        type: 'fetchList'
+        type: 'fetch'
       })
     } else {
       console.log('WebSocket 未连接，无法发送初始消息')
@@ -91,13 +91,7 @@ onMounted(() => {
 })
 
 const caseList = computed(() => {
-  return handlerReceiveMessage(lastMessage.value)
-})
-
-// 监听状态变化
-watch(lastMessage, newMessage => {
-  const ddd = handlerReceiveMessage(newMessage)
-  console.log(`WebSocket 最新的newMessagenewMessagenewMessage:`, JSON.stringify(ddd))
+  return useStoreCaseFlowData.getCaseList
 })
 
 // 保存数据时发送消息
@@ -145,7 +139,7 @@ const handleCurrentChange = (_val: number) => {}
 const onSubmit = () => {
   console.log('submit!')
 }
-const tableData: CaseVO[] = caseData.list
+// const tableData: CaseVO[] = caseData.list
 
 // 打开 dialog(新增、查看、编辑)
 const dialogRef = ref<InstanceType<typeof AddDialog> | null>(null)