From 56f94ed7453110a3e475d476e6f4f281305c9f61 Mon Sep 17 00:00:00 2001
From: JINGYJ <1458671527@qq.com>
Date: Fri, 11 Jul 2025 17:42:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BA=8B=E4=BB=B6=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E9=80=BB=E8=BE=91=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/images/common/table_addBtn.png | Bin 0 -> 508 bytes
 .../Design/CommManagement/commManagement.vue  | 258 ++++-----
 .../Design/CommManagement/deviceForm.vue      | 134 +++++
 .../CommManagement/receiveEventForm.vue       | 508 ++++++++++++++++++
 .../Design/CommManagement/sendEventForm.vue   | 441 +++++++++++++++
 5 files changed, 1177 insertions(+), 164 deletions(-)
 create mode 100644 src/renderer/src/assets/images/common/table_addBtn.png
 create mode 100644 src/renderer/src/views/Design/CommManagement/deviceForm.vue
 create mode 100644 src/renderer/src/views/Design/CommManagement/receiveEventForm.vue
 create mode 100644 src/renderer/src/views/Design/CommManagement/sendEventForm.vue

diff --git a/src/renderer/src/assets/images/common/table_addBtn.png b/src/renderer/src/assets/images/common/table_addBtn.png
new file mode 100644
index 0000000000000000000000000000000000000000..074a3d913ff8e0bd98ef07c932079b2e9490dafa
GIT binary patch
literal 508
zcmV<Y0R#StP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0g*{WK~#7F?U%nx
z!$1_rzn5MrXr%?|o;nE94*e6XF5=X!v*4=!1#bQUimTwNo0GWsYjGA@5gcqru?Q_z
z#WptH1=3td!1K~n#C#x-yi4xhz4v{&JK(=V!i>3U)1a1RV3Y$5>~`y9?j~UO4ZM73
zP^upgLKYAYX20L7v`^<v*Pw~5x}Ls>ad3{Ivk8iZp#!;<`!at4al<CaQyg%BY9xm-
zA?i!RFY~t@s4Y#SwwOT_C=@BpPGD~{@7y<<J>0TO1?322C%s=tHj{!Xi3p`NP%Na8
zo$~xGG7Y$tSQ~76_}qCNNNYmM0j_peaA9n(%>-=gJ5M+|@8Ub8Qb6!?WWSM$z~R}8
zQ)<2xu&}!`-`an6+Ff`G8V?^bUCV1A(4mm?Ivf1D{tgwAGE{b;^CpyC_Y<lpuLWEa
z8@nw>3##itBnLRWI--(@(AyJIYGO?AGeW?D$K!&@nl2GDY};>&2NYilQYo^^UqEcw
ySDHpDq9t_A$XA<X+p<QwO}AKz+fI}d{CojpwRBwq<2Q!@0000<MNUMnLSTabOV*hH

literal 0
HcmV?d00001

diff --git a/src/renderer/src/views/Design/CommManagement/commManagement.vue b/src/renderer/src/views/Design/CommManagement/commManagement.vue
index 3faec7a..c1c15c5 100644
--- a/src/renderer/src/views/Design/CommManagement/commManagement.vue
+++ b/src/renderer/src/views/Design/CommManagement/commManagement.vue
@@ -48,158 +48,24 @@
       </div>
       <div class="commManagement-line-second" />
       <div class="commManagement-content">
-        <el-form
-          label-width="auto"
-          size="default"
-          :model="formDeviceInfo"
-          style="max-width: 752px"
-          v-if="activeTab === 'device'"
-        >
-          <div>通信协议</div>
-          <el-row :gutter="24">
-            <el-col :span="12">
-              <el-form-item label="协议类型" label-position="top">
-                <!-- <el-input v-model="formDeviceInfo.protocol" /> -->
-                <el-select
-                  v-model="formDeviceInfo.protocol"
-                  placeholder="Select"
-                  class="device-select"
-                >
-                  <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="设备名称" label-position="top">
-                <el-input v-model="formDeviceInfo.deviceName" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <div>通信参数</div>
-          <el-row :gutter="24">
-            <el-col :span="12">
-              <el-form-item label="目标IP" label-position="top">
-                <el-input v-model="formDeviceInfo.IP" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="目标端口" label-position="top">
-                <el-input v-model="formDeviceInfo.targetPort" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-form-item label="数据上传" label-position="left">
-            <el-switch v-model="formDeviceInfo.dataUpload" />
-          </el-form-item>
-          <el-form-item label="自动重连" label-position="left">
-            <el-switch v-model="formDeviceInfo.reconnect" />
-          </el-form-item>
-          <el-form-item label="接受结束符" label-position="left">
-            <el-switch v-model="formDeviceInfo.acceptEnd" />
-          </el-form-item>
-          <el-form-item v-if="formDeviceInfo.acceptEnd">
-            <el-tabs v-model="dataTab" class="data-tabs" @tab-click="handleClick">
-              <el-tab-pane label="接收数据" name="receive">
-                <el-input
-                  v-model="formDeviceInfo.endInfo"
-                  type="textarea"
-                  resize="none"
-                  class="fixed-height-textarea"
-                  :rows="4"
-                  maxlength="350"
-                />
-              </el-tab-pane>
-              <el-tab-pane label="发送数据" name="send">
-                <el-input
-                  v-model="formDeviceInfo.endInfo"
-                  type="textarea"
-                  resize="none"
-                  class="fixed-height-textarea"
-                  :rows="4"
-                  maxlength="350"
-                />
-              </el-tab-pane>
-            </el-tabs>
-          </el-form-item>
-          <el-row :gutter="20" v-if="formDeviceInfo.acceptEnd">
-            <el-col :span="6">
-              <el-checkbox value="16radix" name="type"> 16进制 </el-checkbox>
-            </el-col>
-            <el-col :span="6" :offset="12">
-              <DSButton type="danger" class="mr-2 form-device-btn">清空内容</DSButton>
-              <DSButton type="danger" class="form-device-btn"> 接收数据</DSButton>
-            </el-col>
-          </el-row>
-        </el-form>
-        <el-form>
-          <el-form
-            label-width="auto"
-            size="default"
-            :model="formEventInfo"
-            style="max-width: 752px"
-            v-if="activeTab === 'receive'"
-          >
-            <el-row :gutter="24">
-              <el-col :span="12">
-                <el-form-item label="绑定设备" label-position="top">
-                  <el-select
-                    v-model="formEventInfo.deviceName"
-                    placeholder="Select"
-                    class="device-select"
-                  >
-                    <el-option
-                      v-for="item in options"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
-                    />
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="分隔符" label-position="top">
-                  <el-select
-                    v-model="formEventInfo.separator"
-                    placeholder="Select"
-                    class="device-select"
-                  >
-                    <el-option
-                      v-for="item in options"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
-                    />
-                  </el-select>
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <el-form-item label="字符长度比较" label-position="left">
-              <el-switch v-model="formEventInfo.lengthCompare" />
-            </el-form-item>
-            <el-row :gutter="24">
-              <el-col :span="12">
-                <el-form-item label="字符长度" label-position="top">
-                  <el-input v-model="formEventInfo.characterLength" />
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <div class="event-table">
-              <div class="mb-2">输出列表</div>
-              <el-table :data="formEventInfo.tableData" class="eventList-table">
-                <el-table-column fixed prop="date" label="序号" />
-                <el-table-column prop="name" label="名称" />
-                <el-table-column prop="state" label="类型" />
-                <el-table-column prop="city" label="结果" />
-              </el-table>
-              <div>添加数据</div>
-            </div>
-          </el-form>
-        </el-form>
+        <!-- 设备表单 -->
+        <DeviceForm v-if="activeTab === 'device'" :form-data="formDeviceInfo" :options="options" />
+        <!-- 接收事件表单 -->
+        <ReceiveEventForm
+          v-if="activeTab === 'receive'"
+          :form-data="formEventInfo"
+          :receive-event-type="receiveEventType"
+          :options="options"
+          @addRow="handleTableAdd"
+        />
+        <!-- 发送事件表单 -->
+        <SendEventForm
+          v-if="activeTab === 'send'"
+          :form-data="formSendEventInfo"
+          :send-event-type="sendEventType"
+          :options="options"
+          @addRow="handleTableAdd"
+        />
       </div>
     </div>
   </DSDialog>
@@ -215,6 +81,9 @@ import { DSButton } from '@/components/Button'
 import { DSDialog } from '@/components/Dialog'
 import DeviceDialog from './deviceDialog.vue'
 import EventDialog from './eventDialog.vue'
+import DeviceForm from './deviceForm.vue'
+import ReceiveEventForm from './receiveEventForm.vue'
+import SendEventForm from './sendEventForm.vue'
 import DeviceIcon from '@/assets/images/common/device.png'
 import DeviceSelectedIcon from '@/assets/images/common/device_selected.png'
 import SendIcon from '@/assets/images/common/send.png'
@@ -323,7 +192,7 @@ const receiveList = ref([
     }
   },
   { name: '文本-协议组装', enabled: false },
-  { name: '字节匹配-协议组装', enabled: false },
+  { name: '字节-协议组装', enabled: false },
   { name: '脚本', enabled: false }
 ])
 // 发送事件列表
@@ -346,7 +215,9 @@ const sendList = ref([
   { name: '脚本', enabled: false }
 ])
 
-const dataTab = ref('receive')
+// 事件类型
+const receiveEventType = ref('')
+const sendEventType = ref('')
 // 设备信息表单
 const formDeviceInfo = reactive({
   protocol: '',
@@ -359,7 +230,22 @@ const formDeviceInfo = reactive({
   endInfo: ''
 })
 // 接收事件信息表单
-const formEventInfo = reactive({})
+const formEventInfo = reactive({
+  deviceName: '',
+  separator: '',
+  lengthCompare: false,
+  characterLength: '',
+  tableData: []
+})
+
+// 发送事件信息表单
+const formSendEventInfo = reactive({
+  deviceName: '',
+  separator: '',
+  lengthCompare: false,
+  characterLength: '',
+  tableData: []
+})
 
 interface CommBar {
   label: string
@@ -397,6 +283,32 @@ const selectDevice = (device: Device) => {
   if (activeTab.value === 'device') {
     Object.assign(formDeviceInfo, device.info)
   } else if (activeTab.value === 'receive') {
+    switch (device.name) {
+      case '文本-协议解析':
+        receiveEventType.value = 'textParse'
+        break
+      case '文本-协议组装':
+        receiveEventType.value = 'textMake'
+        break
+      case '字节-协议组装':
+        receiveEventType.value = 'byteMake'
+        break
+      case '脚本':
+        receiveEventType.value = 'script'
+        break
+    }
+  } else if (activeTab.value === 'send') {
+    switch (device.name) {
+      case '文本-直接输出':
+        sendEventType.value = 'textParse'
+        break
+      case '文本-组装输出':
+        sendEventType.value = 'textMake'
+        break
+      case '脚本':
+        sendEventType.value = 'script'
+        break
+    }
   }
 }
 
@@ -414,6 +326,24 @@ const addDevice = () => {
   console.log(isDeviceDialog.value, 'isDeviceDialog.value')
 }
 
+const handleTableAdd = () => {
+  if (activeTab.value === 'receive') {
+    formEventInfo.tableData.push({
+      num: formEventInfo.tableData.length + 1,
+      name: 'output1',
+      type: 'int',
+      result: ''
+    })
+  } else if (activeTab.value === 'send') {
+    formSendEventInfo.tableData.push({
+      num: formSendEventInfo.tableData.length + 1,
+      name: 'input',
+      type: 'int',
+      result: ''
+    })
+  }
+}
+
 // 接收事件内容
 const receiveData = ref('')
 // 发送事件内容
@@ -537,6 +467,15 @@ const handleClose = () => {
         height: 224px;
         background: #363940;
       }
+      .table-add-btn {
+        box-sizing: border-box;
+        width: 128px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
     }
   }
   .commManagement-line-first,
@@ -551,14 +490,5 @@ const handleClose = () => {
   .commManagement-line-second {
     left: 372px;
   }
-  :deep(.eventList-table .el-table__header > thead th) {
-    color: #fff;
-
-    background-color: rgba(21, 77, 221, 0.8);
-    border-color: #4e5969;
-  }
-  :deep(.el-table--fit .el-table__inner-wrapper:before) {
-    background-color: #4e5969;
-  }
 }
 </style>
diff --git a/src/renderer/src/views/Design/CommManagement/deviceForm.vue b/src/renderer/src/views/Design/CommManagement/deviceForm.vue
new file mode 100644
index 0000000..a71f01e
--- /dev/null
+++ b/src/renderer/src/views/Design/CommManagement/deviceForm.vue
@@ -0,0 +1,134 @@
+<template>
+  <el-form label-width="auto" size="default" :model="formData" style="max-width: 752px">
+    <div>通信协议</div>
+    <el-row :gutter="24">
+      <el-col :span="12">
+        <el-form-item label="协议类型" label-position="top">
+          <el-select v-model="formData.protocol" placeholder="Select" class="device-select">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="设备名称" label-position="top">
+          <el-input v-model="formData.deviceName" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <!-- 其他设备表单内容（通信参数、开关等） -->
+    <div>通信参数</div>
+    <el-row :gutter="24">
+      <el-col :span="12">
+        <el-form-item label="目标IP" label-position="top">
+          <el-input v-model="formData.IP" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="目标端口" label-position="top">
+          <el-input v-model="formData.targetPort" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-form-item label="数据上传" label-position="left">
+      <el-switch v-model="formData.dataUpload" />
+    </el-form-item>
+    <el-form-item label="自动重连" label-position="left">
+      <el-switch v-model="formData.reconnect" />
+    </el-form-item>
+    <el-form-item label="接受结束符" label-position="left">
+      <el-switch v-model="formData.acceptEnd" />
+    </el-form-item>
+    <el-form-item v-if="formData.acceptEnd">
+      <el-tabs v-model="dataTab" class="data-tabs" @tab-click="handleClick">
+        <el-tab-pane label="接收数据" name="receive">
+          <el-input
+            v-model="formData.endInfo"
+            type="textarea"
+            resize="none"
+            class="fixed-height-textarea"
+            :rows="4"
+            maxlength="350"
+          />
+        </el-tab-pane>
+        <el-tab-pane label="发送数据" name="send">
+          <el-input
+            v-model="formData.endInfo"
+            type="textarea"
+            resize="none"
+            class="fixed-height-textarea"
+            :rows="4"
+            maxlength="350"
+          />
+        </el-tab-pane>
+      </el-tabs>
+    </el-form-item>
+    <el-row :gutter="20" v-if="formData.acceptEnd">
+      <el-col :span="6">
+        <el-checkbox value="16radix" name="type"> 16进制 </el-checkbox>
+      </el-col>
+      <el-col :span="6" :offset="12">
+        <DSButton type="danger" class="mr-2 form-device-btn">清空内容</DSButton>
+        <DSButton type="danger" class="form-device-btn"> 接收数据</DSButton>
+      </el-col>
+    </el-row>
+    <!-- 省略剩余设备表单内容（与原代码一致） -->
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { DSButton } from '@/components/Button'
+// 接收父组件传入的表单数据（双向绑定）
+const props = defineProps({
+  formData: {
+    type: Object,
+    required: true
+  },
+  options: {
+    type: Array,
+    default: () => []
+  }
+})
+const dataTab = ref('receive')
+// 暴露表单数据修改事件（可选，用于复杂场景）
+const emit = defineEmits(['update:formData'])
+</script>
+
+<style scoped lang="scss">
+// 复用原有的设备表单样式
+.device-select {
+  color: #fff;
+  :deep(.el-select__wrapper) {
+    background: #303136;
+    .el-select__selected-item {
+      color: #fff;
+    }
+  }
+}
+.data-tabs {
+  width: 100%;
+  :deep(.el-tabs__item) {
+    color: #fff;
+  }
+  :deep(.fixed-height-textarea) {
+    margin-bottom: 8px;
+    height: 110px !important;
+    min-height: 110px !important;
+    max-height: 110px !important;
+    .el-textarea__inner {
+      height: 110px !important;
+      background: #303136;
+      color: #fff;
+    }
+  }
+}
+.form-device-btn {
+  width: 80px;
+  padding: 0 12px;
+}
+/* 其他设备表单相关样式 */
+</style>
diff --git a/src/renderer/src/views/Design/CommManagement/receiveEventForm.vue b/src/renderer/src/views/Design/CommManagement/receiveEventForm.vue
new file mode 100644
index 0000000..3ed02e4
--- /dev/null
+++ b/src/renderer/src/views/Design/CommManagement/receiveEventForm.vue
@@ -0,0 +1,508 @@
+<template>
+  <el-form label-width="auto" size="default" :model="formData" style="max-width: 752px">
+    <!-- 文本协议解析 -->
+    <template v-if="receiveEventType === 'textParse'">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="绑定设备" label-position="top">
+            <el-select v-model="formData.deviceName" placeholder="Select" class="device-select">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="分隔符" label-position="top">
+            <el-select v-model="formData.separator" placeholder="Select" class="device-select">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="字符长度比较" label-position="left">
+        <el-switch v-model="formData.lengthCompare" />
+      </el-form-item>
+      <el-row :gutter="24" v-if="formData.lengthCompare">
+        <el-col :span="12">
+          <el-form-item label="字符长度" label-position="top">
+            <el-input v-model="formData.characterLength" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <div class="event-table">
+        <div class="mb-2">输出列表</div>
+        <el-table :data="formData.tableData" class="eventList-table">
+          <el-table-column fixed prop="num" label="序号" />
+          <el-table-column prop="name" label="名称">
+            <template #default="scope">
+              <el-input v-model="scope.row.name" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="type" label="类型">
+            <template #default="scope">
+              <el-select v-model="scope.row.type" placeholder="Select" class="device-select">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column prop="result" label="结果" />
+        </el-table>
+        <div class="table-add-btn" @click="handleTableAdd">
+          <img
+            src="@/assets/images/common/table_addBtn.png"
+            alt=""
+            class="w-[16px] h-[16px] mr-2"
+          />添加数据
+        </div>
+      </div>
+    </template>
+    <!-- 文本协议组装 -->
+    <template v-if="receiveEventType === 'textMake'">
+      <el-tabs v-model="dataTab" class="data-tabs" @tab-click="handleClick">
+        <el-tab-pane label="输入配置" name="inputConfig"> </el-tab-pane>
+        <el-tab-pane label="组装配置" name="makeConfig"> </el-tab-pane>
+      </el-tabs>
+      <el-form-item label="回复给设备" label-position="left" v-if="dataTab === 'makeConfig'">
+        <el-switch v-model="formData.reply" @change="handleSwitch" />
+      </el-form-item>
+      <el-row :gutter="24">
+        <el-col :span="12" v-if="dataTab == 'inputConfig'">
+          <el-form-item label="绑定设备" label-position="top">
+            <el-select v-model="formData.deviceName" placeholder="Select" class="device-select">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col
+          :span="12"
+          v-if="
+            // 条件1：输入配置标签页 → 始终显示
+            dataTab === 'inputConfig' ||
+            // 条件2：组装配置标签页 + 回复给设备开关打开 → 显示
+            (dataTab === 'makeConfig' && formData.reply)
+          "
+        >
+          <el-form-item label="分隔符" label-position="top">
+            <el-select v-model="formData.separator" placeholder="Select" class="device-select">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="字符长度比较" label-position="left" v-if="dataTab == 'inputConfig'">
+        <el-switch v-model="formData.lengthCompare" />
+      </el-form-item>
+      <el-row :gutter="24" v-if="formData.lengthCompare">
+        <el-col :span="12">
+          <el-form-item label="字符长度" label-position="top">
+            <el-input v-model="formData.characterLength" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <div class="event-table">
+        <div class="mb-2">输出列表</div>
+        <el-table :data="formData.tableData" class="eventList-table">
+          <el-table-column fixed prop="num" label="序号" width="60" />
+          <el-table-column prop="name" label="名称" width="120">
+            <template #default="scope">
+              <el-input v-model="scope.row.name" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="type" label="类型" width="120">
+            <template #default="scope">
+              <el-select v-model="scope.row.type" placeholder="Select" class="device-select">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column prop="result" label="比较规则配置" v-if="dataTab == 'inputConfig'">
+            <template #default="scope">
+              <el-select
+                v-model="scope.row.type"
+                placeholder="Select"
+                class="device-select"
+                style="width: 100px"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+              <el-input
+                v-model="scope.row.name"
+                style="width: 100px; margin-left: 12px; margin-right: 12px"
+              />
+              <el-input v-model="scope.row.name" style="width: 100px" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="name" label="内容" v-if="dataTab == 'makeConfig'">
+            <template #default="scope">
+              <el-input v-model="scope.row.name" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="result" width="60"></el-table-column>
+        </el-table>
+        <div class="table-add-btn" @click="handleTableAdd">
+          <img
+            src="@/assets/images/common/table_addBtn.png"
+            alt=""
+            class="w-[16px] h-[16px] mr-2"
+          />添加数据
+        </div>
+      </div>
+    </template>
+    <!-- 字节协议组装 -->
+    <template v-if="receiveEventType === 'byteMake'">
+      <el-tabs v-model="dataTab" class="data-tabs" @tab-click="handleClick">
+        <el-tab-pane label="解析配置" name="inputConfig"> </el-tab-pane>
+        <el-tab-pane label="组装配置" name="makeConfig"> </el-tab-pane>
+      </el-tabs>
+      <el-form-item label="回复给设备" label-position="left" v-if="dataTab === 'makeConfig'">
+        <el-switch v-model="formData.reply" @change="handleSwitch" />
+      </el-form-item>
+      <el-row :gutter="24">
+        <el-col :span="12" v-if="dataTab == 'inputConfig'">
+          <el-form-item label="绑定设备" label-position="top">
+            <el-select v-model="formData.deviceName" placeholder="Select" class="device-select">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" v-if="dataTab === 'makeConfig' && formData.reply">
+          <el-form-item label="分隔符" label-position="top">
+            <el-select v-model="formData.separator" placeholder="Select" class="device-select">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="字符长度比较" label-position="left" v-if="dataTab == 'inputConfig'">
+        <el-switch v-model="formData.lengthCompare" />
+      </el-form-item>
+      <el-row :gutter="24" v-if="formData.lengthCompare">
+        <el-col :span="12">
+          <el-form-item label="字符长度" label-position="top">
+            <el-input v-model="formData.characterLength" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="ASCII数据" label-position="left" v-if="dataTab == 'inputConfig'">
+        <el-switch v-model="formData.ASCII" />
+      </el-form-item>
+      <el-row :gutter="24">
+        <el-col :span="12" v-if="dataTab == 'inputConfig'">
+          <el-form-item label="规则匹配逻辑" label-position="top">
+            <el-select v-model="formData.ruleMatch" placeholder="Select" class="device-select">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <div class="event-table">
+        <div class="mb-2">输出列表</div>
+        <el-table :data="formData.tableData" class="eventList-table">
+          <el-table-column fixed prop="num" label="序号" width="60" />
+          <template v-if="dataTab == 'inputConfig'">
+            <el-table-column prop="name" label="名称" width="80">
+              <template #default="scope">
+                <el-input v-model="scope.row.name" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="字节起始位置" width="150">
+              <template #default="scope">
+                <el-input v-model="scope.row.name" style="width: 50px; margin-right: 12px" />
+                <el-input v-model="scope.row.name" style="width: 50px" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="type" label="类型" width="90">
+              <template #default="scope">
+                <el-select v-model="scope.row.type" placeholder="int" class="device-select">
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column prop="type" label="顺序" width="90">
+              <template #default="scope">
+                <el-select v-model="scope.row.type" placeholder="int" class="device-select">
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column prop="result" label="比较规则配置">
+              <template #default="scope">
+                <el-select
+                  v-model="scope.row.type"
+                  placeholder="不比较"
+                  class="device-select"
+                  style="width: 70px"
+                >
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+                <el-input
+                  v-model="scope.row.name"
+                  style="width: 50px; margin-left: 12px; margin-right: 12px"
+                />
+                <el-input v-model="scope.row.name" style="width: 50px" />
+              </template>
+            </el-table-column>
+          </template>
+          <template v-if="dataTab == 'makeConfig'">
+            <el-table-column prop="name" label="名称" width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.name" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="type" label="类型" width="120">
+              <template #default="scope">
+                <el-select v-model="scope.row.type" placeholder="Select" class="device-select">
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="内容">
+              <template #default="scope">
+                <el-input v-model="scope.row.name" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="result" label="结果"></el-table-column>
+          </template>
+          <el-table-column prop="result" width="60"></el-table-column>
+        </el-table>
+        <div class="table-add-btn" @click="handleTableAdd">
+          <img
+            src="@/assets/images/common/table_addBtn.png"
+            alt=""
+            class="w-[16px] h-[16px] mr-2"
+          />添加数据
+        </div>
+      </div>
+    </template>
+    <!-- 脚本 -->
+    <template v-if="receiveEventType === 'script'">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="绑定设备" label-position="top">
+            <el-select v-model="formData.deviceName" placeholder="Select" class="device-select">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="回复给设备" label-position="left" v-if="dataTab === 'makeConfig'">
+        <el-switch v-model="formData.reply" @change="handleSwitch" />
+      </el-form-item>
+      <el-row :gutter="24" v-if="formData.reply">
+        <el-col :span="12">
+          <el-form-item label="分隔符" label-position="top">
+            <el-select v-model="formData.separator" placeholder="Select" class="device-select">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="载入路径" label-position="top">
+            <el-select v-model="formData.loadingPath" placeholder="Select" class="device-select">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <div class="event-table">
+        <div class="mb-2">组装列表</div>
+        <el-table :data="formData.tableData" class="eventList-table">
+          <el-table-column fixed prop="num" label="序号" width="60" />
+          <el-table-column prop="name" label="名称">
+            <template #default="scope">
+              <el-input v-model="scope.row.name" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="type" label="类型">
+            <template #default="scope">
+              <el-select v-model="scope.row.type" placeholder="Select" class="device-select">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column prop="result" label="结果"></el-table-column>
+        </el-table>
+      </div>
+    </template>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const props = defineProps({
+  formData: {
+    type: Object,
+    required: true
+  },
+  receiveEventType: {
+    type: String,
+    required: true
+  },
+  options: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const dataTab = ref('inputConfig')
+// 表格添加数据方法
+const emit = defineEmits(['addRow'])
+const handleTableAdd = () => {
+  emit('addRow') // 通知父组件添加行（或直接在组件内处理）
+}
+const handleClick = (tab: any) => {
+  dataTab.value = tab.props.name
+}
+const handleSwitch = (val: any) => {
+  console.log(val)
+}
+</script>
+
+<style scoped lang="scss">
+// 复用原有的接收事件表单样式
+.device-select {
+  color: #fff;
+  :deep(.el-select__wrapper) {
+    background: #303136;
+    .el-select__selected-item {
+      color: #fff;
+    }
+  }
+}
+.data-tabs {
+  width: 100%;
+  :deep(.el-tabs__item) {
+    color: #fff;
+  }
+}
+.event-table {
+  .eventList-table {
+    width: 100%;
+    height: 240px;
+    background: #363940;
+  }
+  .table-add-btn {
+    /* 按钮样式 */
+    box-sizing: border-box;
+    width: 128px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+}
+:deep(.eventList-table .el-table__header > thead th) {
+  color: #fff;
+  background-color: rgba(21, 77, 221, 0.1);
+  border-color: #4e5969;
+}
+:deep(.eventList-table .el-table__header > thead tr) {
+  background: transparent;
+}
+:deep(.eventList-table .el-table__body > tbody tr) {
+  color: #fff;
+  background-color: transparent;
+  & > td {
+    border: none;
+  }
+}
+:deep(.eventList-table .el-table__body .hover-row) {
+  & > td {
+    background: #303136;
+  }
+}
+:deep(.el-table--fit .el-table__inner-wrapper:before) {
+  background-color: #4e5969;
+}
+</style>
diff --git a/src/renderer/src/views/Design/CommManagement/sendEventForm.vue b/src/renderer/src/views/Design/CommManagement/sendEventForm.vue
new file mode 100644
index 0000000..592d746
--- /dev/null
+++ b/src/renderer/src/views/Design/CommManagement/sendEventForm.vue
@@ -0,0 +1,441 @@
+<template>
+  <el-form label-width="auto" size="default" :model="formData" style="max-width: 752px">
+    <!-- 文本直接输出 -->
+    <template v-if="sendEventType === 'textParse'">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="绑定设备" label-position="top">
+            <el-select v-model="formData.deviceName" placeholder="Select" class="device-select">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="分隔符" label-position="top">
+            <el-select v-model="formData.separator" placeholder="Select" class="device-select">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="字符长度比较" label-position="left">
+        <el-switch v-model="formData.lengthCompare" />
+      </el-form-item>
+      <el-row :gutter="24" v-if="formData.lengthCompare">
+        <el-col :span="12">
+          <el-form-item label="字符长度" label-position="top">
+            <el-input v-model="formData.characterLength" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <div class="event-table">
+        <div class="mb-2">输出列表</div>
+        <el-table :data="formData.tableData" class="eventList-table">
+          <el-table-column fixed prop="num" label="序号" />
+          <el-table-column prop="name" label="名称">
+            <template #default="scope">
+              <el-input v-model="scope.row.name" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="type" label="类型">
+            <template #default="scope">
+              <el-select v-model="scope.row.type" placeholder="Select" class="device-select">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column prop="result" />
+        </el-table>
+        <div class="table-add-btn" @click="handleTableAdd">
+          <img
+            src="@/assets/images/common/table_addBtn.png"
+            alt=""
+            class="w-[16px] h-[16px] mr-2"
+          />添加数据
+        </div>
+      </div>
+    </template>
+    <!-- 文本组装输出 -->
+    <template v-if="sendEventType === 'textMake'">
+      <el-tabs v-model="dataTab" class="data-tabs" @tab-click="handleClick">
+        <el-tab-pane label="输入配置" name="inputConfig"> </el-tab-pane>
+        <el-tab-pane label="组装配置" name="makeConfig"> </el-tab-pane>
+      </el-tabs>
+      <el-row :gutter="24">
+        <el-col :span="12" v-if="dataTab == 'inputConfig'">
+          <el-form-item label="绑定设备" label-position="top">
+            <el-select v-model="formData.deviceName" placeholder="Select" class="device-select">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" v-if="dataTab === 'makeConfig'">
+          <el-form-item label="分隔符" label-position="top">
+            <el-select v-model="formData.separator" placeholder="Select" class="device-select">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <div class="event-table">
+        <div class="mb-2">输出列表</div>
+        <el-table :data="formData.tableData" class="eventList-table">
+          <el-table-column fixed prop="num" label="序号" width="60" />
+          <el-table-column prop="name" label="名称">
+            <template #default="scope">
+              <el-input v-model="scope.row.name" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="type" label="类型">
+            <template #default="scope">
+              <el-select v-model="scope.row.type" placeholder="Select" class="device-select">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column prop="result"></el-table-column>
+        </el-table>
+        <div class="table-add-btn" @click="handleTableAdd">
+          <img
+            src="@/assets/images/common/table_addBtn.png"
+            alt=""
+            class="w-[16px] h-[16px] mr-2"
+          />添加数据
+        </div>
+      </div>
+    </template>
+    <!-- 字节协议组装 -->
+    <template v-if="sendEventType === 'byteMake'">
+      <el-tabs v-model="dataTab" class="data-tabs" @tab-click="handleClick">
+        <el-tab-pane label="解析配置" name="inputConfig"> </el-tab-pane>
+        <el-tab-pane label="组装配置" name="makeConfig"> </el-tab-pane>
+      </el-tabs>
+      <el-form-item label="回复给设备" label-position="left" v-if="dataTab === 'makeConfig'">
+        <el-switch v-model="formData.reply" @change="handleSwitch" />
+      </el-form-item>
+      <el-row :gutter="24">
+        <el-col :span="12" v-if="dataTab == 'inputConfig'">
+          <el-form-item label="绑定设备" label-position="top">
+            <el-select v-model="formData.deviceName" placeholder="Select" class="device-select">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" v-if="dataTab === 'makeConfig' && formData.reply">
+          <el-form-item label="分隔符" label-position="top">
+            <el-select v-model="formData.separator" placeholder="Select" class="device-select">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="字符长度比较" label-position="left" v-if="dataTab == 'inputConfig'">
+        <el-switch v-model="formData.lengthCompare" />
+      </el-form-item>
+      <el-row :gutter="24" v-if="formData.lengthCompare">
+        <el-col :span="12">
+          <el-form-item label="字符长度" label-position="top">
+            <el-input v-model="formData.characterLength" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="ASCII数据" label-position="left" v-if="dataTab == 'inputConfig'">
+        <el-switch v-model="formData.ASCII" />
+      </el-form-item>
+      <el-row :gutter="24">
+        <el-col :span="12" v-if="dataTab == 'inputConfig'">
+          <el-form-item label="规则匹配逻辑" label-position="top">
+            <el-select v-model="formData.ruleMatch" placeholder="Select" class="device-select">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <div class="event-table">
+        <div class="mb-2">输出列表</div>
+        <el-table :data="formData.tableData" class="eventList-table">
+          <el-table-column fixed prop="num" label="序号" width="60" />
+          <template v-if="dataTab == 'inputConfig'">
+            <el-table-column prop="name" label="名称" width="80">
+              <template #default="scope">
+                <el-input v-model="scope.row.name" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="字节起始位置" width="150">
+              <template #default="scope">
+                <el-input v-model="scope.row.name" style="width: 50px; margin-right: 12px" />
+                <el-input v-model="scope.row.name" style="width: 50px" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="type" label="类型" width="90">
+              <template #default="scope">
+                <el-select v-model="scope.row.type" placeholder="int" class="device-select">
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column prop="type" label="顺序" width="90">
+              <template #default="scope">
+                <el-select v-model="scope.row.type" placeholder="int" class="device-select">
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column prop="result" label="比较规则配置">
+              <template #default="scope">
+                <el-select
+                  v-model="scope.row.type"
+                  placeholder="不比较"
+                  class="device-select"
+                  style="width: 70px"
+                >
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+                <el-input
+                  v-model="scope.row.name"
+                  style="width: 50px; margin-left: 12px; margin-right: 12px"
+                />
+                <el-input v-model="scope.row.name" style="width: 50px" />
+              </template>
+            </el-table-column>
+          </template>
+          <template v-if="dataTab == 'makeConfig'">
+            <el-table-column prop="name" label="名称" width="120">
+              <template #default="scope">
+                <el-input v-model="scope.row.name" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="type" label="类型" width="120">
+              <template #default="scope">
+                <el-select v-model="scope.row.type" placeholder="Select" class="device-select">
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="内容">
+              <template #default="scope">
+                <el-input v-model="scope.row.name" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="result" label="结果"></el-table-column>
+          </template>
+          <el-table-column prop="result" width="60"></el-table-column>
+        </el-table>
+        <div class="table-add-btn" @click="handleTableAdd">
+          <img
+            src="@/assets/images/common/table_addBtn.png"
+            alt=""
+            class="w-[16px] h-[16px] mr-2"
+          />添加数据
+        </div>
+      </div>
+    </template>
+    <!-- 脚本 -->
+    <template v-if="sendEventType === 'script'">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="绑定设备" label-position="top">
+            <el-select v-model="formData.deviceName" placeholder="Select" class="device-select">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="载入路径" label-position="top">
+            <el-select v-model="formData.loadingPath" placeholder="Select" class="device-select">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <div class="event-table">
+        <div class="mb-2">组装列表</div>
+        <el-table :data="formData.tableData" class="eventList-table">
+          <el-table-column fixed prop="num" label="序号" width="60" />
+          <el-table-column prop="name" label="名称">
+            <template #default="scope">
+              <el-input v-model="scope.row.name" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="type" label="类型">
+            <template #default="scope">
+              <el-select v-model="scope.row.type" placeholder="Select" class="device-select">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column prop="result" label="数据结果"></el-table-column>
+        </el-table>
+      </div>
+    </template>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  formData: {
+    type: Object,
+    required: true
+  },
+  sendEventType: {
+    type: String,
+    required: true
+  },
+  options: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const dataTab = ref('inputConfig')
+// 表格添加数据方法
+const emit = defineEmits(['addRow'])
+const handleTableAdd = () => {
+  emit('addRow') // 通知父组件添加行（或直接在组件内处理）
+}
+const handleClick = (tab: any) => {
+  dataTab.value = tab.props.name
+}
+const handleSwitch = (val: any) => {
+  console.log(val)
+}
+</script>
+
+<style scoped lang="scss">
+// 复用原有的接收事件表单样式
+.device-select {
+  color: #fff;
+  :deep(.el-select__wrapper) {
+    background: #303136;
+    .el-select__selected-item {
+      color: #fff;
+    }
+  }
+}
+.data-tabs {
+  width: 100%;
+  :deep(.el-tabs__item) {
+    color: #fff;
+  }
+}
+.event-table {
+  .eventList-table {
+    width: 100%;
+    height: 240px;
+    background: #363940;
+  }
+  .table-add-btn {
+    /* 按钮样式 */
+    box-sizing: border-box;
+    width: 128px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+}
+:deep(.eventList-table .el-table__header > thead th) {
+  color: #fff;
+  background-color: rgba(21, 77, 221, 0.1);
+  border-color: #4e5969;
+}
+:deep(.eventList-table .el-table__header > thead tr) {
+  background: transparent;
+}
+:deep(.eventList-table .el-table__body > tbody tr) {
+  color: #fff;
+  background-color: transparent;
+  & > td {
+    border: none;
+  }
+}
+:deep(.eventList-table .el-table__body .hover-row) {
+  & > td {
+    background: #303136;
+  }
+}
+:deep(.el-table--fit .el-table__inner-wrapper:before) {
+  background-color: #4e5969;
+}
+</style>